diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..83214f9
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,3 @@
+API_KEY="ELASTIC_API_KEY"
+CLOUD_ID="ELASTIC_CLOUD_ID"
+INDEX="ELASTIC_INDEX"
\ No newline at end of file
diff --git a/README.md b/README.md
index c403366..a516674 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,10 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 ## Getting Started
 
-First, run the development server:
+Get keys for ElasticSearch and add them to `.env.` file.
+namely: `API_KEY`, `CLOUD_ID`, and `INDEX`.
+
+Then, run the development server:
 
 ```bash
 npm run dev
diff --git a/next.config.mjs b/next.config.mjs
index fa00e18..8b9962b 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,5 @@
 /** @type {import('next').NextConfig} */
+import exp from "constants";
 import { withContentlayer } from "next-contentlayer2";
 const nextConfig = {
   rewrites: async () => {
@@ -49,6 +50,9 @@ const nextConfig = {
       },
     ],
   },
+  experimental: {
+    missingSuspenseWithCSRBailout: false,
+  },
 };
 
 export default withContentlayer(nextConfig);
diff --git a/package-lock.json b/package-lock.json
index b5baefe..cf8788c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,9 @@
       "name": "registry",
       "version": "0.1.0",
       "dependencies": {
-        "@bitcoin-dev-project/bdp-ui": "^1.5.1",
+        "@bitcoin-dev-project/bdp-ui": "^1.5.2",
+        "@elastic/elasticsearch": "^8.16.2",
+        "@tanstack/react-query": "^5.62.0",
         "@uiw/react-markdown-preview": "^5.1.3",
         "contentlayer2": "^0.4.6",
         "date-fns": "^4.1.0",
@@ -53,9 +55,9 @@
       }
     },
     "node_modules/@bitcoin-dev-project/bdp-ui": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@bitcoin-dev-project/bdp-ui/-/bdp-ui-1.5.1.tgz",
-      "integrity": "sha512-bT3MnRJKp918pPHL8aC+ZbrH8Zwon12EWgeToSsoS7nrva+45OR9Qm/C4TDGP96nXBReuMMhAyyLGjtlLBnxeQ==",
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@bitcoin-dev-project/bdp-ui/-/bdp-ui-1.5.2.tgz",
+      "integrity": "sha512-lZy/DZlp0ih7w6immMT6iEOuoVS55P6eOtd0UJab4JusxuUX16P1zknr4eIuLiwWQ3j8h8FPoS92m/wxjGE90g==",
       "dependencies": {
         "clsx": "^2.1.1",
         "tailwind-merge": "^2.5.2"
@@ -219,6 +221,36 @@
       "resolved": "https://registry.npmjs.org/@effect-ts/system/-/system-0.57.5.tgz",
       "integrity": "sha512-/crHGujo0xnuHIYNc1VgP0HGJGFSoSqq88JFXe6FmFyXPpWt8Xu39LyLg7rchsxfXFeEdA9CrIZvLV5eswXV5g=="
     },
+    "node_modules/@elastic/elasticsearch": {
+      "version": "8.17.0",
+      "resolved": "https://registry.npmjs.org/@elastic/elasticsearch/-/elasticsearch-8.17.0.tgz",
+      "integrity": "sha512-FZ+gQUrPsMpQ2RRIXwTmCoUeFCEausMhp4eQOyxT9j1cwGXHJrhelR6jffM1SC95kQUkB7+TcTq7oQ+bG2BQ9g==",
+      "dependencies": {
+        "@elastic/transport": "^8.9.1",
+        "apache-arrow": "^18.0.0",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@elastic/transport": {
+      "version": "8.9.1",
+      "resolved": "https://registry.npmjs.org/@elastic/transport/-/transport-8.9.1.tgz",
+      "integrity": "sha512-jasKNQeOb1vNf9aEYg+8zXmetaFjApDTSCC4QTl6aTixvyiRiSLcCiB8P6Q0lY9JIII/BhqNl8WbpFnsKitntw==",
+      "dependencies": {
+        "@opentelemetry/api": "1.x",
+        "debug": "^4.3.4",
+        "hpagent": "^1.0.0",
+        "ms": "^2.1.3",
+        "secure-json-parse": "^2.4.0",
+        "tslib": "^2.4.0",
+        "undici": "^6.12.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@esbuild-plugins/node-resolve": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@esbuild-plugins/node-resolve/-/node-resolve-0.2.2.tgz",
@@ -1506,6 +1538,30 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.62.8",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.62.8.tgz",
+      "integrity": "sha512-4fV31vDsUyvNGrKIOUNPrZztoyL187bThnoQOvAXEVlZbSiuPONpfx53634MKKdvsDir5NyOGm80ShFaoHS/mw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.62.8",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.62.8.tgz",
+      "integrity": "sha512-8TUstKxF/fysHonZsWg/hnlDVgasTdHx6Q+f1/s/oPKJBJbKUWPZEHwLTMOZgrZuroLMiqYKJ9w69Abm8mWP0Q==",
+      "dependencies": {
+        "@tanstack/query-core": "5.62.8"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@types/acorn": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz",
@@ -1514,6 +1570,16 @@
         "@types/estree": "*"
       }
     },
+    "node_modules/@types/command-line-args": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/command-line-args/-/command-line-args-5.2.3.tgz",
+      "integrity": "sha512-uv0aG6R0Y8WHZLTamZwtfsDLVRnOa+n+n5rEvFWL5Na5gZ8V2Teab/duDPFzIIIhs9qizDpcavCusCLJZu62Kw=="
+    },
+    "node_modules/@types/command-line-usage": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/command-line-usage/-/command-line-usage-5.0.4.tgz",
+      "integrity": "sha512-BwR5KP3Es/CSht0xqBcUXS3qCAUVXwpRKsV2+arxeb65atasuXG9LykC9Ab10Cw3s2raH92ZqOeILaQbsB2ACg=="
+    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -1708,6 +1774,33 @@
         "node": ">= 8"
       }
     },
+    "node_modules/apache-arrow": {
+      "version": "18.1.0",
+      "resolved": "https://registry.npmjs.org/apache-arrow/-/apache-arrow-18.1.0.tgz",
+      "integrity": "sha512-v/ShMp57iBnBp4lDgV8Jx3d3Q5/Hac25FWmQ98eMahUiHPXcvwIMKJD0hBIgclm/FCG+LwPkAKtkRO1O/W0YGg==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.11",
+        "@types/command-line-args": "^5.2.3",
+        "@types/command-line-usage": "^5.0.4",
+        "@types/node": "^20.13.0",
+        "command-line-args": "^5.2.1",
+        "command-line-usage": "^7.0.1",
+        "flatbuffers": "^24.3.25",
+        "json-bignum": "^0.0.3",
+        "tslib": "^2.6.2"
+      },
+      "bin": {
+        "arrow2csv": "bin/arrow2csv.js"
+      }
+    },
+    "node_modules/apache-arrow/node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -1722,6 +1815,14 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "node_modules/array-back": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/array-back/-/array-back-3.1.0.tgz",
+      "integrity": "sha512-TkuxA4UCOvxuDK6NZYXCalszEzj+TLszyASooky+i742l9TqsOdYCMJJupxRic61hwquNtppB3hgcuq9SVSH1Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/array-timsort": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/array-timsort/-/array-timsort-1.0.3.tgz",
@@ -1857,6 +1958,49 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chalk-template": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/chalk-template/-/chalk-template-0.4.0.tgz",
+      "integrity": "sha512-/ghrgmhfY8RaSdeo43hNXxpoHAtxdbskUHjPpfqUWGttFgycUhYPGx3YZBCnUCvOa7Doivn1IZec3DEGFoMgLg==",
+      "dependencies": {
+        "chalk": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk-template?sponsor=1"
+      }
+    },
+    "node_modules/chalk/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/character-entities": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
@@ -2054,6 +2198,50 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/command-line-args": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/command-line-args/-/command-line-args-5.2.1.tgz",
+      "integrity": "sha512-H4UfQhZyakIjC74I9d34fGYDwk3XpSr17QhEd0Q3I9Xq1CETHo4Hcuo87WyWHpAF1aSLjLRf5lD9ZGX2qStUvg==",
+      "dependencies": {
+        "array-back": "^3.1.0",
+        "find-replace": "^3.0.0",
+        "lodash.camelcase": "^4.3.0",
+        "typical": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/command-line-usage": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/command-line-usage/-/command-line-usage-7.0.3.tgz",
+      "integrity": "sha512-PqMLy5+YGwhMh1wS04mVG44oqDsgyLRSKJBdOo1bnYhMKBW65gZF1dRp2OZRhiTjgUHljy99qkO7bsctLaw35Q==",
+      "dependencies": {
+        "array-back": "^6.2.2",
+        "chalk-template": "^0.4.0",
+        "table-layout": "^4.1.0",
+        "typical": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/command-line-usage/node_modules/array-back": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/array-back/-/array-back-6.2.2.tgz",
+      "integrity": "sha512-gUAZ7HPyb4SJczXAMUXMGAvI976JoK3qEx9v1FTmeYuJj0IBiaKttG1ydtGKdkfqWkIkouke7nG8ufGy77+Cvw==",
+      "engines": {
+        "node": ">=12.17"
+      }
+    },
+    "node_modules/command-line-usage/node_modules/typical": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/typical/-/typical-7.3.0.tgz",
+      "integrity": "sha512-ya4mg/30vm+DOWfBg4YK3j2WD6TWtRkCbasOJr40CseYENzCUby/7rIvXA99JGsQHeNxLbnXdyLLxKSv3tauFw==",
+      "engines": {
+        "node": ">=12.17"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -2476,6 +2664,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-replace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/find-replace/-/find-replace-3.0.0.tgz",
+      "integrity": "sha512-6Tb2myMioCAgv5kfvP5/PkZZ/ntTpVK39fHY7WkWBgvbeE+VHd/tZuZ4mrC+bxh4cfOZeYKVPaJIZtZXV7GNCQ==",
+      "dependencies": {
+        "array-back": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/flatbuffers": {
+      "version": "24.3.25",
+      "resolved": "https://registry.npmjs.org/flatbuffers/-/flatbuffers-24.3.25.tgz",
+      "integrity": "sha512-3HDgPbgiwWMI9zVB7VYBHaMrbOO7Gm0v+yD2FV/sCKj+9NDeVL7BOBYUuhWAQGKWOzBo8S9WdMvV0eixO233XQ=="
+    },
     "node_modules/foreground-child": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
@@ -2584,6 +2788,14 @@
         "node": ">=6.0"
       }
     },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/has-own-prop": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/has-own-prop/-/has-own-prop-2.0.0.tgz",
@@ -2942,6 +3154,14 @@
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
       "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="
     },
+    "node_modules/hpagent": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/hpagent/-/hpagent-1.2.0.tgz",
+      "integrity": "sha512-A91dYTeIB6NoXG+PxTQpCCDDnfHsW9kc06Lvpu1TEe9gnd6ZFeiBoRO9JvzEv6xK7EX97/dUE8g/vBMTqTS3CA==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/html-url-attributes": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
@@ -3168,6 +3388,14 @@
       "resolved": "https://registry.npmjs.org/jsbi/-/jsbi-4.3.0.tgz",
       "integrity": "sha512-SnZNcinB4RIcnEyZqFPdGPVgrg2AcnykiBy0sHVJQKHYeaLUvi3Exj+iaPpLnFVkDPZIV4U0yvgC9/R4uEAZ9g=="
     },
+    "node_modules/json-bignum": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/json-bignum/-/json-bignum-0.0.3.tgz",
+      "integrity": "sha512-2WHyXj3OfHSgNyuzDbSxI1w2jgw5gkWSWhS7Qg4bWXx1nLk3jnbwfUeS0PSba3IzpTUWdHxBieELUzXRjQB2zg==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -5319,6 +5547,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/secure-json-parse": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/secure-json-parse/-/secure-json-parse-2.7.0.tgz",
+      "integrity": "sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw=="
+    },
     "node_modules/semver": {
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
@@ -5587,6 +5820,17 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -5598,6 +5842,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/table-layout": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/table-layout/-/table-layout-4.1.1.tgz",
+      "integrity": "sha512-iK5/YhZxq5GO5z8wb0bY1317uDF3Zjpha0QFFLA8/trAoiLbQD0HUbMesEaxyzUgDxi2QlcbM8IvqOlEjgoXBA==",
+      "dependencies": {
+        "array-back": "^6.2.2",
+        "wordwrapjs": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=12.17"
+      }
+    },
+    "node_modules/table-layout/node_modules/array-back": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/array-back/-/array-back-6.2.2.tgz",
+      "integrity": "sha512-gUAZ7HPyb4SJczXAMUXMGAvI976JoK3qEx9v1FTmeYuJj0IBiaKttG1ydtGKdkfqWkIkouke7nG8ufGy77+Cvw==",
+      "engines": {
+        "node": ">=12.17"
+      }
+    },
     "node_modules/tailwind-merge": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz",
@@ -5749,9 +6013,9 @@
       "integrity": "sha512-1RUMKa8jYQdNfmnK4jyzBK3/PS/tnjcZ1CW0v1vWDeYe5RBklc/nquw03MEoB66hVBm4BnlCfmOqDVxHyT1DpA=="
     },
     "node_modules/tslib": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
-      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
     },
     "node_modules/typanion": {
       "version": "3.14.0",
@@ -5782,6 +6046,22 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/typical": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/typical/-/typical-4.0.0.tgz",
+      "integrity": "sha512-VAH4IvQ7BDFYglMd7BPRDfLgxZZX4O4TFcRDA6EN5X7erNJJq+McIEp8np9aVtxrCJ6qx4GTYVfOWNjcqwZgRw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/undici": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.21.0.tgz",
+      "integrity": "sha512-BUgJXc752Kou3oOIuU1i+yZZypyZRqNPW0vqoMPl8VaoalSfeR0D8/t4iAS3yirs79SSMTxTag+ZC86uswv+Cw==",
+      "engines": {
+        "node": ">=18.17"
+      }
+    },
     "node_modules/undici-types": {
       "version": "6.19.8",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
@@ -5971,6 +6251,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/wordwrapjs": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/wordwrapjs/-/wordwrapjs-5.1.0.tgz",
+      "integrity": "sha512-JNjcULU2e4KJwUNv6CHgI46UvDGitb6dGryHajXTDiLgg1/RiGoPSDw4kZfYnwGtEXf2ZMeIewDQgFGzkCB2Sg==",
+      "engines": {
+        "node": ">=12.17"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
diff --git a/package.json b/package.json
index cb6ea0a..b4a1c79 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@bitcoin-dev-project/bdp-ui": "^1.5.1",
+    "@bitcoin-dev-project/bdp-ui": "^1.5.2",
+    "@elastic/elasticsearch": "^8.16.2",
+    "@tanstack/react-query": "^5.62.0",
     "@uiw/react-markdown-preview": "^5.1.3",
     "contentlayer2": "^0.4.6",
     "date-fns": "^4.1.0",
diff --git a/src/app/(explore)/[...slug]/page.tsx b/src/app/(explore)/[...slug]/page.tsx
index 8e84952..8e4d6d3 100644
--- a/src/app/(explore)/[...slug]/page.tsx
+++ b/src/app/(explore)/[...slug]/page.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Suspense } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { notFound } from "next/navigation";
@@ -126,7 +126,7 @@ const page = ({ params }: { params: { slug: string[] } }) => {
                         href={resource.url ?? ""}
                         key={`${resource.title}-${index}`}
                         target='_blank'
-                        className='py-[2px] px-4 rounded-[5px] bg-custom-white-custom-100 text-base leading-[21.86px] font-medium max-md:px-3 lg:py-1 max-2xl:text-sm max-md:text-sm border border-gray-custom-1500 max-md:leading-[100%] cursor-pointer'
+                        className='py-[2px] px-4 rounded-[5px] bg-custom-white text-base leading-[21.86px] font-medium max-md:px-3 lg:py-1 max-2xl:text-sm max-md:text-sm border border-gray-custom-1500 max-md:leading-[100%] cursor-pointer'
                       >
                         {resource.title}
                       </Link>
@@ -140,7 +140,10 @@ const page = ({ params }: { params: { slug: string[] } }) => {
           {isRoot ? (
             <div className='flex flex-col gap-6 h-full pb-8 overflow-scroll'>
               {(transcripts as ContentTreeArray[]).map((item, i) => (
-                <TranscriptDetailsCard key={i} slug={slug} data={item} />
+                // without suspense, page deopts into CSR due to useSearchParams hook in component
+                <Suspense fallback={<></>}>
+                  <TranscriptDetailsCard key={i} slug={slug} data={item} />
+                </Suspense>
               ))}
             </div>
           ) : (
diff --git a/src/app/globals.css b/src/app/globals.css
index f5fbf76..dce87eb 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -33,6 +33,9 @@
   --background-end-rgb: 255, 255, 255;
   --basic-mono-font: basic-mono;
   --header-height: 86px;
+  --stroke: #bfbfbf;
+  --primary-text: #292929;
+  --accent: #F7931A;
 }
 
 /* @media (prefers-color-scheme: dark) {
@@ -91,3 +94,85 @@ body {
   width: 100%;
   z-index: -1;
 }
+
+/* styling for non-interactive body
+this is a hack to make the body non-interactive
+IMPORTANT: elements oustide the element with data-freeze-body that needs interactivity must have the class "pointer-events-auto" else it will be frozen too */
+
+[data-freeze-body="true"] {
+  pointer-events: auto;
+}
+
+[data-freeze-body="true"]::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(5px);
+  background-color: rgba(128, 128, 128, 0.15);
+  background-color: rgba(var(--background), 0.15);
+}
+
+body:has([data-freeze-body="true"]) {
+  overflow: hidden;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+}
+
+@media screen and (max-width: 768px) {
+  [data-freeze-body-mobile="true"] {
+    pointer-events: auto;
+  }
+
+  [data-freeze-body-mobile="true"]::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(5px);
+    background-color: rgba(128, 128, 128, 0.15);
+  }
+
+  body:has([data-freeze-body-mobile="true"]) {
+    overflow: hidden;
+    pointer-events: none;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  #main:has(form[data-input-focus="true"]) .navBar {
+    display: none !important;
+  }
+  
+  .popout {
+    position: absolute;
+    width: 100vw;
+    top: 0;
+    left: 0;
+    padding: 16px 4px 0px;
+    z-index: 99;
+    animation: glow-in 300ms ease-in-out forwards;
+  }
+
+  .popout .fallback-height {
+    max-height: clamp(35vh, 200px, 80vh);
+  }
+}
+
+@keyframes glow-in {
+  0% {
+    opacity: 0;
+    transform: translateY(100px) scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2ea3c8c..ca64d24 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import "@bitcoin-dev-project/bdp-ui/styles.css";
 import "./globals.css";
 import Script from "next/script";
 import Header from "@/components/layout/Header";
+import QueryProvider from "./providers";
 
 const manrope = Manrope({ subsets: ["latin"], display: "swap" });
 
@@ -23,8 +24,10 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={manrope.className}>
-        <Header />
-        {children}
+        <QueryProvider>
+          <Header />
+            {children}
+        </QueryProvider>
       </body>
       <Script
         async
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
new file mode 100644
index 0000000..6501d31
--- /dev/null
+++ b/src/app/providers.tsx
@@ -0,0 +1,52 @@
+"use client";
+import { UIContextProvider } from "@/context/UIContext";
+// Since QueryClientProvider relies on useContext under the hood, we have to put 'use client' on top
+import {
+  isServer,
+  QueryClient,
+  QueryClientProvider,
+} from "@tanstack/react-query";
+
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        // With SSR, we usually want to set some default staleTime
+        // above 0 to avoid refetching immediately on the client
+        staleTime: 60 * 1000,
+      },
+    },
+  });
+}
+
+let browserQueryClient: QueryClient | undefined = undefined;
+
+function getQueryClient() {
+  if (isServer) {
+    // Server: always make a new query client
+    return makeQueryClient();
+  } else {
+    // Browser: make a new query client if we don't already have one
+    // This is very important, so we don't re-make a new client if React
+    // suspends during the initial render. This may not be needed if we
+    // have a suspense boundary BELOW the creation of the query client
+    if (!browserQueryClient) browserQueryClient = makeQueryClient();
+    return browserQueryClient;
+  }
+}
+
+export default function QueryProvider({ children }: { children: React.ReactNode }) {
+  // NOTE: Avoid useState when initializing the query client if you don't
+  //       have a suspense boundary between this and the code that may
+  //       suspend because React will throw away the client on the initial
+  //       render if it suspends and there is no boundary
+  const queryClient = getQueryClient();
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <UIContextProvider>
+        {children}
+      </UIContextProvider>
+    </QueryClientProvider>
+  );
+}
diff --git a/src/app/search/api/route.ts b/src/app/search/api/route.ts
new file mode 100644
index 0000000..76477c8
--- /dev/null
+++ b/src/app/search/api/route.ts
@@ -0,0 +1,87 @@
+import { NextRequest, NextResponse } from "next/server";
+import { client } from "@/config/elasticSearch";
+import { SearchQuery } from "../types";
+import { aggregatorSize, FIELDS_TO_EXCLUDE, FIELDS_TO_SEARCH } from "@/config";
+
+export async function POST(request: NextRequest) {
+  try {
+    const body: SearchQuery = await request.json();
+  
+    const query = buildQuery(body);
+  
+    const response = await client.search({
+      index: process.env.INDEX,
+      ...query,
+    });
+  
+    return NextResponse.json({data: response, success: true});
+  }
+  catch (error: any) {
+    console.error({error});
+    return NextResponse.json({success: false, message: error.message ? error.message : "Error while fetching"});
+  }
+}
+
+function buildQuery({
+  queryString,
+  filterFields,
+  page,
+  size,
+  sortFields,
+}: SearchQuery) {
+
+  const baseQuery = {
+    query: {
+      bool: {
+        must: [] as any[],
+        should: [],
+        filter: [
+          {
+            "exists": {
+              "field": "transcript_source.keyword",
+            },
+          }, // Ensure we are working with transcripts that have a source
+        ] as any[],
+      },
+    },
+    sort: [] as any[],
+    aggs: {
+      authors: {
+        terms: {
+          field: "authors.keyword",
+          size: aggregatorSize,
+        },
+      },
+      transcript_source: {
+        terms: {
+          field: "transcript_source.keyword",
+          size: aggregatorSize,
+        },
+      },
+      tags: {
+        terms: {
+          field: "tags.keyword",
+          size: aggregatorSize,
+        },
+      },
+    },
+    size, // Number of search results to return
+    from: page * size, // Offset for pagination (calculated from page number)
+    _source: {
+      excludes: FIELDS_TO_EXCLUDE,
+    },
+  };
+  if (queryString.trim()) {
+    baseQuery.query.bool.must.push({ "multi_match": { query: queryString, fields: FIELDS_TO_SEARCH } });
+  }
+
+  filterFields.forEach((filter) => {
+    baseQuery.query.bool.filter.push({ "term": { [`${[filter.field]}.keyword`]: filter.value } });
+  });
+
+  sortFields.forEach((sort) => {
+    baseQuery.sort.push({ [sort.field]: sort.value });
+  });
+
+  return baseQuery;
+}
diff --git a/src/app/search/layout.tsx b/src/app/search/layout.tsx
new file mode 100644
index 0000000..4dd0f8a
--- /dev/null
+++ b/src/app/search/layout.tsx
@@ -0,0 +1,72 @@
+"use client";
+import FooterComponent from "@/components/layout/FooterComponent";
+import Wrapper from "@/components/layout/Wrapper";
+import FilterMenu, { FilterMenuMobile } from "@/components/search/FilterMenu";
+import ResultSize from "@/components/search/ResultsSize";
+import { Sort } from "@/components/search/Sort";
+import { setup } from "@/config";
+import { useUIContext } from "@/context/UIContext";
+import Facet from "@/components/search/Facet";
+import ShowFilterResultsMobile from "@/components/search/ShowFilterResultsMobile";
+import { SearchContextProvider } from "./useSearch";
+
+export default function BaseLayout({
+  children, // will be a page or nested layout
+}: {
+  children: React.ReactNode;
+}) {
+  const { sidebarToggleManager } = useUIContext();
+  return (
+    <>
+      <SearchContextProvider>
+        <section
+          id="search-page"
+          data-sb-open={sidebarToggleManager.state}
+          className="group scroll-smooth max-h-[calc(100svh-var(--header-height)-2px)] overflow-auto"
+        >
+          <Wrapper className="flex gap-[50px] pb-[100px] items-start">
+            {/* <div className='hidden -translate-x-full w-full md:w-auto md:h-auto md:relative md:block md:translate-x-0 group-data-[sb-open="true"]:block group-data-[sb-open="true"]:translate-x-0'> */}
+              <SearchSidebar />
+            {/* </div> */}
+            {sidebarToggleManager.state ? null :
+              <div className="w-full group-data-[sb-open='true']:hidden group-data-[sb-open='true']:md:block">
+                <FilterMenuMobile />
+                {children}
+              </div>
+            }
+          </Wrapper>
+          <FooterComponent />
+        </section>
+      </SearchContextProvider>
+    </>
+  );
+}
+
+const SearchSidebar = () => {
+  const { sidebarToggleManager } = useUIContext();
+  const isMobile =
+    typeof window !== "undefined" &&
+    window.matchMedia("(max-width: 600px)").matches;
+
+  const callback = () => {
+    if (isMobile) {
+      sidebarToggleManager.updater(false);
+      const element = document.getElementById("search-page");
+      if (element) {
+        element.scrollTo({top: 5, behavior: 'smooth'});
+      }
+    }
+  };
+
+  return (
+    <div className="hidden md:block group-data-[sb-open='true']:block w-full md:w-[300px] shrink-0 bg-custom-background">
+      <ResultSize />
+      <FilterMenu callback={callback} />
+      <Sort callback={callback} />
+      {setup.facetFields.map((field) => (
+        <Facet key={field} facet={field} callback={callback} />
+      ))}
+      <ShowFilterResultsMobile callback={callback} />
+    </div>
+  );
+};
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
new file mode 100644
index 0000000..330fb88
--- /dev/null
+++ b/src/app/search/page.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import React from "react";
+import Pagination from "@/components/search/Pagination";
+import SearchResultCard from "@/components/search/SearchResultCard";
+import { useSearch } from "./useSearch";
+import NotFound from "../not-found";
+import { SkeletonResults } from "@/components/search/Loader";
+
+const SearchPage = () => {
+  const { queryResult } = useSearch();
+
+  const isLoading = queryResult.isLoading;
+  const isError = queryResult.isError;
+
+  const searchResults = queryResult.data?.hits?.hits;
+
+  const totalResults = queryResult.data?.hits?.total?.value;
+
+  const noResults = totalResults === 0;
+
+  if (isLoading) {
+    return (
+      <div className="mt-4">
+        <SkeletonResults count={4} />;
+      </div>
+    );
+  }
+
+  if (isError) {
+    return <div>Error: {queryResult.error.message}</div>;
+  }
+
+  if (noResults) {
+    return <NotFound />;
+  }
+
+  return (
+    <>
+      <div className="flex flex-col gap-2 2xl:max-w-[1024px]">
+        {searchResults?.map((result) => (
+          <SearchResultCard
+            result={result._source}
+            className={queryResult.isFetching ? "animate-pulse" : ""}
+          />
+        ))}
+        <div className="flex justify-center pt-8">
+          <Pagination />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default SearchPage;
diff --git a/src/app/search/searchCall.ts b/src/app/search/searchCall.ts
new file mode 100644
index 0000000..9f6c3a3
--- /dev/null
+++ b/src/app/search/searchCall.ts
@@ -0,0 +1,42 @@
+// use server
+import { EsSearchResponse, SearchQuery } from "./types";
+
+type BuildQuery = (
+  { queryString, size, page, filterFields, sortFields }: SearchQuery,
+  url?: string
+) => Promise<EsSearchResponse>;
+
+
+export const buildQueryCall: BuildQuery = async (
+  { queryString, size, page, filterFields, sortFields },
+  url
+) => {
+  const body = {
+    queryString,
+    size,
+    page,
+    filterFields,
+    sortFields,
+  };
+
+  const jsonBody = JSON.stringify(body);
+
+  return fetch(url ?? "search/api", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: jsonBody,
+  })
+    .then(async (res) => {
+      const data = await res.json();
+      if (!data.success) {
+        const errMessage = data.message || "Error while fetching";
+        throw new Error(errMessage);
+      }
+      return data.data;
+    })
+    .catch((err) => {
+      throw new Error(err.message ?? "Error fetching results");
+    });
+};
diff --git a/src/app/search/types.ts b/src/app/search/types.ts
new file mode 100644
index 0000000..ad36e84
--- /dev/null
+++ b/src/app/search/types.ts
@@ -0,0 +1,94 @@
+const AUTHOR = "authors" as const;
+const DOMAIN = "domain" as const;
+const TAGS = "tags" as const;
+const SOURCE = "transcript_source" as const;
+
+export type FacetKeys = typeof AUTHOR | typeof DOMAIN | typeof TAGS | typeof SOURCE;
+
+export type Facet = {
+  field: FacetKeys;
+  value: string;
+};
+
+const bodyType = {
+  markdown: "markdown",
+  raw: "raw",
+  html: "html",
+  "combined-summary": "combined-summary",
+} as const;
+
+export type SortOption = "asc" | "desc";
+
+export type SearchQuery = {
+  queryString: string;
+  size: number;
+  page: number;
+  filterFields: Facet[];
+  sortFields: any[];
+};
+
+export type EsSearchResult = {
+  _id: string;
+  _index: string;
+  _source: {
+    authors: string[];
+    body: string;
+    body_type: BodyType;
+    created_at?: Date;
+    domain: string;
+    id: string;
+    indexed_at: Date;
+    title: string;
+    url: string;
+    // body_formatted?: string;
+    categories: string[];
+    media?: string;
+    tags: string[];
+    needs_review: boolean;
+    transcript_by?: string;
+    transcript_source: string;
+    summary?: string;
+    // thread_url?: string;
+    // type?: "question" | "reply" | "original_post" | "newsletter";
+    language: string;
+  }
+};
+
+export type BodyType = (typeof bodyType)[keyof typeof bodyType];
+
+type SearchResponse<TData, TAggregates> = {
+  took: number;
+  timed_out: boolean;
+  _shards: {
+    total: number;
+    successful: number;
+    skipped: number;
+    failed: number;
+  };
+  hits: {
+    total: {
+      value: number;
+      relation: string;
+    };
+    max_score: number;
+    hits: EsSearchResult[];
+  };
+  aggregations: Record<FacetKeys, {
+    buckets: {key: string, doc_count: number}[]
+  }>;
+};
+
+export type EsSearchResponse = SearchResponse<
+  unknown,
+  Record<string, any>
+>;
+
+export interface Source {
+  domain: string;
+  lastScraped: string;
+  documentCount: number;
+}
+
+export type EsSourcesResponse = Source[];
+
+export type ArbitraryCallback = () => void;
diff --git a/src/app/search/useSearch.tsx b/src/app/search/useSearch.tsx
new file mode 100644
index 0000000..f341c96
--- /dev/null
+++ b/src/app/search/useSearch.tsx
@@ -0,0 +1,137 @@
+"use client";
+
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { buildQueryCall } from "./searchCall";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { defaultParam, URLSearchParamsKeyword } from "@/config";
+import React, { createContext, useCallback, useContext, useMemo } from "react";
+import {
+  generateFilterQuery,
+  generateSortFields,
+} from "@/service/URLManager/helper";
+import { EsSearchResponse, Facet } from "./types";
+
+/**
+ * Custom React hook for performing search queries against an Elasticsearch backend via a proxy endpoint.
+ * Utilizes React Query's `useQuery` to manage fetching, caching, and updating of search results.
+ */
+
+export type QueryObject = Record<string, string>;
+
+export type PagingInfoType = {
+  resultsPerPage: number;
+  current: number;
+  totalResults: number | null;
+};
+
+export type SearchContextType = {
+  searchQuery: string;
+  queryResult: UseQueryResult<EsSearchResponse, Error>;
+  makeQuery: (queryString: string) => void;
+  handlePageChange: (page: number) => void;
+  pagingInfo: PagingInfoType;
+  filterFields: Facet[];
+  sortFields: { field: string, value: string }[];
+  setSearchParams: (queryObject: QueryObject) => void;
+  page: number;
+};
+
+export const SearchContext = React.createContext<SearchContextType | null>(
+  null
+);
+
+export const useSearch = () => {
+  const context = useContext(SearchContext);
+  if (!context) {
+    throw new Error(
+      "useSearchContext must be used within a SearchContextProvider"
+    );
+  }
+  return context;
+};
+
+export const SearchContextProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const router = useRouter();
+
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+
+  const page = parseInt(searchParams.get(URLSearchParamsKeyword.PAGE) || "1") - 1;
+  const sizeQuery = Number(searchParams.get(URLSearchParamsKeyword.SIZE) || defaultParam[URLSearchParamsKeyword.SIZE]);
+  
+  // Memoize derived state from URL search parameters
+  const searchQuery = useMemo(() => searchParams.get(URLSearchParamsKeyword.SEARCH) || "", [searchParams]);
+  const filterFields = useMemo(() => generateFilterQuery(searchParams.toString()), [searchParams]);
+  const sortFields = useMemo(() => generateSortFields(searchParams.toString()), [searchParams]);
+
+  const urlParams = new URLSearchParams(searchParams.toString());
+
+
+  const resultsPerPage = sizeQuery ?? defaultParam[URLSearchParamsKeyword.SIZE]
+
+  const setSearchParams = useCallback(
+    (queryObject: QueryObject) => {
+      Object.keys(queryObject).map((objectKey) => {
+        urlParams.set(objectKey, queryObject[objectKey]);
+      });
+      router.push(pathname + "?" + urlParams.toString());
+    },
+    [router, urlParams]
+  );
+
+  const queryResult = useQuery({
+    queryKey: ["query", searchQuery, sizeQuery, filterFields, page, sortFields],
+    queryFn: () =>
+      buildQueryCall({ queryString: searchQuery, size: sizeQuery, page, filterFields, sortFields }),
+    staleTime: Infinity,
+    refetchOnWindowFocus: false,
+    placeholderData: (prev) => prev,
+    enabled: true,
+  });
+
+  // Function to initiate a new search with the given queryString
+  const makeQuery = (queryString: string) => {
+
+    urlParams.delete(URLSearchParamsKeyword.PAGE); // new search query resets the user back to the first page of results
+    urlParams.set(URLSearchParamsKeyword.SEARCH, queryString.trim()); // new search query
+    if (pathname.includes("search")) {
+      router.push(`${pathname}?${urlParams.toString()}`);
+    } else {
+      router.push(`/search?${urlParams.toString()}`)
+    }
+  };
+
+  // Function to handle page changes in pagination
+  const handlePageChange = (page: number) => {
+    setSearchParams({ page: JSON.stringify(page) });
+  };
+
+  const pagingInfo = {
+    resultsPerPage,
+    current: page + 1, // Adjust for zero-based index
+    totalResults:
+      (queryResult.data?.hits?.total["value"] as unknown as number) ?? null,
+  };
+
+  return (
+    <SearchContext.Provider
+      value={{
+        queryResult,
+        searchQuery,
+        page,
+        setSearchParams,
+        pagingInfo,
+        handlePageChange,
+        makeQuery,
+        filterFields,
+        sortFields,
+      }}
+    >
+      {children}
+    </SearchContext.Provider>
+  );
+};
diff --git a/src/app/transcript/[...slug]/page.tsx b/src/app/transcript/[...slug]/page.tsx
index 4cdf66b..de8d6dd 100644
--- a/src/app/transcript/[...slug]/page.tsx
+++ b/src/app/transcript/[...slug]/page.tsx
@@ -3,7 +3,7 @@ import { allTranscripts } from "contentlayer/generated";
 import allSources from "@/public/sources-data.json";
 import { notFound } from "next/navigation";
 import IndividualTranscript from "@/components/individual-transcript/IndividualTranscript";
-import { createSlug } from "@/utils";
+
 import { BaseCrumbType } from "@/components/common/BaseCrumbLists";
 
 // forces 404 for paths not generated from `generateStaticParams` function.
diff --git a/src/components/common/BaseCrumbLists.tsx b/src/components/common/BaseCrumbLists.tsx
index 35b235b..ef41465 100644
--- a/src/components/common/BaseCrumbLists.tsx
+++ b/src/components/common/BaseCrumbLists.tsx
@@ -12,7 +12,7 @@ const BaseCrumbLists = ({crumbsArray}:{crumbsArray:BaseCrumbType[]}) => {
       {crumbsArray.map((link, i) => (
         <div key={link.name} className="flex gap-1 items-center">
           <Link
-            className={`capitalize hover:underline font-medium text-sm 2xl:text-base text-nowrap ${
+            className={`capitalize hover:underline font-medium text-sm 2xl:text-base ${
               link.isActive
                 ? "text-orange-custom-100"
                 : "text-black md:text-gray-custom-800"
diff --git a/src/components/common/Pill.tsx b/src/components/common/Pill.tsx
index 64d3960..74f7ef2 100644
--- a/src/components/common/Pill.tsx
+++ b/src/components/common/Pill.tsx
@@ -1,13 +1,62 @@
+import { FacetKeys } from "@/app/search/types";
 import Link from "next/link";
+import { twMerge } from "tailwind-merge";
 
-const Pill = ({ name, slug }: { name: string; slug: string }) => {
+type ButtonPillProp = {
+  kind: "button"
+  name: string;
+  value: string;
+  isSelected?: boolean;
+  type: FacetKeys;
+  toggleFilter: ({ filterType, filterValue }: { filterType: FacetKeys; filterValue: string }) => void;
+  onClick?: (e: React.MouseEvent) => void
+}
+
+type LinkPillProp = {
+  kind: "link"
+  name: string;
+  slug: string;
+  isSelected?: boolean;
+  onClick?: (e: React.MouseEvent) => void
+}
+
+type PillProps = ButtonPillProp | LinkPillProp;
+
+const Pill = (props: PillProps) => {
+  return (
+    <PillActionContainer {...props}>
+      {props.name}
+    </PillActionContainer>
+  );
+};
+
+const PillActionContainer = (props: React.PropsWithChildren<PillProps>) => {
+  const selectedPillClass = `data-[selected=true]:bg-orange-custom-100 data-[selected=true]:text-gray-custom-100`
+  const animationClass = `transition-all duration-300 `
+  const prop = {
+    "data-selected": Boolean(props.isSelected),
+    className: twMerge(selectedPillClass, animationClass, "max-content py-[4px] px-[6px] md:px-4 rounded-[5px] bg-gray-custom-700 hover:bg-gray-custom-600 hover:text-gray-custom-100 max-md:leading-[100%] cursor-pointer"),
+  };
+
+  const defaultOnClick = (e: React.MouseEvent) => {e.stopPropagation()}
+  if (props.kind === "button") {
+    const handleClick = (e: React.MouseEvent) => {
+      e.preventDefault();
+      defaultOnClick(e);
+      props.onClick 
+      ? props.onClick(e)
+      : props.toggleFilter({ filterType: props.type, filterValue: props.value });
+    }
+    return (
+      <button {...prop} onClick={handleClick}>
+        {props.children}
+      </button>
+    )
+  }
+  
   return (
-    <Link
-      key={name}
-      href={slug || ""}
-      className="max-content py-1 px-4 rounded-[5px] bg-gray-custom-700 hover:bg-gray-custom-600 hover:text-gray-custom-100 max-md:px-3 max-md:py-[2px] text-xs md:text-sm 2xl:text-base max-md:border max-md:border-gray-custom-300 max-md:leading-[100%]"
-    >
-      {name}
+    <Link href={props.slug || ""} {...prop} onClick={defaultOnClick} prefetch={false}>
+      {props.children}
     </Link>
   );
 };
diff --git a/src/components/common/TranscriptDetailsCard.tsx b/src/components/common/TranscriptDetailsCard.tsx
index 722b02e..d18d293 100644
--- a/src/components/common/TranscriptDetailsCard.tsx
+++ b/src/components/common/TranscriptDetailsCard.tsx
@@ -1,51 +1,72 @@
+"use client";
 import React from "react";
-import Link from "next/link";
-import Image from "next/image";
 import { ContentTreeArray } from "@/utils/data";
-import DateIcon from "/public/svgs/date-icon.svg";
-import TagsIcon from "/public/svgs/tags-icon.svg";
-import { ContentData, createSlug, formatDate, unsluggify } from "@/utils";
-import { MicIcon } from "@bitcoin-dev-project/bdp-ui/icons";
+import { ContentData, formatDate } from "@/utils";
+import { MicIcon, BookmarkIcon, CalendarIcon } from "@bitcoin-dev-project/bdp-ui/icons";
 import Pill from "./Pill";
+import useURLManager from "@/service/URLManager/useURLManager";
+
+const TranscriptDetailsCard = ({ data, pillCountLimit = 3, breadCrumbsComponent }: { data: ContentTreeArray; slug: string[], pillCountLimit?: number, breadCrumbsComponent?: React.ReactNode }) => {
+  const { toggleFilterFromParams, toggleFilter, getFilter } = useURLManager();
+
+  const selectedSpeakers = getFilter("authors");
+  const selectedTags = getFilter("tags");
+
+  const basePath = "/search";
 
-const TranscriptDetailsCard = ({ data }: { data: ContentTreeArray; slug: string[] }) => {
   const { speakers, tagsDetailed,  summary, date, title, body, languageURL } = data;
-  const calculateRemaining = (data: ContentData[] | string[]) => (data?.length && data.length > 3 ? data.length - 3 : 0);
+  const speakersToDisplay = pillCountLimit ? speakers?.slice(0, pillCountLimit) : speakers;
+  const tagsToDisplay = pillCountLimit ? tagsDetailed?.slice(0, pillCountLimit) : tagsDetailed;
+
+  const calculateRemaining = (data: ContentData[] | string[]) => {
+    if (!pillCountLimit) return 0;
+    // only truncate if data exceeds limit
+    if (data?.length && data.length > pillCountLimit) {
+      return data.length - pillCountLimit
+    }
+    return 0
+  }
+
+  const getSpeakerLink = (speaker: string) => {
+    const baseFilterParam = toggleFilterFromParams({ filterType: "authors", filterValue: speaker });
+    return `${basePath}?${baseFilterParam}`;
+  }
 
   return (
     <div className='border border-gray-custom-1200 rounded-lg p-4 md:p-5 2xl:p-6 flex flex-col gap-3 md:gap-4'>
-      <section className='flex justify-between'>
-        <div className='flex md:flex-row flex-col justify-between gap-2 w-full'>
-          <Link
+      <section className='flex md:flex-row flex-col justify-between gap-2 w-full'>
+        <div className='flex flex-col gap-2 w-full'>
+          {breadCrumbsComponent}
+          <a
             href={`${languageURL}`}
             className='font-bold text-base leading-[21.86px] md:text-xl 2xl:text-[22.5px] md:leading-[30px] text-orange-custom-100 md:text-black'
           >
             {title}
-          </Link>
-          {date && (
-            <div className='flex gap-2 items-center h-fit'>
-              <Image src={DateIcon} alt='date icon' className='w-[18px] md:w-[20px]' />
-              <p className='text-xs md:text-sm 2xl:text-base leading-[17.6px] font-medium text-gray-custom-800'>{formatDate(date!)}</p>
-            </div>
-          )}
+          </a>
         </div>
+        {date && (
+          <div className='md:self-start flex gap-2 items-center shrink-0'>
+            <CalendarIcon className='w-[18px] md:w-[20px]' />
+            <p className='text-xs md:text-sm 2xl:text-base leading-[17.6px] font-medium text-gray-custom-800'>{formatDate(date!)}</p>
+          </div>
+        )}
       </section>
 
       <section className='flex flex-col gap-4'>
         {speakers?.length ? (
-          <section className='flex gap-2 items-center max-md:gap-1'>
+          <section className='flex gap-2'>
             <>
               <span>
                 <MicIcon className='w-5 md:w-6' />
               </span>
               <div className='flex gap-[9px] flex-wrap'>
-                <div className='flex flex-wrap gap-[9px] max-md:gap-2'>
-                  {speakers.slice(0, 3).map((speaker, idx) => (
-                    <Pill key={speaker} name={speaker} slug={`/speakers/${createSlug(speaker)}`}  />
+                <div className='flex flex-wrap gap-[9px] text-xs md:text-sm 2xl:text-base'>
+                  {speakersToDisplay?.map((speaker, idx) => (
+                    <Pill key={speaker} kind="link" name={speaker} slug={getSpeakerLink(speaker)} isSelected={selectedSpeakers.includes(speaker)}/>
                   ))}
 
                   {calculateRemaining(speakers) === 0 ? null : (
-                    <p className='py-[2px] px-5 rounded-[5px] bg-gray-custom-700 whitespace-nowrap text-nowrap max-md:px-3 lg:py-1 max-2xl:text-sm max-md:text-sm max-md:border max-md:border-gray-custom-300 max-md:leading-[100%]'>
+                    <p className='py-[2px] px-5 rounded-[5px] bg-gray-custom-700 whitespace-nowrap text-nowrap max-md:px-3 lg:py-1 max-md:leading-[100%]'>
                       + {calculateRemaining(speakers)} more
                     </p>
                   )}
@@ -55,20 +76,20 @@ const TranscriptDetailsCard = ({ data }: { data: ContentTreeArray; slug: string[
           </section>
         ) : null}
 
-        <section className='flex gap-2 items-center max-md:gap-1'>
+        <section className='flex gap-2'>
           {tagsDetailed?.length ? (
             <>
               <span>
-                <Image src={TagsIcon} alt='date icon' className='w-5 md:w-6' />
+                <BookmarkIcon className='w-5 md:w-6' />
               </span>
               <div className='flex gap-[9px] flex-wrap'>
-                <div className='flex flex-wrap gap-[9px] max-md:gap-2'>
-                  {tagsDetailed.slice(0, 3).map((tag, idx) => (
-                    <Pill key={idx} name={tag.name} slug={`/tags/${tag.slug}`}  />
+                <div className='flex flex-wrap gap-[9px] text-xs md:text-sm 2xl:text-base'>
+                  {tagsToDisplay?.map((tag, idx) => (
+                    <Pill key={idx} kind="button" name={tag.name} value={tag.slug} type={"tags"} toggleFilter={toggleFilter} isSelected={selectedTags.includes(tag.slug)}/>
                   ))}
 
                   {calculateRemaining(tagsDetailed) === 0 ? null : (
-                    <p className='py-[2px] px-5 rounded-[5px] bg-gray-custom-700 whitespace-nowrap text-nowrap max-md:px-3 lg:py-1 max-2xl:text-sm max-md:text-sm max-md:border max-md:border-gray-custom-300 max-md:leading-[100%]'>
+                    <p className='py-[2px] px-5 rounded-[5px] bg-gray-custom-700 whitespace-nowrap text-nowrap max-md:px-3 lg:py-1 max-md:leading-[100%]'>
                       + {calculateRemaining(tagsDetailed)} more
                     </p>
                   )}
@@ -81,7 +102,7 @@ const TranscriptDetailsCard = ({ data }: { data: ContentTreeArray; slug: string[
 
       {summary || body ? (
         <section>
-          <p className='text-sm md:text 2xl:text-base text-custom-black-custom-300 2xl:leading-[25px] line-clamp-3'>{summary ? summary : body}</p>
+          <p className='text-sm md:text 2xl:text-base text-custom-black-custom-300 2xl:leading-[25px] line-clamp-3' style={{"wordBreak": "break-word"}}>{summary ? summary : body}</p>
         </section>
       ) : null}
     </div>
diff --git a/src/components/common/TranscriptMetadataCard.tsx b/src/components/common/TranscriptMetadataCard.tsx
index 920c1f9..892b989 100644
--- a/src/components/common/TranscriptMetadataCard.tsx
+++ b/src/components/common/TranscriptMetadataCard.tsx
@@ -12,6 +12,7 @@ import { ContentData, createSlug } from "@/utils";
 import AiGeneratedIcon from "../svgs/AIGeneratedIcon";
 import { format, isDate } from "date-fns";
 import Pill from "./Pill";
+import { getIsolatedFacetLink } from "@/service/URLManager/helper";
 
 interface ITranscriptMetadataComponent {
   title: string;
@@ -36,8 +37,7 @@ const TranscriptMetadataComponent = ({
 
   const convertedDate  = date ? new Date(date) : false
  
-  const formattedDate =   isDate(convertedDate) ? format(convertedDate, "d MMMM, yyyy") : "";
-
+  const formattedDate = isDate(convertedDate) ? format(convertedDate, "d MMMM, yyyy") : "";
 
   return (
     <div className="border flex text-black flex-col rounded-2xl p-4 md:p-5 2xl:p-6 gap-4 w-full border-gray-custom-1200">
@@ -109,7 +109,7 @@ const TranscriptMetadataComponent = ({
               <div className="flex flex-wrap gap-2">
                 {(topics && topics.length > 0) ?
                   topics.map((topic) => (
-                    <Pill key={topic.slug} name={topic.name} slug={`/tags/${topic.slug}`} />
+                    <Pill key={topic.slug} kind="link" name={topic.name} slug={getIsolatedFacetLink({filter_field: "tags", filter_value: topic.slug})} />
                   )):
                   <p className="pl-2.5 pt-1.5 text-xs md:text-sm lg:text-sm 2xl:text-base md:font-medium">Not available</p>
                 }
@@ -128,7 +128,7 @@ const TranscriptMetadataComponent = ({
               <div className="flex flex-wrap gap-2">
                 {speakers && speakers.length > 0 ?
                   speakers.map((speaker) => (
-                    <Pill key={speaker} name={speaker} slug={`/speakers/${createSlug(speaker)}`} />
+                    <Pill key={speaker} kind="link" name={speaker} slug={getIsolatedFacetLink({filter_field: "authors", filter_value: speaker})} />
                   )):
                   <p className="pl-2.5 pt-1.5 text-xs md:text-sm lg:text-sm 2xl:text-base md:font-medium">Not available</p>
                 }
diff --git a/src/components/explore/SingleTranscriptContent.tsx b/src/components/explore/SingleTranscriptContent.tsx
index ad6c2c8..b93374c 100644
--- a/src/components/explore/SingleTranscriptContent.tsx
+++ b/src/components/explore/SingleTranscriptContent.tsx
@@ -6,12 +6,37 @@ type SingleContent = {
   linkName: string;
 } & TopicsData;
 const SingleTranscriptContent = ({ count, slug, name, linkName }: SingleContent) => {
-  const url = linkName === "sources" ? `/${slug}` : `/${linkName}/${slug}`;
+  let url = ""
+
+  // unnecessary prefetch for links that leads to search page (waterfall requests in network with little gains)
+  let shouldPrefetch = true
+  
+  switch (linkName) {
+    case "sources":
+      url = `/${slug}`;
+      break;
+    case "tags":
+      url = `/search?filter_tags=${slug}`;
+      shouldPrefetch = false;
+      break;
+    case "categories":
+      url = `/search?filter_tags=${slug}`;
+      shouldPrefetch = false;
+      break;
+    case "speakers":
+      url = `/search?filter_authors=${name}`;
+      shouldPrefetch = false;
+      break;
+    default:
+      url = `/${linkName}/${slug}`;
+      break;
+  }
 
   return (
     <Link
       href={url}
       className='flex capitalize cursor-pointer border max-w-[100%]  border-gray-custom-1200 rounded-[5px] justify-between items-center text-sm py-5 px-4 lg:py-7 2xl:px-6 2xl:text-lg font-semibold text-gray-custom-1100'
+      prefetch={shouldPrefetch}
     >
       <span className='text-wrap break-words max-w-[80%]'>{name}</span>
       <span className='font-normal font-basis-mono'>{getDoubleDigits(count)}</span>
diff --git a/src/components/landing-page/TranscriptCard.tsx b/src/components/landing-page/TranscriptCard.tsx
index 14bd8af..b081946 100644
--- a/src/components/landing-page/TranscriptCard.tsx
+++ b/src/components/landing-page/TranscriptCard.tsx
@@ -3,6 +3,8 @@ import { MicIcon } from "@bitcoin-dev-project/bdp-ui/icons";
 import { Transcript } from "../../../.contentlayer/generated/types";
 import { createSlug } from "@/utils";
 import Link from "next/link";
+import Pill from "@/components/common/Pill";
+import useURLManager from "@/service/URLManager/useURLManager";
 
 interface TranscriptCardProps {
   data: Transcript;
@@ -13,6 +15,7 @@ interface TranscriptCardProps {
 
 const TranscriptCard = ({ data, daysOpened, transcripts, source }: TranscriptCardProps) => {
   const remainingSpeakers = data?.speakers?.length && data?.speakers.length > 2 ? data?.speakers.length - 2 : 0;
+  const {toggleFilter} = useURLManager();
 
   return (
     <Link
@@ -41,12 +44,7 @@ const TranscriptCard = ({ data, daysOpened, transcripts, source }: TranscriptCar
               <div className='flex gap-[9px] flex-wrap'>
                 <div className='flex flex-wrap gap-[9px] max-md:gap-2'>
                   {data?.speakers.slice(0, 2).map((speaker, idx) => (
-                    <p
-                      key={idx}
-                      className='py-[4.11px] px-[16.43px] rounded-[5.13px] bg-gray-custom-700 max-md:px-3 max-md:py-[2px] max-xl:text-[13px] max-md:text-sm max-md:border max-md:border-gray-custom-300 max-md:leading-[100%]'
-                    >
-                      {speaker}
-                    </p>
+                    <Pill key={speaker + idx} kind="button" name={speaker} toggleFilter={toggleFilter} type="authors" value={speaker} />
                   ))}
 
                   {remainingSpeakers === 0 ? null : (
diff --git a/src/components/layout/BaseTemplate.tsx b/src/components/layout/BaseTemplate.tsx
new file mode 100644
index 0000000..4aae129
--- /dev/null
+++ b/src/components/layout/BaseTemplate.tsx
@@ -0,0 +1,23 @@
+import ExploreNavigation from "@/components/explore/ExploreNavigation";
+import FooterComponent from "@/components/layout/FooterComponent";
+import Wrapper from "@/components/layout/Wrapper";
+
+export default function BaseTemplate({
+  children, // will be a page or nested layout
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <section className="mt-2 md:mt-6 h-[calc(100vh-var(--header-height)-26px)] overflow-y-auto">
+        <Wrapper className="flex gap-[50px] md:pb-[100px]">
+          <ExploreNavigation />
+          <div className="w-full scroll-smooth">{children}</div>
+
+          {/* Include shared UI here e.g. a header or sidebar */}
+        </Wrapper>
+        <FooterComponent />
+      </section>
+    </>
+  );
+}
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 176385a..65519e1 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,14 +1,16 @@
-"use client";
+"use client"
 
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, Suspense } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import MenuIcon from "/public/svgs/menu.svg";
 import MobileMenu from "../landing-page/MobileMenu";
 import { MenuApp, menuApps } from "@/utils/data";
-import { AppsIcon, ArrowRight, CloseIconOutlined, DayIcon, NightIcon, SearchIcon } from "@bitcoin-dev-project/bdp-ui/icons";
+import { AppsIcon, ArrowRight, CloseIconOutlined, DayIcon, NightIcon } from "@bitcoin-dev-project/bdp-ui/icons";
 import Wrapper from "./Wrapper";
 import Logo from "./Logo";
+import SearchBox from "../search/SearchBox";
+import MobileSearchBox from "../search/MobileSearchBox";
 
 export const LanguageSwitcher = () => {
   const [isOpen, setOpen] = useState(false);
@@ -163,68 +165,46 @@ export function ThemeSwitcher() {
   );
 }
 
-const SearchComponent = () => {
-  return (
-    <div className='hidden'>
-      {/* <div className='md:flex relative w-full max-w-[540px] max-md:hidden hidden'> */}
-      <input
-        placeholder='Search here'
-        className='max-w-[540px] w-full h-[66px] max-xl:h-12 text-gray-custom-300 outline-none rounded-[14px] border border-gray-custom-400 bg-gray-custom-100 px-6'
-      />
-      <button className='h-[66px] w-[72px] flex items-center justify-center bg-orange-custom-100 absolute right-[-1px] rounded-r-[14px]  max-xl:h-12 max-xl:w-12'>
-        <SearchIcon className='text-white w-[18px]' />
-      </button>
-    </div>
-  );
-};
-
 const Header = () => {
   const [open, setOpen] = useState(false);
 
-  React.useEffect(() => {
-    document.body.classList.toggle("overflow-hidden", open);
-  }, [open]);
-
   return (
     <div className='flex items-center justify-center border-b-[0.5px] border-b-gray-custom-200 max-md:border-b-0 w-full sticky top-0 z-20'>
-      <Wrapper className='h-[var(--header-height)] flex items-center w-full justify-between bg-white sticky top-0 z-20 gap-6 max-lg:gap-4 max-md:h-[86px]'>
-        <section className='flex items-center gap-16 max-xl:gap-8 max-lg:gap-4'>
+      <Wrapper className='h-[var(--header-height)] flex items-center w-full md:justify-between bg-white sticky top-0 z-20 gap-6 max-lg:gap-4 max-md:h-[86px]'>
+        <section className='flex items-center gap-4 md:gap-16 2xl:gap-24'>
           <Link href="/">
-            <Logo iconStyles='w-9 max-xl:w-[30px]' textStyles='text-black text-[24px] leading-[36.77px] max-lg:text-base' />
+            <Logo iconStyles='w-[30px] xl:w-9' textStyles='text-black text-base leading-[36.77px] lg:text-[24px]' />
           </Link>
-          <nav className='md:hidden items-center gap-16 text-black max-xl:gap-4 max-lg:text-sm max-md:hidden'>
+          <nav className='hidden md:flex items-center text-sm md:text-base gap-4 md:gap-8 2xl:gap-16 text-custom-black-custom-200'>
             <Link href='/categories'>Transcripts</Link>
-            <Link href='/about' className='hidden'>
+            <Link href='/about' className=''>
               About
             </Link>
           </nav>
         </section>
 
-        <SearchComponent />
+        {/* without suspense, all pages deopts into CSR due to useSearchParams hook in component */}
+        <Suspense fallback={<></>}>
+          <SearchBox />
+        </Suspense>
 
         {/* add active states of navigation links */}
         <section className='flex gap-16 text-black max-xl:gap-4 max-lg:gap-2 items-center max-md:hidden h-full'>
-          <div className='max-md:hidden hidden'>
+          <div className='hidden'>
             <LanguageSwitcher />
           </div>
-          <div className='max-md:hidden hidden'>
+          <div className='hidden'>
             <ThemeSwitcher />
           </div>
-          <nav className='md:flex items-center gap-16 text-black max-xl:gap-4 max-lg:text-sm max-md:hidden h-full'>
-            <Link href='/categories'>Transcripts</Link>
-            <Link href='/about' className=''>
-              About
-            </Link>
-          </nav>
           <div className='md:flex max-md:hidden'>
             <MenuSwitcher />
           </div>
         </section>
 
-        <div className='max-md:gap-4 items-center md:hidden max-md:flex'>
-          <button className='md:hidden max-md:flex hidden'>
-            <SearchIcon className='text-black w-6' />
-          </button>
+        <div className='flex ml-auto gap-4 items-center md:hidden'>
+          <Suspense fallback={<></>}>
+            <MobileSearchBox />
+          </Suspense>
           <button className='md:hidden max-md:flex h-8 w-8 items-center justify-center' onClick={() => setOpen(!open)}>
             {open ? <CloseIconOutlined className='w-5' /> : <Image src={MenuIcon} alt='menu icon' />}
           </button>
diff --git a/src/components/search/Facet.tsx b/src/components/search/Facet.tsx
new file mode 100644
index 0000000..9a6af7f
--- /dev/null
+++ b/src/components/search/Facet.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import SidebarSection from "./SidebarSection";
+import { MultiSelect } from "@bitcoin-dev-project/bdp-ui";
+import { FacelLabelMapping } from "@/config";
+import { ArbitraryCallback, FacetKeys } from "@/app/search/types";
+import { useSearch } from "@/app/search/useSearch";
+import { unsluggify } from "@/utils";
+import useURLManager from "@/service/URLManager/useURLManager";
+import { AuthorIcon, SourceIcon } from "@bitcoin-dev-project/bdp-ui/icons";
+import { getTopicTitle } from "@/utils/search";
+
+const Facet = ({ facet, callback }: { facet: FacetKeys, callback: ArbitraryCallback }) => {
+  const label = FacelLabelMapping[facet];
+
+  const iconMapping = {
+    authors: AuthorIcon,
+    transcript_source: SourceIcon,
+    tags: SourceIcon,
+    domain: SourceIcon,
+  };
+
+  const { filterFields, queryResult } = useSearch();
+  const { toggleFilter } = useURLManager();
+
+  const selectedOptions = filterFields.filter((item) => item.field === facet);
+
+  const options = queryResult.data?.aggregations?.[facet]?.buckets.map((item) => ({
+    label: facet === 'tags' ? getTopicTitle(item.key) : unsluggify(item.key),
+    count: item.doc_count,
+    value: item.key,
+    selected: Boolean(selectedOptions.find((option) => option.value === item.key)),
+  }));
+
+  const isLoading = queryResult.isLoading;
+
+  return (
+    <>
+      <SidebarSection>
+        <div className="flex items-center gap-2 text-base 2xl:text-lg font-bold pb-4 2xl:pb-6">
+          {iconMapping[facet]({className: "w-[20px]"})}
+          <span className="leading-none">{label}</span>
+        </div>
+        <MultiSelect isCollapsible>
+          <MultiSelect.Input defaultPlaceholder={`Select ${label}`} className="bg-gray-custom-100" />
+          <MultiSelect.List
+            options={options ?? []}
+            label="Select options"
+            onOptionSelect={({ action, value, event }) => {
+              toggleFilter({ filterType: facet, filterValue: value });
+              callback();
+            }}
+            styles={{
+              noResults: `${isLoading ? "hidden" : "text-gray-custom-200"}`,
+              optionWrapper: "gap-4",
+              container: "max-h-[120px] bg-gray-custom-100"
+            }}
+          />
+        </MultiSelect>
+      </SidebarSection>
+    </>
+  );
+};
+
+export default Facet;
diff --git a/src/components/search/FilterMenu.tsx b/src/components/search/FilterMenu.tsx
new file mode 100644
index 0000000..6e0e621
--- /dev/null
+++ b/src/components/search/FilterMenu.tsx
@@ -0,0 +1,124 @@
+import React from "react";
+
+import { setup } from "@/config";
+import useURLManager from "@/service/URLManager/useURLManager";
+import {
+  FilterIcon,
+  CloseIconOutlined,
+} from "@bitcoin-dev-project/bdp-ui/icons";
+import { useSearch } from "@/app/search/useSearch";
+import SidebarSection from "./SidebarSection";
+import { ArbitraryCallback, Facet } from "@/app/search/types";
+import { useUIContext } from "@/context/UIContext";
+import { getFilterDisplayName } from "@/utils/search";
+
+export const FilterMenuMobile = () => {
+  const { sidebarToggleManager } = useUIContext();
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    sidebarToggleManager.updater();
+    const element = document.getElementById("search-page");
+    if (element) {
+      element.scrollTo({top: 5, behavior: 'smooth'});
+    }
+  }
+  return (
+    <div className="flex md:hidden items-center gap-2 justify-between py-2 sticky top-[0px] bg-white">
+      <p className="text-[14px] font-bold">Filters</p>
+      <button
+        className="mr-2 active:scale-90 p-1"
+        onClick={(e) => handleClick(e)}
+      >
+        <FilterIcon
+          className="w-5 h-5"
+        />
+      </button>
+    </div>
+  );
+};
+
+const FilterMenu = ({ callback }: { callback: ArbitraryCallback }) => {
+  const { filterFields } = useSearch();
+
+  return (
+    <>
+      {/* Mobile filter menu */}
+      <div className="md:hidden w-full">
+        <FilterMenuMobile />
+      </div>
+      <SidebarSection className="hidden md:flex w-full text-custom-primary-text justify-between">
+        <div className="flex items-center gap-2">
+          <FilterIcon className="w-[20px] hidden md:flex" />
+          <p className="text-base 2xl:text-lg font-bold leading-none">
+            Filters
+          </p>
+        </div>
+      </SidebarSection>
+      <AppliedFilters filters={filterFields} callback={callback} />
+    </>
+  );
+};
+
+const AppliedFilters = ({
+  filters,
+  callback,
+}: {
+  filters: Facet[];
+  callback: ArbitraryCallback;
+}) => {
+  const { removeFilterTypes, removeFilter } = useURLManager();
+  if (!filters?.length) return null;
+  const clearAllFilters = () => {
+    removeFilterTypes({
+      filterTypes: setup.facetFields,
+      sortField: setup.sortFields[0],
+    });
+    callback();
+  };
+  return (
+    <SidebarSection className="text-custom-primary-text">
+      <div className="flex justify-between mb-4 2xl:mb-6">
+        <p className="text-sm 2xl:text-base font-bold">Applied Filters</p>
+        <div
+          className="flex gap-2 items-center group/applied-filters"
+          role="button"
+          onClick={clearAllFilters}
+        >
+          <span className="text-sm 2xl:text-base group-hover/applied-filters:underline underline-offset-4">
+            Clear all
+          </span>
+          <span className="p-[6px] 2xl:p-2 bg-custom-primary-text rounded-md">
+            <CloseIconOutlined className="text-custom-white group-hover/applied-filters:transform group-hover/applied-filters:scale-90 transition-all" />
+          </span>
+        </div>
+      </div>
+      <div className="flex flex-wrap gap-2">
+        {setup.facetFields.map((facet) => {
+          return filters
+            .filter((filter) => filter.field === facet)
+            .map((filter) => (
+              <div
+                key={filter.field}
+                className="flex gap-3 w-fit py-[10px] px-3 2xl:py-3 2xl:px-4 bg-custom-accent text-custom-white dark:text-custom-background rounded-lg transform transition-all hover:scale-95 active:scale-90"
+                role="button"
+                onClick={() => {
+                  removeFilter({
+                    filterType: filter.field,
+                    filterValue: filter.value,
+                  });
+                  callback();
+                }}
+              >
+                <span className="capitalize text-sm font-semibold 2xl:text-sm">
+                  {getFilterDisplayName({ field: filter.field, value: filter.value })}
+                </span>
+                <CloseIconOutlined />
+              </div>
+            ));
+        })}
+      </div>
+    </SidebarSection>
+  );
+};
+
+export default FilterMenu;
diff --git a/src/components/search/Loader.tsx b/src/components/search/Loader.tsx
new file mode 100644
index 0000000..72776ed
--- /dev/null
+++ b/src/components/search/Loader.tsx
@@ -0,0 +1,21 @@
+export function SkeletonLoader() {
+  return (
+    <div className="border border-gray-custom-1200 rounded-lg p-4 md:p-5 2xl:p-6 flex flex-col gap-3 md:gap-4">
+      <div className="space-y-2 animate-pulse">
+        <div className="h-4 bg-gray-300 rounded w-3/4"></div>
+        <div className="h-4 bg-gray-300 rounded w-1/2"></div>
+        <div className="h-4 bg-gray-300 rounded w-5/6"></div>
+      </div>
+    </div>
+  );
+}
+
+export function SkeletonResults({count} : {count: number}) {
+  return (
+    <div className='flex flex-col gap-6 pb-8'>
+      {Array.from({ length: count }, (_, i) => (
+        <SkeletonLoader key={i} />
+      ))}
+    </div>
+  )
+}
diff --git a/src/components/search/MobileSearchBox.tsx b/src/components/search/MobileSearchBox.tsx
new file mode 100644
index 0000000..f9c2999
--- /dev/null
+++ b/src/components/search/MobileSearchBox.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import {
+  CloseIconOutlined,
+  SearchIcon,
+} from "@bitcoin-dev-project/bdp-ui/icons";
+import { useSearchParams, useRouter } from "next/navigation";
+import { URLSearchParamsKeyword } from "@/config";
+import { twMerge } from "tailwind-merge";
+
+const MobileSearchBox = ({
+  onSubmit,
+}: {
+  onSubmit?: (searchString: string) => void;
+}) => {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const searchQuery = searchParams.get(URLSearchParamsKeyword.SEARCH) || "";
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [searchInput, setSearchInput] = useState<string>(searchQuery || "");
+
+  const [open, setOpen] = useState(false);
+
+  const searchBoxRef = useRef<HTMLDivElement | null>(null);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchInput(e.target.value);
+  };
+
+  const onClearInput = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    setSearchInput("");
+    inputRef?.current?.focus();
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!searchInput?.trim()) {
+      return;
+    }
+    router.push(`/search?${URLSearchParamsKeyword.SEARCH}=${searchInput}`);
+    setOpen(false);
+    if (onSubmit) {
+      onSubmit(searchInput);
+    }
+  };
+
+  const triggerInputClick = useCallback(() => {
+    setTimeout(() => {
+      inputRef?.current?.focus();
+    }, 100);
+  }, [inputRef]);
+
+  const triggerInputFocus = () => {
+    setOpen(true);
+    triggerInputClick();
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (!open) return;
+      if (!(event.target instanceof Node)) {
+        return;
+      }
+      if (
+        !searchBoxRef.current ||
+        searchBoxRef.current.contains(event.target as Node)
+      ) {
+        return;
+      }
+      setOpen(false);
+    };
+    document.addEventListener("click", handleClickOutside);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [open, searchBoxRef.current]);
+
+  // set search input value on mount and update it when searchQuery changes (e.g navigates to a new page)
+  useEffect(() => {
+    setSearchInput(searchQuery)
+  }, [searchQuery])
+
+  return (
+    <form
+      data-freeze-body-mobile={open}
+      className="flex w-full max-w-[40%] peer/search group/search isolate data-[freeze-body-mobile='true']:z-[99] h-auto"
+      onSubmit={(e) => handleSubmit(e)}
+    >
+      <div ref={searchBoxRef} tabIndex={0} className={open ? "popout" : ""}>
+        {/* input box container */}
+        <div
+          className={twMerge(
+            open ? "flex" : "hidden",
+            "relative w-full px-2 rounded-xl border border-gray-custom-300 bg-custom-white shadow-lg"
+          )}
+        >
+          <input
+            id="header-search-input"
+            ref={inputRef}
+            onChange={handleChange}
+            value={searchInput}
+            inputMode="search"
+            placeholder="Search here"
+            className="text-custom-primary-text font-medium text-lg placeholder:text-gray-custom-300 py-1.5 placeholder:text-[14px] h-full w-full border-none outline-none bg-transparent"
+            autoFocus={true}
+            spellCheck="false"
+          />
+          
+          <div data-is-visible={open && !!searchInput.trim()} className="hidden ml-2 data-[is-visible='true']:flex">
+            <button
+              type="button"
+              onClick={onClearInput}
+              className="cursor-pointer m-3 grid place-items-center text-red-500"
+            >
+              <CloseIconOutlined
+                className="pointer-events-none w-[12px] md:w-[14px] transition-all duration-300 active:scale-95"
+              />
+            </button>
+            <button
+              type="submit"
+              className={
+                "self-center items-center bg-gradient h-full"
+              }
+            >
+              <SearchIcon
+                className="text-orange-custom-100 w-5 h-auto"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile search button */}
+      <button
+        type="button"
+        className={"self-center items-center bg-gradient h-full"}
+      >
+        <SearchIcon
+          className="text-custom-black-custom-200 w-6 h-auto"
+          onClick={triggerInputFocus}
+        />
+      </button>
+    </form>
+  );
+};
+
+export default MobileSearchBox;
diff --git a/src/components/search/Pagination.tsx b/src/components/search/Pagination.tsx
new file mode 100644
index 0000000..3af934a
--- /dev/null
+++ b/src/components/search/Pagination.tsx
@@ -0,0 +1,175 @@
+import { useSearch } from "@/app/search/useSearch";
+import React from "react";
+
+interface PaginationProps {
+  onChange: (page: number) => void;
+  totalPages: number;
+  current: number;
+}
+
+const Pagination = () => {
+  const { handlePageChange, pagingInfo } = useSearch();
+  const { totalResults, current, resultsPerPage } = pagingInfo;
+  if (!totalResults) {
+    return null;
+  }
+  const totalPages = Math.ceil(totalResults / resultsPerPage);
+  return (
+    <PaginationView
+      onChange={handlePageChange}
+      totalPages={totalPages}
+      current={current}
+    />
+  );
+};
+
+export default Pagination;
+
+const PaginationView = ({ onChange, totalPages, current }: PaginationProps) => {
+  const isMobile =
+    typeof window !== "undefined" &&
+    window.matchMedia("(max-width: 600px)").matches;
+
+  const getPageNumbers = () => {
+    const delta = isMobile ? 1 : 2;
+    const range = [];
+    for (
+      let i = Math.max(2, current - delta);
+      i <= Math.min(totalPages - 1, current + delta);
+      i++
+    ) {
+      range.push(i);
+    }
+
+    if (current + delta < totalPages - 1) {
+      range.push("...");
+    }
+
+    range.unshift(1);
+    if (totalPages !== 1) {
+      range.push(totalPages);
+    }
+
+    return range;
+  };
+
+  return (
+    <div className="flex items-center gap-2 text-sm md:text-base">
+      {/* hide farthest left page controls on mobile */}
+      <button
+        onClick={() => onChange(1)}
+        disabled={current === 1}
+        className="hidden md:block md:p-1 disabled:hidden"
+        aria-label="First page"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <polyline points="11 17 6 12 11 7"></polyline>
+          <polyline points="18 17 13 12 18 7"></polyline>
+        </svg>
+      </button>
+      <button
+        onClick={() => onChange(Math.max(1, current - 1))}
+        disabled={current === 1}
+        className="md:p-1 disabled:opacity-50"
+        aria-label="Previous page"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <polyline points="15 18 9 12 15 6"></polyline>
+        </svg>
+      </button>
+
+      {getPageNumbers().map((pageNumber, index) => {
+        if (typeof pageNumber !== "number") {
+          return (
+            <div
+              key={index}
+              className="w-auto flex items-center justify-center"
+            >
+              {pageNumber}
+            </div>
+          );
+        }
+        return (
+          <button
+            key={index}
+            onClick={() =>
+              typeof pageNumber === "number" && onChange(pageNumber)
+            }
+            className={`h-10 w-10 flex items-center justify-center rounded-md ${
+              pageNumber === current
+                ? "bg-orange-400 text-white"
+                : "bg-white text-gray-700 hover:bg-gray-100"
+            } ${typeof pageNumber !== "number" ? "cursor-default" : ""}`}
+            disabled={typeof pageNumber !== "number"}
+          >
+            {pageNumber}
+          </button>
+        );
+      })}
+
+      <button
+        onClick={() => onChange(Math.min(totalPages, current + 1))}
+        disabled={current === totalPages}
+        className="md:p-1 disabled:opacity-50"
+        aria-label="Next page"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <polyline points="9 18 15 12 9 6"></polyline>
+        </svg>
+      </button>
+
+      {/* hide farthest right page controls on mobile */}
+      <button
+        onClick={() => onChange(totalPages)}
+        disabled={current === totalPages}
+        className="hidden md:block md:p-1 disabled:hidden"
+        aria-label="Last page"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <polyline points="13 17 18 12 13 7"></polyline>
+          <polyline points="6 17 11 12 6 7"></polyline>
+        </svg>
+      </button>
+    </div>
+  );
+};
diff --git a/src/components/search/ResultsSize.tsx b/src/components/search/ResultsSize.tsx
new file mode 100644
index 0000000..66c4e1c
--- /dev/null
+++ b/src/components/search/ResultsSize.tsx
@@ -0,0 +1,34 @@
+import { useSearch } from "@/app/search/useSearch";
+import React from "react";
+import SidebarSection from "./SidebarSection";
+
+const ResultSize = () => {
+  const {
+    resultsPerPage: currentSize,
+    totalResults,
+    current,
+  } = useSearch().pagingInfo;
+
+  const range = {
+    start: Math.max(currentSize * (current - 1), 1),
+    end: Math.min(currentSize * current, totalResults ?? 1),
+  };
+  return (
+    <>
+      <SidebarSection className=" hidden lg:block border-none">
+        <div className="flex flex-wrap items-center gap-2 pb-2 md:pb-4 text-custom-primary-text text-sm lg:text-base">
+          <span>Showing</span>
+          <span className="font-bold">
+            {range.start} - {range.end}
+          </span>
+          of <span className="font-bold">{totalResults}</span> results
+        </div>
+        <svg className="text-gray-custom-400" height="2" width="100%" xmlns="http://www.w3.org/2000/svg">
+          <line x1="0" y1="0" x2="100%" y2="0" stroke="currentColor" strokeWidth="2" strokeDasharray="6 6" />
+        </svg>
+      </SidebarSection>
+    </>
+  );
+};
+
+export default ResultSize;
diff --git a/src/components/search/SearchBox.tsx b/src/components/search/SearchBox.tsx
new file mode 100644
index 0000000..c5e3d71
--- /dev/null
+++ b/src/components/search/SearchBox.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+import {
+  CloseIconOutlined,
+  SearchIcon,
+} from "@bitcoin-dev-project/bdp-ui/icons";
+import { useSearchParams, useRouter } from "next/navigation";
+import { URLSearchParamsKeyword } from "@/config";
+
+const SearchBox = ({ onSubmit }: { onSubmit?: (searchString: string) => void }) => {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const searchQuery = searchParams.get(URLSearchParamsKeyword.SEARCH) || "";
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [searchInput, setSearchInput] = useState<string>(searchQuery || "");
+
+  const [onFocus, setFocus] = useState(false);
+  const searchBoxRef = useRef<HTMLDivElement | null>(null);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchInput(e.target.value);
+  };
+
+  const onClearInput = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    inputRef?.current?.focus();
+    setSearchInput("");
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!searchInput?.trim()) {
+      return;
+    };
+    router.push(`/search?${URLSearchParamsKeyword.SEARCH}=${searchInput}`);
+    inputRef?.current?.blur();
+    if (onSubmit) {
+      onSubmit(searchInput);
+    }
+  };
+
+  // set search input value on mount and update it when searchQuery changes (e.g navigates to a new page)
+  useEffect(() => {
+    setSearchInput(searchQuery)
+  }, [searchQuery])
+
+  return (
+    <form
+      className="hidden md:block w-full max-w-[40%] peer/search group/search isolate h-[48px]"
+      onSubmit={(e) => handleSubmit(e)}
+    >
+      <div
+        ref={searchBoxRef}
+        tabIndex={0}
+        className={`flex md:items-start w-full h-full`}
+      >
+        <div className="relative block w-full">
+          {/* input box container */}
+          <div
+            className={`rounded-l-[14px] border border-r-0 h-[48px] w-full bg-custom-background border-gray-custom-300 flex`}
+          >
+            <input
+              id="header-search-input"
+              ref={inputRef}
+              onChange={handleChange}
+              value={searchInput}
+              inputMode="search"
+              placeholder="Search here"
+              className="text-custom-primary-text font-medium placeholder:text-gray-custom-300 py-1.5 md:py-3 px-3 md:px-6 md:text-base placeholder:text-[14px] md:placeholder:text-base h-full w-full border-none outline-none bg-transparent"
+              onFocus={() => setFocus(true)}
+            />
+            
+            <button
+              type="button"
+              data-is-visible={onFocus && !!(searchInput.trim())}
+              onClick={onClearInput}
+              className="m-3 hidden data-[is-visible='true']:grid place-items-center text-gray-custom-200"
+            >
+              <CloseIconOutlined
+                className="pointer-events-none w-[12px] md:w-[14px] transition-all duration-300 active:scale-95"
+              />
+            </button>
+          </div>
+        </div>
+        <button className="flex bg-orange-custom-100 items-center bg-gradient h-[48px] px-4 min-h-full rounded-r-[14px]">
+          <SearchIcon className="text-custom-white w-[18px] h-auto" />
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default SearchBox;
diff --git a/src/components/search/SearchResultCard.tsx b/src/components/search/SearchResultCard.tsx
new file mode 100644
index 0000000..40944b1
--- /dev/null
+++ b/src/components/search/SearchResultCard.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import React from "react";
+import TranscriptDetailsCard from "@/components/common/TranscriptDetailsCard";
+import { ContentTreeArray } from "@/utils/data";
+import { EsSearchResult } from "@/app/search/types";
+import { twMerge } from "tailwind-merge";
+import allSources from "@/public/sources-data.json";
+import BaseCrumbLists from "../common/BaseCrumbLists";
+import { getSourceBreadcrumbsFromSlug } from "@/utils/sources";
+import { getTopicTitle } from "@/utils/search";
+
+type Result = EsSearchResult["_source"];
+
+export const SearchResultCard = ({ result, className }: { result: Result, className?: string }) => {
+  const { transcript_source, title, body, authors, tags, id, created_at: date, url, language, summary } = result;
+  
+  const flattenedPath = new URL(url).pathname.split("/").slice(1).join("/");
+  
+  const transcriptData: ContentTreeArray = {
+    title,
+    body: summary || body,
+    speakers: authors,
+    sourceFilePath: transcript_source,
+    flattenedPath,
+    languageURL: flattenedPath,
+    date: date as unknown as string,
+    tagsDetailed: tags?.map((tag) => ({ name: getTopicTitle(tag), slug: tag })),
+  }
+
+  const breadCrumbs = getSourceBreadcrumbsFromSlug({
+    slug: transcript_source.split("/"),
+    current: allSources,
+    language,
+  })
+
+  return (
+    <div className={twMerge("mt-4", className || "")}>
+      <TranscriptDetailsCard key={id} slug={flattenedPath.split("/")} data={transcriptData} pillCountLimit={5} breadCrumbsComponent={<BaseCrumbLists crumbsArray={breadCrumbs} />} />
+    </div>
+  );
+}; 
+
+export default SearchResultCard
\ No newline at end of file
diff --git a/src/components/search/ShowFilterResultsMobile.tsx b/src/components/search/ShowFilterResultsMobile.tsx
new file mode 100644
index 0000000..737eb9e
--- /dev/null
+++ b/src/components/search/ShowFilterResultsMobile.tsx
@@ -0,0 +1,17 @@
+import { ArbitraryCallback } from "@/app/search/types";
+import { useSearch } from "@/app/search/useSearch";
+
+const ShowFilterResultsMobile = ({callback} :{callback: ArbitraryCallback}) => {
+  const { totalResults } = useSearch().pagingInfo;
+  return (
+    <div
+      className="my-8 ml-auto md:hidden w-fit p-2 text-sm font-semibold text-custom-white bg-custom-primary-text rounded-lg"
+      role="button"
+      onClick={callback}
+    >
+      {`Show ${totalResults} results`}
+    </div>
+  );
+};
+
+export default ShowFilterResultsMobile;
\ No newline at end of file
diff --git a/src/components/search/SidebarSection.tsx b/src/components/search/SidebarSection.tsx
new file mode 100644
index 0000000..eced7e3
--- /dev/null
+++ b/src/components/search/SidebarSection.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { twMerge } from "tailwind-merge";
+
+const SidebarSection = ({
+  children,
+  className = "",
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <section
+      className={twMerge(
+        "py-4 2xl:py-6 border-b-[1px] border-b-gray-custom-400 last-of-type:border-none",
+        className
+      )}
+    >
+      {children}
+    </section>
+  );
+};
+
+export default SidebarSection;
diff --git a/src/components/search/Sort.tsx b/src/components/search/Sort.tsx
new file mode 100644
index 0000000..94e9bd0
--- /dev/null
+++ b/src/components/search/Sort.tsx
@@ -0,0 +1,50 @@
+import useURLManager from "@/service/URLManager/useURLManager";
+import { SingleSelect } from "@bitcoin-dev-project/bdp-ui";
+import SidebarSection from "./SidebarSection";
+import { SortIcon } from "@bitcoin-dev-project/bdp-ui/icons";
+import { setup } from "@/config";
+import { ArbitraryCallback } from "@/app/search/types";
+
+export const Sort = ({callback} : {callback: ArbitraryCallback}) => {
+  const options = [
+    { label: "Relevance", value: "" },
+    { label: "Newest First", value: "desc" },
+    { label: "Oldest First", value: "asc" },
+  ];
+  const { getSort, addSort, removeSort } = useURLManager();
+
+  const sortField = setup.sortFields[0]
+
+  const handleSortBy = (option: any) => {
+    if (option.value === "") {
+      removeSort(sortField);
+      callback();
+      return;
+    }
+    addSort(sortField, option.value);
+  };
+
+  return (
+    <SidebarSection className="w-full relative z-[1]">
+      <div className="flex items-center gap-2 text-base 2xl:text-lg font-bold pb-4 2xl:pb-6">
+        <SortIcon className="w-[20px]" />
+        <span className="leading-none">Sort By</span>
+      </div>
+      <SingleSelect>
+        <SingleSelect.Trigger
+          defaultPlaceholder={
+            options.find((option) => option.value === getSort(sortField))
+              ?.label ?? "Relevance"
+          }
+          className="bg-gray-custom-100 font-bold"
+        />
+        <SingleSelect.List
+          options={options}
+          label="Sort by"
+          onOptionSelect={handleSortBy}
+          value={getSort(sortField) || ""}
+        />
+      </SingleSelect>
+    </SidebarSection>
+  );
+};
diff --git a/src/config/elasticSearch.ts b/src/config/elasticSearch.ts
new file mode 100644
index 0000000..aecb23b
--- /dev/null
+++ b/src/config/elasticSearch.ts
@@ -0,0 +1,8 @@
+import { Client } from "@elastic/elasticsearch";
+
+export const client = new Client({
+  cloud: {
+    id: process.env.CLOUD_ID || "", // cloud id found under your cloud deployment overview page
+  },
+  auth: { apiKey: process.env.API_KEY || "" },
+});
diff --git a/src/config/index.ts b/src/config/index.ts
index 6597631..02b82b3 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -1 +1,46 @@
-export const LanguageCodes = ["zh", "es", "pt"]
\ No newline at end of file
+import { FacetKeys } from "@/app/search/types";
+
+export const LanguageCodes = ["zh", "es", "pt"];
+
+export type LanguageCode = typeof LanguageCodes[number];
+
+export const URLSearchParamsKeyword = {
+  SEARCH: "search",
+  PAGE: "page",
+  SIZE: "size",
+  FILTER: "filter",
+  SORT: "sort",
+} as const;
+
+export const defaultParam = {
+  size: 10,
+};
+
+export const TruncateLengthInChar = 300;
+export const TruncateLinkInChar = 50;
+
+export const aggregatorSize = 100;
+
+export const setup = {
+  facetFields: ["authors", "transcript_source", "tags"] as FacetKeys[],
+  sortFields: ["created_at"]
+}
+
+export const FacelLabelMapping: Record<FacetKeys, string> = {
+  "authors": "Speakers",
+  "tags": "Topics",
+  "transcript_source": "Sources",
+  "domain": "Domains"
+};
+
+export const FIELDS_TO_SEARCH = [
+  "title",
+  "body",
+  "authors",
+  "tags",
+  "transcript_source",
+];
+
+export const FIELDS_TO_EXCLUDE = [
+ "summary_vector_embeddings", "body_formatted"
+]
\ No newline at end of file
diff --git a/src/context/UIContext.tsx b/src/context/UIContext.tsx
new file mode 100644
index 0000000..252ffa3
--- /dev/null
+++ b/src/context/UIContext.tsx
@@ -0,0 +1,50 @@
+import React, { createContext, useContext, useState } from "react";
+
+export type UIContextType = {
+  isOpen: boolean;
+  sidebarToggleManager: {
+    state: boolean;
+    updater: (x?: boolean) => void;
+  };
+};
+
+export const UIContext = createContext<UIContextType | null>(null);
+
+export const useUIContext = () => {
+  const context = useContext(UIContext);
+  if (!context) {
+    throw new Error("useUIContext must be used within a UIContextProvider");
+  }
+  return context;
+};
+
+export const UIContextProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const [isSBToggleOpen, setIsSBToggleOpen] = useState(false);
+
+  const toggleSB = (SBControlBool?: boolean) => {
+    if (SBControlBool !== undefined) {
+      setIsSBToggleOpen(SBControlBool);
+      return;
+    }
+    setIsSBToggleOpen((prev) => !prev);
+  };
+
+  const sidebarToggleManager = {
+    state: isSBToggleOpen,
+    updater: toggleSB,
+  };
+
+  return (
+    <UIContext.Provider
+      value={{ isOpen, sidebarToggleManager }}
+    >
+      {children}
+    </UIContext.Provider>
+  );
+};
diff --git a/src/service/URLManager/helper.ts b/src/service/URLManager/helper.ts
new file mode 100644
index 0000000..53f5508
--- /dev/null
+++ b/src/service/URLManager/helper.ts
@@ -0,0 +1,49 @@
+import { URLSearchParamsKeyword } from "@/config";
+import { setup } from "@/config";
+import { Facet, FacetKeys } from "@/app/search/types";
+
+export const appendFilterName = (filterType: string) => {
+  return `${URLSearchParamsKeyword.FILTER}_${filterType}`;
+};
+
+export const appendSortName = (sortField: string) => {
+  return `${URLSearchParamsKeyword.SORT}_${sortField}`;
+};
+
+export const getIsolatedFacetLink = ({filter_field, filter_value}: {filter_field: FacetKeys, filter_value: string}) => {
+  const filterLink = `/search?${appendFilterName(filter_field)}=${filter_value}`;
+  return filterLink;
+}
+
+export function generateFilterQuery(searchParams: string) {
+  const filterList: Facet[] = [];
+  const urlParams = new URLSearchParams(searchParams);
+  setup.facetFields.map((field) => {
+    const name = appendFilterName(field);
+    urlParams.getAll(name).forEach((value) => {
+      filterList.push({ field: field as FacetKeys, value });
+    });
+  });
+  return filterList;
+}
+
+export function generateSortFields(searchParams: string) {
+  const sortList: {field: string, value: string}[] = [];
+  const urlParams = new URLSearchParams(searchParams);
+  setup.sortFields.map((field) => {
+    const name = appendSortName(field);
+    urlParams.getAll(name).forEach((value) => {
+      sortList.push({ field, value});
+    });
+  });
+  return sortList;
+}
+
+function getSortPairFromValue(sort: string) {
+  const [field, value] = sort.split(":");
+  if (!field || !value) return null;
+  return {
+    field,
+    value,
+  };
+}
diff --git a/src/service/URLManager/useURLManager.ts b/src/service/URLManager/useURLManager.ts
new file mode 100644
index 0000000..d670ece
--- /dev/null
+++ b/src/service/URLManager/useURLManager.ts
@@ -0,0 +1,204 @@
+import { FacetKeys } from "@/app/search/types";
+import { appendFilterName, appendSortName } from "./helper";
+import { URLSearchParamsKeyword } from "@/config";
+import { useRouter, useSearchParams } from "next/navigation";
+
+type FilterProp = {
+  filterType: FacetKeys;
+  filterValue: string;
+  multiSelect?: boolean;
+};
+
+const useURLManager = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const basePath = "/search";
+
+  const urlParams = new URLSearchParams(searchParams.toString());
+
+  const getSearchTerm = () => {
+    return urlParams.get(URLSearchParamsKeyword["SEARCH"]);
+  };
+
+  const getFilter = (filterType: FacetKeys) => {
+    return urlParams.getAll(appendFilterName(filterType));
+  };
+
+  const getSort = (sortField: string) => {
+    return urlParams.get(appendSortName(sortField));
+  };
+
+  const removePageQueryParams = (urlParams: URLSearchParams) => {
+    urlParams.delete(URLSearchParamsKeyword["PAGE"]);
+  };
+
+  const addSortParams = (sortField: string, value: string) => {
+    urlParams.set(appendSortName(sortField), value);
+    return urlParams.toString();
+  };
+  const removeSortParams = (sortField: string) => {
+    urlParams.delete(appendSortName(sortField));
+    return urlParams.toString();
+  };
+
+  const addFilterFromParams = ({
+    filterType,
+    filterValue,
+    multiSelect = true,
+  }: FilterProp) => {
+    const urlParams = new URLSearchParams(searchParams.toString());
+    const currentFilterForType = urlParams.getAll(appendFilterName(filterType));
+    if (currentFilterForType.includes(filterValue)) return null;
+    removePageQueryParams(urlParams);
+    if (multiSelect) {
+      urlParams.append(appendFilterName(filterType), filterValue);
+    } else {
+      urlParams.set(appendFilterName(filterType), filterValue);
+    }
+    return urlParams.toString();
+  };
+
+  const removeFilterFromParams = ({
+    filterType,
+    filterValue,
+    multiSelect = true,
+  }: FilterProp) => {
+    const urlParams = new URLSearchParams(searchParams.toString());
+    const appendedFilterName = appendFilterName(filterType);
+    const currentFilterForType = urlParams.getAll(appendedFilterName);
+    if (!currentFilterForType.length) return null;
+
+    const filterValueIndex = currentFilterForType.findIndex(
+      (value) => value === filterValue
+    );
+    if (filterValueIndex !== -1) {
+      removePageQueryParams(urlParams);
+      currentFilterForType.splice(filterValueIndex, 1);
+      urlParams.delete(appendedFilterName);
+      if (multiSelect) {
+        for (let i = 0; i < currentFilterForType.length; i++) {
+          urlParams.append(appendedFilterName, currentFilterForType[i]);
+        }
+      }
+      return urlParams.toString();
+    }
+  };
+
+  const toggleFilterFromParams = ({ filterType, filterValue, multiSelect = true }: FilterProp) => {
+    const urlParams = new URLSearchParams(searchParams.toString());
+    const currentFilterForType = urlParams.getAll(appendFilterName(filterType));
+    if (currentFilterForType.includes(filterValue)) {
+      return removeFilterFromParams({ filterType, filterValue, multiSelect });
+    } else {
+      return addFilterFromParams({ filterType, filterValue, multiSelect });
+    }
+  }
+
+  const addSort = (sortField: string, value: string) => {
+    const params = addSortParams(sortField, value);
+    router.push(basePath + `${params ? "?" + params : params}`);
+  };
+
+  const removeSort = (sortField: string) => {
+    const params = removeSortParams(sortField);
+    router.push(basePath + `${params ? "?" + params : params}`);
+  };
+
+  const addFilter = ({
+    filterType,
+    filterValue,
+    multiSelect = true,
+  }: FilterProp) => {
+    const params = addFilterFromParams({
+      filterType,
+      filterValue,
+      multiSelect,
+    });
+    if (params !== null) {
+      router.push(basePath + `${params ? "?" + params : params}`);
+    }
+  };
+
+  const removeFilter = ({
+    filterType,
+    filterValue,
+    multiSelect = true,
+  }: FilterProp) => {
+    const params = removeFilterFromParams({
+      filterType,
+      filterValue,
+      multiSelect,
+    });
+    if (params !== null) {
+      router.push(basePath + `${params ? "?" + params : params}`);
+    }
+  };
+
+  const toggleFilter = ({
+    filterType,
+    filterValue,
+    multiSelect = true,
+  }: FilterProp) => {
+    const currentFilterForType = urlParams.getAll(appendFilterName(filterType));
+    if (currentFilterForType.includes(filterValue)) {
+      removeFilter({ filterType, filterValue, multiSelect });
+    } else {
+      addFilter({ filterType, filterValue, multiSelect });
+    }
+  };
+
+  const clearAllFilters = () => {
+    const urlParams = new URLSearchParams(searchParams.toString());
+    const paramKeys = Array.from(urlParams.keys());
+    for (const key of paramKeys) {
+      if (key.startsWith("filter")) {
+        urlParams.delete(key);
+      }
+    }
+  };
+
+  const removeFilterTypes = ({
+    filterTypes,
+    sortField,
+  }: {
+    filterTypes: FacetKeys[];
+    sortField: string;
+  }) => {
+    const urlParams = new URLSearchParams(searchParams.toString());
+    filterTypes.forEach((filterType) => {
+      const appendedFilterName = appendFilterName(filterType);
+      const currentFilterForType = urlParams.getAll(appendedFilterName);
+      if (!currentFilterForType.length) return;
+      urlParams.delete(appendedFilterName);
+    });
+
+    removeSortParams(sortField);
+    removePageQueryParams(urlParams);
+    const params = urlParams.toString();
+    router.push(basePath + `${params ? "?" + params : params}`);
+  };
+
+  const setResultsSize = (size: number) => {
+    urlParams.set(URLSearchParamsKeyword.SIZE, size.toString());
+    router.push(basePath + "?" + urlParams.toString());
+  };
+
+  return {
+    addFilter,
+    addFilterFromParams,
+    toggleFilterFromParams,
+    removeFilter,
+    getFilter,
+    clearAllFilters,
+    removeFilterTypes,
+    getSearchTerm,
+    getSort,
+    addSort,
+    removeSort,
+    setResultsSize,
+    toggleFilter,
+  };
+};
+
+export default useURLManager;
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..3c965ac
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,17 @@
+import type { LanguageCode } from "@/config";
+
+// e.g { "data": { "another_nesting": {...} }, "metadata": {...} } } OR { "data": ["string", ...], "metadata": {...} } }
+export type SourceData = {
+  data: NestedSource<string> | string[];
+  metadata: {
+    title: string;
+  };
+}
+
+// e.g { "en": { "data": {...}, "metadata": {...} } } OR { "2021": { "data": {...}, "metadata": {...} } }
+export type NestedSource<T extends string> = Record<T, SourceData>;
+
+// e.g { "adopting-bitcoin": { "en": {...} } }
+export type SourceTree = Record<string, NestedSource<LanguageCode>>
+
+export type TraversableSource = SourceTree | NestedSource<string> | string[];
diff --git a/src/utils/index.ts b/src/utils/index.ts
index f9d10b0..9e80ee2 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -55,7 +55,12 @@ export const extractTranscripts = (allTranscripts: Transcript[]) => {
 
   const languageRegex = new RegExp(`\\.(${LanguageCodes.join("|")})(\\.md)?$`);
 
-  const transcripts = shuffle(allTranscripts).filter((transcript) => {
+  // Optimization for landingpage — obscene amount of data passed to the client (reduced from 6.6s to 795ms)
+  const lightWeightTranscripts = allTranscripts.map(({ body, summary, ...fieldsToUse }) => {
+    return {...fieldsToUse}
+  })
+
+  const transcripts = shuffle(lightWeightTranscripts as Transcript[]).filter((transcript) => {
     return transcript.date && !languageRegex.test(transcript.url);
   });
 
diff --git a/src/utils/search.ts b/src/utils/search.ts
new file mode 100644
index 0000000..f29c4d4
--- /dev/null
+++ b/src/utils/search.ts
@@ -0,0 +1,17 @@
+import { unsluggify } from "@/utils";
+import topics from "@/public/topics.json"
+import { Facet } from "@/app/search/types";
+
+export const getTopicTitle = (slug: string) => {
+  const title = topics.find(topic => topic.slug === slug || topic.aliases?.includes(slug))?.title
+  if (title) return title;
+  const saneCapitalization = unsluggify(slug).split(" ").map(word => word[0].toUpperCase() + word.slice(1)).join(" ")
+  return saneCapitalization;
+}
+
+export const getFilterDisplayName = ({ field, value }: Facet) => {
+  if (field === "tags") {
+    return getTopicTitle(value);
+  }
+  return value;
+}
diff --git a/src/utils/sources.ts b/src/utils/sources.ts
new file mode 100644
index 0000000..6ac8955
--- /dev/null
+++ b/src/utils/sources.ts
@@ -0,0 +1,66 @@
+import { BaseCrumbType } from "@/components/common/BaseCrumbLists";
+import { LanguageCode } from "@/config";
+import { NestedSource, SourceData, SourceTree } from "@/types";
+
+type GetSourceBreadcrumbsFromSlugProps = {
+  slug: string[];
+  list?: BaseCrumbType[];
+  current: SourceTree | NestedSource<string> | string[];
+  language: string;
+  idx?: number;
+  link?: string;
+  activeRoute?: string;
+};
+
+// derives the breadcrumbs data for a given source slug
+export function getSourceBreadcrumbsFromSlug({
+  slug,
+  list = [],
+  current,
+  language = "en",
+  idx = 0,
+  link = "",
+}: GetSourceBreadcrumbsFromSlugProps): BaseCrumbType[] {
+  if (slug.length === 0) {
+    return list;
+  }
+  if (Array.isArray(current)) {
+    return list;
+  }
+  const path = slug.shift();
+  if (path === undefined) {
+    return list;
+  }
+
+  let pathContent = {} as SourceData;
+
+  if (idx === 0) {
+    pathContent = (current as SourceTree)[path][language as LanguageCode];
+  } else {
+    pathContent = (current as NestedSource<string>)[path];
+  }
+
+  const title = pathContent.metadata.title;
+  const data = pathContent.data;
+
+  if (!title || !data) {
+    return list;
+  }
+
+  const pathWithLanguage = language !== "en" ? `${language}/${path}` : path;
+
+  list.push({
+    name: title,
+    link: `${link || pathWithLanguage}`,
+    isActive: false,
+  });
+
+  return getSourceBreadcrumbsFromSlug({
+    slug,
+    list,
+    current: data,
+    language,
+    idx: idx + 1,
+    link: `${pathWithLanguage}/${slug[0]}`,
+  });
+}
diff --git a/src/utils/user.ts b/src/utils/user.ts
new file mode 100644
index 0000000..59c5f28
--- /dev/null
+++ b/src/utils/user.ts
@@ -0,0 +1,9 @@
+"use client";
+
+export const isMac = () => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  const OS = window.navigator.userAgent;
+  return OS.search("Mac") !== -1;
+};
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index c6770ad..7a5d754 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -68,8 +68,10 @@ const config: Config = {
         green: {
           "custom-100": "#ECF9F1",
         },
-        "custom-white": {
-          "custom-100": "#F2F2F2",
+        custom: {
+          "primary-text": "#292929",
+          "accent": "var(--accent)",
+          "white": "#F2F2F2",
         },
       },
       fontFamily: {
@@ -77,6 +79,15 @@ const config: Config = {
         inter: ["var(--inter-font)"],
         "basis-mono": ["Basis Grotesque Mono Pro"],
       },
+      keyframes: {
+        pulse: {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '.5' },
+        },
+      },
+      animation: {
+        pulse: 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      },
     },
   },
   plugins: [],