diff --git a/Dockerfile b/Dockerfile
index cc66541..89aec4e 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,3 +1,6 @@
 FROM nginx
 
-COPY . /usr/share/nginx/html
\ No newline at end of file
+COPY index.html style.css /usr/share/nginx/html/
+COPY img /usr/share/nginx/html/img
+COPY theme /usr/share/nginx/html/theme
+COPY assets /usr/share/nginx/html/assets
\ No newline at end of file
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..b458849
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,14 @@
+MAJOR_VERSION = 0
+MINOR_VERSION = 0
+PATH_VERSION = 8
+
+TAG = $(MAJOR_VERSION).$(MINOR_VERSION).$(PATH_VERSION)
+
+build:
+	docker build . -t orangepunk-html:$(TAG)
+	docker tag orangepunk-html:$(TAG) us-west4-docker.pkg.dev/nixernetes/images/orangepunk-html:$(TAG)
+
+deploy: build
+	docker push us-west4-docker.pkg.dev/nixernetes/images/orangepunk-html:$(TAG)
+	cat kubernetes.yaml.tmpl | sed 's/TAG/$(TAG)/' > kubernetes.yaml
+	kubectl apply -f kubernetes.yaml
\ No newline at end of file
diff --git a/assets/character-sheet.pdf b/assets/character-sheet.pdf
new file mode 100644
index 0000000..0a4c29b
Binary files /dev/null and b/assets/character-sheet.pdf differ
diff --git a/assets/rule-book-roles.pdf b/assets/rule-book-roles.pdf
new file mode 100644
index 0000000..9d92e30
Binary files /dev/null and b/assets/rule-book-roles.pdf differ
diff --git a/assets/rule-book.pdf b/assets/rule-book.pdf
new file mode 100644
index 0000000..04a3c4b
Binary files /dev/null and b/assets/rule-book.pdf differ
diff --git a/index.html b/index.html
index 97a4710..a965c62 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="stylesheet" href="theme/cyberpunk-2077.css" />
@@ -9,6 +10,13 @@
 </head>
 
 <body>
+
+    <section class="cyberpunk hidden" id="navBar">
+        <a class="cyberpunk" href="#/jobs">Jobs listing</a>
+        <a class="cyberpunk" style="--background-color: gray;"><s>Post job</s></a>
+        <a class="cyberpunk" href="#/tech" style="--background-color: var(--purple-color);">Cool shards</a>
+        <a class="cyberpunk" style="--background-color: gray;"><s>Sell tech</s>></a>
+    </section>
     <section class="cyberpunk black both" id="passwordPrompt">
         <img class="cyberpunk" src="img/qrcode.png" alt="" />
         <h3>Prove yourself. Hack the ...</h3>
@@ -17,56 +25,184 @@
             <button type="submit" class="cyberpunk purple">Submit_</button>
         </form>
     </section>
-    <section class="cyberpunk black both hidden" id="jobs">
-        <h1 class="cyberpunk">Orange's job board</h1>
-        <p class="cyberpunk">
-            Welcome, Choomba, to Orange's job board!
-            You must be <a href="#">1337</a> to have been invited here.
-            Unless you found this board without being invited?
-            If that's the case, <i>choomba</i>, you deserve to be here even more.
-            Take a look, share with friends, resist the <a href="#">corpos</a>!
-        </p>
+    <div class="cyberpunk hack hidden" id="hackThePlanet">
+        HACK THE PLANET!
+    </div>
+    <section class="cyberpunk black both" id="jobs">
+        <h1 class="cyberpunk">Compilation of jobs from gonks who will asphyxiated on their own vomit</h1>
+        <div class="cyberpunk">
+            <p>
+                Welcome to the bleeding edge of opportunity, choom. In the neon-drenched streets of this city,
+                finding
+                the
+                right talent for the job can mean the difference between a fat payday and a flatline. You've got a
+                problem
+                that needs solving, a package that needs delivering, or a rival that needs disappearing, but the
+                usual
+                channels are a no-go. This is the place where whispers become contracts and desperate pleas find
+                their
+                answer in a storm of code and chrome.
+
+                <br />
+
+                Your humble host and fixer, CK--that's Cereal Killer to the uninitiated--curates this little corner
+                of
+                the
+                Net
+                from his haunt at the NDA Lounge. The system is simple: you have the eddies, and someone on this
+                board
+                has
+                the skills. From solos with itchy trigger fingers and netrunners who can dance through ICE, to techs
+                who
+                can
+                turn scrap into gold, you'll find your crew right here. No job is too dirty, too weird, or too
+                dangerous, as
+                long as the price is right.
+
+                <br />
+
+                So, step right up. Post your gig. Be specific, be clear, and be ready to pay. Or maybe you're the
+                one
+                with
+                the skills, looking for the next big score. Browse the listings, find your contract, and make a name
+                for
+                yourself on the Street. Just remember the first rule of the NDA Lounge, and by extension, this
+                board:
+                what
+                happens here, stays here. Now, let's get to business.
+            </p>
+        </div>
         <h2 class="cyberpunk">Jobs</h2>
         <ul class="cyberpunk">
