diff --git a/bizmatch/src/app/app.component.html b/bizmatch/src/app/app.component.html
index 1f8d4d9..6b0901e 100644
--- a/bizmatch/src/app/app.component.html
+++ b/bizmatch/src/app/app.component.html
@@ -3,7 +3,7 @@
   @if (actualRoute !=='home' && actualRoute !=='login' && actualRoute!=='emailVerification' && actualRoute!=='email-authorized'){
   <header></header>
   }
-  <main class="flex-1" [ngClass]="{ 'bg-slate-100': actualRoute !== 'home' }">
+  <main class="flex-1">
     <router-outlet></router-outlet>
   </main>
 
diff --git a/bizmatch/src/app/components/drag-drop-mixed/drag-drop-mixed.component.html b/bizmatch/src/app/components/drag-drop-mixed/drag-drop-mixed.component.html
index 79e5968..0544dc3 100644
--- a/bizmatch/src/app/components/drag-drop-mixed/drag-drop-mixed.component.html
+++ b/bizmatch/src/app/components/drag-drop-mixed/drag-drop-mixed.component.html
@@ -13,8 +13,8 @@
   </div> -->
   <div *ngFor="let item of items" cdkDrag (cdkDragEnded)="dragEnded($event)" (cdkDragStarted)="dragStarted()" (cdkDragMoved)="dragMoved($event)" [class.animation]="isAnimationActive" class="grid-item item">
     <div class="image-box hover:cursor-pointer">
-      <img [src]="getImageUrl(item)" class="w-full h-full object-cover rounded-lg shadow-md" />
-      <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md" (click)="imageToDelete.emit(item)">
+      <img [src]="getImageUrl(item)" class="w-full h-full object-cover rounded-lg drop-shadow-custom-bg" />
+      <div class="absolute top-2 right-2 bg-white rounded-full p-1 drop-shadow-custom-bg" (click)="imageToDelete.emit(item)">
         <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>
diff --git a/bizmatch/src/app/components/email-authorized/email-authorized.component.html b/bizmatch/src/app/components/email-authorized/email-authorized.component.html
index e4298c3..5e5137d 100644
--- a/bizmatch/src/app/components/email-authorized/email-authorized.component.html
+++ b/bizmatch/src/app/components/email-authorized/email-authorized.component.html
@@ -1,5 +1,5 @@
 <div class="container mx-auto py-8 px-4 max-w-md">
-  <div class="bg-white p-6 rounded-lg shadow-md text-center">
+  <div class="bg-white p-6 rounded-lg drop-shadow-custom-bg text-center">
     <!-- Loading state -->
     <ng-container *ngIf="verificationStatus === 'pending'">
       <div class="flex justify-center mb-4">
diff --git a/bizmatch/src/app/components/email-verification/email-verification.component.html b/bizmatch/src/app/components/email-verification/email-verification.component.html
index 9187aa7..03cf40e 100644
--- a/bizmatch/src/app/components/email-verification/email-verification.component.html
+++ b/bizmatch/src/app/components/email-verification/email-verification.component.html
@@ -1,5 +1,5 @@
 <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-  <div class="bg-white p-8 rounded shadow-md w-full max-w-md text-center">
+  <div class="bg-white p-8 rounded drop-shadow-custom-bg w-full max-w-md text-center">
     <h2 class="text-2xl font-bold mb-4">Email Verification</h2>
     <p class="mb-4">A verification email has been sent to your email address. Please check your inbox and click the link to verify your account.</p>
     <p>Once verified, please return to the application.</p>
diff --git a/bizmatch/src/app/components/header/header.component.html b/bizmatch/src/app/components/header/header.component.html
index 5330fe9..551a8fa 100644
--- a/bizmatch/src/app/components/header/header.component.html
+++ b/bizmatch/src/app/components/header/header.component.html
@@ -28,7 +28,7 @@
         </button>
 
         <!-- Sort options dropdown -->
