diff --git a/app/assets/stylesheets/repository/filters.scss b/app/assets/stylesheets/repository/filters.scss
index b5a74e2c2..889282b86 100644
--- a/app/assets/stylesheets/repository/filters.scss
+++ b/app/assets/stylesheets/repository/filters.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable SelectorDepth
+// scss-lint:disable SelectorDepth unknownProperties
 // scss-lint:disable NestingDepth
 
 .repository-show {
@@ -18,6 +18,10 @@
     }
   }
 
+  #filterContainer {
+    padding: 0;
+  }
+
   .filters-container {
     display: flex;
     flex-direction: column;
@@ -31,7 +35,7 @@
       border-bottom: $border-default;
       display: flex;
       flex-shrink: 0;
-      padding: .25em .5em;
+      padding: .25em 1em;
 
       .title {
         @include font-h2;
@@ -42,11 +46,28 @@
       }
     }
 
+    .saved-filters-container {
+      .saved-filters-list {
+        padding: 0;
+      }
+
+      .saved-filters-element {
+        align-items: center;
+        display: flex;
+        padding: .5em 1em;
+
+        .btn-light {
+          color: $color-silver-chalice;
+          margin-left: auto;
+        }
+      }
+    }
+
     .footer {
       border-top: $border-default;
       display: flex;
       flex-shrink: 0;
-      padding: .5em;
+      padding: 1em;
 
       .apply-button {
         margin-left: auto !important;
@@ -59,7 +80,7 @@
 
       .column-filters-element {
         cursor: pointer;
-        padding: .25em .5em;
+        padding: .5em 1em;
 
         &:hover {
           background: $color-concrete;
@@ -84,8 +105,45 @@
         display: flex;
       }
 
+      .filter-attributes {
+        display: grid;
+        gap: .5em;
+        grid-auto-flow: column;
+        grid-template-columns: min-content auto;
+
+        .dropdown-selector-container {
+          width: 100%;
+        }
+
+        .operator-selector {
+          .dropdown-selector-container {
+            width: 120px;
+          }
+        }
+
+        input {
+          margin: 0;
+          width: 100%;
+        }
+
+        .date-time-picker {
+          display: grid;
+          gap: .5em;
+          grid-auto-flow: column;
+        }
+
+        .datetime-filter-attributes {
+          display: grid;
+          gap: .5em;
+        }
+      }
+
+      .filter-body {
+        flex-grow: 1;
+      }
+
       .filter-remove {
-        margin-left: 0;
+        margin-left: auto;
       }
     }
   }
diff --git a/app/javascript/vue/repository_filter/filter.vue b/app/javascript/vue/repository_filter/filter.vue
index 4b2852bea..1747bf8d9 100644
--- a/app/javascript/vue/repository_filter/filter.vue
+++ b/app/javascript/vue/repository_filter/filter.vue
@@ -11,10 +11,9 @@
       </div>
       <div class="filter-remove">
         <button class="btn btn-light icon-btn" @click="$emit('filter:delete')">
-          <i class="fas fa-times-circle"></i>
+          <i class="fas fa-trash"></i>
         </button>
       </div>
-      <hr>
     </div>
 </div>
 </template>
diff --git a/app/javascript/vue/repository_filter/filters/repositoryAssetValue.vue b/app/javascript/vue/repository_filter/filters/repositoryAssetValue.vue
index 4cfa35340..56f71cdac 100644
--- a/app/javascript/vue/repository_filter/filters/repositoryAssetValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryAssetValue.vue
@@ -1,12 +1,13 @@
 <template>
   <div class="filter-attributes">
-    <DropdownSelector
-      :disableSearch="true"
-      :options="operators"
-      :selectedValue="this.operator"
-      :selectorId="`OperatorSelector${filter.id}`"
-      @dropdown:changed="updateOperator"
-    />
+    <div class="operator-selector">
+      <DropdownSelector
+        :disableSearch="true"
+        :options="operators"
+        :selectedValue="this.operator"
+        :selectorId="`OperatorSelector${filter.id}`"
+        @dropdown:changed="updateOperator"
+    </div>
     <div class="sci-input-container">
       <input v-if="operator === 'file_contains'"
         class="sci-input-field"
diff --git a/app/javascript/vue/repository_filter/filters/repositoryChecklistValue.vue b/app/javascript/vue/repository_filter/filters/repositoryChecklistValue.vue
index 26ca93d0f..d47608335 100644
--- a/app/javascript/vue/repository_filter/filters/repositoryChecklistValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryChecklistValue.vue
@@ -1,13 +1,14 @@
 <template>
   <div class="filter-attributes">
-    <DropdownSelector
-      :disableSearch="true"
-      :options="this.operators"
-      :selectedValue="this.operator"
-      :selectorId="`OperatorSelector${this.filter.id}`"
-      @dropdown:changed="updateOperator"
-    />
-
+    <div class="operator-selector">
+      <DropdownSelector
+        :disableSearch="true"
+        :options="this.operators"
+        :selectedValue="this.operator"
+        :selectorId="`OperatorSelector${this.filter.id}`"
+        @dropdown:changed="updateOperator"
+      />
+    </div>
     <DropdownSelector
       :optionClass="'checkbox-icon'"
       :dataCombineTags="true"
diff --git a/app/javascript/vue/repository_filter/filters/repositoryDateTimeValue.vue b/app/javascript/vue/repository_filter/filters/repositoryDateTimeValue.vue
index d918e6f83..373fb00e6 100644
--- a/app/javascript/vue/repository_filter/filters/repositoryDateTimeValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryDateTimeValue.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="filter-attributes">
-    <div class="filter-operator-select">
+    <div class="operator-selector">
       <DropdownSelector
       :disableSearch="true"
       :options="operators"
@@ -9,11 +9,13 @@
       @dropdown:changed="updateOperator" />
     </div>
     <template v-if="!isPreset">
-      <div class="filter-datepicker-input">
-        <DateTimePicker @change="updateDate" :selectorId="`DatePicker${filter.id}`" />
-      </div>
-      <div class="filter-datepicker-to-input">
-        <DateTimePicker @change="updateDateTo" v-if="operator == 'between'" :selectorId="`DatePickerTo${filter.id}`" />
+      <div class="datetime-filter-attributes">
+        <div class="filter-datepicker-input">
+          <DateTimePicker @change="updateDate" :selectorId="`DatePicker${filter.id}`" />
+        </div>
+        <div class="filter-datepicker-to-input">
+          <DateTimePicker @change="updateDateTo" v-if="operator == 'between'" :selectorId="`DatePickerTo${filter.id}`" />
+        </div>
       </div>
     </template>
   </div>
diff --git a/app/javascript/vue/repository_filter/filters/repositoryDateValue.vue b/app/javascript/vue/repository_filter/filters/repositoryDateValue.vue
index cc9428ebb..b6a3719a7 100644
--- a/app/javascript/vue/repository_filter/filters/repositoryDateValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryDateValue.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="filter-attributes">
-    <div class="filter-operator-select">
+    <div class="operator-selector">
       <DropdownSelector
       :disableSearch="true"
       :options="operators"
@@ -12,8 +12,8 @@
       <div class="filter-datepicker-input">
         <DateTimePicker @change="updateDate" :selectorId="`DatePicker${filter.id}`" :onlyDate="true" />
       </div>
-      <div class="filter-datepicker-to-input">
-        <DateTimePicker @change="updateDateTo" v-if="operator == 'between'" :selectorId="`DatePickerTo${filter.id}`" :onlyDate="true" />
+      <div class="filter-datepicker-to-input" v-if="operator == 'between'">
+        <DateTimePicker @change="updateDateTo" :selectorId="`DatePickerTo${filter.id}`" :onlyDate="true" />
       </div>
     </template>
   </div>
diff --git a/app/javascript/vue/repository_filter/filters/repositoryListValue.vue b/app/javascript/vue/repository_filter/filters/repositoryListValue.vue
index f293f179b..d5c72d07a 100644
--- a/app/javascript/vue/repository_filter/filters/repositoryListValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryListValue.vue
@@ -1,13 +1,14 @@
 <template>
   <div class="filter-attributes">
-    <DropdownSelector
-      :disableSearch="true"
-      :options="this.operators"
-      :selectedValue="this.operator"
-      :selectorId="`OperatorSelector${this.filter.id}`"
-      @dropdown:changed="updateOperator"
-    />
-
+    <div class="operator-selector">
+      <DropdownSelector
+        :disableSearch="true"
+        :options="this.operators"
+        :selectedValue="this.operator"
+        :selectorId="`OperatorSelector${this.filter.id}`"
+        @dropdown:changed="updateOperator"
+      />
+    </div>
     <DropdownSelector
       :optionClass="'checkbox-icon'"
       :dataCombineTags="true"
diff --git a/app/javascript/vue/repository_filter/filters/repositoryMyModuleValue.vue b/app/javascript/vue/repository_filter/filters/repositoryMyModuleValue.vue
index 4330c203b..c9f1dc8fe 100644
--- a/app/javascript/vue/repository_filter/filters/repositoryMyModuleValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryMyModuleValue.vue
@@ -1,12 +1,14 @@
 <template>
   <div class="filter-attributes">
-    <DropdownSelector
-      :disableSearch="true"
-      :options="this.operators"
-      :selectedValue="this.operator"
-      :selectorId="`OperatorSelector${this.filter.id}`"
-      @dropdown:changed="updateOperator"
-    />
+    <div class="operator-selector">
+      <DropdownSelector
+        :disableSearch="true"
+        :options="this.operators"
+        :selectedValue="this.operator"
+        :selectorId="`OperatorSelector${this.filter.id}`"
+        @dropdown:changed="updateOperator"
+      />
+    </div>
     <DropdownSelector
       :optionClass="'checkbox-icon'"
       :dataCombineTags="true"
diff --git a/app/javascript/vue/repository_filter/filters/repositoryNumberValue.vue b/app/javascript/vue/repository_filter/filters/repositoryNumberValue.vue
index e97bcd1d0..c83574081 100644
--- a/app/javascript/vue/repository_filter/filters/repositoryNumberValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryNumberValue.vue
@@ -1,12 +1,14 @@
 <template>
   <div class="filter-attributes">
-    <DropdownSelector
-      :disableSearch="true"
-      :options="this.operators"
-      :selectedValue="this.operator"
-      :selectorId="`OperatorSelector${this.filter.id}`"
-      @dropdown:changed="updateOperator"
-    />
+    <div class="operator-selector">
+      <DropdownSelector
+        :disableSearch="true"
+        :options="this.operators"
+        :selectedValue="this.operator"
+        :selectorId="`OperatorSelector${this.filter.id}`"
+        @dropdown:changed="updateOperator"
+      />
+    </div>
     <div v-if="operator !== 'between'" class="sci-input-container">
       <input
         class="sci-input-field"
diff --git a/app/javascript/vue/repository_filter/filters/repositoryStatusValue.vue b/app/javascript/vue/repository_filter/filters/repositoryStatusValue.vue
index fb75fa65c..2c3d8e985 100644
--- a/app/javascript/vue/repository_filter/filters/repositoryStatusValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryStatusValue.vue
@@ -1,13 +1,14 @@
 <template>
   <div class="filter-attributes">
-    <DropdownSelector
-      :disableSearch="true"
-      :options="this.operators"
-      :selectedValue="this.operator"
-      :selectorId="`OperatorSelector${this.filter.id}`"
-      @dropdown:changed="updateOperator"
-    />
-
+    <div class="operator-selector">
+      <DropdownSelector
+        :disableSearch="true"
+        :options="this.operators"
+        :selectedValue="this.operator"
+        :selectorId="`OperatorSelector${this.filter.id}`"
+        @dropdown:changed="updateOperator"
+      />
+    </div>
     <DropdownSelector
       :optionClass="'checkbox-icon'"
       :dataCombineTags="true"
diff --git a/app/javascript/vue/repository_filter/filters/repositoryTextValue.vue b/app/javascript/vue/repository_filter/filters/repositoryTextValue.vue
index 4d7c88ad4..c25de6933 100644
--- a/app/javascript/vue/repository_filter/filters/repositoryTextValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryTextValue.vue
@@ -1,12 +1,14 @@
 <template>
   <div class="filter-attributes">
-    <DropdownSelector
-      :disableSearch="true"
-      :options="this.operators"
-      :selectedValue="this.operator"
-      :selectorId="`OperatorSelector${this.filter.id}`"
-      @dropdown:changed="updateOperator"
-    />
+    <div class="operator-selector">
+      <DropdownSelector
+        :disableSearch="true"
+        :options="this.operators"
+        :selectedValue="this.operator"
+        :selectorId="`OperatorSelector${this.filter.id}`"
+        @dropdown:changed="updateOperator"
+      />
+    </div>
     <div class="sci-input-container">
       <input
         class="sci-input-field"
diff --git a/app/javascript/vue/repository_filter/filters/repositoryTimeValue.vue b/app/javascript/vue/repository_filter/filters/repositoryTimeValue.vue
index b9d05ca81..feaa8b029 100644
--- a/app/javascript/vue/repository_filter/filters/repositoryTimeValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryTimeValue.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="filter-attributes">
-    <div class="filter-operator-select">
+    <div class="operator-selector">
       <DropdownSelector
       :disableSearch="true"
       :options="operators"
@@ -12,8 +12,8 @@
       <div class="filter-datepicker-input">
         <DateTimePicker @change="updateDate" :selectorId="`TimePicker${filter.id}`" :timeOnly="true" />
       </div>
-      <div class="filter-datepicker-to-input">
-        <DateTimePicker @change="updateDateTo" v-if="operator == 'between'" :selectorId="`TimePickerTo${filter.id}`" :timeOnly="true" />
+      <div class="filter-datepicker-to-input" v-if="operator == 'between'">
+        <DateTimePicker @change="updateDateTo" :selectorId="`TimePickerTo${filter.id}`" :timeOnly="true" />
       </div>
     </template>
   </div>
diff --git a/app/javascript/vue/repository_filter/filters/repositoryUserValue.vue b/app/javascript/vue/repository_filter/filters/repositoryUserValue.vue
index 56614f32a..1ff73e319 100644
--- a/app/javascript/vue/repository_filter/filters/repositoryUserValue.vue
+++ b/app/javascript/vue/repository_filter/filters/repositoryUserValue.vue
@@ -1,12 +1,14 @@
 <template>
   <div class="filter-attributes">
-    <DropdownSelector
-      :disableSearch="true"
-      :options="this.operators"
-      :selectedValue="this.operator"
-      :selectorId="`OperatorSelector${this.filter.id}`"
-      @dropdown:changed="updateOperator"
-    />
+    <div class="operator-selector">
+      <DropdownSelector
+        :disableSearch="true"
+        :options="this.operators"
+        :selectedValue="this.operator"
+        :selectorId="`OperatorSelector${this.filter.id}`"
+        @dropdown:changed="updateOperator"
+      />
+    </div>
     <div class="users-filter-dropdown">
       <DropdownSelector
         :optionClass="'checkbox-icon'"
diff --git a/app/javascript/vue/shared/date_picker.vue b/app/javascript/vue/shared/date_picker.vue
index fe8dea889..3875d6252 100644
--- a/app/javascript/vue/shared/date_picker.vue
+++ b/app/javascript/vue/shared/date_picker.vue
@@ -1,6 +1,7 @@
 <template>
-  <div class="datepicker">
-      <input @change="update" type="datetime" class="form-control calendar-input" :id="this.selectorId" placeholder="" />
+  <div class="datepicker sci-input-container right-icon">
+      <input @change="update" type="datetime" class="form-control calendar-input sci-input-field" :id="this.selectorId" placeholder="" />
+      <i class="fas fa-calendar-alt"></i>
   </div>
 </template>