diff --git a/src/api/index.ts b/src/api/index.ts
index cfeb244eadd5c15b0d35dcb2b438c22b5e9a2ab6..6eac6e3b97685b4ddc4f788b6f48f939dfa831e5 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -12,8 +12,7 @@ export type { AccountRequestDTO } from './models/AccountRequestDTO';
 export type { AccountResponseDTO } from './models/AccountResponseDTO';
 export type { AuthenticationResponse } from './models/AuthenticationResponse';
 export type { BadgeDTO } from './models/BadgeDTO';
-export type { BankAccountDTO } from './models/BankAccountDTO';
-export type { BankAccountResponseDTO } from './models/BankAccountResponseDTO';
+export type { BalanceDTO } from './models/BalanceDTO';
 export type { BankIDRequest } from './models/BankIDRequest';
 export type { BankProfile } from './models/BankProfile';
 export type { BankProfileDTO } from './models/BankProfileDTO';
diff --git a/src/api/models/BankAccountResponseDTO.ts b/src/api/models/BalanceDTO.ts
similarity index 82%
rename from src/api/models/BankAccountResponseDTO.ts
rename to src/api/models/BalanceDTO.ts
index ed03efb50ae0c92f6556f22171663b4ef04d0d94..9d400734e966952ab4492239c3977e4d7a434edb 100644
--- a/src/api/models/BankAccountResponseDTO.ts
+++ b/src/api/models/BalanceDTO.ts
@@ -2,7 +2,7 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
-export type BankAccountResponseDTO = {
+export type BalanceDTO = {
     bban?: number;
     balance?: number;
 };
diff --git a/src/api/models/BankAccountDTO.ts b/src/api/models/BankAccountDTO.ts
deleted file mode 100644
index b1ac2aac884d14d4e4a3241482e6861a8e91a7ab..0000000000000000000000000000000000000000
--- a/src/api/models/BankAccountDTO.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-export type BankAccountDTO = {
-    bban?: number;
-    bankAccountType?: string;
-};
-
diff --git a/src/api/models/SignUpRequest.ts b/src/api/models/SignUpRequest.ts
index 72720c40f1f0d870e4f713aaa2215dbd3b59f914..ae32d8fef4943a273dac83e3f72e48b759582779 100644
--- a/src/api/models/SignUpRequest.ts
+++ b/src/api/models/SignUpRequest.ts
@@ -8,6 +8,8 @@ export type SignUpRequest = {
     lastName?: string;
     email?: string;
     password?: string;
+    checkingAccountBBAN?: number;
+    savingsAccountBBAN?: number;
     configuration: ConfigurationDTO;
 };
 
diff --git a/src/api/models/UserDTO.ts b/src/api/models/UserDTO.ts
index 5d036f873750a6e1dc8ec600620eb6c54ff937a2..a94d14567640f5d9b30901361f5fd94097ce2f93 100644
--- a/src/api/models/UserDTO.ts
+++ b/src/api/models/UserDTO.ts
@@ -2,7 +2,6 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
-import type { BankAccountResponseDTO } from './BankAccountResponseDTO';
 import type { PointDTO } from './PointDTO';
 import type { StreakDTO } from './StreakDTO';
 export type UserDTO = {
@@ -15,8 +14,8 @@ export type UserDTO = {
     createdAt?: string;
     role?: string;
     subscriptionLevel?: string;
-    checkingAccount?: BankAccountResponseDTO;
-    savingsAccount?: BankAccountResponseDTO;
+    checkingAccountBBAN?: number;
+    savingsAccountBBAN?: number;
     point?: PointDTO;
     streak?: StreakDTO;
 };
diff --git a/src/api/models/UserUpdateDTO.ts b/src/api/models/UserUpdateDTO.ts
index d1d922cf444e61f26af805484b2fe9c0cc6e5426..ea34828c404818efdad9904e2d7c6e29ae847591 100644
--- a/src/api/models/UserUpdateDTO.ts
+++ b/src/api/models/UserUpdateDTO.ts
@@ -9,6 +9,8 @@ export type UserUpdateDTO = {
     email?: string;
     profileImage?: number;
     bannerImage?: number;
+    savingsAccountBBAN?: number;
+    checkingAccountBBAN?: number;
     configuration?: ConfigurationDTO;
 };
 
diff --git a/src/api/services/AccountControllerService.ts b/src/api/services/AccountControllerService.ts
index 181460cbe891524b1508866a63130c5546ab56ee..407586d5513b619bf165f827ec56ee730f42fb85 100644
--- a/src/api/services/AccountControllerService.ts
+++ b/src/api/services/AccountControllerService.ts
@@ -5,6 +5,7 @@
 import type { Account } from '../models/Account';
 import type { AccountRequestDTO } from '../models/AccountRequestDTO';
 import type { AccountResponseDTO } from '../models/AccountResponseDTO';
+import type { BalanceDTO } from '../models/BalanceDTO';
 import type { CancelablePromise } from '../core/CancelablePromise';
 import { OpenAPI } from '../core/OpenAPI';
 import { request as __request } from '../core/request';
@@ -30,6 +31,28 @@ export class AccountControllerService {
             },
         });
     }
