From 53537226cd7ce98ed2b5a4086a4397937c0f3266 Mon Sep 17 00:00:00 2001
From: Timo Knuth <knuth.timo@gmail.com>
Date: Fri, 6 Feb 2026 12:59:47 +0100
Subject: [PATCH] SEO

---
 bizmatch/angular.json                         |  5 +-
 bizmatch/server.ts                            |  2 +
 bizmatch/src/app/app.config.ts                |  3 +-
 bizmatch/src/app/app.routes.server.ts         |  8 +--
 .../components/header/header.component.html   |  4 +-
 .../search-modal-broker.component.html        | 28 +++++------
 .../search-modal-commercial.component.html    | 28 +++++------
 .../search-modal/search-modal.component.html  | 50 ++++++++++---------
 .../validated-quill.component.ts              |  8 +--
 .../details-business-listing.component.html   |  4 +-
 ...commercial-property-listing.component.html |  4 +-
 .../details-user/details-user.component.html  |  4 +-
 .../broker-listings.component.html            |  4 +-
 .../business-listings.component.html          |  4 +-
 ...ommercial-property-listings.component.html |  4 +-
 .../account/account.component.html            | 16 +++---
 bizmatch/src/build.ts                         |  2 +-
 bizmatch/src/index.html                       | 49 ++++++++----------
 18 files changed, 110 insertions(+), 117 deletions(-)

