diff --git a/package-lock.json b/package-lock.json
index bb7c602..0d5ba3a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "fuse.js": "^7.0.0",
+        "marked": "^17.0.1",
         "mixpanel-browser": "^2.73.0",
         "svelte-typewriter": "^3.2.3"
       },
@@ -1306,6 +1307,18 @@
         "@jridgewell/sourcemap-codec": "^1.4.15"
       }
     },
+    "node_modules/marked": {
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-17.0.1.tgz",
+      "integrity": "sha512-boeBdiS0ghpWcSwoNm/jJBwdpFaMnZWRzjA6SkUMYb40SVaN1x7mmfGKp0jvexGcx+7y2La5zRZsYFZI6Qpypg==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.30",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
diff --git a/package.json b/package.json
index 6f26624..74dd7d8 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "fuse.js": "^7.0.0",
+    "marked": "^17.0.1",
     "mixpanel-browser": "^2.73.0",
     "svelte-typewriter": "^3.2.3"
   }
diff --git a/public/_redirects b/public/_redirects
new file mode 100644
index 0000000..4e31746
--- /dev/null
+++ b/public/_redirects
@@ -0,0 +1,2 @@
+/*    /index.html   200
+
diff --git a/src/Cookbook.svelte b/src/Cookbook.svelte
new file mode 100644
index 0000000..57153d8
--- /dev/null
+++ b/src/Cookbook.svelte
@@ -0,0 +1,310 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  interface Guide {
+    title: string;
+    description: string;
+    url: string;
+    date: string;
+    version: string;
+    tags: string[];
+  }
+
+  let guides: Guide[] = [];
+  let loading = true;
+  let error: string | null = null;
+
+  const INDEX_URL = "https://raw.githubusercontent.com/BerriAI/litellm/refs/heads/main/cookbook/ai_coding_tool_guides/index.json";
+
+  async function fetchGuides() {
+    try {
+      loading = true;
+      error = null;
+
+      const response = await fetch(INDEX_URL);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch guides: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      
+      // Handle both array and single object responses
+      if (Array.isArray(data)) {
+        guides = data;
+      } else {
+        guides = [data];
+      }
+
+      // Sort by date (newest first)
+      guides = guides.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+
+      loading = false;
+    } catch (err) {
+      console.error("Error fetching guides:", err);
+      error = err instanceof Error ? err.message : "Failed to load guides";
+      loading = false;
+    }
+  }
+
+  function openGuide(guide: Guide) {
+    // Open the guide URL in a new tab
+    window.open(guide.url, '_blank', 'noopener,noreferrer');
+  }
+
+  function formatDate(dateString: string): string {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  }
+
+  onMount(() => {
+    fetchGuides();
+  });
+</script>
+
+<div class="cookbook-container">
+  {#if loading}
+    <div class="loading-state">
+      <div class="spinner"></div>
+      <p>Loading cookbook guides...</p>
+    </div>
+  {:else if error}
+    <div class="error-state">
+      <h2>Error Loading Guides</h2>
+      <p>{error}</p>
+      <button class="retry-button" on:click={fetchGuides}>Retry</button>
+    </div>
+  {:else}
+    <!-- Guides List View -->
+    <div class="guides-header">
+      <h1>AI Coding Tool Guides</h1>
+      <p class="guides-subtitle">
+        Learn how to integrate LiteLLM with popular AI coding tools
+      </p>
+    </div>
+
+    {#if guides.length === 0}
+      <div class="empty-state">
+        <p>No guides available at the moment.</p>
+      </div>
+    {:else}
+      <div class="guides-grid">
+        {#each guides as guide}
+          <div class="guide-card" on:click={() => openGuide(guide)} on:keydown={(e) => e.key === 'Enter' && openGuide(guide)} role="button" tabindex="0">
+            <h2 class="guide-title">{guide.title}</h2>
+            <p class="guide-description">{guide.description}</p>
+            <div class="guide-footer">
+              <span class="guide-date">{formatDate(guide.date)}</span>
+              <div class="guide-tags-preview">
+                {#each guide.tags.slice(0, 2) as tag}
+                  <span class="tag-small">{tag}</span>
+                {/each}
+                {#if guide.tags.length > 2}
+                  <span class="tag-small">+{guide.tags.length - 2}</span>
+                {/if}
+              </div>
+            </div>
+          </div>
+        {/each}
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .cookbook-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 2rem;
+    min-height: calc(100vh - 200px);
+  }
+
+  /* Loading State */
+  .loading-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 4rem 2rem;
+    gap: 1rem;
+  }
+
+  .spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid var(--border-color);
+    border-top-color: var(--litellm-primary);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .loading-state p {
+    color: var(--text-secondary);
+    font-size: 1rem;
+  }
+
+  /* Error State */
+  .error-state {
+    text-align: center;
+    padding: 4rem 2rem;
+  }
+
+  .error-state h2 {
+    color: var(--text-color);
+    margin-bottom: 1rem;
+  }
+
+  .error-state p {
+    color: var(--text-secondary);
+    margin-bottom: 2rem;
+  }
+
+  .retry-button {
+    padding: 0.75rem 1.5rem;
+    background-color: var(--litellm-primary);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+  }
+
+  .retry-button:hover {
+    background-color: var(--litellm-dark);
+  }
+
+  /* Guides Header */
+  .guides-header {
+    text-align: center;
+    margin-bottom: 3rem;
+  }
+
+  .guides-header h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--text-color);
+    margin-bottom: 0.75rem;
+  }
+
+  .guides-subtitle {
+    font-size: 1.125rem;
+    color: var(--text-secondary);
+  }
+
+  /* Empty State */
+  .empty-state {
+    text-align: center;
+    padding: 4rem 2rem;
+    color: var(--text-secondary);
+  }
+
+  /* Guides Grid */
+  .guides-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 1.5rem;
+  }
+
+  .guide-card {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 1.5rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .guide-card:hover {
+    border-color: var(--litellm-primary);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+  }
+
+  .guide-card:focus {
+    outline: 2px solid var(--litellm-primary);
+    outline-offset: 2px;
+  }
+
+  .guide-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text-color);
+    margin: 0;
+  }
+
+  .guide-description {
+    font-size: 0.9375rem;
+    color: var(--text-secondary);
+    line-height: 1.5;
+    margin: 0;
+    flex-grow: 1;
+  }
+
+  .guide-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border-color);
+  }
+
+  .guide-date {
+    font-size: 0.875rem;
+    color: var(--muted-color);
+  }
+
+  .guide-tags-preview {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .tag-small {
+    padding: 0.25rem 0.5rem;
+    background: var(--bg-tertiary);
+    color: var(--text-secondary);
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+
+  /* Responsive Design */
+  @media (max-width: 768px) {
+    .cookbook-container {
+      padding: 1rem;
+    }
+
+    .guides-header h1 {
+      font-size: 2rem;
+    }
+
+    .guides-subtitle {
+      font-size: 1rem;
+    }
+
+    .guides-grid {
+      grid-template-columns: 1fr;
+      gap: 1rem;
+    }
+
+    .guide-footer {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+</style>
+
diff --git a/src/Main.svelte b/src/Main.svelte
index c9b4b78..b8e01ba 100644
--- a/src/Main.svelte
+++ b/src/Main.svelte
@@ -2,16 +2,34 @@
   import { onMount } from "svelte";
   import App from "./App.svelte";
   import Providers from "./Providers.svelte";
+  import Cookbook from "./Cookbook.svelte";
   import RequestForm from "./RequestForm.svelte";
   import { initAnalytics, trackPageView, trackTabChange } from "./analytics";
 
-  let activeTab: "models" | "providers" = "models";
+  let activeTab: "models" | "providers" | "cookbook" = "models";
   let mobileMenuOpen = false;
   let requestForm: RequestForm;
 
   const GITHUB_URL = "https://github.com/BerriAI/litellm";
   const DOCS_URL = "https://docs.litellm.ai";
 
+  // Map URL paths to tab names
+  function getTabFromPath(path: string): "models" | "providers" | "cookbook" {
+    if (path === "/providers" || path === "/providers/") {
+      return "providers";
+    } else if (path === "/cookbook" || path === "/cookbook/") {
+      return "cookbook";
+    }
+    return "models";
+  }
+
+  // Get path from tab name
+  function getPathFromTab(tab: "models" | "providers" | "cookbook"): string {
+    if (tab === "providers") return "/providers";
+    if (tab === "cookbook") return "/cookbook";
+    return "/";
+  }
+
   function toggleMobileMenu() {
     mobileMenuOpen = !mobileMenuOpen;
   }
@@ -20,10 +38,22 @@
     mobileMenuOpen = false;
   }
 
-  function selectTab(tab: "models" | "providers") {
+  function selectTab(tab: "models" | "providers" | "cookbook", updateUrl = true) {
     activeTab = tab;
     closeMobileMenu();
     trackTabChange(tab);
+    
+    // Update URL without page reload
+    if (updateUrl) {
+      const path = getPathFromTab(tab);
+      window.history.pushState({ tab }, "", path);
+    }
+  }
+
+  // Handle browser back/forward buttons
+  function handlePopState(event: PopStateEvent) {
+    const tab = event.state?.tab || getTabFromPath(window.location.pathname);
+    selectTab(tab, false);
   }
   const PROVIDERS_URL = "https://raw.githubusercontent.com/BerriAI/litellm/main/provider_endpoints_support.json";
   const MODELS_URL = "https://raw.githubusercontent.com/BerriAI/litellm/main/model_prices_and_context_window.json";
@@ -39,6 +69,16 @@
     initAnalytics();
     trackPageView('Home');
 
+    // Set initial tab based on URL
+    const initialTab = getTabFromPath(window.location.pathname);
+    activeTab = initialTab;
+    
+    // Set initial history state
+    window.history.replaceState({ tab: initialTab }, "", window.location.pathname);
+    
+    // Listen for browser back/forward navigation
+    window.addEventListener("popstate", handlePopState);
+
     // Check if URL has ?request=true to auto-open the form
     const urlParams = new URLSearchParams(window.location.search);
     if (urlParams.get('request') === 'true') {
@@ -82,6 +122,11 @@
       console.error("Failed to load statistics:", error);
       statsLoading = false;
     }
+
+    // Cleanup event listener on component destroy
+    return () => {
+      window.removeEventListener("popstate", handlePopState);
+    };
   });
 </script>
 
@@ -109,7 +154,14 @@
             class:active={activeTab === "providers"}
             on:click={() => selectTab("providers")}
           >
-            AI Gateway - Endpoints & Providers
+            Endpoints & Providers
+          </button>
+          <button
+            class="tab"
+            class:active={activeTab === "cookbook"}
+            on:click={() => selectTab("cookbook")}
+          >
+            Cookbook
           </button>
         </div>
         <nav class="nav-links">
@@ -161,6 +213,13 @@
           >
             AI Gateway - Endpoints & Providers
           </button>
+          <button
+            class="mobile-tab"
+            class:active={activeTab === "cookbook"}
+            on:click={() => selectTab("cookbook")}
+          >
+            Cookbook
+          </button>
         </div>
         <div class="mobile-links">
           <a href={DOCS_URL} target="_blank" rel="noopener noreferrer" class="mobile-link" on:click={closeMobileMenu}>Docs</a>
@@ -197,8 +256,10 @@
   <!-- Content -->
   {#if activeTab === "models"}
     <App />
-  {:else}
+  {:else if activeTab === "providers"}
     <Providers />
+  {:else if activeTab === "cookbook"}
+    <Cookbook />
   {/if}
 
   <!-- Request Form Modal -->
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..f9c6977
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,9 @@
+{
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ]
+}
+
diff --git a/vite.config.ts b/vite.config.ts
index 5ac8ecf..91164ec 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,4 +4,8 @@ import { svelte } from "@sveltejs/vite-plugin-svelte";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [svelte()],
+  server: {
+    // Enable SPA fallback for client-side routing
+    historyApiFallback: true,
+  },
 });