-            <li><a href="#" onclick="show('mission1')">$$ Crew needed to recover sensitive payload. 1/4 upfront</a></li>
+            <li><a href="#/mission1">$$ Crew needed for urgent retrieval op - discretion paid handsomely</a></li>
         </ul>
     </section>
-    <section class="cyberpunk black both hidden" id="mission1">
-        <h1 class="cyberpunk">$$ Crew needed to recover sensitive payload. 1/4 upfront</h1>
+
+    <section class="cyberpunk black both" id="tech">
+        <h1>Data shards</h1>
+        <div class="boxtree">
+            <div class="children2 width1">
+                <h2>
+                    Retro tabletop rulebook
+                    <sub>$0</sub>
+                </h2>
+                This neat little shard was found in on old drives I scoured from kids computer, "Lucy".
+                Total gonk, but the game is fun.
+                <br />
+                Grab it <a href="assets/rule-book.pdf">here</a>
+            </div>
+            <div class="children0 width2">
+                <h2>
+                    Templates for imagination
+                    <sub>$0</sub>
+                </h2>
+                When you want to be in a BD but are too broke to do it. Use your "imagination".
+                <br />
+                Grab it <a href="assets/character-sheet.pdf">here</a>
+            </div>
+            <div class="children0 width2">
+                <h2>
+                    Find your soul
+                    <sub>$0</sub>
+                </h2>
+                Life is full of patterns. Everything, from the grid of the city to the flow of net, even
+                our souls. Some nova thinker put together this guide to help you find yourself.
+                <br />
+                Grab it <a href="assets/rule-book-roles.pdf">here</a>
+            </div>
+        </div>
+    </section>
+
+    <section class="cyberpunk black both" id="mission1">
+        <h1 class="cyberpunk">$$ Crew needed for urgent retrieval op - discretion paid handsomely</h1>
         <p class="cyberpunk job-listing">
             <img class="cyberpunk portrait" src="img/twitchy.png" alt="" />
-            Desperate need for help recovering sensitive assets from dangerous doll.
-            Will pay 10_000$ for safe delivery with no questions asked.
-            Urgent help needed.
-            Find me at the NDA Lounge for more information.
+            I'm seeking a team of skilled professionals for an urgent retrieval operation. A sensitive "business"
+            arrangement has soured, and a former associate is now in possession of digital keycodes that are linked
+            to a
+            piece of personal hardware that is having... adverse effects on my physical and mental
+            well-being.
 
-            This doll has some top notch security; a full crew, willing to go that extra mile, need apply.
+            <br />
+
+            The codes within a secure private facility in an industrial part of town. Be advised, security has
+            recently
+            been upgraded to a professional-grade level. Discretion is absolutely paramount; this is a personal
+            matter,
+            and I need it handled quietly.
+
+            <br />
+
+            Job pays 10_000$, with some fraction available up-front to a convincing crew.
         </p>
     </section>
 
     <script>
