diff --git a/docs/tab-autocomplete.md b/docs/tab-autocomplete.md
deleted file mode 100644
index 5d27664..0000000
--- a/docs/tab-autocomplete.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: ✅ Tab Autocomplete
-description: PearAI is the open-source autopilot for software development
-keywords: [shortcuts, pearai, important shortcuts, pear ai shortcuts]
-sidebar_position: 3
----
-
-# ✅ Tab AutoComplete
-
-PearAI supports tab autocomplete, which predicts and suggests what you would type next as you're coding. Here's how to set it up:
-
-## Setup Guide
-
-1. **Setup Codestral**
-
-   We recommend using Codestral, the leading model for code completion (or FIM — Fill In Middle). It's also open-sourced! You'll need to obtain a Codestral API key from [Mistral API](https://console.mistral.ai).
-
-2. **Add to PearAI config.json**
-
-   Add the following to your config.json file (replace "YOUR_API_KEY" with your actual API key):
-
-   ```json
-   "tabAutocompleteModel": {
-     "title": "Codestral",
-     "provider": "mistral",
-     "model": "codestral-latest",
-     "apiKey": "YOUR_API_KEY"
-   }
-
-   ```
-
-3. **Enjoy the development speed up with autocomplete!**
-
-## Alternative
-
-- You can also use [Supermaven](https://supermaven.com/) for tab autocomplete. It is currently one of the best autocomplete AI on the market, and provides a free tier. You can get started by installing Supermaven directly as an extension within PearAI.
-
-  ![Supermaven extension](../static/img/supermaven.png)
diff --git a/docs/tab-autocomplete.mdx b/docs/tab-autocomplete.mdx
new file mode 100644
index 0000000..2108903
--- /dev/null
+++ b/docs/tab-autocomplete.mdx
@@ -0,0 +1,88 @@
+---
+title: ✅ Tab Autocomplete
+description: PearAI is the open-source autopilot for software development
+keywords: [shortcuts, pearai, important shortcuts, pear ai shortcuts]
+sidebar_position: 3
+---
+
+# ✅ Tab AutoComplete
+
+PearAI supports tab autocomplete, which predicts and suggests what you would type next as you're coding. Here's how to set it up:
+
+## Setup Guide
+
+1. **Setup Codestral**
+
+   We recommend using [Codestral](https://mistral.ai/news/codestral/), the leading model for code completion (or FIM — Fill In Middle). It's also open-sourced! You'll need to obtain a Codestral API key from [Mistral API](https://console.mistral.ai).
+
+2. **Add to PearAI config.json**
+
+   Add the following to your config.json file (replace "YOUR_API_KEY" with your actual API key):
+
+   ```json
+   "tabAutocompleteModel": {
+     "title": "Codestral",
+     "provider": "mistral",
+     "model": "codestral-latest",
+     "apiKey": "YOUR_API_KEY"
+   }
+
+   ```
+
+3. **Enjoy the development speed up with autocomplete!**
+
+## Alternatives
+
+- You can enhance your tab autocomplete with [Supermaven](https://supermaven.com/). It is currently one of the best autocomplete AI on the market, and provides a free tier. You can get started by installing Supermaven directly as an extension within PearAI.
+
+  ![Supermaven extension](../static/img/supermaven.png)
+
+- Additionally, you can use [Ollama](https://ollama.ai/) local models by downloading the desired model and adding it to your configuration.
+
+  ```json
+  "tabAutocompleteModel": {
+      "title": "StarCoder2",
+      "provider": "ollama",
+      "model": "starcoder2:latest"
+    },
+    {
+      "title": "Llama 3.2",
+      "provider": "ollama",
+      "model": "llama3.2:1b"
+    },
+    {
+      "title": "Qwen 2.5 Coder",
+      "provider": "ollama",
+      "model": "qwen2.5-coder:1.5b"
+    }
+  ```
+
+<div class="row" style={{ border: '1px solid var(--ifm-color-emphasis-300)', borderRadius: '8px', margin: '20px 0' }}>
+  <div class="col col--4" style={{ padding: '20px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+    <div style={{ fontSize: '1.2em', marginBottom: '15px' }}>
+    <div style={{ 
+      fontSize: '1.2em', 
+      marginBottom: '15px',
+      color: 'var(--ifm-color-primary)',
+      fontWeight: '500'
+    }}>
+      🌟 Pro Tip
+    </div>
+    </div>
+    <div style={{ lineHeight: '1.6' }}>
+      You can customize the autocomplete behavior in PearAI's settings. Experiment with different options to find the setup that works best for your coding style!
+    </div>
+  </div>
+  <div class="col col--8" style={{
+    padding: '20px',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: '20px',
+    background: 'var(--ifm-color-emphasis-100)',
+    borderRadius: '0 8px 8px 0'
+  }}>
+    <img src="/img/config-button.png" style={{ maxHeight: '200px', width: 'auto', objectFit: 'contain' }} />
+    <img src="/img/open-pearai-config.png" style={{ maxHeight: '250px', width: 'auto', objectFit: 'contain' }} />
+  </div>
+</div>
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 4b179dd..2a4e085 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -2,7 +2,7 @@
 // Note: type annotations allow type checking and IDEs autocompletion
 
 const { themes } = require("prism-react-renderer");
-require('dotenv').config();
+require("dotenv").config();
 
 const lightCodeTheme = themes.github;
 const darkCodeTheme = themes.dracula;
@@ -18,7 +18,7 @@ const config = {
   url: "https://trypear.ai",
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: process.env.BASE_URL || '/',
+  baseUrl: process.env.BASE_URL || "/",
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
@@ -47,6 +47,9 @@ const config = {
           routeBasePath: "/",
           sidebarPath: require.resolve("./sidebars.js"),
           editUrl: "https://github.com/trypear/pearai-documentation/blob/main/",
+          remarkPlugins: [], // Add this
+          rehypePlugins: [], // Add this
+          mdxPageComponent: "@theme/MDXPage",
         },
         theme: {
           customCss: require.resolve("./src/css/custom.css"),
@@ -57,7 +60,6 @@ const config = {
       }),
     ],
   ],
-
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
diff --git a/static/img/config-button.png b/static/img/config-button.png
new file mode 100644
index 0000000..e4a8905
Binary files /dev/null and b/static/img/config-button.png differ
diff --git a/static/img/open-pearai-config.png b/static/img/open-pearai-config.png
new file mode 100644
index 0000000..c92bd25
Binary files /dev/null and b/static/img/open-pearai-config.png differ