diff --git a/index.html b/index.html
index 0c589ec..8d74c64 100644
--- a/index.html
+++ b/index.html
@@ -2,9 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <meta name="description" content="Full Stack Developer focused on React, Next and Express framerworks"/>
+    <title>Paul Hughes - Full Stack Developer</title>
+    <link rel="canonical" href="https://paulus.casa">
+    <link rel="icon" type="image/png" href="/favicon.png" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000..1ac05fe
Binary files /dev/null and b/public/favicon.png differ
diff --git a/src/App.jsx b/src/App.jsx
index 6cc3f51..babd99b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,15 +1,16 @@
-import { useState } from 'react'
-import './App.css'
+/* ----- Project Imports ----- */
+import "./App.css";
+import Header from "@/components/Header.jsx";
+import Footer from "@/components/Footer.jsx";
+import Content from "@/components/Content.jsx";
 
 function App() {
 
   return (
     <>
-      <div>
-      <p>
-        paragraph
-      </p>
-      </div>
+    <Header />
+    <Content />
+    <Footer />
     </>
   )
 }
diff --git a/src/components/Content.jsx b/src/components/Content.jsx
new file mode 100644
index 0000000..dc0a52c
--- /dev/null
+++ b/src/components/Content.jsx
@@ -0,0 +1,14 @@
+/* ----- Project Imports ----- */
+import Details from "@/components/Details.jsx";
+import Projects from "@/components/Projects.jsx"
+
+function Content() {
+  return (
+    <main className="contentContainer">
+    <Details />
+    <Projects />
+    </main>
+  );
+};
+
+export default Content;
diff --git a/src/components/Details.jsx b/src/components/Details.jsx
new file mode 100644
index 0000000..633c980
--- /dev/null
+++ b/src/components/Details.jsx
@@ -0,0 +1,14 @@
+/* ----- Project Imports ----- */
+
+
+
+function Details() {
+  return (
+    <article className="detailsContainer">
+    <p>This be some details</p>
+    </article>
+  );
+};
+
+export default Details;
+
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
new file mode 100644
index 0000000..3443d77
--- /dev/null
+++ b/src/components/Footer.jsx
@@ -0,0 +1,13 @@
+/* ----- Project Imports ----- */
+
+
+
+function Footer() {
+  return (
+    <footer>
+    <p>footer stuff rn </p>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
new file mode 100644
index 0000000..5c1b09c
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,13 @@
+/* ----- Project Imports ----- */
+
+
+
+function Header() {
+  return (
+    <header>
+    <p>This is some header stuff rn </p>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/src/components/Projects.jsx b/src/components/Projects.jsx
new file mode 100644
index 0000000..8c86380
--- /dev/null
+++ b/src/components/Projects.jsx
@@ -0,0 +1,14 @@
+/* ----- Project Imports ----- */
+
+
+
+function Projects() {
+  return (
+    <article className="projectsContainer">
+    <p>This be some projects</p>
+    </article>
+  );
+};
+
+export default Projects;
+
diff --git a/vite.config.js b/vite.config.js
index 5a33944..65795c3 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,13 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src/"),
+    },
+  },
+});
