diff --git a/icons/house.svg b/icons/house.svg
new file mode 100644
index 0000000..d29d232
--- /dev/null
+++ b/icons/house.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house-icon lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
diff --git a/icons/image.svg b/icons/image.svg
new file mode 100644
index 0000000..0567f7a
--- /dev/null
+++ b/icons/image.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image-icon lucide-image"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
\ No newline at end of file
diff --git a/icons/spanner.svg b/icons/spanner.svg
new file mode 100644
index 0000000..6d8fb33
--- /dev/null
+++ b/icons/spanner.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench-icon lucide-wrench"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"/></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 09fc5a0..9e1c892 100644
--- a/index.html
+++ b/index.html
@@ -12,11 +12,24 @@
 
     <body>
         <header><div>
+            <button id="button-home" onclick="switchTab(this);"><img src="/icons/house.svg"> Home</button>
+            <button id="button-pics" onclick="switchTab(this);"><img src="/icons/image.svg"> Pictures</button>
+            <button id="button-projects" onclick="switchTab(this);"><img src="/icons/spanner.svg"> Cool things I've done</button>
         </div></header>
 
         <main>
-            <h1 id="helloText"><noscript>Hewwo!</noscript></h1>
-            <h2><span id="imaText"><noscript>I'm a <span class="textHighlight">dumbass</span></noscript></span>.</h2>
+            <article id="tab-home" default>
+                <h1 id="helloText"><noscript>Hewwo!</noscript></h1>
+                <h2><span id="imaText"><noscript>I'm a <span class="textHighlight">dumbass</span></noscript></span>.</h2>
+            </article>
+
+            <article id="tab-pics">
+ 
+            </article>
+
+            <article id="tab-projects">
+
+            </article>
         </main>
 
         <footer>
diff --git a/main.js b/main.js
index 4689acc..a3f9e13 100644
--- a/main.js
+++ b/main.js
@@ -28,7 +28,64 @@ function pickRandom(array) {
     return array[Maths.floor(Maths.random() * array.length)];
 }
 
+function switchTab(tabID, playAnimation=true) {
+    // Get tab ID from button
+    if (typeof(tabID) == 'object') {
+        tabID = tabID.id.split('button-')[1];
+    }
+
+    let tabs = document.getElementsByTagName('main')[0].children;
+    let tab = document.getElementById(`tab-${tabID}`);
+    let buttons = document.getElementsByTagName('header')[0].getElementsByTagName('button');
+    let button = document.getElementById(`button-${tabID}`)
+
+    // Error checking
+    if (tab == undefined) {
+        console.error(`Error switching tab: Tab ID "${tabID}" not found.`);
+        return;
+    }
+
+    // Hide all tabs
+    for (let i = 0; i < tabs.length; i++) {
+        if (tabs[i] == tab) { continue; }
+        tabs[i].classList.add('hiddenTab');
+        if (playAnimation) {
+            setTimeout(() => { tabs[i].style.display = 'none'; }, 500);
+        } else {
+            tabs[i].style.display = 'none';
+        }
+
+        if (button != null) {
+            button.classList.remove('buttonHighlight');
+        }
+    }
+
+    // Un-highlight all buttons
+    for (let i = 0; i < buttons.length; i++) {
+        buttons[i].classList.remove('buttonHighlight');
+    }
+
+    // Show selected tab
+    if (playAnimation) {
+        setTimeout(() => { tab.style.display = 'unset'; }, 500);
+    } else {
+        tab.style.display = 'unset';
+    }
+    // Required for animation to play
+    let intervalID = setInterval(() => {
+        if (tab.checkVisibility()) {
+            tab.classList.remove('hiddenTab');
+            clearInterval(intervalID);
+        }
+    }, 10);
+
+    // Highlight button
+    button.classList.add('buttonHighlight');
+}
+
 window.addEventListener('load', (e) => {
+    switchTab('home', false);
+
     // ----- Hellos section -----
     const helloEl = document.getElementById('helloText');
     helloEl.innerText = pickRandom(hellos);
diff --git a/styles.css b/styles.css
index fd8906d..86cd4b2 100644
--- a/styles.css
+++ b/styles.css
@@ -4,8 +4,10 @@
     --footer-colour: #00000031;
     --text-colour: #f6f7eb;
     --text-accent-colour: #e94f37;
+    --button-border-colour: var(--text-accent-colour);
+    --button-border-highlight-colour: #f7b3a9;
 
-    --header-size: 100px;
+    --header-size: 50px;
 }
 
 
@@ -40,6 +42,11 @@ header {
 header > div {
     width: 100vw;
     height: var(--header-size);
+    backdrop-filter: blur(10px);
+}
+
+header > div > * {
+    height: var(--header-size);
 }
 
 main {
@@ -49,6 +56,16 @@ main {
     background-color: var(--main-colour);
 }
 
+main > article {
+    display: unset;
+    transition: filter 0.5s, opacity 0.5s;
+}
+
+.hiddenTab {
+    filter: blur(10px);
+    opacity: 0;
+}
+
 footer {
     flex: 0 1 auto;
     display: flex;
@@ -68,6 +85,28 @@ footer > div > * {
 }
 
 
+button {
+    display: inline-flex;
+    padding: 5px;
+    border: none;
+    border-bottom: 2px solid var(--text-accent-colour);
+    background-color: #212425;
+    color: var(--text-colour);
+    align-items: center;
+    cursor: pointer;
+    transition: border-bottom-color 0.5s;
+}
+
+button > img {
+    filter: invert();
+    margin-right: 5px;
+}
+
+button:hover, .buttonHighlight {
+    border-bottom-color: var(--button-border-highlight-colour);
+}
+
+
 
 .textHighlight {
     color: var(--text-accent-colour);
