diff --git a/.cursorrules b/.cursorrules
new file mode 100644
index 0000000..ede21d3
--- /dev/null
+++ b/.cursorrules
@@ -0,0 +1,22 @@
+# Project Configuration
+
+## Project Type
+- Static Site Generator: Jekyll
+- Hosting: GitHub Pages
+
+## Build Commands
+- `bundle install`: Install dependencies
+- `bundle exec jekyll serve`: Run development server
+- `bundle exec jekyll build`: Build site for production
+
+## Important Files
+- `_config.yml`: Jekyll configuration
+- `Gemfile`: Ruby dependencies
+- `_site/`: Build output directory (generated)
+- `_posts/`: Blog posts directory
+- `_layouts/`: Template layouts
+- `_includes/`: Reusable components
+
+## GitHub Pages Settings
+- Branch: gh-pages (or main/master, depending on your setup)
+- Build Source: Jekyll 
\ No newline at end of file
diff --git a/.github/contentcodex.png b/.github/contentcodex.png
deleted file mode 100644
index 3374a41..0000000
Binary files a/.github/contentcodex.png and /dev/null differ
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..57510a2
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+_site/
diff --git a/Gemfile b/Gemfile
new file mode 100644
index 0000000..84800ed
--- /dev/null
+++ b/Gemfile
@@ -0,0 +1,4 @@
+source "https://rubygems.org"
+
+gem "jekyll"
+gem "github-pages", group: :jekyll_plugins 
\ No newline at end of file
diff --git a/Gemfile.lock b/Gemfile.lock
new file mode 100644
index 0000000..a347a5f
--- /dev/null
+++ b/Gemfile.lock
@@ -0,0 +1,309 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    activesupport (8.0.1)
+      base64
+      benchmark (>= 0.3)
+      bigdecimal
+      concurrent-ruby (~> 1.0, >= 1.3.1)
+      connection_pool (>= 2.2.5)
+      drb
+      i18n (>= 1.6, < 2)
+      logger (>= 1.4.2)
+      minitest (>= 5.1)
+      securerandom (>= 0.3)
+      tzinfo (~> 2.0, >= 2.0.5)
+      uri (>= 0.13.1)
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
+    base64 (0.2.0)
+    benchmark (0.4.0)
+    bigdecimal (3.1.9)
+    coffee-script (2.4.1)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.12.2)
+    colorator (1.1.0)
+    commonmarker (0.23.11)
+    concurrent-ruby (1.3.4)
+    connection_pool (2.4.1)
+    csv (3.3.2)
+    dnsruby (1.72.3)
+      base64 (~> 0.2.0)
+      simpleidn (~> 0.2.1)
+    drb (2.2.1)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    ethon (0.16.0)
+      ffi (>= 1.15.0)
+    eventmachine (1.2.7)
+    execjs (2.10.0)
+    faraday (2.12.2)
+      faraday-net_http (>= 2.0, < 3.5)
+      json
+      logger
+    faraday-net_http (3.4.0)
+      net-http (>= 0.5.0)
+    ffi (1.17.1-aarch64-linux-gnu)
+    ffi (1.17.1-aarch64-linux-musl)
+    ffi (1.17.1-arm-linux-gnu)
+    ffi (1.17.1-arm-linux-musl)
+    ffi (1.17.1-arm64-darwin)
+    ffi (1.17.1-x86_64-darwin)
+    ffi (1.17.1-x86_64-linux-gnu)
+    ffi (1.17.1-x86_64-linux-musl)
+    forwardable-extended (2.6.0)
+    gemoji (4.1.0)
+    github-pages (232)
+      github-pages-health-check (= 1.18.2)
+      jekyll (= 3.10.0)
+      jekyll-avatar (= 0.8.0)
+      jekyll-coffeescript (= 1.2.2)
+      jekyll-commonmark-ghpages (= 0.5.1)
+      jekyll-default-layout (= 0.1.5)
+      jekyll-feed (= 0.17.0)
+      jekyll-gist (= 1.5.0)
+      jekyll-github-metadata (= 2.16.1)
+      jekyll-include-cache (= 0.2.1)
+      jekyll-mentions (= 1.6.0)
+      jekyll-optional-front-matter (= 0.3.2)
+      jekyll-paginate (= 1.1.0)
+      jekyll-readme-index (= 0.3.0)
+      jekyll-redirect-from (= 0.16.0)
+      jekyll-relative-links (= 0.6.1)
+      jekyll-remote-theme (= 0.4.3)
+      jekyll-sass-converter (= 1.5.2)
+      jekyll-seo-tag (= 2.8.0)
+      jekyll-sitemap (= 1.4.0)
+      jekyll-swiss (= 1.0.0)
+      jekyll-theme-architect (= 0.2.0)
+      jekyll-theme-cayman (= 0.2.0)
+      jekyll-theme-dinky (= 0.2.0)
+      jekyll-theme-hacker (= 0.2.0)
+      jekyll-theme-leap-day (= 0.2.0)
+      jekyll-theme-merlot (= 0.2.0)
+      jekyll-theme-midnight (= 0.2.0)
+      jekyll-theme-minimal (= 0.2.0)
+      jekyll-theme-modernist (= 0.2.0)
+      jekyll-theme-primer (= 0.6.0)
+      jekyll-theme-slate (= 0.2.0)
+      jekyll-theme-tactile (= 0.2.0)
+      jekyll-theme-time-machine (= 0.2.0)
+      jekyll-titles-from-headings (= 0.5.3)
+      jemoji (= 0.13.0)
+      kramdown (= 2.4.0)
+      kramdown-parser-gfm (= 1.1.0)
+      liquid (= 4.0.4)
+      mercenary (~> 0.3)
+      minima (= 2.5.1)
+      nokogiri (>= 1.16.2, < 2.0)
+      rouge (= 3.30.0)
+      terminal-table (~> 1.4)
+      webrick (~> 1.8)
+    github-pages-health-check (1.18.2)
+      addressable (~> 2.3)
+      dnsruby (~> 1.60)
+      octokit (>= 4, < 8)
+      public_suffix (>= 3.0, < 6.0)
+      typhoeus (~> 1.3)
+    html-pipeline (2.14.3)
+      activesupport (>= 2)
+      nokogiri (>= 1.4)
+    http_parser.rb (0.8.0)
+    i18n (1.14.6)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.10.0)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      csv (~> 3.0)
+      em-websocket (~> 0.5)
+      i18n (>= 0.7, < 2)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 2.0)
+      kramdown (>= 1.17, < 3)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (>= 1.7, < 4)
+      safe_yaml (~> 1.0)
+      webrick (>= 1.0)
+    jekyll-avatar (0.8.0)
+      jekyll (>= 3.0, < 5.0)
+    jekyll-coffeescript (1.2.2)
+      coffee-script (~> 2.2)
+      coffee-script-source (~> 1.12)
+    jekyll-commonmark (1.4.0)
+      commonmarker (~> 0.22)
+    jekyll-commonmark-ghpages (0.5.1)
+      commonmarker (>= 0.23.7, < 1.1.0)
+      jekyll (>= 3.9, < 4.0)
+      jekyll-commonmark (~> 1.4.0)
+      rouge (>= 2.0, < 5.0)
+    jekyll-default-layout (0.1.5)
+      jekyll (>= 3.0, < 5.0)
+    jekyll-feed (0.17.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-gist (1.5.0)
+      octokit (~> 4.2)
+    jekyll-github-metadata (2.16.1)
+      jekyll (>= 3.4, < 5.0)
+      octokit (>= 4, < 7, != 4.4.0)
+    jekyll-include-cache (0.2.1)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-mentions (1.6.0)
+      html-pipeline (~> 2.3)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-optional-front-matter (0.3.2)
+      jekyll (>= 3.0, < 5.0)
+    jekyll-paginate (1.1.0)
+    jekyll-readme-index (0.3.0)
+      jekyll (>= 3.0, < 5.0)
+    jekyll-redirect-from (0.16.0)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-relative-links (0.6.1)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-remote-theme (0.4.3)
+      addressable (~> 2.0)
+      jekyll (>= 3.5, < 5.0)
+      jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0)
+      rubyzip (>= 1.3.0, < 3.0)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
+    jekyll-seo-tag (2.8.0)
+      jekyll (>= 3.8, < 5.0)
+    jekyll-sitemap (1.4.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-swiss (1.0.0)
+    jekyll-theme-architect (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-cayman (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-dinky (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-hacker (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-leap-day (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-merlot (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-midnight (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-minimal (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-modernist (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-primer (0.6.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-github-metadata (~> 2.9)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-slate (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-tactile (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-time-machine (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-titles-from-headings (0.5.3)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    jemoji (0.13.0)
+      gemoji (>= 3, < 5)
+      html-pipeline (~> 2.2)
+      jekyll (>= 3.0, < 5.0)
+    json (2.9.1)
+    kramdown (2.4.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.4)
+    listen (3.9.0)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    logger (1.6.4)
+    mercenary (0.3.6)
+    minima (2.5.1)
+      jekyll (>= 3.5, < 5.0)
+      jekyll-feed (~> 0.9)
+      jekyll-seo-tag (~> 2.1)
+    minitest (5.25.4)
+    net-http (0.6.0)
+      uri
+    nokogiri (1.18.1-aarch64-linux-gnu)
+      racc (~> 1.4)
+    nokogiri (1.18.1-aarch64-linux-musl)
+      racc (~> 1.4)
+    nokogiri (1.18.1-arm-linux-gnu)
+      racc (~> 1.4)
+    nokogiri (1.18.1-arm-linux-musl)
+      racc (~> 1.4)
+    nokogiri (1.18.1-arm64-darwin)
+      racc (~> 1.4)
+    nokogiri (1.18.1-x86_64-darwin)
+      racc (~> 1.4)
+    nokogiri (1.18.1-x86_64-linux-gnu)
+      racc (~> 1.4)
+    nokogiri (1.18.1-x86_64-linux-musl)
+      racc (~> 1.4)
+    octokit (4.25.1)
+      faraday (>= 1, < 3)
+      sawyer (~> 0.9)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (5.1.1)
+    racc (1.8.1)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.11.1)
+      ffi (~> 1.0)
+    rexml (3.4.0)
+    rouge (3.30.0)
+    rubyzip (2.4)
+    safe_yaml (1.0.5)
+    sass (3.7.4)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    sawyer (0.9.2)
+      addressable (>= 2.3.5)
+      faraday (>= 0.17.3, < 3)
+    securerandom (0.4.1)
+    simpleidn (0.2.3)
+    terminal-table (1.8.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    typhoeus (1.4.1)
+      ethon (>= 0.9.0)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    unicode-display_width (1.8.0)
+    uri (1.0.2)
+    webrick (1.9.1)
+
+PLATFORMS
+  aarch64-linux-gnu
+  aarch64-linux-musl
+  arm-linux-gnu
+  arm-linux-musl
+  arm64-darwin
+  x86_64-darwin
+  x86_64-linux-gnu
+  x86_64-linux-musl
+
+DEPENDENCIES
+  github-pages
+  jekyll
+
+BUNDLED WITH
+   2.5.16
diff --git a/_layouts/default.html b/_layouts/default.html
index e361a00..e9af251 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -13,11 +13,16 @@
         --bg-color-dark: #1a1a1a;
         --text-color-light: #000000;
         --text-color-dark: #ffffff;
+        --sidebar-width: 300px;
+        --accent-color: #10b981;
+        --accent-color-hover: #059669;
       }
 
       body {
         background-color: var(--bg-color-light);
         color: var(--text-color-light);
+        margin: 0;
+        padding: 0;
       }
 
       body.dark-mode {
@@ -26,31 +31,838 @@
       }
 
       .dark-mode-toggle {
+        background-color: transparent;
+        border: none;
+        color: var(--accent-color);
+        cursor: pointer;
+        padding: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0.8;
+        transition: opacity 0.2s ease;
+      }
+
+      .dark-mode-toggle:hover {
+        opacity: 1;
+      }
+
+      .mode-icon {
+        width: 20px;
+        height: 20px;
+        stroke: currentColor;
+      }
+
+      .site-header {
+        padding: 1rem 2rem;
+        text-align: left;
+        border-bottom: 1px solid #e1e4e8;
+        background-color: var(--bg-color-light);
+        position: sticky;
+        top: 0;
+        z-index: 100;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .dark-mode .site-header {
+        background-color: var(--bg-color-dark);
+        border-bottom-color: #2d2d2d;
+      }
+
+      .header-left {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 0.2rem;
+      }
+
+      .header-right {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+      }
+
+      .social-links {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        margin-right: 8px;
+      }
+
+      .social-link {
+        color: var(--accent-color);
+        opacity: 0.8;
+        transition: opacity 0.2s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .social-link:hover {
+        opacity: 1;
+      }
+
+      .social-link svg {
+        width: 24px;
+        height: 24px;
+      }
+
+      .site-footer {
+        padding: 12px 20px;
+        text-align: center;
+        border-top: 1px solid #e1e4e8;
+        background: var(--bg-color-light);
         position: fixed;
-        top: 1rem;
-        right: 1rem;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+      }
+
+      .dark-mode .site-footer {
+        background: var(--bg-color-dark);
+        border-color: #2d2d2d;
+      }
+
+      .footer-content {
+        max-width: none;
+        margin: 0;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 0 30px;
+        text-align: left;
+        font-size: 0.7rem;
+        padding: 0 1rem;
+      }
+
+      .footer-section {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+
+      .footer-section h3 {
+        font-size: 0.8rem;
+        margin: 0;
+        opacity: 0.8;
+      }
+
+      .dark-mode .footer-section h3 {
+        color: var(--text-color-dark);
+      }
+
+      .footer-section p {
+        font-size: inherit;
+        margin: 0;
+        line-height: 1.3;
+        opacity: 0.6;
+        color: var(--text-color-light);
+      }
+
+      .dark-mode .footer-section p {
+        color: var(--text-color-dark);
+      }
+
+      .book-links {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .book-link svg {
+        width: 14px;
+        height: 14px;
+      }
+
+      /* Add padding to main content to prevent overlap with fixed footer */
+      .layout-wrapper {
+        padding-bottom: 100px;
+      }
+
+      @media (max-width: 768px) {
+        .footer-content {
+          grid-template-columns: 1fr;
+          gap: 12px;
+          text-align: left;
+          padding: 0 1rem;
+        }
+
+        .footer-section {
+          text-align: left;
+        }
+
+        .footer-section p {
+          text-align: left;
+        }
+
+        .book-links {
+          align-items: flex-start;
+        }
+
+        .site-footer {
+          position: static;
+          text-align: left;
+        }
+
+        .layout-wrapper {
+          padding-bottom: 0;
+        }
+
+        .site-description {
+          display: none !important;
+        }
+
+        .site-header {
+          padding: 0.75rem 1.5rem;
+        }
+
+        .prompt-count {
+          padding: 4px 8px;
+          font-size: 0.75rem;
+          margin-bottom: 8px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+
+        .count-number {
+          font-size: 0.8rem;
+        }
+
+        #searchInput {
+          padding: 6px 8px;
+          font-size: 0.9rem;
+        }
+
+        #searchResults {
+          display: none;
+        }
+
+        #searchInput:not(:placeholder-shown) + #searchResults {
+          display: block;
+        }
+
+        #searchResults .search-result-item:nth-child(n+4) {
+          display: none;
+        }
+
+        #searchResults .search-result-item:nth-child(3) {
+          position: relative;
+          padding-bottom: 30px;
+        }
+
+        #searchResults .search-result-item:nth-child(3)::after {
+          content: "Scroll main content to see more results";
+          position: absolute;
+          bottom: 8px;
+          left: 0;
+          right: 0;
+          text-align: center;
+          font-size: 0.8rem;
+          color: var(--accent-color);
+          opacity: 0.8;
+        }
+      }
+
+      .site-title {
+        font-size: 1.8rem;
+        font-weight: 700;
+        margin: 0;
+        background: linear-gradient(45deg, var(--accent-color), #3b82f6);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        display: inline-block;
+        position: relative;
+        transition: transform 0.3s ease;
+      }
+
+      .site-title:hover {
+        transform: translateY(-2px);
+      }
+
+      .site-title::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(45deg, var(--accent-color), #3b82f6);
+        filter: blur(20px);
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        z-index: -1;
+      }
+
+      .site-title:hover::before {
+        opacity: 0.15;
+      }
+
+      .site-description {
+        color: var(--text-color-light);
+        margin: 0;
+        font-size: 0.95rem;
+        opacity: 0.8;
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        flex-wrap: wrap;
+      }
+
+      .platform-tag {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        border-radius: 12px;
+        font-size: 0.85rem;
+        background: rgba(16, 185, 129, 0.1);
+        color: var(--accent-color);
+        border: 1px solid var(--accent-color);
+      }
+
+      .dark-mode .platform-tag {
+        background: rgba(16, 185, 129, 0.2);
+      }
+
+      .dark-mode .site-description {
+        color: var(--text-color-dark);
+      }
+
+      .layout-wrapper {
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+      }
+
+      .content-wrapper {
+        display: flex;
+        flex: 1;
+      }
+
+      .sidebar {
+        width: var(--sidebar-width);
+        padding: 20px;
+        border-right: 1px solid #e1e4e8;
+        height: calc(100vh - 140px);
+        overflow-y: auto;
+        background-color: var(--bg-color-light);
+      }
+
+      .dark-mode .sidebar {
+        background-color: var(--bg-color-dark);
+        border-right-color: #2d2d2d;
+      }
+
+      .main-content {
+        flex: 1;
+        height: calc(100vh - 140px);
+        overflow-y: auto;
+        padding: 20px;
+      }
+
+      .prompts-grid {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 16px;
+        max-width: 100%;
+        margin: 0;
+        padding: 16px;
+      }
+
+      .container-lg.markdown-body {
+        padding: 0;
+        max-width: none;
+      }
+
+      @media (max-width: 1600px) {
+        .prompts-grid {
+          grid-template-columns: repeat(3, 1fr);
+        }
+      }
+
+      @media (max-width: 1200px) {
+        .prompts-grid {
+          grid-template-columns: repeat(2, 1fr);
+        }
+      }
+
+      @media (max-width: 768px) {
+        .prompts-grid {
+          grid-template-columns: 1fr;
+          gap: 15px;
+        }
+      }
+
+      .prompt-card {
+        background: var(--bg-color-light);
+        border: 1px solid #e1e4e8;
+        border-radius: 12px;
+        padding: 16px;
+        position: relative;
+        transition: transform 0.2s ease;
+        display: flex;
+        flex-direction: column;
+        min-height: 200px;
+      }
+
+      .dark-mode .prompt-card {
+        background: var(--bg-color-dark);
+        border-color: #2d2d2d;
+      }
+
+      .prompt-card:hover {
+        transform: translateY(-2px);
+      }
+
+      .prompt-title {
+        font-size: 1rem;
+        font-weight: 600;
+        margin: 0 0 12px 0;
+        color: var(--text-color-light);
+        line-height: 1.4;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .dark-mode .prompt-title {
+        color: var(--text-color-dark);
+      }
+
+      .prompt-content {
+        font-size: 0.9rem;
+        line-height: 1.5;
+        color: var(--text-color-light);
+        opacity: 0.8;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        margin-bottom: 40px;
+      }
+
+      .dark-mode .prompt-content {
+        color: var(--text-color-dark);
+      }
+
+      .copy-button {
+        position: static;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        padding: 2px;
+        color: var(--accent-color);
+        opacity: 0.8;
+        transition: opacity 0.2s ease;
+        z-index: 2;
+        margin-left: 8px;
+        flex-shrink: 0;
+      }
+
+      .copy-button:hover {
+        opacity: 1;
+      }
+
+      .copy-button svg {
+        width: 16px;
+        height: 16px;
+      }
+
+      .search-container {
+        margin-bottom: 20px;
+      }
+
+      .prompt-count {
+        margin-bottom: 12px;
+        padding: 6px 10px;
+        border-radius: 6px;
+        background: rgba(16, 185, 129, 0.1);
+        color: var(--accent-color);
+        font-size: 0.8rem;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .dark-mode .prompt-count {
+        background: rgba(16, 185, 129, 0.15);
+      }
+
+      .prompt-count .count-number {
+        font-weight: 600;
+        font-size: 0.9rem;
+      }
+
+      .prompt-count.filtered {
+        background: rgba(59, 130, 246, 0.1);
+        color: #3b82f6;
+      }
+
+      .dark-mode .prompt-count.filtered {
+        background: rgba(59, 130, 246, 0.15);
+      }
+
+      #searchInput {
+        width: 100%;
+        padding: 8px;
+        border: 1px solid #e1e4e8;
+        border-radius: 4px;
+        margin-bottom: 10px;
         background-color: var(--bg-color-light);
         color: var(--text-color-light);
+      }
+
+      .dark-mode #searchInput {
+        background-color: var(--bg-color-dark);
+        color: var(--text-color-dark);
+        border-color: #2d2d2d;
+      }
+
+      #searchResults {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+
+      .search-result-item {
+        padding: 10px;
+        border-bottom: 1px solid #e1e4e8;
+        cursor: pointer;
+        color: var(--text-color-light);
+      }
+
+      .dark-mode .search-result-item {
+        color: var(--text-color-dark);
+        border-bottom-color: #2d2d2d;
+      }
+
+      .search-result-item:hover {
+        background-color: rgba(16, 185, 129, 0.1);
+      }
+
+      .dark-mode .search-result-item:hover {
+        background-color: rgba(16, 185, 129, 0.2);
+      }
+
+      .search-result-item.active {
+        background-color: var(--accent-color);
+        color: white;
+      }
+
+      @media (max-width: 768px) {
+        .content-wrapper {
+          flex-direction: column;
+        }
+
+        .sidebar {
+          width: 100%;
+          height: auto;
+          border-right: none;
+          border-bottom: 1px solid #e1e4e8;
+        }
+
+        .dark-mode .sidebar {
+          border-bottom-color: #2d2d2d;
+        }
+
+        .main-content {
+          height: auto;
+        }
+
+        .header-right {
+          gap: 8px;
+        }
+
+        .mode-text {
+          display: none;
+        }
+
+        .dark-mode-toggle {
+          padding: 6px;
+        }
+
+        .github-link {
+          padding: 6px;
+        }
+
+        .github-link span {
+          display: none;
+        }
+      }
+
+      /* Add modal styles */
+      .modal-overlay {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.7);
+        z-index: 1000;
+        backdrop-filter: blur(4px);
+      }
+
+      .modal {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: var(--bg-color-light);
+        border-radius: 12px;
+        padding: 24px;
+        width: 90%;
+        max-width: 800px;
+        max-height: 90vh;
+        overflow-y: auto;
+        z-index: 1001;
+        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
+      }
+
+      .dark-mode .modal {
+        background: var(--bg-color-dark);
+      }
+
+      .modal-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-bottom: 16px;
+      }
+
+      .modal-title {
+        font-size: 1.4rem;
+        font-weight: 600;
+        margin: 0;
+        padding-right: 80px;
+        color: var(--text-color-light);
+        flex: 1;
+      }
+
+      .modal-actions {
+        display: flex;
+        gap: 12px;
+        flex-shrink: 0;
+      }
+
+      .modal-copy-button {
+        background: transparent;
         border: none;
-        padding: 0.5rem;
+        cursor: pointer;
+        padding: 4px;
+        color: var(--accent-color);
+        opacity: 0.8;
+        transition: opacity 0.2s ease;
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .modal-close {
+        position: static;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        color: var(--text-color-light);
+        padding: 4px;
+        opacity: 0.7;
+        transition: opacity 0.2s ease;
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .dark-mode .modal-close {
+        color: var(--text-color-dark);
+      }
+
+      .modal-close:hover {
+        opacity: 1;
+      }
+
+      .prompt-card {
         cursor: pointer;
       }
 
-      body.dark-mode .dark-mode-toggle {
-        background-color: var(--bg-color-dark);
+      /* Add contributor badge styles */
+      .contributor-badge {
+        position: absolute;
+        bottom: 8px;
+        right: 12px;
+        font-size: 0.65rem;
+        color: var(--accent-color);
+        text-decoration: none;
+        opacity: 0.7;
+        transition: all 0.2s ease;
+        background: rgba(16, 185, 129, 0.1);
+        padding: 1px 6px;
+        border-radius: 8px;
+      }
+
+      .dark-mode .contributor-badge {
+        background: rgba(16, 185, 129, 0.15);
+      }
+
+      .contributor-badge:hover {
+        opacity: 1;
+        transform: translateY(-1px);
+        background: var(--accent-color);
+        color: white;
+      }
+
+      .dark-mode .contributor-badge:hover {
+        color: var(--bg-color-dark);
+      }
+
+      .prompt-content {
+        font-size: 0.9rem;
+        line-height: 1.5;
+        color: var(--text-color-light);
+        opacity: 0.8;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        margin-bottom: 40px;
+      }
+
+      /* Add modal header and footer styles */
+      .modal-footer {
+        margin-top: 20px;
+        padding-top: 16px;
+        border-top: 1px solid #e1e4e8;
+      }
+
+      .dark-mode .modal-footer {
+        border-color: #2d2d2d;
+      }
+
+      .modal-contributor {
+        font-size: 0.8rem;
+        color: var(--accent-color);
+        text-decoration: none;
+        opacity: 0.8;
+        transition: opacity 0.2s ease;
+      }
+
+      .modal-contributor:hover {
+        opacity: 1;
+      }
+
+      .dark-mode .modal-title {
         color: var(--text-color-dark);
       }
+
+      .modal-content {
+        font-size: 1rem;
+        line-height: 1.6;
+        color: var(--text-color-light);
+      }
+
+      .dark-mode .modal-content {
+        color: var(--text-color-dark);
+      }
+
+      .modal-copy-button:hover {
+        opacity: 1;
+      }
+
+      .modal-copy-button svg {
+        width: 20px;
+        height: 20px;
+      }
+
+      .modal-close svg {
+        width: 20px;
+        height: 20px;
+      }
+
+      .dark-mode .modal-close {
+        color: var(--text-color-dark);
+      }
+
+      .footer-section a {
+        color: var(--accent-color);
+        text-decoration: none;
+      }
+
+      .footer-section a:hover {
+        opacity: 1;
+      }
+
+      .book-link {
+        color: var(--accent-color) !important;
+        padding: 1px 0;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        opacity: 0.7;
+        transition: opacity 0.2s ease;
+      }
+
+      .dark-mode .book-link {
+        color: var(--accent-color) !important;
+      }
+
+      .book-link:hover {
+        opacity: 1;
+      }
+
+      .social-footer-link {
+        color: var(--accent-color);
+        opacity: 0.8;
+        transition: opacity 0.2s ease;
+      }
+
+      .dark-mode .social-footer-link {
+        color: var(--accent-color);
+      }
     </style>
     {% include head-custom.html %}
     <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6945602608405209" crossorigin="anonymous"></script>
   </head>
   <body>
-    <button class="dark-mode-toggle" onclick="toggleDarkMode()">🌞</button>
-    <div class="container-lg px-3 my-5 markdown-body">
-      {% if site.title and site.title != page.title %}
-      <h1><a href="{{ "/" | absolute_url }}">{{ site.title }}</a></h1>
-      {% endif %}
+    <div class="layout-wrapper">
+      <header class="site-header">
+        <div class="header-left">
+          <h1 class="site-title">prompts.chat</h1>
+          <div class="site-description">
+            <span class="platform-tag">ChatGPT</span>
+            <span class="platform-tag">Claude</span>
+            <span class="platform-tag">Gemini</span>
+            <span class="platform-tag">Llama</span>
+            <span class="platform-tag">Mistral</span>
+          </div>
+        </div>
+        <div class="header-right">
+          <button class="dark-mode-toggle" onclick="toggleDarkMode()" title="Toggle dark mode">
+            <svg class="mode-icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+            <svg class="mode-icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+          </button>
+        </div>
+      </header>
 
+      <div class="content-wrapper">
+        <div class="sidebar">
+          <div class="search-container">
+            <div class="prompt-count" id="promptCount">
+              <span class="count-label">All Prompts</span>
+              <span class="count-number">0</span>
+            </div>
+            <input type="text" id="searchInput" placeholder="Search prompts...">
+            <ul id="searchResults"></ul>
+          </div>
+        </div>
+        <div class="main-content">
+          <div class="container-lg markdown-body">
       {{ content }}
 
       {% if site.github.private != true and site.github.license %}
@@ -58,46 +870,490 @@
         Awesome ChatGPT Prompts is open source. {% github_edit_link "Improve this page" %}.
       </div>
       {% endif %}
+          </div>
+        </div>
+      </div>
+      <footer class="site-footer">
+        <div class="footer-content">
+          <div class="footer-section">
+            <h3>About</h3>
+            <p>A curated collection of effective prompts for ChatGPT and other AI assistants. While designed for ChatGPT, these prompts can be adapted for Claude, Gemini, Llama, and other language models to help you get more out of AI interactions.</p>
+          </div>
+          <div class="footer-section">
+            <h3>Contributing</h3>
+            <p>If you'd like to contribute, please fork the repository and make changes as you'd like. Pull requests are warmly welcome. Please read the <a href="https://github.com/f/awesome-chatgpt-prompts/blob/main/CONTRIBUTING.md" style="color: var(--accent-color);">contribution guidelines</a> first.</p>
+          </div>
+          <div class="footer-section">
+            <h3>e-Books by @f</h3>
+            <div class="book-links">
+              <a href="https://fka.gumroad.com/l/art-of-chatgpt-prompting" class="book-link" target="_blank">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
+                The Art of ChatGPT Prompting
+              </a>
+              <a href="https://fka.gumroad.com/l/how-to-make-money-with-chatgpt" class="book-link" target="_blank">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
+                How to Make Money with ChatGPT
+              </a>
+              <a href="https://fka.gumroad.com/l/the-art-of-midjourney-ai-guide-to-creating-images-from-text" class="book-link" target="_blank">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
+                The Art of Midjourney AI
+              </a>
+            </div>
+          </div>
+          <div class="footer-section">
+            <h3>Links</h3>
+            <div class="book-links">
+              <a href="https://github.com/f/awesome-chatgpt-prompts" target="_blank" class="book-link">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
+                GitHub Repository
+              </a>
+              <a href="https://huggingface.co/datasets/fka/awesome-chatgpt-prompts" target="_blank" class="book-link">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+                  <line x1="3" y1="10" x2="21" y2="10"></line>
+                  <line x1="7" y1="15" x2="7" y2="19"></line>
+                  <line x1="11" y1="15" x2="11" y2="19"></line>
+                  <line x1="15" y1="15" x2="15" y2="19"></line>
+                </svg>
+                Hugging Face Dataset
+              </a>
+            </div>
+          </div>
+        </div>
+      </footer>
     </div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js" integrity="sha256-lZaRhKri35AyJSypXXs4o6OPFTbTmUoltBbDCbdzegg=" crossorigin="anonymous"></script>
-    <script>anchors.add();</script>
     <script>
-      document.querySelectorAll("h2[id^=act] + p + blockquote").forEach((x) => {
-        x.setAttribute('contentEditable', true);
-        const button = document.createElement('button');
-        button.style.border = '0';
-        button.style.borderRadius = '3px';
-        button.style.fontSize = '1rem';
-        button.style.marginRight = '0.5rem';
-        button.style.padding = '0';
-        button.style.backgroundColor = 'transparent';
-        button.innerHTML = '✂️';
-        button.addEventListener('click', async () => {
-          if (navigator.clipboard) {
-            await navigator.clipboard.writeText(x.innerText);
-            alert('Prompt is copied, now paste this into ChatGPT.');
-          } else {
-            alert('Your browser does not support clipboard copy. Please select the prompt and copy.')
-          }
-        }, false);
-        x.previousElementSibling.previousElementSibling.prepend(button);
-      });
-
+      // Dark mode functionality
       function toggleDarkMode() {
         const body = document.body;
+        const toggle = document.querySelector('.dark-mode-toggle');
+        const sunIcon = toggle.querySelector('.sun-icon');
+        const moonIcon = toggle.querySelector('.moon-icon');
+        
         body.classList.toggle('dark-mode');
         const isDarkMode = body.classList.contains('dark-mode');
+        
         localStorage.setItem('dark-mode', isDarkMode);
-        document.querySelector('.dark-mode-toggle').textContent = isDarkMode ? '🌙' : '🌞';
+        sunIcon.style.display = isDarkMode ? 'none' : 'block';
+        moonIcon.style.display = isDarkMode ? 'block' : 'none';
       }
 
+      // Initialize everything after DOM loads
       document.addEventListener('DOMContentLoaded', () => {
-        const isDarkMode = localStorage.getItem('dark-mode') === 'true';
-        if (isDarkMode) {
+        // Create prompt cards
+        createPromptCards();
+        
+        // Initialize dark mode
+        const isDarkMode = localStorage.getItem('dark-mode');
+        const toggle = document.querySelector('.dark-mode-toggle');
+        const sunIcon = toggle.querySelector('.sun-icon');
+        const moonIcon = toggle.querySelector('.moon-icon');
+        
+        // Set dark mode by default if not set
+        if (isDarkMode === null) {
+          localStorage.setItem('dark-mode', 'true');
           document.body.classList.add('dark-mode');
-          document.querySelector('.dark-mode-toggle').textContent = '🌙';
+          sunIcon.style.display = 'none';
+          moonIcon.style.display = 'block';
+        } else if (isDarkMode === 'true') {
+          document.body.classList.add('dark-mode');
+          sunIcon.style.display = 'none';
+          moonIcon.style.display = 'block';
+        } else {
+          sunIcon.style.display = 'block';
+          moonIcon.style.display = 'none';
+        }
+        
+        // Initialize search functionality
+        initializeSearch();
+      });
+
+      // Search functionality
+      async function initializeSearch() {
+        try {
+          const response = await fetch('/prompts.csv');
+          const csvText = await response.text();
+          const prompts = parseCSV(csvText);
+          
+          // Sort prompts alphabetically by act
+          prompts.sort((a, b) => a.act.localeCompare(b.act));
+          
+          const searchInput = document.getElementById('searchInput');
+          const searchResults = document.getElementById('searchResults');
+          const promptCount = document.getElementById('promptCount');
+          
+          // Update prompt count
+          updatePromptCount(prompts.length, prompts.length);
+          
+          // Show all prompts initially
+          displaySearchResults(prompts);
+          
+          searchInput.addEventListener('input', (e) => {
+            const searchTerm = e.target.value.toLowerCase();
+            const filteredPrompts = searchTerm 
+              ? prompts.filter(prompt => 
+                  prompt.act.toLowerCase().includes(searchTerm) || 
+                  prompt.prompt.toLowerCase().includes(searchTerm)
+                )
+              : prompts;
+            
+            // Update count with filtered results
+            updatePromptCount(filteredPrompts.length, prompts.length);
+            displaySearchResults(filteredPrompts);
+          });
+        } catch (error) {
+          console.error('Error loading prompts:', error);
+        }
+      }
+
+      function updatePromptCount(filteredCount, totalCount) {
+        const promptCount = document.getElementById('promptCount');
+        const countLabel = promptCount.querySelector('.count-label');
+        const countNumber = promptCount.querySelector('.count-number');
+        
+        if (filteredCount === totalCount) {
+          promptCount.classList.remove('filtered');
+          countLabel.textContent = 'All Prompts';
+          countNumber.textContent = totalCount;
+        } else {
+          promptCount.classList.add('filtered');
+          countLabel.textContent = `Found ${filteredCount} of ${totalCount}`;
+          countNumber.textContent = filteredCount;
+        }
+      }
+
+      function parseCSV(csv) {
+        const lines = csv.split('\n');
+        const headers = lines[0].split(',').map(header => header.replace(/"/g, '').trim());
+        
+        return lines.slice(1).map(line => {
+          const values = line.match(/(".*?"|[^",\s]+)(?=\s*,|\s*$)/g) || [];
+          const entry = {};
+          
+          headers.forEach((header, index) => {
+            let value = values[index] ? values[index].replace(/"/g, '').trim() : '';
+            // Remove backticks from the act/title
+            if (header === 'act') {
+              value = value.replace(/`/g, '');
+            }
+            entry[header] = value;
+          });
+          
+          return entry;
+        }).filter(entry => entry.act && entry.prompt);
+      }
+
+      function displaySearchResults(results) {
+        const searchResults = document.getElementById('searchResults');
+        const searchInput = document.getElementById('searchInput');
+        searchResults.innerHTML = '';
+        
+        if (window.innerWidth <= 768 && !searchInput.value.trim()) {
+          return;
+        }
+        
+        if (results.length === 0) {
+          const li = document.createElement('li');
+          li.className = 'search-result-item';
+          li.textContent = 'No prompts found';
+          searchResults.appendChild(li);
+          return;
+        }
+        
+        results.forEach(result => {
+          const li = document.createElement('li');
+          li.className = 'search-result-item';
+          li.textContent = result.act;
+          li.addEventListener('click', () => {
+            // Find the prompt card with matching title
+            const cards = document.querySelectorAll('.prompt-card');
+            const targetCard = Array.from(cards).find(card => {
+              const cardTitle = card.querySelector('.prompt-title').textContent
+                .replace(/\s+/g, ' ')  // Normalize whitespace
+                .replace(/[\n\r]/g, '') // Remove newlines
+                .trim();
+              
+              const searchTitle = result.act
+                .replace(/\s+/g, ' ')  // Normalize whitespace
+                .replace(/[\n\r]/g, '') // Remove newlines
+                .trim();
+              
+              return cardTitle.includes(searchTitle) || searchTitle.includes(cardTitle);
+            });
+            
+            if (targetCard) {
+              // Remove highlight from all cards
+              cards.forEach(card => {
+                card.style.transition = 'all 0.3s ease';
+                card.style.transform = 'none';
+                card.style.boxShadow = 'none';
+                card.style.borderColor = '';
+              });
+              
+              // Different scroll behavior for mobile and desktop
+              const isMobile = window.innerWidth <= 768;
+              const headerHeight = document.querySelector('.site-header').offsetHeight;
+              
+              if (isMobile) {
+                // On mobile, scroll the window
+                const cardRect = targetCard.getBoundingClientRect();
+                const scrollTop = window.pageYOffset + cardRect.top - headerHeight - 20;
+                
+                window.scrollTo({
+                  top: scrollTop,
+                  behavior: 'smooth'
+                });
+              } else {
+                // On desktop, scroll the main-content container
+                const mainContent = document.querySelector('.main-content');
+                const cardRect = targetCard.getBoundingClientRect();
+                const scrollTop = mainContent.scrollTop + cardRect.top - headerHeight - 20;
+                
+                mainContent.scrollTo({
+                  top: scrollTop,
+                  behavior: 'smooth'
+                });
+              }
+              
+              // Add highlight effect after scrolling completes
+              setTimeout(() => {
+                targetCard.style.transform = 'scale(1.02)';
+                targetCard.style.boxShadow = '0 0 0 2px var(--accent-color)';
+                targetCard.style.borderColor = 'var(--accent-color)';
+                
+                // Remove highlight after animation
+                setTimeout(() => {
+                  targetCard.style.transform = 'none';
+                  targetCard.style.boxShadow = 'none';
+                  targetCard.style.borderColor = '';
+                }, 2000);
+              }, 500); // Wait for scroll to complete
+            } else {
+              console.log('Card not found for:', result.act);
+            }
+          });
+          searchResults.appendChild(li);
+        });
+      }
+
+      // Update the modal initialization and event listeners
+      function createPromptCards() {
+        const container = document.querySelector('.container-lg.markdown-body');
+        const promptsGrid = document.createElement('div');
+        promptsGrid.className = 'prompts-grid';
+        
+        const promptElements = document.querySelectorAll('h2[id^=act] + p + blockquote');
+        
+        promptElements.forEach((blockquote) => {
+          const title = blockquote.previousElementSibling.previousElementSibling.textContent;
+          const content = blockquote.textContent;
+          
+          // Extract contributor from the paragraph element
+          const contributorParagraph = blockquote.previousElementSibling;
+          const contributorText = contributorParagraph.textContent;
+          let contributor = null;
+          
+          // Try different contributor formats
+          const formats = [
+            /Contributed by: \[([^\]]+)\]/i,
+            /Contributed by \[([^\]]+)\]/i,
+            /Contributed by: @([^\s]+)/i,
+            /Contributed by @([^\s]+)/i,
+            /Contributed by: \[@([^\]]+)\]/i,
+            /Contributed by \[@([^\]]+)\]/i
+          ];
+          
+          for (const format of formats) {
+            const match = contributorText.match(format);
+            if (match) {
+              contributor = match[1];
+              // Remove @ if it exists at the start
+              contributor = contributor.replace(/^@/, '');
+              break;
+            }
+          }
+          
+          // Set default contributor to 'f' if none found
+          if (!contributor) {
+            contributor = 'f';
+          }
+          
+          const card = document.createElement('div');
+          card.className = 'prompt-card';
+          
+          card.innerHTML = `
+            <div class="prompt-title">
+              ${title}
+              <button class="copy-button" title="Copy prompt">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                </svg>
+              </button>
+            </div>
+            <p class="prompt-content">${content}</p>
+            <a href="https://github.com/${contributor}" class="contributor-badge" target="_blank" rel="noopener">@${contributor}</a>
+          `;
+          
+          // Add click event for showing modal
+          card.addEventListener('click', (e) => {
+            if (!e.target.closest('.copy-button') && !e.target.closest('.contributor-badge')) {
+              showModal(title, content);
+            }
+          });
+          
+          const copyButton = card.querySelector('.copy-button');
+          copyButton.addEventListener('click', async (e) => {
+            e.stopPropagation();
+            try {
+              await navigator.clipboard.writeText(content);
+              copyButton.innerHTML = `
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="20 6 9 17 4 12"></polyline>
+                </svg>
+              `;
+              setTimeout(() => {
+                copyButton.innerHTML = `
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                  </svg>
+                `;
+              }, 2000);
+            } catch (err) {
+              alert('Failed to copy prompt to clipboard');
+            }
+          });
+          
+          promptsGrid.appendChild(card);
+        });
+        
+        container.innerHTML = '';
+        container.appendChild(promptsGrid);
+
+        // Initialize modal event listeners
+        initializeModalListeners();
+      }
+
+      function initializeModalListeners() {
+        const modalOverlay = document.getElementById('modalOverlay');
+        const modalClose = document.querySelector('.modal-close');
+        
+        if (!modalOverlay || !modalClose) return;
+        
+        modalClose.addEventListener('click', hideModal);
+        modalOverlay.addEventListener('click', (e) => {
+          if (e.target === modalOverlay) {
+            hideModal();
+          }
+        });
+      }
+
+      // Add global event listener for Escape key
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+          hideModal();
         }
       });
+
+      function createModal() {
+        const modalHTML = `
+          <div class="modal-overlay" id="modalOverlay">
+            <div class="modal">
+              <div class="modal-header">
+                <h2 class="modal-title"></h2>
+                <div class="modal-actions">
+                  <button class="modal-copy-button" title="Copy prompt">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                    </svg>
+                  </button>
+                  <button class="modal-close" title="Close">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                      <line x1="18" y1="6" x2="6" y2="18"></line>
+                      <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div class="modal-content"></div>
+              <div class="modal-footer">
+                <a class="modal-contributor" target="_blank" rel="noopener"></a>
+              </div>
+            </div>
+          </div>
+        `;
+        document.body.insertAdjacentHTML('beforeend', modalHTML);
+        initializeModalListeners();
+      }
+
+      function showModal(title, content) {
+        let modalOverlay = document.getElementById('modalOverlay');
+        if (!modalOverlay) {
+          createModal();
+          modalOverlay = document.getElementById('modalOverlay');
+        }
+        
+        const modalTitle = modalOverlay.querySelector('.modal-title');
+        const modalContent = modalOverlay.querySelector('.modal-content');
+        const modalCopyButton = modalOverlay.querySelector('.modal-copy-button');
+        const modalContributor = modalOverlay.querySelector('.modal-contributor');
+        
+        if (!modalTitle || !modalContent) return;
+        
+        modalTitle.textContent = title;
+        modalContent.textContent = content;
+        
+        // Find the contributor for this prompt
+        const promptCard = Array.from(document.querySelectorAll('.prompt-card')).find(card => 
+          card.querySelector('.prompt-title').textContent.trim() === title.trim()
+        );
+        
+        if (promptCard) {
+          const contributorBadge = promptCard.querySelector('.contributor-badge');
+          if (contributorBadge) {
+            modalContributor.href = contributorBadge.href;
+            modalContributor.textContent = `Contributed by ${contributorBadge.textContent}`;
+          }
+        }
+        
+        // Add copy functionality
+        modalCopyButton.addEventListener('click', async () => {
+          try {
+            await navigator.clipboard.writeText(content);
+            modalCopyButton.innerHTML = `
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="20 6 9 17 4 12"></polyline>
+              </svg>
+            `;
+            setTimeout(() => {
+              modalCopyButton.innerHTML = `
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                </svg>
+              `;
+            }, 2000);
+          } catch (err) {
+            alert('Failed to copy prompt to clipboard');
+          }
+        });
+        
+        modalOverlay.style.display = 'block';
+        document.body.style.overflow = 'hidden';
+      }
+
+      function hideModal() {
+        const modalOverlay = document.getElementById('modalOverlay');
+        if (!modalOverlay) return;
+        
+        modalOverlay.style.display = 'none';
+        document.body.style.overflow = '';
+        
+        // Optional: Remove modal from DOM when hidden
+        modalOverlay.remove();
+      }
     </script>
     <style>video { max-width: 100% !important; }</style>
     <!-- Google tag (gtag.js) -->