diff --git a/astro.config.mjs b/astro.config.mjs
index e762ba5..53e49de 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,5 +1,9 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
 
+import react from '@astrojs/react';
+
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  integrations: [react()]
+});
\ No newline at end of file
diff --git a/package.json b/package.json
index 155c99d..9cd3075 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,13 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^5.2.3"
+    "@astrojs/react": "^4.2.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "astro": "^5.2.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sass": "^1.83.4",
+    "scss": "^0.2.4"
   }
 }
\ No newline at end of file
diff --git a/public/Terminus.woff2 b/public/Terminus.woff2
new file mode 100644
index 0000000..728475b
Binary files /dev/null and b/public/Terminus.woff2 differ
diff --git a/src/components/button.astro b/src/components/button.astro
new file mode 100644
index 0000000..abd28de
--- /dev/null
+++ b/src/components/button.astro
@@ -0,0 +1,21 @@
+---
+interface Props {
+	href: string,
+	display: string,
+	color?: string
+}
+const {href, display, color = "transparent"} = Astro.props
+---
+
+<button style={`background-color: ${color}`}>
+	<a href={href}>{display}</a>
+</button>
+
+<style lang="scss">
+	button {
+		height: 100%;
+		padding: 0 20px 0 20px;
+
+		&:hover { background-color: var(--hf-button-hover-color) }
+	}
+</style>
\ No newline at end of file
diff --git a/src/components/footer.astro b/src/components/footer.astro
new file mode 100644
index 0000000..bff8e6a
--- /dev/null
+++ b/src/components/footer.astro
@@ -0,0 +1,46 @@
+---
+---
+
+<footer>
+	<p class="raw-text" id="time">00:00:00</p>
+	<section>
+		<p class="raw-text" id="column-line">0, 0</p>
+		<button id="toggle-monospace">Monospace</button>
+		<button id="toggle-term-mode">UNIX</button>
+	</section>
+	<noscript>
+		<style>
+			#toggle-monospace, .raw-text { display: none }
+		</style>
+	</noscript>
+</footer>
+
+<style lang="scss">
+	@use "../scss/variables";
+
+	footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100vw;
+		height: variables.$footer-Y;
+		background-color: var(--body-background-color)
+	}
+	p {
+		padding: 0 20px 0 20px;
+	}
+	section {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+
+		button {
+			height: 100%;
+			padding: 0 20px 0 20px;
+
+			&:hover { background-color: var(--hf-button-hover-color) }
+		}
+	}
+	#toggle-term-mode { background-color: rgb(0,50,90) }
+</style>
\ No newline at end of file
diff --git a/src/components/header.astro b/src/components/header.astro
new file mode 100644
index 0000000..0d2ed05
--- /dev/null
+++ b/src/components/header.astro
@@ -0,0 +1,28 @@
+---
+import Button from './button.astro'
+import { Links } from '../ts/links';
+---
+
+<header>
+	<Button href={Links.Self} display="[rhpidfyre.io]" color="black"/>
+	<section>
+		<Button href={Links.Git} display="REPOS"/>
+		<Button href={Links.Cloud} display="CLOUD"/>
+		<Button href={Links.Gsm} display="GSM"/>
+	</section>
+</header>
+
+<style lang="scss">
+	@use "../scss/variables";
+
+	header {
+		display: flex;
+		justify-content: space-between;
+		width: 100vw;
+		height: variables.$header-Y;
+		background-color: rgb(10,10,10);
+
+		p { margin-left: 10px; }
+	}
+	section { height: 100%; }
+</style>
\ No newline at end of file
diff --git a/src/components/metas.astro b/src/components/metas.astro
new file mode 100644
index 0000000..75cdb78
--- /dev/null
+++ b/src/components/metas.astro
@@ -0,0 +1,3 @@
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width"/>
+<meta name="generator" content={Astro.generator}/>
\ No newline at end of file
diff --git a/src/components/terminal.astro b/src/components/terminal.astro
new file mode 100644
index 0000000..e69de29
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
deleted file mode 100644
index e455c61..0000000
--- a/src/layouts/Layout.astro
+++ /dev/null
@@ -1,22 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro Basics</title>
-	</head>
-	<body>
-		<slot />
-	</body>
-</html>
-
-<style>
-	html,
-	body {
-		margin: 0;
-		width: 100%;
-		height: 100%;
-	}
-</style>
diff --git a/src/layouts/Webpage.astro b/src/layouts/Webpage.astro
new file mode 100644
index 0000000..18444cf
--- /dev/null
+++ b/src/layouts/Webpage.astro
@@ -0,0 +1,63 @@
+---
+import Metas from "../components/metas.astro"
+import Header from "../components/header.astro"
+import Footer from "../components/footer.astro"
+
+interface Props {
+	title: string,
+}
+const {title} = Astro.props
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<Metas/>
+		<link rel="icon" type="image/png" href="/logo.png"/>
+		<title>{`rhpidfyre.io | ${title}`}</title>
+	</head>
+	<body>
+		<Header title={title}/>
+		<slot/>
+		<Footer/>
+	</body>
+</html>
+
+<style is:global lang="scss">
+	@forward "../scss/fonts";
+	@forward "../scss/terminal";
+
+	* {
+		font-family: 'Terminus', monospace;
+		font-size: 15px;
+		letter-spacing: 2px;
+		cursor: text;
+	}
+	:root {
+		color-scheme: dark;
+
+		--body-background-color: rgb(0,0,0);
+		--hf-button-hover-color: rgb(50,50,50);
+	}
+	::selection {
+		background-color: rgb(255,255,255);
+		color: rgb(0,0,0);
+	}
+
+	body {
+		box-sizing: border-box;
+		margin: 0;
+		overflow: hidden;
+		background-color: var(--body-background-color);
+	}
+	button {
+		background-color: transparent;
+		border: 0;
+	}
+	a {
+		color: white;
+		cursor:	unset;
+
+		&:hover, &:active, &:link { text-decoration: none; }
+	}
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 57d29ac..c6ccd28 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,57 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import Webpage from '../layouts/Webpage.astro';
+import { Links } from '../ts/links';
 ---
 
