diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js b/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
index 994187c5718b3cdb755fe06b716e1f7bf84e12ae..985515d80e8f1c90b85d7ce3ee468b7e5dbe43f5 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
@@ -328,18 +328,8 @@ function MultiSelectColumnFilter({
   column: { filterValue, setFilter, preFilteredRows, id, Header },
 }) {
   const [value, setValue] = useState('');
+  const [filtered, setFiltered] = useState(false);
   const [filtertype, setFiltertype] = useState('Any');
-  // Set Any / All Filter type
-  const setSelectTypeOption = (option) => {
-    setFiltertype(option);
-    multiSelectOption[Header] = option
-    if (value !== '') {
-      if (storeFilter) {
-        TableUtil.saveFilter(currentTableName, `${Header}-FilterOption`, option);
-      }
-      setFilter(value);
-    }
-  };
 
   React.useEffect(() => {
     if (!filterValue && value) {
@@ -357,6 +347,38 @@ function MultiSelectColumnFilter({
       }
     }
   }, [filterValue, value, filtertype]);
+  // Set Any / All Filter type
+  const setSelectTypeOption = (option) => {
+    setFiltertype(option);
+    multiSelectOption[Header] = option
+    if (value !== '') {
+      if (storeFilter) {
+        TableUtil.saveFilter(currentTableName, `${Header}-FilterOption`, option);
+      }
+      setFilter(value);
+    }
+  };
+  function callSearchFunc(e) {
+    callServerFilter(e);
+    //console.log('called',e)
+  }
+
+  // Function to call the server side filtering
+  const callServerFilter = (event, isCleared) => {
+    hasFilters = true;
+    //_.remove(tableOptionsState.filters, function(filter) { return filter.id === Header });
+    //tableOptionsState.filters.push({id: Header, value: event.target.value});
+    tableOptionsState.filters.push({id: 'stationFilterType', value: filtertype});
+    if (isCleared) {
+        hasFilters = false;
+        if (filtered) {
+            _.remove(tableOptionsState.filters, function(filter) { return filter.id === Header });
+            filterCallback(tableOptionsState, setLoaderFunction);
+        }
+    }   else {
+        filterCallback(tableOptionsState, setLoaderFunction);
+    }
+  };
 
   multiSelectOption[Header] = filtertype;
   const options = React.useMemo(() => {
@@ -387,36 +409,50 @@ function MultiSelectColumnFilter({
   return (
     <div onClick={e => { e.stopPropagation() }} >
       <div className="p-field-radiobutton">
-        <RadioButton inputId="filtertype1" name="filtertype" value="Any" onChange={(e) => setSelectTypeOption(e.value)} checked={filtertype === 'Any'} />
+        <RadioButton inputId="filtertype1" name="filtertype" value="Any" 
+        onChange={(e) => setSelectTypeOption(e.value)} checked={filtertype === '' || filtertype === 'Any'} 
+        tooltip= "Search the row if the Station contains at least one of the selected value" />
         <label htmlFor="filtertype1">Any</label>
       </div>
       <div className="p-field-radiobutton">
-        <RadioButton inputId="filtertype2" name="filtertype" value="All" onChange={(e) => setSelectTypeOption(e.value)} checked={filtertype === 'All'} />
+        <RadioButton inputId="filtertype2" name="filtertype" value="All" 
+        onChange={(e) => setSelectTypeOption(e.value)} checked={filtertype === 'All'} 
+        tooltip= "Search the row if the Station contains all of the selected value" />
         <label htmlFor="filtertype2">All</label>
       </div>
-      <div style={{ position: 'relative' }} >
-        <MultiSelect data-testid="multi-select" id="multi-select" optionLabel="value" optionValue="value" filter={true}
-          value={value}
-          options={options}
-          onChange={e => {
-            setValue(e.target.value);
-            setFilter(e.target.value || undefined);
-            setFiltertype(filtertype);
-            if(storeFilter) {
-              if (e.target.value.length > 0) {
-                TableUtil.saveFilter(currentTableName, Header, e.target.value);
-                TableUtil.saveFilter(currentTableName, `${Header}-FilterOption`, filtertype);
-              } else {
-                TableUtil.clearColumnFilter(currentTableName, Header);
-                TableUtil.clearColumnFilter(currentTableName, `${Header}-FilterOption`);
+      <div style={{ position: 'relative', display: 'flex'}} >
+        <div>
+          <MultiSelect data-testid="multi-select" id="multi-select" optionLabel="value" optionValue="value" filter={true}
+            value={value}
+            options={options}
+            onChange={e => {
+              setValue(e.target.value);
+              setFilter(e.target.value || undefined);
+              setFiltertype(filtertype);
+              setFiltered(true);
+              if(storeFilter) {
+                if (e.target.value.length > 0) {
+                  TableUtil.saveFilter(currentTableName, Header, e.target.value);
+                  TableUtil.saveFilter(currentTableName, `${Header}-FilterOption`, filtertype);
+                } else {
+                  TableUtil.clearColumnFilter(currentTableName, Header);
+                  TableUtil.clearColumnFilter(currentTableName, `${Header}-FilterOption`);
+                }
               }
-            }
-          }}
-          maxSelectedLabels="1"
-          selectedItemsLabel="{0} Selected"
-          className="multi-select"
-          tooltip={(tableToolTipsState[Header])?tableToolTipsState[Header]:"Select one or more value from list to search"}
-        />
+            }}
+            maxSelectedLabels="1"
+            selectedItemsLabel="{0} Selected"
+            className="multi-select"
+            tooltip={(tableToolTipsState[Header])?tableToolTipsState[Header]:"Select one or more value from list to search"}
+          />
+        </div>
+        {doServersideFilter &&
+          <div>
+              <button  className="p-link" onClick={callSearchFunc} >
+                <i className="pi pi-search search-btn" />
+              </button>
+          </div>
+        }
       </div>
     </div>
   )
@@ -1869,6 +1905,10 @@ const filterTypes = {
   'durationMinMax': {
     fn: DurationRangeFilter,
     type: durationTimeFilterFn
+  },
+  'durationWithDaysMinMax': {
+    fn: DurationRangeFilterWithDays,
+    type: 'between'
   }
 };
 
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Reservation/reservation.list.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Reservation/reservation.list.js
index 27a4e40387d6c7bff3073c2e6f102b955023fcd8..d11c104b81635d09439fb592494766b1e86bdfb7 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Reservation/reservation.list.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Reservation/reservation.list.js
@@ -122,7 +122,8 @@ export class ReservationList extends Component{
         }
         this.reservationTypeOptionList = [];
         this.subjectsOptionList = [];
-        let optionsList = new Set();
+        this.stationList = [];
+       // let optionsList = new Set();
         this.filterQry = '';
         this.orderBy = '';
         this.limit = 10;
@@ -132,6 +133,7 @@ export class ReservationList extends Component{
            // fStartTime: {required: true, message: "Start Date can not be empty"},
            // fEndTime: {required: true, message: "Stop Date can not be empty"} 
         };
+        
         this.reservations= [];
         this.cycleList= [];
         this.selectedRows = [];
@@ -429,10 +431,10 @@ export class ReservationList extends Component{
                 columnDef[key]['disableSortBy'] = !_.includes(apiFilters.data.ordering, 'project');
                 columnDef[key]['disableFilters'] = false;
                 columnDef[key]['filter'] = '';
-            }   else if (key === 'stations' && apiFilters.data.filters['specifications_doc']) {
+            }   else if (key === 'stations' && apiFilters.data.filters['stations_any']) {
                 columnDef[key]['disableSortBy'] = false;
                 columnDef[key]['disableFilters'] = false;
-                columnDef[key]['filter'] = '' // comment this line if want exisitng clint side filter
+                //columnDef[key]['filter'] = '' // comment this line if want exisitng clint side filter
             }   else if (key === 'duration' && apiFilters.data.filters['duration_min']) {
                 columnDef[key]['disableSortBy'] = !_.includes(apiFilters.data.ordering, 'duration_min');
                 columnDef[key]['disableFilters'] = false;
@@ -493,6 +495,8 @@ export class ReservationList extends Component{
      getDropDownOptionList(apiFilters) {
         this.getOptions('reservation_type', apiFilters);
         this.getOptions('subject', apiFilters);
+        this.stationList = [];
+        this.getOptions('stations_any', apiFilters);
     }
 
     getOptions(key, apiFilter) {
@@ -502,6 +506,8 @@ export class ReservationList extends Component{
                     this.subjectsOptionList.push(choice.value);
                 }   else if(key === 'reservation_type') {
                     this.reservationTypeOptionList.push(choice.value);    
+                }   else if (key === 'stations_any') {
+                    this.stationList.push({name: choice.display_name, value:choice.value});
                 }
             })
         }
@@ -542,9 +548,17 @@ export class ReservationList extends Component{
                 }   else if (filter.id === 'Project') {
                     this.filterQry += 'project='+ filter.value+'&' ;
                 }   else if (filter.id === 'Stations') {
-                    const values = _.split(filter.value, ",");
-                    for ( const value of values) {
-                        this.filterQry += 'specifications_doc='+value+"&";
+                    const stationFilterType = _.find(filters, {id:'stationFilterType'});
+                    if(filter.value.length>0) {
+                        const values = _.split(filter.value, ",");
+                        for ( const value of values) {
+                            if(stationFilterType && stationFilterType.value === 'All') {
+                                this.filterQry += 'stations_all='+value+"&";
+                            }   else {
+                                this.filterQry += 'stations_any='+value+"&";
+                            }
+                            
+                        }
                     }
                 }   else if (filter.id === 'Duration (Days HH:mm:ss)' && filter.value != '') {
                     let columnDetails = _.find(this.state.columnMap, {displayName:filter.id});
@@ -614,7 +628,7 @@ export class ReservationList extends Component{
                     reservation.duration = 'Unknown';
                     reservation['stop_time']= 'Unknown';
                 } else {
-                    let duration = reservation.duration;
+                    //let duration = reservation.duration;
                     reservation.duration = UnitService.getSecsToDDHHmmss(reservation.duration);
                     reservation['stop_time']= moment(reservation['stop_time']).format(UIConstants.CALENDAR_DATETIME_FORMAT);
                 }
@@ -647,6 +661,9 @@ export class ReservationList extends Component{
             options = this.reservationTypeOptionList;
         }   else if (id && id === 'Subject') {
             options = this.subjectsOptionList;
+        }   else if (id === 'Stations') {
+            this.stationList = _.orderBy(this.stationList, ['name'], ['asc']);
+            return this.stationList;
         }
         return options;
     }
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/utils/validator.js b/SAS/TMSS/frontend/tmss_webapp/src/utils/validator.js
index ece0007aa7541e1dba4d6861960700668029d5ba..27b8de3fe82a560327974d9faaa6f73721f86960 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/utils/validator.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/utils/validator.js
@@ -60,7 +60,7 @@ const Validator = {
                 var timeFormat = /^([0-9]|[0-9][0-9]):([0-9]|[0-5][0-9]):([0-9]|[0-5][0-9])$/;
                 isValid = timeFormat.test(time);
             }   else {
-                var timeFormat = /^([0-9]|[0-2][0-3]):([0-9]|[0-5][0-9]):([0-9]|[0-5][0-9])$/;
+                var timeFormat = /^([0-9]|[0-1][0-9]|[0-2][0-3]):([0-9]|[0-5][0-9]):([0-9]|[0-5][0-9])$/;
                 isValid = timeFormat.test(time);
             }