diff --git a/src/components/Pages/Components/PolicyNavigationPanel.vue b/src/components/Pages/Components/PolicyNavigationPanel.vue
new file mode 100644
index 00000000..a4fa6693
--- /dev/null
+++ b/src/components/Pages/Components/PolicyNavigationPanel.vue
@@ -0,0 +1,36 @@
+<template>
+    <v-expansion-panels v-bind:value="$vuetify.breakpoint.mdAndUp ? 0 : null" v-if="links">
+        <v-expansion-panel>
+            <v-expansion-panel-header>{{ title }}</v-expansion-panel-header>
+
+            <v-expansion-panel-content>
+            <v-list class="wrap">
+                <v-list-item v-for="(link) in links" :key="link.routePath">
+                    <v-list-item-content>
+                        <v-list-item-title v-if="link.routePath === currentPath">
+                            {{ link.title }}
+                        </v-list-item-title>
+
+                        <v-list-item-title v-else>
+                            <router-link :to="{ path: link.routePath }" class="text-decoration-none">
+                                {{ link.title }}
+                            </router-link>
+                        </v-list-item-title>
+                    </v-list-item-content>
+                </v-list-item>
+            </v-list>
+            </v-expansion-panel-content>
+        </v-expansion-panel>
+    </v-expansion-panels>
+</template>
+
+<script>
+export default {
+  name: 'NavigationPanel',
+  props: {
+    title: String,
+    currentPath: String,
+    links: Array,
+  },
+}
+</script>
diff --git a/src/components/Pages/TermsOfUse/TermsOfUseNavigationPanel.vue b/src/components/Pages/TermsOfUse/TermsOfUseNavigationPanel.vue
new file mode 100644
index 00000000..928861a0
--- /dev/null
+++ b/src/components/Pages/TermsOfUse/TermsOfUseNavigationPanel.vue
@@ -0,0 +1,27 @@
+<template>
+    <PolicyNavigationPanel title="All Versions" :links="termsOfUseLinks" :currentPath="currentPath" />
+</template>
+
+<script>
+import PolicyNavigationPanel from '../Components/PolicyNavigationPanel.vue'
+
+export default {
+  name: 'TermsOfUseNavigationPanel',
+  components: {
+    PolicyNavigationPanel,
+  },
+  data: () => ({
+    termsOfUseLinks: [
+      { title: 'Upcoming Version', routePath: '/terms-of-use/upcoming' },
+      { title: 'April 11th 2022 (current)', routePath: '/terms-of-use' },
+    ],
+    currentPath: null,
+  }),
+  mounted () {
+    this.currentPath = this.$route.path
+  },
+}
+
+</script>
+
+<style scoped></style>