+    /**
+     * Create account
+     * Create account with random balance
+     * @returns BalanceDTO Successfully created account
+     * @throws ApiError
+     */
+    public static getAccountsByBban({
+        bban,
+    }: {
+        bban: number,
+    }): CancelablePromise<BalanceDTO> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/bank/v1/account/balance/{bban}',
+            path: {
+                'bban': bban,
+            },
+            errors: {
+                404: `Provided bban could not be found`,
+            },
+        });
+    }
     /**
      * Get user accounts
      * Get accounts associated with a user by providing their social security number
diff --git a/src/api/services/UserService.ts b/src/api/services/UserService.ts
index 51df6e46b965ecbb438f7dcfb68258422e13d22e..937ebd2a011227360c45a788069445e0bad0a35e 100644
--- a/src/api/services/UserService.ts
+++ b/src/api/services/UserService.ts
@@ -2,8 +2,6 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
-import type { Account } from '../models/Account';
-import type { BankAccountDTO } from '../models/BankAccountDTO';
 import type { FeedbackRequestDTO } from '../models/FeedbackRequestDTO';
 import type { FeedbackResponseDTO } from '../models/FeedbackResponseDTO';
 import type { PasswordResetDTO } from '../models/PasswordResetDTO';
@@ -109,24 +107,6 @@ export class UserService {
             mediaType: 'application/json',
         });
     }
-    /**
-     * Update a user's bank account
-     * Changes either a user's checking account or savings account
-     * @returns Account OK
-     * @throws ApiError
-     */
-    public static selectBankAccount({
-        requestBody,
-    }: {
-        requestBody: BankAccountDTO,
-    }): CancelablePromise<Account> {
-        return __request(OpenAPI, {
-            method: 'PATCH',
-            url: '/api/users/update-account',
-            body: requestBody,
-            mediaType: 'application/json',
-        });
-    }
     /**
      * Update a password
      * Update the password of the authenticated user
@@ -220,6 +200,18 @@ export class UserService {
             url: '/api/users/me',
         });
     }
+    /**
+     * Delete the authenticated user
+     * Delete the authenticated user
+     * @returns any Successfully deleted user
+     * @throws ApiError
+     */
+    public static deleteUser(): CancelablePromise<any> {
+        return __request(OpenAPI, {
+            method: 'DELETE',
+            url: '/api/users/me',
+        });
+    }
     /**
      * Send feedback
      * Send feedback from a user.
diff --git a/src/assets/banners/steps.svg b/src/assets/banners/steps.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fc9bf1fcf9aa39b5931f6d56626a8c61799ed4b9
--- /dev/null
+++ b/src/assets/banners/steps.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 2000 200" width="2000" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="2000" height="200" fill="#140021"></rect><path d="M0 87L286 87L286 116L571 116L571 88L857 88L857 118L1143 118L1143 99L1429 99L1429 114L1714 114L1714 96L2000 96L2000 103L2000 201L2000 201L1714 201L1714 201L1429 201L1429 201L1143 201L1143 201L857 201L857 201L571 201L571 201L286 201L286 201L0 201Z" fill="#9900ff"></path><path d="M0 149L286 149L286 136L571 136L571 118L857 118L857 127L1143 127L1143 151L1429 151L1429 148L1714 148L1714 150L2000 150L2000 144L2000 201L2000 201L1714 201L1714 201L1429 201L1429 201L1143 201L1143 201L857 201L857 201L571 201L571 201L286 201L286 201L0 201Z" fill="#7700c6"></path><path d="M0 160L286 160L286 169L571 169L571 160L857 160L857 174L1143 174L1143 164L1429 164L1429 181L1714 181L1714 181L2000 181L2000 174L2000 201L2000 201L1714 201L1714 201L1429 201L1429 201L1143 201L1143 201L857 201L857 201L571 201L571 201L286 201L286 201L0 201Z" fill="#560090"></path></svg>
\ No newline at end of file
diff --git a/src/assets/banners/waves.svg b/src/assets/banners/waves.svg
new file mode 100644
index 0000000000000000000000000000000000000000..596ce1bbe246609ac27347e61cf4edb8e5a9599a
--- /dev/null
+++ b/src/assets/banners/waves.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 2000 200" width="2000" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="2000" height="200" fill="#001220"></rect><path d="M0 43L15.8 43.3C31.7 43.7 63.3 44.3 95 57.8C126.7 71.3 158.3 97.7 190.2 103C222 108.3 254 92.7 285.8 84.3C317.7 76 349.3 75 381 70.5C412.7 66 444.3 58 476 50.8C507.7 43.7 539.3 37.3 571.2 52.2C603 67 635 103 666.8 122C698.7 141 730.3 143 762 134.7C793.7 126.3 825.3 107.7 857 91.5C888.7 75.3 920.3 61.7 952.2 62.8C984 64 1016 80 1047.8 75.7C1079.7 71.3 1111.3 46.7 1143 40.8C1174.7 35 1206.3 48 1238 64.2C1269.7 80.3 1301.3 99.7 1333.2 110.7C1365 121.7 1397 124.3 1428.8 118.5C1460.7 112.7 1492.3 98.3 1524 100.3C1555.7 102.3 1587.3 120.7 1619 129.7C1650.7 138.7 1682.3 138.3 1714.2 128.3C1746 118.3 1778 98.7 1809.8 82.3C1841.7 66 1873.3 53 1905 61.2C1936.7 69.3 1968.3 98.7 1984.2 113.3L2000 128L2000 201L1984.2 201C1968.3 201 1936.7 201 1905 201C1873.3 201 1841.7 201 1809.8 201C1778 201 1746 201 1714.2 201C1682.3 201 1650.7 201 1619 201C1587.3 201 1555.7 201 1524 201C1492.3 201 1460.7 201 1428.8 201C1397 201 1365 201 1333.2 201C1301.3 201 1269.7 201 1238 201C1206.3 201 1174.7 201 1143 201C1111.3 201 1079.7 201 1047.8 201C1016 201 984 201 952.2 201C920.3 201 888.7 201 857 201C825.3 201 793.7 201 762 201C730.3 201 698.7 201 666.8 201C635 201 603 201 571.2 201C539.3 201 507.7 201 476 201C444.3 201 412.7 201 381 201C349.3 201 317.7 201 285.8 201C254 201 222 201 190.2 201C158.3 201 126.7 201 95 201C63.3 201 31.7 201 15.8 201L0 201Z" fill="#fcaf3c"></path><path d="M0 83L15.8 79.7C31.7 76.3 63.3 69.7 95 78.3C126.7 87 158.3 111 190.2 120.3C222 129.7 254 124.3 285.8 116.8C317.7 109.3 349.3 99.7 381 96.7C412.7 93.7 444.3 97.3 476 95C507.7 92.7 539.3 84.3 571.2 91.5C603 98.7 635 121.3 666.8 131C698.7 140.7 730.3 137.3 762 133.8C793.7 130.3 825.3 126.7 857 117.7C888.7 108.7 920.3 94.3 952.2 96.3C984 98.3 1016 116.7 1047.8 125.8C1079.7 135 1111.3 135 1143 124.8C1174.7 114.7 1206.3 94.3 1238 100.5C1269.7 106.7 1301.3 139.3 1333.2 151.8C1365 164.3 1397 156.7 1428.8 154.3C1460.7 152 1492.3 155 1524 155.5C1555.7 156 1587.3 154 1619 150.7C1650.7 147.3 1682.3 142.7 1714.2 132.3C1746 122 1778 106 1809.8 93C1841.7 80 1873.3 70 1905 69C1936.7 68 1968.3 76 1984.2 80L2000 84L2000 201L1984.2 201C1968.3 201 1936.7 201 1905 201C1873.3 201 1841.7 201 1809.8 201C1778 201 1746 201 1714.2 201C1682.3 201 1650.7 201 1619 201C1587.3 201 1555.7 201 1524 201C1492.3 201 1460.7 201 1428.8 201C1397 201 1365 201 1333.2 201C1301.3 201 1269.7 201 1238 201C1206.3 201 1174.7 201 1143 201C1111.3 201 1079.7 201 1047.8 201C1016 201 984 201 952.2 201C920.3 201 888.7 201 857 201C825.3 201 793.7 201 762 201C730.3 201 698.7 201 666.8 201C635 201 603 201 571.2 201C539.3 201 507.7 201 476 201C444.3 201 412.7 201 381 201C349.3 201 317.7 201 285.8 201C254 201 222 201 190.2 201C158.3 201 126.7 201 95 201C63.3 201 31.7 201 15.8 201L0 201Z" fill="#ff9e43"></path><path d="M0 93L15.8 95.7C31.7 98.3 63.3 103.7 95 109.3C126.7 115 158.3 121 190.2 116.8C222 112.7 254 98.3 285.8 100.2C317.7 102 349.3 120 381 120.2C412.7 120.3 444.3 102.7 476 102.5C507.7 102.3 539.3 119.7 571.2 122.3C603 125 635 113 666.8 104C698.7 95 730.3 89 762 101.3C793.7 113.7 825.3 144.3 857 144C888.7 143.7 920.3 112.3 952.2 109.7C984 107 1016 133 1047.8 146.7C1079.7 160.3 1111.3 161.7 1143 151C1174.7 140.3 1206.3 117.7 1238 114.5C1269.7 111.3 1301.3 127.7 1333.2 130C1365 132.3 1397 120.7 1428.8 124C1460.7 127.3 1492.3 145.7 1524 155.5C1555.7 165.3 1587.3 166.7 1619 169.3C1650.7 172 1682.3 176 1714.2 173C1746 170 1778 160 1809.8 154.8C1841.7 149.7 1873.3 149.3 1905 141.2C1936.7 133 1968.3 117 1984.2 109L2000 101L2000 201L1984.2 201C1968.3 201 1936.7 201 1905 201C1873.3 201 1841.7 201 1809.8 201C1778 201 1746 201 1714.2 201C1682.3 201 1650.7 201 1619 201C1587.3 201 1555.7 201 1524 201C1492.3 201 1460.7 201 1428.8 201C1397 201 1365 201 1333.2 201C1301.3 201 1269.7 201 1238 201C1206.3 201 1174.7 201 1143 201C1111.3 201 1079.7 201 1047.8 201C1016 201 984 201 952.2 201C920.3 201 888.7 201 857 201C825.3 201 793.7 201 762 201C730.3 201 698.7 201 666.8 201C635 201 603 201 571.2 201C539.3 201 507.7 201 476 201C444.3 201 412.7 201 381 201C349.3 201 317.7 201 285.8 201C254 201 222 201 190.2 201C158.3 201 126.7 201 95 201C63.3 201 31.7 201 15.8 201L0 201Z" fill="#ff8e4b"></path><path d="M0 114L15.8 119C31.7 124 63.3 134 95 138.3C126.7 142.7 158.3 141.3 190.2 135.8C222 130.3 254 120.7 285.8 120.5C317.7 120.3 349.3 129.7 381 135.7C412.7 141.7 444.3 144.3 476 147C507.7 149.7 539.3 152.3 571.2 153.5C603 154.7 635 154.3 666.8 150.3C698.7 146.3 730.3 138.7 762 141.8C793.7 145 825.3 159 857 161.2C888.7 163.3 920.3 153.7 952.2 144C984 134.3 1016 124.7 1047.8 126.3C1079.7 128 1111.3 141 1143 152.2C1174.7 163.3 1206.3 172.7 1238 175C1269.7 177.3 1301.3 172.7 1333.2 162.5C1365 152.3 1397 136.7 1428.8 129C1460.7 121.3 1492.3 121.7 1524 127.8C1555.7 134 1587.3 146 1619 150C1650.7 154 1682.3 150 1714.2 142.8C1746 135.7 1778 125.3 1809.8 122.8C1841.7 120.3 1873.3 125.7 1905 130.2C1936.7 134.7 1968.3 138.3 1984.2 140.2L2000 142L2000 201L1984.2 201C1968.3 201 1936.7 201 1905 201C1873.3 201 1841.7 201 1809.8 201C1778 201 1746 201 1714.2 201C1682.3 201 1650.7 201 1619 201C1587.3 201 1555.7 201 1524 201C1492.3 201 1460.7 201 1428.8 201C1397 201 1365 201 1333.2 201C1301.3 201 1269.7 201 1238 201C1206.3 201 1174.7 201 1143 201C1111.3 201 1079.7 201 1047.8 201C1016 201 984 201 952.2 201C920.3 201 888.7 201 857 201C825.3 201 793.7 201 762 201C730.3 201 698.7 201 666.8 201C635 201 603 201 571.2 201C539.3 201 507.7 201 476 201C444.3 201 412.7 201 381 201C349.3 201 317.7 201 285.8 201C254 201 222 201 190.2 201C158.3 201 126.7 201 95 201C63.3 201 31.7 201 15.8 201L0 201Z" fill="#ff7e55"></path><path d="M0 166L15.8 171.2C31.7 176.3 63.3 186.7 95 188C126.7 189.3 158.3 181.7 190.2 177.7C222 173.7 254 173.3 285.8 170.5C317.7 167.7 349.3 162.3 381 159.2C412.7 156 444.3 155 476 159.8C507.7 164.7 539.3 175.3 571.2 181C603 186.7 635 187.3 666.8 183.7C698.7 180 730.3 172 762 172.7C793.7 173.3 825.3 182.7 857 188.3C888.7 194 920.3 196 952.2 187.7C984 179.3 1016 160.7 1047.8 158.8C1079.7 157 1111.3 172 1143 179.3C1174.7 186.7 1206.3 186.3 1238 186.2C1269.7 186 1301.3 186 1333.2 182.2C1365 178.3 1397 170.7 1428.8 167C1460.7 163.3 1492.3 163.7 1524 169.5C1555.7 175.3 1587.3 186.7 1619 192.3C1650.7 198 1682.3 198 1714.2 192.7C1746 187.3 1778 176.7 1809.8 169.3C1841.7 162 1873.3 158 1905 153.7C1936.7 149.3 1968.3 144.7 1984.2 142.3L2000 140L2000 201L1984.2 201C1968.3 201 1936.7 201 1905 201C1873.3 201 1841.7 201 1809.8 201C1778 201 1746 201 1714.2 201C1682.3 201 1650.7 201 1619 201C1587.3 201 1555.7 201 1524 201C1492.3 201 1460.7 201 1428.8 201C1397 201 1365 201 1333.2 201C1301.3 201 1269.7 201 1238 201C1206.3 201 1174.7 201 1143 201C1111.3 201 1079.7 201 1047.8 201C1016 201 984 201 952.2 201C920.3 201 888.7 201 857 201C825.3 201 793.7 201 762 201C730.3 201 698.7 201 666.8 201C635 201 603 201 571.2 201C539.3 201 507.7 201 476 201C444.3 201 412.7 201 381 201C349.3 201 317.7 201 285.8 201C254 201 222 201 190.2 201C158.3 201 126.7 201 95 201C63.3 201 31.7 201 15.8 201L0 201Z" fill="#ff6f61"></path></svg>
\ No newline at end of file
diff --git a/src/components/BaseComponents/ConfirmationModal.vue b/src/components/BaseComponents/ConfirmationModal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..438ff362e01d693aa2d6663c2176e167c5281de1
--- /dev/null
+++ b/src/components/BaseComponents/ConfirmationModal.vue
@@ -0,0 +1,38 @@
+<!-- ConfirmationModal.vue -->
+<template>
+    <div class="modal" :id="modalId" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true"
+         data-bs-backdrop="static" data-bs-keyboard="false">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="modalLabel">{{ title }}</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            {{ message }}
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ cancelButtonText }}</button>
+            <button type="button" class="btn btn-primary" @click="confirmAction">{{ confirmButtonText }}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref } from 'vue';
+  
+  const modalId = ref(null);
+  
+  const title = 'Confirm Action';
+  const message = 'Are you sure you want to proceed?';
+  const confirmButtonText = 'Confirm';
+  const cancelButtonText = 'Cancel';
+  
+  // Methods
+  function confirmAction() {
+    emit('confirm');
+  }
+  </script>
+  
\ No newline at end of file
diff --git a/src/components/BaseComponents/NavBar.vue b/src/components/BaseComponents/NavBar.vue
index b8c859933e973622feae7e356a3d8c0fd5bab710..9af55cb30ee505ad64ae4acf3fa3b8b27df5d888 100644
--- a/src/components/BaseComponents/NavBar.vue
+++ b/src/components/BaseComponents/NavBar.vue
@@ -460,6 +460,7 @@ onMounted(() => {
 
 .container-fluid {
     font-size: 1.7rem;
+  margin: 0 140px;
 }
 
 #logo {
diff --git a/src/components/Configuration/ConfigurationSteps/BankAccount.vue b/src/components/Configuration/ConfigurationSteps/BankAccount.vue
index 9f6eadc292696cd014e01ee2a36af5d6d77aded0..ed454804e18f437a9d0f8be2bcc51797088e9bff 100644
--- a/src/components/Configuration/ConfigurationSteps/BankAccount.vue
+++ b/src/components/Configuration/ConfigurationSteps/BankAccount.vue
@@ -4,12 +4,14 @@ import BaseButton from '@/components/BaseComponents/Buttons/BaseButton.vue'
 import { ref } from 'vue'
 import BaseInput from '@/components/BaseComponents/Input/BaseInput.vue'
 import { useConfigurationStore } from '@/stores/ConfigurationStore'
+import { AccountControllerService } from '@/api'
+import handleUnknownError from '@/components/Exceptions/unkownErrorHandler'
 
 const router = useRouter();
 
 // Declaring reactive variables
 const formRef = ref();
-const spendingAccount = ref<string>('');
+const checkingAccount = ref<string>('');
 const savingsAccount = ref<string>('');
 let errorMsg = ref<string>('');
 
@@ -23,7 +25,7 @@ emit('changeRouterEvent', '/bank-account')
  * @param {any} newValue - The new value of the spending account.
  */
 const handleSpendingInputEvent = (newValue: any) => {
-  spendingAccount.value = newValue
+  checkingAccount.value = newValue
 }
 
 /**
@@ -40,13 +42,19 @@ const handleSavingInputEvent = (newValue: any) => {
  * If the form is valid, it updates the spending and savings account values in the configuration store
  * and navigates the user to the "/commitment" route.
  */
