diff --git a/web/app/components/CTA.tsx b/web/app/components/CTA.tsx
deleted file mode 100644
index 6b2c331..0000000
--- a/web/app/components/CTA.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Button } from "@/components/ui/button"
-
-export default function CTA() {
-  return (
-    <section className="py-20 bg-primary text-white">
-      <div className="container mx-auto text-center">
-        <h2 className="text-3xl font-bold mb-6">Ready to Streamline Your Workflow?</h2>
-        <p className="text-xl mb-8 max-w-2xl mx-auto">
-          Join thousands of teams already using StreamLine to boost their productivity.
-        </p>
-        <Button size="lg" variant="secondary">
-          Start Your Free Trial
-        </Button>
-      </div>
-    </section>
-  )
-}
-
diff --git a/web/app/components/CopyableCode.tsx b/web/app/components/CopyableCode.tsx
deleted file mode 100644
index d043f96..0000000
--- a/web/app/components/CopyableCode.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-"use client"
-
-import type React from "react"
-import { useState } from "react"
-import { Copy, Check } from "lucide-react"
-
-interface CopyableCodeProps {
-  code: string
-}
-
-const CopyableCode: React.FC<CopyableCodeProps> = ({ code }) => {
-  const [isCopied, setIsCopied] = useState(false)
-
-  const copyToClipboard = async () => {
-    try {
-      await navigator.clipboard.writeText(code)
-      setIsCopied(true)
-      setTimeout(() => setIsCopied(false), 2000)
-    } catch (err) {
-      console.error("Failed to copy text: ", err)
-    }
-  }
-
-  return (
-    <div className="relative">
-      <pre className="bg-gray-100 p-4 rounded-md overflow-x-auto">
-        <code>{code}</code>
-      </pre>
-      <button
-        onClick={copyToClipboard}
-        className="absolute top-2 right-2 p-2 bg-white rounded-md shadow-sm hover:bg-gray-100 transition-colors"
-        aria-label="Copy to clipboard"
-      >
-        {isCopied ? <Check className="h-5 w-5 text-green-500" /> : <Copy className="h-5 w-5 text-gray-500" />}
-      </button>
-    </div>
-  )
-}
-
-export default CopyableCode
-
diff --git a/web/app/components/DocSidebar.tsx b/web/app/components/DocSidebar.tsx
deleted file mode 100644
index a91e41d..0000000
--- a/web/app/components/DocSidebar.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import Link from "next/link"
-import { usePathname } from "next/navigation"
-
-const sidebarItems = [
-  { title: "Introduction", href: "/docs/introduction" },
-  { title: "Installation", href: "/docs/installation" },
-  { title: "Getting Started", href: "/docs/getting-started" },
-  { title: "Features", href: "/docs/features" },
-  { title: "API", href: "/docs/api" },
-  { title: "FAQ", href: "/docs/faq" },
-]
-
-export default function DocSidebar() {
-  const pathname = usePathname()
-
-  return (
-    <nav className="w-64 bg-gray-100 p-6">
-      <h2 className="text-lg font-semibold mb-4">Documentation</h2>
-      <ul className="space-y-2">
-        {sidebarItems.map((item) => (
-          <li key={item.href}>
-            <Link
-              href={item.href}
-              className={`block p-2 rounded ${
-                pathname === item.href ? "bg-blue-500 text-white" : "text-gray-700 hover:bg-gray-200"
-              }`}
-            >
-              {item.title}
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </nav>
-  )
-}
-
diff --git a/web/app/components/features.tsx b/web/app/components/features.tsx
deleted file mode 100644
index f37498d..0000000
--- a/web/app/components/features.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { CheckCircle, Zap, Users, TrendingUp } from "lucide-react"
-
-const features = [
-  {
-    icon: <CheckCircle className="h-8 w-8 text-primary" />,
-    title: "Task Management",
-    description: "Organize and prioritize tasks with ease.",
-  },
-  {
-    icon: <Zap className="h-8 w-8 text-primary" />,
-    title: "Real-time Collaboration",
-    description: "Work together seamlessly in real-time.",
-  },
-  {
-    icon: <Users className="h-8 w-8 text-primary" />,
-    title: "Team Communication",
-    description: "Stay connected with built-in messaging.",
-  },
-  {
-    icon: <TrendingUp className="h-8 w-8 text-primary" />,
-    title: "Analytics Dashboard",
-    description: "Track progress and gain insights with powerful analytics.",
-  },
-]
-
-export default function Features() {
-  return (
-    <section id="features" className="py-20 bg-gray-50">
-      <div className="container mx-auto">
-        <h2 className="text-3xl font-bold text-center mb-12">Key Features</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-          {features.map((feature, index) => (
-            <div key={index} className="bg-white p-6 rounded-lg shadow-md">
-              <div className="mb-4">{feature.icon}</div>
-              <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
-              <p className="text-gray-600">{feature.description}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}
-
diff --git a/web/app/components/footer.tsx b/web/app/components/footer.tsx
deleted file mode 100644
index 3f74cc6..0000000
--- a/web/app/components/footer.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import Link from "next/link"
-import { Facebook, Twitter, Instagram, Linkedin } from "lucide-react"
-
-export default function Footer() {
-  return (
-    <footer className="bg-gray-900 text-white py-12">
-      <div className="container mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
-        <div>
-          <h3 className="text-lg font-semibold mb-4">StreamLine</h3>
-          <p className="text-gray-400">Streamlining your workflow, one task at a time.</p>
-        </div>
-        <div>
-          <h4 className="text-lg font-semibold mb-4">Product</h4>
-          <ul className="space-y-2">
-            <li>
-              <Link href="#features" className="text-gray-400 hover:text-white">
-                Features
-              </Link>
-            </li>
-            <li>
-              <Link href="#pricing" className="text-gray-400 hover:text-white">
-                Pricing
-              </Link>
-            </li>
-            <li>
-              <Link href="#" className="text-gray-400 hover:text-white">
-                Integrations
-              </Link>
-            </li>
-          </ul>
-        </div>
-        <div>
-          <h4 className="text-lg font-semibold mb-4">Company</h4>
-          <ul className="space-y-2">
-            <li>
-              <Link href="#" className="text-gray-400 hover:text-white">
-                About Us
-              </Link>
-            </li>
-            <li>
-              <Link href="#" className="text-gray-400 hover:text-white">
-                Careers
-              </Link>
-            </li>
-            <li>
-              <Link href="#" className="text-gray-400 hover:text-white">
-                Contact
-              </Link>
-            </li>
-          </ul>
-        </div>
-        <div>
-          <h4 className="text-lg font-semibold mb-4">Connect</h4>
-          <div className="flex space-x-4">
-            <Link href="#" className="text-gray-400 hover:text-white">
-              <Facebook className="h-6 w-6" />
-            </Link>
-            <Link href="#" className="text-gray-400 hover:text-white">
-              <Twitter className="h-6 w-6" />
-            </Link>
-            <Link href="#" className="text-gray-400 hover:text-white">
-              <Instagram className="h-6 w-6" />
-            </Link>
-            <Link href="#" className="text-gray-400 hover:text-white">
-              <Linkedin className="h-6 w-6" />
-            </Link>
-          </div>
-        </div>
-      </div>
-      <div className="container mx-auto mt-8 pt-8 border-t border-gray-800 text-center text-gray-400">
-        <p>&copy; 2025 StreamLine. All rights reserved.</p>
-      </div>
-    </footer>
-  )
-}
-
diff --git a/web/app/components/header.tsx b/web/app/components/header.tsx
deleted file mode 100644
index 50327b6..0000000
--- a/web/app/components/header.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import Link from "next/link"
-import { Button } from "@/components/ui/button"
-
-export default function Header() {
-  return (
-    <header className="py-4 px-6 bg-white shadow-sm">
-      <div className="container mx-auto flex justify-between items-center">
-        <Link href="/" className="text-2xl font-bold text-primary">
-          StreamLine
-        </Link>
-        <nav className="hidden md:flex space-x-6">
-          <Link href="#features" className="text-gray-600 hover:text-primary">
-            Features
-          </Link>
-          <Link href="#testimonials" className="text-gray-600 hover:text-primary">
-            Testimonials
-          </Link>
-          <Link href="#pricing" className="text-gray-600 hover:text-primary">
-            Pricing
-          </Link>
-        </nav>
-        <Button>Get Started</Button>
-      </div>
-    </header>
-  )
-}
-
diff --git a/web/app/components/hero.tsx b/web/app/components/hero.tsx
deleted file mode 100644
index 3ec585a..0000000
--- a/web/app/components/hero.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Button } from "@/components/ui/button"
-
-export default function Hero() {
-  return (
-    <div className="relative pt-32 pb-20 sm:pt-40 sm:pb-24">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-        <h1 className="text-4xl sm:text-6xl lg:text-7xl font-bold tracking-tight mb-8">
-          Everything App
-          <br />
-          <span className="text-gray-400">for your teams</span>
-        </h1>
-        <p className="max-w-2xl mx-auto text-lg sm:text-xl text-gray-400 mb-10">
-          Huly, an open-source platform, serves as an all-in-one replacement of Linear, Jira, Slack, and Notion.
-        </p>
-        <Button className="relative group px-8 py-6 text-lg bg-gradient-to-r from-primary to-accent hover:opacity-90">
-          <span className="relative z-10">Try it free</span>
-          <div className="absolute inset-0 bg-white/20 blur-lg group-hover:blur-xl transition-all duration-300 opacity-0 group-hover:opacity-100" />
-        </Button>
-      </div>
-    </div>
-  )
-}
-
diff --git a/web/app/components/navbar.tsx b/web/app/components/navbar.tsx
deleted file mode 100644
index d077eda..0000000
--- a/web/app/components/navbar.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import Link from "next/link"
-import { Button } from "@/components/ui/button"
-
-export default function Navbar() {
-  return (
-    <nav className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-md border-b border-white/10">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-between h-16">
-          <div className="flex items-center">
-            <Link
-              href="/"
-              className="text-2xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent"
-            >
-              StreamLine
-            </Link>
-            <div className="hidden md:block ml-10">
-              <div className="flex items-center space-x-8">
-                <Link href="#" className="text-sm text-gray-300 hover:text-white">
-                  Pricing
-                </Link>
-                <Link href="/docs" className="text-sm text-gray-300 hover:text-white">
-                  Docs
-                </Link>
-                <Link href="#" className="text-sm text-gray-300 hover:text-white">
-                  Resources
-                </Link>
-                <Link href="#" className="text-sm text-gray-300 hover:text-white">
-                  Community
-                </Link>
-                <Link href="#" className="text-sm text-gray-300 hover:text-white">
-                  Download
-                </Link>
-              </div>
-            </div>
-          </div>
-          <div className="flex items-center space-x-4">
-            <Button variant="ghost" className="text-sm">
-              Sign In
-            </Button>
-            <Button className="text-sm bg-gradient-to-r from-primary to-accent hover:opacity-90">Get Started</Button>
-          </div>
-        </div>
-      </div>
-    </nav>
-  )
-}
-
diff --git a/web/app/components/pricing.tsx b/web/app/components/pricing.tsx
deleted file mode 100644
index 47bf609..0000000
--- a/web/app/components/pricing.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Check } from "lucide-react"
-import { Button } from "@/components/ui/button"
-
-const plans = [
-  {
-    name: "Basic",
-    price: "$9",
-    features: ["5 team members", "10 projects", "Basic analytics", "Email support"],
-  },
-  {
-    name: "Pro",
-    price: "$29",
-    features: ["Unlimited team members", "Unlimited projects", "Advanced analytics", "Priority support"],
-  },
-  {
-    name: "Enterprise",
-    price: "Custom",
-    features: ["Custom features", "Dedicated account manager", "On-premise deployment", "24/7 phone support"],
-  },
-]
-
-export default function Pricing() {
-  return (
-    <section id="pricing" className="py-20 bg-gray-50">
-      <div className="container mx-auto">
-        <h2 className="text-3xl font-bold text-center mb-12">Choose Your Plan</h2>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {plans.map((plan, index) => (
-            <div key={index} className="bg-white p-8 rounded-lg shadow-md">
-              <h3 className="text-2xl font-bold mb-4">{plan.name}</h3>
-              <p className="text-4xl font-bold mb-6">
-                {plan.price}
-                <span className="text-lg font-normal text-gray-600">/month</span>
-              </p>
-              <ul className="mb-8">
-                {plan.features.map((feature, featureIndex) => (
-                  <li key={featureIndex} className="flex items-center mb-2">
-                    <Check className="h-5 w-5 text-primary mr-2" />
-                    <span>{feature}</span>
-                  </li>
-                ))}
-              </ul>
-              <Button className="w-full" variant={index === 1 ? "default" : "outline"}>
-                {index === 2 ? "Contact Sales" : "Get Started"}
-              </Button>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}
-
diff --git a/web/app/components/productPreview.tsx b/web/app/components/productPreview.tsx
deleted file mode 100644
index b127e56..0000000
--- a/web/app/components/productPreview.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import Image from "next/image"
-
-export default function ProductPreview() {
-  return (
-    <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-20">
-      <div className="relative rounded-lg overflow-hidden border border-white/10 shadow-2xl">
-        <div className="absolute inset-0 bg-gradient-to-tr from-primary/10 via-accent/10 to-transparent" />
-        <Image
-          src="https://sjc.microlink.io/dACoBD81V0jhbU_TaUYiRrOVrhAXOh8TCYVdXmvVaYFIpbvF9B17bU0pnQF3gHfzVAOFzC-nwZVACScUpFYQsg.jpeg"
-          alt="Huly App Interface"
-          width={1200}
-          height={800}
-          className="w-full h-auto"
-        />
-      </div>
-      {/* Glow effect */}
-      <div className="absolute -inset-x-20 top-0 h-[500px] bg-gradient-conic opacity-30 blur-3xl" />
-    </div>
-  )
-}
-
diff --git a/web/app/components/testimonials.tsx b/web/app/components/testimonials.tsx
deleted file mode 100644
index 81fc6ac..0000000
--- a/web/app/components/testimonials.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-const testimonials = [
-  {
-    quote: "StreamLine has revolutionized our team's workflow. It's a game-changer!",
-    author: "Jane Doe",
-    company: "Tech Innovators Inc.",
-  },
-  {
-    quote: "The best project management tool we've ever used. Highly recommended!",
-    author: "John Smith",
-    company: "Creative Solutions LLC",
-  },
-  {
-    quote: "StreamLine helped us increase productivity by 40%. It's incredible!",
-    author: "Emily Johnson",
-    company: "Startup Ventures",
-  },
-]
-
-export default function Testimonials() {
-  return (
-    <section id="testimonials" className="py-20 bg-white">
-      <div className="container mx-auto">
-        <h2 className="text-3xl font-bold text-center mb-12">What Our Customers Say</h2>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {testimonials.map((testimonial, index) => (
-            <div key={index} className="bg-gray-50 p-6 rounded-lg">
-              <p className="text-lg mb-4">"{testimonial.quote}"</p>
-              <p className="font-semibold">{testimonial.author}</p>
-              <p className="text-sm text-gray-600">{testimonial.company}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}
-
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index d3f878f..d08001a 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -2,6 +2,7 @@ import "./globals.css"
 import { Inter } from "next/font/google"
 import Navbar from "@/components/navbar"
 import MouseMoveEffect from "@/components/mouse-move-effect"
+import DocSidebar from "@/components/DocSidebar"
 import type React from "react"
 import type { Metadata } from "next"
 
@@ -66,7 +67,10 @@ export default function RootLayout({
       <body className={`${inter.className} bg-background text-foreground antialiased`}>
         <Navbar />
         <MouseMoveEffect />
-        <div className="pt-16 md:pt-16">{children}</div>
+        <div className="flex flex-col md:flex-row min-h-screen">
+          <DocSidebar />
+          <main className="flex-1 p-4 md:p-6 pt-32 md:pt-6">{children}</main>
+        </div>
       </body>
     </html>
   )
diff --git a/web/components/DocSidebar.tsx b/web/components/DocSidebar.tsx
index 3b684ac..941b0ed 100644
--- a/web/components/DocSidebar.tsx
+++ b/web/components/DocSidebar.tsx
@@ -128,9 +128,9 @@ export default function DocSidebar() {
 
   return (
     <>
-      <div className="md:hidden fixed top-16 left-0 right-0 z-40 bg-gray-100 border-b border-gray-200">
+      <div className="md:hidden fixed top-16 left-0 right-0 z-40 bg-gray-100 border-b border-gray-200 h-12">
         <button
-          className="w-full p-4 text-left flex items-center justify-between"
+          className="w-full h-full px-4 text-left flex items-center justify-between"
           onClick={toggleMobileMenu}
           aria-label="Toggle menu"
         >
@@ -139,7 +139,7 @@ export default function DocSidebar() {
         </button>
       </div>
       <nav
-        className={`fixed md:static top-[104px] left-0 w-full h-[calc(100vh-104px)] md:h-auto md:w-64 bg-gray-100 p-4 md:p-6 transform ${
+        className={`fixed md:static top-[112px] left-0 w-full h-[calc(100vh-112px)] md:h-auto md:w-64 bg-gray-100 p-4 md:p-6 transform ${
           isMobileMenuOpen ? "translate-y-0" : "-translate-y-full"
         } md:translate-y-0 transition-transform duration-300 ease-in-out overflow-y-auto z-30`}
       >
diff --git a/web/public/main.png b/web/public/main.png
index b5378d8..3113beb 100644
Binary files a/web/public/main.png and b/web/public/main.png differ