diff --git a/docs/_config.yml b/docs/_config.yml
index 30eb813..892475a 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -9,7 +9,7 @@ baseurl: "/Adminator-admin-dashboard"
 # Build settings
 markdown: kramdown
 highlighter: rouge
-theme: minima
+remote_theme: just-the-docs/just-the-docs
 
 # Plugin settings
 plugins:
@@ -17,20 +17,45 @@ plugins:
   - jekyll-sitemap
   - jekyll-seo-tag
 
-# Navigation
-navigation:
-  - title: "Getting Started"
-    url: "/getting-started/"
-  - title: "Components"
-    url: "/components/"
-  - title: "Dark Mode & Theming"
-    url: "/customization/"
-  - title: "API Reference"
-    url: "/api/"
-  - title: "Examples"
-    url: "/examples/"
-  - title: "Deployment"
-    url: "/deployment/"
+# Just the Docs theme configuration
+color_scheme: nil
+search_enabled: true
+search:
+  heading_level: 2
+  previews: 2
+  preview_words_before: 3
+  preview_words_after: 3
+  tokenizer_separator: /[\s/]+/
+  rel_url: true
+  button: false
+
+# Enable custom CSS
+sass:
+  sass_dir: _sass
+  style: compressed
+
+# Heading anchor links appear on hover over h1-h6 tags
+heading_anchors: true
+
+# Footer
+footer_content: "Copyright &copy; 2024 Colorlib. Distributed by an <a href=\"https://github.com/puikinsh/Adminator-admin-dashboard/blob/master/LICENSE\">MIT license.</a>"
+
+# Back to top link
+back_to_top: true
+back_to_top_text: "Back to top"
+
+# Navigation Structure
+nav_sort: case_insensitive
+
+# Aux links for the upper right navigation
+aux_links:
+  "GitHub Repository":
+    - "//github.com/puikinsh/Adminator-admin-dashboard"
+  "Live Demo":
+    - "//adminator.colorlib.com"
+
+# Makes Aux links open in a new tab
+aux_links_new_tab: true
 
 # SEO
 author: "Colorlib"
@@ -52,6 +77,15 @@ exclude:
   - vendor/gems/
   - vendor/ruby/
 
+# Code highlighting
+kramdown:
+  syntax_highlighter: rouge
+  syntax_highlighter_opts:
+    css_class: 'highlight'
+    block:
+      line_numbers: false
+      start_line: 1
+
 # Include
 include:
   - _pages
@@ -72,14 +106,4 @@ defaults:
   - scope:
       path: ""
     values:
