diff --git a/src/backend/api.js b/src/backend/api.js
index c51845ed..d357d001 100644
--- a/src/backend/api.js
+++ b/src/backend/api.js
@@ -98,6 +98,19 @@ export const wikiDiscovery = async ({ sort, direction, active, currentPage, resu
   })).data
 }
 
+export const policiesCurrent = async () => {
+  return (await axios.get('/v1/policies/current'));
+}
+
+export const policyByDate = async ({ policyType, activeFrom }) => {
+  return (await axios.get('/v1/policies/{policy_type}/by_active_from/{active_from}', {
+    params: {
+      policy_type: policyType,
+      active_from: activeFrom,
+    }
+  }));
+}
+
 export const importEntities = async ({
   wikiId,
   entityIds = [
diff --git a/src/components/Pages/TermsOfUse/TermsOfUseNavigationPanel.vue b/src/components/Pages/TermsOfUse/TermsOfUseNavigationPanel.vue
index 7ed9f406..061a6f43 100644
--- a/src/components/Pages/TermsOfUse/TermsOfUseNavigationPanel.vue
+++ b/src/components/Pages/TermsOfUse/TermsOfUseNavigationPanel.vue
@@ -11,6 +11,7 @@ export default {
     PolicyNavigationPanel,
   },
   data: () => ({
+    // TODO update with info from API
     termsOfUseLinks: [
       { title: 'Upcoming Version', routePath: '/terms-of-use/upcoming' },
       { title: '11 April 2022 (current)', routePath: '/terms-of-use' },
diff --git a/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue b/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue
new file mode 100644
index 00000000..bde52c34
--- /dev/null
+++ b/src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue
@@ -0,0 +1,88 @@
+<template>
+  <v-main>
+    <pre>
+    policyId (derived from route): `{{policyId}}`
+    policy: {{ policy }}
+    </pre>
+
+    <p>
+    <router-link :to="{ path: '/terms-of-use/2022-01-01' }">
+        2022-01-01
+    </router-link></p>
+
+    <p><router-link :to="{ path: '/terms-of-use/upcoming' }">
+        upcoming
+    </router-link></p>
+
+    <hr>
+
+    <component :is="policy" v-if="policy" />
+  </v-main>
+</template>
+
+<script>
+export const versions = {
+  "2022-01-01": () => ({ component: import('./terms-of-use/2022-01-01.vue') }),
+  upcoming:     () => ({ component: import('./terms-of-use/upcoming.vue') }),
+}
+
+export default {
+  name: 'TermsOfUseRenderer',
+  components: {
+  },
+  computed: {
+    policyId: function() {
+        return this.$route.params.version;
+    }
+  },
+  data() {
+    return {
+        policy: undefined,
+    }
+  },
+  methods: {
+    async loadPolicy () {
+        console.warn(this.policyId);
+      try {
+        // const response = await this.$api.policiesCurrent();
+        // const response = await this.$api.policyByDate({policy_type, active_from});
+
+        const mockResponses = {
+            "2022-01-01": {
+  "metadata": {
+    "policy_id": 1,
+    "type": "terms-of-use",
+    "active_from": "2022-01-01",
+    "content_vue_file": "terms-of-use/version-1.vue"
+  }},
+  upcoming: {
+  "metadata": {
+    "policy_id": 1,
+    "type": "terms-of-use",
+    "active_from": "upcoming",
+    "content_vue_file": "terms-of-use/upcoming.vue"
+  }}
+        }
+        const response = mockResponses[this.policyId];
+
+        const metadata = await response.metadata;
+        this.policy = versions[metadata.active_from];
+      } catch (error) {
+        console.log(error)
+        alert('Failed to show policy')
+      }
+    },
+  },
+  mounted () {
+    this.loadPolicy()
+  },
+  watch: {
+    policyId: function () {
+      this.loadPolicy()
+    },
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/Pages/TermsOfUse/Current.vue b/src/components/Pages/TermsOfUse/terms-of-use/2022-01-01.vue
similarity index 99%
rename from src/components/Pages/TermsOfUse/Current.vue
rename to src/components/Pages/TermsOfUse/terms-of-use/2022-01-01.vue
index c34473e0..c04501ee 100644
--- a/src/components/Pages/TermsOfUse/Current.vue
+++ b/src/components/Pages/TermsOfUse/terms-of-use/2022-01-01.vue
@@ -1292,7 +1292,7 @@
 </template>
 
 <script>
-import TermsOfUseNavigationPanel from './TermsOfUseNavigationPanel.vue'
+import TermsOfUseNavigationPanel from '../TermsOfUseNavigationPanel.vue'
 
 export default {
   name: 'TermsOfUse',
diff --git a/src/components/Pages/TermsOfUse/Upcoming.vue b/src/components/Pages/TermsOfUse/terms-of-use/upcoming.vue
similarity index 99%
rename from src/components/Pages/TermsOfUse/Upcoming.vue
rename to src/components/Pages/TermsOfUse/terms-of-use/upcoming.vue
index 4094c294..1d5d387d 100644
--- a/src/components/Pages/TermsOfUse/Upcoming.vue
+++ b/src/components/Pages/TermsOfUse/terms-of-use/upcoming.vue
@@ -1134,7 +1134,7 @@
 </template>
 
 <script>
-import TermsOfUseNavigationPanel from './TermsOfUseNavigationPanel.vue'
+import TermsOfUseNavigationPanel from '../TermsOfUseNavigationPanel.vue'
 
 export default {
   name: 'TermsOfUseUpcoming',
diff --git a/src/router/index.js b/src/router/index.js
index dcaaba2c..f32bd9c4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -14,13 +14,12 @@ import ResetPassword from '@/components/Pages/ResetPassword'
 import EmailVerification from '@/components/Pages/EmailVerification'
 import CreateWiki from '@/components/Pages/CreateWiki'
 import TabSettings from '@/components/Pages/ManageWiki/TabSettings'
-import TermsOfUse from '@/components/Pages/TermsOfUse/Current.vue'
+import TermsOfUseRenderer from '@/components/Pages/TermsOfUse/TermsOfUseRenderer.vue'
 import Privacy from '@/components/Pages/Privacy/Privacy'
 import User from '@/components/Pages/User'
 import Discovery from '@/components/Pages/Discovery/Discovery'
 import Complaint from '@/components/Pages/Complaint.vue'
 import HostingPolicy from '@/components/Pages/HostingPolicy.vue'
-import TermsOfUseUpcoming from '@/components/Pages/TermsOfUse/Upcoming.vue'
 import DsaInfo from '@/components/Pages/DsaInfo/DsaInfo'
 
 Vue.use(Router)
@@ -74,12 +73,12 @@ const router = new Router({
     {
       path: '/terms-of-use',
       name: 'TermsOfUse',
-      component: TermsOfUse,
+      component: TermsOfUseRenderer,
     },
     {
-      path: '/terms-of-use/upcoming',
-      name: 'TermsOfUseUpcoming',
-      component: TermsOfUseUpcoming,
+      path: '/terms-of-use/:version',
+      name: 'TermsOfUseRenderer',
+      component: TermsOfUseRenderer,
     },
     {
       path: '/hosting-policy/pilot',