diff --git a/src/components/SavingGoalComponents/SavingGoal.vue b/src/components/SavingGoalComponents/SavingGoal.vue
index 87055bfd4ddaa57c1cc0559488a5c6922221da08..89cae3a4258a8c705e15c4146f8c2e479530d7d5 100644
--- a/src/components/SavingGoalComponents/SavingGoal.vue
+++ b/src/components/SavingGoalComponents/SavingGoal.vue
@@ -20,7 +20,7 @@ export default {
       if (timelineElement instanceof HTMLElement) {
         // Calculate the max-height based on the height of the timeline
         const timelineHeight = timelineElement.offsetHeight;
-        this.bluePanelMaxHeight = `${timelineHeight*1.25}px`;
+        this.bluePanelMaxHeight = `${timelineHeight*1.55}px`;
       } else {
         this.bluePanelMaxHeight = '700px';
       }
@@ -41,7 +41,7 @@ export default {
       <div class="col-lg-4 blue-background overflow-auto" :style="{ 'max-height': bluePanelMaxHeight }">
         <h3 style="color: white; margin-bottom: 16px">Your saving goals</h3>
         <div>
-          <button class="btn btn-light" style="font-weight: 600; margin-bottom: 20px" @click="createGoal">Create new saving goal</button>
+          <button class="btn btn-success btn-lg" style="font-weight: 600; margin-bottom: 20px" @click="createGoal">Create new saving goal</button>
         </div>
         <saving-goal-list @goToSavingGoal="goToSavingGoal"></saving-goal-list>
       </div>
diff --git a/src/components/SavingGoalComponents/SavingGoalCreate.vue b/src/components/SavingGoalComponents/SavingGoalCreate.vue
index b23db87fafb28b31bf230da08b90f3bb56da23e6..280af93df3667458a4d0e26e20a9baee66553ca8 100644
--- a/src/components/SavingGoalComponents/SavingGoalCreate.vue
+++ b/src/components/SavingGoalComponents/SavingGoalCreate.vue
@@ -19,10 +19,9 @@
     </div>
 
     <!--Change this to date picker?-->
-    <p>How long should this saving goal last: </p>
+    <p>When should this saving goal end?:</p>
     <div class="input-group mb-3">
-      <input type="text" class="form-control" aria-label="Amount of days" placeholder="Amount of days (as number)">
-      <span class="input-group-text">Days</span>
+      <input type="date" class="form-control" aria-label="Amount of days" placeholder="Amount of days (as number)">
     </div>
 
     <p>How much do you want to save during this saving goal: </p>
diff --git a/src/components/SavingGoalComponents/SavingGoalList.vue b/src/components/SavingGoalComponents/SavingGoalList.vue
index 7ecf2ae93c323b7b8aa5bf3ec4bccc4e7ec02dc1..e792585dbd3ade07037dd7601843b58b121f5b24 100644
--- a/src/components/SavingGoalComponents/SavingGoalList.vue
+++ b/src/components/SavingGoalComponents/SavingGoalList.vue
@@ -2,7 +2,7 @@
 import {ref} from "vue";
 
 const savingGoalList = ref([
-  { title: 'Spain trip', MoneyTarget: '200kr', description: 'You wanted to save 200kr on a spain trip' },
+  { title: 'Spain trip', MoneyTarget: '200kr', description: 'You wanted to save 200kr for a spain trip' },
   { title: 'Italy Escapade', MoneyTarget: '200kr', description: 'Experience the magic of Italy with us! Our goal is to save 200kr for an amazing trip to Italy.' },
   { title: 'French Getaway', MoneyTarget: '200kr', description: 'Join us as we plan to save 200kr for a delightful trip to France!' },
   { title: 'Exploring Greece', MoneyTarget: '200kr', description: 'Dreaming of Greece? Lets work together to save 200kr for that unforgettable trip!' },
@@ -17,6 +17,10 @@ const emits = defineEmits(['goToSavingGoal']);
 const goToSavingGoal = () => {
   emits('goToSavingGoal');
 };
+
+const deleteSavingGoal = () => {
+
+};
 </script>
 
 <template>
@@ -28,6 +32,7 @@ const goToSavingGoal = () => {
       <h5 class="card-title">{{ savingGoal.title }}</h5>
       <p class="card-text">{{ savingGoal.description }}</p>
       <a href="#" class="btn btn-light" @click="goToSavingGoal">Go to saving goal</a>
+      <a href="#" class="btn btn-danger" @click="deleteSavingGoal" style="margin-left: 8px">Delete</a>
     </div>
   </div>
 </template>
diff --git a/src/components/SavingGoalComponents/SavingGoalRoadmap.vue b/src/components/SavingGoalComponents/SavingGoalRoadmap.vue
index 4532527ffd38a4d8f50542bb90e6e2f4c3c05a6d..93012730c39623beca921ea6b470d6fd3d48521b 100644
--- a/src/components/SavingGoalComponents/SavingGoalRoadmap.vue
+++ b/src/components/SavingGoalComponents/SavingGoalRoadmap.vue
@@ -45,10 +45,12 @@ export default {
     <div class="SavingGoalTitle text-center">{{title}}</div>
     <ul class="timeline">
       <li v-for="(step, index) in steps" :key="index" :class="{ 'timeline-inverted': index % 2 !== 0 }">
-        <div class="timeline-image z-1" @click="togglePanel(step)">
-          <img class="circular-image" :src="step.showPanel ? altImage : image" alt="">
-        </div>
-        <div class="timeline-panel z-3" v-show="step.showPanel">
+        <a :href="'#panel-' + index">
+          <div class="timeline-image z-1" @click="togglePanel(step)">
+            <img class="circular-image" :src="step.showPanel ? altImage : image" alt="">
+          </div>
+        </a>
+        <div class="timeline-panel z-3" :id="'panel-' + index" v-show="step.showPanel">
           <div class="timeline-heading">
             <h4>{{ step.title }}</h4>
             <h4 class="subheading">{{step.description}}</h4>
@@ -88,10 +90,11 @@ export default {
 .SavingGoalTitle {
   font-weight: 600;
   font-size: 45px;
+  margin-top: 20px;
   margin-bottom:40px;
   padding-bottom: 10px;
   color: white;
-  border-radius: 0 0 1em 1em;
+  border-radius: 1em;
   background-color: #0A58CA;
 }