diff --git a/src/lib/ToolBar.svelte b/src/lib/ToolBar.svelte
new file mode 100644
index 0000000..8a93430
--- /dev/null
+++ b/src/lib/ToolBar.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+  const icons = {
+    back: '/icons/leftarrow.png',
+    forward: '/icons/rightarrow.png',
+    play: '/icons/speaker.png',
+    search: '/icons/internet.png',
+    globe: '/icons/github.svg'
+  };
+</script>
+
+<div class="toolbar">
+  <button class="toolbar-button" disabled title="Back">
+    <img src={icons.back} alt="Back" />
+  </button>
+  <button class="toolbar-button" disabled title="Forward">
+    <img src={icons.forward} alt="Forward" />
+  </button>
+
+  <div class="toolbar-separator"></div>
+
+  <button class="toolbar-button" disabled title="Now Playing">
+    <img src={icons.play} alt="Play" />
+    <span>Now Playing</span>
+  </button>
+
+  <button class="toolbar-button" disabled title="Search">
+    <img src={icons.search} alt="Search" />
+    <span>Search</span>
+  </button>
+
+  <div class="toolbar-separator"></div>
+
+  <button class="toolbar-button" disabled title="GitHub">
+    <img src={icons.globe} alt="Globe" />
+    <span>GitHub</span>
+  </button>
+</div>
+
+<style>
+  .toolbar {
+    display: flex;
+    align-items: center;
+    padding: 4px 6px;
+    gap: 1px;
+    user-select: none;
+  }
+
+  .toolbar-button {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    padding: 3px 5px;
+    min-width: auto;
+    min-height: auto;
+    font-family: "Pixelated MS Sans Serif", Arial;
+    font-size: 11px;
+    cursor: pointer;
+    color: light-dark(#222, #ddd);
+    text-shadow: none;
+  }
+
+  .toolbar-button:hover {
+    background: light-dark(silver, #2b2b2b);
+    box-shadow: inset -1px -1px light-dark(#0a0a0a, #000),
+      inset 1px 1px light-dark(#fff, #525252),
+      inset -2px -2px light-dark(grey, #232323),
+      inset 2px 2px light-dark(#dfdfdf, #363636);
+  }
+
+  .toolbar-button:active {
+    box-shadow: inset -1px -1px light-dark(#fff, #525252),
+      inset 1px 1px light-dark(#0a0a0a, #000),
+      inset -2px -2px light-dark(#dfdfdf, #363636),
+      inset 2px 2px light-dark(grey, #232323);
+  }
+
+  .toolbar-button span {
+    word-spacing: 2px;
+  }
+
+  .toolbar-button img {
+    width: 20px;
+    height: 20px;
+    display: block;
+  }
+
+  .toolbar-separator {
+    width: 2px;
+    height: 20px;
+    background: light-dark(grey, #232323);
+    border-right: 1px solid light-dark(#fff, #525252);
+    margin: 0 2px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 059ccae..365ef85 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
   import TitleBar from "$lib/TitleBar.svelte";
   import MenuBar from "$lib/MenuBar.svelte";
+  import ToolBar from "$lib/ToolBar.svelte";
 </script>
 
 <TitleBar />
 <MenuBar />
+<ToolBar />
 <slot />
\ No newline at end of file
diff --git a/static/app.css b/static/app.css
index b9fb14d..227900b 100644
--- a/static/app.css
+++ b/static/app.css
@@ -12,4 +12,6 @@ html {
 body {
   height: 100%;
   margin: 0;
+  padding: 2px;
+  box-sizing: border-box;
 }
\ No newline at end of file
diff --git a/static/icons/cd.png b/static/icons/cd.png
new file mode 100644
index 0000000..3c975b6
Binary files /dev/null and b/static/icons/cd.png differ
diff --git a/static/icons/github.svg b/static/icons/github.svg
new file mode 100644
index 0000000..be16049
--- /dev/null
+++ b/static/icons/github.svg
@@ -0,0 +1,13 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 2H9V4H7V6H5V2Z" fill="black"/>
+<path d="M5 12H3V6H5V12Z" fill="black"/>
+<path d="M7 14H5V12H7V14Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 16V14H7V16H3V14H1V16H3V18H7V22H9V18H11V16H9ZM9 16V18H7V16H9Z" fill="black"/>
+<path d="M15 4V6H9V4H15Z" fill="black"/>
+<path d="M19 6H17V4H15V2H19V6Z" fill="black"/>
+<path d="M19 12V6H21V12H19Z" fill="black"/>
+<path d="M17 14V12H19V14H17Z" fill="black"/>
+<path d="M15 16V14H17V16H15Z" fill="black"/>
+<path d="M15 18H13V16H15V18Z" fill="black"/>
+<path d="M15 18H17V22H15V18Z" fill="black"/>
+</svg>
diff --git a/static/icons/headphone.svg b/static/icons/headphone.svg
new file mode 100644
index 0000000..d245ec3
--- /dev/null
+++ b/static/icons/headphone.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 4H5V6H3V12V14V18V20H5H8H10V18V14V12H8H5V6H19V12H16H14V14V18V20H16H19H21V18V14V12V6H19V4ZM16 14H19V18H16V14ZM8 14V18H5V14H8Z" fill="black"/>
+</svg>
diff --git a/static/icons/internet.png b/static/icons/internet.png
new file mode 100644
index 0000000..2d952ef
Binary files /dev/null and b/static/icons/internet.png differ
diff --git a/static/icons/leftarrow.png b/static/icons/leftarrow.png
new file mode 100644
index 0000000..9e824fc
Binary files /dev/null and b/static/icons/leftarrow.png differ
diff --git a/static/icons/musicnote.png b/static/icons/musicnote.png
new file mode 100644
index 0000000..e038eab
Binary files /dev/null and b/static/icons/musicnote.png differ
diff --git a/static/icons/next.svg b/static/icons/next.svg
new file mode 100644
index 0000000..c50a6a8
--- /dev/null
+++ b/static/icons/next.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 4H8V6H10V8H12V10H14V14H12V16H10V18H8V20H6V4ZM18 4H16V20H18V4Z" fill="black"/>
+</svg>
diff --git a/static/icons/play.svg b/static/icons/play.svg
new file mode 100644
index 0000000..d57598c
--- /dev/null
+++ b/static/icons/play.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20H8V4H10V6H12V9H14V11H16V13H14V15H12V18H10V20Z" fill="black"/>
+</svg>
diff --git a/static/icons/prev.svg b/static/icons/prev.svg
new file mode 100644
index 0000000..d4237ec
--- /dev/null
+++ b/static/icons/prev.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 4H8V20H6V4ZM18 4H16V6H14V9H12V11H10V13H12V16H14V18H16V20H18V4Z" fill="black"/>
+</svg>
diff --git a/static/icons/rightarrow.png b/static/icons/rightarrow.png
new file mode 100644
index 0000000..cea36fb
Binary files /dev/null and b/static/icons/rightarrow.png differ
diff --git a/static/icons/search.svg b/static/icons/search.svg
new file mode 100644
index 0000000..15eec96
--- /dev/null
+++ b/static/icons/search.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 2H14V4H6V2ZM4 6V4H6V6H4ZM4 14H2V6H4V14ZM6 16H4V14H6V16ZM14 16V18H6V16H14ZM16 14H14V16H16V18H18V20H20V22H22V20H20V18H18V16H16V14ZM16 6H18V14H16V6ZM16 6V4H14V6H16Z" fill="black"/>
+</svg>
diff --git a/static/icons/searchinternet.png b/static/icons/searchinternet.png
new file mode 100644
index 0000000..225ee87
Binary files /dev/null and b/static/icons/searchinternet.png differ
diff --git a/static/icons/speaker.png b/static/icons/speaker.png
new file mode 100644
index 0000000..78f46c4
Binary files /dev/null and b/static/icons/speaker.png differ
diff --git a/static/icons/volume-1.svg b/static/icons/volume-1.svg
new file mode 100644
index 0000000..a4bc28f
--- /dev/null
+++ b/static/icons/volume-1.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 2H13V4H11V6H9V8H7H5V10V14V16H7H9V18H11V20H13V22H15V2ZM11 18V16H9V14H7V10H9V8H11V6H13V18H11ZM17 10H19V14H17V10Z" fill="black"/>
+</svg>
diff --git a/static/icons/volume-2.svg b/static/icons/volume-2.svg
new file mode 100644
index 0000000..6c50307
--- /dev/null
+++ b/static/icons/volume-2.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H13V22H11V20H9V18H11V6H9V4H11V2ZM7 8V6H9V8H7ZM7 16H5H3V14V10V8H5H7V10H5V14H7V16ZM7 16V18H9V16H7ZM17 10H15V14H17V10ZM19 8H21V16H19V8ZM19 16V18H15V16H19ZM19 6V8H15V6H19Z" fill="black"/>
+</svg>
diff --git a/static/icons/volume-3.svg b/static/icons/volume-3.svg
new file mode 100644
index 0000000..ae98de6
--- /dev/null
+++ b/static/icons/volume-3.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H9V4H7V6H5V8H3H1V10V14V16H3H5V18H7V20H9V22H11V2ZM7 18V16H5V14H3V10H5V8H7V6H9V18H7ZM13 10H15V14H13V10ZM21 4H19V2H13V4H19V6H21V18H19V20H13V22H19V20H21V18H23V6H21V4ZM19 8H17V6H13V8H17V16H13V18H17V16H19V8Z" fill="black"/>
+</svg>
diff --git a/static/icons/volume.svg b/static/icons/volume.svg
new file mode 100644
index 0000000..8cacfc1
--- /dev/null
+++ b/static/icons/volume.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 2H17V22H15V20H13V18H15V6H13V4H15V2ZM11 8V6H13V8H11ZM9 10H11V8H9H7V10V14V16H9H11V18H13V16H11V14H9V10Z" fill="black"/>
+</svg>