-const handleSubmit = () => {
+const handleSubmit = async () => {
   formRef.value.classList.add("was-validated")
   const form = formRef.value;
   if (form.checkValidity()) {
-    useConfigurationStore().setSpendingAccount(Number(spendingAccount.value))
-    useConfigurationStore().setSavingsAccount(Number(savingsAccount.value))
-    router.push("/commitment")
+    try {
+      await AccountControllerService.getAccountsByBban({bban: Number(checkingAccount.value)})
+      await AccountControllerService.getAccountsByBban({bban: Number(savingsAccount.value)})
+      useConfigurationStore().setChekingAccountBBAN(Number(checkingAccount.value))
+      useConfigurationStore().setSavingsAccountBBAN(Number(savingsAccount.value))
+      await router.push("/commitment")
+    } catch (error) {
+      errorMsg.value = handleUnknownError(error)
+    }
   }
 }
 </script>
@@ -58,7 +66,7 @@ const handleSubmit = () => {
     </h3>
     <form ref="formRef">
       <BaseInput data-cy="spending-account-input"
-                 :model-value="spendingAccount"
+                 :model-value="checkingAccount"
                  @input-change-event="handleSpendingInputEvent"
                  id="spending-account-base-input"
                  input-id="spending-account-input"
diff --git a/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue b/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue
index 56343cc89455f2f979818d2fceeff41e0668494c..c852366d7968ba196afc7a7d8cbdf6b94a033bda 100644
--- a/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue
+++ b/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue
@@ -5,7 +5,7 @@ import BaseButton from '@/components/BaseComponents/Buttons/BaseButton.vue'
 import { ref } from 'vue'
 import { useConfigurationStore } from '@/stores/ConfigurationStore'
 import { useUserInfoStore } from '@/stores/UserStore'
-import { AuthenticationService, type BankAccountDTO, OpenAPI, type SignUpRequest, UserService } from '@/api'
+import { AuthenticationService, OpenAPI, type SignUpRequest, UserService } from '@/api'
 import handleUnknownError from '@/components/Exceptions/unkownErrorHandler'
 
 const router = useRouter();
@@ -68,7 +68,9 @@ const signUpUser = async () => {
       commitment: useConfigurationStore().getCommitment,
       experience: useConfigurationStore().getExperience,
       challengeTypes: useConfigurationStore().getChallenges
-    }
+    },
+    checkingAccountBBAN: useConfigurationStore().getCheckingAccountBBAN,
+    savingsAccountBBAN: useConfigurationStore().getSavingsAccountBBAN,
   };
 
   let response = await AuthenticationService.signup({ requestBody: signUpPayLoad });
