diff --git a/app/javascript/pages/Projects/Index.svelte b/app/javascript/pages/Projects/Index.svelte
index 7c0533fa7..e338515b8 100644
--- a/app/javascript/pages/Projects/Index.svelte
+++ b/app/javascript/pages/Projects/Index.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Deferred, Form, Link, router } from "@inertiajs/svelte";
+  import { onMount } from "svelte";
   import Archive from "hcicons-svelte/archive";
   import Edit from "hcicons-svelte/edit";
   import GithubFill from "hcicons-svelte/github-fill";
@@ -7,6 +8,7 @@
   import Web from "hcicons-svelte/web";
   import Button from "../../components/Button.svelte";
   import Modal from "../../components/Modal.svelte";
+  import Select from "../../components/Select.svelte";
   import IntervalSelect from "../Home/signedIn/IntervalSelect.svelte";
   import { myProjectRepoMappings, sessions, settingsProfile } from "../../api";
 
@@ -108,6 +110,16 @@
     description: string;
     confirmLabel: string;
   } | null>(null);
+  let viewMode = $state<"grid" | "list">("grid");
+  let searchQuery = $state("");
+  let sortBy = $state<"most_time" | "least_time" | "name_az" | "name_za">(
+    "most_time",
+  );
+  let archivalStatus = $state("active");
+
+  onMount(() => {
+    archivalStatus = show_archived ? "archived" : "active";
+  });
 
   const skeletonCount = $derived.by(() => {
     const safeCount = Number.isFinite(total_projects) ? total_projects : 0;
@@ -163,6 +175,40 @@
     return `${path}${separator}${intervalQueryString.slice(1)}`;
   };
 
+  const filteredAndSortedProjects = $derived.by(() => {
+    if (!projects_data?.projects) return [];
+
+    const searchLower = searchQuery.toLowerCase();
+    const filtered = projects_data.projects.filter((project) => {
+      return (
+        project.name.toLowerCase().includes(searchLower) ||
+        (project.repo_url?.toLowerCase().includes(searchLower) ?? false)
+      );
+    });
+
+    return filtered.sort((a, b) => {
+      switch (sortBy) {
+        case "name_az":
+          return a.name.localeCompare(b.name);
+        case "name_za":
+          return b.name.localeCompare(a.name);
+        case "least_time":
+          return a.duration_seconds - b.duration_seconds;
+        case "most_time":
+          return b.duration_seconds - a.duration_seconds;
+        default:
+          return b.duration_seconds - a.duration_seconds;
+      }
+    });
+  });
+
+  $effect(() => {
+    const expectedValue = show_archived ? "archived" : "active";
+    if (archivalStatus !== expectedValue) {
+      changeArchivedStatus(archivalStatus);
+    }
+  });
+
   const changeInterval = (
     nextInterval: string,
     nextFrom: string,
@@ -190,6 +236,12 @@
     });
   };
 
+  const changeArchivedStatus = (nextValue: string) => {
+    window.location.href = buildProjectsPath({
+      nextShowArchived: nextValue === "archived",
+    });
+  };
+
   const openMappingEditor = (project: ProjectCard) => {
     editingProjectKey = project.project_key || null;
     repoUrlDraft = project.repo_url || "";
@@ -240,7 +292,7 @@
   };
 
   const cardActionClass =
-    "inline-flex h-10 w-10 items-center justify-center rounded-xl border border-surface-200/60 bg-surface-content/5 text-surface-content/70 shadow-sm transition-colors duration-200 ease-out hover:bg-surface-content/10 hover:text-surface-content focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 cursor-pointer";
+    "inline-flex h-8 w-8 items-center justify-center rounded-lg border border-surface-200/60 bg-surface-content/5 text-surface-content/70 shadow-sm transition-colors duration-200 ease-out hover:bg-surface-content/10 hover:text-surface-content focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 cursor-pointer";
 </script>
 
 <svelte:head>
@@ -272,13 +324,151 @@
     </div>
   </div>
 
