diff --git a/src/lib/components/Carousel.svelte b/src/lib/components/Carousel.svelte
new file mode 100644
index 0000000000..653e9e7d1f
--- /dev/null
+++ b/src/lib/components/Carousel.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+	let carousel: HTMLElement;
+
+	export let gap = 32;
+	let scroll = 0;
+	let touchStart = 0;
+	let touchEnd = 0;
+
+	function calculateScrollAmount(prev = false) {
+		const direction = prev ? -1 : 1;
+		const carouselSize = carousel?.clientWidth;
+		const childSize = (carousel.childNodes[0] as HTMLUListElement)?.clientWidth + gap;
+
+		scroll = scroll || carouselSize;
+
+		const numberOfItems = Math.floor(carouselSize / childSize);
+		const overflow = scroll % childSize;
+		const amount = numberOfItems * childSize - overflow * direction;
+		scroll += amount * direction;
+		return amount * direction;
+	}
+
+	function next() {
+		carousel.scrollBy({
+			left: calculateScrollAmount(),
+			behavior: 'smooth'
+		});
+	}
+	function prev() {
+		carousel.scrollBy({
+			left: calculateScrollAmount(true),
+			behavior: 'smooth'
+		});
+	}
+
+	function handleTouchStart(e: TouchEvent) {
+		touchStart = e.touches[0].clientX;
+	}
+	function handleTouchMove(e: TouchEvent) {
+		touchEnd = e.touches[0].clientX;
+	}
+
+	function handleTouchEnd() {
+		if (touchEnd > touchStart) {
+			prev();
+		} else {
+			next();
+		}
+	}
+</script>
+
+<div class="u-flex u-main-space-between u-flex-wrap">
+	<slot name="header" />
+	<div class="u-flex u-gap-12 u-cross-end u-margin-block-start-8">
+		<button class="aw-icon-button" aria-label="Move carousel backward" on:click={() => prev()}>
+			<span class="icon-arrow-left" aria-hidden="true" />
+		</button>
+		<button class="aw-icon-button" aria-label="Move carousel forward" on:click={() => next()}>
+			<span class="icon-arrow-right" aria-hidden="true" />
+		</button>
+	</div>
+</div>
+<ul
+	class="aw-grid-articles aw-u-gap-32 u-margin-block-start-32 carousel"
+	bind:this={carousel}
+	on:touchstart={handleTouchStart}
+	on:touchmove={handleTouchMove}
+	on:touchend={handleTouchEnd}
+>
+	<slot />
+</ul>
+
+<style lang="scss">
+	.carousel {
+		grid-auto-flow: column;
+		grid-auto-columns: minmax(17.5rem, 1fr);
+		overflow-x: hidden;
+	}
+</style>
diff --git a/src/lib/components/FooterNav.svelte b/src/lib/components/FooterNav.svelte
index b97ff6c44b..f47ecb82ef 100644
--- a/src/lib/components/FooterNav.svelte
+++ b/src/lib/components/FooterNav.svelte
@@ -2,9 +2,11 @@
 	<img class="aw-logo" src="/images/logos/appwrite.svg" alt="appwrite" width="130" />
 	<ul class="aw-footer-nav-main-list">
 		<li class="aw-footer-nav-main-item">
-			<h5 class="aw-footer-nav-main-title aw-is-not-mobile">Quick starts</h5>
+			<h5 class="aw-footer-nav-main-title aw-is-not-mobile aw-caption-500 aw-eyebrow">
+				Quick starts
+			</h5>
 			<button class="aw-footer-nav-button aw-is-only-mobile">
-				<span class="aw-caption-500">Quick starts</span>
+				<span class="aw-caption-500 aw-eyebrow">Quick starts</span>
 				<svg
 					class="aw-footer-nav-button-arrow"
 					xmlns="http://www.w3.org/2000/svg"
@@ -21,23 +23,43 @@
 					/>
 				</svg>
 			</button>