@@ -83,28 +85,6 @@ const signUpUser = async () => {
   });
 }
 
-
-/**
- * Updates the bank accounts for the user.
- *
- * @throws {Error} Throws an error if selectBankAccount fails.
- */
-const updateBankAccounts = async () => {
-
-  // Request payload for spending account
-  const spendingRequest: BankAccountDTO = {
-    bban: useConfigurationStore().getSpendingAccount,
-    bankAccountType: "CHECKING_ACCOUNT"
-  }
-  // Request payload for saving account
-  const savingRequest: BankAccountDTO = {
-    bban: useConfigurationStore().getSavingsAccount,
-    bankAccountType: "SAVING_ACCOUNT"
-  }
-  await UserService.selectBankAccount({requestBody: spendingRequest})
-  await UserService.selectBankAccount({requestBody: savingRequest})
-}
-
 /**
  * Handles form submission by signing up the user,
  * updating bank accounts, and navigating to the next configuration step.
@@ -119,7 +99,6 @@ const handleSubmit = async () => {
   useConfigurationStore().setChallenges(chosenChallenges.value)
   try {
     await signUpUser();
-    await updateBankAccounts();
 
     useUserInfoStore().resetPassword()
     await router.push("/first-saving-goal")
diff --git a/src/components/Exceptions/unkownErrorHandler.ts b/src/components/Exceptions/unkownErrorHandler.ts
index e15b5b45d824f51ffc23c860ac394b80b598950f..bcb29854fbea2b0d15c4a5cb9dc32f6b367461bf 100644
--- a/src/components/Exceptions/unkownErrorHandler.ts
+++ b/src/components/Exceptions/unkownErrorHandler.ts
@@ -1,6 +1,7 @@
 import { ApiError as BackendApiError } from '@/api';
 import { AxiosError } from 'axios';
 import router from '@/router'
+import { useUserInfoStore } from '@/stores/UserStore'
 
 /**
  * Finds the correct error message for the given error
@@ -14,6 +15,7 @@ const handleUnknownError = (error: any): string => {
   } else if (error instanceof BackendApiError) {
     if (error.body.status == 403) {
       router.push("/login");
+      useUserInfoStore().clearUserInfo();
     } else if (error.body.status == 401) {
       router.push("/roadmap");
     }
diff --git a/src/components/SavingGoal/SavingGoalRoadmap.vue b/src/components/SavingGoal/SavingGoalRoadmap.vue
index c88ba1a6c69f41b0da02c87f59e3cc62ab9e9331..e9b447889bc0ced5921228c9556ab6e20418c864 100644
--- a/src/components/SavingGoal/SavingGoalRoadmap.vue
+++ b/src/components/SavingGoal/SavingGoalRoadmap.vue
@@ -347,8 +347,8 @@ export default {
 
     async transferMoney(amount: number) {
       let response = await UserService.getUser()
-      let spendingAccount = response.checkingAccount?.bban
-      let savingAccount = response.savingsAccount?.bban
+      let spendingAccount = response.checkingAccountBBAN
+      let savingAccount = response.savingsAccountBBAN
 
       const transactionPayload: TransactionDTO = {
         debtorBBAN: spendingAccount,
diff --git a/src/components/Settings/SettingsAccount.vue b/src/components/Settings/SettingsAccount.vue
index 0bbead13e63ea5ac614bceaf16356575f3fe74eb..68f2123af8a3d6ff930ac5efe9a97ba2d79748ed 100644
--- a/src/components/Settings/SettingsAccount.vue
+++ b/src/components/Settings/SettingsAccount.vue
@@ -5,10 +5,12 @@ import { useUserInfoStore } from "@/stores/UserStore";
 import { UserService } from '@/api';
 import type { UserUpdateDTO } from '@/api';
 import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
+import router from '@/router'
 
 const emailRef = ref('')
 const errorMsg = ref('')
 const confirmationMsg = ref('')
+const errorMsg2 = ref('')
 
 /**
  * Handles the email input event by updating the email reference value.
@@ -33,8 +35,7 @@ async function setupForm() {
     confirmationMsg.value = '';
     errorMsg.value = '';
   } catch (err) {
-    handleUnknownError(err);
-    errorMsg.value = 'Error fetching email, try again!'
+    errorMsg.value = handleUnknownError(err);
     confirmationMsg.value = ''
   }
 }
@@ -64,6 +65,18 @@ const handleSubmit = async () => {
     confirmationMsg.value = ''
   }
 }
+
+const handleSubmit2 = async () => {
+  try {
+    console.log("test")
+    UserService.deleteUser();
+    console.log("test")
+    useUserInfoStore().clearUserInfo();
+    await router.push("/login");
+  } catch (err) {
+    errorMsg2.value = handleUnknownError(err);
+  }
+}
 onMounted(() => {
   setupForm()
 })
@@ -71,9 +84,9 @@ onMounted(() => {
 
 <template>
   <div class="tab-pane active" id="account">
-      <h6>KONTO INNSTILLINGER</h6>
+      <h6>KONTO</h6>
       <hr>
-      <form  @submit.prevent="handleSubmit">
+      <form @submit.prevent="handleSubmit">
           <div class="form-group">
               <BaseInput data-cy="email-input" :model-value="emailRef"
                          @input-change-event="handleEmailInputEvent" id="emailInput-change"
@@ -85,12 +98,14 @@ onMounted(() => {
           <br>
           <button data-cy="change-email-btn" type="submit" class="btn btn-primary classyButton">Endre
             Informasjon</button>
-          <hr>
-          <div class="form-group">
-              <label class="d-block text-danger">Slett Bruker</label>
-              <p class="text-muted font-size-sm">Når du først har slettet kontoen din, er det ingen vei tilbake. Vennligst vær sikker.</p>
-          </div>
-          <button class="btn btn-danger" type="button">Slett Bruker</button>
+      </form>
+      <form @submit.prevent="handleSubmit2" style="margin-top: 20px;">
+        <div class="form-group">
+          <label class="d-block text-danger">Slett Bruker</label>
+          <p class="text-muted font-size-sm">Obs: Når du først har slettet kontoen din, er det ingen vei tilbake.</p>
+        </div>
+        <p data-cy="delete-user-msg-error" class="text-danger">{{ errorMsg2 }}</p>
+        <button class="btn btn-danger" type="submit">Slett Bruker</button>
       </form>
   </div>
 </template>
diff --git a/src/components/Settings/SettingsBank.vue b/src/components/Settings/SettingsBank.vue
index c660ba3e6d4416fdfb73601e216a7fdede474b1b..c923b7005efd5b4286edd9a4b26fe11954cb8f30 100644
--- a/src/components/Settings/SettingsBank.vue
+++ b/src/components/Settings/SettingsBank.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="tab-pane active" id="billing">
-        <h6>BANKKONTO INNSTILLINGER</h6>
+        <h6>BANK</h6>
         <hr>
-        <form @submit.prevent="handleSpendingSubmit">
+        <form @submit.prevent="handleSpendingSubmit" novalidate>
             <div class="form-group">
                 <BaseInput data-cy="spending-account-input" :model-value="spendingAccount"
                             @input-change-event="handleSpendingInputEvent" id="firstNameInputChange" input-id="first-name-new"
@@ -10,6 +10,8 @@
                     invalid-message="Vennligst skriv inn din brukskonto" />
             </div>
             <br>
+            <p data-cy="change-email-msg-error" class="text-danger">{{ errorMsg }}</p>
+            <p data-cy="change-email-msg-confirm" class="text-success">{{ confirmationMsg }}</p>
             <button data-cy="update-spending-btn" type="submit" class="btn btn-primary classyButton">Oppdater
               brukskonto</button>
         </form>
@@ -27,7 +29,7 @@
         </form>
         <hr>
         <div class="form-group mb-0">
-            <label class="d-block">Saldo oversikt</label>
+            <label class="d-block">Saldooversikt</label>
             <div class="border border-gray-500 bg-gray-200 p-3 text-center font-size-sm">
               <div class="row">
                 <div class="col-sm-6">
@@ -50,15 +52,17 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import BaseInput from '@/components/BaseComponents/Input/BaseInput.vue';
-import type { BankAccountDTO } from '@/api';
+import type { UserUpdateDTO } from '@/api'
 import { UserService } from '@/api';
 import  handleUnknownError from '@/components/Exceptions/unkownErrorHandler'
 
 
 const spendingAccount = ref()
 const savingsAccount = ref()
-const spendingAccountBalance = ref()
-const savingsAccountBalance = ref()
+const spendingAccountBalance = ref(0 as any)
+const savingsAccountBalance = ref(0 as any)
+const errorMsg = ref('')
+const confirmationMsg = ref('')
 
 /**
  * Handles the event when spending input changes by updating the spending account value.
@@ -75,7 +79,6 @@ const handleSpendingInputEvent = (newValue: any) => {
  * @param {any} newValue - The new value of the saving input.
  */
 const handleSavingInputEvent = (newValue: any) => {
-    console.log(newValue);
   savingsAccount.value = newValue
 }
 
