improvements

src/app/add-student.component.ts

@@ -1,10 +1,18 @@
 import { CommonModule } from '@angular/common';
 import { Component, computed, inject } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import {
+	FormBuilder,
+	FormGroup,
+	ReactiveFormsModule,
+	Validators,
+} from '@angular/forms';
 import { Router } from '@angular/router';
+import { MessageService } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
+import { CardModule } from 'primeng/card';
 import { InputTextModule } from 'primeng/inputtext';
 import { MultiSelectModule } from 'primeng/multiselect';
+import { ToastModule } from 'primeng/toast';
 import { StudentService } from './student.service';
 import { LocaleStore } from './translations/locale.service';
 
@@ -13,105 +21,272 @@ import { LocaleStore } from './translations/locale.service';
 	standalone: true,
 	imports: [
 		CommonModule,
-		FormsModule,
+		ReactiveFormsModule,
 		InputTextModule,
 		MultiSelectModule,
 		ButtonModule,
+		CardModule,
+		ToastModule,
 	],
+	providers: [MessageService],
 	template: `
-		<div class="card-container">
+		<div class="form-container">
-			<h2 class="page-title">Add New Student</h2>
+			<p-card styleClass="form-card">
-			<form (ngSubmit)="submit()" #f="ngForm">
+				<ng-template pTemplate="header">
-				<div class="form-field">
+					<div class="card-header">
-					<label for="name">Name:</label>
+						<i class="pi pi-user-plus header-icon"></i>
-					<input
+						<h2 class="page-title">Add New Student</h2>
-						id="name"
+					</div>
-						pInputText
+				</ng-template>
-						[(ngModel)]="name"
+				<ng-template pTemplate="content">
-						name="name"
+					<form
-						required
+						[formGroup]="studentForm"
-						placeholder="Enter student name"
+						(ngSubmit)="submit()"
-					/>
+						class="student-form"
-				</div>
+					>
-				<div class="form-field">
+						<div class="form-field">
-					<label for="email">Email:</label>
+							<label for="name" class="form-label">
-					<input
+								<i class="pi pi-user field-icon"></i>
-						id="email"
+								Full Name
-						pInputText
+							</label>
-						[(ngModel)]="email"
+							<input
-						name="email"
+								id="name"
-						required
+								pInputText
-						type="email"
+								formControlName="name"
-						placeholder="Enter student email"
+								placeholder="Enter student's full name"
-					/>
+								class="form-input"
-				</div>
+								[class.ng-invalid]="isFieldInvalid('name')"
-				<div class="form-field">
+								[class.ng-dirty]="isFieldInvalid('name')"
-					<label for="courses">Courses:</label>
+							/>
-					<p-multiselect
+							<div *ngIf="isFieldInvalid('name')" class="error-message">
-						id="courses"
+								<i class="pi pi-exclamation-triangle"></i>
-						[options]="courseOptions()"
+								{{ getFieldError('name') }}
-						[(ngModel)]="selectedCourses"
+							</div>
-						name="courses"
+						</div>
-						placeholder="Select Courses"
+
-						[showToggleAll]="true"
+						<div class="form-field">
-					></p-multiselect>
+							<label for="email" class="form-label">
-				</div>
+								<i class="pi pi-envelope field-icon"></i>
-				<div class="form-actions">
+								Email Address
-					<button
+							</label>
-						pButton
+							<input
-						type="button"
+								id="email"
-						label="Cancel"
+								pInputText
-						class="p-button-outlined"
+								type="email"
-						(click)="cancel()"
+								formControlName="email"
-					></button>
+								placeholder="Enter student's email address"
-					<button
+								class="form-input"
-						pButton
+								[class.ng-invalid]="isFieldInvalid('email')"
-						type="submit"
+								[class.ng-dirty]="isFieldInvalid('email')"
-						label="Add Student"
+							/>
-						icon="pi pi-user-plus"
+							<div *ngIf="isFieldInvalid('email')" class="error-message">
-						class="p-button-primary"
+								<i class="pi pi-exclamation-triangle"></i>
-						[disabled]="f.invalid"
+								{{ getFieldError('email') }}
-					></button>
+							</div>
-				</div>
+						</div>
-			</form>
+
+						<div class="form-field">
+							<label for="courses" class="form-label">
+								<i class="pi pi-book field-icon"></i>
+								Courses
+							</label>
+							<p-multiselect
+								id="courses"
+								[options]="courseOptions()"
+								formControlName="courses"
+								placeholder="Select courses for the student"
+								[showToggleAll]="true"
+								[class.ng-invalid]="isFieldInvalid('courses')"
+								[class.ng-dirty]="isFieldInvalid('courses')"
+								styleClass="form-multiselect"
+							></p-multiselect>
+							<div *ngIf="isFieldInvalid('courses')" class="error-message">
+								<i class="pi pi-exclamation-triangle"></i>
+								{{ getFieldError('courses') }}
+							</div>
+						</div>
+
+						<div class="form-actions">
+							<button
+								pButton
+								type="button"
+								label="Cancel"
+								icon="pi pi-times"
+								class="p-button-outlined"
+								(click)="cancel()"
+							></button>
+							<button
+								pButton
+								type="submit"
+								label="Add Student"
+								icon="pi pi-user-plus"
+								class="p-button-primary"
+								[disabled]="studentForm.invalid || isSubmitting"
+								[loading]="isSubmitting"
+							></button>
+						</div>
+					</form>
+				</ng-template>
+			</p-card>
 		</div>
+
+		<p-toast></p-toast>
 	`,
 	styles: [
 		`
+			.form-container {
+				max-width: 600px;
+				margin: 2rem auto;
+				padding: 0 var(--spacing-md);
+			}
+
 			:host ::ng-deep {
-				.p-inputtext:enabled:focus {
+				.form-card {
-					border-color: var(--primary-color);
+					border-radius: var(--border-radius);
-					box-shadow: var(--focus-ring);
+					box-shadow: var(--card-shadow);
+					background: var(--card-background);
+					border: 1px solid var(--table-border-color);
+
+					.p-card-header {
+						background: linear-gradient(
+							135deg,
+							var(--primary-color),
+							var(--primary-light)
+						);
+						color: #ffffff !important;
+						padding: var(--spacing-lg);
+						border-radius: var(--border-radius) var(--border-radius) 0 0;
+					}
+
+					.p-card-body {
+						padding: var(--spacing-xl);
+					}
 				}
 
-				.p-multiselect:not(.p-disabled).p-focus {
+				.form-input,
-					border-color: var(--primary-color);
+				.form-multiselect {
-					box-shadow: var(--focus-ring);
+					width: 100%;
-				}
-
-				.p-inputtext,
-				.p-multiselect {
 					background-color: var(--card-background) !important;
 					color: var(--text-color) !important;
 					border-radius: var(--input-radius) !important;
 					border: 1px solid var(--table-border-color) !important;
 					transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s,
 						color 0.3s;
+					padding: var(--spacing-sm) var(--spacing-md) !important;
+
+					&:enabled:focus {
+						border-color: var(--primary-color) !important;
+						box-shadow: var(--focus-ring) !important;
+					}
+
+					&:enabled:hover {
+						border-color: var(--primary-light) !important;
+					}
+
+					&.ng-invalid.ng-dirty {
+						border-color: #e24c4c !important;
+						box-shadow: 0 0 0 2px rgba(226, 76, 76, 0.2) !important;
+					}
 				}
 
-				.p-inputtext:enabled:hover,
+				.p-multiselect {
-				.p-multiselect:not(.p-disabled):hover {
+					min-height: 2.5rem;
-					border-color: var(--primary-light);
+
+					.p-multiselect-label {
+						color: var(--text-color) !important;
+					}
+
+					.p-multiselect-trigger {
+						color: var(--text-secondary) !important;
+					}
 				}
 			}
 
-			.card-container {
+			.card-header {
-				max-width: 480px;
+				display: flex;
-				margin: 2rem auto;
+				align-items: center;
+				gap: var(--spacing-md);
+			}
+
+			.header-icon {
+				font-size: 1.5rem;
+				color: #ffffff !important;
+				text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+			}
+
+			.page-title {
+				margin: 0;
+				font-weight: 700;
+				font-size: 1.5rem;
+				letter-spacing: 0.5px;
+				color: #ffffff !important;
+				text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+			}
+
+			.student-form {
+				display: flex;
+				flex-direction: column;
+				gap: var(--spacing-lg);
+			}
+
+			.form-field {
+				display: flex;
+				flex-direction: column;
+				gap: var(--spacing-sm);
+			}
+
+			.form-label {
+				display: flex;
+				align-items: center;
+				gap: var(--spacing-sm);
+				font-weight: 600;
+				color: var(--text-color);
+				letter-spacing: 0.2px;
+			}
+
+			.field-icon {
+				color: var(--primary-color);
+				font-size: 0.875rem;
+			}
+
+			.error-message {
+				display: flex;
+				align-items: center;
+				gap: var(--spacing-xs);
+				color: #e24c4c;
+				font-size: 0.875rem;
+				font-weight: 500;
+				margin-top: var(--spacing-xs);
 			}
 
 			.form-actions {
-				margin-top: var(--spacing-lg);
+				display: flex;
+				justify-content: flex-end;
+				gap: var(--spacing-md);
+				margin-top: var(--spacing-xl);
+				padding-top: var(--spacing-lg);
+				border-top: 1px solid var(--table-border-color);
+			}
+
+			@media (max-width: 768px) {
+				.form-container {
+					margin: 1rem auto;
+					padding: 0 var(--spacing-sm);
+				}
+
+				:host ::ng-deep {
+					.form-card .p-card-body {
+						padding: var(--spacing-lg);
+					}
+				}
+
+				.form-actions {
+					flex-direction: column;
+
+					.p-button {
+						width: 100%;
+					}
+				}
 			}
 		`,
 	],
