diff --git a/website/app/docs/layout.tsx b/website/app/docs/layout.tsx
index 04dac33..4b05390 100644
--- a/website/app/docs/layout.tsx
+++ b/website/app/docs/layout.tsx
@@ -7,8 +7,8 @@ interface DocsLayoutProps {
 
 export default function DocsLayout({ children }: DocsLayoutProps) {
   return (
-    <div className="flex min-h-screen">
-      <aside className="fixed left-0 top-0 z-30 h-screen w-[350px] border-r bg-background">
+    <div className="flex min-h-screen max-w-screen-xl mx-auto">
+      <aside className="fixed left-0 top-0 z-30 h-screen w-[380px] border-r bg-background">
         <ScrollArea className="h-full">
           <Sidebar />
         </ScrollArea>
diff --git a/website/app/docs/page.tsx b/website/app/docs/page.tsx
index 7a50370..37edfd3 100644
--- a/website/app/docs/page.tsx
+++ b/website/app/docs/page.tsx
@@ -2,6 +2,7 @@ import { Metadata } from "next"
 import { DocsHeader } from "@/components/docs/docs-header"
 import { Features } from "@/components/docs/features"
 import { Core } from "@/components/docs/core"
+import { Introduction } from "@/components/docs/Introduction"
 
 export const metadata: Metadata = {
   title: "Documentation - VintLang",
@@ -11,6 +12,7 @@ export const metadata: Metadata = {
 export default function DocsPage() {
   return (
     <div className="space-y-10">
+      <Introduction/>
       <DocsHeader />
       <Features />
       <Core />
diff --git a/website/components/docs/Installation.tsx b/website/components/docs/Installation.tsx
new file mode 100644
index 0000000..44dc402
--- /dev/null
+++ b/website/components/docs/Installation.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import SectionHeader from './SectionHeader'
+
+const Installation = () => {
+  return (
+    <div className="" id='installation'>
+        <SectionHeader title="Installation"/>
+    </div>
+  )
+}
+
+export default Installation
\ No newline at end of file
diff --git a/website/components/docs/Introduction.tsx b/website/components/docs/Introduction.tsx
new file mode 100644
index 0000000..81d6260
--- /dev/null
+++ b/website/components/docs/Introduction.tsx
@@ -0,0 +1,18 @@
+import SectionHeader from "./SectionHeader";
+
+export function Introduction() {
+    return (
+      <div className="space-y-4 mt-10" id="">
+        <SectionHeader title="Introduction"/>
+        <p className="text-xl text-muted-foreground">
+          VintLang is a lightweight, expressive programming language designed to simplify modern development. 
+          With its clean syntax and powerful core features, VintLang empowers developers to build anything from quick scripts 
+          to robust enterprise-grade systems effortlessly.
+        </p>
+        <p className="text-xl text-muted-foreground">
+          Whether you&apos;re automating tasks, developing APIs, or crafting interactive applications, VintLang&apos;s modular and atomic 
+          principles ensure scalability and maintainability for projects of any size.
+        </p>
+      </div>
+    );
+}
diff --git a/website/components/docs/SectionHeader.tsx b/website/components/docs/SectionHeader.tsx
new file mode 100644
index 0000000..2a691b2
--- /dev/null
+++ b/website/components/docs/SectionHeader.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+interface SectionHeaderProps{
+    title:string
+}
+
+const SectionHeader = ({title}:SectionHeaderProps) => {
+  return (
+    <h1 className="text-6xl font-bold tracking-tight dark:text-neutral-300">
+      {title}
+    </h1>
+  );
+};
+
+export default SectionHeader;
diff --git a/website/components/docs/docs-header.tsx b/website/components/docs/docs-header.tsx
index 8417d7e..66be7a0 100644
--- a/website/components/docs/docs-header.tsx
+++ b/website/components/docs/docs-header.tsx
@@ -1,7 +1,9 @@
+import SectionHeader from "./SectionHeader";
+
 export function DocsHeader() {
     return (
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold tracking-tight">Documentation</h1>
+      <div className="space-y-4 mt-10" id="documentation">
+        <SectionHeader title="Documentation"/>
         <p className="text-xl text-muted-foreground">
           Welcome to the VintLang v2 documentation! VintLang&apos;s atomic approach to programming
           scales from a simple <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">useState</code> replacement
@@ -9,6 +11,6 @@ export function DocsHeader() {
         </p>
       </div>
     )
-  }
+}
   
   
\ No newline at end of file
diff --git a/website/components/docs/sidebar.tsx b/website/components/docs/sidebar.tsx
index 0b168a6..88bf70b 100644
--- a/website/components/docs/sidebar.tsx
+++ b/website/components/docs/sidebar.tsx
@@ -5,9 +5,14 @@ import { usePathname } from "next/navigation"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Search } from "@/components/docs/search"
-import { FileText, BookOpen, HelpCircle, Github,ArrowDownToLine } from 'lucide-react'
+import { Hand,FileText, BookOpen, HelpCircle, Github,ArrowDownToLine } from 'lucide-react'
 
 const navigation = [
+  {
+    name: "Introduction",
+    href: "#",
+    icon: Hand,
+  },
   {
     name: "Installation",
     href: "#installation",
@@ -28,24 +33,24 @@ const navigation = [
     href: "#sponsor",
     icon: HelpCircle,
   },
-  {
-    name: "Repository",
-    href: "https://github.com/ekilie/vint-lang",
-    icon: Github,
-  },
+  // {
+  //   name: "Repository",
+  //   href: "https://github.com/ekilie/vint-lang",
+  //   icon: Github,
+  // },
 ]
 
 export function Sidebar() {
   const pathname = usePathname()
 
   return (
-    <div className="flex h-full flex-col px-6 py-8">
-      <div className="mb-8">
+    <div className="flex h-full flex-col p-14">
+      <div className="mb-6">
         <Link href="/" className="flex items-center space-x-2">
-          <span className="text-8xl text-neutral-300 font-bold">Vint</span>
+          <span className="text-9xl text-neutral-300 font-bold">Vint</span>
         </Link>
         <p className="mt-1 text-sm text-muted-foreground">
-          Primitive and flexible state management for React
+          Modern Programming made simple
         </p>
       </div>
       {/* <Search /> */}
@@ -57,7 +62,7 @@ export function Sidebar() {
               key={item.name}
               variant={isActive ? "secondary" : "ghost"}
               className={cn(
-                "mb-1 w-full justify-start shadow-lg",
+                "mb-2 w-full p-6 justify-start shadow-lg rounded-lg border-2",
                 isActive ? "bg-accent" : "hover:bg-accent/50"
               )}
               asChild
@@ -71,18 +76,18 @@ export function Sidebar() {
         })}
       </nav>
       <div className="mt-auto space-y-2 text-xs text-muted-foreground">
-        <p>library by Daishi Kato</p>
-        <p>art by Jessie Waters</p>
-        <p className="flex items-center">
+        <p>Language by Tachera Sasi</p>
+        <p>From <Link href="https://ekilie.com">ekilie</Link></p>
+        {/* <p className="flex items-center">
           site by{" "}
           <span className="ml-1">
-            <span className="text-[#FF1CF7]">c</span>
-            <span className="text-[#00FF00]">o</span>
-            <span className="text-[#00FF00]">d</span>
-            <span className="text-[#FF1CF7]">y</span>
-            <span className="text-[#00FF00]">code</span>
+            <span className="text-[#977196]">T</span>
+            <span className="text-[#98aa98]">a</span>
+            <span className="text-[#00FF00]">c</span>
+            <span className="text-[#FF1CF7]">h</span>
+            <span className="text-[#00FF00]">era</span>
           </span>
-        </p>
+        </p> */}
       </div>
     </div>
   )