diff --git a/e2e/projects.spec.ts b/e2e/projects.spec.ts
index cbb7e5b1..90e72c51 100644
--- a/e2e/projects.spec.ts
+++ b/e2e/projects.spec.ts
@@ -54,6 +54,37 @@ test('test that creating and deleting a new project via the modal works', async
     );
 });
 
+test('test that archiving and unarchiving projects works', async ({ page }) => {
+    const newProjectName =
+        'New Project ' + Math.floor(1 + Math.random() * 10000);
+    await goToProjectsOverview(page);
+    await page.getByRole('button', { name: 'Create Project' }).click();
+    await page.getByLabel('Project Name').fill(newProjectName);
+
+    await page.getByRole('button', { name: 'Create Project' }).nth(1).click();
+    await expect(page.getByText(newProjectName)).toBeVisible();
+
+    await page.getByRole('row').first().getByRole('button').click();
+    await Promise.all([
+        page.getByRole('button').getByText('Archive').first().click(),
+        expect(page.getByText(newProjectName)).not.toBeVisible(),
+    ]);
+    await Promise.all([
+        page.getByRole('tab', { name: 'Archived' }).click(),
+        expect(page.getByText(newProjectName)).toBeVisible(),
+    ]);
+
+    await page.getByRole('row').first().getByRole('button').click();
+    await Promise.all([
+        page.getByRole('button').getByText('Unarchive').first().click(),
+        expect(page.getByText(newProjectName)).not.toBeVisible(),
+    ]);
+    await Promise.all([
+        page.getByRole('tab', { name: 'Active' }).click(),
+        expect(page.getByText(newProjectName)).toBeVisible(),
+    ]);
+});
+
 // Create new project with new Client
 
 // Create new project with existing Client
diff --git a/e2e/tasks.spec.ts b/e2e/tasks.spec.ts
index f36c070f..c8806eb8 100644
--- a/e2e/tasks.spec.ts
+++ b/e2e/tasks.spec.ts
@@ -98,6 +98,47 @@ test('test that creating and deleting a new tag in a new project works', async (
     );
 });
 
+test('test that archiving and unarchiving tasks works', async ({ page }) => {
+    const newProjectName =
+        'New Project ' + Math.floor(1 + Math.random() * 10000);
+    const newTaskName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
+
+    await goToProjectsOverview(page);
+    await page.getByRole('button', { name: 'Create Project' }).click();
+    await page.getByLabel('Project Name').fill(newProjectName);
+
+    await page.getByRole('button', { name: 'Create Project' }).nth(1).click();
+    await expect(page.getByText(newProjectName)).toBeVisible();
+
+    await page.getByText(newProjectName).click();
+
+    await page.getByRole('button', { name: 'Create Task' }).click();
+    await page.getByPlaceholder('Task Name').fill(newTaskName);
+    await page.getByRole('button', { name: 'Create Task' }).nth(1).click();
+
+    await expect(page.getByRole('table')).toContainText(newTaskName);
+
+    await page.getByRole('row').first().getByRole('button').click();
+    await Promise.all([
+        page.getByRole('button').getByText('Mark as done').first().click(),
+        expect(page.getByText(newTaskName)).not.toBeVisible(),
+    ]);
+    await Promise.all([
+        page.getByRole('tab', { name: 'Done' }).click(),
+        expect(page.getByText(newTaskName)).toBeVisible(),
+    ]);
+
+    await page.getByRole('row').first().getByRole('button').click();
+    await Promise.all([
+        page.getByRole('button').getByText('Mark as active').first().click(),
+        expect(page.getByText(newTaskName)).not.toBeVisible(),
+    ]);
+    await Promise.all([
+        page.getByRole('tab', { name: 'Active' }).click(),
+        expect(page.getByText(newTaskName)).toBeVisible(),
+    ]);
+});
+
 // Create new project with new Client
 
 // Create new project with existing Client