@@ -120,10 +295,16 @@ export class AddStudentComponent {
 	private readonly studentService = inject(StudentService);
 	private readonly localeStore = inject(LocaleStore);
 	private readonly router = inject(Router);
+	private readonly fb = inject(FormBuilder);
+	private readonly messageService = inject(MessageService);
 
-	protected name = '';
+	protected isSubmitting = false;
-	protected email = '';
+
-	protected selectedCourses: string[] = [];
+	protected studentForm: FormGroup = this.fb.group({
+		name: ['', [Validators.required, Validators.minLength(2)]],
+		email: ['', [Validators.required, Validators.email]],
+		courses: [[], [Validators.required, Validators.minLength(1)]],
+	});
 
 	protected courseOptions = computed(() => {
 		return [
@@ -135,16 +316,63 @@ export class AddStudentComponent {
 			'History',
 			'Literature',
 			'Physical Education',
+			'Art',
+			'Music',
+			'Geography',
+			'Economics',
 		].map((course) => ({ label: course, value: course }));
 	});
 
+	protected isFieldInvalid(fieldName: string): boolean {
+		const field = this.studentForm.get(fieldName);
+		return field ? field.invalid && field.dirty : false;
+	}
+
+	protected getFieldError(fieldName: string): string {
+		const field = this.studentForm.get(fieldName);
+		if (!field || !field.errors) return '';
+
+		if (field.errors['required']) return `${fieldName} is required`;
+		if (field.errors['email']) return 'Please enter a valid email address';
+		if (field.errors['minlength']) {
+			const requiredLength = field.errors['minlength'].requiredLength;
+			return `${fieldName} must be at least ${requiredLength} characters`;
+		}
+		if (field.errors['minLength']) return `Please select at least one course`;
+
+		return 'Invalid input';
+	}
+
 	submit() {
-		this.studentService.addStudent({
+		if (this.studentForm.valid) {
-			name: this.name,
+			this.isSubmitting = true;
-			email: this.email,
+
-			courses: this.selectedCourses,
+			const formValue = this.studentForm.value;
-		});
+			this.studentService.addStudent({
-		this.router.navigate([`/${this.localeStore.getCurrentLocale()}/students`]);
+				name: formValue.name,
+				email: formValue.email,
+				courses: formValue.courses,
+			});
+
+			this.messageService.add({
+				severity: 'success',
+				summary: 'Success',
+				detail: `Student ${formValue.name} has been added successfully`,
+			});
+
+			setTimeout(() => {
+				this.router.navigate([
+					`/${this.localeStore.getCurrentLocale()}/students`,
+				]);
+			}, 1000);
+		} else {
+			this.studentForm.markAllAsTouched();
+			this.messageService.add({
+				severity: 'error',
+				summary: 'Validation Error',
+				detail: 'Please fix the errors in the form',
+			});
+		}
 	}
 
 	cancel() {

src/app/app.component.ts

@@ -1,77 +1,79 @@
 import { Component, computed, inject, OnInit } from '@angular/core';
-import { RouterLink, RouterOutlet } from '@angular/router';
+import { RouterOutlet } from '@angular/router';
 import { stored } from '@mmstack/primitives';
 import { ButtonModule } from 'primeng/button';
-import { OverlayPanelModule } from 'primeng/overlaypanel';
+import { MenubarModule } from 'primeng/menubar';
+import { PopoverModule } from 'primeng/popover';
 import { TooltipModule } from 'primeng/tooltip';
+import { injectAppT } from './translations/app.t';
 import { LocaleStore } from './translations/locale.service';
+import { AppTranslatePipe } from './translations/translate.pipe';
 
 @Component({
 	selector: 'app-root',
 	standalone: true,
 	imports: [
 		RouterOutlet,
-		RouterLink,
 		ButtonModule,
-		OverlayPanelModule,
+		MenubarModule,
+		PopoverModule,
 		TooltipModule,
+		AppTranslatePipe,
 	],
 	template: `
-		<header class="navbar">
+		<p-menubar [model]="menuItems()" styleClass="custom-menubar">
-			<div class="navbar-left">
+			<ng-template pTemplate="start">
-				<span class="app-title">StudentInfo</span>
+				<div class="logo-container">
-			</div>
+					<i class="pi pi-graduation-cap logo-icon"></i>
-			<nav class="navbar-center">
+					<span class="logo-text">StudentInfo</span>
-				<a [routerLink]="overviewUrl()" routerLinkActive="active">Overview</a>
+				</div>
-				<a [routerLink]="addStudentUrl()" routerLinkActive="active"
+			</ng-template>
-					>Add Student</a
+			<ng-template pTemplate="end">
-				>
+				<div class="user-actions">
-			</nav>
+					<button
-			<div class="navbar-right">
+						pButton
-				<button
+						class="p-button-text p-button-rounded theme-toggle-btn"
-					pButton
+						[icon]="isDarkMode() ? 'pi pi-sun' : 'pi pi-moon'"
-					class="p-button-text p-button-rounded theme-toggle-btn"
+						(click)="toggleTheme()"
-					[icon]="isDarkMode() ? 'pi pi-sun' : 'pi pi-moon'"
+						[pTooltip]="'app.toggleTheme' | translate"
-					(click)="toggleTheme()"
+						tooltipPosition="bottom"
-					pTooltip="Toggle theme"
+					></button>
-					tooltipPosition="bottom"
+					<button
-				></button>
+						pButton
-				<!-- Language Selector Button -->
+						type="button"
-				<button
+						[label]="currentLocale() === 'en' ? 'EN' : 'SL'"
-					pButton
+						class="p-button-rounded p-button-text language-selector"
-					type="button"
+						(click)="languagePopover.toggle($event)"
-					[label]="currentLocale() === 'en' ? 'EN' : 'SL'"
+						[pTooltip]="'app.changeLanguage' | translate"
-					class="p-button-rounded p-button-text language-selector"
+						tooltipPosition="bottom"
-					(click)="languagePanel.toggle($event)"
+					></button>
-					pTooltip="Change language"
+					<p-popover #languagePopover>
-					tooltipPosition="bottom"
+						<div class="language-options">
-				></button>
+							<button
-
+								pButton
-				<!-- Language Selection Panel -->
+								type="button"
-				<p-overlayPanel #languagePanel>
+								[label]="'app.english' | translate"
-					<div class="language-options">
+								(click)="changeLanguage('en'); languagePopover.hide()"
-						<button
+								[class.active]="currentLocale() === 'en'"
-							pButton
+								class="p-button-text w-full text-left"
-							type="button"
+							></button>
-							label="English"
+							<button
-							(click)="changeLanguage('en'); languagePanel.hide()"
+								pButton
-							[class.active]="currentLocale() === 'en'"
+								type="button"
-							class="p-button-text w-full text-left"
+								[label]="'app.slovenian' | translate"
-						></button>
+								(click)="changeLanguage('sl'); languagePopover.hide()"
-						<button
+								[class.active]="currentLocale() === 'sl'"
-							pButton
+								class="p-button-text w-full text-left"
-							type="button"
+							></button>
-							label="Slovenian"
+						</div>
-							(click)="changeLanguage('sl'); languagePanel.hide()"
+					</p-popover>
-							[class.active]="currentLocale() === 'sl'"
+					<div class="user-profile">
-							class="p-button-text w-full text-left"
+						<img class="avatar" src="/placeholder-user.jpg" alt="User" />
-						></button>
+						<span class="username">Gal Podlipnik</span>
 					</div>
-				</p-overlayPanel>
+				</div>
-				<img class="avatar" src="/placeholder-user.jpg" alt="User" />
+			</ng-template>
-				<span class="username">Gal Podlipnik</span>
+		</p-menubar>
-			</div>
-		</header>
 		<main class="main-content">
 			<div class="container">
 				<router-outlet></router-outlet>
@@ -80,21 +82,73 @@ import { LocaleStore } from './translations/locale.service';
 	`,
 	styles: [
 		`
-			.navbar {
+			:host ::ng-deep {
-				display: flex;
+				.custom-menubar {
-				align-items: center;
+					background: var(--primary-color);
-				justify-content: space-between;
+					border: none;
-				background-color: var(--primary-color);
+					border-radius: 0;
-				padding: 0 var(--spacing-lg);
+					padding: 0 var(--spacing-lg);
-				height: 4rem;
+					box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
-				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+					position: sticky;
-				position: sticky;
+					top: 0;
-				top: 0;
+					z-index: 1000;
-				z-index: 1000;
+					transition: background-color 0.3s;
-				transition: background-color 0.3s;
+
+					.p-menubar-root-list {
+						background: transparent;
+						border: none;
+						padding: 0;
+					}
+
+					.p-menuitem-link {
+						color: rgba(255, 255, 255, 0.95) !important;
+						font-weight: 500;
+						padding: var(--spacing-sm) var(--spacing-md) !important;
+						border-radius: var(--input-radius);
+						transition: all 0.2s;
+
+						&:hover {
+							background: rgba(255, 255, 255, 0.15) !important;
+							color: #fff !important;
+						}
+
+						&.p-highlight {
+							background: rgba(255, 255, 255, 0.25) !important;
+							color: #fff !important;
+						}
+
+						.p-menuitem-icon {
+							color: rgba(255, 255, 255, 0.95) !important;
+							font-weight: 600;
+							text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+						}
+					}
+
+					.p-menubar-button {
+						color: #fff !important;
+						background: transparent !important;
+						border: none !important;
+						box-shadow: none !important;
+
+						&:hover {
+							background: rgba(255, 255, 255, 0.1) !important;
+						}
+					}
+				}
 			}
 
-			.navbar-left .app-title {
+			.logo-container {
+				display: flex;
+				align-items: center;
+				gap: var(--spacing-sm);
+			}
+
+			.logo-icon {
+				font-size: 1.5rem;
+				color: #fff;
+			}
+
+			.logo-text {
 				color: #fff;
 				font-size: 1.5rem;
 				font-weight: 700;
@@ -102,78 +156,107 @@ import { LocaleStore } from './translations/locale.service';
 				text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 			}
 
-			.navbar-center a {
+			.user-actions {
-				color: rgba(255, 255, 255, 0.85);
+				display: flex;
-				margin: 0 var(--spacing-md);
+				align-items: center;
-				text-decoration: none;
+				gap: var(--spacing-md);
-				font-weight: 500;
+			}
-				padding: var(--spacing-sm) 0;
+
-				position: relative;
+			.theme-toggle-btn {
-				transition: color 0.2s;
+				background: rgba(255, 255, 255, 0.15) !important;
+				color: #fff !important;
+				border: 1px solid rgba(255, 255, 255, 0.25) !important;
+				width: 2.5rem;
+				height: 2.5rem;
+				text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 
-				&.active,
 				&:hover {
-					color: #fff;
+					background: rgba(255, 255, 255, 0.25) !important;
-
+					border-color: rgba(255, 255, 255, 0.35) !important;
-					&::after {
-						content: '';
-						position: absolute;
-						bottom: -2px;
-						left: 0;
-						width: 100%;
-						height: 2px;
-						background-color: #fff;
-						border-radius: 2px;
-					}
 				}
 			}
 
-			.navbar-right {
+			.language-selector {
+				background: rgba(255, 255, 255, 0.15) !important;
+				color: #fff !important;
+				border: 1px solid rgba(255, 255, 255, 0.25) !important;
+				min-width: 3rem;
+				text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+
+				&:hover {
+					background: rgba(255, 255, 255, 0.25) !important;
+					border-color: rgba(255, 255, 255, 0.35) !important;
+				}
+			}
+
+			.user-profile {
 				display: flex;
 				align-items: center;
-				gap: 1rem;
+				gap: var(--spacing-sm);
 			}
 
 			.avatar {
-				width: 2.5rem;
+				width: 2rem;
-				height: 2.5rem;
+				height: 2rem;
 				border-radius: 50%;
-				margin-right: var(--spacing-sm);
 				object-fit: cover;
 				border: 2px solid rgba(255, 255, 255, 0.3);
-				box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
 				background: #fff;
 			}
 
 			.username {
 				color: #fff;
 				font-weight: 500;
-				margin-left: 0.25rem;
+				font-size: 0.9rem;
 				text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 			}
 
-			.theme-toggle-btn {
+			.language-options {
-				background: #fff !important;
+				display: flex;
-				color: var(--primary-color) !important;
+				flex-direction: column;
-				border-radius: 50%;
+				gap: var(--spacing-xs);
-				cursor: pointer;
+				min-width: 120px;
 			}
 
-			.language-selector {
+			:host ::ng-deep {
-				background: #fff !important;
+				.p-popover {
-				color: var(--primary-color) !important;
+					background-color: var(--card-background) !important;
-				cursor: pointer;
+					border: 1px solid var(--table-border-color) !important;
-			}
+					box-shadow: var(--card-shadow) !important;
+					border-radius: var(--border-radius) !important;
 
-			.dark-theme .language-selector {
+					.p-popover-content {
-				background: #fff !important;
+						background-color: var(--card-background) !important;
-				color: var(--primary-color) !important;
+						color: var(--text-color) !important;
-				border: 1.5px solid var(--primary-light);
+						padding: var(--spacing-md) !important;
-			}
+					}
 
-			:root .theme-toggle-btn {
+					.p-popover-arrow {
-				--theme-toggle-bg: #f3f4f8;
+						background-color: var(--card-background) !important;
-				--theme-toggle-icon: #23272f;
+						border-color: var(--table-border-color) !important;
+					}
+				}
+
+				.p-button-text {
+					color: var(--text-color) !important;
+					background: transparent !important;
+					border: none !important;
+					padding: var(--spacing-sm) var(--spacing-md) !important;
+					border-radius: var(--input-radius) !important;
+					transition: all 0.2s !important;
+					text-align: left !important;
+					width: 100% !important;
+
+					&:hover {
+						background-color: var(--primary-lighter) !important;
+						color: var(--primary-color) !important;
+					}
+
+					&.active {
+						background-color: var(--primary-color) !important;
+						color: #ffffff !important;
+					}
+				}
 			}
 
 			.main-content {
@@ -190,19 +273,14 @@ import { LocaleStore } from './translations/locale.service';
 			}
 
 			@media (max-width: 768px) {
-				.navbar {
+				.user-actions {
-					flex-direction: column;
+					gap: var(--spacing-sm);
-					height: auto;
-					padding: var(--spacing-md);
 				}
 
-				.navbar-center {
+				.user-profile {
-					margin: var(--spacing-md) 0;
+					.username {
-				}
+						display: none;
-
+					}
-				.navbar-right {
-					width: 100%;
-					justify-content: flex-end;
 				}
 
 				.main-content {
@@ -217,13 +295,21 @@ export class App implements OnInit {
 		key: 'theme',
 	});
 	private readonly locale = inject(LocaleStore);
+	private readonly t = injectAppT();
 
 	currentLocale = computed(() => this.locale.getCurrentLocale());
-
 	isDarkMode = computed(() => this.theme() === 'dark');
 
-	overviewUrl = computed(() => `/${this.currentLocale()}/students`);
+	menuItems = computed(() => [
-	addStudentUrl = computed(() => `/${this.currentLocale()}/students/add`);
+		{
+			label: this.t('app.overview'),
+			routerLink: `/${this.currentLocale()}/students`,
+		},
+		{
+			label: this.t('app.addStudent'),
+			routerLink: `/${this.currentLocale()}/students/add`,
+		},
+	]);
 
 	ngOnInit() {
 		this.applyTheme();

src/app/app.config.ts

@@ -31,4 +31,3 @@ export const appConfig: ApplicationConfig = {
 		}),
 	],
 };
-

src/app/edit-student.component.ts

@@ -1,11 +1,19 @@
 import { CommonModule } from '@angular/common';
-import { Component, computed, inject, OnInit, signal } from '@angular/core';
+import { Component, computed, inject, OnInit } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import {
+	FormBuilder,
+	FormGroup,
+	ReactiveFormsModule,
+	Validators,
+} from '@angular/forms';
 import { Router } from '@angular/router';
 import { queryParam } from '@mmstack/router-core';
+import { MessageService } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
+import { CardModule } from 'primeng/card';
 import { InputTextModule } from 'primeng/inputtext';
 import { MultiSelectModule } from 'primeng/multiselect';
+import { ToastModule } from 'primeng/toast';
 import { StudentService } from './student.service';
 import { LocaleStore } from './translations/locale.service';
 
@@ -14,131 +22,333 @@ import { LocaleStore } from './translations/locale.service';
 	standalone: true,
 	imports: [
 		CommonModule,
-		FormsModule,
+		ReactiveFormsModule,
 		InputTextModule,
 		MultiSelectModule,
 		ButtonModule,
+		CardModule,
+		ToastModule,
 	],
+	providers: [MessageService],
 	template: `
-		<div class="card-container">
+		<div class="form-container">
-			<h2 class="page-title">Edit Student</h2>
 			@if (student()) {
-			<form #f="ngForm">
+			<p-card styleClass="form-card">
-				<div class="form-field">
+				<ng-template pTemplate="header">
-					<label for="name">Name:</label>
+					<div class="card-header">
-					<input
+						<i class="pi pi-user-edit header-icon"></i>
-						id="name"
+						<h2 class="page-title">Edit Student</h2>
-						pInputText
+					</div>
-						[(ngModel)]="editedStudent().name"
+				</ng-template>
-						name="name"
+				<ng-template pTemplate="content">
-					/>
+					<form
-				</div>
+						[formGroup]="studentForm"
-				<div class="form-field">
+						(ngSubmit)="save()"
-					<label for="email">Email:</label>
+						class="student-form"
-					<input
+					>
-						id="email"
+						<div class="form-field">
-						pInputText
+							<label for="name" class="form-label">
-						[(ngModel)]="editedStudent().email"
+								<i class="pi pi-user field-icon"></i>
-						name="email"
+								Full Name
-					/>
+							</label>
-				</div>
+							<input
-				<div class="form-field">
+								id="name"
-					<label for="courses">Courses:</label>
+								pInputText
-					<p-multiselect
+								formControlName="name"
-						id="courses"
+								placeholder="Enter student's full name"
-						[options]="courseOptions()"
+								class="form-input"
-						[(ngModel)]="editedStudent().courses"
+								[class.ng-invalid]="isFieldInvalid('name')"
-						name="courses"
+								[class.ng-dirty]="isFieldInvalid('name')"
-						placeholder="Select Courses"
+							/>
-						[showToggleAll]="true"
+							<div *ngIf="isFieldInvalid('name')" class="error-message">
-					></p-multiselect>
+								<i class="pi pi-exclamation-triangle"></i>
-				</div>
+								{{ getFieldError('name') }}
-				<div class="form-actions">
+							</div>
-					<button
+						</div>
-						pButton
+
-						type="button"
+						<div class="form-field">
-						label="Cancel"
+							<label for="email" class="form-label">
-						class="p-button-outlined"
+								<i class="pi pi-envelope field-icon"></i>
-						(click)="cancel()"
+								Email Address
-					></button>
+							</label>
-					<button
+							<input
-						pButton
+								id="email"
-						type="button"
+								pInputText
-						label="Save Changes"
+								type="email"
-						icon="pi pi-save"
+								formControlName="email"
-						class="p-button-primary"
+								placeholder="Enter student's email address"
-						(click)="save()"
+								class="form-input"
-					></button>
+								[class.ng-invalid]="isFieldInvalid('email')"
-				</div>
+								[class.ng-dirty]="isFieldInvalid('email')"
-			</form>
+							/>
+							<div *ngIf="isFieldInvalid('email')" class="error-message">
+								<i class="pi pi-exclamation-triangle"></i>
+								{{ getFieldError('email') }}
+							</div>
+						</div>
+
+						<div class="form-field">
+							<label for="courses" class="form-label">
+								<i class="pi pi-book field-icon"></i>
+								Courses
+							</label>
+							<p-multiselect
+								id="courses"
+								[options]="courseOptions()"
+								formControlName="courses"
+								placeholder="Select courses for the student"
+								[showToggleAll]="true"
+								[class.ng-invalid]="isFieldInvalid('courses')"
+								[class.ng-dirty]="isFieldInvalid('courses')"
+								styleClass="form-multiselect"
+							></p-multiselect>
+							<div *ngIf="isFieldInvalid('courses')" class="error-message">
+								<i class="pi pi-exclamation-triangle"></i>
+								{{ getFieldError('courses') }}
+							</div>
+						</div>
+
+						<div class="form-actions">
+							<button
+								pButton
+								type="button"
+								label="Cancel"
+								icon="pi pi-times"
+								class="p-button-outlined"
+								(click)="cancel()"
+							></button>
+							<button
+								pButton
+								type="submit"
+								label="Save Changes"
+								icon="pi pi-save"
+								class="p-button-primary"
+								[disabled]="studentForm.invalid || isSubmitting"
+								[loading]="isSubmitting"
+							></button>
+						</div>
+					</form>
+				</ng-template>
+			</p-card>
 			} @if (!student()) {
-			<div class="not-found-message">
+			<p-card styleClass="error-card">
-				<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
+				<ng-template pTemplate="content">
-				<p>Student not found. Please return to the overview page.</p>
+					<div class="not-found-content">
-				<button
+						<i class="pi pi-exclamation-triangle error-icon"></i>
-					pButton
+						<h3>Student Not Found</h3>
-					type="button"
+						<p>
-					label="Back to Overview"
+							The student you're looking for doesn't exist or has been removed.
-					icon="pi pi-arrow-left"
+						</p>
-					(click)="cancel()"
+						<button
-				></button>
+							pButton
-			</div>
+							type="button"
+							label="Back to Overview"
+							icon="pi pi-arrow-left"
+							class="p-button-primary"
+							(click)="cancel()"
+						></button>
+					</div>
+				</ng-template>
+			</p-card>
 			}
 		</div>
+
+		<p-toast></p-toast>
 	`,
 	styles: [
 		`
+			.form-container {
+				max-width: 600px;
+				margin: 2rem auto;
+				padding: 0 var(--spacing-md);
+			}
+
 			:host ::ng-deep {
-				.p-inputtext:disabled {
+				.form-card {
-					opacity: 0.8;
+					border-radius: var(--border-radius);
-					background-color: #f5f5f5;
+					box-shadow: var(--card-shadow);
-					color: var(--text-secondary);
+					background: var(--card-background);
+					border: 1px solid var(--table-border-color);
+
+					.p-card-header {
+						background: linear-gradient(
+							135deg,
+							var(--primary-color),
+							var(--primary-light)
+						);
+						color: #ffffff !important;
+						padding: var(--spacing-lg);
+						border-radius: var(--border-radius) var(--border-radius) 0 0;
+					}
+
+					.p-card-body {
+						padding: var(--spacing-xl);
+					}
 				}
 
-				.p-inputtext,
+				.error-card {
-				.p-multiselect {
+					border-radius: var(--border-radius);
+					box-shadow: var(--card-shadow);
+					background: var(--card-background);
+					border: 1px solid #e24c4c;
+
+					.p-card-body {
+						padding: var(--spacing-xl);
+					}
+				}
+
+				.form-input,
+				.form-multiselect {
+					width: 100%;
 					background-color: var(--card-background) !important;
 					color: var(--text-color) !important;
 					border-radius: var(--input-radius) !important;
 					border: 1px solid var(--table-border-color) !important;
 					transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s,
 						color 0.3s;
+					padding: var(--spacing-sm) var(--spacing-md) !important;
+
+					&:enabled:focus {
+						border-color: var(--primary-color) !important;
+						box-shadow: var(--focus-ring) !important;
+					}
+
+					&:enabled:hover {
+						border-color: var(--primary-light) !important;
+					}
+
+					&.ng-invalid.ng-dirty {
+						border-color: #e24c4c !important;
+						box-shadow: 0 0 0 2px rgba(226, 76, 76, 0.2) !important;
+					}
 				}
 
-				.p-inputtext:enabled:focus,
+				.p-multiselect {
-				.p-multiselect:not(.p-disabled).p-focus {
+					min-height: 2.5rem;
-					border-color: var(--primary-color);
-					box-shadow: var(--focus-ring);
-				}
 
-				.p-inputtext:enabled:hover,
+					.p-multiselect-label {
-				.p-multiselect:not(.p-disabled):hover {
+						color: var(--text-color) !important;
-					border-color: var(--primary-light);
+					}
+
+					.p-multiselect-trigger {
+						color: var(--text-secondary) !important;
+					}
 				}
 			}
 
-			.card-container {
+			.card-header {
-				max-width: 480px;
+				display: flex;
-				margin: 2rem auto;
+				align-items: center;
+				gap: var(--spacing-md);
+			}
+
+			.header-icon {
+				font-size: 1.5rem;
+				color: #ffffff !important;
+				text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+			}
+
+			.page-title {
+				margin: 0;
+				font-weight: 700;
+				font-size: 1.5rem;
+				letter-spacing: 0.5px;
+				color: #ffffff !important;
+				text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+			}
+
+			.student-form {
+				display: flex;
+				flex-direction: column;
+				gap: var(--spacing-lg);
+			}
+
+			.form-field {
+				display: flex;
+				flex-direction: column;
+				gap: var(--spacing-sm);
+			}
+
+			.form-label {
+				display: flex;
+				align-items: center;
+				gap: var(--spacing-sm);
+				font-weight: 600;
+				color: var(--text-color);
+				letter-spacing: 0.2px;
+			}
+
+			.field-icon {
+				color: var(--primary-color);
+				font-size: 0.875rem;
+			}
+
+			.error-message {
+				display: flex;
+				align-items: center;
+				gap: var(--spacing-xs);
+				color: #e24c4c;
+				font-size: 0.875rem;
+				font-weight: 500;
+				margin-top: var(--spacing-xs);
 			}
 
 			.form-actions {
-				margin-top: var(--spacing-lg);
+				display: flex;
+				justify-content: flex-end;
+				gap: var(--spacing-md);
+				margin-top: var(--spacing-xl);
+				padding-top: var(--spacing-lg);
+				border-top: 1px solid var(--table-border-color);
 			}
 
-			.not-found-message {
+			.not-found-content {
-				text-align: center;
-				padding: 2rem;
-				color: #d32f2f;
 				display: flex;
 				flex-direction: column;
 				align-items: center;
-				gap: 1rem;
+				text-align: center;
+				gap: var(--spacing-lg);
 			}
 
-			.not-found-message p {
+			.error-icon {
-				font-size: 1.2rem;
+				font-size: 3rem;
-				margin: 1rem 0;
+				color: #e24c4c;
+			}
+
+			.not-found-content h3 {
+				margin: 0;
+				color: var(--text-color);
+				font-weight: 600;
+				font-size: 1.5rem;
+			}
+
+			.not-found-content p {
+				margin: 0;
+				color: var(--text-secondary);
+				font-size: 1rem;
+				max-width: 400px;
+			}
+
+			@media (max-width: 768px) {
+				.form-container {
+					margin: 1rem auto;
+					padding: 0 var(--spacing-sm);
+				}
+
+				:host ::ng-deep {
+					.form-card .p-card-body,
+					.error-card .p-card-body {
+						padding: var(--spacing-lg);
+					}
+				}
+
+				.form-actions {
+					flex-direction: column;
+
+					.p-button {
+						width: 100%;
+					}
+				}
 			}
 		`,
 	],
@@ -148,16 +358,20 @@ export class EditStudentComponent implements OnInit {
 	private readonly localeStore = inject(LocaleStore);
 	private readonly router = inject(Router);
 	private readonly queryId = queryParam('id');
+	private readonly fb = inject(FormBuilder);
+	private readonly messageService = inject(MessageService);
+
+	protected isSubmitting = false;
 
 	protected student = computed(() =>
 		this.studentService.getStudentById(this.queryId() ?? '')
 	);
 
-	protected editedStudent = signal({
+	protected studentForm: FormGroup = this.fb.group({
-		id: '',
+		id: [''],
-		name: '',
+		name: ['', [Validators.required, Validators.minLength(2)]],
-		email: '',
+		email: ['', [Validators.required, Validators.email]],
-		courses: [] as string[],
+		courses: [[], [Validators.required, Validators.minLength(1)]],
 	});
 
 	protected courseOptions = computed(() => {
@@ -170,26 +384,71 @@ export class EditStudentComponent implements OnInit {
 			'History',
 			'Literature',
 			'Physical Education',
+			'Art',
+			'Music',
+			'Geography',
+			'Economics',
 		].map((course) => ({ label: course, value: course }));
 	});
 
 	ngOnInit() {
 		const currentStudent = this.student();
 		if (currentStudent) {
-			this.editedStudent.set({
+			this.studentForm.patchValue({
 				id: currentStudent.id,
 				name: currentStudent.name,
 				email: currentStudent.email,
 				courses: [...currentStudent.courses],
 			});
-		} else {
-			console.error('Student not found');
 		}
 	}
 
+	protected isFieldInvalid(fieldName: string): boolean {
+		const field = this.studentForm.get(fieldName);
+		return field ? field.invalid && field.dirty : false;
+	}
+
+	protected getFieldError(fieldName: string): string {
+		const field = this.studentForm.get(fieldName);
+		if (!field || !field.errors) return '';
+
+		if (field.errors['required']) return `${fieldName} is required`;
+		if (field.errors['email']) return 'Please enter a valid email address';
+		if (field.errors['minlength']) {
+			const requiredLength = field.errors['minlength'].requiredLength;
+			return `${fieldName} must be at least ${requiredLength} characters`;
+		}
+		if (field.errors['minLength']) return `Please select at least one course`;
+
+		return 'Invalid input';
+	}
+
 	save() {
-		this.studentService.updateStudent(this.editedStudent());
+		if (this.studentForm.valid) {
-		this.router.navigate([`/${this.localeStore.getCurrentLocale()}/students`]);
+			this.isSubmitting = true;
+
+			const formValue = this.studentForm.value;
+			this.studentService.updateStudent(formValue);
+
+			this.messageService.add({
+				severity: 'success',
+				summary: 'Success',
+				detail: `Student ${formValue.name} has been updated successfully`,
+			});
+
+			setTimeout(() => {
+				this.router.navigate([
+					`/${this.localeStore.getCurrentLocale()}/students`,
+				]);
+			}, 1000);
+		} else {
+			this.studentForm.markAllAsTouched();
+			this.messageService.add({
+				severity: 'error',
+				summary: 'Validation Error',
+				detail: 'Please fix the errors in the form',
+			});
+		}
 	}
 
 	cancel() {

src/app/overview.component.ts

@@ -1,25 +1,55 @@
 import { CommonModule } from '@angular/common';
 import { Component, computed, inject } from '@angular/core';
 import { Router } from '@angular/router';
+import { ConfirmationService } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { TableModule } from 'primeng/table';
+import { TagModule } from 'primeng/tag';
+import { TooltipModule } from 'primeng/tooltip';
 import { StudentService } from './student.service';
+import { injectAppT } from './translations/app.t';
 import { LocaleStore } from './translations/locale.service';
 import { AppTranslatePipe } from './translations/translate.pipe';
 
 @Component({
 	selector: 'app-overview',
 	standalone: true,
-	imports: [CommonModule, TableModule, ButtonModule, AppTranslatePipe],
+	imports: [
+		CommonModule,
+		TableModule,
+		ButtonModule,
+		ConfirmDialogModule,
+		TagModule,
+		TooltipModule,
+		AppTranslatePipe,
+	],
+	providers: [ConfirmationService],
 	template: `
-		<div>
+		<div class="overview-container">
-			<div class="header-actions">
+			<div class="header-section">
-				<h2 class="page-title">{{ 'app.studentOverview' | translate }}</h2>
+				<div class="header-content">
-				<div class="action-buttons-header">
+					<div class="title-section">
+						<i class="pi pi-users title-icon"></i>
+						<h2 class="page-title">{{ 'app.studentOverview' | translate }}</h2>
+					</div>
+					<div class="stats-section">
+						<div class="stat-card">
+							<i class="pi pi-users stat-icon"></i>
+							<div class="stat-content">
+								<span class="stat-number">{{ students().length }}</span>
+								<span class="stat-label">{{
+									'app.totalStudents' | translate
+								}}</span>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="action-buttons">
 					<button
 						pButton
 						type="button"
-						label="Add New Student"
+						[label]="'app.addNewStudent' | translate"
 						icon="pi pi-plus"
 						class="p-button-primary"
 						(click)="goToAdd()"
@@ -27,11 +57,13 @@ import { AppTranslatePipe } from './translations/translate.pipe';
 					<button
 						pButton
 						type="button"
-						label="Generate Mock Data"
+						[label]="'app.generateMockData' | translate"
 						icon="pi pi-refresh"
 						class="p-button-secondary"
 						(click)="generateMock()"
 						[disabled]="students().length > 0"
+						[pTooltip]="'app.generateSampleData' | translate"
+						tooltipPosition="top"
 					></button>
 				</div>
 			</div>
@@ -46,41 +78,86 @@ import { AppTranslatePipe } from './translations/translate.pipe';
 				[stripedRows]="true"
 				styleClass="p-datatable-rounded"
 				[responsiveLayout]="'stack'"
+				[loading]="false"
+				[showLoader]="false"
 			>
 				<ng-template pTemplate="header">
 					<tr>
-						<th>Name</th>
+						<th>
-						<th>Email</th>
+							<div class="column-header">
-						<th>Courses</th>
+								<i class="pi pi-user column-icon"></i>
-						<th style="width: 150px">Actions</th>
+								{{ 'app.name' | translate }}
+							</div>
+						</th>
+						<th>
+							<div class="column-header">
+								<i class="pi pi-envelope column-icon"></i>
+								{{ 'app.email' | translate }}
+							</div>
+						</th>
+						<th>
+							<div class="column-header">
+								<i class="pi pi-book column-icon"></i>
+								{{ 'app.courses' | translate }}
+							</div>
+						</th>
+						<th style="width: 150px">
+							<div class="column-header">
+								<i class="pi pi-cog column-icon"></i>
+								{{ 'app.actions' | translate }}
+							</div>
+						</th>
 					</tr>
 				</ng-template>
-				<ng-template pTemplate="body" let-st>
+				<ng-template pTemplate="body" let-student>
 					<tr>
-						<td><span class="p-column-title">Name</span>{{ st.name }}</td>
-						<td><span class="p-column-title">Email</span>{{ st.email }}</td>
 						<td>
-							<span class="p-column-title">Courses</span
+							<span class="p-column-title">{{ 'app.name' | translate }}</span>
-							>{{ st.courses.join(', ') }}
+							<div class="student-name">
+								<i class="pi pi-user student-icon"></i>
+								{{ student.name }}
+							</div>
 						</td>
 						<td>
-							<span class="p-column-title">Actions</span>
+							<span class="p-column-title">{{ 'app.email' | translate }}</span>
+							<div class="student-email">
+								<i class="pi pi-envelope email-icon"></i>
+								{{ student.email }}
+							</div>
+						</td>
+						<td>
+							<span class="p-column-title">{{
+								'app.courses' | translate
+							}}</span>
+							<div class="courses-container">
+								<p-tag
+									*ngFor="let course of student.courses"
+									[value]="course"
+									severity="info"
+									styleClass="course-tag"
+								></p-tag>
+							</div>
+						</td>
+						<td>
+							<span class="p-column-title">{{
+								'app.actions' | translate
+							}}</span>
 							<div class="action-buttons">
 								<button
 									pButton
 									icon="pi pi-pencil"
-									class="p-button-rounded p-button-text"
+									class="p-button-rounded p-button-text p-button-success"
 									tooltipPosition="top"
-									pTooltip="Edit Student"
+									[pTooltip]="'app.editStudent' | translate"
-									(click)="editStudent(st.id)"
+									(click)="editStudent(student.id)"
 								></button>
 								<button
 									pButton
 									icon="pi pi-trash"
 									class="p-button-rounded p-button-text p-button-danger"
 									tooltipPosition="top"
-									pTooltip="Delete Student"
+									[pTooltip]="'app.deleteStudent' | translate"
-									(click)="deleteStudent(st.id)"
+									(click)="confirmDelete(student)"
 								></button>
 							</div>
 						</td>
@@ -88,50 +165,130 @@ import { AppTranslatePipe } from './translations/translate.pipe';
 				</ng-template>
 				<ng-template pTemplate="emptymessage">
 					<tr>
-						<td colspan="4" class="text-center">
+						<td colspan="4" class="empty-state">
-							No students found. Add your first student!
+							<div class="empty-content">
+								<i class="pi pi-users empty-icon"></i>
+								<h3>{{ 'app.noStudentsFound' | translate }}</h3>
+								<p>{{ 'app.startByAdding' | translate }}</p>
+								<button
+									pButton
+									type="button"
+									[label]="'app.addFirstStudent' | translate"
+									icon="pi pi-plus"
+									class="p-button-primary"
+									(click)="goToAdd()"
+								></button>
+							</div>
 						</td>
 					</tr>
 				</ng-template>
 			</p-table>
 		</div>
+
+		<p-confirmDialog
+			[header]="'app.confirmDelete' | translate"
+			icon="pi pi-exclamation-triangle"
+			[acceptLabel]="'app.delete' | translate"
+			[rejectLabel]="'app.cancel' | translate"
+			acceptButtonStyleClass="p-button-danger"
+			rejectButtonStyleClass="p-button-text"
+		></p-confirmDialog>
 	`,
 	styles: [
 		`
-			.header-actions {
+			.overview-container {
 				display: flex;
-				justify-content: space-between;
+				flex-direction: column;
-				align-items: center;
+				gap: var(--spacing-xl);
-				margin-bottom: 1.5rem;
-				gap: 1rem;
 			}
 
-			.action-buttons-header {
+			.header-section {
 				display: flex;
-				gap: 1rem;
+				justify-content: space-between;
+				align-items: flex-start;
+				gap: var(--spacing-lg);
+				flex-wrap: wrap;
+			}
+
+			.header-content {
+				display: flex;
+				align-items: center;
+				gap: var(--spacing-xl);
+			}
+
+			.title-section {
+				display: flex;
+				align-items: center;
+				gap: var(--spacing-md);
+			}
+
+			.title-icon {
+				font-size: 2rem;
+				color: var(--primary-color);
 			}
 
 			.page-title {
-				margin-bottom: 0;
+				margin: 0;
+				color: var(--primary-color);
+				font-weight: 700;
+				font-size: 2rem;
+				letter-spacing: 0.5px;
+			}
+
+			.stats-section {
+				display: flex;
+				gap: var(--spacing-md);
+			}
+
+			.stat-card {
+				display: flex;
+				align-items: center;
+				gap: var(--spacing-sm);
+				padding: var(--spacing-md);
+				background: var(--card-background);
+				border-radius: var(--border-radius);
+				box-shadow: var(--card-shadow);
+				border: 1px solid var(--table-border-color);
+			}
+
+			.stat-icon {
+				font-size: 1.5rem;
+				color: var(--primary-color);
+			}
+
+			.stat-content {
+				display: flex;
+				flex-direction: column;
+			}
+
+			.stat-number {
+				font-size: 1.5rem;
+				font-weight: 700;
+				color: var(--text-color);
+			}
+
+			.stat-label {
+				font-size: 0.875rem;
+				color: var(--text-secondary);
+				font-weight: 500;
 			}
 
 			.action-buttons {
 				display: flex;
-				gap: 0.5rem;
+				gap: var(--spacing-md);
-				justify-content: center;
 			}
 
 			:host ::ng-deep {
 				.p-datatable {
 					border-radius: var(--border-radius);
 					overflow: hidden;
-					box-shadow: var(--card-shadow);
 					background-color: var(--card-background);
 
 					.p-datatable-header {
 						background-color: var(--card-background) !important;
 						border: none;
-						padding: 1.25rem 1.5rem;
+						padding: 0 !important;
+						border-bottom: 1px solid var(--table-border-color);
 					}
 
 					.p-datatable-thead > tr > th {
@@ -175,9 +332,9 @@ import { AppTranslatePipe } from './translations/translate.pipe';
 							}
 
 							&.p-highlight {
-								background-color: #000000 !important;
+								background-color: var(--primary-color) !important;
 								color: #ffffff !important;
-								border-color: #000000 !important;
+								border-color: var(--primary-color) !important;
 								font-weight: 600;
 							}
 						}
@@ -200,13 +357,101 @@ import { AppTranslatePipe } from './translations/translate.pipe';
 					transition: background 0.2s, color 0.2s, box-shadow 0.2s;
 					box-shadow: none;
 				}
+
+				.p-tag {
+					margin-right: var(--spacing-xs);
+					margin-bottom: var(--spacing-xs);
+				}
+			}
+
+			.column-header {
+				display: flex;
+				align-items: center;
+				gap: var(--spacing-sm);
+			}
+
+			.column-icon {
+				font-size: 0.875rem;
+				color: var(--text-secondary);
+			}
+
+			.student-name {
+				display: flex;
+				align-items: center;
+				gap: var(--spacing-sm);
+				font-weight: 600;
+			}
+
+			.student-icon {
+				color: var(--primary-color);
+				font-size: 0.875rem;
+			}
+
+			.student-email {
+				display: flex;
+				align-items: center;
+				gap: var(--spacing-sm);
+			}
+
+			.email-icon {
+				color: var(--text-secondary);
+				font-size: 0.875rem;
+			}
+
+			.courses-container {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--spacing-xs);
+			}
+
+			.action-buttons {
+				display: flex;
+				gap: var(--spacing-sm);
+				justify-content: center;
+			}
+
+			.empty-state {
+				text-align: center;
+				padding: var(--spacing-xl) !important;
+			}
+
+			.empty-content {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				gap: var(--spacing-md);
+			}
+
+			.empty-icon {
+				font-size: 3rem;
+				color: var(--text-secondary);
+			}
+
+			.empty-content h3 {
+				margin: 0;
+				color: var(--text-color);
+				font-weight: 600;
+			}
+
+			.empty-content p {
+				margin: 0;
+				color: var(--text-secondary);
 			}
 
 			@media screen and (max-width: 768px) {
-				.header-actions {
+				.header-section {
 					flex-direction: column;
 					align-items: stretch;
-					gap: 1rem;
+				}
+
+				.header-content {
+					flex-direction: column;
+					align-items: flex-start;
+					gap: var(--spacing-md);
+				}
+
+				.action-buttons {
+					justify-content: stretch;
 				}
 
 				:host ::ng-deep {
@@ -232,7 +477,11 @@ export class OverviewComponent {
 	private readonly router = inject(Router);
 	private readonly studentsService = inject(StudentService);
 	private readonly localeStore = inject(LocaleStore);
+	private readonly confirmationService = inject(ConfirmationService);
+	private readonly t = injectAppT();
+
 	protected readonly students = computed(() => this.studentsService.students());
+
 	protected generateMock = () => this.studentsService.generateMockData();
 
 	goToAdd() {
@@ -252,6 +501,15 @@ export class OverviewComponent {
 		);
 	}
 
+	confirmDelete(student: any) {
+		this.confirmationService.confirm({
+			message: `Are you sure you want to delete ${student.name}?`,
+			accept: () => {
+				this.deleteStudent(student.id);
+			},
+		});
+	}
+
 	deleteStudent(id: string) {
 		this.studentsService.deleteSutdent(id);
 	}

src/app/student.service.ts

@@ -8,6 +8,8 @@ export type Student = {
 	name: string;
 	email: string;
 	courses: string[];
+	createdAt?: Date;
+	updatedAt?: Date;
 };
 
 @Injectable({
@@ -18,41 +20,117 @@ export class StudentService {
 		key: 'students',
 	});
 
-	courses = ['Mathematics', 'Physics', 'Chemistry', 'History', 'Literature'];
+	courses = [
+		'Mathematics',
+		'Physics',
+		'Chemistry',
+		'Biology',
+		'Computer Science',
+		'History',
+		'Literature',
+		'Physical Education',
+		'Art',
+		'Music',
+		'Geography',
+		'Economics',
+	];
 
-	addStudent({ name, email, courses }: Omit<Student, 'id'>) {
+	addStudent({
+		name,
+		email,
+		courses,
+	}: Omit<Student, 'id' | 'createdAt' | 'updatedAt'>) {
 		const newStudent: Student = {
 			id: uuid(),
-			name,
+			name: name.trim(),
-			email,
+			email: email.trim().toLowerCase(),
-			courses,
+			courses: courses.filter((course) => course.trim() !== ''),
+			createdAt: new Date(),
+			updatedAt: new Date(),
 		};
 
 		this.students.update((students) => [...students, newStudent]);
+		return newStudent;
 	}
 
-	getStudentById(id: string) {
+	getStudentById(id: string): Student | undefined {
 		return this.students().find((student) => student.id === id);
 	}
 
-	updateStudent(student: Partial<Student>) {
+	updateStudent(student: Partial<Student> & { id: string }) {
 		this.students.update((students) =>
-			students.map((s) => (s.id === student.id ? { ...s, ...student } : s))
+			students.map((s) =>
+				s.id === student.id
+					? {
+							...s,
+							...student,
+							name: student.name?.trim() || s.name,
+							email: student.email?.trim().toLowerCase() || s.email,
+							courses:
+								student.courses?.filter((course) => course.trim() !== '') ||
+								s.courses,
+							updatedAt: new Date(),
+					  }
+					: s
+			)
 		);
 	}
 
 	generateMockData() {
-		const mockData: Student[] = generateRandom();
+		const mockData: Student[] = generateRandom().map((student) => ({
+			...student,
+			createdAt: new Date(),
+			updatedAt: new Date(),
+		}));
 		this.students.set(mockData);
 	}
 
 	updateStudentCourse(id: string, courses: string[]) {
 		this.students.update((students) =>
-			students.map((s) => (s.id === id ? { ...s, courses } : s))
+			students.map((s) =>
+				s.id === id
+					? {
+							...s,
+							courses: courses.filter((course) => course.trim() !== ''),
+							updatedAt: new Date(),
+					  }
+					: s
+			)
 		);
 	}
 
 	deleteSutdent(id: string) {
 		this.students.update((students) => students.filter((s) => s.id !== id));
 	}
+
+	getStudentsByCourse(course: string): Student[] {
+		return this.students().filter((student) =>
+			student.courses.some((c) =>
+				c.toLowerCase().includes(course.toLowerCase())
+			)
+		);
+	}
+
+	searchStudents(query: string): Student[] {
+		const searchTerm = query.toLowerCase();
+		return this.students().filter(
+			(student) =>
+				student.name.toLowerCase().includes(searchTerm) ||
+				student.email.toLowerCase().includes(searchTerm) ||
+				student.courses.some((course) =>
+					course.toLowerCase().includes(searchTerm)
+				)
+		);
+	}
+
+	getTotalStudents(): number {
+		return this.students().length;
+	}
+
+	getStudentsByDateRange(startDate: Date, endDate: Date): Student[] {
+		return this.students().filter((student) => {
+			const createdAt = student.createdAt || new Date();
+			return createdAt >= startDate && createdAt <= endDate;
+		});
+	}
 }

src/app/translations/app-sl.translation.ts

@@ -2,5 +2,55 @@ import { createAppTranslation } from './app.namespace';
 
 export default createAppTranslation('sl', {
 	studentOverview: 'Pregled študentov',
+	addNewStudent: 'Dodaj novega študenta',
+	generateMockData: 'Ustvari testne podatke',
+	generateSampleData: 'Ustvari vzorčne podatke študentov',
+	totalStudents: 'Skupaj študentov',
+	editStudent: 'Uredi študenta',
+	deleteStudent: 'Izbriši študenta',
+	confirmDelete: 'Potrdi brisanje',
+	confirmDeleteMessage: 'Ali ste prepričani, da želite izbrisati {name}?',
+	delete: 'Izbriši',
+	cancel: 'Prekliči',
+	noStudentsFound: 'Ni najdenih študentov',
+	startByAdding: 'Začnite z dodajanjem prvega študenta v sistem.',
+	addFirstStudent: 'Dodaj prvega študenta',
+	showingStudents: 'Prikazujem {first} do {last} od {totalRecords} študentov',
+	name: 'Ime',
+	email: 'E-pošta',
+	courses: 'Predmeti',
+	actions: 'Akcije',
+	fullName: 'Polno ime',
+	emailAddress: 'E-poštni naslov',
+	enterStudentName: 'Vnesite polno ime študenta',
+	enterStudentEmail: 'Vnesite e-poštni naslov študenta',
+	selectCourses: 'Izberite predmete za študenta',
+	saveChanges: 'Shrani spremembe',
+	studentNotFound: 'Študent ni najden',
+	studentNotFoundMessage:
+		'Študent, ki ga iščete, ne obstaja ali je bil odstranjen.',
+	backToOverview: 'Nazaj na pregled',
+	validationErrors: {
+		nameRequired: 'Ime je obvezno',
+		nameMinLength: 'Ime mora vsebovati vsaj {length} znakov',
+		emailRequired: 'E-pošta je obvezna',
+		emailInvalid: 'Vnesite veljaven e-poštni naslov',
+		coursesRequired: 'Izberite vsaj en predmet',
+	},
+	success: {
+		studentAdded: 'Študent {name} je bil uspešno dodan',
+		studentUpdated: 'Študent {name} je bil uspešno posodobljen',
+	},
+	error: {
+		validationError: 'Napaka pri preverjanju',
+		fixFormErrors: 'Prosimo, popravite napake v obrazcu',
+	},
+	overview: 'Pregled',
+	overviewDescription: 'Ogled in upravljanje vseh študentov',
+	addStudent: 'Dodaj študenta',
+	addStudentDescription: 'Dodaj novega študenta v sistem',
+	toggleTheme: 'Preklopi temo',
+	changeLanguage: 'Spremeni jezik',
+	english: 'Angleščina',
+	slovenian: 'Slovenščina',
 });
-

src/app/translations/app.namespace.ts

@@ -2,6 +2,57 @@ import { createNamespace } from '@mmstack/translate';
 
 const ns = createNamespace('app', {
 	studentOverview: 'Student Overview',
+	addNewStudent: 'Add New Student',
+	generateMockData: 'Generate Mock Data',
+	generateSampleData: 'Generate sample student data',
+	totalStudents: 'Total Students',
+	editStudent: 'Edit Student',
+	deleteStudent: 'Delete Student',
+	confirmDelete: 'Confirm Delete',
+	confirmDeleteMessage: 'Are you sure you want to delete {name}?',
+	delete: 'Delete',
+	cancel: 'Cancel',
+	noStudentsFound: 'No students found',
+	startByAdding: 'Start by adding your first student to the system.',
+	addFirstStudent: 'Add First Student',
+	showingStudents: 'Showing {first} to {last} of {totalRecords} students',
+	name: 'Name',
+	email: 'Email',
+	courses: 'Courses',
+	actions: 'Actions',
+	fullName: 'Full Name',
+	emailAddress: 'Email Address',
+	enterStudentName: "Enter student's full name",
+	enterStudentEmail: "Enter student's email address",
+	selectCourses: 'Select courses for the student',
+	saveChanges: 'Save Changes',
+	studentNotFound: 'Student Not Found',
+	studentNotFoundMessage:
+		"The student you're looking for doesn't exist or has been removed.",
+	backToOverview: 'Back to Overview',
+	validationErrors: {
+		nameRequired: 'Name is required',
+		nameMinLength: 'Name must be at least {length} characters',
+		emailRequired: 'Email is required',
+		emailInvalid: 'Please enter a valid email address',
+		coursesRequired: 'Please select at least one course',
+	},
+	success: {
+		studentAdded: 'Student {name} has been added successfully',
+		studentUpdated: 'Student {name} has been updated successfully',
+	},
+	error: {
+		validationError: 'Validation Error',
+		fixFormErrors: 'Please fix the errors in the form',
+	},
+	overview: 'Overview',
+	overviewDescription: 'View and manage all students',
+	addStudent: 'Add Student',
+	addStudentDescription: 'Add a new student to the system',
+	toggleTheme: 'Toggle theme',
+	changeLanguage: 'Change language',
+	english: 'English',
+	slovenian: 'Slovenian',
 });
 
 export default ns.translation;
@@ -9,4 +60,3 @@ export default ns.translation;
 export type AppLocale = (typeof ns)['translation'];
 
 export const createAppTranslation = ns.createTranslation;
-

src/styles.scss

@@ -3,83 +3,96 @@
 html,
 body {
 	margin: 0;
-	font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+	font-family: 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
 	background-color: var(--background-color);
 	color: var(--text-color);
 	transition: background-color 0.3s, color 0.3s;
 	min-height: 100vh;
+	line-height: 1.6;
 }
 
 :root {
-	// Base colors
+	--primary-color: #6366f1;
-	--primary-color: #6200ee;
+	--primary-light: #818cf8;
-	--primary-light: #7f39fb;
+	--primary-dark: #4f46e5;
-	--primary-dark: #3700b3;
+	--primary-lighter: #e0e7ff;
-	--accent-color: #03dac6;
+	--accent-color: #10b981;
-	--text-color: #23272f;
+	--accent-light: #34d399;
-	--text-secondary: #555a64;
+	--text-color: #1f2937;
-	--background-color: #f4f6fa;
+	--text-secondary: #6b7280;
+	--text-muted: #9ca3af;
+	--background-color: #f9fafb;
+	--background-secondary: #f3f4f6;
 
-	// Card & containers
+	--card-background: #ffffff;
-	--card-background: #fff;
+	--card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-	--card-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+	--card-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 
-	// Table colors
+	--table-header-bg: #f8fafc;
-	--table-header-bg: #f3f4f8;
+	--table-row-bg: #ffffff;
-	--table-row-bg: #fff;
+	--table-row-hover-bg: #f1f5f9;
-	--table-row-hover-bg: #f0f0f5;
+	--table-border-color: #e2e8f0;
-	--table-border-color: #e0e3ea;
 
-	// Pagination
+	--paginator-button-hover-bg: rgba(99, 102, 241, 0.1);
-	--paginator-button-selected-bg: #000000;
+	--paginator-button-selected-bg: #6366f1;
 	--paginator-button-selected-text: #ffffff;
-	--paginator-button-hover-bg: rgba(98, 0, 238, 0.08);
 
-	// Spacing
 	--spacing-xs: 0.25rem;
 	--spacing-sm: 0.5rem;
 	--spacing-md: 1rem;
 	--spacing-lg: 1.5rem;
 	--spacing-xl: 2rem;
+	--spacing-2xl: 3rem;
 
-	// Border radius
 	--border-radius: 12px;
+	--border-radius-sm: 8px;
+	--border-radius-lg: 16px;
 	--input-radius: 8px;
 
-	// Focus
+	--focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.1);
-	--focus-ring: 0 0 0 2px var(--primary-light);
+	--focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.1);
+
+	--transition-fast: 0.15s ease;
+	--transition-normal: 0.3s ease;
+	--transition-slow: 0.5s ease;
 }
 
 .dark-theme {
-	--primary-color: #bb86fc;
+	--primary-color: #a855f7;
-	--primary-light: #e2b9ff;
+	--primary-light: #c084fc;
-	--primary-dark: #3700b3;
+	--primary-dark: #9333ea;
-	--accent-color: #03dac6;
+	--primary-lighter: #f3e8ff;
-	--text-color: #e0e0e0;
+	--accent-color: #10b981;
-	--text-secondary: #b0b0b0;
+	--accent-light: #34d399;
-	--background-color: #181a20;
+	--text-color: #f9fafb;
-	--card-background: #23242a;
+	--text-secondary: #d1d5db;
-	--card-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
+	--text-muted: #9ca3af;
-	--table-header-bg: #23242a;
+	--background-color: #111827;
-	--table-row-bg: #181a20;
+	--background-secondary: #1f2937;
-	--table-row-hover-bg: #23242a;
+
-	--table-border-color: #33343a;
+	--card-background: #1f2937;
-	--paginator-button-hover-bg: rgba(187, 134, 252, 0.12);
+	--card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-	--paginator-button-selected-bg: #000000;
+	--card-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+
+	--table-header-bg: #374151;
+	--table-row-bg: #1f2937;
+	--table-row-hover-bg: #374151;
+	--table-border-color: #374151;
+
+	--paginator-button-hover-bg: rgba(168, 85, 247, 0.2);
+	--paginator-button-selected-bg: #a855f7;
 	--paginator-button-selected-text: #ffffff;
 }
 
-// Typography
 .page-title {
 	margin-bottom: var(--spacing-lg);
 	color: var(--primary-color);
 	font-weight: 700;
 	font-size: 2rem;
-	letter-spacing: 0.5px;
+	letter-spacing: -0.025em;
-	transition: color 0.3s;
+	transition: color var(--transition-normal);
 }
 
-// Layout patterns
 .flex-row {
 	display: flex;
 	align-items: center;
@@ -95,17 +108,20 @@ body {
 	gap: var(--spacing-md);
 }
 
-// Cards and containers
 .card-container {
 	background-color: var(--card-background);
 	border-radius: var(--border-radius);
 	padding: var(--spacing-xl) var(--spacing-lg);
 	box-shadow: var(--card-shadow);
 	margin-bottom: var(--spacing-xl);
-	transition: background-color 0.3s, box-shadow 0.3s;
+	transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
+	border: 1px solid var(--table-border-color);
+}
+
+.card-container:hover {
+	box-shadow: var(--card-shadow-hover);
 }
 
-// Forms
 .form-field {
 	display: flex;
 	flex-direction: column;
@@ -116,7 +132,8 @@ body {
 	font-weight: 600;
 	margin-bottom: var(--spacing-sm);
 	color: var(--text-secondary);
-	letter-spacing: 0.2px;
+	letter-spacing: 0.025em;
+	font-size: 0.875rem;
 }
 
 .form-actions {
@@ -135,9 +152,9 @@ input[type='email'],
 	padding: var(--spacing-sm) var(--spacing-md) !important;
 	background-color: var(--card-background) !important;
 	color: var(--text-color) !important;
-	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s,
+	transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-normal), color var(--transition-normal);
-		color 0.3s;
 	box-shadow: none !important;
+	font-size: 0.875rem;
 }
 
 input[type='text']:focus,
@@ -157,15 +174,15 @@ input[type='email']:focus,
 	color: var(--text-color) !important;
 }
 
-// PrimeNG component styling
 .p-component-styles {
-	// Buttons
 	.p-button {
 		border-radius: var(--input-radius);
 		font-weight: 600;
-		letter-spacing: 0.2px;
+		letter-spacing: 0.025em;
-		transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+		transition: all var(--transition-fast);
 		box-shadow: none;
+		font-size: 0.875rem;
+		padding: var(--spacing-sm) var(--spacing-md);
 
 		&.p-button-primary {
 			background-color: var(--primary-color);
@@ -176,18 +193,20 @@ input[type='email']:focus,
 				background-color: var(--primary-light);
 				color: #fff;
 				box-shadow: var(--focus-ring);
+				transform: translateY(-1px);
 			}
 		}
 
 		&.p-button-secondary {
 			background-color: var(--accent-color);
 			border: none;
-			color: #23272f;
+			color: #fff;
 			&:hover,
 			&:focus {
-				background-color: #26ffe6;
+				background-color: var(--accent-light);
-				color: #23272f;
+				color: #fff;
 				box-shadow: var(--focus-ring);
+				transform: translateY(-1px);
 			}
 		}
 
@@ -197,20 +216,34 @@ input[type='email']:focus,
 			color: var(--primary-color);
 			&:hover,
 			&:focus {
-				background: var(--primary-light);
+				background: var(--primary-color);
 				color: #fff;
 				box-shadow: var(--focus-ring);
+				transform: translateY(-1px);
 			}
 		}
 
 		&.p-button-danger {
-			background-color: #e53935;
+			background-color: #ef4444;
 			border: none;
 			color: #fff;
 			&:hover,
 			&:focus {
-				background-color: #b71c1c;
+				background-color: #dc2626;
+				box-shadow: var(--focus-ring-error);
+				transform: translateY(-1px);
+			}
+		}
+
+		&.p-button-success {
+			background-color: var(--accent-color);
+			border: none;
+			color: #fff;
+			&:hover,
+			&:focus {
+				background-color: var(--accent-light);
 				box-shadow: var(--focus-ring);
+				transform: translateY(-1px);
 			}
 		}
 
@@ -219,25 +252,31 @@ input[type='email']:focus,
 			color: var(--primary-color);
 			&:hover,
 			&:focus {
-				background: var(--primary-light);
+				background: var(--primary-lighter);
-				color: #fff;
+				color: var(--primary-color);
 				box-shadow: var(--focus-ring);
 			}
 		}
+
+		&:disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+			transform: none !important;
+		}
 	}
 
-	// Tables
 	.p-datatable {
 		margin-top: var(--spacing-lg);
 		background-color: var(--card-background);
 		border-radius: var(--border-radius);
 		overflow: hidden;
 		box-shadow: var(--card-shadow);
-		transition: background-color 0.3s, box-shadow 0.3s;
+		transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
+		border: 1px solid var(--table-border-color);
 
 		.p-datatable-header {
 			background-color: var(--card-background);
-			padding: var(--spacing-md);
+			padding: 0;
 			border-bottom: 1px solid var(--table-border-color);
 		}
 
@@ -247,14 +286,14 @@ input[type='email']:focus,
 			border-color: var(--table-border-color);
 			padding: var(--spacing-md);
 			font-weight: 700;
-			font-size: 1rem;
+			font-size: 0.875rem;
-			letter-spacing: 0.1px;
+			letter-spacing: 0.025em;
 		}
 
 		.p-datatable-tbody > tr {
 			background-color: var(--table-row-bg);
 			color: var(--text-color);
-			transition: background-color 0.2s;
+			transition: background-color var(--transition-fast);
 
 			&:hover {
 				background-color: var(--table-row-hover-bg);
@@ -265,6 +304,7 @@ input[type='email']:focus,
 				color: var(--text-color);
 				border-color: var(--table-border-color);
 				padding: var(--spacing-md);
+				font-size: 0.875rem;
 			}
 		}
 
@@ -274,37 +314,178 @@ input[type='email']:focus,
 			border-color: var(--table-border-color);
 			padding: var(--spacing-md);
 
-			.p-paginator-element.p-highlight {
+			.p-paginator-element {
-				background-color: #000000 !important;
+				color: var(--text-color) !important;
-				color: #ffffff !important;
+				
-				border-color: #000000 !important;
+				&.p-highlight {
+					background-color: var(--primary-color) !important;
+					color: #ffffff !important;
+					border-color: var(--primary-color) !important;
+					font-weight: 600;
+				}
+
+				&:hover:not(.p-highlight) {
+					background-color: var(--paginator-button-hover-bg);
+					color: var(--text-color) !important;
+				}
 			}
 
-			.p-paginator-element:hover {
+			.p-paginator-pages {
-				background-color: var(--paginator-button-hover-bg);
+				.p-paginator-page {
+					color: var(--text-color) !important;
+					
+					&.p-highlight {
+						background-color: var(--primary-color) !important;
+						color: #ffffff !important;
+						border-color: var(--primary-color) !important;
+						font-weight: 600;
+					}
+
+					&:hover:not(.p-highlight) {
+						background-color: var(--paginator-button-hover-bg);
+						color: var(--text-color) !important;
+					}
+				}
 			}
+
+			.p-paginator-first,
+			.p-paginator-prev,
+			.p-paginator-next,
+			.p-paginator-last {
+				color: var(--text-color) !important;
+				
+				&:hover {
+					background-color: var(--paginator-button-hover-bg);
+					color: var(--text-color) !important;
+				}
+			}
+		}
+	}
+
+	.p-card {
+		border-radius: var(--border-radius);
+		box-shadow: var(--card-shadow);
+		background: var(--card-background);
+		border: 1px solid var(--table-border-color);
+		transition: box-shadow var(--transition-normal);
+
+		&:hover {
+			box-shadow: var(--card-shadow-hover);
+		}
+
+		.p-card-header {
+			background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
+			color: white;
+			padding: var(--spacing-lg);
+			border-radius: var(--border-radius) var(--border-radius) 0 0;
+		}
+
+		.p-card-body {
+			padding: var(--spacing-xl);
+		}
+	}
+
+	.p-toast {
+		.p-toast-message {
+			border-radius: var(--border-radius-sm);
+			box-shadow: var(--card-shadow);
+			border: none;
+		}
+
+		.p-toast-message-success {
+			background: var(--accent-color);
+			color: white;
+		}
+
+		.p-toast-message-error {
+			background: #ef4444;
+			color: white;
+		}
+
+		.p-toast-message-info {
+			background: var(--primary-color);
+			color: white;
+		}
+
+		.p-toast-message-warn {
+			background: #f59e0b;
+			color: white;
+		}
+	}
+
+	.p-confirmdialog {
+		.p-dialog-header {
+			background: var(--card-background);
+			color: var(--text-color);
+		}
+
+		.p-dialog-content {
+			background: var(--card-background);
+			color: var(--text-color);
+		}
+
+		.p-dialog-footer {
+			background: var(--card-background);
+		}
+	}
+
+	.p-tag {
+		border-radius: var(--border-radius-sm);
+		font-size: 0.75rem;
+		font-weight: 600;
+		padding: var(--spacing-xs) var(--spacing-sm);
+		color: var(--text-color) !important;
+		background-color: var(--primary-lighter) !important;
+		border: 1px solid var(--primary-color) !important;
+
+		&.p-tag-info {
+			background-color: var(--primary-lighter) !important;
+			color: var(--primary-color) !important;
+			border-color: var(--primary-color) !important;
+		}
+
+		&.p-tag-success {
+			background-color: rgba(16, 185, 129, 0.1) !important;
+			color: var(--accent-color) !important;
+			border-color: var(--accent-color) !important;
+		}
+
+		&.p-tag-warning {
+			background-color: rgba(245, 158, 11, 0.1) !important;
+			color: #f59e0b !important;
+			border-color: #f59e0b !important;
+		}
+
+		&.p-tag-danger {
+			background-color: rgba(239, 68, 68, 0.1) !important;
+			color: #ef4444 !important;
+			border-color: #ef4444 !important;
 		}
 	}
 }
 
-// Apply these styles globally
 body {
 	@extend .p-component-styles;
 }
 
 ::-webkit-scrollbar {
-	width: 10px;
+	width: 8px;
 	background: var(--background-color);
 }
+
 ::-webkit-scrollbar-thumb {
 	background: var(--table-border-color);
-	border-radius: 8px;
+	border-radius: var(--border-radius-sm);
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: var(--text-muted);
 }
 
 @media (max-width: 768px) {
 	.card-container {
-		padding: 1.5rem;
+		padding: var(--spacing-lg);
-		margin: 0 1rem;
+		margin: 0 var(--spacing-sm);
 	}
 
 	.form-actions {
@@ -314,4 +495,19 @@ body {
 			width: 100%;
 		}
 	}
+
+	.page-title {
+		font-size: 1.5rem;
+	}
+}
+
+@media (max-width: 480px) {
+	:root {
+		--spacing-lg: 1rem;
+		--spacing-xl: 1.5rem;
+	}
+
+	.card-container {
+		padding: var(--spacing-md);
+	}
 }