diff --git a/convex/schema.ts b/convex/schema.ts
index 7ceb9b3..cb5ca2d 100644
--- a/convex/schema.ts
+++ b/convex/schema.ts
@@ -36,8 +36,8 @@ export default defineSchema({
     content: v.string(), 
   }).index("by_snippet_id", ["snippetId"]),
 
-  stars: defineTable({
-    userId: v.id("users"),
+   stars: defineTable({
+    userId: v.string(),
     snippetId: v.id("snippets"),
   })
     .index("by_user_id", ["userId"])
diff --git a/convex/snippets.ts b/convex/snippets.ts
index e33112c..b48f588 100644
--- a/convex/snippets.ts
+++ b/convex/snippets.ts
@@ -1,5 +1,5 @@
 import { v } from "convex/values";
-import { mutation } from "./_generated/server";
+import { mutation, query } from "./_generated/server";
 
 export const createSnippet = mutation({
   args: {
@@ -30,3 +30,112 @@ export const createSnippet = mutation({
     return snippetId;
   },
 });
+
+export const getSnippets = query({
+  handler: async (ctx) => {
+    const snippets = await ctx.db.query("snippets").order("desc").collect();
+    return snippets;
+  }
+})
+
+export const isSnippetStarred = query({
+  args: {
+    snippetId: v.id("snippets")
+  },
+  handler: async (ctx, args) => {
+    const identity = await ctx.auth.getUserIdentity();
+    if (!identity) return false;
+
+    const star = await ctx.db
+    .query("stars")
+    .withIndex("by_user_id_and_snippet_id")
+    .filter((q)=> q.eq(q.field("userId"),identity.subject) && q.eq(q.field("snippetId"),args.snippetId))
+    .first();
+  
+    return !!star;
+  }
+})
+
+export const getSnippetStarCount = query({
+  args: {snippetId: v.id("snippets")},
+  handler: async (ctx, args) => {
+    const stars = await ctx.db
+    .query("stars")
+    .withIndex("by_snippet_id")
+    .filter((q)=>q.eq(q.field("snippetId"),args.snippetId))
+    .collect();
+
+    return stars.length;
+  
+  }
+})
+
+
+
+export const deleteSnippet = mutation({
+  args: {
+    snippetId: v.id("snippets"),
+  },
+
+  handler: async (ctx, args) => {
+    const identity = await ctx.auth.getUserIdentity();
+    if (!identity) throw new Error("Not authenticated");
+
+    const snippet = await ctx.db.get(args.snippetId);
+    if (!snippet) throw new Error("Snippet not found");
+
+    if (snippet.userId !== identity.subject) {
+      throw new Error("Not authorized to delete this snippet");
+    }
+
+    const comments = await ctx.db
+      .query("snippetComments")
+      .withIndex("by_snippet_id")
+      .filter((q) => q.eq(q.field("snippetId"), args.snippetId))
+      .collect();
+
+    for (const comment of comments) {
+      await ctx.db.delete(comment._id);
+    }
+
+    const stars = await ctx.db
+      .query("stars")
+      .withIndex("by_snippet_id")
+      .filter((q) => q.eq(q.field("snippetId"), args.snippetId))
+      .collect();
+
+    for (const star of stars) {
+      await ctx.db.delete(star._id);
+    }
+
+    await ctx.db.delete(args.snippetId);
+  },
+});
+
+export const starSnippet = mutation({
+  args: {
+    snippetId: v.id("snippets"),
+  },
+  handler: async (ctx, args) => {
+    const identity = await ctx.auth.getUserIdentity();
+    if (!identity) throw new Error("Not authenticated");
+
+    const existing = await ctx.db
+      .query("stars")
+      .withIndex("by_user_id_and_snippet_id")
+      .filter(
+        (q) =>
+          q.eq(q.field("userId"), identity.subject) && q.eq(q.field("snippetId"), args.snippetId)
+      )
+      .first();
+
+    if (existing) {
+      await ctx.db.delete(existing._id);
+    } else {
+      await ctx.db.insert("stars", {
+        userId: identity.subject,
+        snippetId: args.snippetId,
+      });
+    }
+  },
+});
\ No newline at end of file
diff --git a/src/app/snippets/_components/SnippetCard.tsx b/src/app/snippets/_components/SnippetCard.tsx
new file mode 100644
index 0000000..a8f52c0
--- /dev/null
+++ b/src/app/snippets/_components/SnippetCard.tsx
@@ -0,0 +1,139 @@
+"use client";
+import { Snippet } from "@/types";
+import { useUser } from "@clerk/nextjs";
+import { useMutation } from "convex/react";
+import { api } from "../../../../convex/_generated/api";
+import { useState } from "react";
+
+import { motion } from "framer-motion";
+import Link from "next/link";
+import { Clock, Trash2, User } from "lucide-react";
+import Image from "next/image";
+import toast from "react-hot-toast";
+import StarButton from "@/components/ui/StarButton";
+
+
+function SnippetCard({ snippet }: { snippet: Snippet }) {
+  const { user } = useUser();
+  const deleteSnippet = useMutation(api.snippets.deleteSnippet);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+
+    try {
+      await deleteSnippet({ snippetId: snippet._id });
+    } catch (error) {
+      console.log("Error deleting snippet:", error);
+      toast.error("Error deleting snippet");
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <motion.div
+      layout
+      className="group relative"
+      whileHover={{ y: -2 }}
+      transition={{ duration: 0.2 }}
+    >
+      <Link href={`/snippets/${snippet._id}`} className="h-full block">
+        <div
+          className="relative h-full bg-[#1e1e2e]/80 backdrop-blur-sm rounded-xl 
+          border border-[#313244]/50 hover:border-[#313244] 
+          transition-all duration-300 overflow-hidden"
+        >
+          <div className="p-6">
+            {/* Header */}
+            <div className="flex items-start justify-between mb-4">
+              <div className="flex items-center gap-3">
+                <div className="relative">
+                  <div
+                    className="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg blur opacity-20 
+                  group-hover:opacity-30 transition-all duration-500"
+                    area-hidden="true"
+                  />
+                  <div
+                    className="relative p-2 rounded-lg bg-gradient-to-br from-blue-500/10 to-purple-500/10 group-hover:from-blue-500/20
+                   group-hover:to-purple-500/20 transition-all duration-500"
+                  >
+                    <Image
+                      src={`/${snippet.language}.png`}
+                      alt={`${snippet.language} logo`}
+                      className="w-6 h-6 object-contain relative z-10"
+                      width={24}
+                      height={24}
+                    />
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <span className="px-3 py-1 bg-blue-500/10 text-blue-400 rounded-lg text-xs font-medium">
+                    {snippet.language}
+                  </span>
+                  <div className="flex items-center gap-2 text-xs text-gray-500">
+                    <Clock className="size-3" />
+                    {new Date(snippet._creationTime).toLocaleDateString()}
+                  </div>
+                </div>
+              </div>
+              <div
+                className="absolute top-5 right-5 z-10 flex gap-4 items-center"
+                onClick={(e) => e.preventDefault()}
+              >
+                <StarButton snippetId={snippet._id} />
+
+                {user?.id === snippet.userId && (
+                  <div className="z-10" onClick={(e) => e.preventDefault()}>
+                    <button
+                      onClick={handleDelete}
+                      disabled={isDeleting}
+                      className={`group flex items-center gap-1.5 px-3 py-1.5 rounded-lg transition-all duration-200
+                                  ${
+                                    isDeleting
+                                      ? "bg-red-500/20 text-red-400 cursor-not-allowed"
+                                      : "bg-gray-500/10 text-gray-400 hover:bg-red-500/10 hover:text-red-400"
+                                  }
+                                `}
+                    >
+                      {isDeleting ? (
+                        <div className="size-3.5 border-2 border-red-400/30 border-t-red-400 rounded-full animate-spin" />
+                      ) : (
+                        <Trash2 className="size-3.5" />
+                      )}
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Content */}
+            <div className="space-y-4">
+              <div>
+                <h2 className="text-xl font-semibold text-white mb-2 line-clamp-1 group-hover:text-blue-400 transition-colors">
+                  {snippet.title}
+                </h2>
+                <div className="flex items-center gap-3 text-sm text-gray-400">
+                  <div className="flex items-center gap-2">
+                    <div className="p-1 rounded-md bg-gray-800/50">
+                      <User className="size-3" />
+                    </div>
+                    <span className="truncate max-w-[150px]">{snippet.userName}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="relative group/code">
+                <div className="absolute inset-0 bg-gradient-to-br from-blue-500/15 to-purple-500/5 rounded-lg opacity-0 group-hover/code:opacity-100 transition-all" />
+                <pre className="relative bg-black/30 rounded-lg p-4 overflow-hidden text-sm text-gray-300 font-mono line-clamp-3">
+                  {snippet.code}
+                </pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Link>
+    </motion.div>
+  );
+}
+export default SnippetCard;
\ No newline at end of file
diff --git a/src/app/snippets/_components/SnippetPageSkeleton.tsx b/src/app/snippets/_components/SnippetPageSkeleton.tsx
new file mode 100644
index 0000000..9f1b15f
--- /dev/null
+++ b/src/app/snippets/_components/SnippetPageSkeleton.tsx
@@ -0,0 +1,83 @@
+const CardSkeleton = () => (
+    <div className="relative group">
+      <div className="bg-[#1e1e2e]/80 rounded-xl border border-[#313244]/50 overflow-hidden h-[280px]">
+        <div className="p-6 space-y-4">
+          {/* Header shimmer */}
+          <div className="flex items-start justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-lg bg-gray-800 animate-pulse" />
+              <div className="space-y-2">
+                <div className="w-24 h-6 bg-gray-800 rounded-lg animate-pulse" />
+                <div className="w-20 h-4 bg-gray-800 rounded-lg animate-pulse" />
+              </div>
+            </div>
+            <div className="w-16 h-8 bg-gray-800 rounded-lg animate-pulse" />
+          </div>
+  
+          {/* Title shimmer */}
+          <div className="space-y-2">
+            <div className="w-3/4 h-7 bg-gray-800 rounded-lg animate-pulse" />
+            <div className="w-1/2 h-5 bg-gray-800 rounded-lg animate-pulse" />
+          </div>
+  
+          {/* Code block shimmer */}
+          <div className="space-y-2 bg-black/30 rounded-lg p-4">
+            <div className="w-full h-4 bg-gray-800 rounded animate-pulse" />
+            <div className="w-3/4 h-4 bg-gray-800 rounded animate-pulse" />
+            <div className="w-1/2 h-4 bg-gray-800 rounded animate-pulse" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+  
+  export default function SnippetsPageSkeleton() {
+    return (
+      <div className="min-h-screen bg-[#0a0a0f]">
+        {/* Ambient background with loading pulse */}
+        <div className="fixed inset-0 flex items-center justify-center pointer-events-none overflow-hidden">
+          <div className="absolute top-[20%] -left-1/4 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl" />
+          <div className="absolute top-[20%] -right-1/4 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl" />
+        </div>
+  
+        {/* Hero Section Skeleton */}
+        <div className="relative max-w-7xl mx-auto px-4 py-12">
+          <div className="text-center max-w-3xl mx-auto mb-16 space-y-6">
+            <div className="w-48 h-8 bg-gray-800 rounded-full mx-auto animate-pulse" />
+            <div className="w-96 h-12 bg-gray-800 rounded-xl mx-auto animate-pulse" />
+            <div className="w-72 h-6 bg-gray-800 rounded-lg mx-auto animate-pulse" />
+          </div>
+  
+          {/* Search and Filters Skeleton */}
+          <div className="max-w-5xl mx-auto mb-12 space-y-6">
+            {/* Search bar */}
+            <div className="relative">
+              <div className="w-full h-14 bg-[#1e1e2e]/80 rounded-xl border border-[#313244] animate-pulse" />
+            </div>
+  
+            {/* Language filters */}
+            <div className="flex flex-wrap gap-2">
+              {[...Array(6)].map((_, i) => (
+                <div
+                  key={i}
+                  className="w-24 h-8 bg-gray-800 rounded-lg animate-pulse"
+                  style={{
+                    animationDelay: `${i * 100}ms`,
+                  }}
+                />
+              ))}
+            </div>
+          </div>
+  
+          {/* Grid Skeleton */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {[...Array(6)].map((_, i) => (
+              <div key={i}>
+                <CardSkeleton />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
\ No newline at end of file
diff --git a/src/app/snippets/page.tsx b/src/app/snippets/page.tsx
new file mode 100644
index 0000000..5f237c3
--- /dev/null
+++ b/src/app/snippets/page.tsx
@@ -0,0 +1,227 @@
+"use client";
+
+import { useQuery } from "convex/react";
+import React from "react";
+import { api } from "../../../convex/_generated/api";
+import SnippetsPageSkeleton from "./_components/SnippetPageSkeleton";
+import NavigationHeader from "@/components/ui/NavigationHeader";
+import { AnimatePresence, motion } from "framer-motion";
+import { BookOpen, Code, Grid, Layers, Search, Tag, X } from "lucide-react";
+import SnippetCard from "./_components/SnippetCard";
+
+function SnippetsPage() {
+  const snippets = useQuery(api.snippets.getSnippets);
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [selectedLanguage, setSelectedLanguage] = React.useState<string | null>(
+    null
+  );
+  const [view, setView] = React.useState<"grid" | "list">("grid");
+
+  if (snippets === undefined) {
+    return (
+      <div className="min-h-screen">
+        <NavigationHeader />
+        <SnippetsPageSkeleton />
+      </div>
+    );
+  }
+
+  const languages = [...new Set(snippets.map((s) => s.language))];
+  const popularLanguages = languages.slice(0, 5);
+
+  const filteredSnippets = snippets.filter((snippet) => {
+    const matchesSearch =
+      snippet.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      snippet.language.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      snippet.userName.toLowerCase().includes(searchQuery.toLowerCase());
+
+    const matchesLanguage =
+      !selectedLanguage || snippet.language === selectedLanguage;
+
+    return matchesSearch && matchesLanguage;
+  });
+
+  return (
+    <div className="min-h-screen bg-[#0a0a0f]">
+      <NavigationHeader />
+      <div className="relative max-w-7xl mx-auto px-4 py-12">
+        <div className="text-center max-w-3xl mx-auto mb-16">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-gradient-to-r
+             from-blue-500/10 to-purple-500/10 text-sm text-gray-400 mb-6"
+          >
+            <BookOpen className="w-4 h-4" />
+            Community Code Library
+          </motion.div>
+          <motion.h1
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.1 }}
+            className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-100 to-gray-300 text-transparent bg-clip-text mb-6"
+          >
+            Discover & Share Code Snippets
+          </motion.h1>
+          <motion.p
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.2 }}
+            className="text-lg text-gray-400 mb-8"
+          >
+            Explore a curated collection of code snippets from the community
+          </motion.p>
+        </div>
+
+     
+        <div className="relative max-w-5xl mx-auto mb-12 space-y-6">
+          {/* Search */}
+          <div className="relative group">
+            <div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl blur-xl opacity-0 group-hover:opacity-100 transition-all duration-500" />
+            <div className="relative flex items-center">
+              <Search className="absolute left-4 w-5 h-5 text-gray-400" />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search snippets by title, language, or author..."
+                className="w-full pl-12 pr-4 py-4 bg-[#1e1e2e]/80 hover:bg-[#1e1e2e] text-white
+                  rounded-xl border border-[#313244] hover:border-[#414155] transition-all duration-200
+                  placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500/50"
+              />
+            </div>
+          </div>
+
+          {/* Filters Bar */}
+          <div className="flex flex-wrap items-center gap-4">
+            <div className="flex items-center gap-2 px-4 py-2 bg-[#1e1e2e] rounded-lg ring-1 ring-gray-800">
+              <Tag className="w-4 h-4 text-gray-400" />
+              <span className="text-sm text-gray-400">Languages:</span>
+            </div>
+
+            {popularLanguages.map((lang) => (
+              <button
+                key={lang}
+                onClick={() =>
+                  setSelectedLanguage(lang === selectedLanguage ? null : lang)
+                }
+                className={`
+                    group relative px-3 py-1.5 rounded-lg transition-all duration-200
+                    ${
+                      selectedLanguage === lang
+                        ? "text-blue-400 bg-blue-500/10 ring-2 ring-blue-500/50"
+                        : "text-gray-400 hover:text-gray-300 bg-[#1e1e2e] hover:bg-[#262637] ring-1 ring-gray-800"
+                    }
+                  `}
+              >
+                <div className="flex items-center gap-2">
+                  <img
+                    src={`/${lang}.png`}
+                    alt={lang}
+                    className="w-4 h-4 object-contain"
+                  />
+                  <span className="text-sm">{lang}</span>
+                </div>
+              </button>
+            ))}
+
+            {selectedLanguage && (
+              <button
+                onClick={() => setSelectedLanguage(null)}
+                className="flex items-center gap-1 px-2 py-1 text-xs text-gray-400 hover:text-gray-300 transition-colors"
+              >
+                <X className="w-3 h-3" />
+                Clear
+              </button>
+            )}
+
+            <div className="ml-auto flex items-center gap-3">
+              <span className="text-sm text-gray-500">
+                {filteredSnippets.length} snippets found
+              </span>
+
+              {/* View Toggle */}
+              <div className="flex items-center gap-1 p-1 bg-[#1e1e2e] rounded-lg ring-1 ring-gray-800">
+                <button
+                  onClick={() => setView("grid")}
+                  className={`p-2 rounded-md transition-all ${
+                    view === "grid"
+                      ? "bg-blue-500/20 text-blue-400"
+                      : "text-gray-400 hover:text-gray-300 hover:bg-[#262637]"
+                  }`}
+                >
+                  <Grid className="w-4 h-4" />
+                </button>
+                <button
+                  onClick={() => setView("list")}
+                  className={`p-2 rounded-md transition-all ${
+                    view === "list"
+                      ? "bg-blue-500/20 text-blue-400"
+                      : "text-gray-400 hover:text-gray-300 hover:bg-[#262637]"
+                  }`}
+                >
+                  <Layers className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+            <motion.div
+          className={`grid gap-6 ${
+            view === "grid"
+              ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+              : "grid-cols-1 max-w-3xl mx-auto"
+          }`}
+          layout
+        >
+          <AnimatePresence mode="popLayout">
+            {filteredSnippets.map((snippet) => (
+              <SnippetCard key={snippet._id} snippet={snippet} />
+            ))}
+          </AnimatePresence>
+        </motion.div>
+
+        {/* edge case: empty state */}
+        {filteredSnippets.length === 0 && (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            className="relative max-w-md mx-auto mt-20 p-8 rounded-2xl overflow-hidden"
+          >
+            <div className="text-center">
+              <div
+                className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br 
+                from-blue-500/10 to-purple-500/10 ring-1 ring-white/10 mb-6"
+              >
+                <Code className="w-8 h-8 text-gray-400" />
+              </div>
+              <h3 className="text-xl font-medium text-white mb-3">No snippets found</h3>
+              <p className="text-gray-400 mb-6">
+                {searchQuery || selectedLanguage
+                  ? "Try adjusting your search query or filters"
+                  : "Be the first to share a code snippet with the community"}
+              </p>
+
+              {(searchQuery || selectedLanguage) && (
+                <button
+                  onClick={() => {
+                    setSearchQuery("");
+                    setSelectedLanguage(null);
+                  }}
+                  className="inline-flex items-center gap-2 px-4 py-2 bg-[#262637] text-gray-300 hover:text-white rounded-lg 
+                    transition-colors"
+                >
+                  <X className="w-4 h-4" />
+                  Clear all filters
+                </button>
+              )}
+            </div>
+          </motion.div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default SnippetsPage;
diff --git a/src/components/ui/NavigationHeader.tsx b/src/components/ui/NavigationHeader.tsx
new file mode 100644
index 0000000..b970c50
--- /dev/null
+++ b/src/components/ui/NavigationHeader.tsx
@@ -0,0 +1,82 @@
+import HeaderProfileBtn from "@/app/(home)/_components/HeaderProfileBtn";
+import { SignedOut } from "@clerk/nextjs";
+import { Blocks, Code2, Sparkles } from "lucide-react";
+import Link from "next/link";
+
+function NavigationHeader() {
+  return (
+    <div className="sticky top-0 z-50 w-full border-b border-gray-800/50 bg-gray-950/80 backdrop-blur-xl backdrop-saturate-150">
+      <div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 to-purple-500/5" />
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="relative h-16 flex items-center justify-between">
+          <div className="flex items-center gap-8">
+            {/* Logo */}
+            <Link href="/" className="flex items-center gap-3 group relative">
+              {/* logo hover effect */}
+              <div
+                className="absolute -inset-2 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-lg opacity-0 
+              group-hover:opacity-100 transition-all duration-500 blur-xl"
+              />
+
+              {/* Logo */}
+              <div className="relative bg-gradient-to-br from-[#1a1a2e] to-[#0a0a0f] p-2 rounded-xl ring-1 ring-white/10 group-hover:ring-white/20 transition-all">
+                <Blocks className="w-6 h-6 text-blue-400 transform -rotate-6 group-hover:rotate-0 transition-transform duration-500" />
+              </div>
+
+              <div className="relative">
+                <span
+                  className="block text-lg font-semibold bg-gradient-to-r
+                 from-blue-400 via-blue-300 to-purple-400 text-transparent bg-clip-text"
+                >
+                  CodeCraft
+                </span>
+                <span className="block text-xs text-blue-400/60 font-medium">
+                  Interactive Code Editor
+                </span>
+              </div>
+            </Link>
+
+            {/* snippets Link */}
+            <Link
+              href="/snippets"
+              className="relative group flex items-center gap-2 px-4 py-1.5 rounded-lg text-gray-300 bg-gray-800/50 hover:bg-blue-500/10 
+              border border-gray-800 hover:border-blue-500/50 transition-all duration-300 shadow-lg overflow-hidden"
+            >
+              <div
+                className="absolute inset-0 bg-gradient-to-r from-blue-500/10 
+              to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity"
+              />
+              <Code2 className="w-4 h-4 relative z-10 group-hover:rotate-3 transition-transform" />
+              <span className="text-sm font-medium relative z-10 group-hover:text-white transition-colors">
+                Snippets
+              </span>
+            </Link>
+          </div>
+
+          {/* right rection */}
+          <div className="flex items-center gap-4">
+            <SignedOut>
+              <Link
+                href="/pricing"
+                className="flex items-center gap-2 px-4 py-1.5 rounded-lg border border-amber-500/20
+                 hover:border-amber-500/40 bg-gradient-to-r from-amber-500/10 
+                to-orange-500/10 hover:from-amber-500/20 hover:to-orange-500/20 transition-all 
+                duration-300"
+              >
+                <Sparkles className="w-4 h-4 text-amber-400 hover:text-amber-300" />
+                <span className="text-sm font-medium text-amber-400/90 hover:text-amber-300">
+                  Pro
+                </span>
+              </Link>
+            </SignedOut>
+
+            {/* profile button */}
+            <HeaderProfileBtn />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default NavigationHeader;
\ No newline at end of file
diff --git a/src/components/ui/StarButton.tsx b/src/components/ui/StarButton.tsx
new file mode 100644
index 0000000..f50c2a6
--- /dev/null
+++ b/src/components/ui/StarButton.tsx
@@ -0,0 +1,39 @@
+import { useAuth } from "@clerk/nextjs";
+import { useMutation, useQuery } from "convex/react";
+import { Star } from "lucide-react";
+import { api } from "../../../convex/_generated/api";
+import { Id } from "../../../convex/_generated/dataModel";
+
+function StarButton({ snippetId }: { snippetId: Id<"snippets"> }) {
+  const { isSignedIn } = useAuth();
+
+  const isStarred = useQuery(api.snippets.isSnippetStarred, { snippetId });
+  const starCount = useQuery(api.snippets.getSnippetStarCount, { snippetId });
+  const star = useMutation(api.snippets.starSnippet);
+
+  const handleStar = async () => {
+    if (!isSignedIn) return;
+    await star({ snippetId });
+  };
+
+  return (
+    <button
+      className={`group flex items-center gap-1.5 px-3 py-1.5 rounded-lg 
+    transition-all duration-200 ${
+      isStarred
+        ? "bg-yellow-500/10 text-yellow-500 hover:bg-yellow-500/20"
+        : "bg-gray-500/10 text-gray-400 hover:bg-gray-500/20"
+    }`}
+      onClick={handleStar}
+    >
+      <Star
+        className={`w-4 h-4 ${isStarred ? "fill-yellow-500" : "fill-none group-hover:fill-gray-400"}`}
+      />
+      <span className={`text-xs font-medium ${isStarred ? "text-yellow-500" : "text-gray-400"}`}>
+        {starCount}
+      </span>
+    </button>
+  );
+}
+
+export default StarButton;
\ No newline at end of file