diff --git a/src/components/link.tsx b/src/components/link.tsx
index d4a2323..a3efe0d 100644
--- a/src/components/link.tsx
+++ b/src/components/link.tsx
@@ -8,7 +8,7 @@ export interface LinkProps extends HTMLProps<HTMLAnchorElement> {
   href: string
 }
 
-export default function Link(props: LinkProps) {
+export function Link(props: LinkProps) {
   const {children, to, href, className: classNameProp, ...rest} = props
 
   let linkHref = ''
diff --git a/src/components/nav-link.tsx b/src/components/nav-link.tsx
deleted file mode 100644
index ed88c6c..0000000
--- a/src/components/nav-link.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import type {HTMLProps} from 'react'
-import {useLocation} from './AppCookieContext'
-import log from '@log'
-
-export interface NavLinkProps extends Omit<HTMLProps<HTMLAnchorElement>, 'className'> {
-  to: string
-  end?: boolean
-  className?: string | ((props: {isActive: boolean; isPending: boolean}) => string | undefined)
-}
-
-export default function NavLink(props: NavLinkProps) {
-  const {children, to, end, href, className: classNameProp = '', ...rest} = props
-
-  const location = useLocation()
-  let locationPathname = (location && location.pathname) || '/'
-  let toPathname = to || href || '/'
-
-  const isPending = false
-
-  let isActive =
-    locationPathname === toPathname ||
-    (!end && locationPathname.startsWith(toPathname) && locationPathname.charAt(toPathname.length) === '/')
-
-  // log('loc: ', location, toPathname, isActive)
-
-  let className: string | undefined
-  if (typeof classNameProp === 'function') {
-    className = classNameProp({isActive, isPending})
-  } else {
-    // If the className prop is not a function, we use a default `active`
-    // class for <NavLink />s that are active. In v5 `active` was the default
-    // value for `activeClassName`, but we are removing that API and can still
-    // use the old default behavior for a cleaner upgrade path and keep the
-    // simple styling rules working as they currently do.
-    className = [classNameProp, isActive ? 'active' : null, isPending ? 'pending' : null].filter(Boolean).join(' ')
-  }
-  let disableOnClick = (event: any) => {
-    event?.preventDefault()
-    return false
-  }
-  if (props.disabled) {
-    className += ' opacity-60 cursor-not-allowed'
-  }
-
-  return (
-    <a
-      href={to || href}
-      className={className}
-      onClick={props.disabled ? disableOnClick : undefined}
-      {...rest}
-    >
-      {children}
-    </a>
-  )
-}
diff --git a/src/db/migrations/0001_needy_mimic.sql b/src/db/migrations/0001_needy_mimic.sql
new file mode 100644
index 0000000..7c556ff
--- /dev/null
+++ b/src/db/migrations/0001_needy_mimic.sql
@@ -0,0 +1 @@
+ALTER TABLE `builds` ADD `public` integer DEFAULT false NOT NULL;
\ No newline at end of file
diff --git a/src/db/migrations/meta/0001_snapshot.json b/src/db/migrations/meta/0001_snapshot.json
new file mode 100644
index 0000000..999e9a7
--- /dev/null
+++ b/src/db/migrations/meta/0001_snapshot.json
@@ -0,0 +1,514 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "0befce22-0169-4598-9cab-9b82ea159fad",
+  "prevId": "206a3c30-67f7-4624-868f-1ca6467d0f86",
+  "tables": {
+    "api_keys": {
+      "name": "api_keys",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "pid": {
+          "name": "pid",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "(CURRENT_TIMESTAMP)"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "(CURRENT_TIMESTAMP)"
+        }
+      },
+      "indexes": {
+        "api_key_pid_idx": {
+          "name": "api_key_pid_idx",
+          "columns": [
+            "pid"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "api_keys_user_id_users_id_fk": {
+          "name": "api_keys_user_id_users_id_fk",
+          "tableFrom": "api_keys",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "builds": {
+      "name": "builds",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "pid": {
+          "name": "pid",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_pid": {
+          "name": "user_pid",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "project_id": {
+          "name": "project_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "project_pid": {
+          "name": "project_pid",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "commit_sha": {
+          "name": "commit_sha",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "image_sha": {
+          "name": "image_sha",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "tag": {
+          "name": "tag",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "public": {
+          "name": "public",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "release_url": {
+          "name": "release_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "registry_url": {
+          "name": "registry_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "built_with": {
+          "name": "built_with",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "built_by": {
+          "name": "built_by",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "object_path": {
+          "name": "object_path",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "(CURRENT_TIMESTAMP)"
+        }
+      },
+      "indexes": {
+        "builds_pid_idx": {
+          "name": "builds_pid_idx",
+          "columns": [
+            "pid"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "builds_user_id_users_id_fk": {
+          "name": "builds_user_id_users_id_fk",
+          "tableFrom": "builds",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "builds_project_id_projects_id_fk": {
+          "name": "builds_project_id_projects_id_fk",
+          "tableFrom": "builds",
+          "tableTo": "projects",
+          "columnsFrom": [
+            "project_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "projects": {
+      "name": "projects",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "pid": {
+          "name": "pid",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_pid": {
+          "name": "user_pid",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "org": {
+          "name": "org",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "repo_url": {
+          "name": "repo_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "registry_url": {
+          "name": "registry_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "public": {
+          "name": "public",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "(CURRENT_TIMESTAMP)"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "(CURRENT_TIMESTAMP)"
+        }
+      },
+      "indexes": {
+        "projects_pid_idx": {
+          "name": "projects_pid_idx",
+          "columns": [
+            "pid"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "projects_user_id_users_id_fk": {
+          "name": "projects_user_id_users_id_fk",
+          "tableFrom": "projects",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "user_sessions": {
+      "name": "user_sessions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "session_token": {
+          "name": "session_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "(CURRENT_TIMESTAMP)"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "(CURRENT_TIMESTAMP)"
+        }
+      },
+      "indexes": {
+        "user_sessions_session_token_unique": {
+          "name": "user_sessions_session_token_unique",
+          "columns": [
+            "session_token"
+          ],
+          "isUnique": true
+        },
+        "session_token_idx": {
+          "name": "session_token_idx",
+          "columns": [
+            "session_token"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "user_sessions_user_id_users_id_fk": {
+          "name": "user_sessions_user_id_users_id_fk",
+          "tableFrom": "user_sessions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "users": {
+      "name": "users",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "pid": {
+          "name": "pid",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "(CURRENT_TIMESTAMP)"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "(CURRENT_TIMESTAMP)"
+        },
+        "full_name": {
+          "name": "full_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "github_id": {
+          "name": "github_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "github_login": {
+          "name": "github_login",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "github_avatar_url": {
+          "name": "github_avatar_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_pid_idx": {
+          "name": "user_pid_idx",
+          "columns": [
+            "pid"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  }
+}
\ No newline at end of file
diff --git a/src/db/migrations/meta/_journal.json b/src/db/migrations/meta/_journal.json
index cc8b230..a327916 100644
--- a/src/db/migrations/meta/_journal.json
+++ b/src/db/migrations/meta/_journal.json
@@ -8,6 +8,13 @@
       "when": 1716588993128,
       "tag": "0000_complex_marvex",
       "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "6",
+      "when": 1717025603459,
+      "tag": "0001_needy_mimic",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/src/db/schema.ts b/src/db/schema.ts
index a9acb5d..b7d45ab 100644
--- a/src/db/schema.ts
+++ b/src/db/schema.ts
@@ -113,6 +113,7 @@ export const builds = sqliteTable(
     commitSha: text('commit_sha'),
     imageSha: text('image_sha'),
     tag: text('tag'),
+    public: integer('public', {mode: 'boolean'}).notNull().default(false),
     releaseUrl: text('release_url'),
     registryUrl: text('registry_url'),
     builtWith: text('built_with'), // podman, docker
diff --git a/src/log.ts b/src/log.ts
index 39e3a81..5dae9e1 100644
--- a/src/log.ts
+++ b/src/log.ts
@@ -1,4 +1,4 @@
-export default function log(...args: any[]) {
+export function log(...args: any[]) {
   const PUBLIC_DEBUG = import.meta.env.PUBLIC_DEBUG
   if (PUBLIC_DEBUG === 'true') {
     console.log.apply(null, args)
diff --git a/src/pages/app/[...path].astro b/src/pages/app/[...path].astro
index 0488907..40df34e 100644
--- a/src/pages/app/[...path].astro
+++ b/src/pages/app/[...path].astro
@@ -2,7 +2,7 @@
 // main dashboard single page app
 
 import MainLayout from '@/layouts/main-layout.astro'
-import App from '@/partials/app/app'
+import {App} from '@/partials/app/app'
 import {verifyValidSession} from '@/lib/github-client'
 
 export const prerender = false
diff --git a/src/pages/share/[pid].astro b/src/pages/share/[pid].astro
new file mode 100644
index 0000000..8c7f273
--- /dev/null
+++ b/src/pages/share/[pid].astro
@@ -0,0 +1,19 @@
+---
+import MainLayout from '@/layouts/main-layout.astro'
+import SiteHeader from '@/partials/header/site-header.astro'
+export const prerender = false
+import {SharedLinkViewerPage} from '@/partials/viewer/shared-link-viewer-page'
+
+const {pid} = Astro.params
+if (!pid) {
+  return Astro.redirect('/404')
+}
+---
+
+<MainLayout title='Share link viewer'>
+  <SiteHeader />
+  <SharedLinkViewerPage
+    client:only='react'
+    {pid}
+  />
+</MainLayout>
diff --git a/src/pages/viewer.astro b/src/pages/viewer.astro
index b506113..f8ab1f9 100644
--- a/src/pages/viewer.astro
+++ b/src/pages/viewer.astro
@@ -2,7 +2,7 @@
 import MainLayout from '@/layouts/main-layout.astro'
 import SiteHeader from '@/partials/header/site-header.astro'
 export const prerender = true
-import LocalViewerPage from '@/partials/viewer/local-viewer-page'
+import {LocalViewerPage} from '@/partials/viewer/local-viewer-page'
 ---
 
 <MainLayout title='Local Viewer'>
diff --git a/src/partials/app/app-layout.tsx b/src/partials/app/app-layout.tsx
index 3950eb3..ed9b692 100644
--- a/src/partials/app/app-layout.tsx
+++ b/src/partials/app/app-layout.tsx
@@ -1,10 +1,10 @@
-import {Children, PropsWithChildren} from 'react'
+import {PropsWithChildren} from 'react'
 import {AppHeader} from '../header/app-header'
 import {AppFooter} from '../footer/app-footer'
 import {useLocation} from 'react-router-dom'
 export interface AppLayoutProps {}
 
-export default function AppLayout({children}: PropsWithChildren<AppLayoutProps>) {
+export function AppLayout({children}: PropsWithChildren<AppLayoutProps>) {
   const location = useLocation()
 
   const hideFooter = location.pathname.startsWith('/app/deployment')
diff --git a/src/partials/app/app.tsx b/src/partials/app/app.tsx
index 71d9574..11b2e3d 100644
--- a/src/partials/app/app.tsx
+++ b/src/partials/app/app.tsx
@@ -2,14 +2,14 @@ import {StrictMode} from 'react'
 import {SWRConfig} from 'swr'
 import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
 
-import DashboardPage from '../dashboard/dashboard-page'
-import ProjectsPage from '../projects/projects-page'
-import NewProjectPage from '../projects/new-project-page'
-import AppLayout from './app-layout'
-import SettingsPage from '../settings/settings-page'
-import AppViewerPage from '../viewer/app-viewer-page'
+import {DashboardPage} from '../dashboard/dashboard-page'
+import {ProjectsPage} from '../projects/projects-page'
+import {NewProjectPage} from '../projects/new-project-page'
+import {AppLayout} from './app-layout'
+import {SettingsPage} from '../settings/settings-page'
+import {AppViewerPage} from '../viewer/app-viewer-page'
 
-export default function App() {
+export function App() {
   return (
     <StrictMode>
       <SWRConfig
@@ -40,6 +40,10 @@ export default function App() {
                 path='/app/deployment/:pid'
                 element={<AppViewerPage />}
               />
+              <Route
+                path='/app/share/:pid'
+                element={<AppViewerPage />}
+              />
               <Route
                 path='/app/settings'
                 element={<SettingsPage />}
diff --git a/src/partials/app/sidebar-nav.tsx b/src/partials/app/sidebar-nav.tsx
index 02748a5..142d954 100644
--- a/src/partials/app/sidebar-nav.tsx
+++ b/src/partials/app/sidebar-nav.tsx
@@ -1,7 +1,7 @@
 import {cn} from '@/lib/utils'
 import {Icons} from '../header/icons'
 import {useLocation} from 'react-router-dom'
-import Link from '@/components/link'
+import {Link} from '@/components/link'
 
 export interface NavItem {
   title: string
diff --git a/src/partials/builds/build-row.tsx b/src/partials/builds/build-row.tsx
index 6fa151f..cc791e6 100644
--- a/src/partials/builds/build-row.tsx
+++ b/src/partials/builds/build-row.tsx
@@ -1,7 +1,7 @@
 import {ChevronRightIcon, ExternalLinkIcon} from '@radix-ui/react-icons'
 import {Badge} from '@/components/ui/badge'
 import {formatRelativeTimeFromUTC} from '@/lib/format-dates'
-import Link from '@/components/link'
+import {Link} from '@/components/link'
 
 import {cn} from '@/lib/utils'
 
@@ -54,7 +54,7 @@ export function BuildRow(props: BuildRowProps) {
             </Link>
           </h2>
         </div>
-        <div className='mt-3 flex items-center  text-xs leading-5 text-gray-400'>
+        <div className='text-gray-400 mt-3 flex  items-center text-xs leading-5'>
           {/* gap-x-2.5 */}
           <p className='truncate'>
             {props.builtBy && props.builtWith && (
@@ -85,7 +85,7 @@ export function BuildRow(props: BuildRowProps) {
                 {deployment.environment}
               </div> */}
       <ChevronRightIcon
-        className='h-5 w-5 flex-none text-gray-400'
+        className='text-gray-400 h-5 w-5 flex-none'
         aria-hidden='true'
       />
     </li>
diff --git a/src/partials/dashboard/breadcrumbs.tsx b/src/partials/dashboard/breadcrumbs.tsx
index 8fb0607..b44d894 100644
--- a/src/partials/dashboard/breadcrumbs.tsx
+++ b/src/partials/dashboard/breadcrumbs.tsx
@@ -1,5 +1,5 @@
 import {ChevronRightIcon} from '@radix-ui/react-icons'
-export default function Breadcrumbs() {
+export function Breadcrumbs() {
   return (
     <div className='mb-4 flex items-center space-x-1 text-sm text-muted-foreground'>
       <div className='overflow-hidden text-ellipsis whitespace-nowrap'>Dashboard</div>
diff --git a/src/partials/dashboard/code-inline.tsx b/src/partials/dashboard/code-inline.tsx
index 697ef93..60d401d 100644
--- a/src/partials/dashboard/code-inline.tsx
+++ b/src/partials/dashboard/code-inline.tsx
@@ -2,6 +2,6 @@ import {PropsWithChildren} from 'react'
 
 export interface CodeInlineProps {}
 
-export default function CodeInline(props: PropsWithChildren<CodeInlineProps>) {
+export function CodeInline(props: PropsWithChildren<CodeInlineProps>) {
   return <code className='relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm'>{props.children}</code>
 }
diff --git a/src/partials/dashboard/dashboard-empty-state.tsx b/src/partials/dashboard/dashboard-empty-state.tsx
index 480ebab..acc766c 100644
--- a/src/partials/dashboard/dashboard-empty-state.tsx
+++ b/src/partials/dashboard/dashboard-empty-state.tsx
@@ -1,10 +1,10 @@
 import {cn} from '@/lib/utils'
-import CodeInline from './code-inline'
-import H2 from './h2'
-import Paragraph from './paragraph'
-import PreBashCmd from './pre-bash-cmd'
+import {CodeInline} from './code-inline'
+import {H2} from './h2'
+import {Paragraph} from './paragraph'
+import {PreBashCmd} from './pre-bash-cmd'
 
-export default function DashboardEmptyState() {
+export function DashboardEmptyState() {
   return (
     <>
       <div className='space-y-2'>
diff --git a/src/partials/dashboard/dashboard-page.stories.tsx b/src/partials/dashboard/dashboard-page.stories.tsx
index 9c3ec52..380312c 100644
--- a/src/partials/dashboard/dashboard-page.stories.tsx
+++ b/src/partials/dashboard/dashboard-page.stories.tsx
@@ -1,8 +1,8 @@
 import type {Meta, StoryObj} from '@storybook/react'
 import {withRouter, reactRouterParameters} from 'storybook-addon-remix-react-router'
 
-import DashboardPage from './dashboard-page'
-import AppLayout from '../app/app-layout'
+import {DashboardPage} from './dashboard-page'
+import {AppLayout} from '../app/app-layout'
 const meta = {
   title: 'App/Dashboard',
   component: DashboardPage,
diff --git a/src/partials/dashboard/dashboard-page.tsx b/src/partials/dashboard/dashboard-page.tsx
index 90d124a..31bfa57 100644
--- a/src/partials/dashboard/dashboard-page.tsx
+++ b/src/partials/dashboard/dashboard-page.tsx
@@ -5,14 +5,14 @@ import api from '@/lib/api-client'
 import {Button} from '@/components/ui/button'
 import {NavItemWithChildren, SidebarNav} from '../app/sidebar-nav'
 import {ScrollArea} from '@/components/ui/scroll-area'
-import DashboardEmptyState from './dashboard-empty-state'
+import {DashboardEmptyState} from './dashboard-empty-state'
 import {PlusIcon} from '@radix-ui/react-icons'
-import Link from '@/components/link'
+import {Link} from '@/components/link'
 import {BuildRow} from '../builds/build-row'
 
 export interface DashboardPageProps {}
 
-export default function DashboardPage(props: DashboardPageProps) {
+export function DashboardPage(props: DashboardPageProps) {
   const [navItems, setNavItems] = useState<NavItemWithChildren[]>([])
 
   const call = api.dashboard
diff --git a/src/partials/dashboard/h2.tsx b/src/partials/dashboard/h2.tsx
index 7107c3c..68e3c8f 100644
--- a/src/partials/dashboard/h2.tsx
+++ b/src/partials/dashboard/h2.tsx
@@ -4,7 +4,7 @@ export interface H2Props {
   title: string
 }
 
-export default function H2(props: H2Props) {
+export function H2(props: H2Props) {
   return (
     <h2 className='font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0'>
       {/* id={props.title} */}
diff --git a/src/partials/dashboard/h3.tsx b/src/partials/dashboard/h3.tsx
index 78036a2..cf07c38 100644
--- a/src/partials/dashboard/h3.tsx
+++ b/src/partials/dashboard/h3.tsx
@@ -4,7 +4,7 @@ export interface H3Props {
   title: string
 }
 
-export default function H3(props: H3Props) {
+export function H3(props: H3Props) {
   return (
     <h3 className='font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight'>
       {/* id={props.title} */}
diff --git a/src/partials/dashboard/main-page.tsx b/src/partials/dashboard/main-page.tsx
index 753da41..652a02a 100644
--- a/src/partials/dashboard/main-page.tsx
+++ b/src/partials/dashboard/main-page.tsx
@@ -1,4 +1,4 @@
-import Link from '@/components/link'
+import {Link} from '@/components/link'
 
 import {ChevronRightIcon, ExternalLinkIcon} from '@radix-ui/react-icons'
 import {cn} from '@/lib/utils'
@@ -48,7 +48,7 @@ const environments = {
   Production: 'text-indigo-400 bg-indigo-400/10 ring-indigo-400/30'
 }
 
-export default function MainPage() {
+export function MainPage() {
   return (
     <main className='relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]'>
       <div className='mx-auto w-full min-w-0'>
@@ -87,11 +87,11 @@ export default function MainPage() {
                     </a>
                   </h2>
                 </div>
-                <div className='mt-3 flex items-center gap-x-2.5 text-xs leading-5 text-gray-400'>
+                <div className='text-gray-400 mt-3 flex items-center gap-x-2.5 text-xs leading-5'>
                   <p className='truncate'>{deployment.description}</p>
                   <svg
                     viewBox='0 0 2 2'
-                    className='h-0.5 w-0.5 flex-none fill-gray-300'
+                    className='fill-gray-300 h-0.5 w-0.5 flex-none'
                   >
                     <circle
                       cx={1}
@@ -111,7 +111,7 @@ export default function MainPage() {
                 {deployment.environment}
               </div>
               <ChevronRightIcon
-                className='h-5 w-5 flex-none text-gray-400'
+                className='text-gray-400 h-5 w-5 flex-none'
                 aria-hidden='true'
               />
             </li>
diff --git a/src/partials/dashboard/paragraph.tsx b/src/partials/dashboard/paragraph.tsx
index 9dbb788..75942bb 100644
--- a/src/partials/dashboard/paragraph.tsx
+++ b/src/partials/dashboard/paragraph.tsx
@@ -2,6 +2,6 @@ import {PropsWithChildren} from 'react'
 
 export interface ParagraphProps {}
 
-export default function Paragraph(props: PropsWithChildren<ParagraphProps>) {
+export function Paragraph(props: PropsWithChildren<ParagraphProps>) {
   return <p className={`leading-7 [&:not(:first-child)]:mt-6`}>{props.children}</p>
 }
diff --git a/src/partials/dashboard/pre-bash-cmd-copy.tsx b/src/partials/dashboard/pre-bash-cmd-copy.tsx
index 55626e2..6341618 100644
--- a/src/partials/dashboard/pre-bash-cmd-copy.tsx
+++ b/src/partials/dashboard/pre-bash-cmd-copy.tsx
@@ -1,4 +1,4 @@
-import {useState, useEffect, useCallback} from 'react'
+import {useState, useEffect} from 'react'
 import {CheckIcon, ClipboardIcon} from 'lucide-react'
 import {cn} from '@/lib/utils'
 import {Button, ButtonProps} from '@/components/ui/button'
diff --git a/src/partials/dashboard/pre-bash-cmd.tsx b/src/partials/dashboard/pre-bash-cmd.tsx
index c4778a6..58b26ef 100644
--- a/src/partials/dashboard/pre-bash-cmd.tsx
+++ b/src/partials/dashboard/pre-bash-cmd.tsx
@@ -5,7 +5,7 @@ export interface PreBashCmdProps {
   args: string[]
 }
 
-export default function PreBashCmd(props: PreBashCmdProps) {
+export function PreBashCmd(props: PreBashCmdProps) {
   return (
     <div className='relative'>
       <pre
diff --git a/src/partials/header/app-header.tsx b/src/partials/header/app-header.tsx
index 8c5bf26..bde73d5 100644
--- a/src/partials/header/app-header.tsx
+++ b/src/partials/header/app-header.tsx
@@ -1,4 +1,4 @@
-import Link from '@/components/link'
+import {Link} from '@/components/link'
 import {cn} from '@/lib/utils'
 import {Icons} from './icons'
 import {buttonVariants} from '@/components/ui/button'
diff --git a/src/partials/header/viewer-header.tsx b/src/partials/header/viewer-header.tsx
index bbff306..8951f02 100644
--- a/src/partials/header/viewer-header.tsx
+++ b/src/partials/header/viewer-header.tsx
@@ -1,11 +1,11 @@
 import {Input} from '@/components/ui/input'
 import {Label} from '@/components/ui/label'
-import Link from '@/components/link'
+import {Link} from '@/components/link'
 import {Button} from '@/components/ui/button'
 
-export default function ViewerHeader() {
+export function ViewerHeader() {
   return (
-    <header className='flex h-16 items-center justify-between border-b bg-white px-4 shadow-sm dark:border-gray-800 dark:bg-gray-950 md:px-6'>
+    <header className='dark:border-gray-800 dark:bg-gray-950 flex h-16 items-center justify-between border-b bg-white px-4 shadow-sm md:px-6'>
       <div className='flex items-center gap-4'>
         <Link
           className='text-lg font-semibold'
diff --git a/src/partials/projects/new-project-page.stories.tsx b/src/partials/projects/new-project-page.stories.tsx
index 73d3433..8f2fc7f 100644
--- a/src/partials/projects/new-project-page.stories.tsx
+++ b/src/partials/projects/new-project-page.stories.tsx
@@ -1,8 +1,8 @@
 import type {Meta, StoryObj} from '@storybook/react'
 import {withRouter, reactRouterParameters} from 'storybook-addon-remix-react-router'
 
-import NewProjectPage from './new-project-page'
-import AppLayout from '../app/app-layout'
+import {NewProjectPage} from './new-project-page'
+import {AppLayout} from '../app/app-layout'
 const meta = {
   title: 'Projects/New',
   component: NewProjectPage,
diff --git a/src/partials/projects/new-project-page.tsx b/src/partials/projects/new-project-page.tsx
index 78b71f5..7c3925b 100644
--- a/src/partials/projects/new-project-page.tsx
+++ b/src/partials/projects/new-project-page.tsx
@@ -6,7 +6,7 @@ import {useNavigate} from 'react-router-dom'
 import {useState, type ClipboardEvent, type ChangeEvent} from 'react'
 import api from '@/lib/api-client'
 
-export default function NewProjectPage() {
+export function NewProjectPage() {
   const navigate = useNavigate()
   const [url, setUrl] = useState('')
   const [name, setName] = useState('')
diff --git a/src/partials/projects/projects-page.tsx b/src/partials/projects/projects-page.tsx
index b63ac07..9dff00b 100644
--- a/src/partials/projects/projects-page.tsx
+++ b/src/partials/projects/projects-page.tsx
@@ -7,13 +7,13 @@ import {NavItemWithChildren, SidebarNav} from '../app/sidebar-nav'
 import {ScrollArea} from '@/components/ui/scroll-area'
 import {Button} from '@/components/ui/button'
 import {PlusIcon} from '@radix-ui/react-icons'
-import Link from '@/components/link'
+import {Link} from '@/components/link'
 import api from '@/lib/api-client'
 import {Pencil} from 'lucide-react'
 
 export interface ProjectsPageProps {}
 
-export default function ProjectsPage(props: ProjectsPageProps) {
+export function ProjectsPage(props: ProjectsPageProps) {
   const {pid} = useParams()
   const [navItems, setNavItems] = useState<NavItemWithChildren[]>([])
 
diff --git a/src/partials/settings/copy-api-key.tsx b/src/partials/settings/copy-api-key.tsx
index 6d89ed7..861086d 100644
--- a/src/partials/settings/copy-api-key.tsx
+++ b/src/partials/settings/copy-api-key.tsx
@@ -4,7 +4,7 @@ export interface CopyApiKeyProps {
   apiKey: string
 }
 
-export default function CopyApiKey(props: CopyApiKeyProps) {
+export function CopyApiKey(props: CopyApiKeyProps) {
   return (
     <div className='relative'>
       <pre className='mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border py-4'>
diff --git a/src/partials/settings/delete-user-form.tsx b/src/partials/settings/delete-user-form.tsx
index 96d0c54..4a41555 100644
--- a/src/partials/settings/delete-user-form.tsx
+++ b/src/partials/settings/delete-user-form.tsx
@@ -20,7 +20,7 @@ export interface DeleteUserFormProps {
   showInitialError?: boolean
 }
 
-export default function DeleteUserForm({showInitialError = false}: DeleteUserFormProps) {
+export function DeleteUserForm({showInitialError = false}: DeleteUserFormProps) {
   const navigate = useNavigate()
 
   const [showError, setShowError] = useState(showInitialError)
diff --git a/src/partials/settings/profile-card.tsx b/src/partials/settings/profile-card.tsx
index 56e3d50..d1f22c7 100644
--- a/src/partials/settings/profile-card.tsx
+++ b/src/partials/settings/profile-card.tsx
@@ -2,7 +2,7 @@ import {Avatar, AvatarFallback, AvatarImage} from '@/components/ui/avatar'
 import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card'
 import {formatUserProfileCookie} from '@/lib/format-user-profile-cookie'
 
-export default function ProfileCard() {
+export function ProfileCard() {
   const {fullName, githubLogin, githubAvatarUrl, initials, pid} = formatUserProfileCookie(document && document.cookie)
 
   return (
diff --git a/src/partials/settings/settings-page.stories.tsx b/src/partials/settings/settings-page.stories.tsx
index 145dba8..37672dc 100644
--- a/src/partials/settings/settings-page.stories.tsx
+++ b/src/partials/settings/settings-page.stories.tsx
@@ -1,8 +1,8 @@
 import type {Meta, StoryObj} from '@storybook/react'
 import {withRouter, reactRouterParameters} from 'storybook-addon-remix-react-router'
 
-import SettingsPage from './settings-page'
-import AppLayout from '../app/app-layout'
+import {SettingsPage} from './settings-page'
+import {AppLayout} from '../app/app-layout'
 import {ShowApiKeyDialog} from './show-api-key-dialog'
 import {useState} from 'react'
 const meta = {
diff --git a/src/partials/settings/settings-page.tsx b/src/partials/settings/settings-page.tsx
index b12f837..88b0fcb 100644
--- a/src/partials/settings/settings-page.tsx
+++ b/src/partials/settings/settings-page.tsx
@@ -1,9 +1,9 @@
 import {Separator} from '@/components/ui/separator'
 import {SettingsSidebarNav} from './settings-sidebar-nav'
-import ProfileCard from './profile-card'
+import {ProfileCard} from './profile-card'
 import {Button, buttonVariants} from '@/components/ui/button'
 import {ApiKeysCard} from './api-keys-card'
-import DeleteUserForm from './delete-user-form'
+import {DeleteUserForm} from './delete-user-form'
 import useSWR from 'swr'
 import type {InferRequestType} from 'hono/client'
 import api from '@/lib/api-client'
@@ -19,7 +19,7 @@ const sidebarNavItems = [
 
 export interface SettingsPageProps extends DeleteUserFormProps {}
 
-export default function SettingsPage(props: SettingsPageProps) {
+export function SettingsPage(props: SettingsPageProps) {
   const call = api.users.settings
   const $get = call.$get
   const key = call.$url().pathname
diff --git a/src/partials/settings/settings-sidebar-nav.tsx b/src/partials/settings/settings-sidebar-nav.tsx
index 5395b04..49f86fc 100644
--- a/src/partials/settings/settings-sidebar-nav.tsx
+++ b/src/partials/settings/settings-sidebar-nav.tsx
@@ -1,4 +1,4 @@
-import Link from '@/components/link'
+import {Link} from '@/components/link'
 
 import {cn} from '@/lib/utils'
 import {buttonVariants} from '@/components/ui/button'
diff --git a/src/partials/settings/show-api-key-dialog.tsx b/src/partials/settings/show-api-key-dialog.tsx
index 7bce92e..102bac2 100644
--- a/src/partials/settings/show-api-key-dialog.tsx
+++ b/src/partials/settings/show-api-key-dialog.tsx
@@ -11,7 +11,7 @@ import {
 } from '@/components/ui/dialog'
 import {Button} from '@/components/ui/button'
 
-import CopyApiKey from './copy-api-key'
+import {CopyApiKey} from './copy-api-key'
 
 export interface ShowApiKeyDialogProps {
   open: boolean
diff --git a/src/partials/viewer/app-loader.tsx b/src/partials/viewer/app-loader.tsx
index 4e6130c..050fedd 100644
--- a/src/partials/viewer/app-loader.tsx
+++ b/src/partials/viewer/app-loader.tsx
@@ -8,12 +8,9 @@ interface AppLoaderProps {
   onError: (e: Error) => void
 }
 
-export default function AppLoader({fileOverride, pid, onFileLoad, onError}: AppLoaderProps) {
+export function AppLoader({fileOverride, pid, onFileLoad, onError}: AppLoaderProps) {
   useEffect(() => {
     const loadFile = async () => {
-      //
-      // const filePath = fileOverride || `/api/builds/${pid}`
-
       try {
         if (fileOverride) {
           const response = await fetch(fileOverride)
@@ -21,7 +18,7 @@ export default function AppLoader({fileOverride, pid, onFileLoad, onError}: AppL
           const binary = new Uint8Array(arrayBuffer)
           onFileLoad(binary)
         } else if (pid) {
-          const resp = await api.builds[':pid'].$get({param: {pid: pid}})
+          const resp = await api.builds[':pid'].object.$get({param: {pid: pid}})
           if (resp.ok) {
             const file = await resp.arrayBuffer()
             const binary = new Uint8Array(file)
@@ -54,7 +51,7 @@ export default function AppLoader({fileOverride, pid, onFileLoad, onError}: AppL
         >
           <div className='mx-auto flex h-12 w-12 items-center justify-center rounded-full'>
             <svg
-              className='h-15 w-15 animate-spin text-black'
+              className='h-15 w-15 text-black animate-spin'
               xmlns='http://www.w3.org/2000/svg'
               fill='none'
               viewBox='0 0 24 24'
diff --git a/src/partials/viewer/app-viewer-page.stories.tsx b/src/partials/viewer/app-viewer-page.stories.tsx
index b59fe88..5b2bc99 100644
--- a/src/partials/viewer/app-viewer-page.stories.tsx
+++ b/src/partials/viewer/app-viewer-page.stories.tsx
@@ -1,8 +1,8 @@
 import type {Meta, StoryObj} from '@storybook/react'
 import {withRouter, reactRouterParameters} from 'storybook-addon-remix-react-router'
 
-import AppViewerPage from './app-viewer-page'
-import AppLayout from '../app/app-layout'
+import {AppViewerPage} from './app-viewer-page'
+import {AppLayout} from '../app/app-layout'
 const meta = {
   title: 'ContainerBrowser/Viewer',
   component: AppViewerPage,
diff --git a/src/partials/viewer/app-viewer-page.tsx b/src/partials/viewer/app-viewer-page.tsx
index 669e8cc..96f59cd 100644
--- a/src/partials/viewer/app-viewer-page.tsx
+++ b/src/partials/viewer/app-viewer-page.tsx
@@ -1,7 +1,7 @@
 import {WarpDiveImageProvider} from './warp-dive-image-provider'
-import AppLoader from './app-loader'
+import {AppLoader} from './app-loader'
 import {ReactNode, useState} from 'react'
-import LayerBrowser from './layer-browser'
+import {LayerBrowser} from './layer-browser'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -17,7 +17,7 @@ interface AppViewerPageProps {
   fileOverride?: string
 }
 
-export default function AppViewerPage({fileOverride}: AppViewerPageProps) {
+export function AppViewerPage({fileOverride}: AppViewerPageProps) {
   const {pid} = useParams()
 
   const onError = (error: Error) => {
@@ -55,6 +55,8 @@ export default function AppViewerPage({fileOverride}: AppViewerPageProps) {
       <LayerBrowser
         binary={data}
         onError={onError}
+        appViewer={true}
+        pid={pid}
       />
     )
   }
diff --git a/src/partials/viewer/file-system-viewer.tsx b/src/partials/viewer/file-system-viewer.tsx
index 932b6d1..da8c9b3 100644
--- a/src/partials/viewer/file-system-viewer.tsx
+++ b/src/partials/viewer/file-system-viewer.tsx
@@ -30,7 +30,7 @@ const getMemoizedItemContext = memoizeOne((onOpen, onSelect, flattenedData) => (
   flattenedData
 }))
 
-const FileSystemViewer = () => {
+export const FileSystemViewer = () => {
   const {wpImage, setWpImage} = useWarpImage()
   const [layerState, setLayerState] = useLayer()
 
@@ -218,5 +218,3 @@ const FileSystemViewer = () => {
     </AutoSizer>
   )
 }
-
-export default FileSystemViewer
diff --git a/src/partials/viewer/layer-browser.tsx b/src/partials/viewer/layer-browser.tsx
index 7936422..745bdf5 100644
--- a/src/partials/viewer/layer-browser.tsx
+++ b/src/partials/viewer/layer-browser.tsx
@@ -4,24 +4,27 @@ import {useWarpImage} from './warp-dive-image-provider'
 
 import {ResizableHandle, ResizablePanel, ResizablePanelGroup} from '@/components/ui/resizable'
 import {useState, useEffect, type FC, useCallback} from 'react'
-import LayerRow from './layer-row'
-import LayersList from './layers-list'
+import {LayerRow} from './layer-row'
+import {LayersList} from './layers-list'
 import {ScrollArea} from '@/components/ui/scroll-area'
 import {Timestamp} from '@/generated/google/protobuf/timestamp_pb'
-import FileSystemViewer from './file-system-viewer'
+import {FileSystemViewer} from './file-system-viewer'
 import {useLayer} from './use-layer'
 import {FileSystemViewerToolbar} from './file-system-viewer-toolbar'
 import {MobileLayersList} from './mobile-layers-list'
 import {layerUiStateAtom, type TreeNodeMap} from './use-layer-ui-state'
 import {useAtom} from 'jotai'
+import {LayerListToolbar} from './layer-list-toolbar'
 
 export interface LayerBrowserProps {
   binary: Uint8Array
   onError: (e: Error) => void
   fullPage?: boolean
+  appViewer?: boolean
+  pid?: string
 }
 
-const LayerBrowser: FC<LayerBrowserProps> = ({binary, onError, fullPage = false}) => {
+export const LayerBrowser: FC<LayerBrowserProps> = ({binary, onError, fullPage = false, appViewer = false, pid}) => {
   const {wpImage, setWpImage} = useWarpImage()
   const [isLoading, setLoading] = useState(false)
   const [layerState, setLayerState] = useLayer()
@@ -151,8 +154,14 @@ const LayerBrowser: FC<LayerBrowserProps> = ({binary, onError, fullPage = false}
             minSize={20}
             defaultSize={40}
           >
-            <div className=' bg-white dark:border-gray-800 dark:bg-gray-950'>
-              {/* <LayerListToolbar /> */}
+            <div className=' dark:border-gray-800 dark:bg-gray-950 bg-white'>
+              {appViewer && (
+                <LayerListToolbar
+                  appViewer={appViewer}
+                  pid={pid}
+                />
+              )}
+
               <ScrollArea className={`${fullPage ? 'h-[calc(100vh)]' : 'h-[calc(100vh_-_theme(spacing.16))]'}`}>
                 <LayersList>
                   {layers.map(
@@ -178,5 +187,3 @@ const LayerBrowser: FC<LayerBrowserProps> = ({binary, onError, fullPage = false}
     </>
   )
 }
-
-export default LayerBrowser
diff --git a/src/partials/viewer/layer-list-toolbar.tsx b/src/partials/viewer/layer-list-toolbar.tsx
index 22a2d6e..867bb88 100644
--- a/src/partials/viewer/layer-list-toolbar.tsx
+++ b/src/partials/viewer/layer-list-toolbar.tsx
@@ -1,15 +1,16 @@
-import {cn} from '@/lib/utils'
-import {Button, buttonVariants} from '@/components/ui/button'
+import {ShareDropdown} from './share-dropdown'
 
-import {ToggleGroup, ToggleGroupItem} from '@/components/ui/toggle-group'
-import {Diff, Layers} from 'lucide-react'
+export interface LayerListToolbarProps {
+  appViewer?: boolean
+  pid?: string
+}
 
-export function LayerListToolbar() {
+export function LayerListToolbar({appViewer = false, pid}: LayerListToolbarProps) {
   return (
     <div className='w-full border-b border-border/40 bg-background/95'>
       <div className='flex h-10 items-center px-4'>
         <div className=' flex'>
-          <ToggleGroup
+          {/* <ToggleGroup
             size={'sm'}
             type='single'
           >
@@ -21,16 +22,18 @@ export function LayerListToolbar() {
               <Diff className='mr-1 h-4 w-4' />
               <span>Show Layer Change</span>
             </ToggleGroupItem>
-          </ToggleGroup>
+          </ToggleGroup> */}
         </div>
         <div className='flex flex-1 items-center justify-end space-x-2'>
-          <Button
+          {pid && <ShareDropdown pid={pid} />}
+
+          {/* <Button
             variant={'outline'}
             size={'sm'}
           >
             <Layers className='mr-1 h-4 w-4' />
             <span>Show Aggregated Changes</span>
-          </Button>
+          </Button> */}
         </div>
       </div>
     </div>
diff --git a/src/partials/viewer/layer-row.tsx b/src/partials/viewer/layer-row.tsx
index ccfdcf9..4097a48 100644
--- a/src/partials/viewer/layer-row.tsx
+++ b/src/partials/viewer/layer-row.tsx
@@ -12,7 +12,7 @@ export interface LayerRowProps {
   treeNode: WarpDiveImage_TreeNode
 }
 
-export default function LayerRow(props: LayerRowProps) {
+export function LayerRow(props: LayerRowProps) {
   const {wpImage, setWpImage} = useWarpImage()
   const [layerState, setLayerState] = useLayer()
   const [isDrawerOpen, setDrawerOpen] = useDrawerOpen()
diff --git a/src/partials/viewer/layers-list.tsx b/src/partials/viewer/layers-list.tsx
index c4887bf..50cee7c 100644
--- a/src/partials/viewer/layers-list.tsx
+++ b/src/partials/viewer/layers-list.tsx
@@ -1,6 +1,6 @@
 import {Children, type PropsWithChildren} from 'react'
 export interface LayersListProps {}
 
-export default function LayersList(props: PropsWithChildren<LayersListProps>) {
+export function LayersList(props: PropsWithChildren<LayersListProps>) {
   return <div className='grid gap-2 p-2 md:p-3'>{props.children}</div>
 }
diff --git a/src/partials/viewer/local-loader.tsx b/src/partials/viewer/local-loader.tsx
index 34849e3..911dde4 100644
--- a/src/partials/viewer/local-loader.tsx
+++ b/src/partials/viewer/local-loader.tsx
@@ -6,7 +6,7 @@ interface LocalLoaderProps {
   onError: (e: Error) => void
 }
 
-export default function LocalLoader({onFileLoad, onError}: LocalLoaderProps) {
+export function LocalLoader({onFileLoad, onError}: LocalLoaderProps) {
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0]
     if (file) {
@@ -39,14 +39,14 @@ export default function LocalLoader({onFileLoad, onError}: LocalLoaderProps) {
 
   return (
     <div
-      className='flex h-[calc(100vh_-_theme(spacing.16))] w-full items-center justify-center bg-gray-100 dark:bg-gray-950'
+      className='bg-gray-100 dark:bg-gray-950 flex h-[calc(100vh_-_theme(spacing.16))] w-full items-center justify-center'
       onDrop={handleDrop}
       onDragOver={(event) => event.preventDefault()}
     >
-      <div className='mx-4 flex w-full max-w-md flex-col items-center space-y-4 rounded-sm border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900'>
-        <div className='flex h-64 w-full flex-col items-center justify-center rounded-sm border-2 border-dashed border-gray-300 p-4 dark:border-gray-700'>
-          <UploadIcon className='h-12 w-12 text-gray-400 dark:text-gray-500' />
-          <p className='mt-4 px-4 text-center text-gray-500 dark:text-gray-400'>
+      <div className='border-gray-200 dark:border-gray-800 dark:bg-gray-900 mx-4 flex w-full max-w-md flex-col items-center space-y-4 rounded-sm border bg-white p-6 shadow-sm'>
+        <div className='border-gray-300 dark:border-gray-700 flex h-64 w-full flex-col items-center justify-center rounded-sm border-2 border-dashed p-4'>
+          <UploadIcon className='text-gray-400 dark:text-gray-500 h-12 w-12' />
+          <p className='text-gray-500 dark:text-gray-400 mt-4 px-4 text-center'>
             Drag and drop a `.warpdive` file here, or select a file below
           </p>
         </div>
diff --git a/src/partials/viewer/local-viewer-page.tsx b/src/partials/viewer/local-viewer-page.tsx
index 1974a74..f3cf046 100644
--- a/src/partials/viewer/local-viewer-page.tsx
+++ b/src/partials/viewer/local-viewer-page.tsx
@@ -1,7 +1,7 @@
 import {WarpDiveImageProvider} from './warp-dive-image-provider'
-import LocalLoader from './local-loader'
+import {LocalLoader} from './local-loader'
 import {ReactNode, useState} from 'react'
-import LayerBrowser from './layer-browser'
+import {LayerBrowser} from './layer-browser'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -16,7 +16,7 @@ export interface LocalViewerPageProps {
   fullPage: boolean
 }
 
-export default function LocalViewerPage(props: LocalViewerPageProps) {
+export function LocalViewerPage(props: LocalViewerPageProps) {
   const onError = (error: Error) => {
     setViewer(
       <>
diff --git a/src/partials/viewer/share-dropdown.tsx b/src/partials/viewer/share-dropdown.tsx
new file mode 100644
index 0000000..dca7100
--- /dev/null
+++ b/src/partials/viewer/share-dropdown.tsx
@@ -0,0 +1,201 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import type {InferRequestType} from 'hono/client'
+import {Switch} from '@/components/ui/switch'
+import {Label} from '@/components/ui/label'
+import {Input} from '@/components/ui/input'
+import {useEffect, useState} from 'react'
+import {Button, type ButtonProps} from '@/components/ui/button'
+import {cn} from '@/lib/utils'
+
+import {ToggleGroup, ToggleGroupItem} from '@/components/ui/toggle-group'
+import {Clipboard, Diff, Globe, Layers, Lock, Share, CheckIcon, ClipboardIcon} from 'lucide-react'
+import api from '@/lib/api-client'
+import useSWR, {mutate} from 'swr'
+const {PUBLIC_WEB_HOSTNAME} = import.meta.env
+
+interface CopyButtonProps extends ButtonProps {
+  value: string
+  src?: string
+}
+
+export async function copyToClipboardWithMeta(value: string) {
+  navigator.clipboard.writeText(value)
+}
+
+export function CopyButton({value, className, src, variant = 'ghost', ...props}: CopyButtonProps) {
+  const [hasCopied, setHasCopied] = useState(false)
+  useEffect(() => {
+    setTimeout(() => {
+      setHasCopied(false)
+    }, 2000)
+  }, [hasCopied])
+
+  return (
+    <Button
+      className={cn('w-full text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50', className)}
+      onClick={() => {
+        copyToClipboardWithMeta(value)
+        setHasCopied(true)
+      }}
+      {...props}
+    >
+      {hasCopied ? <CheckIcon className='h-3 w-3' /> : <ClipboardIcon className='h-3 w-3' />}
+      <span className='ml-2'>Copy link</span>
+    </Button>
+  )
+}
+
+interface ShareDropdownLinkFormProps {
+  pid: string
+}
+
+export function ShareDropdownLinkForm({pid}: ShareDropdownLinkFormProps) {
+  const call = api.builds[':pid']
+  const $get = call.$get
+  const key = call.$url().pathname
+  const fetcher = (arg: InferRequestType<typeof $get>) => async () => {
+    const res = await $get(arg)
+    if (res.ok) {
+      const json = await res.json()
+      return json
+    } else {
+      const json = await res.json()
+      if ('message' in json && json.message) {
+        throw new Error(json.message)
+      } else {
+        throw new Error('An unknown error occurred while fetching the data.')
+      }
+    }
+  }
+  const {data, error, isLoading} = useSWR(
+    key,
+    fetcher({
+      param: {
+        pid
+      }
+    })
+  )
+
+  console.log('dropdown contents data: ', data)
+
+  if (error) {
+    return <div>failed to load</div>
+  }
+  if (isLoading) {
+    return <div>loading...</div>
+  }
+
+  const shareLink = `${PUBLIC_WEB_HOSTNAME}/share/${pid}/`
+  const shared = data?.build.public || false
+  return (
+    <DropdownMenuGroup>
+      {/* <p>test content</p> */}
+      <div className='mx-2 mb-1 mt-2 flex flex-col gap-y-4'>
+        <div className='flex items-center space-x-2'>
+          <Switch
+            id='shared-link'
+            checked={shared}
+            onCheckedChange={(val) => {
+              // setShared(val)
+              if (shared) {
+                api.builds[':pid']['set-private']
+                  .$get({
+                    param: {
+                      pid
+                    }
+                  })
+                  .then(() => {
+                    mutate(api.builds[':pid'].$url().pathname)
+                  })
+                  .catch((e) => {
+                    console.log('e', e)
+                  })
+              } else {
+                api.builds[':pid']['set-public']
+                  .$get({
+                    param: {
+                      pid
+                    }
+                  })
+                  .then(() => {
+                    mutate(api.builds[':pid'].$url().pathname)
+                  })
+                  .catch((e) => {
+                    console.log('e', e)
+                  })
+              }
+            }}
+          />
+          <Label htmlFor='shared-link'>Create shared link</Label>
+        </div>
+        {shared && (
+          <>
+            <div>
+              <Input
+                className='text-xs'
+                value={shareLink}
+                readOnly={true}
+              />
+            </div>
+
+            <div>
+              <CopyButton value={shareLink} />
+            </div>
+          </>
+        )}
+        <div className='flex items-center'>
+          {shared ? (
+            <>
+              <Globe className='mr-2 h-3 w-3 text-muted-foreground' />
+              <span className='text-xs text-muted-foreground'>This warpdive is shared publicly</span>
+            </>
+          ) : (
+            <>
+              <Lock className='mr-2 h-3 w-3 text-muted-foreground' />
+              <span className='text-xs text-muted-foreground'>This warpdive is private</span>
+            </>
+          )}
+        </div>
+      </div>
+    </DropdownMenuGroup>
+  )
+}
+
+export interface ShareDropdownProps {
+  pid: string
+}
+
+export function ShareDropdown(props: ShareDropdownProps) {
+  const [shared, setShared] = useState(false)
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant='outline'
+          size={'sm'}
+        >
+          <Share className='mr-1 h-3 w-3' />
+          <span>Share</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className='w-56'>
+        <DropdownMenuLabel>Share Link</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <ShareDropdownLinkForm pid={props.pid} />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/src/partials/viewer/shared-link-loader.tsx b/src/partials/viewer/shared-link-loader.tsx
new file mode 100644
index 0000000..473a828
--- /dev/null
+++ b/src/partials/viewer/shared-link-loader.tsx
@@ -0,0 +1,80 @@
+import api from '@/lib/api-client'
+import {useEffect} from 'react'
+
+interface SharedLinkLoaderProps {
+  fileOverride: string | undefined
+  pid: string | undefined
+  onFileLoad: (data: Uint8Array) => void
+  onError: (e: Error) => void
+}
+
+export function SharedLinkLoader({fileOverride, pid, onFileLoad, onError}: SharedLinkLoaderProps) {
+  useEffect(() => {
+    const loadFile = async () => {
+      try {
+        if (fileOverride) {
+          const response = await fetch(fileOverride)
+          const arrayBuffer = await response.arrayBuffer()
+          const binary = new Uint8Array(arrayBuffer)
+          onFileLoad(binary)
+        } else if (pid) {
+          const resp = await api.shares[':pid'].$get({param: {pid: pid}})
+          if (resp.ok) {
+            const file = await resp.arrayBuffer()
+            const binary = new Uint8Array(file)
+            onFileLoad(binary)
+          } else {
+            const json = await resp.json()
+          }
+        }
+      } catch (err) {
+        onError(err)
+      }
+    }
+    loadFile()
+  }, [fileOverride, onError, onFileLoad, pid])
+
+  return (
+    <div className='fixed inset-0 z-10 overflow-y-auto'>
+      <div className='align-items-center flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0'>
+        <span
+          className='hidden sm:inline-block sm:h-screen sm:align-middle'
+          aria-hidden='true'
+        >
+          &#8203;
+        </span>
+        <div
+          className='inline-block flex-1 transform overflow-hidden rounded-sm px-4 pb-4 pt-5 text-left align-bottom transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle'
+          role='dialog'
+          aria-modal='true'
+          aria-labelledby='modal-headline'
+        >
+          <div className='mx-auto flex h-12 w-12 items-center justify-center rounded-full'>
+            <svg
+              className='h-15 w-15 text-black animate-spin'
+              xmlns='http://www.w3.org/2000/svg'
+              fill='none'
+              viewBox='0 0 24 24'
+              width='24'
+              height='24'
+            >
+              <circle
+                className='opacity-25'
+                cx='12'
+                cy='12'
+                r='10'
+                stroke='currentColor'
+                strokeWidth='4'
+              ></circle>
+              <path
+                className='opacity-75'
+                fill='currentColor'
+                d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
+              ></path>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/partials/viewer/shared-link-viewer-page.tsx b/src/partials/viewer/shared-link-viewer-page.tsx
new file mode 100644
index 0000000..15f952a
--- /dev/null
+++ b/src/partials/viewer/shared-link-viewer-page.tsx
@@ -0,0 +1,76 @@
+import {WarpDiveImageProvider} from './warp-dive-image-provider'
+import {SharedLinkLoader} from './shared-link-loader'
+import {ReactNode, useState} from 'react'
+import {LayerBrowser} from './layer-browser'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from '@/components/ui/alert-dialog'
+
+interface SharedLinkViewerPageProps {
+  fileOverride?: string
+  pid: string
+}
+
+export function SharedLinkViewerPage({fileOverride, pid}: SharedLinkViewerPageProps) {
+  const onError = (error: Error) => {
+    setViewer(
+      <>
+        <AlertDialog open={true}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Loading file failed</AlertDialogTitle>
+              <AlertDialogDescription>{error.message}</AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogAction
+                onClick={() => {
+                  setViewer(initialView(fileOverride, pid))
+                }}
+              >
+                Try Again
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+        <SharedLinkLoader
+          fileOverride={''}
+          pid={''}
+          onFileLoad={() => {}}
+          onError={() => {}}
+        />
+      </>
+    )
+  }
+
+  const onFileLoad = (data: Uint8Array) => {
+    setViewer(
+      <LayerBrowser
+        binary={data}
+        onError={onError}
+        appViewer={false}
+        pid={pid}
+      />
+    )
+  }
+
+  const initialView = (fileOverride_: string | undefined, pid_: string | undefined) => {
+    return (
+      <SharedLinkLoader
+        fileOverride={fileOverride_}
+        pid={pid_}
+        onFileLoad={onFileLoad}
+        onError={onError}
+      />
+    )
+  }
+
+  const [viewer, setViewer] = useState<ReactNode>(initialView(fileOverride, pid))
+
+  return <WarpDiveImageProvider>{viewer}</WarpDiveImageProvider>
+}
diff --git a/src/server/builds.ts b/src/server/builds.ts
index e86a444..6d3becf 100644
--- a/src/server/builds.ts
+++ b/src/server/builds.ts
@@ -5,7 +5,7 @@ import {verify, decode} from 'hono/jwt'
 import {getSecretPlatform} from '@/secrets'
 import {randomString} from '@/lib/random-string'
 import {DrizzleD1Database, drizzle} from 'drizzle-orm/d1'
-import {eq, sql, and} from 'drizzle-orm'
+import {eq, sql, and, getTableColumns} from 'drizzle-orm'
 import {z} from 'zod'
 import {zValidator} from '@hono/zod-validator'
 import {getAuthenticatedUserDB} from './users'
@@ -100,7 +100,7 @@ async function getAuthenticatedAPIDB(apiKey: string, c: Context<HonoServer>): Pr
 }
 
 const builds = new Hono<HonoServer>()
-  .get('/:pid', zValidator('param', z.object({pid: z.string()})), async (c) => {
+  .get('/:pid/object', zValidator('param', z.object({pid: z.string()})), async (c) => {
     const {pid} = c.req.valid('param')
 
     const helper = await getAuthenticatedUserDB(c)
@@ -126,6 +126,69 @@ const builds = new Hono<HonoServer>()
     }
     return c.json({message: 'User not found or incorrect authentication'}, 404)
   })
+  .get('/:pid', zValidator('param', z.object({pid: z.string()})), async (c) => {
+    const {pid} = c.req.valid('param')
+
+    const helper = await getAuthenticatedUserDB(c)
+    if (helper.currentUser && helper.db) {
+      const db = helper.db
+
+      const {id, userId, projectId, ...buildCols} = getTableColumns(schema.builds)
+
+      const res = await db
+        .select(buildCols)
+        .from(schema.builds)
+        .where(and(eq(schema.builds.userId, helper.currentUser.id), eq(schema.builds.pid, pid)))
+
+      if (res.length === 1) {
+        const build = res[0]
+        return c.json({
+          build
+        })
+      } else {
+        return c.json({message: 'Found incorrect build results'}, 500)
+      }
+    }
+    return c.json({message: 'User not found or incorrect authentication'}, 404)
+  })
+  .get('/:pid/set-public', zValidator('param', z.object({pid: z.string()})), async (c) => {
+    const {pid} = c.req.valid('param')
+
+    const helper = await getAuthenticatedUserDB(c)
+    if (helper.currentUser && helper.db) {
+      const db = helper.db
+      const res = await db
+        .update(schema.builds)
+        .set({public: true})
+        .where(and(eq(schema.builds.userId, helper.currentUser.id), eq(schema.builds.pid, pid)))
+
+      if (res.success) {
+        return c.json({message: 'Successfully set build to public'}, 200)
+      } else {
+        return c.json({message: 'Unable to set build to public, something failed'}, 500)
+      }
+    }
+    return c.json({message: 'User not found or incorrect authentication'}, 404)
+  })
+  .get('/:pid/set-private', zValidator('param', z.object({pid: z.string()})), async (c) => {
+    const {pid} = c.req.valid('param')
+
+    const helper = await getAuthenticatedUserDB(c)
+    if (helper.currentUser && helper.db) {
+      const db = helper.db
+      const res = await db
+        .update(schema.builds)
+        .set({public: false})
+        .where(and(eq(schema.builds.userId, helper.currentUser.id), eq(schema.builds.pid, pid)))
+
+      if (res.success) {
+        return c.json({message: 'Successfully set build to private'}, 200)
+      } else {
+        return c.json({message: 'Unable to set build to private, something failed'}, 500)
+      }
+    }
+    return c.json({message: 'User not found or incorrect authentication'}, 404)
+  })
   .post('/new', async (c) => {
     const body = await c.req.parseBody()
     const apiKey = body['api-key']
diff --git a/src/server/index.ts b/src/server/index.ts
index 85fbb64..9485336 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -3,6 +3,7 @@ import users from './users'
 import projects from './projects'
 import dashboard from './dashboard'
 import builds from './builds'
+import shares from './shares'
 
 type HonoBindings = {
   DB: D1Database
@@ -19,6 +20,7 @@ const routes = app
   .route('/users', users)
   .route('/projects', projects)
   .route('/builds', builds)
+  .route('/shares', shares)
   .get('/', (c) => c.json({message: 'Server is healthy'}, 200))
 
 export default app
diff --git a/src/server/shares.ts b/src/server/shares.ts
new file mode 100644
index 0000000..6473116
--- /dev/null
+++ b/src/server/shares.ts
@@ -0,0 +1,41 @@
+import {Hono} from 'hono'
+import {HonoServer} from '.'
+import * as schema from '@/db/schema'
+import {drizzle} from 'drizzle-orm/d1'
+import {eq, and} from 'drizzle-orm'
+import {z} from 'zod'
+import {zValidator} from '@hono/zod-validator'
+
+const shares = new Hono<HonoServer>().get('/:pid', zValidator('param', z.object({pid: z.string()})), async (c) => {
+  const {pid} = c.req.valid('param')
+
+  if (c.env) {
+    const db = drizzle(c.env.DB, {schema, logger: true})
+    if (db) {
+      const res = await db
+        .select()
+        .from(schema.builds)
+        .where(and(eq(schema.builds.pid, pid), eq(schema.builds.public, true)))
+
+      if (res.length === 1) {
+        const build = res[0]
+        const uploadedObject = await c.env.STORAGE.get(build.objectPath)
+        if (uploadedObject) {
+          const file = await uploadedObject.arrayBuffer()
+          return c.body(file, 200)
+        } else {
+          return c.json({message: 'File not found'}, 404)
+        }
+      } else {
+        console.log('Invalid pid: ', pid)
+      }
+    } else {
+      console.log('Failed to initialize drizzle db instance')
+    }
+  }
+  console.log('Failed to find hono context env')
+  return c.json({message: 'Share not found'}, 404)
+})
+
+export default shares
+export type SharesType = typeof shares
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index f8e112e..e14b617 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 
 const plugin = require('tailwindcss/plugin')
+const colors = require('tailwindcss/colors')
 
 // eslint-disable-next-line no-console
 console.log(`project info - tailwind.config.js was run - dirname: ${__dirname} - cwd: ${process.cwd()}`)
@@ -27,46 +28,52 @@ module.exports = {
         '2xl': '1400px'
       }
     },
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      white: '#ffffff',
+      border: 'hsl(var(--border))',
+      input: 'hsl(var(--input))',
+      ring: 'hsl(var(--ring))',
+      background: 'hsl(var(--background))',
+      foreground: 'hsl(var(--foreground))',
+      zinc: colors.zinc,
+      slate: colors.slate,
+      primary: {
+        DEFAULT: 'hsl(var(--primary))',
+        foreground: 'hsl(var(--primary-foreground))'
+      },
+      secondary: {
+        DEFAULT: 'hsl(var(--secondary))',
+        foreground: 'hsl(var(--secondary-foreground))'
+      },
+      destructive: {
+        DEFAULT: 'hsl(var(--destructive))',
+        foreground: 'hsl(var(--destructive-foreground))'
+      },
+      muted: {
+        DEFAULT: 'hsl(var(--muted))',
+        foreground: 'hsl(var(--muted-foreground))'
+      },
+      accent: {
+        DEFAULT: 'hsl(var(--accent))',
+        foreground: 'hsl(var(--accent-foreground))'
+      },
+      popover: {
+        DEFAULT: 'hsl(var(--popover))',
+        foreground: 'hsl(var(--popover-foreground))'
+      },
+      card: {
+        DEFAULT: 'hsl(var(--card))',
+        foreground: 'hsl(var(--card-foreground))'
+      }
+    },
     extend: {
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out'
       },
-      colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))'
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))'
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))'
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))'
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))'
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))'
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))'
-        }
-      },
+
       borderRadius: {
         lg: `var(--radius)`,
         md: `calc(var(--radius) - 2px)`,