diff --git a/src/App.vue b/src/App.vue
index 12ad03a6b286a47ed6a392e7338562c82b213f64..dc693f471ad9c9828c6519d81cea07c8bd5ce5ee 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
-import ErrorBoundaryCatcher from '@/components/Exceptions/ErrorBoundaryCatcher.vue';
+// import ErrorBoundaryCatcher from '@/components/Exceptions/ErrorBoundaryCatcher.vue';
 </script>
 
 <template>
diff --git a/src/api/services/AuthenticationService.ts b/src/api/services/AuthenticationService.ts
index eae8fd5c8b2f6ef8d5cfaf6ed6976edcf0a386d4..48c819ab0a448c84d87fce77baf7d9b54b49dc51 100644
--- a/src/api/services/AuthenticationService.ts
+++ b/src/api/services/AuthenticationService.ts
@@ -9,6 +9,28 @@ import type { CancelablePromise } from '../core/CancelablePromise';
 import { OpenAPI } from '../core/OpenAPI';
 import { request as __request } from '../core/request';
 export class AuthenticationService {
+    /**
+     * Validate email
+     * Check that the given email is valid
+     * @returns any Email is valid
+     * @throws ApiError
+     */
+    public static validateEmail({
+        email,
+    }: {
+        email: string,
+    }): CancelablePromise<Record<string, any>> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/api/auth/valid-email/{email}',
+            path: {
+                'email': email,
+            },
+            errors: {
+                409: `Email already exists`,
+            },
+        });
+    }
     /**
      * User Signup
      * Sign up a new user
diff --git a/src/components/Configuration/ChallangeCheckBox.vue b/src/components/Configuration/ChallangeCheckBox.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f607eaf3e35b40aaf68003805b53a24a8ff2f711
--- /dev/null
+++ b/src/components/Configuration/ChallangeCheckBox.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  text: {
+    type: String,
+    default: ''
+  }
+})
+
+</script>
+
+<template>
+  <span>
+    <input type="checkbox" class="btn-check" :id="props.id" autocomplete="off">
+    <label class="btn btn-outline-primary align-items-center justify-content-center" :for="props.id">{{ props.text }}</label>
+  </span>
+</template>
+
+<style scoped>
+label {
+  margin: 5px
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Configuration/Configuration.vue b/src/components/Configuration/Configuration.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3b5cd1a77d9568df7fbd46dab645aa0fd6c755ce
--- /dev/null
+++ b/src/components/Configuration/Configuration.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import ProgressBar from '@/components/Configuration/ProgressBar.vue'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
+
+
+const router = useRouter()
+
+// The configuration steps with path and order value.
+const configurationSteps = {'/bank-id': 1, '/commitment': 2, '/experience': 3, '/suitable-challenges': 4, '/first-saving-goal': 5}
+const length = Object.keys(configurationSteps).length
+let percentage = ref(1/length);
+
+// Pushes to '/bank-id' RouterView and sets current path to this path.
+router.push(Object.keys(configurationSteps)[0])
+let currentRoute = useRoute()
+let currentPath = currentRoute.fullPath
+
+const onNewRouteEvent = (path) => {
+  currentPath = path
+  percentage.value = (1/length) * configurationSteps[path]
+}
+
+</script>
+
+<template>
+  <div class="container">
+    <div class="progress-bar-container">
+      <ProgressBar id="progressbar" :percentage="percentage"/>
+    </div>
+    <div class="configuration-container">
+      <RouterView @changeRouterEvent="onNewRouteEvent"/>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  display: grid;
+  grid-template-rows: 0.5fr 2.3fr 0.2fr;
+}
+
+#progressbar {
+  padding-top: 2rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Configuration/ConfigurationSteps/BankId.vue b/src/components/Configuration/ConfigurationSteps/BankId.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5fe760dffe3568ec89453e0197c1eb974ea9c20e
--- /dev/null
+++ b/src/components/Configuration/ConfigurationSteps/BankId.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import Button1 from '@/components/Buttons/Button1.vue'
+import { useRouter } from 'vue-router'
+import { ref } from 'vue'
+
+const formRef = ref()
+const router = useRouter();
+const emit = defineEmits(['changeRouterEvent']);
+emit('changeRouterEvent', '/bank-id');
+
+const onClick = () => {
+  const radios = formRef.value.querySelectorAll('input[type="radio"]');
+  const checkedRadios = Array.from(radios).filter(radio => radio.checked);
+
+  if (checkedRadios.length === 0) {
+    alert('Please select an option.');
+    return;
+  }
+
+  router.push('/commitment')
+}
+
+</script>
+
+<template>
+  <div class="container">
+    <div>
+      <h3 class="d-flex align-items-center justify-content-center">
+        In order to provide best advice we need to connect to your bank account
+      </h3>
+    </div>
+
+    <form class="btn-group-vertical" ref="formRef" @submit.prevent="onClick">
+
+      <input type="radio" class="btn-check" name="bank-id" id="btn-check-outlined" autocomplete="off">
+      <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check-outlined">BankID på mobil</label>
+
+      <input type="radio" class="btn-check" name="bank-id" id="btn-check2-outlined" autocomplete="off">
+      <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check2-outlined">MinID</label>
+
+      <input type="radio" class="btn-check" name="bank-id" id="btn-check3-outlined" autocomplete="off">
+      <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check3-outlined">Vipps</label>
+
+    </form>
+
+    <div class="confirm-button-container">
+      <button1 id="confirmButton"
+               @click="onClick"
+               button-text="Continue">
+      </button1>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+#confirmButton {
+  margin-bottom: 2rem;
+  width: 300px;
+}
+
+.confirm-button-container {
+  display: flex;
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Configuration/ConfigurationSteps/Commitment.vue b/src/components/Configuration/ConfigurationSteps/Commitment.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7fb352e4572209dd041e7d862f00a6cbf5077a2c
--- /dev/null
+++ b/src/components/Configuration/ConfigurationSteps/Commitment.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+
+import Button1 from '@/components/Buttons/Button1.vue'
+import { useRouter } from 'vue-router'
+import { ref } from 'vue'
+
+const router = useRouter();
+const formRef = ref()
+const onClick = () => {
+  const radios = formRef.value.querySelectorAll('input[type="radio"]');
+  const checkedRadios = Array.from(radios).filter(radio => radio.checked);
+
+  if (checkedRadios.length === 0) {
+    alert('Please select an option.');
+    return;
+  }
+  router.push('/experience')
+}
+
+const emit = defineEmits(['changeRouterEvent'])
+emit('changeRouterEvent', '/commitment')
+
+</script>
+
+<template>
+  <div class="container">
+    <div>
+      <h3 class="d-flex align-items-center justify-content-center">
+        In which degree are you willing to make changes?
+      </h3>
+    </div>
+
+    <form class="btn-group-vertical" ref="formRef" @submit.prevent="onClick">
+
+      <input type="radio" class="btn-check" name="commitment" id="btn-check-outlined" autocomplete="off">
+      <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check-outlined">Low</label>
+
+      <input type="radio" class="btn-check" name="commitment" id="btn-check2-outlined" autocomplete="off">
+      <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check2-outlined">Medium</label>
+
+      <input type="radio" class="btn-check" name="commitment" id="btn-check3-outlined" autocomplete="off">
+      <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check3-outlined">High</label>
+
+    </form>
+
+    <div class="confirm-button-container">
+      <button1 id="confirmButton" @click="onClick" button-text="Continue"></button1>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#confirmButton {
+  margin-bottom: 2rem;
+  width: 300px;
+}
+
+.confirm-button-container {
+  display: flex;
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Configuration/ConfigurationSteps/Experience.vue b/src/components/Configuration/ConfigurationSteps/Experience.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fe699a992c0201cda6d4e5c7cde06e4c0da1db20
--- /dev/null
+++ b/src/components/Configuration/ConfigurationSteps/Experience.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+
+import Button1 from '@/components/Buttons/Button1.vue'
+
+import { useRouter } from 'vue-router'
+import { ref } from 'vue'
+
+const router = useRouter();
+const formRef = ref()
+const onClick = () => {
+  const radios = formRef.value.querySelectorAll('input[type="radio"]');
+  const checkedRadios = Array.from(radios).filter(radio => radio.checked);
+
+  if (checkedRadios.length === 0) {
+    alert('Please select an option.');
+    return;
+  }
+
+  router.push('/suitable-challenges')
+}
+
+const emit = defineEmits(['changeRouterEvent'])
+emit('changeRouterEvent', '/experience')
+
+</script>
+
+<template>
+  <div class="container">
+    <div>
+      <h3 class="d-flex align-items-center justify-content-center">
+        How much experice do you have with saving money?
+      </h3>
+    </div>
+
+    <form class="btn-group-vertical" ref="formRef" @submit.prevent="onClick">
+
+      <input type="radio" class="btn-check" name="experience" id="btn-check-outlined" autocomplete="off">
+      <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check-outlined">Beginner</label>
+
+      <input type="radio" class="btn-check" name="experience" id="btn-check2-outlined" autocomplete="off">
+      <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check2-outlined">Some experience</label>
+
+      <input type="radio" class="btn-check" name="experience" id="btn-check3-outlined" autocomplete="off">
+      <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check3-outlined">Expert</label>
+    </form>
+
+    <div class="confirm-button-container">
+      <button1 id="confirmButton" @click="onClick" button-text="Continue"></button1>
+    </div>
+</div>
+</template>
+
+<style scoped>
+#confirmButton {
+  margin-bottom: 2rem;
+  width: 300px;
+}
+
+.confirm-button-container {
+  display: flex;
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Configuration/ConfigurationSteps/FirstSavingGoal.vue b/src/components/Configuration/ConfigurationSteps/FirstSavingGoal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..50e010cb29ea36b8d581d89ab7af59b21c0bb22b
--- /dev/null
+++ b/src/components/Configuration/ConfigurationSteps/FirstSavingGoal.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import BaseInput from '@/components/InputFields/BaseInput.vue'
+import { ref } from 'vue'
+import Button1 from '@/components/Buttons/Button1.vue'
+
+import { useRouter } from 'vue-router'
+
+const router = useRouter();
+
+const emit = defineEmits(['changeRouterEvent'])
+emit('changeRouterEvent', '/first-saving-goal')
+
+const formRef = ref()
+const titleRef = ref()
+const sumRef = ref()
+const dateRef = ref()
+
+const onClick = () => {
+  formRef.value.classList.add("was-validated")
+}
+
+const getTodayDate = () => {
+  const today = new Date();
+  const year = today.getFullYear();
+  let month = today.getMonth() + 1;
+  let day = today.getDate();
+
+  // Ensure month and day are in double digits
+  month = month < 10 ? `0${month}` : month;
+  day = day < 10 ? `0${day}` : day;
+
+  console.log(`${year}-${month}-${day}`)
+
+  return `${year}-${month}-${day}`;
+};
+
+</script>
+
+<template>
+  <div class="container">
+    <div>
+      <h3 class="d-flex align-items-center justify-content-center">
+        Create your first saving goal
+      </h3>
+    </div>
+
+    <form ref="formRef" id="loginForm" @submit.prevent="handleSubmit">
+      <BaseInput :model-value="titleRef"
+                 @input-change-event="handleEmailInputEvent"
+                 id="titleInput"
+                 input-id="title"
+                 label="Title"
+                 placeholder="Enter the title of the saving goal"/>
+      <BaseInput :model-value="sumRef"
+                 @input-change-event="handlePasswordInputEvent"
+                 id="sumToSaveInput"
+                 input-id="sumToSpareInput"
+                 type="number"
+                 label="Sum to save"
+                 min="0"
+                 placeholder="Enter the sum you would like to spare"/>
+      <BaseInput :model-value="dateRef"
+                 @input-change-event="handlePasswordInputEvent"
+                 id="dueDateInput"
+                 input-id="dueDate"
+                 type="date"
+                 :min="getTodayDate()"
+                 label="Due date"/>
+    </form>
+
+    <div class="confirm-button-container">
+      <button1 id="confirmButton" @click="onClick" button-text="Continue"></button1>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#confirmButton {
+  margin-bottom: 2rem;
+  width: 300px;
+}
+
+.confirm-button-container {
+  display: flex;
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue b/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue
new file mode 100644
index 0000000000000000000000000000000000000000..09e7fcd0dc0a2263c7740ad3a2e0e816181f185a
--- /dev/null
+++ b/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+
+import { useRouter } from 'vue-router'
+
+const router = useRouter();
+const onClick = () => {
+  router.push('/first-saving-goal')
+}
+
+import ChallangeCheckBox from '@/components/Configuration/ChallangeCheckBox.vue'
+import Button1 from '@/components/Buttons/Button1.vue'
+
+const emit = defineEmits(['changeRouterEvent'])
+emit('changeRouterEvent', '/suitable-challenges')
+
+const challenges = ['Make packed lunch', 'Stop shopping', 'Drop coffee',
+  'Quit subscription', 'Drop car', 'Short showers', 'Exercise outside', 'Make budget', 'Others'
+]
+
+</script>
+
+<template>
+  <div class="container">
+    <div>
+      <h3 class="d-flex align-items-center justify-content-center">
+        Which challenges are suitable for you?
+      </h3>
+    </div>
+
+    <div class="challenge-container">
+      <ChallangeCheckBox v-for="(item, index) in challenges" :id="index" :text="item"/>
+    </div>
+
+    <div class="confirm-button-container">
+      <button1 id="confirmButton" @click="onClick" button-text="Continue"></button1>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.challenge-container {
+  justify-self: center;
+  max-width: 500px;
+}
+
+#confirmButton {
+  margin-bottom: 2rem;
+  width: 300px;
+}
+
+.confirm-button-container {
+  display: flex;
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Configuration/ProgressBar.vue b/src/components/Configuration/ProgressBar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4b014e3a40da0bf01680831f2a9382738739c5a2
--- /dev/null
+++ b/src/components/Configuration/ProgressBar.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const props = defineProps({
+  percentage: {
+    type: Number,
+    default: 0
+  }
+})
+</script>
+
+<template>
+  <div class="container">
+    <div class="progress">
+      <div id="configuration-progress"
+           class="progress-bar progress-bar-striped bg-info progress-bar-animated"
+           role="progressbar"
+           :aria-valuenow="props.percentage"
+           :style="{ width: Math.round(props.percentage*100) + '%' }"
+           aria-valuemin="0"
+           aria-valuemax="100"/>
+    </div>
+    <label class="row text-info font-bold display-5">{{ Math.round(props.percentage*100) + '%' }} Completed</label>
+  </div>
+</template>
+
+<style scoped>
+.progress {
+  height: 35px;
+  border-radius: 12px;
+}
+
+.row {
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/InputFields/BaseInput.vue b/src/components/InputFields/BaseInput.vue
index 516faeb54655832d42eab147d6e3b38a16f89f1f..28f6f3e8b7be448314cbf1cf5e26a3846f261d71 100644
--- a/src/components/InputFields/BaseInput.vue
+++ b/src/components/InputFields/BaseInput.vue
@@ -25,6 +25,10 @@ const props = defineProps({
   isValid: {
     type: Boolean,
     default: false
+  },
+  min: {
+    type: String,
+    required: false
   }
 });
 
@@ -41,7 +45,9 @@ const onInputEvent = (event: any) => {
            :type="props.type"
            class="form-control"
            :placeholder="props.placeholder"
-           :id="inputId" required />
+           :id="inputId" required
+           :min="min"
+    />
     <div v-if="props.isValid" class="invalid-feedback">Invalid {{ label }}</div>
     <div v-else class="valid-feedback">Valid {{ label }}</div>
   </div>
diff --git a/src/components/Login/LoginForm.vue b/src/components/Login/LoginForm.vue
index 150711c35baec1405f70edda8b6584bf759682e2..b5198d4d2bee4fc6169eb58a845fe469e5ffdd3d 100644
--- a/src/components/Login/LoginForm.vue
+++ b/src/components/Login/LoginForm.vue
@@ -9,7 +9,6 @@ const formRef = ref()
 
 const handleEmailInputEvent = (newValue: any) => {
   emailRef.value = newValue
-  console.log(emailRef.value)
 }
 
 const handlePasswordInputEvent = (newValue: any) => {
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;
 }
 
diff --git a/src/components/SignUp/SignUpForm.vue b/src/components/SignUp/SignUpForm.vue
index 04a8547844c7261753afb61f1d9323c9d773d889..9ef325bd77ddadb23c4691050d9c49c7ece548fe 100644
--- a/src/components/SignUp/SignUpForm.vue
+++ b/src/components/SignUp/SignUpForm.vue
@@ -2,7 +2,9 @@
 import BaseInput from '@/components/InputFields/BaseInput.vue'
 import Button1 from '@/components/Buttons/Button1.vue'
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 
+const router = useRouter();
 const firstNameRef = ref('')
 const surnameRef = ref('')
 const emailRef = ref('')
@@ -34,6 +36,7 @@ const handleConfirmPasswordInputEvent = (newValue: any) => {
 const handleSubmit = () => {
   formRef.value.classList.add("was-validated")
   alert("Expected to be transferred to initial configuration") // Todo remove this line
+  router.push("/configuration")
 }
 
 </script>
diff --git a/src/router/index.ts b/src/router/index.ts
index 9cefc38dae5ff578c87d750d62a137fa88122e5f..d8c0f7c3507eac8e04a04905a94eaf0a559c836e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -81,6 +81,38 @@ const routes = [
     name: 'sign up',
     component: () => import('@/views/Authentication/SignUpView.vue'),
   },
+  {
+    path: '/configuration',
+    name: 'configuration',
+    component: () => import('@/views/ConfigurationView.vue'),
+    children: [
+      {
+        path: '/bank-id',
+        name: 'bankId',
+        component: () => import('@/components/Configuration/ConfigurationSteps/BankId.vue'),
+      },
+      {
+        path: '/commitment',
+        name: 'commitment',
+        component: () => import('@/components/Configuration/ConfigurationSteps/Commitment.vue'),
+      },
+      {
+        path: '/experience',
+        name: 'experience',
+        component: () => import('@/components/Configuration/ConfigurationSteps/Experience.vue'),
+      },
+      {
+        path: '/suitable-challenges',
+        name: 'suitable challenges',
+        component: () => import('@/components/Configuration/ConfigurationSteps/SuitableChallenges.vue'),
+      },
+      {
+        path: '/first-saving-goal',
+        name: 'first saving goal',
+        component: () => import('@/components/Configuration/ConfigurationSteps/FirstSavingGoal.vue'),
+      }
+    ]
+  },
   {
     path: '/:pathMatch(.*)*',
     redirect: { name: 'not-found' },
diff --git a/src/views/BasePageView.vue b/src/views/BasePageView.vue
index e22b16390d5f2bb452a68c6ac77987762b751e00..e46d41355401bd1467b00b2f20a44a6c14859987 100644
--- a/src/views/BasePageView.vue
+++ b/src/views/BasePageView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
+import { RouterView } from 'vue-router'
 import Footer from '@/components/BaseComponents/Footer.vue'
 import Menu from '@/components/BaseComponents/Menu.vue'
 </script>
diff --git a/src/views/ConfigurationView.vue b/src/views/ConfigurationView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6732fee8b3dc4710002df7d991334fdaa15e3ea5
--- /dev/null
+++ b/src/views/ConfigurationView.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Configuration from '@/components/Configuration/Configuration.vue'
+import Menu from '@/components/BaseComponents/Menu.vue'
+import Footer from '@/components/BaseComponents/Footer.vue'
+</script>
+
+<template>
+  <Menu/>
+  <Configuration/>
+  <Footer/>
+</template>
\ No newline at end of file