diff --git a/src/assets/compressed-images/fwt.avif b/src/assets/compressed-images/fwt.avif
index 35f56c3..dc7b89e 100644
Binary files a/src/assets/compressed-images/fwt.avif and b/src/assets/compressed-images/fwt.avif differ
diff --git a/src/assets/compressed-images/fwt.webp b/src/assets/compressed-images/fwt.webp
index 32033be..484b34f 100644
Binary files a/src/assets/compressed-images/fwt.webp and b/src/assets/compressed-images/fwt.webp differ
diff --git a/src/builtin-components/Page/Page.sass b/src/builtin-components/Page/Page.sass
new file mode 100644
index 0000000..3d97ca8
--- /dev/null
+++ b/src/builtin-components/Page/Page.sass
@@ -0,0 +1,15 @@
+.page
+  margin: 2rem
+  height: auto
+
+.column
+  @extend .page
+  display: flex
+  flex-direction: column
+  text-align: center
+  justify-content: center
+  align-items: center
+
+.row
+  @extend .column
+  flex-direction: row
diff --git a/src/builtin-components/Page/Page.tsx b/src/builtin-components/Page/Page.tsx
new file mode 100644
index 0000000..d16977f
--- /dev/null
+++ b/src/builtin-components/Page/Page.tsx
@@ -0,0 +1,20 @@
+import './Page.sass'
+import { Show, Switch, Match } from 'solid-js'
+
+interface Props {
+  children?: any
+  alignment?: 'row' | 'column'
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Show when={props.alignment}>
+        <main class={props.alignment}>{props.children}</main>
+      </Show>
+      <Show when={!props.alignment}>
+        <main class="page">{props.children}</main>
+      </Show>
+    </>
+  )
+}
diff --git a/src/components/Counter.sass b/src/components/Counter/Counter.sass
similarity index 100%
rename from src/components/Counter.sass
rename to src/components/Counter/Counter.sass
diff --git a/src/components/Counter.tsx b/src/components/Counter/Counter.tsx
similarity index 100%
rename from src/components/Counter.tsx
rename to src/components/Counter/Counter.tsx