diff --git a/frontend/src/components/MastodonLogo.tsx b/frontend/src/components/MastodonLogo.tsx
index 0a7cf2fa5..3e753f609 100644
--- a/frontend/src/components/MastodonLogo.tsx
+++ b/frontend/src/components/MastodonLogo.tsx
@@ -9,6 +9,9 @@ type Props = {
 	size: keyof typeof heightsMap
 }
 
+// TODO: the mastodonLogo is likely no longer needed
+//       we're keeping it around just in case but before
+//       launch this should be removed
 export const MastodonLogo = component$<Props>(({ size }) => {
 	return (
 		<svg
@@ -52,8 +55,12 @@ export const MastodonLogo = component$<Props>(({ size }) => {
 })
 
 export const WildebeestLogo = component$<Props>(({ size }) => {
+	const linearGradientId = `wildebeest_linear_gradient_${Math.round(Math.random() * 9999)}`
 	return (
 		<svg
+			// TO FIX: the height should be computed as heightsMap[size]
+			//         (we need to fix it/adapt the map and make sure
+			//          that the logo keeps looking ok)
 			style={{ width: 'auto', height: '50px' }}
 			viewBox="100 60 260 260"
 			fill="none"
@@ -63,7 +70,7 @@ export const WildebeestLogo = component$<Props>(({ size }) => {
 				fill-rule="evenodd"
 				clip-rule="evenodd"
 				d="M168.516 134.818H168.516C160.459 134.56 153.943 134.35 152.125 135.142C84.0848 164.777 140.745 295.097 146.927 308.796C149.961 302.444 152.155 295.691 153.452 288.809C151.634 287.646 149.721 286.595 147.722 285.664C149.735 285.449 151.781 285.339 153.855 285.339C159.503 285.339 164.951 286.157 170.075 287.678C166.405 296.982 160.02 305.018 151.841 310.908C158.675 312.194 171.94 313.898 180.169 309.835C185.18 297.224 185.87 283.663 182.212 271.538C182.959 270.383 184.055 269.942 185.932 270.255C188.391 274.944 190.163 279.909 191.243 284.997L222.363 278.483C223.856 271.071 223.691 263.548 221.86 256.529C222.88 255.832 223.921 255.178 224.981 254.567C228.478 261.538 230.224 269.188 230.19 276.845L234.201 276.005C238.391 265.691 239.185 254.607 236.562 244.555C237.583 243.858 238.624 243.204 239.684 242.593C244.57 252.332 246.036 263.396 244.011 273.952L265.228 269.511C273.567 267.765 279.54 260.412 279.54 251.892V145.399C279.54 126.45 259.01 113.92 241.408 120.936C229.684 125.608 216.336 130.261 202.984 133.531C194.342 135.647 179.892 135.183 168.516 134.818ZM250.269 156.806C244.328 155.807 238.137 155.676 231.854 156.53C212.93 159.101 197.206 170.06 187.922 185.148C195.435 177.061 205.688 171.427 217.479 169.825C222.554 169.136 227.554 169.242 232.352 170.048C229.372 183.079 221.189 194.382 209.823 201.301C230.337 194.527 245.558 177.41 250.269 156.806Z"
-				fill="url(#paint0_linear_338_1767)"
+				fill={`url(#${linearGradientId})`}
 			/>
 			<ellipse
 				cx="167.742"
@@ -79,7 +86,7 @@ export const WildebeestLogo = component$<Props>(({ size }) => {
 			/>
 			<defs>
 				<linearGradient
-					id="paint0_linear_338_1767"
+					id={linearGradientId}
 					x1="223.159"
 					y1="269.638"
 					x2="228.686"
diff --git a/frontend/src/components/StickyHeader/StickyHeader.scss b/frontend/src/components/StickyHeader/StickyHeader.scss
deleted file mode 100644
index f82c5c28c..000000000
--- a/frontend/src/components/StickyHeader/StickyHeader.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-header {
-	position: sticky;
-	top: 0;
-	// compensates for the 10px set w/ sticky on the main app columns
-	padding-top: 10px;
-	z-index: 2;
-}
\ No newline at end of file
diff --git a/frontend/src/components/StickyHeader/StickyHeader.tsx b/frontend/src/components/StickyHeader/StickyHeader.tsx
index 2640c3ffc..b4eb63ae3 100644
--- a/frontend/src/components/StickyHeader/StickyHeader.tsx
+++ b/frontend/src/components/StickyHeader/StickyHeader.tsx
@@ -1,12 +1,8 @@
 import { component$, Slot } from '@builder.io/qwik'
-import { useStylesScoped$ } from '@builder.io/qwik'
-import styles from './StickyHeader.scss?inline'
 
 export default component$(() => {
-	useStylesScoped$(styles)
-
 	return (
-		<header class="bg-slate-900">
+		<header class="bg-slate-900 sticky top-[4.5rem] xl:top-0 xl:pt-[10px] z-10">
 			<Slot />
 		</header>
 	)
diff --git a/frontend/src/components/layout/LeftColumn/LeftColumn.tsx b/frontend/src/components/layout/LeftColumn/LeftColumn.tsx
index 49a21602c..b32b6d708 100644
--- a/frontend/src/components/layout/LeftColumn/LeftColumn.tsx
+++ b/frontend/src/components/layout/LeftColumn/LeftColumn.tsx
@@ -7,7 +7,7 @@ export default component$(() => {
 	const config = useContext(InstanceConfigContext)
 
 	return (
-		<div class="text-sm">
+		<div class="hidden xl:block text-sm">
 			<p class="text-slate-400">
 				<span class="text-semi">{domain}</span> is part of the decentralized social network powered by{' '}
 				<a href="https://github.com/cloudflare/wildebeest">Wildebeest</a>.
diff --git a/frontend/src/components/layout/RightColumn/RightColumn.scss b/frontend/src/components/layout/RightColumn/RightColumn.scss
index 8ed41a30e..37e95067c 100644
--- a/frontend/src/components/layout/RightColumn/RightColumn.scss
+++ b/frontend/src/components/layout/RightColumn/RightColumn.scss
@@ -1,3 +1,11 @@
+@use '../../../tailwind-values.scss' as tailwind;
+
 .right-column-wrapper {
   height: calc(100vh - 20px);
-}
\ No newline at end of file
+}
+
+@media (max-width: tailwind.$xl-breakpoint) {
+  .right-column-wrapper {
+    height: calc(100vh - 4.5rem);
+  }
+}
diff --git a/frontend/src/components/layout/RightColumn/RightColumn.tsx b/frontend/src/components/layout/RightColumn/RightColumn.tsx
index 7d5c7063f..10491e622 100644
--- a/frontend/src/components/layout/RightColumn/RightColumn.tsx
+++ b/frontend/src/components/layout/RightColumn/RightColumn.tsx
@@ -25,8 +25,8 @@ export default component$(() => {
 
 		return (
 			<Link href={linkTarget} class={classList}>
-				<i class={`fa ${iconName} fa-fw mr-3`} />
-				{linkText}
+				<i class={`fa ${iconName} fa-fw md:mr-3`} />
+				<span class="hidden md:inline">{linkText}</span>
 			</Link>
 		)
 	}
@@ -37,17 +37,25 @@ export default component$(() => {
 		{ iconName: 'fa-globe', linkText: 'Federated', linkTarget: '/public', linkActiveRegex: /^\/public\/?$/ },
 	]
 
+	const aboutLink = { iconName: 'fa-ellipsis', linkText: 'About', linkTarget: '/about', linkActiveRegex: /^\/about/ }
+
 	return (
-		<div class="flex flex-col justify-between right-column-wrapper text-slate-400">
+		<div class="bg-slate-800 xl:bg-transparent flex flex-col justify-between right-column-wrapper text-slate-400">
 			<div>
-				<div class="p-4">
-					<a class="no-underline flex items-center" href="https://mastodon.social">
+				<div class="xl:p-4">
+					<a class="no-underline hidden xl:flex items-center" href="https://mastodon.social">
 						<WildebeestLogo size="small" />
-						<span class="text-white font-bold text-xl ml-[-27px] mt-[-27px]">ildebeest</span>
+						{/* TODO: We need to move the text inside the logo component for better reusability
+				(because we are adding the text every time we use the logo anyways) */}
+						<span class="text-white font-bold xl:text-xl xl:ml-[-27px] xl:mt-[-27px]">ildebeest</span>
 					</a>
 				</div>
-				<hr class="border-t border-slate-700 my-3" />
+				<hr class="hidden xl:block border-t border-slate-700 my-3" />
 				{links.map((link) => renderNavLink(link))}
+				<div class="xl:hidden">
+					<hr class="border-t border-slate-700 my-3" />
+					{renderNavLink(aboutLink)}
+				</div>
 			</div>
 		</div>
 	)
diff --git a/frontend/src/root.tsx b/frontend/src/root.tsx
index 412c07e86..782d4830a 100644
--- a/frontend/src/root.tsx
+++ b/frontend/src/root.tsx
@@ -16,7 +16,7 @@ export default component$(() => {
 				<script src="https://kit.fontawesome.com/e3d907997f.js" crossorigin="anonymous"></script>
 				<RouterHead />
 			</head>
-			<body lang="en" class="bg-slate-900 text-white">
+			<body lang="en" class="bg-slate-900 text-white min-w-min">
 				<RouterOutlet />
 				<ServiceWorkerRegister />
 			</body>
diff --git a/frontend/src/routes/[accountId]/[statusId]/index.tsx b/frontend/src/routes/[accountId]/[statusId]/index.tsx
index e03ab1e16..c165a617b 100644
--- a/frontend/src/routes/[accountId]/[statusId]/index.tsx
+++ b/frontend/src/routes/[accountId]/[statusId]/index.tsx
@@ -25,7 +25,7 @@ export default component$(() => {
 	return (
 		<>
 			<StickyHeader>
-				<div class="flex justify-between items-center rounded-t header bg-slate-700">
+				<div class="flex justify-between items-center xl:rounded-t header bg-slate-700">
 					<Link class="text-semi no-underline text-indigo-400 bg-transparent p-4" href="/explore">
 						<i class="fa fa-chevron-left mr-2" />
 						<span class="hover:underline">Back</span>
diff --git a/frontend/src/routes/explore/layout.scss b/frontend/src/routes/explore/layout.scss
index d34875451..4cdfdb97d 100644
--- a/frontend/src/routes/explore/layout.scss
+++ b/frontend/src/routes/explore/layout.scss
@@ -1,17 +1,17 @@
+@use '../../tailwind-values.scss' as tailwind;
 
 .explore-wrapper {
-  display: flex;
-  flex-direction: column;
-  flex: 0 0 auto;
   min-height: calc(100vh - 20px);
 }
 
-.explore-content-wrapper {
-  flex: 1 1 auto;
+@media (max-width: tailwind.$xl-breakpoint) {
+  .explore-wrapper {
+    min-height: calc(100vh - 4.5rem);
+  }
 }
 
 .active {
-  color: #dbeafe;
+  color: #dcebfe;
   position: relative;
 
   &::before,
diff --git a/frontend/src/routes/explore/layout.tsx b/frontend/src/routes/explore/layout.tsx
index 68a1b6cff..f426a6222 100644
--- a/frontend/src/routes/explore/layout.tsx
+++ b/frontend/src/routes/explore/layout.tsx
@@ -40,15 +40,15 @@ export default component$(() => {
 	]
 
 	return (
-		<div class="explore-wrapper">
+		<div class="explore-wrapper flex flex-col">
 			<StickyHeader>
-				<h2 class="text-reg text-md m-0 p-4 bg-slate-700 rounded-t">
+				<h2 class="text-reg text-md m-0 p-4 bg-slate-700 xl:rounded-t">
 					<i class="fa fa-hashtag fa-fw mr-3" />
 					<span>Explore</span>
 				</h2>
 			</StickyHeader>
 			<div class="bg-slate-900 flex justify-around">{links.map((link) => renderNavLink(link))}</div>
-			<div class="explore-content-wrapper">
+			<div class="flex-auto">
 				<Slot />
 			</div>
 		</div>
diff --git a/frontend/src/routes/first-login/index.tsx b/frontend/src/routes/first-login/index.tsx
index 1ef6bbdd9..447155afb 100644
--- a/frontend/src/routes/first-login/index.tsx
+++ b/frontend/src/routes/first-login/index.tsx
@@ -1,5 +1,5 @@
 import { component$ } from '@builder.io/qwik'
-import { MastodonLogo } from '~/components/MastodonLogo'
+import { MastodonLogo, WildebeestLogo } from '~/components/MastodonLogo'
 import { useDomain } from '~/utils/useDomain'
 
 export default component$(() => {
@@ -7,8 +7,11 @@ export default component$(() => {
 
 	return (
 		<div class="flex flex-col p-5 items-center">
-			<h1 class="text-center mt-7 mb-9">
-				<MastodonLogo size="medium" />
+			<h1 class="text-center mt-7 mb-9 flex items-center">
+				<WildebeestLogo size="medium" />
+				{/* TODO: We need to move the text inside the logo component for better reusability
+				(because we are adding the text every time we use the logo anyways) */}
+				<span class="text-white font-bold text-xl ml-[-27px] mt-[-27px]">ildebeest</span>
 			</h1>
 			<form method="post" class="flex flex-col w-full max-w-md">
 				<div class="flex flex-col mb-6">
diff --git a/frontend/src/routes/layout.scss b/frontend/src/routes/layout.scss
deleted file mode 100644
index 226d31189..000000000
--- a/frontend/src/routes/layout.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-
-.main-wrapper {
-	height: 100%;
-	display: flex;
-	justify-content: center;
-}
-
-.side-column {
-	width: 285px;
-	margin: 0 10px;
-}
-
-.sticky {
-	position: sticky;
-	top: 10px;
-}
diff --git a/frontend/src/routes/layout.tsx b/frontend/src/routes/layout.tsx
index 940b0598a..197c1479e 100644
--- a/frontend/src/routes/layout.tsx
+++ b/frontend/src/routes/layout.tsx
@@ -1,15 +1,15 @@
-import { component$, useStylesScoped$, Slot, useContextProvider } from '@builder.io/qwik'
+import { component$, Slot, useContextProvider } from '@builder.io/qwik'
 import { DocumentHead, useLocation, loader$ } from '@builder.io/qwik-city'
 import * as instance from 'wildebeest/functions/api/v1/instance'
 import type { InstanceConfig } from 'wildebeest/backend/src/types/configs'
 import LeftColumn from '../components/layout/LeftColumn/LeftColumn'
 import RightColumn from '../components/layout/RightColumn/RightColumn'
-import styles from './layout.scss?inline'
 import { InstanceConfigContext } from '~/utils/instanceConfig'
+import { WildebeestLogo } from '~/components/MastodonLogo'
 
 const pathsWithoutColumns = ['/first-login', '/start-instance']
 
-export const useShowColumns = () => {
+export const useShowHeaderAndColumns = () => {
 	const location = useLocation()
 	const pathname = new URL(location.href).pathname
 	return !pathsWithoutColumns.includes(pathname)
@@ -25,34 +25,44 @@ export const instanceLoader = loader$<{ DATABASE: D1Database; domain: string },
 )
 
 export default component$(() => {
-	useStylesScoped$(styles)
-
-	const showColumns = useShowColumns()
+	const showHeaderAndColumns = useShowHeaderAndColumns()
 
 	useContextProvider(InstanceConfigContext, instanceLoader.use().value)
 
 	return (
-		<main class="main-wrapper">
-			{showColumns && (
-				<div class="side-column">
-					<div class="sticky">
-						<LeftColumn />
-					</div>
-				</div>
+		<>
+			{showHeaderAndColumns && (
+				<header class="h-[4.5rem] z-50 sticky top-0 bg-slate-800 p-3 w-full border-b border-slate-700 xl:hidden">
+					<a class="no-underline flex items-center w-max" href="https://mastodon.social">
+						<WildebeestLogo size="small" />
+						{/* TODO: We need to move the text inside the logo component for better reusability
+						(because we are adding the text every time we use the logo anyways) */}
+						<span class="text-white font-bold text-xl ml-[-27px] mt-[-27px]">ildebeest</span>
+					</a>
+				</header>
 			)}
-			<div class={`w-full ${showColumns ? 'max-w-lg' : ''}`}>
-				<div class={`bg-slate-800 ${showColumns ? 'rounded ' : 'min-h-screen'}`}>
-					<Slot />
-				</div>
-			</div>
-			{showColumns && (
-				<div class="side-column">
-					<div class="sticky">
-						<RightColumn />
+			<main class="h-full flex justify-center main-wrapper sticky top-[4.5rem]">
+				{showHeaderAndColumns && (
+					<div class="w-fit md:w-72 hidden xl:block mx-[10px]">
+						<div class="sticky top-[10px]">
+							<LeftColumn />
+						</div>
+					</div>
+				)}
+				<div class={`w-full ${showHeaderAndColumns ? 'xl:max-w-xl' : ''}`}>
+					<div class={`bg-slate-800 ${showHeaderAndColumns ? 'rounded ' : 'min-h-screen'}`}>
+						<Slot />
 					</div>
 				</div>
-			)}
-		</main>
+				{showHeaderAndColumns && (
+					<div class="w-fit md:w-72 border-l xl:border-l-0 border-slate-700 xl:mx-[10px]">
+						<div class="sticky top-[4.5rem] xl:top-[10px]">
+							<RightColumn />
+						</div>
+					</div>
+				)}
+			</main>
+		</>
 	)
 })
 
diff --git a/frontend/src/routes/public/index.tsx b/frontend/src/routes/public/index.tsx
index a5f7829b2..28518002f 100644
--- a/frontend/src/routes/public/index.tsx
+++ b/frontend/src/routes/public/index.tsx
@@ -21,7 +21,7 @@ export default component$(() => {
 	return (
 		<>
 			<StickyHeader>
-				<div class="rounded-t bg-slate-700 p-4 flex items-center">
+				<div class="xl:rounded-t bg-slate-700 p-4 flex items-center">
 					<i class="fa fa-globe fa-fw mr-3 text-slate-100" />
 					<span>Federated timeline</span>
 				</div>
diff --git a/frontend/src/routes/public/local/index.tsx b/frontend/src/routes/public/local/index.tsx
index d1581d4c9..667cd04cc 100644
--- a/frontend/src/routes/public/local/index.tsx
+++ b/frontend/src/routes/public/local/index.tsx
@@ -20,7 +20,7 @@ export default component$(() => {
 	return (
 		<>
 			<StickyHeader>
-				<div class="rounded-t bg-slate-700 p-4 flex items-center">
+				<div class="xl:rounded-t bg-slate-700 p-4 flex items-center">
 					<i class="fa fa-users fa-fw mr-3 text-slate-100" />
 					<span>Local timeline</span>
 				</div>
diff --git a/frontend/src/routes/start-instance/index.tsx b/frontend/src/routes/start-instance/index.tsx
index 549f3c4e0..7662da2e3 100644
--- a/frontend/src/routes/start-instance/index.tsx
+++ b/frontend/src/routes/start-instance/index.tsx
@@ -1,5 +1,5 @@
 import { $, component$, useStore, useClientEffect$, useSignal } from '@builder.io/qwik'
-import { MastodonLogo } from '~/components/MastodonLogo'
+import { WildebeestLogo } from '~/components/MastodonLogo'
 import { useDomain } from '~/utils/useDomain'
 import Step1 from './step-1'
 import { type InstanceConfig, testInstance } from './utils'
@@ -41,15 +41,23 @@ export default component$(() => {
 
 	return (
 		<div class="flex flex-col p-5 items-center max-w-lg mx-auto">
-			<h1 class="text-center mt-7 mb-9">
-				<MastodonLogo size="medium" />
+			<h1 class="text-center mt-7 mb-9 flex items-center">
+				<WildebeestLogo size="medium" />
+				{/* TODO: We need to move the text inside the logo component for better reusability
+				(because we are adding the text every time we use the logo anyways) */}
+				<span class="text-white font-bold text-xl ml-[-27px] mt-[-27px]">ildebeest</span>
 			</h1>
-			{stepToShow.startsWith('step-') && <p>Welcome to Wildebeest... Your instance hasn't been configured yet.</p>}
+			{stepToShow.startsWith('step-') && (
+				<div class="text-center">
+					<p class="mb-1">Welcome to Wildebeest...</p>
+					<p class="mb-5"> Your instance hasn't been configured yet.</p>
+				</div>
+			)}
 			{stepToShow === 'loading' && <p>Loading...</p>}
 			{stepToShow === 'step-1' && (
 				<Step1 instanceConfig={instanceConfig} setLoading={setLoading} setInstanceConfigured={setInstanceConfigured} />
 			)}
-			{stepToShow === 'all-good' && <p>All good, your instance is ready.</p>}
+			{stepToShow === 'all-good' && <p class="text-center">All good, your instance is ready.</p>}
 		</div>
 	)
 })
diff --git a/frontend/src/routes/start-instance/step-1.tsx b/frontend/src/routes/start-instance/step-1.tsx
index b3e6d7a86..50a84303b 100644
--- a/frontend/src/routes/start-instance/step-1.tsx
+++ b/frontend/src/routes/start-instance/step-1.tsx
@@ -10,7 +10,7 @@ interface Props {
 export default component$<Props>(({ instanceConfig, setLoading, setInstanceConfigured }) => {
 	return (
 		<>
-			<h2>Configure your instance</h2>
+			<h2 class="mb-5">Configure your instance</h2>
 
 			<div class="flex flex-col mb-6 w-full max-w-md">
 				<label class="mb-2 max-w-max text-semi text-sm" for="start-instance-title">
diff --git a/frontend/src/tailwind-values.scss b/frontend/src/tailwind-values.scss
new file mode 100644
index 000000000..8c0f4d3e2
--- /dev/null
+++ b/frontend/src/tailwind-values.scss
@@ -0,0 +1,7 @@
+/*
+    This file contains variables matching tailwind values
+    to be used when we need to match those values in manual styling
+*/
+
+$md-breakpoint: 768px;
+$xl-breakpoint: 1280px;