diff --git a/ui/packages/ce/src/api/snapshots/destroySnapshot.js b/ui/packages/ce/src/api/snapshots/destroySnapshot.ts
similarity index 84%
rename from ui/packages/ce/src/api/snapshots/destroySnapshot.js
rename to ui/packages/ce/src/api/snapshots/destroySnapshot.ts
index e68699543923c05eb82390fede1438510c97e55c..855a47549cd96348ea27090d337004ad192d91c1 100644
--- a/ui/packages/ce/src/api/snapshots/destroySnapshot.js
+++ b/ui/packages/ce/src/api/snapshots/destroySnapshot.ts
@@ -7,11 +7,15 @@
 
 import { request } from 'helpers/request'
 
-export const destroySnapshot = async (snapshotId) => {
+export const destroySnapshot = async (
+  snapshotId: string,
+  forceDelete: boolean,
+) => {
   const response = await request(`/snapshot/delete`, {
     method: 'POST',
     body: JSON.stringify({
       snapshotID: snapshotId,
+      force: forceDelete,
     }),
   })
 
diff --git a/ui/packages/ce/src/api/snapshots/getBranchSnapshots.ts b/ui/packages/ce/src/api/snapshots/getBranchSnapshots.ts
index de4029b3c08d2f0d4c7ae921aa240671cfd54845..e4729fc4b352689893799cc78acb07d17b281c45 100644
--- a/ui/packages/ce/src/api/snapshots/getBranchSnapshots.ts
+++ b/ui/packages/ce/src/api/snapshots/getBranchSnapshots.ts
@@ -6,12 +6,21 @@
  */
 
 import { request } from 'helpers/request'
+import {
+  SnapshotDto,
+  formatSnapshotDto,
+} from '@postgres.ai/shared/types/api/entities/snapshot'
+import { GetBranchSnapshots } from '@postgres.ai/shared/types/api/endpoints/getBranchSnapshots'
 
-export const getBranchSnapshots = async (branch: string) => {
+export const getBranchSnapshots: GetBranchSnapshots = async (
+  branch: string,
+) => {
   const response = await request(`/branch/snapshots/${branch}`)
 
   return {
-    response: response.ok ? await response.json() : null,
+    response: response.ok
+      ? ((await response.json()) as SnapshotDto[]).map(formatSnapshotDto)
+      : null,
     error: response.ok ? null : response,
   }
 }
diff --git a/ui/packages/ce/src/api/snapshots/getSnapshots.ts b/ui/packages/ce/src/api/snapshots/getSnapshots.ts
index d9ae5fb4e7a08be8549f30b3ce6b154154e687de..b26788ebda5df598bcee5650f355a1c29b7deb68 100644
--- a/ui/packages/ce/src/api/snapshots/getSnapshots.ts
+++ b/ui/packages/ce/src/api/snapshots/getSnapshots.ts
@@ -13,7 +13,8 @@ import {
 import { request } from 'helpers/request'
 
 export const getSnapshots: GetSnapshots = async (req) => {
-  const response = await request('/snapshots')
+  const url = `/snapshots${req.branchName ? `?branch=${req.branchName}` : ''}`;
+  const response = await request(url);
 
   return {
     response: response.ok
diff --git a/ui/packages/shared/pages/Branches/Branch/index.tsx b/ui/packages/shared/pages/Branches/Branch/index.tsx
index f835661c21cd1c4a09f8cd2321e1a038d2631ac7..4a5510e87ba89139c0d40d6cfd93c0f639703818 100644
--- a/ui/packages/shared/pages/Branches/Branch/index.tsx
+++ b/ui/packages/shared/pages/Branches/Branch/index.tsx
@@ -337,7 +337,7 @@ export const BranchesPage = observer((props: Props) => {
                               {snapshot.dataStateAt || '-'}
                             </TableBodyCell>
                             <TableBodyCell>
-                              {snapshot.comment ?? '-'}
+                              {snapshot.message ?? '-'}
                             </TableBodyCell>
                           </TableRow>
                         ))}
diff --git a/ui/packages/shared/pages/CreateClone/index.tsx b/ui/packages/shared/pages/CreateClone/index.tsx
index 0b62c9757c096f389eeb9f2378fb100943990d3b..577edc520b2c85bed374cf1f77813f626312d943 100644
--- a/ui/packages/shared/pages/CreateClone/index.tsx
+++ b/ui/packages/shared/pages/CreateClone/index.tsx
@@ -49,6 +49,7 @@ export const CreateClone = observer((props: Props) => {
   const timer = useTimer()
   const [branchesList, setBranchesList] = useState<string[]>([])
   const [snapshots, setSnapshots] = useState([] as Snapshot[])
+  const [isLoadingSnapshots, setIsLoadingSnapshots] = useState(false)
 
   // Form.
   const onSubmit = async (values: FormValues) => {
@@ -94,6 +95,7 @@ export const CreateClone = observer((props: Props) => {
 
   const fetchData = async () => {
     try {
+      setIsLoadingSnapshots(true)
       await stores.main.load(props.instanceId)
 
       const branches = (await stores.main.getBranches()) ?? []
@@ -105,12 +107,15 @@ export const CreateClone = observer((props: Props) => {
         await fetchBranchSnapshotsData(initiallySelectedBranch)
       } else {
         const allSnapshots = stores.main?.snapshots?.data ?? []
-        setSnapshots(allSnapshots)
+        const sortedSnapshots = allSnapshots.slice().sort(compareSnapshotsDesc)
+        setSnapshots(sortedSnapshots)
         const [firstSnapshot] = allSnapshots ?? []
         formik.setFieldValue('snapshotId', firstSnapshot?.id)
       }
     } catch (error) {
       console.error('Error fetching data:', error)
+    } finally {
+      setIsLoadingSnapshots(false)
     }
   }
 
@@ -136,7 +141,7 @@ export const CreateClone = observer((props: Props) => {
   )
 
   // Initial loading spinner.
-  if (!stores.main.instance)
+  if (!stores.main.instance || isLoadingSnapshots)
     return (
       <>
         {headRendered}
@@ -217,23 +222,20 @@ export const CreateClone = observer((props: Props) => {
               }
               error={Boolean(formik.errors.snapshotId)}
               items={
-                snapshots
-                  .slice()
-                  .sort(compareSnapshotsDesc)
-                  .map((snapshot, i) => {
-                    const isLatest = i === 0
-                    return {
-                      value: snapshot.id,
-                      children: (
-                        <>
-                          {snapshot.dataStateAt}
-                          {isLatest && (
-                            <span className={styles.snapshotTag}>Latest</span>
-                          )}
-                        </>
-                      ),
-                    }
-                  }) ?? []
+                snapshots.map((snapshot, i) => {
+                  const isLatest = i === 0
+                  return {
+                    value: snapshot.id,
+                    children: (
+                      <>
+                        {snapshot.dataStateAt}
+                        {isLatest && (
+                          <span className={styles.snapshotTag}>Latest</span>
+                        )}
+                      </>
+                    ),
+                  }
+                }) ?? []
               }
             />
 
diff --git a/ui/packages/shared/pages/CreateSnapshot/index.tsx b/ui/packages/shared/pages/CreateSnapshot/index.tsx
index f2e074a7dadb676bdb7c70fb2f1bece054d00b08..607a6e035822180218d76b63ad35e815718b651d 100644
--- a/ui/packages/shared/pages/CreateSnapshot/index.tsx
+++ b/ui/packages/shared/pages/CreateSnapshot/index.tsx
@@ -100,7 +100,7 @@ export const CreateSnapshotPage = observer(
     const clonesList = instance?.instance?.state?.cloning.clones || []
 
     const handleSubmit = async (values: FormValues) => {
-      await createSnapshot(values.cloneID, values.comment).then((snapshot) => {
+      await createSnapshot(values.cloneID, values.message).then((snapshot) => {
         if (snapshot && generateSnapshotPageId(snapshot.snapshotID)) {
           history.push(
             `/instance/snapshots/${generateSnapshotPageId(
@@ -165,18 +165,18 @@ export const CreateSnapshotPage = observer(
                     : []
                 }
               />
-              <strong>Comment</strong>
+              <strong>Message</strong>
               <p className={classes.marginTop}>
-                Optional comment to be added to the snapshot.
+                Message to be added to the snapshot.
               </p>
               <TextField
-                label="Comment"
+                label="Message *"
                 fullWidth
                 className={classes.marginBottom2x}
-                value={formik.values.comment}
-                error={Boolean(formik.errors.comment)}
+                value={formik.values.message}
+                error={Boolean(formik.errors.message)}
                 onChange={(e) =>
-                  formik.setFieldValue('comment', e.target.value)
+                  formik.setFieldValue('message', e.target.value)
                 }
               />
               <Button
diff --git a/ui/packages/shared/pages/CreateSnapshot/useForm.ts b/ui/packages/shared/pages/CreateSnapshot/useForm.ts
index 4e7ee74adf37163bb9cfe9b9a52c5d36177d80a5..25a99fcc14e0bf16ae9eb0191bca6a8a0c131039 100644
--- a/ui/packages/shared/pages/CreateSnapshot/useForm.ts
+++ b/ui/packages/shared/pages/CreateSnapshot/useForm.ts
@@ -10,18 +10,19 @@ import * as Yup from 'yup'
 
 export type FormValues = {
   cloneID: string
-  comment?: string
+  message: string
 }
 
 const Schema = Yup.object().shape({
   cloneID: Yup.string().required('Clone ID is required'),
+  message: Yup.string().required('Message is required'),
 })
 
 export const useForm = (onSubmit: (values: FormValues) => void) => {
   const formik = useFormik<FormValues>({
     initialValues: {
       cloneID: '',
-      comment: '',
+      message: '',
     },
     validationSchema: Schema,
     onSubmit,
diff --git a/ui/packages/shared/pages/Instance/Snapshots/components/SnapshotHeader/index.tsx b/ui/packages/shared/pages/Instance/Snapshots/components/SnapshotHeader/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e38ec9c31b9efdd97af7178b0d4041d67a6c7ebc
--- /dev/null
+++ b/ui/packages/shared/pages/Instance/Snapshots/components/SnapshotHeader/index.tsx
@@ -0,0 +1,77 @@
+import { observer } from 'mobx-react-lite'
+import { makeStyles, TextField } from '@material-ui/core'
+import { Select } from '@postgres.ai/shared/components/Select'
+
+interface SnapshotHeaderProps {
+  branches: string[] | null
+  selectedBranch: string
+  setMessageFilter: (value: string) => void
+  setSelectedBranch: (value: string) => void
+}
+
+const useStyles = makeStyles(
+  {
+    outerContainer: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingBottom: '6px',
+    },
+    select: {
+      width: '200px',
+    },
+    inputContainer: {
+      width: '300px',
+
+      '& input': {
+        padding: '8px',
+      },
+    },
+  },
+  { index: 1 },
+)
+
+export const SnapshotHeader = observer(
+  ({
+    branches,
+    selectedBranch,
+    setMessageFilter,
+    setSelectedBranch,
+  }: SnapshotHeaderProps) => {
+    const classes = useStyles()
+
+    return (
+      <div className={classes.outerContainer}>
+        <Select
+          fullWidth
+          label="Branch"
+          className={classes.select}
+          value={selectedBranch}
+          disabled={!branches}
+          onChange={(e) => {
+            setSelectedBranch(e.target.value)
+          }}
+          items={
+            branches
+              ? branches.map((branch) => {
+                  return {
+                    value: branch,
+                    children: <div>{branch}</div>,
+                  }
+                })
+              : []
+          }
+        />
+        <TextField
+          variant="outlined"
+          className={classes.inputContainer}
+          onChange={(e) => setMessageFilter(e.target.value)}
+          label={'Filter by message'}
+          InputLabelProps={{
+            shrink: true,
+          }}
+        />
+      </div>
+    )
+  },
+)
diff --git a/ui/packages/shared/pages/Instance/Snapshots/components/SnapshotsList/index.tsx b/ui/packages/shared/pages/Instance/Snapshots/components/SnapshotsList/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5a95a191365dc1f6ae594550ad370c81d6dc03d1
--- /dev/null
+++ b/ui/packages/shared/pages/Instance/Snapshots/components/SnapshotsList/index.tsx
@@ -0,0 +1,264 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { makeStyles } from '@material-ui/core'
+import copy from 'copy-to-clipboard'
+
+import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer'
+import { DestroySnapshotModal } from '@postgres.ai/shared/pages/Snapshots/Snapshot/DestorySnapshotModal'
+import { Snapshot } from 'types/api/entities/snapshot'
+import { useStores } from '@postgres.ai/shared/pages/Instance/context'
+import { IconButton } from '@mui/material'
+import { icons } from '@postgres.ai/shared/styles/icons'
+import { RowMenu } from '@postgres.ai/shared/components/Table/RowMenu'
+import {
+  generateSnapshotPageId,
+  groupSnapshotsByCreatedAtDate,
+} from '@postgres.ai/shared/pages/Instance/Snapshots/utils'
+import { format, formatDistanceToNowStrict } from 'date-fns'
+import { formatBytesIEC } from '@postgres.ai/shared/utils/units'
+import { useHistory } from 'react-router'
+
+const useStyles = makeStyles(
+  {
+    pointerCursor: {
+      cursor: 'pointer',
+      padding: '0 8px',
+
+      '&:hover': {
+        backgroundColor: '#f9f9f9',
+      },
+    },
+    commitItem: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      padding: '14px 0',
+      borderBottom: '1px solid #ddd',
+
+      '&:last-child': {
+        borderBottom: 'none',
+        marginBottom: '12px',
+      },
+    },
+    infoBlock: {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      overflow: 'hidden',
+    },
+    header: {
+      fontWeight: 500,
+    },
+    infoContent: {
+      fontSize: '12px',
+      color: '#808080',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '5px',
+    },
+    snapshotId: {
+      fontSize: '12px',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      padding: '0 10px',
+    },
+    actionsContainer: {
+      overflow: 'hidden',
+      display: 'flex',
+      height: 'max-content',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      border: '1px solid #ddd',
+      borderRadius: '5px',
+      padding: '0 14px',
+      justifySelf: 'end',
+      maxWidth: '100%',
+
+      '& .MuiButtonBase-root, .MuiTableCell-root': {
+        padding: '0!important',
+        borderBottom: 'none',
+      },
+    },
+    dateGroup: {
+      fontSize: '14px',
+      fontWeight: 'bold',
+      padding: '14px 0 5px 0',
+      borderBottom: '1px solid #ddd',
+    },
+    rowMenuContainer: {
+      paddingLeft: '10px',
+      '& .MuiButtonBase-root': {
+        width: '20px',
+        height: '20px',
+        padding: '8px',
+      },
+    },
+    copyButtonContainer: {
+      '& .MuiButtonBase-root': {
+        borderLeft: '1px solid #ddd',
+        borderRadius: '0',
+        borderRight: '1px solid #ddd',
+      },
+    },
+    copyButton: {
+      width: '32px',
+      height: '32px',
+      padding: '8px',
+    },
+    tooltipInfo: {
+      fontSize: '12px',
+    },
+    gridContainer: {
+      width: '100%',
+      display: 'grid',
+      columnGap: '20px',
+      gridTemplateColumns: 'repeat(5, 0.75fr) 1fr',
+    },
+  },
+  { index: 1 },
+)
+
+const SnapshotListItem = ({
+  snapshot,
+  setSnapshotModal,
+  openClonesModal,
+}: {
+  snapshot: Snapshot
+  openClonesModal: () => void
+  setSnapshotModal: (modal: { isOpen: boolean; snapshotId: string }) => void
+}) => {
+  const classes = useStyles()
+  const timeAgo = formatDistanceToNowStrict(snapshot.createdAtDate)
+
+  return (
+    <div className={classes.commitItem}>
+      <div className={classes.gridContainer}>
+        <div className={classes.infoBlock}>
+          <div className={classes.header}>{snapshot.message}</div>
+          <div className={classes.infoContent} title={snapshot.dataStateAt}>
+            {timeAgo} ago
+          </div>
+        </div>
+        <div className={classes.infoBlock}>
+          <div className={classes.header}>Pool</div>
+          <div className={classes.infoContent}>{snapshot.pool ?? '-'}</div>
+        </div>
+        <div className={classes.infoBlock}>
+          <div className={classes.header}>Number of clones</div>
+          <div className={classes.infoContent}>{snapshot.numClones ?? '-'}</div>
+        </div>
+        <div className={classes.infoBlock}>
+          <div className={classes.header}>Logical Size</div>
+          <div className={classes.infoContent}>
+            {snapshot.logicalSize ? formatBytesIEC(snapshot.logicalSize) : '-'}
+          </div>
+        </div>
+        <div className={classes.infoBlock}>
+          <div className={classes.header}>Physical Size</div>
+          <div className={classes.infoContent}>
+            {snapshot.physicalSize
+              ? formatBytesIEC(snapshot.physicalSize)
+              : '-'}
+          </div>
+        </div>
+        <div
+          className={classes.actionsContainer}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className={classes.snapshotId}>{snapshot.id}</div>
+          <div className={classes.copyButtonContainer} title="Copy snapshot ID">
+            <IconButton
+              className={classes.copyButton}
+              onClick={(e) => {
+                e.stopPropagation()
+                copy(snapshot.id)
+              }}
+            >
+              {icons.copyIcon}
+            </IconButton>
+          </div>
+          <div className={classes.rowMenuContainer} title="Actions">
+            <RowMenu
+              actions={[
+                {
+                  name: 'Show related clones',
+                  onClick: () => openClonesModal(),
+                },
+                {
+                  name: 'Destroy snapshot',
+                  onClick: () =>
+                    setSnapshotModal({
+                      isOpen: true,
+                      snapshotId: snapshot.id,
+                    }),
+                },
+              ]}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const SnapshotsList = observer(
+  ({ filteredSnapshots }: { filteredSnapshots: Snapshot[] }) => {
+    const classes = useStyles()
+    const stores = useStores()
+    const history = useHistory()
+    const groupedSnapshots = groupSnapshotsByCreatedAtDate(filteredSnapshots)
+
+    const [snapshotModal, setSnapshotModal] = React.useState({
+      isOpen: false,
+      snapshotId: '',
+    })
+
+    return (
+      <HorizontalScrollContainer>
+        {groupedSnapshots.map((group, index) => {
+          const groupDateFormatted = format(
+            group[0].createdAtDate,
+            'MMM dd, yyyy',
+          )
+
+          return (
+            <div key={index}>
+              <div className={classes.dateGroup}>{groupDateFormatted}</div>
+              {group.map((snapshot) => {
+                const snapshotPageId = generateSnapshotPageId(snapshot.id)
+                return (
+                  <div
+                    key={snapshot.id}
+                    className={classes.pointerCursor}
+                    onClick={() =>
+                      snapshotPageId &&
+                      history.push(`/instance/snapshots/${snapshotPageId}`)
+                    }
+                  >
+                    <SnapshotListItem
+                      snapshot={snapshot}
+                      setSnapshotModal={setSnapshotModal}
+                      openClonesModal={() =>
+                        stores.clonesModal.openModal({
+                          snapshotId: snapshot.id,
+                        })
+                      }
+                    />
+                  </div>
+                )
+              })}
+            </div>
+          )
+        })}
+        {snapshotModal.isOpen && snapshotModal.snapshotId && (
+          <DestroySnapshotModal
+            isOpen={snapshotModal.isOpen}
+            onClose={() => setSnapshotModal({ isOpen: false, snapshotId: '' })}
+            snapshotId={snapshotModal.snapshotId}
+            afterSubmitClick={() => window.location.reload()}
+          />
+        )}
+      </HorizontalScrollContainer>
+    )
+  },
+)
diff --git a/ui/packages/shared/pages/Instance/Snapshots/components/SnapshotsTable/index.tsx b/ui/packages/shared/pages/Instance/Snapshots/components/SnapshotsTable/index.tsx
index 29b875add43d3560f8c36f1759b02280593eecb5..95da8d9ae854564bc4573b9328097b4d2c6b0154 100644
--- a/ui/packages/shared/pages/Instance/Snapshots/components/SnapshotsTable/index.tsx
+++ b/ui/packages/shared/pages/Instance/Snapshots/components/SnapshotsTable/index.tsx
@@ -5,226 +5,227 @@
  *--------------------------------------------------------------------------
  */
 
-import React from 'react'
-import cn from 'classnames'
-import { observer } from 'mobx-react-lite'
-import { makeStyles } from '@material-ui/core'
-import { formatDistanceToNowStrict } from 'date-fns'
-import copy from 'copy-to-clipboard'
-import { useHistory } from 'react-router-dom'
-
-import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer'
-import { generateSnapshotPageId } from '@postgres.ai/shared/pages/Instance/Snapshots/utils'
-import { DestroySnapshotModal } from '@postgres.ai/shared/pages/Snapshots/Snapshot/DestorySnapshotModal'
-import { useStores } from '@postgres.ai/shared/pages/Instance/context'
-import { ArrowDropDownIcon } from '@postgres.ai/shared/icons/ArrowDropDown'
-import { formatBytesIEC } from '@postgres.ai/shared/utils/units'
-import { isSameDayUTC, isValidDate } from '@postgres.ai/shared/utils/date'
-import {
-  Table,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableHeaderCell,
-  TableBodyCell,
-  TableBodyCellMenu,
-} from '@postgres.ai/shared/components/Table'
-
-const useStyles = makeStyles(
-  {
-    cellContentCentered: {
-      display: 'flex',
-      alignItems: 'center',
-    },
-    pointerCursor: {
-      cursor: 'pointer',
-    },
-    sortIcon: {
-      marginLeft: '8px',
-      width: '10px',
-      cursor: 'pointer',
-      transition: 'transform 0.15s ease-in-out',
-    },
-
-    sortIconUp: {
-      transform: 'rotate(180deg)',
-    },
-
-    hideSortIcon: {
-      opacity: 0,
-    },
-
-    verticalCentered: {
-      display: 'flex',
-      alignItems: 'center',
-    },
-  },
-  { index: 1 },
-)
-
-export const SnapshotsTable = observer(() => {
-  const history = useHistory()
-  const classes = useStyles()
-  const stores = useStores()
-  const { snapshots } = stores.main
-
-  const [snapshotModal, setSnapshotModal] = React.useState({
-    isOpen: false,
-    snapshotId: '',
-  })
-
-  const filteredSnapshots = snapshots?.data?.filter((snapshot) => {
-    const isMatchedByDate =
-      !stores.snapshotsModal.date ||
-      isSameDayUTC(snapshot.dataStateAtDate, stores.snapshotsModal.date)
-
-    const isMatchedByPool =
-      !stores.snapshotsModal.pool ||
-      snapshot.pool === stores.snapshotsModal.pool
-
-    return isMatchedByDate && isMatchedByPool
-  })
-
-  const [state, setState] = React.useState({
-    sortByCreatedDate: 'desc',
-    snapshots: filteredSnapshots ?? [],
-  })
-
-  const handleSortByCreatedDate = () => {
-    const sortByCreatedDate =
-      state.sortByCreatedDate === 'desc' ? 'asc' : 'desc'
-
-    const sortedSnapshots = [...state.snapshots].sort((a, b) => {
-      if (sortByCreatedDate === 'asc') {
-        return (
-          new Date(a.createdAtDate).getTime() -
-          new Date(b.createdAtDate).getTime()
-        )
-      } else {
-        return (
-          new Date(b.createdAtDate).getTime() -
-          new Date(a.createdAtDate).getTime()
-        )
-      }
-    })
-
-    setState({
-      ...state,
-      sortByCreatedDate,
-      snapshots: sortedSnapshots,
-    })
-  }
-
-  if (!snapshots.data) return null
-
-  return (
-    <HorizontalScrollContainer>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableHeaderCell />
-            <TableHeaderCell>Data state time</TableHeaderCell>
-            <TableHeaderCell>
-              <div
-                className={cn(classes.pointerCursor, classes.verticalCentered)}
-                onClick={handleSortByCreatedDate}
-              >
-                Created
-                <ArrowDropDownIcon
-                  className={cn(
-                    state.sortByCreatedDate === 'asc' && classes.sortIconUp,
-                    classes.sortIcon,
-                  )}
-                />
-              </div>
-            </TableHeaderCell>
-            <TableHeaderCell>Pool</TableHeaderCell>
-            <TableHeaderCell>Number of clones</TableHeaderCell>
-            <TableHeaderCell>Logical Size</TableHeaderCell>
-            <TableHeaderCell>Physical Size</TableHeaderCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {state.snapshots?.map((snapshot) => {
-            const snapshotPageId = generateSnapshotPageId(snapshot.id)
-            return (
-              <TableRow
-                key={snapshot.id}
-                hover
-                onClick={() =>
-                  snapshotPageId &&
-                  history.push(`/instance/snapshots/${snapshotPageId}`)
-                }
-                className={classes.pointerCursor}
-              >
-                <TableBodyCellMenu
-                  actions={[
-                    {
-                      name: 'Copy snapshot ID',
-                      onClick: () => copy(snapshot.id),
-                    },
-                    {
-                      name: 'Show related clones',
-                      onClick: () =>
-                        stores.clonesModal.openModal({
-                          snapshotId: snapshot.id,
-                        }),
-                    },
-                    {
-                      name: 'Destroy snapshot',
-                      onClick: () =>
-                        setSnapshotModal({
-                          isOpen: true,
-                          snapshotId: snapshot.id,
-                        }),
-                    },
-                  ]}
-                />
-                <TableBodyCell>
-                  {snapshot.dataStateAt} (
-                  {isValidDate(snapshot.dataStateAtDate)
-                    ? formatDistanceToNowStrict(snapshot.dataStateAtDate, {
-                        addSuffix: true,
-                      })
-                    : '-'}
-                  )
-                </TableBodyCell>
-                <TableBodyCell>
-                  {snapshot.createdAt} (
-                  {isValidDate(snapshot.createdAtDate)
-                    ? formatDistanceToNowStrict(snapshot.createdAtDate, {
-                        addSuffix: true,
-                      })
-                    : '-'}
-                  )
-                </TableBodyCell>
-                <TableBodyCell>{snapshot.pool ?? '-'}</TableBodyCell>
-                <TableBodyCell>{snapshot.numClones ?? '-'}</TableBodyCell>
-                <TableBodyCell>
-                  {snapshot.logicalSize
-                    ? formatBytesIEC(snapshot.logicalSize)
-                    : '-'}
-                </TableBodyCell>
-                <TableBodyCell>
-                  {snapshot.physicalSize
-                    ? formatBytesIEC(snapshot.physicalSize)
-                    : '-'}
-                </TableBodyCell>
-              </TableRow>
-            )
-          })}
-        </TableBody>
-        {snapshotModal.isOpen && snapshotModal.snapshotId && (
-          <DestroySnapshotModal
-            isOpen={snapshotModal.isOpen}
-            onClose={() => setSnapshotModal({ isOpen: false, snapshotId: '' })}
-            snapshotId={snapshotModal.snapshotId}
-            afterSubmitClick={() =>
-              stores.main?.reload(stores.main.instance?.id ?? '')
-            }
-          />
-        )}
-      </Table>
-    </HorizontalScrollContainer>
-  )
-})
+ import React from 'react'
+ import cn from 'classnames'
+ import { observer } from 'mobx-react-lite'
+ import { makeStyles } from '@material-ui/core'
+ import { formatDistanceToNowStrict } from 'date-fns'
+ import copy from 'copy-to-clipboard'
+ import { useHistory } from 'react-router-dom'
+ 
+ import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer'
+ import { generateSnapshotPageId } from '@postgres.ai/shared/pages/Instance/Snapshots/utils'
+ import { DestroySnapshotModal } from '@postgres.ai/shared/pages/Snapshots/Snapshot/DestorySnapshotModal'
+ import { useStores } from '@postgres.ai/shared/pages/Instance/context'
+ import { ArrowDropDownIcon } from '@postgres.ai/shared/icons/ArrowDropDown'
+ import { formatBytesIEC } from '@postgres.ai/shared/utils/units'
+ import { isSameDayUTC, isValidDate } from '@postgres.ai/shared/utils/date'
+ import {
+   Table,
+   TableHead,
+   TableRow,
+   TableBody,
+   TableHeaderCell,
+   TableBodyCell,
+   TableBodyCellMenu,
+ } from '@postgres.ai/shared/components/Table'
+ 
+ const useStyles = makeStyles(
+   {
+     cellContentCentered: {
+       display: 'flex',
+       alignItems: 'center',
+     },
+     pointerCursor: {
+       cursor: 'pointer',
+     },
+     sortIcon: {
+       marginLeft: '8px',
+       width: '10px',
+       cursor: 'pointer',
+       transition: 'transform 0.15s ease-in-out',
+     },
+ 
+     sortIconUp: {
+       transform: 'rotate(180deg)',
+     },
+ 
+     hideSortIcon: {
+       opacity: 0,
+     },
+ 
+     verticalCentered: {
+       display: 'flex',
+       alignItems: 'center',
+     },
+   },
+   { index: 1 },
+ )
+ 
+ export const SnapshotsTable = observer(() => {
+   const history = useHistory()
+   const classes = useStyles()
+   const stores = useStores()
+   const { snapshots } = stores.main
+ 
+   const [snapshotModal, setSnapshotModal] = React.useState({
+     isOpen: false,
+     snapshotId: '',
+   })
+ 
+   const filteredSnapshots = snapshots?.data?.filter((snapshot) => {
+     const isMatchedByDate =
+       !stores.snapshotsModal.date ||
+       isSameDayUTC(snapshot.dataStateAtDate, stores.snapshotsModal.date)
+ 
+     const isMatchedByPool =
+       !stores.snapshotsModal.pool ||
+       snapshot.pool === stores.snapshotsModal.pool
+ 
+     return isMatchedByDate && isMatchedByPool
+   })
+ 
+   const [state, setState] = React.useState({
+     sortByCreatedDate: 'desc',
+     snapshots: filteredSnapshots ?? [],
+   })
+ 
+   const handleSortByCreatedDate = () => {
+     const sortByCreatedDate =
+       state.sortByCreatedDate === 'desc' ? 'asc' : 'desc'
+ 
+     const sortedSnapshots = [...state.snapshots].sort((a, b) => {
+       if (sortByCreatedDate === 'asc') {
+         return (
+           new Date(a.createdAtDate).getTime() -
+           new Date(b.createdAtDate).getTime()
+         )
+       } else {
+         return (
+           new Date(b.createdAtDate).getTime() -
+           new Date(a.createdAtDate).getTime()
+         )
+       }
+     })
+ 
+     setState({
+       ...state,
+       sortByCreatedDate,
+       snapshots: sortedSnapshots,
+     })
+   }
+ 
+   if (!snapshots.data) return null
+ 
+   return (
+     <HorizontalScrollContainer>
+       <Table>
+         <TableHead>
+           <TableRow>
+             <TableHeaderCell />
+             <TableHeaderCell>Data state time</TableHeaderCell>
+             <TableHeaderCell>
+               <div
+                 className={cn(classes.pointerCursor, classes.verticalCentered)}
+                 onClick={handleSortByCreatedDate}
+               >
+                 Created
+                 <ArrowDropDownIcon
+                   className={cn(
+                     state.sortByCreatedDate === 'asc' && classes.sortIconUp,
+                     classes.sortIcon,
+                   )}
+                 />
+               </div>
+             </TableHeaderCell>
+             <TableHeaderCell>Pool</TableHeaderCell>
+             <TableHeaderCell>Number of clones</TableHeaderCell>
+             <TableHeaderCell>Logical Size</TableHeaderCell>
+             <TableHeaderCell>Physical Size</TableHeaderCell>
+           </TableRow>
+         </TableHead>
+         <TableBody>
+           {state.snapshots?.map((snapshot) => {
+             const snapshotPageId = generateSnapshotPageId(snapshot.id)
+             return (
+               <TableRow
+                 key={snapshot.id}
+                 hover
+                 onClick={() =>
+                   snapshotPageId &&
+                   history.push(`/instance/snapshots/${snapshotPageId}`)
+                 }
+                 className={classes.pointerCursor}
+               >
+                 <TableBodyCellMenu
+                   actions={[
+                     {
+                       name: 'Copy snapshot ID',
+                       onClick: () => copy(snapshot.id),
+                     },
+                     {
+                       name: 'Show related clones',
+                       onClick: () =>
+                         stores.clonesModal.openModal({
+                           snapshotId: snapshot.id,
+                         }),
+                     },
+                     {
+                       name: 'Destroy snapshot',
+                       onClick: () =>
+                         setSnapshotModal({
+                           isOpen: true,
+                           snapshotId: snapshot.id,
+                         }),
+                     },
+                   ]}
+                 />
+                 <TableBodyCell>
+                   {snapshot.dataStateAt} (
+                   {isValidDate(snapshot.dataStateAtDate)
+                     ? formatDistanceToNowStrict(snapshot.dataStateAtDate, {
+                         addSuffix: true,
+                       })
+                     : '-'}
+                   )
+                 </TableBodyCell>
+                 <TableBodyCell>
+                   {snapshot.createdAt} (
+                   {isValidDate(snapshot.createdAtDate)
+                     ? formatDistanceToNowStrict(snapshot.createdAtDate, {
+                         addSuffix: true,
+                       })
+                     : '-'}
+                   )
+                 </TableBodyCell>
+                 <TableBodyCell>{snapshot.pool ?? '-'}</TableBodyCell>
+                 <TableBodyCell>{snapshot.numClones ?? '-'}</TableBodyCell>
+                 <TableBodyCell>
+                   {snapshot.logicalSize
+                     ? formatBytesIEC(snapshot.logicalSize)
+                     : '-'}
+                 </TableBodyCell>
+                 <TableBodyCell>
+                   {snapshot.physicalSize
+                     ? formatBytesIEC(snapshot.physicalSize)
+                     : '-'}
+                 </TableBodyCell>
+               </TableRow>
+             )
+           })}
+         </TableBody>
+         {snapshotModal.isOpen && snapshotModal.snapshotId && (
+           <DestroySnapshotModal
+             isOpen={snapshotModal.isOpen}
+             onClose={() => setSnapshotModal({ isOpen: false, snapshotId: '' })}
+             snapshotId={snapshotModal.snapshotId}
+             afterSubmitClick={() =>
+               stores.main?.reload(stores.main.instance?.id ?? '')
+             }
+           />
+         )}
+       </Table>
+     </HorizontalScrollContainer>
+   )
+ })
+ 
\ No newline at end of file
diff --git a/ui/packages/shared/pages/Instance/Snapshots/index.tsx b/ui/packages/shared/pages/Instance/Snapshots/index.tsx
index 3b3c51cd337c978e58b7534bb05c4e0389ed9303..bdfbe72eef30be6725852df218573b15fd82458c 100644
--- a/ui/packages/shared/pages/Instance/Snapshots/index.tsx
+++ b/ui/packages/shared/pages/Instance/Snapshots/index.tsx
@@ -10,17 +10,22 @@ import { observer } from 'mobx-react-lite'
 import { makeStyles } from '@material-ui/core'
 
 import { useStores, useHost } from '@postgres.ai/shared/pages/Instance/context'
-import { SnapshotsTable } from '@postgres.ai/shared/pages/Instance/Snapshots/components/SnapshotsTable'
+import { SnapshotsList } from '@postgres.ai/shared/pages/Instance/Snapshots/components/SnapshotsList'
 import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
-import { isSameDayUTC } from '@postgres.ai/shared/utils/date'
 import { Spinner } from '@postgres.ai/shared/components/Spinner'
 import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub'
 import { Button } from '@postgres.ai/shared/components/Button2'
 import { Tooltip } from '@postgres.ai/shared/components/Tooltip'
 import { InfoIcon } from '@postgres.ai/shared/icons/Info'
+import { useEffect, useMemo, useState } from 'react'
+import { Branch } from 'types/api/endpoints/getBranches'
+import { SnapshotHeader } from './components/SnapshotHeader'
 
 const useStyles = makeStyles(
   {
+    sectionTitle: {
+      borderBottom: 0,
+    },
     marginTop: {
       marginTop: '16px',
     },
@@ -44,41 +49,56 @@ export const Snapshots = observer(() => {
   const stores = useStores()
   const classes = useStyles()
   const history = useHistory()
+  const { getBranches, instance, snapshots } = stores.main
+  const [messageFilter, setMessageFilter] = useState('')
+  const [branches, setBranches] = useState<string[] | null>(null)
+  const [selectedBranch, setSelectedBranch] = useState<string>()
+  const [isLoadingBranches, setIsLoadingBranches] = useState(true)
 
-  const { snapshots, instance } = stores.main
-
-  const filteredSnapshots =
-    snapshots?.data &&
-    snapshots.data.filter((snapshot) => {
-      const isMatchedByDate =
-        !stores.snapshotsModal.date ||
-        isSameDayUTC(snapshot.dataStateAtDate, stores.snapshotsModal.date)
-
-      const isMatchedByPool =
-        !stores.snapshotsModal.pool ||
-        snapshot.pool === stores.snapshotsModal.pool
+  const filteredSnapshots = useMemo(() => {
+    if (!snapshots.data) return []
 
-      return isMatchedByDate && isMatchedByPool
-    })
+    return snapshots.data.filter((snapshot) =>
+      snapshot.message.toLowerCase().includes(messageFilter.toLowerCase()),
+    )
+  }, [snapshots.data, messageFilter])
 
   const clonesList = instance?.state?.cloning.clones || []
   const isEmpty = !filteredSnapshots?.length
   const hasClones = Boolean(clonesList?.length)
   const goToSnapshotAddPage = () => history.push(host.routes.createSnapshot())
 
+  useEffect(() => {
+    const fetchInitialData = async () => {
+      try {
+        setIsLoadingBranches(true)
+        const branches = await getBranches()
+        const branchNames = branches?.map(({ name }: Branch) => name) ?? []
+        setBranches(branchNames)
+      } catch (error) {
+        console.error('Error fetching initial data:', error)
+      } finally {
+        setIsLoadingBranches(false)
+        setSelectedBranch('main')
+      }
+    }
+
+    fetchInitialData()
+  }, [])
+
+  useEffect(() => {
+    if (selectedBranch) {
+      stores.main.reloadSnapshots(selectedBranch)
+    }
+  }, [selectedBranch])
+
   if (!instance && !snapshots.isLoading) return <></>
 
-  if (snapshots?.error)
-    return (
-      <ErrorStub
-        title={snapshots?.error?.title}
-        message={snapshots?.error?.message}
-      />
-    )
+  if (snapshots?.error) return <ErrorStub message={snapshots?.error} />
 
   return (
     <div className={classes.marginTop}>
-      {snapshots.isLoading ? (
+      {snapshots.isLoading || isLoadingBranches ? (
         <Spinner size="lg" className={classes.spinner} />
       ) : (
         <>
@@ -86,6 +106,7 @@ export const Snapshots = observer(() => {
             level={2}
             tag="h2"
             text={`Snapshots (${filteredSnapshots?.length || 0})`}
+            className={classes.sectionTitle}
             rightContent={
               <>
                 <Button
@@ -106,11 +127,24 @@ export const Snapshots = observer(() => {
               </>
             }
           />
+          <SnapshotHeader
+            branches={branches}
+            selectedBranch={selectedBranch || 'main'}
+            setMessageFilter={setMessageFilter}
+            setSelectedBranch={setSelectedBranch}
+          />
           {!isEmpty ? (
-            <SnapshotsTable />
+            <SnapshotsList filteredSnapshots={filteredSnapshots} />
           ) : (
             <p className={classes.marginTop}>
-              This instance has no active snapshots
+              {messageFilter.length ? (
+                <span>
+                  No active snapshots found. Try removing the filter and
+                  checking again
+                </span>
+              ) : (
+                <span> This instance has no active snapshots</span>
+              )}
             </p>
           )}
         </>
diff --git a/ui/packages/shared/pages/Instance/Snapshots/utils/index.ts b/ui/packages/shared/pages/Instance/Snapshots/utils/index.ts
index b0ccd8b9dd1d9274a56d02854f1c7dbf2cdeebd9..df297c4a91bbe77171fe57bd58dd2f0e483af729 100644
--- a/ui/packages/shared/pages/Instance/Snapshots/utils/index.ts
+++ b/ui/packages/shared/pages/Instance/Snapshots/utils/index.ts
@@ -1,8 +1,39 @@
+import { Snapshot } from 'types/api/entities/snapshot'
+import { isSameDayUTC } from '@postgres.ai/shared/utils/date'
+
 export const generateSnapshotPageId = (id: string) => {
-  const splitSnapshotId = id?.split(`@`)[1]
-  const snapshotPageId = splitSnapshotId?.includes('snapshot_')
-    ? splitSnapshotId?.split('snapshot_')[1]
-    : splitSnapshotId
+  if (!id.includes('@')) return null
+
+  const snapshotIdPart = id.split('@')[1]
+  return snapshotIdPart.startsWith('snapshot_')
+    ? snapshotIdPart.substring(9)
+    : snapshotIdPart
+}
+
+export const groupSnapshotsByCreatedAtDate = (snapshots: Snapshot[]) => {
+  const groups: Snapshot[][] = []
+
+  snapshots.forEach((snapshot) => {
+    let grouped = false
+
+    for (const group of groups) {
+      const groupDate = new Date(group[0].createdAtDate)
+
+      if (isSameDayUTC(snapshot.createdAtDate, groupDate)) {
+        group.push(snapshot)
+        grouped = true
+        break
+      }
+    }
+
+    if (!grouped) {
+      groups.push([snapshot])
+    }
+  })
+
+  groups.sort((a, b) => {
+    return b[0].createdAtDate.getTime() - a[0].createdAtDate.getTime()
+  })
 
-  return snapshotPageId
+  return groups
 }
diff --git a/ui/packages/shared/pages/Instance/stores/Main.ts b/ui/packages/shared/pages/Instance/stores/Main.ts
index d7c61f29b321c7396720db3a0d081d445788bfde..a01024cdff6d15126b96e2d2120c39b079d4c388 100644
--- a/ui/packages/shared/pages/Instance/stores/Main.ts
+++ b/ui/packages/shared/pages/Instance/stores/Main.ts
@@ -136,9 +136,9 @@ export class MainStore {
     })
   }
 
-  reloadSnapshots = async () => {
+  reloadSnapshots = async (branchName?: string) => {
     if (!this.instance) return
-    await this.snapshots.reload(this.instance.id)
+    await this.snapshots.reload(this.instance.id, branchName)
   }
 
   reloadInstanceRetrieval = async () => {
diff --git a/ui/packages/shared/pages/Snapshots/Snapshot/DestorySnapshotModal/index.tsx b/ui/packages/shared/pages/Snapshots/Snapshot/DestorySnapshotModal/index.tsx
index a9ab15e1d5a862db8fec30bf84c10140905f96df..fe8d4d136f8f0aabfe8e2c18233f9b46e7df10ae 100644
--- a/ui/packages/shared/pages/Snapshots/Snapshot/DestorySnapshotModal/index.tsx
+++ b/ui/packages/shared/pages/Snapshots/Snapshot/DestorySnapshotModal/index.tsx
@@ -6,7 +6,12 @@
  */
 
 import { useState } from 'react'
-import { makeStyles } from '@material-ui/core'
+import {
+  Checkbox,
+  FormControlLabel,
+  Typography,
+  makeStyles,
+} from '@material-ui/core'
 
 import { Modal } from '@postgres.ai/shared/components/Modal'
 import { ImportantText } from '@postgres.ai/shared/components/ImportantText'
@@ -27,6 +32,18 @@ const useStyles = makeStyles(
     errorMessage: {
       color: 'red',
       marginTop: '10px',
+      wordBreak: 'break-all',
+    },
+    checkboxRoot: {
+      padding: '9px 10px',
+    },
+    grayText: {
+      color: '#8a8a8a',
+      fontSize: '12px',
+      wordBreak: 'break-word',
+    },
+    marginTop: {
+      marginTop: '6px',
     },
   },
   { index: 1 },
@@ -42,7 +59,10 @@ export const DestroySnapshotModal = ({
   const props = { api: { destroySnapshot: destroySnapshotAPI } }
   const stores = useCreatedStores(props.api)
   const { destroySnapshot } = stores.main
+  const [forceDelete, setForceDelete] = useState(false)
   const [deleteError, setDeleteError] = useState(null)
+  const [isForceDeleteOptionVisible, setForceDeleteOptionVisible] =
+    useState(false)
 
   const handleClose = () => {
     setDeleteError(null)
@@ -50,9 +70,10 @@ export const DestroySnapshotModal = ({
   }
 
   const handleClickDestroy = () => {
-    destroySnapshot(snapshotId).then((res) => {
+    destroySnapshot(snapshotId, forceDelete).then((res) => {
       if (res?.error?.message) {
         setDeleteError(res.error.message)
+        setForceDeleteOptionVisible(true)
       } else {
         afterSubmitClick()
         handleClose()
@@ -61,13 +82,33 @@ export const DestroySnapshotModal = ({
   }
 
   return (
-    <Modal title={'Confirmation'} onClose={handleClose} isOpen={isOpen}>
+    <Modal title={'Confirmation'} onClose={handleClose} isOpen={isOpen} size='sm'>
       <Text>
         Are you sure you want to destroy snapshot{' '}
         <ImportantText>{snapshotId}</ImportantText>? This action cannot be
         undone.
       </Text>
       {deleteError && <p className={classes.errorMessage}>{deleteError}</p>}
+      {isForceDeleteOptionVisible && (
+        <div className={classes.marginTop}>
+          <FormControlLabel
+            control={
+              <Checkbox
+                name="debug"
+                checked={forceDelete}
+                onChange={(e) => setForceDelete(e.target.checked)}
+                classes={{
+                  root: classes.checkboxRoot,
+                }}
+              />
+            }
+            label={'Force delete'}
+          />
+          <Typography className={classes.grayText}>
+          If the snapshot cannot be deleted due to dependencies, enabling “Force delete” will remove it along with all dependent snapshots and clones.
+          </Typography>
+        </div>
+      )}
       <SimpleModalControls
         items={[
           {
diff --git a/ui/packages/shared/pages/Snapshots/Snapshot/stores/Main.ts b/ui/packages/shared/pages/Snapshots/Snapshot/stores/Main.ts
index 9b918524953ef07871f2ebf8e6ec25974a464f27..e4936abe81e575999156b5caa28112a0ebcdcc52 100644
--- a/ui/packages/shared/pages/Snapshots/Snapshot/stores/Main.ts
+++ b/ui/packages/shared/pages/Snapshots/Snapshot/stores/Main.ts
@@ -94,12 +94,15 @@ export class MainStore {
     return response
   }
 
-  destroySnapshot = async (snapshotId: string) => {
+  destroySnapshot = async (snapshotId: string, forceDelete: boolean) => {
     if (!this.api.destroySnapshot || !snapshotId) return
 
-    const { response, error } = await this.api.destroySnapshot(snapshotId)
+    const { response, error } = await this.api.destroySnapshot(
+      snapshotId,
+      forceDelete,
+    )
 
-    return  {
+    return {
       response,
       error: error ? await error.json().then((err) => err) : null,
     }
diff --git a/ui/packages/shared/stores/Snapshots.ts b/ui/packages/shared/stores/Snapshots.ts
index bb0e4fe3bf7b80414fbf37796eb881669abfaa0e..1339af3cf7ff6bc605a013811f93f0a13187872e 100644
--- a/ui/packages/shared/stores/Snapshots.ts
+++ b/ui/packages/shared/stores/Snapshots.ts
@@ -40,7 +40,7 @@ export class SnapshotsStore {
     return this.loadData(instanceId)
   }
 
-  reload = (instanceId: string) => this.loadData(instanceId)
+  reload = (instanceId: string, branchName?: string) => this.loadData(instanceId, branchName)
 
   createSnapshot = async (cloneId: string) => {
     if (!this.api.createSnapshot || !cloneId) return
@@ -63,12 +63,12 @@ export class SnapshotsStore {
     return response
   }
 
-  private loadData = async (instanceId: string) => {
+  private loadData = async (instanceId: string, branchName?: string) => {
     if (!this.api.getSnapshots) return
 
     this.isLoading = true
 
-    const { response, error } = await this.api.getSnapshots({ instanceId })
+    const { response, error } = await this.api.getSnapshots({ instanceId, branchName })
 
     this.isLoading = false
 
diff --git a/ui/packages/shared/types/api/endpoints/destroySnapshot.ts b/ui/packages/shared/types/api/endpoints/destroySnapshot.ts
index 0d0f96e11a7a917261b23f5dcff9301c696c7c9e..911c70ff980cbe221f6ec9d78f9ac110ecbffa4e 100644
--- a/ui/packages/shared/types/api/endpoints/destroySnapshot.ts
+++ b/ui/packages/shared/types/api/endpoints/destroySnapshot.ts
@@ -1,4 +1,7 @@
-export type DestroySnapshot = (snapshotId: string) => Promise<{
+export type DestroySnapshot = (
+  snapshotId: string,
+  forceDelete: boolean,
+) => Promise<{
   response: boolean | null
   error: Response | null
 }>
diff --git a/ui/packages/shared/types/api/endpoints/getSnapshotList.ts b/ui/packages/shared/types/api/endpoints/getSnapshotList.ts
index b5716ff07e565c3c66492d85302c88b96e6120a9..a13a33614c4a2f8d40fb8823908ab269d7f1a7e0 100644
--- a/ui/packages/shared/types/api/endpoints/getSnapshotList.ts
+++ b/ui/packages/shared/types/api/endpoints/getSnapshotList.ts
@@ -2,7 +2,7 @@ export interface SnapshotList {
   branch: string[]
   id: string
   dataStateAt: string
-  comment?: string
+  message: string
 }
 
 export type GetSnapshotList = (branchName: string) => Promise<{
diff --git a/ui/packages/shared/types/api/endpoints/getSnapshots.ts b/ui/packages/shared/types/api/endpoints/getSnapshots.ts
index 4d739d56f6339096e1dfc594756abea9112acb7e..3dbd29300c2fa3f68c3d60a50c9e1d5b0bf93259 100644
--- a/ui/packages/shared/types/api/endpoints/getSnapshots.ts
+++ b/ui/packages/shared/types/api/endpoints/getSnapshots.ts
@@ -1,6 +1,6 @@
 import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot'
 
-export type GetSnapshots = (args: { instanceId: string }) => Promise<{
+export type GetSnapshots = (args: { instanceId: string, branchName?: string }) => Promise<{
   response: Snapshot[] | null
   error: Response | null
 }>
diff --git a/ui/packages/shared/types/api/entities/snapshot.ts b/ui/packages/shared/types/api/entities/snapshot.ts
index 46768165bd4a6726f12a9261a5b0f0bdf4e6707e..af3f285acb40a0e6bf71a732d87b6d760cac0c47 100644
--- a/ui/packages/shared/types/api/entities/snapshot.ts
+++ b/ui/packages/shared/types/api/entities/snapshot.ts
@@ -8,8 +8,8 @@ export type SnapshotDto = {
   pool: string
   physicalSize: number
   logicalSize: number
-  comment?: string
-  message?: string
+  message: string
+  branch: string
 }
 
 export const formatSnapshotDto = (dto: SnapshotDto) => ({
diff --git a/ui/packages/shared/utils/snapshot.ts b/ui/packages/shared/utils/snapshot.ts
index 255e76bab0a76e44cfd3258aa05114acfd93fea8..4410f2d4a7bac14d96c370faf639a08bfeca2d9a 100644
--- a/ui/packages/shared/utils/snapshot.ts
+++ b/ui/packages/shared/utils/snapshot.ts
@@ -2,7 +2,7 @@ export const compareSnapshotsDesc = (
   a: { dataStateAtDate: Date },
   b: { dataStateAtDate: Date },
 ): number => {
-  const { dataStateAtDate: dateA } = a
-  const { dataStateAtDate: dateB } = b
-  return dateB.getTime() - dateA.getTime()
+  const dataStateAtDateA = a.dataStateAtDate?.getTime() ?? 0
+  const dataStateAtDateB = b.dataStateAtDate?.getTime() ?? 0
+  return dataStateAtDateB - dataStateAtDateA
 }