diff --git a/package-lock.json b/package-lock.json
index 01ebc46c5..4e51730ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@notionhq/client": "^2.2.5",
         "@supercharge/promise-pool": "^2.4.0",
         "astro": "^3.3.1",
+        "astro-icon": "^0.8.1",
         "async-retry": "^1.3.3",
         "axios": "^1.4.0",
         "exif-be-gone": "^1.3.2",
@@ -1528,6 +1529,14 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/@types/async-retry": {
       "version": "1.4.5",
       "resolved": "https://registry.npmjs.org/@types/async-retry/-/async-retry-1.4.5.tgz",
@@ -2456,6 +2465,33 @@
         "url": "https://github.com/sponsors/ota-meshi"
       }
     },
+    "node_modules/astro-icon": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/astro-icon/-/astro-icon-0.8.1.tgz",
+      "integrity": "sha512-APk+fbFnoyGdIVSPFrdrOW9YBK96/1fYuVe7ULTGW92+z00RKB8GfLJiUvzNVXUAX2rZJCFmruGVF4rrhcTYsg==",
+      "dependencies": {
+        "node-fetch": "^3.1.0",
+        "resolve-pkg": "^2.0.0",
+        "svgo": "^2.8.0"
+      }
+    },
+    "node_modules/astro-icon/node_modules/node-fetch": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+      "dependencies": {
+        "data-uri-to-buffer": "^4.0.0",
+        "fetch-blob": "^3.1.4",
+        "formdata-polyfill": "^4.0.10"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/node-fetch"
+      }
+    },
     "node_modules/astro/node_modules/@astrojs/compiler": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.2.0.tgz",
@@ -3431,6 +3467,18 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/css-what": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@@ -3456,6 +3504,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      "dependencies": {
+        "css-tree": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/cssstyle": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
@@ -3906,6 +3965,14 @@
         "lodash-es": "^4.17.21"
       }
     },
+    "node_modules/data-uri-to-buffer": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/data-urls": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz",
@@ -4895,6 +4962,28 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fetch-blob": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "dependencies": {
+        "node-domexception": "^1.0.0",
+        "web-streams-polyfill": "^3.0.3"
+      },
+      "engines": {
+        "node": "^12.20 || >= 14.13"
+      }
+    },
     "node_modules/figures": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@@ -5060,6 +5149,17 @@
         "node": ">= 6"
       }
     },
+    "node_modules/formdata-polyfill": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+      "dependencies": {
+        "fetch-blob": "^3.1.2"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
     "node_modules/fs-constants": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
@@ -6724,6 +6824,11 @@
         "@types/unist": "^2"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+    },
     "node_modules/memoize-one": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
@@ -7724,6 +7829,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/node-domexception": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "github",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "engines": {
+        "node": ">=10.5.0"
+      }
+    },
     "node_modules/node-fetch": {
       "version": "2.6.7",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
@@ -9047,6 +9170,25 @@
         "node": ">=4"
       }
     },
+    "node_modules/resolve-pkg": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg/-/resolve-pkg-2.0.0.tgz",
+      "integrity": "sha512-+1lzwXehGCXSeryaISr6WujZzowloigEofRB+dj75y9RRa/obVcYgbHJd53tdYw8pvZj8GojXaaENws8Ktw/hQ==",
+      "dependencies": {
+        "resolve-from": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve-pkg/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/restore-cursor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
@@ -9888,6 +10030,14 @@
         "node": ">= 10"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -9932,6 +10082,12 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility"
+    },
     "node_modules/stdin-discarder": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/stdin-discarder/-/stdin-discarder-0.1.0.tgz",
@@ -10188,6 +10344,97 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svgo": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
+      "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^4.1.3",
+        "css-tree": "^1.1.3",
+        "csso": "^4.2.0",
+        "picocolors": "^1.0.0",
+        "stable": "^0.1.8"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/svgo/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/svgo/node_modules/css-select": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
+      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.0.1",
+        "domhandler": "^4.3.1",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/svgo/node_modules/dom-serializer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/svgo/node_modules/domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/svgo/node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/svgo/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -11292,6 +11539,14 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/web-streams-polyfill": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
+      "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/web-worker": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.2.0.tgz",
diff --git a/package.json b/package.json
index 911f89ba3..5d4d26053 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@notionhq/client": "^2.2.5",
     "@supercharge/promise-pool": "^2.4.0",
     "astro": "^3.3.1",
+    "astro-icon": "^0.8.1",
     "async-retry": "^1.3.3",
     "axios": "^1.4.0",
     "exif-be-gone": "^1.3.2",