-      layout: "default"
-
-# Code highlighting
-kramdown:
-  syntax_highlighter: rouge
-  syntax_highlighter_opts:
-    css_class: 'highlight'
-    span:
-      line_numbers: false
-    block:
-      line_numbers: true 
\ No newline at end of file
+      layout: "default" 
\ No newline at end of file
diff --git a/docs/_sass/custom.scss b/docs/_sass/custom.scss
new file mode 100644
index 0000000..27662c6
--- /dev/null
+++ b/docs/_sass/custom.scss
@@ -0,0 +1,182 @@
+// Custom styles for Adminator Documentation
+
+// Fix code block formatting
+.highlight {
+  .language-javascript,
+  .language-css,
+  .language-html,
+  .language-bash {
+    &:before {
+      content: attr(class);
+      display: block;
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: #6b7280;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-bottom: 0.5rem;
+      padding-bottom: 0.25rem;
+      border-bottom: 1px solid #e5e7eb;
+    }
+  }
+}
+
+// Better code block styling
+pre.highlight {
+  background-color: #f8fafc !important;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  overflow-x: auto;
+  
+  code {
+    background: transparent !important;
+    border: none !important;
+    font-family: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+  }
+}
+
+// Inline code styling
+code:not(.highlighter-rouge) {
+  background-color: #f1f5f9 !important;
+  color: #475569 !important;
+  padding: 0.125rem 0.25rem !important;
+  border-radius: 3px !important;
+  font-size: 0.875em !important;
+  border: 1px solid #e2e8f0 !important;
+}
+
+// Feature cards styling
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.5rem;
+  margin: 2rem 0;
+}
+
+.feature-card {
+  padding: 1.5rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #ffffff;
+  
+  h3 {
+    margin-top: 0;
+    color: #1f2937;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    
+    &:before {
+      content: "✨";
+      font-size: 1.25em;
+    }
+  }
+}
+
+// Button improvements
+.btn {
+  &.btn-outline {
+    border: 1px solid #d1d5db;
+    color: #374151;
+    text-decoration: none;
+    
+    &:hover {
+      background-color: #f9fafb;
+      border-color: #9ca3af;
+    }
+  }
+  
+  &.btn-green {
+    background-color: #059669;
+    color: white;
+    border: 1px solid #059669;
+    
+    &:hover {
+      background-color: #047857;
+      border-color: #047857;
+    }
+  }
+}
+
+// Table styling improvements
+table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 1.5rem 0;
+  
+  th, td {
+    padding: 0.75rem 1rem;
+    text-align: left;
+    border-bottom: 1px solid #e5e7eb;
+  }
+  
+  th {
+    background-color: #f9fafb;
+    font-weight: 600;
+    color: #374151;
+  }
+  
+  tr:hover {
+    background-color: #f9fafb;
+  }
+}
+
+// Navigation improvements
+.site-nav {
+  .nav-list {
+    .nav-list-item {
+      &.active {
+        > .nav-list-link {
+          background-color: #eff6ff;
+          color: #1d4ed8;
+        }
+      }
+    }
+  }
+}
+
+// Custom alert boxes
+.alert {
+  padding: 1rem 1.25rem;
+  margin: 1.5rem 0;
+  border-radius: 6px;
+  border-left: 4px solid;
+  
+  &.alert-info {
+    background-color: #eff6ff;
+    border-left-color: #3b82f6;
+    color: #1e40af;
+  }
+  
+  &.alert-warning {
+    background-color: #fffbeb;
+    border-left-color: #f59e0b;
+    color: #92400e;
+  }
+  
+  &.alert-success {
+    background-color: #f0fdf4;
+    border-left-color: #10b981;
+    color: #065f46;
+  }
+}
+
+// Dark mode improvements for code
+@media (prefers-color-scheme: dark) {
+  pre.highlight {
+    background-color: #1f2937 !important;
+    border-color: #374151;
+    
+    code {
+      color: #e5e7eb !important;
+    }
+  }
+  
+  code:not(.highlighter-rouge) {
+    background-color: #374151 !important;
+    color: #d1d5db !important;
+    border-color: #4b5563 !important;
+  }
+} 
\ No newline at end of file
diff --git a/docs/api.md b/docs/api.md
new file mode 100644
index 0000000..156813a
--- /dev/null
+++ b/docs/api.md
@@ -0,0 +1,12 @@
+---
+layout: default
+title: API Reference
+nav_order: 4
+has_children: true
+---
+
+# API Reference
+
+Complete JavaScript API documentation for Adminator.
+
+This section provides detailed documentation for all JavaScript APIs, utility functions, and integration methods. 
\ No newline at end of file
diff --git a/docs/api/theme-api.md b/docs/api/theme-api.md
index 83c5c15..3118e89 100644
--- a/docs/api/theme-api.md
+++ b/docs/api/theme-api.md
@@ -1,4 +1,18 @@
+---
+layout: default
+title: Theme API
+nav_order: 1
+parent: API Reference
+---
+
 # Theme API Reference
+{: .no_toc }
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
 
 Complete API documentation for the Adminator Theme utility system.
 
diff --git a/docs/customization.md b/docs/customization.md
new file mode 100644
index 0000000..ebbffe6
--- /dev/null
+++ b/docs/customization.md
@@ -0,0 +1,12 @@
+---
+layout: default
+title: Customization
+nav_order: 3
+has_children: true
+---
+
+# Customization
+
+Learn how to customize Adminator's appearance and behavior.
+
+This section covers the dark mode system, theming, CSS variables, and custom component creation. 
\ No newline at end of file
diff --git a/docs/customization/theme-system.md b/docs/customization/theme-system.md
index b1d6117..d6e5bde 100644
--- a/docs/customization/theme-system.md
+++ b/docs/customization/theme-system.md
@@ -1,4 +1,18 @@
+---
+layout: default
+title: Theme System
+nav_order: 1
+parent: Customization
+---
+
 # Theme System Overview
+{: .no_toc }
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
 
 Adminator v2.6.0 introduces a comprehensive dark mode system with intelligent theme switching and component integration.
 
diff --git a/docs/examples.md b/docs/examples.md
new file mode 100644
index 0000000..5ccfbbf
--- /dev/null
+++ b/docs/examples.md
@@ -0,0 +1,12 @@
+---
+layout: default
+title: Examples
+nav_order: 5
+has_children: true
+---
+
+# Examples
+
+Practical examples and integration guides.
+
+This section provides real-world examples of using Adminator in various scenarios and frameworks. 
\ No newline at end of file
diff --git a/docs/examples/theme-integration.md b/docs/examples/theme-integration.md
index 7c904a0..05ef3f5 100644
--- a/docs/examples/theme-integration.md
+++ b/docs/examples/theme-integration.md
@@ -1,4 +1,18 @@
+---
+layout: default
+title: Theme Integration
+nav_order: 1
+parent: Examples
+---
+
 # Theme Integration Examples
+{: .no_toc }
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
 
 Practical examples for integrating custom components with Adminator's theme system.
 
