diff --git a/bun.lock b/bun.lock
index 1f32d627..c2683020 100644
--- a/bun.lock
+++ b/bun.lock
@@ -7,6 +7,7 @@
         "fumadocs-core": "15.3.1",
         "fumadocs-mdx": "11.6.3",
         "fumadocs-ui": "15.3.1",
+        "lucide-react": "^0.525.0",
         "next": "15.3.1",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
@@ -858,6 +859,8 @@
 
     "lru-cache": ["lru-cache@11.1.0", "", {}, "sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A=="],
 
+    "lucide-react": ["lucide-react@0.525.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ=="],
+
     "magic-string": ["magic-string@0.30.17", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } }, "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA=="],
 
     "markdown-extensions": ["markdown-extensions@2.0.0", "", {}, "sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q=="],
diff --git a/next.config.mjs b/next.config.mjs
index 457dcf29..50894e97 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,4 @@
-import { createMDX } from 'fumadocs-mdx/next';
+import { createMDX } from "fumadocs-mdx/next";
 
 const withMDX = createMDX();
 
diff --git a/package.json b/package.json
index a6584e02..8730daeb 100644
--- a/package.json
+++ b/package.json
@@ -9,12 +9,13 @@
     "postinstall": "fumadocs-mdx"
   },
   "dependencies": {
+    "fumadocs-core": "15.3.1",
+    "fumadocs-mdx": "11.6.3",
+    "fumadocs-ui": "15.3.1",
+    "lucide-react": "^0.525.0",
     "next": "15.3.1",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "fumadocs-ui": "15.3.1",
-    "fumadocs-core": "15.3.1",
-    "fumadocs-mdx": "11.6.3"
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
     "@types/node": "22.15.12",
diff --git a/source.config.ts b/source.config.ts
index 866a32c7..7f75bc1b 100644
--- a/source.config.ts
+++ b/source.config.ts
@@ -3,7 +3,7 @@ import {
   defineDocs,
   frontmatterSchema,
   metaSchema,
-} from 'fumadocs-mdx/config';
+} from "fumadocs-mdx/config";
 
 // You can customise Zod schemas for frontmatter and `meta.json` here
 // see https://fumadocs.vercel.app/docs/mdx/collections#define-docs