@@ -84,15 +87,16 @@ const handleSavingInputEvent = (newValue: any) => {
  * Handles errors by calling the handleUnknownError function.
  */
 const handleSavingSubmit = async () => {
-
-    const updateSaving: BankAccountDTO = {
-        bban: savingsAccount.value,
-        bankAccountType: "SAVING_ACCOUNT",
-    };
     try {
-        UserService.selectBankAccount({ requestBody: updateSaving })
+      const updateUserPayload: UserUpdateDTO = {
+        savingsAccountBBAN: savingsAccount.value
+      };
+        UserService.update({ requestBody: updateUserPayload })
+      errorMsg.value = ''
+      confirmationMsg.value = 'Kontonummer ble oppdatert'
     } catch (err) {
-      handleUnknownError(err)
+      errorMsg.value = handleUnknownError(err);
+      confirmationMsg.value = ''
     }
 }
 
@@ -101,16 +105,16 @@ const handleSavingSubmit = async () => {
  * Handles errors by calling the handleUnknownError function.
  */
 const handleSpendingSubmit = async () => {
-    console.log(savingsAccount.value)
-
-    const updateSaving: BankAccountDTO = {
-        bban: spendingAccount.value,
-        bankAccountType: "CHECKING_ACCOUNT",
-    };
     try {
-        UserService.selectBankAccount({ requestBody: updateSaving })
+      const updateUserPayload: UserUpdateDTO = {
+        checkingAccountBBAN: spendingAccount.value
+      };
+      UserService.update({ requestBody: updateUserPayload })
+      errorMsg.value = ''
+      confirmationMsg.value = 'Kontonummer ble oppdatert'
     } catch (err) {
-      handleUnknownError(err)
+      errorMsg.value = handleUnknownError(err);
+      confirmationMsg.value = ''
     }
 }
 
@@ -122,9 +126,15 @@ onMounted(getAccountInfo)
  */
 async function getAccountInfo() {
   try {
-    let response = await UserService.getUser()
-    savingsAccountBalance.value = response.savingsAccount?.balance
-    spendingAccountBalance.value = response.checkingAccount?.balance
+    let response = await UserService.getUser();
+    savingsAccount.value = response.savingsAccountBBAN;
+    /*if (response.savingsAccount?.balance) {
+      savingsAccountBalance.value = response.savingsAccount?.balance
+    }*/
+    spendingAccount.value = response.checkingAccountBBAN;
+    /*if (response.checkingAccount?.balance) {
+      spendingAccountBalance.value = response.checkingAccountBBAN?.balance
+    }*/
   } catch (err) {
     handleUnknownError(err)
   }
diff --git a/src/components/Settings/SettingsNotification.vue b/src/components/Settings/SettingsNotification.vue
deleted file mode 100644
index f33417a59c8ff18f82595b1a28ac500805581c9d..0000000000000000000000000000000000000000
--- a/src/components/Settings/SettingsNotification.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-    <div class="tab-pane active" id="notification">
-        <h6>VARSLINGSINNSTILLINGER</h6>
-        <hr>
-        <form>
-            <div class="form-group">
-                <label class="d-block mb-0">Sikkerhetsvarsler</label>
-                <div class="small text-muted mb-3">Motta sikkerhetsvarselvarsler via e-post</div>
-                <div class="custom-control custom-checkbox">
-                    <input type="checkbox" class="custom-control-input" id="customCheck1">
-                    <label class="custom-control-label" for="customCheck1">E-post hver gang en
-                        sårbarhet blir funnet</label>
-                </div>
-                <div class="custom-control custom-checkbox">
-                    <input type="checkbox" class="custom-control-input" id="customCheck2">
-                    <label class="custom-control-label" for="customCheck2">E-post et sammendrag av
-                        sårbarhet</label>
-                </div>
-            </div>
-            <div class="form-group mb-0">
-                <label class="d-block">SMS-varsler</label>
-                <ul class="list-group list-group-sm">
-                    <li class="list-group-item has-icon">
-                        Kommentarer
-                        <div class="custom-control custom-control-nolabel custom-switch ml-auto">
-                            <input type="checkbox" class="custom-control-input" id="customSwitch1">
-                            <label class="custom-control-label" for="customSwitch1"></label>
-                        </div>
-                    </li>
-                    <li class="list-group-item has-icon">
-                        Oppdateringer fra personer
-                        <div class="custom-control custom-control-nolabel custom-switch ml-auto">
-                            <input type="checkbox" class="custom-control-input" id="customSwitch2">
-                            <label class="custom-control-label" for="customSwitch2"></label>
-                        </div>
-                    </li>
-                    <li class="list-group-item has-icon">
-                        PÃ¥minnelser
-                        <div class="custom-control custom-control-nolabel custom-switch ml-auto">
-                            <input type="checkbox" class="custom-control-input" id="customSwitch3">
-                            <label class="custom-control-label" for="customSwitch3"></label>
-                        </div>
-                    </li>
-                    <li class="list-group-item has-icon">
-                        Hendelser
-                        <div class="custom-control custom-control-nolabel custom-switch ml-auto">
-                            <input type="checkbox" class="custom-control-input" id="customSwitch4">
-                            <label class="custom-control-label" for="customSwitch4"></label>
-                        </div>
-                    </li>
-                    <li class="list-group-item has-icon">
-                        Sider du følger
-                        <div class="custom-control custom-control-nolabel custom-switch ml-auto">
-                            <input type="checkbox" class="custom-control-input" id="customSwitch5">
-                            <label class="custom-control-label" for="customSwitch5"></label>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-        </form>
-    </div>
-</template>
diff --git a/src/components/Settings/SettingsProfile.vue b/src/components/Settings/SettingsProfile.vue
index fcdebadb865c7909d9ad52c7e678fd7d90b6e71e..a8575a144348ceb12e0d926f6faf528344424f7c 100644
--- a/src/components/Settings/SettingsProfile.vue
+++ b/src/components/Settings/SettingsProfile.vue
@@ -2,8 +2,9 @@
 import { ref, onMounted } from 'vue';
 import BaseInput from '@/components/BaseComponents/Input/BaseInput.vue';
 import { useUserInfoStore } from "@/stores/UserStore";
-import { UserService, ImageService } from '@/api';
+import { UserService, ImageService, ItemService } from '@/api';
 import type { UserUpdateDTO } from '@/api';
+import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
 
 let apiUrl = import.meta.env.VITE_APP_API_URL;
 
@@ -13,8 +14,11 @@ const emailRef = ref('')
 const passwordRef = ref('')
 const formRef = ref()
 let samePasswords = ref(true)
+let banners = ref([] as any)
 
-const imageRange = ref([10, 11, 12, 13, 14, 15]);
+let hasBanners = ref(false);
+let selectedBannerId = ref(0);
+const selectedBanner = ref()
 
 const iconSrc = ref('../src/assets/userprofile.png');
 const fileInputRef = ref();
@@ -81,10 +85,36 @@ const uploadImage = async (file: any) => {
       profileImage: response,
     })
   } catch (error) {
+    handleUnknownError(error);
     console.error('Failed to upload image:', error);
   }
 };
 
