diff --git a/web/src/pages/api/index.astro b/web/src/pages/api/index.astro
new file mode 100644
index 0000000..29ec5ce
--- /dev/null
+++ b/web/src/pages/api/index.astro
@@ -0,0 +1,34 @@
+---
+import Layout from '@layouts/Layout.astro';
+import Buton from '@components/form/Button.astro';
+
+import MainCard from '@components/scafold/MainCard.astro';
+
+---
+
+<Layout title="API Docs | Awesome Privacy">
+
+  <MainCard>
+  <div id="swagger-ui"></div>
+</MainCard>
+
+</Layout>
+
+<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.1.3/swagger-ui.css" >
+<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.1.3/swagger-ui-bundle.js"></script>
+<script>
+  window.onload = () => {
+    SwaggerUIBundle({
+      url: 'https://raw.githubusercontent.com/Lissy93/awesome-privacy/main/api/open-api-spec.yml',
+      dom_id: '#swagger-ui',
+      deepLinking: true,
+      presets: [
+        SwaggerUIBundle.presets.apis,
+        SwaggerUIBundle.SwaggerUIStandalonePreset
+      ],
+      plugins: [
+        SwaggerUIBundle.plugins.DownloadUrl
+      ]
+    });
+  }
+</script>