diff --git a/website/src/components/navigation/TopBar.astro b/website/src/components/navigation/TopBar.astro
index cbe03e19..a2b6598a 100644
--- a/website/src/components/navigation/TopBar.astro
+++ b/website/src/components/navigation/TopBar.astro
@@ -14,7 +14,7 @@ const pathname = Astro.url.pathname;
     <div class="flex items-center gap-2">
       {
         pathname.startsWith("/docs") ? (
-          <div class="h-10 w-10" />
+          <div class="h-10 w-10 md:hidden" />
         ) : (
           <SidebarButton client:only />
         )
diff --git a/website/src/layouts/RootLayout.astro b/website/src/layouts/RootLayout.astro
index c3bcb271..497efa84 100644
--- a/website/src/layouts/RootLayout.astro
+++ b/website/src/layouts/RootLayout.astro
@@ -2,6 +2,17 @@
 import { FaGithub } from "react-icons/fa6";
 import "../styles/global.css";
 import TopBar from "~/components/navigation/TopBar.astro";
+
+interface Props {
+  metadata?: {
+    title?: string;
+    description?: string;
+    keywords?: string;
+    author?: string;
+  };
+}
+
+const { metadata } = Astro.props as Props;
 ---
 
 <!doctype html>
@@ -11,16 +22,33 @@ import TopBar from "~/components/navigation/TopBar.astro";
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" href="/favicon.ico" type="image/x-icon" />
     <meta name="generator" content={Astro.generator} />
-    <title>Spotube</title>
+    <title>{metadata?.title || "Spotube"}</title>
     <meta
       name="description"
-      content="An Open Source Music Client for every platform"
+      content={metadata?.description ||
+        "A cross-platform extensible open-source music streaming platform"}
     />
     <meta
       name="keywords"
-      content="music, client, open source, music, streaming"
+      content={metadata?.keywords ||
+        "music, client, open source, music, streaming"}
     />
-    <meta name="author" content="KRTirtho" />
+    <meta name="author" content={metadata?.author || "KRTirtho"} />
+    <meta property="og:image" content="/images/spotube-logo.png" />
+    <meta property="og:image:alt" content="Spotube Logo" />
+    <meta property="og:image:type" content="image/png" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={metadata?.title || "Spotube"} />
+    <meta
+      name="twitter:description"
+      content={metadata?.description ||
+        "A cross-platform extensible open-source music streaming platform"}
+    />
+    <meta name="twitter:image" content="/images/spotube-logo.png" />
+    <meta name="twitter:creator" content={metadata?.author || "KRTirtho"} />
+    <meta name="twitter:site" content="@KRTirtho" />
+
     <meta name="robots" content="index, follow" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#1DB954" />
diff --git a/website/src/pages/docs/[...slug]/index.astro b/website/src/pages/docs/[...slug]/index.astro
index 5a4fbc0b..73c3be7e 100644
--- a/website/src/pages/docs/[...slug]/index.astro
+++ b/website/src/pages/docs/[...slug]/index.astro
@@ -30,7 +30,12 @@ if (page.id.startsWith("components/") || page.id.startsWith("integrations/")) {
 }
 ---
 
-<RootLayout>
+<RootLayout
+  metadata={{
+    title: `Docs | ${page.data.title}`,
+    description: page.data.description,
+  }}
+>
   <Drawer class="fixed top-3 left-2 z-50 md:hidden">
     <DocSideBar />
   </Drawer>
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index 180aefc8..af569c38 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -14,7 +14,7 @@ import { ADS_SLOTS } from "~/collections/app";
         <h1 class="h1">Spotube</h1>
         <br />
         <h3 class="h3">
-          A cross-platform Extensible open-source Music Streaming platform
+          A cross-platform extensible open-source music streaming platform
           <div class="inline-flex gap-3 items-center">
             <FaAndroid className="inline text-[#3DDC84]" />
             <FaWindows className="inline text-[#00A2F0]" />
