diff --git a/frontend/Exence/src/app/private/dashboard/categories/categories.component.html b/frontend/Exence/src/app/private/dashboard/categories/categories.component.html
index f4320f9..fbf62c9 100644
--- a/frontend/Exence/src/app/private/dashboard/categories/categories.component.html
+++ b/frontend/Exence/src/app/private/dashboard/categories/categories.component.html
@@ -1,5 +1,5 @@
 <mat-card class="h-100 categories">
-	@if (categories() && categories().length) {
+	@if (hasTransactions) {
 		<mat-card-header>
 			<mat-card-title
 				class="d-flex flex-row flex-nowrap gap-2 justify-content-between align-items-center mb-2 w-100"
@@ -15,37 +15,66 @@ <h2 class="header-2 m-0">Top categories</h2>
 		</mat-card-header>
 		<mat-card-content>
 			<div class="d-flex flex-column gap-4">
-				@for (category of categories(); track category.id) {
+				@for (category of categorySummaries(); track category.id) {
 					<div class="d-flex flex-column gap-1 align-items-center">
-						<div class="d-flex flex-row flex-nowrap justify-content-between align-items-center w-100">
+						<div
+							class="d-flex flex-row flex-nowrap justify-content-between align-items-center w-100"
+						>
 							<div class="d-flex flex-row flex-nowrap gap-2">
 								<span class="">{{ category.emoji }}</span>
 								{{ category.name }}
 							</div>
 
-							<div class="fw-semibold">{{ calcPercentage(category.totalAmount) }}%</div>
+							<div class="fw-semibold">
+								{{ calcPercentage(category.totalAmount) }}%
+							</div>
 						</div>
-						<mat-progress-bar [value]="calcPercentage(category.totalAmount)" />
+						<mat-progress-bar
+							[value]="calcPercentage(category.totalAmount)"
+						/>
 					</div>
 				}
 			</div>
 		</mat-card-content>
 	} @else {
-		<mat-card-content>
-			<div class="d-flex align-items-center justify-content-center">
-				<h2 class="header-2 text-center">Add categories to discover your spending patterns!</h2>
-			</div>
-		</mat-card-content>
-		<mat-card-actions class="justify-content-center">
-			<ex-button
-				color="primary"
-				matIcon="add"
-				collapsedStyle="outlined"
-				collapseUnder="md"
-				filled
-				(click)="openCreateCategoryDialog()"
-				>Create</ex-button
-			>
-		</mat-card-actions>
+		@if (hasCategories) {
+			<mat-card-content>
+				<div class="d-flex align-items-center justify-content-center">
+					<h2 class="header-2 text-center">
+						Add transactions to discover your spending patterns!
+					</h2>
+				</div>
+			</mat-card-content>
+			<mat-card-actions class="justify-content-center">
+				<ex-button
+					color="primary"
+					matIcon="add"
+					collapsedStyle="outlined"
+					collapseUnder="md"
+					filled
+					(click)="openCreateTransactionDialog()"
+					>Create transaction</ex-button
+				>
+			</mat-card-actions>
+		} @else {
+			<mat-card-content>
+				<div class="d-flex align-items-center justify-content-center">
+					<h2 class="header-2 text-center">
+						Add categories to discover your spending patterns!
+					</h2>
+				</div>
+			</mat-card-content>
+			<mat-card-actions class="justify-content-center">
+				<ex-button
+					color="primary"
+					matIcon="add"
+					collapsedStyle="outlined"
+					collapseUnder="md"
+					filled
+					(click)="openCreateCategoryDialog()"
+					>Create category</ex-button
+				>
+			</mat-card-actions>
+		}
 	}
 </mat-card>
diff --git a/frontend/Exence/src/app/private/dashboard/categories/categories.component.ts b/frontend/Exence/src/app/private/dashboard/categories/categories.component.ts
index de6b1dd..e426af0 100644
--- a/frontend/Exence/src/app/private/dashboard/categories/categories.component.ts
+++ b/frontend/Exence/src/app/private/dashboard/categories/categories.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject, input } from '@angular/core';
+import { Component, inject, input, output } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { MatDialog } from '@angular/material/dialog';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
@@ -9,6 +9,8 @@ import { ButtonComponent } from '../../../shared/button/button.component';
 import { DisplaySizeService } from '../../../shared/display-size.service';
 import { SnackbarService } from '../../../shared/snackbar/snackbar.service';
 import { CreateCategoryDialogComponent } from '../../transactions-and-categories/create-category-dialog/create-category-dialog.component';
+import { CreateTransactionDialogComponent, CreateTransactionDialogData } from '../../transactions-and-categories/create-transaction-dialog/create-transaction-dialog.component';
+import { Transaction } from 'src/app/data-model/modules/transaction/Transaction';
 
 // TODO move to interval filter component when created
 export enum DateInterval {
@@ -34,19 +36,44 @@ export class CategoriesComponent extends BaseComponent {
 	private readonly dialog = inject(MatDialog);
 
 	totalExpense = input.required<number>();
-	categories = input.required<CategorySummaryResponse[]>();
+	categorySummaries = input.required<CategorySummaryResponse[]>();
+	categories = input.required<Category[]>();
 
-	openCreateCategoryDialog(): void {
+	dataChangedEvent = output<void>();
+
+	public openCreateCategoryDialog(): void {
 		this.dialog.open<CreateCategoryDialogComponent, undefined, Category>(
 			CreateCategoryDialogComponent, undefined
-		).afterClosed().subscribe((newCategory) => {
+		).afterClosed().subscribe((newCategory?: Category) => {
 			if (newCategory) {
 				this.snackbarService.showSuccess(`Category '${newCategory.emoji}' created successfully!`);
+				this.dataChangedEvent.emit();
 			}
 		});
 	}
 
+	public openCreateTransactionDialog(): void {
+			this.dialog.open<CreateTransactionDialogComponent, CreateTransactionDialogData, Transaction>(
+				CreateTransactionDialogComponent, undefined
+			).afterClosed().subscribe(
+				 (newTransaction?: Transaction) => {
+					if (newTransaction) {
+						this.snackbarService.showSuccess(`Transaction '${newTransaction.title.slice(0, 10)}${newTransaction.title.length > 10 ? '...' : ''}' created successfully!`);
+						this.dataChangedEvent.emit();
+					}
+				}
+			);
+		}
+
 	calcPercentage(amount: number): number {
 		return Math.floor((amount / this.totalExpense()) * 100);
 	}
+
+	get hasCategories(): boolean {
+		return this.categories().length > 0;
+	}
+
+	get hasTransactions(): boolean {
+		return this.categorySummaries().length > 0;
+	}
 }
diff --git a/frontend/Exence/src/app/private/dashboard/dashboard.component.html b/frontend/Exence/src/app/private/dashboard/dashboard.component.html
index 1768232..5f1c88a 100644
--- a/frontend/Exence/src/app/private/dashboard/dashboard.component.html
+++ b/frontend/Exence/src/app/private/dashboard/dashboard.component.html
@@ -38,7 +38,9 @@
 			<ex-categories
 				class="h-100"
 				[totalExpense]="totals.totalExpense"
-				[categories]="topCategories!"
+				[categorySummaries]="topCategories!"
+				[categories]="categories"
+				(dataChangedEvent)="onDataChanged()"
 			/>
 		</div>