diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.html
index 737db11..80a9bc5 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.html
@@ -1,80 +1,73 @@
-<!-- Debug: Show all input values -->
-
-
-<!-- Display Mode - No configuration UI in runner -->
 <div class="compact-filter">
-  <div class="filter-header">
+  <div class="filter-header" (click)="toggleFilter()">
     <span class="filter-label" *ngIf="filterLabel">{{ filterLabel }}</span>
     <span class="filter-key" *ngIf="!filterLabel && filterKey">{{ filterKey }}</span>
     <span class="filter-type">({{ filterType }})</span>
+    <clr-icon shape="caret down" class="expand-icon" *ngIf="!isExpanded"></clr-icon>
+    <clr-icon shape="caret up" class="expand-icon" *ngIf="isExpanded"></clr-icon>
   </div>
 
-  <!-- Debug: Show which filter type is active -->
-  <div style="background-color: yellow; padding: 5px; margin: 5px;">
-    Current filter type: {{ filterType }}
-    <div *ngIf="filterType === 'text'">Showing TEXT filter</div>
-    <div *ngIf="filterType === 'dropdown'">Showing DROPDOWN filter</div>
-    <div *ngIf="filterType === 'multiselect'">Showing MULTISELECT filter</div>
-    <div *ngIf="filterType === 'date-range'">Showing DATE-RANGE filter</div>
-    <div *ngIf="filterType === 'toggle'">Showing TOGGLE filter</div>
-  </div>
+  <div class="filter-content" *ngIf="isExpanded">
+    <!-- Text Filter -->
+    <div class="filter-control" *ngIf="filterType === 'text'">
+      <input type="text" 
+             [(ngModel)]="filterValue" 
+             (ngModelChange)="onFilterValueChange($event)"
+             [placeholder]="filterLabel || filterKey"
+             class="clr-input compact-input">
+    </div>
 
-  <!-- Text Filter -->
-  <div class="filter-control" *ngIf="filterType === 'text'">
-    <input type="text" 
-           [(ngModel)]="filterValue" 
-           (ngModelChange)="onFilterValueChange($event)"
-           [placeholder]="filterLabel || filterKey"
-           class="clr-input compact-input">
-  </div>
+    <!-- Dropdown Filter -->
+    <div class="filter-control" *ngIf="filterType === 'dropdown'">
+      <select [(ngModel)]="filterValue" 
+              (ngModelChange)="onFilterValueChange($event)"
+              class="clr-select compact-select">
+        <option value="">{{ filterLabel || filterKey }}</option>
+        <option *ngFor="let option of filterOptions; let i = index" [value]="option">{{ option }}</option>
+      </select>
+    </div>
 
-  <!-- Dropdown Filter -->
-  <div class="filter-control" *ngIf="filterType === 'dropdown'">
-    <select [(ngModel)]="filterValue" 
-            (ngModelChange)="onFilterValueChange($event)"
-            class="clr-select compact-select">
-      <option value="">{{ filterLabel || filterKey }}</option>
-      <option *ngFor="let option of filterOptions; let i = index" [value]="option">{{ option }}</option>
-    </select>
-  </div>
-
-  <!-- Multi-Select Filter -->
-  <div class="filter-control" *ngIf="filterType === 'multiselect'">
-    <div class="multiselect-container">
-      <div class="checkbox-group">
-        <div *ngFor="let option of filterOptions; let i = index" class="checkbox-item">
-          <input type="checkbox" 
-                 [checked]="isOptionSelected(option)" 
-                 (change)="onMultiSelectChange(option, $event)"
-                 [id]="'checkbox-' + filterKey + '-' + i" 
-                 class="clr-checkbox">
-          <label [for]="'checkbox-' + filterKey + '-' + i" class="checkbox-label">{{ option }}</label>
+    <!-- Multi-Select Filter -->
+    <div class="filter-control" *ngIf="filterType === 'multiselect'">
+      <div class="multiselect-container">
+        <div class="checkbox-group">
+          <div *ngFor="let option of filterOptions; let i = index" class="checkbox-item">
+            <input type="checkbox" 
+                   [checked]="isOptionSelected(option)" 
+                   (change)="onMultiSelectChange(option, $event)"
+                   [id]="'checkbox-' + filterKey + '-' + i" 
+                   class="clr-checkbox">
+            <label [for]="'checkbox-' + filterKey + '-' + i" class="checkbox-label">{{ option }}</label>
+          </div>
         </div>
       </div>
     </div>
-  </div>
 
