diff --git a/public/mdFiles/USER_COMMANDS.md b/public/mdFiles/USER_COMMANDS.md
new file mode 100644
index 0000000..8f77c76
--- /dev/null
+++ b/public/mdFiles/USER_COMMANDS.md
@@ -0,0 +1,122 @@
+# Ckart CLI - Commands Documentation
+
+## Overview
+
+Ckart CLI is a command-line tool to manage virtual machines (VMs) and their associated resources. Below is a detailed guide to the commands, arguments, and flags available in the CLI.
+
+---
+
+## Commands
+
+### 1. `auth`
+
+Authenticate the CLI session.
+
+**Usage:**
+
+```bash
+ckart auth --token <your-token>
+```
+
+**Arguments:**
+
+-   `--token` (required): Authentication token.
+
+---
+
+### 2. `vms`
+
+Manage virtual machines.
+
+**Usage:**
+
+```bash
+ckart vms [options]
+```
+
+**Options:**
+
+-   `-a`, `--all`: Show all VMs.
+-   `--create <provider_id>`: Create a new VM with the given Provider ID.
+-   `--connect <vm_name>`: Connect to the VM's WireGuard network.
+-   `--disconnect <vm_name>`: Disconnect from the VM's WireGuard network.
+-   `--start <vm_name>`: Start a VM.
+-   `--stop <vm_name>`: Stop a VM.
+-   `-rm`, `--remove <vm_name>`: Remove a VM.
+-   `-f`, `--force`: Force remove a VM.
+-   `-h`, `--help`: Show help for the `vms` command.
+
+---
+
+### 3. `heartbeat`
+
+Check if the management server is online.
+
+**Usage:**
+
+```bash
+ckart heartbeat
+```
+
+---
+
+### 4. `providers`
+
+Manage providers.
+
+**Usage:**
+
+```bash
+ckart providers [options]
+```
+
+**Options:**
+
+-   `-a`, `--all`: List all providers.
+-   `-d`, `--details <provider_id>`: Show details of a specific provider.
+-   `<provider_id> -q`, `--query <vcpus> <ram> <storage>`: Query providers with specific vCPUs, RAM, and storage.
+
+---
+
+### 5. `start` / `stop`
+
+Start or stop a VM.
+
+**Usage:**
+
+```bash
+ckart vms --start <vm_name>
+ckart vms --stop <vm_name>
+```
+
+---
+
+### 6. `remove`
+
+Remove a VM.
+
+**Usage:**
+
+```bash
+ckart vms --remove <vm_name> [--force]
+```
+
+---
+
+### 7. `connect` / `disconnect`
+
+Connect or disconnect a VM from the WireGuard network.
+
+**Usage:**
+
+```bash
+ckart vms --connect <vm_name>
+ckart vms --disconnect <vm_name>
+```
+
+---
+
+## Notes
+
+-   Ensure the `CKART_SESSION` environment variable is set before using commands (except `auth`).
+-   Use `ckart -h` to view all available commands.
diff --git a/public/mdFiles/USER_INSTALLATION.md b/public/mdFiles/USER_INSTALLATION.md
new file mode 100644
index 0000000..6c158e6
--- /dev/null
+++ b/public/mdFiles/USER_INSTALLATION.md
@@ -0,0 +1,99 @@
+# Ckart CLI - Installation Guide
+
+## 🛠️ System Requirements
+
+-   **Operating System**: Windows, Linux, or macOS
+-   **Python Version**: 3.7+
+-   **WireGuard**: Installed automatically by the script
+-   **Administrator Privileges**: Required for installation
+
+---
+
+## 🔧 Installation Steps
+
+### 1. Download the Installer
+
+-   For Windows: Download `Install-ckart.ps1` from the [Releases](https://github.com/ProjectIndra/Indra-cli/releases).
+-   For Linux/Mac: Download `Install-ckart.sh` from the same location.
+
+### 2. Run the Installer
+
+#### Windows
+
+Run the following command in PowerShell (as Administrator):
+
+```powershell
+powershell -ExecutionPolicy Bypass -File Install-ckart.ps1
+```
+
+#### Linux/Mac
+
+Run the following command in the terminal:
+
+```bash
+bash Install-ckart.sh
+```
+
+This will:
+
+-   Install WireGuard (if not already installed).
+-   Install the CLI from GitHub.
+-   Set up required environment variables.
+
+---
+
+## 🔐 Environment Variables
+
+After installation, a `.env` file will be created. It must contain:
+
+```env
+LISTEN_PORT=51820
+WIREGUARD_EXE=C:\Program Files\WireGuard\wireguard.exe
+CONFIG_PATH=C:\Users\<YourUsername>\Documents\new-client.conf
+CONFIG_NAME=new-client
+CKART_SESSION=<automatically set on auth>
+```
+
+---
+
+## 🔄 Upgrade CLI
+
+To upgrade the CLI directly from GitHub:
+
+```bash
+pip install --upgrade git+https://github.com/ProjectIndra/Indra-cli.git
+```
+
+---
+
+## 🧪 Developer Installation
+
+### 1. Build from Source
+
+From the root of the project (where `pyproject.toml` is located):
+
+```bash
+python -m build
+```
+
+### 2. Install the Wheel
+
+```bash
+pip install dist/ckart_cli-0.1-py3-none-any.whl --force-reinstall
+```
+
+---
+
+## ✅ You're Ready!
+
+Run the CLI with:
+
+```bash
+ckart
+```
+
+Authenticate with your token:
+
+```bash
+ckart auth --token <your-token>
+```
diff --git a/src/docs/components/docsMainPage.js b/src/docs/components/docsMainPage.js
index 5344d84..7e5d6fc 100644
--- a/src/docs/components/docsMainPage.js
+++ b/src/docs/components/docsMainPage.js
@@ -4,6 +4,7 @@ import Sidebar from './sidebar';
 import ShowDocumentation from './showDocumentation';
 import Mainheadings from './mainheadings';
 import "../css/docsMainPage.css";
+import { file } from 'jszip';
 
 const DocsMainPage = () => {
 
@@ -20,14 +21,18 @@ const DocsMainPage = () => {
             name: "Being a Client",
             file: "/mdFiles/being_a_client.md"
         },
-        {
-            name: "CLI Reference",
-            file: "/mdFiles/cli_reference.md"
-        },
         {
             name: "API Reference",
             file: "/mdFiles/api_reference.md"
         },
+        {
+            name: "CKart CLI Installation",
+            file: "/mdFiles/USER_INSTALLATION.md"
+        },
+        {
+            name: "CKart CLI Commands",
+            file: "/mdFiles/USER_COMMANDS.md"
+        },
         {
             name: "FAQ",
             file: "/mdFiles/faq.md"
@@ -35,7 +40,8 @@ const DocsMainPage = () => {
         {
             name: "Support",
             file: "/mdFiles/support.md"
-        }
+        },
+        
     ];
 
     const [scrollToId, setScrollToId] = useState(null);
@@ -47,13 +53,14 @@ const DocsMainPage = () => {
     }
 
 
-    return <>
+    return <div>
+        {/* <div><h2 className="text-2xl font-semibold text-slate-800 mb-6 p-6">Documentation</h2></div> */}
         <div className="docs-main-page">
             <Sidebar handleFileChange={handleFileChange} mdFiles={mdFiles} />
             <ShowDocumentation mdFile={mdFile} scrollToId={scrollToId} />
-            <Mainheadings className="z-0" mdFile={mdFile} setScrollToId={setScrollToId} />
+            <Mainheadings mdFile={mdFile} setScrollToId={setScrollToId} />
         </div>
-    </>
+    </div>
 };
 
 export default DocsMainPage;
diff --git a/src/docs/css/ShowDocumentation.css b/src/docs/css/ShowDocumentation.css
index aad50ba..29d53f1 100644
--- a/src/docs/css/ShowDocumentation.css
+++ b/src/docs/css/ShowDocumentation.css
@@ -1,58 +1,61 @@
 /* Center and style the markdown content */
 .showdocumentation {
-    box-sizing: border-box;
-    max-width: 980px;
-    margin: 0 auto;
-    padding: 30px;
-    background-color: rgb(255, 255, 255);
-    color: black;
-    box-shadow: 0 0 10px rgba(0,0,0,0.05);
-    overflow-x: auto;
+	box-sizing: border-box;
+	width: 100%;
+	max-width: 100%;
+	margin: 0;
+	padding: 30px 32px;
+	background-color: #fff;
+	color: black;
+	box-shadow: none;
+	overflow-x: auto;
+	height: 100%;
+	min-height: 0;
 }
 
 /* Optional tweaks for better spacing */
-.showdocumentation h1, 
-.showdocumentation h2, 
+.showdocumentation h1,
+.showdocumentation h2,
 .showdocumentation h3 {
-  border-bottom: 1px solid #eaecef;
-  padding-bottom: 0.3em;
-  margin-top: 1.5em;
+	border-bottom: 1px solid #eaecef;
+	padding-bottom: 0.3em;
+	/* margin-top: 1.5em; */
 }
 
 /* Improve table readability */
 .showdocumentation table {
-  border-collapse: collapse;
-  width: 100%;
-  overflow-x: auto;
-  display: block;
+	border-collapse: collapse;
+	width: 100%;
+	overflow-x: auto;
+	display: block;
 }
 
 .showdocumentation th,
 .showdocumentation td {
-  border: 1px solid #dfe2e5;
-  padding: 6px 13px;
+	border: 1px solid #dfe2e5;
+	padding: 6px 13px;
 }
 
 .showdocumentation blockquote {
-  color: #6a737d;
-  border-left: 0.25em solid #dfe2e5;
-  padding: 0 1em;
-  margin-left: 0;
-  background-color: #f6f8fa;
+	color: #6a737d;
+	border-left: 0.25em solid #dfe2e5;
+	padding: 0 1em;
+	margin-left: 0;
+	background-color: #f6f8fa;
 }
 
 /* Code block padding */
 .showdocumentation pre {
-  background: #f6f8fa;
-  padding: 16px;
-  border-radius: 6px;
-  overflow: auto;
+	background: #f6f8fa;
+	padding: 16px;
+	border-radius: 6px;
+	overflow: auto;
 }
 
 /* Inline code */
 .showdocumentation code {
-  background-color: rgba(27,31,35,0.05);
-  padding: 0.2em 0.4em;
-  border-radius: 3px;
-  font-size: 85%;
+	background-color: rgba(27, 31, 35, 0.05);
+	padding: 0.2em 0.4em;
+	border-radius: 3px;
+	font-size: 85%;
 }
diff --git a/src/docs/css/docsMainPage.css b/src/docs/css/docsMainPage.css
index 7d287b6..f7ae659 100644
--- a/src/docs/css/docsMainPage.css
+++ b/src/docs/css/docsMainPage.css
@@ -1,8 +1,39 @@
 .docs-main-page {
-    display: flex;
-    height: 100vh;
-    background-color: #f9f9f9;
-    font-family: 'Roboto', sans-serif;
-    padding-top: 32px;
+	display: flex;
+	height: calc(100vh - 56px); /* Adjust if navbar/header present */
+	background-color: #f9f9f9;
+	font-family: "Roboto", sans-serif;
+	min-height: 0;
+	position: relative;
+}
+
+.doc-sidebar-div {
+	width: 220px;
+	min-width: 180px;
+	max-width: 260px;
+	/* background-color: #f2f2f2; */
+	background: #ffffff;
+	padding: 20px 10px 20px 20px;
+	/* padding-top: 100px; */
+	position: sticky;
+	top: 0;
+	height: 100vh;
+	overflow-y: auto;
+	z-index: 2;
+	border-right: 1px solid #e0e0e0;
+}
+
+.showdocumentation {
+	flex: 1 1 0;
+	min-width: 0;
+	max-width: 100%;
+	height: 100vh;
+	overflow-y: auto;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 30px 32px;
+	background-color: #fff;
+	color: black;
+	box-shadow: none;
+	z-index: 1;
 }
-  
\ No newline at end of file
diff --git a/src/docs/css/mainHeadings.css b/src/docs/css/mainHeadings.css
index b912a95..3a1f70d 100644
--- a/src/docs/css/mainHeadings.css
+++ b/src/docs/css/mainHeadings.css
@@ -1,27 +1,28 @@
 .mainheadings {
-    width: 250px;
-    background: #fff;
-    border-left: 1px solid #ddd;
-    padding: 1rem;
-    overflow-y: auto;
-    position: sticky;
-    top: 0;
-    height: 100vh;
-    padding-top: 100px;
+	width: 220px;
+	min-width: 180px;
+	max-width: 260px;
+	background: #fff;
+	border-left: 1px solid #ddd;
+	padding: 1rem 1rem 1rem 0.5rem;
+	overflow-y: auto;
+	position: sticky;
+	top: 0;
+	height: 100vh;
+	z-index: 2;
 }
 
 .toc-title {
-  font-weight: bold;
-  margin-bottom: 1rem;
+	font-weight: bold;
+	margin-bottom: 1rem;
 }
 
 .toc-item {
-  padding: 0.3rem 0;
-  cursor: pointer;
-  color: #1a73e8;
+	padding: 0.3rem 0;
+	cursor: pointer;
+	color: #1a73e8;
 }
 
 .toc-item:hover {
-  text-decoration: underline;
+	text-decoration: underline;
 }
-  
\ No newline at end of file
diff --git a/src/docs/css/sidebar.css b/src/docs/css/sidebar.css
index ee9b253..b7d4876 100644
--- a/src/docs/css/sidebar.css
+++ b/src/docs/css/sidebar.css
@@ -1,28 +1,37 @@
 .doc-sidebar-div {
-    background-color: #f2f2f2;
-    padding: 20px;
-    padding-top: 100px;
+	background-color: #f2f2f2;
+	width: 220px;
+	min-width: 180px;
+	max-width: 260px;
+	padding: 20px 10px 20px 20px;
+	padding-top: 100px;
+	position: sticky;
+	top: 0;
+	height: 100vh;
+	overflow-y: auto;
+	z-index: 2;
+	border-right: 1px solid #e0e0e0;
 }
 
 .doc-sidebar-h2 {
-    font-size: 24px;
-    margin-bottom: 10px;
+	font-size: 24px;
+	margin-bottom: 10px;
 }
 
 .doc-sidebar-ul {
-    list-style-type: none;
-    padding: 0;
+	list-style-type: none;
+	padding: 0;
 }
 
 .doc-sidebar-li {
-    margin-bottom: 10px;
+	margin-bottom: 10px;
 }
 
 .doc-sidebar-a {
-    text-decoration: none;
-    color: #333;
+	text-decoration: none;
+	color: #333;
 }
 
 .doc-sidebar-a:hover {
-    color: #666;
+	color: #666;
 }
diff --git a/src/index.css b/src/index.css
index 024c95d..d864285 100644
--- a/src/index.css
+++ b/src/index.css
@@ -30,6 +30,7 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
+    color: black;
 }
 button:hover{
   cursor: pointer;
@@ -38,4 +39,8 @@ button:hover{
 }
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+pre{
+  color: black;
+}
\ No newline at end of file