diff --git a/src/app/accounting/search-journal-entry/search-journal-entry.component.html b/src/app/accounting/search-journal-entry/search-journal-entry.component.html
index 7044c38cb..2b83a7af6 100644
--- a/src/app/accounting/search-journal-entry/search-journal-entry.component.html
+++ b/src/app/accounting/search-journal-entry/search-journal-entry.component.html
@@ -1,4 +1,4 @@
-<div class="container layout-row-wrap gap-2px responsive-column">
+<div class="container layout-row-wrap gap-2px responsive-column filter-container">
   <mat-form-field class="flex-31">
     <mat-label>{{ 'labels.inputs.Office Name' | translate }}</mat-label>
     <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete" />
@@ -85,13 +85,12 @@
   </mat-option>
 </mat-autocomplete>
 
-<div class="mat-elevation-z8 container">
+<div class="mat-elevation-z8 container table-container">
   <table mat-table [dataSource]="dataSource" matSort>
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Entry ID' | translate }}</th>
       <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.id }}</td>
     </ng-container>
-
     <ng-container matColumnDef="officeName">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office' | translate }}</th>
       <td mat-cell *matCellDef="let journalEntry">{{ journalEntry.officeName }}</td>
diff --git a/src/app/accounting/search-journal-entry/search-journal-entry.component.scss b/src/app/accounting/search-journal-entry/search-journal-entry.component.scss
index 24edb63bb..dcc196232 100644
--- a/src/app/accounting/search-journal-entry/search-journal-entry.component.scss
+++ b/src/app/accounting/search-journal-entry/search-journal-entry.component.scss
@@ -1,7 +1,33 @@
 table {
   width: 100%;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+  border: 1px solid var(--border-color, #ddd);
+  border-radius: 8px;
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease;
 
   .select-row:hover {
     cursor: pointer;
   }
 }
+
+.filter-container {
+  margin-bottom: 1rem;
+  padding: 1.5rem;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+  border: 1px solid var(--border-color, #ddd);
+  border-radius: 8px;
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease;
+}
+
+.table-container {
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+  border: 1px solid var(--border-color, #ddd);
+  border-radius: 8px;
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease;
+}