diff --git a/src/lib/components/Metadata.svelte b/src/lib/components/Metadata.svelte
new file mode 100644
index 0000000000..30c99983d9
--- /dev/null
+++ b/src/lib/components/Metadata.svelte
@@ -0,0 +1,72 @@
+<script lang="ts" context="module">
+	export const DEFAULT_HOST = 'https://website-appwrite.vercel.app';
+	export function buildOpenGraphImage(title: string, description: string): string {
+		return `https://og.appwrite.global/image.png?title=${encodeURIComponent(
+			title
+		)}&subtitle=${encodeURIComponent(description)}`;
+	}
+</script>
+
+<script lang="ts">
+	import type { AuthorData } from '$markdoc/layouts/Author.svelte';
+	import type { PostsData } from '$markdoc/layouts/Post.svelte';
+
+	export let title: string | undefined = undefined;
+	export let description: string | undefined = undefined;
+	export let ogImage: string | undefined = undefined;
+	export let ogTitle: string | undefined = title;
+	export let ogDescription: string | undefined = description;
+	export let author: AuthorData | undefined = undefined;
+	export let post: PostsData | undefined = undefined;
+
+	function createSchemaAuthor(author: AuthorData): string {
+		return JSON.stringify({
+			'@context': 'https://schema.org',
+			'@type': 'Person',
+			name: author.name,
+			url: author.href,
+			image: author.avatar
+		});
+	}
+
+	function createSchemaPost(post: PostsData): string {
+		return JSON.stringify({
+			'@context': 'https://schema.org',
+			'@type': 'BlogPosting',
+			headline: post.title,
+			image: post.cover,
+			datePublished: post.date,
+			dateModified: post.date
+		});
+	}
+</script>
+
+{#if title}
+	<title>{title}</title>
+	<meta name="”twitter:site”" content="@appwrite" />
+{/if}
+{#if description}
+	<meta name="description" content={description} />
+{/if}
+{#if ogImage}
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta name="twitter:image" content={ogImage} />
+	<meta name="”twitter:card”" content="”summary”" />
+{/if}
+{#if ogTitle}
+	<meta property="og:title" content={ogTitle} />
+	<meta name="”twitter:title”" content={ogTitle} />
+{/if}
+{#if ogDescription}
+	<meta property="og:description" content={ogDescription} />
+	<meta name="”twitter:description" content={ogTitle} />
+{/if}
+{#if author}
+	{@html `<script type="application/ld+json">${createSchemaAuthor(author)}</script>`}
+{/if}
+{#if post}
+	{@html `<script type="application/ld+json">${createSchemaPost(post)}</script>`}
+{/if}
+<slot />
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 86191183b0..329fbd8d76 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -9,3 +9,4 @@ export { default as Tooltip } from './Tooltip.svelte';
 export { default as Spline } from './Spline.svelte';
 export { default as Article } from './Article.svelte';
 export { default as Carousel } from './Carousel.svelte';
+export { default as Metadata } from './Metadata.svelte';
diff --git a/src/markdoc/layouts/Article.svelte b/src/markdoc/layouts/Article.svelte
index fe92dc32f6..9a7f64f795 100644
--- a/src/markdoc/layouts/Article.svelte
+++ b/src/markdoc/layouts/Article.svelte
@@ -16,9 +16,10 @@
 <script lang="ts">
 	import { DocsArticle } from '$lib/layouts';
 	import { getContext, setContext } from 'svelte';
-	import { MainFooter } from '$lib/components';
+	import { MainFooter, Metadata } from '$lib/components';
 	import type { TocItem } from '$lib/layouts/DocsArticle.svelte';
 	import { DOCS_TITLE_SUFFIX } from '$routes/titles';
+	import { buildOpenGraphImage } from '$lib/components/Metadata.svelte';
 
 	export let title: string;
 	export let description: string;
@@ -57,8 +58,11 @@
 </script>
 
 <svelte:head>
-	<title>{title}{DOCS_TITLE_SUFFIX}</title>
-	<meta name="description" content={description} />
+	<Metadata
+		title={title + DOCS_TITLE_SUFFIX}
+		{description}
+		ogImage={buildOpenGraphImage(title, description)}
+	/>
 </svelte:head>
 
 <DocsArticle {title} {back} {toc}>
diff --git a/src/markdoc/layouts/Author.svelte b/src/markdoc/layouts/Author.svelte
index 9c84fcf425..4d7e57acfa 100644
--- a/src/markdoc/layouts/Author.svelte
+++ b/src/markdoc/layouts/Author.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <script lang="ts">
-	import { Article, FooterNav, MainFooter } from '$lib/components';
+	import { Article, FooterNav, MainFooter, Metadata } from '$lib/components';
 	import { page } from '$app/stores';
 	import { Main } from '$lib/layouts';
 	import { getContext } from 'svelte';
@@ -36,7 +36,10 @@
 </script>
 
 <svelte:head>
-	<title>{name + BLOG_TITLE_SUFFIX}</title>
+	<Metadata
+		title={name + BLOG_TITLE_SUFFIX}
+		description={bio}
+	/>
 </svelte:head>
 
 <Main>
diff --git a/src/markdoc/layouts/Category.svelte b/src/markdoc/layouts/Category.svelte
index da34266bb3..5a9e407a27 100644
--- a/src/markdoc/layouts/Category.svelte
+++ b/src/markdoc/layouts/Category.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <script lang="ts">
-	import { Article, FooterNav, MainFooter } from '$lib/components';
+	import { Article, FooterNav, MainFooter, Metadata } from '$lib/components';
 	import { Main } from '$lib/layouts';
 	import { getContext } from 'svelte';
 	import type { PostsData } from './Post.svelte';
@@ -23,7 +23,7 @@
 </script>
 
 <svelte:head>
-	<title>{name + BLOG_TITLE_SUFFIX}</title>
+	<Metadata title={name + BLOG_TITLE_SUFFIX} {description} />
 </svelte:head>
 
 <Main>
diff --git a/src/markdoc/layouts/Post.svelte b/src/markdoc/layouts/Post.svelte
index 8eeb4a447c..2457801b44 100644
--- a/src/markdoc/layouts/Post.svelte
+++ b/src/markdoc/layouts/Post.svelte
@@ -13,12 +13,13 @@
 </script>
 
 <script lang="ts">
-	import { Article, FooterNav, MainFooter, Newsletter } from '$lib/components';
+	import { Article, FooterNav, MainFooter, Metadata, Newsletter } from '$lib/components';
 	import { Main } from '$lib/layouts';
 	import { getContext } from 'svelte';
 	import type { AuthorData } from './Author.svelte';
 	import type { CategoryData } from './Category.svelte';
 	import { BLOG_TITLE_SUFFIX } from '$routes/titles';
+	import { DEFAULT_HOST } from '$lib/components/Metadata.svelte';
 
 	export let title: string;
 	export let description: string;
@@ -44,7 +45,12 @@
 </script>
 
 <svelte:head>
-	<title>{title + BLOG_TITLE_SUFFIX}</title>
+	<Metadata
+		title={title + BLOG_TITLE_SUFFIX}
+		{description}
+		ogTitle={title}
+		ogImage={DEFAULT_HOST + cover}
+	/>
 </svelte:head>
 
 <Main>
diff --git a/src/markdoc/layouts/Tutorial.svelte b/src/markdoc/layouts/Tutorial.svelte
index b489ff2cda..c2a4e73da4 100644
--- a/src/markdoc/layouts/Tutorial.svelte
+++ b/src/markdoc/layouts/Tutorial.svelte
@@ -9,7 +9,7 @@
 <script lang="ts">
 	import { DocsTutorial } from '$lib/layouts';
 	import { getContext, setContext } from 'svelte';
-	import { MainFooter } from '$lib/components';
+	import { MainFooter, Metadata } from '$lib/components';
 	import type { TocItem } from '$lib/layouts/DocsArticle.svelte';
 	import { writable } from 'svelte/store';
 	import type { LayoutContext } from './Article.svelte';
@@ -52,8 +52,7 @@
 </script>
 
 <svelte:head>
-	<title>{title}{DOCS_TITLE_SUFFIX}</title>
-	<meta name="description" content={description} />
+	<Metadata title={title + DOCS_TITLE_SUFFIX} {description} />
 </svelte:head>
 
 <DocsTutorial {title} {toc} {tutorials} currentStep={step}>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 92f6d83dd0..50fe25b6da 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -10,12 +10,18 @@
 	import '@fontsource/inter/900.css';
 	import '$scss/index.scss';
 	import { dev } from '$app/environment';
+	import { Metadata } from '$lib/components';
+	import { DEFAULT_HOST } from '$lib/components/Metadata.svelte';
 </script>
 
 <svelte:head>
 	{#if !dev}
 		<script defer data-domain="appwrite.io" src="https://plausible.io/js/script.js"></script>
 	{/if}
+	<Metadata
+		title="Appwrite - Build like a team of hundreds"
+		ogImage="{DEFAULT_HOST}/images/open-graph/website.png"
+	/>
 </svelte:head>
 
 <slot />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5cfb45fd53..173c0e8c76 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Main } from '$lib/layouts';
-	import { Spline } from '$lib/components';
+	import { Metadata, Spline } from '$lib/components';
 	import MainFooter from '../lib/components/MainFooter.svelte';
 	import FooterNav from '../lib/components/FooterNav.svelte';
 	import DeveloperCard from './DeveloperCard.svelte';
diff --git a/src/routes/assets/+page.svelte b/src/routes/assets/+page.svelte
index 4bd2b66018..4ee5757089 100644
--- a/src/routes/assets/+page.svelte
+++ b/src/routes/assets/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Metadata } from '$lib/components';
 	import { Main } from '$lib/layouts';
 	import { TITLE_SUFFIX } from '$routes/titles';
 	import FooterNav from '../../lib/components/FooterNav.svelte';
@@ -6,7 +7,7 @@
 </script>
 
 <svelte:head>
-	<title>Assets{TITLE_SUFFIX}</title>
+	<Metadata title={'Assets' + TITLE_SUFFIX} />
 </svelte:head>
 
 <div class="u-position-absolute" style="pointer-events:none;">
@@ -347,16 +348,16 @@
 							</p>
 							<div class="aw-grid-1-1-opt-2 u-gap-32 u-margin-block-start-12">
 								<div>
-									<img class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line" src="/images/blog/placeholder.png" alt>
+									<img class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line" src="/images/blog/placeholder.png" alt="placeholder">
 								</div>
 								<div>
-									<img class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line" src="/images/blog/placeholder.png" alt>
+									<img class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line" src="/images/blog/placeholder.png" alt="placeholder">
 								</div>
 								<div>
-									<img class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line" src="/images/blog/placeholder.png" alt>
+									<img class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line" src="/images/blog/placeholder.png" alt="placeholder">
 								</div>
 								<div>
-									<img class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line" src="/images/blog/placeholder.png" alt>
+									<img class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line" src="/images/blog/placeholder.png" alt="placeholder">
 								</div>
 
 							</div>
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index d971f8ebc7..7f2b35bdd1 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { Main } from '$lib/layouts';
-	import { MainFooter, FooterNav, Article } from '$lib/components';
+	import { MainFooter, FooterNav, Article, Metadata } from '$lib/components';
 	import { TITLE_SUFFIX } from '$routes/titles.js';
+	import { DEFAULT_HOST } from '$lib/components/Metadata.svelte';
 
 	export let data;
 
@@ -9,7 +10,7 @@
 </script>
 
 <svelte:head>
-	<title>Blog{TITLE_SUFFIX}</title>
+	<Metadata title={'Blog' + TITLE_SUFFIX} ogImage="{DEFAULT_HOST}/images/open-graph/blog.png" />
 </svelte:head>
 
 <Main>
diff --git a/src/routes/community/+page.svelte b/src/routes/community/+page.svelte
index 8dd3fb1073..10c75031ff 100644
--- a/src/routes/community/+page.svelte
+++ b/src/routes/community/+page.svelte
@@ -3,12 +3,12 @@
 	import MainFooter from '$lib/components/MainFooter.svelte';
 	import FooterNav from '$lib/components/FooterNav.svelte';
 	import PreFooter from '$lib/components/PreFooter.svelte';
-	import { Carousel } from '$lib/components';
+	import { Carousel, Metadata } from '$lib/components';
 	import { TITLE_SUFFIX } from '$routes/titles';
 </script>
 
 <svelte:head>
-	<title>Community{TITLE_SUFFIX}</title>
+	<Metadata title={'Community' + TITLE_SUFFIX} />
 </svelte:head>
 
 <Main>
diff --git a/src/routes/company/+page.svelte b/src/routes/company/+page.svelte
index 2adaada2e1..6c40733da3 100644
--- a/src/routes/company/+page.svelte
+++ b/src/routes/company/+page.svelte
@@ -3,10 +3,11 @@
 	import MainFooter from '$lib/components/MainFooter.svelte';
 	import FooterNav from '$lib/components/FooterNav.svelte';
 	import { TITLE_SUFFIX } from '$routes/titles';
+	import { Metadata } from '$lib/components';
 </script>
 
 <svelte:head>
-	<title>Company{TITLE_SUFFIX}</title>
+	<Metadata title={'Company' + TITLE_SUFFIX} />
 </svelte:head>
 
 <Main>
diff --git a/src/routes/contact-us/+page.svelte b/src/routes/contact-us/+page.svelte
index 3877c0f97a..6365cf6d19 100644
--- a/src/routes/contact-us/+page.svelte
+++ b/src/routes/contact-us/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Metadata } from '$lib/components';
 	import { Main } from '$lib/layouts';
 	import { TITLE_SUFFIX } from '$routes/titles';
 	import FooterNav from '../../lib/components/FooterNav.svelte';
@@ -35,7 +36,7 @@
 </script>
 
 <svelte:head>
-	<title>Contact us{TITLE_SUFFIX}</title>
+	<Metadata title={'Contact us' + TITLE_SUFFIX} />
 </svelte:head>
 
 <div class="u-position-absolute" style="pointer-events:none;">
diff --git a/src/routes/cookies/+page.svelte b/src/routes/cookies/+page.svelte
index 1ce779ca27..0f6ff34db3 100644
--- a/src/routes/cookies/+page.svelte
+++ b/src/routes/cookies/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Metadata } from '$lib/components';
 	import { Main } from '$lib/layouts';
 	import { TITLE_SUFFIX } from '$routes/titles';
 	import FooterNav from '../../lib/components/FooterNav.svelte';
@@ -6,7 +7,7 @@
 </script>
 
 <svelte:head>
-	<title>Cookies{TITLE_SUFFIX}</title>
+	<Metadata title={'Cookies' + TITLE_SUFFIX} />
 </svelte:head>
 
 <div class="u-position-absolute" style="pointer-events:none;">
diff --git a/src/routes/docs/+layout.svelte b/src/routes/docs/+layout.svelte
new file mode 100644
index 0000000000..4e3c72123a
--- /dev/null
+++ b/src/routes/docs/+layout.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Metadata } from '$lib/components';
+	import { DEFAULT_HOST } from '$lib/components/Metadata.svelte';
+	import { TITLE_SUFFIX } from '$routes/titles';
+</script>
+
+<svelte:head>
+	<Metadata title={'Docs' + TITLE_SUFFIX} ogImage={DEFAULT_HOST + '/images/open-graph/docs.png'} />
+</svelte:head>
+
+<slot />
diff --git a/src/routes/docs/quick-starts/nuxt/+page.markdoc b/src/routes/docs/quick-starts/nuxt/+page.markdoc
index 37b561cd4c..c5c379c26c 100644
--- a/src/routes/docs/quick-starts/nuxt/+page.markdoc
+++ b/src/routes/docs/quick-starts/nuxt/+page.markdoc
@@ -6,11 +6,125 @@ difficulty: beginner
 readtime: 3
 ---
 
-Improve the docs, add this guide.
+Learn to setup your first Nuxt project powered by Appwrite.
+{% section #step-1 step=1 title="Create project" %}
+Head to the [Appwrite Console](https://cloud.appwrite.io/console).
 
-We still don't have this guide in place, but we do have some great news. 
-The Appwrite docs, just like Appwrite, is completely open sourced.
-This means, anyone can help improve them and add new guides and tutorials. 
+{% only_dark %}
+![Create project screen](/images/docs/quick-starts/dark/create-project.png)
+{% /only_dark %}
+{% only_light %}
+![Create project screen](/images/docs/quick-starts/create-project.png)
+{% /only_light %}
 
-If you see this page, **we're actively looking for contributions to this page**.
-Follow our contribution guidelines, open a PR to [our Website repo](https://github.com/appwrite/website), and collaborate with our core team to improve this page.
\ No newline at end of file
+If this is your first time using Appwrite, create an account and create your first project.
+
+Then, under **Add a platform**, add a **Web app**. The **Hostname** should be `localhost`. 
+
+
+{% only_dark %}
+![Add a platform](/images/docs/quick-starts/dark/add-platform.png)
+{% /only_dark %}
+{% only_light %}
+![Add a platform](/images/docs/quick-starts/add-platform.png)
+{% /only_light %}
+
+You can skip optional steps.
+
+{% /section %}
+{% section #step-2 step=2 title="Create Nuxt project" %}
+Create a Nuxt project.
+
+```sh
+npx nuxi@latest init my-app && cd my app
+
+```
+{% /section %}
+{% section #step-3 step=3 title="Install Appwrite" %}
+
+Install the JavaScript Appwrite SDK.
+
+```sh
+npm install appwrite
+```
+{% /section %}
+{% section #step-4 step=4 title="Import Appwrite" %}
+Find your project's ID in the **Settings** page. 
+
+{% only_dark %}
+![Project settings screen](/images/docs/quick-starts/dark/project-id.png)
+{% /only_dark %}
+{% only_light %}
+![Project settings screen](/images/docs/quick-starts/project-id.png)
+{% /only_light %}
+
+Create a new file `utils/appwrite.js` and add the following code to it, replace `<YOUR_PROJECT_ID>` with your project ID.
+
+```js
+import { Client, Account} from 'appwrite';
+
+export const client = new Client();
+
+client
+    .setEndpoint('https://cloud.appwrite.io/v1')
+    .setProject('<YOUR_PROJECT_ID>'); // Replace with your project ID
+
+export const account = new Account(client);
+export { ID } from 'appwrite';
+```
+{% /section %}
+{% section #step-5 step=5 title="Create a login page" %}
+Add the following code to `app.vue`.
+
+```html
+<template>
+  <div>
+    <p>
+      {{ loggedInUser ? `Logged in as ${loggedInUser.name}` : 'Not logged in' }}
+    </p>
+
+    <form>
+      <input type="email" placeholder="Email" v-model="email" />
+      <input type="password" placeholder="Password" v-model="password" />
+      <input type="text" placeholder="Name" v-model="name" />
+      <button type="button" @click="login(email, password)">Login</button>
+      <button type="button" @click="register">
+        Register
+      </button>
+      <button type="button" @click="logout">
+        Logout
+      </button>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { account, ID } from './utils/appwrite.js';
+
+const loggedInUser = ref(null);
+const email = ref('');
+const password = ref('');
+const name = ref('');
+
+const login = async (email, password) => {
+  await account.createEmailSession(email, password);
+  loggedInUser.value = await account.get();
+};
+
+const register = async () => {
+  await account.create(ID.unique(), email.value, password.value, name.value);
+  login(email.value, password.value);
+};
+
+const logout = async () => {
+  await account.deleteSession('current');
+  loggedInUser.value = null;
+};
+</script>
+```
+{% /section %}
+
+{% section #step-6 step=6 title="Checkout what you've built" %}
+Run your project with `npm run dev -- --open --port 3000` and open [http://localhost:3000](http://localhost:3000) in your browser.
+{% /section %}
diff --git a/src/routes/docs/references/+layout.svelte b/src/routes/docs/references/+layout.svelte
index fa9c52f851..e1225b5ffb 100644
--- a/src/routes/docs/references/+layout.svelte
+++ b/src/routes/docs/references/+layout.svelte
@@ -73,16 +73,16 @@
 				}
 			]
 		},
-		{
-			label: 'Debugging',
-			items: [
-				{
-					icon: 'icon-document-search',
-					label: 'Response codes',
-					href: '/docs/advanced/platform/response-codes'
-				}
-			]
-		}
+		// {
+		// 	label: 'Debugging',
+		// 	items: [
+		// 		{
+		// 			icon: 'icon-document-search',
+		// 			label: 'Response codes',
+		// 			href: '/docs/advanced/platform/response-codes'
+		// 		}
+		// 	]
+		// }
 	] as NavTree;
 
 	const parent: NavParent = {
diff --git a/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte b/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
index 25772f518a..dfebb90ded 100644
--- a/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
+++ b/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
-	import { MainFooter } from '$lib/components';
+	import { MainFooter, Metadata } from '$lib/components';
 	import { layoutState, toggleReferences } from '$lib/layouts/Docs.svelte';
 	import { parse } from '$lib/utils/markdown';
 	import {
@@ -64,11 +64,11 @@
 
 	$: platform = $page.params.platform as Platform;
 	$: platformType = platform.startsWith('client-') ? 'CLIENT' : 'SERVER';
-	$: serviceName = serviceMap[data.service?.name]
+	$: serviceName = serviceMap[data.service?.name];
 </script>
 
 <svelte:head>
-	<title>{serviceName}{DOCS_TITLE_SUFFIX}</title>
+	<Metadata title={serviceName + DOCS_TITLE_SUFFIX} />
 </svelte:head>
 
 <main class="u-contents">
diff --git a/src/routes/heroes/+page.svelte b/src/routes/heroes/+page.svelte
index 93a05b3f7a..ab72b2e236 100644
--- a/src/routes/heroes/+page.svelte
+++ b/src/routes/heroes/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { FooterNav, MainFooter } from '$lib/components';
+	import { FooterNav, MainFooter, Metadata } from '$lib/components';
 	import { Main } from '$lib/layouts';
 	import { TITLE_SUFFIX } from '$routes/titles';
 </script>
 
 <svelte:head>
-	<title>Heroes{TITLE_SUFFIX}</title>
+	<Metadata title={'Heroes' + TITLE_SUFFIX} />
 </svelte:head>
 
 <div
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
index dd29ec7e39..b952636199 100644
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { FooterNav, MainFooter, PreFooter } from '$lib/components';
+	import { FooterNav, MainFooter, Metadata, PreFooter } from '$lib/components';
 
 	import { Main } from '$lib/layouts';
 	import { TITLE_SUFFIX } from '$routes/titles';
@@ -8,7 +8,7 @@
 </script>
 
 <svelte:head>
-	<title>Pricing{TITLE_SUFFIX}</title>
+	<Metadata title={'Pricing' + TITLE_SUFFIX} />
 </svelte:head>
 
 <div class="u-position-absolute u-overflow-hidden" style="pointer-events:none; inline-size:100%;">
diff --git a/src/routes/privacy/+page.svelte b/src/routes/privacy/+page.svelte
index fded808e02..ca0d950000 100644
--- a/src/routes/privacy/+page.svelte
+++ b/src/routes/privacy/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Metadata } from '$lib/components';
 	import { Main } from '$lib/layouts';
 	import { TITLE_SUFFIX } from '$routes/titles';
 
@@ -7,7 +8,7 @@
 </script>
 
 <svelte:head>
-	<title>Privacy{TITLE_SUFFIX}</title>
+	<Metadata title={'Privacy' + TITLE_SUFFIX} />
 </svelte:head>
 
 <div class="u-position-absolute" style="pointer-events:none;">
diff --git a/src/scss/7-components/_side-nav.scss b/src/scss/7-components/_side-nav.scss
index 3bf60ec707..61710f14f6 100644
--- a/src/scss/7-components/_side-nav.scss
+++ b/src/scss/7-components/_side-nav.scss
@@ -18,14 +18,14 @@
 
 
   position:sticky; z-index:35; inset-block-start:pxToRem(74); inset-block-end:0;
-  block-size:calc(100vh - pxToRem(75));
+  block-size:calc(100vh - pxToRem(81));
   .#{$p}-icon-button { transition:var(--transition); margin-block-end:pxToRem(-4); margin-inline-end:pxToRem(6); }
 
 
 
   &-wrapper {
     display:flex; flex-direction:column; block-size:100%; gap:pxToRem(16);
-    padding-inline:pxToRem(16);
+    padding:pxToRem(16); padding-block-end:pxToRem(32);
     background-color:hsl(var(--p-side-nav-bg-color)); transition:var(--transition);
     
     &-parent {
@@ -39,7 +39,7 @@
     @include scroll(); overflow-y:auto; overflow-x:hidden;
     flex:1;
     display:flex; flex-direction:column; gap:pxToRem(24);
-    padding:pxToRem(16); margin-inline:pxToRem(-16); 
+    padding-inline:pxToRem(16); margin-inline:pxToRem(-16); 
 
     .#{$p}-is-only-mobile  & {
       border-block-start: 1px solid hsl(var(--aw-color-smooth));
diff --git a/static/images/open-graph/blog.png b/static/images/open-graph/blog.png
new file mode 100644
index 0000000000..cfd81f4b4a
Binary files /dev/null and b/static/images/open-graph/blog.png differ
diff --git a/static/images/open-graph/docs.png b/static/images/open-graph/docs.png
new file mode 100644
index 0000000000..99d78e8960
Binary files /dev/null and b/static/images/open-graph/docs.png differ
diff --git a/static/images/open-graph/website.png b/static/images/open-graph/website.png
new file mode 100644
index 0000000000..3f9c57ff26
Binary files /dev/null and b/static/images/open-graph/website.png differ