diff --git a/dashboard/src/components/skills/SkillPage.vue b/dashboard/src/components/skills/SkillPage.vue
index 187a03d270..91fa813b8d 100644
--- a/dashboard/src/components/skills/SkillPage.vue
+++ b/dashboard/src/components/skills/SkillPage.vue
@@ -27,6 +27,7 @@ import { useProjConfig } from '@/stores/UseProjConfig.js'
 import ShowMore from '@/components/skills/selfReport/ShowMore.vue'
 import EditSkill from '@/components/skills/EditSkill.vue'
 import { useAppConfig } from '@/common-components/stores/UseAppConfig.js'
+import SkillNavigation from "@/skills-display/components/utilities/SkillNavigation.vue";
 
 const route = useRoute()
 const router = useRouter()
@@ -158,10 +159,26 @@ const buildHeaderOptions = () => {
 const skillId = computed(() => {
   return skillsState.skill ? `ID: ${SkillReuseIdUtil.removeTag(skillsState.skill.skillId)}` : 'Loading...'
 })
+
+const prevButtonClicked = () => {
+  const params = { skillId: skillsState.skill.prevSkillId, projectId: route.params.projectId }
+  router.push({ name: route.name, params: params })
+}
+
+const nextButtonClicked = () => {
+  const params = { skillId: skillsState.skill.nextSkillId, projectId: route.params.projectId }
+  router.push({ name: route.name, params: params })
+}
+
 </script>
 
 <template>
-  <div>
+  <div class="mt-2">
+    <Card class="p-2" :pt="{ body: { class: 'p-0!' } }" v-if="skillsState.skill && (skillsState.skill.prevSkillId || skillsState.skill.nextSkillId)" >
+      <template #content>
+        <skill-navigation @prevButtonClicked="prevButtonClicked" @nextButtonClicked="nextButtonClicked" :skill="skillsState.skill" buttonSeverity="info" />
+      </template>
+    </Card>
     <page-header :loading="isLoading" :options="headerOptions">
       <template #subTitle v-if="skillsState.skill">
         <div v-for="(tag) in skillsState.skill.tags" :key="tag.tagId" class="h6 mr-2 d-inline-block"
@@ -207,6 +224,7 @@ const skillId = computed(() => {
           class="fas fa-eye-slash mr-1" aria-hidden="true"></i> DISABLED</Tag>
       </template>
     </page-header>
+
     <navigation :nav-items="navItems">
     </navigation>
 
diff --git a/dashboard/src/skills-display/components/skill/SkillPage.vue b/dashboard/src/skills-display/components/skill/SkillPage.vue
index 9a3b02f288..f554fdd97f 100644
--- a/dashboard/src/skills-display/components/skill/SkillPage.vue
+++ b/dashboard/src/skills-display/components/skill/SkillPage.vue
@@ -26,9 +26,7 @@ import {useSkillsDisplayAttributesState} from '@/skills-display/stores/UseSkills
 const Prerequisites = defineAsyncComponent(() => import('@/skills-display/components/skill/prerequisites/Prerequisites.vue'))
 import SkillAchievementMsg from "@/skills-display/components/progress/celebration/SkillAchievementMsg.vue";
 import MarkdownText from "@/common-components/utilities/markdown/MarkdownText.vue";
-import {useMagicKeys, watchDebounced} from "@vueuse/core";
-import {useUserPreferences} from "@/stores/UseUserPreferences.js";
-import {useLog} from "@/components/utils/misc/useLog.js";
+import SkillNavigation from "@/skills-display/components/utilities/SkillNavigation.vue";
 
 const attributes = useSkillsDisplayAttributesState()
 const skillsDisplayService = useSkillsDisplayService()
@@ -36,9 +34,6 @@ const skillsDisplayInfo = useSkillsDisplayInfo()
 const scrollIntoViewState = useScrollSkillsIntoViewState()
 const route = useRoute()
 const skillState = useSkillsDisplaySubjectState()
-const keys = useMagicKeys()
-const userPreferences = useUserPreferences()
-const log = useLog()
 const skill = computed(() => skillState.skillSummary)
 const loadingSkill = ref(true)
 const displayGroupDescription = ref(false);
@@ -70,34 +65,6 @@ const loadSkillSummary = () => {
       }
     })
 }