-        <div *ngIf="sortDropdownVisible" class="absolute right-0 z-50 w-48 md:mt-2 max-md:mt-20 max-md:mr-[-2.5rem] bg-white border border-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:border-gray-600">
+        <div *ngIf="sortDropdownVisible" class="absolute right-0 z-50 w-48 md:mt-2 max-md:mt-20 max-md:mr-[-2.5rem] bg-white border border-gray-200 rounded-lg drop-shadow-custom-bg dark:bg-gray-800 dark:border-gray-600">
           <ul class="py-1 text-sm text-gray-700 dark:text-gray-200">
             @for(item of sortByOptions; track item){
             <li (click)="sortBy(item.value)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">{{ item.selectName ? item.selectName : item.name }}</li>
diff --git a/bizmatch/src/app/components/login-register/login-register.component.html b/bizmatch/src/app/components/login-register/login-register.component.html
index 123ff74..39df5fc 100644
--- a/bizmatch/src/app/components/login-register/login-register.component.html
+++ b/bizmatch/src/app/components/login-register/login-register.component.html
@@ -1,5 +1,5 @@
-<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-  <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
+<div class="flex flex-col items-center justify-center min-h-screen">
+  <div class="bg-white p-8 rounded-lg drop-shadow-custom-bg w-full max-w-md">
     <h2 class="text-2xl font-bold mb-6 text-center text-gray-800">
       {{ isLoginMode ? 'Login' : 'Sign Up' }}
     </h2>
@@ -83,12 +83,6 @@
 
     <!-- Google Button -->
     <button (click)="loginWithGoogle()" class="w-full flex items-center justify-center bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 py-2.5 rounded-lg transition-colors duration-200">
-      <!-- <svg class="h-5 w-5 mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M12.24 10.32V13.8H15.48C15.336 14.688 14.568 16.368 12.24 16.368C10.224 16.368 8.568 14.688 8.568 12.672C8.568 10.656 10.224 8.976 12.24 8.976C13.32 8.976 14.16 9.432 14.688 10.08L16.704 8.208C15.528 7.032 14.04 6.384 12.24 6.384C8.832 6.384 6 9.216 6 12.672C6 16.128 8.832 18.96 12.24 18.96C15.696 18.96 18.12 16.656 18.12 12.672C18.12 11.952 18.024 11.28 17.88 10.656L12.24 10.32Z"
-          fill="currentColor"
-        />
-      </svg> -->
       <svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
         <path
           fill="#FFC107"
@@ -100,17 +94,5 @@
       </svg>
       Continue with Google
     </button>
-    <!-- <button (click)="loginWithGoogle()" class="bg-white text-blue-600 px-6 py-3 rounded-lg shadow-lg hover:bg-gray-100 transition duration-300 flex items-center justify-center">
-      <svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
-        <path
-          fill="#FFC107"
-          d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"
-        />
-        <path fill="#FF3D00" d="M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z" />
-        <path fill="#4CAF50" d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0124 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z" />
-        <path fill="#1976D2" d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 01-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z" />
-      </svg>
-      Continue with Google
-    </button> -->
   </div>
 </div>
diff --git a/bizmatch/src/app/pages/admin/user-list/user-list.component.html b/bizmatch/src/app/pages/admin/user-list/user-list.component.html
index 2eba7b8..064372d 100644
--- a/bizmatch/src/app/pages/admin/user-list/user-list.component.html
+++ b/bizmatch/src/app/pages/admin/user-list/user-list.component.html
@@ -32,7 +32,7 @@
   </div>
 
   <!-- Benutzertabelle -->
-  <div class="overflow-x-auto shadow-md rounded-lg bg-white">
+  <div class="overflow-x-auto drop-shadow-custom-bg rounded-lg bg-white">
     <table class="min-w-full divide-y divide-gray-200">
       <thead class="bg-gray-50">
         <tr>
@@ -107,7 +107,7 @@
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                 </svg>
               </button>
-              <div *ngIf="dropdown.classList.contains('active')" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10">
+              <div *ngIf="dropdown.classList.contains('active')" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md drop-shadow-custom-bg bg-white ring-1 ring-black ring-opacity-5 z-10">
                 <div class="py-1" role="menu" aria-orientation="vertical">
                   <a (click)="changeUserRole(user, 'admin'); dropdown.classList.remove('active')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer">Admin</a>
                   <a (click)="changeUserRole(user, 'pro'); dropdown.classList.remove('active')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer">Pro</a>
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 d4de47e..d894080 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
@@ -1,5 +1,5 @@
 <div class="container mx-auto p-4">
-  <div class="bg-white rounded-lg shadow-lg overflow-hidden relative">
+  <div class="bg-white rounded-lg 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"
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 bd9998f..c41c0bd 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
@@ -1,5 +1,5 @@
 <div class="container mx-auto p-4">
-  <div class="bg-white shadow-md rounded-lg overflow-hidden">
+  <div class="bg-white drop-shadow-custom-bg rounded-lg overflow-hidden">
     @if(listing){
     <div class="p-6 relative">
       <h1 class="text-3xl font-bold mb-4">{{ listing?.title }}</h1>
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 92f8502..b4931e9 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
@@ -1,6 +1,6 @@
 <div class="container mx-auto p-4">
   @if(user){
-  <div class="bg-white shadow-md rounded-lg overflow-hidden">
+  <div class="bg-white drop-shadow-custom-bg rounded-lg overflow-hidden">
     <!-- Header -->
     <div class="flex items-center justify-between p-4 border-b relative">
       <div class="flex items-center space-x-4">
diff --git a/bizmatch/src/app/pages/home/home.component.html b/bizmatch/src/app/pages/home/home.component.html
index 7f2b78f..f3a1204 100644
--- a/bizmatch/src/app/pages/home/home.component.html
+++ b/bizmatch/src/app/pages/home/home.component.html
@@ -34,17 +34,23 @@
   </div>
 </div>
 
-<main class="flex flex-col items-center justify-center lg:px-4 w-full flex-grow">
-  <div class="bg-cover-custom py-20 md:py-40 flex flex-col w-full">
+<!-- ==== ANPASSUNGEN START ==== -->
+<!-- 1. px-4 für <main> (vorher px-2 sm:px-4) -->
+<main class="flex flex-col items-center justify-center px-4 w-full flex-grow">
+  <div class="bg-cover-custom py-12 md:py-20 lg:py-32 flex flex-col w-full rounded-xl lg:rounded-2xl md:drop-shadow-custom-md lg:drop-shadow-custom-lg min-h-[calc(100vh_-_20rem)] lg:min-h-[calc(100vh_-_10rem)]">
     <div class="flex justify-center w-full">
-      <div class="w-11/12 md:w-2/3 lg:w-1/2">
-        <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-blue-900 mb-4 text-center">Find businesses for sale.</h1>
-        <p class="text-base md:text-lg lg:text-xl text-blue-600 mb-8 text-center">Unlocking Exclusive Opportunities - Empowering Entrepreneurial Dreams</p>
-        <div class="bg-white bg-opacity-80 pb-6 pt-2 px-2 rounded-lg shadow-lg w-full" [ngClass]="{ 'pt-6': aiSearch }">
+      <!-- 3. Für Mobile: m-2 statt max-w-xs; ab sm: wieder max-width und kein Margin -->
+      <div class="w-full m-2 sm:m-0 sm:max-w-md md:max-w-xl lg:max-w-2xl xl:max-w-3xl">
+        <!-- Schriftgrößen angepasst (wie vorher) -->
+        <h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-blue-900 mb-3 sm:mb-4 text-center">Find businesses for sale.</h1>
+        <!-- Abstand unten angepasst (wie vorher) -->
+        <p class="text-base md:text-lg lg:text-xl text-blue-600 mb-6 md:mb-8 text-center">Unlocking Exclusive Opportunities - Empowering Entrepreneurial Dreams</p>
+        <!-- Restliche Anpassungen (Innenabstände, Button-Paddings etc.) bleiben wie im vorherigen Schritt -->
+        <div class="bg-white bg-opacity-80 pb-4 md:pb-6 pt-2 px-3 sm:px-4 md:px-6 rounded-lg shadow-lg w-full" [ngClass]="{ 'pt-6': aiSearch }">
           @if(!aiSearch){
-          <div class="text-sm lg:text-base mb-1 text-center text-gray-500 border-gray-200 dark:text-gray-400 dark:border-gray-700 flex justify-center">
-            <ul class="flex flex-wrap -mb-px">
-              <li class="me-2">
+          <div class="text-sm lg:text-base mb-1 text-center text-gray-500 border-gray-200 dark:text-gray-400 dark:border-gray-700 flex justify-between">
+            <ul class="flex flex-wrap -mb-px w-full">
+              <li class="w-[33%]">
                 <a
                   (click)="changeTab('business')"
                   [ngClass]="
@@ -52,12 +58,12 @@
                       ? ['text-blue-600', 'border-blue-600', 'active', 'dark:text-blue-500', 'dark:border-blue-500']
                       : ['border-transparent', 'hover:text-gray-600', 'hover:border-gray-300', 'dark:hover:text-gray-300']
                   "
-                  class="hover:cursor-pointer inline-block p-4 border-b-2 rounded-t-lg"
+                  class="hover:cursor-pointer inline-block px-1 py-2 md:p-4 border-b-2 rounded-t-lg"
                   >Businesses</a
                 >
               </li>
               @if ((numberOfCommercial$ | async) > 0) {
-              <li class="me-2">
+              <li class="w-[33%]">
                 <a
                   (click)="changeTab('commercialProperty')"
                   [ngClass]="
@@ -65,13 +71,12 @@
                       ? ['text-blue-600', 'border-blue-600', 'active', 'dark:text-blue-500', 'dark:border-blue-500']
                       : ['border-transparent', 'hover:text-gray-600', 'hover:border-gray-300', 'dark:hover:text-gray-300']
                   "
-                  class="hover:cursor-pointer inline-block p-4 border-b-2 rounded-t-lg"
+                  class="hover:cursor-pointer inline-block px-1 py-2 md:p-4 border-b-2 rounded-t-lg"
                   >Properties</a
                 >
               </li>
-              }
-              @if ((numberOfBroker$ | async) > 0) {
-              <li class="me-2">
+              } @if ((numberOfBroker$ | async) > 0) {
+              <li class="w-[33%]">
                 <a
                   (click)="changeTab('broker')"
                   [ngClass]="
@@ -79,49 +84,14 @@
                       ? ['text-blue-600', 'border-blue-600', 'active', 'dark:text-blue-500', 'dark:border-blue-500']
                       : ['border-transparent', 'hover:text-gray-600', 'hover:border-gray-300', 'dark:hover:text-gray-300']
                   "
-                  class="hover:cursor-pointer inline-block p-4 border-b-2 rounded-t-lg"
+                  class="hover:cursor-pointer inline-block px-1 py-2 md:p-4 border-b-2 rounded-t-lg"
                   >Professionals</a
                 >
               </li>
               }
             </ul>
           </div>
-          } @if(aiSearch){
-          <div class="w-full max-w-3xl mx-auto bg-white rounded-lg flex flex-col md:flex-row md:border md:border-gray-300">
-            <div class="md:w-48 flex-1 md:border-r border-gray-300 overflow-hidden mb-2 md:mb-0">
-              <div class="relative max-sm:border border-gray-300 rounded-md">
-                <input #aiSearchInput type="text" [(ngModel)]="aiSearchText" name="aiSearchText" class="w-full p-2 border border-gray-300 rounded-md" (focus)="stopTypingEffect()" (blur)="startTypingEffect()" />
-              </div>
-            </div>
-            <div class="bg-blue-600 hover:bg-blue-500 transition-colors duration-200 max-sm:rounded-md">
-              <button
-                type="button"
-                class="w-full h-full text-white font-semibold py-3 px-6 focus:outline-none rounded-md md:rounded-none flex items-center justify-center min-w-[180px] min-h-[48px]"
-                (click)="generateAiResponse()"
-              >
-                <span class="flex items-center">
-                  @if(loadingAi){
-                  <svg aria-hidden="true" role="status" class="w-4 h-4 mr-3 text-white animate-spin" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                      d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-                      fill="#E5E7EB"
-                    />
-                    <path
-                      d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  <span>Loading ...</span>
-                  } @else {
-                  <span>Search</span>
-                  }
-                </span>
-              </button>
-            </div>
-          </div>
-          @if(aiSearchFailed){
-          <div id="error-message" class="w-full max-w-3xl mx-auto mt-2 text-red-600 text-center">Search timed out. Please try again or use classic Search</div>
-          } } @if(criteria && !aiSearch){
+          } @if(criteria && !aiSearch){
           <div class="w-full max-w-3xl mx-auto bg-white rounded-lg flex flex-col md:flex-row md:border md:border-gray-300">
             <div class="md:flex-none md:w-48 flex-1 md:border-r border-gray-300 overflow-hidden mb-2 md:mb-0">
               <div class="relative max-sm:border border-gray-300 rounded-md">
@@ -186,9 +156,11 @@
             }
             <div class="bg-blue-600 hover:bg-blue-500 transition-colors duration-200 max-sm:rounded-md">
               @if(getNumberOfFiltersSet()>0 && numberOfResults$){
-              <button class="w-full h-full text-white font-semibold py-3 px-6 focus:outline-none rounded-md md:rounded-none" (click)="search()">Search ({{ numberOfResults$ | async }})</button>
+              <button class="w-full h-full text-white font-semibold py-2 px-4 md:py-3 md:px-6 focus:outline-none rounded-md md:rounded-none min-h-[48px]" (click)="search()">
+                Search ({{ numberOfResults$ | async }})
+              </button>
               }@else {
-              <button class="w-full h-full text-white font-semibold py-3 px-6 focus:outline-none rounded-md md:rounded-none" (click)="search()">Search</button>
+              <button class="w-full h-full text-white font-semibold py-2 px-4 md:py-3 md:px-6 focus:outline-none rounded-md md:rounded-none min-h-[48px]" (click)="search()">Search</button>
               }
             </div>
           </div>
@@ -208,3 +180,4 @@
     </div>
   </div>
 </main>
+<!-- ==== ANPASSUNGEN ENDE ==== -->
diff --git a/bizmatch/src/app/pages/home/home.component.scss b/bizmatch/src/app/pages/home/home.component.scss
index bec5f8e..8dc75a8 100644
--- a/bizmatch/src/app/pages/home/home.component.scss
+++ b/bizmatch/src/app/pages/home/home.component.scss
@@ -3,8 +3,6 @@
   background-size: cover;
   background-position: center;
   border-radius: 20px;
-  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
-  min-height: calc(100vh - 4rem);
 }
 select:not([size]) {
   background-image: unset;
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 09dcadf..99403e0 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
@@ -3,7 +3,7 @@
   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
     <!-- Amanda Taylor -->
     @for (user of users; track user) {
-    <div class="bg-white rounded-lg shadow-md p-6 flex flex-col justify-between">
+    <div class="bg-white rounded-lg drop-shadow-custom-bg p-6 flex flex-col justify-between">
       <div class="flex items-start space-x-4">
         @if(user.hasProfile){
         <img src="{{ env.imageBaseUrl }}/pictures/profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="rounded-md w-20 h-26 object-cover" />
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 cda07e7..f0101f9 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
@@ -3,7 +3,7 @@
   <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
     <!-- Anzahl der Spalten auf 3 reduziert und den Abstand erhöht -->
     @for (listing of listings; track listing.id) {
-    <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
+    <div class="bg-white rounded-lg drop-shadow-custom-bg overflow-hidden hover:shadow-xl">
       <!-- Hover-Effekt hinzugefügt -->
       <div class="p-6 flex flex-col h-full relative z-[0]">
         <div class="flex items-center mb-4">
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 e9a970e..c670321 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
@@ -2,7 +2,7 @@
   @if(listings?.length>0){
   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
     @for (listing of listings; track listing.id) {
-    <div class="bg-white rounded-lg shadow-md overflow-hidden flex flex-col h-full">
+    <div class="bg-white rounded-lg drop-shadow-custom-bg overflow-hidden flex flex-col h-full">
       @if (listing.imageOrder?.length>0){
       <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}" alt="Image" class="w-full h-48 object-cover" />
       } @else {
diff --git a/bizmatch/src/app/pages/subscription/account/account.component.html b/bizmatch/src/app/pages/subscription/account/account.component.html
index 8fef213..fbbac07 100644
--- a/bizmatch/src/app/pages/subscription/account/account.component.html
+++ b/bizmatch/src/app/pages/subscription/account/account.component.html
@@ -1,6 +1,6 @@
 <div class="container mx-auto p-4">
   @if (user){
-  <div class="bg-white rounded-lg shadow-md p-6">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg p-6">
     <form #accountForm="ngForm" class="space-y-4">
       <h2 class="text-2xl font-bold mb-4">Account Details</h2>
       <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
@@ -16,7 +16,7 @@
             <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 shadow-md hover:cursor-pointer" (click)="deleteConfirm('logo')">
+              <div class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 drop-shadow-custom-bg hover:cursor-pointer" (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>
@@ -38,7 +38,7 @@
             <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 shadow-md hover:cursor-pointer" (click)="deleteConfirm('profile')">
+              <div class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 drop-shadow-custom-bg hover:cursor-pointer" (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>
diff --git a/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.html b/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.html
index 1831c36..53733d1 100644
--- a/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.html
+++ b/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.html
@@ -1,5 +1,5 @@
 <div class="container mx-auto p-4">
-  <div class="bg-white rounded-lg shadow-md p-6">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg p-6">
     <h1 class="text-2xl font-semibold mb-6">Edit Listing</h1>
     @if(listing){
     <form #listingForm="ngForm" class="space-y-4">
diff --git a/bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.html b/bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.html
index 4a3ae3c..2b53f52 100644
--- a/bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.html
+++ b/bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.html
@@ -1,5 +1,5 @@
 <div class="container mx-auto p-4">
-  <div class="bg-white rounded-lg shadow-md p-6">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg p-6">
     <h1 class="text-2xl font-semibold mb-6">Edit Listing</h1>
     @if (listing){
     <form #listingForm="ngForm" class="space-y-4">
@@ -18,80 +18,19 @@
         </ng-select>
       </div>
 
-      <!-- <div class="mb-4">
-        <label for="title" class="block text-sm font-bold text-gray-700 mb-1">Title of Listing</label>
-        <input type="text" id="title" [(ngModel)]="listing.title" name="title" class="w-full p-2 border border-gray-300 rounded-md" />
-      </div> -->
       <div>
         <app-validated-input label="Title of Listing" name="title" [(ngModel)]="listing.title"></app-validated-input>
       </div>
 
       <div>
-        <!-- <label for="description" class="block text-sm font-bold text-gray-700 mb-1">Description</label>
-        <quill-editor [(ngModel)]="listing.description" name="description" [modules]="quillModules"></quill-editor> -->
         <app-validated-quill label="Description" name="description" [(ngModel)]="listing.description"></app-validated-quill>
       </div>
 
-      <!-- <div>
-        <label for="type" class="block text-sm font-bold text-gray-700 mb-1">Property Category</label>
-        <ng-select [items]="typesOfCommercialProperty" bindLabel="name" bindValue="value" [(ngModel)]="listing.type" name="type"> </ng-select>
-      </div> -->
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         <app-validated-ng-select label="Property Category" name="type" [(ngModel)]="listing.type" [items]="typesOfCommercialProperty"></app-validated-ng-select>
-        <!-- <app-validated-city label="Location" name="location" [(ngModel)]="listing.location"></app-validated-city> -->
         <app-validated-location label="Location" name="location" [(ngModel)]="listing.location"></app-validated-location>
       </div>
-
-      <!-- <div class="flex mb-4 space-x-4">
-        <div class="w-1/2">
-          <label for="state" class="block text-sm font-bold text-gray-700 mb-1">State</label>
-          <ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="listing.state" name="state"> </ng-select>
-        </div>
-        <div class="w-1/2">
-          <label for="city" class="block text-sm font-bold text-gray-700 mb-1">City</label>
-          <input type="text" id="city" [(ngModel)]="listing.city" name="city" class="w-full p-2 border border-gray-300 rounded-md" />
-        </div>
-      </div> -->
-      <!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> -->
-      <!-- <app-validated-ng-select label="State" name="state" [(ngModel)]="listing.location.state" [items]="selectOptions?.states"></app-validated-ng-select>
-        <app-validated-input label="City" name="city" [(ngModel)]="listing.location.city"></app-validated-input> -->
-
-      <!-- </div> -->
-
-      <!-- <div class="flex mb-4 space-x-4">
-        <div class="w-1/2">
-          <label for="zipCode" class="block text-sm font-bold text-gray-700 mb-1">Zip Code</label>
-          <input type="text" id="zipCode" [(ngModel)]="listing.zipCode" name="zipCode" class="w-full p-2 border border-gray-300 rounded-md" />
-        </div>
-        <div class="w-1/2">
-          <label for="county" class="block text-sm font-bold text-gray-700 mb-1">County</label>
-          <input type="text" id="county" [(ngModel)]="listing.county" name="county" class="w-full p-2 border border-gray-300 rounded-md" />
-        </div>
-      </div> -->
-      <!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <app-validated-input label="Zip Code" name="zipCode" [(ngModel)]="listing.zipCode"></app-validated-input>
-        <app-validated-input label="County" name="county" [(ngModel)]="listing.county"></app-validated-input>
-      </div> -->
-
-      <!-- <div class="mb-4">
-        <label for="internals" class="block text-sm font-bold text-gray-700 mb-1">Internal Notes (Will not be shown on the listing, for your records only.)</label>
-        <textarea id="internals" [(ngModel)]="listing.internals" name="internals" class="w-full p-2 border border-gray-300 rounded-md" rows="3"></textarea>
-      </div> -->
-
-      <!-- <div class="flex items-center mb-4"> -->
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <!-- <div class="w-1/2">
-          <label for="price" class="block text-sm font-bold text-gray-700 mb-1">Price</label>
-          <input
-            type="text"
-            id="price"
-            [(ngModel)]="listing.price"
-            name="price"
-            class="w-full p-2 border border-gray-300 rounded-md"
-            [options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 0, align: 'left' }"
-            currencyMask
-          />
-        </div> -->
         <app-validated-price label="Price" name="price" [(ngModel)]="listing.price"></app-validated-price>
         <div class="flex justify-center">
           <label class="flex items-center cursor-pointer">
@@ -103,34 +42,8 @@
           </label>
         </div>
       </div>
-      <!-- <div class="container mx-auto p-4">
-        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-          @for (image of listing.imageOrder; track listing.imageOrder) {
-          <div class="relative aspect-video cursor-move">
-            <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ image }}?_ts={{ ts }}" [alt]="image" class="w-full h-full object-cover rounded-lg shadow-md" />
-            <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md">
-              <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>
-          </div>
-          }
-        </div>
-      </div> -->
+
       <div class="container mx-auto pt-2">
-        <!-- <div class="grid-container"> -->
-        <!-- @for (image of listing.imageOrder; track image) {
-          <div cdkDrag class="grid-item">
-            <div class="image-box">
-              <img [src]="getImageUrl(image)" [alt]="image" class="w-full h-full object-cover rounded-lg shadow-md" />
-              <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md">
-                <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>
-            </div>
-          </div>
-          } -->
         <app-drag-drop-mixed [listing]="listing" [ts]="ts" (imageOrderChanged)="imageOrderChanged($event)" (imageToDelete)="deleteConfirm($event)"></app-drag-drop-mixed>
         <!-- </div> -->
       </div>
@@ -150,7 +63,6 @@
           Upload
         </button>
         }
-        <!-- <input type="file" #fileInput style="display: none" (change)="fileChangeEvent($event)" accept="image/*" /> -->
       </div>
       @if (mode==='create'){
       <button (click)="save()" class="bg-blue-500 text-white px-4 py-2 mt-3 rounded-md hover:bg-blue-600">Post Listing</button>
diff --git a/bizmatch/src/app/pages/subscription/email-us/email-us.component.html b/bizmatch/src/app/pages/subscription/email-us/email-us.component.html
index ae3df45..7425bcc 100644
--- a/bizmatch/src/app/pages/subscription/email-us/email-us.component.html
+++ b/bizmatch/src/app/pages/subscription/email-us/email-us.component.html
@@ -1,5 +1,5 @@
 <div class="container mx-auto p-4">
-  <div class="bg-white rounded-lg shadow-md p-6">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg p-6">
     <h2 class="text-2xl font-semibold mb-6">Contact Us</h2>
     <form #contactForm="ngForm" class="space-y-4">
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
diff --git a/bizmatch/src/app/pages/subscription/favorites/favorites.component.html b/bizmatch/src/app/pages/subscription/favorites/favorites.component.html
index 74eb33c..81215dd 100644
--- a/bizmatch/src/app/pages/subscription/favorites/favorites.component.html
+++ b/bizmatch/src/app/pages/subscription/favorites/favorites.component.html
@@ -1,10 +1,10 @@
 <div class="container mx-auto p-4">
-  <div class="bg-white rounded-lg shadow-md p-6">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg p-6">
     <h1 class="text-2xl font-bold md:mb-4">My Favorites</h1>
 
     <!-- Desktop view -->
     <div class="hidden md:block">
-      <table class="w-full bg-white shadow-md rounded-lg overflow-hidden">
+      <table class="w-full bg-white drop-shadow-inner-faint rounded-lg overflow-hidden">
         <thead class="bg-gray-100">
           <tr>
             <th class="py-2 px-4 text-left">Title</th>
@@ -44,7 +44,7 @@
 
     <!-- Mobile view -->
     <div class="md:hidden">
-      <div *ngFor="let listing of favorites" class="bg-white shadow-md rounded-lg p-4 mb-4">
+      <div *ngFor="let listing of favorites" class="bg-white drop-shadow-inner-faint rounded-lg p-4 mb-4">
         <h2 class="text-xl font-semibold mb-2">{{ listing.title }}</h2>
         <p class="text-gray-600 mb-2">Category: {{ listing.listingsCategory === 'commercialProperty' ? 'Commercial Property' : 'Business' }}</p>
         <p class="text-gray-600 mb-2">Located in: {{ listing.location.name ? listing.location.name : listing.location.county }}, {{ listing.location.state }}</p>
diff --git a/bizmatch/src/app/pages/subscription/my-listing/my-listing.component.html b/bizmatch/src/app/pages/subscription/my-listing/my-listing.component.html
index a37a861..9063400 100644
--- a/bizmatch/src/app/pages/subscription/my-listing/my-listing.component.html
+++ b/bizmatch/src/app/pages/subscription/my-listing/my-listing.component.html
@@ -1,10 +1,10 @@
 <div class="container mx-auto p-4">
-  <div class="bg-white rounded-lg shadow-md p-6">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg p-6">
     <h1 class="text-2xl font-bold md:mb-4">My Listings</h1>
 
     <!-- Desktop view -->
     <div class="hidden md:block">
-      <table class="w-full bg-white shadow-md rounded-lg overflow-hidden">
+      <table class="w-full bg-white drop-shadow-inner-faint rounded-lg overflow-hidden">
         <thead class="bg-gray-100">
           <tr>
             <th class="py-2 px-4 text-left">Title</th>
@@ -57,7 +57,7 @@
 
     <!-- Mobile view -->
     <div class="md:hidden">
-      <div *ngFor="let listing of myListings" class="bg-white shadow-md rounded-lg p-4 mb-4">
+      <div *ngFor="let listing of myListings" class="bg-white drop-shadow-inner-faint rounded-lg p-4 mb-4">
         <h2 class="text-xl font-semibold mb-2">{{ listing.title }}</h2>
         <p class="text-gray-600 mb-2">Category: {{ listing.listingsCategory === 'commercialProperty' ? 'Commercial Property' : 'Business' }}</p>
         <p class="text-gray-600 mb-2">Located in: {{ listing.location.name ? listing.location.name : listing.location.county }} - {{ listing.location.state }}</p>
diff --git a/bizmatch/tailwind.config.js b/bizmatch/tailwind.config.js
index d545744..de679ee 100644
--- a/bizmatch/tailwind.config.js
+++ b/bizmatch/tailwind.config.js
@@ -33,7 +33,14 @@ module.exports = {
         '3xl': '1.875rem',
         '4xl': '2.25rem',
         '5xl': '3rem',
-      },      
+      },
+      dropShadow: {
+        'custom-bg': '0 15px 20px rgba(0, 0, 0, 0.3)', // Wähle einen aussagekräftigen Namen
+        'inner-faint': '0 3px 6px rgba(0, 0, 0, 0.1)',
+        'custom-md': '0 10px 15px rgba(0, 0, 0, 0.25)', // Dein mittlerer Schatten
+        'custom-lg': '0 15px 20px rgba(0, 0, 0, 0.3)'   // Dein großer Schatten        
+        // ... andere benutzerdefinierte Schatten, falls vorhanden
+      }   
     },
   },
   plugins: [