diff --git a/src/components/CardGoal.vue b/src/components/CardGoal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..48fa1ed36ef6ab61b18faa54e46f1611db329f77
--- /dev/null
+++ b/src/components/CardGoal.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import type { Goal } from '@/types/goal'
+import type { PropType } from 'vue'
+import ProgressBar from '@/components/ProgressBar.vue'
+
+defineProps({
+    goalInstance: {
+        type: Object as PropType<Goal>,
+        default: () => ({
+            id: 0,
+            title: 'Goal Title',
+            saved: 500,
+            target: 1000,
+            completion: 50,
+            description: 'Goal Description',
+            priority: 0,
+            createdOn: '2021-01-01',
+            dueDate: '2021-12-31'
+        })
+    }
+})
+</script>
+
+<template>
+    <div class="border-2 border-black rounded-xl p-4 flex flex-col items-center gap-2">
+        <h2 class="m-0">{{ goalInstance.title }}</h2>
+        <p>{{ goalInstance.saved }}kr / {{ goalInstance.target }}kr</p>
+        <ProgressBar :completion="goalInstance.completion" />
+        <p>{{ goalInstance.dueDate }}</p>
+    </div>
+</template>
+
+<style scoped></style>
diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d68302aa387b519f739feb6f55bdffe1870deabe
--- /dev/null
+++ b/src/components/ProgressBar.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+defineProps({
+    completion: Number
+})
+</script>
+
+<template>
+    <div class="w-full bg-gray-200 rounded-full">
+        <div :style="{ width: completion + '%' }" class="bg-green-500 h-2 rounded-full"></div>
+    </div>
+</template>
+
+<style scoped></style>
diff --git a/src/types/goal.ts b/src/types/goal.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42c81a8b687fe3af7d088f8d76871ae61358afd3
--- /dev/null
+++ b/src/types/goal.ts
@@ -0,0 +1,11 @@
+export interface Goal {
+    id: number
+    title: string
+    saved: number
+    target: number
+    completion: number
+    description: string
+    priority: number
+    createdOn: string
+    dueDate: string | null
+}
diff --git a/src/views/GoalView.vue b/src/views/GoalView.vue
index 8539abf5c1c859e60bd8e9fe1c8abcc77426b875..513508e3db13fa728e2adea0086ddfb132570694 100644
--- a/src/views/GoalView.vue
+++ b/src/views/GoalView.vue
@@ -1,7 +1,14 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import CardGoal from '@/components/CardGoal.vue'
+</script>
 
 <template>
-    <h1>Sparemål</h1>
+    <h1 class="font-bold text-center">Dine sparemål</h1>
+    <div class="flex flex-row justify-center gap-2">
+        <CardGoal />
+        <CardGoal />
+        <CardGoal />
+    </div>
 </template>
 
 <style scoped></style>