diff --git a/src/App.vue b/src/App.vue
index dcd40183..681ea899 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -37,7 +37,7 @@ import AlbumArt from "./components/LeftSidebar/AlbumArt.vue";
 import NavBar from "./components/nav/NavBar.vue";
 import Tabs from "./components/RightSideBar/Tabs.vue";
 import SearchInput from "./components/RightSideBar/SearchInput.vue";
-import useContextStore from "./stores/context.js";
+import useContextStore from "./stores/context";
 import ContextMenu from "./components/contextMenu.vue";
 
 const context_store = useContextStore();
diff --git a/src/assets/icons/more.svg b/src/assets/icons/more.svg
new file mode 100644
index 00000000..1434d413
--- /dev/null
+++ b/src/assets/icons/more.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.6514 13.6543C19.6426 13.3467 19.5283 13.083 19.291 12.8457L12.4531 6.15723C12.251 5.96387 12.0137 5.8584 11.7236 5.8584C11.1348 5.8584 10.6777 6.31543 10.6777 6.9043C10.6777 7.18555 10.792 7.44922 10.9941 7.65137L17.1465 13.6543L10.9941 19.6572C10.792 19.8594 10.6777 20.1143 10.6777 20.4043C10.6777 20.9932 11.1348 21.4502 11.7236 21.4502C12.0049 21.4502 12.251 21.3447 12.4531 21.1514L19.291 14.4541C19.5371 14.2256 19.6514 13.9619 19.6514 13.6543Z" fill="#F2F2F2"/>
+</svg>
diff --git a/src/assets/icons/pause.svg b/src/assets/icons/pause.svg
index 2b2b8d95..efd04850 100644
--- a/src/assets/icons/pause.svg
+++ b/src/assets/icons/pause.svg
@@ -1,3 +1,3 @@
 <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.63185 20.9668H11.6973C12.5322 20.9668 12.9629 20.5361 12.9629 19.7012V7.60742C12.9629 6.75488 12.5322 6.35059 11.6973 6.3418H9.63185C8.79688 6.3418 8.36622 6.77246 8.36622 7.60742V19.7012C8.35743 20.5361 8.7881 20.9668 9.63185 20.9668ZM16.3115 20.9668H18.3682C19.2031 20.9668 19.6338 20.5361 19.6338 19.7012V7.60742C19.6338 6.75488 19.2031 6.3418 18.3682 6.3418H16.3115C15.4678 6.3418 15.0459 6.77246 15.0459 7.60742V19.7012C15.0459 20.5361 15.4678 20.9668 16.3115 20.9668Z" fill="#F2F2F2"/>
+<path d="M10.9238 21.0723C11.4775 21.0723 11.9082 20.6592 11.9082 20.1143V7.21191C11.9082 6.66699 11.4775 6.25391 10.9238 6.25391C10.3701 6.25391 9.93945 6.66699 9.93945 7.21191V20.1143C9.93945 20.6592 10.3701 21.0723 10.9238 21.0723ZM17.0674 21.0723C17.6211 21.0723 18.0518 20.6592 18.0518 20.1143V7.21191C18.0518 6.66699 17.6211 6.25391 17.0674 6.25391C16.5137 6.25391 16.083 6.66699 16.083 7.21191V20.1143C16.083 20.6592 16.5137 21.0723 17.0674 21.0723Z" fill="#F2F2F2"/>
 </svg>
diff --git a/src/components/Search/LoadMore.vue b/src/components/Search/LoadMore.vue
index b9c72be9..33010f99 100644
--- a/src/components/Search/LoadMore.vue
+++ b/src/components/Search/LoadMore.vue
@@ -6,18 +6,14 @@
   </div>
 </template>
 
-<script>
-export default {
-  setup(props, { emit }) {
-    function loadMore() {
-      emit("loadMore");
-    }
+<script setup lang="ts">
+const emit = defineEmits<{
+  (e: "loadMore"): void;
+}>();
 
-    return {
-      loadMore,
-    };
-  },
-};
+function loadMore() {
+  emit("loadMore");
+}
 </script>
 
 <style lang="scss">