-const nextButtonShortcut = ref('Ctrl+Alt+N')
-const previousButtonShortcut = ref('Ctrl+Alt+P')
-userPreferences.afterUserPreferencesLoaded().then((options) => {
-  const debounceOptions = { debounce: 250, maxWait: 1000 }
-  if (options.sd_next_skill_keyboard_shortcut) {
-    nextButtonShortcut.value = options.sd_next_skill_keyboard_shortcut?.toLowerCase().replace(/ /g, '')
-  }
-  if (options.sd_previous_skill_keyboard_shortcut) {
-    previousButtonShortcut.value = options.sd_previous_skill_keyboard_shortcut?.toLowerCase().replace(/ /g, '')
-  }
-
-  log.debug(`Next shortcut is : ${nextButtonShortcut.value}`)
-  log.debug(`Previous shortcut is : ${previousButtonShortcut.value}`)
-  watchDebounced(
-      keys[nextButtonShortcut.value],
-      () => {
-        nextButtonClicked()
-      },
-      debounceOptions
-  )
-  watchDebounced(
-      keys[previousButtonShortcut.value],
-      () => {
-        prevButtonClicked()
-      },
-      debounceOptions
-  )
-})
 
 const prevButtonClicked = () => {
   const params = { skillId: skillState.skillSummary.prevSkillId, projectId: route.params.projectId }
@@ -132,38 +99,7 @@ const descriptionToggled = () => {
       <skills-title>{{ attributes.skillDisplayName }} Overview</skills-title>
       <Card class="mt-4" :pt="{ content: { class: 'p-0' }}">
         <template #content>
-          <div class="flex-col sm:flex-row items-center flex gap-2 mb-6" v-if="skill && (skill.prevSkillId || skill.nextSkillId) && !skillsDisplayInfo.isCrossProject()">
-            <div class="w-28">
-              <SkillsButton
-                @click="prevButtonClicked" v-if="skill.prevSkillId"
-                outlined
-                size="small"
-                :title="`Previous ${attributes.skillDisplayName} (${previousButtonShortcut})`"
-                class="skills-theme-btn"
-                data-cy="prevSkill"
-                aria-label="previous skill">
-                <i class="fas fa-arrow-alt-circle-left mr-1" aria-hidden="true"></i> Previous
-              </SkillsButton>
-            </div>
-            <div class="flex-1 text-center " style="font-size: 0.9rem;" data-cy="skillOrder"><span
-              class="italic">{{ attributes.skillDisplayName }}</span> <span class="font-semibold">{{ skill.orderInGroup
-              }}</span> <span class="italic">of</span> <span class="font-semibold">{{ skill.totalSkills }}</span>
-            </div>
-            <div class="w-28 text-right">
-              <SkillsButton
-                @click="nextButtonClicked"
-                v-if="skill.nextSkillId"
-                class="skills-theme-btn"
-                data-cy="nextSkill"
-                outlined
-                size="small"
-                :title="`Next ${attributes.skillDisplayName} (${nextButtonShortcut})`"
-                aria-label="next skill">
-                Next
-                <i class="fas fa-arrow-alt-circle-right ml-1" aria-hidden="true"></i>
-              </SkillsButton>
-            </div>
-          </div>
+          <skill-navigation class="mb-6" :skill="skill" @prevButtonClicked="prevButtonClicked" @nextButtonClicked="nextButtonClicked" v-if="skill && (skill.prevSkillId || skill.nextSkillId) && !skillsDisplayInfo.isCrossProject()" />
           <div v-if="!attributes.groupInfoOnSkillPage && skill.groupName" class="mt-4 p-1 mb-4" data-cy="groupInformationSection">
             <div class="flex">
               <div class="mr-2 mt-1 text-xl">
diff --git a/dashboard/src/skills-display/components/utilities/SkillNavigation.vue b/dashboard/src/skills-display/components/utilities/SkillNavigation.vue
new file mode 100644
index 0000000000..5a3c1eab23
--- /dev/null
+++ b/dashboard/src/skills-display/components/utilities/SkillNavigation.vue
@@ -0,0 +1,105 @@
+/*
+Copyright 2024 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+<script setup>
+import {ref} from "vue";
+import {useMagicKeys, watchDebounced} from "@vueuse/core";
+import {useSkillsDisplayAttributesState} from "@/skills-display/stores/UseSkillsDisplayAttributesState.js";
+import {useUserPreferences} from "@/stores/UseUserPreferences.js";
+import {useLog} from "@/components/utils/misc/useLog.js";
+
+const props = defineProps(['skill', 'buttonSeverity'])
+const emit = defineEmits(['prevButtonClicked', 'nextButtonClicked'])
+const attributes = useSkillsDisplayAttributesState()
+const keys = useMagicKeys()
+const userPreferences = useUserPreferences()
+const log = useLog()
+
+const nextButtonShortcut = ref('Ctrl+Alt+N')
+const previousButtonShortcut = ref('Ctrl+Alt+P')
+userPreferences.afterUserPreferencesLoaded().then((options) => {
+  const debounceOptions = { debounce: 250, maxWait: 1000 }
+  if (options.sd_next_skill_keyboard_shortcut) {
+    nextButtonShortcut.value = options.sd_next_skill_keyboard_shortcut?.toLowerCase().replace(/ /g, '')
+  }
+  if (options.sd_previous_skill_keyboard_shortcut) {
+    previousButtonShortcut.value = options.sd_previous_skill_keyboard_shortcut?.toLowerCase().replace(/ /g, '')
+  }
+
+  log.debug(`Next shortcut is : ${nextButtonShortcut.value}`)
+  log.debug(`Previous shortcut is : ${previousButtonShortcut.value}`)
+  watchDebounced(
+      keys[nextButtonShortcut.value],
+      () => {
+        nextButtonClicked()
+      },
+      debounceOptions
+  )
+  watchDebounced(
+      keys[previousButtonShortcut.value],
+      () => {
+        prevButtonClicked()
+      },
+      debounceOptions
+  )
+})
+
+const prevButtonClicked = () => {
+  emit('prevButtonClicked')
+}
+const nextButtonClicked = () => {
+  emit('nextButtonClicked')
+}
+</script>
+
+<template>
+  <div class="flex-row sm:flex-row items-center flex gap-2 w-full" v-if="skill && (skill.prevSkillId || skill.nextSkillId)">
+    <div class="w-28">
+      <SkillsButton size="small"
+                    outlined
+                    id="prevSkillButton"
+                    :title="`Previous ${attributes.skillDisplayName} (${previousButtonShortcut})`"
+                    class="skills-theme-btn"
+                    :severity="buttonSeverity"
+                    data-cy="prevSkill"
+                    @click="prevButtonClicked"
+                    aria-label="previous skill"
+                    v-if="skill.prevSkillId">
+        <i class="fas fa-arrow-alt-circle-left mr-1" aria-hidden="true"></i> Previous
+      </SkillsButton>
+    </div>
+    <div class="flex-1 text-center " style="font-size: 0.9rem;" data-cy="skillOrder">
+      <span class="italic">{{ attributes.skillDisplayName }}</span> <span class="font-semibold">{{ skill.orderInGroup }}</span> <span class="italic">of</span> <span class="font-semibold">{{ skill.totalSkills }}</span>
+    </div>
+    <div class="w-28 text-right">
+      <SkillsButton size="small"
+                    outlined
+                    id="nextSkillButton"
+                    data-cy="nextSkill"
+                    :severity="buttonSeverity"
+                    class="skills-theme-btn"
+                    aria-label="next skill"
+                    :title="`Next ${attributes.skillDisplayName} (${nextButtonShortcut})`"
+                    @click="nextButtonClicked"
+                    v-if="skill.nextSkillId">
+        Next <i class="fas fa-arrow-alt-circle-right ml-1" aria-hidden="true"></i>
+      </SkillsButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/e2e-tests/cypress/e2e/skills_spec.js b/e2e-tests/cypress/e2e/skills_spec.js
index 5a4f063f1b..14b6383b38 100644
--- a/e2e-tests/cypress/e2e/skills_spec.js
+++ b/e2e-tests/cypress/e2e/skills_spec.js
@@ -1586,5 +1586,41 @@ describe('Skills Tests', () => {
     cy.get('[data-cy="descriptionError"]').contains('Mocked up validation failure')
   })
 
+  it('can navigate between skills on admin skill page', () => {
+    cy.createSkill(1, 1, 1)
+    cy.createSkill(1, 1, 2)
+    cy.createSkill(1, 1, 3)
 
+    cy.visit('/administrator/projects/proj1/subjects/subj1/skills/skill1')
+
+    cy.get('[data-cy="title"').contains('Very Great Skill 1');
+    cy.get('[data-cy="skillOrder"]').contains('Skill 1 of 3');
+    cy.get('[data-cy="prevSkill"]').should('not.exist');
+    cy.get('[data-cy="nextSkill"]').should('exist');
+    cy.get('[data-cy="nextSkill"]').click();
+
+
+    cy.get('[data-cy="title"').contains('Very Great Skill 2');
+    cy.get('[data-cy="skillOrder"]').contains('Skill 2 of 3');
+    cy.get('[data-cy="prevSkill"]').should('exist');
+    cy.get('[data-cy="nextSkill"]').should('exist');
+    cy.get('[data-cy="nextSkill"]').click();
+
+    cy.get('[data-cy="title"').contains('Very Great Skill 3');
+    cy.get('[data-cy="skillOrder"]').contains('Skill 3 of 3');
+    cy.get('[data-cy="prevSkill"]').should('exist');
+    cy.get('[data-cy="nextSkill"]').should('not.exist');
+    cy.get('[data-cy="prevSkill"]').click();
+
+    cy.get('[data-cy="title"').contains('Very Great Skill 2');
+    cy.get('[data-cy="skillOrder"]').contains('Skill 2 of 3');
+    cy.get('[data-cy="prevSkill"]').should('exist');
+    cy.get('[data-cy="nextSkill"]').should('exist');
+    cy.get('[data-cy="prevSkill"]').click();
+
+    cy.get('[data-cy="title"').contains('Very Great Skill 1');
+    cy.get('[data-cy="skillOrder"]').contains('Skill 1 of 3');
+    cy.get('[data-cy="prevSkill"]').should('not.exist');
+    cy.get('[data-cy="nextSkill"]').should('exist');
+  })
 })
diff --git a/e2e-tests/cypress/visualRegression/base/cypress/e2e/client-display/client-display-theme-various-display-sizes_spec.js/test theming - skill details - iphone-6.png b/e2e-tests/cypress/visualRegression/base/cypress/e2e/client-display/client-display-theme-various-display-sizes_spec.js/test theming - skill details - iphone-6.png
index 26b5341ec8..cc02f50e01 100644
Binary files a/e2e-tests/cypress/visualRegression/base/cypress/e2e/client-display/client-display-theme-various-display-sizes_spec.js/test theming - skill details - iphone-6.png and b/e2e-tests/cypress/visualRegression/base/cypress/e2e/client-display/client-display-theme-various-display-sizes_spec.js/test theming - skill details - iphone-6.png differ
diff --git a/e2e-tests/cypress/visualRegression/base/cypress/e2e/client-display/client-display-theme-various-display-sizes_spec.js/test theming - skill details with deps - ipad-2.png b/e2e-tests/cypress/visualRegression/base/cypress/e2e/client-display/client-display-theme-various-display-sizes_spec.js/test theming - skill details with deps - ipad-2.png
index 5494445ba1..5dff379c9d 100644
Binary files a/e2e-tests/cypress/visualRegression/base/cypress/e2e/client-display/client-display-theme-various-display-sizes_spec.js/test theming - skill details with deps - ipad-2.png and b/e2e-tests/cypress/visualRegression/base/cypress/e2e/client-display/client-display-theme-various-display-sizes_spec.js/test theming - skill details with deps - ipad-2.png differ
diff --git a/e2e-tests/cypress/visualRegression/base/cypress/e2e/client-display/client-display-theme-various-display-sizes_spec.js/test theming - skill details with deps - iphone-6.png b/e2e-tests/cypress/visualRegression/base/cypress/e2e/client-display/client-display-theme-various-display-sizes_spec.js/test theming - skill details with deps - iphone-6.png
index 79312b7e0d..dd8f716b6b 100644
Binary files a/e2e-tests/cypress/visualRegression/base/cypress/e2e/client-display/client-display-theme-various-display-sizes_spec.js/test theming - skill details with deps - iphone-6.png and b/e2e-tests/cypress/visualRegression/base/cypress/e2e/client-display/client-display-theme-various-display-sizes_spec.js/test theming - skill details with deps - iphone-6.png differ
diff --git a/e2e-tests/cypress/visualRegression/base/cypress/e2e/client-display/skills-display-achieved-date_spec.js/Skill-Overview-Achieved-ipad2.png b/e2e-tests/cypress/visualRegression/base/cypress/e2e/client-display/skills-display-achieved-date_spec.js/Skill-Overview-Achieved-ipad2.png
index 2ef8db0bab..19cc198609 100644
Binary files a/e2e-tests/cypress/visualRegression/base/cypress/e2e/client-display/skills-display-achieved-date_spec.js/Skill-Overview-Achieved-ipad2.png and b/e2e-tests/cypress/visualRegression/base/cypress/e2e/client-display/skills-display-achieved-date_spec.js/Skill-Overview-Achieved-ipad2.png differ
diff --git a/e2e-tests/cypress/visualRegression/base/cypress/e2e/client-display/skills-display-achieved-date_spec.js/Skill-Overview-Achieved-iphone6.png b/e2e-tests/cypress/visualRegression/base/cypress/e2e/client-display/skills-display-achieved-date_spec.js/Skill-Overview-Achieved-iphone6.png
index 0637b4f485..f41016244b 100644
Binary files a/e2e-tests/cypress/visualRegression/base/cypress/e2e/client-display/skills-display-achieved-date_spec.js/Skill-Overview-Achieved-iphone6.png and b/e2e-tests/cypress/visualRegression/base/cypress/e2e/client-display/skills-display-achieved-date_spec.js/Skill-Overview-Achieved-iphone6.png differ
diff --git a/service/src/main/java/skills/controller/result/model/SkillDefRes.groovy b/service/src/main/java/skills/controller/result/model/SkillDefRes.groovy
index cd1a5ec7fe..c9241a0ef8 100644
--- a/service/src/main/java/skills/controller/result/model/SkillDefRes.groovy
+++ b/service/src/main/java/skills/controller/result/model/SkillDefRes.groovy
@@ -31,4 +31,9 @@ class SkillDefRes extends SkillDefPartialRes {
 
     Boolean hasVideoConfigured
     String iconClass
+
+    String prevSkillId
+    String nextSkillId
+    int totalSkills
+    int orderInGroup
 }
diff --git a/service/src/main/java/skills/services/admin/SkillsAdminService.groovy b/service/src/main/java/skills/services/admin/SkillsAdminService.groovy
index 055caeb401..8023fa9067 100644
--- a/service/src/main/java/skills/services/admin/SkillsAdminService.groovy
+++ b/service/src/main/java/skills/services/admin/SkillsAdminService.groovy
@@ -44,6 +44,7 @@ import skills.services.userActions.DashboardAction
 import skills.services.userActions.DashboardItem
 import skills.services.userActions.UserActionInfo
 import skills.services.userActions.UserActionsHistoryService
+import skills.skillLoading.SkillsLoader
 import skills.storage.accessors.SkillDefAccessor
 import skills.storage.model.*
 import skills.storage.model.SkillDef.SelfReportingType
@@ -134,6 +135,9 @@ class SkillsAdminService {
     @Autowired
     SkillAttributeService skillAttributeService
 
+    @Autowired
+    private SkillsLoader skillsLoader;
+
     protected static class SaveSkillTmpRes {
         // because of the skill re-use it could be imported but NOT available in the catalog
         boolean isImportedByOtherProjects = false
@@ -713,6 +717,14 @@ class SkillsAdminService {
 
         finalRes.thisSkillWasReusedElsewhere = skillDefRepo.wasThisSkillReusedElsewhere(res.id)
 
+        DisplayOrderRes orderInfo = skillsLoader.getSkillOrderStats(projectId, subjectId, skillId)
+        if(orderInfo) {
+            finalRes.prevSkillId = orderInfo.previousSkillId
+            finalRes.nextSkillId = orderInfo.nextSkillId
+            finalRes.totalSkills = orderInfo.totalCount
+            finalRes.orderInGroup = orderInfo.overallOrder
+        }
+
         String videoUrl = skillAttributesDefRepo.getVideoUrlBySkillRefId(res.id)
         finalRes.hasVideoConfigured = StringUtils.isNotBlank(videoUrl)
         return finalRes
diff --git a/service/src/main/java/skills/skillLoading/SkillsLoader.groovy b/service/src/main/java/skills/skillLoading/SkillsLoader.groovy
index eb833d3acf..a0bb0794d5 100644
--- a/service/src/main/java/skills/skillLoading/SkillsLoader.groovy
+++ b/service/src/main/java/skills/skillLoading/SkillsLoader.groovy
@@ -540,24 +540,8 @@ class SkillsLoader {
         Integer points
     }
 
-    int sortByDisplayOrder(DisplayOrderRes a, DisplayOrderRes b) {
-        if( a.groupId != null || b.groupId != null ) {
-            if( a.groupId != null && b.groupId != null) {
-                if( a.groupId != b.groupId ) {
-                    return a.skillGroupDisplayOrder <=> b.skillGroupDisplayOrder
-                }
-            }
-            else {
-                if( a.groupId != null && b.groupId == null ) {
-                    return a.skillGroupDisplayOrder <=> b.displayOrder
-                }
-                else {
-                    return a.displayOrder <=> b.skillGroupDisplayOrder
-                }
-            }
-        }
-
-        return a.displayOrder <=> b.displayOrder
+    DisplayOrderRes getSkillOrderStats(String projectId, String subjectId, String skillId) {
+        return skillDefRepo.findDisplayOrderByProjectIdAndSubjectIdAndSkillId(projectId, subjectId, skillId)
     }
 
     @Transactional(readOnly = true)
@@ -574,31 +558,10 @@ class SkillsLoader {
             groupName = skillDefRepo.getSkillNameByProjectIdAndSkillId(projectId, skillDef.groupId)?.skillName
         }
 
-        String nextSkillId = null;
-        String prevSkillId = null;
-        int totalSkills = 0;
-        int orderInGroup = 0;
-
         boolean isCrossProjectSkill = crossProjectId && crossProjectId != projectId
+        DisplayOrderRes orderInfo = null
         if(subjectId && !isCrossProjectSkill) {
-            List<DisplayOrderRes> skills = skillDefRepo.findDisplayOrderByProjectIdAndSubjectId(projectId, subjectId)?.sort({a, b -> sortByDisplayOrder(a, b)})
-            def currentSkill = skills.find({ it -> it.getSkillId() == skillId })
-            if (!currentSkill) {
-                throw new SkillException("Provided skill id [${skillId}] des not exist under subject [${subjectId}]", projectId, skillId, ErrorCode.BadParam)
-            }
-            def orderedGroup = skills?.sort({a, b -> sortByDisplayOrder(a, b)});
-            orderInGroup = orderedGroup.findIndexOf({it -> it.skillId == currentSkill.skillId}) + 1;
-            totalSkills = orderedGroup.size();
-
-            if (currentSkill) {
-                def currentIndex = skills.findIndexOf{ it.skillId == currentSkill.skillId }
-                if(currentIndex > 0) {
-                    prevSkillId = skills[currentIndex - 1]?.skillId
-                }
-                if(currentIndex < totalSkills - 1) {
-                    nextSkillId = skills[currentIndex + 1]?.skillId
-                }
-            }
+            orderInfo = getSkillOrderStats(projectId, subjectId, skillId)
         }
 
         if (crossProjectId) {
@@ -678,10 +641,10 @@ class SkillsLoader {
                 projectName: InputSanitizer.unsanitizeName(projDef.name),
                 skillId: skillDef.skillId,
                 subjectId: skillSubjectId,
-                prevSkillId: prevSkillId,
-                nextSkillId: nextSkillId,
-                orderInGroup: orderInGroup,
-                totalSkills: totalSkills,
+                prevSkillId: orderInfo?.previousSkillId,
+                nextSkillId: orderInfo?.nextSkillId,
+                orderInGroup: orderInfo?.overallOrder ?: 0,
+                totalSkills: orderInfo?.totalCount ?: 0,
                 skill: isReusedSkill ? SkillReuseIdUtil.removeTag(unsanitizedName) : unsanitizedName,
                 points: points, todaysPoints: todayPoints,
                 pointIncrement: skillDef.pointIncrement,
diff --git a/service/src/main/java/skills/storage/model/DisplayOrderRes.groovy b/service/src/main/java/skills/storage/model/DisplayOrderRes.groovy
index ea9170939e..329a84ed72 100644
--- a/service/src/main/java/skills/storage/model/DisplayOrderRes.groovy
+++ b/service/src/main/java/skills/storage/model/DisplayOrderRes.groovy
@@ -17,8 +17,8 @@ package skills.storage.model
 
 interface DisplayOrderRes {
     String getSkillId();
-    Integer getDisplayOrder();
-    Integer getSkillGroupDisplayOrder();
-    String getGroupId();
-    String getType();
+    String getPreviousSkillId();
+    String getNextSkillId();
+    Integer getOverallOrder();
+    Integer getTotalCount();
 }
diff --git a/service/src/main/java/skills/storage/repos/SkillDefRepo.groovy b/service/src/main/java/skills/storage/repos/SkillDefRepo.groovy
index ba27f3ada9..8027e230bc 100644
--- a/service/src/main/java/skills/storage/repos/SkillDefRepo.groovy
+++ b/service/src/main/java/skills/storage/repos/SkillDefRepo.groovy
@@ -231,17 +231,35 @@ interface SkillDefRepo extends CrudRepository<SkillDef, Integer>, PagingAndSorti
     List<SkillDef> findPreviousSkillDefs(String projectId, String skillId, int beforeDisplayOrder, List<RelationshipType> relationshipType, Pageable pageable)
 
     @Nullable
-    @Query(value='''select child.skill_id as skillId, child.display_order as displayOrder, skillGroup.display_order as skillGroupDisplayOrder, child.group_id as groupId, child.type as type
-                from skill_definition subj,
-                     skill_relationship_definition rel,
-                     skill_definition child left join skill_definition skillGroup on (child.group_id = skillGroup.skill_id and skillGroup.project_id = child.project_id)
-                where subj.project_id = ?1
-                  and subj.skill_id = ?2
-                  and child.type = 'Skill'
-                  and child.enabled = 'true'
-                  and subj.id = rel.parent_ref_id
-                  and child.id = rel.child_ref_id''', nativeQuery=true)
-    List<DisplayOrderRes> findDisplayOrderByProjectIdAndSubjectId(String projectId, String subjectId)
+    @Query(value='''select * from (
+                        select skillId,
+                               lag(skillId, 1) over ( order by displayOrder, skillGroupDisplayOrder ) as previousSkillId,
+                               lead(skillId, 1) over (order by displayOrder, skillGroupDisplayOrder)  as nextSkillId,
+                               row_number() over () as overallOrder,
+                               count(*) over() as totalCount
+                        from (
+                            select child.skill_id           as skillId,
+                                   (case when skillGroup.display_order is null then child.display_order else skillGroup.display_order end) as displayOrder,
+                                   (case when skillGroup.display_order is not null then child.display_order else skillGroup.display_order end) as skillGroupDisplayOrder,
+                                   child.group_id           as groupId,
+                                   child.type               as type
+                            from skill_definition subj,
+                                 skill_relationship_definition rel,
+                                 skill_definition child
+                            left join skill_definition skillGroup
+                                 on (
+                                     child.group_id = skillGroup.skill_id
+                                     and skillGroup.project_id = child.project_id
+                                 )
+                            where subj.project_id = ?1
+                              and subj.skill_id = ?2
+                              and child.type = 'Skill\'
+                              and child.enabled = 'true\'
+                              and subj.id = rel.parent_ref_id
+                              and child.id = rel.child_ref_id
+                        )
+                    ) where skillId = ?3''', nativeQuery=true)
+    DisplayOrderRes findDisplayOrderByProjectIdAndSubjectIdAndSkillId(String projectId, String subjectId, String skillId)
 
     int countByProjectIdAndType(@Nullable String projectId, SkillDef.ContainerType type)
 
diff --git a/service/src/test/java/skills/intTests/adminDisplayOrder/SkillsOrderSpecs.groovy b/service/src/test/java/skills/intTests/adminDisplayOrder/SkillsOrderSpecs.groovy
index 37a3fcaa79..39302cc17e 100644
--- a/service/src/test/java/skills/intTests/adminDisplayOrder/SkillsOrderSpecs.groovy
+++ b/service/src/test/java/skills/intTests/adminDisplayOrder/SkillsOrderSpecs.groovy
@@ -131,4 +131,554 @@ class SkillsOrderSpecs extends DefaultIntSpec {
         modifiedSkills.collect({it.displayOrder}) == [1, 2, 3, 4]
         modifiedSkills.collect({it.skillId}) == ['skill2', 'skill3', 'skill5', 'skill6']
     }
+
+
+    def "loading the first skill sets nextSkillId but not prevSkillId"() {
+        def proj1 = SkillsFactory.createProject(2)
+        def proj1_subj = SkillsFactory.createSubject(2, 1)
+        List<Map> proj1_skills = SkillsFactory.createSkills(3, 2, 1)
+
+        skillsService.createProject(proj1)
+        skillsService.createSubject(proj1_subj)
+        skillsService.createSkills(proj1_skills)
+
+        when:
+        def skill1 = skillsService.getSkill(proj1_skills[0])
+
+        then:
+        skill1.prevSkillId == null
+        skill1.nextSkillId == 'skill2'
+        skill1.orderInGroup == 1
+        skill1.totalSkills == 3
+
+    }
+
+    def "loading a skill in the middle appropriately sets prev and next skill Ids"() {
+        def proj1 = SkillsFactory.createProject(2)
+        def proj1_subj = SkillsFactory.createSubject(2, 1)
+        List<Map> proj1_skills = SkillsFactory.createSkills(3, 2, 1)
+
+        skillsService.createProject(proj1)
+        skillsService.createSubject(proj1_subj)
+        skillsService.createSkills(proj1_skills)
+
+        when:
+        def summary = skillsService.getSkill(proj1_skills[1])
+
+        then:
+        summary.prevSkillId == 'skill1'
+        summary.nextSkillId == 'skill3'
+        summary.orderInGroup == 2
+        summary.totalSkills == 3
+    }
+
+    def "loading the last skill sets prevSkillId but not nextSkillId"() {
+        def proj1 = SkillsFactory.createProject(2)
+        def proj1_subj = SkillsFactory.createSubject(2, 1)
+        List<Map> proj1_skills = SkillsFactory.createSkills(3, 2, 1)
+
+        skillsService.createProject(proj1)
+        skillsService.createSubject(proj1_subj)
+        skillsService.createSkills(proj1_skills)
+
+        when:
+        def summary = skillsService.getSkill(proj1_skills[2])
+
+        then:
+        summary.prevSkillId == 'skill2'
+        summary.nextSkillId == null
+        summary.orderInGroup == 3
+        summary.totalSkills == 3
+    }
+
+    def "loading a skill with a broken next display works correctly"() {
+        def proj1 = SkillsFactory.createProject(2)
+        def proj1_subj = SkillsFactory.createSubject(2, 1)
+        List<Map> proj1_skills = SkillsFactory.createSkills(3, 2, 1)
+
+        skillsService.createProject(proj1)
+        skillsService.createSubject(proj1_subj)
+        skillsService.createSkills(proj1_skills)
+
+        skillDefRepo.setSkillDisplayOrder(proj1_skills[1].skillId, 3)
+        skillDefRepo.setSkillDisplayOrder(proj1_skills[2].skillId, 5)
+
+        when:
+        def firstSkill = skillsService.getSkill(proj1_skills[0])
+        def secondSkill = skillsService.getSkill(proj1_skills[1])
+        def lastSkill = skillsService.getSkill(proj1_skills[2])
+
+        then:
+        firstSkill.prevSkillId == null
+        firstSkill.nextSkillId == 'skill2'
+        firstSkill.orderInGroup == 1
+        firstSkill.totalSkills == 3
+        secondSkill.prevSkillId == 'skill1'
+        secondSkill.nextSkillId == 'skill3'
+        secondSkill.orderInGroup == 2
+        secondSkill.totalSkills == 3
+        lastSkill.prevSkillId == 'skill2'
+        lastSkill.nextSkillId == null
+        lastSkill.orderInGroup == 3
+        lastSkill.totalSkills == 3
+    }
+
+    def "skills with groups - loading prev/last skillIds with broken displayOrder"() {
+        def proj1 = SkillsFactory.createProject(2)
+        def proj1_subj = SkillsFactory.createSubject(2, 1)
+        List<Map> proj1_skills = SkillsFactory.createSkills(10, 2, 1)
+        def p1subj1g1 = SkillsFactory.createSkillsGroup(2, 1, 22)
+
+        skillsService.createProject(proj1)
+        skillsService.createSubject(proj1_subj)
+        skillsService.createSkills(proj1_skills[0..2])
+        skillsService.createSkill(p1subj1g1)
+        proj1_skills[3..4].each {
+            skillsService.assignSkillToSkillsGroup(p1subj1g1.skillId, it)
+        }
+        skillsService.createSkills(proj1_skills[5..9])
+
+        skillDefRepo.setSkillDisplayOrder(p1subj1g1.skillId, 10)
+        proj1_skills[0..9].eachWithIndex { it, index ->
+            def newIndex = (index + 1) * 2
+            skillDefRepo.setSkillDisplayOrder(it.skillId, newIndex)
+        }
+
+        when:
+        def summaries = proj1_skills.collect {
+            skillsService.getSkill(it)
+        }
+
+        then:
+        summaries.skillId == [
+                proj1_skills[0].skillId,
+                proj1_skills[1].skillId,
+                proj1_skills[2].skillId,
+                proj1_skills[3].skillId,
+                proj1_skills[4].skillId,
+                proj1_skills[5].skillId,
+                proj1_skills[6].skillId,
+                proj1_skills[7].skillId,
+                proj1_skills[8].skillId,
+                proj1_skills[9].skillId,
+        ]
+        summaries.prevSkillId == [
+                null,
+                proj1_skills[0].skillId,
+                proj1_skills[1].skillId,
+                proj1_skills[2].skillId,
+                proj1_skills[3].skillId,
+                proj1_skills[4].skillId,
+                proj1_skills[5].skillId,
+                proj1_skills[6].skillId,
+                proj1_skills[7].skillId,
+                proj1_skills[8].skillId,
+        ]
+        summaries.nextSkillId == [
+                proj1_skills[1].skillId,
+                proj1_skills[2].skillId,
+                proj1_skills[3].skillId,
+                proj1_skills[4].skillId,
+                proj1_skills[5].skillId,
+                proj1_skills[6].skillId,
+                proj1_skills[7].skillId,
+                proj1_skills[8].skillId,
+                proj1_skills[9].skillId,
+                null
+        ]
+        summaries.orderInGroup == [
+                1,
+                2,
+                3,
+                4,
+                5,
+                6,
+                7,
+                8,
+                9,
+                10
+        ]
+    }
+
+    def "skills with groups - loading prev/last skillIds"() {
+        def proj1 = SkillsFactory.createProject(2)
+        def proj1_subj = SkillsFactory.createSubject(2, 1)
+        List<Map> proj1_skills = SkillsFactory.createSkills(10, 2, 1)
+        def p1subj1g1 = SkillsFactory.createSkillsGroup(2, 1, 22)
+
+        skillsService.createProject(proj1)
+        skillsService.createSubject(proj1_subj)
+        skillsService.createSkills(proj1_skills[0..2])
+        skillsService.createSkill(p1subj1g1)
+        proj1_skills[3..4].each {
+            skillsService.assignSkillToSkillsGroup(p1subj1g1.skillId, it)
+        }
+        skillsService.createSkills(proj1_skills[5..9])
+
+        when:
+        def summaries = proj1_skills.collect {
+            skillsService.getSkill(it)
+        }
+
+        then:
+        summaries.skillId == [
+                proj1_skills[0].skillId,
+                proj1_skills[1].skillId,
+                proj1_skills[2].skillId,
+                proj1_skills[3].skillId,
+                proj1_skills[4].skillId,
+                proj1_skills[5].skillId,
+                proj1_skills[6].skillId,
+                proj1_skills[7].skillId,
+                proj1_skills[8].skillId,
+                proj1_skills[9].skillId,
+        ]
+        summaries.prevSkillId == [
+                null,
+                proj1_skills[0].skillId,
+                proj1_skills[1].skillId,
+                proj1_skills[2].skillId,
+                proj1_skills[3].skillId,
+                proj1_skills[4].skillId,
+                proj1_skills[5].skillId,
+                proj1_skills[6].skillId,
+                proj1_skills[7].skillId,
+                proj1_skills[8].skillId,
+        ]
+        summaries.nextSkillId == [
+                proj1_skills[1].skillId,
+                proj1_skills[2].skillId,
+                proj1_skills[3].skillId,
+                proj1_skills[4].skillId,
+                proj1_skills[5].skillId,
+                proj1_skills[6].skillId,
+                proj1_skills[7].skillId,
+                proj1_skills[8].skillId,
+                proj1_skills[9].skillId,
+                null
+        ]
+        summaries.orderInGroup == [
+                1,
+                2,
+                3,
+                4,
+                5,
+                6,
+                7,
+                8,
+                9,
+                10
+        ]
+    }
+
+    def "skills with multiple groups (adjacent) - loading prev/last skillIds"() {
+        def proj1 = SkillsFactory.createProject(2)
+        def proj1_subj = SkillsFactory.createSubject(2, 1)
+        List<Map> proj1_skills = SkillsFactory.createSkills(10, 2, 1)
+        def p1subj1g1 = SkillsFactory.createSkillsGroup(2, 1, 22)
+        def p1subj1g2 = SkillsFactory.createSkillsGroup(2, 1, 25)
+
+        skillsService.createProject(proj1)
+        skillsService.createSubject(proj1_subj)
+        skillsService.createSkills(proj1_skills[0..2])
+        skillsService.createSkill(p1subj1g1)
+        skillsService.createSkill(p1subj1g2)
+        proj1_skills[3..4].each {
+            skillsService.assignSkillToSkillsGroup(p1subj1g1.skillId, it)
+        }
+
+        proj1_skills[5..7].each {
+            skillsService.assignSkillToSkillsGroup(p1subj1g2.skillId, it)
+        }
+        skillsService.createSkills(proj1_skills[8..9])
+
+        when:
+        def summaries = proj1_skills.collect {
+            skillsService.getSkill(it)
+        }
+
+        then:
+        summaries.skillId == [
+                proj1_skills[0].skillId,
+                proj1_skills[1].skillId,
+                proj1_skills[2].skillId,
+                proj1_skills[3].skillId,
+                proj1_skills[4].skillId,
+                proj1_skills[5].skillId,
+                proj1_skills[6].skillId,
+                proj1_skills[7].skillId,
+                proj1_skills[8].skillId,
+                proj1_skills[9].skillId,
+        ]
+        summaries.prevSkillId == [
+                null,
+                proj1_skills[0].skillId,
+                proj1_skills[1].skillId,
+                proj1_skills[2].skillId,
+                proj1_skills[3].skillId,
+                proj1_skills[4].skillId,
+                proj1_skills[5].skillId,
+                proj1_skills[6].skillId,
+                proj1_skills[7].skillId,
+                proj1_skills[8].skillId,
+        ]
+        summaries.nextSkillId == [
+                proj1_skills[1].skillId,
+                proj1_skills[2].skillId,
+                proj1_skills[3].skillId,
+                proj1_skills[4].skillId,
+                proj1_skills[5].skillId,
+                proj1_skills[6].skillId,
+                proj1_skills[7].skillId,
+                proj1_skills[8].skillId,
+                proj1_skills[9].skillId,
+                null
+        ]
+        summaries.orderInGroup == [
+                1,
+                2,
+                3,
+                4,
+                5,
+                6,
+                7,
+                8,
+                9,
+                10
+        ]
+    }
+
+    def "skills with multiple groups (not adjacent) - loading prev/last skillIds"() {
+        def proj1 = SkillsFactory.createProject(2)
+        def proj1_subj = SkillsFactory.createSubject(2, 1)
+        List<Map> proj1_skills = SkillsFactory.createSkills(10, 2, 1)
+        def p1subj1g1 = SkillsFactory.createSkillsGroup(2, 1, 22)
+        def p1subj1g2 = SkillsFactory.createSkillsGroup(2, 1, 25)
+
+        skillsService.createProject(proj1)
+        skillsService.createSubject(proj1_subj)
+        skillsService.createSkills(proj1_skills[0..2])
+        skillsService.createSkill(p1subj1g1)
+        skillsService.createSkill(proj1_skills[5])
+        skillsService.createSkill(p1subj1g2)
+        skillsService.createSkill(proj1_skills[9])
+        proj1_skills[3..4].each {
+            skillsService.assignSkillToSkillsGroup(p1subj1g1.skillId, it)
+        }
+        proj1_skills[6..8].each {
+            skillsService.assignSkillToSkillsGroup(p1subj1g2.skillId, it)
+        }
+
+        when:
+        def summaries = proj1_skills.collect {
+            skillsService.getSkill(it)
+        }
+
+        then:
+        summaries.skillId == [
+                proj1_skills[0].skillId,
+                proj1_skills[1].skillId,
+                proj1_skills[2].skillId,
+                proj1_skills[3].skillId,
+                proj1_skills[4].skillId,
+                proj1_skills[5].skillId,
+                proj1_skills[6].skillId,
+                proj1_skills[7].skillId,
+                proj1_skills[8].skillId,
+                proj1_skills[9].skillId,
+        ]
+        summaries.prevSkillId == [
+                null,
+                proj1_skills[0].skillId,
+                proj1_skills[1].skillId,
+                proj1_skills[2].skillId,
+                proj1_skills[3].skillId,
+                proj1_skills[4].skillId,
+                proj1_skills[5].skillId,
+                proj1_skills[6].skillId,
+                proj1_skills[7].skillId,
+                proj1_skills[8].skillId,
+        ]
+        summaries.nextSkillId == [
+                proj1_skills[1].skillId,
+                proj1_skills[2].skillId,
+                proj1_skills[3].skillId,
+                proj1_skills[4].skillId,
+                proj1_skills[5].skillId,
+                proj1_skills[6].skillId,
+                proj1_skills[7].skillId,
+                proj1_skills[8].skillId,
+                proj1_skills[9].skillId,
+                null
+        ]
+        summaries.orderInGroup == [
+                1,
+                2,
+                3,
+                4,
+                5,
+                6,
+                7,
+                8,
+                9,
+                10
+        ]
+    }
+
+    def "skills are all in groups - loading prev/last skillIds"() {
+        def proj1 = SkillsFactory.createProject(2)
+        def proj1_subj = SkillsFactory.createSubject(2, 1)
+        List<Map> proj1_skills = SkillsFactory.createSkills(10, 2, 1)
+        def p1subj1g1 = SkillsFactory.createSkillsGroup(2, 1, 22)
+        def p1subj1g2 = SkillsFactory.createSkillsGroup(2, 1, 25)
+
+        skillsService.createProject(proj1)
+        skillsService.createSubject(proj1_subj)
+        skillsService.createSkill(p1subj1g1)
+        skillsService.createSkill(p1subj1g2)
+        proj1_skills[0..4].each {
+            skillsService.assignSkillToSkillsGroup(p1subj1g1.skillId, it)
+        }
+        proj1_skills[5..9].each {
+            skillsService.assignSkillToSkillsGroup(p1subj1g2.skillId, it)
+        }
+
+        when:
+        def summaries = proj1_skills.collect {
+            skillsService.getSkill(it)
+        }
+
+        then:
+        summaries.skillId == [
+                proj1_skills[0].skillId,
+                proj1_skills[1].skillId,
+                proj1_skills[2].skillId,
+                proj1_skills[3].skillId,
+                proj1_skills[4].skillId,
+                proj1_skills[5].skillId,
+                proj1_skills[6].skillId,
+                proj1_skills[7].skillId,
+                proj1_skills[8].skillId,
+                proj1_skills[9].skillId,
+        ]
+        summaries.prevSkillId == [
+                null,
+                proj1_skills[0].skillId,
+                proj1_skills[1].skillId,
+                proj1_skills[2].skillId,
+                proj1_skills[3].skillId,
+                proj1_skills[4].skillId,
+                proj1_skills[5].skillId,
+                proj1_skills[6].skillId,
+                proj1_skills[7].skillId,
+                proj1_skills[8].skillId,
+        ]
+        summaries.nextSkillId == [
+                proj1_skills[1].skillId,
+                proj1_skills[2].skillId,
+                proj1_skills[3].skillId,
+                proj1_skills[4].skillId,
+                proj1_skills[5].skillId,
+                proj1_skills[6].skillId,
+                proj1_skills[7].skillId,
+                proj1_skills[8].skillId,
+                proj1_skills[9].skillId,
+                null
+        ]
+        summaries.orderInGroup == [
+                1,
+                2,
+                3,
+                4,
+                5,
+                6,
+                7,
+                8,
+                9,
+                10
+        ]
+    }
+
+    def "skills organized correctly after display orders changed - loading prev/last skillIds"() {
+        def proj1 = SkillsFactory.createProject(2)
+        def proj1_subj = SkillsFactory.createSubject(2, 1)
+        List<Map> proj1_skills = SkillsFactory.createSkills(10, 2, 1)
+        def p1subj1g1 = SkillsFactory.createSkillsGroup(2, 1, 22)
+        def p1subj1g2 = SkillsFactory.createSkillsGroup(2, 1, 25)
+
+        skillsService.createProject(proj1)
+        skillsService.createSubject(proj1_subj)
+        skillsService.createSkills(proj1_skills[0..2])
+        skillsService.createSkill(p1subj1g1)
+        skillsService.createSkill(proj1_skills[5])
+        skillsService.createSkill(p1subj1g2)
+        skillsService.createSkill(proj1_skills[9])
+        proj1_skills[3..4].each {
+            skillsService.assignSkillToSkillsGroup(p1subj1g1.skillId, it)
+        }
+        proj1_skills[6..8].each {
+            skillsService.assignSkillToSkillsGroup(p1subj1g2.skillId, it)
+        }
+
+        skillsService.moveSkillDown(proj1_skills[0])
+        skillsService.moveSkillDown(proj1_skills[0])
+        skillsService.moveSkillDown(proj1_skills[0])
+        skillsService.moveSkillUp(proj1_skills[8])
+        skillsService.moveSkillUp(proj1_skills[8])
+
+        when:
+        def summaries = proj1_skills.collect {
+            skillsService.getSkill(it)
+        }
+
+        then:
+        summaries.skillId == [
+                proj1_skills[0].skillId,
+                proj1_skills[1].skillId,
+                proj1_skills[2].skillId,
+                proj1_skills[3].skillId,
+                proj1_skills[4].skillId,
+                proj1_skills[5].skillId,
+                proj1_skills[6].skillId,
+                proj1_skills[7].skillId,
+                proj1_skills[8].skillId,
+                proj1_skills[9].skillId,
+        ]
+        summaries.prevSkillId == [
+                proj1_skills[4].skillId,
+                null,
+                proj1_skills[1].skillId,
+                proj1_skills[2].skillId,
+                proj1_skills[3].skillId,
+                proj1_skills[0].skillId,
+                proj1_skills[8].skillId,
+                proj1_skills[6].skillId,
+                proj1_skills[5].skillId,
+                proj1_skills[7].skillId,
+        ]
+        summaries.nextSkillId == [
+                proj1_skills[5].skillId,
+                proj1_skills[2].skillId,
+                proj1_skills[3].skillId,
+                proj1_skills[4].skillId,
+                proj1_skills[0].skillId,
+                proj1_skills[8].skillId,
+                proj1_skills[7].skillId,
+                proj1_skills[9].skillId,
+                proj1_skills[6].skillId,
+                null
+        ]
+        summaries.orderInGroup == [
+                5,
+                1,
+                2,
+                3,
+                4,
+                6,
+                8,
+                9,
+                7,
+                10
+        ]
+    }
 }