-			<ul class="aw-footer-nav-secondary-list">
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/quick-starts/flutter">Flutter</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/quick-starts/nextjs">Next.js</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/quick-starts/vuejs">Vue.js</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/quick-starts/sveltekit">SvelteKit</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/quick-starts/apple">Apple</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/quick-starts/android">Android</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/quick-starts/nuxt">Nuxt</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/quick-starts/angular">Angular</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/quick-starts/qwik">Qwik</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/quick-starts/astro">Astro</a></li>
+			<ul class="aw-footer-nav-secondary-list aw-sub-body-400">
+				<li>
+					<a class="aw-link" href="/docs/quick-starts/flutter">Flutter</a>
+				</li>
+				<li>
+					<a class="aw-link" href="/docs/quick-starts/nextjs">Next.js</a>
+				</li>
+				<li>
+					<a class="aw-link" href="/docs/quick-starts/vuejs">Vue.js</a>
+				</li>
+				<li>
+					<a class="aw-link" href="/docs/quick-starts/sveltekit">SvelteKit</a>
+				</li>
+				<li>
+					<a class="aw-link" href="/docs/quick-starts/apple">Apple</a>
+				</li>
+				<li>
+					<a class="aw-link" href="/docs/quick-starts/android">Android</a>
+				</li>
+				<li>
+					<a class="aw-link" href="/docs/quick-starts/nuxt">Nuxt</a>
+				</li>
+				<li>
+					<a class="aw-link" href="/docs/quick-starts/angular">Angular</a>
+				</li>
+				<li>
+					<a class="aw-link" href="/docs/quick-starts/qwik">Qwik</a>
+				</li>
+				<li>
+					<a class="aw-link" href="/docs/quick-starts/astro">Astro</a>
+				</li>
 			</ul>
 		</li>
 		<li class="aw-footer-nav-main-item">
-			<h5 class="aw-footer-nav-main-title aw-is-not-mobile">Products</h5>
+			<h5 class="aw-footer-nav-main-title aw-is-not-mobile aw-caption-500 aw-eyebrow">Products</h5>
 			<button class="aw-footer-nav-button aw-is-only-mobile">
-				<span class="aw-caption-500">Products</span>
+				<span class="aw-caption-500 aw-eyebrow">Products</span>
 				<svg
 					class="aw-footer-nav-button-arrow"
 					xmlns="http://www.w3.org/2000/svg"
@@ -54,18 +76,28 @@
 					/>
 				</svg>
 			</button>
-			<ul class="aw-footer-nav-secondary-list">
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/products/auth">Auth</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/products/databases">Databases</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/products/functions">Functions</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/products/storage">Storage</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/apis/realtime">Realtime</a></li>
+			<ul class="aw-footer-nav-secondary-list aw-sub-body-400">
+				<li>
+					<a class="aw-link" href="/docs/products/auth">Auth</a>
+				</li>
+				<li>
+					<a class="aw-link" href="/docs/products/databases">Databases</a>
+				</li>
+				<li>
+					<a class="aw-link" href="/docs/products/functions">Functions</a>
+				</li>
+				<li>
+					<a class="aw-link" href="/docs/products/storage">Storage</a>
+				</li>
+				<li>
+					<a class="aw-link" href="/docs/apis/realtime">Realtime</a>
+				</li>
 			</ul>
 		</li>
 		<li class="aw-footer-nav-main-item">
-			<h5 class="aw-footer-nav-main-title aw-is-not-mobile">Learn</h5>
+			<h5 class="aw-footer-nav-main-title aw-is-not-mobile aw-caption-500 aw-eyebrow">Learn</h5>
 			<button class="aw-footer-nav-button is-open aw-is-only-mobile">
-				<span class="aw-caption-500">Learn</span>
+				<span class="aw-caption-500 aw-eyebrow">Learn</span>
 				<svg
 					class="aw-footer-nav-button-arrow"
 					xmlns="http://www.w3.org/2000/svg"
@@ -82,18 +114,29 @@
 					/>
 				</svg>
 			</button>
-			<ul class="aw-footer-nav-secondary-list">
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs">Docs</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/community">Community</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/blog">Blog</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/roadmap">Roadmap</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="https://github.com/appwrite/appwrite/releases" target="_blank">Changelog</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="https://status.appwrite.io" target="_blank">Status</a></li>
+			<ul class="aw-footer-nav-secondary-list aw-sub-body-400">
+				<li>
+					<a class="aw-link" href="/docs">Docs</a>
+				</li>
+				<li>
+					<a class="aw-link" href="/community">Community</a>
+				</li>
+				<li><a class="aw-link" href="/blog">Blog</a></li>
+				<li><a class="aw-link" href="/roadmap">Roadmap</a></li>
+				<li>
+					<a class="aw-link" href="https://github.com/appwrite/appwrite/releases" target="_blank"
+						>Changelog</a
+					>
+				</li>
+				<li>
+					<a class="aw-link" href="https://status.appwrite.io" target="_blank">Status</a>
+				</li>
 			</ul>
-		</li><li class="aw-footer-nav-main-item">
-			<h5 class="aw-footer-nav-main-title aw-is-not-mobile">About</h5>
+		</li>
+		<li class="aw-footer-nav-main-item">
+			<h5 class="aw-footer-nav-main-title aw-is-not-mobile aw-caption-500 aw-eyebrow">About</h5>
 			<button class="aw-footer-nav-button is-open aw-is-only-mobile">
