diff --git a/app/components/body/Body.css.ts b/app/components/page/body/Body.css.ts
similarity index 100%
rename from app/components/body/Body.css.ts
rename to app/components/page/body/Body.css.ts
diff --git a/app/components/body/Body.tsx b/app/components/page/body/Body.tsx
similarity index 100%
rename from app/components/body/Body.tsx
rename to app/components/page/body/Body.tsx
diff --git a/app/components/page/body/index.ts b/app/components/page/body/index.ts
new file mode 100644
index 0000000..92d3a6b
--- /dev/null
+++ b/app/components/page/body/index.ts
@@ -0,0 +1 @@
+export * from "./Body"
diff --git a/app/components/footer/Footer.css.ts b/app/components/page/footer/Footer.css.ts
similarity index 100%
rename from app/components/footer/Footer.css.ts
rename to app/components/page/footer/Footer.css.ts
diff --git a/app/components/footer/Footer.tsx b/app/components/page/footer/Footer.tsx
similarity index 89%
rename from app/components/footer/Footer.tsx
rename to app/components/page/footer/Footer.tsx
index 99cdf34..5a9fbf5 100644
--- a/app/components/footer/Footer.tsx
+++ b/app/components/page/footer/Footer.tsx
@@ -1,6 +1,6 @@
 import { Link } from "@remix-run/react"
 
-import { Spacer } from "../spacer/Spacer"
+import { Spacer } from "../../spacer/Spacer"
 import { root } from "./Footer.css"
 
 export function Footer() {
diff --git a/app/components/page/footer/index.ts b/app/components/page/footer/index.ts
new file mode 100644
index 0000000..a29a2e5
--- /dev/null
+++ b/app/components/page/footer/index.ts
@@ -0,0 +1 @@
+export * from "./Footer"
diff --git a/app/components/header/Header.css.ts b/app/components/page/header/Header.css.ts
similarity index 100%
rename from app/components/header/Header.css.ts
rename to app/components/page/header/Header.css.ts
diff --git a/app/components/header/Header.tsx b/app/components/page/header/Header.tsx
similarity index 100%
rename from app/components/header/Header.tsx
rename to app/components/page/header/Header.tsx
diff --git a/app/components/page/header/index.ts b/app/components/page/header/index.ts
new file mode 100644
index 0000000..661052e
--- /dev/null
+++ b/app/components/page/header/index.ts
@@ -0,0 +1 @@
+export * from "./Header"
diff --git a/app/components/header/logo-dark.svg b/app/components/page/header/logo-dark.svg
similarity index 100%
rename from app/components/header/logo-dark.svg
rename to app/components/page/header/logo-dark.svg
diff --git a/app/components/page/index.ts b/app/components/page/index.ts
new file mode 100644
index 0000000..98ae5ac
--- /dev/null
+++ b/app/components/page/index.ts
@@ -0,0 +1,4 @@
+export * from "./body"
+export * from "./footer"
+export * from "./header"
+export * from "./main"
diff --git a/app/components/main/Main.css.ts b/app/components/page/main/Main.css.ts
similarity index 100%
rename from app/components/main/Main.css.ts
rename to app/components/page/main/Main.css.ts
diff --git a/app/components/main/Main.tsx b/app/components/page/main/Main.tsx
similarity index 100%
rename from app/components/main/Main.tsx
rename to app/components/page/main/Main.tsx
diff --git a/app/components/page/main/index.ts b/app/components/page/main/index.ts
new file mode 100644
index 0000000..3c0d274
--- /dev/null
+++ b/app/components/page/main/index.ts
@@ -0,0 +1 @@
+export * from "./Main"
diff --git a/app/root.tsx b/app/root.tsx
index 4800e14..c04fcca 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -9,11 +9,8 @@ import {
 } from "@remix-run/react"
 import type { PropsWithChildren } from "react"
 
-import { Body } from "./components/body/Body"
 import { FavIcon } from "./components/favicon/FavIcon"
-import { Footer } from "./components/footer/Footer"
-import { Header } from "./components/header/Header"
-import { Main } from "./components/main/Main"
+import { Body, Footer, Header, Main } from "./components/page"
 
 export function Layout({ children }: PropsWithChildren) {
   return (