diff --git a/src/app/app.scss b/src/app/app.scss
index 29334f4..79354d0 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -1,5 +1,5 @@
 .app-content {
-  padding: 2rem;
+  padding: 0.5rem;
 }
 
 h1 {
diff --git a/src/app/components/add-expense/add-expense.component.html b/src/app/components/add-expense/add-expense.component.html
index afc5f76..fb755ac 100644
--- a/src/app/components/add-expense/add-expense.component.html
+++ b/src/app/components/add-expense/add-expense.component.html
@@ -1,71 +1,56 @@
 <div class="add-expense-container">
   <mat-card appearance="outlined">
-    <mat-card-header class="add-expense-header">
+    <mat-card-header>
       <mat-card-title>Track new Expense</mat-card-title>
+      <button matButton="tonal" [disabled]="!enableSaveButton()" (click)="saveClick()">Save</button>
     </mat-card-header>
 
     <mat-card-content>
-      <div class="add-expense-dropdowns">
-        <mat-form-field appearance="outline">
-          <mat-label>Date</mat-label>
-          <input matInput [matDatepicker]="expenseDatePicker" [formField]="expenseForm.date">
-          <mat-datepicker-toggle matIconSuffix [for]="expenseDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #expenseDatePicker></mat-datepicker>
-        </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Date</mat-label>
+        <input matInput [matDatepicker]="expenseDatePicker" [formField]="expenseForm.date">
+        <mat-datepicker-toggle matIconSuffix [for]="expenseDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #expenseDatePicker></mat-datepicker>
+      </mat-form-field>
 
-        <mat-form-field appearance="outline">
-          <mat-label>Cents</mat-label>
-          <input type="number" matInput [formField]="expenseForm.cents">
-        </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Cents</mat-label>
+        <input type="number" matInput [formField]="expenseForm.cents">
+      </mat-form-field>
 
-        <mat-form-field appearance="outline">
-          <mat-label>Category</mat-label>
-          <input type="text" matInput [matAutocomplete]="categoryAuto" [formField]="expenseForm.category" [value]="expenseForm.category()">
-          <mat-autocomplete [displayWith]="display" autoActiveFirstOption #categoryAuto="matAutocomplete">
-            @for (category of categories(); track category.id) {
-              <mat-option [value]="category">{{ category.name }}</mat-option>
-            }
-          </mat-autocomplete>
-        </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Category</mat-label>
+        <input type="text" matInput [matAutocomplete]="categoryAuto" [formField]="expenseForm.category" [value]="expenseForm.category()">
+        <mat-autocomplete [displayWith]="autocompleteDisplay" autoActiveFirstOption #categoryAuto="matAutocomplete">
+          @for (category of categories(); track category.id) {
+            <mat-option [value]="category">{{ category.name }}</mat-option>
+          }
+        </mat-autocomplete>
+      </mat-form-field>
 
-        <mat-form-field appearance="outline">
-          <mat-label>Merchant</mat-label>
-          <input type="text" matInput [matAutocomplete]="merchantAuto" [formField]="expenseForm.merchant">
-          <mat-autocomplete [displayWith]="display" autoActiveFirstOption #merchantAuto="matAutocomplete">
-            @for (merchant of merchants(); track merchant.id) {
-              <mat-option [value]="merchant">{{ merchant.name }}</mat-option>
-            }
-          </mat-autocomplete>
-        </mat-form-field>
-      </div>
+      <mat-form-field appearance="outline">
+        <mat-label>Merchant</mat-label>
+        <input type="text" matInput [matAutocomplete]="merchantAuto" [formField]="expenseForm.merchant">
+        <mat-autocomplete [displayWith]="autocompleteDisplay" autoActiveFirstOption #merchantAuto="matAutocomplete">
+          @for (merchant of merchants(); track merchant.id) {
+            <mat-option [value]="merchant">{{ merchant.name }}</mat-option>
+          }
+        </mat-autocomplete>
+      </mat-form-field>
 
-      <div class="add-expense-additional">
-        <mat-form-field appearance="outline">
-          <mat-label>Tags</mat-label>
-          <mat-select disableRipple multiple [formField]="expenseForm.tags">
-            @for (tag of tags(); track tag.id) {
-              <mat-option [value]="tag">{{ tag.name }}</mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Tags</mat-label>
+        <mat-select disableRipple multiple [formField]="expenseForm.tags">
+          @for (tag of tags(); track tag.id) {
+            <mat-option [value]="tag">{{ tag.name }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
 
-        <mat-form-field appearance="outline" class="add-expense-note">
-          <mat-label>Note</mat-label>
-          <textarea rows="1" matInput [formField]="expenseForm.note"></textarea>
-        </mat-form-field>
-      </div>
+      <mat-form-field appearance="outline">
+        <mat-label>Note</mat-label>
+        <textarea rows="1" matInput [formField]="expenseForm.note"></textarea>
+      </mat-form-field>
     </mat-card-content>
-
-    <mat-card-footer class="add-expense-footer">
-      <mat-card-actions>
-        <button matButton="tonal" [disabled]="!enableSaveButton()" (click)="saveClick()">Save</button>
-      </mat-card-actions>
-
-      @if (errorSaving()) {
-        <mat-error>
-          {{ errorSaving() }}
-        </mat-error>
-      }
-    </mat-card-footer>
   </mat-card>
 </div>
diff --git a/src/app/components/add-expense/add-expense.component.scss b/src/app/components/add-expense/add-expense.component.scss
index 74c3967..790f538 100644
--- a/src/app/components/add-expense/add-expense.component.scss
+++ b/src/app/components/add-expense/add-expense.component.scss
@@ -1,23 +1,39 @@
-.add-expense-header {
-  padding-bottom: 1rem;
-}
-
-.add-expense-footer {
-  padding: 0 0 1rem 0.5rem;
-}
-
-.add-expense-dropdowns {
+.add-expense-container {
+  width: 100%;
   display: flex;
-  gap: 1rem;
-  justify-content: space-between;
+  flex-direction: column;
+  align-items: center;
 }
 
-.add-expense-additional {
-  display: flex;
-  gap: 1rem;
-  justify-content: space-between;
-}
-
-.add-expense-note {
+mat-card {
+  max-width: 800px;
   width: 100%;
 }
+
+mat-card-header {
+  padding-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+mat-card-content {
+  display: grid;
+}
+
+mat-form-field {
+  width: 100%;
+}
+
+@media (min-width: 550px) {
+  mat-card-content {
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+  }
+}
+
+@media (min-width: 800px) {
+  mat-card-content {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
diff --git a/src/app/components/add-expense/add-expense.component.ts b/src/app/components/add-expense/add-expense.component.ts
index e3f0d4e..8bdbefc 100644
--- a/src/app/components/add-expense/add-expense.component.ts
+++ b/src/app/components/add-expense/add-expense.component.ts
@@ -15,7 +15,7 @@ import { CreateExpense, ExpenseService } from '../../services/expense.service';
 import { DatePipe } from '@angular/common';
 
 interface ExpenseForm {
-  date: Date;
+  date: Date | string;
   cents: number;
   category: Category | string;
   merchant: Merchant | string;
@@ -44,10 +44,9 @@ export class AddExpenseComponent {
     return dateValid && centsValid && categoryValid && merchantValid && noteValid;
   });
   protected saving = signal(false);
-  protected errorSaving = signal('');
 
   private defaultFormState: ExpenseForm = {
-    date: new Date(),
+    date: '',
     cents: NaN,
     category: '',
     merchant: '',
@@ -69,7 +68,6 @@ export class AddExpenseComponent {
                      private readonly datePipe: DatePipe) { }
 
   public async saveClick(): Promise<void> {
-    this.errorSaving.set('');
     const saveExpenseModel = this.expenseModel();
     const date = this.datePipe.transform(saveExpenseModel.date, 'yyyy-MM-dd')?.split('-') ?? [];
     const expense: CreateExpense = {
@@ -90,14 +88,14 @@ export class AddExpenseComponent {
       this.expenseForm().reset(this.expenseModel());
     }
     catch (error) {
-      this.errorSaving.set(`Error saving expense: ${error}`)
+      console.error(error);
     }
     finally {
       this.saving.set(false);
     }
   }
 
-  public display(value: Merchant | Category | Tag) {
+  public autocompleteDisplay(value: Merchant | Category) {
     return value.name ?? null;
   }
 }