diff --git a/resources/js/Components/Common/CardTitle.vue b/resources/js/Components/Common/CardTitle.vue
index 81afe235..d92f0891 100644
--- a/resources/js/Components/Common/CardTitle.vue
+++ b/resources/js/Components/Common/CardTitle.vue
@@ -19,7 +19,7 @@ defineProps<{
                 {{ title }}
             </span>
         </h3>
-        <div>
+        <div class="flex-1 flex justify-end items-center">
             <slot name="actions"></slot>
         </div>
     </div>
diff --git a/resources/js/Components/Common/Project/ProjectMoreOptionsDropdown.vue b/resources/js/Components/Common/Project/ProjectMoreOptionsDropdown.vue
index 21dff5c5..b775fd2e 100644
--- a/resources/js/Components/Common/Project/ProjectMoreOptionsDropdown.vue
+++ b/resources/js/Components/Common/Project/ProjectMoreOptionsDropdown.vue
@@ -1,11 +1,16 @@
 <script setup lang="ts">
 import Dropdown from '@/Components/Dropdown.vue';
-import { TrashIcon, PencilSquareIcon } from '@heroicons/vue/20/solid';
+import {
+    TrashIcon,
+    PencilSquareIcon,
+    ArchiveBoxIcon,
+} from '@heroicons/vue/20/solid';
 import type { Project } from '@/utils/api';
 import { canDeleteProjects, canUpdateProjects } from '@/utils/permissions';
 const emit = defineEmits<{
     delete: [];
     edit: [];
+    archive: [];
 }>();
 const props = defineProps<{
     project: Project;
@@ -15,20 +20,23 @@ const props = defineProps<{
 <template>
     <Dropdown>
         <template #trigger>
-            <svg
+            <button
+                class="focus-visible:outline-none focus-visible:bg-card-background rounded-full focus-visible:ring-1 focus-visible:ring-input-border-active focus-visible:opacity-100 hover:bg-card-background group-hover:opacity-100 opacity-20 transition-opacity"
                 data-testid="project_actions"
-                :aria-label="'Actions for Project ' + props.project.name"
-                class="h-10 w-10 p-2 rounded-full hover:bg-card-background opacity-20 group-hover:opacity-100 transition"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <path
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                    d="M12 5.92A.96.96 0 1 0 12 4a.96.96 0 0 0 0 1.92m0 7.04a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92M12 20a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92" />
-            </svg>
+                :aria-label="'Actions for Project ' + props.project.name">
+                <svg
+                    class="h-10 w-10 p-2 rounded-full"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="1.5"
+                        d="M12 5.92A.96.96 0 1 0 12 4a.96.96 0 0 0 0 1.92m0 7.04a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92M12 20a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92" />
+                </svg>
+            </button>
         </template>
         <template #content>
             <div class="min-w-[150px]">
@@ -42,6 +50,17 @@ const props = defineProps<{
                         class="w-5 text-icon-active"></PencilSquareIcon>
                     <span>Edit</span>
                 </button>
+                <button
+                    @click.prevent="emit('archive')"
+                    v-if="canUpdateProjects()"
+                    :aria-label="'Archive Project ' + props.project.name"
+                    class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                    <ArchiveBoxIcon
+                        class="w-5 text-icon-active"></ArchiveBoxIcon>
+                    <span>{{
+                        project.is_archived ? 'Unarchive' : 'Archive'
+                    }}</span>
+                </button>
                 <button
                     @click.prevent="emit('delete')"
                     :aria-label="'Delete Project ' + props.project.name"
diff --git a/resources/js/Components/Common/Project/ProjectTable.vue b/resources/js/Components/Common/Project/ProjectTable.vue
index 0c4445aa..305deb09 100644
--- a/resources/js/Components/Common/Project/ProjectTable.vue
+++ b/resources/js/Components/Common/Project/ProjectTable.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { useProjectsStore } from '@/utils/useProjects';
 import SecondaryButton from '@/Components/SecondaryButton.vue';
 import { FolderPlusIcon } from '@heroicons/vue/24/solid';
 import { PlusIcon } from '@heroicons/vue/16/solid';
 import { ref } from 'vue';
 import ProjectCreateModal from '@/Components/Common/Project/ProjectCreateModal.vue';
-import { storeToRefs } from 'pinia';
 import ProjectTableHeading from '@/Components/Common/Project/ProjectTableHeading.vue';
 import ProjectTableRow from '@/Components/Common/Project/ProjectTableRow.vue';
 import { canCreateProjects } from '@/utils/permissions';
+import type { Project } from '@/utils/api';
 
-const { projects } = storeToRefs(useProjectsStore());
+defineProps<{
+    projects: Project[];
+}>();
 
 const createProject = ref(false);
 </script>
diff --git a/resources/js/Components/Common/Project/ProjectTableRow.vue b/resources/js/Components/Common/Project/ProjectTableRow.vue
index 1b013458..cbffcbfb 100644
--- a/resources/js/Components/Common/Project/ProjectTableRow.vue
+++ b/resources/js/Components/Common/Project/ProjectTableRow.vue
@@ -33,6 +33,13 @@ function deleteProject() {
     useProjectsStore().deleteProject(props.project.id);
 }
 
+function archiveProject() {
+    useProjectsStore().updateProject(props.project.id, {
+        ...props.project,
+        is_archived: !props.project.is_archived,
+    });
+}
+
 const billableRateInfo = computed(() => {
     if (props.project.is_billable) {
         if (props.project.billable_rate) {
@@ -84,6 +91,7 @@ const showEditProjectModal = ref(false);
             <ProjectMoreOptionsDropdown
                 :project="project"
                 @edit="showEditProjectModal = true"
+                @archive="archiveProject"
                 @delete="deleteProject"></ProjectMoreOptionsDropdown>
         </div>
     </TableRow>
diff --git a/resources/js/Components/Common/TabBar/TabBarItem.vue b/resources/js/Components/Common/TabBar/TabBarItem.vue
index a418636f..efed8635 100644
--- a/resources/js/Components/Common/TabBar/TabBarItem.vue
+++ b/resources/js/Components/Common/TabBar/TabBarItem.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 
 const activeClass = computed(() => {
     if (props.active) {
-        return 'bg-tab-background hover:bg-tab-background-active border border-tab-border text-white font-semibold';
+        return 'bg-tab-background border border-tab-border text-white font-semibold';
     }
     return '';
 });
@@ -16,9 +16,10 @@ const activeClass = computed(() => {
 
 <template>
     <button
+        role="tab"
         :class="
             twMerge(
-                'rounded-md transition px-2 sm:px-3 py-1 sm:py-1.5 text-xs sm:text-sm font-medium hover:text-white focus-visible:outline-none',
+                'rounded-md px-2 sm:px-3 py-1 sm:py-1.5 text-xs sm:text-sm font-medium hover:text-white focus-visible:outline-none',
                 activeClass
             )
         ">
diff --git a/resources/js/Components/Common/Task/TaskMoreOptionsDropdown.vue b/resources/js/Components/Common/Task/TaskMoreOptionsDropdown.vue
index f53ecaeb..df18ba6b 100644
--- a/resources/js/Components/Common/Task/TaskMoreOptionsDropdown.vue
+++ b/resources/js/Components/Common/Task/TaskMoreOptionsDropdown.vue
@@ -1,11 +1,16 @@
 <script setup lang="ts">
 import Dropdown from '@/Components/Dropdown.vue';
-import { TrashIcon, PencilSquareIcon } from '@heroicons/vue/20/solid';
+import {
+    TrashIcon,
+    PencilSquareIcon,
+    CheckCircleIcon,
+} from '@heroicons/vue/20/solid';
 import type { Task } from '@/utils/api';
 import { canDeleteTasks, canUpdateTasks } from '@/utils/permissions';
 const emit = defineEmits<{
     delete: [];
     edit: [];
+    done: [];
 }>();
 const props = defineProps<{
     task: Task;
@@ -15,20 +20,23 @@ const props = defineProps<{
 <template>
     <Dropdown align="bottom-end">
         <template #trigger>
-            <svg
+            <button
+                class="focus-visible:outline-none focus-visible:bg-card-background rounded-full focus-visible:ring-1 focus-visible:ring-input-border-active focus-visible:opacity-100 hover:bg-card-background group-hover:opacity-100 opacity-20 transition-opacity"
                 data-testid="task_actions"
-                :aria-label="'Actions for Task ' + props.task.name"
-                class="h-10 w-10 p-2 rounded-full hover:bg-card-background opacity-20 group-hover:opacity-100 transition"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <path
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                    d="M12 5.92A.96.96 0 1 0 12 4a.96.96 0 0 0 0 1.92m0 7.04a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92M12 20a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92" />
-            </svg>
+                :aria-label="'Actions for Task ' + props.task.name">
+                <svg
+                    class="h-10 w-10 p-2 rounded-full"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="1.5"
+                        d="M12 5.92A.96.96 0 1 0 12 4a.96.96 0 0 0 0 1.92m0 7.04a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92M12 20a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92" />
+                </svg>
+            </button>
         </template>
         <template #content>
             <div class="min-w-[150px]">
@@ -42,6 +50,16 @@ const props = defineProps<{
                         class="w-5 text-icon-active"></PencilSquareIcon>
                     <span>Edit</span>
                 </button>
+                <button
+                    @click="emit('done')"
+                    v-if="canUpdateTasks()"
+                    :aria-label="'Mark Task ' + props.task.name + ' as done'"
+                    class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                    <CheckCircleIcon
+                        class="w-5 text-icon-active"></CheckCircleIcon>
+                    <span v-if="props.task.is_done">Mark as active</span>
+                    <span v-else>Mark as done</span>
+                </button>
                 <button
                     @click="emit('delete')"
                     :aria-label="'Delete Task ' + props.task.name"
diff --git a/resources/js/Components/Common/Task/TaskTable.vue b/resources/js/Components/Common/Task/TaskTable.vue
index f1364c72..a754a76f 100644
--- a/resources/js/Components/Common/Task/TaskTable.vue
+++ b/resources/js/Components/Common/Task/TaskTable.vue
@@ -2,24 +2,18 @@
 import SecondaryButton from '@/Components/SecondaryButton.vue';
 import { PlusCircleIcon } from '@heroicons/vue/24/solid';
 import { PlusIcon } from '@heroicons/vue/16/solid';
-import { computed, ref } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useTasksStore } from '@/utils/useTasks';
+import { ref } from 'vue';
 import TaskTableRow from '@/Components/Common/Task/TaskTableRow.vue';
 import TaskTableHeading from '@/Components/Common/Task/TaskTableHeading.vue';
 import TaskCreateModal from '@/Components/Common/Task/TaskCreateModal.vue';
 import { canCreateTasks } from '@/utils/permissions';
-
-const { tasks } = storeToRefs(useTasksStore());
+import type { Task } from '@/utils/api';
 
 const props = defineProps<{
     projectId: string;
+    tasks: Task[];
 }>();
 
-const projectTasks = computed(() => {
-    return tasks.value.filter((task) => task.project_id === props.projectId);
-});
-
 const createTask = ref(false);
 </script>
 
@@ -31,12 +25,13 @@ const createTask = ref(false);
         <div class="inline-block min-w-full align-middle">
             <div
                 data-testid="task_table"
+                role="table"
                 class="grid min-w-full"
                 style="grid-template-columns: 1fr 150px 80px">
                 <TaskTableHeading></TaskTableHeading>
                 <div
                     class="col-span-5 py-24 text-center"
-                    v-if="projectTasks.length === 0">
+                    v-if="tasks.length === 0">
                     <PlusCircleIcon
                         class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
                     <h3 class="text-white font-semibold">No tasks found</h3>
@@ -50,7 +45,7 @@ const createTask = ref(false);
                         >Create your First Task
                     </SecondaryButton>
                 </div>
-                <template v-for="task in projectTasks" :key="task.id">
+                <template v-for="task in tasks" :key="task.id">
                     <TaskTableRow :task="task"></TaskTableRow>
                 </template>
             </div>
diff --git a/resources/js/Components/Common/Task/TaskTableRow.vue b/resources/js/Components/Common/Task/TaskTableRow.vue
index d0d52f21..4330b400 100644
--- a/resources/js/Components/Common/Task/TaskTableRow.vue
+++ b/resources/js/Components/Common/Task/TaskTableRow.vue
@@ -15,6 +15,14 @@ const props = defineProps<{
 function deleteTask() {
     useTasksStore().deleteTask(props.task.id);
 }
+
+function markTaskAsDone() {
+    useTasksStore().updateTask(props.task.id, {
+        ...props.task,
+        is_done: !props.task.is_done,
+    });
+}
+
 const showTaskEditModal = ref(false);
 </script>
 
@@ -28,14 +36,20 @@ const showTaskEditModal = ref(false);
         </div>
         <div
             class="whitespace-nowrap px-3 py-4 text-sm text-muted flex space-x-1 items-center font-medium">
-            <CheckCircleIcon class="w-5"></CheckCircleIcon>
-            <span>Active</span>
+            <template v-if="task.is_done">
+                <CheckCircleIcon class="w-5"></CheckCircleIcon>
+                <span>Done</span>
+            </template>
+            <template v-else>
+                <span>Active</span>
+            </template>
         </div>
         <div
             class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium sm:pr-0 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <TaskMoreOptionsDropdown
                 v-if="canDeleteTasks()"
                 :task="task"
+                @done="markTaskAsDone"
                 @edit="showTaskEditModal = true"
                 @delete="deleteTask"></TaskMoreOptionsDropdown>
         </div>
diff --git a/resources/js/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue b/resources/js/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue
index 3a06a231..cc01d3e6 100644
--- a/resources/js/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue
+++ b/resources/js/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue
@@ -58,24 +58,33 @@ withDefaults(
 
 const filteredProjects = computed(() => {
     return projects.value.reduce(
-        (filtered: ProjectWithTasks[], project) => {
-            const projectNameIncludesSearchTerm = project.name
+        (filtered: ProjectWithTasks[], filterProject) => {
+            const projectNameIncludesSearchTerm = filterProject.name
                 .toLowerCase()
                 .includes(searchValue.value?.toLowerCase()?.trim() || '');
 
             // check if one of the project tasks
             const projectTasks = tasks.value.filter((task) => {
-                return task.project_id === project.id;
+                return task.project_id === filterProject.id;
             });
 
-            const filteredTasks = projectTasks.filter((task) => {
-                return task.name
-                    .toLowerCase()
-                    .includes(searchValue.value?.toLowerCase()?.trim() || '');
+            const filteredTasks = projectTasks.filter((filterTask) => {
+                return (
+                    filterTask.name
+                        .toLowerCase()
+                        .includes(
+                            searchValue.value?.toLowerCase()?.trim() || ''
+                        ) &&
+                    (!filterTask.is_done || filterTask.id === task.value)
+                );
             });
 
-            if (projectNameIncludesSearchTerm || filteredTasks.length > 0) {
-                filtered.push({ project: project, tasks: filteredTasks });
+            if (
+                (projectNameIncludesSearchTerm || filteredTasks.length > 0) &&
+                (!filterProject.is_archived ||
+                    project.value === filterProject.id)
+            ) {
+                filtered.push({ project: filterProject, tasks: filteredTasks });
             }
 
             return filtered;
diff --git a/resources/js/Pages/ProjectShow.vue b/resources/js/Pages/ProjectShow.vue
index a3b5e1c9..e1bc0123 100644
--- a/resources/js/Pages/ProjectShow.vue
+++ b/resources/js/Pages/ProjectShow.vue
@@ -20,6 +20,9 @@ import ProjectMemberTable from '@/Components/Common/ProjectMember/ProjectMemberT
 import ProjectMemberCreateModal from '@/Components/Common/ProjectMember/ProjectMemberCreateModal.vue';
 import { useProjectMembersStore } from '@/utils/useProjectMembers';
 import { canCreateTasks, canViewProjectMembers } from '@/utils/permissions';
+import TabBarItem from '@/Components/Common/TabBar/TabBarItem.vue';
+import TabBar from '@/Components/Common/TabBar/TabBar.vue';
+import { useTasksStore } from '@/utils/useTasks';
 
 const { projects } = storeToRefs(useProjectsStore());
 
@@ -41,6 +44,23 @@ onMounted(() => {
         useProjectMembersStore().fetchProjectMembers(projectId);
     }
 });
+
+const activeTab = ref<'active' | 'done'>('active');
+
+function isActiveTab(tab: string) {
+    return activeTab.value === tab;
+}
+
+const { tasks } = storeToRefs(useTasksStore());
+
+const shownTasks = computed(() => {
+    return tasks.value.filter((task) => {
+        if (activeTab.value === 'active') {
+            return task.project_id === projectId && !task.is_done;
+        }
+        return task.project_id === projectId && task.is_done;
+    });
+});
 </script>
 
 <template>
@@ -85,19 +105,38 @@ onMounted(() => {
                 <div>
                     <CardTitle title="Tasks" :icon="CheckCircleIcon">
                         <template #actions>
-                            <SecondaryButton
-                                v-if="canCreateTasks()"
-                                :icon="PlusIcon"
-                                @click="createTask = true"
-                                >Create Task
-                            </SecondaryButton>
-                            <TaskCreateModal
-                                :project-id="projectId"
-                                v-model:show="createTask"></TaskCreateModal>
+                            <div
+                                class="w-full items-center flex justify-between">
+                                <div class="pl-6">
+                                    <TabBar>
+                                        <TabBarItem
+                                            :active="isActiveTab('active')"
+                                            @click="activeTab = 'active'"
+                                            >Active
+                                        </TabBarItem>
+                                        <TabBarItem
+                                            :active="isActiveTab('done')"
+                                            @click="activeTab = 'done'"
+                                            >Done
+                                        </TabBarItem>
+                                    </TabBar>
+                                </div>
+                                <SecondaryButton
+                                    v-if="canCreateTasks()"
+                                    :icon="PlusIcon"
+                                    @click="createTask = true"
+                                    >Create Task
+                                </SecondaryButton>
+                                <TaskCreateModal
+                                    :project-id="projectId"
+                                    v-model:show="createTask"></TaskCreateModal>
+                            </div>
                         </template>
                     </CardTitle>
                     <Card>
-                        <TaskTable :project-id="projectId"></TaskTable>
+                        <TaskTable
+                            :tasks="shownTasks"
+                            :project-id="projectId"></TaskTable>
                     </Card>
                 </div>
                 <div v-if="canViewProjectMembers()">
diff --git a/resources/js/Pages/Projects.vue b/resources/js/Pages/Projects.vue
index 8aed0bff..aef06ef2 100644
--- a/resources/js/Pages/Projects.vue
+++ b/resources/js/Pages/Projects.vue
@@ -4,17 +4,37 @@ import AppLayout from '@/Layouts/AppLayout.vue';
 import { FolderIcon, PlusIcon } from '@heroicons/vue/16/solid';
 import SecondaryButton from '@/Components/SecondaryButton.vue';
 import ProjectTable from '@/Components/Common/Project/ProjectTable.vue';
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useProjectsStore } from '@/utils/useProjects';
 import ProjectCreateModal from '@/Components/Common/Project/ProjectCreateModal.vue';
 import PageTitle from '@/Components/Common/PageTitle.vue';
 import { canCreateProjects } from '@/utils/permissions';
+import TabBarItem from '@/Components/Common/TabBar/TabBarItem.vue';
+import TabBar from '@/Components/Common/TabBar/TabBar.vue';
+import { storeToRefs } from 'pinia';
 
 onMounted(() => {
     useProjectsStore().fetchProjects();
 });
 
 const createProject = ref(false);
+
+const activeTab = ref<'active' | 'archived'>('active');
+
+function isActiveTab(tab: string) {
+    return activeTab.value === tab;
+}
+
+const { projects } = storeToRefs(useProjectsStore());
+
+const shownProjects = computed(() => {
+    return projects.value.filter((project) => {
+        if (activeTab.value === 'active') {
+            return !project.is_archived;
+        }
+        return project.is_archived;
+    });
+});
 </script>
 
 <template>
@@ -22,17 +42,29 @@ const createProject = ref(false);
         <MainContainer
             class="py-3 sm:py-5 border-b border-default-background-separator flex justify-between items-center">
             <div class="flex items-center space-x-3 sm:space-x-6">
-                <PageTitle :icon="FolderIcon" title="Projects"> </PageTitle>
+                <PageTitle :icon="FolderIcon" title="Projects"></PageTitle>
+                <TabBar>
+                    <TabBarItem
+                        :active="isActiveTab('active')"
+                        @click="activeTab = 'active'"
+                        >Active</TabBarItem
+                    >
+                    <TabBarItem
+                        :active="isActiveTab('archived')"
+                        @click="activeTab = 'archived'">
+                        Archived
+                    </TabBarItem>
+                </TabBar>
             </div>
             <SecondaryButton
                 v-if="canCreateProjects()"
                 :icon="PlusIcon"
                 @click="createProject = true"
-                >Create Project</SecondaryButton
-            >
+                >Create Project
+            </SecondaryButton>
             <ProjectCreateModal
                 v-model:show="createProject"></ProjectCreateModal>
         </MainContainer>
-        <ProjectTable></ProjectTable>
+        <ProjectTable :projects="shownProjects"></ProjectTable>
     </AppLayout>
 </template>
diff --git a/resources/js/utils/useProjects.ts b/resources/js/utils/useProjects.ts
index 1e547660..b29a8c37 100644
--- a/resources/js/utils/useProjects.ts
+++ b/resources/js/utils/useProjects.ts
@@ -24,6 +24,9 @@ export const useProjectsStore = defineStore('projects', () => {
                         params: {
                             organization: organization,
                         },
+                        queries: {
+                            archived: 'all',
+                        },
                     }),
                 undefined,
                 'Failed to fetch projects'
diff --git a/resources/js/utils/useTasks.ts b/resources/js/utils/useTasks.ts
index 5d2c2132..bee72760 100644
--- a/resources/js/utils/useTasks.ts
+++ b/resources/js/utils/useTasks.ts
@@ -17,6 +17,9 @@ export const useTasksStore = defineStore('tasks', () => {
                     params: {
                         organization: organizationId,
                     },
+                    queries: {
+                        done: 'all',
+                    },
                 })
             );
             if (tasksResponse?.data) {