-				<span class="aw-caption-500">About</span>
+				<span class="aw-caption-500 aw-eyebrow">About</span>
 				<svg
 					class="aw-footer-nav-button-arrow"
 					xmlns="http://www.w3.org/2000/svg"
@@ -110,20 +153,24 @@
 					/>
 				</svg>
 			</button>
-			<ul class="aw-footer-nav-secondary-list">
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/pricing">Pricing</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/company">Company</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/careers">Careers</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/heroes">Heroes</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="https://store.appwrite.io" target="_blank">Store</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/brand">Brand</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/contact-us">Contact us</a></li>
+			<ul class="aw-footer-nav-secondary-list aw-sub-body-400">
+				<li><a class="aw-link" href="/pricing">Pricing</a></li>
+				<li><a class="aw-link" href="/company">Company</a></li>
+				<li><a class="aw-link" href="/careers">Careers</a></li>
+				<li><a class="aw-link" href="/heroes">Heroes</a></li>
+				<li>
+					<a class="aw-link" href="https://store.appwrite.io" target="_blank">Store</a>
+				</li>
+				<li><a class="aw-link" href="/brand">Brand</a></li>
+				<li>
+					<a class="aw-link" href="/contact-us">Contact us</a>
+				</li>
 			</ul>
 		</li>
 		<li class="aw-footer-nav-main-item">
-			<h5 class="aw-footer-nav-main-title aw-is-not-mobile">Policies</h5>
+			<h5 class="aw-footer-nav-main-title aw-is-not-mobile aw-caption-500 aw-eyebrow">Policies</h5>
 			<button class="aw-footer-nav-button aw-is-only-mobile">
-				<span class="aw-caption-500">Policies</span>
+				<span class="aw-caption-500 aw-eyebrow">Policies</span>
 				<svg
 					class="aw-footer-nav-button-arrow"
 					xmlns="http://www.w3.org/2000/svg"
@@ -140,10 +187,10 @@
 					/>
 				</svg>
 			</button>
-			<ul class="aw-footer-nav-secondary-list">
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/terms">Terms</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/privacy">Privacy</a></li>
-				<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/cookies">Cookies</a></li>
+			<ul class="aw-footer-nav-secondary-list aw-sub-body-400">
+				<li><a class="aw-link" href="/terms">Terms</a></li>
+				<li><a class="aw-link" href="/privacy">Privacy</a></li>
+				<li><a class="aw-link" href="/cookies">Cookies</a></li>
 			</ul>
 		</li>
 	</ul>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 462f608a15..86191183b0 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -8,3 +8,4 @@ export { default as Newsletter } from './Newsletter.svelte';
 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';
diff --git a/src/markdoc/layouts/Author.svelte b/src/markdoc/layouts/Author.svelte
index 026f74dbab..71ef0a0a19 100644
--- a/src/markdoc/layouts/Author.svelte
+++ b/src/markdoc/layouts/Author.svelte
@@ -1,6 +1,7 @@
 <script context="module" lang="ts">
 	export type AuthorData = {
 		name: string;
+		id: string;
 		role: string;
 		avatar: string;
 		bio: string;
diff --git a/src/routes/blog/+layout.ts b/src/routes/blog/+layout.ts
index 0e6cbd085b..52799f8336 100644
--- a/src/routes/blog/+layout.ts
+++ b/src/routes/blog/+layout.ts
@@ -41,6 +41,7 @@ export function load() {
 		const { frontmatter } = authorList as {
 			frontmatter: AuthorData;
 		};
+		const name = frontmatter.id ?? frontmatter.name.toLowerCase().replace(' ', '-');
 
 		return {
 			name: frontmatter.name,
@@ -50,7 +51,7 @@ export function load() {
 			twitter: frontmatter.twitter,
 			linkedin: frontmatter.linkedin,
 			github: frontmatter.github,
-			href: `${base}/blog/author/${frontmatter.name.toLowerCase()}`
+			href: `${base}/blog/author/${name}`
 		};
 	});
 
diff --git a/src/routes/blog/+page.ts b/src/routes/blog/+page.ts
index 0f516f0930..8bcb376476 100644
--- a/src/routes/blog/+page.ts
+++ b/src/routes/blog/+page.ts
@@ -38,6 +38,8 @@ export function load() {
 			frontmatter: AuthorData;
 		};
 
+		const name = frontmatter.id ?? frontmatter.name.toLowerCase().replace(' ', '-');
+
 		return {
 			name: frontmatter.name,
 			role: frontmatter.role,
@@ -46,7 +48,7 @@ export function load() {
 			twitter: frontmatter.twitter,
 			linkedin: frontmatter.linkedin,
 			github: frontmatter.github,
-			href: `${base}/blog/author/${frontmatter.name.toLowerCase()}`
+			href: `${base}/blog/author/${name}`
 		};
 	});
 