diff --git a/bizmatch/angular.json b/bizmatch/angular.json
index e5853b6..085c7cd 100644
--- a/bizmatch/angular.json
+++ b/bizmatch/angular.json
@@ -53,10 +53,7 @@
             ],
             "styles": [
               "src/styles.scss",
-              "src/styles/lazy-load.css",
-              "node_modules/quill/dist/quill.snow.css",
-              "node_modules/leaflet/dist/leaflet.css",
-              "node_modules/ngx-sharebuttons/themes/default.scss"
+              "src/styles/lazy-load.css"
             ]
           },
           "configurations": {
diff --git a/bizmatch/server.ts b/bizmatch/server.ts
index ce0877f..ac7a2f0 100644
--- a/bizmatch/server.ts
+++ b/bizmatch/server.ts
@@ -104,6 +104,8 @@ export async function app(): Promise<express.Express> {
   // All regular routes use the Angular engine
   server.get('*', async (req, res, next) => {
     console.log(`[SSR] Handling request: ${req.method} ${req.url}`);
+    // Cache SSR-rendered pages at CDN level
+    res.setHeader('Cache-Control', 'public, s-maxage=300, stale-while-revalidate=600');
     try {
       const response = await angularApp.handle(req);
       if (response) {
diff --git a/bizmatch/src/app/app.config.ts b/bizmatch/src/app/app.config.ts
index f15e4d9..e55d9e1 100644
--- a/bizmatch/src/app/app.config.ts
+++ b/bizmatch/src/app/app.config.ts
@@ -20,8 +20,7 @@ import { createLogger } from './utils/utils';
 const logger = createLogger('ApplicationConfig');
 export const appConfig: ApplicationConfig = {
   providers: [
-    // Temporarily disabled for SSR debugging
-    // provideClientHydration(),
+    provideClientHydration(),
     provideHttpClient(withInterceptorsFromDi()),
     {
       provide: APP_INITIALIZER,
diff --git a/bizmatch/src/app/app.routes.server.ts b/bizmatch/src/app/app.routes.server.ts
index aa0ea8b..063f93c 100644
--- a/bizmatch/src/app/app.routes.server.ts
+++ b/bizmatch/src/app/app.routes.server.ts
@@ -1,8 +1,8 @@
 import { RenderMode, ServerRoute } from '@angular/ssr';
 
 export const serverRoutes: ServerRoute[] = [
-    {
-        path: '**',
-        renderMode: RenderMode.Server
-    }
+    { path: 'home', renderMode: RenderMode.Prerender },
+    { path: 'terms-of-use', renderMode: RenderMode.Prerender },
+    { path: 'privacy-statement', renderMode: RenderMode.Prerender },
+    { path: '**', renderMode: RenderMode.Server }
 ];
diff --git a/bizmatch/src/app/components/header/header.component.html b/bizmatch/src/app/components/header/header.component.html
index b4921bf..d7b446b 100644
--- a/bizmatch/src/app/components/header/header.component.html
+++ b/bizmatch/src/app/components/header/header.component.html
@@ -9,7 +9,7 @@
       @if(isFilterUrl()){
 
       <div class="relative">
-        <button type="button" id="sortDropdownButton"
+        <button type="button" id="sortDropdownButton" aria-label="Sort listings" aria-haspopup="listbox"
           class="max-sm:hidden px-4 py-2 text-sm font-medium bg-white border border-neutral-200 rounded-lg hover:bg-neutral-100 hover:text-primary-600 dark:bg-neutral-800 dark:text-neutral-400 dark:border-neutral-600 dark:hover:text-white dark:hover:bg-neutral-700"
           (click)="toggleSortDropdown()"
           [ngClass]="{ 'text-primary-500': selectOptions.getSortByOption(sortBy) !== 'Sort', 'text-neutral-900': selectOptions.getSortByOption(sortBy) === 'Sort' }">
@@ -201,7 +201,7 @@
   </div>
   <!-- Mobile filter button -->
   <div class="md:hidden flex justify-center pb-4">
-    <button (click)="toggleSortDropdown()" type="button" id="sortDropdownMobileButton"
+    <button (click)="toggleSortDropdown()" type="button" id="sortDropdownMobileButton" aria-label="Sort listings" aria-haspopup="listbox"
       class="mx-4 w-1/2 px-4 py-2 text-sm font-medium bg-white border border-neutral-200 rounded-lg hover:bg-neutral-100 hover:text-primary-600 focus:ring-2 focus:ring-primary-600 focus:text-primary-600 dark:bg-neutral-800 dark:text-neutral-400 dark:border-neutral-600 dark:hover:text-white dark:hover:bg-neutral-700"
       [ngClass]="{ 'text-primary-500': selectOptions.getSortByOption(sortBy) !== 'Sort', 'text-neutral-900': selectOptions.getSortByOption(sortBy) === 'Sort' }">
       <i class="fas fa-sort mr-2"></i>{{ selectOptions.getSortByOption(sortBy) }}
diff --git a/bizmatch/src/app/components/search-modal/search-modal-broker.component.html b/bizmatch/src/app/components/search-modal/search-modal-broker.component.html
index 6dce6d2..281ce61 100644
--- a/bizmatch/src/app/components/search-modal/search-modal-broker.component.html
+++ b/bizmatch/src/app/components/search-modal/search-modal-broker.component.html
@@ -16,7 +16,7 @@
       <div class="p-6 space-y-6">
         <div class="flex space-x-4 mb-4">
           <button class="text-primary-600 font-medium border-b-2 border-primary-600 pb-2">Filter ({{ numberOfResults$ | async }})</button>
-          <i data-tooltip-target="tooltip-light" class="fa-solid fa-trash-can flex self-center ml-2 hover:cursor-pointer text-primary-500" (click)="clearFilter()"></i>
+          <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
           <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
             Clear all Filter
             <div class="tooltip-arrow" data-popper-arrow></div>
@@ -25,22 +25,22 @@
         <!-- Display active filters as tags -->
         <div class="flex flex-wrap gap-2 mb-4" *ngIf="hasActiveFilters()">
           <span *ngIf="criteria.state" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
           </span>
           <span *ngIf="criteria.city" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
           </span>
           <span *ngIf="criteria.types?.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            Types: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            Types: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
           </span>
           <span *ngIf="criteria.brokerName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            Professional Name: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            Professional Name: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
           </span>
           <span *ngIf="criteria.companyName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            Company: {{ criteria.companyName }} <button (click)="removeFilter('companyName')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            Company: {{ criteria.companyName }} <button (click)="removeFilter('companyName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
           </span>
           <span *ngIf="criteria.counties?.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            Areas Served: {{ criteria.counties.join(', ') }} <button (click)="removeFilter('counties')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            Areas Served: {{ criteria.counties.join(', ') }} <button (click)="removeFilter('counties')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
           </span>
         </div>
         @if(criteria.criteriaType==='brokerListings') {
@@ -141,7 +141,7 @@
 <div *ngIf="!isModal" class="space-y-6 pb-10">
   <div class="flex space-x-4 mb-4">
     <h3 class="text-xl font-semibold text-neutral-900">Filter ({{ numberOfResults$ | async }})</h3>
-    <i data-tooltip-target="tooltip-light" class="fa-solid fa-trash-can flex self-center ml-2 hover:cursor-pointer text-primary-500" (click)="clearFilter()"></i>
+    <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
     <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
       Clear all Filter
       <div class="tooltip-arrow" data-popper-arrow></div>
@@ -150,22 +150,22 @@
   <!-- Display active filters as tags -->
   <div class="flex flex-wrap gap-2" *ngIf="hasActiveFilters()">
     <span *ngIf="criteria.state" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
     </span>
     <span *ngIf="criteria.city" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
     </span>
     <span *ngIf="criteria.types?.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Types: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      Types: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
     </span>
     <span *ngIf="criteria.brokerName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Professional Name: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      Professional Name: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
     </span>
     <span *ngIf="criteria.companyName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Company: {{ criteria.companyName }} <button (click)="removeFilter('companyName')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      Company: {{ criteria.companyName }} <button (click)="removeFilter('companyName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
     </span>
     <span *ngIf="criteria.counties?.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Areas Served: {{ criteria.counties.join(', ') }} <button (click)="removeFilter('counties')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      Areas Served: {{ criteria.counties.join(', ') }} <button (click)="removeFilter('counties')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
     </span>
   </div>
   @if(criteria.criteriaType==='brokerListings') {
diff --git a/bizmatch/src/app/components/search-modal/search-modal-commercial.component.html b/bizmatch/src/app/components/search-modal/search-modal-commercial.component.html
index 4bb2346..4314772 100644
--- a/bizmatch/src/app/components/search-modal/search-modal-commercial.component.html
+++ b/bizmatch/src/app/components/search-modal/search-modal-commercial.component.html
@@ -16,7 +16,7 @@
       <div class="p-6 space-y-6">
         <div class="flex space-x-4 mb-4">
           <button class="text-primary-600 font-medium border-b-2 border-primary-600 pb-2">Filter ({{ numberOfResults$ | async }})</button>
-          <i data-tooltip-target="tooltip-light" class="fa-solid fa-trash-can flex self-center ml-2 hover:cursor-pointer text-primary-500" (click)="clearFilter()"></i>
+          <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
           <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
             Clear all Filter
             <div class="tooltip-arrow" data-popper-arrow></div>
@@ -25,22 +25,22 @@
         <!-- Display active filters as tags -->
         <div class="flex flex-wrap gap-2 mb-4" *ngIf="hasActiveFilters()">
           <span *ngIf="criteria.state" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
           </span>
           <span *ngIf="criteria.city" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
           </span>
           <span *ngIf="criteria.minPrice || criteria.maxPrice" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
           </span>
           <span *ngIf="criteria.types.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
           </span>
           <span *ngIf="criteria.title" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            Title: {{ criteria.title }} <button (click)="removeFilter('title')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            Title: {{ criteria.title }} <button (click)="removeFilter('title')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
           </span>
           <span *ngIf="criteria.brokerName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
           </span>
         </div>
         @if(criteria.criteriaType==='commercialPropertyListings') {
@@ -137,7 +137,7 @@
 <div *ngIf="!isModal" class="space-y-6 pb-10">
   <div class="flex space-x-4 mb-4">
     <h3 class="text-xl font-semibold text-neutral-900">Filter ({{ numberOfResults$ | async }})</h3>
-    <i data-tooltip-target="tooltip-light" class="fa-solid fa-trash-can flex self-center ml-2 hover:cursor-pointer text-primary-500" (click)="clearFilter()"></i>
+    <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
     <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
       Clear all Filter
       <div class="tooltip-arrow" data-popper-arrow></div>
@@ -146,22 +146,22 @@
   <!-- Display active filters as tags -->
   <div class="flex flex-wrap gap-2" *ngIf="hasActiveFilters()">
     <span *ngIf="criteria.state" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
     </span>
     <span *ngIf="criteria.city" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
     </span>
     <span *ngIf="criteria.minPrice || criteria.maxPrice" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
     </span>
     <span *ngIf="criteria.types.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
     </span>
     <span *ngIf="criteria.title" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Title: {{ criteria.title }} <button (click)="removeFilter('title')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      Title: {{ criteria.title }} <button (click)="removeFilter('title')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
     </span>
     <span *ngIf="criteria.brokerName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
     </span>
   </div>
   @if(criteria.criteriaType==='commercialPropertyListings') {
diff --git a/bizmatch/src/app/components/search-modal/search-modal.component.html b/bizmatch/src/app/components/search-modal/search-modal.component.html
index b46c57e..2c4a840 100644
--- a/bizmatch/src/app/components/search-modal/search-modal.component.html
+++ b/bizmatch/src/app/components/search-modal/search-modal.component.html
@@ -16,7 +16,7 @@
       <div class="p-6 space-y-6">
         <div class="flex space-x-4 mb-4">
           <button class="text-primary-600 font-medium border-b-2 border-primary-600 pb-2">Filter ({{ numberOfResults$ | async }})</button>
-          <i data-tooltip-target="tooltip-light" class="fa-solid fa-trash-can flex self-center ml-2 hover:cursor-pointer text-primary-500" (click)="clearFilter()"></i>
+          <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
           <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
             Clear all Filter
             <div class="tooltip-arrow" data-popper-arrow></div>
@@ -25,37 +25,37 @@
         <!-- Display active filters as tags -->
         <div class="flex flex-wrap gap-2 mb-4" *ngIf="hasActiveFilters()">
           <span *ngIf="criteria.state" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            State: {{ criteria.state }} <button (click)="removeFilter('state')" aria-label="Remove state filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
           </span>
           <span *ngIf="criteria.city" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            City: {{ criteria.city.name }} <button (click)="removeFilter('city')" aria-label="Remove city filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
           </span>
           <span *ngIf="criteria.minPrice || criteria.maxPrice" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" aria-label="Remove price filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
           </span>
           <span *ngIf="criteria.minRevenue || criteria.maxRevenue" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            Revenue: {{ criteria.minRevenue || 'Any' }} - {{ criteria.maxRevenue || 'Any' }} <button (click)="removeFilter('revenue')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            Revenue: {{ criteria.minRevenue || 'Any' }} - {{ criteria.maxRevenue || 'Any' }} <button (click)="removeFilter('revenue')" aria-label="Remove revenue filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
           </span>
           <span *ngIf="criteria.minCashFlow || criteria.maxCashFlow" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            Cashflow: {{ criteria.minCashFlow || 'Any' }} - {{ criteria.maxCashFlow || 'Any' }} <button (click)="removeFilter('cashflow')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            Cashflow: {{ criteria.minCashFlow || 'Any' }} - {{ criteria.maxCashFlow || 'Any' }} <button (click)="removeFilter('cashflow')" aria-label="Remove cashflow filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
           </span>
           <span *ngIf="criteria.title" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            Title: {{ criteria.title }} <button (click)="removeFilter('title')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            Title: {{ criteria.title }} <button (click)="removeFilter('title')" aria-label="Remove title filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
           </span>
           <span *ngIf="criteria.types.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" aria-label="Remove categories filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
           </span>
           <span *ngIf="selectedPropertyType" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            Property Type: {{ getSelectedPropertyTypeName() }} <button (click)="removeFilter('propertyType')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            Property Type: {{ getSelectedPropertyTypeName() }} <button (click)="removeFilter('propertyType')" aria-label="Remove property type filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
           </span>
           <span *ngIf="criteria.minNumberEmployees || criteria.maxNumberEmployees" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            Employees: {{ criteria.minNumberEmployees || 'Any' }} - {{ criteria.maxNumberEmployees || 'Any' }} <button (click)="removeFilter('employees')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            Employees: {{ criteria.minNumberEmployees || 'Any' }} - {{ criteria.maxNumberEmployees || 'Any' }} <button (click)="removeFilter('employees')" aria-label="Remove employees filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
           </span>
           <span *ngIf="criteria.establishedMin" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            Established: {{ criteria.establishedMin || 'Any' }} <button (click)="removeFilter('established')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            Established: {{ criteria.establishedMin || 'Any' }} <button (click)="removeFilter('established')" aria-label="Remove established filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
           </span>
           <span *ngIf="criteria.brokerName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-            Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+            Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" aria-label="Remove broker filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
           </span>
         </div>
         <div class="grid grid-cols-1 gap-6">
@@ -148,6 +148,7 @@
                 [multiple]="true"
                 [closeOnSelect]="true"
                 placeholder="Select categories"
+                aria-label="Category"
               ></ng-select>
             </div>
             <div>
@@ -160,6 +161,7 @@
                 [ngModel]="selectedPropertyType"
                 (ngModelChange)="onPropertyTypeChange($event)"
                 placeholder="Select property type"
+                aria-label="Type of Property"
               ></ng-select>
             </div>
             <div>
@@ -220,7 +222,7 @@
 <div *ngIf="!isModal" class="space-y-6">
   <div class="flex space-x-4 mb-4">
     <h3 class="text-xl font-semibold text-neutral-900">Filter ({{ numberOfResults$ | async }})</h3>
-    <i data-tooltip-target="tooltip-light" class="fa-solid fa-trash-can flex self-center ml-2 hover:cursor-pointer text-primary-500" (click)="clearFilter()"></i>
+    <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
     <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
       Clear all Filter
       <div class="tooltip-arrow" data-popper-arrow></div>
@@ -229,37 +231,37 @@
   <!-- Display active filters as tags -->
   <div class="flex flex-wrap gap-2" *ngIf="hasActiveFilters()">
     <span *ngIf="criteria.state" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      State: {{ criteria.state }} <button (click)="removeFilter('state')" aria-label="Remove state filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
     </span>
     <span *ngIf="criteria.city" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      City: {{ criteria.city.name }} <button (click)="removeFilter('city')" aria-label="Remove city filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
     </span>
     <span *ngIf="criteria.minPrice || criteria.maxPrice" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" aria-label="Remove price filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
     </span>
     <span *ngIf="criteria.minRevenue || criteria.maxRevenue" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Revenue: {{ criteria.minRevenue || 'Any' }} - {{ criteria.maxRevenue || 'Any' }} <button (click)="removeFilter('revenue')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      Revenue: {{ criteria.minRevenue || 'Any' }} - {{ criteria.maxRevenue || 'Any' }} <button (click)="removeFilter('revenue')" aria-label="Remove revenue filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
     </span>
     <span *ngIf="criteria.minCashFlow || criteria.maxCashFlow" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Cashflow: {{ criteria.minCashFlow || 'Any' }} - {{ criteria.maxCashFlow || 'Any' }} <button (click)="removeFilter('cashflow')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      Cashflow: {{ criteria.minCashFlow || 'Any' }} - {{ criteria.maxCashFlow || 'Any' }} <button (click)="removeFilter('cashflow')" aria-label="Remove cashflow filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
     </span>
     <span *ngIf="criteria.title" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Title: {{ criteria.title }} <button (click)="removeFilter('title')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      Title: {{ criteria.title }} <button (click)="removeFilter('title')" aria-label="Remove title filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
     </span>
     <span *ngIf="criteria.types.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" aria-label="Remove categories filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
     </span>
     <span *ngIf="selectedPropertyType" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Property Type: {{ getSelectedPropertyTypeName() }} <button (click)="removeFilter('propertyType')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      Property Type: {{ getSelectedPropertyTypeName() }} <button (click)="removeFilter('propertyType')" aria-label="Remove property type filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
     </span>
     <span *ngIf="criteria.minNumberEmployees || criteria.maxNumberEmployees" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Employees: {{ criteria.minNumberEmployees || 'Any' }} - {{ criteria.maxNumberEmployees || 'Any' }} <button (click)="removeFilter('employees')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      Employees: {{ criteria.minNumberEmployees || 'Any' }} - {{ criteria.maxNumberEmployees || 'Any' }} <button (click)="removeFilter('employees')" aria-label="Remove employees filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
     </span>
     <span *ngIf="criteria.establishedMin" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Years established: {{ criteria.establishedMin || 'Any' }} <button (click)="removeFilter('established')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      Years established: {{ criteria.establishedMin || 'Any' }} <button (click)="removeFilter('established')" aria-label="Remove established filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
     </span>
     <span *ngIf="criteria.brokerName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" aria-label="Remove broker filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
     </span>
   </div>
   @if(criteria.criteriaType==='businessListings') {
diff --git a/bizmatch/src/app/components/validated-quill/validated-quill.component.ts b/bizmatch/src/app/components/validated-quill/validated-quill.component.ts
index 20cdb09..86cc806 100644
--- a/bizmatch/src/app/components/validated-quill/validated-quill.component.ts
+++ b/bizmatch/src/app/components/validated-quill/validated-quill.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, forwardRef } from '@angular/core';
+import { Component, forwardRef, ViewEncapsulation } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { QuillModule } from 'ngx-quill';
 import { BaseInputComponent } from '../base-input/base-input.component';
@@ -9,9 +9,11 @@ import { ValidationMessagesService } from '../validation-messages.service';
 @Component({
   selector: 'app-validated-quill',
   templateUrl: './validated-quill.component.html',
-  styles: `quill-editor {
+  styleUrls: ['../../../../node_modules/quill/dist/quill.snow.css'],
+  styles: [`quill-editor {
             width: 100%;
-          }`,
+          }`],
+  encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [CommonModule, FormsModule, QuillModule, TooltipComponent],
   providers: [
diff --git a/bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.html b/bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.html
index 5ac7472..8157ef9 100644
--- a/bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.html
+++ b/bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.html
@@ -5,8 +5,8 @@
   }
 
   <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg overflow-hidden relative">
-    <button (click)="historyService.goBack()"
-      class="absolute top-4 right-4 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 print:hidden">
+    <button (click)="historyService.goBack()" aria-label="Go back"
+      class="absolute top-4 right-4 bg-red-500 text-white rounded-full w-10 h-10 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 print:hidden">
       <i class="fas fa-times"></i>
     </button>
     @if(listing){
diff --git a/bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html b/bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html
index 65f2cb3..2d53514 100644
--- a/bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html
+++ b/bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html
@@ -6,8 +6,8 @@
     @if(listing){
     <div class="p-6 relative">
       <h1 class="text-3xl font-bold mb-4 break-words">{{ listing?.title }}</h1>
-      <button (click)="historyService.goBack()"
-        class="print:hidden absolute top-4 right-4 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
+      <button (click)="historyService.goBack()" aria-label="Go back"
+        class="print:hidden absolute top-4 right-4 bg-red-500 text-white rounded-full w-10 h-10 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
         <i class="fas fa-times"></i>
       </button>
       <div class="flex flex-col lg:flex-row">
diff --git a/bizmatch/src/app/pages/details/details-user/details-user.component.html b/bizmatch/src/app/pages/details/details-user/details-user.component.html
index 67a1a01..ba5757f 100644
--- a/bizmatch/src/app/pages/details/details-user/details-user.component.html
+++ b/bizmatch/src/app/pages/details/details-user/details-user.component.html
@@ -42,8 +42,8 @@
         }
         <!-- <img src="https://placehold.co/45x60" class="w-11 h-14" /> -->
       </div>
-      <button (click)="historyService.goBack()"
-        class="absolute top-4 right-4 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
+      <button (click)="historyService.goBack()" aria-label="Go back"
+        class="absolute top-4 right-4 bg-red-500 text-white rounded-full w-10 h-10 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
         <i class="fas fa-times"></i>
       </button>
     </div>
diff --git a/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html b/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html
index a770e23..445c54e 100644
--- a/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html
+++ b/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html
@@ -44,14 +44,14 @@
             @if(currentUser) {
             <button type="button" class="bg-white rounded-full p-2 shadow-lg transition-colors"
               [class.bg-red-50]="isFavorite(user)"
-              [title]="isFavorite(user) ? 'Remove from favorites' : 'Save to favorites'"
+              [attr.aria-label]="isFavorite(user) ? 'Remove from favorites' : 'Save to favorites'"
               (click)="toggleFavorite($event, user)">
               <i
                 [class]="isFavorite(user) ? 'fas fa-heart text-red-500' : 'far fa-heart text-red-500 hover:scale-110 transition-transform'"></i>
             </button>
             }
             <button type="button" class="bg-white rounded-full p-2 shadow-lg hover:bg-blue-50 transition-colors"
-              title="Share professional" (click)="shareProfessional($event, user)">
+              aria-label="Share professional" (click)="shareProfessional($event, user)">
               <i class="fas fa-share-alt text-blue-500 hover:scale-110 transition-transform"></i>
             </button>
           </div>
diff --git a/bizmatch/src/app/pages/listings/business-listings/business-listings.component.html b/bizmatch/src/app/pages/listings/business-listings/business-listings.component.html
index 3ccf233..e7fbe4b 100644
--- a/bizmatch/src/app/pages/listings/business-listings/business-listings.component.html
+++ b/bizmatch/src/app/pages/listings/business-listings/business-listings.component.html
@@ -68,14 +68,14 @@
               @if(user) {
               <button class="bg-white rounded-full p-2 shadow-lg transition-colors"
                 [class.bg-red-50]="isFavorite(listing)"
-                [title]="isFavorite(listing) ? 'Remove from favorites' : 'Save to favorites'"
+                [attr.aria-label]="isFavorite(listing) ? 'Remove from favorites' : 'Save to favorites'"
                 (click)="toggleFavorite($event, listing)">
                 <i
                   [class]="isFavorite(listing) ? 'fas fa-heart text-red-500' : 'far fa-heart text-red-500 hover:scale-110 transition-transform'"></i>
               </button>
               }
               <button type="button" class="bg-white rounded-full p-2 shadow-lg hover:bg-blue-50 transition-colors"
-                title="Share listing" (click)="shareListing($event, listing)">
+                aria-label="Share listing" (click)="shareListing($event, listing)">
                 <i class="fas fa-share-alt text-blue-500 hover:scale-110 transition-transform"></i>
               </button>
             </div>
diff --git a/bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.html b/bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.html
index ad76023..595c5d5 100644
--- a/bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.html
+++ b/bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.html
@@ -33,13 +33,13 @@
               class="bg-white rounded-full p-2 shadow-lg transition-colors"
               [class.bg-red-50]="isFavorite(listing)"
               [class.opacity-100]="isFavorite(listing)"
-              [title]="isFavorite(listing) ? 'Remove from favorites' : 'Save to favorites'"
+              [attr.aria-label]="isFavorite(listing) ? 'Remove from favorites' : 'Save to favorites'"
               (click)="toggleFavorite($event, listing)">
               <i [class]="isFavorite(listing) ? 'fas fa-heart text-red-500' : 'far fa-heart text-red-500 hover:scale-110 transition-transform'"></i>
             </button>
             }
             <button type="button" class="bg-white rounded-full p-2 shadow-lg hover:bg-blue-50 transition-colors"
-              title="Share property" (click)="shareProperty($event, listing)">
+              aria-label="Share property" (click)="shareProperty($event, listing)">
               <i class="fas fa-share-alt text-blue-500 hover:scale-110 transition-transform"></i>
             </button>
           </div>
diff --git a/bizmatch/src/app/pages/subscription/account/account.component.html b/bizmatch/src/app/pages/subscription/account/account.component.html
index fe31d4e..67152f2 100644
--- a/bizmatch/src/app/pages/subscription/account/account.component.html
+++ b/bizmatch/src/app/pages/subscription/account/account.component.html
@@ -18,16 +18,16 @@
             <div class="w-20 h-20 w-full rounded-md flex items-center justify-center relative">
               @if(user?.hasCompanyLogo){
               <img src="{{ companyLogoUrl }}" alt="Company logo" class="max-w-full max-h-full" />
-              <div
-                class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 drop-shadow-custom-bg hover:cursor-pointer"
+              <button type="button" aria-label="Delete company logo"
+                class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-2 drop-shadow-custom-bg cursor-pointer min-w-[32px] min-h-[32px] flex items-center justify-center"
                 (click)="deleteConfirm('logo')">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                   class="w-4 h-4 text-gray-600">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                 </svg>
-              </div>
+              </button>
               } @else {
-              <img src="/assets/images/placeholder.png" class="max-w-full max-h-full" />
+              <img src="/assets/images/placeholder.png" class="max-w-full max-h-full" alt="" width="80" height="80" />
               }
             </div>
             <button type="button"
@@ -41,16 +41,16 @@
             <div class="w-20 h-20 w-full rounded-md flex items-center justify-center relative">
               @if(user?.hasProfile){
               <img src="{{ profileUrl }}" alt="Profile picture" class="max-w-full max-h-full" />
-              <div
-                class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 drop-shadow-custom-bg hover:cursor-pointer"
+              <button type="button" aria-label="Delete profile picture"
+                class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-2 drop-shadow-custom-bg cursor-pointer min-w-[32px] min-h-[32px] flex items-center justify-center"
                 (click)="deleteConfirm('profile')">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                   class="w-4 h-4 text-gray-600">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                 </svg>
-              </div>
+              </button>
               } @else {
-              <img src="/assets/images/placeholder.png" class="max-w-full max-h-full" />
+              <img src="/assets/images/placeholder.png" class="max-w-full max-h-full" alt="" width="80" height="80" />
               }
             </div>
             <button type="button"
diff --git a/bizmatch/src/build.ts b/bizmatch/src/build.ts
index b899679..d57ba8e 100644
--- a/bizmatch/src/build.ts
+++ b/bizmatch/src/build.ts
@@ -1,6 +1,6 @@
 // Build information, automatically generated by `the_build_script` :zwinkern:
 const build = {
-    timestamp: "GER: 05.02.2026 13:06 | TX: 02/05/2026 6:06 AM"
+    timestamp: "GER: 06.02.2026 12:50 | TX: 02/06/2026 5:50 AM"
 };
 
 export default build;
\ No newline at end of file
diff --git a/bizmatch/src/index.html b/bizmatch/src/index.html
index 263354f..f103ea2 100644
--- a/bizmatch/src/index.html
+++ b/bizmatch/src/index.html
@@ -62,15 +62,22 @@
   <link rel="icon" href="/assets/cropped-Favicon-192x192.png" sizes="192x192" />
   <link rel="apple-touch-icon" href="/assets/cropped-Favicon-180x180.png" />
 
-  <!-- Schema.org Structured Data (Static) -->
+  <!-- Schema.org Structured Data -->
+  <!-- Note: Organization and WebSite schemas are now injected dynamically by SeoService -->
+  <!-- with more complete data (telephone, foundingDate, knowsAbout, dual search actions) -->
+
+  <!-- LocalBusiness Schema for local visibility -->
   <script type="application/ld+json">
     {
       "@context": "https://schema.org",
-      "@type": "Organization",
+      "@type": "LocalBusiness",
+      "@id": "https://www.bizmatch.net/#localbusiness",
       "name": "BizMatch",
+      "description": "Business brokerage and commercial real estate marketplace connecting buyers and sellers across the United States.",
       "url": "https://www.bizmatch.net",
       "logo": "https://www.bizmatch.net/assets/images/bizmatch-logo.png",
-      "description": "Buy and sell businesses, commercial properties, and franchises. Browse thousands of verified listings across the United States.",
+      "image": "https://www.bizmatch.net/assets/images/bizmatch-logo.png",
+      "priceRange": "$$",
       "address": {
         "@type": "PostalAddress",
         "streetAddress": "1001 Blucher Street",
@@ -79,33 +86,17 @@
         "postalCode": "78401",
         "addressCountry": "US"
       },
-      "contactPoint": {
-        "@type": "ContactPoint",
-        "contactType": "Customer Service",
-        "email": "info@bizmatch.net"
+      "geo": {
+        "@type": "GeoCoordinates",
+        "latitude": "27.7876",
+        "longitude": "-97.3940"
       },
-      "sameAs": [
-        "https://www.facebook.com/bizmatch",
-        "https://www.linkedin.com/company/bizmatch",
-        "https://twitter.com/bizmatch"
-      ]
-    }
-  </script>
-
-  <script type="application/ld+json">
-    {
-      "@context": "https://schema.org",
-      "@type": "WebSite",
-      "name": "BizMatch",
-      "url": "https://www.bizmatch.net",
-      "potentialAction": {
-        "@type": "SearchAction",
-        "target": {
-          "@type": "EntryPoint",
-          "urlTemplate": "https://www.bizmatch.net/businessListings?search={search_term_string}"
-        },
-        "query-input": "required name=search_term_string"
-      }
+      "areaServed": {
+        "@type": "Country",
+        "name": "United States"
+      },
+      "serviceType": ["Business Brokerage", "Commercial Real Estate", "Business For Sale Listings"],
+      "knowsAbout": ["Business Sales", "Commercial Properties", "Franchise Opportunities", "Business Valuation"]
     }
   </script>
 </head>