diff --git a/astro.config.mjs b/astro.config.mjs
index 70d5152..22fc574 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -9,7 +9,8 @@ export default defineConfig({
     starlight({
       title: 'Refact Documentation',
       components: {
-        Search: './src/components/Search.astro'
+        Search: './src/components/Search.astro',
+        Head: './src/components/Head.astro'
       },
       logo: {
         light: '/src/assets/logo-light.svg',
@@ -52,116 +53,314 @@ export default defineConfig({
       sidebar: [
         {
           label: 'Introduction',
+          collapsed: true,
           items: [
-            { label: 'Quickstart', link: '/introduction/quickstart/' },
+            { 
+              label: 'Quickstart', 
+              link: '/introduction/quickstart/',
+              attrs: {
+                'aria-label': 'Get started with Refact'
+              }
+            },
             {
               label: 'Installation',
+              collapsed: true,
               items: [
-                { label: 'Installation Hub', link: '/installation/installation-hub/' },
-                { label: 'VS Code', link: '/installation/vs-code/' },
-                { label: 'JetBrains IDEs', link: '/installation/jetbrains/' },
+                { 
+                  label: 'Installation Hub', 
+                  link: '/installation/installation-hub/',
+                  attrs: {
+                    'aria-label': 'Browse Installation Options'
+                  }
+                },
+                { 
+                  label: 'VS Code', 
+                  link: '/installation/vs-code/',
+                  attrs: {
+                    'aria-label': 'Install Refact for VS Code'
+                  }
+                },
+                { 
+                  label: 'JetBrains IDEs', 
+                  link: '/installation/jetbrains/',
+                  attrs: {
+                    'aria-label': 'Install Refact for JetBrains IDEs'
+                  }
+                },
               ] 
             },
             {
               label: 'Features',
+              collapsed: true,
               items: [
-                { label: 'AI Chat', link: '/features/ai-chat/' },
-                { label: 'AI Toolbox', link: '/features/ai-toolbox/' },
-                { label: 'Autonomous Agent', items: [
-                  { label: 'Getting Started', link: '/features/autonomous-agent/getting-started/' },
-                  { label: 'Overview', link: '/features/autonomous-agent/overview/' },
-                  { label: 'Integrations', items: [
-                    { label: 'Overview', link: '/features/autonomous-agent/integrations/' },
-                    // Development Tools
-                    { label: 'Chrome', link: '/features/autonomous-agent/integrations/chrome/' },
-                    { label: 'Shell Commands', link: '/features/autonomous-agent/integrations/shell-commands/' },
-                    { label: 'Command Line Tool', link: '/features/autonomous-agent/integrations/command-line-tool/' },
-                    { label: 'Command Line Service', link: '/features/autonomous-agent/integrations/command-line-service/' },
-                    // Version Control
-                    { label: 'GitHub', link: '/features/autonomous-agent/integrations/github/' },
-                    { label: 'GitLab', link: '/features/autonomous-agent/integrations/gitlab/' },
-                    // Container Management
-                    { label: 'Docker', link: '/features/autonomous-agent/integrations/docker/' },
-                    // Databases
-                    { label: 'PostgreSQL', link: '/features/autonomous-agent/integrations/postgresql/' },
-                    { label: 'MySQL', link: '/features/autonomous-agent/integrations/mysql/' },
-                    // Debugging
-                    { label: 'PDB', link: '/features/autonomous-agent/integrations/pdb/' },
-                  ] },
-                ] },
-                { label: 'Code Completion', link: '/features/code-completion/' },
-                { label: 'Context', link: '/features/context/' },
-                { label: 'Fine-tuning', link: '/features/finetuning/' },
+                { 
+                  label: 'AI Chat', 
+                  link: '/features/ai-chat/',
+                  attrs: {
+                    'aria-label': 'Learn about AI Chat Feature'
+                  }
+                },
+                { 
+                  label: 'AI Toolbox', 
+                  link: '/features/ai-toolbox/',
+                  attrs: {
+                    'aria-label': 'Explore AI Toolbox Features'
+                  }
+                },
+                { 
+                  label: 'Code Completion', 
+                  link: '/features/code-completion/',
+                  attrs: {
+                    'aria-label': 'Learn about Code Completion'
+                  }
+                },
+                { 
+                  label: 'Context', 
+                  link: '/features/context/',
+                  attrs: {
+                    'aria-label': 'Understanding Context Features'
+                  }
+                },
+                { 
+                  label: 'Fine-tuning', 
+                  link: '/features/finetuning/',
+                  attrs: {
+                    'aria-label': 'Learn about Model Fine-tuning'
+                  }
+                },
               ]
             },
           ],
         },
+        {
+          label: 'Autonomous Agent',
+          collapsed: true,
+          items: [
+            { label: 'Getting Started', link: '/features/autonomous-agent/getting-started/' },
+            { label: 'Overview', link: '/features/autonomous-agent/overview/' },
+            { 
+              label: 'Tools', 
+              link: '/features/autonomous-agent/tools/',
+              attrs: {
+                'aria-label': 'Learn about Agent Tools'
+              }
+            },
+            { 
+              label: 'Rollback', 
+              link: '/features/autonomous-agent/rollback/',
+              attrs: {
+                'aria-label': 'Learn about Agent Rollback Feature'
+              }
+            },
+            { 
+              label: 'Integrations', 
+              collapsed: true,
+              items: [
+                { label: 'Overview', link: '/features/autonomous-agent/integrations/' },
+                // Development Tools
+                { label: 'Shell Commands', link: '/features/autonomous-agent/integrations/shell-commands/' },
+                { label: 'Command Line Tool', link: '/features/autonomous-agent/integrations/command-line-tool/' },
+                { label: 'Command Line Service', link: '/features/autonomous-agent/integrations/command-line-service/' },
+                // Version Control
+                { label: 'GitHub', link: '/features/autonomous-agent/integrations/github/' },
+                { label: 'GitLab', link: '/features/autonomous-agent/integrations/gitlab/' },
+                // Container Management
+                { label: 'Docker', link: '/features/autonomous-agent/integrations/docker/' },
+                // Databases
+                { label: 'PostgreSQL', link: '/features/autonomous-agent/integrations/postgresql/' },
+                { label: 'MySQL', link: '/features/autonomous-agent/integrations/mysql/' },
+                // Debugging
+                { label: 'PDB', link: '/features/autonomous-agent/integrations/pdb/' },
+              ] 
+            },
+          ]
+        },
         {
           label: 'Guides',
+          collapsed: true,
           items: [
-            { label: 'Deployment',
+            { 
+              label: 'Deployment',
+              collapsed: true,
               items: [
-                { label: 'Runpod Deployment', link: '/guides/deployment/runpod/' },
-                { label: 'AWS Deployment', items: [
-                  { label: 'Getting Started', link: '/guides/deployment/aws/getting-started/' },
-                  { label: 'Launch from EC2', link: '/guides/deployment/aws/ec2/' },
-                  { label: 'Launch from Website', link: '/guides/deployment/aws/marketplace/' },
-                  { label: 'Usage', link: '/guides/deployment/aws/usage/' },
-                ] },
-             ] 
+                { 
+                  label: 'Runpod Deployment', 
+                  link: '/guides/deployment/runpod/',
+                  attrs: {
+                    'aria-label': 'Learn about Runpod Deployment'
+                  }
+                },
+                { 
+                  label: 'AWS Deployment', 
+                  collapsed: true,
+                  items: [
+                    { 
+                      label: 'Getting Started', 
+                      link: '/guides/deployment/aws/getting-started/',
+                      attrs: {
+                        'aria-label': 'Getting Started with AWS Deployment'
+                      }
+                    },
+                    { 
+                      label: 'Launch from EC2', 
+                      link: '/guides/deployment/aws/ec2/',
+                      attrs: {
+                        'aria-label': 'Launch Refact from EC2'
+                      }
+                    },
+                    { 
+                      label: 'Launch from Website', 
+                      link: '/guides/deployment/aws/marketplace/',
+                      attrs: {
+                        'aria-label': 'Launch Refact from AWS Marketplace'
+                      }
+                    },
+                    { 
+                      label: 'Usage', 
+                      link: '/guides/deployment/aws/usage/',
+                      attrs: {
+                        'aria-label': 'AWS Deployment Usage Guide'
+                      }
+                    },
+                  ] 
+                },
+              ] 
             },
             {
               label: 'Plugins',
+              collapsed: true,
               items: [
-                { label: 'JetBrains IDEs', 
+                { 
+                  label: 'JetBrains IDEs', 
+                  collapsed: true,
                   items: [
-                    { label: 'Troubleshooting', link: '/guides/plugins/jetbrains/troubleshooting/' },
+                    { 
+                      label: 'Troubleshooting', 
+                      link: '/guides/plugins/jetbrains/troubleshooting/',
+                      attrs: {
+                        'aria-label': 'JetBrains IDEs Troubleshooting Guide'
+                      }
+                    },
                   ]
                 },
               ]
             },
-            { label: 'Authentication', 
+            { 
+              label: 'Authentication', 
+              collapsed: true,
               items: [
-                { label: 'Keycloak Integration', link: '/guides/authentication/keycloak/' },
+                { 
+                  label: 'Keycloak Integration', 
+                  link: '/guides/authentication/keycloak/',
+                  attrs: {
+                    'aria-label': 'Learn about Keycloak Integration'
+                  }
+                },
               ]
             },
-            { label: 'Version-specific Usage',
+            { 
+              label: 'Version-specific Usage',
+              collapsed: true,
               items: [
-                { label: 'Self-hosted Refact', link: '/guides/version-specific/self-hosted/' },
-                { label: 'Enterprise Refact', 
+                { 
+                  label: 'Self-hosted Refact',
+                  collapsed: true,
+                  items: [
+                    { 
+                      label: 'Self-hosted Refact', 
+                      link: '/guides/version-specific/self-hosted/',
+                      attrs: {
+                        'aria-label': 'Self-hosted Refact Guide'
+                      }
+                    }
+                  ]
+                },
+                { 
+                  label: 'Enterprise Refact', 
+                  collapsed: true,
                   items: [
-                    { label: 'Getting Started', link: '/guides/version-specific/enterprise/getting-started/' },
-                    { label: 'License', link: '/guides/version-specific/enterprise/license/' },
-                    { label: 'Users', link: '/guides/version-specific/enterprise/users/' },
-                    { label: 'Model Hosting', link: '/guides/version-specific/enterprise/model-hosting/' },
-                    { label: 'Plugins', link: '/guides/version-specific/enterprise/plugins/' },
+                    { 
+                      label: 'Getting Started', 
+                      link: '/guides/version-specific/enterprise/getting-started/',
+                      attrs: {
+                        'aria-label': 'Getting Started with Enterprise Refact'
+                      }
+                    },
+                    { 
+                      label: 'License', 
+                      link: '/guides/version-specific/enterprise/license/',
+                      attrs: {
+                        'aria-label': 'Enterprise Refact License Information'
+                      }
+                    },
+                    { 
+                      label: 'Users', 
+                      link: '/guides/version-specific/enterprise/users/',
+                      attrs: {
+                        'aria-label': 'Enterprise Refact User Management'
+                      }
+                    },
+                    { 
+                      label: 'Model Hosting', 
+                      link: '/guides/version-specific/enterprise/model-hosting/',
+                      attrs: {
+                        'aria-label': 'Enterprise Refact Model Hosting Guide'
+                      }
+                    },
+                    { 
+                      label: 'Plugins', 
+                      link: '/guides/version-specific/enterprise/plugins/',
+                      attrs: {
+                        'aria-label': 'Enterprise Refact Plugins Guide'
+                      }
+                    },
                   ] 
                 },
-                { label: 'Refact Teams', link: '/guides/version-specific/teams/' },
+                { 
+                  label: 'Refact Teams', 
+                  link: '/guides/version-specific/teams/',
+                  attrs: {
+                    'aria-label': 'Learn about Refact Teams'
+                  }
+                },
               ]
             },
-            { label: 'Reverse Proxy', link: '/guides/reverse-proxy/' },
+            { 
+              label: 'Reverse Proxy', 
+              link: '/guides/reverse-proxy/',
+              attrs: {
+                'aria-label': 'Learn about Reverse Proxy Setup'
+              }
+            },
           ]
         },
         {
           label: 'Supported Models',
           link: '/supported-models/',
+          attrs: {
+            'aria-label': 'View Supported AI Models'
+          }
         },
         {
           label: 'BYOK',
           link: '/byok/',
+          attrs: {
+            'aria-label': 'Learn about Bring Your Own Key (BYOK)'
+          }
         },
         {
           label: 'FAQ',
           link: '/faq/',
+          attrs: {
+            'aria-label': 'Frequently Asked Questions'
+          }
         },
-        // {
-        //   label: 'Privacy',
-        //   link: '/privacy/',
-        // },
         {
           label: 'Contributing',
           link: '/contributing/',
+          attrs: {
+            'aria-label': 'Learn how to contribute to Refact'
+          }
         },
       ],
       customCss: [
diff --git a/public/videos/enable_rollback.mp4 b/public/videos/enable_rollback.mp4
new file mode 100644
index 0000000..9636da6
Binary files /dev/null and b/public/videos/enable_rollback.mp4 differ
diff --git a/public/videos/use_rollback.mp4 b/public/videos/use_rollback.mp4
new file mode 100644
index 0000000..1aea9f8
Binary files /dev/null and b/public/videos/use_rollback.mp4 differ
diff --git a/src/components/Head.astro b/src/components/Head.astro
new file mode 100644
index 0000000..a3d3e2c
--- /dev/null
+++ b/src/components/Head.astro
@@ -0,0 +1,8 @@
+---
+import type { Props } from '@astrojs/starlight/props';
+import Default from '@astrojs/starlight/components/Head.astro';
+import PageTransitions from './PageTransitions.astro';
+---
+
+<Default {...Astro.props}><slot /></Default>
+<PageTransitions />
\ No newline at end of file
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
new file mode 100644
index 0000000..6e3774e
--- /dev/null
+++ b/src/components/Navigation.astro
@@ -0,0 +1,17 @@
+---
+import { ViewTransitions } from 'astro:transitions';
+---
+
+<ViewTransitions />
+
+<script>
+  // This script runs once and persists across page navigations
+  document.addEventListener('astro:page-load', () => {
+    // Your initialization code here
+  }, { once: true });
+
+  // This script runs on every page navigation
+  document.addEventListener('astro:page-load', () => {
+    // Your per-page update code here
+  });
+</script>
\ No newline at end of file
diff --git a/src/components/PageTransitions.astro b/src/components/PageTransitions.astro
new file mode 100644
index 0000000..8312de8
--- /dev/null
+++ b/src/components/PageTransitions.astro
@@ -0,0 +1,24 @@
+---
+import { ViewTransitions } from 'astro:transitions';
+---
+
+<ViewTransitions fallback="swap" />
+
+<script>
+  // To preserve scroll position across page navigations
+  const scrollPositions = new Map();
+
+  // Before the new page's content is prepared, store the current scrollY
+  document.addEventListener('astro:before-preparation', () => {
+    scrollPositions.set(window.location.pathname, window.scrollY);
+  });
+
+  // Once the new page loads, restore the scroll position if available
+  document.addEventListener('astro:page-load', () => {
+    const pos = scrollPositions.get(window.location.pathname);
+    if (pos !== undefined) {
+      window.scrollTo(0, pos);
+      scrollPositions.delete(window.location.pathname);
+    }
+  });
+</script>
\ No newline at end of file
diff --git a/src/components/Search.astro b/src/components/Search.astro
index f1596cf..9f3f7b4 100644
--- a/src/components/Search.astro
+++ b/src/components/Search.astro
@@ -2,32 +2,110 @@
 import "@docsearch/css";
 ---
 
-<div id="docsearch"></div>
+<div id="docsearch" transition:persist></div>
 
 <script>
     import docsearch from "@docsearch/js";
+    
+    let searchInstance: ReturnType<typeof docsearch> | null = null;
 
-    docsearch({
-        container: "#docsearch",
-        appId: "ANAV9NA8H5",
-        indexName: "refact",
-        apiKey: "2bae895dcb109e0a9b87ee935c121c85",
-    });
+    const initSearch = () => {
+        if (!searchInstance) {
+            searchInstance = docsearch({
+                container: "#docsearch",
+                appId: "ANAV9NA8H5",
+                indexName: "refact",
+                apiKey: "2bae895dcb109e0a9b87ee935c121c85",
+            });
+        }
+    };
+
+    // Initialize on first load only
+    document.addEventListener('astro:page-load', initSearch, { once: true });
 </script>
 
 <style>
-    div {
-        display: contents;
+    #docsearch {
+        width: 100%;
+        max-width: 32rem;
     }
 
-    div[data-open-modal] {
+    :global(.DocSearch-Button) {
         width: 100%;
+        border-radius: 8px !important;
+        padding: 0.5rem 1rem !important;
+        background: var(--sl-color-black) !important;
+        border: 1px solid var(--sl-color-gray-5);
+        height: 2.5rem !important;
+        margin: 0 !important;
     }
 
-    @media (min-width: 50rem) {
-        :global(.DocSearch-Button) {
-            width: 100%;
-            max-width: 22rem;
-        }
+    :global(.DocSearch-Button:hover),
+    :global(.DocSearch-Button:focus) {
+        border-color: var(--sl-color-accent);
+        box-shadow: none !important;
+        outline: none !important;
+        background: var(--sl-color-black) !important;
+    }
+
+    :global(.DocSearch-Button-Keys) {
+        display: flex;
+        min-width: auto !important;
+        padding: 0 !important;
+        border: none !important;
+        gap: 0.25rem;
+        background: none !important;
+    }
+
+    :global(.DocSearch-Button-Key) {
+        background: none !important;
+        box-shadow: none !important;
+        color: var(--sl-color-gray-3) !important;
+        position: relative !important;
+        top: 0 !important;
+        padding: 0 !important;
+        margin: 0 !important;
+        width: auto !important;
+        height: auto !important;
+        font-size: 0.75rem !important;
+    }
+
+    :global(.DocSearch-Search-Icon) {
+        width: 1rem !important;
+        height: 1rem !important;
+        color: var(--sl-color-gray-3) !important;
+    }
+
+    :global(.DocSearch-Button-Placeholder) {
+        font-size: 0.875rem !important;
+        padding: 0 0.5rem !important;
+    }
+
+    :global(.DocSearch-Modal) {
+        border-radius: 12px;
+        margin-top: 0.5rem;
+    }
+
+    :global(.DocSearch-SearchBar) {
+        padding: 1rem !important;
+    }
+
+    :global(.DocSearch-Form) {
+        border-radius: 8px !important;
+    }
+
+    :global(.DocSearch-Hit-source),
+    :global(.DocSearch-Hit a) {
+        background: none !important;
+        box-shadow: none !important;
+    }
+
+    :global(.DocSearch-Hit) {
+        padding: 0.5rem !important;
+        border-radius: 6px !important;
+    }
+
+    :global(.DocSearch-Hit[aria-selected=true]) {
+        background: var(--sl-color-gray-6) !important;
     }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/content/docs/features/autonomous-agent/integrations/index.md b/src/content/docs/features/autonomous-agent/integrations/index.md
index 2c83f65..387342a 100644
--- a/src/content/docs/features/autonomous-agent/integrations/index.md
+++ b/src/content/docs/features/autonomous-agent/integrations/index.md
@@ -3,13 +3,12 @@ title: Agent Integrations
 description: Overview of available integrations for the Refact.ai Agent
 ---
 
-The Refact.ai Agent supports various integrations to enhance your development workflow. Here's a list of available integrations:
+The Refact.ai Agent supports various integrations to enhance your development workflow. These integrations extend the Agent's [core tools](../tools) with external services and capabilities.
 
 ## Development Tools
-- [Chrome](./chrome) - Control Chrome browser for testing and automation
-- [Shell](./shell-commands) - Execute terminal commands
 - [Command-line Tool](./command-line-tool) - Configure and use custom command-line tools
 - [Command-line Service](./command-line-service) - Run and manage background processes
+- [Shell Commands](./shell-commands) - Execute terminal commands with user confirmation
 
 ## Version Control
 - [GitHub](./github) - Interact with GitHub repositories through GitHub CLI
@@ -23,6 +22,24 @@ The Refact.ai Agent supports various integrations to enhance your development wo
 - [MySQL](./mysql) - Work with MySQL databases
 
 ## Debugging
-- [Pdb](./pdb) -Aallows interaction with the Python debugger
+- [Pdb](./pdb) - Allows interaction with the Python debugger
 
-Each integration can be configured and customized to suit your specific needs. Click on the links above to learn more about each integration's features and configuration options.
\ No newline at end of file
+Each integration can be configured and customized to suit your specific needs. Click on the links above to learn more about each integration's features and configuration options.
+
+## Configuring Integrations
+
+You can configure the integrations in two ways:
+
+### 1. Through Chat Interface
+
+Click on the integrations button in the chat interface to quickly enable or disable specific integrations.
+
+### 2. Through Settings
+
+Access integrations through the settings menu for more detailed configuration options.
+
+## Next Steps
+
+- Review our [security best practices](../security) when setting up integrations
+- Learn about [authentication methods](../authentication) for different services
+- Check the [troubleshooting guide](../troubleshooting) if you encounter any issues
\ No newline at end of file
diff --git a/src/content/docs/features/autonomous-agent/rollback.md b/src/content/docs/features/autonomous-agent/rollback.md
new file mode 100644
index 0000000..ff6a4ec
--- /dev/null
+++ b/src/content/docs/features/autonomous-agent/rollback.md
@@ -0,0 +1,58 @@
+---
+title: Agent Rollback
+description: Learn how to use Refact.ai Agent's rollback functionality to revert repository changes
+---
+
+The Refact.ai Agent provides a powerful rollback feature that allows you to revert your repository to the state it was in at any specific point in your chat conversation. This feature is particularly useful when experimenting with different solutions or when you need to undo a series of changes.
+
+## Overview
+
+The rollback functionality enables you to:
+- Return to any previous state in your development session
+- Review changes before applying the rollback
+- Maintain a clear history of your development process
+
+## Enabling Rollback
+
+The rollback feature is enabled by default in Agent chat mode. However, you should verify that the toggle is properly set:
+
+<div class="video-frame">
+  <video controls width="100%">
+    <source src="/videos/enable_rollback.mp4" type="video/mp4">
+    Your browser does not support the video tag.
+  </video>
+</div>
+
+## Using Rollback
+
+To rollback to a specific point in your conversation:
+
+1. Navigate to the message you want to rollback to in the chat history
+2. Look for the rollback icon next to the message
+3. Click the icon to initiate the rollback process
+4. Review the summary of changes that will occur
+5. Confirm the rollback if you agree with the changes
+
+Here's how to use the rollback feature:
+
+<div class="video-frame">
+  <video controls width="100%">
+    <source src="/videos/use_rollback.mp4" type="video/mp4">
+    Your browser does not support the video tag.
+  </video>
+</div>
+
+## Important Considerations
+
+:::caution[Warning]
+Any changes made to your repository after the selected message point will be removed during rollback. This includes:
+- Changes made by the Agent
+- Manual changes you've made
+- Any file modifications or additions
+:::
+
+## Next Steps
+
+- Learn about [Agent Tools](../tools) to better understand how changes are made
+- Explore [Agent Integrations](../integrations) for enhanced development workflow
+- Check out the [FAQ](/faq) for common questions about Agent features
\ No newline at end of file
diff --git a/src/content/docs/features/autonomous-agent/tools.md b/src/content/docs/features/autonomous-agent/tools.md
new file mode 100644
index 0000000..c80746a
--- /dev/null
+++ b/src/content/docs/features/autonomous-agent/tools.md
@@ -0,0 +1,94 @@
+---
+title: Agent Tools
+description: Overview of available tools and use cases for the autonomous Refact.ai Agent
+---
+
+The Refact.ai Agent is designed to operate autonomously, extending its capabilities beyond simple integrations. While integrations allow external services to be connected, Agent Tools empower the agent to perform key operations using built-in functionalities. Below is an overview of the available Agent Tools, typical use cases, and how they can enhance your development workflow.
+
+## Core Tools
+
+The Agent has access to several powerful tools that help it understand and modify your codebase:
+
+### Context and Search Tools
+
+- **search**  
+  Find similar pieces of code or text using vector database.  
+  *Use Case:* When you ask the Agent to modify code, it uses this tool to find similar patterns across your codebase to maintain consistency.
+
+- **definition**  
+  Read definition of symbols in the project using AST.  
+  *Use Case:* The Agent uses this to understand function signatures, class structures, and type definitions when working with your code.
+
+- **references**  
+  Find usages of symbols within the project using AST.  
+  *Use Case:* Before modifying a function or class, the Agent checks all its usages to ensure changes won't break existing code.
+
+- **tree**  
+  Get a files tree with symbols for the project.  
+  *Use Case:* The Agent uses this to understand project structure and locate relevant files.
+
+### File Operations
+
+- **cat**  
+  Read multiple files and understand their content.  
+  *Use Case:* The Agent can read and analyze multiple files at once, including images and skeletonized code views.
+
+- **locate**  
+  Find relevant files for a specific task.  
+  *Use Case:* When given a task, the Agent can quickly identify which files need to be modified.
+
+### Code Modification
+
+- **patch**  
+  Apply changes to files in a controlled manner.  
+  *Use Case:* The Agent uses this to make actual changes to your codebase, with your approval.
+
+### Planning and Analysis
+
+- **think**  
+  Analyze complex problems and create execution plans using o3 mini reasoning model.  
+  *Use Case:* Before making changes, the Agent plans out the steps needed to complete a task successfully. The o3 mini model helps break down complex problems into manageable steps and create a clear execution strategy.
+
+### Web Interaction
+
+- **web**  
+  Fetch and read web pages in plain text format.  
+  *Use Case:* The Agent can read documentation, specifications, or other web resources to help solve problems.
+
+## How Agent Tools Work Together
+
+The Agent combines these tools strategically to complete complex tasks. Here's a typical workflow:
+
+1. **Understanding Phase**
+   - Uses `tree` to understand project structure
+   - Uses `locate` to find relevant files
+   - Uses `search` to find similar patterns
+   - Uses `definition` and `references` to understand code context
+
+2. **Planning Phase**
+   - Uses `think` to create a detailed plan
+   - Uses `web` if external documentation is needed
+
+3. **Execution Phase**
+   - Uses `cat` to read necessary files
+   - Creates changes using `patch` tool
+   - Verifies changes using `search` and `references`
+
+## Best Practices
+
+When working with the Agent, consider these tips:
+
+- Let the Agent gather context before making changes
+- Review proposed patches carefully before approving
+- Use the Agent's planning capabilities for complex tasks
+- Provide clear, specific instructions for best results
+
+## Next Steps
+
+Once you're familiar with the core tools, you might want to explore:
+
+- [Agent Overview](../overview) - Learn more about the Agent's capabilities
+- [Getting Started](../getting-started) - Start using the Agent effectively
+- [Integrations](../integrations) - Connect with external services and tools
+
+For specific integration guides and advanced usage scenarios, refer to our detailed documentation sections.
\ No newline at end of file
diff --git a/src/styles/custom.css b/src/styles/custom.css
index a62a211..45c2d6d 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -12,6 +12,11 @@
     --sl-color-gray-5: #383838;
     --sl-color-gray-6: #272727;
     --sl-color-black: #181818;
+
+    /* Sidebar specific colors */
+    --sl-sidebar-color-text-active: var(--sl-color-white);
+    --sl-sidebar-color-bg-active: var(--sl-color-accent);
+    --sl-sidebar-color-bg-hover: var(--sl-color-gray-6);
 }
 
 /* Light mode colors. */
@@ -28,56 +33,171 @@
     --sl-color-gray-6: #eeeeee;
     --sl-color-gray-7: #f6f6f6;
     --sl-color-black: #ffffff;
+
+    /* Sidebar specific colors */
+    --sl-sidebar-color-text-active: var(--sl-color-white);
+    --sl-sidebar-color-bg-active: var(--sl-color-accent);
+    --sl-sidebar-color-bg-hover: var(--sl-color-gray-6);
+}
+
+/* Main content layout */
+main {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+}
+
+/* Search container */
+.search-container {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    padding: 1rem 0;
+}
+
+/* Rounded corners for various elements */
+a,
+.icon,
+button,
+input,
+.sidebar-content a,
+.pagefind-ui__search-input,
+.search-item,
+.current-page {
+    border-radius: 6px !important;
+    transition: all 0.2s ease;
+}
+
+/* Main sidebar items - first level */
+.sidebar-content > .sidebar-groups > li > details > summary,
+.sidebar-content > .sidebar-groups > li > a {
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+
+/* Second level items - ensure all items at this level match */
+.sidebar-content > .sidebar-groups > li > details li > a,
+.sidebar-content > .sidebar-groups > li > details li > details > summary {
+    font-size: 0.95rem;
+    font-weight: 500;
+}
+
+/* Third level and deeper items */
+.sidebar-content > .sidebar-groups > li > details li > details li > a,
+.sidebar-content > .sidebar-groups > li > details li > details li > details > summary {
+    font-size: 0.9rem;
+    font-weight: 400;
+    padding-left: 0.5rem;
+    color: var(--sl-color-gray-3);
 }
+
+/* Light mode colors. */
+:root[data-theme='light'] {
+    --sl-color-accent-low: #311514;
+    --sl-color-accent: #E7150D;
+    --sl-color-accent-high: #FEF4F4;
+    --sl-color-white: #181818;
+    --sl-color-gray-1: #272727;
+    --sl-color-gray-2: #383838;
+    --sl-color-gray-3: #585858;
+    --sl-color-gray-4: #8b8b8b;
+    --sl-color-gray-5: #c2c2c2;
+    --sl-color-gray-6: #eeeeee;
+    --sl-color-gray-7: #f6f6f6;
+    --sl-color-black: #ffffff;
+
+    /* Sidebar specific colors */
+    --sl-sidebar-color-text-active: var(--sl-color-white);
+    --sl-sidebar-color-bg-active: var(--sl-color-accent);
+    --sl-sidebar-color-bg-hover: var(--sl-color-gray-6);
+}
+
 body {
     font-family: "Manrope", sans-serif;
     font-optical-sizing: auto;
     font-size: 16px;
 }
+
 /* theme overrides */
 kbd {
     font-size: 10px !important;
     font-family: "Manrope", sans-serif !important;
     font-weight: 800 !important;
 } 
-a,
-.icon,
-button {
-    border-radius: 0 !important;
-}
+
 .site-title {
     max-width: 140px;
 }
+
 header.dialog {
-	background-color: #fff !important;
+    background-color: #fff !important;
+    border-radius: 8px;
+    margin: 1rem;
 }
+
 .pagefind-ui__search-input {
-	border: 0 !important;
+    border: 0 !important;
+    border-radius: 6px !important;
+    padding: 0.75rem 1rem !important;
 }
+
 .full-table {
     width: 100% !important;
     table-layout:fixed;
 }
+
 .full-table thead,
 .full-table tbody,
 .full-table tr {
     width: 100% !important;   
 }
+
 .full-table td,
 .full-table th {
     width: 100vw;
 }
+
 .full-table td:nth-child(2) {
     text-align: center;
 }
+
 code {
     font-family: "Azeret Mono", monospace !important;
+    border-radius: 4px;
 }
 
 /* Video frame styles */
 .video-frame {
     border: 2px solid var(--sl-color-accent);
-    border-radius: 4px;
+    border-radius: 8px;
+    padding: 1rem;
+    background: var(--sl-color-accent-low);
+}
+
+/* Hover effect only for non-active sidebar links */
+.sidebar-content a:not([aria-current]):hover {
+    background-color: var(--sl-color-gray-6);
+}
+
+/* Current page styling - no hover effects */
+.sidebar-content .current-page {
+    background-color: var(--sl-color-accent-high);
+    color: var(--sl-color-accent);
+    pointer-events: none;
+}
+
+/* Ensure proper contrast for nested items */
+.sidebar-content li > a.current-page,
+.sidebar-content li > a.current-page:hover,
+.sidebar-content li > a.current-page:focus {
+    background-color: var(--sl-color-accent-high) !important;
+    color: var(--sl-color-accent) !important;
+}
+
+/* Video frame styles */
+.video-frame {
+    border: 2px solid var(--sl-color-accent);
+    border-radius: 8px;
     padding: 1rem;
     background: var(--sl-color-accent-low);
 }
\ No newline at end of file