-        const elements = {
-            'jobs': document.getElementById('jobs'),
-            'mission1': document.getElementById('mission1'),
-            'passwordPrompt': document.getElementById('passwordPrompt'),
+        const navElements = {
+            '/': document.getElementById('passwordPrompt'),
+            '/jobs': document.getElementById('jobs'),
+            '/mission1': document.getElementById('mission1'),
+            '/passwordPrompt': document.getElementById('passwordPrompt'),
+            '/tech': document.getElementById('tech'),
+            'navBar': document.getElementById('navBar'),
         };
-        const passwordForm = document.getElementById("passwordForm");
-        function show(target) {
-            for (let el in elements) {
-                elements[el].classList.add('hidden');
-            }
-            elements[target].classList.remove('hidden');
+        let el = {
+            'passwordForm': document.getElementById("passwordForm"),
+            'passwordInput': document.getElementById('passwordInput'),
+            'hackThePlanet': document.getElementById('hackThePlanet')
+        };
+
+        let showNavBar = false;
+
+        // Merge navElements into el and verify everything exists
+        for (let key in navElements) {
+            if (key in el) {
+                console.log(`WARNING: overlapping navElement and el: ${key}`)
+            };
+            el[key] = navElements[key];
         }
 
-        passwordForm.addEventListener("submit", function (e) {
+        for (let key in el) {
+            if (el[key] == undefined) {
+                console.log(`WARNING: invalid key ${key}`);
+            }
+        }
+
+        function show(target) {
+            history.pushState({ pageID: target }, target, `#/${target}`);
+            updateForURL(target);
+        }
+
+        el.passwordForm.addEventListener("submit", function (e) {
             e.preventDefault();
 
-            var formData = Object.fromEntries(new FormData(passwordForm));
-            if(formData['passwordInput'] == 'PLANET!!!') {
+            var formData = Object.fromEntries(new FormData(el.passwordForm));
+            if (formData['passwordInput'] == 'PLANET!!!') {
                 show('jobs');
             }
-            document.getElementById('passwordInput').setAttribute('value', '');
+            el.passwordInput.setAttribute('value', '');
         });
+
+        /// Parses the URL and renders a page
+        function updateForURL(event) {
+            let url = window.location.hash.replace(/^#*\/*/, '/');
+            for (let el in navElements) {
+                navElements[el].classList.add('hidden');
+            }
+            navElements[url].classList.remove('hidden');
+            if (url != '/') {
+                navElements['navBar'].classList.remove('hidden');
+            }
+        }
+        updateForURL();
+        window.addEventListener('hashchange', updateForURL);
+
+        setTimeout(() => {
+            el.hackThePlanet.classList.remove('hidden');
+            setTimeout(() => {
+                el.hackThePlanet.classList.add('hidden');
+            }, 2000)
+        }, 5000)
     </script>
 </body>
 
diff --git a/kubernetes.yaml b/kubernetes.yaml
index 3c30ab5..dfb9bf7 100644
--- a/kubernetes.yaml
+++ b/kubernetes.yaml
@@ -15,7 +15,7 @@ spec:
     spec:
       containers:
       - name: orangepunk-container
-        image: us-west4-docker.pkg.dev/nixernetes/images/orangepunk-html:0.0.3
+        image: us-west4-docker.pkg.dev/nixernetes/images/orangepunk-html:0.0.8
         ports:
         - containerPort: 80
 ---
diff --git a/kubernetes.yaml.tmpl b/kubernetes.yaml.tmpl
new file mode 100644
index 0000000..bec98a9
--- /dev/null
+++ b/kubernetes.yaml.tmpl
@@ -0,0 +1,34 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: orangepunk-deployment
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: orangepunk
+  template:
+    metadata:
+      labels:
+        app: orangepunk
+        app.kubernetes.io/name: orangepunk
+    spec:
+      containers:
+      - name: orangepunk-container
+        image: us-west4-docker.pkg.dev/nixernetes/images/orangepunk-html:TAG
+        ports:
+        - containerPort: 80
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: orangepunk-service
+spec:
+  selector:
+    app.kubernetes.io/name: orangepunk
+  ports:
+    - protocol: TCP
+      port: 80
+      targetPort: 80
+      nodePort: 30014
+  type: NodePort
diff --git a/style.css b/style.css
index b7fefd7..c2b54d2 100644
--- a/style.css
+++ b/style.css
@@ -11,4 +11,28 @@
 
 .job-listing {
     min-height: 250px;
+}
+
+#navBar {
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
+#navBar a {
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.hack {
+    position: absolute;
+    top:45%;
+    left: 35%;
+    background-color: #ff9800;
+
+    z-index: 10;
+
+    font-size: 64px;
+    border: medium solid green;
+
+    padding: 20px 20px 20px 20px;
 }
\ No newline at end of file
