diff --git a/e2e/projects.spec.ts b/e2e/projects.spec.ts
index 36e52569..937ce670 100644
--- a/e2e/projects.spec.ts
+++ b/e2e/projects.spec.ts
@@ -65,3 +65,7 @@ test('test that creating and deleting a new project via the modal works', async
 // Test that active / archive / all filter works (once implemented)
 
 // Edit Project Modal Test
+
+// Add Project with billable rate
+
+// Edit Project with billable rate
diff --git a/resources/js/Components/Common/Project/ProjectCreateModal.vue b/resources/js/Components/Common/Project/ProjectCreateModal.vue
index 96fd2069..682cc381 100644
--- a/resources/js/Components/Common/Project/ProjectCreateModal.vue
+++ b/resources/js/Components/Common/Project/ProjectCreateModal.vue
@@ -14,6 +14,7 @@ import Badge from '@/Components/Common/Badge.vue';
 import { useClientsStore } from '@/utils/useClients';
 import { storeToRefs } from 'pinia';
 import ProjectColorSelector from '@/Components/Common/Project/ProjectColorSelector.vue';
+import BillableRateInput from '@/Components/Common/BillableRateInput.vue';
 
 const { createProject } = useProjectsStore();
 const { clients } = storeToRefs(useClientsStore());
@@ -59,10 +60,11 @@ const currentClientName = computed(() => {
         </template>
 
         <template #content>
-            <div class="flex items-center space-x-4">
-                <ProjectColorSelector
-                    v-model="project.color"></ProjectColorSelector>
-                <div class="col-span-6 sm:col-span-4 flex-1">
+            <div
+                class="sm:flex items-center space-y-2 sm:space-y-0 sm:space-x-4">
+                <div class="flex-1 flex items-center">
+                    <ProjectColorSelector
+                        v-model="project.color"></ProjectColorSelector>
                     <TextInput
                         id="projectName"
                         ref="projectNameInput"
@@ -74,7 +76,10 @@ const currentClientName = computed(() => {
                         required
                         autocomplete="projectName" />
                 </div>
-                <div class="col-span-6 sm:col-span-4">
+                <div class="sm:max-w-[120px]">
+                    <BillableRateInput v-model="project.billable_rate" />
+                </div>
+                <div>
                     <ClientDropdown v-model="project.client_id">
                         <template #trigger>
                             <Badge size="large">
diff --git a/resources/js/Components/Common/Project/ProjectEditModal.vue b/resources/js/Components/Common/Project/ProjectEditModal.vue
index 1ea033ea..fe45bb8e 100644
--- a/resources/js/Components/Common/Project/ProjectEditModal.vue
+++ b/resources/js/Components/Common/Project/ProjectEditModal.vue
@@ -12,6 +12,8 @@ import { twMerge } from 'tailwind-merge';
 import Badge from '@/Components/Common/Badge.vue';
 import { useClientsStore } from '@/utils/useClients';
 import { storeToRefs } from 'pinia';
+import BillableRateInput from '@/Components/Common/BillableRateInput.vue';
+import ProjectColorSelector from '@/Components/Common/Project/ProjectColorSelector.vue';
 
 const { updateProject } = useProjectsStore();
 const { clients } = storeToRefs(useClientsStore());
@@ -57,16 +59,13 @@ const currentClientName = computed(() => {
         </template>
 
         <template #content>
-            <div class="flex items-center space-x-4">
-                <div class="px-3">
-                    <div
-                        :style="{
-                            backgroundColor: project.color,
-                            boxShadow: `var(--tw-ring-inset) 0 0 0 calc(5px + var(--tw-ring-offset-width)) ${project.color}30`,
-                        }"
-                        class="w-4 h-4 rounded-full"></div>
-                </div>
-                <div class="col-span-6 sm:col-span-4 flex-1">
+            <div
+                class="sm:flex items-center space-y-2 sm:space-y-0 sm:space-x-4">
+                <div class="flex-1 flex items-center">
+                    <div class="px-3">
+                        <ProjectColorSelector
+                            v-model="project.color"></ProjectColorSelector>
+                    </div>
                     <TextInput
                         id="projectName"
                         ref="projectNameInput"
@@ -78,7 +77,10 @@ const currentClientName = computed(() => {
                         required
                         autocomplete="projectName" />
                 </div>
-                <div class="col-span-6 sm:col-span-4">
+                <div class="sm:max-w-[120px]">
+                    <BillableRateInput v-model="project.billable_rate" />
+                </div>
+                <div class="">
                     <ClientDropdown v-model="project.client_id">
                         <template #trigger>
                             <Badge size="large">
@@ -96,7 +98,7 @@ const currentClientName = computed(() => {
             </div>
         </template>
         <template #footer>
-            <SecondaryButton @click="show = false"> Cancel </SecondaryButton>
+            <SecondaryButton @click="show = false"> Cancel</SecondaryButton>
 
             <PrimaryButton
                 class="ms-3"
diff --git a/resources/js/Components/Common/Project/ProjectTableRow.vue b/resources/js/Components/Common/Project/ProjectTableRow.vue
index 33bb0d67..3e975394 100644
--- a/resources/js/Components/Common/Project/ProjectTableRow.vue
+++ b/resources/js/Components/Common/Project/ProjectTableRow.vue
@@ -9,6 +9,7 @@ import { useTasksStore } from '@/utils/useTasks';
 import { useProjectsStore } from '@/utils/useProjects';
 import TableRow from '@/Components/TableRow.vue';
 import ProjectEditModal from '@/Components/Common/Project/ProjectEditModal.vue';
+import { formatCents } from '@/utils/money';
 
 const { clients } = storeToRefs(useClientsStore());
 const { tasks } = storeToRefs(useTasksStore());
@@ -37,8 +38,8 @@ const showEditProjectModal = ref(false);
 
 <template>
     <ProjectEditModal
-        :original-project="project"
-        :show="showEditProjectModal"></ProjectEditModal>
+        v-model:show="showEditProjectModal"
+        :original-project="project"></ProjectEditModal>
     <TableRow :href="route('projects.show', { project: project.id })">
         <div
             class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
@@ -60,7 +61,11 @@ const showEditProjectModal = ref(false);
             <div v-else>No client</div>
         </div>
         <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
-            {{ project.billable_rate ?? '--' }}
+            {{
+                project.billable_rate
+                    ? formatCents(project.billable_rate)
+                    : '--'
+            }}
         </div>
         <div
             class="whitespace-nowrap px-3 py-4 text-sm text-muted flex space-x-1 items-center font-medium">