diff --git a/app/listen/[collectionid]/page.tsx b/app/listen/[collectionid]/page.tsx
index 4ef9a9c..acb982d 100644
--- a/app/listen/[collectionid]/page.tsx
+++ b/app/listen/[collectionid]/page.tsx
@@ -1,7 +1,5 @@
 import InProgress from "@/components/InProgress";
 
 export default async function ListenByCollectionID() {
-    return <></>
-    // // @ts-ignore server component
-    // return <InProgress />
+    return <InProgress />
 }
diff --git a/app/listen/page.tsx b/app/listen/page.tsx
index 282a403..4bcefaf 100644
--- a/app/listen/page.tsx
+++ b/app/listen/page.tsx
@@ -5,7 +5,7 @@ export default async function ListenIndex() {
         <div>
             <h1>Listen</h1>
             {/* @ts-ignore server component */}
-            {/* <InProgress /> */}
+            <InProgress />
         </div>
     )
 }
diff --git a/app/projects/layout.tsx b/app/projects/layout.tsx
new file mode 100644
index 0000000..7a6c41e
--- /dev/null
+++ b/app/projects/layout.tsx
@@ -0,0 +1,7 @@
+export default function ProjectsLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <div className="min-h-screen bg-gradient-to-b from-slate-300 to-sky-700 dark:from-black dark:to-green-950">
+            { children }
+        </div>
+    )
+}
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index 3983665..b2ab2e6 100644
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -4,8 +4,7 @@ export default async function ProjectsPage() {
     return (
         <div>
             <h1>Learn more about my work</h1>
-            {/* @ts-ignore server component */}
-            {/* <InProgress /> */}
+            <InProgress />
         </div>
     )
 }
diff --git a/app/read/layout.tsx b/app/read/layout.tsx
new file mode 100644
index 0000000..c95f6e6
--- /dev/null
+++ b/app/read/layout.tsx
@@ -0,0 +1,7 @@
+export default function ReadSectionLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <div className="min-h-screen bg-gradient-to-b from-slate-300 to-fuchsia-100 dark:from-black dark:to-fuchsia-900">
+            { children }
+        </div>
+    )
+}
diff --git a/app/read/page.tsx b/app/read/page.tsx
index 90ca152..ebda7a1 100644
--- a/app/read/page.tsx
+++ b/app/read/page.tsx
@@ -1,3 +1,5 @@
-export default function BlogIndex() {
-    return <div>BlogIndex</div>;
+import InProgress from "@/components/InProgress";
+
+export default async function BlogIndex() {
+    return <InProgress />;
 }
diff --git a/components/Navbar/index.tsx b/components/Navbar/index.tsx
index a088c91..2fed560 100644
--- a/components/Navbar/index.tsx
+++ b/components/Navbar/index.tsx
@@ -28,12 +28,8 @@ export default function Navbar() {
             id="navbar"
             className={`
                 w-full z-50 fixed flex flex-nowrap items-baseline justify-apart px-8 py-4
-                ${mobileMenuOpen
-                    ? "bg-slate-300 dark:bg-[#131313]  "
-                    : pageIsScrolled
-                    ? "bg-slate-300 dark:bg-black "
-                    : "bg-inherit "
-                }text-white transition-all duration-200`
+                ${pageIsScrolled ? "bg-slate-300 dark:bg-black " : "bg-inherit "}
+                text-white transition-all duration-200`
             }>
             <Link passHref href="/" className="w-1/4">
                 <InlineLogo customHookInstance={navbarColorShift} />