diff --git a/src/components/Footer.tsx b/src/components/Layout/Footer.tsx
similarity index 100%
rename from src/components/Footer.tsx
rename to src/components/Layout/Footer.tsx
diff --git a/src/components/Header.tsx b/src/components/Layout/Header.tsx
similarity index 100%
rename from src/components/Header.tsx
rename to src/components/Layout/Header.tsx
diff --git a/src/components/Layout.tsx b/src/components/Layout/index.tsx
similarity index 100%
rename from src/components/Layout.tsx
rename to src/components/Layout/index.tsx
diff --git a/src/main.tsx b/src/main.tsx
index f885389..e58bff0 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,9 +2,9 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter, Routes, Route } from "react-router";
 import "./index.css";
-import Layout from "./components/Layout.tsx";
-import Home from "./routes/Home.tsx";
-import About from "./routes/About.tsx";
+import Layout from "./components/Layout";
+import Home from "./routes/Home";
+import About from "./routes/About";
 
 const root = document.getElementById("root");
 
diff --git a/src/routes/About.tsx b/src/routes/About.tsx
deleted file mode 100644
index 223886b..0000000
--- a/src/routes/About.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function About() {
-  return (
-    <main className="min-h-[75vh] grid place-items-center bg-primary">
-      <p className="text-xl">About page</p>
-    </main>
-  );
-}
diff --git a/src/routes/About/index.tsx b/src/routes/About/index.tsx
new file mode 100644
index 0000000..9586de7
--- /dev/null
+++ b/src/routes/About/index.tsx
@@ -0,0 +1,7 @@
+export default function About() {
+  return (
+    <main className="min-h-[25vh] grid place-items-center bg-primary">
+      <h3 className="text-3xl text-secondary">About Code Cafe</h3>
+    </main>
+  );
+}
diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx
deleted file mode 100644
index 0c8f109..0000000
--- a/src/routes/Home.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import Hero from "../components/Hero";
-import Features from "../components/Features";
-import CTA from "../components/CTA";
-import Showcase from "../components/Showcase.tsx";
-
-export default function Home() {
-  return (
-    <>
-      <Hero />
-      <Features />
-      <Showcase />
-      <CTA />
-    </>
-  );
-}
diff --git a/src/components/CTA.tsx b/src/routes/Home/CTA.tsx
similarity index 100%
rename from src/components/CTA.tsx
rename to src/routes/Home/CTA.tsx
diff --git a/src/components/Features.tsx b/src/routes/Home/Features.tsx
similarity index 100%
rename from src/components/Features.tsx
rename to src/routes/Home/Features.tsx
diff --git a/src/components/Hero.tsx b/src/routes/Home/Hero.tsx
similarity index 100%
rename from src/components/Hero.tsx
rename to src/routes/Home/Hero.tsx
diff --git a/src/components/Showcase.tsx b/src/routes/Home/Showcase.tsx
similarity index 100%
rename from src/components/Showcase.tsx
rename to src/routes/Home/Showcase.tsx
diff --git a/src/routes/Home/index.tsx b/src/routes/Home/index.tsx
new file mode 100644
index 0000000..9c364b3
--- /dev/null
+++ b/src/routes/Home/index.tsx
@@ -0,0 +1,15 @@
+import Hero from "./Hero";
+import Features from "./Features";
+import CTA from "./CTA";
+import Showcase from "./Showcase";
+
+export default function Home() {
+  return (
+    <>
+      <Hero />
+      <Features />
+      <Showcase />
+      <CTA />
+    </>
+  );
+}