diff --git a/app/Http/Controllers/Api/V1/ClientController.php b/app/Http/Controllers/Api/V1/ClientController.php
index aab39077..b992ca6e 100644
--- a/app/Http/Controllers/Api/V1/ClientController.php
+++ b/app/Http/Controllers/Api/V1/ClientController.php
@@ -50,7 +50,7 @@ public function index(Organization $organization, ClientIndexRequest $request):
             $clientsQuery->whereNull('archived_at');
         }
 
-        $clients = $clientsQuery->orderBy('name')->paginate(config('app.pagination_per_page_default'));
+        $clients = $clientsQuery->paginate(config('app.pagination_per_page_default'));
 
         return new ClientCollection($clients);
     }
diff --git a/app/Http/Controllers/Api/V1/ProjectController.php b/app/Http/Controllers/Api/V1/ProjectController.php
index 4d1efc5c..72ee24f7 100644
--- a/app/Http/Controllers/Api/V1/ProjectController.php
+++ b/app/Http/Controllers/Api/V1/ProjectController.php
@@ -60,7 +60,7 @@ public function index(Organization $organization, ProjectIndexRequest $request):
             $projectsQuery->whereNull('archived_at');
         }
 
-        $projects = $projectsQuery->orderBy('name')->paginate(config('app.pagination_per_page_default'));
+        $projects = $projectsQuery->paginate(config('app.pagination_per_page_default'));
 
         $showBillableRate = $this->member($organization)->role !== Role::Employee->value || $organization->employees_can_see_billable_rates;
 
diff --git a/resources/js/Components/Common/Client/ClientTable.vue b/resources/js/Components/Common/Client/ClientTable.vue
index d9fa00ce..cb1098e8 100644
--- a/resources/js/Components/Common/Client/ClientTable.vue
+++ b/resources/js/Components/Common/Client/ClientTable.vue
@@ -2,48 +2,54 @@
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import { UserCircleIcon } from '@heroicons/vue/24/solid';
 import { PlusIcon } from '@heroicons/vue/16/solid';
-import { type Component, ref } from 'vue';
+import { type Component, ref, computed } from 'vue';
 import { type Client } from '@/packages/api/src';
 import ClientTableRow from '@/Components/Common/Client/ClientTableRow.vue';
 import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue';
 import ClientTableHeading from '@/Components/Common/Client/ClientTableHeading.vue';
 import { canCreateClients } from '@/utils/permissions';
 
-defineProps<{
-    clients: Client[];
+const props = defineProps<{
+  clients: Client[];
 }>();
+
 const createClient = ref(false);
+
+const sortedClients = computed(() => {
+  return [...props.clients].sort((a, b) => a.name.localeCompare(b.name));
+});
 </script>
 
 <template>
-    <ClientCreateModal v-model:show="createClient"></ClientCreateModal>
-    <div class="flow-root max-w-[100vw] overflow-x-auto">
-        <div class="inline-block min-w-full align-middle">
-            <div
-                data-testid="client_table"
-                class="grid min-w-full"
-                style="grid-template-columns: 1fr 150px 200px 80px">
-                <ClientTableHeading></ClientTableHeading>
-                <div
-                    v-if="clients.length === 0"
-                    class="col-span-2 py-24 text-center">
-                    <UserCircleIcon
-                        class="w-8 text-icon-default inline pb-2"></UserCircleIcon>
-                    <h3 class="text-text-primary font-semibold">No clients found</h3>
-                    <p v-if="canCreateClients()" class="pb-5">
-                        Create your first client now!
-                    </p>
-                    <SecondaryButton
-                        v-if="canCreateClients()"
-                        :icon="PlusIcon as Component"
-                        @click="createClient = true"
-                        >Create your First Client
-                    </SecondaryButton>
-                </div>
-                <template v-for="client in clients" :key="client.id">
-                    <ClientTableRow :client="client"></ClientTableRow>
-                </template>
-            </div>
+  <ClientCreateModal v-model:show="createClient"></ClientCreateModal>
+  <div class="flow-root max-w-[100vw] overflow-x-auto">
+    <div class="inline-block min-w-full align-middle">
+      <div
+          data-testid="client_table"
+          class="grid min-w-full"
+          style="grid-template-columns: 1fr 150px 200px 80px">
+        <ClientTableHeading></ClientTableHeading>
+
+        <div
+            v-if="sortedClients.length === 0"
+            class="col-span-2 py-24 text-center">
+          <UserCircleIcon class="w-8 text-icon-default inline pb-2"></UserCircleIcon>
+          <h3 class="text-text-primary font-semibold">No clients found</h3>
+          <p v-if="canCreateClients()" class="pb-5">
+            Create your first client now!
+          </p>
+          <SecondaryButton
+              v-if="canCreateClients()"
+              :icon="PlusIcon as Component"
+              @click="createClient = true">
+            Create your First Client
+          </SecondaryButton>
         </div>
+
+        <template v-for="client in sortedClients" :key="client.id">
+          <ClientTableRow :client="client"></ClientTableRow>
+        </template>
+      </div>
     </div>
-</template>
+  </div>
+</template>
\ No newline at end of file
diff --git a/resources/js/Components/Common/Project/ProjectTable.vue b/resources/js/Components/Common/Project/ProjectTable.vue
index a5528ae9..7d97db8e 100644
--- a/resources/js/Components/Common/Project/ProjectTable.vue
+++ b/resources/js/Components/Common/Project/ProjectTable.vue
@@ -36,10 +36,15 @@ async function createClient(
     return await useClientsStore().createClient(client);
 }
 const { clients } = storeToRefs(useClientsStore());
+
 const gridTemplate = computed(() => {
     return `grid-template-columns: minmax(300px, 1fr) minmax(150px, auto) minmax(140px, auto) minmax(130px, auto) ${props.showBillableRate ? 'minmax(130px, auto)' : ''} minmax(120px, auto) 80px;`;
 });
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
+
+const sortedProjects = computed(() => {
+  return [...props.projects].sort((a, b) => a.name.localeCompare(b.name));
+});
 </script>
 
 <template>
@@ -86,7 +91,7 @@ import { isAllowedToPerformPremiumAction } from '@/utils/billing';
                         >Create your First Project
                     </SecondaryButton>
                 </div>
-                <template v-for="project in projects" :key="project.id">
+                <template v-for="project in sortedProjects" :key="project.id">
                     <ProjectTableRow
                         :show-billable-rate="props.showBillableRate"
                         :project="project"></ProjectTableRow>