-  <!-- Date Range Filter -->
-  <div class="filter-control date-range" *ngIf="filterType === 'date-range'">
-    <input type="date" 
-           [(ngModel)]="filterValue.start" 
-           (ngModelChange)="onDateRangeChange({ start: $event, end: filterValue.end })"
-           placeholder="Start Date"
-           class="clr-input compact-date">
-    <input type="date" 
-           [(ngModel)]="filterValue.end" 
-           (ngModelChange)="onDateRangeChange({ start: filterValue.start, end: $event })"
-           placeholder="End Date"
-           class="clr-input compact-date">
-  </div>
+    <!-- Date Range Filter -->
+    <div class="filter-control date-range" *ngIf="filterType === 'date-range'">
+      <div class="date-input-group">
+        <input type="date" 
+               [(ngModel)]="filterValue.start" 
+               (ngModelChange)="onDateRangeChange({ start: $event, end: filterValue.end })"
+               placeholder="Start Date"
+               class="clr-input compact-date">
+        <span class="date-separator">to</span>
+        <input type="date" 
+               [(ngModel)]="filterValue.end" 
+               (ngModelChange)="onDateRangeChange({ start: filterValue.start, end: $event })"
+               placeholder="End Date"
+               class="clr-input compact-date">
+      </div>
+    </div>
 
