diff --git a/deno.json b/deno.json
index 427b648..85db2d7 100644
--- a/deno.json
+++ b/deno.json
@@ -25,6 +25,7 @@
     "autoprefixer": "npm:autoprefixer@^10.4.20",
     "bits-ui": "npm:bits-ui@^0.21.16",
     "clsx": "npm:clsx@^2.1.1",
+    "detect-url-change": "npm:detect-url-change@^1.0.2",
     "lucide-svelte": "npm:lucide-svelte@^0.462.0",
     "mode-watcher": "npm:mode-watcher@^0.5.0",
     "postcss": "npm:postcss@^8.4.49",
diff --git a/deno.lock b/deno.lock
index a94e8cf..31e12f4 100644
--- a/deno.lock
+++ b/deno.lock
@@ -23,6 +23,7 @@
     "npm:autoprefixer@^10.4.20": "10.4.20_postcss@8.4.49",
     "npm:bits-ui@~0.21.16": "0.21.16_svelte@5.2.10__acorn@8.14.0",
     "npm:clsx@^2.1.1": "2.1.1",
+    "npm:detect-url-change@^1.0.2": "1.0.2",
     "npm:hono-rate-limiter@*": "0.2.3_hono@4.6.5",
     "npm:hono@*": "4.6.5",
     "npm:js-yaml@^4.0.9": "4.1.0",
@@ -686,6 +687,12 @@
     "dequal@2.0.3": {
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="
     },
+    "detect-url-change@1.0.2": {
+      "integrity": "sha512-kw8H5SvDszrszffxBpfJ0zYQWbqNMxBuxUxz4tVwZVQMhhZmVShiXrPgEZx30H+J+iXQmmm1U39Ti2nUmIlG5g==",
+      "dependencies": [
+        "events"
+      ]
+    },
     "didyoumean@1.2.2": {
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
@@ -780,6 +787,9 @@
         "@types/estree"
       ]
     },
