diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 9935342..29621b5 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -2,6 +2,17 @@
 # It is not intended for manual editing.
 version = 4
 
+[[package]]
+name = "Shark"
+version = "0.1.0"
+dependencies = [
+ "serde",
+ "serde_json",
+ "tauri",
+ "tauri-build",
+ "tauri-plugin-opener",
+]
+
 [[package]]
 name = "addr2line"
 version = "0.25.1"
@@ -3307,17 +3318,6 @@ dependencies = [
  "digest",
 ]
 
-[[package]]
-name = "shark"
-version = "0.1.0"
-dependencies = [
- "serde",
- "serde_json",
- "tauri",
- "tauri-build",
- "tauri-plugin-opener",
-]
-
 [[package]]
 name = "shlex"
 version = "1.3.0"
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 5e5aef0..e3a3bda 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,8 +1,8 @@
 [package]
-name = "shark"
+name = "Shark"
 version = "0.1.0"
-description = "A Tauri App"
-authors = ["you"]
+description = "powered by tauri and sveltekit"
+authors = ["markuryy"]
 edition = "2021"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 3fab36d..e008cea 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -12,7 +12,7 @@
   "app": {
     "windows": [
       {
-        "title": "shark",
+        "title": "Shark!",
         "width": 800,
         "height": 600,
         "decorations": false
diff --git a/src/app.html b/src/app.html
index 099e9e2..caefe4e 100644
--- a/src/app.html
+++ b/src/app.html
@@ -5,7 +5,7 @@
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="%sveltekit.assets%/app.css" />
-    <title>Tauri + SvelteKit + Typescript App</title>
+    <title>Shark!</title>
     %sveltekit.head%
   </head>
   <body data-sveltekit-preload-data="hover">
diff --git a/src/lib/MenuBar.svelte b/src/lib/MenuBar.svelte
new file mode 100644
index 0000000..152d600
--- /dev/null
+++ b/src/lib/MenuBar.svelte
@@ -0,0 +1,231 @@
+<script lang="ts">
+  let activeMenu: string | null = $state(null);
+  let isAnyMenuOpen = $state(false);
+
+  function toggleMenu(menuName: string) {
+    if (activeMenu === menuName) {
+      activeMenu = null;
+      isAnyMenuOpen = false;
+    } else {
+      activeMenu = menuName;
+      isAnyMenuOpen = true;
+    }
+  }
+
+  function closeMenus() {
+    activeMenu = null;
+    isAnyMenuOpen = false;
+  }
+
+  function handleMouseEnter(menuName: string) {
+    if (isAnyMenuOpen) {
+      activeMenu = menuName;
+    }
+  }
+</script>
+
+<svelte:window on:click={closeMenus} />
+
+<nav class="menu-bar">
+  <div class="menu-item">
+    <button
+      class="menu-button"
+      class:active={activeMenu === "file"}
+      on:click|stopPropagation={() => toggleMenu("file")}
+      on:mouseenter={() => handleMouseEnter("file")}
+    >
+      <u>F</u>ile
+    </button>
+    {#if activeMenu === "file"}
+      <ul class="menu-dropdown" on:click|stopPropagation>
+        <li><button disabled>New</button></li>
+        <li><button disabled>Open...</button></li>
+        <li><button disabled>Save</button></li>
+        <li class="separator"></li>
+        <li><button disabled>Exit</button></li>
+      </ul>
+    {/if}
+  </div>
+
+  <div class="menu-item">
+    <button
+      class="menu-button"
+      class:active={activeMenu === "edit"}
+      on:click|stopPropagation={() => toggleMenu("edit")}
+      on:mouseenter={() => handleMouseEnter("edit")}
+    >
+      <u>E</u>dit
+    </button>
+    {#if activeMenu === "edit"}
+      <ul class="menu-dropdown" on:click|stopPropagation>
+        <li><button disabled>Undo</button></li>
+        <li><button disabled>Redo</button></li>
+        <li class="separator"></li>
+        <li><button disabled>Cut</button></li>
+        <li><button disabled>Copy</button></li>
+        <li><button disabled>Paste</button></li>
+      </ul>
+    {/if}
+  </div>
+
+  <div class="menu-item">
+    <button
+      class="menu-button"
+      class:active={activeMenu === "view"}
+      on:click|stopPropagation={() => toggleMenu("view")}
+      on:mouseenter={() => handleMouseEnter("view")}
+    >
+      <u>V</u>iew
+    </button>
+    {#if activeMenu === "view"}
+      <ul class="menu-dropdown" on:click|stopPropagation>
+        <li><button disabled>Toolbar</button></li>
+        <li><button disabled>Status Bar</button></li>
+        <li class="separator"></li>
+        <li><button disabled>Refresh</button></li>
+      </ul>
+    {/if}
+  </div>
+
+  <div class="menu-item">
+    <button
+      class="menu-button"
+      class:active={activeMenu === "playback"}
+      on:click|stopPropagation={() => toggleMenu("playback")}
+      on:mouseenter={() => handleMouseEnter("playback")}
+    >
+      <u>P</u>layback
+    </button>
+    {#if activeMenu === "playback"}
+      <ul class="menu-dropdown" on:click|stopPropagation>
+        <li><button disabled>Play</button></li>
+        <li><button disabled>Pause</button></li>
+        <li><button disabled>Stop</button></li>
+        <li class="separator"></li>
+        <li><button disabled>Next Track</button></li>
+        <li><button disabled>Previous Track</button></li>
+      </ul>
+    {/if}
+  </div>
+
+  <div class="menu-item">
+    <button
+      class="menu-button"
+      class:active={activeMenu === "help"}
+      on:click|stopPropagation={() => toggleMenu("help")}
+      on:mouseenter={() => handleMouseEnter("help")}
+    >
+      <u>H</u>elp
+    </button>
+    {#if activeMenu === "help"}
+      <ul class="menu-dropdown" on:click|stopPropagation>
+        <li><button disabled>Help Topics</button></li>
+        <li class="separator"></li>
+        <li><button disabled>About</button></li>
+      </ul>
+    {/if}
+  </div>
+</nav>
+
+<style>
+  .menu-bar {
+    display: flex;
+    padding: 2px 4px;
+    gap: 2px;
+    user-select: none;
+  }
+
+  .menu-item {
+    position: relative;
+  }
+
+  .menu-button {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    padding: 4px 8px;
+    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;
+  }
+
+  .menu-button:hover,
+  .menu-button.active {
+    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);
+  }
+
+  .menu-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);
+  }
+
+  .menu-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin: 0;
+    padding: 2px;
+    list-style: none;
+    background: light-dark(silver, #2b2b2b);
+    box-shadow: inset -1px -1px light-dark(#0a0a0a, #000),
+      inset 1px 1px light-dark(#dfdfdf, #363636),
+      inset -2px -2px light-dark(grey, #232323),
+      inset 2px 2px light-dark(#fff, #525252);
+    min-width: 150px;
+    z-index: 1000;
+  }
+
+  .menu-dropdown li {
+    margin: 0;
+  }
+
+  .menu-dropdown li.separator {
+    height: 1px;
+    background: light-dark(grey, #232323);
+    margin: 2px 0;
+    border-top: 1px solid light-dark(#fff, #525252);
+  }
+
+  .menu-dropdown button {
+    width: 100%;
+    text-align: left;
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    padding: 4px 20px;
+    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;
+  }
+
+  .menu-dropdown button:not(:disabled):hover {
+    background: light-dark(navy, #0b0b0b);
+    color: #fff;
+    box-shadow: none;
+    text-shadow: none;
+  }
+
+  .menu-dropdown button:disabled {
+    color: light-dark(grey, #232323);
+    text-shadow: 1px 1px 0 light-dark(#fff, #525252);
+    cursor: default;
+  }
+
+  u {
+    text-decoration: underline;
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/TitleBar.svelte b/src/lib/TitleBar.svelte
index c1bc2fe..6a4347e 100644
--- a/src/lib/TitleBar.svelte
+++ b/src/lib/TitleBar.svelte
@@ -17,7 +17,7 @@
 </script>
 
 <div class="title-bar" data-tauri-drag-region>
-  <div class="title-bar-text">shark</div>
+  <div class="title-bar-text">Shark!</div>
   <div class="title-bar-controls">
     <button aria-label="Minimize" on:click={minimize}></button>
     <button aria-label="Maximize" on:click={toggleMaximize}></button>
@@ -30,5 +30,12 @@
     position: sticky;
     top: 0;
     z-index: 1000;
+    padding: 4px 3px 4px 4px;
+  }
+
+  .title-bar-controls button {
+    min-height: 16px;
+    min-width: 18px;
+    background-position: center !important;
   }
 </style>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index eb755eb..059ccae 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import TitleBar from "$lib/TitleBar.svelte";
+  import MenuBar from "$lib/MenuBar.svelte";
 </script>
 
 <TitleBar />
+<MenuBar />
 <slot />
\ No newline at end of file
