src/app/dashboard/page.tsx

@@ -1,6 +1,7 @@
 import { createClient } from '@/lib/supabase/server'
 import NewProjectButton from '@/components/NewProjectButton'
 import ProjectList from '@/components/ProjectList'
+import ProjectCard from '@/components/ProjectCard'
 
 export default async function DashboardPage() {
   const supabase = await createClient()
@@ -19,6 +20,21 @@ export default async function DashboardPage() {
     .eq('user_id', user.id)
     .order('updated_at', { ascending: false })
 
+  // Fetch shared projects (projects where this user is a collaborator)
+  const { data: collaborations } = await supabase
+    .from('project_collaborators')
+    .select('role, projects(id, name, updated_at)')
+    .eq('user_id', user.id)
+
+  const sharedProjects = (collaborations || [])
+    .filter((c) => c.projects)
+    .map((c) => ({
+      ...(c.projects as unknown as { id: string; name: string; updated_at: string }),
+      shared: true,
+      role: c.role,
+    }))
+    .sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
+
   if (error) {
     return (
       <div className="rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900/20">
@@ -44,6 +60,26 @@ export default async function DashboardPage() {
       </div>
 
       <ProjectList initialProjects={projects || []} />
+
+      {sharedProjects.length > 0 && (
+        <div className="mt-10">
+          <h2 className="mb-4 text-xl font-bold text-zinc-900 dark:text-zinc-50">
+            Shared with me
+          </h2>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {sharedProjects.map((project) => (
+              <ProjectCard
+                key={project.id}
+                id={project.id}
+                name={project.name}
+                updatedAt={project.updated_at}
+                shared
+                sharedRole={project.role}
+              />
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   )
 }

src/app/editor/[projectId]/FlowchartEditor.tsx

@@ -28,11 +28,13 @@ import ExportValidationModal, { type ValidationIssue } from '@/components/editor
 import { EditorProvider } from '@/components/editor/EditorContext'
 import Toast from '@/components/Toast'
 import { RealtimeConnection, type ConnectionState } from '@/lib/collaboration/realtime'
+import ShareModal from '@/components/editor/ShareModal'
 import type { FlowchartData, FlowchartNode, FlowchartEdge, Character, Variable, Condition } from '@/types/flowchart'
 
 type FlowchartEditorProps = {
   projectId: string
   userId: string
+  isOwner: boolean
   initialData: FlowchartData
   needsMigration?: boolean
 }
@@ -204,7 +206,7 @@ function computeMigration(initialData: FlowchartData, shouldMigrate: boolean) {
 }
 
 // Inner component that uses useReactFlow hook
-function FlowchartEditorInner({ projectId, userId, initialData, needsMigration }: FlowchartEditorProps) {
+function FlowchartEditorInner({ projectId, userId, isOwner, initialData, needsMigration }: FlowchartEditorProps) {
   // Define custom node types - memoized to prevent re-renders
   const nodeTypes: NodeTypes = useMemo(
     () => ({
@@ -230,6 +232,7 @@ function FlowchartEditorInner({ projectId, userId, initialData, needsMigration }
   const [characters, setCharacters] = useState<Character[]>(migratedData.characters)
   const [variables, setVariables] = useState<Variable[]>(migratedData.variables)
   const [showSettings, setShowSettings] = useState(false)
+  const [showShare, setShowShare] = useState(false)
   const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null)
   const [toastMessage, setToastMessage] = useState<string | null>(migratedData.toastMessage)
   const [validationIssues, setValidationIssues] = useState<ValidationIssue[] | null>(null)
@@ -529,6 +532,7 @@ function FlowchartEditorInner({ projectId, userId, initialData, needsMigration }
           onExport={handleExport}
           onImport={handleImport}
           onProjectSettings={() => setShowSettings(true)}
+          onShare={() => setShowShare(true)}
           connectionState={connectionState}
         />
         <div className="flex-1">
@@ -560,6 +564,13 @@ function FlowchartEditorInner({ projectId, userId, initialData, needsMigration }
             getVariableUsageCount={getVariableUsageCount}
           />
         )}
+        {showShare && (
+          <ShareModal
+            projectId={projectId}
+            isOwner={isOwner}
+            onClose={() => setShowShare(false)}
+          />
+        )}
         {selectedEdge && (
           <ConditionEditor
             edgeId={selectedEdge.id}

src/app/editor/[projectId]/actions.ts

@@ -0,0 +1,227 @@
+'use server'
+
+import { createClient } from '@/lib/supabase/server'
+
+export type Collaborator = {
+  id: string
+  user_id: string
+  role: 'owner' | 'editor' | 'viewer'
+  invited_at: string
+  accepted_at: string | null
+  display_name: string | null
+  email: string | null
+}
+
+export async function getCollaborators(
+  projectId: string
+): Promise<{ success: boolean; data?: Collaborator[]; error?: string }> {
+  const supabase = await createClient()
+  const {
+    data: { user },
+  } = await supabase.auth.getUser()
+
+  if (!user) {
+    return { success: false, error: 'Not authenticated' }
+  }
+
+  // Verify user owns the project
+  const { data: project } = await supabase
+    .from('projects')
+    .select('id, user_id')
+    .eq('id', projectId)
+    .single()
+
+  if (!project) {
+    return { success: false, error: 'Project not found' }
+  }
+
+  const isOwner = project.user_id === user.id
+
+  // Check if user is a collaborator
+  if (!isOwner) {
+    const { data: collab } = await supabase
+      .from('project_collaborators')
+      .select('id')
+      .eq('project_id', projectId)
+      .eq('user_id', user.id)
+      .single()
+
+    if (!collab) {
+      return { success: false, error: 'Access denied' }
+    }
+  }
+
+  // Fetch collaborators with profile info
+  const { data: collaborators, error } = await supabase
+    .from('project_collaborators')
+    .select('id, user_id, role, invited_at, accepted_at, profiles(display_name, email)')
+    .eq('project_id', projectId)
+
+  if (error) {
+    return { success: false, error: error.message }
+  }
+
+  const result: Collaborator[] = (collaborators || []).map((c) => {
+    const profile = c.profiles as unknown as { display_name: string | null; email: string | null } | null
+    return {
+      id: c.id,
+      user_id: c.user_id,
+      role: c.role as 'owner' | 'editor' | 'viewer',
+      invited_at: c.invited_at,
+      accepted_at: c.accepted_at,
+      display_name: profile?.display_name || null,
+      email: profile?.email || null,
+    }
+  })
+
+  return { success: true, data: result }
+}
+
+export async function inviteCollaborator(
+  projectId: string,
+  email: string,
+  role: 'editor' | 'viewer'
+): Promise<{ success: boolean; error?: string }> {
+  const supabase = await createClient()
+  const {
+    data: { user },
+  } = await supabase.auth.getUser()
+
+  if (!user) {
+    return { success: false, error: 'Not authenticated' }
+  }
+
+  // Verify user owns the project
+  const { data: project } = await supabase
+    .from('projects')
+    .select('id, user_id')
+    .eq('id', projectId)
+    .eq('user_id', user.id)
+    .single()
+
+  if (!project) {
+    return { success: false, error: 'Only the project owner can invite collaborators' }
+  }
+
+  // Find the user by email in profiles
+  const { data: targetProfile } = await supabase
+    .from('profiles')
+    .select('id, email')
+    .eq('email', email)
+    .single()
+
+  if (!targetProfile) {
+    return { success: false, error: 'No user found with that email address' }
+  }
+
+  // Cannot invite yourself
+  if (targetProfile.id === user.id) {
+    return { success: false, error: 'You cannot invite yourself' }
+  }
+
+  // Check if already a collaborator
+  const { data: existing } = await supabase
+    .from('project_collaborators')
+    .select('id')
+    .eq('project_id', projectId)
+    .eq('user_id', targetProfile.id)
+    .single()
+
+  if (existing) {
+    return { success: false, error: 'This user is already a collaborator' }
+  }
+
+  // Insert collaborator
+  const { error: insertError } = await supabase
+    .from('project_collaborators')
+    .insert({
+      project_id: projectId,
+      user_id: targetProfile.id,
+      role,
+      invited_at: new Date().toISOString(),
+      accepted_at: new Date().toISOString(), // Auto-accept for now
+    })
+
+  if (insertError) {
+    return { success: false, error: insertError.message }
+  }
+
+  return { success: true }
+}
+
+export async function updateCollaboratorRole(
+  projectId: string,
+  collaboratorId: string,
+  role: 'editor' | 'viewer'
+): Promise<{ success: boolean; error?: string }> {
+  const supabase = await createClient()
+  const {
+    data: { user },
+  } = await supabase.auth.getUser()
+
+  if (!user) {
+    return { success: false, error: 'Not authenticated' }
+  }
+
+  // Verify user owns the project
+  const { data: project } = await supabase
+    .from('projects')
+    .select('id, user_id')
+    .eq('id', projectId)
+    .eq('user_id', user.id)
+    .single()
+
+  if (!project) {
+    return { success: false, error: 'Only the project owner can change roles' }
+  }
+
+  const { error } = await supabase
+    .from('project_collaborators')
+    .update({ role })
+    .eq('id', collaboratorId)
+    .eq('project_id', projectId)
+
+  if (error) {
+    return { success: false, error: error.message }
+  }
+
+  return { success: true }
+}
+
+export async function removeCollaborator(
+  projectId: string,
+  collaboratorId: string
+): Promise<{ success: boolean; error?: string }> {
+  const supabase = await createClient()
+  const {
+    data: { user },
+  } = await supabase.auth.getUser()
+
+  if (!user) {
+    return { success: false, error: 'Not authenticated' }
+  }
+
+  // Verify user owns the project
+  const { data: project } = await supabase
+    .from('projects')
+    .select('id, user_id')
+    .eq('id', projectId)
+    .eq('user_id', user.id)
+    .single()
+
+  if (!project) {
+    return { success: false, error: 'Only the project owner can remove collaborators' }
+  }
+
+  const { error } = await supabase
+    .from('project_collaborators')
+    .delete()
+    .eq('id', collaboratorId)
+    .eq('project_id', projectId)
+
+  if (error) {
+    return { success: false, error: error.message }
+  }
+
+  return { success: true }
+}

src/app/editor/[projectId]/page.tsx

@@ -20,17 +20,45 @@ export default async function EditorPage({ params }: PageProps) {
     return null
   }
 
-  const { data: project, error } = await supabase
+  // Try to load as owner first
+  const { data: ownedProject } = await supabase
     .from('projects')
     .select('id, name, flowchart_data')
     .eq('id', projectId)
     .eq('user_id', user.id)
     .single()
 
-  if (error || !project) {
+  let project = ownedProject
+  let isOwner = true
+
+  // If not the owner, check if the user is a collaborator
+  if (!project) {
+    // RLS on projects allows collaborators to SELECT shared projects
+    const { data: collab } = await supabase
+      .from('project_collaborators')
+      .select('id, role')
+      .eq('project_id', projectId)
+      .eq('user_id', user.id)
+      .single()
+
+    if (!collab) {
       notFound()
     }
 
+    const { data: sharedProject } = await supabase
+      .from('projects')
+      .select('id, name, flowchart_data')
+      .eq('id', projectId)
+      .single()
+
+    if (!sharedProject) {
+      notFound()
+    }
+
+    project = sharedProject
+    isOwner = false
+  }
+
   const rawData = project.flowchart_data || {}
   const flowchartData: FlowchartData = {
     nodes: rawData.nodes || [],
@@ -74,6 +102,7 @@ export default async function EditorPage({ params }: PageProps) {
         <FlowchartEditor
           projectId={project.id}
           userId={user.id}
+          isOwner={isOwner}
           initialData={flowchartData}
           needsMigration={needsMigration}
         />

src/components/ProjectCard.tsx

@@ -8,8 +8,10 @@ interface ProjectCardProps {
   id: string
   name: string
   updatedAt: string
-  onDelete: (id: string) => void
-  onRename: (id: string, newName: string) => void
+  onDelete?: (id: string) => void
+  onRename?: (id: string, newName: string) => void
+  shared?: boolean
+  sharedRole?: string
 }
 
 function formatDate(dateString: string): string {
@@ -29,6 +31,8 @@ export default function ProjectCard({
   updatedAt,
   onDelete,
   onRename,
+  shared,
+  sharedRole,
 }: ProjectCardProps) {
   const [showDeleteDialog, setShowDeleteDialog] = useState(false)
   const [isDeleting, setIsDeleting] = useState(false)
@@ -62,7 +66,7 @@ export default function ProjectCard({
 
     setIsDeleting(false)
     setShowDeleteDialog(false)
-    onDelete(id)
+    onDelete?.(id)
   }
 
   const handleCancelDelete = () => {
@@ -106,7 +110,7 @@ export default function ProjectCard({
 
     setIsRenaming(false)
     setShowRenameDialog(false)
-    onRename(id, newName.trim())
+    onRename?.(id, newName.trim())
   }
 
   const handleCancelRename = () => {
@@ -122,6 +126,7 @@ export default function ProjectCard({
         onClick={handleCardClick}
         className="group relative cursor-pointer rounded-lg border border-zinc-200 bg-white p-6 transition-all hover:border-blue-300 hover:shadow-md dark:border-zinc-700 dark:bg-zinc-800 dark:hover:border-blue-600"
       >
+        {!shared && onRename && onDelete && (
           <div className="absolute right-3 top-3 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
             <button
               onClick={handleRenameClick}
@@ -162,6 +167,14 @@ export default function ProjectCard({
               </svg>
             </button>
           </div>
+        )}
+        {shared && (
+          <div className="absolute right-3 top-3">
+            <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
+              {sharedRole === 'editor' ? 'Editor' : 'Viewer'}
+            </span>
+          </div>
+        )}
         <h2 className="pr-8 text-lg font-semibold text-zinc-900 group-hover:text-blue-600 dark:text-zinc-50 dark:group-hover:text-blue-400">
           {name}
         </h2>

src/components/editor/ShareModal.tsx

@@ -0,0 +1,224 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import {
+  getCollaborators,
+  inviteCollaborator,
+  updateCollaboratorRole,
+  removeCollaborator,
+  type Collaborator,
+} from '@/app/editor/[projectId]/actions'
+
+type ShareModalProps = {
+  projectId: string
+  isOwner: boolean
+  onClose: () => void
+}
+
+export default function ShareModal({ projectId, isOwner, onClose }: ShareModalProps) {
+  const [collaborators, setCollaborators] = useState<Collaborator[]>([])
+  const [loading, setLoading] = useState(true)
+  const [email, setEmail] = useState('')
+  const [role, setRole] = useState<'editor' | 'viewer'>('editor')
+  const [inviting, setInviting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [successMessage, setSuccessMessage] = useState<string | null>(null)
+
+  const fetchCollaborators = useCallback(async () => {
+    const result = await getCollaborators(projectId)
+    if (result.success && result.data) {
+      setCollaborators(result.data)
+    }
+    setLoading(false)
+  }, [projectId])
+
+  useEffect(() => {
+    fetchCollaborators()
+  }, [fetchCollaborators])
+
+  const handleInvite = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!email.trim()) return
+
+    setInviting(true)
+    setError(null)
+    setSuccessMessage(null)
+
+    const result = await inviteCollaborator(projectId, email.trim(), role)
+    if (result.success) {
+      setEmail('')
+      setSuccessMessage('Collaborator invited successfully')
+      fetchCollaborators()
+    } else {
+      setError(result.error || 'Failed to invite collaborator')
+    }
+    setInviting(false)
+  }
+
+  const handleRoleChange = async (collaboratorId: string, newRole: 'editor' | 'viewer') => {
+    setError(null)
+    const result = await updateCollaboratorRole(projectId, collaboratorId, newRole)
+    if (result.success) {
+      setCollaborators((prev) =>
+        prev.map((c) => (c.id === collaboratorId ? { ...c, role: newRole } : c))
+      )
+    } else {
+      setError(result.error || 'Failed to update role')
+    }
+  }
+
+  const handleRemove = async (collaboratorId: string) => {
+    setError(null)
+    const result = await removeCollaborator(projectId, collaboratorId)
+    if (result.success) {
+      setCollaborators((prev) => prev.filter((c) => c.id !== collaboratorId))
+    } else {
+      setError(result.error || 'Failed to remove collaborator')
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div
+        className="absolute inset-0 bg-black/50"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div className="relative w-full max-w-lg rounded-lg bg-white p-6 shadow-xl dark:bg-zinc-800">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
+            Share Project
+          </h2>
+          <button
+            onClick={onClose}
+            className="rounded p-1 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200"
+          >
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Invite Form - only for owners */}
+        {isOwner && (
+          <form onSubmit={handleInvite} className="mb-6">
+            <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+              Invite collaborator by email
+            </label>
+            <div className="flex gap-2">
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="user@example.com"
+                disabled={inviting}
+                className="flex-1 rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:opacity-50 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-50 dark:placeholder-zinc-500"
+              />
+              <select
+                value={role}
+                onChange={(e) => setRole(e.target.value as 'editor' | 'viewer')}
+                disabled={inviting}
+                className="rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:opacity-50 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-50"
+              >
+                <option value="editor">Editor</option>
+                <option value="viewer">Viewer</option>
+              </select>
+              <button
+                type="submit"
+                disabled={inviting || !email.trim()}
+                className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 dark:focus:ring-offset-zinc-800"
+              >
+                {inviting ? 'Inviting...' : 'Invite'}
+              </button>
+            </div>
+          </form>
+        )}
+
+        {/* Messages */}
+        {error && (
+          <div className="mb-4 rounded-md bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/20 dark:text-red-400">
+            {error}
+          </div>
+        )}
+        {successMessage && (
+          <div className="mb-4 rounded-md bg-green-50 p-3 text-sm text-green-700 dark:bg-green-900/20 dark:text-green-400">
+            {successMessage}
+          </div>
+        )}
+
+        {/* Collaborators List */}
+        <div>
+          <h3 className="text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-3">
+            Collaborators
+          </h3>
+          {loading ? (
+            <p className="text-sm text-zinc-500 dark:text-zinc-400">Loading...</p>
+          ) : collaborators.length === 0 ? (
+            <p className="text-sm text-zinc-500 dark:text-zinc-400">
+              No collaborators yet. Invite someone to get started.
+            </p>
+          ) : (
+            <div className="space-y-2 max-h-64 overflow-y-auto">
+              {collaborators.map((collab) => (
+                <div
+                  key={collab.id}
+                  className="flex items-center justify-between rounded-md border border-zinc-200 p-3 dark:border-zinc-700"
+                >
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-zinc-900 truncate dark:text-zinc-50">
+                      {collab.display_name || collab.email || 'Unknown user'}
+                    </p>
+                    {collab.display_name && collab.email && (
+                      <p className="text-xs text-zinc-500 truncate dark:text-zinc-400">
+                        {collab.email}
+                      </p>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2 ml-3">
+                    {isOwner ? (
+                      <>
+                        <select
+                          value={collab.role}
+                          onChange={(e) =>
+                            handleRoleChange(collab.id, e.target.value as 'editor' | 'viewer')
+                          }
+                          className="rounded border border-zinc-300 bg-white px-2 py-1 text-xs text-zinc-700 focus:border-blue-500 focus:outline-none dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-300"
+                        >
+                          <option value="editor">Editor</option>
+                          <option value="viewer">Viewer</option>
+                        </select>
+                        <button
+                          onClick={() => handleRemove(collab.id)}
+                          className="rounded p-1 text-zinc-400 hover:text-red-600 dark:hover:text-red-400"
+                          title="Remove collaborator"
+                        >
+                          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                          </svg>
+                        </button>
+                      </>
+                    ) : (
+                      <span className="rounded bg-zinc-100 px-2 py-0.5 text-xs font-medium text-zinc-600 dark:bg-zinc-700 dark:text-zinc-400">
+                        {collab.role}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Close button */}
+        <div className="mt-6 flex justify-end">
+          <button
+            onClick={onClose}
+            className="rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/editor/Toolbar.tsx

@@ -10,6 +10,7 @@ type ToolbarProps = {
   onExport: () => void
   onImport: () => void
   onProjectSettings: () => void
+  onShare: () => void
   connectionState?: ConnectionState
 }
 
@@ -35,6 +36,7 @@ export default function Toolbar({
   onExport,
   onImport,
   onProjectSettings,
+  onShare,
   connectionState,
 }: ToolbarProps) {
   return (
@@ -78,6 +80,12 @@ export default function Toolbar({
         >
           Project Settings
         </button>
+        <button
+          onClick={onShare}
+          className="rounded border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
+        >
+          Share
+        </button>
         <button
           onClick={onSave}
           className="rounded border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"