diff --git a/web/ui/mantine-ui/src/pages/query/RangeInput.tsx b/web/ui/mantine-ui/src/pages/query/RangeInput.tsx
index fc8950d5bd..a46b083efb 100644
--- a/web/ui/mantine-ui/src/pages/query/RangeInput.tsx
+++ b/web/ui/mantine-ui/src/pages/query/RangeInput.tsx
@@ -69,14 +69,6 @@ const RangeInput: FC<RangeInputProps> = ({ range, onChangeRange }) => {
 
   return (
     <Group gap={5}>
-      <ActionIcon
-        size="lg"
-        variant="subtle"
-        aria-label="Decrease range"
-        onClick={decreaseRange}
-      >
-        <IconMinus style={iconStyle} />
-      </ActionIcon>
       <Input
         value={rangeInput}
         onChange={(event) => setRangeInput(event.currentTarget.value)}
@@ -85,16 +77,32 @@ const RangeInput: FC<RangeInputProps> = ({ range, onChangeRange }) => {
           event.key === "Enter" && onChangeRangeInput(rangeInput)
         }
         aria-label="Range"
-        style={{ width: rangeInput.length + 3 + "ch" }}
+        style={{ width: `calc(43px + ${rangeInput.length + 3}ch)` }}
+        leftSection={
+          <ActionIcon
+            size="lg"
+            variant="transparent"
+            color="gray"
+            aria-label="Decrease range"
+            onClick={decreaseRange}
+          >
+            <IconMinus style={iconStyle} />
+          </ActionIcon>
+        }
+        rightSection={
+          <ActionIcon
+            size="lg"
+            variant="transparent"
+            color="gray"
+            aria-label="Increase range"
+            onClick={increaseRange}
+          >
+            <IconPlus style={iconStyle} />
+          </ActionIcon>
+        }
+        leftSectionPointerEvents="all"
+        rightSectionPointerEvents="all"
       />
-      <ActionIcon
-        size="lg"
-        variant="subtle"
-        aria-label="Increase range"
-        onClick={increaseRange}
-      >
-        <IconPlus style={iconStyle} />
-      </ActionIcon>
     </Group>
   );
 };
diff --git a/web/ui/mantine-ui/src/pages/query/TimeInput.tsx b/web/ui/mantine-ui/src/pages/query/TimeInput.tsx
index 5d74043a7c..cc332c02bf 100644
--- a/web/ui/mantine-ui/src/pages/query/TimeInput.tsx
+++ b/web/ui/mantine-ui/src/pages/query/TimeInput.tsx
@@ -1,4 +1,4 @@
-import { Group, ActionIcon } from "@mantine/core";
+import { Group, ActionIcon, CloseButton } from "@mantine/core";
 import { DatesProvider, DateTimePicker } from "@mantine/dates";
 import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
 import { FC } from "react";
@@ -22,21 +22,12 @@ const TimeInput: FC<TimeInputProps> = ({
 
   return (
     <Group gap={5}>
-      <ActionIcon
-        size="lg"
-        variant="subtle"
-        title="Decrease time"
-        aria-label="Decrease time"
-        onClick={() => onChangeTime(baseTime() - range / 2)}
-      >
-        <IconChevronLeft style={iconStyle} />
-      </ActionIcon>
       <DatesProvider settings={{ timezone: "UTC" }}>
         <DateTimePicker
-          w={180}
+          w={230}
           valueFormat="YYYY-MM-DD HH:mm:ss"
           withSeconds
-          clearable
+          // clearable
           value={time !== null ? new Date(time) : undefined}
           onChange={(value) => onChangeTime(value ? value.getTime() : null)}
           aria-label={description}
@@ -46,17 +37,47 @@ const TimeInput: FC<TimeInputProps> = ({
               onChangeTime(baseTime());
             }
           }}
+          leftSection={
+            <ActionIcon
+              size="lg"
+              color="gray"
+              variant="transparent"
+              title="Decrease time"
+              aria-label="Decrease time"
+              onClick={() => onChangeTime(baseTime() - range / 2)}
+            >
+              <IconChevronLeft style={iconStyle} />
+            </ActionIcon>
+          }
+          styles={{ section: { width: "unset" } }}
+          rightSection={
+            <>
+              {time && (
+                <CloseButton
+                  variant="transparent"
+                  color="gray"
+                  onMouseDown={(event) => event.preventDefault()}
+                  tabIndex={-1}
+                  onClick={() => {
+                    onChangeTime(null);
+                  }}
+                  size="xs"
+                />
+              )}
+              <ActionIcon
+                size="lg"
+                color="gray"
+                variant="transparent"
+                title="Increase time"
+                aria-label="Increase time"
+                onClick={() => onChangeTime(baseTime() + range / 2)}
+              >
+                <IconChevronRight style={iconStyle} />
+              </ActionIcon>
+            </>
+          }
         />
       </DatesProvider>
-      <ActionIcon
-        size="lg"
-        variant="subtle"
-        title="Increase time"
-        aria-label="Increase time"
-        onClick={() => onChangeTime(baseTime() + range / 2)}
-      >
-        <IconChevronRight style={iconStyle} />
-      </ActionIcon>
     </Group>
   );
 };