diff --git a/README.md b/README.md
index 9a18744..305bc15 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@
 Matrix Directory is a community-driven web application for discovering projects
 in the Matrix ecosystem, including bots, frameworks, SDKs, and other tools.
 
-It provides a Vue frontend for discovering and managing listings and a FastAPI
+It provides a Vue frontend for discovering and managing projects and a FastAPI
 backend for authentication, profiles, project ownership, and directory data.
 
 ## Tech stack
diff --git a/backend/app/main.py b/backend/app/main.py
index 5035350..dc6692f 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -2,7 +2,7 @@
 
 from fastapi import FastAPI, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import FileResponse
+from fastapi.responses import FileResponse, RedirectResponse
 from fastapi.staticfiles import StaticFiles
 from starlette.middleware.sessions import SessionMiddleware
 
@@ -58,6 +58,11 @@ def mount_static_sites(application: FastAPI, static_directory: Path) -> None:
     frontend_assets = static_directory / "assets"
 
     if documentation_directory.is_dir():
+
+        @application.get("/docs", include_in_schema=False)
+        def documentation_root_redirect() -> RedirectResponse:
+            return RedirectResponse(url="/docs/", status_code=307)
+
         application.mount(
             "/docs",
             StaticFiles(directory=documentation_directory, html=True),
diff --git a/backend/app/routers/project_routers.py b/backend/app/routers/project_routers.py
index bd066d2..b0cd1d2 100644
--- a/backend/app/routers/project_routers.py
+++ b/backend/app/routers/project_routers.py
@@ -1,6 +1,6 @@
 from uuid import UUID
 
-from fastapi import APIRouter, Depends, HTTPException, status
+from fastapi import APIRouter, Depends, HTTPException, Query, status
 from sqlmodel import Session
 
 from app.database import get_session
@@ -23,9 +23,21 @@
 
 @router.get("/", response_model=list[ProjectRead])
 def list_projects(
+    q: str | None = Query(default=None, max_length=200),
+    project_type: str | None = Query(default=None, max_length=100),
+    label: str | None = Query(default=None, max_length=100),
+    limit: int = Query(default=50, ge=1, le=100),
+    offset: int = Query(default=0, ge=0),
     session: Session = Depends(get_session),
 ) -> list[Project]:
-    return projects_service.list_projects(session)
+    return projects_service.list_projects(
+        session,
+        query=q,
+        project_type=project_type,
+        label=label,
+        limit=limit,
+        offset=offset,
+    )
 
 
 @router.get("/mine/", response_model=list[ProjectRead])
@@ -36,6 +48,24 @@ def list_my_projects(
     return projects_service.list_projects_for_user(session, user_id=user.id)
 
 
+@router.get("/count/", response_model=int)
+def count_projects(
+    session: Session = Depends(get_session),
+) -> int:
+    return projects_service.count_projects(session)
+
+
+@router.get("/random/", response_model=list[ProjectRead])
+def list_random_projects(
+    limit: int = Query(default=6, ge=1, le=24),
+    session: Session = Depends(get_session),
+) -> list[Project]:
+    return projects_service.list_random_projects(
+        session,
+        limit=limit,
+    )
+
+
 @router.get("/{project_id}", response_model=ProjectRead)
 def get_project(
     project_id: UUID,
diff --git a/backend/app/services/projects_service.py b/backend/app/services/projects_service.py
index 2935cf4..8f2c7e8 100644
--- a/backend/app/services/projects_service.py
+++ b/backend/app/services/projects_service.py
@@ -1,21 +1,102 @@
 from uuid import UUID
 
-from sqlmodel import Session, select
+from sqlalchemy import func, or_
+from sqlmodel import Session, col, select
 
+from app.models.label import Label
+from app.models.profile import Profile
 from app.models.project import Project
+from app.models.project_label import ProjectLabel
+from app.models.project_type import ProjectType
 from app.schemas.project import ProjectCreate, ProjectUpdate
 
 from . import labels_service, project_types_service
 from .errors import ProjectLinkRequiredError
 
 
-def list_projects(session: Session) -> list[Project]:
+def list_projects(
+    session: Session,
+    *,
+    query: str | None = None,
+    project_type: str | None = None,
+    label: str | None = None,
+    limit: int = 50,
+    offset: int = 0,
+) -> list[Project]:
     statement = select(Project)
+
+    if query:
+        pattern = f"%{query.strip()}%"
+        matching_project_types = select(ProjectType.id).where(
+            col(ProjectType.name).ilike(pattern)
+        )
+        matching_project_labels = (
+            select(ProjectLabel.project_id)
+            .join(Label, col(ProjectLabel.label_id) == col(Label.id))
+            .where(col(Label.name).ilike(pattern))
+        )
+        matching_owners = select(Profile.user_id).where(
+            or_(
+                col(Profile.display_name).ilike(pattern),
+                col(Profile.matrix_id).ilike(pattern),
+            )
+        )
+        statement = statement.where(
+            or_(
+                col(Project.name).ilike(pattern),
+                col(Project.short_description).ilike(pattern),
+                col(Project.description).ilike(pattern),
+                col(Project.project_type_id).in_(matching_project_types),
+                col(Project.id).in_(matching_project_labels),
+                col(Project.user_id).in_(matching_owners),
+            )
+        )
+
+    if project_type:
+        matching_project_type = select(ProjectType.id).where(
+            ProjectType.name == project_type
+        )
+        statement = statement.where(
+            col(Project.project_type_id).in_(matching_project_type)
+        )
+
+    if label:
+        matching_label = (
+            select(ProjectLabel.project_id)
+            .join(Label, col(ProjectLabel.label_id) == col(Label.id))
+            .where(col(Label.name) == label)
+        )
+        statement = statement.where(col(Project.id).in_(matching_label))
+
+    statement = (
+        statement.order_by(col(Project.created_at).desc()).offset(offset).limit(limit)
+    )
+    return list(session.exec(statement).all())
+
+
+def count_projects(session: Session) -> int:
+    statement = select(func.count()).select_from(Project)
+    return int(session.exec(statement).one())
+
+
+def list_random_projects(
+    session: Session,
+    *,
+    limit: int = 6,
+) -> list[Project]:
+    statement = select(Project).order_by(func.random()).limit(limit)
     return list(session.exec(statement).all())
 
 
 def list_projects_for_user(session: Session, *, user_id: UUID) -> list[Project]:
-    statement = select(Project).where(Project.user_id == user_id)
+    statement = (
+        select(Project)
+        .where(Project.user_id == user_id)
+        .order_by(
+            col(Project.updated_at).desc(),
+            col(Project.created_at).desc(),
+        )
+    )
     return list(session.exec(statement).all())
 
 
diff --git a/backend/tests/test_project_validation.py b/backend/tests/test_project_validation.py
index e7d8d3e..154abcf 100644
--- a/backend/tests/test_project_validation.py
+++ b/backend/tests/test_project_validation.py
@@ -108,6 +108,76 @@ def test_create__expect_project_associated_with_authenticated_user(
     assert [label["id"] for label in body["labels"]] == [str(project_client.label_id)]
 
 
+def test_random_projects__expect_requested_limit_and_total_count(
+    project_client: ProjectClient,
+) -> None:
+    for index in range(3):
+        response = project_client.client.post(
+            "/api/projects/",
+            json={
+                "name": f"Test Project {index}",
+                "description": "A useful project.",
+                "short_description": "Useful project",
+                "repository_url": f"https://example.com/project-{index}",
+                "project_type_id": str(project_client.project_type_id),
+                "label_ids": [],
+            },
+        )
+        assert response.status_code == 201
+
+    random_response = project_client.client.get("/api/projects/random/?limit=2")
+    count_response = project_client.client.get("/api/projects/count/")
+
+    assert random_response.status_code == 200
+    assert len(random_response.json()) == 2
+    assert count_response.status_code == 200
+    assert count_response.json() == 3
+
+
+@pytest.mark.parametrize("limit", [0, 25])
+def test_random_projects_with_invalid_limit__expect_validation_error(
+    project_client: ProjectClient,
+    limit: int,
+) -> None:
+    response = project_client.client.get(f"/api/projects/random/?limit={limit}")
+
+    assert response.status_code == 422
+
+
+def test_list_projects__expect_server_side_search_and_filters(
+    project_client: ProjectClient,
+) -> None:
+    for name, labels in [
+        ("Alpha Bridge", [str(project_client.label_id)]),
+        ("Beta Bot", []),
+    ]:
+        response = project_client.client.post(
+            "/api/projects/",
+            json={
+                "name": name,
+                "description": f"Description for {name}",
+                "short_description": name,
+                "repository_url": f"https://example.com/{name.lower().replace(' ', '-')}",
+                "project_type_id": str(project_client.project_type_id),
+                "label_ids": labels,
+            },
+        )
+        assert response.status_code == 201
+
+    response = project_client.client.get(
+        "/api/projects/",
+        params={
+            "q": "alpha",
+            "project_type": "Bot",
+            "label": "Utility",
+            "limit": 24,
+        },
+    )
+
+    assert response.status_code == 200
+    assert [project["name"] for project in response.json()] == ["Alpha Bridge"]
+
+
 @pytest.mark.parametrize(
     ("project_type_id", "label_ids", "message"),
     [
diff --git a/backend/tests/test_static_sites.py b/backend/tests/test_static_sites.py
index 4e87c6e..18d8691 100644
--- a/backend/tests/test_static_sites.py
+++ b/backend/tests/test_static_sites.py
@@ -34,14 +34,21 @@ def test_documentation_static_files__expect_served_under_docs(
         encoding="utf-8",
     )
 
-    application = FastAPI()
+    application = FastAPI(
+        docs_url=None,
+        redoc_url=None,
+        openapi_url=None,
+    )
     mount_static_sites(application, static_directory)
     client = TestClient(application)
 
     home_response = client.get("/docs/")
+    home_redirect_response = client.get("/docs", follow_redirects=False)
     guide_response = client.get("/docs/guide/")
 
     assert home_response.status_code == 200
+    assert home_redirect_response.status_code == 307
+    assert home_redirect_response.headers["location"] == "/docs/"
     assert "Documentation home" in home_response.text
     assert guide_response.status_code == 200
     assert "Documentation guide" in guide_response.text
@@ -57,7 +64,11 @@ def test_reserved_routes__expect_not_fall_through_to_frontend(
         encoding="utf-8",
     )
 
-    application = FastAPI()
+    application = FastAPI(
+        docs_url=None,
+        redoc_url=None,
+        openapi_url=None,
+    )
     mount_static_sites(application, static_directory)
     client = TestClient(application)
 
diff --git a/docs/docs/guides/submitting-a-project.md b/docs/docs/guides/submitting-a-project.md
index 4b24b36..1f8faf1 100644
--- a/docs/docs/guides/submitting-a-project.md
+++ b/docs/docs/guides/submitting-a-project.md
@@ -16,31 +16,31 @@ Prepare the following information:
 You may also provide a Matrix room and indicate whether the project supports
 end-to-end encrypted rooms.
 
-!!! note "Listings are public"
+!!! note "Projects are public"
     Do not include secrets, access tokens, private room links, or other
     information that should not appear in the public directory.
 
-## Publish a listing
+## Publish a project
 
 1. Sign in to Matrix Directory.
 2. Open your dashboard.
-3. Select **Add listing**.
-4. Complete the required fields. The listing status panel shows which required
+3. Select **Add project**.
+4. Complete the required fields. The project status panel shows which required
    information is still missing.
 5. Review the directory-card preview.
-6. Select **Publish listing**.
+6. Select **Publish project**.
 
-The listing is associated with your authenticated account and published
+A project is associated with your authenticated account and published
 immediately. After a successful submission, the application redirects you to
-the new public listing.
+the new public view of the project.
 
 ## Types and labels
 
-A project type describes what the project **is**. Every listing has exactly
+A project type describes what the project **is**. Every project has exactly
 one of the initial directory types: **Bot**, **SDK**, **Framework**,
 **Bridges**, **Clients**, **Server**, or **Integrations**.
 
-Labels describe what the project **does**. A listing may have any number of
+Labels describe what the project **does**. A project may have any number of
 labels, including none. Examples include **Dev tools** and **Utility**.
 
 This separation lets visitors filter by both the project format and its
@@ -63,10 +63,10 @@ purpose.
 URLs must be absolute `http://` or `https://` URLs no longer than 255
 characters.
 
-At least one repository or website must remain on the listing when it is
+At least one repository or website must remain on the project when it is
 updated later.
 
-!!! note "Listings are public"
+!!! note "Projects are public"
     Do not include secrets, access tokens, private room links, or other
     information that should not appear in the public directory.
 
@@ -84,25 +84,25 @@ The **About** editor supports CommonMark formatting, including:
 
 Raw HTML is displayed as text rather than interpreted as page markup.
 
-Images embedded with Markdown are not rendered on saved listings. When the
+Images embedded with Markdown are not rendered on saved projects. When the
 Markdown is parsed, image nodes are reduced to their alternative text to
-prevent a listing from making visitors contact an untrusted image host. Use a
+prevent a project from making visitors contact an untrusted image host. Use a
 normal link when readers need access to a screenshot or diagram.
 
-## Manage your listings
+## Manage your projects
 
 Open the dashboard to see projects owned by your account. Ownership comes from
 your authenticated session; it cannot be assigned to another user through the
 submission form.
 
-Only an owner can update or delete their listing. Deleting a listing is
+Only an owner can update or delete their project. Deleting a project is
 permanent, so confirm that you selected the intended project before proceeding.
 
 ## Troubleshooting
 
-If a listing cannot be published:
+If a project cannot be published:
 
-- Check the listing status panel for missing required fields.
+- Check the project status panel for missing required fields.
 - Confirm that every URL is absolute and begins with `http://` or `https://`.
 - Confirm that at least one repository or website is present.
 - Confirm that at least one category is selected.
diff --git a/docs/docs/img/favicon.svg b/docs/docs/img/favicon.svg
index 089e2ee..078f018 100644
--- a/docs/docs/img/favicon.svg
+++ b/docs/docs/img/favicon.svg
@@ -1 +1,45 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path stroke-width="4" d="M15 8H7v48h8M49 8h8v48h-8"/><path stroke-width="4.5" d="M19 45V24l13 16 13-16v21"/></g><circle cx="32" cy="16" r="2.8" fill="currentColor"/><circle cx="32" cy="22.5" r="2.8" fill="currentColor"/></svg>
\ No newline at end of file
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 64 64"
+>
+  <style>
+    :root {
+      color: #16181c;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        color: #f5f5f4;
+      }
+    }
+  </style>
+
+  <g
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path
+      stroke-width="4"
+      d="M15 8H7v48h8M49 8h8v48h-8"
+    />
+    <path
+      stroke-width="4.5"
+      d="M19 45V24l13 16 13-16v21"
+    />
+  </g>
+
+  <circle
+    cx="32"
+    cy="16"
+    r="2.8"
+    fill="currentColor"
+  />
+  <circle
+    cx="32"
+    cy="22.5"
+    r="2.8"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/docs/docs/img/matrix-directory-mark-light.svg b/docs/docs/img/matrix-directory-mark-light.svg
new file mode 100644
index 0000000..a86157c
--- /dev/null
+++ b/docs/docs/img/matrix-directory-mark-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="title desc" viewBox="0 0 512 512"><g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"><path stroke-width="42" d="M112 72H56v368h56M400 72h56v368h-56"/><path stroke-width="46" d="M160 346V192l96 118 96-118v154"/></g><circle cx="256" cy="128" r="25"/><circle cx="256" cy="174" r="25"/><g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"><path stroke-width="28" d="M112 72H56v368h56M400 72h56v368h-56"/><path stroke-width="32" d="M160 346V192l96 118 96-118v154"/></g><circle cx="256" cy="128" r="18" fill="#fff"/><circle cx="256" cy="174" r="18" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/docs/docs/img/matrix-directory-mark.svg b/docs/docs/img/matrix-directory-mark.svg
index a86157c..06a261a 100644
--- a/docs/docs/img/matrix-directory-mark.svg
+++ b/docs/docs/img/matrix-directory-mark.svg
@@ -1 +1,50 @@
-<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="title desc" viewBox="0 0 512 512"><g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"><path stroke-width="42" d="M112 72H56v368h56M400 72h56v368h-56"/><path stroke-width="46" d="M160 346V192l96 118 96-118v154"/></g><circle cx="256" cy="128" r="25"/><circle cx="256" cy="174" r="25"/><g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"><path stroke-width="28" d="M112 72H56v368h56M400 72h56v368h-56"/><path stroke-width="32" d="M160 346V192l96 118 96-118v154"/></g><circle cx="256" cy="128" r="18" fill="#fff"/><circle cx="256" cy="174" r="18" fill="#fff"/></svg>
\ No newline at end of file
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 512 512"
+  fill="none"
+>
+  <style>
+    :root {
+      color: #16181c;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        color: #f5f5f4;
+      }
+    }
+  </style>
+
+  <g
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path
+      d="M112 72H56V440H112"
+      stroke-width="28"
+    />
+    <path
+      d="M400 72H456V440H400"
+      stroke-width="28"
+    />
+    <path
+      d="M160 346V192L256 310L352 192V346"
+      stroke-width="32"
+    />
+  </g>
+
+  <circle
+    cx="256"
+    cy="128"
+    r="18"
+    fill="currentColor"
+  />
+
+  <circle
+    cx="256"
+    cy="174"
+    r="18"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml
index 1584eba..e04afd8 100644
--- a/docs/mkdocs.yml
+++ b/docs/mkdocs.yml
@@ -50,7 +50,7 @@ theme:
     - toc.follow
   icon:
     repo: fontawesome/brands/github-alt
-  logo: img/matrix-directory-mark.svg
+  logo: img/matrix-directory-mark-light.svg
   favicon: img/favicon.svg
 plugins:
   - search
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg
index 089e2ee..078f018 100644
--- a/frontend/public/favicon.svg
+++ b/frontend/public/favicon.svg
@@ -1 +1,45 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path stroke-width="4" d="M15 8H7v48h8M49 8h8v48h-8"/><path stroke-width="4.5" d="M19 45V24l13 16 13-16v21"/></g><circle cx="32" cy="16" r="2.8" fill="currentColor"/><circle cx="32" cy="22.5" r="2.8" fill="currentColor"/></svg>
\ No newline at end of file
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 64 64"
+>
+  <style>
+    :root {
+      color: #16181c;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        color: #f5f5f4;
+      }
+    }
+  </style>
+
+  <g
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path
+      stroke-width="4"
+      d="M15 8H7v48h8M49 8h8v48h-8"
+    />
+    <path
+      stroke-width="4.5"
+      d="M19 45V24l13 16 13-16v21"
+    />
+  </g>
+
+  <circle
+    cx="32"
+    cy="16"
+    r="2.8"
+    fill="currentColor"
+  />
+  <circle
+    cx="32"
+    cy="22.5"
+    r="2.8"
+    fill="currentColor"
+  />
+</svg>
\ No newline at end of file
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 24c1dc4..fe17502 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
 import SiteHeader from './components/SiteHeader.vue'
+import SiteFooter from './components/SiteFooter.vue'
 </script>
 
 <template>
-  <div class="min-h-screen bg-zinc-50">
+  <div class="flex min-h-screen flex-col bg-zinc-50">
     <SiteHeader />
-    <RouterView />
+    <div class="flex-1">
+      <RouterView />
+    </div>
+    <SiteFooter />
   </div>
 </template>
diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
index aa7bcd6..a45f734 100644
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -76,8 +76,27 @@ async function request<T>(path: string, init?: RequestInit): Promise<T> {
   return response.json() as Promise<T>
 }
 
-export function listProjects() {
-  return request<ProjectListItem[]>('/projects/')
+type ProjectQuery = {
+  query?: string
+  projectType?: string
+  label?: string
+  limit?: number
+  offset?: number
+}
+
+export function listProjects(filters: ProjectQuery = {}) {
+  const params = new URLSearchParams()
+
+  if (filters.query) params.set('q', filters.query)
+  if (filters.projectType) params.set('project_type', filters.projectType)
+  if (filters.label) params.set('label', filters.label)
+  if (filters.limit !== undefined) params.set('limit', String(filters.limit))
+  if (filters.offset !== undefined) params.set('offset', String(filters.offset))
+
+  const queryString = params.toString()
+  const path = queryString ? `/projects/?${queryString}` : '/projects/'
+
+  return request<ProjectListItem[]>(path)
 }
 
 export function getProject(id: string) {
@@ -111,6 +130,20 @@ export function deleteProject(id: string) {
   })
 }
 
+export function listRandomProjects(limit = 6) {
+  const params = new URLSearchParams({
+    limit: String(limit),
+  })
+
+  return request<ProjectListItem[]>(
+    `/projects/random/?${params.toString()}`,
+  )
+}
+
+export function countProjects() {
+  return request<number>('/projects/count/')
+}
+
 export function listProjectTypes() {
   return request<ProjectType[]>('/project-types/')
 }
@@ -125,3 +158,10 @@ export function createProject(input: ProjectCreate) {
     body: JSON.stringify(input),
   })
 }
+
+export function updateProject(id: string, input: ProjectCreate) {
+  return request<Project>(`/projects/${id}`, {
+    method: 'PATCH',
+    body: JSON.stringify(input),
+  })
+}
diff --git a/frontend/src/components/BrandLogo.vue b/frontend/src/components/BrandLogo.vue
new file mode 100644
index 0000000..b9e4b5a
--- /dev/null
+++ b/frontend/src/components/BrandLogo.vue
@@ -0,0 +1,28 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    aria-hidden="true"
+    viewBox="0 0 512 512"
+  ><g
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  ><path
+    stroke-width="28"
+    d="M112 72H56v368h56M400 72h56v368h-56"
+  /><path
+    stroke-width="32"
+    d="M160 346V192l96 118 96-118v154"
+  /></g><circle
+    cx="256"
+    cy="128"
+    r="18"
+    fill="currentColor"
+  /><circle
+    cx="256"
+    cy="174"
+    r="18"
+    fill="currentColor"
+  /></svg>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/MatrixLogo.vue b/frontend/src/components/MatrixLogo.vue
new file mode 100644
index 0000000..52265c6
--- /dev/null
+++ b/frontend/src/components/MatrixLogo.vue
@@ -0,0 +1,10 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 27.9 32"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="M27.005 31.205V.705h-2.19v-.732h3.04v32h-3.04v-.732zM8.135 10.405v1.54h.044a4.486 4.486 0 0 1 1.49-1.37c.58-.323 1.25-.485 1.99-.485.72 0 1.38.14 1.97.42.595.279 1.05.771 1.36 1.48.338-.5.796-.941 1.38-1.32.58-.383 1.27-.574 2.06-.574.602 0 1.16.074 1.67.22.514.148.954.383 1.32.707.366.323.653.746.859 1.27.205.522.308 1.15.308 1.89v7.63h-3.13v-6.46c0-.383-.015-.743-.044-1.08a2.302 2.302 0 0 0-.242-.882 1.47 1.47 0 0 0-.584-.596c-.257-.146-.606-.22-1.05-.22-.44 0-.796.085-1.07.253-.272.17-.485.39-.639.662a2.649 2.649 0 0 0-.308.927 7.075 7.075 0 0 0-.078 1.05v6.35h-3.13v-6.4c0-.338-.007-.673-.021-1a2.826 2.826 0 0 0-.188-.916 1.408 1.408 0 0 0-.55-.673c-.258-.168-.636-.253-1.14-.253a2.334 2.334 0 0 0-.584.1 1.95 1.95 0 0 0-.705.374c-.228.184-.422.449-.584.794-.161.346-.242.798-.242 1.36v6.62h-3.13v-11.4zM.841.737v30.5h2.19v.732h-3.04v-32h3.03v.732z" />
+  </svg>
+</template>
diff --git a/frontend/src/components/ProjectActions.vue b/frontend/src/components/ProjectActions.vue
new file mode 100644
index 0000000..a10f8a7
--- /dev/null
+++ b/frontend/src/components/ProjectActions.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import {
+  EllipsisHorizontalIcon,
+  EyeIcon,
+  PencilSquareIcon,
+  TrashIcon,
+} from '@heroicons/vue/24/outline'
+
+import type { ProjectListItem } from '../types/project'
+import { projectPath } from '../utils/projectRoutes'
+
+const props = defineProps<{
+  project: ProjectListItem
+}>()
+
+const emit = defineEmits<{
+  delete: []
+}>()
+
+const menuOpen = ref(false)
+const menuPlacement = ref<'above' | 'below'>('below')
+
+function toggleMenu(event: MouseEvent) {
+  if (menuOpen.value) {
+    menuOpen.value = false
+    return
+  }
+
+  const button = event.currentTarget as HTMLElement
+  const spaceBelow = window.innerHeight - button.getBoundingClientRect().bottom
+
+  menuPlacement.value = spaceBelow < 128 ? 'above' : 'below'
+  document.dispatchEvent(
+    new CustomEvent('project-actions-open', {
+      detail: props.project.id,
+    }),
+  )
+  menuOpen.value = true
+}
+
+function closeWhenAnotherMenuOpens(event: Event) {
+  if ((event as CustomEvent<string>).detail !== props.project.id) {
+    menuOpen.value = false
+  }
+}
+
+function closeMenuOnOutsideClick(event: PointerEvent) {
+  if (
+    menuOpen.value &&
+    (!(event.target instanceof Element) ||
+      !event.target.closest('[data-project-actions]'))
+  ) {
+    menuOpen.value = false
+  }
+}
+
+function remove() {
+  menuOpen.value = false
+  emit('delete')
+}
+
+onMounted(() => {
+  document.addEventListener('pointerdown', closeMenuOnOutsideClick)
+  document.addEventListener('project-actions-open', closeWhenAnotherMenuOpens)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', closeMenuOnOutsideClick)
+  document.removeEventListener('project-actions-open', closeWhenAnotherMenuOpens)
+})
+</script>
+
+<template>
+  <div
+    data-project-actions
+    class="absolute right-2 top-3 sm:static sm:shrink-0"
+  >
+    <div class="hidden items-center sm:flex">
+      <RouterLink
+        :to="`/projects/${props.project.id}/edit`"
+        :aria-label="`Edit ${props.project.name}`"
+        title="Edit project"
+        class="grid size-9 place-items-center rounded-[8px] text-[var(--faint)] no-underline transition hover:bg-[var(--sunk)] hover:text-[var(--text)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--accent)]"
+      >
+        <PencilSquareIcon
+          class="size-4"
+          aria-hidden="true"
+        />
+      </RouterLink>
+
+      <RouterLink
+        :to="projectPath(props.project)"
+        aria-label="View project"
+        title="View project"
+        class="grid size-9 place-items-center rounded-[8px] text-[var(--faint)] no-underline transition hover:bg-[var(--sunk)] hover:text-[var(--text)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--accent)]"
+      >
+        <EyeIcon
+          class="size-4"
+          aria-hidden="true"
+        />
+      </RouterLink>
+
+      <button
+        type="button"
+        :aria-label="`Delete ${props.project.name}`"
+        title="Delete project"
+        class="grid size-9 cursor-pointer place-items-center rounded-[8px] text-[var(--faint)] transition hover:bg-[var(--danger-soft)] hover:text-[var(--danger)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--danger)]"
+        @click="remove"
+      >
+        <TrashIcon
+          class="size-4"
+          aria-hidden="true"
+        />
+      </button>
+    </div>
+
+    <div class="relative sm:hidden">
+      <button
+        type="button"
+        aria-label="Project actions"
+        :aria-expanded="menuOpen"
+        class="grid size-9 cursor-pointer place-items-center rounded-[8px] bg-[var(--bg)] text-[var(--faint)] transition hover:text-[var(--text)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--accent)]"
+        @click="toggleMenu"
+      >
+        <EllipsisHorizontalIcon
+          class="size-5"
+          aria-hidden="true"
+        />
+      </button>
+
+      <div
+        v-if="menuOpen"
+        class="absolute right-0 z-10 w-36 rounded-[10px] border border-[var(--border)] bg-[var(--surface)] p-1 shadow-lg"
+        :class="menuPlacement === 'above' ? 'bottom-10' : 'top-10'"
+      >
+        <RouterLink
+          :to="projectPath(props.project)"
+          class="flex items-center gap-2 rounded-[7px] px-3 py-2 text-sm text-[var(--text)] no-underline hover:bg-[var(--sunk)]"
+          @click="menuOpen = false"
+        >
+          <EyeIcon class="size-4" />
+          View
+        </RouterLink>
+        <RouterLink
+          :to="`/projects/${props.project.id}/edit`"
+          class="flex items-center gap-2 rounded-[7px] px-3 py-2 text-sm text-[var(--text)] no-underline hover:bg-[var(--sunk)]"
+          @click="menuOpen = false"
+        >
+          <PencilSquareIcon class="size-4" />
+          Edit
+        </RouterLink>
+        <button
+          type="button"
+          class="flex w-full cursor-pointer items-center gap-2 rounded-[7px] px-3 py-2 text-sm text-[var(--danger)] hover:bg-[var(--danger-soft)]"
+          @click="remove"
+        >
+          <TrashIcon class="size-4" />
+          Delete
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/ProjectBrowseRow.vue b/frontend/src/components/ProjectBrowseRow.vue
new file mode 100644
index 0000000..fe2b2df
--- /dev/null
+++ b/frontend/src/components/ProjectBrowseRow.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+
+import type { ProjectListItem } from '../types/project'
+import { projectPath } from '../utils/projectRoutes'
+
+const props = defineProps<{
+  project: ProjectListItem
+}>()
+
+const primaryLabel = computed(() => props.project.labels[0])
+
+const extraLabelCount = computed(() =>
+  Math.max(props.project.labels.length - 1, 0),
+)
+
+const ownerInitial = computed(() =>
+  (
+    props.project.owner?.display_name ||
+    props.project.owner?.matrix_id ||
+    '?'
+  )
+    .replace(/^@/, '')
+    .charAt(0)
+    .toUpperCase(),
+)
+</script>
+
+<template>
+  <RouterLink
+    :to="projectPath(project)"
+    class="
+      group flex min-h-[66px] items-center gap-4
+      rounded-b-[10px]
+      border-b border-[var(--border)]
+      px-2 py-3
+      transition
+      hover:bg-[var(--hover)]
+      sm:px-3
+    "
+  >
+    <!-- Initial -->
+    <div
+      class="
+        grid size-11 shrink-0 place-items-center
+        rounded-[11px] bg-[var(--accent-soft)]
+        font-display text-[16px] font-semibold
+        text-[var(--accent-ink)]
+      "
+    >
+      {{ project.name.charAt(0).toUpperCase() }}
+    </div>
+
+    <!-- Main content -->
+    <div class="min-w-0 flex-1">
+      <div
+        class="
+          flex min-w-0 flex-col gap-1
+          sm:flex-row sm:items-center sm:gap-3
+        "
+      >
+        <h2
+          class="
+            min-w-0 truncate font-display text-[15px] font-semibold
+            tracking-[-0.01em] text-[var(--text)]
+          "
+        >
+          {{ project.name }}
+        </h2>
+
+        <div
+          v-if="project.owner"
+          class="
+            hidden min-w-0 items-center gap-1.5
+            md:flex
+          "
+        >
+          <div
+            class="
+              grid size-4 shrink-0 place-items-center
+              overflow-hidden rounded-full
+              bg-[var(--accent-soft)]
+              text-[8px] font-semibold
+              text-[var(--accent-ink)]
+            "
+          >
+            <img
+              v-if="project.owner.avatar_url"
+              :src="project.owner.avatar_url"
+              alt=""
+              class="size-full object-cover"
+            >
+
+            <span v-else>
+              {{ ownerInitial }}
+            </span>
+          </div>
+
+          <span
+            class="
+              max-w-[150px] truncate
+              font-mono text-[10px]
+              text-[var(--faint)]
+            "
+          >
+            {{
+              project.owner.display_name ||
+                project.owner.matrix_id
+            }}
+          </span>
+        </div>
+      </div>
+
+      <p
+        class="
+          mt-1 max-w-2xl
+          break-words
+          text-[13.5px] leading-5
+          text-[var(--muted)]
+        "
+      >
+        {{ project.short_description }}
+      </p>
+
+      <div class="mt-2.5 flex flex-wrap items-center gap-1.5">
+        <span
+          class="
+            rounded-[6px] bg-[var(--accent-soft)]
+            px-2 py-[3px]
+            text-[10.5px] font-medium
+            text-[var(--accent-ink)]
+          "
+        >
+          {{ project.project_type.name }}
+        </span>
+
+        <span
+          v-if="primaryLabel"
+          class="
+            rounded-[6px] bg-[var(--sunk)]
+            px-2 py-[3px]
+            text-[10.5px] text-[var(--muted)]
+          "
+        >
+          {{ primaryLabel.name }}
+        </span>
+
+        <span
+          v-if="extraLabelCount"
+          class="
+            rounded-[6px] bg-[var(--sunk)]
+            px-2 py-[3px]
+            font-mono text-[9.5px]
+            text-[var(--faint)]
+          "
+        >
+          +{{ extraLabelCount }}
+        </span>
+      </div>
+    </div>
+  </RouterLink>
+</template>
diff --git a/frontend/src/components/BotCard.vue b/frontend/src/components/ProjectCard.vue
similarity index 98%
rename from frontend/src/components/BotCard.vue
rename to frontend/src/components/ProjectCard.vue
index df91e03..17a5ace 100644
--- a/frontend/src/components/BotCard.vue
+++ b/frontend/src/components/ProjectCard.vue
@@ -4,6 +4,7 @@ import { RouterLink } from 'vue-router'
 import { CheckIcon } from '@heroicons/vue/24/outline'
 
 import type { ProjectListItem } from '../types/project'
+import { projectPath } from '../utils/projectRoutes'
 
 const props = defineProps<{
   project: ProjectListItem
@@ -36,7 +37,7 @@ const ownerInitial = computed(() =>
 
 <template>
   <RouterLink
-    :to="`/bots/${project.id}`"
+    :to="projectPath(project)"
     class="
       group block rounded-[14px]
       border border-[var(--border)]
@@ -206,4 +207,4 @@ const ownerInitial = computed(() =>
       </div>
     </div>
   </RouterLink>
-</template>
\ No newline at end of file
+</template>
diff --git a/frontend/src/components/SearchBar.vue b/frontend/src/components/SearchBar.vue
new file mode 100644
index 0000000..981444e
--- /dev/null
+++ b/frontend/src/components/SearchBar.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import {
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  useId,
+} from 'vue'
+import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
+
+const query = defineModel<string>({ required: true })
+
+const props = withDefaults(
+  defineProps<{
+    placeholder?: string
+    label?: string
+    enableShortcut?: boolean
+  }>(),
+  {
+    placeholder: 'Search projects…',
+    label: 'Search projects',
+    enableShortcut: true,
+  },
+)
+
+const searchInput = ref<HTMLInputElement | null>(null)
+const inputId = useId()
+
+function clearSearch() {
+  query.value = ''
+  void nextTick(() => searchInput.value?.focus())
+}
+
+function handleShortcut(event: KeyboardEvent) {
+  const target = event.target as HTMLElement | null
+  const isTyping =
+    target?.tagName === 'INPUT' ||
+    target?.tagName === 'TEXTAREA' ||
+    target?.isContentEditable
+
+  if (event.key === '/' && !isTyping) {
+    event.preventDefault()
+    searchInput.value?.focus()
+  }
+}
+
+onMounted(() => {
+  if (props.enableShortcut) {
+    window.addEventListener('keydown', handleShortcut)
+  }
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleShortcut)
+})
+</script>
+
+<template>
+  <div class="relative block">
+    <label
+      :for="inputId"
+      class="sr-only"
+    >
+      {{ label }}
+    </label>
+
+    <MagnifyingGlassIcon
+      class="pointer-events-none absolute left-4 top-1/2 size-[18px] -translate-y-1/2 text-[var(--faint)]"
+    />
+
+    <input
+      :id="inputId"
+      ref="searchInput"
+      v-model="query"
+      type="search"
+      :placeholder="placeholder"
+      class="h-[58px] w-full rounded-[13px] border border-[var(--border-strong)] bg-[var(--surface)] pl-12 pr-20 text-[14px] text-[var(--text)] outline-none transition placeholder:text-[var(--faint)] focus:border-[var(--accent)] focus:ring-3 focus:ring-[var(--accent-soft)] sm:text-[15px]"
+    >
+
+    <button
+      v-if="query"
+      type="button"
+      class="absolute right-4 top-1/2 -translate-y-1/2 rounded-md px-2 py-1 text-xs text-[var(--muted)] transition hover:bg-[var(--sunk)] hover:text-[var(--text)]"
+      @click="clearSearch"
+    >
+      Clear
+    </button>
+  </div>
+</template>
diff --git a/frontend/src/components/SearchFilter.vue b/frontend/src/components/SearchFilter.vue
new file mode 100644
index 0000000..eed7625
--- /dev/null
+++ b/frontend/src/components/SearchFilter.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import SearchBar from './SearchBar.vue'
+
+type FilterKind = 'projectType' | 'label'
+
+type FilterChip = {
+  kind: FilterKind
+  name: string
+}
+
+const props = defineProps<{
+  projectTypes: string[]
+  labels: string[]
+  placeholder: string
+}>()
+
+const query = defineModel<string>('query', { required: true })
+
+const projectTypeFilter = defineModel<string>(
+  'projectTypeFilter',
+  { required: true },
+)
+
+const labelFilter = defineModel<string>(
+  'labelFilter',
+  { required: true },
+)
+
+const filterChips = computed<FilterChip[]>(() => [
+  ...props.projectTypes.map((name) => ({
+    kind: 'projectType' as const,
+    name,
+  })),
+  ...props.labels
+    .filter((name) => !props.projectTypes.includes(name))
+    .map((name) => ({
+      kind: 'label' as const,
+      name,
+    })),
+])
+
+const activeFilterLabel = computed(
+  () => projectTypeFilter.value || labelFilter.value,
+)
+
+function selectFilter(filter: FilterChip) {
+  if (filter.kind === 'projectType') {
+    projectTypeFilter.value = filter.name
+    labelFilter.value = ''
+  } else {
+    labelFilter.value = filter.name
+    projectTypeFilter.value = ''
+  }
+}
+
+function clearFacetFilters() {
+  projectTypeFilter.value = ''
+  labelFilter.value = ''
+}
+</script>
+
+<template>
+  <section
+    class="min-w-0 max-w-full"
+    aria-label="Search and filter projects"
+  >
+    <SearchBar
+      v-model="query"
+      :placeholder="placeholder"
+    />
+
+    <fieldset
+      v-if="filterChips.length"
+      class="mt-4 min-w-0 max-w-full"
+    >
+      <legend class="sr-only">
+        Filter projects
+      </legend>
+
+      <div
+        class="flex w-full max-w-full gap-2 overflow-x-auto overscroll-x-contain pb-2 sm:flex-wrap"
+      >
+        <button
+          type="button"
+          class="shrink-0 cursor-pointer rounded-full border px-3.5 py-1.5 text-[12px] transition"
+          :class="!activeFilterLabel
+            ? 'border-[var(--accent)] bg-[var(--accent-soft)] font-medium text-[var(--accent-ink)]'
+            : 'border-[var(--border)] bg-[var(--surface)] text-[var(--muted)] hover:border-[var(--border-strong)] hover:text-[var(--text)]'"
+          :aria-pressed="!activeFilterLabel"
+          @click="clearFacetFilters"
+        >
+          All
+        </button>
+
+        <button
+          v-for="filter in filterChips"
+          :key="`${filter.kind}:${filter.name}`"
+          type="button"
+          class="shrink-0 cursor-pointer rounded-full border px-3.5 py-1.5 text-[12px] transition"
+          :class="activeFilterLabel === filter.name
+            ? 'border-[var(--accent)] bg-[var(--accent-soft)] font-medium text-[var(--accent-ink)]'
+            : 'border-[var(--border)] bg-[var(--surface)] text-[var(--muted)] hover:border-[var(--border-strong)] hover:text-[var(--text)]'"
+          :aria-pressed="activeFilterLabel === filter.name"
+          @click="selectFilter(filter)"
+        >
+          {{ filter.name }}
+        </button>
+      </div>
+    </fieldset>
+  </section>
+</template>
diff --git a/frontend/src/components/SiteFooter.vue b/frontend/src/components/SiteFooter.vue
new file mode 100644
index 0000000..3d31a5b
--- /dev/null
+++ b/frontend/src/components/SiteFooter.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+
+import MatrixLogo from './MatrixLogo.vue'
+const currentYear = new Date().getFullYear()
+</script>
+
+<template>
+  <footer class="border-t border-[var(--border)] bg-[var(--surface)]">
+    <div
+      class="mx-auto w-full max-w-[1120px] px-5 py-6 sm:px-8"
+    >
+      <div
+        class="flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between"
+      >
+        <div class="max-w-sm">
+          <RouterLink
+            to="/"
+            class="
+              inline-flex items-center gap-2
+              font-display text-sm font-semibold tracking-tight
+              text-[var(--text)]
+              transition-colors
+              hover:text-[var(--accent-deep)]
+            "
+          >
+            Matrix Directory
+          </RouterLink>
+
+          <p
+            class="
+              mt-2 text-sm leading-6
+              text-[var(--muted)]
+            "
+          >
+            Discover projects across the Matrix ecosystem.
+          </p>
+        </div>
+
+        <nav
+          aria-label="Footer navigation"
+          class="
+            flex flex-wrap gap-x-6 gap-y-3
+            text-sm text-[var(--muted)]
+          "
+        >
+          <RouterLink
+            to="/browse"
+            class="
+              transition-colors
+              hover:text-[var(--text)]
+            "
+          >
+            Browse
+          </RouterLink>
+
+          <RouterLink
+            to="/submit"
+            class="
+              transition-colors
+              hover:text-[var(--text)]
+            "
+          >
+            Submit
+          </RouterLink>
+
+          <a
+            href="/docs"
+            class="
+              transition-colors
+              hover:text-[var(--text)]
+            "
+          >
+            Docs
+          </a>
+
+          <a
+            href="https://github.com/Code-Society-Lab/matrix-directory"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="
+              transition-colors
+              hover:text-[var(--text)]
+            "
+          >
+            GitHub
+          </a>
+        </nav>
+      </div>
+
+      <div
+        class="
+          mt-7 flex flex-col gap-2
+          border-t border-[var(--border)]
+          pt-5
+          text-xs text-[var(--faint)]
+          sm:flex-row sm:items-center sm:justify-between
+        "
+      >
+        <p>
+          © {{ currentYear }} Code Society Lab
+        </p>
+
+        <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
+          <a
+            href="https://matrix.org/"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Matrix.org"
+            class="text-[var(--faint)] transition-colors hover:text-[var(--text)]"
+          >
+            <MatrixLogo class="size-5" />
+          </a>
+          <p>
+            Open source · Not affiliated with The Matrix.org Foundation
+          </p>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
diff --git a/frontend/src/components/SiteHeader.vue b/frontend/src/components/SiteHeader.vue
index 4d25117..fb68100 100644
--- a/frontend/src/components/SiteHeader.vue
+++ b/frontend/src/components/SiteHeader.vue
@@ -15,8 +15,7 @@ import {
 
 import { currentUser, logout } from '../auth'
 
-import logoUrl from '../assets/matrix-directory-mark.svg'
-
+import BrandLogo from './BrandLogo.vue'
 
 const docsUrl =
   import.meta.env.VITE_DOCS_URL ??
@@ -73,10 +72,6 @@ const profileLabel = computed(() =>
 )
 
 function isActive(path: string) {
-  if (path === '/') {
-    return route.path === '/'
-  }
-
   return route.path.startsWith(path)
 }
 
@@ -108,11 +103,7 @@ watch(
         to="/"
         class="flex min-w-0 items-center gap-2.5 no-underline"
       >
-        <img
-          :src="logoUrl"
-          alt="Matrix Directory Logo"
-          class="size-[30px] text-[var(--accent-ink)]"
-        >
+        <BrandLogo class="size-7.5 text-[var(--text)] transition-colors hover:text-[var(--text)]" />
 
         <div class="flex min-w-0 items-baseline gap-2">
           <span
@@ -126,10 +117,10 @@ watch(
       <!-- Desktop navigation -->
       <nav class="hidden items-center gap-1 sm:flex">
         <RouterLink
-          to="/"
+          to="/browse"
           class="rounded-lg px-3 py-2 text-sm no-underline transition"
           :class="
-            isActive('/')
+            isActive('/browse')
               ? 'bg-[var(--sunk)] font-medium text-[var(--text)]'
               : 'text-[var(--muted)] hover:bg-[var(--sunk)] hover:text-[var(--text)]'
           "
@@ -139,8 +130,6 @@ watch(
 
         <a
           :href="docsUrl"
-          target="_blank"
-          rel="noopener noreferrer"
           class="inline-flex items-center gap-1.5 rounded-lg px-3 py-2 text-sm text-[var(--muted)] no-underline transition hover:bg-[var(--sunk)] hover:text-[var(--text)]"
         >
           Docs
@@ -284,10 +273,10 @@ watch(
           <!-- Links -->
           <nav class="p-2">
             <RouterLink
-              to="/"
+              to="/browse"
               class="flex rounded-[8px] px-3 py-2.5 text-sm no-underline transition"
               :class="
-                isActive('/')
+                isActive('/browse')
                   ? 'bg-[var(--sunk)] font-medium text-[var(--text)]'
                   : 'text-[var(--muted)] hover:bg-[var(--sunk)] hover:text-[var(--text)]'
               "
diff --git a/frontend/src/components/markdown/markdown.css b/frontend/src/components/markdown/markdown.css
index 4ea0f58..c31382a 100644
--- a/frontend/src/components/markdown/markdown.css
+++ b/frontend/src/components/markdown/markdown.css
@@ -503,6 +503,8 @@
     border-radius: 0;
 
     background: transparent;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
 }
 
 .markdown-editor--readonly:focus-within {
diff --git a/frontend/src/composables/useProjectDirectory.ts b/frontend/src/composables/useProjectDirectory.ts
new file mode 100644
index 0000000..0c424e6
--- /dev/null
+++ b/frontend/src/composables/useProjectDirectory.ts
@@ -0,0 +1,81 @@
+import { ref } from 'vue'
+
+import { listLabels, listProjects, listProjectTypes } from '../api/client'
+import type { ProjectListItem } from '../types/project'
+
+export function useProjectDirectory() {
+  const projects = ref<ProjectListItem[]>([])
+  const query = ref('')
+  const projectTypeFilter = ref('')
+  const labelFilter = ref('')
+  const loading = ref(true)
+  const error = ref('')
+  const projectTypes = ref<string[]>([])
+  const labels = ref<string[]>([])
+  let projectsRequestId = 0
+
+  function clearFilters() {
+    query.value = ''
+    projectTypeFilter.value = ''
+    labelFilter.value = ''
+  }
+
+  async function loadProjects() {
+    projectsRequestId += 1
+    const requestId = projectsRequestId
+    loading.value = true
+    error.value = ''
+
+    try {
+      const result = await listProjects({
+        query: query.value.trim() || undefined,
+        projectType: projectTypeFilter.value || undefined,
+        label: labelFilter.value || undefined,
+        limit: 50,
+      })
+
+      if (requestId === projectsRequestId) projects.value = result
+    } catch (err) {
+      if (requestId === projectsRequestId) {
+        error.value =
+          err instanceof Error ? err.message : 'Could not load projects.'
+      }
+    } finally {
+      if (requestId === projectsRequestId) loading.value = false
+    }
+  }
+
+  async function loadFilterOptions() {
+    const [types, availableLabels] = await Promise.all([
+      listProjectTypes(),
+      listLabels(),
+    ])
+
+    projectTypes.value = types.map((type) => type.name)
+    labels.value = availableLabels.map((label) => label.name)
+  }
+
+  async function loadDirectory() {
+    try {
+      await Promise.all([loadProjects(), loadFilterOptions()])
+    } catch (err) {
+      error.value =
+        err instanceof Error ? err.message : 'Could not load filters.'
+      loading.value = false
+    }
+  }
+
+  return {
+    projects,
+    query,
+    projectTypeFilter,
+    labelFilter,
+    loading,
+    error,
+    projectTypes,
+    labels,
+    clearFilters,
+    loadProjects,
+    loadDirectory,
+  }
+}
diff --git a/frontend/src/composables/useProjectForm.ts b/frontend/src/composables/useProjectForm.ts
new file mode 100644
index 0000000..cf7171c
--- /dev/null
+++ b/frontend/src/composables/useProjectForm.ts
@@ -0,0 +1,206 @@
+import { computed, reactive, ref, type Ref } from 'vue'
+import type { Router } from 'vue-router'
+
+import {
+  ApiError,
+  createProject,
+  listLabels,
+  listMyProjects,
+  listProjectTypes,
+  updateProject,
+} from '../api/client'
+import type { Label, ProjectCreate, ProjectType } from '../types/project'
+import { projectPath } from '../utils/projectRoutes'
+
+export function useProjectForm(
+  router: Router,
+  editingProjectId: Ref<string>,
+) {
+  const isEditing = computed(() => Boolean(editingProjectId.value))
+  const form = reactive<ProjectCreate>({
+    name: '',
+    short_description: '',
+    description: '',
+    repository_url: null,
+    website_url: null,
+    matrix_server_url: null,
+    supports_e2ee: false,
+    project_type_id: '',
+    label_ids: [],
+  })
+  const projectTypes = ref<ProjectType[]>([])
+  const labels = ref<Label[]>([])
+  const loadingClassifications = ref(true)
+  const loadingProject = ref(isEditing.value)
+  const projectUnavailable = ref(false)
+  const submitting = ref(false)
+  const formError = ref('')
+  const fieldErrors = ref<Record<string, string>>({})
+
+  const selectedLabels = computed(() =>
+    labels.value.filter((label) => form.label_ids.includes(label.id)),
+  )
+  const hasProjectLink = computed(() =>
+    Boolean(form.repository_url?.trim() || form.website_url?.trim()),
+  )
+  const cannotSubmit = computed(() =>
+    submitting.value ||
+    loadingClassifications.value ||
+    loadingProject.value ||
+    projectUnavailable.value ||
+    !form.name.trim() ||
+    !form.short_description.trim() ||
+    !form.description.trim() ||
+    !form.project_type_id ||
+    !hasProjectLink.value ||
+    form.short_description.length > 160 ||
+    form.description.length > 10000,
+  )
+  const checklist = computed(() => [
+    { label: 'Name', complete: Boolean(form.name.trim()), required: true },
+    {
+      label: 'Short description',
+      complete: Boolean(form.short_description.trim()),
+      required: true,
+    },
+    { label: 'About', complete: Boolean(form.description.trim()), required: true },
+    { label: 'Project link', complete: hasProjectLink.value, required: true },
+    {
+      label: 'Project type',
+      complete: Boolean(form.project_type_id),
+      required: true,
+    },
+    { label: 'Labels', complete: form.label_ids.length > 0, required: false },
+    {
+      label: 'Matrix room',
+      complete: Boolean(form.matrix_server_url?.trim()),
+      required: false,
+    },
+    { label: 'E2EE support', complete: form.supports_e2ee, required: false },
+  ])
+  const requiredChecklist = computed(() =>
+    checklist.value.filter((item) => item.required),
+  )
+  const requiredCompleteCount = computed(() =>
+    requiredChecklist.value.filter((item) => item.complete).length,
+  )
+  const projectReady = computed(() =>
+    requiredChecklist.value.every((item) => item.complete),
+  )
+
+  function fieldError(field: string) {
+    return fieldErrors.value[field]
+  }
+
+  function optionalValue(value: string | null) {
+    return value?.trim() || null
+  }
+
+  async function load() {
+    try {
+      const [availableProjectTypes, availableLabels, ownedProjects] =
+        await Promise.all([
+          listProjectTypes(),
+          listLabels(),
+          isEditing.value ? listMyProjects() : Promise.resolve(null),
+        ])
+      projectTypes.value = availableProjectTypes
+      labels.value = availableLabels
+
+      if (isEditing.value) {
+        const project = ownedProjects?.find(
+          (item) => item.id === editingProjectId.value,
+        )
+
+        if (!project) {
+          projectUnavailable.value = true
+          formError.value =
+            'This project was not found or you do not have permission to edit it.'
+          return
+        }
+
+        Object.assign(form, {
+          name: project.name,
+          short_description: project.short_description,
+          description: project.description,
+          repository_url: project.repository_url,
+          website_url: project.website_url,
+          matrix_server_url: project.matrix_server_url,
+          supports_e2ee: project.supports_e2ee,
+          project_type_id: project.project_type.id,
+          label_ids: project.labels.map((label) => label.id),
+        })
+      }
+    } catch (error) {
+      formError.value =
+        error instanceof Error
+          ? error.message
+          : 'Could not load project classifications.'
+    } finally {
+      loadingClassifications.value = false
+      loadingProject.value = false
+    }
+  }
+
+  async function submit() {
+    if (cannotSubmit.value) return
+
+    submitting.value = true
+    formError.value = ''
+    fieldErrors.value = {}
+
+    try {
+      const input = {
+        ...form,
+        name: form.name.trim(),
+        short_description: form.short_description.trim(),
+        description: form.description.trim(),
+        repository_url: optionalValue(form.repository_url),
+        website_url: optionalValue(form.website_url),
+        matrix_server_url: optionalValue(form.matrix_server_url),
+      }
+      const savedProject = isEditing.value
+        ? await updateProject(editingProjectId.value, input)
+        : await createProject(input)
+
+      await router.push(projectPath(savedProject))
+    } catch (error) {
+      if (error instanceof ApiError && error.issues.length) {
+        for (const issue of error.issues) {
+          fieldErrors.value[String(issue.loc.at(-1))] = issue.msg.replace(
+            /^Value error, /,
+            '',
+          )
+        }
+      } else {
+        formError.value =
+          error instanceof Error
+            ? error.message
+            : `Could not ${isEditing.value ? 'save' : 'publish'} the project.`
+      }
+    } finally {
+      submitting.value = false
+    }
+  }
+
+  return {
+    cannotSubmit,
+    checklist,
+    fieldError,
+    form,
+    formError,
+    isEditing,
+    labels,
+    load,
+    loadingClassifications,
+    loadingProject,
+    projectReady,
+    projectTypes,
+    projectUnavailable,
+    requiredChecklist,
+    requiredCompleteCount,
+    selectedLabels,
+    submit,
+    submitting,
+  }
+}
diff --git a/frontend/src/pages/BrowsePage.vue b/frontend/src/pages/BrowsePage.vue
new file mode 100644
index 0000000..7848e44
--- /dev/null
+++ b/frontend/src/pages/BrowsePage.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from 'vue'
+import {
+  ExclamationTriangleIcon,
+  XMarkIcon,
+} from '@heroicons/vue/24/outline'
+import { useRoute, useRouter } from 'vue-router'
+
+import ProjectBrowseRow from '../components/ProjectBrowseRow.vue'
+import { useProjectDirectory } from '../composables/useProjectDirectory'
+
+import SearchFilter from '../components/SearchFilter.vue'
+
+type SortOption = 'newest' | 'oldest' | 'name'
+
+const sortBy = ref<SortOption>('newest')
+const route = useRoute()
+const router = useRouter()
+let searchTimer: ReturnType<typeof setTimeout> | undefined
+
+const {
+  query,
+  projectTypeFilter,
+  labelFilter,
+  loading,
+  error,
+  projectTypes,
+  labels,
+  projects,
+  clearFilters,
+  loadProjects,
+  loadDirectory,
+} = useProjectDirectory()
+
+function getQueryValue(value: unknown) {
+  return typeof value === 'string' ? value : ''
+}
+
+query.value = getQueryValue(route.query.q)
+projectTypeFilter.value = getQueryValue(route.query.projectType)
+labelFilter.value = getQueryValue(route.query.label)
+
+const activeFilterLabel = computed(
+  () => projectTypeFilter.value || labelFilter.value,
+)
+
+const visibleProjects = computed(() =>
+  projects.value.toSorted((a, b) => {
+    if (sortBy.value === 'name') {
+      return a.name.localeCompare(b.name)
+    }
+
+    const direction = sortBy.value === 'oldest' ? 1 : -1
+    return (
+      (new Date(a.created_at).getTime() - new Date(b.created_at).getTime()) *
+      direction
+    )
+  }),
+)
+
+const resultLabel = computed(() => {
+  const count = visibleProjects.value.length
+  return `${count} ${count === 1 ? 'result' : 'results'}`
+})
+
+const resultsHeading = computed(() => {
+  const normalizedQuery = query.value.trim()
+
+  if (normalizedQuery && activeFilterLabel.value) {
+    return `${activeFilterLabel.value} matching “${normalizedQuery}”`
+  }
+
+  if (normalizedQuery) {
+    return `Results for “${normalizedQuery}”`
+  }
+
+  return activeFilterLabel.value || 'All projects'
+})
+
+watch([query, projectTypeFilter, labelFilter], () => {
+  if (searchTimer !== undefined) clearTimeout(searchTimer)
+
+  void router.replace({
+    path: '/browse',
+    query: {
+      ...(query.value.trim() ? { q: query.value.trim() } : {}),
+      ...(projectTypeFilter.value
+        ? { projectType: projectTypeFilter.value }
+        : {}),
+      ...(labelFilter.value ? { label: labelFilter.value } : {}),
+    },
+  })
+
+  searchTimer = setTimeout(() => {
+    void loadProjects()
+  }, 250)
+})
+
+onMounted(() => {
+  void loadDirectory()
+})
+
+onBeforeUnmount(() => {
+  if (searchTimer !== undefined) clearTimeout(searchTimer)
+})
+</script>
+
+<template>
+  <main class="mx-auto max-w-[1120px] px-5 py-10 pb-24 sm:px-8">
+    <!-- SearchFilter -->
+    <SearchFilter
+      v-model:query="query"
+      v-model:project-type-filter="projectTypeFilter"
+      v-model:label-filter="labelFilter"
+      placeholder="Search projects, maintainers, and keywords…"
+      :project-types="projectTypes"
+      :labels="labels"
+    />
+
+    <div
+      v-if="error"
+      class="mt-9 flex items-center gap-2 rounded-xl border border-[var(--danger-border)] bg-[var(--danger-soft)] px-4 py-3 text-sm text-[var(--danger)]"
+    >
+      <ExclamationTriangleIcon class="size-4 shrink-0" />
+      {{ error }}
+    </div>
+
+    <div
+      v-else-if="loading"
+      class="mt-12 space-y-3"
+      aria-label="Loading projects"
+    >
+      <div
+        v-for="item in 5"
+        :key="item"
+        class="h-[112px] animate-pulse rounded-xl border-b border-[var(--border)] bg-gradient-to-r from-[var(--surface)] to-transparent"
+      />
+    </div>
+
+    <section
+      v-else
+      class="mt-9 min-w-0"
+      aria-labelledby="results-heading"
+    >
+      <div
+        class="flex flex-col items-start gap-2 border-b border-[var(--border)] pb-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4"
+      >
+        <h2
+          id="results-heading"
+          class="min-w-0 break-words font-display text-[18px] font-semibold tracking-[-0.015em] text-[var(--text)]"
+        >
+          {{ resultsHeading }}
+          <span class="font-normal text-[var(--muted)]">· {{ resultLabel }}</span>
+        </h2>
+
+        <label class="flex shrink-0 items-center gap-2">
+          <span class="hidden font-mono text-[10px] text-[var(--faint)] sm:inline">Sort</span>
+          <select
+            v-model="sortBy"
+            class="rounded-lg border border-transparent bg-transparent py-1 pl-2 pr-1 text-xs text-[var(--muted)] outline-none transition hover:border-[var(--border)] focus:border-[var(--accent)]"
+          >
+            <option value="newest">Newest</option>
+            <option value="oldest">Oldest</option>
+            <option value="name">Name</option>
+          </select>
+        </label>
+      </div>
+
+      <div v-if="visibleProjects.length">
+        <ProjectBrowseRow
+          v-for="project in visibleProjects"
+          :key="project.id"
+          :project="project"
+        />
+      </div>
+
+      <div
+        v-else
+        class="rounded-b-xl border-b border-[var(--border)] px-6 py-16 text-center"
+      >
+        <p class="font-display text-base font-semibold text-[var(--text)]">
+          No projects found
+        </p>
+        <p class="mt-2 text-sm text-[var(--muted)]">
+          Try another keyword or clear the active filters.
+        </p>
+        <button
+          type="button"
+          class="mt-5 inline-flex items-center gap-1.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] px-3.5 py-2 text-sm text-[var(--muted)] transition hover:border-[var(--border-strong)] hover:text-[var(--text)]"
+          @click="clearFilters"
+        >
+          <XMarkIcon class="size-4" />
+          Clear filters
+        </button>
+      </div>
+    </section>
+  </main>
+</template>
diff --git a/frontend/src/pages/DashboardPage.vue b/frontend/src/pages/DashboardPage.vue
index 3f2817c..13f30fb 100644
--- a/frontend/src/pages/DashboardPage.vue
+++ b/frontend/src/pages/DashboardPage.vue
@@ -3,17 +3,26 @@ import { computed, onMounted, ref } from 'vue'
 import {
   ExclamationTriangleIcon,
   PlusIcon,
-  TrashIcon,
 } from '@heroicons/vue/24/outline'
 
 import { deleteProject, listMyProjects } from '../api/client'
 import type { ProjectListItem } from '../types/project'
+import { projectPath } from '../utils/projectRoutes'
+import ProjectActions from '../components/ProjectActions.vue'
 
 const projects = ref<ProjectListItem[]>([])
 const loading = ref(true)
 const error = ref('')
 
-const listingCount = computed(() => projects.value.length)
+const projectCount = computed(() => projects.value.length)
+
+function formatUpdatedAt(date: string) {
+  return new Intl.DateTimeFormat('en', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  }).format(new Date(date))
+}
 
 async function load() {
   loading.value = true
@@ -25,7 +34,7 @@ async function load() {
     error.value =
       err instanceof Error
         ? err.message
-        : 'Could not load your listings.'
+        : 'Could not load your projects.'
   } finally {
     loading.value = false
   }
@@ -46,15 +55,17 @@ async function remove(project: ProjectListItem) {
     error.value =
       err instanceof Error
         ? err.message
-        : 'Could not delete the listing.'
+        : 'Could not delete the project.'
   }
 }
 
-onMounted(load)
+onMounted(() => {
+  load()
+})
 </script>
 
 <template>
-  <main class="mx-auto max-w-[1120px] px-5 py-10 sm:px-8">
+  <main class="mx-auto max-w-[1120px] px-5 py-10 pb-24 sm:px-8">
     <!-- Header -->
     <div class="flex flex-wrap items-end justify-between gap-6">
       <div class="max-w-2xl">
@@ -67,11 +78,11 @@ onMounted(load)
         <h1
           class="mt-3 font-display text-[34px] font-semibold tracking-[-0.02em] text-[var(--text)]"
         >
-          My listings
+          My Projects
         </h1>
 
         <p class="mt-2 text-[15px] leading-6 text-[var(--muted)]">
-          Manage the bots and projects you've published to the directory.
+          Manage the projects you've published to the directory.
         </p>
       </div>
 
@@ -80,7 +91,7 @@ onMounted(load)
         class="inline-flex items-center gap-2 rounded-[9px] bg-[var(--accent)] px-4 py-2.5 text-sm font-medium text-[#0e1012] no-underline transition hover:bg-[var(--accent-deep)]"
       >
         <PlusIcon class="size-4" />
-        Add listing
+        Add project
       </RouterLink>
     </div>
 
@@ -98,7 +109,7 @@ onMounted(load)
       v-if="loading"
       class="mt-8 font-mono text-xs text-[var(--faint)]"
     >
-      Loading listings…
+      Loading projects...
     </p>
 
     <template v-else>
@@ -113,12 +124,12 @@ onMounted(load)
         </h2>
 
         <span class="font-mono text-xs text-[var(--faint)]">
-          {{ listingCount }}
-          {{ listingCount === 1 ? 'listing' : 'listings' }}
+          {{ projectCount }}
+          {{ projectCount === 1 ? 'project' : 'projects' }}
         </span>
       </div>
 
-      <!-- Listings -->
+      <!-- Projects -->
       <div
         v-if="projects.length"
         class="mt-3"
@@ -126,22 +137,22 @@ onMounted(load)
         <article
           v-for="project in projects"
           :key="project.id"
-          class="group flex items-center gap-4 rounded-[10px] border-b border-[var(--border)] px-2 py-4 transition hover:bg-[var(--hover)]"
+          class="group relative flex items-start gap-4 rounded-[10px] border-b border-[var(--border)] px-2 py-4 transition hover:bg-[var(--hover)] sm:items-center"
         >
           <!-- Initial -->
           <RouterLink
-            :to="`/bots/${project.id}`"
-            class="grid size-11 shrink-0 place-items-center rounded-[11px] bg-[var(--accent-soft)] font-display text-base font-semibold text-[var(--accent-ink)] no-underline"
+            :to="projectPath(project)"
+            class="mt-1 grid size-11 shrink-0 place-items-center rounded-[11px] bg-[var(--accent-soft)] font-display text-base font-semibold text-[var(--accent-ink)] no-underline sm:mt-0"
           >
             {{ project.name.charAt(0).toUpperCase() }}
           </RouterLink>
 
           <!-- Information -->
           <div class="min-w-0 flex-1">
-            <div class="flex items-center gap-3">
+            <div class="flex items-center gap-3 pr-20 sm:pr-0">
               <RouterLink
-                :to="`/bots/${project.id}`"
-                class="truncate font-display text-[15px] font-semibold tracking-[-0.01em] text-[var(--text)] no-underline hover:text-[var(--accent-ink)]"
+                :to="projectPath(project)"
+                class="block min-w-0 flex-1 truncate font-display text-[15px] font-semibold tracking-[-0.01em] text-[var(--text)] no-underline hover:text-[var(--accent-ink)]"
               >
                 {{ project.name }}
               </RouterLink>
@@ -152,26 +163,44 @@ onMounted(load)
             >
               {{ project.short_description }}
             </p>
-          </div>
 
-          <!-- Actions -->
-          <div class="flex shrink-0 items-center gap-2">
-            <RouterLink
-              :to="`/bots/${project.id}`"
-              class="hidden rounded-[8px] px-3 py-2 font-mono text-[11.5px] text-[var(--muted)] no-underline transition hover:bg-[var(--sunk)] hover:text-[var(--text)] sm:block"
-            >
-              View
-            </RouterLink>
-
-            <button
-              type="button"
-              :aria-label="`Delete ${project.name}`"
-              class="grid size-9 place-items-center rounded-[8px] text-[var(--faint)] transition hover:bg-[var(--danger-soft)] hover:text-[var(--danger)]"
-              @click="remove(project)"
-            >
-              <TrashIcon class="size-4" />
-            </button>
+            <div class="mt-2.5 flex flex-wrap items-center gap-1.5">
+              <span
+                class="rounded-[6px] bg-[var(--accent-soft)] px-2 py-[3px] text-[10.5px] font-medium text-[var(--accent-ink)]"
+              >
+                {{ project.project_type.name }}
+              </span>
+
+              <span
+                v-for="label in project.labels.slice(0, 2)"
+                :key="label.id"
+                class="rounded-[6px] bg-[var(--sunk)] px-2 py-[3px] text-[10.5px] text-[var(--muted)]"
+              >
+                {{ label.name }}
+              </span>
+
+              <span
+                v-if="project.labels.length > 2"
+                class="rounded-[6px] bg-[var(--sunk)] px-2 py-[3px] font-mono text-[9.5px] text-[var(--faint)]"
+              >
+                +{{ project.labels.length - 2 }}
+              </span>
+
+              <span class="hidden text-[var(--faint)] sm:inline">·</span>
+
+              <time
+                :datetime="project.updated_at"
+                class="basis-full font-mono text-[10.5px] text-[var(--faint)] sm:basis-auto"
+              >
+                Updated {{ formatUpdatedAt(project.updated_at) }}
+              </time>
+            </div>
           </div>
+
+          <ProjectActions
+            :project="project"
+            @delete="remove(project)"
+          />
         </article>
       </div>
 
@@ -189,7 +218,7 @@ onMounted(load)
         <h2
           class="mt-4 font-display text-base font-semibold text-[var(--text)]"
         >
-          No listings yet
+          No projects yet
         </h2>
 
         <p
@@ -203,7 +232,7 @@ onMounted(load)
           class="mt-5 inline-flex items-center gap-2 rounded-[9px] bg-[var(--accent)] px-4 py-2.5 text-sm font-medium text-[#0e1012] no-underline transition hover:bg-[var(--accent-deep)]"
         >
           <PlusIcon class="size-4" />
-          Add your first listing
+          Add your first project
         </RouterLink>
       </div>
     </template>
diff --git a/frontend/src/pages/HomePage.vue b/frontend/src/pages/HomePage.vue
index 00673f6..1f1235e 100644
--- a/frontend/src/pages/HomePage.vue
+++ b/frontend/src/pages/HomePage.vue
@@ -1,48 +1,22 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import {
-  ExclamationTriangleIcon,
-  MagnifyingGlassIcon,
-  XMarkIcon,
-} from '@heroicons/vue/24/outline'
+import { ExclamationTriangleIcon } from '@heroicons/vue/24/outline'
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
-import { listProjects } from '../api/client'
-import BotCard from '../components/BotCard.vue'
+import { countProjects, listProjects, listRandomProjects } from '../api/client'
+import ProjectCard from '../components/ProjectCard.vue'
+import SearchBar from '../components/SearchBar.vue'
 import type { ProjectListItem } from '../types/project'
+import { projectPath } from '../utils/projectRoutes'
 
+const router = useRouter()
 const projects = ref<ProjectListItem[]>([])
+const recentProjects = ref<ProjectListItem[]>([])
+const projectCount = ref(0)
 const query = ref('')
-const projectTypeFilter = ref('')
-const labelFilter = ref('')
 const loading = ref(true)
 const error = ref('')
 
-const projectCount = computed(() => projects.value.length)
-
-const projectTypes = computed(() =>
-  [...new Set(projects.value.map((project) => project.project_type.name))].sort(),
-)
-
-const labels = computed(() =>
-  [
-    ...new Set(
-      projects.value.flatMap((project) =>
-        project.labels.map((item) => item.name),
-      ),
-    ),
-  ].sort(),
-)
-
-const latestProjects = computed(() =>
-  projects.value
-    .toSorted(
-      (a, b) =>
-        new Date(b.created_at).getTime() -
-        new Date(a.created_at).getTime(),
-    )
-    .slice(0, 10),
-)
-
 function formatProjectDate(date: string) {
   return new Intl.DateTimeFormat('en', {
     month: 'short',
@@ -50,73 +24,38 @@ function formatProjectDate(date: string) {
   }).format(new Date(date))
 }
 
-const visibleProjects = computed(() => {
-  const normalizedQuery = query.value.trim().toLowerCase()
-
-  return projects.value.filter((project) => {
-    const matchesQuery =
-      !normalizedQuery ||
-      [
-        project.name,
-        project.short_description,
-        project.description,
-        project.project_type.name,
-        ...project.labels.map((item) => item.name),
-      ]
-        .join(' ')
-        .toLowerCase()
-        .includes(normalizedQuery)
-
-    const matchesProjectType =
-      !projectTypeFilter.value ||
-      project.project_type.name === projectTypeFilter.value
-
-    const matchesLabel =
-      !labelFilter.value ||
-      project.labels.some((item) => item.name === labelFilter.value)
-
-    return matchesQuery && matchesProjectType && matchesLabel
-  })
-})
-
-const hasFilters = computed(
-  () =>
-    Boolean(query.value.trim()) ||
-    Boolean(projectTypeFilter.value) ||
-    Boolean(labelFilter.value),
-)
-
-function selectProjectType(value: string) {
-  projectTypeFilter.value = projectTypeFilter.value === value ? '' : value
-}
-
-function selectLabel(value: string) {
-  labelFilter.value = labelFilter.value === value ? '' : value
-}
-
-function clearFilters() {
-  query.value = ''
-  projectTypeFilter.value = ''
-  labelFilter.value = ''
-}
-
-async function loadProjects() {
+async function loadHomepage() {
   loading.value = true
   error.value = ''
 
   try {
-    projects.value = await listProjects()
+    const [randomProjects, newestProjects, total] = await Promise.all([
+      listRandomProjects(6),
+      listProjects({ limit: 10 }),
+      countProjects(),
+    ])
+
+    projects.value = randomProjects
+    recentProjects.value = newestProjects
+    projectCount.value = total
   } catch (err) {
     error.value =
-      err instanceof Error
-        ? err.message
-        : 'Could not load projects.'
+      err instanceof Error ? err.message : 'Could not load projects.'
   } finally {
     loading.value = false
   }
 }
 
-onMounted(loadProjects)
+function searchDirectory() {
+  const normalizedQuery = query.value.trim()
+
+  void router.push({
+    path: '/browse',
+    query: normalizedQuery ? { q: normalizedQuery } : {},
+  })
+}
+
+onMounted(() => void loadHomepage())
 </script>
 
 <template>
@@ -128,224 +67,36 @@ onMounted(loadProjects)
         {{ projectCount === 1 ? 'project' : 'projects' }}
       </p>
 
-      <h1
-        class="
-          mt-4 max-w-[850px]
-          font-display text-[36px] font-semibold
-          leading-[1.08] tracking-[-0.035em]
-          text-[var(--text)]
-          sm:text-[52px] sm:leading-[1.06]
-        "
-      >
+      <h1 class="mt-4 max-w-[850px] font-display text-[36px] font-semibold leading-[1.08] tracking-[-0.035em] text-[var(--text)] sm:text-[52px] sm:leading-[1.06]">
         Find tools for Matrix.
       </h1>
 
-      <p
-        class="
-          mt-4 max-w-[680px]
-          text-[15px] leading-6 text-[var(--muted)]
-          sm:mt-5 sm:text-[17px] sm:leading-7
-        "
-      >
+      <p class="mt-4 max-w-[680px] text-[15px] leading-6 text-[var(--muted)] sm:mt-5 sm:text-[17px] sm:leading-7">
         Discover bots, bridges, frameworks, and tools built by the Matrix community.
       </p>
     </section>
 
-    <!-- Search and filters -->
-    <section>
-      <!-- Search -->
-      <label class="relative block">
-        <span class="sr-only">Search directory</span>
-
-        <MagnifyingGlassIcon
-          class="
-            pointer-events-none absolute left-3.5 top-1/2 size-4
-            -translate-y-1/2 text-[var(--faint)]
-          "
-        />
-
-        <input
-          v-model="query"
-          type="search"
-          placeholder="Search projects…"
-          class="
-            h-11 w-full rounded-[10px]
-            border border-[var(--border-strong)]
-            bg-[var(--surface)]
-            pl-10 pr-4
-            text-[14px] text-[var(--text)]
-            outline-none transition
-            placeholder:text-[var(--faint)]
-            focus:border-[var(--accent)]
-            focus:ring-3 focus:ring-[var(--accent-soft)]
-            sm:h-12 sm:text-[15px]
-          "
-        >
-      </label>
-
-      <!-- Filters -->
-      <div class="mt-4 space-y-4 sm:space-y-2.5">
-        <!-- Project types -->
-        <fieldset
-          v-if="projectTypes.length"
-          class="
-            grid gap-2
-            sm:grid-cols-[68px_minmax(0,1fr)]
-            sm:items-center
-          "
-        >
-          <legend class="sr-only">
-            Project type
-          </legend>
-
-          <span
-            class="
-              font-mono text-[9px] font-medium uppercase
-              tracking-[0.08em] text-[var(--faint)]
-            "
-          >
-            Type
-          </span>
-
-          <div
-            class="
-              -mx-5 flex gap-2 overflow-x-auto
-              px-5 pb-1
-              [scrollbar-width:none]
-              [&::-webkit-scrollbar]:hidden
-              sm:mx-0 sm:flex-wrap sm:overflow-visible sm:px-0 sm:pb-0
-            "
-          >
-            <button
-              type="button"
-              class="
-                shrink-0 rounded-full border
-                px-3 py-1.5
-                text-[12.5px] transition
-              "
-              :class="!projectTypeFilter
-                ? 'border-[var(--accent-deep)] bg-[var(--accent-soft)] font-medium text-[var(--accent-ink)]'
-                : 'border-[var(--border)] bg-[var(--surface)] text-[var(--muted)] hover:border-[var(--border-strong)] hover:text-[var(--text)]'
-              "
-              @click="projectTypeFilter = ''"
-            >
-              All
-            </button>
-
-            <button
-              v-for="item in projectTypes"
-              :key="item"
-              type="button"
-              class="
-                shrink-0 rounded-full border
-                px-3 py-1.5
-                text-[12.5px] transition
-              "
-              :class="projectTypeFilter === item
-                ? 'border-[var(--accent)] bg-[var(--surface)] font-medium text-[var(--accent-ink)]'
-                : 'border-[var(--border)] bg-[var(--surface)] text-[var(--muted)] hover:border-[var(--border-strong)] hover:text-[var(--text)]'
-              "
-              @click="selectProjectType(item)"
-            >
-              {{ item }}
-            </button>
-          </div>
-        </fieldset>
-
-        <!-- Categories -->
-        <fieldset
-          v-if="labels.length"
-          class="
-            grid gap-2
-            sm:grid-cols-[68px_minmax(0,1fr)]
-            sm:items-center
-          "
-        >
-          <legend class="sr-only">
-            Category
-          </legend>
-
-          <span
-            class="
-              font-mono text-[9px] font-medium uppercase
-              tracking-[0.08em] text-[var(--faint)]
-            "
-          >
-            Category
-          </span>
-
-          <div
-            class="
-              -mx-5 flex gap-2 overflow-x-auto
-              px-5 pb-1
-              [scrollbar-width:none]
-              [&::-webkit-scrollbar]:hidden
-              sm:mx-0 sm:flex-wrap sm:overflow-visible sm:px-0 sm:pb-0
-            "
-          >
-            <button
-              type="button"
-              class="
-                shrink-0 rounded-full border
-                px-3 py-1.5
-                text-[12.5px] transition
-              "
-              :class="!labelFilter
-                ? 'border-[var(--accent-deep)] bg-[var(--accent-soft)] font-medium text-[var(--accent-ink)]'
-                : 'border-[var(--border)] bg-[var(--surface)] text-[var(--muted)] hover:border-[var(--border-strong)] hover:text-[var(--text)]'
-              "
-              @click="labelFilter = ''"
-            >
-              All
-            </button>
-
-            <button
-              v-for="item in labels"
-              :key="item"
-              type="button"
-              class="
-                shrink-0 rounded-full border
-                px-3 py-1.5
-                text-[12.5px] transition
-              "
-              :class="labelFilter === item
-                ? 'border-[var(--accent)] bg-[var(--surface)] font-medium text-[var(--accent-ink)]'
-                : 'border-[var(--border)] bg-[var(--surface)] text-[var(--muted)] hover:border-[var(--border-strong)] hover:text-[var(--text)]'
-              "
-              @click="selectLabel(item)"
-            >
-              {{ item }}
-            </button>
-          </div>
-        </fieldset>
-      </div>
+    <!-- Search -->
+    <form
+      class="flex items-stretch gap-2"
+      role="search"
+      @submit.prevent="searchDirectory"
+    >
+      <SearchBar
+        v-model="query"
+        class="min-w-0 flex-1"
+        label="Search the project directory"
+        placeholder="Search projects, maintainers, and keywords…"
+      />
 
-      <!-- Active filters -->
-      <div
-        v-if="hasFilters"
-        class="mt-4 flex items-center gap-3"
+      <button
+        type="submit"
+        class="shrink-0 cursor-pointer rounded-[13px] bg-[var(--accent)] px-5 text-sm font-medium text-[#0e1012] transition hover:bg-[var(--accent-deep)]"
       >
-        <span class="font-mono text-[10px] text-[var(--faint)]">
-          {{ visibleProjects.length }}
-          {{ visibleProjects.length === 1 ? 'result' : 'results' }}
-        </span>
-
-        <button
-          type="button"
-          class="
-            inline-flex items-center gap-1
-            text-[12px] text-[var(--muted)]
-            transition hover:text-[var(--text)]
-          "
-          @click="clearFilters"
-        >
-          <XMarkIcon class="size-3.5" />
-          Clear filters
-        </button>
-      </div>
-    </section>
+        Search
+      </button>
+    </form>
 
-    <!-- Error -->
     <div
       v-if="error"
       class="mt-8 flex items-center gap-2 rounded-xl border border-[var(--danger-border)] bg-[var(--danger-soft)] px-4 py-3 text-sm text-[var(--danger)]"
@@ -354,7 +105,6 @@ onMounted(loadProjects)
       {{ error }}
     </div>
 
-    <!-- Loading -->
     <div
       v-else-if="loading"
       class="mt-12 font-mono text-xs text-[var(--faint)]"
@@ -362,131 +112,115 @@ onMounted(loadProjects)
       Loading projects…
     </div>
 
-    <!-- Results -->
-    <template v-else-if="visibleProjects.length">
-      <section class="mt-8 sm:mt-12">
-        <!-- Section heading -->
-        <div class="flex items-end justify-between gap-4 border-b border-[var(--border)] pb-3">
-          <div>
-            <h2
-              class="
-                font-display text-[20px] font-semibold
-                tracking-[-0.01em] text-[var(--text)]
-                sm:text-[22px]
-              "
-            >
-              {{ hasFilters ? 'Search results' : 'Explore projects' }}
-            </h2>
-          </div>
+    <section
+      v-else-if="projects.length"
+      class="mt-8 sm:mt-12"
+      aria-labelledby="discover-heading"
+    >
+      <!-- Discovery -->
+      <div class="flex items-end justify-between gap-4 border-b border-[var(--border)] pb-3">
+        <h2
+          id="discover-heading"
+          class="font-display text-[20px] font-semibold tracking-[-0.01em] text-[var(--text)] sm:text-[22px]"
+        >
+          Discover projects
+        </h2>
 
-          <span class="font-mono text-[11.5px] text-[var(--faint)]">
-            {{ visibleProjects.length }}
-            {{
-              visibleProjects.length === 1
-                ? 'listing'
-                : 'listings'
-            }}
-          </span>
-        </div>
+        <RouterLink
+          to="/browse"
+          class="text-sm text-[var(--muted)] no-underline transition hover:text-[var(--text)]"
+        >
+          Browse all projects
+        </RouterLink>
+      </div>
 
-        <!-- Cards -->
-        <div class="mt-5 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
-          <BotCard
-            v-for="project in visibleProjects"
-            :key="project.id"
-            :project="project"
-          />
-        </div>
-      </section>
+      <div class="mt-5 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
+        <ProjectCard
+          v-for="project in projects"
+          :key="project.id"
+          :project="project"
+        />
+      </div>
+    </section>
 
-      <!-- Recently added -->
-      <section
-        v-if="!hasFilters && latestProjects.length"
-        class="mt-12 sm:mt-16"
-      >
-        <div class="flex items-end justify-between gap-4 border-b border-[var(--border)] pb-3">
-          <h2 class="font-display text-[22px] font-semibold tracking-[-0.01em] text-[var(--text)]">
-            Recently added
-          </h2>
+    <!-- Recently added -->
+    <section
+      v-if="recentProjects.length"
+      class="mt-12 sm:mt-16"
+    >
+      <div class="flex items-end justify-between gap-4 border-b border-[var(--border)] pb-3">
+        <h2 class="font-display text-[22px] font-semibold tracking-[-0.01em] text-[var(--text)]">
+          Recently added
+        </h2>
 
-          <span class="font-mono text-[11.5px] text-[var(--faint)]">
-            newest listings first
-          </span>
-        </div>
+        <span class="font-mono text-[11.5px] text-[var(--faint)]">
+          newest projects first
+        </span>
+      </div>
 
-        <div class="mt-5">
-          <RouterLink
-            v-for="project in latestProjects"
-            :key="project.id"
-            :to="`/bots/${project.id}`"
-            class="
+      <div class="mt-5">
+        <RouterLink
+          v-for="project in recentProjects"
+          :key="project.id"
+          :to="projectPath(project)"
+          class="
               group flex min-h-[66px] items-center gap-4
               rounded-b-[10px]
               border-b border-[var(--border)]
               px-2 py-3
               transition
-              hover:bg-[var(--surface)]
+              hover:bg-[var(--hover)]
               sm:px-3
             "
+        >
+          <!-- Initial -->
+          <div
+            class="grid size-11 shrink-0 place-items-center rounded-xl bg-[var(--sunk)] font-display text-[15px] font-semibold text-[var(--muted)]"
           >
-            <!-- Initial -->
-            <div
-              class="grid size-11 shrink-0 place-items-center rounded-xl bg-[var(--sunk)] font-display text-[15px] font-semibold text-[var(--muted)]"
-            >
-              {{ project.name.charAt(0).toUpperCase() }}
-            </div>
+            {{ project.name.charAt(0).toUpperCase() }}
+          </div>
 
-            <!-- Name / description -->
-            <div class="min-w-0 flex-1 sm:flex sm:items-baseline sm:gap-3">
-              <h3 class="shrink-0 font-display text-[15px] font-semibold text-[var(--text)]">
-                {{ project.name }}
-              </h3>
+          <!-- Name / description -->
+          <div class="min-w-0 flex-1 sm:flex sm:items-baseline sm:gap-3">
+            <h3 class="shrink-0 font-display text-[15px] font-semibold text-[var(--text)]">
+              {{ project.name }}
+            </h3>
 
-              <p class="mt-1 truncate text-[13.5px] text-[var(--muted)] sm:mt-0">
-                {{ project.short_description }}
-              </p>
-            </div>
+            <p class="mt-1 truncate text-[13.5px] text-[var(--muted)] sm:mt-0">
+              {{ project.short_description }}
+            </p>
+          </div>
 
-            <!-- Project type -->
-            <span
-              class="hidden shrink-0 rounded-lg bg-[var(--sunk)] px-2.5 py-1 text-[12px] text-[var(--muted)] md:inline-block"
-            >
-              {{ project.project_type.name }}
-            </span>
+          <!-- Project type -->
+          <span
+            class="hidden shrink-0 rounded-lg bg-[var(--sunk)] px-2.5 py-1 text-[12px] text-[var(--muted)] md:inline-block"
+          >
+            {{ project.project_type.name }}
+          </span>
 
-            <!-- Date -->
-            <time
-              :datetime="project.created_at"
-              class="hidden w-[72px] shrink-0 text-right font-mono text-[11.5px] text-[var(--faint)] sm:block"
-            >
-              {{ formatProjectDate(project.created_at) }}
-            </time>
-          </RouterLink>
-        </div>
-      </section>
-    </template>
+          <!-- Date -->
+          <time
+            :datetime="project.created_at"
+            class="hidden w-[72px] shrink-0 text-right font-mono text-[11.5px] text-[var(--faint)] sm:block"
+          >
+            {{ formatProjectDate(project.created_at) }}
+          </time>
+        </RouterLink>
+      </div>
+    </section>
 
     <!-- Empty -->
     <div
-      v-else
+      v-if="!loading && !error && !projects.length && !recentProjects.length"
       class="mt-12 rounded-[14px] border border-dashed border-[var(--border-strong)] bg-[var(--surface)] px-6 py-14 text-center"
     >
       <p class="font-display text-[15px] font-semibold text-[var(--text)]">
-        Nothing matched that
+        No projects are available yet
       </p>
 
       <p class="mt-2 text-sm text-[var(--muted)]">
-        Try a shorter keyword or different filters.
+        Check back after projects have been added to the directory.
       </p>
-
-      <button
-        v-if="hasFilters"
-        type="button"
-        class="mt-5 rounded-[9px] border border-[var(--border)] bg-[var(--surface)] px-4 py-2 text-sm text-[var(--muted)] transition hover:border-[var(--border-strong)] hover:text-[var(--text)]"
-        @click="clearFilters"
-      >
-        Clear filters
-      </button>
     </div>
   </main>
 </template>
diff --git a/frontend/src/pages/LoginPage.vue b/frontend/src/pages/LoginPage.vue
index 4d684e2..52ce08c 100644
--- a/frontend/src/pages/LoginPage.vue
+++ b/frontend/src/pages/LoginPage.vue
@@ -6,8 +6,7 @@ import {
   ShieldCheckIcon,
 } from '@heroicons/vue/24/outline'
 
-import logoUrl from '../assets/matrix-directory-mark.svg'
-
+import MatrixLogo from '../components/MatrixLogo.vue'
 const route = useRoute()
 
 const loginUrl =
@@ -16,7 +15,7 @@ const loginUrl =
 
 <template>
   <main
-    class="mx-auto flex min-h-[calc(100vh-68px)] max-w-[1120px] items-start justify-center px-5 pb-24 pt-16 sm:px-8 sm:pt-24"
+    class="mx-auto flex max-w-[1120px] items-start justify-center px-5 pb-24 pt-16 sm:px-8 sm:pt-24"
   >
     <div class="w-full max-w-[480px]">
       <!-- Heading -->
@@ -37,7 +36,7 @@ const loginUrl =
           class="mt-3 text-[15px] leading-6 text-[var(--muted)]"
         >
           Sign in securely using your Matrix account to manage your
-          profile and directory listings.
+          profile and your projects.
         </p>
       </div>
 
@@ -61,12 +60,8 @@ const loginUrl =
       >
         <div class="p-6 sm:p-7">
           <div class="flex items-start gap-4">
-            <!-- Matrix Directory Logo -->
-            <img
-              :src="logoUrl"
-              alt="Matrix Directory Logo"
-              class="size-[45px] text-[var(--accent-ink)]"
-            >
+            <!-- Matrix Logo -->
+            <MatrixLogo class="size-12 sm:size-16" />
 
             <div>
               <h2
diff --git a/frontend/src/pages/ProfilePage.vue b/frontend/src/pages/ProfilePage.vue
index a96bd90..ed2ceb3 100644
--- a/frontend/src/pages/ProfilePage.vue
+++ b/frontend/src/pages/ProfilePage.vue
@@ -119,7 +119,7 @@ onMounted(load)
 </script>
 
 <template>
-  <main class="mx-auto max-w-[1120px] px-5 py-10 sm:px-8">
+  <main class="mx-auto max-w-[1120px] px-5 py-10 pb-24 sm:px-8">
     <div class="max-w-2xl">
       <p
         class="font-mono text-xs font-medium uppercase tracking-[0.08em] text-[var(--accent-ink)]"
diff --git a/frontend/src/pages/BotDetailPage.vue b/frontend/src/pages/ProjectDetailPage.vue
similarity index 82%
rename from frontend/src/pages/BotDetailPage.vue
rename to frontend/src/pages/ProjectDetailPage.vue
index 673a1ce..c699e85 100644
--- a/frontend/src/pages/BotDetailPage.vue
+++ b/frontend/src/pages/ProjectDetailPage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import {
   ArrowLeftIcon,
   CheckIcon,
@@ -10,8 +10,10 @@ import {
 import { getProject } from '../api/client'
 import MarkdownContent from '../components/markdown/MarkdownContent.vue'
 import type { Project } from '../types/project'
+import { projectPath } from '../utils/projectRoutes'
 
 const route = useRoute()
+const router = useRouter()
 
 const project = ref<Project | null>(null)
 const loading = ref(true)
@@ -22,7 +24,13 @@ async function loadProject() {
   error.value = ''
 
   try {
-    project.value = await getProject(String(route.params.id))
+    const loadedProject = await getProject(String(route.params.id))
+    project.value = loadedProject
+
+    const canonicalPath = projectPath(loadedProject)
+    if (route.path !== canonicalPath) {
+      await router.replace(canonicalPath)
+    }
   } catch (err) {
     error.value =
       err instanceof Error
@@ -38,9 +46,7 @@ onMounted(loadProject)
 </script>
 
 <template>
-  <main
-    class="mx-auto w-full max-w-[1120px] px-5 pb-24 pt-8 sm:px-8"
-  >
+  <main class="mx-auto max-w-[1120px] px-5 py-10 pb-24 sm:px-8">
     <!-- Loading -->
     <div
       v-if="loading"
@@ -62,7 +68,7 @@ onMounted(loadProject)
     <template v-else-if="project">
       <!-- Back -->
       <RouterLink
-        to="/"
+        to="/browse"
         class="inline-flex items-center gap-2 font-mono text-[12px] text-[var(--muted)] no-underline transition hover:text-[var(--text)]"
       >
         <ArrowLeftIcon class="size-3.5" />
@@ -73,10 +79,10 @@ onMounted(loadProject)
       <section
         class="mt-7 flex flex-col gap-7 lg:flex-row lg:items-start lg:justify-between"
       >
-        <div class="flex min-w-0 gap-5">
-          <!-- Bot avatar -->
+        <div class="flex min-w-0 gap-4 sm:gap-5">
+          <!-- Project avatar -->
           <div
-            class="grid size-[76px] shrink-0 place-items-center rounded-[18px] bg-[var(--accent-soft)] font-display text-[30px] font-semibold text-[var(--accent-ink)]"
+            class="grid size-16 shrink-0 place-items-center rounded-[18px] bg-[var(--accent-soft)] font-display text-[27px] font-semibold text-[var(--accent-ink)] sm:size-[76px] sm:text-[30px]"
           >
             {{ project.name.charAt(0).toUpperCase() }}
           </div>
@@ -85,7 +91,7 @@ onMounted(loadProject)
             <!-- Name -->
             <div class="flex flex-wrap items-center gap-3">
               <h1
-                class="font-display text-[34px] font-semibold tracking-[-0.025em] text-[var(--text)] sm:text-[40px]"
+                class="min-w-0 break-words font-display text-[30px] font-semibold tracking-[-0.025em] text-[var(--text)] sm:text-[40px]"
               >
                 {{ project.name }}
               </h1>
@@ -102,7 +108,7 @@ onMounted(loadProject)
 
             <!-- Description -->
             <p
-              class="mt-2 max-w-[650px] text-[15.5px] leading-6 text-[var(--muted)]"
+              class="mt-2 max-w-[650px] break-words text-[15.5px] leading-6 text-[var(--muted)]"
             >
               {{ project.short_description }}
             </p>
@@ -127,9 +133,11 @@ onMounted(loadProject)
 
         <!-- Actions -->
         <div
-          class="flex shrink-0 flex-row gap-2 lg:w-[200px] lg:flex-col"
+          class="flex shrink-0 flex-row flex-wrap gap-2 lg:w-[200px] lg:flex-col"
         >
+          <!-- TODO: Add new column in DB for Bot's invite link -->
           <button
+            v-if="project.project_type.name === 'Bot'"
             type="button"
             disabled
             title="Coming soon"
@@ -138,12 +146,22 @@ onMounted(loadProject)
             Invite to a room
           </button>
 
+          <a
+            v-if="project.project_type.name === 'Server' && project.matrix_server_url"
+            :href="project.matrix_server_url"
+            target="_blank"
+            rel="noreferrer"
+            class="rounded-[10px] border border-[var(--border)] bg-[var(--accent)] px-4 py-3 text-center text-sm text-[var(--text)] no-underline transition hover:border-[var(--border-strong)] hover:bg-[var(--accent-deep)]"
+          >
+            Join the server
+          </a>
+
           <a
             v-if="project.repository_url"
             :href="project.repository_url"
             target="_blank"
             rel="noreferrer"
-            class="rounded-[10px] border border-[var(--border)] bg-[var(--surface)] px-4 py-3 text-center text-sm text-[var(--text)] no-underline transition hover:border-[var(--border-strong)]"
+            class="rounded-[10px] border border-[var(--border)] bg-[var(--surface)] px-4 py-3 text-center text-sm text-[var(--text)] no-underline transition hover:border-[var(--border-strong)] hover:bg-[var(--hover)]"
           >
             Repository
           </a>
@@ -155,9 +173,9 @@ onMounted(loadProject)
         class="mt-12 grid gap-10 lg:grid-cols-[minmax(0,1fr)_300px]"
       >
         <!-- Left -->
-        <div>
+        <div class="min-w-0">
           <!-- About -->
-          <section>
+          <section class="min-w-0 max-w-full">
             <h2
               class="font-mono text-xs font-medium uppercase tracking-[0.06em] text-[var(--faint)]"
             >
@@ -167,7 +185,7 @@ onMounted(loadProject)
             <MarkdownContent
               :source="project.description"
               aria-label="Project description"
-              class="mt-4"
+              class="mt-4 min-w-0 max-w-full"
             />
           </section>
         </div>
@@ -178,6 +196,7 @@ onMounted(loadProject)
         >
           <!-- Room / Server -->
           <div
+            v-if="project.project_type.name !== 'Server'"
             class="flex items-start justify-between gap-5 border-b border-[var(--border)] py-4"
           >
             <span
diff --git a/frontend/src/pages/SubmitPage.vue b/frontend/src/pages/SubmitPage.vue
index 26121a8..e9f14ad 100644
--- a/frontend/src/pages/SubmitPage.vue
+++ b/frontend/src/pages/SubmitPage.vue
@@ -1,197 +1,50 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import {
   ArrowLeftIcon,
   ExclamationTriangleIcon,
   LockClosedIcon,
 } from '@heroicons/vue/24/outline'
 
-import {
-  ApiError,
-  createProject,
-  listLabels,
-  listProjectTypes,
-} from '../api/client'
 import MarkdownEditor from '../components/markdown/MarkdownEditor.vue'
-import type { Label, ProjectCreate, ProjectType } from '../types/project'
+import { useProjectForm } from '../composables/useProjectForm'
 
 const router = useRouter()
-
-
-const form = reactive<ProjectCreate>({
-  name: '',
-  short_description: '',
-  description: '',
-  repository_url: null,
-  website_url: null,
-  matrix_server_url: null,
-  supports_e2ee: false,
-  project_type_id: '',
-  label_ids: [],
-})
-
-const projectTypes = ref<ProjectType[]>([])
-const labels = ref<Label[]>([])
-const loadingClassifications = ref(true)
-const submitting = ref(false)
-const formError = ref('')
-const fieldErrors = ref<Record<string, string>>({})
-
-const selectedLabels = computed(() =>
-  labels.value.filter((label) =>
-    form.label_ids.includes(label.id),
-  ),
+const route = useRoute()
+const editingProjectId = computed(() =>
+  typeof route.params.id === 'string' ? route.params.id : '',
 )
+const {
+  cannotSubmit,
+  checklist,
+  fieldError,
+  form,
+  formError,
+  isEditing,
+  labels,
+  load,
+  loadingClassifications,
+  loadingProject,
+  projectReady,
+  projectTypes,
+  projectUnavailable,
+  requiredChecklist,
+  requiredCompleteCount,
+  selectedLabels,
+  submit,
+  submitting,
+} = useProjectForm(router, editingProjectId)
 
 const previewInitial = computed(() =>
   form.name.trim().charAt(0).toUpperCase() || '?',
 )
 
-const hasProjectLink = computed(() =>
-  Boolean(
-    form.repository_url?.trim() ||
-    form.website_url?.trim(),
-  ),
-)
-
-const cannotSubmit = computed(() =>
-  submitting.value ||
-  loadingClassifications.value ||
-  !form.name.trim() ||
-  !form.short_description.trim() ||
-  !form.description.trim() ||
-  !form.project_type_id ||
-  !hasProjectLink.value ||
-  form.short_description.length > 160 ||
-  form.description.length > 10000,
-)
-
-const checklist = computed(() => [
-  {
-    label: 'Name',
-    complete: Boolean(form.name.trim()),
-    required: true,
-  },
-  {
-    label: 'Short description',
-    complete: Boolean(form.short_description.trim()),
-    required: true,
-  },
-  {
-    label: 'About',
-    complete: Boolean(form.description.trim()),
-    required: true,
-  },
-  {
-    label: 'Project link',
-    complete: hasProjectLink.value,
-    required: true,
-  },
-  {
-    label: 'Project type',
-    complete: Boolean(form.project_type_id),
-    required: true,
-  },
-  {
-    label: 'Labels',
-    complete: form.label_ids.length > 0,
-    required: false,
-  },
-  {
-    label: 'Matrix room',
-    complete: Boolean(form.matrix_server_url?.trim()),
-    required: false,
-  },
-  {
-    label: 'E2EE support',
-    complete: form.supports_e2ee,
-    required: false,
-  },
-])
-
-const requiredChecklist = computed(() =>
-  checklist.value.filter((item) => item.required),
-)
-
-const requiredCompleteCount = computed(() =>
-  requiredChecklist.value.filter((item) => item.complete).length,
-)
-
-const listingReady = computed(() =>
-  requiredChecklist.value.every((item) => item.complete),
-)
-
-function optionalValue(value: string | null) {
-  const normalized = value?.trim()
-  return normalized || null
-}
-
-function fieldError(field: string) {
-  return fieldErrors.value[field]
-}
-
-async function submit() {
-  if (cannotSubmit.value) return
-
-  submitting.value = true
-  formError.value = ''
-  fieldErrors.value = {}
-
-  try {
-    const created = await createProject({
-      ...form,
-      name: form.name.trim(),
-      short_description: form.short_description.trim(),
-      description: form.description.trim(),
-      repository_url: optionalValue(form.repository_url),
-      website_url: optionalValue(form.website_url),
-      matrix_server_url: optionalValue(form.matrix_server_url),
-    })
-
-    await router.push(`/bots/${created.id}`)
-  } catch (error) {
-    if (error instanceof ApiError && error.issues.length) {
-      for (const issue of error.issues) {
-        const field = String(issue.loc.at(-1))
-
-        fieldErrors.value[field] = issue.msg.replace(
-          /^Value error, /,
-          '',
-        )
-      }
-    } else {
-      formError.value =
-        error instanceof Error
-          ? error.message
-          : 'Could not publish the listing.'
-    }
-  } finally {
-    submitting.value = false
-  }
-}
-
-onMounted(async () => {
-  try {
-    const [availableProjectTypes, availableLabels] = await Promise.all([
-      listProjectTypes(),
-      listLabels(),
-    ])
-    projectTypes.value = availableProjectTypes
-    labels.value = availableLabels
-  } catch (error) {
-    formError.value =
-      error instanceof Error
-        ? error.message
-        : 'Could not load project classifications.'
-  } finally {
-    loadingClassifications.value = false
-  }
-})
+onMounted(load)
 </script>
 
 <template>
-  <main class="mx-auto max-w-6xl px-5 pb-24 pt-8 sm:px-8">
+  <main class="mx-auto max-w-[1120px] px-5 py-10 pb-24 sm:px-8">
     <RouterLink
       to="/dashboard"
       class="inline-flex items-center gap-2 font-mono text-[12px] text-[var(--muted)] no-underline transition hover:text-[var(--text)]"
@@ -205,18 +58,23 @@ onMounted(async () => {
       <p
         class="font-mono text-xs font-medium uppercase tracking-[0.08em] text-[var(--accent-ink)]"
       >
-        Directory listing
+        Directory project
       </p>
 
       <h1
         class="mt-3 font-display text-[34px] font-semibold tracking-[-0.025em] text-[var(--text)]"
       >
-        Submit a project
+        {{ isEditing ? 'Edit project' : 'Submit a project' }}
       </h1>
 
       <p class="mt-2 text-[15px] leading-6 text-[var(--muted)]">
-        Add a Matrix bot or integration to the public directory.
-        You can update these details later.
+        <template v-if="isEditing">
+          Update the information shown in the public directory.
+        </template>
+        <template v-else>
+          Add a Matrix project to the public directory.
+          You can update these details later.
+        </template>
       </p>
     </header>
 
@@ -230,7 +88,15 @@ onMounted(async () => {
       {{ formError }}
     </div>
 
+    <p
+      v-if="loadingProject"
+      class="mt-8 font-mono text-xs text-[var(--faint)]"
+    >
+      Loading project...
+    </p>
+
     <form
+      v-if="!loadingProject && !projectUnavailable"
       class="mt-10 grid items-start gap-12 lg:grid-cols-[minmax(0,1fr)_320px]"
       @submit.prevent="submit"
     >
@@ -649,7 +515,11 @@ onMounted(async () => {
             :disabled="cannotSubmit"
             class="rounded-[9px] bg-[var(--accent)] px-5 py-2.5 text-sm font-medium text-[#0e1012] transition hover:bg-[var(--accent-deep)] disabled:cursor-not-allowed disabled:opacity-50"
           >
-            {{ submitting ? 'Publishing…' : 'Publish listing' }}
+            {{
+              submitting
+                ? (isEditing ? 'Saving…' : 'Publishing…')
+                : (isEditing ? 'Save changes' : 'Publish project')
+            }}
           </button>
         </footer>
       </div>
@@ -662,13 +532,13 @@ onMounted(async () => {
             <p
               class="font-mono text-[11px] font-medium uppercase tracking-[0.08em] text-[var(--faint)]"
             >
-              Listing preview
+              Project preview
             </p>
 
             <span
               class="font-mono text-[10px] uppercase tracking-[0.06em] text-[var(--faint)]"
             >
-              Draft
+              {{ isEditing ? 'Current project' : 'Draft' }}
             </span>
           </div>
 
@@ -749,7 +619,7 @@ onMounted(async () => {
             the directory.
           </p>
 
-          <!-- Listing readiness -->
+          <!-- Project readiness -->
           <div
             class="mt-8 border-t border-[var(--border)] pt-5"
           >
@@ -757,11 +627,11 @@ onMounted(async () => {
               <p
                 class="font-mono text-[10px] font-medium uppercase tracking-[0.06em] text-[var(--faint)]"
               >
-                Listing status
+                Project status
               </p>
 
               <span
-                v-if="listingReady"
+                v-if="projectReady"
                 class="font-mono text-[10px] font-medium uppercase tracking-[0.04em] text-[var(--success)]"
               >
                 Ready
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 42118b6..177ff79 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -10,8 +10,26 @@ export const router = createRouter({
   routes: [
     { path: '/', component: HomePage },
     {
-      path: '/bots/:id',
-      component: () => import('../pages/BotDetailPage.vue'),
+      path: '/browse',
+      component: () => import('../pages/BrowsePage.vue'),
+    },
+    {
+      path: '/projects/:id',
+      alias: [
+        '/bots/:id',
+        '/bridges/:id',
+        '/clients/:id',
+        '/frameworks/:id',
+        '/integrations/:id',
+        '/sdks/:id',
+        '/servers/:id',
+      ],
+      component: () => import('../pages/ProjectDetailPage.vue'),
+    },
+    {
+      path: '/projects/:id/edit',
+      component: () => import('../pages/SubmitPage.vue'),
+      meta: { requiresAuth: true },
     },
     { path: '/login', component: LoginPage },
     {
diff --git a/frontend/src/types/project.ts b/frontend/src/types/project.ts
index 5af2b92..a3ff7f3 100644
--- a/frontend/src/types/project.ts
+++ b/frontend/src/types/project.ts
@@ -29,6 +29,7 @@ export type ProjectListItem = {
   labels: Label[]
   owner: ProjectOwner
   created_at: string
+  updated_at: string
 }
 
 export type Project = ProjectListItem
diff --git a/frontend/src/utils/projectRoutes.ts b/frontend/src/utils/projectRoutes.ts
new file mode 100644
index 0000000..2a1383b
--- /dev/null
+++ b/frontend/src/utils/projectRoutes.ts
@@ -0,0 +1,18 @@
+import type { ProjectListItem } from '../types/project'
+
+const projectTypePaths: Record<string, string> = {
+  Bot: 'bots',
+  Bridges: 'bridges',
+  Clients: 'clients',
+  Framework: 'frameworks',
+  Integrations: 'integrations',
+  SDK: 'sdks',
+  Server: 'servers',
+}
+
+export function projectPath(
+  project: Pick<ProjectListItem, 'id' | 'project_type'>,
+) {
+  const segment = projectTypePaths[project.project_type.name] ?? 'projects'
+  return `/${segment}/${project.id}`
+}