@@ -42,4 +38,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/contextMenu.vue b/src/components/contextMenu.vue
index b35e82c5..9e842ddf 100644
--- a/src/components/contextMenu.vue
+++ b/src/components/contextMenu.vue
@@ -2,7 +2,13 @@
   <!-- v-show="context.visible" -->
   <div
     class="context-menu rounded shadow-lg"
-    :class="{ 'context-menu-visible': context.visible }"
+    :class="[
+      { 'context-menu-visible': context.visible },
+      { 'context-normalizedX': context.normalizedX },
+      {
+        'context-normalizedY': context.normalizedY && context.hasManyChildren(),
+      },
+    ]"
     :style="{
       left: context.x + 'px',
       top: context.y + 'px',
@@ -17,31 +23,46 @@
     >
       <div class="icon image" :class="option.icon"></div>
       <div class="label ellip">{{ option.label }}</div>
+      <div class="more image" v-if="option.children"></div>
+      <div class="children rounded shadow-sm" v-if="option.children">
+        <div
+          class="context-item"
+          v-for="child in option.children"
+          :key="child"
+        >
+          <div class="label ellip" @click="child.action()">
+            {{ child.label }}
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import useContextStore from "@/stores/context.js";
+import useContextStore from "../stores/context";
 
 const context = useContextStore();
 </script>
 
 <style lang="scss">
+
+
 .context-menu {
   position: fixed;
   top: 0;
   left: 0;
-  width: 10rem;
+  width: 12rem;
   height: min-content;
+  z-index: 100000 !important;
+  transform: scale(0);
+
   padding: $small;
   background: $gray3;
-  z-index: 100000 !important;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  transform: scale(0);
   transform-origin: top left;
   font-size: 0.875rem;
 
@@ -55,6 +76,30 @@ const context = useContextStore();
     padding: 0 $small;
     border-radius: $small;
     color: rgb(255, 255, 255);
+    position: relative;
+
+    .more {
+      height: 1.5rem;
+      width: 1.5rem;
+      position: absolute;
+      right: 0;
+      background-image: url("../assets/icons/more.svg");
+    }
+
+    .children {
+      position: absolute;
+      right: -13rem;
+      width: 13rem;
+
+      padding: $small;
+      background: $gray3;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      transform: scale(0);
+      transform-origin: left;
+    }
 
     .icon {
       height: 1.25rem;
@@ -92,6 +137,11 @@ const context = useContextStore();
 
     &:hover {
       background: #234ece;
+
+      .children {
+        transform: scale(1);
+        transition: transform 0.2s ease-in-out;
+      }
     }
   }
 
@@ -110,4 +160,22 @@ const context = useContextStore();
   transform: scale(1);
   transition: transform 0.2s ease-in-out;
 }
+
+.context-normalizedX {
+  .more {
+    transform: rotate(180deg);
+  }
+
+  .context-item > .children {
+    left: -13rem;
+    transform-origin: center right;
+  }
+}
+
+.context-normalizedY {
+  .context-item > .children {
+    bottom: -0.5rem;
+    transform-origin: bottom right;
+  }
+}
 </style>
diff --git a/src/components/nav/NavBar.vue b/src/components/nav/NavBar.vue
index fceaf1b2..5058ec9b 100644
--- a/src/components/nav/NavBar.vue
+++ b/src/components/nav/NavBar.vue
@@ -1,26 +1,24 @@
 <template>
   <div class="topnav rounded">
     <div class="left">
-      <!-- <div class="btn">
+      <div class="btn">
         <PlayBtn />
-      </div> -->
+      </div>
       <div class="info">
-        <div class="title">Album</div>
+        <div class="title">beerbongs & bentleys</div>
       </div>
     </div>
-    <div class="center"></div>
+    <div class="center rounded"></div>
     <div class="right"></div>
   </div>
 </template>
 
 <script setup>
-import PlayBtn from '../shared/PlayBtn.vue';
-
+import PlayBtn from "../shared/PlayBtn.vue";
 </script>
 
 <style lang="scss">
 .topnav {
-  background-color: $gray3;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   padding: 0 $small;
@@ -28,7 +26,6 @@ import PlayBtn from '../shared/PlayBtn.vue';
 
   .left {
     display: flex;
-    // border: solid 1px $gray;
     align-items: center;
     gap: $small;
 
@@ -39,5 +36,15 @@ import PlayBtn from '../shared/PlayBtn.vue';
       }
     }
   }
