diff --git a/app/Hannah/CV/page.tsx b/app/Hannah/CV/page.tsx
new file mode 100644
index 0000000..6af6b4a
--- /dev/null
+++ b/app/Hannah/CV/page.tsx
@@ -0,0 +1,10 @@
+import Referencelink from "@/components/ui/Referencelink";
+
+export default function CVPage(){
+  return (
+      <div className="flex w-full h-full justify-center flex-col">
+        <iframe src="/cv.pdf" className={'w-full h-[90vh] max-w-4xl border rounded-xl shadow'} />
+        <Referencelink name={"Download"} link={"/cv.pdf"}/>
+      </div>
+  )
+}
\ No newline at end of file
diff --git a/app/Hannah/Portfolio/CV/page.tsx b/app/Hannah/Portfolio/CV/page.tsx
deleted file mode 100644
index d24a8eb..0000000
--- a/app/Hannah/Portfolio/CV/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import UnderConstruction from "@/components/static_pages/UnderConstruction";
-
-export default function CVPage(){
-  return (
-    <UnderConstruction />
-  )
-}
\ No newline at end of file
diff --git a/app/Hannah/Portfolio/Projects/page.tsx b/app/Hannah/Portfolio/Projects/page.tsx
deleted file mode 100644
index 15808b1..0000000
--- a/app/Hannah/Portfolio/Projects/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import UnderConstruction from "@/components/static_pages/UnderConstruction";
-
-export default function Projects() {
-  return (
-    <UnderConstruction />
-  )
-}
\ No newline at end of file
diff --git a/app/Hannah/Projects/page.tsx b/app/Hannah/Projects/page.tsx
new file mode 100644
index 0000000..fdff9ed
--- /dev/null
+++ b/app/Hannah/Projects/page.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import React, {useState} from "react";
+import Image from "next/image";
+
+import RoundedContainer from "@/components/ui/RoundedContainer";
+import Hyperlink from "@/components/ui/Hyperlink";
+
+type Project = {
+  id: number;
+  isChildProject: boolean; // TODO: Better implementation of defining Project slide as child project
+  parentProject?: number;
+  title: string;
+  content: React.ReactNode;
+}
+
+const projects: Project[] = [
+  {
+    id: 1,
+    isChildProject: false,
+    title: "Project Page Information",
+    content: (
+      <div className="prose space-y-2">
+        <p className="text-xl">Hello!</p>
+        <p>{"This is the project view page. Here you can get a quick idea of what sort of things I've worked on. Unfortunately it relies on me making these project sides manually, and thus only notable projects will end up on here. If you're looking for a brief overview of, for example what languages I've worked in, I suggest you take a peek at my git page."}</p>
+        <div className="flex flex-row justify-around">
+          <Hyperlink name={"My self-hosted Git"} link={"dagemark.se/git/Hannah"} />
+          <Hyperlink name={"My Github"} link={"github.com/Hannah-Dagemark"} />
+        </div>
+      </div>
+    )
+  },
+  {
+    id: 2,
+    isChildProject: false,
+    title: "Dagemark Homelab",
+    content: (
+      <div className="prose space-y-2">
+        <p>{"The main project which I've been working on since December. For those unfamiliar with the concept, a HomeLab is a custom server one builds and runs in their own home to give them more autonomy and control over their digital services. In my case, it's also to let me get some very useful experience in networking, docker management, service handling, server interfacing, and more. Due to this project's size, it's been split up into sub-projects."}</p>
+        <Image
+          src="/ServerUML.png"
+          alt="(Server UML Image Here)"
+          width={800}
+          height={500}
+          priority
+        />
+        <p>{"Here's an example of how the networking looks like inside the server right now, with most services (including this website!) being ran with docker using a docker compose setup. One of those services is Nginx Proxy Manager which does reverse proxying and routing for the server."}</p>
+      </div>
+    )
+  },
+  {
+    id: 3,
+    isChildProject: true,
+    parentProject: 2, // TODO: Not used right now, but still put down here for reference during implementation
+    title: "Main Website",
+    content: (
+      <div className="prose space-y-3">
+        <a href="https://dagemark.se/git/Hannah/Dagemark-Webapp" >Click here to go to Git Page</a>
+        <p>{"The main website that you're currently on. The website is written in Typescript, using the NextJS React toolkit. It also uses TailwindCSS for CSS styling, as well as eslint to keep code clean and uniform."}</p>
+        <p>{"Currently the website is only a frontend page, although a backend is in the works. The idea is to have the website be very editable online, including these project pages as an example. For that a robust user handling system needs to be created however, and a good backend api, which is the planned next step."}</p>
+        <p>{"This project has been a very nice way for me to jog my memory from my technical fourth year, where I originally learned this development stack. I also find web development to be a good way of training the other aspects of development, as planning routes, page layouts, apis, reusable components and thematics is very essential."}</p>
+      </div>
+    )
+  },
+  {
+    id: 4,
+    isChildProject: false,
+    title: "Count Duch King",
+    content: "[To be implemented]"
+  },
+]
+
+export default function Projects() {
+
+  // TODO: make the content server stored, of course!
+
+  const [activeProject, setActiveProject] = useState(projects[0]);
+
+  return (
+    <div className="flex h-full w-full justify-center py-10">
+      <RoundedContainer>
+        <div className="flex w-230 h-250 justify-center min-h-screen bg-gray-600 rounded-2xl py-10">
+          {/* Notebook Wrapper */}
+          <div className="relative flex w-full h-full pr-5">
+
+            {/* Chapter Tabs */}
+            <div className="flex flex-col justify-start pt-10 pr-5">
+              {projects.map((project) => (
+                <button
+                  key={project.id}
+                  onClick={() => setActiveProject(project)}
+                  className={`${project.isChildProject ? "ml-2 mr-2 pl-3 border-l-4 border-t-2 border-slate-500 text-sm" : "mt-2 rounded-r-lg"}
+                  px-4 py-2  text-left transition
+                ${
+                    activeProject.id === project.id
+                      ? "bg-slate-300 shadow-md"
+                      : "bg-slate-400 hover:bg-slate-500"
+                  }`}
+                >
+                  {project.title}
+                </button>
+              ))}
+            </div>
+
+            {/* Main Notebook Page */}
+            <div className="flex-1 bg-gray-200 rounded-xl shadow-xl p-5 border-2 border-gray-800">
+              <h2 className="text-slate-800 text-2xl font-bold mb-4">
+                {activeProject.title}
+              </h2>
+              <p className="text-slate-700">
+                {activeProject.content}
+              </p>
+            </div>
+
+          </div>
+        </div>
+      </RoundedContainer>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/Hannah/Portfolio/layout.tsx b/app/Hannah/layout.tsx
similarity index 83%
rename from app/Hannah/Portfolio/layout.tsx
rename to app/Hannah/layout.tsx
index fbca16f..46a28bc 100644
--- a/app/Hannah/Portfolio/layout.tsx
+++ b/app/Hannah/layout.tsx
@@ -3,7 +3,7 @@ import React from "react";
 export default function AdminLayout({children}: {children: React.ReactNode}) {
   // TODO: Put custom portfolio layout :]
   return (
-    <div>
+    <div className={'w-full h-full'}>
       {children}
     </div>
   )
diff --git a/app/Hannah/page.tsx b/app/Hannah/page.tsx
index 1404a83..57f33d0 100644
--- a/app/Hannah/page.tsx
+++ b/app/Hannah/page.tsx
@@ -1,10 +1,30 @@
+import Image from "next/image";
+
 import Referencelink from "@/components/ui/Referencelink";
+import RoundedContainer from "@/components/ui/RoundedContainer";
 
 export default function Hannah() {
   return (
-    <div className="flex flex-col items-center justify-center w-full h-full">
-      <iframe src="/cv.pdf" className={'w-full h-[90vh] max-w-4xl border rounded-xl shadow'} />
-      <Referencelink name={"Download"} link={"/cv.pdf"}/>
+    <div className="flex h-full w-full justify-center py-10">
+      <RoundedContainer slim={false}>
+        <div className="flex w-full flex-row justify-between">
+          <Referencelink name={"Projects"} link={"/Hannah/Projects"} />
+          <Referencelink name={"CV"} link={"/Hannah/CV"} />
+        </div>
+        <div className="flex w-full flex-col space-y-2 py-10">
+          <h1 className="text-2xl font-bold">Hi!</h1>
+          <p>{"I'm Hannah, and I made this website! It's currently very much in it's early stages, but I am actively developing it and soon it'll hopefully contain some good examples of what I do. Besides being a place to display my projects, it also acts as a hub for the different services I've incorporated into our home web ecosystem, or HomeLab."}</p>
+          <p>{"If you came here from a job application, chances are you'll want to take a look at the Projects tab. As said It's still fairly new, but it'll give you a good example of what I put my time into! Just press the \"Projects\" button if you're interested"}</p>
+          <p>{"In the meantime, here's a picture of my cat :D"}</p>
+          <Image
+            src="/Missy.jpg"
+            alt="(If no cat image here, it has broken :C)"
+            width={400}
+            height={400}
+            priority
+          />
+        </div>
+      </RoundedContainer>
     </div>
   )
 }
\ No newline at end of file
diff --git a/public/Missy.jpg b/public/Missy.jpg
new file mode 100644
index 0000000..1ab4c58
Binary files /dev/null and b/public/Missy.jpg differ
diff --git a/public/ServerUML.png b/public/ServerUML.png
new file mode 100644
index 0000000..f09ba0e
Binary files /dev/null and b/public/ServerUML.png differ