-<Layout>
+<Webpage title="Home">
+	<main>
+		<p>Welcome to rhpidfyre.io!</p>
+		<div class="return"></div>
+		<p>This is a personal website by rhpidfyre / Brandon.</p>
+		<p>You can find my services here or learn about me.</p>
+		<div class="return"></div>
+		<p>You can also contribute or view the source code of my website via the links:</p>
+		<p>{"<"}<a href={Links.RepoGitea} target="_blank">{Links.RepoGitea}</a>{">."}</p>
+		<p>{"<"}<a href={Links.RepoGithub} target="_blank">{Links.RepoGithub}</a>{">."}</p>
+		<div class="return"></div>
+		<p>You can get started with the command: help</p>
+		<div class="return"></div>
+		<noscript>
+			<p><span class="red">=================================================</span></p>
+			<p><span class="red">JavaScript is disabled, functionality will be limited. :(</span></p>
+			<p><span class="red">But, you will not be limited at exploring my services which you can find by navigating towards the top-right.</span></p>
+			<p><span class="red">=================================================</span></p>
+		</noscript>
+	</main>
+</Webpage>
 
-</Layout>
+<style lang="scss">
+	@use "../scss/variables";
+
+	@mixin text-styles {
+		.red   { color: rgb(200,0,0); }
+		.green { color: rgb(0,200,0); }
+		.blue  { color: rgb(0,0,200); }
+	}
+
+	:global(main) {
+		width: 100vw;
+		height: calc(99.3vh - variables.$header-Y - variables.$footer-Y);
+		padding: 5px;
+		overflow-y: auto;
+
+		p {
+			@include text-styles;
+			font-size: 1.2rem;
+			margin: 5px;
+
+			a {
+				font-size: inherit;
+				&:hover { text-decoration: underline; }
+			}
+		}
+		.return {
+			margin-top: 25px;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/scss/fonts.scss b/src/scss/fonts.scss
new file mode 100644
index 0000000..77693c0
--- /dev/null
+++ b/src/scss/fonts.scss
@@ -0,0 +1,7 @@
+@font-face {
+	font-display: swap;
+	font-family: 'Terminus';
+	font-style: normal;
+	font-weight: 500;
+	src: url('/Terminus.woff2') format('woff2');
+}
\ No newline at end of file
diff --git a/src/scss/terminal.scss b/src/scss/terminal.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
new file mode 100644
index 0000000..90e5f50
--- /dev/null
+++ b/src/scss/variables.scss
@@ -0,0 +1,3 @@
+$header-Y: 30px;
+$footer-Y: 30px;
+$component-padding: 20px;
\ No newline at end of file
diff --git a/src/ts/links.ts b/src/ts/links.ts
new file mode 100644
index 0000000..1934c07
--- /dev/null
+++ b/src/ts/links.ts
@@ -0,0 +1,10 @@
+const enum Links {
+	Self = "https://rhpidfyre.io/",
+	Cloud = "https://files.rhpidfyre.io/",
+	Gsm = "https://gsm.rhpidfyre.io/",
+	Git = "https://git.rhpidfyre.io/",
+	RepoGitea = "https://git.rhpidfyre.io/rhpidfyre/rhpidfyre.io/",
+	RepoGithub = "https://github.com/unixtensor/rhpidfyre.io/"
+}
+
+export { Links }
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 6391f9e..8b67c1f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,8 +1,15 @@
 {
   "extends": "astro/tsconfigs/strict",
-  "include": [".astro/types.d.ts", "**/*"],
-  "exclude": ["dist"],
+  "include": [
+    ".astro/types.d.ts",
+    "**/*"
+  ],
+  "exclude": [
+    "dist"
+  ],
   "compilerOptions": {
-  	"noImplicitAny": true
+    "noImplicitAny": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
   }
-}
+}
\ No newline at end of file