diff --git a/src/App.svelte b/src/App.svelte
index 4a3c521..6e432bd 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -3,7 +3,7 @@
 
   import { Navigation } from '$lib/components/navigation';
   import HomePage from '$lib/pages/home/page.svelte';
-  import DocsPage from '$lib/pages/docs/page.svelte';
+  import ApiPage from '$lib/pages/api/page.svelte';
   import OtherPage from '$lib/pages/other/page.svelte';
   import { ModeWatcher } from 'mode-watcher';
 
@@ -20,12 +20,12 @@
 
     <div class="">
       <Route path="/stats/:id" component={OtherPage} />
+      <Route path="/api">
+        <ApiPage />
+      </Route>
       <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 02facdf..a2e8622 100644
--- a/src/lib/components/navigation/navigation.svelte
+++ b/src/lib/components/navigation/navigation.svelte
@@ -66,11 +66,11 @@
         <span class="hidden font-bold xl:inline-block">Naija Stars</span>
 
         <Link
-          to={'/docs'}
+          to={'/api'}
           class="transition-colors text-foreground/50 hover:underline cursor-pointer"
           let:active
         >
-          <span class={active ? 'text-foreground/90' : ''}> Docs </span>
+          <span class={active ? 'text-foreground/90' : ''}> API </span>
         </Link>
       </a>
       <!-- <nav class="flex items-center gap-3 text-sm">
diff --git a/src/lib/pages/docs/get.svelte b/src/lib/pages/api/get.svelte
similarity index 100%
rename from src/lib/pages/docs/get.svelte
rename to src/lib/pages/api/get.svelte
diff --git a/src/lib/pages/docs/page.svelte b/src/lib/pages/api/page.svelte
similarity index 99%
rename from src/lib/pages/docs/page.svelte
rename to src/lib/pages/api/page.svelte
index f7ee85d..f46d20e 100644
--- a/src/lib/pages/docs/page.svelte
+++ b/src/lib/pages/api/page.svelte
@@ -56,7 +56,7 @@
         <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>
+          <h1 class="text-4xl text-center">Welcome to Naija Stars API</h1>
           <img src={logo} alt="logo" class="w-28 h-28" />
         </section>
       {:else if state === 'get'}
diff --git a/src/lib/pages/docs/search.svelte b/src/lib/pages/api/search.svelte
similarity index 100%
rename from src/lib/pages/docs/search.svelte
rename to src/lib/pages/api/search.svelte
diff --git a/src/lib/pages/home/page.svelte b/src/lib/pages/home/page.svelte
index 09bb8db..8dc8915 100644
--- a/src/lib/pages/home/page.svelte
+++ b/src/lib/pages/home/page.svelte
@@ -57,7 +57,7 @@
 
       repositories = result.data.map((repo: Repository, index: number) => ({
         ...repo,
-        id: index + 1,
+        id: index + 1 + (page - 1) * 10,
       }));
       apiMetadata = {
         pagination: result.pagination,