-  <div class="sm:max-w-3xs">
-    <IntervalSelect
-      from={from || ""}
-      selected={interval || ""}
-      to={to || ""}
-      onchange={changeInterval}
-    />
+  {#if !github_connected}
+    <div class="mb-4 rounded-xl border border-yellow/30 bg-yellow/10 p-4">
+      <p class="text-base font-medium text-surface-content">
+        Heads up! You can't link projects to GitHub until you connect your
+        account.
+      </p>
+      <div class="mt-3 flex flex-wrap gap-2">
+        <Button href={githubAuthPath} native class="w-full sm:w-fit">
+          Sign in with GitHub
+        </Button>
+        <Button href={settingsPath} variant="surface" class="w-full sm:w-fit">
+          Open settings
+        </Button>
+      </div>
+    </div>
+  {/if}
+
+  <div class="mt-6 flex flex-wrap items-end gap-3">
+    {#if projects_data}
+      <div class="min-w-0 flex-1">
+        <div class="flex flex-wrap items-end gap-3">
+          <div class="min-w-0 flex-[0_1_18rem]">
+            <IntervalSelect
+              from={from || ""}
+              selected={interval || ""}
+              to={to || ""}
+              onchange={changeInterval}
+            />
+          </div>
+          <div class="min-w-0 flex-[0_1_16rem]">
+            <span
+              class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-secondary/80"
+            >
+              Search Projects
+            </span>
+            <input
+              id="project-search"
+              type="text"
+              placeholder="Search by name or URL..."
+              bind:value={searchQuery}
+              class="w-full rounded-md border border-surface-200 bg-darker px-3 py-2 text-left text-sm text-surface-content transition-all duration-200 hover:border-surface-300 focus-visible:border-primary/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/45 focus-visible:ring-offset-2 focus-visible:ring-offset-surface placeholder-surface-content/60"
+            />
+          </div>
+
+          <div class="min-w-0 flex-[0_1_12rem]">
+            <span
+              class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-secondary/80"
+            >
+              Archival Status
+            </span>
+            <Select
+              id="archival-status"
+              bind:value={archivalStatus}
+              items={[
+                { value: "active", label: "Active" },
+                { value: "archived", label: "Archived" },
+              ]}
+              class="bg-surface-100"
+            />
+          </div>
+
+          {#if projects_data.projects && projects_data.projects.length > 0}
+            <div class="min-w-0 flex-[0_1_18rem]">
+              <div class="flex min-w-0 items-end gap-3">
+                <div class="min-w-0 flex-[0_1_12rem]">
+                  <div class="mb-1.5 flex items-end gap-3">
+                    <span
+                      class="block text-xs font-medium uppercase tracking-wider text-secondary/80"
+                    >
+                      Sort
+                    </span>
+                  </div>
+                  <Select
+                    id="project-sort"
+                    bind:value={sortBy}
+                    items={[
+                      { value: "most_time", label: "Most time" },
+                      { value: "least_time", label: "Least time" },
+                      { value: "name_az", label: "Name (A-Z)" },
+                      { value: "name_za", label: "Name (Z-A)" },
+                    ]}
+                    class="bg-surface-100"
+                  />
+                </div>
+                <div class="shrink-0 flex flex-col items-start">
+                  <span
+                    class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-secondary/80"
+                  >
+                    View
+                  </span>
+                  <div
+                    class="inline-flex shrink-0 gap-1 rounded-lg border border-surface-200 bg-surface-content/5 p-1"
+                  >
+                    <Button
+                      type="button"
+                      unstyled
+                      class={`inline-flex h-8 w-8 items-center justify-center rounded transition-colors ${
+                        viewMode === "grid"
+                          ? "bg-primary text-on-primary"
+                          : "text-surface-content/70 hover:bg-surface-content/10"
+                      }`}
+                      title="Grid view"
+                      onclick={() => (viewMode = "grid")}
+                    >
+                      <svg
+                        class="h-4 w-4"
+                        fill="currentColor"
+                        viewBox="0 0 24 24"
+                        aria-hidden="true"
+                      >
+                        <path
+                          d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"
+                        />
+                      </svg>
+                    </Button>
+                    <Button
+                      type="button"
+                      unstyled
+                      class={`inline-flex h-8 w-8 items-center justify-center rounded transition-colors ${
+                        viewMode === "list"
+                          ? "bg-primary text-on-primary"
+                          : "text-surface-content/70 hover:bg-surface-content/10"
+                      }`}
+                      title="List view"
+                      onclick={() => (viewMode = "list")}
+                    >
+                      <svg
+                        class="h-4 w-4"
+                        fill="currentColor"
+                        viewBox="0 0 24 24"
+                        aria-hidden="true"
+                      >
+                        <path
+                          d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"
+                        />
+                      </svg>
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          {/if}
+        </div>
+      </div>
+    {/if}
   </div>
 
   <Deferred data="projects_data">
@@ -286,7 +476,7 @@
       <section class="mt-6 animate-pulse">
         <div class="h-7 w-80 rounded bg-darkless"></div>
         <div
-          class="mt-6 grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-5"
+          class="mt-6 grid grid-cols-[repeat(auto-fill,minmax(360px,1fr))] gap-6"
         >
           {#each Array.from( { length: skeletonCount }, ) as _unused, index (index)}
             <div
@@ -354,17 +544,27 @@
                   : "No active projects match this filter."}
               </p>
             </div>
+          {:else if filteredAndSortedProjects.length == 0}
+            <div
+              class="mt-4 rounded-xl border border-surface-200 bg-dark p-8 text-center"
+            >
+              <p class="text-muted">No projects match your search query.</p>
+            </div>
           {:else}
             <div
-              class="mt-6 grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-5"
+              class={viewMode === "grid"
+                ? "mt-6 grid grid-cols-[repeat(auto-fill,minmax(360px,1fr))] justify-items-stretch gap-6"
+                : "mt-6 space-y-4"}
             >
-              {#each projects_data.projects as project (project.id)}
+              {#each filteredAndSortedProjects as project (project.id)}
                 {@const showPath = showPathFor(project)}
                 {@const projectHref = showPath
                   ? withIntervalParams(showPath)
                   : null}
                 <article
-                  class="group relative flex min-h-36 overflow-hidden rounded-2xl {projectHref
+                  class="group relative flex w-full {viewMode === 'list'
+                    ? 'flex-row items-start sm:items-center sm:justify-between'
+                    : 'min-h-36'} overflow-hidden rounded-2xl {projectHref
                     ? 'cursor-pointer'
                     : ''}"
                 >
@@ -372,15 +572,19 @@
                     <Link
                       href={projectHref}
                       aria-label={`View ${project.name}`}
-                      class="absolute inset-0 z-10 rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+                      class="absolute inset-0 z-10 rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 "
                     ></Link>
                   {/if}
                   <div
-                    class="relative flex min-w-0 flex-1 flex-col rounded-2xl border border-surface-200 bg-dark p-5 transition-colors duration-300 ease-out group-hover:border-surface-300"
+                    class="relative flex w-full min-w-0 {viewMode === 'list'
+                      ? 'flex-1 p-3 sm:p-4'
+                      : 'p-5'} flex-col rounded-2xl border border-surface-200 bg-dark transition-colors duration-300 ease-out group-hover:border-surface-300"
                   >
                     <div class="grid gap-3">
                       <div
-                        class="flex min-w-0 items-start justify-between gap-3"
+                        class="flex min-w-0 {viewMode === 'list'
+                          ? 'flex-1 items-center'
+                          : 'items-start justify-between'} gap-3"
                       >
                         <div class="min-w-0 flex-1">
                           <h3
@@ -390,14 +594,85 @@
                             {project.name}
                           </h3>
                         </div>
-                        <p
-                          class="shrink-0 text-lg font-semibold tabular-nums text-primary/80"
+                        <div
+                          class="flex shrink-0 items-center gap-3 {viewMode ===
+                          'list'
+                            ? 'ml-auto'
+                            : ''}"
                         >
-                          {project.duration_label}
-                        </p>
+                          {#if viewMode === "list"}
+                            <div
+                              class="relative z-20 flex flex-wrap items-center justify-end gap-2"
+                            >
+                              {#if project.repository?.homepage}
+                                <a
+                                  href={project.repository.homepage}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  title="View project website"
+                                  class={cardActionClass}
+                                >
+                                  <Web size={20} />
+                                </a>
+                              {/if}
+                              {#if project.repo_url}
+                                <a
+                                  href={project.repo_url}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  title="View repository"
+                                  class={cardActionClass}
+                                >
+                                  <GithubFill size={20} />
+                                </a>
+                              {/if}
+                              {#if project.manage_enabled}
+                                <Button
+                                  type="button"
+                                  unstyled
+                                  class={cardActionClass}
+                                  title={project.repo_url
+                                    ? "Edit mapping"
+                                    : "Link repository"}
+                                  onclick={() => openMappingEditor(project)}
+                                >
+                                  <Edit size={20} />
+                                </Button>
+                              {/if}
+                              {#if show_archived && unarchivePathFor(project)}
+                                <Button
+                                  type="button"
+                                  unstyled
+                                  class={cardActionClass}
+                                  title="Restore project"
+                                  onclick={() =>
+                                    openStatusChangeModal(project, true)}
+                                >
+                                  <Reply size={20} />
+                                </Button>
+                              {:else if !show_archived && archivePathFor(project)}
+                                <Button
+                                  type="button"
+                                  unstyled
+                                  class={cardActionClass}
+                                  title="Archive project"
+                                  onclick={() =>
+                                    openStatusChangeModal(project, false)}
+                                >
+                                  <Archive size={20} />
+                                </Button>
+                              {/if}
+                            </div>
+                          {/if}
+                          <p
+                            class="text-lg font-semibold tabular-nums text-primary/80"
+                          >
+                            {project.duration_label}
+                          </p>
+                        </div>
                       </div>
 
-                      {#if project.repository?.description}
+                      {#if project.repository?.description && viewMode === "grid"}
                         <p
                           class="line-clamp-2 text-sm leading-relaxed text-surface-content/70 text-pretty"
                         >
@@ -408,87 +683,78 @@
                       <div
                         class="relative z-20 flex flex-wrap items-center gap-2"
                       >
-                        {#if project.repository?.homepage}
-                          <a
-                            href={project.repository.homepage}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            title="View project website"
-                            class={cardActionClass}
-                          >
-                            <Web size={20} />
-                          </a>
-                        {/if}
-                        {#if project.repo_url}
-                          <a
-                            href={project.repo_url}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            title="View repository"
-                            class={cardActionClass}
-                          >
-                            <GithubFill size={20} />
-                          </a>
-                        {/if}
-                        {#if project.manage_enabled}
-                          <Button
-                            type="button"
-                            unstyled
-                            class={cardActionClass}
-                            title={project.repo_url
-                              ? "Edit mapping"
-                              : "Link repository"}
-                            onclick={() => openMappingEditor(project)}
-                          >
-                            <Edit size={20} />
-                          </Button>
-                        {/if}
-                        {#if show_archived && unarchivePathFor(project)}
-                          <Button
-                            type="button"
-                            unstyled
-                            class={cardActionClass}
-                            title="Restore project"
-                            onclick={() => openStatusChangeModal(project, true)}
-                          >
-                            <Reply size={20} />
-                          </Button>
-                        {:else if !show_archived && archivePathFor(project)}
-                          <Button
-                            type="button"
-                            unstyled
-                            class={cardActionClass}
-                            title="Archive project"
-                            onclick={() =>
-                              openStatusChangeModal(project, false)}
-                          >
-                            <Archive size={20} />
-                          </Button>
+                        {#if viewMode === "grid"}
+                          {#if project.repository?.homepage}
+                            <a
+                              href={project.repository.homepage}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              title="View project website"
+                              class={cardActionClass}
+                            >
+                              <Web size={20} />
+                            </a>
+                          {/if}
+                          {#if project.repo_url}
+                            <a
+                              href={project.repo_url}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              title="View repository"
+                              class={cardActionClass}
+                            >
+                              <GithubFill size={20} />
+                            </a>
+                          {/if}
+                          {#if project.manage_enabled}
+                            <Button
+                              type="button"
+                              unstyled
+                              class={cardActionClass}
+                              title={project.repo_url
+                                ? "Edit mapping"
+                                : "Link repository"}
+                              onclick={() => openMappingEditor(project)}
+                            >
+                              <Edit size={20} />
+                            </Button>
+                          {/if}
+                          {#if show_archived && unarchivePathFor(project)}
+                            <Button
+                              type="button"
+                              unstyled
+                              class={cardActionClass}
+                              title="Restore project"
+                              onclick={() =>
+                                openStatusChangeModal(project, true)}
+                            >
+                              <Reply size={20} />
+                            </Button>
+                          {:else if !show_archived && archivePathFor(project)}
+                            <Button
+                              type="button"
+                              unstyled
+                              class={cardActionClass}
+                              title="Archive project"
+                              onclick={() =>
+                                openStatusChangeModal(project, false)}
+                            >
+                              <Archive size={20} />
+                            </Button>
+                          {/if}
                         {/if}
                       </div>
                     </div>
 
                     <div
-                      class="mt-auto flex flex-wrap items-center gap-2 pt-5 text-sm text-surface-content/55"
-                    >
-                      <!-- {#if project.repository?.stars}
-                    <p
-                      class="inline-flex items-center gap-1.5 rounded-full bg-yellow/10 px-3 py-1.5 font-semibold tabular-nums text-yellow"
+                      class="mt-auto flex flex-wrap items-center gap-2 {viewMode ===
+                      'grid'
+                        ? 'pt-5'
+                        : viewMode === 'list'
+                          ? 'pt-0'
+                          : ''} text-sm text-surface-content/55"
                     >
-                      <svg
-                        class="h-4 w-4 fill-current"
-                        viewBox="0 0 20 20"
-                        aria-hidden="true"
-                      >
-                        <path
-                          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-                        />
-                      </svg>
-                      {project.repository.stars}
-                    </p>
-                  {/if} -->
-
-                      {#if project.repository?.formatted_languages}
+                      {#if project.repository?.formatted_languages && viewMode === "grid"}
                         <p
                           class="flex min-w-0 items-center gap-1.5 rounded-full bg-surface-content/5 px-3 py-1.5"
                         >
@@ -510,7 +776,7 @@
                         </p>
                       {/if}
 
-                      {#if project.repository?.last_commit_ago}
+                      {#if project.repository?.last_commit_ago && viewMode === "grid"}
                         <p
                           class="flex items-center gap-1.5 rounded-full bg-surface-content/5 px-3 py-1.5"
                         >
@@ -535,22 +801,47 @@
                     </div>
 
                     {#if project.broken_name}
-                      <button
-                        type="button"
-                        class="mt-4 block w-full cursor-pointer rounded-2xl border border-yellow/30 bg-yellow/10 p-3 text-left hover:bg-yellow/15"
-                        onclick={() => (brokenNameModalOpen = true)}
-                      >
-                        <p
-                          class="text-sm leading-relaxed text-yellow/80 text-pretty"
+                      {#if viewMode === "grid"}
+                        <button
+                          type="button"
+                          class="mt-4 block w-full cursor-pointer rounded-2xl border border-yellow/30 bg-yellow/10 p-3 text-left hover:bg-yellow/15"
+                          onclick={() => (brokenNameModalOpen = true)}
                         >
-                          Time can't be used in Hack Club programs
+                          <p
+                            class="text-sm leading-relaxed text-yellow/80 text-pretty"
+                          >
+                            Time can't be used in Hack Club programs
+                            <span
+                              class="underline underline-offset-2 hover:text-yellow"
+                            >
+                              (why?)
+                            </span>
+                          </p>
+                        </button>
+                      {:else}
+                        <div class="mt-2 flex items-center gap-3">
                           <span
-                            class="underline underline-offset-2 hover:text-yellow"
+                            class="inline-flex items-center gap-2 rounded-full bg-yellow/10 px-3 py-1 text-sm text-yellow/80"
                           >
-                            (why?)
+                            <svg
+                              class="h-4 w-4 text-yellow/80"
+                              viewBox="0 0 24 24"
+                              fill="currentColor"
+                              aria-hidden="true"
+                              ><path
+                                d="M1 21h22L12 2 1 21zM12 16v2h0v-2h0zm0-6v4h0v-4h0z"
+                              /></svg
+                            >
+                            <button
+                              type="button"
+                              class="underline text-sm"
+                              onclick={() => (brokenNameModalOpen = true)}
+                            >
+                              Time can't be used for programs (why?)
+                            </button>
                           </span>
-                        </p>
-                      </button>
+                        </div>
+                      {/if}
                     {/if}
 
                     {#if project.manage_enabled && editingProjectKey === project.project_key && updatePathFor(project)}