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 {