diff --git a/src/App.vue b/src/App.vue
index 0236374e935b47547e50478033e896fedcb29c87..be78194d361500e3ee20a20eb0d46747b92c4a2a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,7 +18,7 @@ const showNavBar = computed(() => {
 <template>
     <NavBarComponent v-if="showNavBar" />
 
-    <main>
+    <main class="mb-10">
         <RouterView />
     </main>
 </template>
diff --git a/src/components/CardChallenge.vue b/src/components/CardChallenge.vue
index dfbf2de5414580d015471191ad17d1aae657504d..54b178f5838f8e2ed2508fe747ef498f3ab0af3a 100644
--- a/src/components/CardChallenge.vue
+++ b/src/components/CardChallenge.vue
@@ -10,27 +10,37 @@ const props = defineProps({
         default: () => ({
             id: 0,
             title: 'Challenge title',
-            saved: 500,
+            saved: 0,
             target: 1000,
             description: 'challenge Description',
             due: '2021-12-31'
         })
+    },
+    isCompleted: {
+        type: Boolean,
+        default: false
     }
 })
 
 const challengeInstance = props.challengeInstance
 
-const editChallenge = () =>
-    router.push({ name: 'edit-challenge', params: { id: challengeInstance.id } })
+const editChallenge = () => {
+    if (props.isCompleted) {
+        router.push({ name: 'view-challenge', params: { id: challengeInstance.id } })
+    } else {
+        router.push({ name: 'edit-challenge', params: { id: challengeInstance.id } })
+    }
+}
 const displayDate = computed(() => challengeInstance.due?.slice(0, 16).split('T').join(' '))
 </script>
 
 <template>
     <div
-        class="border-2 border-black rounded-xl p-4 flex flex-col items-center gap-2 cursor-pointer"
+        :class="{ 'bg-green-200 cursor-default': props.isCompleted }"
+        class="border-2 border-black rounded-xl p-4 flex flex-col items-center gap-2 cursor-pointer w-52 overflow-hidden"
         @click="editChallenge"
     >
-        <h2 class="m-0">{{ challengeInstance.title }}</h2>
+        <h3 class="my-0 mx-6">{{ challengeInstance.title }}</h3>
         <p>{{ challengeInstance.saved }}kr / {{ challengeInstance.target }}kr</p>
         <ProgressBar :completion="challengeInstance.completion" />
         <p>{{ displayDate }}</p>
diff --git a/src/components/PageControl.vue b/src/components/PageControl.vue
index 91edf78e6385d200e3a62621fb02201e2b337888..87fa6548932b8a70860af226e16c8ba09fd0e551 100644
--- a/src/components/PageControl.vue
+++ b/src/components/PageControl.vue
@@ -17,14 +17,18 @@ defineProps({
 
 <template>
     <div class="flex justify-center gap-4">
-        <button :disabled="currentPage === 1" @click="onPageChange(currentPage - 1)">
+        <button :disabled="currentPage === 0" @click="onPageChange(currentPage - 1)">
             Previous
         </button>
-        <p>{{ currentPage }} / {{ totalPages }}</p>
-        <button :disabled="currentPage === totalPages" @click="onPageChange(currentPage + 1)">
+        <p>{{ currentPage + 1 }} / {{ totalPages }}</p>
+        <button :disabled="currentPage === totalPages - 1" @click="onPageChange(currentPage + 1)">
             Next
         </button>
     </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+button:disabled:hover {
+    background-color: #cbcbcb;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/UserChallengesView.vue b/src/views/UserChallengesView.vue
index ffd2a3aac3a8d5e579653a4a3abf49847d271100..6fbc982c96357e61d60c5b1fcf0490f92cb9d809 100644
--- a/src/views/UserChallengesView.vue
+++ b/src/views/UserChallengesView.vue
@@ -1,56 +1,89 @@
 <script lang="ts" setup>
 import { useRouter } from 'vue-router'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import authInterceptor from '@/services/authInterceptor'
-import draggable from 'vuedraggable'
 import type { Challenge } from '@/types/challenge'
 import CardChallenge from '@/components/CardChallenge.vue'
+import PageControl from '@/components/PageControl.vue'
 
 const router = useRouter()
 
-const currentPage = ref(1)
-const totalPages = ref(1)
+const currentPageActive = ref(0)
+const totalPagesActive = ref(1)
+const currentPageCompleted = ref(0)
+const totalPagesCompleted = ref(1)
 
-const challenges = ref<Challenge[]>([])
+const activeChallenges = ref<Challenge[]>([])
+const completedChallenges = ref<Challenge[]>([])
 
-onMounted(async () => {
-    await authInterceptor('/users/me/challenges')
+const getActiveChallenges = async (newPage: number) => {
+    await authInterceptor(`/users/me/challenges/active?page=${newPage}&size=5`)
         .then((response) => {
-            currentPage.value = response.data.currentPage
-            totalPages.value = response.data.totalPages
-            challenges.value = response.data.content
+            currentPageActive.value = response.data.number
+            totalPagesActive.value = response.data.totalPages
+            activeChallenges.value = response.data.content
         })
         .catch((error) => {
             console.error(error)
         })
-})
+}
+
+const getCompletedChallenges = async (newPage: number) => {
+    await authInterceptor(`/users/me/challenges/completed?page=${newPage}&size=5`)
+        .then((response) => {
+            currentPageCompleted.value = response.data.number
+            totalPagesCompleted.value = response.data.totalPages
+            completedChallenges.value = response.data.content
+        })
+        .catch((error) => {
+            console.error(error)
+        })
+}
 
-watch(challenges, (newChallenges) => {
-    console.log(newChallenges)
+onMounted(async () => {
+    await getActiveChallenges(currentPageActive.value)
+    await getCompletedChallenges(currentPageActive.value)
 })
 </script>
 
 <template>
     <h1 class="font-bold text-center">Dine utfordringer</h1>
     <div class="flex flex-col gap-5 items-center">
-        <draggable
-            v-model="challenges"
-            class="flex flex-col justify-center gap-10 sm:flex-row"
-            item-key="id"
-        >
-            <template #item="{ element, index }">
-                <CardChallenge :key="index" :challenge-instance="element" />
-            </template>
-        </draggable>
         <div class="flex flex-row gap-5">
             <button @click="router.push({ name: 'new-challenge' })">
                 Opprett en ny utfordring
             </button>
-            <button @click="router.push({ name: 'edit-challenge', params: { id: 1 } })">
-                Rediger rekkefølge
-            </button>
         </div>
+
+        <h2 class="font-bold">Aktive utfordringer</h2>
+        <div class="flex flex-row justify-center gap-10 flex-wrap">
+            <CardChallenge
+                v-for="challenge in activeChallenges"
+                :key="challenge.id"
+                :challenge-instance="challenge"
+            />
+        </div>
+        <PageControl
+            :currentPage="currentPageActive"
+            :on-page-change="getActiveChallenges"
+            :totalPages="totalPagesActive"
+        />
+
+        <h2 class="font-bold">Fullførte utfordringer</h2>
+        <div class="flex flex-row justify-center gap-10 flex-wrap">
+            <CardChallenge
+                v-for="challenge in completedChallenges"
+                :key="challenge.id"
+                :challenge-instance="challenge"
+                :is-completed="true"
+            />
+        </div>
+        <PageControl
+            :currentPage="currentPageCompleted"
+            :on-page-change="getCompletedChallenges"
+            :totalPages="totalPagesCompleted"
+        />
     </div>
 </template>
 
-<style scoped></style>
+<style scoped></style>
\ No newline at end of file