diff --git a/src/views/FirstSavingGoalView.vue b/src/views/FirstSavingGoalView.vue
index b0d89c3cdc855e9aa6ad5e07ab334e2d54442a18..55a0a9779f0134109ca43722c08c395266bc4a5b 100644
--- a/src/views/FirstSavingGoalView.vue
+++ b/src/views/FirstSavingGoalView.vue
@@ -1,17 +1,35 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue';
 import router from '@/router';
 
 const savingsGoal = ref('');
-const amount = ref('');
+const rawAmount = ref('');
+
+const validateAmount = () => {
+    const validPattern = /^(\d+)?(,\d*)?$/;
+    if (!validPattern.test(rawAmount.value)) {
+        rawAmount.value = rawAmount.value.slice(0, -1);
+    } else if (rawAmount.value.includes(',')) {
+        rawAmount.value = rawAmount.value.replace(/,+/g, ',');
+    }
+};
+
+const checkNegative = () => {
+    const numericValue = parseFloat(rawAmount.value.replace(',', '.'));
+    if (numericValue < 0) {
+        rawAmount.value = '';
+    }
+};
+
+watch(rawAmount, validateAmount);
+watch(() => parseFloat(rawAmount.value.replace(',', '.')), checkNegative);
 
 const onButtonClick = () => {
     router.push('/home');
-}
+};
 </script>
 
-
 <template>
     <div class="flex flex-col items-center justify-center min-h-screen px-4 text-center">
         <div class="mb-20">
@@ -22,20 +40,20 @@ const onButtonClick = () => {
                         type="text"
                         id="savings-goal"
                         v-model="savingsGoal"
-                        :class="{'border-green-500': savingsGoal.value, 'border-gray-300': !savingsGoal.value}"
-                        class="block w-full rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 text-xl"
+                        :class="{'border-[var(--green)]': savingsGoal.valueOf(), 'border-gray-300': !savingsGoal.valueOf()}"
+                        class="border-2 block w-full rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 text-xl"
                         placeholder="">
                 </div>
                 <div class="mb-8 w-full flex items-center">
                     <label for="amount" class="shrink-0 text-xl font-bold mr-2">Jeg vil spare:</label>
                     <input
-                        type="number"
-                        id="amount"
-                        v-model="amount"
-                        :class="{'border-green-500': amount.value, 'border-gray-300': !amount.value}"
-                        class="flex-grow rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 text-xl mr-2"
-                        style="flex-basis: 0; max-width: calc(100% - 8rem);"
-                        placeholder="">
+                        type="text"
+                    id="amount"
+                    v-model="rawAmount"
+                        :class="{'border-[var(--green)]': rawAmount.valueOf(), 'border-gray-300': !rawAmount.valueOf()}"
+                    class="border-2 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 text-xl mr-2 block w-full"
+                    placeholder=""
+                    min="0">
                     <span class="shrink-0 text-xl font-bold">kr</span>
                 </div>
                 <div class="w-full px-4 py-2">
@@ -46,12 +64,3 @@ const onButtonClick = () => {
         <ContinueButtonComponent @click="onButtonClick" class="px-10 py-3 text-2xl font-bold self-end"></ContinueButtonComponent>
     </div>
 </template>
-
-
-
-
-
-
-
-
-