diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js b/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
index 2a5d2d7be67294483afdb5266b35b65319019439..0053d4e1c6233c46cf01ef7c8b38cc50692c1e35 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
@@ -769,10 +769,10 @@ function FlatpickrRangeColumnFilter({
     const [value, setValue] = useState('');
     const [filtered, setFiltered] = useState(false);  
     React.useEffect(() => {
-        if (!filterValue && value) {
+      if (!filterValue && value) {
         setValue(null);
-    }
-    if (storeFilter) {
+      }
+      if (storeFilter) {
         const filter = TableUtil.getFilter(currentTableName, Header);
         const filterValue = _.map(filter, date => {return new Date(date)} )
         if (filter === '') {
@@ -783,7 +783,7 @@ function FlatpickrRangeColumnFilter({
             setValue(filterValue);
             setFilter(filterValue);
         }
-    }
+      }
   }, [filterValue, value]);
   // Function to call the server side filtering
   const callServerFilter = (value, isCleared) => {
@@ -818,12 +818,14 @@ function FlatpickrRangeColumnFilter({
                         "allowInput": true,
                         "mode": "range",
                         "defaultHour": 0,
+                        'ignoredFocusElements': [window.document.body],
                         "plugins": [new confirmDatePlugin()]
                     }}
             title={(tableToolTipsState[Header])?tableToolTipsState[Header]:"Enter the date & time range to search and press ‘Ok’ button"}
             value={filterValue}
             onClose={value => {
-                  setValue(value);
+              if(value) {
+                setValue(value);
                   setFilter(value);
                   if(storeFilter) {
                     TableUtil.saveFilter(currentTableName, Header, value);
@@ -832,6 +834,9 @@ function FlatpickrRangeColumnFilter({
                     setFiltered(true);
                     callServerFilter(value);
                   }
+
+              }
+                  
             }}
           >
               <input type="text" data-input className={`p-inputtext p-component calendar-input`}  />
@@ -1129,11 +1134,14 @@ function dateFilterFn(rows, id, filterValue) {
     }
     const start = moment.utc(moment(filterValue[0], 'YYYY-MM-DDTHH:mm:SS').format("YYYY-MM-DDTHH:mm:SS"));
     const end = moment.utc(moment(filterValue[1], 'YYYY-MM-DDTHH:mm:SS').format("YYYY-MM-DDTHH:mm:SS"));
-    if(filterValue.length === 1) {
+    if(moment(end,'YYYY-MM-DDTHH:mm:SS', true).isValid() && moment(start,'YYYY-MM-DDTHH:mm:SS', true).isValid()) {
+        return (start.isSameOrBefore(rowValue) && end.isSameOrAfter(rowValue));
+    }
+    else if(moment(start,'YYYY-MM-DDTHH:mm:SS', true).isValid()) {
       return (start.isSameOrBefore(rowValue));
     }
     else {
-      return (start.isSameOrBefore(rowValue) && end.isSameOrAfter(rowValue));
+      return true;
     }
   });
   return filteredRows;
@@ -1156,10 +1164,13 @@ function durationTimeFilterFn(rows, id, filterValue) {
     if(moment(end,'HH:mm:SS', true).isValid() && moment(start,'HH:mm:SS', true).isValid()) {
       return (start.isSameOrBefore(rowValue) && end.isSameOrAfter(rowValue));
     }
+    else if (!(moment(end,'HH:mm:SS', true).isValid()) && !(moment(start,'HH:mm:SS', true).isValid()) ){
+      return true
+    }
     else if(!(moment(start,'HH:mm:SS', true).isValid())) {
       return end.isSameOrAfter(rowValue);
     }
-    else {
+    else if(!(moment(end,'HH:mm:SS', true).isValid())) {
       return start.isSameOrBefore(rowValue);
     }
   });
@@ -1460,7 +1471,7 @@ function RankRangeFilter({
 function DurationRangeFilter({
   column: { filterValue = [], preFilteredRows, setFilter, id, Header },
 }) {
-  let [rangeValue, setRangeValue] = useState([0,0]);
+  let [rangeValue, setRangeValue] = useState(['','']);
   const [value, setValue] = useState('');
   const [filtered, setFiltered] = useState(false);
   React.useEffect(() => {
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/view.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/view.js
index 0f01ea8a1c0998cf744babb322b8b774a518cf06..86dad8ea7b2733dae87b078e8980b9527fb9ca0a 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/view.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/view.js
@@ -76,8 +76,8 @@ export class TaskView extends Component {
             }],
             columnclassname: [{
                 "Duration (Days HH:mm:ss)":"filter-input-75",
-                "Subtask Type":"filter-input-100",
-                "Subtask ID":"filter-input-75",
+                "Subtask Type":"filter-input-125",
+                "Subtask ID":"filter-input-100",
                 "Link to Parset":"filter-input-150"          
             }],
             defaultSortColumn: [{id: "Start Time", desc: false}],
@@ -529,12 +529,6 @@ export class TaskView extends Component {
                                                 </div>
                                             </div>
                                         }
-                                        <div className="p-fluid">
-                                            <div className="p-grid"><div className="p-col-12">
-                                                {this.state.taskTemplate?jeditor:""}
-                                            </div></div>
-                                        </div>
-                                        </div>
                                         {this.state.taskType === 'blueprint' && 
                                             <div>
                                                 <div className="p-fluid">
@@ -559,6 +553,13 @@ export class TaskView extends Component {
                                                 />
                                             </div>
                                         }
+                                        <div className="p-fluid">
+                                            <div className="p-grid"><div className="p-col-12">
+                                                {this.state.taskTemplate?jeditor:""}
+                                            </div></div>
+                                        </div>
+                                        </div>
+                                        
                                     </React.Fragment>
                                 }
                                 <CustomDialog type="confirmation" visible={this.state.confirmDialogVisible} width={this.state.dialog.width}