diff --git a/bun.lockb b/bun.lockb
index 484185f..b4c7e43 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index d70d36a..ca53754 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "@tabler/icons-react": "^3.19.0",
     "@tanstack/react-query": "^5.32.0",
     "@types/bytes": "^3.1.4",
-    "@upstash/redis": "^1.34.3",
+    "@upstash/redis": "^1.34.8",
     "bytes": "^3.1.2",
     "react-hook-form": "^7.53.0",
     "react-resizable-panels": "^2.1.4",
diff --git a/src/components/databrowser/components/display/display-header.tsx b/src/components/databrowser/components/display/display-header.tsx
index 3248cde..fc7f20b 100644
--- a/src/components/databrowser/components/display/display-header.tsx
+++ b/src/components/databrowser/components/display/display-header.tsx
@@ -5,7 +5,7 @@ import { IconPlus } from "@tabler/icons-react"
 import { Button } from "@/components/ui/button"
 
 import { TypeTag } from "../type-tag"
-import { LengthBadge, SizeBadge, TTLBadge } from "./header-badges"
+import { HeaderTTLBadge, LengthBadge, SizeBadge } from "./header-badges"
 import { KeyActions } from "./key-actions"
 
 export const DisplayHeader = ({
@@ -49,7 +49,7 @@ export const DisplayHeader = ({
         <TypeTag variant={type} type="badge" />
         <SizeBadge dataKey={dataKey} />
         <LengthBadge dataKey={dataKey} type={type} content={content} />
-        <TTLBadge dataKey={dataKey} />
+        <HeaderTTLBadge dataKey={dataKey} />
       </div>
     </div>
   )
diff --git a/src/components/databrowser/components/display/display-list-edit.tsx b/src/components/databrowser/components/display/display-list-edit.tsx
index 8fd9016..d9fc046 100644
--- a/src/components/databrowser/components/display/display-list-edit.tsx
+++ b/src/components/databrowser/components/display/display-list-edit.tsx
@@ -3,6 +3,7 @@ import { useDatabrowserStore } from "@/store"
 import type { ListDataType } from "@/types"
 import { Controller, FormProvider, useForm, useFormContext } from "react-hook-form"
 
+import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Spinner } from "@/components/ui/spinner"
 import { SimpleTooltip } from "@/components/ui/tooltip"
@@ -10,6 +11,7 @@ import { SimpleTooltip } from "@/components/ui/tooltip"
 import { useFetchListItems } from "../../hooks"
 import { useEditListItem } from "../../hooks/use-edit-list-item"
 import { headerLabels } from "./display-list"
+import { HashFieldTTLBadge } from "./hash/hash-field-ttl-badge"
 import { useField } from "./input/use-field"
 
 export const ListEditDisplay = ({
@@ -105,30 +107,43 @@ const ListEditForm = ({
           )}
         </div>
 
-        <div className="flex justify-end gap-2">
-          <Button
-            type="button"
-            onClick={() => {
-              setSelectedListItem(undefined)
-            }}
-          >
-            Cancel
-          </Button>
-          <SimpleTooltip
-            content={type === "stream" && !isNew ? "Streams are not mutable" : undefined}
-          >
+        <div
+          className={cn(
+            "flex items-center",
+            type === "hash" && itemKey !== "" ? "justify-between" : "justify-end"
+          )}
+        >
+          {type === "hash" && itemKey !== "" && (
+            <HashFieldTTLBadge dataKey={dataKey} field={itemKey} />
+          )}
+
+          <div className="flex gap-2">
             <Button
-              variant="primary"
-              type="submit"
-              disabled={
-                !form.formState.isValid || !form.formState.isDirty || (type === "stream" && !isNew)
-              }
+              type="button"
+              onClick={() => {
+                setSelectedListItem(undefined)
+              }}
             >
-              <Spinner isLoading={isPending} isLoadingText={"Saving"}>
-                Save
-              </Spinner>
+              Cancel
             </Button>
-          </SimpleTooltip>
+            <SimpleTooltip
+              content={type === "stream" && !isNew ? "Streams are not mutable" : undefined}
+            >
+              <Button
+                variant="primary"
+                type="submit"
+                disabled={
+                  !form.formState.isValid ||
+                  !form.formState.isDirty ||
+                  (type === "stream" && !isNew)
+                }
+              >
+                <Spinner isLoading={isPending} isLoadingText={"Saving"}>
+                  Save
+                </Spinner>
+              </Button>
+            </SimpleTooltip>
+          </div>
         </div>
       </form>
     </FormProvider>
diff --git a/src/components/databrowser/components/display/display-list.tsx b/src/components/databrowser/components/display/display-list.tsx
index 2f9109e..39071fc 100644
--- a/src/components/databrowser/components/display/display-list.tsx
+++ b/src/components/databrowser/components/display/display-list.tsx
@@ -14,6 +14,7 @@ import { InfiniteScroll } from "../sidebar/infinite-scroll"
 import { DeleteAlertDialog } from "./delete-alert-dialog"
 import { DisplayHeader } from "./display-header"
 import { ListEditDisplay } from "./display-list-edit"
+import { HashFieldTTLInfo } from "./hash/hash-field-ttl-info"
 
 export const headerLabels = {
   list: ["Index", "Content"],
@@ -72,6 +73,7 @@ export const ListItems = ({
 }) => {
   const { setSelectedListItem } = useDatabrowserStore()
   const keys = useMemo(() => query.data?.pages.flatMap((page) => page.keys) ?? [], [query.data])
+  const fields = useMemo(() => keys.map((key) => key.key), [keys])
   const { mutate: editItem } = useEditListItem()
 
   return (
@@ -84,7 +86,7 @@ export const ListItems = ({
           onClick={() => {
             setSelectedListItem({ key })
           }}
-          className="h-10 border-b border-b-zinc-100 hover:bg-zinc-50"
+          className={cn("h-10 border-b border-b-zinc-100 hover:bg-zinc-100 ")}
         >
           <td
             className={cn(
@@ -103,29 +105,38 @@ export const ListItems = ({
           )}
           {type !== "stream" && (
             <td
-              width={20}
-              className="px-3"
+              className="w-0 min-w-0 p-0"
               onClick={(e) => {
                 e.stopPropagation()
               }}
             >
-              <DeleteAlertDialog
-                deletionType="item"
-                onDeleteConfirm={(e) => {
-                  e.stopPropagation()
-                  editItem({
-                    type,
-                    dataKey,
-                    itemKey: key,
-                    // For deletion
-                    newKey: undefined,
-                  })
-                }}
-              >
-                <Button size="icon-sm" variant="secondary" onClick={(e) => e.stopPropagation()}>
-                  <IconTrash className="size-4 text-zinc-500" />
-                </Button>
-              </DeleteAlertDialog>
+              <div className="flex items-center justify-end gap-2">
+                {type === "hash" && (
+                  <HashFieldTTLInfo dataKey={dataKey} field={key} fields={fields} />
+                )}
+                <DeleteAlertDialog
+                  deletionType="item"
+                  onDeleteConfirm={(e) => {
+                    e.stopPropagation()
+                    editItem({
+                      type,
+                      dataKey,
+                      itemKey: key,
+                      // For deletion
+                      newKey: undefined,
+                    })
+                  }}
+                >
+                  <Button
+                    className=""
+                    size="icon-sm"
+                    variant="secondary"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <IconTrash className="size-4 text-zinc-500" />
+                  </Button>
+                </DeleteAlertDialog>
+              </div>
             </td>
           )}
         </tr>
diff --git a/src/components/databrowser/components/display/hash/hash-field-ttl-badge.tsx b/src/components/databrowser/components/display/hash/hash-field-ttl-badge.tsx
new file mode 100644
index 0000000..99861fb
--- /dev/null
+++ b/src/components/databrowser/components/display/hash/hash-field-ttl-badge.tsx
@@ -0,0 +1,20 @@
+import { useFetchHashFieldExpires } from "@/components/databrowser/hooks/use-fetch-hash-ttl"
+import { useSetHashTTL } from "@/components/databrowser/hooks/use-set-hash-ttl"
+
+import { TTLBadge } from "../ttl-badge"
+
+export const HashFieldTTLBadge = ({ dataKey, field }: { dataKey: string; field: string }) => {
+  const { data } = useFetchHashFieldExpires({ dataKey, fields: [field] })
+  const { mutate: setTTL, isPending } = useSetHashTTL()
+
+  const expireAt = data?.[field]
+
+  return (
+    <TTLBadge
+      label="Field TTL:"
+      expireAt={expireAt}
+      setTTL={(ttl) => setTTL({ dataKey, field, ttl })}
+      isPending={isPending}
+    />
+  )
+}
diff --git a/src/components/databrowser/components/display/hash/hash-field-ttl-info.tsx b/src/components/databrowser/components/display/hash/hash-field-ttl-info.tsx
new file mode 100644
index 0000000..2baa14e
--- /dev/null
+++ b/src/components/databrowser/components/display/hash/hash-field-ttl-info.tsx
@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react"
+
+import { formatTime } from "@/lib/utils"
+import { useFetchHashFieldExpires } from "@/components/databrowser/hooks/use-fetch-hash-ttl"
+
+import { calculateTTL, TTL_INFINITE, TTL_NOT_FOUND } from "../ttl-badge"
+
+export const HashFieldTTLInfo = ({
+  dataKey,
+  field,
+  fields,
+}: {
+  dataKey: string
+  field: string
+  fields: string[]
+}) => {
+  const { data } = useFetchHashFieldExpires({ dataKey, fields })
+  const expireAt = data?.[field]
+
+  const [ttl, setTTL] = useState(() => calculateTTL(expireAt))
+
+  useEffect(() => {
+    setTTL(calculateTTL(expireAt))
+    const interval = setInterval(() => {
+      setTTL(calculateTTL(expireAt))
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [expireAt])
+
+  if (!expireAt || expireAt === TTL_NOT_FOUND || expireAt === TTL_INFINITE) return
+
+  return (
+    <span className="block min-w-[30px] whitespace-nowrap text-right text-red-600">
+      {formatTime(ttl ?? 0)}
+    </span>
+  )
+}
diff --git a/src/components/databrowser/components/display/header-badges.tsx b/src/components/databrowser/components/display/header-badges.tsx
index f1de5ce..6d304e6 100644
--- a/src/components/databrowser/components/display/header-badges.tsx
+++ b/src/components/databrowser/components/display/header-badges.tsx
@@ -1,17 +1,12 @@
-import { useEffect } from "react"
 import { type DataType } from "@/types"
-import { IconChevronDown } from "@tabler/icons-react"
 import bytes from "bytes"
 
-import { queryClient } from "@/lib/clients"
-import { formatTime } from "@/lib/utils"
 import { Skeleton } from "@/components/ui/skeleton"
 
-import { FETCH_TTL_QUERY_KEY, useFetchTTL } from "../../hooks"
-import { useDeleteKeyCache } from "../../hooks/use-delete-key-cache"
+import { useFetchKeyExpire, useSetTTL } from "../../hooks"
 import { useFetchKeyLength } from "../../hooks/use-fetch-key-length"
 import { useFetchKeySize } from "../../hooks/use-fetch-key-size"
-import { TTLPopover } from "./ttl-popover"
+import { TTLBadge } from "./ttl-badge"
 
 export const LengthBadge = ({
   dataKey,
@@ -50,43 +45,16 @@ export const SizeBadge = ({ dataKey }: { dataKey: string }) => {
   )
 }
 
-const TTL_INFINITE = -1
-const TTL_NOT_FOUND = -2
-
-export const TTLBadge = ({ dataKey }: { dataKey: string }) => {
-  const { data: ttl } = useFetchTTL(dataKey)
-  const { deleteKeyCache } = useDeleteKeyCache()
-
-  // Tick the ttl query every second
-  useEffect(() => {
-    const interval = setInterval(() => {
-      queryClient.setQueryData([FETCH_TTL_QUERY_KEY, dataKey], (ttl?: number) => {
-        if (ttl === undefined || ttl === TTL_INFINITE) return ttl
-
-        if (ttl <= 1) {
-          deleteKeyCache(dataKey)
-          return TTL_NOT_FOUND
-        }
-        return ttl - 1
-      })
-    }, 1000)
-
-    return () => clearInterval(interval)
-  }, [])
+export const HeaderTTLBadge = ({ dataKey }: { dataKey: string }) => {
+  const { data: expireAt } = useFetchKeyExpire(dataKey)
+  const { mutate: setTTL, isPending } = useSetTTL()
 
   return (
-    <Badge label="TTL:">
-      {ttl === undefined ? (
-        <Skeleton className="ml-1 h-3 w-10 rounded-md opacity-50" />
-      ) : (
-        <TTLPopover dataKey={dataKey} ttl={ttl}>
-          <div className="flex gap-[2px]">
-            {ttl === TTL_INFINITE ? "Forever" : formatTime(ttl)}
-            <IconChevronDown className="mt-[1px] text-zinc-400" size={12} />
-          </div>
-        </TTLPopover>
-      )}
-    </Badge>
+    <TTLBadge
+      expireAt={expireAt}
+      setTTL={(ttl) => setTTL({ dataKey, ttl })}
+      isPending={isPending}
+    />
   )
 }
 
diff --git a/src/components/databrowser/components/display/ttl-badge.tsx b/src/components/databrowser/components/display/ttl-badge.tsx
new file mode 100644
index 0000000..d840ced
--- /dev/null
+++ b/src/components/databrowser/components/display/ttl-badge.tsx
@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react"
+import { IconChevronDown } from "@tabler/icons-react"
+
+import { formatTime } from "@/lib/utils"
+import { Skeleton } from "@/components/ui/skeleton"
+
+import { Badge } from "./header-badges"
+import { TTLPopover } from "./ttl-popover"
+
+export const TTL_INFINITE = -1
+export const TTL_NOT_FOUND = -2
+
+export const calculateTTL = (expireAt?: number) => {
+  if (!expireAt) return
+  if (expireAt === TTL_INFINITE) return TTL_INFINITE
+  return Math.max(0, Math.floor((expireAt - Date.now()) / 1000))
+}
+
+export const TTLBadge = ({
+  label = "TTL:",
+  expireAt,
+  setTTL,
+  isPending,
+}: {
+  label?: string
+  expireAt?: number
+  setTTL: (ttl: number) => void
+  isPending: boolean
+}) => {
+  const [ttl, setTTLLabel] = useState(() => calculateTTL(expireAt))
+
+  // Update ttl every second
+  useEffect(() => {
+    setTTLLabel(calculateTTL(expireAt))
+    const interval = setInterval(() => {
+      setTTLLabel(calculateTTL(expireAt))
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [expireAt])
+
+  return (
+    <Badge label={label}>
+      {ttl === undefined ? (
+        <Skeleton className="ml-1 h-3 w-10 rounded-md opacity-50" />
+      ) : (
+        <TTLPopover ttl={ttl} setTTL={setTTL} isPending={isPending}>
+          <div className="flex gap-[2px]">
+            {ttl === TTL_INFINITE ? "Forever" : formatTime(ttl)}
+            <IconChevronDown className="mt-[1px] text-zinc-400" size={12} />
+          </div>
+        </TTLPopover>
+      )}
+    </Badge>
+  )
+}
diff --git a/src/components/databrowser/components/display/ttl-popover.tsx b/src/components/databrowser/components/display/ttl-popover.tsx
index 47d23e6..c17bf2d 100644
--- a/src/components/databrowser/components/display/ttl-popover.tsx
+++ b/src/components/databrowser/components/display/ttl-popover.tsx
@@ -12,9 +12,8 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { Spinner } from "@/components/ui/spinner"
-import { useSetTTL } from "@/components/databrowser/hooks/use-set-ttl"
 
-const PERSISTED_KEY = -1
+import { TTL_INFINITE } from "./ttl-badge"
 
 const timeUnits = [
   { label: "Seconds", value: 1 },
@@ -26,10 +25,10 @@ const timeUnits = [
 export function TTLPopover({
   children,
   ttl,
-  dataKey,
-}: PropsWithChildren<{ ttl: number; dataKey: string }>) {
+  setTTL,
+  isPending,
+}: PropsWithChildren<{ ttl: number; setTTL: (ttl: number) => void; isPending: boolean }>) {
   const [open, setOpen] = useState(false)
-  const { mutateAsync: setTTL, isPending } = useSetTTL()
 
   const defaultValues = useMemo(() => {
     return { type: "Seconds", value: ttl } as const
@@ -49,18 +48,12 @@ export function TTLPopover({
   }, [defaultValues])
 
   const onSubmit = handleSubmit(async ({ value, type }) => {
-    await setTTL({
-      dataKey: dataKey,
-      ttl: value * timeUnits.find((unit) => unit.label === type)!.value,
-    })
+    await setTTL(value * timeUnits.find((unit) => unit.label === type)!.value)
     setOpen(false)
   })
 
   const handlePersist = async () => {
-    await setTTL({
-      dataKey: dataKey,
-      ttl: undefined,
-    })
+    await setTTL(TTL_INFINITE)
     setOpen(false)
   }
 
@@ -77,7 +70,13 @@ export function TTLPopover({
       </PopoverTrigger>
 
       <PopoverContent className="w-[300px]" align="end">
-        <form className="space-y-4" onSubmit={onSubmit}>
+        <form
+          className="space-y-4"
+          onSubmit={(e) => {
+            onSubmit(e)
+            e.stopPropagation()
+          }}
+        >
           <h4 className="font-medium leading-none">Expiration</h4>
 
           <div>
@@ -128,7 +127,7 @@ export function TTLPopover({
             <Button
               type="button"
               variant="outline"
-              disabled={ttl === PERSISTED_KEY}
+              disabled={ttl === TTL_INFINITE}
               onClick={handlePersist}
             >
               Persist
diff --git a/src/components/databrowser/hooks/use-fetch-hash-ttl.ts b/src/components/databrowser/hooks/use-fetch-hash-ttl.ts
new file mode 100644
index 0000000..8e01448
--- /dev/null
+++ b/src/components/databrowser/hooks/use-fetch-hash-ttl.ts
@@ -0,0 +1,60 @@
+import { useDatabrowser } from "@/store"
+import { useQuery } from "@tanstack/react-query"
+
+import { queryClient } from "@/lib/clients"
+
+import { TTL_INFINITE, TTL_NOT_FOUND } from "../components/display/ttl-badge"
+
+export const FETCH_HASH_FIELD_TTLS_QUERY_KEY = "fetch-hash-field-ttls"
+
+// Returns expireAt instead of ttl seconds, its more useful for the UI
+export const useFetchHashFieldExpires = ({
+  dataKey,
+  fields,
+}: {
+  dataKey: string
+  fields: string[]
+}) => {
+  const { redis } = useDatabrowser()
+
+  return useQuery({
+    queryKey: [FETCH_HASH_FIELD_TTLS_QUERY_KEY, dataKey, fields],
+    queryFn: async () => {
+      const cachedExpires = new Map<string, number | undefined>()
+
+      // Collect already cached results from query cache
+      for (const field of fields) {
+        const expireAt = queryClient.getQueryData([
+          FETCH_HASH_FIELD_TTLS_QUERY_KEY,
+          dataKey,
+          field,
+        ]) as number | undefined
+        if (expireAt !== undefined) cachedExpires.set(field, expireAt)
+      }
+
+      // Filter out fields that are already cached
+      const filteredFields = fields.filter((field) => !cachedExpires.has(field))
+
+      // If all fields are cached, return cached expires
+      if (filteredFields.length === 0) return Object.fromEntries(cachedExpires.entries())
+
+      const res = await redis.httl(dataKey, filteredFields)
+      const expireAts = res.map((ttl) =>
+        ttl === TTL_INFINITE || ttl === TTL_NOT_FOUND ? ttl : Date.now() + ttl * 1000
+      )
+
+      // Set new ttls
+      for (const [i, field] of filteredFields.entries()) {
+        queryClient.setQueryData([FETCH_HASH_FIELD_TTLS_QUERY_KEY, dataKey, field], expireAts[i])
+      }
+
+      const newExpiresArray = expireAts.map((expireAt, i) => [filteredFields[i], expireAt])
+
+      // Return all, both cached and new
+      return Object.fromEntries([...cachedExpires.entries(), ...newExpiresArray]) as Record<
+        string,
+        number | undefined
+      >
+    },
+  })
+}
diff --git a/src/components/databrowser/hooks/use-fetch-ttl.ts b/src/components/databrowser/hooks/use-fetch-ttl.ts
index cc20711..f936b02 100644
--- a/src/components/databrowser/hooks/use-fetch-ttl.ts
+++ b/src/components/databrowser/hooks/use-fetch-ttl.ts
@@ -4,27 +4,31 @@ import { useQuery } from "@tanstack/react-query"
 
 import { queryClient } from "@/lib/clients"
 
+import { TTL_INFINITE, TTL_NOT_FOUND } from "../components/display/ttl-badge"
 import { FETCH_SIMPLE_KEY_QUERY_KEY } from "./use-fetch-simple-key"
 
 export const FETCH_TTL_QUERY_KEY = "fetch-ttl"
 
-export const useFetchTTL = (dataKey: string) => {
+// Returns the expireAt instead of ttl seconds, its more useful for the UI
+export const useFetchKeyExpire = (dataKey: string) => {
   const { redis } = useDatabrowser()
 
   const { isLoading, error, data } = useQuery({
     queryKey: [FETCH_TTL_QUERY_KEY, dataKey],
     queryFn: async () => {
-      return await redis.ttl(dataKey)
+      const ttl = await redis.ttl(dataKey)
+
+      return ttl === TTL_INFINITE || ttl === TTL_NOT_FOUND ? ttl : Date.now() + ttl * 1000
     },
   })
 
   useEffect(() => {
-    if (data === -2) {
+    if (data === TTL_NOT_FOUND) {
       queryClient.invalidateQueries({
         queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY, dataKey],
       })
     }
-  }, [data === -2])
+  }, [data === TTL_NOT_FOUND])
 
   return { isLoading, error, data }
 }
diff --git a/src/components/databrowser/hooks/use-set-hash-ttl.ts b/src/components/databrowser/hooks/use-set-hash-ttl.ts
new file mode 100644
index 0000000..82778b6
--- /dev/null
+++ b/src/components/databrowser/hooks/use-set-hash-ttl.ts
@@ -0,0 +1,32 @@
+import { useDatabrowser } from "@/store"
+import { useMutation } from "@tanstack/react-query"
+
+import { queryClient } from "@/lib/clients"
+
+import { TTL_INFINITE } from "../components/display/ttl-badge"
+import { FETCH_HASH_FIELD_TTLS_QUERY_KEY } from "./use-fetch-hash-ttl"
+
+export const useSetHashTTL = () => {
+  const { redis } = useDatabrowser()
+
+  return useMutation({
+    mutationFn: async ({
+      dataKey,
+      field,
+      ttl,
+    }: {
+      dataKey: string
+      field: string
+      ttl: number
+    }) => {
+      await (ttl === undefined || ttl === TTL_INFINITE
+        ? redis.hpersist(dataKey, field)
+        : redis.hexpire(dataKey, field, ttl))
+    },
+    onSuccess: (_, { dataKey }) => {
+      queryClient.removeQueries({
+        queryKey: [FETCH_HASH_FIELD_TTLS_QUERY_KEY, dataKey],
+      })
+    },
+  })
+}
diff --git a/src/components/databrowser/hooks/use-set-ttl.ts b/src/components/databrowser/hooks/use-set-ttl.ts
index 37c3416..e4414a8 100644
--- a/src/components/databrowser/hooks/use-set-ttl.ts
+++ b/src/components/databrowser/hooks/use-set-ttl.ts
@@ -3,6 +3,7 @@ import { useMutation } from "@tanstack/react-query"
 
 import { queryClient } from "@/lib/clients"
 
+import { TTL_INFINITE } from "../components/display/ttl-badge"
 import { FETCH_SIMPLE_KEY_QUERY_KEY } from "./use-fetch-simple-key"
 import { FETCH_TTL_QUERY_KEY } from "./use-fetch-ttl"
 
@@ -11,10 +12,12 @@ export const useSetTTL = () => {
 
   const updateTTL = useMutation({
     mutationFn: async ({ dataKey, ttl }: { dataKey: string; ttl?: number }) => {
-      await (ttl === undefined ? redis.persist(dataKey) : redis.expire(dataKey, ttl))
+      await (ttl === undefined || ttl === TTL_INFINITE
+        ? redis.persist(dataKey)
+        : redis.expire(dataKey, ttl))
     },
     onSuccess: (_, { dataKey }) => {
-      queryClient.invalidateQueries({
+      queryClient.removeQueries({
         queryKey: [FETCH_TTL_QUERY_KEY, dataKey],
       })
       queryClient.invalidateQueries({
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index b67ed6c..c348fea 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -45,5 +45,6 @@ export function formatTime(seconds: number) {
     parts.push("0s")
   }
 
-  return parts.slice(0, 2).join(" ")
+  // Just get the first part because of design change
+  return parts.slice(0, 1).join(" ")
 }