diff --git a/web/src/components/Modal.vue b/web/src/components/Modal.vue
index 8063d5e..63652af 100644
--- a/web/src/components/Modal.vue
+++ b/web/src/components/Modal.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Card from '../components/Card.vue';
+import RowCard from './RowCard.vue';
 import { ref } from "vue";
 
 const props = defineProps<{
@@ -32,7 +32,7 @@ function submitDialog() {
 <template>
   <button @click="openDialog">
     <slot name="placeholder">
-      <Card>
+      <RowCard>
         <p class="w-24 text-center text-6xl">
           +
         </p>
@@ -40,7 +40,7 @@ function submitDialog() {
           class="text-lg"
           dark
         >{{ buttonText }}</span>
-      </Card>
+      </RowCard>
     </slot>
   </button>
   <div
diff --git a/web/src/pages/Dashboard.vue b/web/src/pages/Dashboard.vue
index c1a836d..076375c 100644
--- a/web/src/pages/Dashboard.vue
+++ b/web/src/pages/Dashboard.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import NewBudget from '../dialogs/NewBudget.vue';
-import Card from '../components/Card.vue';
+import RowCard from '../components/RowCard.vue';
 import { useSessionStore } from '../stores/session';
 
 const props = defineProps<{
@@ -13,7 +13,7 @@ const BudgetsList = useSessionStore().BudgetsList;
 <template>
   <h1>Budgets</h1>
   <div class="grid md:grid-cols-2 gap-6">
-    <Card
+    <RowCard
       v-for="budget in BudgetsList"
       :key="budget.ID"
     >
@@ -26,7 +26,7 @@ const BudgetsList = useSessionStore().BudgetsList;
         <span class="text-lg">{{ budget.Name
         }}{{ budget.ID == budgetid ? " *" : "" }}</span>
       </router-link>
-    </Card>
+    </RowCard>
     <NewBudget />
   </div>
 </template>
diff --git a/web/src/pages/Settings.vue b/web/src/pages/Settings.vue
index 24f0c93..dd2b55d 100644
--- a/web/src/pages/Settings.vue
+++ b/web/src/pages/Settings.vue
@@ -4,8 +4,8 @@ import { useRouter } from "vue-router";
 import { DELETE, POST } from "../api";
 import { useBudgetsStore } from "../stores/budget";
 import { useSessionStore } from "../stores/session";
-import Card from "../components/Card.vue";
-import Button from "../components/Button.vue";
+import RowCard from "../components/RowCard.vue";
+import Button from "../components/SimpleButton.vue";
 import { saveAs } from 'file-saver';
 import Input from "../components/Input.vue";
 
@@ -78,7 +78,7 @@ function ynabExport() {
   <div>
     <h1>Danger Zone</h1>
     <div class="grid md:grid-cols-2 gap-6">
-      <Card class="flex-col p-3">
+      <RowCard class="flex-col p-3">
         <h2 class="text-lg font-bold">
           Clear Budget
         </h2>
@@ -93,8 +93,8 @@ function ynabExport() {
         >
           Clear budget
         </Button>
-      </Card>
-      <Card class="flex-col p-3">
+      </RowCard>
+      <RowCard class="flex-col p-3">
         <h2 class="text-lg font-bold">
           Delete Budget
         </h2>
@@ -108,8 +108,8 @@ function ynabExport() {
         >
           Delete budget
         </Button>
-      </Card>
-      <Card class="flex-col p-3">
+      </RowCard>
+      <RowCard class="flex-col p-3">
         <h2 class="text-lg font-bold">
           Fix all historic negative category-balances
         </h2>
@@ -123,8 +123,8 @@ function ynabExport() {
         >
           Fix negative
         </Button>
-      </Card>
-      <Card class="flex-col p-3">
+      </RowCard>
+      <RowCard class="flex-col p-3">
         <h2 class="text-lg font-bold">
           Import YNAB Budget
         </h2>
@@ -156,8 +156,8 @@ function ynabExport() {
         >
           Importieren
         </Button>
-      </Card>
-      <Card class="flex-col p-3">
+      </RowCard>
+      <RowCard class="flex-col p-3">
         <h2 class="text-lg font-bold">
           Export as YNAB TSV
         </h2>
@@ -170,7 +170,7 @@ function ynabExport() {
             Export
           </Button>
         </div>
-      </Card>
+      </RowCard>
     </div>
   </div>
 </template>