diff --git a/src/components/QueryRow/index.tsx b/src/components/QueryRow/index.tsx
index c4b84bd8..b2e1ae75 100644
--- a/src/components/QueryRow/index.tsx
+++ b/src/components/QueryRow/index.tsx
@@ -56,69 +56,64 @@ const QueryRow = ({ id, condition, index, update, remove, propertyOptions, schem
   }, [value]);
 
   return (
-    <fieldset className="ds-u-display--flex ds-u-flex-wrap--wrap ds-u-justify-content--between ds-u-align-items--center ds-u-border--0">
-      <div className="ds-l-col--12 ds-l-md-col--8 ds-u-display--flex ds-u-justify-content--between ds-u-padding-x--0">
-        <Dropdown
-          options={propertyOptions}
-          className="ds-l-col--8 ds-u-padding-left--0"
-          value={property}
-          label="Column Name"
-          name={`${condition.key}_property`}
-          onChange={(e) => setProperty(e.target.value)}
-        />
-        <Dropdown
-          options={buildOperatorOptions(schema[id].fields[property].mysql_type)}
-          className="ds-l-col--4 ds-u-padding-x--0"
-          value={operator}
-          label="Operator"
-          name={`${condition.key}_operator`}
-          onChange={(e) => setOperator(e.target.value)}
-        />
-      </div>
-      <div className="ds-l-col--12 ds-l-md-col--4 ds-u-padding-x--0 ds-u-md-padding-left--2 ds-u-display--flex ds-u-justify-content--between">
-        {schema[id].fields[property].mysql_type === 'date' ? (
-          <div>
-            <label
-              className="ds-c-label"
-              htmlFor={`${condition.key}_date_value`}
-              id={`${condition.key}_date_value-label`}
-            >
-              <span>Value</span>
-            </label>
-            <DatePicker
-              name={`${condition.key}_date_value`}
-              selected={convertUTCToLocalDate(startDate)}
-              onChange={(date : Date) => {
+    <fieldset className="ds-u-display--flex ds-u-flex-wrap--wrap ds-u-justify-content--between ds-u-md-justify-content--end ds-u-align-items--center">
+      <Dropdown
+        options={propertyOptions}
+        value={property}
+        label="Property"
+        name={`${condition.key}_property`}
+        onChange={(e) => setProperty(e.target.value)}
+        className={"ds-l-md-col--5 ds-l-lg-col--4 ds-l-sm-col--8 ds-l-col--12 ds-u-padding--0 ds-u-md-padding-right--2 ds-u-margin-bottom--0 ds-u-md-margin-bottom--2"}
+      />
+      <Dropdown
+        options={buildOperatorOptions(schema[id].fields[property].mysql_type)}
+        value={operator}
+        label="Operator"
+        name={`${condition.key}_operator`}
+        onChange={(e) => setOperator(e.target.value)}
+        className={"ds-l-sm-col--3 ds-l-md-col--2 ds-l-col--12 ds-u-padding--0 ds-u-md-padding-right--2 ds-u-margin-bottom--0 ds-u-md-margin-bottom--2"}
+      />
+      {schema[id].fields[property].mysql_type === 'date' ? (
+        <div className="ds-l-md-col--5 ds-l-lg-col--4 ds-l-sm-col--8 ds-l-col--12 ds-u-padding--0 ds-u-sm-padding-right--2 ds-u-md-padding-right--0 ds-u-lg-padding-right--2 ds-u-margin-bottom--2">
+          <label
+            className="ds-c-label"
+            htmlFor={`${condition.key}_date_value`}
+            id={`${condition.key}_date_value-label`}
+          >
+            <span>Value</span>
+          </label>
+          <DatePicker
+            name={`${condition.key}_date_value`}
+            selected={convertUTCToLocalDate(startDate)}
+            onChange={(date) => {
+              if(date) {
                 setStartDate(date);
                 setValue(date.toJSON().slice(0, 10));
-              }}
-              showMonthDropdown
-              showYearDropdown
-              dropdownMode="select"
-              className="ds-c-field"
-              withPortal
-            />
-          </div>
-        ) : (
-          <TextField
-            className="ds-l-col--11 ds-u-padding-x--0"
-            label="Value"
-            name={`${condition.key}_value`}
-            value={cleanText(value, operator)}
-            onChange={(e) => setValue(e.target.value)}
+              }
+            }}
+            showMonthDropdown
+            showYearDropdown
+            dropdownMode="select"
+            className={"ds-c-field"}
+            withPortal
           />
-        )}
-
-        <Button
-          variation="ghost"
-          size="small"
-          className="ds-u-margin-top--6 ds-u-padding-right--0"
-          aria-label="Delete filter"
-          onClick={() => remove(index)}
-        >
-          <span className="fas fa-trash"></span>
-        </Button>
-      </div>
+        </div>
+      ) : (
+        <TextField
+          label="Value"
+          name={`${condition.key}_value`}
+          value={cleanText(value, operator)}
+          onChange={(e) => setValue(e.target.value)}
+          className={"ds-l-md-col--5 ds-l-lg-col--4 ds-l-sm-col--8 ds-l-col--12 ds-u-padding--0 ds-u-sm-padding-right--2 ds-u-md-padding-right--0 ds-u-lg-padding-right--2 ds-u-margin-bottom--2"}
+        />
+      )}
+      <Button
+        className="ds-u-margin-top--2 ds-u-sm-margin-top--4 ds-u-lg-margin-top--4 ds-u-md-margin-top--2 ds-l-col--12 ds-l-md-col--4 ds-l-lg-col--2 ds-l-sm-col--4"
+        aria-label="Delete filter"
+        onClick={() => remove(index)}
+      >
+        Delete filter
+      </Button>
     </fieldset>
   );
 };