diff --git a/src/app/(home)/layout.tsx b/src/app/(home)/layout.tsx
deleted file mode 100644
index 41784fd8..00000000
--- a/src/app/(home)/layout.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { ReactNode } from 'react';
-import { HomeLayout } from 'fumadocs-ui/layouts/home';
-import { baseOptions } from '@/app/layout.config';
-
-export default function Layout({ children }: { children: ReactNode }) {
-  return (
-    <HomeLayout
-      {...baseOptions}
-      links={[
-        {
-          text: 'Documentation',
-          url: '/docs',
-        },
-      ]}
-    >
-      {children}
-    </HomeLayout>
-  );
-}
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
deleted file mode 100644
index e5b59f4d..00000000
--- a/src/app/(home)/page.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import Link from 'next/link';
-
-export default function HomePage() {
-  return (
-    <main className="flex flex-1 flex-col justify-center text-center">
-      <h1 className="mb-4 text-2xl font-bold">Hello World</h1>
-      <p className="text-fd-muted-foreground">
-        You can open{' '}
-        <Link
-          href="/docs"
-          className="text-fd-foreground font-semibold underline"
-        >
-          /docs
-        </Link>{' '}
-        and see the documentation.
-      </p>
-    </main>
-  );
-}
diff --git a/src/app/(site)/layout.tsx b/src/app/(site)/layout.tsx
new file mode 100644
index 00000000..5fe5aa12
--- /dev/null
+++ b/src/app/(site)/layout.tsx
@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import { HomeLayout } from "fumadocs-ui/layouts/home";
+import { baseOptions } from "@/app/layout.config";
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <HomeLayout
+      {...baseOptions}
+      links={[
+        {
+          text: "Documentation",
+          url: "/docs",
+        },
+        {
+          text: "Programs",
+          url: "/programs",
+        },
+      ]}
+    >
+      {children}
+    </HomeLayout>
+  );
+}
diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
new file mode 100644
index 00000000..ef62c6e1
--- /dev/null
+++ b/src/app/(site)/page.tsx
@@ -0,0 +1,28 @@
+import Link from "next/link";
+
+export default function HomePage() {
+  return (
+    <main className="flex flex-1 flex-col justify-center text-center">
+      <h1 className="text-5xl font-extrabold leading-none tracking-tight text-gray-900 dark:text-white sm:text-6xl lg:text-7xl max-w-6xl mx-auto">
+        Learn{" "}
+        <span className="bg-gradient-to-br from-green-400 to-cyan-500 bg-clip-text font-extrabold text-transparent">
+          Java
+        </span>{" "}
+        programming very fast and easily with{" "}
+        <span className="bg-gradient-to-br from-sky-400 to-indigo-500 bg-clip-text font-extrabold text-transparent">
+          Javaistic.
+        </span>
+      </h1>
+      <p className="text-fd-muted-foreground">
+        You can open{" "}
+        <Link
+          href="/docs/installation"
+          className="text-fd-foreground font-semibold underline"
+        >
+          /docs/installation
+        </Link>{" "}
+        and see the documentation.
+      </p>
+    </main>
+  );
+}
diff --git a/src/app/docs/[[...slug]]/page.tsx b/src/app/docs/[[...slug]]/page.tsx
index 3cb6d70a..88c433df 100644
--- a/src/app/docs/[[...slug]]/page.tsx
+++ b/src/app/docs/[[...slug]]/page.tsx
@@ -1,13 +1,13 @@
-import { source } from '@/lib/source';
+import { source } from "@/lib/source";
 import {
   DocsPage,
   DocsBody,
   DocsDescription,
   DocsTitle,
-} from 'fumadocs-ui/page';
-import { notFound } from 'next/navigation';
-import { createRelativeLink } from 'fumadocs-ui/mdx';
-import { getMDXComponents } from '@/mdx-components';
+} from "fumadocs-ui/page";
+import { notFound } from "next/navigation";
+import { createRelativeLink } from "fumadocs-ui/mdx";
+import { getMDXComponents } from "@/mdx-components";
 
 export default async function Page(props: {
   params: Promise<{ slug?: string[] }>;
@@ -19,7 +19,14 @@ export default async function Page(props: {
   const MDXContent = page.data.body;
 
   return (
-    <DocsPage toc={page.data.toc} full={page.data.full}>
+    <DocsPage
+      toc={page.data.toc}
+      tableOfContent={{
+        style: "clerk",
+        single: false,
+      }}
+      full={page.data.full}
+    >
       <DocsTitle>{page.data.title}</DocsTitle>
       <DocsDescription>{page.data.description}</DocsDescription>
       <DocsBody>
diff --git a/src/app/docs/layout.tsx b/src/app/docs/layout.tsx
index a91d5585..39a1aed2 100644
--- a/src/app/docs/layout.tsx
+++ b/src/app/docs/layout.tsx
@@ -1,7 +1,7 @@
-import { DocsLayout } from 'fumadocs-ui/layouts/docs';
-import type { ReactNode } from 'react';
-import { baseOptions } from '@/app/layout.config';
-import { source } from '@/lib/source';
+import { DocsLayout } from "fumadocs-ui/layouts/docs";
+import type { ReactNode } from "react";
+import { baseOptions } from "@/app/layout.config";
+import { source } from "@/lib/source";
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
diff --git a/src/app/global.css b/src/app/global.css
index 50b3bc29..7a3f17a6 100644
--- a/src/app/global.css
+++ b/src/app/global.css
@@ -1,3 +1,3 @@
-@import 'tailwindcss';
-@import 'fumadocs-ui/css/neutral.css';
-@import 'fumadocs-ui/css/preset.css';
+@import "tailwindcss";
+@import "fumadocs-ui/css/vitepress.css";
+@import "fumadocs-ui/css/preset.css";
diff --git a/src/app/layout.config.tsx b/src/app/layout.config.tsx
index d1620b42..164bb297 100644
--- a/src/app/layout.config.tsx
+++ b/src/app/layout.config.tsx
@@ -19,7 +19,7 @@ export const baseOptions: BaseLayoutProps = {
         >
           <circle cx={12} cy={12} r={12} fill="currentColor" />
         </svg>
-        My App
+        Javaistic
       </>
     ),
   },
diff --git a/src/lib/source.ts b/src/lib/source.ts
index dedc4be8..4e9580d3 100644
--- a/src/lib/source.ts
+++ b/src/lib/source.ts
@@ -1,9 +1,18 @@
-import { docs } from '@/.source';
-import { loader } from 'fumadocs-core/source';
+import { docs } from "@/.source";
+import { loader } from "fumadocs-core/source";
+import { icons } from "lucide-react";
+import { createElement } from "react";
 
 // See https://fumadocs.vercel.app/docs/headless/source-api for more info
 export const source = loader({
   // it assigns a URL to your pages
-  baseUrl: '/docs',
+  baseUrl: "/docs",
   source: docs.toFumadocsSource(),
+  icon(icon) {
+    if (!icon) {
+      // You may set a default icon
+      return;
+    }
+    if (icon in icons) return createElement(icons[icon as keyof typeof icons]);
+  },
 });
diff --git a/src/mdx-components.tsx b/src/mdx-components.tsx
index d3fbb13f..250d1ba6 100644
--- a/src/mdx-components.tsx
+++ b/src/mdx-components.tsx
@@ -1,5 +1,5 @@
-import defaultMdxComponents from 'fumadocs-ui/mdx';
-import type { MDXComponents } from 'mdx/types';
+import defaultMdxComponents from "fumadocs-ui/mdx";
+import type { MDXComponents } from "mdx/types";
 
 // use this function to get MDX components, you will need it for rendering MDX
 export function getMDXComponents(components?: MDXComponents): MDXComponents {