diff --git a/public/Icons/toolbar/Back.avif b/public/Icons/toolbar/Back.avif
new file mode 100644
index 0000000..26c03a2
--- /dev/null
+++ b/public/Icons/toolbar/Back.avif
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dc1536a8289b23fcd4b8082bb9dae213e469fca52db10047fe13c2db16d087b3
+size 763
diff --git a/public/Icons/toolbar/Back_Gray.avif b/public/Icons/toolbar/Back_Gray.avif
new file mode 100644
index 0000000..da66133
--- /dev/null
+++ b/public/Icons/toolbar/Back_Gray.avif
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:be3160c54fe1a55431bf835950ebb6ddea93373486d667e940675e8f46a288cf
+size 696
diff --git a/public/Icons/toolbar/Forward.avif b/public/Icons/toolbar/Forward.avif
new file mode 100644
index 0000000..cd1156c
--- /dev/null
+++ b/public/Icons/toolbar/Forward.avif
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7d3f01870966627ab87a2aa2a0f88946cdbc2792c4abbd0501e801b86eb6eccb
+size 784
diff --git a/public/Icons/toolbar/Forward_Gray.avif b/public/Icons/toolbar/Forward_Gray.avif
new file mode 100644
index 0000000..427db1d
--- /dev/null
+++ b/public/Icons/toolbar/Forward_Gray.avif
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:42b5c8337801ba6a9960a66a208f65360cb7e6e9227c96ede07fa73ce52c36e5
+size 620
diff --git a/public/Icons/toolbar/Refresh.avif b/public/Icons/toolbar/Refresh.avif
new file mode 100644
index 0000000..8e9fa42
--- /dev/null
+++ b/public/Icons/toolbar/Refresh.avif
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bd9601e9d14db9d9b2f056aa9ee312a13a103faa269d5520f9cba3a33df93d42
+size 582
diff --git a/src/App.vue b/src/App.vue
index f1958f5..a2bbd89 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,58 @@
 <script setup lang="ts">
+
+import {ref} from "vue";
+
+const toolbar = ref<boolean>(false);
+const canGoForward = ref<boolean>(false);
+const canGoBack = ref<boolean>(false);
+
+function activateToolbar() {
+  toolbar.value = !toolbar.value;
+}
+
+function goBack() {
+  canGoBack.value = window.history.length <= 1;
+  history.back();
+}
+
+function goForward() {
+  canGoForward.value = window.history.length <= 1;
+  history.forward();
+}
+
 </script>
 
 <template>
   <div class="flex flex-col min-h-screen bg-var_background">
+
+    <div v-if="toolbar">
+      <div class="w-full py-small bg-ancient_highlight shadow-xl"></div>
+      <div class="w-full py-small bg-ancient_shadow"></div>
+      <div class="flex justify-center bg-ancient">
+        <div class="w-full max-w-screen-lg px-4">
+          <button @click="goBack" v-if="canGoBack">
+            <img  src="/public/Icons/toolbar/Back.avif" width="32px" height="32px" class="mx-2" alt="Ancient looking back button">
+          </button>
+
+          <button @click="goBack" v-if="!canGoBack" disabled>
+            <img src="/public/Icons/toolbar/Back_Gray.avif" width="32px" height="32px" class="mx-2" alt="Ancient looking back button">
+          </button>
+
+          <button @click="goForward" v-if="canGoForward">
+            <img src="/public/Icons/toolbar/Forward.avif" width="32px" height="32px" class="mx-2" alt="Ancient looking forward button">
+          </button>
+
+          <button @click="goForward" v-if="!canGoForward" disabled>
+            <img src="/public/Icons/toolbar/Forward_Gray.avif" width="32px" height="32px" class="mx-2" alt="Ancient looking forward button">
+          </button>
+
+          <button><img src="/public/Icons/toolbar/Refresh.avif" width="20px" height="32px" class="mx-2" alt="Ancient looking forward button"></button>
+        </div>
+      </div>
+      <div class="w-full py-small bg-ancient_highlight shadow-xl"></div>
+      <div class="w-full py-small bg-ancient_shadow"></div>
+    </div>
+
     <header class="flex justify-center">
       <nav class="pt-10 text-2xl flex place-items-center">
         <RouterLink class="mx-1" to="/">Home</RouterLink> |
@@ -20,7 +70,8 @@
     </main>
 
     <footer class="flex justify-center pt-10 mt-10 pb-2">
-      Author: Still under construction
+      <h5>Author: Still under construction</h5>
+      <button @click="activateToolbar">Time travel</button>
     </footer>
   </div>
 
diff --git a/src/main.ts b/src/main.ts
index 4133554..2f8a49f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import {createRouter, createWebHistory} from "vue-router";
+import { createRouter, createWebHistory } from "vue-router";
 import './index.css'
 import './styles.css'
 import App from './App.vue'
@@ -27,8 +27,6 @@ const router = createRouter({
 
 
         {path: '/Lisp', name: 'Lisp', component: LispIndex}
-
-
     ]
 })
 
diff --git a/tailwind.config.js b/tailwind.config.js
index cc45778..d30d998 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,6 +10,14 @@ export default {
   ],
   theme: {
     extend: {
+      colors: {
+        'ancient': '#d3d0c9',
+        'ancient_highlight': '#fcf8f5',
+        'ancient_shadow': '#bababa',
+      },
+      padding: {
+        'small': '0.075rem',
+      }
     },
   },
   plugins: [],