diff --git a/src/app/components/add-expense/add-expense.component.html b/src/app/components/add-expense/add-expense.component.html
index 8d16c98..e9ac660 100644
--- a/src/app/components/add-expense/add-expense.component.html
+++ b/src/app/components/add-expense/add-expense.component.html
@@ -4,93 +4,54 @@
       <mat-card-title>Track new Expense</mat-card-title>
     </mat-card-header>
 
-
     <mat-card-content>
-      <div class="add-expense-body">
-        <div>
-          Date: <input type="date" [formField]="expenseForm.date">
-        </div>
+      <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>
 
-        <div>
-          Cents (required):
-          <input type="number" placeholder="Enter amount" [formField]="expenseForm.amount">
-        </div>
+      <mat-form-field appearance="outline">
+        <mat-label>Cents</mat-label>
+        <input type="number" matInput [formField]="expenseForm.amount">
+      </mat-form-field>
 
-        <div>
-          Category (required):
-          <select [formField]="expenseForm.categoryId">
-            <option value="">Select a category</option>
-            @for (category of categories(); track category.id) {
-              <option [value]="category.id">{{ category.name }}</option>
-            }
-          </select>
-        </div>
-      </div>
-
-      <div>
-        Merchant (optional):
-        <select [formField]="expenseForm.merchantId">
-          <option value="">Select a merchant</option>
-          @for (merchant of merchants(); track merchant.id) {
-            <option [value]="merchant.id">{{ merchant.name }}</option>
+      <mat-form-field appearance="outline">
+        <mat-label>Category</mat-label>
+        <input type="text" matInput [matAutocomplete]="categoryAuto" [formField]="expenseForm.categoryId">
+        <mat-autocomplete autoActiveFirstOption #categoryAuto="matAutocomplete">
+          @for (category of categories(); track category.id) {
+            <mat-option [value]="category.name">{{ category.name }}</mat-option>
           }
-        </select>
-      </div>
+        </mat-autocomplete>
+      </mat-form-field>
 
-      <div>
-        Note (optional): <input type="text" [formField]="expenseForm.note">
-      </div>
+      <mat-form-field appearance="outline">
+        <mat-label>Merchant</mat-label>
+        <input type="text" matInput [matAutocomplete]="merchantAuto" [formField]="expenseForm.merchantId">
+        <mat-autocomplete autoActiveFirstOption #merchantAuto="matAutocomplete">
+          @for (merchant of merchants(); track merchant.id) {
+            <mat-option [value]="merchant.name">{{ merchant.name }}</mat-option>
+          }
+        </mat-autocomplete>
+      </mat-form-field>
 
-      <div>Tags</div>
+      <mat-form-field appearance="outline">
+        <mat-label>Note</mat-label>
+        <textarea matInput></textarea>
+      </mat-form-field>
 
-      <div class="card-footer">
-        <button>Save</button>
-      </div>
+      <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.name">{{ tag.name }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+
+      <button matButton="tonal" disabled="true">Save</button>
     </mat-card-content>
   </mat-card>
-
-
-
-<!--  <app-card [header]="'Add Expense'">-->
-<!--    <div class="add-expense-body">-->
-<!--      <div>-->
-<!--        Date: <input type="date" [formField]="expenseForm.date">-->
-<!--      </div>-->
-
-<!--      <div>-->
-<!--        Cents (required):-->
-<!--        <input type="number" placeholder="Enter amount" [formField]="expenseForm.amount">-->
-<!--      </div>-->
-
-<!--      <div>-->
-<!--        Category (required):-->
-<!--        <select [formField]="expenseForm.categoryId">-->
-<!--          <option value="">Select a category</option>-->
-<!--          @for (category of categories(); track category.id) {-->
-<!--            <option [value]="category.id">{{ category.name }}</option>-->
-<!--          }-->
-<!--        </select>-->
-<!--      </div>-->
-<!--    </div>-->
-
-<!--    <div>-->
-<!--      Merchant (optional):-->
-<!--      <select [formField]="expenseForm.merchantId">-->
-<!--        <option value="">Select a merchant</option>-->
-<!--        @for (merchant of merchants(); track merchant.id) {-->
-<!--          <option [value]="merchant.id">{{ merchant.name }}</option>-->
-<!--        }-->
-<!--      </select>-->
-<!--    </div>-->
-
-<!--    <div>-->
-<!--      Note (optional): <input type="text" [formField]="expenseForm.note">-->
-<!--    </div>-->
-
-<!--    <div>Tags</div>-->
-
-<!--    <div class="card-footer">-->
-<!--      <button>Save</button>-->
-<!--    </div>-->
-<!--  </app-card>-->
 </div>
diff --git a/src/app/components/add-expense/add-expense.component.ts b/src/app/components/add-expense/add-expense.component.ts
index b0d0ccb..0cde81e 100644
--- a/src/app/components/add-expense/add-expense.component.ts
+++ b/src/app/components/add-expense/add-expense.component.ts
@@ -1,9 +1,16 @@
-import {Component, computed, signal} from '@angular/core';
-import {Category, CategoryService} from '../../services/category.service';
-import {Merchant, MerchantService} from '../../services/merchant.service';
-import { Tag } from '../../services/tag.service';
-import {form, FormField} from '@angular/forms/signals';
-import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
+import { Component, computed, signal } from '@angular/core';
+import { CategoryService } from '../../services/category.service';
+import { MerchantService } from '../../services/merchant.service';
+import { Tag, TagService } from '../../services/tag.service';
+import { form, FormField } from '@angular/forms/signals';
+import { MatCardModule } from '@angular/material/card';
+import { MatInputModule } from '@angular/material/input';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatSelectModule } from '@angular/material/select';
+import { MatButtonModule } from '@angular/material/button';
+import { provideNativeDateAdapter } from '@angular/material/core';
 
 interface AddExpenseForm {
   date: Date,
@@ -16,19 +23,15 @@ interface AddExpenseForm {
 
 @Component({
   selector: 'app-add-expense',
-  imports: [
-    FormField,
-    MatCard,
-    MatCardHeader,
-    MatCardTitle,
-    MatCardContent
-  ],
+  imports: [MatDatepickerModule, MatFormFieldModule, MatInputModule, MatCardModule, MatAutocompleteModule, MatSelectModule, MatButtonModule, FormField],
+  providers: [provideNativeDateAdapter()],
   templateUrl: './add-expense.component.html',
   styleUrl: './add-expense.component.scss',
 })
 export class AddExpenseComponent {
   protected categories = computed(() => this.categoryService.categories());
   protected merchants = computed(() => this.merchantService.merchants());
+  protected tags = computed(() => this.tagService.tags());
   private addExpenseModel = signal<AddExpenseForm>({
     date: new Date(),
     amount: '',
@@ -40,5 +43,6 @@ export class AddExpenseComponent {
   public expenseForm = form(this.addExpenseModel);
 
   public constructor(private readonly categoryService: CategoryService,
-                     private readonly merchantService: MerchantService) { }
+                     private readonly merchantService: MerchantService,
+                     private readonly tagService: TagService) { }
 }
diff --git a/src/app/components/expense-list/expense-list.component.ts b/src/app/components/expense-list/expense-list.component.ts
index 5a7d57d..08864c8 100644
--- a/src/app/components/expense-list/expense-list.component.ts
+++ b/src/app/components/expense-list/expense-list.component.ts
@@ -1,37 +1,12 @@
 import { Component, computed } from '@angular/core';
 import { ExpenseService } from '../../services/expense.service';
-import {
-  MatCell,
-  MatCellDef,
-  MatColumnDef,
-  MatHeaderCell,
-  MatHeaderCellDef,
-  MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
-  MatTable
-} from '@angular/material/table';
-import {CurrencyPipe, DatePipe} from '@angular/common';
-import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
+import { MatTableModule } from '@angular/material/table';
+import { CurrencyPipe, DatePipe } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
 
 @Component({
   selector: 'app-expense-list',
-  imports: [
-    MatTable,
-    MatColumnDef,
-    MatHeaderCell,
-    MatHeaderCellDef,
-    DatePipe,
-    MatCell,
-    MatCellDef,
-    CurrencyPipe,
-    MatHeaderRow,
-    MatHeaderRowDef,
-    MatRow,
-    MatRowDef,
-    MatCard,
-    MatCardHeader,
-    MatCardTitle,
-    MatCardContent
-  ],
+  imports: [MatTableModule, MatCardModule, DatePipe, CurrencyPipe],
   templateUrl: './expense-list.component.html',
   styleUrl: './expense-list.component.scss',
 })