diff --git a/src/components/SearchButton.astro b/src/components/SearchButton.astro
new file mode 100644
index 000000000..4ce87fffb
--- /dev/null
+++ b/src/components/SearchButton.astro
@@ -0,0 +1,43 @@
+---
+import { Icon } from 'astro-icon'
+---
+
+<button class="search-button open-search-modal" type="button"><Icon name="octicon:search-24" /><span>Search</span></button>
+
+<style>
+  .search-button {
+    display: flex;
+    width: 100%;
+    background-color: transparent;
+    margin-bottom: 0.5rem;
+    border: none;
+    border-radius: var(--radius);
+    padding: 0.4rem 0.4rem;
+    font-size: 0.95rem;
+  }
+  .search-button:hover {
+    cursor: pointer;
+    background-color: #ddd;
+  }
+  .search-button svg {
+    width: 20px;
+    height: 20px;
+    margin-right: 0.2rem;
+  }
+  [astro-icon="octicon:search-24"] {
+    color: var(--fg);
+  }
+</style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    function handleKeydown(event) {
+      if (event.keyCode === 75 && event.metaKey) {
+        // Ctrl+K or Cmd+K
+        document.querySelector('.open-search-modal').click()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeydown)
+  })
+</script>
diff --git a/src/components/SearchModal.astro b/src/components/SearchModal.astro
new file mode 100644
index 000000000..20d059273
--- /dev/null
+++ b/src/components/SearchModal.astro
@@ -0,0 +1,288 @@
+---
+---
+
+<div class="search-modal-container">
+  <div class="overlay"></div>
+
+  <div class="search-modal">
+    <div class="search-prompt">
+      <input type="text" placeholder="Search..." />
+    </div>
+    <div class="search-result">
+      <ul>
+        <li class="selected">
+          <a href="#">
+            <div class="search-result-title"></div>
+            <div class="search-result-description"></div>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<style>
+  div.search-modal-container {
+    display: none;
+  }
+
+  div.overlay {
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  div.search-modal {
+    z-index: 100;
+    position: fixed;
+    top: 100px;
+    left: 20%;
+    width: 60%;
+    border-radius: 6px;
+    background-color: var(--bg);
+  }
+  @media (max-width: 640px) {
+    div.search-modal {
+      left: 0;
+      width: 100%;
+    }
+  }
+
+  div.search-prompt {
+    margin: 6px 0;
+    padding: 0 6px;
+  }
+  div.search-prompt input {
+    width: 100%;
+    border: 0px solid transparent;
+    padding: 0.4rem;
+    background-color: var(--input-bg);
+    color: var(--fg);
+    font-size: 1.2rem;
+    line-height: 1.6rem;
+  }
+
+  div.search-result {
+    border-top: 1px solid var(--hr-border);
+  }
+  div.search-result ul {
+    list-style: none;
+    margin: 0.3rem;
+    padding: 0;
+  }
+  div.search-result ul > :global(li) {
+  }
+  div.search-result ul > :global(li > a) {
+    display: block;
+    padding: 0.4rem 0.6rem;
+    border-radius: var(--radius);
+  }
+  div.search-result ul > :global(li.selected > a) {
+    background-color: rgba(241, 241, 239, 1);
+  }
+
+  div.search-result :global(div.search-result-title) {
+    padding: 0.1rem 0;
+    color: var(--fg);
+    font-size: 1.1rem;
+    line-height: 1.2rem;
+    font-weight: bold;
+  }
+  div.search-result :global(div.search-result-description) {
+    margin: 0 0 0.1rem;
+    color: var(--fg);
+    font-size: 0.9rem;
+    line-height: 1.2rem;
+  }
+</style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', async () => {
+    let feedItems = []
+    let fetched = false
+
+    async function openModal() {
+      document.querySelector('.search-modal-container').style.display = 'block'
+      document.querySelector('.search-prompt input').focus()
+
+      if (!fetched) {
+        await fetchRSS()
+      }
+      searchAndRender()
+    }
+
+    function closeModal() {
+      document.querySelector('.search-modal-container').style.display = 'none'
+    }
+
+    function handleKeydown(event) {
+      if (event.keyCode === 13) {
+        // Enter
+        select()
+      } else if (event.keyCode === 27) {
+        // ESC
+        closeModal()
+      } else if (event.keyCode === 38) {
+        // Up
+        selectUp(event)
+      } else if (event.keyCode === 40) {
+        // Down
+        selectDown(event)
+      } else {
+        searchAndRender()
+      }
+    }
+
+    function select() {
+      const a = document.querySelector('.search-result ul > li.selected a')
+      a.click()
+    }
+
+    function selectFirst() {
+      const li = document.querySelector('.search-result ul > li:first-child')
+      if (li) {
+        li.classList.add('selected')
+      }
+    }
+
+    function selectUp(event) {
+      event.preventDefault()
+
+      const ul = document.querySelector('.search-result ul')
+      const selected = ul.querySelector('.selected')
+      if (selected) {
+        selected.classList.remove('selected')
+
+        if (selected.previousElementSibling) {
+          selected.previousElementSibling.classList.add('selected')
+        } else {
+          ul.lastElementChild.classList.add('selected')
+        }
+      } else {
+        ul.lastElementChild.classList.add('selected')
+      }
+    }
+
+    function selectDown(event) {
+      event.preventDefault()
+
+      const ul = document.querySelector('.search-result ul')
+      const selected = ul.querySelector('.selected')
+      if (selected) {
+        selected.classList.remove('selected')
+
+        if (selected.nextElementSibling) {
+          selected.nextElementSibling.classList.add('selected')
+        } else {
+          ul.firstElementChild.classList.add('selected')
+        }
+      } else {
+        ul.firstElementChild.classList.add('selected')
+      }
+    }
+
+    function handleMouseover(event) {
+      Array.from(event.target.closest('ul').children).forEach((element) => {
+        element.classList.remove('selected')
+      })
+      event.target.closest('li').classList.add('selected')
+    }
+
+    function searchAndRender() {
+      const text = document.querySelector('.search-prompt input').value.trim()
+
+      if (text !== '') {
+        const results = search(text)
+        renderResults(results)
+      } else {
+        renderResults(feedItems)
+      }
+
+      selectFirst()
+    }
+
+    function search(query) {
+      const results = []
+      feedItems.forEach((item) => {
+        if (item.title.includes(query) || item?.description?.includes(query)) {
+          results.push(item)
+        }
+      })
+      return results
+    }
+
+    function renderResults(results) {
+      const ul = document.querySelector('.search-result ul')
+      ul.innerHTML = ''
+
+      results.forEach((item) => {
+        const li = document.createElement('li')
+        const a = document.createElement('a')
+        const title = document.createElement('div')
+        const description = document.createElement('div')
+
+        title.classList.add('search-result-title')
+        title.textContent = item.title
+        description.classList.add('search-result-description')
+        description.textContent = item.description
+        a.href = item.link
+
+        li.addEventListener('mouseover', handleMouseover)
+
+        a.appendChild(title)
+        a.appendChild(description)
+        li.appendChild(a)
+        ul.appendChild(li)
+      })
+    }
+
+    async function fetchRSS() {
+      const url = new URL(location.href)
+      const port = url.port ? `:${url.port}` : ''
+
+      const res = await fetch(
+        `${url.protocol}//${url.hostname}${port}/feed`
+      )
+      if (res.status !== 200) {
+        console.log(res.status)
+        throw new Error('Failed to fetch RSS feed')
+      }
+
+      const body = await res.text()
+
+      const parser = new DOMParser()
+      const xml = parser.parseFromString(body, 'text/xml')
+
+      Array.from(xml.getElementsByTagName('item')).forEach((item) => {
+        const title = item.getElementsByTagName('title')[0].textContent
+        const link = item.getElementsByTagName('link')[0].textContent
+        const description =
+          item.getElementsByTagName('description')[0]?.textContent
+        const pubDate = item.getElementsByTagName('pubDate')[0].textContent
+
+        feedItems.push({
+          title,
+          link,
+          description,
+          pubDate,
+        })
+      })
+
+      fetched = true
+    }
+
+    Array.from(document.getElementsByClassName('open-search-modal')).forEach(
+      (element) => {
+        element.addEventListener('click', openModal)
+      }
+    )
+    document
+      .getElementsByClassName('overlay')[0]
+      .addEventListener('click', closeModal)
+    document.addEventListener('keydown', handleKeydown)
+  })
+</script>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index d30905248..7ba622980 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -4,6 +4,8 @@ import { getDatabase } from '../lib/notion/client.ts'
 import { getNavLink, getStaticFilePath, filePath } from '../lib/blog-helpers.ts'
 import '../styles/syntax-coloring.css'
 import GoogleAnalytics from '../components/GoogleAnalytics.astro'
+import SearchModal from '../components/SearchModal.astro'
+import SearchButton from '../components/SearchButton.astro'
 
 export interface Props {
   title: string
@@ -137,11 +139,13 @@ if (database.Icon && database.Icon.Type === 'file') {
         </main>
 
         <aside>
+          <SearchButton />
           <slot name="aside" />
         </aside>
       </div>
     </div>
 
+    <SearchModal />
     {
       ENABLE_LIGHTBOX && (
         <script src={getStaticFilePath('/scripts/fslightbox.js')} />