diff --git a/src/components/Pages/Components/PolicyNavigationPanel.vue b/src/components/Pages/Components/PolicyNavigationPanel.vue
index 1c74d72b..d711e6ef 100644
--- a/src/components/Pages/Components/PolicyNavigationPanel.vue
+++ b/src/components/Pages/Components/PolicyNavigationPanel.vue
@@ -7,7 +7,7 @@
             <v-list class="wrap">
                 <v-list-item v-for="(link, index) in links" :key="link.routePath">
                     <v-list-item-content>
-                        <v-list-item-title v-if="index == currentLink">
+                        <v-list-item-title v-if="index == currentlyRenderedLink">
                             {{ link.title }}
                         </v-list-item-title>
 
@@ -25,32 +25,6 @@
 </template>
 
 <script>
-const parseActiveFrom = (activeFrom) => {
-  if (activeFrom === null || activeFrom === undefined) {
-    return null
-  }
-
-  return new Date(`${activeFrom}T00:00:00Z`)
-}
-
-const comparePolicies = (left, right) => {
-  const leftActiveFrom = parseActiveFrom(left.metadata.active_from)
-  const rightActiveFrom = parseActiveFrom(right.metadata.active_from)
-
-  if (leftActiveFrom === null && rightActiveFrom === null) {
-    return 0
-  }
-
-  if (leftActiveFrom === null) {
-    return 1
-  }
-
-  if (rightActiveFrom === null) {
-    return -1
-  }
-
-  return rightActiveFrom - leftActiveFrom || right.metadata.policy_id - left.metadata.policy_id
-}
 
 export default {
   name: 'PolicyNavigationPanel',
@@ -70,33 +44,34 @@ export default {
   },
   data: () => ({
     policies: [],
+    currentPolicyId: null,
+    upcomingPolicyId: null,
     error: undefined,
   }),
   computed: {
     links: function () {
-      const sortedPolicies = [...this.policies].sort(comparePolicies)
-      const today = new Date()
-      today.setHours(0, 0, 0, 0)
-
-      const currentPolicy = sortedPolicies.find(policy => {
-        const activeFrom = parseActiveFrom(policy.metadata.active_from)
-        return activeFrom <= today
-      })
+      const policyById = new Map(this.policies.map(policy => [policy.metadata.policy_id, policy]))
+      const currentPolicy = policyById.get(this.currentPolicyId)
+      const upcomingPolicy = policyById.get(this.upcomingPolicyId)
 
-      const upcomingPolicy = sortedPolicies.find(policy => {
-        const activeFrom = parseActiveFrom(policy.metadata.active_from)
-        return activeFrom > today || activeFrom === null
-      })
-
-      const otherPolicies = sortedPolicies.filter(policy => {
+      const otherPolicies = this.policies.filter(policy => {
         const policyId = policy.metadata.policy_id
-        const currentPolicyId = currentPolicy ? currentPolicy.metadata.policy_id : null
-        const upcomingPolicyId = upcomingPolicy ? upcomingPolicy.metadata.policy_id : null
+        const currentPolicyId = this.currentPolicyId
+        const upcomingPolicyId = this.upcomingPolicyId
 
         return policyId !== currentPolicyId && policyId !== upcomingPolicyId
+      }).sort((left, right) => {
+        const leftActiveFrom = left.metadata.active_from || ''
+        const rightActiveFrom = right.metadata.active_from || ''
+
+        if (leftActiveFrom === rightActiveFrom) {
+          return right.metadata.policy_id - left.metadata.policy_id
+        }
+
+        return rightActiveFrom.localeCompare(leftActiveFrom)
       })
 
-      const orderedPolicies = [currentPolicy, upcomingPolicy, ...otherPolicies].filter(Boolean)
+      const orderedPolicies = [upcomingPolicy, currentPolicy, ...otherPolicies].filter(Boolean)
 
       return orderedPolicies.map(policy => {
         const activeFrom = policy.metadata.active_from
@@ -109,14 +84,13 @@ export default {
         }
       })
     },
-    currentLink: function () {
-      const isCurrentPath = (element) => element.routePath === this.$route.path
-      const positionInList = this.links.findIndex(isCurrentPath)
+    currentlyRenderedLink: function () {
+      const isRenderedPath = (element) => element.routePath === this.$route.path
+      const positionInList = this.links.findIndex(isRenderedPath)
 
       if (positionInList === -1) {
-        const currentVersionIndex = this.links.findIndex(element => element.routePath === this.basePath)
-
-        return currentVersionIndex === -1 ? 0 : currentVersionIndex
+        const renderedVersionIndex = this.links.findIndex(element => element.routePath === this.basePath)
+        return renderedVersionIndex === -1 ? 0 : renderedVersionIndex
       }
 
       return positionInList
@@ -127,8 +101,33 @@ export default {
       this.error = undefined
 
       try {
-        const response = await this.$api.getAllPoliciesByType({ policyType: this.policyType })
-        this.policies = response
+        const policies = await this.$api.getAllPoliciesByType({ policyType: this.policyType })
+
+        this.policies = policies
+
+        // We look up the Current and Upcoming policy of this type to avoid needing to have the complex
+        // date calculations in the frontend and instead do them in the platform api.
+        // This is quite inefficient but it keeps the frontend less complex to reason about.
+        // We need to consider that there may be neither an upcoming or current policy and gracefully handle that,
+        try {
+          const upcomingPolicy = await this.$api.getUpcomingPolicyByType({ policyType: this.policyType })
+          this.upcomingPolicyId = upcomingPolicy.metadata.policy_id
+        } catch (error) {
+          if (!(error && error.response && error.response.status === 404)) {
+            console.error(error)
+          }
+          this.upcomingPolicyId = null
+        }
+
+        try {
+          const currentPolicy = await this.$api.getCurrentPolicyByType({ policyType: this.policyType })
+          this.currentPolicyId = currentPolicy.metadata.policy_id
+        } catch (error) {
+          if (!(error && error.response && error.response.status === 404)) {
+            console.error(error)
+          }
+          this.currentPolicyId = null
+        }
       } catch (error) {
         this.error = error
         console.error(error)
@@ -149,7 +148,6 @@ export default {
       if (isCurrentPolicy) {
         return 'Current version'
       }
-
       if (isUpcomingPolicy) {
         return 'Upcoming version'
       }
diff --git a/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue b/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue
index 4fe5c97a..8121eb16 100644
--- a/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue
+++ b/src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue
@@ -4,7 +4,7 @@
       An error occurred while trying to load the requested policy. Please try again later.
     </v-alert>
     <v-container class="fill-height" fluid v-if="!error">
-      <v-row v-if="isUpcomingPolicy" justify="center">
+      <v-row v-if="isUpcomingRoute" justify="center">
         <v-col cols="11">
           <v-alert type="info">
             This is an upcoming version. You can find the
@@ -34,18 +34,6 @@ export const versions = {
   'hosting-policy/version-1.vue': () => ({ component: import('./hosting-policy/version-1.vue') }),
 }
 
-const isFutureDate = (activeFrom) => {
-  if (activeFrom === null || activeFrom === undefined) {
-    return false
-  }
-
-  const date = new Date(`${activeFrom}T00:00:00Z`)
-  const today = new Date()
-  today.setHours(0, 0, 0, 0)
-
-  return date > today
-}
-
 export default {
   name: 'HostingPolicyRenderer',
   components: {
@@ -58,8 +46,8 @@ export default {
     isUpcomingRoute: function () {
       return this.$route.path === '/hosting-policy/upcoming'
     },
-    isUpcomingPolicy: function () {
-      return isFutureDate(this.policyMetadata && this.policyMetadata.active_from)
+    isCurrentRoute: function () {
+      return this.policyActiveFrom === undefined
     },
   },
   data () {
@@ -67,6 +55,7 @@ export default {
       policy: undefined,
       policyMetadata: undefined,
       error: undefined,
+      policyType: 'hosting-policy',
     }
   },
   methods: {
@@ -76,13 +65,13 @@ export default {
       this.error = undefined
 
       try {
-        const policyType = 'hosting-policy' // TODO for a generalized component, read this from component property
+        const policyType = this.policyType // TODO for a generalized component, read this from component property
         const activeFrom = this.policyActiveFrom
         let response
 
         if (this.isUpcomingRoute) {
           response = await this.$api.getUpcomingPolicyByType({ policyType })
-        } else if (activeFrom === undefined) {
+        } else if (this.isCurrentRoute) {
           response = await this.$api.getCurrentPolicyByType({ policyType })
         } else {
           response = await this.$api.getPolicyByDate({ policyType, activeFrom })