diff --git a/_components/SearchInput.tsx b/_components/SearchInput.tsx
index defcdd96d..958b3bb6b 100644
--- a/_components/SearchInput.tsx
+++ b/_components/SearchInput.tsx
@@ -1,76 +1,129 @@
 export default function SearchInput() {
   return (
-    <div className="md:relative w-full">
-      {/* ☝️ That md:relative class is crucial for making the search bar pop up in the right place. Don't change it, or add any other positioning classes, unless you're ready to account for positioning across all breakpoints. */}
-      <div className="relative">
-        <input
-          type="search"
-          placeholder="Search"
-          id="orama-search-input"
-          className="w-full min-w-24 rounded-lg placeholder:text-sm text-base leading-normal p-1 pl-8 border transition-all duration-150
-          text-foreground-primary border-foreground-secondary hover:bg-background-secondary focus:bg-background-secondary focus:outline-offset-1"
-          style="background: url(/img/search.svg) no-repeat 0.5em 50%; background-size: 1.25em; background-color: var(--color-background-raw);"
-        />
-        <kbd
-          id="search-key"
-          className="hidden xs:flex pointer-events-none absolute font-sans rounded-sm top-1 right-1 bottom-1 w-auto border-1 border-foreground-tertiary border-b-2 border-r-2 bg-background-primary text-foreground-secondary text-center text-xs font-bold p-2 items-center justify-center dark:bg-background-secondary dark:border-gray-700"
-        >
-          ⌘K
-        </kbd>
-        <div
-          id="orama-search-loading"
-          className="absolute left-2 top-1/2 transform -translate-y-1/2 hidden bg-background-raw"
-        >
-          <div className="animate-spin rounded-full h-4 w-4 border-2 border-transparent border-r-foreground-primary bg-background-raw" />
-        </div>
-        <div
-          className="sr-only"
-          aria-live="polite"
-          id="orama-results-announcer"
-        >
-          {/* Text updated by JavaScript. */}
+    <>
+      {/* Search Input Trigger */}
+      <div className="md:relative w-full">
+        <div className="relative">
+          <input
+            type="search"
+            placeholder="Search documentation..."
+            id="orama-search-input"
+            className="w-full min-w-24 rounded-lg placeholder:text-sm text-base leading-normal p-1 px-8 border transition-colors duration-200
+            text-foreground-primary border-foreground-secondary hover:bg-background-secondary focus:bg-background-secondary focus:outline-offset-1
+            cursor-pointer"
+            style="background: url(/img/search.svg) no-repeat 0.5em 50%; background-size: 1.25em; background-color: var(--color-background-raw);"
+            readOnly
+          />
+          <kbd
+            id="search-key"
+            className="hidden xs:flex pointer-events-none absolute font-sans rounded-sm top-1 right-1 bottom-1 w-auto border-1 border-foreground-tertiary border-b-2 border-r-2 bg-background-primary text-foreground-secondary text-center text-xs font-bold p-2 items-center justify-center dark:bg-background-secondary dark:border-gray-700"
+          >
+            ⌘K
+          </kbd>
         </div>
       </div>
 
-      {/* Enhanced Popover for Search Results */}
-      <div
-        id="orama-search-results"
-        className="absolute inset-2 left-2 right-2 h-[calc(100vh-8rem)] top-10 md:top-full md:left-auto md:right-0 mt-2 bg-background-raw border border-foreground-tertiary rounded-xl shadow-2xl z-50 md:max-h-128 overflow-hidden hidden md:min-w-160 max-w-2xl"
+      {/* Search Modal */}
+      <dialog
+        id="orama-search-modal"
+        className="w-full h-full min-h-dvh bg-black/30 [-webkit-backdrop-filter:blur(10px)] backdrop-blur-sm fixed inset-0 max-w-none max-h-none z-50 overflow-y-auto p-4 sm:p-6 md:p-20 transition-all duration-200"
+        role="dialog"
       >
-        <div
-          id="orama-search-results-content"
-          className="overflow-y-auto h-full"
-        >
-          {/* Results will be populated via JavaScript */}
-        </div>
+        <div className="flex flex-col justify-between mx-auto max-w-2xl w-full transform overflow-hidden rounded-xl bg-background-raw shadow-2xl border border-foreground-primary dark:border-gray-700">
+          {/* Search Header */}
+          <div className="relative flex items-center justify-between px-2">
+            <input
+              type="search"
+              id="orama-search-input-modal"
+              className="h-12 w-full border-0 bg-transparent text-foreground-primary placeholder:text-foreground-secondary focus:ring-0 text-base focus-visible:outline-none"
+              placeholder="Search documentation..."
+              autoFocus
+              autoComplete="off"
+              autoCorrect="off"
+              spellcheck={false}
+              style="background: url(/img/search.svg) no-repeat 0.5em 50%; background-size: 1.25em; background-color: var(--color-background-raw);"
+            />
+
+            {/* Mode Toggle */}
+            <div className="inset-y-0 right-0 flex items-center shrink-0">
+              <button
+                type="button"
+                id="search-mode-toggle"
+                className="flex items-center px-2 py-1 gap-x-1 text-xs font-medium text-foreground-secondary hover:text-foreground-primary transition-colors cursor-pointer"
+                title="Toggle AI search mode (Ctrl+Shift+K)"
+                aria-pressed="false"
+              >
+                <div
+                  id="search-mode-toggle__indicator"
+                  className="flex items-center w-6 h-4 rounded-full bg-foreground-tertiary p-0.5 relative dark:bg-gray-600"
+                >
+                  <div class="aspect-square h-3 bg-background-raw rounded-full transition-transform duration-200" />
+                </div>
+                <span>Ask AI</span>
+              </button>
+            </div>
+
+            {/* Loading Indicator */}
+            <div
+              id="orama-search-loading"
+              className="absolute left-4 px-px top-1/2 transform -translate-y-1/2 hidden bg-background-raw"
+            >
+              <div className="animate-spin rounded-full h-4 w-4 border-2 border-transparent border-r-foreground-primary" />
+            </div>
+          </div>
 
-        {/* Footer with search tips */}
-        <div className="border-t border-foreground-tertiary bg-background-secondary px-4 py-2 sticky bottom-0">
-          <div className="flex items-center gap-6 text-xs text-foreground-secondary">
+          {/* Search Results */}
+          <div
+            id="orama-search-results"
+            className="max-h-[calc(100vh-18rem)] lg:max-h-80 scroll-py-2 overflow-y-auto text-sm"
+          >
+            <div
+              id="orama-search-results-content"
+              style="scrollbar-gutter: stable;"
+            >
+              {/* Results will be populated via JavaScript */}
+            </div>
+          </div>
+
+          {/* Footer with keyboard shortcuts */}
+          <footer className="hidden xs:flex flex-wrap gap-x-6 gap-y-2 items-center bg-background-secondary px-4 py-3 text-xs text-foreground-secondary">
             <span>
-              <kbd className="px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
+              <kbd class="font-sans px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
                 <span aria-hidden="true">↑↓</span>
-                <span className="sr-only">Up or down to</span>
-              </kbd>
-              navigate
+                <span class="sr-only">Up or down to</span>
+              </kbd>navigate
             </span>
             <span>
-              <kbd className="px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
+              <kbd class="font-sans px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
                 <span aria-hidden="true">↵</span>
-                <span className="sr-only">Enter to</span>
-              </kbd>
-              select
+                <span class="sr-only">Enter to</span>
+              </kbd>select
             </span>
             <span>
-              <kbd className="px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
+              <kbd class="font-sans px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
                 <span aria-hidden="true">ESC</span>
-                <span className="sr-only">Escape to</span>
+                <span class="sr-only">Escape to</span>
+              </kbd>close
+            </span>
+            <span className="flex items-center ml-auto">
+              <kbd class="font-sans px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-primary border-r-2 border-b-2 border border-foreground-tertiary rounded mr-1">
+                ⌘⇧K
               </kbd>
-              close
+              <span className="hidden sm:inline">Toggle AI</span>
+              <span className="sm:hidden">AI</span>
             </span>
-          </div>
+          </footer>
         </div>
-      </div>
-    </div>
+
+        {/* Screen reader announcements */}
+        <div
+          className="sr-only"
+          aria-live="polite"
+          id="orama-results-announcer"
+        >
+          {/* Text updated by JavaScript */}
+        </div>
+      </dialog>
+    </>
   );
 }
