diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts
index f4dee7578..ed27bd72c 100644
--- a/docs/docusaurus.config.ts
+++ b/docs/docusaurus.config.ts
@@ -9,29 +9,19 @@ const config: Config = {
   tagline: 'Modern Laravel-based BitTorrent tracker',
   favicon: 'img/favicon.ico',
 
-  // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future
   future: {
-    v4: true, // Improve compatibility with the upcoming Docusaurus v4
+    v4: true,
   },
 
-  // Set the production url of your site here
   url: 'https://docs.torrentpier.com',
-  // Set the /<baseUrl>/ pathname under which your site is served
-  // For GitHub pages deployment, it is often '/<projectName>/'
   baseUrl: '/',
-
-  // GitHub pages deployment config.
-  // If you aren't using GitHub pages, you don't need these.
-  organizationName: 'torrentpier', // Usually your GitHub org/user name.
-  projectName: 'torrentpier.github.io', // Usually your repo name.
+  organizationName: 'torrentpier',
+  projectName: 'torrentpier.github.io',
   trailingSlash: false,
 
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
 
-  // Even if you don't use internationalization, you can use this field to set
-  // useful metadata like html lang. For example, if your site is Chinese, you
-  // may want to replace "en" with "zh-Hans".
   i18n: {
     defaultLocale: 'en',
     locales: ['en'],
@@ -43,10 +33,8 @@ const config: Config = {
       {
         docs: {
           sidebarPath: './sidebars.ts',
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
-          editUrl:
-            'https://github.com/torrentpier/torrentpier/tree/dexter/docs/',
+          editUrl: 'https://github.com/torrentpier/torrentpier/tree/dexter/docs/',
+          exclude: ['api/**'], // Exclude API folder from main docs
         },
         blog: {
           showReadingTime: true,
@@ -54,11 +42,7 @@ const config: Config = {
             type: ['rss', 'atom'],
             xslt: true,
           },
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
-          editUrl:
-            'https://github.com/torrentpier/torrentpier/tree/dexter/docs/',
-          // Useful options to enforce blogging best practices
+          editUrl: 'https://github.com/torrentpier/torrentpier/tree/dexter/docs/',
           onInlineTags: 'warn',
           onInlineAuthors: 'warn',
           onUntruncatedBlogPosts: 'warn',
@@ -70,8 +54,20 @@ const config: Config = {
     ],
   ],
 
+  plugins: [
+    [
+      '@docusaurus/plugin-content-docs',
+      {
+        id: 'api',
+        path: 'docs/api',
+        routeBasePath: 'api',
+        sidebarPath: './sidebars.ts',
+        editUrl: 'https://github.com/torrentpier/torrentpier/tree/dexter/docs/',
+      },
+    ],
+  ],
+
   themeConfig: {
-    // Replace with your project's social card
     image: 'img/social-card.jpg',
     navbar: {
       title: 'TorrentPier',
@@ -81,17 +77,19 @@ const config: Config = {
       },
       items: [
         {to: '/blog/welcome', label: 'Blog', position: 'left'},
-        {
-          to: '/docs/api/overview',
-          label: 'API',
-          position: 'left',
-        },
         {
           type: 'docSidebar',
           sidebarId: 'docsSidebar',
           position: 'left',
           label: 'Documentation',
         },
+        {
+          type: 'docSidebar',
+          sidebarId: 'apiSidebar',
+          docsPluginId: 'api',
+          position: 'left',
+          label: 'API',
+        },
         {
           href: 'https://github.com/torrentpier/torrentpier',
           label: 'GitHub',
@@ -109,6 +107,10 @@ const config: Config = {
               label: 'Getting Started',
               to: '/docs/intro',
             },
+            {
+              label: 'API Reference',
+              to: '/api/overview',
+            },
           ],
         },
         {
diff --git a/docs/sidebars.ts b/docs/sidebars.ts
index eeaeb996e..973315410 100644
--- a/docs/sidebars.ts
+++ b/docs/sidebars.ts
@@ -15,19 +15,7 @@ import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
 const sidebars: SidebarsConfig = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
   docsSidebar: [{type: 'autogenerated', dirName: '.'}],
-
-  // But you can create a sidebar manually
-  /*
-  tutorialSidebar: [
-    'intro',
-    'hello',
-    {
-      type: 'category',
-      label: 'Tutorial',
-      items: ['tutorial-basics/create-a-document'],
-    },
-  ],
-   */
+  apiSidebar: [{type: 'autogenerated', dirName: '.'}],
 };
 
 export default sidebars;
diff --git a/docs/src/components/HomepageFeatures/styles.module.css b/docs/src/components/HomepageFeatures/styles.module.css
index b248eb2e5..f83e1b7b5 100644
--- a/docs/src/components/HomepageFeatures/styles.module.css
+++ b/docs/src/components/HomepageFeatures/styles.module.css
@@ -6,6 +6,9 @@
 }
 
 .featureSvg {
-  height: 200px;
-  width: 200px;
+  height: 140px;
+  width: auto;
+  max-width: 100%;
+  display: block;
+  margin: 0 auto 1rem;
 }
diff --git a/docs/static/img/logo.svg b/docs/static/img/logo.svg
index ece447692..290b0fec3 100644
--- a/docs/static/img/logo.svg
+++ b/docs/static/img/logo.svg
@@ -1,4 +1,4 @@
-<svg width="603" height="685" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg viewBox="0 0 603 685" width="603" height="685" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
         <linearGradient x1="3.311%" y1="3.278%" x2="96.35%" y2="95.406%" id="b">
             <stop stop-color="#90F1FF" offset="0%"/>