diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
new file mode 100644
index 0000000..a5160b6
Binary files /dev/null and b/public/android-chrome-192x192.png differ
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
new file mode 100644
index 0000000..73a74e0
Binary files /dev/null and b/public/android-chrome-512x512.png differ
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000..6cf2242
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
new file mode 100644
index 0000000..78995ca
Binary files /dev/null and b/public/favicon-16x16.png differ
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
new file mode 100644
index 0000000..4c5fab5
Binary files /dev/null and b/public/favicon-32x32.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..c6f97ca
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/favicon.svg b/public/favicon.svg
deleted file mode 100644
index f157bd1..0000000
--- a/public/favicon.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
-</svg>
diff --git a/public/site.webmanifest b/public/site.webmanifest
new file mode 100644
index 0000000..45dc8a2
--- /dev/null
+++ b/public/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
diff --git a/src/components/Favicon.astro b/src/components/Favicon.astro
new file mode 100644
index 0000000..2ae04b3
--- /dev/null
+++ b/src/components/Favicon.astro
@@ -0,0 +1,4 @@
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+<link rel="manifest" href="/site.webmanifest" />
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
new file mode 100644
index 0000000..1d8b9c9
--- /dev/null
+++ b/src/components/Footer.astro
@@ -0,0 +1,18 @@
+---
+const buttonFormat = "gif";
+
+import Social from './Social.astro';
+---
+
+<style>
+  footer {
+    display: flex;
+    gap: 1rem;
+    margin-top: 2rem;
+  }
+</style>
+
+<footer>
+  <img class="badge" src={`/static/img/buttons/aria.${buttonFormat}`} decoding="async" />
+  <Social />
+</footer>
\ No newline at end of file
diff --git a/src/components/FriendLink.astro b/src/components/FriendLink.astro
new file mode 100644
index 0000000..2ee31b2
--- /dev/null
+++ b/src/components/FriendLink.astro
@@ -0,0 +1,4 @@
+---
+const { name, image, target } = Astro.props;
+---
+<a href={`${target}`}><img class="badge" src={`${image}`} alt={`${name}`} decoding="async" /></a>
\ No newline at end of file
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
new file mode 100644
index 0000000..2a8d531
--- /dev/null
+++ b/src/components/Navigation.astro
@@ -0,0 +1,6 @@
+<div class="nav-links">
+    <a href="/">Home</a>
+    <a href="/about">About</a>
+    <a href="/blog">Blog</a>
+    <a href="/friends">Friends</a>
+  </div>
\ No newline at end of file
diff --git a/src/components/Social.astro b/src/components/Social.astro
new file mode 100644
index 0000000..6b1e319
--- /dev/null
+++ b/src/components/Social.astro
@@ -0,0 +1,12 @@
+<a href="https://bsky.app/profile/did:plc:bzrn33tcfgjxnsanvg6py3xn">Bluesky</a>
+<a href="https://buymymojo.net/twitter/">Twitter(Archive)</a>
+
+<style>
+    a {
+      padding: 0.5rem 1rem;
+      color: white;
+      background-color: #4c1d95;
+      text-decoration: none;
+      border-radius: 8px;
+    }
+  </style>
\ No newline at end of file
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
new file mode 100644
index 0000000..e5c5870
--- /dev/null
+++ b/src/layouts/BaseLayout.astro
@@ -0,0 +1,25 @@
+---
+import Navigation from '../components/Navigation.astro';
+import Favicon from '../components/Favicon.astro';
+import Footer from '../components/Footer.astro';
+import '../styles/aria.css';
+
+const { pageTitle } = Astro.props;
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+	<Favicon />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} >
+    <title>{pageTitle}</title>
+  </head>
+  <body>
+	<Navigation />
+
+    <h1>{pageTitle}</h1>
+    <slot />
+	<Footer />
+  </body>
+</html>
\ No newline at end of file
diff --git a/src/pages/about.astro b/src/pages/about.astro
new file mode 100644
index 0000000..560fc80
--- /dev/null
+++ b/src/pages/about.astro
@@ -0,0 +1,96 @@
+---
+import Navigation from '../components/Navigation.astro';
+import Favicon from '../components/Favicon.astro';
+import Footer from '../components/Footer.astro';
+import '../styles/aria.css';
+
+const pageTitle = "About Aria";
+
+const identity = {
+    firstName: "Aria",
+    country: "Australia",
+    occupation: "Phone & Computer Repair Tech",
+    hobbies: ["gaming", "software/game development", "3D printing"],
+};
+
+const skills = ["Rust", "GDScript", "FFMPEG"];
+
+const currentSystem = {
+    operatingSystem: "EndeavourOS",
+    host: "X570 Phantom Gaming 4",
+    shell: "zsh",
+    mainDisplay: "Gigabyte M27U",
+    mainDisplayRtings: "https://www.rtings.com/monitor/reviews/gigabyte/m27u",
+    cpu: "AMD Ryzen 9 5900X",
+    gpu: "AMD Radeon RX 7800 XT",
+    ram: "48GB",
+    localIP: "Local IP (enp4s0): 192.168.20.2/24",
+};
+
+const skillColor = "green";
+---
+
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <Favicon />
+        <meta name="viewport" content="width=device-width" />
+        <meta name="generator" content={Astro.generator} />
+        <title>{pageTitle}</title>
+        <style define:vars={{skillColor}}>
+            h1 {
+                color: purple;
+                font-size: 4rem;
+            }
+            .skill {
+                color: var(--skillColor);
+                font-weight: bold;
+            }
+        </style>
+    </head>
+    <body>
+        <Navigation />
+
+        <h1>{pageTitle}</h1>
+
+        <p>It's about time I actually write up my own website right?</p>
+
+        <p>Here are a few facts about me:</p>
+        <ul>
+            <li>My name is {identity.firstName}.</li>
+            <li>
+                I live in {identity.country} and I work as a {
+                    identity.occupation
+                }.
+            </li>
+            {
+                identity.hobbies.length >= 2 && (
+                    <li>
+                        Two of my hobbies are: {identity.hobbies[0]} and{" "}
+                        {identity.hobbies[1]}
+                    </li>
+                )
+            }
+        </ul>
+        <p>Some of my skills are:</p>
+        <ul>
+            {skills.map((skill) => <li class="skill">{skill}</li>)}
+        </ul>
+
+        <p>My system:</p>
+        <ul>
+            <li>OS: {currentSystem.operatingSystem}</li>
+            <li>Host: {currentSystem.host}</li>
+            <li>Shell: {currentSystem.shell}</li>
+            <li>
+                Main Display: <a href={currentSystem.mainDisplayRtings}
+                    >{currentSystem.mainDisplay}</a>
+            </li>
+            <li>CPU: {currentSystem.cpu}</li>
+            <li>GPU: {currentSystem.gpu}</li>
+            <li>RAM: {currentSystem.ram}</li>
+            <li>{currentSystem.localIP}</li>
+        </ul>
+        <Footer />
+    </body>
+</html>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
new file mode 100644
index 0000000..18129eb
--- /dev/null
+++ b/src/pages/blog.astro
@@ -0,0 +1,28 @@
+---
+import Navigation from '../components/Navigation.astro';
+import Favicon from '../components/Favicon.astro';
+import Footer from '../components/Footer.astro';
+import '../styles/aria.css';
+
+const pageTitle = "Aria's blog";
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+	<Favicon />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} >
+    <title>{pageTitle}</title>
+  </head>
+  <body>
+	<Navigation />
+	
+    <h1>{pageTitle}</h1>
+
+    <ul>
+      <li><a href="/posts/post-1/">Post 1</a></li>
+    </ul>
+    <Footer />
+  </body>
+</html>
\ No newline at end of file
diff --git a/src/pages/friends.astro b/src/pages/friends.astro
new file mode 100644
index 0000000..2e6e9c0
--- /dev/null
+++ b/src/pages/friends.astro
@@ -0,0 +1,33 @@
+---
+import Navigation from '../components/Navigation.astro';
+import Favicon from '../components/Favicon.astro';
+import Footer from '../components/Footer.astro';
+import FriendLink from '../components/FriendLink.astro';
+import '../styles/aria.css';
+
+const pageTitle = "Aria's friends";
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+	<Favicon />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} >
+    <title>{pageTitle}</title>
+  </head>
+  <body>
+	<Navigation />
+
+    <h1>{pageTitle}</h1>
+
+    <FriendLink name="Alyxia" image="https://alyxia.dev/static/img/88x31/self.png" target="https://alyxia.dev" />
+    <div class="linked-buttons">
+    <FriendLink name="Prefetcher" image="https://nanoshinono.me/prefetcher.gif" target="https://nanoshinono.me/" />
+    <FriendLink name="Ata" image="https://ata.moe/88x31.png" target="https://ata.moe" />
+    </div>
+    <FriendLink name="Amemoia" image="https://buh.moe/resources/buttons/88x31.gif" target="https://buh.moe" />
+
+	<Footer />
+  </body>
+</html>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 37e7832..428713a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,15 +1,8 @@
 ---
