diff --git a/web/src/components/Autocomplete.vue b/web/src/components/Autocomplete.vue
index 8f99ed3..0c68a6c 100644
--- a/web/src/components/Autocomplete.vue
+++ b/web/src/components/Autocomplete.vue
@@ -11,9 +11,9 @@ export interface Suggestion {
 }
 
 const props = defineProps<{
-    text: String,
-    id: String | undefined,
-    model: String,
+    text: string,
+    id: string | undefined,
+    model: string,
     type?: string | undefined,
 }>();
 
diff --git a/web/src/components/Checkbox.vue b/web/src/components/Checkbox.vue
index d1a612e..1429ff2 100644
--- a/web/src/components/Checkbox.vue
+++ b/web/src/components/Checkbox.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const props = defineProps<{modelValue: boolean}>();
+const props = defineProps<{modelValue?: boolean}>();
 const emits = defineEmits<{
   (e: "update:modelValue", value: boolean): void
 }>();
diff --git a/web/src/components/DateInput.vue b/web/src/components/DateInput.vue
index 79b5418..5d7d1bc 100644
--- a/web/src/components/DateInput.vue
+++ b/web/src/components/DateInput.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import Input from './Input.vue';
 const props = defineProps<{
-  modelValue: Date
+  modelValue?: Date
 }>();
 const emit = defineEmits(['update:modelValue']);
 
-function dateToYYYYMMDD(d: Date) : string {
+function dateToYYYYMMDD(d: Date | undefined) : string {
   if(d == null)
     return "";
   // alternative implementations in https://stackoverflow.com/q/23593052/1850609
diff --git a/web/src/components/Input.vue b/web/src/components/Input.vue
index 5766a92..68e1dae 100644
--- a/web/src/components/Input.vue
+++ b/web/src/components/Input.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-const props = defineProps<{modelValue : number | string}>();
+const props = defineProps<{
+  modelValue?: number | string
+}>();
 
 const emits = defineEmits<{
   (e: "update:modelValue", value: number | string): void
diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index d73564b..6dc3a85 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -5,10 +5,11 @@ import TransactionRow from "../components/TransactionRow.vue";
 import TransactionInputRow from "../components/TransactionInputRow.vue";
 import { useAccountStore } from "../stores/budget-account";
 import EditAccount from "../dialogs/EditAccount.vue";
-import Button from "../components/Button.vue";
+import Button from "../components/SimpleButton.vue";
 import { useTransactionsStore } from "../stores/transactions";
 import Modal from "../components/Modal.vue";
 import Input from "../components/Input.vue";
+import Checkbox from "../components/Checkbox.vue";
 
 defineProps<{
     budgetid: string
@@ -126,9 +127,8 @@ function createReconcilationTransaction() {
         Amount
       </td>
       <td style="width: 80px;">
-        <Input
+        <Checkbox
           v-if="transactions.Reconciling"
-          type="checkbox"
           @input="setReconciled"
         />
       </td>