diff --git a/frontend/components/nav/Bar.vue b/frontend/components/nav/Bar.vue
index 6835ee5..7d39433 100644
--- a/frontend/components/nav/Bar.vue
+++ b/frontend/components/nav/Bar.vue
@@ -2,6 +2,7 @@
 defineProps<{
     championName?: string
     championLanes?: Array<LaneData>
+    tierlistList?: boolean
 }>()
 const emit = defineEmits<{
     stateChange: [state: string, lane: number]
@@ -11,7 +12,8 @@ const emit = defineEmits<{
 
 <template>
     <NavSideBar :champion-name="championName" 
-        :champion-lanes="championLanes" 
+        :champion-lanes="championLanes"
+        :tierlist-list="tierlistList"
         @state-change="(s, l) => emit('stateChange', s, l)"/>
     <NavBottomBar :champion-name="championName" 
         :champion-lanes="championLanes" 
diff --git a/frontend/components/nav/SideBar.vue b/frontend/components/nav/SideBar.vue
index d68e61a..0108f9f 100644
--- a/frontend/components/nav/SideBar.vue
+++ b/frontend/components/nav/SideBar.vue
@@ -4,6 +4,7 @@ import { LANE_IMAGES, lanePositionToIndex, POSITIONS_STR } from '~/utils/cdragon
 defineProps<{
     championName?: string
     championLanes?: Array<LaneData>
+    tierlistList?: boolean
 }>()
 const emit = defineEmits<{
     stateChange: [state: string, lane: number]
@@ -45,6 +46,8 @@ function handleStateChange(newState : string, newLane: number) {
             style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px;">Items</h2>
         
         </div>
+
+        <NavTierlistList v-if="tierlistList == true" style="margin-top: 30px;" />
     </div>
 </template>
 
diff --git a/frontend/components/nav/TierlistList.vue b/frontend/components/nav/TierlistList.vue
new file mode 100644
index 0000000..ca1e617
--- /dev/null
+++ b/frontend/components/nav/TierlistList.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+const route = useRoute()
+
+const selected = ref("");
+if(route.path.startsWith("/tierlist/")) {
+    const lane = route.params.lane as string
+    selected.value = lane
+}
+</script>
+
+<template>
+<div>
+    <h2 style="padding-left: 20px; font-size: 2.4rem; margin-bottom: 10px;">Tierlist</h2>
+    <NuxtLink style="margin-top: 5px; margin-bottom: 5px;" v-for="(pos, i) in POSITIONS" :to="'/tierlist/' + pos">
+        <div :class="selected == pos ? 'sidebar-link-selected' : ''" 
+            class="sidebar-link" style="padding-left: 35px; display: flex; align-items: center;">
+            <img width="40" height="40" :src="LANE_IMAGES[i]" :alt="POSITIONS_STR[i]" />
+            <h3 style="font-size: 2.1rem; font-weight: 200; margin-left: 10px;">{{ POSITIONS_STR[i] }}</h3>
+        </div>
+    </NuxtLink>
+</div>
+</template>
diff --git a/frontend/pages/tierlist/[lane].vue b/frontend/pages/tierlist/[lane].vue
index fefbbb6..08850b4 100644
--- a/frontend/pages/tierlist/[lane].vue
+++ b/frontend/pages/tierlist/[lane].vue
@@ -51,7 +51,7 @@ const d_tier = tierFromPickrate(0, 0.05)
     </Head>
 
     <div style="display: flex; min-height: 100vh; align-items: stretch;  width: 100%;">
-        <NavSideBar/>
+        <NavSideBar :tierlist-list="true" />
 
         <div style="margin-left: 10px; width: 100%; overflow-y: scroll;">