diff --git a/src/components/BaseComponents/Menu.vue b/src/components/BaseComponents/Menu.vue
index 2b68b01fc7633822734ce28510d0343817e39284..332fb5cd5873df78ee1bbf3fcb7318f37baed494 100644
--- a/src/components/BaseComponents/Menu.vue
+++ b/src/components/BaseComponents/Menu.vue
@@ -31,7 +31,7 @@
                     <li v-if="userStore.isLoggedIn" class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle username-text text-white " href="#" role="button"
                             data-bs-toggle="dropdown" aria-expanded="false">
-                            <img src="@/assets/icons/person.svg">{{ userStore.firstname }}
+                            <img src="@/assets/icons/person.svg">{{ useUserInfoStore().firstname}}
                         </a>
                         <ul class="dropdown-menu dropdown-username-content">
                             <li><a class="dropdown-item text-white dropdown-username-link" href="#"
@@ -64,7 +64,7 @@ import { useUserInfoStore } from '@/stores/UserStore';
 
 const router = useRouter();
 
-const userStore = useUserInfoStore();
+const userStore : any = useUserInfoStore();
 
 function toHome() {
     router.push('/')
diff --git a/src/components/Budget/BudgetBox.vue b/src/components/Budget/BudgetBox.vue
index d3b98521c14bb9b6197759d70201d96cd4f2aac5..88de9bbde4b0b5b952f71f29478de3395931f573 100644
--- a/src/components/Budget/BudgetBox.vue
+++ b/src/components/Budget/BudgetBox.vue
@@ -21,16 +21,17 @@ const props = defineProps({
 // Calculated balance variable
 let balance = props.budget - props.expenses
 // Reactive variable for determining background color
-const iRef = ref(null)
+const iRef = ref<Element | null>(null);
 
 /**
  * Checks if the balance is positive, and depending on the value
  * changes background color to green (positive) or red (negative)
  */
 onMounted(() => {
-  if (balance >= 0) {
+  if (iRef.value !== null && balance >= 0) {
     // By default, the background is set to red
-    iRef.value.style.backgroundColor = 'rgba(34, 231, 50, 0.43)';
+    const element = iRef.value as HTMLElement;
+    element.style.backgroundColor = 'rgba(34, 231, 50, 0.43)';
   }
 })
 
diff --git a/src/components/Configuration/ConfigurationSteps/Commitment.vue b/src/components/Configuration/ConfigurationSteps/Commitment.vue
index 05f071e4966bdd1148a58295340c56185847080e..9c1442a11cb45732fa26b4d5818384b1eaf1988a 100644
--- a/src/components/Configuration/ConfigurationSteps/Commitment.vue
+++ b/src/components/Configuration/ConfigurationSteps/Commitment.vue
@@ -12,10 +12,10 @@ emit('changeRouterEvent', '/commitment')
 
 // Reactive variables for form and radio buttons.
 const formRef = ref()
-const lowRef = ref('')
-const mediumRef = ref('')
-const highRef = ref('')
-let errorMsg = ref('');
+const lowRef = ref()
+const mediumRef = ref()
+const highRef = ref()
+let errorMsg = ref();
 
 /**
  * Validates the commitment form radio buttons and updates the commitment choice in the store.
@@ -30,7 +30,7 @@ const onClick = () => {
     if (lowRef.value.checked) choice = 'LITTLE'
     else if (mediumRef.value.checked) choice = 'SOME'
     else if (highRef.value.checked) choice = 'MUCH'
-    useConfigurationStore().setCommitment(choice)
+    useConfigurationStore().commitment(choice)
     router.push('/experience')
   }
   else {
diff --git a/src/components/Configuration/ConfigurationSteps/Experience.vue b/src/components/Configuration/ConfigurationSteps/Experience.vue
index ae4e5b2ef104e3963229dcb8ffb1e58764b0d109..c750f58d2c8c474b8488ae1770cc84b1cf055c7c 100644
--- a/src/components/Configuration/ConfigurationSteps/Experience.vue
+++ b/src/components/Configuration/ConfigurationSteps/Experience.vue
@@ -12,10 +12,10 @@ emit('changeRouterEvent', '/experience')
 
 // Declaration of reactive variables for the form and radio buttons
 const formRef = ref()
-const beginnerRef = ref('')
-const someExperienceRef = ref('')
-const expertRef = ref('')
-let errorMsg = ref('');
+const beginnerRef = ref()
+const someExperienceRef = ref()
+const expertRef = ref()
+let errorMsg = ref();
 
 /**
  * Validates the experience form radio buttons and updates the commitment choice in the store.
diff --git a/src/components/Exceptions/ErrorBox.vue b/src/components/Exceptions/ErrorBox.vue
index d73c8b5feea6dd4e35bf86bb84ea042cce6081d5..5dc012e672ae7ef555ff45c74107da29f71838a4 100644
--- a/src/components/Exceptions/ErrorBox.vue
+++ b/src/components/Exceptions/ErrorBox.vue
@@ -44,7 +44,7 @@ export default defineComponent({
   left: 50%;
   transform: translate(-50%, 0);
   width: min(100%, 700px);
-  background-color: var(--red-color);
+  background-color: red ;   /*var(--red-color);*/
   padding: 7px;
   border-radius: 5px;
   z-index: 1000;
diff --git a/src/components/LeaderboardComponents/__tests__/Leaderboard.spec.ts b/src/components/LeaderboardComponents/__tests__/Leaderboard.spec.ts
index 110aa7b9e0bd6addbf8db170fe4b4ce24c341474..ed89975252b68f12b630473de9fe6d60d646899b 100644
--- a/src/components/LeaderboardComponents/__tests__/Leaderboard.spec.ts
+++ b/src/components/LeaderboardComponents/__tests__/Leaderboard.spec.ts
@@ -7,8 +7,10 @@ import { useUserInfoStore } from '@/stores/UserStore';
 import router from '@/router/index';
 
 describe('Leaderboard', () => {
+
   let wrapper: any, store: any, mockRouter;
 
+
   const leaderboard = [
     { user: { id: 1, firstName: 'Alice', email: 'alice@example.com' }, rank: 1, score: 50 },
     { user: { id: 2, firstName: 'Bob', email: 'bob@example.com' }, rank: 2, score: 45 }