diff --git a/src/routes/blog/author/arman/+page.markdoc b/src/routes/blog/author/arman/+page.markdoc
index 0c075d1ef2..95797672e6 100644
--- a/src/routes/blog/author/arman/+page.markdoc
+++ b/src/routes/blog/author/arman/+page.markdoc
@@ -1,6 +1,7 @@
 ---
 layout: author
 name: Arman
+id: arman
 role: Frontend Developer
 bio: In ♥ with Svelte and Vue, currently working at Appwrite
 avatar: /images/avatars/arman.png
diff --git a/src/routes/blog/author/eldad/+page.markdoc b/src/routes/blog/author/eldad/+page.markdoc
index cef6dbbd27..b895800f5e 100644
--- a/src/routes/blog/author/eldad/+page.markdoc
+++ b/src/routes/blog/author/eldad/+page.markdoc
@@ -1,6 +1,7 @@
 ---
 layout: author
 name: Eldad
+id: eldad
 role: Big boss
 bio: Creator of Appwrite
 avatar: /images/avatars/eldad.png
diff --git a/src/routes/docs/+error.svelte b/src/routes/docs/+error.svelte
index febcb0ca97..7c8d68edb4 100644
--- a/src/routes/docs/+error.svelte
+++ b/src/routes/docs/+error.svelte
@@ -1,21 +1,32 @@
 <script lang="ts">
 	import { page } from '$app/stores';
+	import { MainFooter } from '$lib/components';
 	import { Docs } from '$lib/layouts';
 	import Sidebar from './Sidebar.svelte';
 </script>
 
 <Docs variant="two-side-navs">
 	<Sidebar />
-	<main class="u-contents">
-		<article class="aw-article u-contents">
-			<header class="aw-article-header">
-				<div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
-					<div class="u-position-relative u-flex u-cross-center">
-						<h1 class="aw-title">{$page?.error?.message}</h1>
-					</div>
-				</div>
-			</header>
-			<div class="aw-article-content">I am a placeholder for an error site.</div>
-		</article>
-	</main>
+	<div
+		class="aw-article u-flex u-main-center u-cross-center u-padding-block-16 u-max-width-700 u-margin-inline-auto"
+	>
+		<div class="aw-container">
+			<div class="aw-hero" style="--hero-gap:1.25rem;">
+				<span class="aw-badges aw-eyebrow">{$page.status}</span>
+				<h1 class="aw-headline aw-u-color-text-primary">
+					{$page.error?.message ?? 'An error has occured'}
+				</h1>
+				{#if $page.status === 404}
+					<p class="aw-description">
+						Sorry, it seems that the page you are looking for does not exist. Feel free to use our
+						navigation menu or the button below to explore more of Appwrite's documentation.
+					</p>
+				{/if}
+				<a href="/docs" class="aw-button is-secondary u-cross-child-center u-margin-block-start-12">
+					<span>Back to docs</span>
+				</a>
+			</div>
+		</div>
+	</div>
+	<MainFooter variant="docs" />
 </Docs>
diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte
index 9ba4ce1d53..83aa7a8813 100644
--- a/src/routes/docs/+page.svelte
+++ b/src/routes/docs/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Carousel } from '$lib/components';
 	import { Spline } from '$lib/components';
 	import Docs from '$lib/layouts/Docs.svelte';
 	import MainFooter from '../../lib/components/MainFooter.svelte';
@@ -63,13 +64,17 @@
 
 	<main class="aw-main-section u-position-relative">
 		<section class="aw-hero is-align-start">
-			<h1 class="aw-display aw-u-color-text-primary u-max-width-600">Run on any provider or through Appwrite Cloud</h1>
+			<h1 class="aw-display aw-u-color-text-primary u-max-width-600">
+				Run on any provider or through Appwrite Cloud
+			</h1>
 			<p class="aw-description u-max-width-600">
 				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ultrices lacus.
 			</p>
 		</section>
 		<section class="aw-hero is-align-start">
-			<h2 class="aw-title aw-u-color-text-primary u-max-width-600">Get started quickly with your preferred technology</h2>
+			<h2 class="aw-title aw-u-color-text-primary u-max-width-600">
+				Get started quickly with your preferred technology
+			</h2>
 			<p class="aw-description u-max-width-600">
 				Start building with your preferred web, mobile, and native frameworks by following a quick
 				start guide.
@@ -216,146 +221,506 @@
 				<span class="aw-sub-body-500">Explore all technologies</span>
 			</button>
 		</section>