+const getInventory = async () => {
+  try {
+    const response = await ItemService.getInventory();
+    console.log(response)
+    banners.value = response;
+    hasBanners.value = response.length > 0;
+  } catch (error) {
+    handleUnknownError(error);
+    console.error('Failed to get inventory:', error);
+  }
+};
+
+const selectItem = async (bannerId: any) => {
+  try {
+    const bannerImagePayload: UserUpdateDTO = {
+      bannerImage: bannerId,
+    };
+    await UserService.update({ requestBody: bannerImagePayload })
+    setupForm()
+  } catch (error) {
+    handleUnknownError(error)
+    console.error(error)
+  }
+}
+
 /**
  * Sets up the user profile form.
  * Fetches user data and populates the form fields.
@@ -102,7 +132,11 @@ async function setupForm() {
     } else {
       iconSrc.value = "../src/assets/userprofile.png";
     }
+    if (response.bannerImage != null) {
+      selectedBanner.value = response.bannerImage;
+    }
   } catch (err) {
+    handleUnknownError(err);
     console.error(err)
   }
 }
@@ -113,25 +147,24 @@ async function setupForm() {
  * Updates user profile information with the provided first name and surname.
  */
 const handleSubmit = async () => {
-  console.log('Yoooo')
   const updateUserPayload: UserUpdateDTO = {
     firstName: firstNameRef.value,
     lastName: surnameRef.value,
   };
-
   try {
     UserService.update({ requestBody: updateUserPayload })
     useUserInfoStore().setUserInfo({
       firstname: firstNameRef.value,
       lastname: surnameRef.value,
     })
-
   } catch (err) {
+    handleUnknownError(err);
     console.error(err)
   }
 }
 onMounted(() => {
   setupForm()
+  getInventory()
 })
 
 </script>