-  <!-- Toggle Filter -->
-  <div class="filter-control toggle" *ngIf="filterType === 'toggle'">
-    <input type="checkbox" 
-           [(ngModel)]="filterValue" 
-           (ngModelChange)="onToggleChange($event)"
-           clrToggle 
-           class="clr-toggle">
-    <label class="toggle-label">{{ filterLabel || filterKey }}</label>
+    <!-- Toggle Filter -->
+    <div class="filter-control toggle" *ngIf="filterType === 'toggle'">
+      <input type="checkbox" 
+             [(ngModel)]="filterValue" 
+             (ngModelChange)="onToggleChange($event)"
+             clrToggle 
+             class="clr-toggle">
+      <label class="toggle-label">{{ filterLabel || filterKey }}</label>
+    </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.scss
index 63d960f..da712b1 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.scss
@@ -1,148 +1,149 @@
-// Make sure the component is visible with very obvious styling
 .compact-filter {
-  display: block !important;
-  min-width: 200px !important;
-  max-width: 300px !important;
-  margin: 10px !important;
-  padding: 15px !important;
-  background: #e3f2fd !important; // Light blue background
-  border: 3px solid #1976d2 !important; // Dark blue border
-  border-radius: 8px !important;
-  font-size: 14px !important;
+  display: block;
+  min-width: 200px;
+  max-width: 300px;
+  margin: 8px;
+  padding: 0;
+  background: #ffffff;
+  border: 1px solid #d7d7d7;
+  border-radius: 4px;
+  font-size: 14px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   
   .filter-header {
-    display: flex !important;
-    justify-content: space-between !important;
-    align-items: center !important;
-    margin-bottom: 10px !important;
-    padding: 5px !important;
-    background: #bbdefb !important; // Lighter blue header
-    border-radius: 4px !important;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 15px;
+    cursor: pointer;
+    background: #f8f8f8;
+    border-bottom: 1px solid #eaeaea;
+    border-radius: 4px 4px 0 0;
+    
+    &:hover {
+      background: #f0f0f0;
+    }
     
     .filter-label, .filter-key {
-      font-weight: bold !important;
-      white-space: nowrap !important;
-      overflow: hidden !important;
-      text-overflow: ellipsis !important;
-      flex-grow: 1 !important;
-      color: #0d47a1 !important; // Dark blue text
+      font-weight: 500;
+      color: #333333;
+      flex-grow: 1;
     }
     
     .filter-type {
-      font-size: 12px !important;
-      color: #424242 !important;
-      margin-left: 8px !important;
-      background: #fff !important;
-      padding: 2px 6px !important;
-      border-radius: 10px !important;
+      font-size: 12px;
+      color: #666666;
+      margin: 0 8px;
+      background: #eaeaea;
+      padding: 2px 8px;
+      border-radius: 12px;
+    }
+    
+    .expand-icon {
+      width: 16px;
+      height: 16px;
+      color: #666666;
     }
   }
   
-  .filter-control {
-    display: block !important;
-    margin: 8px 0 !important;
-    padding: 8px !important;
-    background: #f5f5f5 !important;
-    border-radius: 4px !important;
+  .filter-content {
+    padding: 15px;
     
-    &.date-range {
-      display: flex !important;
-      flex-direction: column !important;
-      gap: 5px !important;
-    }
-    
-    &.toggle {
-      display: flex !important;
-      align-items: center !important;
-      justify-content: flex-start !important;
-      gap: 8px !important;
+    .filter-control {
+      margin-bottom: 12px;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      &.date-range {
+        .date-input-group {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          
+          .date-separator {
+            font-size: 14px;
+            color: #666666;
+          }
+        }
+      }
+      
+      &.toggle {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
     }
   }
   
   .compact-input,
   .compact-select,
-  .compact-multiselect,
   .compact-date {
-    width: 100% !important;
-    padding: 8px 12px !important;
-    font-size: 14px !important;
-    border-radius: 4px !important;
-    min-height: 36px !important;
-    border: 2px solid #4caf50 !important; // Green border
-    background: #fff !important;
-  }
-  
-  .compact-select {
-    height: 36px !important;
-  }
-  
-  .multiselect-container {
-    max-height: 200px !important;
-    overflow-y: auto !important;
-    border: 2px solid #ff9800 !important; // Orange border
-    border-radius: 4px !important;
-    padding: 10px !important;
-    background: #fff8e1 !important; // Light yellow background
-  }
-  
-  .checkbox-group {
-    display: flex !important;
-    flex-direction: column !important;
-    gap: 8px !important;
-  }
-  
-  .checkbox-item {
-    display: flex !important;
-    align-items: center !important;
-    gap: 8px !important;
-    padding: 5px !important;
-    border-radius: 4px !important;
+    width: 100%;
+    padding: 8px 12px;
+    font-size: 14px;
+    border: 1px solid #d7d7d7;
+    border-radius: 4px;
+    background: #ffffff;
     
-    &:hover {
-      background: #f0f0f0 !important;
+    &:focus {
+      outline: none;
+      border-color: #0072ce;
+      box-shadow: 0 0 0 1px #0072ce;
     }
   }
   
-  .checkbox-label {
-    font-size: 14px !important;
-    margin: 0 !important;
-    cursor: pointer !important;
-    white-space: nowrap !important;
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    color: #333 !important;
+  .compact-select {
+    height: 36px;
   }
   
-  .clr-checkbox {
-    margin: 0 !important;
-    cursor: pointer !important;
-    width: 18px !important;
-    height: 18px !important;
+  .multiselect-container {
+    max-height: 200px;
+    overflow-y: auto;
+    border: 1px solid #d7d7d7;
+    border-radius: 4px;
+    padding: 10px;
+    background: #ffffff;
+  }
+  
+  .checkbox-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  
+  .checkbox-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    
+    .clr-checkbox {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+    }
+    
+    .checkbox-label {
+      font-size: 14px;
+      margin: 0;
+      cursor: pointer;
+      color: #333333;
+    }
   }
   
   .toggle-label {
-    margin: 0 !important;
-    font-size: 14px !important;
-    white-space: nowrap !important;
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    max-width: 200px !important;
-    color: #333 !important;
+    margin: 0;
+    font-size: 14px;
+    color: #333333;
   }
   
   .clr-toggle {
-    margin: 0 8px 0 0 !important;
-    width: 40px !important;
-    height: 20px !important;
+    margin: 0;
   }
 }
 
-// Add a very obvious background to make sure the component is visible
+// Host styling
 :host {
-  display: block !important;
-  background-color: #fffde7 !important; // Very light yellow
-  padding: 15px !important;
-  margin: 15px !important;
-  border: 4px solid #f57f17 !important; // Orange border
-  border-radius: 10px !important;
+  display: block;
 }
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.ts
index 2e6e7fc..86978b0 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.ts
@@ -20,6 +20,7 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
   availableFilters: Filter[] = [];
   availableKeys: string[] = [];
   availableValues: string[] = [];
+  isExpanded: boolean = false; // Add expansion state
   
   constructor(
     private filterService: FilterService
@@ -70,6 +71,11 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
     console.log('==========================================');
   }
   
+  // Toggle filter expansion
+  toggleFilter(): void {
+    this.isExpanded = !this.isExpanded;
+  }
+  
   // Register this filter with the filter service
   registerFilter(): void {
     console.log('Registering filter with key:', this.filterKey, 'type:', this.filterType);
@@ -198,14 +204,8 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
     this.onFilterValueChange(dateRange);
   }
   
-
   // Handle multi-select changes
   onMultiSelectChange(option: string, event: any): void {
-    console.log('=== MULTISELECT CHANGE DEBUG ===');
-    console.log('Option:', option);
-    console.log('Event:', event);
-    console.log('Checked:', event.target.checked);
-    
     const checked = event.target.checked;
     
     // Initialize filterValue as array if it's not already
@@ -217,38 +217,29 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
       // Add option to array if not already present
       if (!this.filterValue.includes(option)) {
         this.filterValue.push(option);
-        console.log('Added option to filter value:', option);
       }
     } else {
       // Remove option from array
       this.filterValue = this.filterValue.filter((item: string) => item !== option);
-      console.log('Removed option from filter value:', option);
     }
     
-    console.log('Updated filter value:', this.filterValue);
-    
     // Emit the change
     this.onFilterValueChange(this.filterValue);
-    console.log('==============================');
   }
   
   // Add method to check if an option is selected for checkboxes (needed for proper UI rendering)
   isOptionSelected(option: string): boolean {
     console.log('Checking if option is selected:', option, 'Current filter value:', this.filterValue);
     if (!this.filterValue) {
-      console.log('No filter value, returning false');
       return false;
     }
     
     // Ensure filterValue is an array for multiselect
     if (!Array.isArray(this.filterValue)) {
-      console.log('Filter value is not an array, converting to array');
       this.filterValue = [];
       return false;
     }
     
-    const result = this.filterValue.includes(option);
-    console.log('Option', option, 'is selected:', result);
-    return result;
+    return this.filterValue.includes(option);
   }
 }
\ No newline at end of file