-		<section class="aw-hero is-align-start is-no-max-width">
-			<h2 class="aw-title aw-u-color-text-primary u-max-width-600">Show me some code</h2>
-			<p class="aw-description u-max-width-600">
-				Talk is cheap, where's the code? If you'd rather see some examples, we've got you covered.
-				Clone a template to get started.
-			</p>
-			<div class="aw-articles">
-				<ul class="aw-articles-list">
+		<section class=" is-align-start">
+			<Carousel>
+				<svelte:fragment slot="header">
+					<div>
+						<h2 class="aw-title aw-u-color-text-primary u-max-width-600">Show me some code</h2>
+						<p class="aw-description u-max-width-600">
+							Talk is cheap, where's the code? If you'd rather see some examples, we've got you
+							covered. Clone a template to get started.
+						</p>
+					</div>
+				</svelte:fragment>
+				<svelte:fragment>
 					<li>
 						<a
+							class="aw-grid-articles-item is-full-color"
 							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
 							target="_blank"
 							rel="noopener noreferrer"
 						>
-							<article class="aw-articles-item">
+							<div class="aw-grid-articles-item-image">
 								<img
-									class="aw-articles-item-image"
+									class="aw-u-media-ratio-16-9"
 									src="https://pink.appwrite.io/articles/announcement.png"
 									alt=""
 									loading="lazy"
 								/>
-								<div class="aw-articles-item-content">
-									<header class="aw-articles-item-header">
-										<h3 class="aw-sub-body-500">React sign up template</h3>
-									</header>
-									<p
-										class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
-									>
-										Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-									</p>
-								</div>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
 							</article>
 						</a>
 					</li>
 					<li>
 						<a
+							class="aw-grid-articles-item is-full-color"
 							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
 							target="_blank"
 							rel="noopener noreferrer"
 						>
-							<article class="aw-articles-item">
+							<div class="aw-grid-articles-item-image">
 								<img
-									class="aw-articles-item-image"
-									src="https://pink.appwrite.io/articles/announcement.png"
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/146"
 									alt=""
 									loading="lazy"
 								/>
-								<div class="aw-articles-item-content">
-									<header class="aw-articles-item-header">
-										<h3 class="aw-sub-body-500">React sign up template</h3>
-									</header>
-									<p
-										class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
-									>
-										Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-									</p>
-								</div>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
 							</article>
 						</a>
 					</li>
 					<li>
 						<a
+							class="aw-grid-articles-item is-full-color"
 							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
 							target="_blank"
 							rel="noopener noreferrer"
 						>
-							<article class="aw-articles-item">
+							<div class="aw-grid-articles-item-image">
 								<img
-									class="aw-articles-item-image"
-									src="https://pink.appwrite.io/articles/announcement.png"
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/261/147"
 									alt=""
 									loading="lazy"
 								/>
-								<div class="aw-articles-item-content">
-									<header class="aw-articles-item-header">
-										<h3 class="aw-sub-body-500">React sign up template</h3>
-									</header>
-									<p
-										class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
-									>
-										Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-									</p>
-								</div>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
 							</article>
 						</a>
 					</li>
 					<li>
 						<a
+							class="aw-grid-articles-item is-full-color"
 							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
 							target="_blank"
 							rel="noopener noreferrer"
 						>
-							<article class="aw-articles-item">
+							<div class="aw-grid-articles-item-image">
 								<img
-									class="aw-articles-item-image"
-									src="https://pink.appwrite.io/articles/announcement.png"
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/148"
 									alt=""
 									loading="lazy"
 								/>
-								<div class="aw-articles-item-content">
-									<header class="aw-articles-item-header">
-										<h3 class="aw-sub-body-500">React sign up template</h3>
-									</header>
-									<p
-										class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
-									>
-										Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-									</p>
-								</div>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
 							</article>
 						</a>
 					</li>
 					<li>
 						<a
+							class="aw-grid-articles-item is-full-color"
 							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
 							target="_blank"
 							rel="noopener noreferrer"
 						>
-							<article class="aw-articles-item">
+							<div class="aw-grid-articles-item-image">
 								<img
-									class="aw-articles-item-image"
-									src="https://pink.appwrite.io/articles/announcement.png"
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
 									alt=""
 									loading="lazy"
 								/>
-								<div class="aw-articles-item-content">
-									<header class="aw-articles-item-header">
-										<h3 class="aw-sub-body-500">React sign up template</h3>
-									</header>
-									<p
-										class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
-									>
-										Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-									</p>
-								</div>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
 							</article>
 						</a>
 					</li>
-				</ul>
-			</div>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+				</svelte:fragment>
+			</Carousel>
 		</section>
 		<section class="aw-hero is-align-start is-no-max-width">
 			<h2 class="aw-title aw-u-color-text-primary u-max-width-600">Show me some code</h2>
