diff --git a/src/app/bot/[botId]/page.tsx b/src/app/bot/[botId]/page.tsx
new file mode 100644
index 0000000..8ebcf27
--- /dev/null
+++ b/src/app/bot/[botId]/page.tsx
@@ -0,0 +1,230 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import { useParams } from "next/navigation";
+import { ExternalLink, MessageCircle, Star, Users } from "lucide-react";
+
+export default function BotDetailPage() {
+  const params = useParams();
+  const botId = params.botId as string;
+
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Directory", id: "/directory" },
+    { name: "Categories", id: "categories" },
+    { name: "Submit Bot", id: "/submit" },
+    { name: "Contact", id: "contact" },
+  ];
+
+  const footerColumns = [
+    {
+      items: [
+        { label: "Home", href: "/" },
+        { label: "Directory", href: "/directory" },
+        { label: "Categories", href: "categories" },
+      ],
+    },
+    {
+      items: [
+        { label: "Submit Bot", href: "/submit" },
+        { label: "Contact", href: "contact" },
+        { label: "FAQ", href: "#faq" },
+      ],
+    },
+    {
+      items: [
+        { label: "Privacy Policy", href: "#privacy" },
+        { label: "Terms of Service", href: "#terms" },
+        { label: "Cookie Policy", href: "#cookies" },
+      ],
+    },
+    {
+      items: [
+        { label: "Twitter", href: "https://twitter.com" },
+        { label: "Discord", href: "https://discord.com" },
+        { label: "GitHub", href: "https://github.com" },
+      ],
+    },
+  ];
+
+  // Mock bot data - in a real app, this would come from a database
+  const botData: Record<string, any> = {
+    "ai-chat-master": {
+      name: "AI Chat Master",      username: "@aichatmaster",      category: "AI",      rating: 4.8,
+      reviews: 1250,
+      users: "50K+",      description: "Advanced AI-powered chatbot with natural language processing. Get instant answers to your questions, have meaningful conversations, and explore endless possibilities with cutting-edge AI technology.",      features: [
+        "Natural language processing",        "Multi-language support",        "Instant responses",        "Learning capabilities",        "Context awareness",        "24/7 availability"],
+      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-telegram-bot-interface-screenshot-show-1773243153207-c6149c84.png"},
+    "music-playlist-manager": {
+      name: "Music Playlist Manager",      username: "@musicplaylistmanager",      category: "Music",      rating: 4.6,
+      reviews: 980,
+      users: "35K+",      description: "Control your Spotify and music streaming with ease. Create, manage, and share playlists directly from Telegram. Discover new music and enjoy seamless integration with your favorite streaming services.",      features: [
+        "Spotify integration",        "Playlist management",        "Music discovery",        "Queue management",        "Sharing capabilities",        "Real-time sync"],
+      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-music-telegram-bot-interface-showing-p-1773243148514-249cc2c5.png"},
+    "file-download-pro": {
+      name: "File Download Pro",      username: "@filedownloadpro",      category: "Download",      rating: 4.5,
+      reviews: 756,
+      users: "28K+",      description: "Download and manage files from various sources effortlessly. Support for multiple formats, batch downloads, and cloud storage integration. Keep your files organized and accessible.",      features: [
+        "Multi-source downloads",        "Batch processing",        "Cloud storage support",        "File organization",        "Speed optimization",        "Resume capability"],
+      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/a-download-utility-telegram-bot-showing--1773243148459-d9376052.png"},
+  };
+
+  const bot = botData[botId] || {
+    name: "Bot Name",    username: "@botusername",    category: "Utility",    rating: 4.5,
+    reviews: 500,
+    users: "10K+",    description: "This is a sample bot. Check the bot directory for more details.",    features: ["Feature 1", "Feature 2", "Feature 3"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AnzLyhtB5RymsHsflern7ouDVJ/an-education-telegram-bot-showing-course-1773243147669-88bfb7ee.png"};
+
+  const handleOpenInTelegram = () => {
+    // Open bot in Telegram - uses the Telegram deep link protocol
+    window.open(`https://t.me/${bot.username.replace("@", "")}`, "_blank");
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="small"
+      sizing="largeSizeMediumTitles"
+      background="none"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={navItems}
+          brandName="Telegram Bot Hub"
+          bottomLeftText="Bot Details"
+          bottomRightText="support@telegrambothub.com"
+        />
+      </div>
+
+      <div id="bot-detail" data-section="bot-detail" className="min-h-screen pt-32 pb-20">
+        <div className="max-w-4xl mx-auto px-4 md:px-8">
+          {/* Bot Header */}
+          <div className="flex flex-col md:flex-row gap-8 mb-12">
+            {/* Bot Image */}
+            <div className="flex-shrink-0 w-full md:w-64">
+              <img
+                src={bot.imageSrc}
+                alt={bot.name}
+                className="w-full h-64 md:h-80 object-cover rounded-lg"
+              />
+            </div>
+
+            {/* Bot Info */}
+            <div className="flex-1">
+              <h1 className="text-4xl md:text-5xl font-bold mb-2">{bot.name}</h1>
+              <p className="text-xl text-foreground/70 mb-4">{bot.username}</p>
+              <div className="flex flex-wrap gap-4 mb-6">
+                <span className="inline-block px-4 py-2 rounded-full bg-primary-cta/10 text-primary-cta font-semibold">
+                  {bot.category}
+                </span>
+              </div>
+
+              {/* Stats */}
+              <div className="grid grid-cols-3 gap-4 mb-8 py-6 border-y border-foreground/10">
+                <div>
+                  <div className="flex items-center gap-1 mb-1">
+                    <Star size={18} className="fill-yellow-400 text-yellow-400" />
+                    <span className="font-bold text-xl">{bot.rating}</span>
+                  </div>
+                  <p className="text-sm text-foreground/60">{bot.reviews} reviews</p>
+                </div>
+                <div>
+                  <div className="flex items-center gap-1 mb-1">
+                    <Users size={18} />
+                    <span className="font-bold text-xl">{bot.users}</span>
+                  </div>
+                  <p className="text-sm text-foreground/60">Active users</p>
+                </div>
+                <div>
+                  <button
+                    onClick={handleOpenInTelegram}
+                    className="w-full px-4 py-2 bg-primary-cta text-background rounded-lg font-semibold flex items-center justify-center gap-2 hover:opacity-90 transition-opacity"
+                  >
+                    <MessageCircle size={18} />
+                    Open Bot
+                  </button>
+                </div>
+              </div>
+
+              {/* Description */}
+              <p className="text-lg text-foreground/80 mb-6">{bot.description}</p>
+
+              {/* Open in Telegram Button */}
+              <button
+                onClick={handleOpenInTelegram}
+                className="w-full md:w-auto px-8 py-3 bg-primary-cta text-background rounded-lg font-semibold flex items-center justify-center gap-2 hover:opacity-90 transition-opacity mb-4"
+              >
+                <ExternalLink size={20} />
+                Open in Telegram
+              </button>
+            </div>
+          </div>
+
+          {/* Features */}
+          <div className="mb-12">
+            <h2 className="text-3xl font-bold mb-6">Features</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {bot.features.map((feature: string, index: number) => (
+                <div
+                  key={index}
+                  className="p-4 rounded-lg bg-card border border-foreground/10 flex items-start gap-3"
+                >
+                  <div className="flex-shrink-0 w-6 h-6 rounded-full bg-primary-cta/20 flex items-center justify-center mt-0.5">
+                    <svg
+                      className="w-4 h-4 text-primary-cta"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M5 13l4 4L19 7"
+                      />
+                    </svg>
+                  </div>
+                  <span className="text-foreground/80">{feature}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* How to Use */}
+          <div className="bg-card border border-foreground/10 rounded-lg p-8 mb-12">
+            <h2 className="text-3xl font-bold mb-6">How to Use</h2>
+            <ol className="space-y-4 text-lg text-foreground/80">
+              <li>
+                <span className="font-semibold text-foreground">1. Click "Open in Telegram"</span> - This will take you directly to the bot's chat
+              </li>
+              <li>
+                <span className="font-semibold text-foreground">2. Start the Bot</span> - Click the START button or type /start
+              </li>
+              <li>
+                <span className="font-semibold text-foreground">3. Follow Instructions</span> - The bot will guide you through setup and usage
+              </li>
+              <li>
+                <span className="font-semibold text-foreground">4. Explore Features</span> - Type /help to see all available commands
+              </li>
+            </ol>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="Telegram Bot Hub"
+          columns={footerColumns}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file