diff --git a/public/assets/moh-task-list.webp b/public/assets/moh-task-list.webp
index 03ee121..da93e58 100644
Binary files a/public/assets/moh-task-list.webp and b/public/assets/moh-task-list.webp differ
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 60a802e..dc014e2 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -40,7 +40,7 @@ import Layout from "../layouts/Layout.astro";
 	</div>
 	<div class="w-full h-full flex flex-col text-white">
 		<div
-			class="w-full h-1/3 bg-gray-900 flex flex-col justify-center items-center text-center"
+			class="w-full h-fit py-5 sm:py-0 sm:h-1/3 bg-gray-900 flex flex-col justify-center items-center text-center"
 		>
 			<h2 class="font-bold text-2xl mb-5">
 				What are Coworking & Study streams?
@@ -52,7 +52,7 @@ import Layout from "../layouts/Layout.astro";
 			</p>
 		</div>
 		<div
-			class="w-full h-1/3 flex flex-col justify-center items-center text-center"
+			class="w-full h-fit py-5 sm:py-0 sm:h-1/3 flex flex-col justify-center items-center text-center"
 		>
 			<h2 class="font-bold text-2xl mb-5">
 				How can this guide benefit me?
@@ -65,7 +65,7 @@ import Layout from "../layouts/Layout.astro";
 			</p>
 		</div>
 		<div
-			class="w-full h-1/3 bg-gray-900 flex flex-col justify-center items-center text-center"
+			class="w-full h-fit py-5 sm:py-0 sm:h-1/3 bg-gray-900 flex flex-col justify-center items-center text-center"
 		>
 			<h2 class="font-bold text-2xl mb-5">
 				Why should I stream myself working?
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c0dedbf..073bb3d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -15,13 +15,20 @@ import Layout from "../layouts/Layout.astro";
 			<div
 				class="flex flex-col justify-center items-center lg:items-start text-center lg:text-left"
 			>
-				<p class="text-xl mb-1">How to get started with</p>
+				<p class="text-xl mb-1 mt-24 lg:mt-0">
+					How to get started with
+				</p>
 				<h1 class="text-2xl lg:text-4xl font-bold">
 					Coworking Streams
 				</h1>
 				<p class="text-lg lg:text-xl mt-2">
 					For coworking & study streamers on Twitch
 				</p>
+				<p class="text-lg mt-0 md:hidden">
+					<a href="/tips" class="hover:underline"
+						>Click on the navigation icon to get started!</a
+					>
+				</p>
 			</div>
 		</div>
 		<div
diff --git a/src/pages/widgets.md b/src/pages/widgets.md
index 50b08dd..84e12e9 100644
--- a/src/pages/widgets.md
+++ b/src/pages/widgets.md
@@ -70,9 +70,9 @@ Do check beforehand the volumes for the alarms, as sometimes they may be startli
 
 ## Task list widget
 
-<div class="flex flex-row mb-5">
-    <img src="/assets/moh-task-list.webp" class="h-[300px] rounded-md mr-5">
-    <img src="/assets/ryanpython-task-list.webp" class="h-[300px] rounded-md">
+<div class="flex flex-col sm:flex-row mb-5">
+    <img src="/assets/moh-task-list.webp" class="rounded-md mr-5 w-56 h-56 mb-5 sm:mb-0">
+    <img src="/assets/ryanpython-task-list.webp" class="rounded-md w-60 h-56">
 </div>
 
 A task list widget is a great way to keep track of your tasks along with your viewers! For these overlays, you may only add 1 incomplete task at a time. You may only add another task once the previous task is completed.
@@ -92,7 +92,7 @@ A task list widget is a great way to keep track of your tasks along with your vi
     </li>
 </ul>
 
-<img src="/assets/multi-task.webp" class="h-[300px] rounded-md mb-5 mt-10">
+<img src="/assets/multi-task.webp" class="rounded-md mb-5 mt-10 w-68 h-56">
 
 If you're interested in a task list overlay that allows you to add multiple tasks at a time, check out <a href="https://www.twitch.tv/RyanPython" target="_blank" class="underline hover:text-blue-400">RyanPython's stream</a>!