@@ -377,7 +742,9 @@
 					<li>
 						<div class="aw-card is-full-color">
 							<img src="/images/icons/illustrated/dark/databases.png" alt="" />
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">Databases</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								Databases
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Store your application and users' data.
 							</p>
@@ -386,7 +753,9 @@
 					<li>
 						<div class="aw-card is-full-color">
 							<img src="/images/icons/illustrated/dark/functions.png" alt="" />
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">Functions</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								Functions
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Extend and customize your server's functionality.
 							</p>
@@ -395,7 +764,9 @@
 					<li>
 						<div class="aw-card is-full-color">
 							<img src="/images/icons/illustrated/dark/storage.png" alt="" />
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">Storage</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								Storage
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Store images, videos, documents, and files.
 							</p>
@@ -404,7 +775,9 @@
 					<li>
 						<div class="aw-card is-full-color">
 							<img src="/images/icons/illustrated/dark/realtime.png" alt="" />
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">Realtime</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								Realtime
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Listen to any events on the server-side in realtime.
 							</p>
@@ -412,8 +785,9 @@
 					</li>
 					<li>
 						<div class="aw-card is-full-color u-opacity-20">
-							<img src="/images/icons/illustrated/dark/messaging.png" alt="" />
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">Messaging</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								Messaging
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Sign in users with multiple OAuth providers.
 							</p>
@@ -440,7 +814,9 @@
 					</li>
 					<li>
 						<div class="aw-card is-full-color">
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">REST API</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								REST API
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Lorem ipsum dolor sit amet consectetur. Elit id et diam lectus egestas habitasse.
 							</p>
@@ -448,7 +824,9 @@
 					</li>
 					<li>
 						<div class="aw-card is-full-color">
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">GraphQL</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								GraphQL
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Lorem ipsum dolor sit amet consectetur. Elit id et diam lectus egestas habitasse.
 							</p>
@@ -456,7 +834,9 @@
 					</li>
 					<li>
 						<div class="aw-card is-full-color">
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">Realtime</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								Realtime
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Lorem ipsum dolor sit amet consectetur. Elit id et diam lectus egestas habitasse.
 							</p>
@@ -474,7 +854,9 @@
 				<ul class="aw-grid-row-4">
 					<li>
 						<div class="aw-card is-full-color">
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">Self hosted</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								Self hosted
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Lorem ipsum dolor sit amet consectetur.
 							</p>
@@ -482,7 +864,9 @@
 					</li>
 					<li>
 						<div class="aw-card is-full-color">
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">Firebase</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								Firebase
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Lorem ipsum dolor sit amet consectetur.
 							</p>
@@ -490,7 +874,9 @@
 					</li>
 					<li>
 						<div class="aw-card is-full-color">
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">Supabase</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								Supabase
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Lorem ipsum dolor sit amet consectetur.
 							</p>
diff --git a/src/routes/docs/products/storage/upload-download/+page.markdoc b/src/routes/docs/products/storage/upload-download/+page.markdoc
index 00120747dd..a1d334b5ea 100644
--- a/src/routes/docs/products/storage/upload-download/+page.markdoc
+++ b/src/routes/docs/products/storage/upload-download/+page.markdoc
@@ -213,7 +213,7 @@ The Appwrite Python SDK expects an `InputFile` class for file inputs.
 | ------------------------------------------ | ------------------------------------------------------------ |
 | `InputFile.from_path(path)`                | Used to upload files from a provided path.                  |
 | `InputFile.from_bytes(bytes)`              | Used to upload files from an array of bytes.               |