diff --git a/search.client.ts b/search.client.ts
index d9d297b41..4e502ab27 100644
--- a/search.client.ts
+++ b/search.client.ts
@@ -1,5 +1,5 @@
 // Orama Search Client
-// This handles the client-side search functionality for the Deno docs
+// This handles the client-side search functionality for the Deno docs with AI Context Engineering
 
 import type { Hit, OramaCloud, SearchResult } from "jsr:@orama/core@1.2.4";
 
@@ -14,6 +14,13 @@ interface OramaDocument {
   command?: string;
 }
 
+interface AISession {
+  answer: (params: { query: string }) => Promise<string>;
+  answerStream: (params: { query: string }) => AsyncIterable<string>;
+  state: unknown[];
+  abort: () => void | Promise<void>;
+}
+
 // Configuration - Replace these with your actual Orama Cloud credentials
 const ORAMA_CONFIG = {
   projectId: "c9394670-656a-4f78-a551-c2603ee119e7",
@@ -23,12 +30,17 @@ const ORAMA_CONFIG = {
 class OramaSearch {
   private client: OramaCloud | null = null;
   private searchInput: HTMLInputElement | null = null;
+  private searchInputModal: HTMLInputElement | null = null;
+  private searchModal: HTMLElement | null = null;
   private searchResults: HTMLElement | null = null;
   private searchLoading: HTMLElement | null = null;
   private ariaLiveRegion: HTMLElement | null = null;
   private searchTimeout: number | null = null;
-  private isResultsOpen = false;
+  private isModalOpen = false;
   private selectedIndex = -1; // Track selected result for keyboard navigation
+  private aiSession: AISession | null = null;
+  private currentAiSearch: AbortController | null = null;
+  private isAiMode = false; // Toggle between regular and AI search
 
   constructor() {
     this.init();
@@ -50,28 +62,66 @@ class OramaSearch {
     this.searchInput = document.getElementById(
       "orama-search-input",
     ) as HTMLInputElement;
+    this.searchInputModal = document.getElementById(
+      "orama-search-input-modal",
+    ) as HTMLInputElement;
+    this.searchModal = document.getElementById("orama-search-modal");
     this.searchResults = document.getElementById(
       "orama-search-results-content",
-    ); // Target the scrollable container
+    );
     this.searchLoading = document.getElementById("orama-search-loading");
     this.ariaLiveRegion = document.getElementById("orama-results-announcer");
 
-    if (!this.searchInput) {
-      console.warn("Orama search input not found");
+    if (!this.searchInput || !this.searchInputModal) {
+      console.warn("Orama search inputs not found");
       return;
     }
 
-    // Bind event listeners
-    this.searchInput.addEventListener("input", this.handleInput.bind(this));
-    this.searchInput.addEventListener("focus", this.handleFocus.bind(this));
-    this.searchInput.addEventListener("keydown", this.handleKeyDown.bind(this));
-    this.searchResults?.addEventListener("keyup", (event) => {
-      if (event.key === "Escape") this.handleEscape();
+    // Initialize search mode UI
+    this.updateSearchMode();
+
+    // Make the trigger input readonly and add click handler to open modal
+    this.searchInput.setAttribute("readonly", "true");
+    this.searchInput.addEventListener("click", () => {
+      this.openSearchModal();
     });
+
+    // Set up modal input handlers
+    this.searchInputModal.addEventListener(
+      "input",
+      this.handleInput.bind(this),
+    );
+    this.searchInputModal.addEventListener(
+      "keydown",
+      this.handleKeyDown.bind(this),
+    );
+
+    // Add click handler to mode toggle button
+    const modeToggle = document.getElementById("search-mode-toggle");
+    modeToggle?.addEventListener("click", () => {
+      this.toggleSearchMode();
+    });
+
+    // Finish setting up global handlers
+    this.finishElementSetup();
+  }
+
+  openSearchModal() {
+    this.showResults();
+  }
+
+  finishElementSetup() {
+    // Set up global keyboard handlers
     document.addEventListener("keydown", (event) => {
       if ((event.metaKey || event.ctrlKey) && event.key === "k") {
-        event.preventDefault();
-        this.searchInput?.focus();
+        if (event.shiftKey) {
+          console.log("TRIGGEREDDD");
+          event.preventDefault();
+          this.toggleSearchMode();
+        } else {
+          event.preventDefault();
+          this.openSearchModal();
+        }
       }
     });
 
@@ -119,6 +169,9 @@ class OramaSearch {
         apiKey: ORAMA_CONFIG.apiKey,
       });
 
+      // Initialize AI session for context engineering
+      await this.initAISession();
+
       console.log("Orama search client initialized successfully");
     } catch (error) {
       console.error("Failed to initialize Orama client:", error);
@@ -126,44 +179,77 @@ class OramaSearch {
     }
   }
 
+  async initAISession() {
+    if (!this.client) return;
+
+    try {
+      // Create AI session with context engineering capabilities
+      this.aiSession = await this.client.ai.createAISession({
+        events: {
+          onStateChange: (state) => {
+            console.log("AI Session state changed:", state);
+          },
+        },
+        LLMConfig: {
+          provider: "openai",
+          model: "gpt-4o-mini", // Use a fast, efficient model for search assistance
+        },
+      }) as AISession;
+      console.log("AI session initialized for context engineering");
+    } catch (error) {
+      console.warn("AI session initialization failed:", error);
+      // Continue without AI features if they fail to initialize
+    }
+  }
+
   handleInput(event: Event) {
     const value = (event.target as HTMLInputElement).value;
 
+    // Clear any existing timeout
     if (this.searchTimeout) {
       clearTimeout(this.searchTimeout);
     }
 
+    // Abort any ongoing AI search immediately when user types
+    if (this.currentAiSearch) {
+      this.currentAiSearch.abort();
+      this.currentAiSearch = null;
+    }
+
     if (!value.trim()) {
-      this.hideResults();
+      // Clear results but keep modal open
+      if (this.searchResults) {
+        this.searchResults.innerHTML = "";
+      }
       return;
     }
 
     // Reset selection when user types
     this.selectedIndex = -1;
 
-    // Debounce search by 300ms
+    // Use longer debounce for AI mode since it's more expensive
+    // Regular search: 300ms, AI search: 500ms to prevent flashing results
+    const debounceTime = this.isAiMode ? 500 : 300;
+
     this.searchTimeout = setTimeout(() => {
       this.performSearch(value);
-    }, 300);
+    }, debounceTime);
   }
 
   handleFocus() {
-    if (this.searchInput?.value.trim() && this.searchResults?.children.length) {
-      this.showResults();
-    }
+    // No longer needed since we use modal
   }
 
   handleEscape() {
     this.hideResults();
-    if (this.searchInput) {
-      this.searchInput.value = ""; // Clears input when escape is triggered from within the list rather than on the input
-      this.searchInput.focus();
+    if (this.searchInputModal) {
+      this.searchInputModal.value = ""; // Clear modal input when escape is triggered
     }
     this.selectedIndex = -1;
   }
 
   handleKeyDown(event: KeyboardEvent) {
-    if (!this.isResultsOpen) {
+    if (!this.isModalOpen) {
       return;
     }
 
@@ -212,9 +298,19 @@ class OramaSearch {
 
     // Remove previous selection
     resultsLinks.forEach((link, index) => {
-      link.classList.remove("bg-blue-50", "dark:bg-blue-900/20");
+      link.classList.remove(
+        "bg-gray-50",
+        "dark:bg-gray-800",
+        "text-gray-900",
+        "dark:text-white",
+      );
       if (index === this.selectedIndex) {
-        link.classList.add("bg-blue-50", "dark:bg-blue-900/20");
+        link.classList.add(
+          "bg-gray-50",
+          "dark:bg-gray-800",
+          "text-gray-900",
+          "dark:text-white",
+        );
         // Scroll the selected item into view
         link.scrollIntoView({ block: "nearest", behavior: "smooth" });
       }
@@ -224,17 +320,16 @@ class OramaSearch {
   handleClickOutside(event: MouseEvent) {
     const target = event.target as Element;
 
-    // Don't hide results if clicking on a search result link
+    // Don't hide modal if clicking on a search result link
     if (target.closest(".search-result-link")) {
       return;
     }
 
-    // Check if click is outside the search container
-    const searchContainer = document.getElementById("orama-search-results");
-    if (
-      !this.searchInput?.parentElement?.contains(target) &&
-      !searchContainer?.contains(target)
-    ) {
+    // Check if click is outside the search modal content
+    const searchModal = document.getElementById("orama-search-modal");
+    const modalContent = searchModal?.querySelector("div"); // The inner content div
+
+    if (this.isModalOpen && modalContent && !modalContent.contains(target)) {
       this.hideResults();
     }
   }
@@ -248,25 +343,11 @@ class OramaSearch {
     this.showLoading(true);
 
     try {
-      const results = await this.client.search({
-        term,
-        mode: "fulltext",
-        limit: 8,
-        threshold: 1,
-        properties: ["title", "content", "description"],
-        datasources: ["0fe1e86b-60c9-4715-8bba-0c4686a58e7e"],
-        boost: {
-          title: 12,
-          content: 4,
-          description: 2,
-        },
-      });
-
-      this.renderResults(
-        results as unknown as SearchResult<OramaDocument>,
-        term,
-      );
-      this.showResults();
+      if (this.isAiMode && this.aiSession) {
+        await this.performAISearch(term);
+      } else {
+        await this.performRegularSearch(term);
+      }
     } catch (error) {
       console.error("Search error:", error);
       this.showErrorMessage("Search failed. Please try again.");
@@ -275,16 +356,99 @@ class OramaSearch {
     }
   }
 
+  async performRegularSearch(term: string) {
+    const results = await this.client!.search({
+      term,
+      mode: "fulltext",
+      limit: 8,
+      threshold: 1,
+      properties: ["title", "content", "description"],
+      datasources: ["0fe1e86b-60c9-4715-8bba-0c4686a58e7e"],
+      boost: {
+        title: 12,
+        content: 4,
+        description: 2,
+      },
+    });
+
+    this.renderResults(
+      results as unknown as SearchResult<OramaDocument>,
+      term,
+    );
+    this.showResults();
+  }
+
+  async performAISearch(term: string) {
+    if (!this.aiSession) {
+      await this.performRegularSearch(term);
+      return;
+    }
+
+    // Abort any existing AI search before starting new one
+    if (this.currentAiSearch) {
+      this.currentAiSearch.abort();
+    }
+    this.currentAiSearch = new AbortController();
+
+    // Show AI loading state
+    this.renderAILoading(term);
+    this.showResults();
+
+    try {
+      let response = "";
+      let sources: OramaDocument[] = [];
+      let lastResponse = "";
+
+      // Stream the AI response with abort check
+      for await (const chunk of this.aiSession.answerStream({ query: term })) {
+        // Check if search was aborted
+        if (this.currentAiSearch.signal.aborted) {
+          return; // Exit early if aborted
+        }
+
+        // Chunks from Orama are cumulative (contain full response so far)
+        response = String(chunk);
+
+        // Only re-render if response has actually changed and not aborted
+        if (response !== lastResponse && !this.currentAiSearch.signal.aborted) {
+          this.renderAIResponse(term, response, sources, true);
+          lastResponse = response;
+        }
+      }
+
+      // Only proceed with final rendering if not aborted
+      if (!this.currentAiSearch.signal.aborted) {
+        // Get the final state to extract sources
+        const sessionState = this.aiSession.state;
+        if (sessionState && sessionState.length > 0) {
+          const latestInteraction = sessionState[sessionState.length - 1] as {
+            sources?: OramaDocument[];
+          };
+          sources = latestInteraction.sources || [];
+        }
+
+        // Render final result
+        this.renderAIResponse(term, response, sources, false);
+      }
+    } catch (error) {
+      if ((error as Error).name !== "AbortError") {
+        console.error("AI search error:", error);
+        this.renderAIError(
+          term,
+          "AI search failed. Falling back to regular search.",
+        );
+        await this.performRegularSearch(term);
+      }
+    }
+  }
+
   renderResults(results: SearchResult<OramaDocument>, searchTerm: string) {
     if (!this.searchResults) return;
 
     if (results.hits.length === 0) {
       this.searchResults.innerHTML = `
-        <div class="p-4 border-b border-foreground-tertiary bg-background-secondary">
-          <h3 class="text-sm font-semibold text-foreground-primary">Search Results</h3>
-        </div>
-        <div class="p-8 text-center">
-          <div class="w-16 h-16 mx-auto mb-4 text-foreground-tertiary">
+        <div class="px-4 py-8 text-center">
+          <div class="w-12 h-12 mx-auto mb-4 text-foreground-tertiary">
             <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-full h-full">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
             </svg>
@@ -321,23 +485,15 @@ class OramaSearch {
       });
 
     const resultsHtml = `
-      <div class="p-4 border-b border-foreground-tertiary bg-background-secondary">
-        <div class="flex items-center justify-between">
-          <h2 class="text-sm font-semibold text-foreground-primary" id="search-results__heading">Search Results</h2>
-          <span class="text-xs text-foreground-secondary">${validResults.length} result${
-      validResults.length !== 1 ? "s" : ""
-    }</span>
-        </div>
-      </div>
-      <ul aria-labelledby="search-results__heading">
-        ${
-      validResults.map((hit) => `
-        <li>
-          <a
-            href="${this.escapeHtml(this.formatUrl(hit.document.url, hit))}"
-            class="flex flex-col px-4 py-3 hover:bg-foreground-quaternary transition-colors duration-150 border-b border-foreground-quaternary last:border-b-0 search-result-link group"
-          >
-            <div class="font-bold text-foreground-primary text-sm mb-2 group-hover:text-primary transition-colors">
+      ${
+      validResults.map((hit, index) => `
+        <a
+          href="${this.escapeHtml(this.formatUrl(hit.document.url, hit))}"
+          class="group flex cursor-default select-none items-center rounded-md px-3 py-2 text-sm search-result-link hover:bg-gray-50 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-white"
+          id="search-result-${index}"
+        >
+          <div class="flex-auto">
+            <div class="font-medium text-foreground-primary mb-1">
               ${
         this.highlightMatch(
           this.escapeHtml(this.cleanTitle(hit.document.title)),
@@ -345,25 +501,34 @@ class OramaSearch {
         )
       }
             </div>
-            <div class="pl-3 border-l border-foreground-quaternary text-sm text-foreground-secondary leading-relaxed mb-2 line-clamp-3">
+            <div class="text-xs text-foreground-secondary line-clamp-2">
               ${
         this.highlightMatch(
-          this.escapeHtml(hit.document.content.slice(0, 200)) + "...",
+          this.escapeHtml(hit.document.content.slice(0, 120)) + "...",
           searchTerm,
         )
       }
             </div>
-            <div class="flex items-center text-xs text-gray-500 dark:color-gray-600">
-              <svg class="w-3 h-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div class="flex items-center text-xs text-foreground-secondary mt-1">
+              <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
               </svg>
-              ${this.escapeHtml(this.formatUrl(hit.document.url, hit))}
+              ${
+        this.escapeHtml(
+          this.formatUrl(hit.document.url, hit).replace(
+            /^https?:\/\/[^\/]+/,
+            "",
+          ),
+        )
+      }
             </div>
-          </a>
-        </li>
+          </div>
+          <div class="ml-3 flex-none text-xs font-semibold text-foreground-secondary">
+            ↵
+          </div>
+        </a>
       `).join("")
     }
-      </ul>
     `;
 
     this.searchResults.innerHTML = resultsHtml;
@@ -397,6 +562,223 @@ class OramaSearch {
     this.showResults();
   }
 
+  renderAiSearchResultsHeading({ error = false }) {
+    return `<div class="p-4 py-2 border-b border-foreground-tertiary bg-background-secondary">
+        <div class="flex items-center justify-between">
+          <h2 class="text-sm font-semibold text-foreground-primary flex items-center gap-2">
+          ${
+      error
+        ? `<svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+              </svg>`
+        : `<svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
+              </svg>`
+    }
+            AI Search ${error ? "Error" : "Results"}
+          </h2>
+        </div>
+      </div>`;
+  }
+
+  renderAILoading(searchTerm: string) {
+    if (!this.searchResults) return;
+
+    this.searchResults.innerHTML = `
+      ${this.renderAiSearchResultsHeading({ error: false })}
+      <div class="p-6">
+        <div class="flex items-center gap-3 mb-4">
+          <div class="animate-spin rounded-full h-5 w-5 border-2 border-transparent border-r-primary"></div>
+          <div class="text-sm text-foreground-secondary">
+            Analyzing your query with AI context engineering...
+          </div>
+        </div>
+        <div class="p-2 border-l-4 border-primary">
+          <p class="text-sm text-foreground-secondary">
+            <strong>Query:</strong> ${this.escapeHtml(searchTerm)}
+          </p>
+          <p class="text-xs text-foreground-secondary">
+            Using advanced context engineering to provide the most relevant and helpful response.
+          </p>
+        </div>
+      </div>
+    `;
+  }
+
+  renderAIResponse(
+    searchTerm: string,
+    response: string,
+    sources: OramaDocument[],
+    isStreaming: boolean,
+  ) {
+    if (!this.searchResults) return;
+
+    const streamingIndicator = isStreaming
+      ? `<div class="animate-pulse inline-block w-2 h-4 bg-primary rounded ml-1"></div>`
+      : "";
+
+    const sourcesHtml = sources.length > 0
+      ? `
+      <div class="mt-6 border-t border-foreground-quaternary pt-4">
+        <h3 class="text-sm font-semibold text-foreground-primary mb-3 flex items-center gap-2">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+          </svg>
+          Sources (${sources.length})
+        </h3>
+        <div class="grid gap-2">
+          ${
+        sources.slice(0, 3).map((source) => `
+            <a href="${
+          this.escapeHtml(
+            this.formatUrl(
+              source.url,
+              { document: source } as Hit<OramaDocument>,
+            ),
+          )
+        }"
+               class="block p-3 rounded-lg bg-background-secondary hover:bg-foreground-quaternary transition-colors border border-foreground-quaternary group">
+              <div class="text-sm font-medium text-foreground-primary group-hover:text-primary transition-colors">
+                ${this.escapeHtml(source.title || "Untitled")}
+              </div>
+              <div class="text-xs text-foreground-secondary mt-1 line-clamp-2">
+                ${this.escapeHtml(source.content?.slice(0, 120) || "")}...
+              </div>
+            </a>
+          `).join("")
+      }
+        </div>
+      </div>
+    `
+      : "";
+
+    this.searchResults.innerHTML = `
+      ${this.renderAiSearchResultsHeading({ error: false })}
+      <div class="p-6">
+        <div class="p-2 border-l-4 text-foreground-secondary border-primary mb-4">
+          <p class="text-sm">
+            <strong>Your Question:</strong> <i>${
+      this.escapeHtml(searchTerm)
+    }</i>
+          </p>
+        </div>
+        <div class="prose prose-sm max-w-none text-foreground-primary">
+          <div class="leading-relaxed">
+            ${this.escapeHtml(response)}${streamingIndicator}
+          </div>
+        </div>
+        ${sourcesHtml}
+        <div class="mt-4 pt-4 border-t border-foreground-quaternary">
+          <button onclick="oramaSearch.toggleSearchMode()" class="text-xs text-primary hover:text-primary-dark transition-colors cursor-pointer underline">
+            ← Switch to regular search
+          </button>
+        </div>
+      </div>
+    `;
+
+    // Reset selection for new results
+    this.selectedIndex = -1;
+
+    if (this.ariaLiveRegion) {
+      this.ariaLiveRegion.textContent =
+        `AI response provided for "${searchTerm}"`;
+    }
+  }
+
+  renderAIError(_searchTerm: string, errorMessage: string) {
+    if (!this.searchResults) return;
+
+    this.searchResults.innerHTML = `
+      ${this.renderAiSearchResultsHeading({ error: true })}
+      <div class="p-6">
+        <div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-4 border-l-4 border-red-500 mb-4">
+          <p class="text-sm text-red-700 dark:text-red-300">
+            ${this.escapeHtml(errorMessage)}
+          </p>
+        </div>
+        <button onclick="oramaSearch.toggleSearchMode()" class="text-xs text-primary hover:text-primary-dark transition-colors">
+          ← Switch to regular search
+        </button>
+      </div>
+    `;
+  }
+
+  toggleSearchMode() {
+    this.isAiMode = !this.isAiMode;
+
+    // Clear any pending search timeout
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+      this.searchTimeout = null;
+    }
+
+    // Abort any ongoing AI search
+    if (this.currentAiSearch) {
+      this.currentAiSearch.abort();
+      this.currentAiSearch = null;
+    }
+
+    // Update UI to reflect the mode change
+    this.updateSearchMode();
+
+    // If there's a current search term, re-run the search with the new mode
+    if (this.searchInputModal?.value.trim()) {
+      this.performSearch(this.searchInputModal.value.trim());
+    }
+  }
+
+  updateSearchMode() {
+    // Update trigger input
+    if (this.searchInput) {
+      if (this.isAiMode) {
+        this.searchInput.placeholder = "Ask AI about Deno docs...";
+        this.searchInput.classList.add("ai-mode");
+      } else {
+        this.searchInput.placeholder = "Search documentation...";
+        this.searchInput.classList.remove("ai-mode");
+      }
+    }
+
+    // Update modal input
+    if (this.searchInputModal) {
+      if (this.isAiMode) {
+        this.searchInputModal.placeholder = "Ask AI about Deno docs...";
+      } else {
+        this.searchInputModal.placeholder = "Search documentation...";
+      }
+    }
+
+    // Update modal UI elements
+    this.updateModalSearchMode();
+  }
+
+  updateModalSearchMode() {
+    const modal = document.getElementById("orama-search-modal");
+    const indicator = document.getElementById("search-mode-toggle__indicator");
+    const toggleButton = document.getElementById("search-mode-toggle");
+
+    if (modal) {
+      if (this.isAiMode) {
+        modal.classList.add("ai-mode");
+      } else {
+        modal.classList.remove("ai-mode");
+      }
+    }
+
+    if (toggleButton) {
+      toggleButton.setAttribute(
+        "aria-pressed",
+        this.isAiMode ? "true" : "false",
+      );
+    }
+
+    if (toggleButton) {
+      toggleButton.title = this.isAiMode
+        ? "Switch to regular search (Ctrl+Shift+K)"
+        : "Switch to AI search (Ctrl+Shift+K)";
+    }
+  }
+
   showErrorMessage(message: string) {
     if (!this.searchResults) return;
 
@@ -420,19 +802,42 @@ class OramaSearch {
   }
 
   showResults() {
-    const resultsContainer = document.getElementById("orama-search-results");
-    if (resultsContainer) {
-      resultsContainer.classList.remove("hidden");
-      this.isResultsOpen = true;
+    const modal = document.getElementById(
+      "orama-search-modal",
+    ) as HTMLDialogElement;
+    if (modal) {
+      modal.classList.remove("hidden");
+      modal.showModal();
+      this.isModalOpen = true;
+      // Prevent body scrolling when modal is open
+      document.body.style.overflow = "hidden";
     }
   }
 
   hideResults() {
-    const resultsContainer = document.getElementById("orama-search-results");
-    if (resultsContainer) {
-      resultsContainer.classList.add("hidden");
-      this.isResultsOpen = false;
+    const modal = document.getElementById(
+      "orama-search-modal",
+    ) as HTMLDialogElement;
+    if (modal) {
+      modal.close();
+      this.isModalOpen = false;
+      this.searchInputModal!.value = ""; // Clear modal input when hiding
+      this.searchResults!.innerHTML = ""; // Clear results when hiding
       this.selectedIndex = -1; // Reset selection when hiding
+
+      // Clean up any ongoing operations
+      if (this.searchTimeout) {
+        clearTimeout(this.searchTimeout);
+        this.searchTimeout = null;
+      }
+
+      if (this.currentAiSearch) {
+        this.currentAiSearch.abort();
+        this.currentAiSearch = null;
+      }
+
+      // Restore body scrolling
+      document.body.style.overflow = "";
     }
   }
 
diff --git a/styles.css b/styles.css
index 0a2cde330..89fcd336d 100644
--- a/styles.css
+++ b/styles.css
@@ -1615,6 +1615,55 @@
       width: 1px;
     }
   }
+
+  #search-mode-toggle[aria-pressed="true"] #search-mode-toggle__indicator {
+    background-color: var(--color-primary) !important;
+
+    & > div {
+      transform: translateX(0.5rem);
+    }
+
+    + span {
+      color: var(--color-primary);
+    }
+  }
+
+  @keyframes fade_in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide_up {
+    0% {
+      transform: translateY(24px);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  #orama-search-modal {
+    ::-webkit-search-cancel-button {
+      display: none;
+    }
+
+    &::backdrop {
+      display: none;
+    }
+
+    /* Styles when the dialog is open */
+    &[open] {
+      animation: fade_in 0.2s ease-out forwards;
+
+      & > div {
+        animation: slide_up 0.15s cubic-bezier(0, 0, 0.2, 1) forwards;
+      }
+    }
+  }
 }
 
 @layer utilities {