diff --git a/src/app/(private)/saved-themes/page.tsx b/src/app/(private)/saved-themes/page.tsx
index 955e1df..e78b6f2 100644
--- a/src/app/(private)/saved-themes/page.tsx
+++ b/src/app/(private)/saved-themes/page.tsx
@@ -8,7 +8,7 @@ export default async function SavedThemesPage() {
   const themes = userId ? await getThemesByUserId(userId) : []
 
   return (
-    <main className="mx-auto px-10 py-8">
+    <main className="mx-auto container py-8">
       <h1 className="text-3xl font-bold mb-8">Your Saved Themes</h1>
       <SavedThemesContent initialThemes={themes} />
     </main>
diff --git a/src/app/discover/loading.tsx b/src/app/discover/loading.tsx
new file mode 100644
index 0000000..f250e76
--- /dev/null
+++ b/src/app/discover/loading.tsx
@@ -0,0 +1,13 @@
+import { Loader2 } from 'lucide-react'
+
+// src/app/saved-themes/loading.tsx
+export default function Loading() {
+  return (
+    <section className="flex justify-center items-center h-screen">
+      <div className="flex flex-col items-center justify-center gap-4">
+        <Loader2 className="h-4 w-4 animate-spin" />
+        <p>Loading themes...</p>
+      </div>
+    </section>
+  )
+}
diff --git a/src/app/discover/page.tsx b/src/app/discover/page.tsx
index ece834d..3625098 100644
--- a/src/app/discover/page.tsx
+++ b/src/app/discover/page.tsx
@@ -1,4 +1,5 @@
 import Discover from '@/components/Discover'
+import { DotPattern } from '@/components/ui/dot-pattern'
 
 import { getPublicThemes } from '@/lib/db/themes'
 
@@ -7,9 +8,10 @@ export default async function DiscoverPage() {
 
   return (
     <div>
-      <main className="mx-auto mt-8 p-4">
-        <h1 className="text-3xl font-bold mb-4">Discover Themes</h1>
-        <Discover themes={themes} />
+      <main className="mx-auto container">
+        <div className="flex flex-col gap-10 items-center w-full mt-10">
+          <Discover themes={themes} />
+        </div>
       </main>
     </div>
   )
diff --git a/src/components/Discover.tsx b/src/components/Discover.tsx
index bd28b9c..b343899 100644
--- a/src/components/Discover.tsx
+++ b/src/components/Discover.tsx
@@ -3,15 +3,24 @@
 import { SavedTheme } from '@/lib/types/colors'
 import ThemeCardPublic from './ThemeCardPublic'
 import ThemePreviewSmall from './ThemePreviewSmall'
+import { DotPattern } from './ui/dot-pattern'
 import { useState } from 'react'
 
 export default function Discover({ themes }: { themes: SavedTheme[] }) {
   const [selectedTheme, setSelectedTheme] = useState(themes[0])
   return (
-    <section>
-      <ThemePreviewSmall theme={selectedTheme} />
-
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+    <section className="flex flex-col gap-10 w-full">
+      <div className="relative py-20">
+        <DotPattern cr={0.5} className="absolute inset-0" />
+        <div className="h-[350px] 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>
+        <ThemePreviewSmall theme={selectedTheme} />
+      </div>
+      <div className="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/ThemeCard.tsx b/src/components/ThemeCard.tsx
index 573dfec..8b553bc 100644
--- a/src/components/ThemeCard.tsx
+++ b/src/components/ThemeCard.tsx
@@ -28,15 +28,7 @@ const ThemeCard: React.FC<ThemeCardProps> = ({
       className="rounded-lg shadow-md overflow-hidden"
       onClick={() => onPreview(theme)}
     >
-      <div className="h-8 flex">
-        {/* <div
-          className="flex-1"
-          style={{ backgroundColor: theme.uiColors.BG1 }}
-        />
-        <div
-          className="flex-1"
-          style={{ backgroundColor: theme.uiColors.FG1 }}
-        /> */}
+      <div className="h-1 flex">
         <div
           className="flex-1"
           style={{ backgroundColor: theme.uiColors.AC1 }}
@@ -63,7 +55,7 @@ const ThemeCard: React.FC<ThemeCardProps> = ({
         />
       </div>
       <div className="p-4">
-        <div className="flex justify-between items-center mb-4">
+        <div className="flex justify-between items-center">
           <h3
             style={{ color: theme.uiColors.FG1 }}
             className="text-lg font-semibold"
@@ -75,9 +67,6 @@ const ThemeCard: React.FC<ThemeCardProps> = ({
           </Button>
         </div>
         <div className="flex space-x-2">
-          <Button variant="default" size="sm" className="flex-1">
-            Featured
-          </Button>
           <Button variant="outline" size="sm" className="flex-1">
             Public
           </Button>
diff --git a/src/components/ThemeCardPublic.tsx b/src/components/ThemeCardPublic.tsx
index 6b2c7cf..0c49255 100644
--- a/src/components/ThemeCardPublic.tsx
+++ b/src/components/ThemeCardPublic.tsx
@@ -33,15 +33,7 @@ const ThemeCardPublic: React.FC<ThemeCardPublicProps> = ({
       className="rounded-lg shadow-md overflow-hidden"
       onClick={() => onClick(theme)}
     >
-      <div className="h-8 flex">
-        {/* <div
-          className="flex-1"
-          style={{ backgroundColor: theme.uiColors.BG1 }}
-        />
-        <div
-          className="flex-1"
-          style={{ backgroundColor: theme.uiColors.FG1 }}
-        /> */}
+      <div className="h-1 flex">
         <div
           className="flex-1"
           style={{ backgroundColor: theme.uiColors.AC1 }}
@@ -75,19 +67,9 @@ const ThemeCardPublic: React.FC<ThemeCardPublicProps> = ({
           >
             {theme.name}
           </h3>
-          <Button variant="ghost" size="icon">
-            <MoreVertical className="h-4 w-4" />
-          </Button>
         </div>
-        <div className="flex space-x-2">
-          <Button variant="default" size="sm" className="flex-1">
-            Featured
-          </Button>
-          <Button variant="outline" size="sm" className="flex-1">
-            Public
-          </Button>
-        </div>
-        <div className="mt-4 flex space-x-2">
+
+        <div className="mt-2 flex justify-end gap-2">
           <Button
             variant="outline"
             size="icon"
diff --git a/src/components/ThemePreviewSmall.tsx b/src/components/ThemePreviewSmall.tsx
index 6b4da9f..aa7e199 100644
--- a/src/components/ThemePreviewSmall.tsx
+++ b/src/components/ThemePreviewSmall.tsx
@@ -3,9 +3,9 @@ import EditorSmall from './EditorSmall'
 
 export default function ThemePreviewSmall({ theme }: { theme: SavedTheme }) {
   return (
-    <section>
+    <section className="">
       <div
-        className="flex flex-col py-2 m-auto w-1/2 rounded-md"
+        className="flex flex-col py-2 m-auto w-full lg:w-1/2 rounded-md"
         style={{ backgroundColor: theme.uiColors.BG1 }}
       >
         <div className="flex h-1 w-full self-center">
@@ -46,30 +46,27 @@ export default function ThemePreviewSmall({ theme }: { theme: SavedTheme }) {
           ></div>
         </div>
         <div
-          className="flex gap-5 w-full m-auto items-stretch "
+          className="flex gap-3 w-full m-auto items-stretch "
           style={{ backgroundColor: theme.uiColors.BG1 }}
         >
           <div
-            className="pl-2 py-2 w-1/3 flex flex-col gap-3 items-center justify-between"
+            className="pl-2 py-2 w-1/3 flex flex-col gap-3 items-end justify-center"
             style={{ backgroundColor: theme.uiColors.BG1 }}
           >
-            <div className="h-1/3"></div>
-            <div className=" flex-1 flex flex-col">
-              <h2
-                className="text-2xl font-bold"
-                style={{ color: theme.uiColors.AC1 }}
-              >
-                {theme.name}
-              </h2>
+            <h2
+              className="text-2xl font-bold "
+              style={{ color: theme.uiColors.AC1 }}
+            >
+              {theme.name}
+            </h2>
 
-              <h3 className="text-sm" style={{ color: theme.uiColors.FG1 }}>
-                {theme.updatedAt.toDateString()}
-              </h3>
-            </div>
+            <h3 className="text-sm" style={{ color: theme.uiColors.FG1 }}>
+              {theme.updatedAt.toDateString()}
+            </h3>
           </div>
 
           <div
-            className="h-[300px] w-2/3 flex-1 pr-5 py-5 rounded-md"
+            className="h-[200px] w-2/3 flex-1 pr-5 py-5 rounded-md"
             style={{ backgroundColor: theme.uiColors.BG1 }}
           >
             <EditorSmall theme={theme} selectedFile="typescript.tsx" />
diff --git a/src/components/ui/dot-pattern.tsx b/src/components/ui/dot-pattern.tsx
new file mode 100644
index 0000000..1600e4f
--- /dev/null
+++ b/src/components/ui/dot-pattern.tsx
@@ -0,0 +1,53 @@
+import { useId } from 'react'
+import { cn } from '@/lib/utils'
+
+interface DotPatternProps {
+  width?: any
+  height?: any
+  x?: any
+  y?: any
+  cx?: any
+  cy?: any
+  cr?: any
+  className?: string
+  [key: string]: any
+}
+export function DotPattern({
+  width = 16,
+  height = 16,
+  x = 0,
+  y = 0,
+  cx = 1,
+  cy = 1,
+  cr = 1,
+  className,
+  ...props
+}: DotPatternProps) {
+  const id = useId()
+
+  return (
+    <svg
+      aria-hidden="true"
+      className={cn(
+        'pointer-events-none absolute inset-0 size-full fill-muted-foreground -z-10',
+        className
+      )}
+      {...props}
+    >
+      <defs>
+        <pattern
+          id={id}
+          width={width}
+          height={height}
+          patternUnits="userSpaceOnUse"
+          patternContentUnits="userSpaceOnUse"
+          x={x}
+          y={y}
+        >
+          <circle id="pattern-circle" cx={cx} cy={cy} r={cr} />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
+    </svg>
+  )
+}
diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx
index 60a121d..a03eefd 100644
--- a/src/contexts/ThemeContext.tsx
+++ b/src/contexts/ThemeContext.tsx
@@ -130,6 +130,7 @@ export const ThemeProvider: React.FC<{
       const themeToSave: Omit<SavedTheme, 'id' | 'createdAt' | 'updatedAt'> = {
         name,
         userId,
+        public: false,
         uiColors: colors,
         syntaxColors: syntaxColors,
         ansiColors: ansiColors,
diff --git a/src/lib/drizzle/schema.ts b/src/lib/drizzle/schema.ts
index 1e6282d..65a254e 100644
--- a/src/lib/drizzle/schema.ts
+++ b/src/lib/drizzle/schema.ts
@@ -34,6 +34,7 @@ export const ThemesTable = pgTable(
     id: serial('id').primaryKey(),
     name: text('name').notNull(),
     userId: text('user_id').notNull(),
+    public: boolean('public').notNull().default(false),
     uiColors: json('ui_colors').notNull(),
     syntaxColors: json('syntax_colors').notNull(),
     ansiColors: json('ansi_colors').notNull(),
diff --git a/src/lib/types/colors.ts b/src/lib/types/colors.ts
index 1f693b1..701b964 100644
--- a/src/lib/types/colors.ts
+++ b/src/lib/types/colors.ts
@@ -295,6 +295,7 @@ export const AnsiColorsSchema = z.object({
 export const SavedThemeSchema = z.object({
   id: z.number(),
   name: z.string(),
+  public: z.boolean(),
   userId: z.string(),
   uiColors: UIColorsSchema,
   syntaxColors: SyntaxColorsSchema,