-{% /tabsitem %}
+{% /tabsitem %} 
 
 {% tabsitem #ruby title="Ruby" %}
 The Appwrite Ruby SDK expects an `InputFile` class for file inputs.
@@ -277,7 +277,114 @@ The Appwrite .NET SDK expects an `InputFile` class for file inputs.
 {% /tabsitem %}
 {% /tabs %}
 
-[TODO more download examples]
+## Get file {% #get-file %}
+To get a metadata about a.file, use the `getFile` method.
+
+{% multicode %}
+```js
+import { Client, Storage } from "appwrite";
+
+const client = new Client();
+
+const storage = new Storage(client);
+
+client
+    .setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint
+    .setProject('5df5acd0d48c2') // Your project ID
+;
+
+const promise = storage.getFile('[BUCKET_ID]', '[FILE_ID]');
+
+promise.then(function (response) {
+    console.log(response); // Success
+}, function (error) {
+    console.log(error); // Failure
+});
+```
+```dart
+import 'package:appwrite/appwrite.dart';
+
+void main() { // Init SDK
+  Client client = Client();
+  Storage storage = Storage(client);
+
+  client
+    .setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint
+    .setProject('5df5acd0d48c2') // Your project ID
+  ;
+  // downloading file
+  Future result = storage.getFile(
+    bucketId: '[BUCKET_ID]',
+    fileId: '[FILE_ID]',
+  ).then((bytes) {
+    final file = File('path_to_file/filename.ext');
+    file.writeAsBytesSync(bytes)
+  }).catchError((error) {
+      print(error.response);
+  })
+}
+
+//displaying image preview
+FutureBuilder(
+  future: storage.getFile(
+    bucketId: '[BUCKET_ID]',
+    fileId: '[FILE_ID]',
+  ), //works for both public file and private file, for private files you need to be logged in
+  builder: (context, snapshot) {
+    return snapshot.hasData && snapshot.data != null
+      ? Image.memory(
+          snapshot.data,
+        )
+      : CircularProgressIndicator();
+  },
+);
+```
+```swift
+import Appwrite
+
+func main() async throws {
+    let client = Client()
+      .setEndpoint("https://cloud.appwrite.io/v1") // Your API Endpoint
+      .setProject("5df5acd0d48c2") // Your project ID
+    let storage = Storage(client)
+    let byteBuffer = try await storage.getFile(
+        bucketId: "[BUCKET_ID]",
+        fileId: "[FILE_ID]"
+    )
+
+    print(String(describing: byteBuffer)
+}
+```
+```kotlin
+import androidx.appcompat.app.AppCompatActivity
+import android.os.Bundle
+import kotlinx.coroutines.GlobalScope
+import kotlinx.coroutines.launch
+import io.appwrite.Client
+import io.appwrite.services.Storage
+
+class MainActivity : AppCompatActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.activity_main)
+
+        val client = Client(applicationContext)
+            .setEndpoint("https://cloud.appwrite.io/v1") // Your API Endpoint
+            .setProject("5df5acd0d48c2") // Your project ID
+
+        val storage = Storage(client)
+
+        GlobalScope.launch {
+            val result = storage.getFile(
+                bucketId = "[BUCKET_ID]",
+                fileId = "[FILE_ID]"
+            )
+            println(result); // Resource URL        
+        }
+    }
+}
+```
+{% /multicode %}
 
 ## Download file {% #download-file %}
 To download a file, use the `getFileDownload` method.
@@ -382,4 +489,216 @@ class MainActivity : AppCompatActivity() {
     }
 }
 ```
+{% /multicode %}
+
+## View file {% #view-file%}
+
+To view a file, use the `getFileView` method.
+
+{% multicode %}
+```js
+import { Client, Storage } from "appwrite";
+
+const client = new Client();
+
+const storage = new Storage(client);
+
+client
+    .setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint
+    .setProject('5df5acd0d48c2') // Your project ID
+;
+
+const result = storage.getFileView('[BUCKET_ID]', '[FILE_ID]');
+
+console.log(result); // Resource URL
+```
+```dart
+import 'package:appwrite/appwrite.dart';
+
+void main() { // Init SDK
+  Client client = Client();
+  Storage storage = Storage(client);
+
+  client
+    .setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint
+    .setProject('5df5acd0d48c2') // Your project ID
+  ;
+  // downloading file
+  Future result = storage.getFileView(
+    bucketId: '[BUCKET_ID]',
+    fileId: '[FILE_ID]',
+  ).then((bytes) {
+    final file = File('path_to_file/filename.ext');
+    file.writeAsBytesSync(bytes)
+  }).catchError((error) {
+      print(error.response);
+  })
+}
+
+//displaying image preview
+FutureBuilder(
+  future: storage.getFileView(
+    bucketId: '[BUCKET_ID]',
+    fileId: '[FILE_ID]',
+  ), //works for both public file and private file, for private files you need to be logged in
+  builder: (context, snapshot) {
+    return snapshot.hasData && snapshot.data != null
+      ? Image.memory(
+          snapshot.data,
+        )
+      : CircularProgressIndicator();
+  },
+);
+```
+```swift
+import Appwrite
+
+func main() async throws {
+    let client = Client()
+      .setEndpoint("https://cloud.appwrite.io/v1") // Your API Endpoint
+      .setProject("5df5acd0d48c2") // Your project ID
+    let storage = Storage(client)
+    let byteBuffer = try await storage.getFileView(
+        bucketId: "[BUCKET_ID]",
+        fileId: "[FILE_ID]"
+    )
+
+    print(String(describing: byteBuffer)
+}
+```
+```kotlin
+import androidx.appcompat.app.AppCompatActivity
+import android.os.Bundle
+import kotlinx.coroutines.GlobalScope
+import kotlinx.coroutines.launch
+import io.appwrite.Client
+import io.appwrite.services.Storage
+
+class MainActivity : AppCompatActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.activity_main)
+
+        val client = Client(applicationContext)
+            .setEndpoint("https://cloud.appwrite.io/v1") // Your API Endpoint
+            .setProject("5df5acd0d48c2") // Your project ID
+
+        val storage = Storage(client)
+
+        GlobalScope.launch {
+            val result = storage.getFileView(
+                bucketId = "[BUCKET_ID]",
+                fileId = "[FILE_ID]"
+            )
+            println(result); // Resource URL        
+        }
+    }
+}
+```
+{% /multicode %}
+
+## Get file preview {% #get-file-preview %}
+To get a file preview image , use the `getFilePreview` method.
+You can learn more about the **image manupulation options** in [this guide](/docs/products/storage/images).
+
+{% multicode %}
+```js
+import { Client, Storage } from "appwrite";
+
+const client = new Client();
+
+const storage = new Storage(client);
+
+client
+    .setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint
+    .setProject('5df5acd0d48c2') // Your project ID
+;
+
+const result = storage.getFilePreview('[BUCKET_ID]', '[FILE_ID]');
+
+console.log(result); // Resource URL
+```
+```dart
+import 'package:appwrite/appwrite.dart';
+
+void main() { // Init SDK
+  Client client = Client();
+  Storage storage = Storage(client);
+
+  client
+    .setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint
+    .setProject('5df5acd0d48c2') // Your project ID
+  ;
+  // downloading file
+  Future result = storage.getFilePreview(
+    bucketId: '[BUCKET_ID]',
+    fileId: '[FILE_ID]',
+  ).then((bytes) {
+    final file = File('path_to_file/filename.ext');
+    file.writeAsBytesSync(bytes)
+  }).catchError((error) {
+      print(error.response);
+  })
+}
+
+//displaying image preview
+FutureBuilder(
+  future: storage.getFilePreview(
+    bucketId: '[BUCKET_ID]',
+    fileId: '[FILE_ID]',
+  ), //works for both public file and private file, for private files you need to be logged in
+  builder: (context, snapshot) {
+    return snapshot.hasData && snapshot.data != null
+      ? Image.memory(
+          snapshot.data,
+        )
+      : CircularProgressIndicator();
+  },
+);
+```
+```swift
+import Appwrite
+
+func main() async throws {
+    let client = Client()
+      .setEndpoint("https://cloud.appwrite.io/v1") // Your API Endpoint
+      .setProject("5df5acd0d48c2") // Your project ID
+    let storage = Storage(client)
+    let byteBuffer = try await storage.getFilePreview(
+        bucketId: "[BUCKET_ID]",
+        fileId: "[FILE_ID]"
+    )
+
+    print(String(describing: byteBuffer)
+}
+```
+```kotlin
+import androidx.appcompat.app.AppCompatActivity
+import android.os.Bundle
+import kotlinx.coroutines.GlobalScope
+import kotlinx.coroutines.launch
+import io.appwrite.Client
+import io.appwrite.services.Storage
+
+class MainActivity : AppCompatActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.activity_main)
+
+        val client = Client(applicationContext)
+            .setEndpoint("https://cloud.appwrite.io/v1") // Your API Endpoint
+            .setProject("5df5acd0d48c2") // Your project ID
+
+        val storage = Storage(client)
+
+        GlobalScope.launch {
+            val result = storage.getFilePreview(
+                bucketId = "[BUCKET_ID]",
+                fileId = "[FILE_ID]"
+            )
+            println(result); // Resource URL        
+        }
+    }
+}
+```
 {% /multicode %}
\ No newline at end of file
diff --git a/src/scss/7-components/_footer-nav.scss b/src/scss/7-components/_footer-nav.scss
index c6100c04ba..e0cb66fecc 100644
--- a/src/scss/7-components/_footer-nav.scss
+++ b/src/scss/7-components/_footer-nav.scss
@@ -12,7 +12,7 @@
 
   &-secondary {
     &-list { display:flex; flex-direction:column; gap:pxToRem(10); }
-    &-item { }
+    &-item {}
   }
 
   @media #{$break1} {
diff --git a/src/scss/_10-utilities.scss b/src/scss/_10-utilities.scss
index 295c5508f8..df08e21108 100644
--- a/src/scss/_10-utilities.scss
+++ b/src/scss/_10-utilities.scss
@@ -228,4 +228,12 @@
 
 .#{$p}-u-inline-block {
   display:inline-block;
+}
+
+.#{$p}-u-uppercase{
+  text-transform:uppercase;
+}
+
+.#{$p}-u-capitalize {
+  text-transform:capitalize;
 }
\ No newline at end of file