+import BaseLayout from '../layouts/BaseLayout.astro';
+const pageTitle = "Aria";
 ---
-
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width" />
-    <meta name="generator" content={Astro.generator} >
-    <title>Astro</title>
-  </head>
-  <body>
-    <h1>Aria</h1>
-  </body>
-</html>
\ No newline at end of file
+<BaseLayout pageTitle={pageTitle}>
+  <h2>You're all super cute!~</h2>
+  <h3>:3c</h3>
+</BaseLayout>
\ No newline at end of file
diff --git a/src/pages/posts/post-1.md b/src/pages/posts/post-1.md
new file mode 100644
index 0000000..e6aed93
--- /dev/null
+++ b/src/pages/posts/post-1.md
@@ -0,0 +1,12 @@
+---
+title: 'Getting started here'
+pubDate: 2024-12-16
+description: 'This is the first post of my new website.'
+author: 'Aria'
+tags: ["blogging", "learning in public"]
+---
+# Getting started here
+
+Published on: 2024-12-16
+
+I'll be expanding this as I work on it but for now this is my first more indepth website
diff --git a/src/styles/aria.css b/src/styles/aria.css
new file mode 100644
index 0000000..7d1608c
--- /dev/null
+++ b/src/styles/aria.css
@@ -0,0 +1,79 @@
+html {
+    background-color: #bbbec2;
+    font-family: sans-serif;
+}
+
+body {
+    margin: 0 auto;
+    width: 100%;
+    max-width: 80ch;
+    padding: 1rem;
+    line-height: 1.5;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+h1 {
+    margin: 1rem 0;
+    font-size: 2.5rem;
+}
+
+.badge {
+    image-rendering: pixelated;
+    min-width: 88px;
+    min-height: 31px;
+    padding: 4px;
+}
+
+.linked-buttons {
+    outline-style: dashed;
+    display:inline-block
+}
+
+/* nav styles */
+
+.nav-links {
+    width: 100%;
+    top: 5rem;
+    left: 48px;
+    background-color: #ff9776;
+    display: none;
+    margin: 0;
+  }
+  
+  .nav-links a {
+    display: block;
+    text-align: center;
+    padding: 10px 0;
+    text-decoration: none;
+    font-size: 1.2rem;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+  
+  .nav-links a:hover,
+  .nav-links a:focus {
+    background-color: #ff9776;
+  }
+  
+  .expanded {
+    display: unset;
+  }
+  
+  @media screen and (min-width: 636px) {
+    .nav-links {
+      margin-left: 5em;
+      display: block;
+      position: static;
+      width: auto;
+      background: none;
+    }
+  
+    .nav-links a {
+      display: inline-block;
+      padding: 15px 20px;
+    }
+  
+  }
\ No newline at end of file