diff --git a/docs/getting-started.md b/docs/getting-started.md
new file mode 100644
index 0000000..a37023f
--- /dev/null
+++ b/docs/getting-started.md
@@ -0,0 +1,12 @@
+---
+layout: default
+title: Getting Started
+nav_order: 2
+has_children: true
+---
+
+# Getting Started
+
+Everything you need to know to start building with Adminator.
+
+This section covers installation, project setup, development workflow, and deployment options. 
\ No newline at end of file
diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md
index 06d26d6..3d38245 100644
--- a/docs/getting-started/installation.md
+++ b/docs/getting-started/installation.md
@@ -1,4 +1,20 @@
+---
+layout: default
+title: Installation
+nav_order: 1
+parent: Getting Started
+---
+
 # Installation Guide
+{: .no_toc }
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+---
 
 This guide will help you get Adminator up and running on your local machine.
 
diff --git a/docs/index.md b/docs/index.md
index b389efb..828ec45 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,19 +1,30 @@
 ---
-title: Adminator Documentation
-description: Complete guide for the Adminator Bootstrap 5 Admin Dashboard Template
+layout: default
+title: Home
+nav_order: 1
+description: "Adminator Bootstrap 5 Admin Dashboard with Dark Mode"
+permalink: /
 ---
 
 # Adminator Documentation
+{: .fs-9 }
 
-Welcome to the comprehensive documentation for **Adminator**, a modern Bootstrap 5 admin dashboard template with dark mode support.
+Complete guide for the Bootstrap 5 Admin Dashboard Template with comprehensive Dark Mode system
+{: .fs-6 .fw-300 }
 
