diff --git a/api/routes.ts b/api/routes.ts
index 961511d..3f142a6 100644
--- a/api/routes.ts
+++ b/api/routes.ts
@@ -138,8 +138,8 @@ const defs = {
     authorize: withAdminSession,
     fn: (_ctx, project) => ProjectsCollection.insert(project),
     input: OBJ({
-      projectSlug: STR('The unique identifier for the project'),
-      projectName: STR('The name of the project'),
+      slug: STR('The unique identifier for the project'),
+      name: STR('The name of the project'),
       teamId: STR('The ID of the team that owns the project'),
       isPublic: BOOL('Is the project public?'),
       repositoryUrl: optional(STR('The URL of the project repository')),
@@ -149,21 +149,21 @@ const defs = {
   }),
   'GET/api/project': route({
     authorize: withUserSession,
-    fn: (_ctx, { projectSlug }) => {
-      const project = ProjectsCollection.get(projectSlug)
+    fn: (_ctx, { slug }) => {
+      const project = ProjectsCollection.get(slug)
       if (!project) throw respond.NotFound({ message: 'Project not found' })
       return project
     },
-    input: OBJ({ projectSlug: STR('The slug of the project') }),
+    input: OBJ({ slug: STR('The slug of the project') }),
     output: ProjectDef,
     description: 'Get a project by ID',
   }),
   'PUT/api/project': route({
     authorize: withAdminSession,
-    fn: (_ctx, input) => ProjectsCollection.update(input.projectSlug, input),
+    fn: (_ctx, input) => ProjectsCollection.update(input.slug, input),
     input: OBJ({
-      projectSlug: STR('The unique identifier for the project'),
-      projectName: STR('The name of the project'),
+      slug: STR('The unique identifier for the project'),
+      name: STR('The name of the project'),
       teamId: STR('The ID of the team that owns the project'),
       isPublic: BOOL('Is the project public?'),
       repositoryUrl: optional(STR('The URL of the project repository')),
@@ -173,13 +173,13 @@ const defs = {
   }),
   'DELETE/api/project': route({
     authorize: withAdminSession,
-    fn: (_ctx, { projectSlug }) => {
-      const project = ProjectsCollection.get(projectSlug)
+    fn: (_ctx, { slug }) => {
+      const project = ProjectsCollection.get(slug)
       if (!project) throw respond.NotFound({ message: 'Project not found' })
-      ProjectsCollection.delete(projectSlug)
+      ProjectsCollection.delete(slug)
       return true
     },
-    input: OBJ({ projectSlug: STR('The slug of the project') }),
+    input: OBJ({ slug: STR('The slug of the project') }),
     output: BOOL('Indicates if the project was deleted'),
     description: 'Delete a project by ID',
   }),
diff --git a/api/schema.ts b/api/schema.ts
index 99ea860..e03a00d 100644
--- a/api/schema.ts
+++ b/api/schema.ts
@@ -21,14 +21,24 @@ export const TeamDef = OBJ({
 export type Team = Asserted<typeof TeamDef> & BaseRecord
 
 export const ProjectDef = OBJ({
-  projectSlug: STR('The unique identifier for the project'),
-  projectName: STR('The name of the project'),
+  slug: STR('The unique identifier for the project'),
+  name: STR('The name of the project'),
   teamId: STR('The ID of the team that owns the project'),
   isPublic: BOOL('Is the project public?'),
   repositoryUrl: optional(STR('The URL of the project repository')),
 }, 'The project schema definition')
 export type Project = Asserted<typeof ProjectDef> & BaseRecord
 
+export const DeploymentDef = OBJ({
+  projectId: STR('The ID of the project this deployment belongs to'),
+  url: STR('The URL of the deployment'),
+  logsEnabled: BOOL('Are logs enabled for this deployment?'),
+  databaseEnabled: BOOL('Is the database enabled for this deployment?'),
+  sqlEndpoint: optional(STR('The SQL execution endpoint for the database')),
+  sqlToken: optional(STR('The security token for the SQL endpoint')),
+}, 'The deployment schema definition')
+export type Deployment = Asserted<typeof DeploymentDef> & BaseRecord
+
 export const UsersCollection = await createCollection<User, 'userEmail'>(
   { name: 'users', primaryKey: 'userEmail' },
 )
@@ -39,7 +49,14 @@ export const TeamsCollection = await createCollection<Team, 'teamId'>(
 
 export const ProjectsCollection = await createCollection<
   Project,
-  'projectSlug'
+  'slug'
+>(
+  { name: 'projects', primaryKey: 'slug' },
+)
+
+export const DeploymentsCollection = await createCollection<
+  Deployment & { tokenSalt: string },
+  'url'
 >(
-  { name: 'projects', primaryKey: 'projectSlug' },
+  { name: 'deployments', primaryKey: 'url' },
 )
diff --git a/tasks/seed.ts b/tasks/seed.ts
index ded8601..2c4abe2 100644
--- a/tasks/seed.ts
+++ b/tasks/seed.ts
@@ -41,22 +41,22 @@ const teams: Team[] = [
 
 const projects: Omit<Project, 'createdAt'>[] = [
   {
-    projectSlug: 'website-redesign',
-    projectName: 'Website Redesign',
+    slug: 'website-redesign',
+    name: 'Website Redesign',
     teamId: 'frontend-devs',
     isPublic: true,
     repositoryUrl: 'https://github.com/example/website',
   },
   {
-    projectSlug: 'api-refactor',
-    projectName: 'API Refactor',
+    slug: 'api-refactor',
+    name: 'API Refactor',
     teamId: 'backend-devs',
     isPublic: false,
     repositoryUrl: 'https://github.com/example/api',
   },
   {
-    projectSlug: 'design-system',
-    projectName: 'Design System',
+    slug: 'design-system',
+    name: 'Design System',
     teamId: 'frontend-devs',
     isPublic: true,
     repositoryUrl: 'https://github.com/example/design-system',
diff --git a/web/components/Layout.tsx b/web/components/Layout.tsx
new file mode 100644
index 0000000..42cb47c
--- /dev/null
+++ b/web/components/Layout.tsx
@@ -0,0 +1,45 @@
+import { JSX } from 'preact'
+import { SideBar } from './SideBar.tsx'
+
+export const PageLayoutWithSideBar = (
+  { children }: { children: JSX.Element | JSX.Element[] | null },
+) => (
+  <div class='h-screen flex bg-bg'>
+    <SideBar />
+    <div class='flex-1 flex flex-col'>
+      {children}
+    </div>
+  </div>
+)
+
+export const PageLayout = (
+  { children }: { children: JSX.Element | JSX.Element[] },
+) => (
+  <div class='h-screen flex justify-center bg-bg'>
+    <div class='w-full max-w-7xl h-full bg-base-100 flex flex-col'>
+      {children}
+    </div>
+  </div>
+)
+
+export const PageHeader = (
+  { children, className }: {
+    className?: string
+    children: JSX.Element | JSX.Element[]
+  },
+) => (
+  <header
+    class={['px-4 sm:px-6 py-4 bg-surface border-b border-divider', className]
+      .join(' ')}
+  >
+    <div class='flex flex-col lg:flex-row justify-between items-start lg:items-center gap-3 sm:gap-4'>
+      {children}
+    </div>
+  </header>
+)
+
+export const PageContent = (
+  { children }: { children: JSX.Element | JSX.Element[] },
+) => (
+  <main class='flex-1 overflow-y-auto px-4 sm:px-6 py-6 pb-20'>{children}</main>
+)
diff --git a/web/components/SideBar.tsx b/web/components/SideBar.tsx
new file mode 100644
index 0000000..d389f11
--- /dev/null
+++ b/web/components/SideBar.tsx
@@ -0,0 +1,93 @@
+import {
+  ChevronsLeft,
+  ChevronsRight,
+  HardDrive,
+  ListTodo,
+  LucideIcon,
+  Settings,
+} from 'lucide-preact'
+import { A, LinkProps, url } from '../lib/router.tsx'
+import { user } from '../lib/session.ts'
+
+const NavLink = (
+  { icon: Icon, children, current, ...props }: LinkProps & {
+    current: boolean
+    icon: LucideIcon
+  },
+) => (
+  <A
+    {...props}
+    class={`flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors ${
+      current
+        ? 'bg-primary/10 text-primary'
+        : 'text-base-content/70 hover:bg-base-300'
+    } ${url.params.sidebar_collapsed === 'true' ? 'justify-center' : ''}`}
+    replace
+  >
+    <Icon class='h-5 w-5' />
+    {url.params.sidebar_collapsed !== 'true' && <span>{children}</span>}
+  </A>
+)
+
+export const SideBar = () => {
+  const { nav, sidebar_collapsed } = url.params
+  const isCollapsed = sidebar_collapsed === 'true'
+  return (
+    <div
+      class={`relative h-full border-r border-base-300 bg-base-200 transition-all duration-300 ease-in-out ${
+        isCollapsed ? 'w-20' : 'w-64'
+      }`}
+    >
+      <div class='flex h-[calc(100vh-4rem)] flex-col'>
+        <div
+          class={`flex items-center border-b border-base-300 p-4 ${
+            isCollapsed ? 'justify-center' : 'justify-between'
+          }`}
+        >
+          {!isCollapsed && <h2 class='text-lg font-semibold'>Project</h2>}
+          <A
+            params={{
+              ...url.params,
+              sidebar_collapsed: isCollapsed ? null : 'true',
+            }}
+            replace
+            class='rounded-lg p-2 text-base-content/70 hover:bg-base-300'
+          >
+            {isCollapsed ? <ChevronsRight /> : <ChevronsLeft />}
+          </A>
+        </div>
+        <nav class='flex-1 space-y-2 p-4'>
+          <NavLink
+            current={nav === 'deployment'}
+            params={{ ...url.params, nav: 'deployment' }}
+            icon={HardDrive}
+          >
+            Deployment
+          </NavLink>
+          <NavLink
+            current={nav === 'tasks'}
+            params={{ ...url.params, nav: 'tasks' }}
+            icon={ListTodo}
+          >
+            Tasks
+          </NavLink>
+        </nav>
+        <div
+          class={`border-t border-base-300 p-4 ${
+            user.data?.isAdmin ? '' : 'opacity-50 pointer-events-none'
+          }`}
+        >
+          <NavLink
+            current={nav === 'settings'}
+            {...user.data?.isAdmin
+              ? { params: { ...url.params, nav: 'settings' } }
+              : {}}
+            icon={Settings}
+          >
+            Settings
+          </NavLink>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/web/components/forms.tsx b/web/components/forms.tsx
new file mode 100644
index 0000000..8d6fd90
--- /dev/null
+++ b/web/components/forms.tsx
@@ -0,0 +1,128 @@
+import { JSX } from 'preact'
+import { useId } from 'preact/hooks'
+import { A, LinkProps } from '../lib/router.tsx'
+
+// Card component
+export const Card = (
+  { children, title, description }: {
+    title: string
+    description?: string
+    children: JSX.Element | JSX.Element[]
+  },
+) => (
+  <div class='bg-surface rounded-lg border border-divider shadow-sm bg-base-100'>
+    <div class='p-4 sm:p-6'>
+      <h3 class='text-lg font-semibold text-text'>{title}</h3>
+      {description && (
+        <p class='mt-1 text-sm text-text-secondary'>{description}</p>
+      )}
+    </div>
+    <div class='p-4 sm:p-6 border-t border-divider'>
+      {children}
+    </div>
+  </div>
+)
+
+// Input component
+export const Input = (
+  { label, name, note, ...props }:
+    & { label: string; name: string; note?: string }
+    & JSX.InputHTMLAttributes<HTMLInputElement>,
+) => {
+  const id = useId()
+  return (
+    <div>
+      <label for={id} class='block text-sm font-medium text-text-secondary'>
+        {label}
+      </label>
+      <input
+        id={id}
+        name={name}
+        class='mt-1 block w-full px-3 py-2 bg-bg border border-divider rounded-md shadow-sm placeholder-text-disabled focus:outline-none focus:ring-primary focus:border-primary sm:text-sm'
+        {...props}
+      />
+      {note && <p class='mt-2 text-sm text-text-secondary'>{note}</p>}
+    </div>
+  )
+}
+
+// Button component
+export const Button = (
+  { children, variant = 'primary', ...props }:
+    & {
+      variant?: 'primary' | 'secondary' | 'danger'
+    }
+    & Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, 'class' | 'style'>
+    & Partial<LinkProps>,
+) => {
+  const baseClasses =
+    'inline-flex justify-center py-2 px-4 border shadow-sm text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2'
+
+  const variants = {
+    primary:
+      'border-transparent text-white bg-primary hover:bg-primary-hover focus:ring-primary',
+    secondary:
+      'border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-indigo-500',
+    danger:
+      'border-transparent text-white bg-red-600 hover:bg-red-700 focus:ring-red-500',
+  }
+
+  if (props.href || props.hash || props.params) {
+    return (
+      <A
+        class={[baseClasses, variants[variant]].join(' ')}
+        {...props}
+      >
+        {children}
+      </A>
+    )
+  }
+
+  return (
+    <button
+      class={[baseClasses, variants[variant]].join(' ')}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+// Switch component
+export const Switch = (
+  { label, note, ...props }: {
+    label: string
+    note?: string
+    // checked: boolean
+  } & JSX.InputHTMLAttributes<HTMLInputElement>,
+) => {
+  const id = useId()
+  return (
+    <div class='flex items-center justify-between'>
+      <span class='flex-grow flex flex-col'>
+        <label for={id} class='text-sm font-medium text-text-secondary'>
+          {label}
+        </label>
+        {note && <p class='text-sm text-text-tertiary'>{note}</p>}
+      </span>
+      <div class='relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in'>
+        <input
+          type='checkbox'
+          id={id}
+          class='absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer checked:right-0 checked:border-green-400'
+          {...props}
+        />
+        <label
+          for={id}
+          class='block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer'
+        >
+        </label>
+      </div>
+    </div>
+  )
+}
+
+// Note component
+export const Note = ({ children }: { children: string }) => (
+  <p class='mt-2 text-sm text-text-secondary'>{children}</p>
+)
diff --git a/web/index.tsx b/web/index.tsx
index e92a902..7634b3c 100644
--- a/web/index.tsx
+++ b/web/index.tsx
@@ -4,12 +4,17 @@ import { ProjectsPage } from './pages/ProjectsPage.tsx'
 import { BackgroundPattern } from './components/BackgroundPattern.tsx'
 import { Header } from './layout.tsx'
 import { user } from './lib/session.ts'
+import { url } from './lib/router.tsx'
+import { ProjectPage } from './pages/ProjectPage.tsx'
 
 const renderPage = () => {
   if (user.pending) return
   if (!user.data) {
     return <LoginPage />
   }
+  if (url.path.startsWith('/projects/')) {
+    return <ProjectPage />
+  }
   return <ProjectsPage />
 }
 const App = () => {
diff --git a/web/pages/ProjectPage.tsx b/web/pages/ProjectPage.tsx
new file mode 100644
index 0000000..ca4e66a
--- /dev/null
+++ b/web/pages/ProjectPage.tsx
@@ -0,0 +1,91 @@
+import { A, navigate, url } from '../lib/router.tsx'
+import {
+  PageContent,
+  PageHeader,
+  PageLayoutWithSideBar,
+} from '../components/Layout.tsx'
+import { DeploymentPage } from './project/DeploymentPage.tsx'
+import { TasksPage } from './project/TaskPage.tsx'
+import { SettingsPage } from './project/SettingsPage.tsx'
+import { api } from '../lib/api.ts'
+import { effect } from '@preact/signals'
+import { Deployment } from '../../api/schema.ts'
+
+const pageMap = {
+  deployment: DeploymentPage,
+  tasks: TasksPage,
+  settings: SettingsPage,
+}
+
+export const deployments: Deployment[] = [
+  {
+    projectId: 'my-awesome-project',
+    url: 'https://my-app.fly.dev',
+    logsEnabled: true,
+    databaseEnabled: false,
+    sqlEndpoint: undefined,
+    sqlToken: undefined,
+  },
+  {
+    projectId: 'my-awesome-project',
+    url: 'https://staging.my-app.fly.dev',
+    logsEnabled: false,
+    databaseEnabled: true,
+    sqlEndpoint: 'https://db.my-app.com/sql',
+    sqlToken: 'super-secret-token',
+  },
+]
+
+const project = api['GET/api/project'].signal()
+
+effect(() => {
+  const path = url.path
+  const projectSlug = path.split('/')[2]
+  if (projectSlug) {
+    project.fetch({ slug: projectSlug })
+  }
+})
+
+export function ProjectPage() {
+  const { nav } = url.params
+
+  const Component = pageMap[nav as keyof typeof pageMap]
+  if (!Component) {
+    navigate({ params: { nav: 'deployment' } })
+    return null
+  }
+
+  if (project.pending) {
+    return (
+      <PageLayoutWithSideBar>
+        <div class='text-center py-10'>Loading...</div>
+      </PageLayoutWithSideBar>
+    )
+  }
+
+  if (!project.data) {
+    return (
+      <>
+        <PageHeader>
+          <h1 class='text-xl sm:text-2xl font-semibold text-text'>
+            Deployments
+          </h1>
+        </PageHeader>
+        <PageContent>
+          <div class='text-center py-10'>
+            <p class='text-text2'>
+              Please select a project to view deployments.
+            </p>
+            <A href='/projects' class='btn btn-primary mt-4'>Go to Projects</A>
+          </div>
+        </PageContent>
+      </>
+    )
+  }
+
+  return (
+    <PageLayoutWithSideBar>
+      <Component project={project.data} />
+    </PageLayoutWithSideBar>
+  )
+}
diff --git a/web/pages/ProjectsPage.tsx b/web/pages/ProjectsPage.tsx
index f1b71fb..5027c93 100644
--- a/web/pages/ProjectsPage.tsx
+++ b/web/pages/ProjectsPage.tsx
@@ -16,7 +16,8 @@ import { url } from '../lib/router.tsx'
 import { JSX } from 'preact'
 import { user } from '../lib/session.ts'
 import { api } from '../lib/api.ts'
-import { Project as ApiProject, Team, User } from '../../api/schema.ts'
+import { PageContent, PageHeader, PageLayout } from '../components/Layout.tsx'
+import type { Project as ApiProject, Team, User } from '../../api/schema.ts'
 
 type Project = ApiProject
 
@@ -55,13 +56,13 @@ async function saveProject(
     do {
       finalSlug = base + suffix
       suffix = suffix ? String(Number(suffix) + 1) : '0'
-    } while (projects.data?.some((p) => p.projectSlug === finalSlug))
+    } while (projects.data?.some((p) => p.slug === finalSlug))
     slug = finalSlug
   }
   try {
     await fetcher.fetch({
-      projectSlug: finalSlug,
-      projectName: name,
+      slug: finalSlug,
+      name,
       teamId,
       repositoryUrl,
       isPublic: isPublic ?? false,
@@ -114,7 +115,7 @@ function toast(message: string, type: 'info' | 'error' = 'info') {
 
 async function deleteProject(slug: string) {
   try {
-    await api['DELETE/api/project'].fetch({ projectSlug: slug })
+    await api['DELETE/api/project'].fetch({ slug: slug })
     toast('Project deleted.', 'info')
     projects.fetch()
     navigate({ params: { dialog: null, id: null, key: null }, replace: true })
@@ -166,29 +167,6 @@ async function removeUserFromTeam(user: User, team: Team) {
   }
 }
 
-const PageLayout = (
-  { children }: { children: JSX.Element | JSX.Element[] },
-) => (
-  <div class='h-screen flex justify-center bg-bg'>
-    <div class='w-full max-w-7xl h-full bg-base-100 flex flex-col'>
-      {children}
-    </div>
-  </div>
-)
-const PageHeader = (
-  { children }: { children: JSX.Element | JSX.Element[] },
-) => (
-  <header class='px-4 sm:px-6 py-4 bg-surface border-b border-divider'>
-    <div class='flex flex-col lg:flex-row justify-between items-start lg:items-center gap-3 sm:gap-4'>
-      {children}
-    </div>
-  </header>
-)
-const PageContent = (
-  { children }: { children: JSX.Element | JSX.Element[] },
-) => (
-  <main class='flex-1 overflow-y-auto px-4 sm:px-6 py-6 pb-20'>{children}</main>
-)
 const FormField = (
   { label, children }: { label: string; children: JSX.Element | JSX.Element[] },
 ) => (
@@ -226,8 +204,8 @@ const ProjectCard = (
   const isMember = team.teamMembers.includes(user.data?.userEmail || '')
   return (
     <A
-      key={project.projectSlug}
-      href={isMember ? `/projects/${project.projectSlug}` : undefined}
+      key={project.slug}
+      href={isMember ? `/projects/${project.slug}` : undefined}
       class={'block hover:no-underline w-full h-18 ' +
         (isMember ? '' : 'pointer-events-none')}
     >
@@ -236,14 +214,14 @@ const ProjectCard = (
           <div class='flex-1 min-w-0 flex flex-col justify-center'>
             <h3
               class='font-semibold text-base-content text-base leading-tight truncate'
-              title={project.projectName}
+              title={project.name}
             >
-              {project.projectName.length > 25
-                ? project.projectName.slice(0, 22) + '…'
-                : project.projectName}
+              {project.name.length > 25
+                ? project.name.slice(0, 22) + '…'
+                : project.name}
             </h3>
             <div class='flex items-center gap-3 mt-1 text-xs text-base-content/70'>
-              <span class='font-mono truncate'>{project.projectSlug}</span>
+              <span class='font-mono truncate'>{project.slug}</span>
               <div class='flex items-center gap-1 flex-shrink-0'>
                 <Calendar class='w-3.5 h-3.5' />
                 <span>
@@ -300,20 +278,20 @@ const TeamMembersRow = ({ user, team }: { user: User; team: Team }) => (
 
 const TeamProjectsRow = ({ project }: { project: ApiProject }) => (
   <tr class='border-b border-divider'>
-    <td class='py-3 font-medium truncate'>{project.projectName}</td>
-    <td class='py-3 text-text2 truncate'>{project.projectSlug}</td>
+    <td class='py-3 font-medium truncate'>{project.name}</td>
+    <td class='py-3 text-text2 truncate'>{project.slug}</td>
     <td class='py-3 text-text2 whitespace-nowrap'>
       {project.createdAt && new Date(project.createdAt).toLocaleDateString()}
     </td>
     <td class='py-3 text-right flex gap-2 justify-end'>
       <A
-        params={{ dialog: 'edit-project', slug: project.projectSlug }}
+        params={{ dialog: 'edit-project', slug: project.slug }}
         class='btn btn-ghost btn-xs'
       >
         Edit
       </A>
       <A
-        params={{ dialog: 'delete', id: project.projectSlug, key: 'project' }}
+        params={{ dialog: 'delete', id: project.slug, key: 'project' }}
         class='btn btn-ghost btn-xs text-danger'
       >
         Delete
@@ -344,7 +322,7 @@ function ProjectDialog() {
   const { dialog, slug } = url.params
   const isEdit = dialog === 'edit-project'
   const project = isEdit
-    ? projects.data?.find((p) => p.projectSlug === slug)
+    ? projects.data?.find((p) => p.slug === slug)
     : undefined
 
   const handleSubmit = (e: Event) => {
@@ -375,7 +353,7 @@ function ProjectDialog() {
           <input
             type='text'
             name='name'
-            defaultValue={project?.projectName || ''}
+            defaultValue={project?.name || ''}
             required
             class='input input-bordered w-full'
           />
@@ -508,7 +486,7 @@ function TeamProjectsSection({ team }: { team: Team }) {
               </thead>
               <tbody>
                 {teamProjects.map((p) => (
-                  <TeamProjectsRow key={p.projectSlug} project={p} />
+                  <TeamProjectsRow key={p.slug} project={p} />
                 ))}
               </tbody>
             </table>
@@ -634,7 +612,7 @@ function DeleteDialog() {
   }
 
   const name = key === 'project'
-    ? projects.data?.find((p) => p.projectSlug === id)?.projectName
+    ? projects.data?.find((p) => p.slug === id)?.name
     : teams.data?.find((t) => t.teamId === id)?.teamName
 
   if (!name) return null
@@ -699,8 +677,8 @@ export function ProjectsPage() {
 
   const filteredProjects = q
     ? projects.data?.filter((p) =>
-      p.projectName.toLowerCase().includes(q) ||
-      p.projectSlug.toLowerCase().includes(q)
+      p.name.toLowerCase().includes(q) ||
+      p.slug.toLowerCase().includes(q)
     )
     : projects.data
 
@@ -774,7 +752,7 @@ export function ProjectsPage() {
                     <div class='grid gap-4 sm:gap-6 grid-cols-[repeat(auto-fill,minmax(320px,1fr))]'>
                       {teamProjects.map((p) => (
                         <ProjectCard
-                          key={p.projectSlug}
+                          key={p.slug}
                           project={p}
                           team={team}
                         />
diff --git a/web/pages/project/DeploymentPage.tsx b/web/pages/project/DeploymentPage.tsx
new file mode 100644
index 0000000..64c3427
--- /dev/null
+++ b/web/pages/project/DeploymentPage.tsx
@@ -0,0 +1,180 @@
+import { PageContent, PageHeader } from '../../components/Layout.tsx'
+import { url } from '../../lib/router.tsx'
+
+import { A, navigate } from '../../lib/router.tsx'
+import { Calendar, Database, Logs, Search } from 'lucide-preact'
+import { Deployment, Project } from '../../../api/schema.ts'
+import { deployments } from '../ProjectPage.tsx'
+
+const DeploymentCard = ({ dep }: { dep: Deployment }) => {
+  const created = dep.createdAt ? new Date(dep.createdAt) : null
+  const formattedDate = created ? created.toLocaleString() : 'Unknown'
+
+  return (
+    <div class='card bg-base-200 p-5 flex flex-col gap-3 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 border border-primary/20'>
+      <span class='font-mono text-lg font-semibold text-primary break-all'>
+        {dep.url}
+      </span>
+      <div class='flex gap-4 text-xs mt-1'>
+        <span
+          class={`flex items-center gap-1 px-2 py-1 rounded ${
+            dep.logsEnabled
+              ? 'bg-success/10 text-success'
+              : 'bg-error/10 text-error'
+          }`}
+        >
+          <Logs class='w-4 h-4' />
+          Logs: {dep.logsEnabled ? 'Enabled' : 'Disabled'}
+        </span>
+        <span
+          class={`flex items-center gap-1 px-2 py-1 rounded ${
+            dep.databaseEnabled
+              ? 'bg-success/10 text-success'
+              : 'bg-error/10 text-error'
+          }`}
+        >
+          <Database class='w-4 h-4' />
+          Database: {dep.databaseEnabled ? 'Enabled' : 'Disabled'}
+        </span>
+      </div>
+      <span class='text-xs text-text2 mt-2'>
+        <Calendar class='w-4 h-4' />
+        Created At : <span class='font-semibold'>{formattedDate}</span>
+      </span>
+      <A
+        {...(dep.logsEnabled || dep.databaseEnabled)
+          ? { params: { deployment: dep.url } }
+          : {}}
+        class='btn btn-primary btn-xs self-end mt-2'
+      >
+        View Details
+      </A>
+    </div>
+  )
+}
+
+const LogsSection = () => {
+  return (
+    <div>
+      <h2 class='text-lg font-semibold'>Logs</h2>
+      <p>Log details for the selected deployment will go here.</p>
+    </div>
+  )
+}
+
+const DatabaseSection = () => {
+  return (
+    <div>
+      <h2 class='text-lg font-semibold'>Database</h2>
+      <p>Database details for the selected deployment will go here.</p>
+    </div>
+  )
+}
+
+export const DeploymentPage = ({}: { project: Project }) => {
+  const { deployment, deptab } = url.params
+
+  const selectedDeployment = deployment
+    ? deployments.find((d) => d.url === deployment)
+    : null
+
+  if (
+    selectedDeployment && deptab === 'logs' && !selectedDeployment.logsEnabled
+  ) {
+    navigate({
+      params: {
+        deptab: selectedDeployment.databaseEnabled ? 'database' : null,
+      },
+    })
+  }
+
+  if (
+    selectedDeployment && deptab === 'database' &&
+    !selectedDeployment.databaseEnabled
+  ) {
+    navigate({
+      params: { deptab: selectedDeployment.logsEnabled ? 'logs' : null },
+    })
+  }
+
+  const tab = deptab === 'logs' ? <LogsSection /> : <DatabaseSection />
+  return (
+    <>
+      <PageHeader className='gap-4 bg-base-100'>
+        <div class='flex items-center'>
+          <A
+            params={{ deployment: null }}
+            class='text-xl sm:text-2xl font-semibold text-text'
+          >
+            Deployments
+          </A>
+        </div>
+        <div class='flex items-center gap-2'>
+          <div class='relative'>
+            <select
+              onChange={(e) =>
+                e.target &&
+                navigate({
+                  params: { deployment: (e.target as HTMLSelectElement).value },
+                })}
+              value={deployment ?? undefined}
+              class='select'
+            >
+              <option disabled>Select Deployment</option>
+              {deployments.map((dep) => (
+                <option key={dep.url} value={dep.url}>
+                  {dep.url}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div class='tabs tabs-boxed'>
+            <A
+              {...selectedDeployment?.logsEnabled
+                ? { params: { deptab: 'logs' } }
+                : {}}
+              class={`tab ${
+                deptab === 'logs' && selectedDeployment?.logsEnabled
+                  ? 'tab-active'
+                  : ''
+              } gap-2`}
+            >
+              <Logs class='w-4 h-4' /> Logs
+            </A>
+            <A
+              {...selectedDeployment?.databaseEnabled
+                ? { params: { deptab: 'database' } }
+                : {}}
+              class={`tab ${
+                deptab === 'database' && selectedDeployment?.databaseEnabled
+                  ? 'tab-active'
+                  : ''
+              } gap-2`}
+            >
+              <Database class='w-4 h-4' /> Database
+            </A>
+          </div>
+          <div class='relative w-full sm:w-auto sm:max-w-sm'>
+            <Search class='absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text2 pointer-events-none' />
+            <input
+              type='text'
+              placeholder='Search...'
+              class='w-full bg-surface2 border border-divider rounded-lg py-2 pl-10 pr-4 text-sm placeholder:text-text3 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all'
+            />
+          </div>
+        </div>
+      </PageHeader>
+      <PageContent>
+        {selectedDeployment
+          ? tab
+          : (
+            <div class='grid gap-6 md:grid-cols-2 lg:grid-cols-3'>
+              {deployments.map((dep) => (
+                <DeploymentCard key={dep.url} dep={dep} />
+              ))}
+            </div>
+          )}
+      </PageContent>
+    </>
+  )
+}
diff --git a/web/pages/project/SettingsPage.tsx b/web/pages/project/SettingsPage.tsx
new file mode 100644
index 0000000..8cf3d83
--- /dev/null
+++ b/web/pages/project/SettingsPage.tsx
@@ -0,0 +1,293 @@
+import { Deployment, Project, User } from '../../../api/schema.ts'
+import { PageContent, PageHeader } from '../../components/Layout.tsx'
+import { Button, Card, Input, Switch } from '../../components/forms.tsx'
+import { useSignal } from '@preact/signals'
+import { navigate, url } from '../../lib/router.tsx'
+import { JSX } from 'preact'
+import { api } from '../../lib/api.ts'
+import { deployments } from '../ProjectPage.tsx'
+import { user } from '../../lib/session.ts'
+
+const users = api['GET/api/users'].signal()
+users.fetch()
+
+const team = api['GET/api/team'].signal()
+
+function ProjectInfoForm({ project }: { project: Project }) {
+  const handleSubmit = (e: JSX.TargetedEvent<HTMLFormElement>) => {
+    e.preventDefault()
+  }
+
+  return (
+    <Card
+      title='Project Information'
+      description='Update your project name and repository URL.'
+    >
+      <form onSubmit={handleSubmit}>
+        <div class='space-y-4'>
+          <Input
+            label='Project Name'
+            name='projectName'
+            defaultValue={project.name}
+            note='This is your project’s display name.'
+          />
+          <Input
+            label='Repository URL'
+            name='repositoryUrl'
+            defaultValue={project.repositoryUrl}
+            note='The URL of the Git repository for your project.'
+          />
+        </div>
+        <div class='mt-6 flex justify-end'>
+          <Button type='submit'>Save Changes</Button>
+        </div>
+      </form>
+    </Card>
+  )
+}
+
+function DeploymentForm({ deployment }: { deployment?: Deployment }) {
+  const databaseEnabled = useSignal(deployment?.databaseEnabled || false)
+  const handleSubmit = (e: JSX.TargetedEvent<HTMLFormElement>) => {
+    e.preventDefault()
+  }
+
+  return (
+    <Card title={deployment ? 'Edit Deployment' : 'Add Deployment'}>
+      <form onSubmit={handleSubmit}>
+        <div class='space-y-4'>
+          <Input
+            label='Deployment URL'
+            name='url'
+            defaultValue={deployment?.url}
+            note='The publicly accessible URL of your deployment.'
+          />
+          <Switch
+            label='Enable Logging'
+            name='logsEnabled'
+            defaultChecked={deployment?.logsEnabled}
+            note='Generate ClickHouse credentials to send logs directly from your server.'
+          />
+          <Switch
+            label='Enable Database'
+            name='databaseEnabled'
+            defaultChecked={databaseEnabled.value}
+            onChange={(e) => databaseEnabled.value = e.currentTarget.checked}
+            note='Provide an endpoint to execute SQL queries against your database.'
+          />
+          {databaseEnabled.value && (
+            <div class='pl-4 space-y-4 border-l-2 border-divider'>
+              <Input
+                label='SQL Endpoint'
+                name='sqlEndpoint'
+                defaultValue={deployment?.sqlEndpoint}
+                note='The endpoint that can execute SQL queries.'
+              />
+              <Input
+                label='Security Token'
+                name='sqlToken'
+                type='password'
+                defaultValue={deployment?.sqlToken}
+                note='A token to secure your SQL endpoint.'
+              />
+            </div>
+          )}
+        </div>
+        <div class='mt-6 flex justify-end gap-4'>
+          <Button
+            type='button'
+            params={{ view: 'deployments', action: null, id: null }}
+            variant='secondary'
+            replace
+          >
+            Cancel
+          </Button>
+          <Button type='submit'>Save Deployment</Button>
+        </div>
+      </form>
+    </Card>
+  )
+}
+
+function DeploymentsList({ deployments }: { deployments: Deployment[] }) {
+  const handleDelete = (_id: string) => {
+  }
+
+  return (
+    <Card
+      title='Deployments'
+      description='Manage your project deployments.'
+    >
+      <div class='space-y-4'>
+        {deployments.map((dep) => (
+          <div
+            key={dep.url}
+            class='flex items-center justify-between p-4 rounded-md border border-divider'
+          >
+            <div>
+              <p class='font-semibold'>{dep.url}</p>
+              <p class='text-sm text-text-secondary'>
+                Logs: {dep.logsEnabled ? 'Enabled' : 'Disabled'} | Database:
+                {' '}
+                {dep.databaseEnabled ? 'Enabled' : 'Disabled'}
+              </p>
+            </div>
+            <div class='flex gap-2'>
+              <Button
+                params={{
+                  view: 'deployments',
+                  action: 'edit',
+                  id: dep.url,
+                }}
+                variant='secondary'
+                replace
+              >
+                Edit
+              </Button>
+              <Button
+                onClick={() => handleDelete(dep.url)}
+                variant='danger'
+              >
+                Delete
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+      <div class='mt-6 flex justify-end'>
+        <Button
+          params={{ view: 'deployments', action: 'add' }}
+          replace
+        >
+          Add Deployment
+        </Button>
+      </div>
+    </Card>
+  )
+}
+
+function UserManagement() {
+  const teamMembersDetails = team.data?.teamMembers.map((email) =>
+    users.data?.find((u) => u.userEmail === email)
+  ).filter(Boolean) as User[]
+
+  const handleAddUser = (e: JSX.TargetedEvent<HTMLFormElement>) => {
+    e.preventDefault()
+  }
+
+  const handleRemoveUser = (_email: string) => {
+  }
+
+  return (
+    <Card
+      title='User Management'
+      description='Manage who has access to this project.'
+    >
+      <div class='space-y-4'>
+        {teamMembersDetails.map((member) => (
+          <div
+            key={member.userEmail}
+            class='flex items-center justify-between'
+          >
+            <div class='flex items-center gap-3'>
+              <img
+                src={member.userPicture ||
+                  `https://ui-avatars.com/api/?name=${member.userFullName}&background=random`}
+                alt={member.userFullName}
+                class='w-10 h-10 rounded-full'
+              />
+              <div>
+                <p class='font-semibold'>{member.userFullName}</p>
+                <p class='text-sm text-text-secondary'>
+                  {member.userEmail}
+                </p>
+              </div>
+            </div>
+            <Button
+              onClick={() => handleRemoveUser(member.userEmail)}
+              variant='danger'
+            >
+              Remove
+            </Button>
+          </div>
+        ))}
+      </div>
+      <div class='mt-6 pt-6 border-t border-divider'>
+        <h4 class='text-md font-semibold mb-2'>Add a new user</h4>
+        <form class='flex gap-2' onSubmit={handleAddUser}>
+          <Input
+            name='newUserEmail'
+            label='User Email'
+            placeholder='user@example.com'
+          />
+          <div class='self-end'>
+            <Button type='submit'>Add User</Button>
+          </div>
+        </form>
+      </div>
+    </Card>
+  )
+}
+
+export const SettingsPage = ({ project }: { project: Project }) => {
+  if (!user.data?.isAdmin) {
+    navigate({ params: { nav: 'deployments' } })
+  }
+  const { view = 'info', action, id } = url.params
+
+  team.fetch({ teamId: project.teamId })
+
+  const content = view === 'deployments'
+    ? (
+      action === 'add'
+        ? <DeploymentForm />
+        : action === 'edit' && id
+        ? (
+          <DeploymentForm
+            deployment={deployments.find((d) => d.url === id)}
+          />
+        )
+        : <DeploymentsList deployments={deployments} />
+    )
+    : view === 'users'
+    ? <UserManagement />
+    : <ProjectInfoForm project={project} />
+
+  return (
+    <>
+      <PageHeader className='gap-4 bg-base-100'>
+        <h1 class='text-xl sm:text-2xl font-semibold text-text'>
+          Project Settings: {project.name}
+        </h1>
+        <div class='flex gap-2'>
+          <Button
+            params={{ view: 'info' }}
+            variant={view === 'info' ? 'primary' : 'secondary'}
+            replace
+          >
+            Info
+          </Button>
+          <Button
+            params={{ view: 'deployments' }}
+            variant={view === 'deployments' ? 'primary' : 'secondary'}
+            replace
+          >
+            Deployments
+          </Button>
+          <Button
+            params={{ view: 'users' }}
+            variant={view === 'users' ? 'primary' : 'secondary'}
+            replace
+          >
+            Users
+          </Button>
+        </div>
+      </PageHeader>
+      <PageContent>
+        <div class='space-y-6'>
+          {content}
+        </div>
+      </PageContent>
+    </>
+  )
+}
diff --git a/web/pages/project/TaskPage.tsx b/web/pages/project/TaskPage.tsx
new file mode 100644
index 0000000..3017305
--- /dev/null
+++ b/web/pages/project/TaskPage.tsx
@@ -0,0 +1,17 @@
+import { Project } from '../../../api/schema.ts'
+import { PageContent, PageHeader } from '../../components/Layout.tsx'
+
+export const TasksPage = ({ project }: { project: Project }) => {
+  return (
+    <>
+      <PageHeader>
+        <h1 class='text-xl sm:text-2xl font-semibold text-text'>
+          Project: {project.name}
+        </h1>
+      </PageHeader>
+      <PageContent>
+        <p>This is the project page for {project.name}.</p>
+      </PageContent>
+    </>
+  )
+}