diff --git a/bun.lockb b/bun.lockb
index de15b1a..ccdaab9 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/src/app/discover/page.tsx b/src/app/discover/page.tsx
index 3625098..cc9efa1 100644
--- a/src/app/discover/page.tsx
+++ b/src/app/discover/page.tsx
@@ -5,7 +5,6 @@ import { getPublicThemes } from '@/lib/db/themes'
 
 export default async function DiscoverPage() {
   const themes = await getPublicThemes()
-
   return (
     <div>
       <main className="mx-auto container">
diff --git a/src/components/Discover.tsx b/src/components/Discover.tsx
index b343899..08ba1d6 100644
--- a/src/components/Discover.tsx
+++ b/src/components/Discover.tsx
@@ -10,17 +10,19 @@ export default function Discover({ themes }: { themes: SavedTheme[] }) {
   const [selectedTheme, setSelectedTheme] = useState(themes[0])
   return (
     <section className="flex flex-col gap-10 w-full">
-      <div className="relative py-20">
+      <div className="relative py-5">
         <DotPattern cr={0.5} className="absolute inset-0" />
-        <div className="h-[350px] flex flex-col items-center justify-center w-full">
+        <div className="h-[500px] flex flex-col items-center justify-center w-full">
           <h1 className="text-5xl font-bold mb-4">Discover new themes</h1>
           <h2 className="text-3xl font-semibold text-muted-foreground">
             made by the community
           </h2>
         </div>
+      </div>
+      <div className="-mt-36">
         <ThemePreviewSmall theme={selectedTheme} />
       </div>
-      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-10">
+      <div className="mt-10 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-10">
         {themes.map((theme) => (
           <ThemeCardPublic
             key={theme.id}
diff --git a/src/components/SavedThemes.tsx b/src/components/SavedThemes.tsx
index 323aa14..2ad69b8 100644
--- a/src/components/SavedThemes.tsx
+++ b/src/components/SavedThemes.tsx
@@ -17,12 +17,21 @@ export function SavedThemesContent({
     setSelectedTheme(theme)
   }
 
+  const handleDelete = (themeId: number) => {
+    setThemes((themes) => themes.filter((theme) => theme.id !== themeId))
+  }
+
   return (
     <section className="flex flex-col gap-10">
       <ThemePreviewSmall theme={selectedTheme} />
       <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
         {themes.map((theme) => (
-          <ThemeCard key={theme.id} theme={theme} onPreview={handlePreview} />
+          <ThemeCard
+            key={theme.id}
+            theme={theme}
+            onPreview={handlePreview}
+            onDelete={handleDelete}
+          />
         ))}
       </div>
     </section>
diff --git a/src/components/ThemeCard.tsx b/src/components/ThemeCard.tsx
index 2055790..e2d0a62 100644
--- a/src/components/ThemeCard.tsx
+++ b/src/components/ThemeCard.tsx
@@ -1,44 +1,53 @@
 // src/components/ThemeCard.tsx
 'use client'
 
-import React, { useState } from 'react'
+import React, { useState, useTransition } from 'react'
 import { SavedTheme } from '@/lib/types/colors'
 import { Button } from '@/components/ui/button'
 import { Switch } from '@/components/ui/switch'
 import { Edit, Download, Eye, Share2, Trash2, Loader2 } from 'lucide-react'
 import {
-  updateThemePublicity,
+  updateThemeType,
   deleteTheme,
   downloadThemeVSIX,
 } from '@/lib/db/themes'
-import { useTransition } from 'react'
+import { useTheme } from '@/contexts/ThemeContext'
 
 interface ThemeCardProps {
   theme: SavedTheme
   onPreview: (theme: SavedTheme) => void
+  onDelete: (themeId: number) => void
 }
 
-const ThemeCard: React.FC<ThemeCardProps> = ({ theme, onPreview }) => {
+const ThemeCard: React.FC<ThemeCardProps> = ({
+  theme,
+  onPreview,
+  onDelete,
+}) => {
+  const { updateSelectedThemeType, deleteSavedTheme } = useTheme()
   const [isPublic, setIsPublic] = useState(theme.public)
-  const [isPending, startTransition] = useTransition()
+  const [isDelPending, startDelTransition] = useTransition()
+  const [isDownPending, startDownTransition] = useTransition()
+  const [isPublPending, startPublTransition] = useTransition()
 
   const handleDelete = () => {
     if (window.confirm('Are you sure you want to delete this theme?')) {
-      startTransition(async () => {
-        await deleteTheme(theme.id)
+      startDelTransition(async () => {
+        await deleteSavedTheme(theme.id)
+        onDelete(theme.id)
       })
     }
   }
 
   const handlePublicityToggle = (checked: boolean) => {
-    startTransition(async () => {
-      await updateThemePublicity(theme.id, checked)
+    startPublTransition(async () => {
+      await updateSelectedThemeType(theme.id, checked)
       setIsPublic(checked)
     })
   }
 
   const handleDownload = () => {
-    startTransition(async () => {
+    startDownTransition(async () => {
       const vsixBuffer = await downloadThemeVSIX(theme.id)
       if (vsixBuffer) {
         const blob = new Blob([vsixBuffer], {
@@ -60,13 +69,38 @@ const ThemeCard: React.FC<ThemeCardProps> = ({ theme, onPreview }) => {
     <div
       style={{
         backgroundColor: theme.uiColors.BG1,
-        opacity: isPending ? 0.7 : 1,
+        opacity: isDelPending || isDownPending || isPublPending ? 0.7 : 1,
         transition: 'opacity 0.2s',
       }}
       className="rounded-lg shadow-md overflow-hidden"
-      onClick={() => onPreview(theme)}
-      aria-disabled={isPending}
+      aria-disabled={isDelPending || isDownPending || isPublPending}
     >
+      <div className="h-1 flex">
+        <div
+          className="flex-1"
+          style={{ backgroundColor: theme.uiColors.AC1 }}
+        />
+        <div
+          className="flex-1"
+          style={{ backgroundColor: theme.uiColors.AC2 }}
+        />
+        <div
+          className="flex-1"
+          style={{ backgroundColor: theme.syntaxColors.variable }}
+        />
+        <div
+          className="flex-1"
+          style={{ backgroundColor: theme.syntaxColors.storage }}
+        />
+        <div
+          className="flex-1"
+          style={{ backgroundColor: theme.syntaxColors.control }}
+        />
+        <div
+          className="flex-1"
+          style={{ backgroundColor: theme.syntaxColors.keyword }}
+        />
+      </div>
       <div className="p-4">
         <div className="flex justify-between items-center mb-4">
           <h3
@@ -79,62 +113,66 @@ const ThemeCard: React.FC<ThemeCardProps> = ({ theme, onPreview }) => {
             <Switch
               checked={isPublic}
               onCheckedChange={(checked) => handlePublicityToggle(checked)}
-              disabled={isPending}
+              disabled={isPublPending}
             />
             <span style={{ color: theme.uiColors.FG2 }}>
-              {theme.public ? 'Public' : 'Private'}
+              {isPublic ? 'Public' : 'Private'}
             </span>
           </div>
         </div>
-        <div className="mt-4 flex space-x-2">
-          <Button
-            variant="default"
-            className="flex-1"
-            // onClick={handleEdit}
-            disabled={isPending}
-          >
-            <Edit className="h-4 w-4 mr-2" /> Edit
-          </Button>
-          <Button
-            variant="outline"
-            size="icon"
-            onClick={handleDownload}
-            disabled={isPending}
-          >
-            {isPending ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <Download className="h-4 w-4" />
-            )}
-          </Button>
-          <Button
-            variant="outline"
-            size="icon"
-            onClick={() => onPreview(theme)}
-            disabled={isPending}
-          >
-            <Eye className="h-4 w-4" />
-          </Button>
-          <Button
-            variant="outline"
-            size="icon"
-            onClick={() => {}} // Implement share functionality here
-            disabled={isPending}
-          >
-            <Share2 className="h-4 w-4" />
-          </Button>
-          <Button
-            variant="destructive"
-            size="icon"
-            onClick={handleDelete}
-            disabled={isPending}
-          >
-            {isPending ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <Trash2 className="h-4 w-4" />
-            )}
-          </Button>
+        <div className="flex justify-between">
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={handleDownload}
+              disabled={isDownPending}
+            >
+              {isDownPending ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Download className="h-4 w-4" />
+              )}
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => onPreview(theme)}
+              // disabled={isPending}
+            >
+              <Eye className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => {}} // Implement share functionality here
+              // disabled={isPending}
+            >
+              <Share2 className="h-4 w-4" />
+            </Button>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="default"
+              className="flex-1"
+              // onClick={handleEdit}
+              // disabled={}
+            >
+              <Edit className="h-4 w-4 mr-2" /> Edit
+            </Button>
+            <Button
+              variant="destructive"
+              size="icon"
+              onClick={handleDelete}
+              disabled={isDelPending}
+            >
+              {isDelPending ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Trash2 className="h-4 w-4" />
+              )}
+            </Button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/ThemeCardPublic.tsx b/src/components/ThemeCardPublic.tsx
index a0069bd..a6f7e33 100644
--- a/src/components/ThemeCardPublic.tsx
+++ b/src/components/ThemeCardPublic.tsx
@@ -6,6 +6,7 @@ import { SavedTheme } from '@/lib/types/colors'
 import { Download, Eye, Share2, Loader2 } from 'lucide-react'
 import { downloadThemeVSIX } from '@/lib/db/themes'
 import { useTransition } from 'react'
+import { useUser } from '@clerk/nextjs'
 
 type ThemeCardPublicProps = {
   theme: SavedTheme
@@ -16,6 +17,7 @@ const ThemeCardPublic: React.FC<ThemeCardPublicProps> = ({
   theme,
   onClick,
 }) => {
+  const { user } = useUser()
   const [isPending, startTransition] = useTransition()
 
   const handleDownload = () => {
@@ -41,7 +43,6 @@ const ThemeCardPublic: React.FC<ThemeCardPublicProps> = ({
     <div
       style={{ backgroundColor: theme.uiColors.BG1 }}
       className="rounded-lg shadow-md overflow-hidden"
-      onClick={() => onClick(theme)}
     >
       <div className="h-1 flex">
         <div
@@ -76,6 +77,9 @@ const ThemeCardPublic: React.FC<ThemeCardPublicProps> = ({
         >
           {theme.name}
         </h3>
+        <h3 style={{ color: theme.uiColors.FG2 }} className="text-sm">
+          {theme.userName}
+        </h3>
         <div className="mt-2 flex justify-end gap-2">
           <Button
             variant="outline"
@@ -89,7 +93,7 @@ const ThemeCardPublic: React.FC<ThemeCardPublicProps> = ({
               <Download className="h-4 w-4" />
             )}
           </Button>
-          <Button variant="outline" size="icon" onClick={() => {}}>
+          <Button variant="outline" size="icon" onClick={() => onClick(theme)}>
             <Eye className="h-4 w-4" />
           </Button>
           <Button variant="outline" size="icon" onClick={() => {}}>
diff --git a/src/components/ThemeControls.tsx b/src/components/ThemeControls.tsx
index 1b5e902..c730a10 100644
--- a/src/components/ThemeControls.tsx
+++ b/src/components/ThemeControls.tsx
@@ -25,16 +25,20 @@ import ThemeSaver from './ThemeSaver'
 
 import { ColorScheme } from '@/lib/types/colors'
 import { randomInteger } from '@/lib/utils/math'
-import ThemeLoader from './ThemeLoader'
+import { ThemeLoader } from './ThemeLoader'
 
 const ThemeControls: React.FC = () => {
+  const [themeName, setThemeName] = useState<string>('')
+
   const {
     isDark,
+    isPublic,
     baseHue,
     scheme,
     uiSaturation,
     syntaxSaturation,
     lockedColors,
+    setIsPublic,
     setBaseHue,
     setUiSaturation,
     setSyntaxSaturation,
@@ -65,6 +69,8 @@ const ThemeControls: React.FC = () => {
     setSyntaxSaturation(newSyntaxSaturation)
     setScheme(newScheme)
     setCurrentThemeId(null)
+    setThemeName('')
+    setIsPublic(false)
 
     // Then generate colors with these new values
     generateColors({
@@ -351,7 +357,7 @@ const ThemeControls: React.FC = () => {
         <div className="flex flex-col justify-between gap-2">
           <Tooltip>
             <TooltipTrigger asChild>
-              <ThemeLoader />
+              <ThemeLoader setThemeName={setThemeName} />
             </TooltipTrigger>
             <TooltipContent>
               <p>Load a theme from your saved themes</p>
@@ -359,7 +365,7 @@ const ThemeControls: React.FC = () => {
           </Tooltip>
           <Tooltip>
             <TooltipTrigger asChild>
-              <ThemeSaver />
+              <ThemeSaver themeName={themeName} setThemeName={setThemeName} />
             </TooltipTrigger>
             <TooltipContent>
               <p>Save the current theme to your themes</p>
diff --git a/src/components/ThemeGenerator.tsx b/src/components/ThemeGenerator.tsx
index 6fe68b7..813cee9 100644
--- a/src/components/ThemeGenerator.tsx
+++ b/src/components/ThemeGenerator.tsx
@@ -41,9 +41,9 @@ export const ThemeGenerator = () => {
   return (
     <section>
       <div className="mx-auto p-4 flex flex-col gap-5">
-        <div className="flex flex-wrap lg:flex-nowrap gap-8">
+        <div className="flex flex-wrap lg:flex-nowrap gap-6">
           <div className="flex flex-col items-center justify-between flex-shrink">
-            <div className="flex flex-col items-center flex-1 gap-5">
+            <div className="flex flex-col items-center flex-1 gap-6">
               <ThemeControls />
               <div className="">
                 <ActiveColorPicker />
@@ -53,7 +53,7 @@ export const ThemeGenerator = () => {
           <div className="flex-1">
             <ThemePreview />
           </div>
-          <div className="flex flex-col gap-5">
+          <div className="flex flex-col gap-6">
             <ColorList title="Theme Colors" isThemeColors={true} />
             <AnsiColorList />
           </div>
@@ -62,10 +62,10 @@ export const ThemeGenerator = () => {
           <SyntaxColorList title="Syntax Colors" isThemeColors={false} />
         </div>
 
-        <div className="flex justify-end gap-4">
+        {/* <div className="flex justify-end gap-6">
           <ExportButton />
           <ExportSemanticButton />
-        </div>
+        </div> */}
       </div>
     </section>
   )
diff --git a/src/components/ThemeLoader.tsx b/src/components/ThemeLoader.tsx
index c86f305..727f863 100644
--- a/src/components/ThemeLoader.tsx
+++ b/src/components/ThemeLoader.tsx
@@ -9,7 +9,13 @@ import {
 } from '@/components/ui/select'
 import { Loader2 } from 'lucide-react'
 
-const ThemeLoader: React.FC = () => {
+interface ThemeLoaderProps {
+  setThemeName: React.Dispatch<React.SetStateAction<string>>
+}
+
+export const ThemeLoader: React.FC<ThemeLoaderProps> = ({
+  setThemeName,
+}: ThemeLoaderProps) => {
   const { savedThemes, loadTheme, currentThemeId } = useTheme()
   const [selectedThemeId, setSelectedThemeId] = useState<string>(
     currentThemeId?.toString() || ''
@@ -30,6 +36,7 @@ const ThemeLoader: React.FC = () => {
       )
       if (themeToLoad) {
         loadTheme(themeToLoad)
+        setThemeName(themeToLoad.name)
       }
     })
   }
@@ -66,5 +73,3 @@ const ThemeLoader: React.FC = () => {
     </div>
   )
 }
-
-export default ThemeLoader
diff --git a/src/components/ThemePreview.tsx b/src/components/ThemePreview.tsx
index 3760267..670776b 100644
--- a/src/components/ThemePreview.tsx
+++ b/src/components/ThemePreview.tsx
@@ -20,14 +20,12 @@ const ThemePreview: React.FC = () => {
     useState<CodeSnippetKey>('typescript.tsx')
 
   return (
-    <section>
+    <section className="">
       <div
         style={{
-          height: '800px',
-          display: 'flex',
-          flexDirection: 'column',
           border: `1px solid ${colors.BORDER}`,
         }}
+        className="h-[800px] flex flex-col rounded-md"
       >
         {/* Mock VS Code title bar */}
         <div
@@ -37,6 +35,7 @@ const ThemePreview: React.FC = () => {
             display: 'flex',
             justifyContent: 'space-between',
           }}
+          className="rounded-t-md"
         >
           <span style={{ color: colors.FG1 }} className="text-xs">
             VS Code Theme Preview
@@ -143,7 +142,7 @@ const ThemePreview: React.FC = () => {
             display: 'flex',
             justifyContent: 'space-between',
           }}
-          className="text-xs"
+          className="text-xs rounded-b-md"
         >
           <span style={{ color: colors.FG3 }}>
             {selectedFile.split('.').pop()?.toUpperCase()}
diff --git a/src/components/ThemePreviewSmall.tsx b/src/components/ThemePreviewSmall.tsx
index aa7e199..7d2f4d9 100644
--- a/src/components/ThemePreviewSmall.tsx
+++ b/src/components/ThemePreviewSmall.tsx
@@ -50,7 +50,7 @@ export default function ThemePreviewSmall({ theme }: { theme: SavedTheme }) {
           style={{ backgroundColor: theme.uiColors.BG1 }}
         >
           <div
-            className="pl-2 py-2 w-1/3 flex flex-col gap-3 items-end justify-center"
+            className="pl-2 py-2 w-1/3 flex flex-col  items-end justify-center"
             style={{ backgroundColor: theme.uiColors.BG1 }}
           >
             <h2
@@ -59,8 +59,14 @@ export default function ThemePreviewSmall({ theme }: { theme: SavedTheme }) {
             >
               {theme.name}
             </h2>
+            <h3
+              className="text-base font-semibold"
+              style={{ color: theme.uiColors.FG2 }}
+            >
+              {theme.userName}
+            </h3>
 
-            <h3 className="text-sm" style={{ color: theme.uiColors.FG1 }}>
+            <h3 className="text-sm text-muted-foreground">
               {theme.updatedAt.toDateString()}
             </h3>
           </div>
diff --git a/src/components/ThemeSaver.tsx b/src/components/ThemeSaver.tsx
index 1920f2e..de5ec15 100644
--- a/src/components/ThemeSaver.tsx
+++ b/src/components/ThemeSaver.tsx
@@ -2,13 +2,22 @@ import React, { useState, useTransition, useEffect } from 'react'
 import { useTheme } from '@/contexts/ThemeContext'
 import { Input } from '@/components/ui/input'
 import { ActionButton } from '@/components/ActionButton'
-import { useUser } from '@clerk/nextjs'
 import { Switch } from '@/components/ui/switch'
+import { useUser } from '@clerk/nextjs'
 
-const ThemeSaver: React.FC = () => {
+interface ThemeSaverProps {
+  themeName: string
+  setThemeName: React.Dispatch<React.SetStateAction<string>>
+}
+
+const ThemeSaver: React.FC<ThemeSaverProps> = ({
+  themeName,
+  setThemeName,
+}: ThemeSaverProps) => {
   const {
     saveCurrentTheme,
     updateCurrentTheme,
+    updateSelectedThemeType,
     currentThemeId,
     savedThemes,
     isPublic,
@@ -22,25 +31,18 @@ const ThemeSaver: React.FC = () => {
     syntaxSaturation,
     scheme,
   } = useTheme()
-  const [themeName, setThemeName] = useState('')
-  const { user } = useUser()
 
+  const { user } = useUser()
   const [isPending, startTransition] = useTransition()
 
-  useEffect(() => {
-    if (currentThemeId) {
-      const currentTheme = savedThemes.find(
-        (theme) => theme.id === currentThemeId
-      )
-      if (currentTheme) {
-        setThemeName(currentTheme.name)
-        setIsPublic(currentTheme.public)
+  const handlePublicToggle = (checked: boolean) => {
+    startTransition(async () => {
+      if (currentThemeId) {
+        await updateSelectedThemeType(currentThemeId, checked)
       }
-    } else {
-      setThemeName('')
-      setIsPublic(false)
-    }
-  }, [currentThemeId, savedThemes, setIsPublic])
+      setIsPublic(checked)
+    })
+  }
 
   const handleSave = () => {
     if (!user) return
@@ -58,6 +60,7 @@ const ThemeSaver: React.FC = () => {
           uiSaturation: uiSaturation,
           syntaxSaturation: syntaxSaturation,
           scheme: scheme,
+          userName: user.firstName + ' ' + user.lastName,
         })
       } else {
         await saveCurrentTheme({
@@ -72,6 +75,7 @@ const ThemeSaver: React.FC = () => {
           uiSaturation: uiSaturation,
           syntaxSaturation: syntaxSaturation,
           scheme: scheme,
+          userName: user.firstName + ' ' + user.lastName,
         })
       }
     })
@@ -97,7 +101,7 @@ const ThemeSaver: React.FC = () => {
       <div className="flex items-center gap-2">
         <Switch
           checked={isPublic}
-          onCheckedChange={setIsPublic}
+          onCheckedChange={(checked) => handlePublicToggle(checked)}
           id="public-switch"
         />
         <label htmlFor="public-switch">Make theme public</label>
diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx
index 994f3fd..3a0b6a4 100644
--- a/src/contexts/ThemeContext.tsx
+++ b/src/contexts/ThemeContext.tsx
@@ -27,7 +27,7 @@ import {
   getThemesByUserId,
   deleteTheme,
   updateTheme,
-  updateThemePublicity,
+  updateThemeType,
 } from '@/lib/db/themes'
 import type { SavedTheme } from '@/lib/types/colors'
 import { useTheme as useNextTheme } from 'next-themes'
@@ -41,19 +41,22 @@ import type {
 
 interface ThemeContextType {
   isDark: boolean
+  setIsDark: (value: boolean) => void
+  isPublic: boolean
+  setIsPublic: (value: boolean) => void
   baseHue: number
+  setBaseHue: (value: number) => void
   uiSaturation: number
+  setUiSaturation: (value: number) => void
   syntaxSaturation: number
+  setSyntaxSaturation: (value: number) => void
   scheme: ColorScheme
+  setScheme: (value: ColorScheme) => void
   colors: UIColors
   syntaxColors: SyntaxColors
-  lockedColors: Set<string>
-  activeColor: string | null
-  setIsDark: (value: boolean) => void
-  setBaseHue: (value: number) => void
-  setUiSaturation: (value: number) => void
-  setSyntaxSaturation: (value: number) => void
-  setScheme: (value: ColorScheme) => void
+  ansiColors: AnsiColors
+  regenerateAnsiColors: () => void
+  schemeHues: number[]
   generateColors: (
     options: Partial<ThemeGenerationOptions> & {
       lockedColors?: string[]
@@ -65,31 +68,33 @@ interface ThemeContextType {
     newUiSaturation: number,
     newSyntaxSaturation: number
   ) => void
+  lockedColors: Set<string>
   toggleColorLock: (colorKey: string) => void
+  activeColor: string | null
   setActiveColor: (colorKey: string | null) => void
   handleColorChange: (colorKey: string, newColor: string) => void
-  ansiColors: AnsiColors
-  regenerateAnsiColors: () => void
-  schemeHues: number[]
+
   savedThemes: SavedTheme[]
   setSavedThemes: (themes: SavedTheme[]) => void
+  loadSavedThemes: (userId: string) => Promise<void>
+
   saveCurrentTheme: (
     theme: Omit<SavedTheme, 'id' | 'createdAt' | 'updatedAt'>
   ) => Promise<void>
   loadTheme: (theme: SavedTheme) => void
-  deleteTheme: (themeId: number) => Promise<void>
-  loadSavedThemes: (userId: string) => Promise<void>
-  updateThemePublicity: (themeId: number, isPublic: boolean) => Promise<void>
+  deleteSavedTheme: (themeId: number) => Promise<void>
+
   currentThemeId: number | null
   setCurrentThemeId: (id: number | null) => void
   updateCurrentTheme: (
     id: number,
     theme: Partial<Omit<SavedTheme, 'id' | 'createdAt' | 'updatedAt'>>
   ) => Promise<void>
+
+  updateSelectedThemeType: (themeId: number, isPublic: boolean) => Promise<void>
+
   isOnigasmInitialized: boolean
   setIsOnigasmInitialized: (value: boolean) => void
-  isPublic: boolean
-  setIsPublic: (value: boolean) => void
 }
 
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
@@ -100,6 +105,7 @@ export const ThemeProvider: React.FC<{
 }> = ({ children, userId }) => {
   const { setTheme, theme } = useNextTheme()
   const [isDark, setIsDarkState] = useState(theme === 'dark' ? true : false)
+  const [isPublic, setIsPublic] = useState(false)
   const [baseHue, setBaseHueState] = useState(Math.floor(Math.random() * 360))
   const [uiSaturation, setUiSaturationState] = useState(30)
   const [syntaxSaturation, setSyntaxSaturationState] = useState(70)
@@ -107,17 +113,16 @@ export const ThemeProvider: React.FC<{
   const [colors, setColors] = useState<UIColors>(initialColors)
   const [syntaxColors, setSyntaxColors] =
     useState<SyntaxColors>(initialSyntaxColors)
-  const [lockedColors, setLockedColors] = useState<Set<string>>(new Set())
-  const [activeColor, setActiveColor] = useState<string | null>(null)
   const [ansiColors, setAnsiColors] = useState<AnsiColors>(() =>
     generateAnsiColors(initialColors.BG1)
   )
+  const [lockedColors, setLockedColors] = useState<Set<string>>(new Set())
+  const [activeColor, setActiveColor] = useState<string | null>(null)
   const [schemeHues, setSchemeHues] = useState<number[]>([])
   const generateColorsTimeoutRef = useRef<NodeJS.Timeout | null>(null)
   const [savedThemes, setSavedThemes] = useState<SavedTheme[]>([])
   const [currentThemeId, setCurrentThemeId] = useState<number | null>(null)
   const [isOnigasmInitialized, setIsOnigasmInitialized] = useState(false)
-  const [isPublic, setIsPublic] = useState(false)
 
   const loadSavedThemes = useCallback(async (userId: string) => {
     if (userId) {
@@ -130,10 +135,10 @@ export const ThemeProvider: React.FC<{
     async (theme: Omit<SavedTheme, 'id' | 'createdAt' | 'updatedAt'>) => {
       const savedTheme = await saveTheme(theme)
       setSavedThemes((prev) => [...prev, savedTheme])
+      setCurrentThemeId(savedTheme.id)
     },
     []
   )
-
   const updateCurrentTheme = useCallback(
     async (
       id: number,
@@ -183,15 +188,15 @@ export const ThemeProvider: React.FC<{
     [setTheme]
   )
 
-  const deleteThemeFromContext = useCallback(async (themeId: number) => {
+  const deleteSavedTheme = useCallback(async (themeId: number) => {
     await deleteTheme(themeId)
     setSavedThemes((prev) => prev.filter((theme) => theme.id !== themeId))
   }, [])
 
-  const updateThemePublicityInContext = useCallback(
+  const updateSelectedThemeType = useCallback(
     async (themeId: number, isPublic: boolean) => {
       try {
-        await updateThemePublicity(themeId, isPublic)
+        await updateThemeType(themeId, isPublic)
         setSavedThemes((prev) =>
           prev.map((theme) =>
             theme.id === themeId ? { ...theme, public: isPublic } : theme
@@ -407,7 +412,7 @@ export const ThemeProvider: React.FC<{
     saveCurrentTheme,
     loadTheme,
     loadSavedThemes,
-    deleteTheme: deleteThemeFromContext,
+    deleteSavedTheme,
     setIsDark,
     setBaseHue,
     setUiSaturation,
@@ -425,7 +430,7 @@ export const ThemeProvider: React.FC<{
     updateCurrentTheme,
     isOnigasmInitialized,
     setIsOnigasmInitialized,
-    updateThemePublicity: updateThemePublicityInContext,
+    updateSelectedThemeType,
     isPublic,
     setIsPublic,
   }
diff --git a/src/lib/db/themes.ts b/src/lib/db/themes.ts
index f880b4b..c6c8ec6 100644
--- a/src/lib/db/themes.ts
+++ b/src/lib/db/themes.ts
@@ -3,28 +3,34 @@
 import { revalidatePath } from 'next/cache'
 import { ColorScheme, type SavedTheme, SavedThemeSchema } from '../types/colors'
 import { db } from '../drizzle/db'
-import { ThemesTable } from '../drizzle/schema'
+import { ThemesTable, UsersTable } from '../drizzle/schema'
 import { eq } from 'drizzle-orm'
 import { generateVSIX } from '@/lib/generator/exportVSIX'
 
-export async function downloadThemeVSIX(
-  themeId: number
-): Promise<Buffer | null> {
-  const theme = await getThemeById(themeId)
-  if (!theme) return null
+export async function getPublicThemes(): Promise<SavedTheme[]> {
+  const results = await db
+    .select()
+    .from(ThemesTable)
+    .where(eq(ThemesTable.public, true))
 
-  const vsixBuffer = await generateVSIX(theme)
-  return vsixBuffer
+  return results.map(parseSavedTheme)
 }
 
-export async function updateThemePublicity(themeId: number, isPublic: boolean) {
-  await updateThemePublicityInDb(themeId, isPublic)
-  revalidatePath('/saved-themes')
+export async function getThemesByUserId(userId: string): Promise<SavedTheme[]> {
+  const results = await db
+    .select()
+    .from(ThemesTable)
+    .where(eq(ThemesTable.userId, userId))
+  return results.map(parseSavedTheme)
 }
 
-export async function deleteTheme(themeId: number) {
-  await db.delete(ThemesTable).where(eq(ThemesTable.id, themeId))
-  revalidatePath('/saved-themes')
+export async function getThemeById(id: number): Promise<SavedTheme | null> {
+  const result = await db
+    .select()
+    .from(ThemesTable)
+    .where(eq(ThemesTable.id, id))
+    .limit(1)
+  return result[0] ? parseSavedTheme(result[0]) : null
 }
 
 export async function saveTheme(
@@ -42,7 +48,7 @@ export async function saveTheme(
   return savedTheme
 }
 
-async function updateThemePublicityInDb(
+export async function updateThemeType(
   themeId: number,
   isPublic: boolean
 ): Promise<SavedTheme> {
@@ -51,7 +57,7 @@ async function updateThemePublicityInDb(
     .set({ public: isPublic })
     .where(eq(ThemesTable.id, themeId))
     .returning()
-
+  revalidatePath('/saved-themes')
   return parseSavedTheme(updatedTheme)
 }
 
@@ -75,41 +81,19 @@ export async function updateTheme(
   return updatedTheme
 }
 
-export async function getThemesByUserId(userId: string): Promise<SavedTheme[]> {
-  const results = await db
-    .select()
-    .from(ThemesTable)
-    .where(eq(ThemesTable.userId, userId))
-  return results.map(parseSavedTheme)
-}
-
-export async function getThemeById(id: number): Promise<SavedTheme | null> {
-  const result = await db
-    .select()
-    .from(ThemesTable)
-    .where(eq(ThemesTable.id, id))
-    .limit(1)
-  return result[0] ? parseSavedTheme(result[0]) : null
+export async function deleteTheme(themeId: number) {
+  await db.delete(ThemesTable).where(eq(ThemesTable.id, themeId))
+  revalidatePath('/saved-themes')
 }
 
-export async function getPublicThemes(): Promise<SavedTheme[]> {
-  const results = await db
-    .select()
-    .from(ThemesTable)
-    .where(eq(ThemesTable.public, true))
-  return results.map(parseSavedTheme)
-}
+export async function downloadThemeVSIX(
+  themeId: number
+): Promise<Buffer | null> {
+  const theme = await getThemeById(themeId)
+  if (!theme) return null
 
-function safeJsonParse(value: any) {
-  if (typeof value === 'string') {
-    try {
-      return JSON.parse(value)
-    } catch (error) {
-      console.error('Error parsing JSON:', error)
-      return value
-    }
-  }
-  return value
+  const vsixBuffer = await generateVSIX(theme)
+  return vsixBuffer
 }
 
 function parseSavedTheme(rawTheme: any): SavedTheme {
@@ -134,3 +118,15 @@ function parseSavedTheme(rawTheme: any): SavedTheme {
     throw error
   }
 }
+
+function safeJsonParse(value: any) {
+  if (typeof value === 'string') {
+    try {
+      return JSON.parse(value)
+    } catch (error) {
+      console.error('Error parsing JSON:', error)
+      return value
+    }
+  }
+  return value
+}
diff --git a/src/lib/drizzle/schema.ts b/src/lib/drizzle/schema.ts
index 65a254e..f9d7c07 100644
--- a/src/lib/drizzle/schema.ts
+++ b/src/lib/drizzle/schema.ts
@@ -34,15 +34,16 @@ export const ThemesTable = pgTable(
     id: serial('id').primaryKey(),
     name: text('name').notNull(),
     userId: text('user_id').notNull(),
+    userName: text('user_name').notNull(),
     public: boolean('public').notNull().default(false),
-    uiColors: json('ui_colors').notNull(),
-    syntaxColors: json('syntax_colors').notNull(),
-    ansiColors: json('ansi_colors').notNull(),
+    isDark: boolean('is_dark').notNull(),
     baseHue: integer('base_hue').notNull(),
     uiSaturation: integer('ui_saturation').notNull(),
     syntaxSaturation: integer('syntax_saturation').notNull(),
     scheme: text('scheme').notNull(),
-    isDark: boolean('is_dark').notNull(),
+    uiColors: json('ui_colors').notNull(),
+    syntaxColors: json('syntax_colors').notNull(),
+    ansiColors: json('ansi_colors').notNull(),
     createdAt: timestamp('created_at').defaultNow().notNull(),
     updatedAt: timestamp('updated_at').defaultNow().notNull(),
   },
diff --git a/src/lib/types/colors.ts b/src/lib/types/colors.ts
index 701b964..8b8cf8b 100644
--- a/src/lib/types/colors.ts
+++ b/src/lib/types/colors.ts
@@ -297,6 +297,7 @@ export const SavedThemeSchema = z.object({
   name: z.string(),
   public: z.boolean(),
   userId: z.string(),
+  userName: z.optional(z.string()),
   uiColors: UIColorsSchema,
   syntaxColors: SyntaxColorsSchema,
   ansiColors: AnsiColorsSchema,