diff --git a/aria/README.md b/aria/README.md
index abc9aee8d..2c1121c70 100644
--- a/aria/README.md
+++ b/aria/README.md
@@ -4,7 +4,7 @@ The website of GitMega fork from [AriaDocs](https://github.com/nisabmohd/Aria-Do
 
 ### Quick Start
 
-```plaintext
+```bash
 npm install --force
 npm run dev
 ```
diff --git a/aria/app/layout.tsx b/aria/app/layout.tsx
index 232a10953..41b45d32d 100644
--- a/aria/app/layout.tsx
+++ b/aria/app/layout.tsx
@@ -5,7 +5,8 @@ import { Space_Mono, Space_Grotesk } from "next/font/google";
 import { Footer } from "@/components/footer";
 import "@/styles/globals.css";
 
-import { GoogleAnalytics } from '@next/third-parties/google'
+import { GoogleAnalytics } from "@next/third-parties/google";
+import { Analytics } from "@vercel/analytics/react";
 
 const GeistSans = Space_Grotesk({
   subsets: ["latin"],
@@ -51,6 +52,7 @@ export default function RootLayout({
           </main>
           <Footer />
         </ThemeProvider>
+        <Analytics />
       </body>
 
       <GoogleAnalytics gaId="G-WCSCZGFL72" />
diff --git a/aria/contents/docs/getting-started/components/code-block/index.mdx b/aria/contents/docs/getting-started/components/code-block/index.mdx
deleted file mode 100644
index 8b55b8533..000000000
--- a/aria/contents/docs/getting-started/components/code-block/index.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: Code Block
-description: This section previews the Code Block features in markdown.
----
-
-The Code Block in this documentation allows you to display code snippets with optional line numbering and line highlighting.
-
-## Preview
-
-```javascript:main.js showLineNumbers {3-4}
-function isRocketAboutToCrash() {
-    // Check if the rocket is stable
-    if (!isStable()) {
-        NoCrash(); // Prevent the crash
-    }
-}
-```
-
-In this example, line numbers are displayed for lines 1 to 4. You can specify which lines to highlight using the format `{2,3-5}`.
-
-## Usage
-
-You can directly use the following syntax to create a code block with line numbers and highlight specific lines:
-
-````plaintext
-```javascript:main.js showLineNumbers {3-4}
-function isRocketAboutToCrash() {
-    // Check if the rocket is stable
-    if (!isStable()) {
-        NoCrash(); // Prevent the crash
-    }
-}
-```
-````
-
-### Features
-
-- **Line Numbers**: Enable line numbers by adding `showLineNumbers` after the opening backticks.
-- **Highlight Lines**: Specify lines to highlight using curly braces (e.g., `{2,3-5}`).
-- **Syntax Highlighting**: Use the appropriate language for syntax highlighting.
-
diff --git a/aria/contents/docs/getting-started/components/custom/index.mdx b/aria/contents/docs/getting-started/components/custom/index.mdx
deleted file mode 100644
index aedb25203..000000000
--- a/aria/contents/docs/getting-started/components/custom/index.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: Custom Components
-description: How to create custom components for Markdown.
----
-
-To add custom components in AriaDocs, follow these steps:
-
-1. **Create Your Component**: First, create your custom component in the `@components/markdown` folder. For example, you might create a file named `Outlet.tsx`.
-
-2. **Import Your Component**: Next, open the `@lib/markdown.ts` file. This is where you'll register your custom component for use in Markdown.
-
-3. **Add Your Component to the Components Object**: In the `@lib/markdown.ts` file, import your custom component and add it to the `components` object. Here’s how to do it:
-
-```ts
-import Outlet from "@/components/markdown/outlet";
-
-// Add custom components
-const components = {
-  Outlet,
-};
-```
-
-4. **Using Your Custom Component in Markdown**: After registering your component, you can now use it anywhere in your Markdown content. For instance, if your `Outlet` component is designed to display additional information, you can use it as follows:
-
-### Markdown Example
-
-```markdown
-<Outlet>
-  This is some custom content rendered by the Outlet component!
-</Outlet>
-```
-
-### Rendered Output
-
-This will render the content inside the `Outlet` component, allowing you to create reusable and dynamic Markdown content.
-
-
-By following these steps, you can extend the capabilities of your Markdown documentation and create a more engaging user experience.
diff --git a/aria/contents/docs/getting-started/components/image-link/index.mdx b/aria/contents/docs/getting-started/components/image-link/index.mdx
deleted file mode 100644
index c95de605a..000000000
--- a/aria/contents/docs/getting-started/components/image-link/index.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: Image and Link
-description: This section provides an overview of how AriaDocs handles links and images in Markdown.
----
-
-In AriaDocs, all links and images written in Markdown are automatically converted to their respective Next.js components. This allows for better optimization and performance in your application.
-
-## Links
-
-When you create a link in your Markdown, it is converted to the Next.js `Link` component. This enables client-side navigation and improves loading times. Here’s an example of how a Markdown link is transformed:
-
-### Markdown example
-
-```markdown 
-[Visit OpenAI](https://www.openai.com)
-```
-
-### Rendered Output
-
-The above Markdown is converted to:
-
-```jsx
-<Link href="https://www.openai.com" target="_blank" rel="noopener noreferrer">
-    Visit OpenAI
-</Link>
-```
-
-## Images
-
-Similarly, images in Markdown are transformed into the Next.js `Image` component. This allows for automatic image optimization, such as lazy loading and resizing, which enhances performance and user experience. Here’s an example:
-
-### Markdown
-
-```markdown
-![Alt text for the image](https://via.placeholder.com/150)
-```
-
-### Output
-
-The above Markdown is converted to:
-
-```jsx
-<Image
-    src="https://via.placeholder.com/150"
-    alt="Alt text for the image"
-    width={800}
-    height={350}
-/>
-```
-
-## Benefits
-
-- **Performance Optimization**: Automatic conversion to Next.js components ensures optimized loading of images and links.
-- **Improved User Experience**: Client-side navigation with Next.js `Link` improves the browsing experience.
-- **Responsive Images**: Next.js `Image` component handles responsive images, providing the best quality for various device sizes.
-
-By utilizing these features, you can ensure that your documentation is not only visually appealing but also performs efficiently.
diff --git a/aria/contents/docs/getting-started/components/index.mdx b/aria/contents/docs/getting-started/components/index.mdx
deleted file mode 100644
index 12a9ff634..000000000
--- a/aria/contents/docs/getting-started/components/index.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Components
-description: This section provides an overview of the custom components available in AriaDocs.
----
-
-Explore the custom components we've defined for easy integration and development within your projects. Each component is designed to enhance your workflow and streamline your development process.
-
-
-<Outlet path="/getting-started/components" />
\ No newline at end of file
diff --git a/aria/contents/docs/getting-started/components/note/index.mdx b/aria/contents/docs/getting-started/components/note/index.mdx
deleted file mode 100644
index a7c740023..000000000
--- a/aria/contents/docs/getting-started/components/note/index.mdx
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: Note
-description: This section previews the Note component.
----
-
-The `Note` component allows you to display different types of messages such as general notes, warnings, or success notifications. Each type is styled accordingly, providing a clear visual cue to the user.
-
-## Preview
-
-<Note type="note" title="Note">
-  This is a general note to convey information to the user.
-</Note>
-<Note type="danger" title="Danger">
-  This is a danger alert to notify the user of a critical issue.
-</Note>
-<Note type="warning" title="Warning">
-  This is a warning alert for issues that require attention.
-</Note>
-<Note type="success" title="Success">
-  This is a success message to inform the user of successful actions.
-</Note>
-
-## Props
-
-| Prop    | Type                           | Default | Description                                |
-|---------|--------------------------------|---------|--------------------------------------------|
-| `title` | `string`                       | "Note"  | Sets the title of the note.                |
-| `type`  | `"note"`, `"danger"`, `"warning"`, `"success"` | "note"  | Determines the visual style of the note.   |
-
-## Code
-
-```jsx
-<Note type="note" title="Note">
-  This is a general note to convey information to the user.
-</Note>
-<Note type="danger" title="Danger">
-  This is a danger alert to notify the user of a critical issue.
-</Note>
-<Note type="warning" title="Warning">
-  This is a warning alert for issues that require attention.
-</Note>
-<Note type="success" title="Success">
-  This is a success message to inform the user of successful actions.
-</Note>
diff --git a/aria/contents/docs/getting-started/components/stepper/index.mdx b/aria/contents/docs/getting-started/components/stepper/index.mdx
deleted file mode 100644
index 55a056f6a..000000000
--- a/aria/contents/docs/getting-started/components/stepper/index.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: Stepper
-description: This section previews the stepper component.
----
-
-In this guide, we utilize a custom `Stepper` component, specifically designed for AriaDocs, which enables users to display step-by-step instructions directly within the markdown render. 
-
-## Preview
-##
-
-<Stepper>
-  <StepperItem title="Step 1: Clone the AriaDocs Repository">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum, felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc dolor in lorem.
-  </StepperItem>
-  <StepperItem title="Step 2: Access the Project Directory">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
-  </StepperItem>
-  <StepperItem title="Step 3: Install Required Dependencies">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ipsum nec nulla ultricies porttitor et non justo.
-  </StepperItem>
-</Stepper>
-
-## Code
-
-```jsx
-<Stepper>
-  <StepperItem title="Step 1: Clone the AriaDocs Repository">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum, felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc dolor in lorem.
-  </StepperItem>
-  <StepperItem title="Step 2: Access the Project Directory">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
-  </StepperItem>
-  <StepperItem title="Step 3: Install Required Dependencies">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut ipsum nec nulla ultricies porttitor et non justo.
-  </StepperItem>
-</Stepper>
-```
-
diff --git a/aria/contents/docs/getting-started/components/tabs/index.mdx b/aria/contents/docs/getting-started/components/tabs/index.mdx
deleted file mode 100644
index 3dc080dc3..000000000
--- a/aria/contents/docs/getting-started/components/tabs/index.mdx
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: Tabs
-description: This section previews the Tabs component.
----
-
-The `Tabs` component allows you to organize content into multiple sections, enabling users to switch between them easily. This is particularly useful for displaying related content in a compact manner.
-
-## Preview
-
-<Tabs defaultValue="java" className="pt-5 pb-1">
-  <TabsList>
-    <TabsTrigger value="java">Java</TabsTrigger>
-    <TabsTrigger value="typescript">TypeScript</TabsTrigger>
-  </TabsList>
-  <TabsContent value="java">
-    ```java
-    // HelloWorld.java
-    public class HelloWorld {
-        public static void main(String[] args) {
-            System.out.println("Hello, World!");
-        }
-    }
-    ```
-  </TabsContent>
-  <TabsContent value="typescript">
-    ```typescript
-    // helloWorld.ts
-    function helloWorld(): void {
-        console.log("Hello, World!");
-    }
-    helloWorld();
-    ```
-  </TabsContent>
-</Tabs>
-
-## Props
-
-| Prop        | Type   | Default     | Description                                      |
-|-------------|--------|-------------|--------------------------------------------------|
-| `defaultValue` | `string` | `null` | The value of the tab that is selected by default. |
-| `className` | `string` | `""` | Additional CSS classes for styling the Tabs component. |
-
-## Code
-
-```jsx
-<Tabs defaultValue="java" className="pt-5 pb-1">
-  <TabsList>
-    <TabsTrigger value="java">Java</TabsTrigger>
-    <TabsTrigger value="typescript">TypeScript</TabsTrigger>
-  </TabsList>
-  <TabsContent value="java">
-    ```java
-    // HelloWorld.java
-    public class HelloWorld {
-        public static void main(String[] args) {
-            System.out.println("Hello, World!");
-        }
-    }
-    ```</TabsContent>
-  <TabsContent value="typescript">
-    ```typescript
-    // helloWorld.ts
-    function helloWorld(): void {
-        console.log("Hello, World!");
-    }
-    helloWorld();
-    ```</TabsContent>
-</Tabs>
diff --git a/aria/contents/docs/getting-started/customize/index.mdx b/aria/contents/docs/getting-started/customize/index.mdx
deleted file mode 100644
index b43dbba8b..000000000
--- a/aria/contents/docs/getting-started/customize/index.mdx
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: Customize
-description: This guide provides instructions on customizing our application.
----
-
-## Markdown Options
-
-To customize Markdown parsing, navigate to `@lib/markdown.ts` and locate the `parseMdx` function. You can add your desired plugins in the `mdxOptions`. Here’s an example:
-
-```ts:lib/markdown.ts
-async function parseMdx<Frontmatter>(rawMdx: string) {
-    return await compileMDX<Frontmatter>({
-        source: rawMdx,
-        options: {
-            parseFrontmatter: true,
-            mdxOptions: {
-                // Add your plugins here
-                rehypePlugins: [Shiki],
-                remarkPlugins: [remarkGfm],
-            },
-        },
-        components,
-    });
-}
-```
-
-## Fonts
-
-Currently, this project uses the `Space_Grotesk` font. If you want to use other fonts, you can change the configuration in the main layout as shown below:
-
-### Google Fonts
-
-To use a Google font, import your desired font from `next/font/google`, initialize it with options, and apply the variable to the `body`:
-
-```tsx:app/layout.tsx
-import { Space_Grotesk } from "next/font/google";
-
-const fontSans = Space_Grotesk({
-    display: "swap",
-    variable: "--font-regular",
-    weight: "400",
-    subsets: ["latin"],
-});
-
-export default function RootLayout({ children }) {
-    return (
-        <html lang="en">
-            <body className={`${fontSans.variable} font-regular`}>
-                {children}
-            </body>
-        </html>
-    );
-}
-```
-
-### Local Fonts
-
-To use a local font, you need to use the local font loader from Next.js. Pass the options and apply them to the `body`:
-
-```tsx:app/layout.tsx
-import localFont from "next/font/local";
-
-const geistSans = localFont({
-    src: "./fonts/GeistVF.woff",
-    variable: "--font-regular",
-    weight: "100 900",
-});
-
-export default function RootLayout({ children }) {
-    return (
-        <html lang="en">
-            <body className={`${geistSans.variable} font-regular`}>
-                {children}
-            </body>
-        </html>
-    );
-}
-```
-
-For both options, ensure that you add the variable to `tailwind.config.ts`:
-
-```ts:tailwind.config.ts
-{
-    // ...
-    extend: {
-        fontFamily: {
-            regular: ["var(--font-regular)"],
-        },
-    }
-}
-```
-
-For theme and colors, refer to the [Theme section](/docs/getting-started/themes)
diff --git a/aria/contents/docs/getting-started/installation/index.mdx b/aria/contents/docs/getting-started/installation/index.mdx
index cd6f2331c..bcdd353b6 100644
--- a/aria/contents/docs/getting-started/installation/index.mdx
+++ b/aria/contents/docs/getting-started/installation/index.mdx
@@ -73,14 +73,14 @@ To get started, you can clone the mega repository directly from GitHub.
     ```
   </StepperItem>
 
-  <StepperItem title="Step 5: Nginx Configuration for Mono">
+  <StepperItem title="Option: Nginx Configuration for Mono">
 
 
     ```Nginx
     server {
         listen 80;
         listen [::]:80;
-        server_name git.gitmega.org;
+        server_name git.gitmega.dev;
         return 301 https://$server_name$request_uri;
     }
 
@@ -90,8 +90,8 @@ To get started, you can clone the mega repository directly from GitHub.
 
         server_name git.gitmega.org;
 
-        ssl_certificate /etc/letsencrypt/live/git.gitmega.org/fullchain.pem;
-        ssl_certificate_key /etc/letsencrypt/live/git.gitmega.org/privkey.pem;
+        ssl_certificate /etc/letsencrypt/live/git.gitmega.dev/fullchain.pem;
+        ssl_certificate_key /etc/letsencrypt/live/git.gitmega.dev/privkey.pem;
 
         ssl_protocols TLSv1.2 TLSv1.3;
         ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305;
@@ -121,7 +121,7 @@ To get started, you can clone the mega repository directly from GitHub.
     server {
         listen 80;
         listen [::]:80;
-        server_name console.gitmega.org;
+        server_name console.gitmega.dev;
         return 301 https://$server_name$request_uri;
     }
 
@@ -129,10 +129,10 @@ To get started, you can clone the mega repository directly from GitHub.
         listen 443 ssl;
         listen [::]:443 ssl;
 
-        server_name console.gitmega.org;
+        server_name console.gitmega.dev;
 
-        ssl_certificate /etc/letsencrypt/live/console.gitmega.org/fullchain.pem;
-        ssl_certificate_key /etc/letsencrypt/live/console.gitmega.org/privkey.pem;
+        ssl_certificate /etc/letsencrypt/live/console.gitmega.dev/fullchain.pem;
+        ssl_certificate_key /etc/letsencrypt/live/console.gitmega.dev/privkey.pem;
 
         ssl_protocols TLSv1.2 TLSv1.3;
         ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305;
@@ -189,5 +189,5 @@ $ docker network create mono-network
 # run postgres
 $ docker run --rm -it -d --name mono-pg --network mono-network -v /tmp/data/mono/pg-data:/var/lib/postgresql/data -p 5432:5432 mono-pg:0.1-pre-release
 $ docker run --rm -it -d --name mono-engine --network mono-network -v /tmp/data/mono/mono-data:/opt/mega -p 8000:8000 mono-engine:0.1-pre-release
-$ docker run --rm -it -d --name mono-ui --network mono-network -e MEGA_INTERNAL_HOST=http://mono-engine:8000 -e MEGA_HOST=http://localhost:8000 -p 3000:3000 mono-ui:0.1-pre-release
+$ docker run --rm -it -d --name mono-ui --network mono-network -e MEGA_INTERNAL_HOST=http://mono-engine:8000 -e MEGA_HOST=http://console.gitmega.dev -p 3000:3000 mono-ui:0.1-pre-release
 ```
diff --git a/aria/contents/docs/getting-started/project-structure/index.mdx b/aria/contents/docs/getting-started/project-structure/index.mdx
deleted file mode 100644
index ba5099d3e..000000000
--- a/aria/contents/docs/getting-started/project-structure/index.mdx
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Project Structure
-description: This section provides an overview of Project Structure.
----
-
-## Project Structure Overview
-
-### app
-
-This folder contains the main application code for Next.js, managing layouts, routing, and specific content pages. It is organized to support both the `docs` and `blog` sections, with dedicated pages and layouts for each section.
-
-```
-app                         // Main Next.js application folder
-├── page.tsx                // Hero page - the entry point of the app showcasing key content
-├── layout.tsx              // Main layout file, applies global navigation and footer
-├── blog
-│   ├── page.tsx            // Blog list page, displaying all blog posts with titles, dates, and excerpts
-│   └── [slug]
-│       └── page.tsx        // Dynamic blog post page for viewing individual posts with rich content
-└── docs
-    ├── layout.tsx          // Documentation layout with sidebar, providing easy navigation across doc pages
-    └── [[...slug]]         // Catch-all route to handle nested documentation pages, allowing flexible doc structure
-```
-
-### components
-
-This folder contains all reusable components used throughout the project. It’s structured to categorize components, making it easy to locate and manage UI elements, Markdown customizations, and navigation.
-
-```
-components                    // Reusable components
-├── ui                        // ShadCN components, includes standardized UI elements like buttons, forms, and modals
-├── markdown                  // Custom Markdown components for rendering rich Markdown content
-│   ├── CodeBlock.tsx         // Component for rendering syntax-highlighted code blocks
-│   ├── Image.tsx             // Component for handling responsive images in Markdown
-│   └── Table.tsx             // Component to render tables with consistent styling
-└── navbar.tsx                // Main navigation component for the site header, managing links and responsive behavior
-```
-
-### styles
-
-This folder contains global and component-specific CSS files, allowing for project-wide styling consistency and customizations.
-
-```
-styles                        // CSS files
-├── globals.css               // Global CSS file, includes Tailwind base, utilities, and custom global styles
-├── syntax.css                // Syntax highlighting styles, providing consistent code block appearance across the site
-└── overrides.css             // Additional custom styles that override specific component or plugin defaults
-```
-
-### contents
-
-This folder stores all Markdown content for the documentation and blog sections, with clear organization by content type. Each Markdown file represents a single piece of content, with frontmatter used for metadata.
-
-```
-contents                      // Markdown content for blogs and documentation
-├── docs                      // Documentation content, structured to support nested sections and pages
-│   ├── getting-started.md    // Introductory guide for new users
-│   ├── api-reference.md      // API documentation with detailed endpoint descriptions
-│   └── tutorials             // Subfolder for tutorial-style content
-│       └── tutorial-1.md     // Step-by-step tutorial on a specific topic
-└── blogs                     // Blog content, organized by post
-    ├── intro-to-project.md   // Blog post introducing the project and its goals
-    └── dev-updates.md        // Post discussing recent development updates and new features
-```
-
-### public
-
-This folder holds all static assets, such as images, videos, fonts, and icons. These files are directly accessible via URL, so it’s important to avoid sensitive or private content here.
-
-```
-public                        // Publicly accessible assets
-├── images                    // Image assets, used across various parts of the app
-│   ├── logo.png              // Project logo for branding
-│   └── banner.jpg            // Banner image for the hero section
-├── icons                     // SVG icons for the app
-└── videos                    // Video files for media content, if any
-```
-
-### lib
-
-This folder contains helper functions and utilities used across the application, such as Markdown parsing and routing logic. These utilities help keep the codebase clean and organized by separating out common functionality.
-
-```
-lib                           // Utility or helper functions
-├── markdown.ts               // Markdown parsing logic, converts Markdown to HTML and adds custom components
-├── routes-config.ts          // Routing configuration for docs, maps URLs to content files for dynamic routing
-└── utils.tsx                 // General utility functions used across the app, such as data formatting and validation helpers
-```
-
-### Additional
-
-- **`package.json`**: Contains metadata about the project, dependencies, and scripts for building and running the application.
-- **`tailwind.config.ts`**: Configures Tailwind CSS, allowing customization of theme colors, fonts, and responsive breakpoints specific to this project. 
-
-This structure organizes your project in a way that supports scalability and maintainability, making it easier to navigate and work on different sections of the application.
\ No newline at end of file
diff --git a/aria/contents/docs/getting-started/themes/index.mdx b/aria/contents/docs/getting-started/themes/index.mdx
deleted file mode 100644
index 6e33be3c1..000000000
--- a/aria/contents/docs/getting-started/themes/index.mdx
+++ /dev/null
@@ -1,485 +0,0 @@
----
-title: Themes
-description: This section provides an overview of Themes.
----
-
-> Customize the theme colors in your project to create a cohesive and visually appealing interface. Each theme comes with a unique color palette that's easy to adjust.
-
-## Customize
-
-You have the flexibility to change the theme of this documentation by modifying the Tailwind CSS variables in `@styles/globals.css` and adjusting the syntax highlighting colors in `@styles/syntax.css`. 
-
-If you’d like to use the predefined Nebula, Halloween, or Ocean themes, simply copy and paste the provided code into the respective files. Once added, you'll immediately see the visual changes reflected in your documentation, enhancing its overall look and feel.
-
-### Nebula Theme
-
-The Nebula theme provides a vibrant color palette, making your application visually appealing and engaging.
-The theme is inspired by the cosmos, featuring vibrant colors that enhance the reading experience.
-
-<Tabs defaultValue="global" className="pt-5 pb-1">
-  <TabsList>
-    <TabsTrigger value="global">globals.css</TabsTrigger>
-    <TabsTrigger value="syntax">syntax.css</TabsTrigger>
-  </TabsList>
-  <TabsContent value="global">
-    ```css
-    /* nebula */
-    @layer base {
-        :root {
-            --background: 152 9% 98%; /* Soft white with a hint of green */
-            --foreground: 160 10% 10%; /* Dark forest green */
-            --card: 0 0% 100%; /* Pure white for a clean look */
-            --card-foreground: 160 10% 10%;
-            --popover: 0 0% 100%;
-            --popover-foreground: 160 10% 10%;
-            --primary: 158 85% 40%; /* Vibrant Supabase green */
-            --primary-foreground: 0 0% 100%; /* Pure white for contrast */
-            --secondary: 152 14% 90%; /* Light mint green */
-            --secondary-foreground: 160 10% 10%;
-            --muted: 152 14% 90%;
-            --muted-foreground: 160 10% 40%; /* Muted olive green */
-            --accent: 158 85% 40%; /* Same green as primary */
-            --accent-foreground: 0 0% 100%;
-            --destructive: 0 65% 55%; /* Light red for warnings */
-            --destructive-foreground: 0 0% 100%;
-            --border: 160 10% 85%; /* Light grey-green border */
-            --input: 160 10% 85%;
-            --ring: 158 85% 50%; /* Slightly lighter green ring */
-            --radius: 0.5rem;
-            --chart-1: 158 85% 40%; /* Green for primary chart */
-            --chart-2: 160 20% 45%; /* Subdued green for charts */
-            --chart-3: 160 10% 30%; /* Darker forest green */
-            --chart-4: 154 60% 50%; /* Light pastel green */
-            --chart-5: 160 10% 85%; /* Very light green for background */
-        }
-
-        .dark {
-            --background: 160 10% 5%; /* Very dark greenish-grey */
-            --foreground: 0 0% 100%; /* Bright white */
-            --card: 160 10% 8%; /* Slightly lighter dark green */
-            --card-foreground: 0 0% 100%;
-            --popover: 160 10% 8%;
-            --popover-foreground: 0 0% 100%;
-            --primary: 158 85% 50%; /* Bright green for dark mode */
-            --primary-foreground: 0 0% 100%;
-            --secondary: 160 10% 15%; /* Dark muted green */
-            --secondary-foreground: 0 0% 100%;
-            --muted: 160 10% 15%;
-            --muted-foreground: 160 10% 75%; /* Light grey-green */
-            --accent: 158 85% 50%; /* Bright green accent */
-            --accent-foreground: 0 0% 100%;
-            --destructive: 0 65% 50%; /* Soft red for alerts */
-            --destructive-foreground: 0 0% 100%;
-            --border: 160 10% 15%; /* Dark green border */
-            --input: 160 10% 15%;
-            --ring: 158 85% 60%; /* Vibrant green ring */
-            --chart-1: 158 85% 50%; /* Main green for charts */
-            --chart-2: 160 20% 45%; /* Subdued green for contrast */
-            --chart-3: 160 10% 30%; /* Deep forest green */
-            --chart-4: 154 60% 50%; /* Light green accent */
-            --chart-5: 160 10% 85%; /* Soft background green */
-        }
-    }
-    ```
-  </TabsContent>
-  <TabsContent value="syntax">
-    ```css
-     /* nebula */
-    /* Light Mode */
-    .keyword {
-       color: #15803d;
-       /* Dark Green */
-    }
-
-    .function {
-        color: #0ea5e9;
-        /* Sky Blue */
-    }
-
-    .punctuation {
-        color: #64748b;
-        /* Slate Gray */
-    }
-
-    .comment {
-        color: #94a3b8;
-        /* Muted Slate Gray */
-    }
-
-    .string,
-    .constant,
-    .annotation,
-    .boolean,
-    .number {
-        color: #16a34a;
-        /* Medium Green */
-    }
-
-    .tag {
-        color: #15803d;
-        /* Dark Green */
-    }
-
-    .attr-name {
-        color: #0d9488;
-        /* Teal */
-    }
-
-    .attr-value {
-        color: #059669;
-        /* Emerald Green */
-    }
-
-    /* Dark Mode */
-    .dark .keyword {
-        color: #86efac;
-        /* Light Green */
-    }
-
-    .dark .function {
-        color: #38bdf8;
-        /* Sky Blue */
-    }
-
-    .dark .string,
-    .dark .constant,
-    .dark .annotation,
-    .dark .boolean,
-    .dark .number {
-        color: #4ade80;
-        /* Soft Lime Green */
-    }
-
-    .dark .tag {
-        color: #86efac;
-        /* Light Green */
-    }
-
-    .dark .attr-name {
-        color: #34d399;
-        /* Teal */
-    }
-
-    .dark .attr-value {
-        color: #6ee7b7;
-        /* Light Emerald */
-    }
-    ```
-  </TabsContent>
-</Tabs>
-
-### Halloween Theme
-
-The Halloween theme infuses your documentation with a spooky, festive atmosphere, ideal for seasonal content. Its design is inspired by Halloween motifs, featuring eerie colors and playful elements that enhance the overall reading experience.
-
-<Tabs defaultValue="global" className="pt-5 pb-1">
-  <TabsList>
-    <TabsTrigger value="global">globals.css</TabsTrigger>
-    <TabsTrigger value="syntax">syntax.css</TabsTrigger>
-  </TabsList>
-  <TabsContent value="global">
-    ```css
-    /* halloween */
-    @layer base {
-      :root {
-        --background: 30 15% 10%; /* Darker pumpkin shade */
-        --foreground: 50 40% 95%; /* Ghostly white */
-        --card: 30 15% 12%; /* Slightly darker pumpkin */
-        --card-foreground: 50 40% 95%;
-        --popover: 30 15% 12%;
-        --popover-foreground: 50 40% 95%;
-        --primary: 35 78% 50%; /* Pumpkin orange */
-        --primary-foreground: 60 9.1% 97.8%; /* Soft ghostly white */
-        --secondary: 290 12% 16%; /* Witchy purple */
-        --secondary-foreground: 35 78% 50%;
-        --muted: 290 12% 16%;
-        --muted-foreground: 50 20% 85%; /* Pale grey */
-        --accent: 43 100% 50%; /* Bright pumpkin */
-        --accent-foreground: 0 0% 100%;  /* Pure white */
-        --destructive: 0 84.2% 45%;  /* Blood red */
-        --destructive-foreground: 60 9.1% 97.8%;
-        --border: 290 20% 10%;  /* Dark witchy purple */
-        --input: 290 20% 10%;
-        --ring: 35 78% 50%; /* Glowing pumpkin ring */
-        --radius: 0.5rem;
-        --chart-1: 35 78% 50%; /* Pumpkin orange */
-        --chart-2: 50 40% 95%; /* Ghostly white */
-        --chart-3: 0 84.2% 45%; /* Blood red */
-        --chart-4: 43 100% 50%; /* Bright pumpkin */
-        --chart-5: 210 70% 30%; /* Shadowy blue */
-    }
-
-    .dark {
-        --background: 240 3% 7%; /* Deep shadowy black */
-        --foreground: 43 100% 90%; /* Ghostly white */
-        --card: 240 3% 9%; /* Dark shadow */
-        --card-foreground: 43 100% 90%;
-        --popover: 240 3% 9%;
-        --popover-foreground: 43 100% 90%;
-        --primary: 35 78% 50%; /* Pumpkin orange */
-        --primary-foreground: 240 3% 7%; /* Shadowy black */
-        --secondary: 260 25% 15%; /* Dark witchy purple */
-        --secondary-foreground: 35 78% 50%;
-        --muted: 260 25% 15%;
-        --muted-foreground: 60 5% 65%; /* Pale grey */
-        --accent: 43 100% 50%; /* Bright pumpkin */
-        --accent-foreground: 0 0% 100%; /* Pure white */
-        --destructive: 0 84.2% 45%; /* Blood red */
-        --destructive-foreground: 43 100% 90%;
-        --border: 260 25% 15%; /* Dark witchy purple */
-        --input: 260 25% 15%;
-        --ring: 35 78% 50%; /* Glowing pumpkin ring */
-        --chart-1: 35 78% 50%; /* Pumpkin orange */
-        --chart-2: 43 100% 90%; /* Ghostly white */
-        --chart-3: 0 84.2% 45%; /* Blood red */
-        --chart-4: 43 100% 50%; /* Bright pumpkin */
-        --chart-5: 210 70% 30%; /* Shadowy blue */
-     }
-  }
-    ```
-  </TabsContent>
-  <TabsContent value="syntax">
-    ```css
-    /* halloween */
-    /* Light Mode */
-    .keyword {
-        color: #d97706;
-        /* Pumpkin Orange */
-    }
-
-    .function {
-        color: #9333ea;
-        /* Mystic Purple */
-    }
-
-    .punctuation {
-        color: #4b5563;
-        /* Dark Gray */
-    }
-
-    .comment {
-        color: #6b7280;
-        /* Muted Gray */
-    }
-
-    .string,
-    .constant,
-    .annotation,
-    .boolean,
-    .number {
-        color: #f59e0b;
-        /* Witch’s Brew Amber */
-    }
-
-    .tag {
-        color: #c026d3;
-        /* Magenta Potion */
-    }
-
-    .attr-name {
-        color: #16a34a;
-        /* Poison Green */
-    }
-
-    .attr-value {
-        color: #db2777;
-        /* Pink Potion */
-    }
-
-    /* Dark Mode */
-    .dark .keyword {
-        color: #fbbf24;
-        /* Candlelight Yellow */
-    }
-
-    .dark .function {
-        color: #e879f9;
-        /* Enchanted Magenta */
-    }
-
-    .dark .string,
-    .dark .constant,
-    .dark .annotation,
-    .dark .boolean,
-    .dark .number {
-        color: #f59e0b;
-        /* Glowing Amber */
-    }
-
-    .dark .tag {
-        color: #f472b6;
-        /* Haunted Pink */
-    }
-
-    .dark .attr-name {
-        color: #a3e635;
-        /* Toxic Green */
-    }
-
-    .dark .attr-value {
-        color: #fb7185;
-        /* Blood Moon Pink */
-    }
-    ```
-  </TabsContent>
-</Tabs>
-
-
-
-### Ocean Theme
-
-The Ocean theme presents soothing colors drawn from the depths of the sea, fostering a tranquil reading environment. Its design evokes a sense of calm, enhancing the overall experience for users.
-
-<Tabs defaultValue="global" className="pt-5 pb-1">
-  <TabsList>
-    <TabsTrigger value="global">globals.css</TabsTrigger>
-    <TabsTrigger value="syntax">syntax.css</TabsTrigger>
-  </TabsList>
-  <TabsContent value="global">
-    ```css
-    /* ocean */
-    @layer base {
-        :root {
-            --background: 210 50% 95%; /* Soft light blue */
-            --foreground: 220 20% 15%; /* Deep navy */
-            --card: 210 40% 98%; /* Almost white blue */
-            --card-foreground: 220 20% 15%;
-            --popover: 210 40% 98%;
-            --popover-foreground: 220 20% 15%;
-            --primary: 220 80% 60%; /* Vibrant azure blue */
-            --primary-foreground: 210 50% 95%;
-            --secondary: 220 30% 85%; /* Light sky blue */
-            --secondary-foreground: 220 20% 15%;
-            --muted: 220 30% 85%;
-            --muted-foreground: 220 20% 40%; /* Soft steel blue */
-            --accent: 200 70% 40%; /* Strong ocean blue */
-            --accent-foreground: 0 0% 100%; /* Pure white */
-            --destructive: 0 65% 55%; /* Soft red */
-            --destructive-foreground: 220 20% 95%; /* Lightened foreground */
-            --border: 220 15% 90%; /* Light grey-blue */
-            --input: 220 15% 90%;
-            --ring: 220 40% 50%; /* Cool blue ring */
-            --radius: 0.5rem;
-            --chart-1: 210 60% 50%; /* Classic blue */
-            --chart-2: 220 40% 65%; /* Soft sky */
-            --chart-3: 220 70% 50%; /* Azure blue */
-            --chart-4: 200 60% 55%; /* Ocean blue */
-            --chart-5: 240 30% 40%; /* Deep teal */
-        }
-
-        .dark {
-            --background: 220 20% 10%; /* Midnight navy */
-            --foreground: 220 80% 90%; /* Soft sky blue */
-            --card: 220 20% 12%; /* Slightly lighter midnight */
-            --card-foreground: 220 80% 90%;
-            --popover: 220 20% 12%;
-            --popover-foreground: 220 80% 90%;
-            --primary: 210 70% 60%; /* Soft bright blue */
-            --primary-foreground: 220 20% 10%;
-            --secondary: 220 30% 15%; /* Dark steel blue */
-            --secondary-foreground: 220 80% 90%;
-            --muted: 220 30% 15%;
-            --muted-foreground: 210 20% 85%; /* Pale navy */
-            --accent: 220 80% 60%; /* Vibrant azure blue */
-            --accent-foreground: 220 80% 90%;
-            --destructive: 0 65% 55%; /* Soft red */
-            --destructive-foreground: 220 80% 90%;
-            --border: 220 30% 15%; /* Dark steel blue */
-            --input: 220 30% 15%;
-            --ring: 220 60% 60%; /* Vivid blue ring */
-            --chart-1: 210 60% 50%; /* Classic blue */
-            --chart-2: 220 40% 65%; /* Soft sky */
-            --chart-3: 220 70% 50%; /* Azure blue */
-            --chart-4: 200 60% 55%; /* Ocean blue */
-            --chart-5: 240 30% 40%; /* Deep teal */
-        }
-    }
-    ```
-  </TabsContent>
-  <TabsContent value="syntax">
-    ```css
-    /* ocean */
-    /* Light Mode */
-    .keyword {
-        color: #2563eb;
-        /* Vibrant Blue */
-    }
-
-    .function {
-        color: #0284c7;
-        /* Deep Sky Blue */
-    }
-
-    .punctuation {
-        color: #475569;
-        /* Cool Slate Gray */
-    }
-
-    .comment {
-        color: #64748b;
-        /* Muted Slate */
-    }
-
-    .string,
-    .constant,
-    .annotation,
-    .boolean,
-    .number {
-        color: #0369a1;
-        /* Dark Cyan */
-    }
-
-    .tag {
-        color: #1e40af;
-        /* Indigo */
-    }
-
-    .attr-name {
-        color: #0ea5e9;
-        /* Light Sky Blue */
-    }
-
-    .attr-value {
-        color: #2563eb;
-        /* Bright Blue */
-    }
-
-    /* Dark Mode */
-    .dark .keyword {
-        color: #93c5fd;
-        /* Soft Blue */
-    }
-
-    .dark .function {
-        color: #38bdf8;
-        /* Sky Blue */
-    }
-
-    .dark .string,
-    .dark .constant,
-    .dark .annotation,
-    .dark .boolean,
-    .dark .number {
-        color: #60a5fa;
-        /* Light Blue */
-    }
-
-    .dark .tag {
-        color: #3b82f6;
-        /* Bold Blue */
-    }
-
-    .dark .attr-name {
-        color: #67e8f9;
-        /* Aqua */
-    }
-
-    .dark .attr-value {
-        color: #93c5fd;
-        /* Frosty Blue */
-    }
-    ```
-  </TabsContent>
-</Tabs>
-
-For additional themes, visit this fantastic website with pre-made Shadcn themes: https://tinte.railly.dev/shadcn
\ No newline at end of file
diff --git a/aria/contents/docs/git/index.mdx b/aria/contents/docs/git/index.mdx
new file mode 100644
index 000000000..43a6cac7f
--- /dev/null
+++ b/aria/contents/docs/git/index.mdx
@@ -0,0 +1,6 @@
+---
+title: Git Internal
+description:
+---
+
+<Outlet path="git" />
diff --git a/aria/contents/docs/git/pack/index.mdx b/aria/contents/docs/git/pack/index.mdx
new file mode 100644
index 000000000..d06a10c88
--- /dev/null
+++ b/aria/contents/docs/git/pack/index.mdx
@@ -0,0 +1,4 @@
+---
+title: Pack Format
+description:
+---
diff --git a/aria/contents/docs/libra/command/add/index.mdx b/aria/contents/docs/libra/command/add/index.mdx
new file mode 100644
index 000000000..20d1eac66
--- /dev/null
+++ b/aria/contents/docs/libra/command/add/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [add] Command
+description:
+---
diff --git a/aria/contents/docs/libra/command/branch/index.mdx b/aria/contents/docs/libra/command/branch/index.mdx
new file mode 100644
index 000000000..f65ffa107
--- /dev/null
+++ b/aria/contents/docs/libra/command/branch/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [branch] Command
+description:
+---
diff --git a/aria/contents/docs/libra/command/clone/index.mdx b/aria/contents/docs/libra/command/clone/index.mdx
new file mode 100644
index 000000000..9096c95ca
--- /dev/null
+++ b/aria/contents/docs/libra/command/clone/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [clone] Command
+description:
+---
diff --git a/aria/contents/docs/libra/command/commit/index.mdx b/aria/contents/docs/libra/command/commit/index.mdx
new file mode 100644
index 000000000..f983784c4
--- /dev/null
+++ b/aria/contents/docs/libra/command/commit/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [commit] Command
+description:
+---
diff --git a/aria/contents/docs/libra/command/config/index.mdx b/aria/contents/docs/libra/command/config/index.mdx
new file mode 100644
index 000000000..8ade69b3e
--- /dev/null
+++ b/aria/contents/docs/libra/command/config/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [config] Command
+description:
+---
diff --git a/aria/contents/docs/libra/command/diff/index.mdx b/aria/contents/docs/libra/command/diff/index.mdx
new file mode 100644
index 000000000..e3975f047
--- /dev/null
+++ b/aria/contents/docs/libra/command/diff/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [diff] Command
+description:
+---
diff --git a/aria/contents/docs/libra/command/fetch/index.mdx b/aria/contents/docs/libra/command/fetch/index.mdx
new file mode 100644
index 000000000..28d35ee0a
--- /dev/null
+++ b/aria/contents/docs/libra/command/fetch/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [fetch] Command
+description:
+---
diff --git a/aria/contents/docs/libra/command/index-pack/index.mdx b/aria/contents/docs/libra/command/index-pack/index.mdx
new file mode 100644
index 000000000..626cc0c90
--- /dev/null
+++ b/aria/contents/docs/libra/command/index-pack/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [index-pack] Command
+description:
+---
diff --git a/aria/contents/docs/libra/command/index.mdx b/aria/contents/docs/libra/command/index.mdx
new file mode 100644
index 000000000..198c60708
--- /dev/null
+++ b/aria/contents/docs/libra/command/index.mdx
@@ -0,0 +1,6 @@
+---
+title: Libra Commands
+description:
+---
+
+<Outlet path="/libra/command" />
diff --git a/aria/contents/docs/libra/command/init/index.mdx b/aria/contents/docs/libra/command/init/index.mdx
new file mode 100644
index 000000000..26e72809d
--- /dev/null
+++ b/aria/contents/docs/libra/command/init/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [init] Command
+description:
+---
diff --git a/aria/contents/docs/libra/command/lfs/index.mdx b/aria/contents/docs/libra/command/lfs/index.mdx
new file mode 100644
index 000000000..22a5a1286
--- /dev/null
+++ b/aria/contents/docs/libra/command/lfs/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [lfs] Command
+description:
+---
diff --git a/aria/contents/docs/libra/command/log/index.mdx b/aria/contents/docs/libra/command/log/index.mdx
new file mode 100644
index 000000000..53a862719
--- /dev/null
+++ b/aria/contents/docs/libra/command/log/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [log] Command
+description:
+---
diff --git a/aria/contents/docs/libra/command/merge/index.mdx b/aria/contents/docs/libra/command/merge/index.mdx
new file mode 100644
index 000000000..2aafb1dc6
--- /dev/null
+++ b/aria/contents/docs/libra/command/merge/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [merge] Command
+description:
+---
diff --git a/aria/contents/docs/libra/command/pull/index.mdx b/aria/contents/docs/libra/command/pull/index.mdx
new file mode 100644
index 000000000..562f37a05
--- /dev/null
+++ b/aria/contents/docs/libra/command/pull/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [pull] Command
+description:
+---
diff --git a/aria/contents/docs/libra/command/push/index.mdx b/aria/contents/docs/libra/command/push/index.mdx
new file mode 100644
index 000000000..e8df5fcbb
--- /dev/null
+++ b/aria/contents/docs/libra/command/push/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [push] Command
+description:
+---
diff --git a/aria/contents/docs/libra/command/rebase/index.mdx b/aria/contents/docs/libra/command/rebase/index.mdx
new file mode 100644
index 000000000..6f7087504
--- /dev/null
+++ b/aria/contents/docs/libra/command/rebase/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [rebase] Command
+description:
+---
diff --git a/aria/contents/docs/libra/command/remote/index.mdx b/aria/contents/docs/libra/command/remote/index.mdx
new file mode 100644
index 000000000..6548027c0
--- /dev/null
+++ b/aria/contents/docs/libra/command/remote/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [remote] Command
+description:
+---
diff --git a/aria/contents/docs/libra/command/reset/index.mdx b/aria/contents/docs/libra/command/reset/index.mdx
new file mode 100644
index 000000000..a5da35d95
--- /dev/null
+++ b/aria/contents/docs/libra/command/reset/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [reset] Command
+description:
+---
diff --git a/aria/contents/docs/libra/command/restore/index.mdx b/aria/contents/docs/libra/command/restore/index.mdx
new file mode 100644
index 000000000..45002e5e9
--- /dev/null
+++ b/aria/contents/docs/libra/command/restore/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [restore] Command
+description:
+---
diff --git a/aria/contents/docs/libra/command/rm/index.mdx b/aria/contents/docs/libra/command/rm/index.mdx
new file mode 100644
index 000000000..0c4c3cd1a
--- /dev/null
+++ b/aria/contents/docs/libra/command/rm/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [rm] Command
+description:
+---
diff --git a/aria/contents/docs/libra/command/status/index.mdx b/aria/contents/docs/libra/command/status/index.mdx
new file mode 100644
index 000000000..2be546760
--- /dev/null
+++ b/aria/contents/docs/libra/command/status/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [status] Command
+description:
+---
diff --git a/aria/contents/docs/libra/command/switch/index.mdx b/aria/contents/docs/libra/command/switch/index.mdx
new file mode 100644
index 000000000..5ca82fa6b
--- /dev/null
+++ b/aria/contents/docs/libra/command/switch/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [switch] Command
+description:
+---
diff --git a/aria/contents/docs/libra/command/tag/index.mdx b/aria/contents/docs/libra/command/tag/index.mdx
new file mode 100644
index 000000000..524b11139
--- /dev/null
+++ b/aria/contents/docs/libra/command/tag/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The [tag] Command
+description:
+---
diff --git a/aria/contents/docs/libra/config/gitattributes/index.mdx b/aria/contents/docs/libra/config/gitattributes/index.mdx
new file mode 100644
index 000000000..14e30ed44
--- /dev/null
+++ b/aria/contents/docs/libra/config/gitattributes/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The .gitattributes File
+description:
+---
diff --git a/aria/contents/docs/libra/config/gitignore/index.mdx b/aria/contents/docs/libra/config/gitignore/index.mdx
new file mode 100644
index 000000000..132dc2221
--- /dev/null
+++ b/aria/contents/docs/libra/config/gitignore/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The .gitignore File
+description:
+---
diff --git a/aria/contents/docs/libra/config/index.mdx b/aria/contents/docs/libra/config/index.mdx
new file mode 100644
index 000000000..eb450f283
--- /dev/null
+++ b/aria/contents/docs/libra/config/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The Configuration Files of Libra
+description:
+---
diff --git a/aria/contents/docs/libra/config/lfs/index.mdx b/aria/contents/docs/libra/config/lfs/index.mdx
new file mode 100644
index 000000000..f227a0d89
--- /dev/null
+++ b/aria/contents/docs/libra/config/lfs/index.mdx
@@ -0,0 +1,4 @@
+---
+title: The LFS Configuration
+description:
+---
diff --git a/aria/contents/docs/libra/index.mdx b/aria/contents/docs/libra/index.mdx
new file mode 100644
index 000000000..7505d3780
--- /dev/null
+++ b/aria/contents/docs/libra/index.mdx
@@ -0,0 +1,8 @@
+---
+title: Libra - Another Git Client in Rust
+description: Libra is a partial implementation of a Git client, developed using Rust.
+---
+
+Libra is a partial implementation of a Git client, developed using Rust. Our goal is not to create a 100% replica of Git (for those interested in such a project, please refer to the gitoxide). Instead, libra focus on implementing the basic functionalities of Git for learning Git and Rust. A key feature of libra is the replacement of the original Git internal storage architecture with SQLite.
+
+<Outlet path="libra" />
diff --git a/aria/contents/docs/libra/internal/index.mdx b/aria/contents/docs/libra/internal/index.mdx
new file mode 100644
index 000000000..09719b457
--- /dev/null
+++ b/aria/contents/docs/libra/internal/index.mdx
@@ -0,0 +1,4 @@
+---
+title: Libra Internal
+description:
+---
diff --git a/aria/contents/docs/libra/internal/scheme/index.mdx b/aria/contents/docs/libra/internal/scheme/index.mdx
new file mode 100644
index 000000000..5922f7ad8
--- /dev/null
+++ b/aria/contents/docs/libra/internal/scheme/index.mdx
@@ -0,0 +1,4 @@
+---
+title: Libra Database Scheme
+description:
+---
diff --git a/aria/lib/routes-config.ts b/aria/lib/routes-config.ts
index f4d74a7e4..bc2a68e44 100644
--- a/aria/lib/routes-config.ts
+++ b/aria/lib/routes-config.ts
@@ -21,7 +21,6 @@ export const ROUTES: EachRoute[] = [
   {
     title: "Components",
     href: "/components",
-    noLink: true,
     items: [
       { title: "Project Structure", href: "/project-structure" },
       { title: "Stepper", href: "/stepper" },
@@ -32,6 +31,59 @@ export const ROUTES: EachRoute[] = [
       { title: "Custom", href: "/custom" },
     ],
   },
+  {
+    title: "Libra",
+    href: "/libra",
+    items: [
+      {
+        title: "Command",
+        href: "/command",
+        items: [
+          { title: "add", href: "/add" },
+          { title: "branch", href: "/branch" },
+          { title: "clone", href: "/clone" },
+          { title: "commit", href: "/commit" },
+          { title: "config", href: "/config" },
+          { title: "diff", href: "/diff" },
+          { title: "fetch", href: "/fetch" },
+          { title: "index-pack", href: "/index-pack" },
+          { title: "init", href: "/init" },
+          { title: "lfs", href: "/lfs" },
+          { title: "log", href: "/log" },
+          { title: "merge", href: "/merge" },
+          { title: "pull", href: "/pull" },
+          { title: "push", href: "/push" },
+          { title: "rebase", href: "/rebase" },
+          { title: "remote", href: "/remote" },
+          { title: "reset", href: "/reset" },
+          { title: "restore", href: "/restore" },
+          { title: "rm", href: "/rm" },
+          { title: "status", href: "/status" },
+          { title: "switch", href: "/switch" },
+          { title: "tag", href: "/tag" },
+        ],
+      },
+      {
+        title: "Config",
+        href: "/config",
+        items: [
+          { title: ".gitattributes", href: "/gitattributes" },
+          { title: ".gitignore", href: "/gitignore" },
+          { title: "LFS", href: "/lfs" },
+        ],
+      },
+      {
+        title: "Internal",
+        href: "/internal",
+        items: [{ title: "Scheme", href: "/scheme" }],
+      },
+    ],
+  },
+  {
+    title: "Git",
+    href: "/git",
+    items: [{ title: "Pack", href: "/pack" }],
+  },
 ];
 
 type Page = { title: string; href: string };
diff --git a/aria/vercel.json b/aria/vercel.json
new file mode 100644
index 000000000..0967ef424
--- /dev/null
+++ b/aria/vercel.json
@@ -0,0 +1 @@
+{}