+    "events@3.3.0": {
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
+    },
     "execa@7.2.0": {
       "integrity": "sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==",
       "dependencies": [
@@ -1689,6 +1699,7 @@
       "npm:autoprefixer@^10.4.20",
       "npm:bits-ui@~0.21.16",
       "npm:clsx@^2.1.1",
+      "npm:detect-url-change@^1.0.2",
       "npm:lucide-svelte@0.462",
       "npm:mode-watcher@0.5",
       "npm:postcss@^8.4.49",
diff --git a/routes/repository.ts b/routes/repository.ts
index 5ed91fb..8a30958 100644
--- a/routes/repository.ts
+++ b/routes/repository.ts
@@ -88,4 +88,49 @@ app.get('/repositories', async (c) => {
   }
 });
 
+app.get('/repositories/search', async (c) => {
+  console.log('Searching repositories');
+
+  try {
+    const text = c.req.query('text') || '';
+
+    if (!text) {
+      return c.json({ error: 'Search text is required' }, 400);
+    }
+
+    console.log('Received query parameters:', {
+      text: c.req.query('text'),
+      page: c.req.query('page'),
+      limit: c.req.query('limit'),
+    });
+
+    const repositories = await sql`
+      SELECT *
+      FROM repository
+      WHERE name ILIKE '%' || ${text} || '%'
+        OR author ILIKE '%' || ${text} || '%'
+        LIMIT ${LIMIT_PER_PAGE};
+    `;
+
+    return c.json({
+      data: repositories,
+      pagination: {
+        currentPage: 1,
+        totalPages: 1,
+        totalItems: repositories.length,
+        itemsPerPage: LIMIT_PER_PAGE,
+        hasNextPage: false,
+        hasPrevPage: false,
+      },
+      sort: {
+        sortBy: 'stars',
+        order: 'desc',
+      },
+    });
+  } catch (error) {
+    console.error('Error searching Neon database:', error);
+    return c.json({ error: 'Failed to search repositories' }, 500);
+  }
+});
+
 export default app;
diff --git a/src/App.svelte b/src/App.svelte
index ecb85ce..4a3c521 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,40 +1,15 @@
 <script>
-  import { Router, Link, Route } from 'svelte-routing';
+  import { Router, Route } from 'svelte-routing';
 
   import { Navigation } from '$lib/components/navigation';
   import HomePage from '$lib/pages/home/page.svelte';
+  import DocsPage from '$lib/pages/docs/page.svelte';
   import OtherPage from '$lib/pages/other/page.svelte';
   import { ModeWatcher } from 'mode-watcher';
-  import { ScrollArea } from '$lib/components/scroll-area';
-
-  import logo from '$lib/assets/logo.svg';
 
   import './style.css';
 
   export let url = '';
-
-  const tags = [
-    {
-      label: 'All projects',
-      to: '/',
-    },
-    {
-      label: 'Most forked',
-      to: '/stats/forks',
-    },
-    {
-      label: 'Most popular license',
-      to: '/stats/license',
-    },
-    {
-      label: 'Top 20 contributors',
-      to: '/stats/contributors',
-    },
-    {
-      label: 'Top 10 languages',
-      to: '/stats/languages',
-    },
-  ];
 </script>
 
 <ModeWatcher />
@@ -43,43 +18,14 @@
   <main class="w-full">
     <Navigation />
 
-    <div
-      class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10"
-    >
-      <aside
-        class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block"
-      >
-        <ScrollArea class="fixed left-0 h-screen py-5 px-8">
-          <div class="">
-            <div class="w-full flex justify-center mb-5">
-              <img src={logo} alt="logo" class="w-28 h-28" />
-            </div>
-
-            <ul>
-              {#each tags as tag}
-                <li class="px-3 py-2">
-                  <Link
-                    to={tag.to}
-                    class="transition-colors text-foreground/50 hover:underline cursor-pointer"
-                    let:active
-                  >
-                    <span class={active ? 'text-foreground/90' : ''}>
-                      {tag.label}
-                    </span>
-                  </Link>
-                </li>
-              {/each}
-            </ul>
-          </div>
-        </ScrollArea>
-      </aside>
-
-      <div class=" py-6 lg:gap-10 lg:py-8">
-        <Route path="/stats/:id" component={OtherPage} />
-        <Route path="/">
-          <HomePage />
-        </Route>
-      </div>
+    <div class="">
+      <Route path="/stats/:id" component={OtherPage} />
+      <Route path="/">
+        <HomePage />
+      </Route>
+      <Route path="/docs">
+        <DocsPage />
+      </Route>
     </div>
   </main>
 </Router>
diff --git a/src/lib/components/navigation/navigation.svelte b/src/lib/components/navigation/navigation.svelte
index bac7c26..02facdf 100644
--- a/src/lib/components/navigation/navigation.svelte
+++ b/src/lib/components/navigation/navigation.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { Link } from 'svelte-routing';
   import Sun from 'lucide-svelte/icons/sun';
   import Moon from 'lucide-svelte/icons/moon';
   import ArrowUpRight from 'lucide-svelte/icons/arrow-up-right';
@@ -59,10 +60,18 @@
   </p>
   <div class="container flex h-14 max-w-screen-2xl items-center">
     <div class="mr-4 hidden md:flex">
-      <a href="/" class="mr-6 flex items-center space-x-2">
+      <a href="/" class="mr-6 flex items-center space-x-4">
         <img src={logo192} alt="Naija Stars" class="h-8 w-8" />
 
         <span class="hidden font-bold xl:inline-block">Naija Stars</span>
+
+        <Link
+          to={'/docs'}
+          class="transition-colors text-foreground/50 hover:underline cursor-pointer"
+          let:active
+        >
+          <span class={active ? 'text-foreground/90' : ''}> Docs </span>
+        </Link>
       </a>
       <!-- <nav class="flex items-center gap-3 text-sm">
         
@@ -106,16 +115,14 @@
       <span class="sr-only" data-svelte-h="svelte-1t6m3jq">Toggle Menu</span
       ></button
     >
-    <div
-      class="flex flex-1 items-center justify-between space-x-2 md:justify-end"
-    >
+    <div class="flex flex-1 items-center space-x-2 justify-end">
       <nav class="flex items-center">
         <Button
           variant="link"
           href="https://www.madeinnigeria.dev"
           target="_blank"
           rel="noreferrer noopener"
-          class="flex items-center gap-0"
+          class="hidden md:flex items-center gap-0"
         >
           Made in Nigeria
 
@@ -126,7 +133,7 @@
           href="https://www.classroomio.com"
           target="_blank"
           rel="noreferrer noopener"
-          class="flex items-center gap-0"
+          class="hidden md:flex items-center gap-0"
         >
           ClassroomIO
 
diff --git a/src/lib/components/table/table.svelte b/src/lib/components/table/table.svelte
index 70a63ed..4df7ee7 100644
--- a/src/lib/components/table/table.svelte
+++ b/src/lib/components/table/table.svelte
@@ -8,7 +8,7 @@
   export { className as class };
 </script>
 
-<div class="relative w-full overflow-auto">
+<div class="max-h-[50vh] relative w-full overflow-auto">
   <table
     class={cn('w-full caption-bottom text-sm', className)}
     {...$$restProps}
diff --git a/src/lib/functions/debounce.ts b/src/lib/functions/debounce.ts
index eef47d8..1dd7f10 100644
--- a/src/lib/functions/debounce.ts
+++ b/src/lib/functions/debounce.ts
@@ -1,9 +1,9 @@
+let timeoutId: ReturnType<typeof setTimeout>;
+
 export function debounce<T extends (...args: any[]) => any>(
   func: T,
   wait: number
 ): (...args: Parameters<T>) => void {
-  let timeoutId: ReturnType<typeof setTimeout>;
-
   return (...args: Parameters<T>) => {
     clearTimeout(timeoutId);
     timeoutId = setTimeout(() => {
diff --git a/src/lib/pages/docs/get.svelte b/src/lib/pages/docs/get.svelte
new file mode 100644
index 0000000..3f04aa0
--- /dev/null
+++ b/src/lib/pages/docs/get.svelte
@@ -0,0 +1,122 @@
+<script lang="ts">
+  const parameters = [
+    {
+      name: 'page',
+      type: 'number',
+      description: 'Page number of repository e.g. 1 | 2 | 3',
+    },
+    {
+      name: 'limit',
+      type: 'number',
+      description: 'Limit per page e.g. 10',
+    },
+    {
+      name: 'sortBy',
+      type: 'string',
+      description: 'Sort by stars e.g. stars | author | forks',
+    },
+    {
+      name: 'order',
+      type: 'string',
+      description: 'Order of sorting e.g. asc | desc',
+    },
+  ];
+</script>
+
+<section
+  class="border w-full rounded-md flex flex-col md:flex-row item-start gap-5 p-5"
+>
+  <section class="md:w-2/4 w-full">
+    <h1 class="text-xl">Get Repositories</h1>
+    <p class="text-sm mt-1">Get Repositories from the database</p>
+
+    <div class="border-2 rounded-md p-2.5 my-5 text-sm">
+      <span class="bg-green-900 text-green-500 px-2 py-1 text-sm rounded-sm">
+        GET
+      </span>
+      <span class="tracking-wide ml-1">/v1/repositories</span>
+    </div>
+
+    <h1 class="text-xl">Request</h1>
+    <p class="text-sm mt-2">Query Parameters</p>
+
+    {#each parameters as param}
+      <div class="≈p-2.5 mt-10 text-sm">
+        <div class="flex items-center gap-5 mb-4">
+          <p>{param.name}</p>
+          <p class="text-xs px-2 py-0.5 bg-red-50 text-black rounded-md">
+            {param.type}
+          </p>
+        </div>
+
+        <p>{param.description}</p>
+      </div>
+    {/each}
+  </section>
+
+  <section class="md:w-2/4 w-full flex flex-col gap-5">
+    <div
+      class="flex flex-col gap-3 bg-white dark:bg-transparent border dark:text-white rounded-md h-auto p-4 text-xs"
+    >
+      <p>curl --request GET \</p>
+      <p>--url https://api.naijastars.dev/v1/repositories \</p>
+    </div>
+
+    <div
+      class="bg-white dark:bg-transparent border dark:text-white rounded-md h-[75vh] overflow-y-auto"
+    >
+      <pre>
+        <code class="language-json text-xs">
+          {`{
+  "status": "success",
+  "data": [   [
+    {
+        "id": 34,
+        "name": "chakra-ui",
+        "link": "https://github.com/chakra-ui/chakra-ui",
+        "description": "⚡️ Simple, Modular & Accessible UI Components for your React Applications",
+        "author": "chakra-ui",
+        "author_link": "https://github.com/chakra-ui",
+        "author_avatar": "https://avatars.githubusercontent.com/u/54212428?v=4",
+        "stars": 38073,
+        "topics": [
+            "a11y",
+            "accessible",
+            "ark-ui",
+            "chakra-ui",
+            "component",
+            "css-in-js",
+            "dark-mode",
+            "design-system",
+            "react",
+            "react-components",
+            "reactjs",
+            "styled",
+            "ui-components",
+            "ui-library",
+            "uikit",
+            "wai-aria"
+        ],
+        "license": {
+            "key": "mit",
+            "url": "https://api.github.com/licenses/mit",
+            "name": "MIT License"
+        },
+        "forks": 3285,
+        "open_issues_count": 12,
+        "archived": false,
+        "disabled": false,
+        "original_created_at": "2019-08-17T14:27:54.000Z",
+        "original_updated_at": "2024-12-03T07:58:40.000Z",
+        "created_at": "2024-12-01T14:44:03.981Z",
+        "updated_at": "2024-12-03T10:04:43.429Z",
+        "author_link_madeinnigeria": "https://twitter.com/thesegunadebayo",
+        "author_madeinnigeria": "@thesegunadebayo"
+    }
+]
+}`}
+        </code>
+      </pre>
+    </div>
+  </section>
+</section>
diff --git a/src/lib/pages/docs/page.svelte b/src/lib/pages/docs/page.svelte
new file mode 100644
index 0000000..f7ee85d
--- /dev/null
+++ b/src/lib/pages/docs/page.svelte
@@ -0,0 +1,69 @@
+<script>
+  import { Router } from 'svelte-routing';
+  import GetPage from './get.svelte';
+  import SearchPage from './search.svelte';
+  import logo from '$lib/assets/logo.svg';
+
+  export let url = '';
+
+  let state = '';
+
+  const navigation = [
+    {
+      label: 'get',
+      text: 'Get Repositories',
+    },
+    {
+      label: 'search',
+      text: 'Search Repositories',
+    },
+  ];
+</script>
+
+<Router {url}>
+  <main
+    class="relative p-10 flex flex-col gap-y-5 w-full md:items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-10 md:min-h-[80vh]"
+  >
+    <aside class="md:sticky top-0 z-30 h-full w-full shrink-0">
+      <button on:click={() => (state = '')} class="mb-3 p-2 text-xl">
+        Repositories
+      </button>
+
+      <ul class="flex flex-col gap-3 p-1">
+        {#each navigation as nav}
+          <button
+            on:click={() => (state = nav.label)}
+            class="p-2 flex items-center gap-5 rounded-md border-2 border-background hover:border-2 hover:border-gray-200 dark:hover:border-neutral-800 {state ===
+              nav.label &&
+              'dark:bg-neutral-800 text-black dark:text-white border-2 border-gray-200 dark:border-neutral-800'}"
+          >
+            <span
+              class="px-2 py-1 text-xs rounded-sm uppercase w-[30%] {nav.label ===
+                'get' && 'bg-green-900 text-green-400'} {nav.label ===
+                'search' && 'bg-gray-900 text-white'}"
+            >
+              {nav.label}
+            </span>
+
+            <span class="text-sm">{nav.text}</span>
+          </button>
+        {/each}
+      </ul>
+    </aside>
+
+    <div class="h-full">
+      {#if state === ''}
+        <section
+          class="flex flex-col justify-center items-center gap-5 rounded-md border md:h-full p-5"
+        >
+          <h1 class="text-4xl text-center">Welcome to Naija Stars Docs</h1>
+          <img src={logo} alt="logo" class="w-28 h-28" />
+        </section>
+      {:else if state === 'get'}
+        <GetPage />
+      {:else if state === 'search'}
+        <SearchPage />
+      {/if}
+    </div>
+  </main>
+</Router>
diff --git a/src/lib/pages/docs/search.svelte b/src/lib/pages/docs/search.svelte
new file mode 100644
index 0000000..73af0ba
--- /dev/null
+++ b/src/lib/pages/docs/search.svelte
@@ -0,0 +1,147 @@
+<section
+  class="border rounded-md flex flex-col md:flex-row item-start gap-5 p-5 h-[80vh] overflow-y-auto"
+>
+  <section class="md:w-2/4 w-full">
+    <h1 class="text-xl">Search Repositories</h1>
+    <p class="text-sm mt-1">Search for Repositories from the database</p>
+
+    <div class="border rounded-md p-2.5 my-5 text-sm">
+      <span class="bg-green-900 text-green-500 px-2 py-1 text-sm rounded-sm"
+        >GET</span
+      >
+      <span class="tracking-wide ml-1"> / v1 / repositories / search</span>
+    </div>
+
+    <h1 class="text-xl">Request</h1>
+    <p class="text-sm mt-2">Query Parameters</p>
+
+    <div class="≈p-2.5 mt-10 text-sm">
+      <div class="flex items-center gap-5 mb-4">
+        <p>text</p>
+        <p class="text-xs px-2 py-0.5 bg-red-50 text-black rounded-md">
+          string
+        </p>
+      </div>
+
+      <p>Search value</p>
+    </div>
+  </section>
+
+  <section class="md:w-2/4 w-full flex flex-col gap-5">
+    <div
+      class="flex flex-col gap-3 bg-white dark:bg-transparent border dark:text-white rounded-md h-auto p-4 text-xs"
+    >
+      <p>curl --request GET \</p>
+      <p>--url https://api.naijastars.dev/v1/repositories/search \</p>
+    </div>
+
+    <div
+      class="bg-white dark:bg-transparent border dark:text-white rounded-md h-[90%] overflow-auto"
+    >
+      <pre>
+        <code class="language-json text-xs">
+          {`
+            {
+              "data": [
+                {
+                  "id": 34,
+                  "name": "chakra-ui",
+                  "link": "https://github.com/chakra-ui/chakra-ui",
+                  "description": "⚡️ Simple, Modular & Accessible UI Components for your React Applications",
+                  "author": "chakra-ui",
+                  "author_link": "https://github.com/chakra-ui",
+                  "author_avatar": "https://avatars.githubusercontent.com/u/54212428?v=4",
+                  "stars": 38073,
+                  "topics": [
+                      "a11y",
+                      "accessible",
+                      "ark-ui",
+                      "chakra-ui",
+                      "component",
+                      "css-in-js",
+                      "dark-mode",
+                      "design-system",
+                      "react",
+                      "react-components",
+                      "reactjs",
+                      "styled",
+                      "ui-components",
+                      "ui-library",
+                      "uikit",
+                      "wai-aria"
+                  ],
+                  "license": {
+                      "key": "mit",
+                      "url": "https://api.github.com/licenses/mit",
+                      "name": "MIT License"
+                  },
+                  "forks": 3285,
+                  "open_issues_count": 12,
+                  "archived": false,
+                  "disabled": false,
+                  "original_created_at": "2019-08-17T14:27:54.000Z",
+                  "original_updated_at": "2024-12-03T07:58:40.000Z",
+                  "created_at": "2024-12-01T14:44:03.981Z",
+                  "updated_at": "2024-12-03T10:04:43.429Z",
+                  "author_link_madeinnigeria": "https://twitter.com/thesegunadebayo",
+                  "author_madeinnigeria": "@thesegunadebayo"
+              },
+              {
+                  "id": 248,
+                  "name": "zag",
+                  "link": "https://github.com/chakra-ui/zag",
+                  "description": "Finite state machines for building accessible design systems and UI components. Works with modern frameworks, and even just Vanilla JS",
+                  "author": "chakra-ui",
+                  "author_link": "https://github.com/chakra-ui",
+                  "author_avatar": "https://avatars.githubusercontent.com/u/54212428?v=4",
+                  "stars": 4102,
+                  "topics": [
+                      "a11y",
+                      "accessibility",
+                      "agnostic",
+                      "component",
+                      "design-systems",
+                      "headless",
+                      "headlessui",
+                      "library",
+                      "primitives",
+                      "react",
+                      "solid",
+                      "state-machines",
+                      "svelte",
+                      "sveltejs",
+                      "ui",
+                      "ui-components",
+                      "ui-kit",
+                      "universal",
+                      "vue",
+                      "xstate"
+                  ],
+                  "license": {
+                      "key": "mit",
+                      "url": "https://api.github.com/licenses/mit",
+                      "name": "MIT License"
+                  },
+                  "forks": 170,
+                  "open_issues_count": 13,
+                  "archived": false,
+                  "disabled": false,
+                  "original_created_at": "2021-07-07T11:38:07.000Z",
+                  "original_updated_at": "2024-12-03T09:03:41.000Z",
+                  "created_at": "2024-12-01T14:47:25.061Z",
+                  "updated_at": "2024-12-03T10:08:08.882Z",
+                  "author_link_madeinnigeria": "https://twitter.com/thesegunadebayo",
+                  "author_madeinnigeria": "@thesegunadebayo"
+                }
+              ],
+              "search": {
+                  "text": "chakra",
+                  "totalItems": 2
+              }
+            }
+          `}
+        </code>
+      </pre>
+    </div>
+  </section>
+</section>
diff --git a/src/lib/pages/home/page.svelte b/src/lib/pages/home/page.svelte
index e2c7e1d..09bb8db 100644
--- a/src/lib/pages/home/page.svelte
+++ b/src/lib/pages/home/page.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import { API_BASE_URL } from '$lib/config';
   import { Skeleton } from '$lib/components/skeleton';
+  import Sidebar from '$lib/pages/shared/sidebar.svelte';
   import type { Repository, ApiMetadata } from '$lib/types/repository';
   import { debounce } from '$lib/functions/debounce';
+  import detectUrlChange from 'detect-url-change';
 
   import Table from './table.svelte';
 
@@ -21,81 +24,129 @@
       order: 'desc',
     },
   };
-  let currentPage: number;
-  let currentOrder: string;
+  let currentPage: number = 1;
+  let currentOrder: string = 'desc';
+  let currentSortBy: string = 'stars';
+  let searchValue: string = '';
 
-  let isFetching = false;
+  let isFetching = true;
   let isMounted = false;
 
-  const fetchRepositories = debounce(
-    async (pageNumber: number = 1, order: string = 'desc') => {
-      console.log('fetching repositories');
-      isFetching = true;
-
-      try {
-        const url = new URL(`${API_BASE_URL}/repositories`);
-        url.searchParams.set('limit', '10');
-        url.searchParams.set('page', pageNumber.toString());
-        url.searchParams.set('order', order);
-
-        const response = await fetch(url);
-
-        if (!response.ok) {
-          throw new Error('Failed to fetch repositories');
-        }
-        const result = await response.json();
-
-        repositories = result.data;
-        apiMetadata = {
-          pagination: result.pagination,
-          sort: result.sort,
-        };
-      } catch (err: any) {
-        console.error(err);
+  const fetchRepositories = debounce(async () => {
+    console.log('fetching repositories');
+    isFetching = true;
+
+    const params = new URLSearchParams(window.location.search);
+    const page = parseInt(params.get('page') || '1', 10);
+    const order = params.get('order') || 'desc';
+    const sortBy = params.get('sortBy') || 'stars';
+
+    try {
+      const url = new URL(`${API_BASE_URL}/repositories`);
+      url.searchParams.set('limit', '10');
+      url.searchParams.set('page', page.toString());
+      url.searchParams.set('order', order);
+      url.searchParams.set('sortBy', sortBy);
+
+      const response = await fetch(url);
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch repositories');
       }
+      const result = await response.json();
+
+      repositories = result.data.map((repo: Repository, index: number) => ({
+        ...repo,
+        id: index + 1,
+      }));
+      apiMetadata = {
+        pagination: result.pagination,
+        sort: result.sort,
+      };
+    } catch (err: any) {
+      console.error(err);
+    }
+
+    isFetching = false;
+
+    if (!isMounted) {
+      isMounted = true;
+    }
+  }, 1000);
 
-      isFetching = false;
+  const searchRepositories = debounce(async (param = '') => {
+    console.log('fetching repositories');
+    isFetching = true;
 
-      if (!isMounted) {
-        isMounted = true;
+    try {
+      const url = new URL(`${API_BASE_URL}/repositories/search`);
+      url.searchParams.set('text', param);
+
+      const response = await fetch(url);
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch repositories');
       }
-    },
-    1000
-  );
 
-  $: fetchRepositories(currentPage, currentOrder);
+      const result = await response.json();
+      repositories = result.data.map((repo: Repository, index: number) => ({
+        ...repo,
+        id: index + 1,
+      }));
+      apiMetadata = {
+        pagination: result.pagination,
+        sort: result.sort,
+      };
+    } catch (err: any) {
+      console.error(err);
+    }
+
+    isFetching = false;
+  }, 1000);
+
+  onMount(() => {
+    detectUrlChange.on('change', () => {
+      fetchRepositories();
+    });
+  });
 
   $: gettingFreshData = isFetching && isMounted;
 </script>
 
-<div class="mt-5 max-w-2xl mx-auto">
-  {#if isFetching && !isMounted}
-    <div class="rounded-md border w-full">
-      <div class="flex flex-col gap-4 p-4">
-        <Skeleton class="h-10 w-full" />
-        <Skeleton class="h-8 w-full" />
-        <Skeleton class="h-8 w-full" />
-        <Skeleton class="h-8 w-full" />
-        <Skeleton class="h-8 w-full" />
-        <Skeleton class="h-8 w-full" />
+<div
+  class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10"
+>
+  <Sidebar />
+
+  <div class="py-6 lg:gap-10 w-full max-w-2xl mx-auto">
+    {#if isFetching && !isMounted}
+      <div class="rounded-md border w-full">
+        <div class="flex flex-col gap-4 p-4">
+          <Skeleton class="h-10 w-full" />
+          <Skeleton class="h-8 w-full" />
+          <Skeleton class="h-8 w-full" />
+          <Skeleton class="h-8 w-full" />
+          <Skeleton class="h-8 w-full" />
+          <Skeleton class="h-8 w-full" />
+        </div>
+      </div>
+    {:else}
+      <div>
+        <h2
+          class="mt-5 scroll-m-20 border-b pb-4 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
+        >
+          Open source projects in Nigeria
+        </h2>
       </div>
-    </div>
-  {:else}
-    <div>
-      <h2
-        class="mt-5 scroll-m-20 border-b pb-4 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
-      >
-        Open source projects in Nigeria
-      </h2>
-    </div>
-    {#key gettingFreshData}
-      <Table
-        data={repositories}
-        {apiMetadata}
-        bind:currentPage
-        bind:currentOrder
-        isFetching={gettingFreshData}
-      />
-    {/key}
-  {/if}
+      {#key gettingFreshData}
+        <Table
+          data={repositories}
+          {apiMetadata}
+          bind:searchValue
+          isFetching={gettingFreshData}
+          onSearch={searchRepositories}
+        />
+      {/key}
+    {/if}
+  </div>
 </div>
diff --git a/src/lib/pages/home/table.svelte b/src/lib/pages/home/table.svelte
index 6b78d89..60b9a50 100644
--- a/src/lib/pages/home/table.svelte
+++ b/src/lib/pages/home/table.svelte
@@ -1,16 +1,14 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
   import { readable } from 'svelte/store';
   import {
     Render,
     Subscribe,
-    createRender,
+    // createRender,
     createTable,
   } from 'svelte-headless-table';
   import {
     addHiddenColumns,
     addPagination,
-    addSelectedRows,
     addSortBy,
     addTableFilter,
   } from 'svelte-headless-table/plugins';
@@ -22,18 +20,28 @@
   import { Input } from '$lib/components/input';
   import type { Repository, ApiMetadata } from '$lib/types/repository';
 
-  import Actions from './table-actions.svelte';
-  import DataTableCheckbox from './table-checkbox.svelte';
+  // import Actions from './table-actions.svelte';
   import * as Table from '$lib/components/table/index.js';
   import { Button } from '$lib/components/button/index.js';
 
   export let data: Repository[] = [];
   export let apiMetadata: ApiMetadata;
-  export let currentPage: number;
-  export let currentOrder: string;
   export let isFetching: boolean;
+  export let searchValue: string;
+  export let onSearch: (value: string) => void;
 
-  $: console.log('isFetching in table', isFetching);
+  function extractLastSegment(url) {
+    if (typeof url !== 'string' || !url.includes('/')) {
+      return '';
+    }
+    return url.split('/').filter(Boolean).pop();
+  }
+
+  function handleSearchInput(event: Event) {
+    const input = event.target as HTMLInputElement;
+    searchValue = input.value;
+    onSearch(input.value);
+  }
 
   const table = createTable(readable(data), {
     sort: addSortBy({ disableMultiSort: true }),
@@ -41,52 +49,27 @@
     filter: addTableFilter({
       fn: ({ filterValue, value }) => value.includes(filterValue),
     }),
-    select: addSelectedRows(),
     hide: addHiddenColumns(),
   });
 
   const columns = table.createColumns([
     table.column({
-      header: (_, { pluginStates }) => {
-        const { allPageRowsSelected } = pluginStates.select;
-        return createRender(DataTableCheckbox, {
-          checked: allPageRowsSelected,
-        });
-      },
+      header: '#',
       accessor: 'id',
-      cell: ({ row }, { pluginStates }) => {
-        const { getRowState } = pluginStates.select;
-        const { isSelected } = getRowState(row);
-
-        return createRender(DataTableCheckbox, {
-          checked: isSelected,
-        });
-      },
-      plugins: {
-        sort: {
-          disable: true,
-        },
-        filter: {
-          exclude: true,
-        },
-      },
     }),
     table.column({
       header: 'Name',
-      accessor: 'name',
-      plugins: { sort: { disable: true }, filter: { exclude: true } },
+      accessor: 'link',
+    }),
+    table.column({
+      header: '',
+      accessor: 'author_avatar',
+      cell: ({ value }) => value.toLowerCase(),
     }),
     table.column({
       header: 'Author',
       accessor: 'author',
       cell: ({ value }) => value.toLowerCase(),
-      plugins: {
-        filter: {
-          getFilterValue(value) {
-            return value.toLowerCase();
-          },
-        },
-      },
     }),
     table.column({
       header: 'Stars',
@@ -96,17 +79,19 @@
       },
     }),
     table.column({
-      header: '',
-      accessor: (data) => data,
-      cell: (item) => {
-        return createRender(Actions, { data: item.value });
-      },
-      plugins: {
-        sort: {
-          disable: true,
-        },
+      header: 'Forks',
+      accessor: 'forks',
+      cell: ({ value }) => {
+        return value;
       },
     }),
+    // table.column({
+    //   header: '',
+    //   accessor: (data) => data,
+    //   cell: (item) => {
+    //     return createRender(Actions, { data: item.value });
+    //   },
+    // }),
   ]);
 
   const {
@@ -124,61 +109,61 @@
   let hideForId = Object.fromEntries(ids.map((id) => [id, true]));
 
   const { filterValue } = pluginStates.filter;
-  const { selectedDataIds } = pluginStates.select;
+
+  function goToPage(page: number) {
+    const url = new URL(window.location.href);
+    url.searchParams.set('page', page.toString());
+    window.history.pushState({ page: page.toString() }, '', url.toString());
+  }
 
   function previousPage() {
+    const { currentPage } = apiMetadata.pagination;
     if (currentPage > 1) {
-      currentPage--;
+      goToPage(currentPage - 1);
     }
   }
 
   function nextPage() {
-    if (apiMetadata.pagination.hasNextPage) {
-      currentPage++;
+    const { currentPage } = apiMetadata.pagination;
+    if (currentPage < apiMetadata.pagination.totalPages) {
+      goToPage(currentPage + 1);
     }
   }
 
   function onFirstPage() {
-    currentPage = 1;
+    goToPage(1);
   }
 
   function onLastPage() {
-    currentPage = apiMetadata.pagination.totalPages;
+    const { totalPages } = apiMetadata.pagination;
+    goToPage(totalPages);
+  }
+
+  function handleSort(cellId: string) {
+    const url = new URL(window.location.href);
+    const sortBy = cellId;
+    const order = apiMetadata.sort.order === 'asc' ? 'desc' : 'asc';
+    url.searchParams.set('sortBy', sortBy);
+    url.searchParams.set('order', order);
+    window.history.pushState({}, '', url.toString());
   }
 
   $: $hiddenColumnIds = Object.entries(hideForId)
     .filter(([, hide]) => !hide)
     .map(([id]) => id);
-
-  $: {
-    if (typeof currentPage === 'number') {
-      const url = new URL(window.location.href);
-      url.searchParams.set('page', currentPage.toString());
-      history.replaceState(null, '', url.toString());
-    }
-  }
-
-  onMount(() => {
-    const params = new URLSearchParams(window.location.search);
-    const pageParam = parseInt(params.get('page') || '1', 10);
-    currentPage =
-      !isNaN(pageParam) && pageParam > 0
-        ? pageParam
-        : apiMetadata?.pagination?.currentPage || 1;
-    currentOrder = apiMetadata?.sort?.order || 'desc';
-  });
 </script>
 
 <div class="w-full">
-  <div class="hidden py-4">
-    <Input
-      class="max-w-sm"
-      placeholder="Filter emails..."
-      type="text"
-      bind:value={$filterValue}
-    />
-  </div>
   <div class="rounded-md my-4 border">
+    <div class="m-2">
+      <Input
+        placeholder="Filter repositories..."
+        type="text"
+        bind:value={searchValue}
+        on:input={handleSearchInput}
+      />
+    </div>
+
     <Table.Root {...$tableAttrs}>
       <Table.Header>
         {#each $headerRows as headerRow}
@@ -195,18 +180,21 @@
                     {...attrs}
                     class={cn('[&:has([role=checkbox])]:pl-3')}
                   >
-                    {#if cell.id === 'stars'}
+                    {#if cell.id === 'stars' || cell.id === 'forks'}
                       <Button
                         variant="ghost"
                         class="pl-0 hover:bg-transparent"
-                        on:click={() =>
-                          (currentOrder =
-                            currentOrder === 'asc' ? 'desc' : 'asc')}
+                        on:click={() => handleSort(cell.id)}
                       >
                         <Render of={cell.render()} />
                         <ArrowUpDown
-                          class="ml-2 h-4 w-4 {currentOrder === 'asc' &&
-                            'text-white'}"
+                          class="ml-2 h-4 w-4 {apiMetadata.sort.sortBy ===
+                            cell.id &&
+                            apiMetadata.sort.order === 'asc' &&
+                            'text-green-500'} {apiMetadata.sort.sortBy ===
+                            cell.id &&
+                            apiMetadata.sort.order === 'desc' &&
+                            'text-red-500'}"
                         />
                       </Button>
                     {:else}
@@ -222,20 +210,29 @@
       <Table.Body {...$tableBodyAttrs}>
         {#each $pageRows as row (row.id)}
           <Subscribe rowAttrs={row.attrs()} let:rowAttrs>
-            <Table.Row
-              {...rowAttrs}
-              data-state={$selectedDataIds[row.id] && 'selected'}
-            >
+            <Table.Row {...rowAttrs}>
               {#each row.cells as cell (cell.id)}
                 <Subscribe attrs={cell.attrs()} let:attrs>
                   <Table.Cell class="[&:has([role=checkbox])]:pl-3" {...attrs}>
-                    {#if cell.id === 'amount'}
-                      <div class="text-right font-medium">
-                        <Render of={cell.render()} />
-                      </div>
-                    {:else if cell.id === 'status'}
-                      <div class="capitalize">
-                        <Render of={cell.render()} />
+                    {#if cell.id === 'link'}
+                      <!-- wrap it around the link of the repo -->
+                      <a
+                        href={`${cell.render()}`}
+                        class="text-right font-medium underline"
+                        target="_blank"
+                      >
+                        <Render
+                          of={extractLastSegment(cell.render() || '') ||
+                            'Unknown'}
+                        />
+                      </a>
+                    {:else if cell.id === 'author_avatar'}
+                      <div class="w-[30px]">
+                        <img
+                          src={`${cell.render()}`}
+                          class="rounded-full"
+                          alt=""
+                        />
                       </div>
                     {:else}
                       <Render of={cell.render()} />
@@ -249,44 +246,47 @@
       </Table.Body>
     </Table.Root>
   </div>
-  <div class="flex items-center justify-end space-x-2 py-4">
+  <div class="flex flex-col md:flex-row items-center space-x-2 py-4">
     <div class="text-muted-foreground flex-1 text-sm">
-      {$rows.length} repo(s) | Page {currentPage} of
+      {$rows.length} repo(s) | Page {apiMetadata.pagination.currentPage} of
       {apiMetadata.pagination.totalPages}
     </div>
 
-    <Button
-      variant="outline"
-      size="sm"
-      on:click={onFirstPage}
-      disabled={currentPage === 1 || isFetching}
-    >
-      First page
-    </Button>
+    <div class="flex flex-row items-center justify-end space-x-2 py-4">
+      <Button
+        variant="outline"
+        size="sm"
+        on:click={onFirstPage}
+        disabled={apiMetadata.pagination.currentPage === 1 || isFetching}
+      >
+        First page
+      </Button>
 
-    <Button
-      variant="outline"
-      size="sm"
-      on:click={previousPage}
-      disabled={!apiMetadata.pagination.hasPrevPage || isFetching}
-    >
-      <ArrowLeft />
-    </Button>
-    <Button
-      variant="outline"
-      size="sm"
-      on:click={nextPage}
-      disabled={!apiMetadata.pagination.hasNextPage || isFetching}
-    >
-      <ArrowRight />
-    </Button>
-    <Button
-      variant="outline"
-      size="sm"
-      on:click={onLastPage}
-      disabled={currentPage === apiMetadata.pagination.totalPages || isFetching}
-    >
-      Last page
-    </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        on:click={previousPage}
+        disabled={!apiMetadata.pagination.hasPrevPage || isFetching}
+      >
+        <ArrowLeft />
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        on:click={nextPage}
+        disabled={!apiMetadata.pagination.hasNextPage || isFetching}
+      >
+        <ArrowRight />
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        on:click={onLastPage}
+        disabled={apiMetadata.pagination.currentPage ===
+          apiMetadata.pagination.totalPages || isFetching}
+      >
+        Last page
+      </Button>
+    </div>
   </div>
 </div>
diff --git a/src/lib/pages/other/page.svelte b/src/lib/pages/other/page.svelte
index 7130a90..b303895 100644
--- a/src/lib/pages/other/page.svelte
+++ b/src/lib/pages/other/page.svelte
@@ -1,9 +1,16 @@
 <script lang="ts">
   import ComingSoon from '$lib/pages/shared/coming-soon.svelte';
+  import Sidebar from '$lib/pages/shared/sidebar.svelte';
 </script>
 
-<div class="mt-5 max-w-2xl mx-auto">
-  <div class="h-[50vh] flex items-center justify-center">
-    <ComingSoon />
+<div
+  class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10"
+>
+  <Sidebar />
+
+  <div class="py-6 lg:gap-10 lg:py-8 mt-5 max-w-2xl mx-auto">
+    <div class="h-[50vh] flex items-center justify-center">
+      <ComingSoon />
+    </div>
   </div>
 </div>
diff --git a/src/lib/pages/shared/sidebar.svelte b/src/lib/pages/shared/sidebar.svelte
new file mode 100644
index 0000000..111099b
--- /dev/null
+++ b/src/lib/pages/shared/sidebar.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { ScrollArea } from '$lib/components/scroll-area';
+  import { Link } from 'svelte-routing';
+  import logo from '$lib/assets/logo.svg';
+
+  const pages = [
+    {
+      label: 'All projects',
+      to: '/',
+    },
+    {
+      label: 'Most forked',
+      to: '/stats/forks',
+    },
+    {
+      label: 'Most popular license',
+      to: '/stats/license',
+    },
+    {
+      label: 'Top 20 contributors',
+      to: '/stats/contributors',
+    },
+    {
+      label: 'Top 10 languages',
+      to: '/stats/languages',
+    },
+  ];
+</script>
+
+<aside
+  class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block"
+>
+  <ScrollArea class="fixed left-0 h-screen py-5 px-8">
+    <div class="">
+      <div class="w-full flex justify-center mb-5">
+        <img src={logo} alt="logo" class="w-28 h-28" />
+      </div>
+
+      <ul>
+        {#each pages as page}
+          <li class="px-3 py-2">
+            <Link
+              to={page.to}
+              class="transition-colors text-foreground/50 hover:underline cursor-pointer"
+              let:active
+            >
+              <span class={active ? 'text-foreground/90' : ''}>
+                {page.label}
+              </span>
+            </Link>
+          </li>
+        {/each}
+      </ul>
+    </div>
+  </ScrollArea>
+</aside>
diff --git a/src/lib/types/repository.ts b/src/lib/types/repository.ts
index 7ce0f8e..bf701be 100644
--- a/src/lib/types/repository.ts
+++ b/src/lib/types/repository.ts
@@ -36,7 +36,7 @@ export type ApiMetadata = {
     hasPrevPage: boolean;
   };
   sort: {
-    sortBy: 'stars' | 'author';
+    sortBy: 'stars' | 'author' | 'forks';
     order: 'asc' | 'desc';
   };
 };
diff --git a/src/style.css b/src/style.css
index 75cceba..93940ef 100644
--- a/src/style.css
+++ b/src/style.css
@@ -87,3 +87,21 @@
   padding-right: 2rem;
   padding-left: 2rem;
 }
+@media (max-width: 640px) {
+  .container {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+}
+
+.pre code {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font-family: monospace;
+}
+
+.bg-black pre {
+  max-width: 100%;
+  overflow-x: auto;
+  padding: 1rem;
+}