+
+  .center {
+    display: grid;
+
+    .songcard {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
 }
 </style>
diff --git a/src/components/shared/PlayBtn.vue b/src/components/shared/PlayBtn.vue
index d237d2b1..faf18ca2 100644
--- a/src/components/shared/PlayBtn.vue
+++ b/src/components/shared/PlayBtn.vue
@@ -8,7 +8,7 @@
 .play-btn {
   width: 2rem;
   height: 2rem;
-  background-color: $red;
+  background-color: $accent;
   background-image: url("../../assets/icons/play.svg");
   background-size: 1.25rem;
   background-position: 60%;
diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue
index 098a0aa6..08ec9e60 100644
--- a/src/components/shared/SongItem.vue
+++ b/src/components/shared/SongItem.vue
@@ -63,9 +63,9 @@
 <script setup lang="ts">
 import perks from "../../composables/perks.js";
 import state from "../../composables/state";
-import useContextStore from "../../stores/context.js";
+import useContextStore from "../../stores/context";
 import { ref } from "vue";
-import trackContext from "../../composables/track_context";
+import trackContext from "../../contexts/track_context";
 import { Track } from "../../interfaces.js";
 
 const contextStore = useContextStore();
@@ -108,8 +108,6 @@ const current = state.current;
 </script>
 
 <style lang="scss">
-// 
-
 .songlist-item {
   display: grid;
   align-items: center;
diff --git a/src/components/shared/TrackItem.vue b/src/components/shared/TrackItem.vue
index b3086cde..77a73bff 100644
--- a/src/components/shared/TrackItem.vue
+++ b/src/components/shared/TrackItem.vue
@@ -38,8 +38,8 @@
 import { ref } from "vue";
 import perks from "../../composables/perks";
 import playAudio from "../../composables/playAudio";
-import useContextStore from "@/stores/context.js";
-import trackContext from "../../composables/track_context";
+import useContextStore from "@/stores/context";
+import trackContext from "../../contexts/track_context";
 
 const contextStore = useContextStore();
 const context_on = ref(false);
diff --git a/src/composables/normalizeContextMenu.js b/src/composables/normalizeContextMenu.js
index 5b0b4753..61c59c37 100644
--- a/src/composables/normalizeContextMenu.js
+++ b/src/composables/normalizeContextMenu.js
@@ -17,20 +17,27 @@ export default (mouseX, mouseY) => {
 
   const outOfBoundsOnY = scopeY + contextMenu.clientHeight > scope.clientHeight;
 
-  let normalizedX = mouseX;
-  let normalizedY = mouseY;
+  let normalX = mouseX;
+  let normalY = mouseY;
+  let normalizedX = false;
+  let normalizedY = false;
 
+  if (window.innerWidth - normalX < 375) {
+    normalizedX = true;
+  }
   // ? normalize on X
   if (outOfBoundsOnX) {
-    normalizedX = scopeOffsetX + scope.clientWidth - contextMenu.clientWidth;
-    normalizedX -= 10
+    normalX = scopeOffsetX + scope.clientWidth - contextMenu.clientWidth;
+    normalX -= 10;
   }
 
   // ? normalize on Y
   if (outOfBoundsOnY) {
-    normalizedY = scopeOffsetY + scope.clientHeight - contextMenu.clientHeight;
-    normalizedY -= 10
+    normalY = scopeOffsetY + scope.clientHeight - contextMenu.clientHeight;
+    normalY -= 10;
+
+    normalizedY = true;
   }
 
-  return { normalizedX, normalizedY };
+  return { normalX, normalY, normalizedX, normalizedY };
 };
diff --git a/src/composables/track_context.ts b/src/contexts/track_context.ts
similarity index 63%
rename from src/composables/track_context.ts
rename to src/contexts/track_context.ts
index 5165c99b..4b60eded 100644
--- a/src/composables/track_context.ts
+++ b/src/contexts/track_context.ts
@@ -1,21 +1,29 @@
-import { Track } from './../interfaces';
+import { Track } from "../interfaces";
 import Router from "../router";
-
-interface Option {
-  type?: string;
-  label?: string;
-  action?: Function;
-  icon?: string;
-  critical?: Boolean;
-}
+import { Option } from "../interfaces";
 
 /**
  * Returns a list of context menu items for a track.
  * @param  {any} track a track object.
- * @return {Array<Option>} a list of context menu items.
+ * @return {Array<Option>()} a list of context menu items.
  */
 
 export default (track: Track): Array<Option> => {
+  const single_artist = track.artists.length === 1;
+
+  const children = () => {
+    if (single_artist) {
+      return false;
+    }
+
+    return track.artists.map((artist) => {
+      return <Option>{
+        label: artist,
+        action: () => console.log("artist"),
+      };
+    });
+  };
+
   const option1: Option = {
     label: "Add to Playlist",
     action: () => console.log("Add to Playlist"),
@@ -40,8 +48,19 @@ export default (track: Track): Array<Option> => {
   };
 
   const option4: Option = {
-    label: "Go to Artist",
-    action: () => console.log("Go to Artist"),
+    label: single_artist ? "Go to Artist" : "Go to Artists",
+    icon: "artist",
+    action: () => {
+      if (single_artist) {
+        console.log("Go to Artist");
+      }
+    },
+    children: children(),
+  };
+
+  const option7: Option = {
+    label: "Go to Album Artist",
+    action: () => console.log("Go to Album Artist"),
     icon: "artist",
   };
 
@@ -73,6 +92,7 @@ export default (track: Track): Array<Option> => {
     separator,
     option3,
     option4,
+    option7,
     option5,
     separator,
     option6,
diff --git a/src/interfaces.ts b/src/interfaces.ts
index 086b152c..6986026e 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -29,4 +29,13 @@ interface Artist {
   image: string;
 }
 
-export { Track, AlbumInfo, Artist };
+interface Option {
+  type?: string;
+  label?: string;
+  action?: Function;
+  children?: Option[] | false;
+  icon?: string;
+  critical?: Boolean;
+}
+
+export { Track, AlbumInfo, Artist, Option };
diff --git a/src/stores/context.js b/src/stores/context.js
deleted file mode 100644
index a172bc45..00000000
--- a/src/stores/context.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { defineStore } from "pinia";
-import normalize from "../composables/normalizeContextMenu";
-
-export default defineStore("context-menu", {
-  state: () => ({
-    visible: false,
-    options: [],
-    x: 0,
-    y: 0,
-  }),
-  actions: {
-    showContextMenu(e, context_options) {
-      if (this.visible) {
-        this.visible = false;
-        return
-      }
-
-      this.options = context_options;
-      const yo = normalize(e.clientX, e.clientY);
-      this.x = yo.normalizedX;
-      this.y = yo.normalizedY;
-      this.visible = true;
-    },
-    hideContextMenu() {
-      this.visible = false;
-    },
-  },
-});
diff --git a/src/stores/context.ts b/src/stores/context.ts
new file mode 100644
index 00000000..fb394c91
--- /dev/null
+++ b/src/stores/context.ts
@@ -0,0 +1,47 @@
+import { defineStore } from "pinia";
+import normalize from "../composables/normalizeContextMenu";
+import { Option } from "../interfaces";
+
+export default defineStore("context-menu", {
+  state: () => ({
+    visible: false,
+    options: Array<Option>(),
+    x: 500,
+    y: 500,
+    normalizedX: false,
+    normalizedY: false,
+  }),
+  actions: {
+    showContextMenu(e: any, context_options: Option[]) {
+      if (this.visible) {
+        this.visible = false;
+        return;
+      }
+
+      this.options = context_options;
+      const yo = normalize(e.clientX, e.clientY);
+
+      this.x = yo.normalX;
+      this.y = yo.normalY;
+
+      this.normalizedX = yo.normalizedX;
+      this.normalizedY = yo.normalizedY;
+
+      this.visible = true;
+    },
+    hideContextMenu() {
+      this.visible = false;
+    },
+    hasManyChildren() {
+      let result = false;
+
+      this.options.forEach((option: Option) => {
+        if (option.children && option.children.length > 7) {
+          result = true;
+        }
+      });
+
+      return result;
+    },
+  },
+});