-## 🌟 Overview
+[Get Started Now](getting-started/installation){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 }
+[View on GitHub](https://github.com/puikinsh/Adminator-admin-dashboard){: .btn .fs-5 .mb-4 .mb-md-0 }
 
-Adminator is a responsive, feature-rich admin template built with:
-- **Bootstrap 5.3.6** - Latest CSS framework
-- **Dark Mode System** - Complete theme switching with OS detection
-- **Modern Components** - Charts, calendars, maps, and interactive elements
-- **Performance Optimized** - Webpack build system with modern tooling
+---
+
+## ✨ What's New in v2.6.0
+
+🌗 **Complete Dark Mode System** - Intelligent theme switching with OS preference detection  
+⚡ **Smart Theme Toggle** - Bootstrap-based switch with instant updates  
+🎨 **CSS Variables Architecture** - Semantic color system for easy customization  
+📊 **Component Integration** - All charts, calendars, and maps are theme-aware  
+
+---
 
 ## 🚀 Quick Start
 
@@ -28,99 +39,72 @@ npm install
 npm start
 ```
 
-Visit `http://localhost:4000` to see Adminator in action.
-
-## 📖 Documentation Sections
-
-### 🏁 [Getting Started](getting-started/)
-- [Installation Guide](getting-started/installation.md)
-- [Project Structure](getting-started/project-structure.md)
-- [Development Workflow](getting-started/development.md)
-- [Build & Deployment](getting-started/build-deployment.md)
-
-### 🎨 [Components](components/)
-- [Charts & Data Visualization](components/charts.md)
-- [Forms & Input Elements](components/forms.md)
-- [Tables & Data Display](components/tables.md)
-- [Navigation & Layout](components/navigation.md)
-- [Modals & Overlays](components/modals.md)
-
-### 🌙 [Dark Mode & Theming](customization/)
-- [Theme System Overview](customization/theme-system.md)
-- [CSS Variables Reference](customization/css-variables.md)
-- [Custom Theme Creation](customization/custom-themes.md)
-- [Component Theming](customization/component-theming.md)
-
-### 🔧 [API Reference](api/)
-- [Theme API](api/theme-api.md)
-- [Component APIs](api/component-apis.md)
-- [Utility Functions](api/utilities.md)
-- [Event System](api/events.md)
-
-### 💡 [Examples](examples/)
-- [Basic Setup](examples/basic-setup.md)
-- [Custom Components](examples/custom-components.md)
-- [Theme Integration](examples/theme-integration.md)
-- [Advanced Patterns](examples/advanced-patterns.md)
-
-### 🚀 [Deployment](deployment/)
-- [Production Build](deployment/production-build.md)
-- [Static Hosting](deployment/static-hosting.md)
-- [CDN Integration](deployment/cdn-integration.md)
-- [Performance Optimization](deployment/performance.md)
-
-### 🤝 [Contributing](contributing/)
-- [Development Setup](contributing/development-setup.md)
-- [Code Standards](contributing/code-standards.md)
-- [Pull Request Process](contributing/pull-requests.md)
-- [Issue Templates](contributing/issues.md)
-
-## ✨ Key Features
-
-### 🌗 Dark Mode System
-- **Smart Toggle**: Bootstrap-based switch with visual indicators
-- **OS Detection**: Automatically respects user's system preference
-- **Persistent Storage**: Remembers theme choice across sessions
-- **Component Integration**: All elements are theme-aware
-
-### 📊 Rich Components
-- **Chart.js Integration**: Line, bar, pie, and radar charts
-- **FullCalendar**: Interactive calendar with event management
-- **DataTables**: Advanced table features with search and pagination
-- **Vector Maps**: Interactive world and regional maps
-- **Google Maps**: Custom styled maps with markers
-
-### 🛠️ Developer Experience
-- **Modern Tooling**: Webpack 5, ESLint 9.x, Sass, PostCSS
-- **Hot Reload**: Instant development feedback
-- **Code Quality**: Automated linting and formatting
-- **Performance**: Optimized builds with code splitting
-
-## 🔗 Quick Links
-
-- **[Live Demo](https://colorlib.com/polygon/adminator/index.html)** - See Adminator in action
-- **[GitHub Repository](https://github.com/puikinsh/Adminator-admin-dashboard)** - Source code and issues
-- **[Changelog](https://github.com/puikinsh/Adminator-admin-dashboard/blob/master/CHANGELOG.md)** - Version history
-- **[License](https://github.com/puikinsh/Adminator-admin-dashboard/blob/master/LICENSE)** - MIT License
-
-## 🆕 What's New in v2.6.0
-
-The latest release introduces a comprehensive dark mode system:
-
-- **🌙 Complete Dark Theme** with automatic OS detection
-- **🎨 Theme-Aware Components** for charts, calendars, and maps
-- **⚡ Instant Switching** without page reload
-- **🎯 CSS Variables Architecture** for consistent theming
-- **📱 Responsive Design** across all screen sizes
-
-[View Full Changelog →](https://github.com/puikinsh/Adminator-admin-dashboard/blob/master/CHANGELOG.md)
-
-## 💬 Support
-
-- **Issues**: [GitHub Issues](https://github.com/puikinsh/Adminator-admin-dashboard/issues)
-- **Discussions**: [GitHub Discussions](https://github.com/puikinsh/Adminator-admin-dashboard/discussions)
-- **Documentation**: You're here! 📖
+Visit `http://localhost:4000` to see your dashboard!
+
+---
+
+## 📚 Documentation Sections
+
+### Getting Started
+Learn how to install, configure, and deploy Adminator with our comprehensive setup guides.
+
+[Installation Guide →](getting-started/installation){: .btn .btn-outline }
+
+### Dark Mode & Theming
+Discover the powerful dark mode system with CSS variables and theme switching capabilities.
+
+[Theme System →](customization/theme-system){: .btn .btn-outline }
+
+### API Reference
+Complete JavaScript API documentation for theme management and component integration.
+
+[API Documentation →](api/theme-api){: .btn .btn-outline }
+
+### Examples & Integration
+Real-world examples and integration guides for popular frameworks and use cases.
+
+[View Examples →](examples/theme-integration){: .btn .btn-outline }
+
+---
+
+## 🎯 Key Features
+
+| Feature | Description |
+|:--------|:------------|
+| **Bootstrap 5** | Latest Bootstrap framework with modern components |
+| **Dark Mode** | Comprehensive dark theme with intelligent switching |
+| **Responsive** | Mobile-first design that works on all devices |
+| **Chart Integration** | Chart.js with theme-aware color schemes |
+| **Calendar Support** | FullCalendar with dark mode styling |
+| **Vector Maps** | Interactive maps with custom color palettes |
+| **Clean Code** | Well-organized, documented, and maintainable |
+
+---
+
+## 🌟 Live Demo
+
+Experience Adminator's features in action:
+
+### Light Mode
+![Adminator Light Mode](https://github.com/user-attachments/assets/24c5a0df-ae77-4826-9ef5-4a6b4a8ea6c7)
+
+### Dark Mode  
+![Adminator Dark Mode](https://github.com/user-attachments/assets/9c2b9e3b-b67e-4d5c-9ec4-5d9d8e1c7a8f)
+
+[Try Live Demo](https://adminator.colorlib.com){: .btn .btn-green .fs-5 }
+
+---
+
+## 🤝 Contributing
+
+We welcome contributions! Please read our [contributing guidelines](contributing/) before submitting pull requests.
+
+---
+
+## 📄 License
+
+Adminator is released under the [MIT License](https://github.com/puikinsh/Adminator-admin-dashboard/blob/master/LICENSE).
 
 ---
 
-**Happy coding with Adminator!** 🚀 
\ No newline at end of file
+**Ready to build amazing dashboards?** Start with our [installation guide](getting-started/installation) or explore the [dark mode features](customization/theme-system)! 
\ No newline at end of file