@@ -144,7 +177,7 @@ onMounted(() => {
     <form @submit.prevent="handleSubmit" novalidate>
       <div class="user-avatar">
         <input type="file" ref="fileInputRef" @change="handleFileChange" accept=".jpg, .jpeg, .png"
-          style="display: none;" />
+          style="display: none" />
         <img :src="iconSrc" alt="Brukeravatar" style="width: 200px; height: 200px;">
         <div class="mt-2">
           <button type="button" class="btn btn-primary classyButton" @click="triggerFileUpload"><img
@@ -154,18 +187,33 @@ onMounted(() => {
       <div class="form-group">
         <BaseInput data-cy="first-name" :model-value="firstNameRef" @input-change-event="handleFirstNameInputEvent"
           id="firstNameInputChange" input-id="first-name-new" type="text" label="Fornavn"
-          placeholder="Skriv inn ditt fornavn" invalid-message="Vennligst skriv inn ditt fornavn" />
+          placeholder="Skriv inn ditt fornavn" invalid-message="Vennligst skriv inn ditt fornavn"
+          style="max-width: 300px" />
       </div>
       <br>
       <div class="form-group">
         <BaseInput data-cy="last-name" :model-value="surnameRef" @input-change-event="handleSurnameInputEvent"
           id="surnameInput-change" input-id="surname-new" type="text" label="Etternavn"
-          placeholder="Skriv inn ditt etternavn" invalid-message="Vennligst skriv inn ditt etternavn" />
+          placeholder="Skriv inn ditt etternavn" invalid-message="Vennligst skriv inn ditt etternavn"
+          style="max-width: 300px" />
       </div>
       <br>
-      <button data-cy="profile-submit-btn" type="submit" class="btn btn-primary classyButton">Oppdater
-        profil</button>
+      <button data-cy="profile-submit-btn" type="submit" class="btn btn-primary classyButton">Oppdater profil</button>
     </form>
+    <hr>
+    <div>
+      <h6>Banners</h6>
+      <div v-if="hasBanners" class="scrolling-wrapper-badges row flex-row flex-wrap mt-2 pb-2 pt-2">
+        <div v-for="banner in banners" :key="banner.id" class="card text-center banner justify-content-center d-flex align-items-center" @click="selectItem(banner.id)"
+          :class="{ 'selected-banner': banner.id === selectedBannerId }" data-bs-toggle="tooltip"
+          data-bs-placement="top" data-bs-custom-class="custom-tooltip" :data-bs-title="banner.criteria">
+          <img :src="apiUrl + `/api/images/${banner.imageId}`" class="card-img-top" :class="{ 'selected-banner': banner.id === selectedBanner }" alt="Banner" style="width: 200px; height: 100px" @click="selectItem(banner.imageId)" />
+        </div>
+      </div>
+      <div v-else>
+        Ingen banners
+      </div>
+    </div>
   </div>
 </template>
 
@@ -187,17 +235,28 @@ onMounted(() => {
 }
 
 .classyButton {
-    background-color: #003A58;
-    border: #003A58;
-  }
+  background-color: #003A58;
+  border: #003A58;
+}
 
-  .classyButton:hover {
-    background-color: #003b58ec;
-    border: #003A58;
-  }
+.classyButton:hover {
+  background-color: #003b58ec;
+  border: #003A58;
+}
 
-  .classyButton:active {
-    background-color: #003b58d6;
-    border: #003A58;
-  }
+.classyButton:active {
+  background-color: #003b58d6;
+  border: #003A58;
+}
+
+.selected-banner {
+  border: 4px solid #27da47;
+  display: flex;
+}
+
+.banner {
+  margin: 10px;
+  cursor: pointer;
+  width: 200px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/Settings/SettingsSecurity.vue b/src/components/Settings/SettingsSecurity.vue
index e0bbe2433dfc8908fc960ee8116c2cea4a65f593..e71ee3db5e0d57084b2a09ef8e6a5a5648085ef8 100644
--- a/src/components/Settings/SettingsSecurity.vue
+++ b/src/components/Settings/SettingsSecurity.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="tab-pane active" id="security">
-        <h6>SIKKERHETSINNSTILLINGER</h6>
+        <h6>SIKKERHET</h6>
         <hr>
-        <form @submit.prevent="handleSubmit" novalidate>
+        <form @submit.prevent="handleSubmit" >
             <div class="form-group">
-                <label class="d-block">Endre passord</label>
+                <h5 class="d-block">Endre passord</h5>
                 <BaseInput data-cy="old-password-input" :model-value="oldPasswordRef"
                             @input-change-event="handleOldPasswordInputEvent"
                     id="passwordInput-change" input-id="password-old" type="password"
@@ -23,10 +23,9 @@
                     pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}" label="Bekreft nytt passord" placeholder="Skriv inn passord"
                     invalid-message="Passordet må være mellom 4 og 16 tegn og inneholde en stor bokstav, en liten bokstav og et tall" />
             </div>
+            <p class="text-danger" data-cy="error">{{ errorMsg }}</p>
             <button data-cy="update-password-btn" type="submit" class="btn btn-primary classyButton">Oppdater
               passord</button>
-            <button data-cy="reset-fields-btn" type="reset" class="btn btn-light">Tilbakestill
-              endringer</button>
         </form>
         <hr>
     </div>
@@ -42,6 +41,8 @@ import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
 const oldPasswordRef = ref('');
 const newPasswordRef = ref('');
 const confirmPasswordRef = ref('');
+let errorMsg = ref('');
+
 
 /**
  * Handles the event when the old password input changes.
@@ -78,23 +79,21 @@ const handleConfirmPasswordInputEvent = (newValue: any) => {
  * Validates if the new password matches the confirm-password.
  */
 const handleSubmit = async () => {
-  if (newPasswordRef.value !== confirmPasswordRef.value) {
-      console.error('Passwords do not match')
-      return
-  }
-
-  const updateUserPayload: PasswordUpdateDTO = {
-      oldPassword: oldPasswordRef.value,
-      newPassword: newPasswordRef.value,
-  };
-
-  try {
-      const response = UserService.updatePassword({ requestBody: updateUserPayload })
-      console.log(response)
-  } catch (err) {
-      handleUnknownError(err);
-      console.error(err)
-  }
+    if (newPasswordRef.value.length === 0 || newPasswordRef.value !== confirmPasswordRef.value) {
+        errorMsg.value = "Passordene er ikke identiske";
+        return
+    }
+    errorMsg.value = '';
+    try {
+      const updateUserPayload: PasswordUpdateDTO = {
+        oldPassword: oldPasswordRef.value,
+        newPassword: newPasswordRef.value,
+      };
+        await UserService.updatePassword({ requestBody: updateUserPayload });
+        errorMsg.value = '';
+    } catch (err: any) {
+        errorMsg.value = err.body.message;
+    }
 }
 </script>
 
@@ -113,4 +112,8 @@ const handleSubmit = async () => {
     background-color: #003b58d6;
     border: #003A58;
   }
+
+  #passwordInput-change {
+    margin-bottom: 15px;
+  }
 </style>
\ No newline at end of file
diff --git a/src/components/Shop/ItemShop.vue b/src/components/Shop/ItemShop.vue
index 6a9c787ee254caf667008977ff1221140a015a03..38173e0b83a8ab29db3e8ef779262c55cf9f2021 100644
--- a/src/components/Shop/ItemShop.vue
+++ b/src/components/Shop/ItemShop.vue
@@ -36,8 +36,8 @@
             <h1>Items</h1>
             <div class="category row mb-2 m-2">
               <div v-for="product in products" :key="product.id" class="card text-center d-flex justify-content-center align-items-center"
-                   style="width: 8rem; border: none">
-                <img :src="apiUrl + `/api/images/${product.imageId}`" style="width: 100px; height: 100px;" class="card-img-top" alt="..." />
+                   style="width: 16rem; border: none">
+                <img :src="apiUrl + `/api/images/${product.imageId}`" style="width: 200px; height: 100px;" class="card-img-top" alt="..." />
                 <div class="card-body">
                   <h5 class="card-title">{{ product.itemName }}</h5>
                   <h6>{{ product.price }}<img src="../../assets/items/pigcoin.png" style="width: 2rem" /></h6>
diff --git a/src/components/UserProfile/MyProfile.vue b/src/components/UserProfile/MyProfile.vue
index 87d73a22ab3a88570c72e0414ab8eba24173bdc4..6e20e5dbe909bd1fe270c5abd29c34a86c37fe5c 100644
--- a/src/components/UserProfile/MyProfile.vue
+++ b/src/components/UserProfile/MyProfile.vue
@@ -44,7 +44,7 @@ async function getGoals() {
   try {
     goals.value = await GoalService.getGoals();
     hasHistory.value = goals.value.length > 0;
-  }catch (error){
+  } catch (error) {
     handleUnknownError(error)
     console.error("Something went wrong", error)
   }
@@ -123,15 +123,15 @@ const getBadges = async () => {
  */
 const selectItem = (item: any) => {
   try {
-  backgroundName.value = item.itemName;
-  let imageId = item.imageId;
-  const bannerImagePayload: UserUpdateDTO = {
+    backgroundName.value = item.itemName;
+    let imageId = item.imageId;
+    const bannerImagePayload: UserUpdateDTO = {
       bannerImage: imageId as any,
     };
-  UserService.update({ requestBody: bannerImagePayload })
-  if (imageId != 0) {
-    bannerImageUrl.value = `${apiUrl}/api/images/${imageId}`;
-  }
+    UserService.update({ requestBody: bannerImagePayload })
+    if (imageId != 0) {
+      bannerImageUrl.value = `${apiUrl}/api/images/${imageId}`;
+    }
   } catch (error) {
     handleUnknownError(error)
     console.error(error)
@@ -168,54 +168,41 @@ const toUpdateUserSettings = () => {
     <div class="row d-flex justify-content-center align-items-center h-100">
       <div class="col 12">
         <div class="card">
-          <div class="rounded-top text-white d-flex flex-row bg-primary justify-content-between" :style="{ height: '200px', backgroundImage: `url(${bannerImageUrl})` }">
+          <div class="rounded-top text-white d-flex flex-row bg-primary justify-content-between" :style="{
+            height: '200px',
+            backgroundImage: `url(${bannerImageUrl})`,
+            backgroundSize: 'cover',
+            backgroundRepeat: 'no-repeat'
+          }">
             <div class=" text-white d-flex flex-row">
               <div class=" d-flex flex-column align-items-center justify-content-center">
-              <img :src="imageUrl" alt="Generisk plassholderbilde" class="img-fluid img-thumbnail"
-                style="width: 150px; height:150px; margin-left: 25px; margin-right: 15px;">
-            </div>
-              <h1 data-cy="firstname" style="display: flex; align-items: end; margin-bottom: 20px;">{{ firstname }} {{ lastname }}</h1>
+                <img :src="imageUrl" alt="Generisk plassholderbilde" class="img-fluid img-thumbnail"
+                  style="width: 150px; height:150px; margin-left: 25px; margin-right: 15px;">
+              </div>
+              <h1 data-cy="firstname" style="display: flex; align-items: end; margin-bottom: 20px;">{{ firstname }} {{
+            lastname }}</h1>
             </div>
-              <div class="d-flex align-items-end text-white my-3 mx-5">
-                <div class="d-flex align-items-center flex-column">
-                  <p class="mb-1 h2 d-flex flex-column align-items-center" data-cy="points">{{ points }} <img src="@/assets/items/pigcoin.png" style="width: 80px; height: 80px"></p>
-                  <p class="small text-white mb-0">Poeng</p>
-                </div>
-                <div class="d-flex align-items-center flex-column px-3">
-                  <p class="mb-1 h2 d-flex flex-column align-items-center" data-cy="streak">{{ streak }} <img src="@/assets/icons/fire.png" style="width: 80px; height: 80px"></p>
-                  <p class="small text-white mb-0">Streak</p>
-                </div>
+            <div class="d-flex align-items-end text-white my-3 mx-5">
+              <div class="d-flex align-items-center flex-column">
+                <p class="mb-1 h2 d-flex flex-column align-items-center" data-cy="points"><img
+                    src="@/assets/items/pigcoin.png" style="width: 80px; height: 80px" data-toggle="tooltip"
+                    title="Points"> {{ points }}</p>
+              </div>
+              <div class="d-flex align-items-center flex-column px-3">
+                <p class="mb-1 h2 d-flex flex-column align-items-center" data-cy="streak"><img
+                    src="@/assets/icons/fire.png" style="width: 80px; height: 80px" data-toggle="tooltip"
+                    title="Points"> {{ streak }}</p>
               </div>
+            </div>
           </div>
           <div class="p-3 text-black" style="background-color: #f8f9fa;">
             <div class="d-flex justify-content-end text-center py-1">
               <div style="width: 100%; display: flex; justify-content: start">
-                <button  data-cy="toUpdate" type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary classyButton"
-                data-mdb-ripple-color="dark" style="z-index: 1; height: 40px; margin-left: 17px" id="toUpdate" @click="toUpdateUserSettings">
-                Rediger profil
-              </button>
-              </div>
-            </div>
-          </div>
-          <hr>
-          <div class="card-body p-1 text-black">
-            <div class="row">
-              <div class="col">
-                <div class="container-fluid">
-                  <h1 class="mt-1 text-start badges-text">Lageret ditt</h1>
-                  <div v-if="hasInventory" class="scrolling-wrapper-badges row flex-row flex-nowrap mt-2 pb-2 pt-2">
-                    <div v-for="product in inventory" :key="product.id" class="card text-center"
-                        style="width: 12rem; border: none; cursor: pointer; margin: 1rem; border: 2px solid black" @click="selectItem(product)">
-                        <img :src="apiUrl + `/api/images/${product.imageId}`" class="card-img-top"
-                            alt="..." />
-                        <div class="card-body">
-                            <h5 class="card-title">{{ product.itemName }}</h5>
-                        </div>
-                    </div>
-                  </div>
-                  <div v-else>Du har ingen ting på lageret ditt, gå til butikken for å kjøpe!</div>
-                  <div v-if="backgroundName" class="text-success">You selected the background: <strong>{{ backgroundName }}!</strong></div>
-                </div>
+                <button data-cy="toUpdate" type="button" data-mdb-button-init data-mdb-ripple-init
+                  class="btn btn-outline-primary classyButton" data-mdb-ripple-color="dark"
+                  style="z-index: 1; height: 40px; margin-left: 17px" id="toUpdate" @click="toUpdateUserSettings">
+                  Rediger profil
+                </button>
               </div>
             </div>
           </div>
@@ -226,18 +213,16 @@ const toUpdateUserSettings = () => {
                 <div class="container-fluid">
                   <h1 class="mt-1 text-start badges-text">Merker</h1>
                   <div v-if="hasBadges" class="scrolling-wrapper-badges row flex-row flex-nowrap mt-2 pb-2 pt-2">
-
-                    <div v-for="badge in badges" :key="badge.id" class="card text-center"
-                        style="width: 12rem; border: none; cursor: pointer; margin: 1rem; 
-                        border: 2px solid black" data-bs-toggle="tooltip" data-bs-placement="top" 
-                        data-bs-custom-class="custom-tooltip" :data-bs-title="badge.criteria">
-                        <img :src="apiUrl + `/api/images/${badge.imageId}`" class="card-img-top"
-                            alt="..." />
-                        <div class="card-body">
-                            <h5 class="card-title">{{ badge.badgeName }}</h5>
-                        </div>
+                    <div v-for="badge in badges" :key="badge.id"
+                      class="card text-center d-flex align-items-center justify-content-center" style="width: 12rem; border: none; cursor: pointer; margin: 1rem; 
+                        border: 2px solid black" data-bs-toggle="tooltip" data-bs-placement="top"
+                      data-bs-custom-class="custom-tooltip" :data-bs-title="badge.criteria">
+                      <img :src="apiUrl + `/api/images/${badge.imageId}`" class="card-img-top mt-2" alt="..."
+                        style="width: 150px; height: 150px;" />
+                      <div class="card-body">
+                        <h5 class="card-title">{{ badge.badgeName }}</h5>
+                      </div>
                     </div>
-
                   </div>
                   <div v-else>
                     Ingen merker
@@ -253,7 +238,7 @@ const toUpdateUserSettings = () => {
                   <h1 class="mt-1 text-start history-text">Historie</h1>
                   <div v-if="hasHistory" class="row scrolling-wrapper-history">
                     <div v-for="(item, index) in goals" :key="index"
-                         class="col-md-4 col-sm-4 col-lg-4 col-xs-4 col-xl-4 control-label">
+                      class="col-md-4 col-sm-4 col-lg-4 col-xs-4 col-xl-4 control-label">
                       <div class="card history-block">
                         <div class="card mb-3" style="max-width: 540px;">
                           <div class="row g-0">
@@ -264,8 +249,9 @@ const toUpdateUserSettings = () => {
                             <div class="col-md-8">
                               <div class="card-body">
                                 <h5 class="card-title">{{ goals[index]['name'] }}</h5>
-                                <p class="card-text">{{goals[index]['description']}}</p>
-                                <p class="card-text"><small class="text-muted">{{goals[index]['targetAmount']}}</small></p>
+                                <p class="card-text">{{ goals[index]['description'] }}</p>
+                                <p class="card-text"><small class="text-muted">{{ goals[index]['targetAmount'] }}</small>
+                                </p>
                                 <a href="#" class="btn  stretched-link" @click="toRoadmap"></a>
                               </div>
                             </div>
@@ -352,13 +338,13 @@ const toUpdateUserSettings = () => {
   background-color: #00DBDE;
 }
 
-  .classyButton:hover {
-    background-color: #003b58ec;
-    border: #003A58;
-  }
+.classyButton:hover {
+  background-color: #003b58ec;
+  border: #003A58;
+}
 
-  .classyButton:active {
-    background-color: #003b58d6;
-    border: #003A58;
-  }
+.classyButton:active {
+  background-color: #003b58d6;
+  border: #003A58;
+}
 </style>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 9c15ed459254e04ad1d80d1421619fe622ccf8c8..2d1284aa1da81f104b6d9a22c238228ccdf5d568 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -48,11 +48,6 @@ const routes = [
             name: 'security',
             component: () => import('@/components/Settings/SettingsSecurity.vue'),
           },
-          {
-            path: '/settings/notification',
-            name: 'notification',
-            component: () => import('@/components/Settings/SettingsNotification.vue'),
-          },
           {
             path: '/settings/bank',
             name: 'bank',
diff --git a/src/stores/ConfigurationStore.ts b/src/stores/ConfigurationStore.ts
index 8771a46f79d73e07118c0757591e46460b05bca7..e0fd57fe25b56583f75c895407209fcf6dd0417d 100644
--- a/src/stores/ConfigurationStore.ts
+++ b/src/stores/ConfigurationStore.ts
@@ -5,10 +5,10 @@ import { defineStore } from 'pinia'
  */
 export const useConfigurationStore = defineStore('ConfigurationStore', {
   state: () => ({
-    /** The amount in the spending account. */
-    spendingAccount: 0,
-    /** The amount in the savings account. */
-    savingsAccount: 0,
+    /** The Basic Bank Account Number in the checking account. */
+    chekingAccountBBAN: 0,
+    /** The Basic Bank Account Number in the savings account. */
+    savingsAccountBBAN: 0,
     /** The user's commitment. */
     commitment: '',
     /** The user's experience. */
@@ -18,20 +18,20 @@ export const useConfigurationStore = defineStore('ConfigurationStore', {
   }),
   actions: {
     /**
-     * Sets the amount in the spending account.
-     *
-     * @param {number} newValue - The new value for the spending account.
+     * Sets the Basic Bank Account Number of the cheking account.
+     * 
+     * @param {number} newValue - The new Basic Bank Account Number of the cheking account.
      */
-    setSpendingAccount(newValue: number) {
-      this.spendingAccount = newValue;
+    setChekingAccountBBAN(newValue: number) {
+      this.chekingAccountBBAN = newValue;
     },
     /**
-     * Sets the amount in the savings account.
-     *
-     * @param {number} newValue - The new value for the savings account.
+     * Sets the Basic Bank Account Number of the savings account.
+     * 
+     * @param {number} newValue - The new Basic Bank Account Number of the savings account.
      */
-    setSavingsAccount(newValue: number) {
-      this.savingsAccount = newValue
+    setSavingsAccountBBAN(newValue: number) {
+      this.savingsAccountBBAN = newValue
     },
     /**
      * Sets the user's commitment.
@@ -68,20 +68,20 @@ export const useConfigurationStore = defineStore('ConfigurationStore', {
   },
   getters: {
     /**
-     * Retrieves the amount in the spending account.
-     *
-     * @returns {number} The amount in the spending account.
+     * Retrieves the Basic Bank Account Number of the cheking account.
+     * 
+     * @returns {number} The amount in the cheking account.
      */
-    getSpendingAccount(): number {
-      return this.spendingAccount
+    getCheckingAccountBBAN(): number {
+      return this.chekingAccountBBAN
     },
     /**
-     * Retrieves the amount in the savings account.
-     *
+     * Retrieves the Basic Bank Account Number of the savings account.
+     * 
      * @returns {number} The amount in the savings account.
      */
-    getSavingsAccount(): number {
-      return this.savingsAccount
+    getSavingsAccountBBAN(): number {
+      return this.savingsAccountBBAN
     },
     /**
      * Retrieves the user's commitment.
diff --git a/src/views/BasePageView.vue b/src/views/BasePageView.vue
index f7907b39ced3e3c370f50f2d91faeba4f78afe75..78e96a6d1707e650b91b86c2f0db53eef83fd8ce 100644
--- a/src/views/BasePageView.vue
+++ b/src/views/BasePageView.vue
@@ -16,5 +16,6 @@ import { useUserInfoStore } from '@/stores/UserStore';
 <style scoped>
 #minHeight {
   min-height: 700px;
+  margin: 0 140px;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/User/UserSettingsView.vue b/src/views/User/UserSettingsView.vue
index bd11bcc03a46c6c0739d948eb178efa782ffe0eb..5f2dc15fbeb8c0e7e8f35d32c4d6455b2a4ff933 100644
--- a/src/views/User/UserSettingsView.vue
+++ b/src/views/User/UserSettingsView.vue
@@ -80,16 +80,6 @@ function toBilling() {
                                 Sikkerhet
                             </a>
 
-
-                            <a @click.prevent="setActive('/settings/notification')" @click="toNotification"
-                                :class="['nav-item nav-link has-icon', { 'nav-link-faded': useRoute().path !== '/settings/notification', 'active': useRoute().path === '/settings/notification' }]">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                                    stroke-linejoin="round" class="feather feather-bell mr-2">
-                                    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
-                                    <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
-                                </svg>Varsel
-                            </a>
                             <a>
                                 <a @click.prevent="setActive('/settings/bank')" @click="toBilling"
                                     :class="['nav-item nav-link has-icon', { 'nav-link-faded': useRoute().path !== '/settings/bank', 'active': useRoute().path === '/settings/bank' }]">
@@ -103,8 +93,6 @@ function toBilling() {
                                 </a>
                             </a>
 
-
-
                         </nav>
                     </div>
                 </div>
@@ -209,12 +197,17 @@ function toBilling() {
     border-radius: .25rem;
 }
 
+
 .card-body {
     flex: 1 1 auto;
     min-height: 1px;
     padding: 1rem;
 }
 
+.nav-pills {
+  cursor: pointer;
+}
+
 .gutters-sm {
     margin-right: -8px;
     margin-left: -8px;