diff --git a/apps/judicial-system/web/src/components/AccordionItems/IndictmentsCaseFilesAccordionItem/IndictmentsCaseFilesAccordionItem.tsx b/apps/judicial-system/web/src/components/AccordionItems/IndictmentsCaseFilesAccordionItem/IndictmentsCaseFilesAccordionItem.tsx
index 7616581dfdf7..bb109cf43db0 100644
--- a/apps/judicial-system/web/src/components/AccordionItems/IndictmentsCaseFilesAccordionItem/IndictmentsCaseFilesAccordionItem.tsx
+++ b/apps/judicial-system/web/src/components/AccordionItems/IndictmentsCaseFilesAccordionItem/IndictmentsCaseFilesAccordionItem.tsx
@@ -274,7 +274,7 @@ const CaseFile: FC<CaseFileProps> = (props) => {
             <Icon icon="menu" color="blue400" />
           </Box>
           <Box width="full">
-            <AnimatePresence initial={false} exitBeforeEnter>
+            <AnimatePresence initial={false} mode="wait">
               {isEditing ? (
                 <motion.div
                   initial={{ y: 10, opacity: 0 }}
diff --git a/apps/judicial-system/web/src/components/Table/PastCasesTable/PastCasesTable.tsx b/apps/judicial-system/web/src/components/Table/PastCasesTable/PastCasesTable.tsx
index e71b22747ffa..0d09eba068e3 100644
--- a/apps/judicial-system/web/src/components/Table/PastCasesTable/PastCasesTable.tsx
+++ b/apps/judicial-system/web/src/components/Table/PastCasesTable/PastCasesTable.tsx
@@ -145,7 +145,7 @@ const PastCasesTable: FC<Props> = ({ cases, loading = false, testid }) => {
                   appealCaseNumber={column.appealCaseNumber}
                 />
               </td>
-              <td className={cn(styles.td, styles.largeColumn)}>
+              <td className={styles.largeColumn}>
                 <DefendantInfo defendants={column.defendants} />
               </td>
               <td>
diff --git a/apps/judicial-system/web/src/components/Table/Table.css.ts b/apps/judicial-system/web/src/components/Table/Table.css.ts
index df3f49d234ab..f3d806282e21 100644
--- a/apps/judicial-system/web/src/components/Table/Table.css.ts
+++ b/apps/judicial-system/web/src/components/Table/Table.css.ts
@@ -2,14 +2,9 @@ import { globalStyle, style } from '@vanilla-extract/css'
 
 import { theme } from '@island.is/island-ui/theme'
 
-export const header = style({
-  background: theme.color.blue100,
-})
-
 export const table = style({
   borderSpacing: 0,
   borderCollapse: 'collapse',
-  overflow: 'hidden',
 
   // Needed for Safari.
   width: '100%',
@@ -46,30 +41,14 @@ export const largeColumn = style({
     },
   },
 })
-export const blockColumn = style({
-  display: 'block',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-})
 
-export const deleteButtonContainer = style({
-  maxWidth: '0',
-  height: '100%',
-  padding: 0,
-  transform: 'translate3d(2px, 0px, 0px)',
-})
-
-export const td = style({
-  selectors: {
-    [`&:not(${deleteButtonContainer})`]: {
-      padding: `${theme.spacing[2]}px ${theme.spacing[3]}px`,
-    },
-    '&.secondLast': {
-      marginLeft: 'auto',
-      height: '100%',
-      padding: 0,
-    },
-  },
+export const smallContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '34px',
+  height: '34px',
+  marginLeft: 'auto',
 })
 
 globalStyle(`${table} td, th`, {
@@ -83,11 +62,6 @@ globalStyle(`${table} td, th`, {
   textAlign: 'left',
 })
 
-export const expandLabel = style({
-  color: theme.color.blue400,
-  cursor: 'pointer',
-})
-
 export const row = style({
   cursor: 'pointer',
 })
diff --git a/apps/judicial-system/web/src/components/Table/Table.tsx b/apps/judicial-system/web/src/components/Table/Table.tsx
index 51abbc83881f..eefb4522490c 100644
--- a/apps/judicial-system/web/src/components/Table/Table.tsx
+++ b/apps/judicial-system/web/src/components/Table/Table.tsx
@@ -8,7 +8,7 @@ import React, {
 import { useIntl } from 'react-intl'
 import { useLocalStorage } from 'react-use'
 import parseISO from 'date-fns/parseISO'
-import { AnimatePresence } from 'framer-motion'
+import { AnimatePresence, motion } from 'framer-motion'
 
 import { Box, Text } from '@island.is/island-ui/core'
 import { theme } from '@island.is/island-ui/theme'
@@ -126,7 +126,7 @@ const Table: FC<TableProps> = (props) => {
     }
   }, [data, sortConfig])
 
-  return width < theme.breakpoints.md ? (
+  return width < theme.breakpoints.lg ? (
     <>
       {data.map((theCase: CaseListEntry) => (
         <Box marginTop={2} key={theCase.id}>
@@ -205,30 +205,46 @@ const Table: FC<TableProps> = (props) => {
             data-testid="tableRow"
           >
             {columns.map((td) => (
-              <td key={`${td}-${columns.indexOf(td)}`} className={styles.td}>
-                {td.cell(row)}
-              </td>
+              <td key={`${td}-${columns.indexOf(td)}`}>{td.cell(row)}</td>
             ))}
             {generateContextMenuItems && (
-              <td className={styles.td}>
+              <td width="4%">
                 {generateContextMenuItems(row).length > 0 && (
-                  <AnimatePresence exitBeforeEnter initial={false}>
+                  <AnimatePresence initial={false} mode="popLayout">
                     {isOpeningCaseId === row.id && showLoading ? (
-                      <Box padding={1}>
+                      <motion.div
+                        className={styles.smallContainer}
+                        key={row.id}
+                        initial={{ opacity: 0, y: 5 }}
+                        animate={{ opacity: 1, y: 1 }}
+                        exit={{
+                          opacity: 0,
+                          y: 5,
+                        }}
+                        transition={{ type: 'spring' }}
+                      >
                         <LoadingIndicator />
-                      </Box>
+                      </motion.div>
                     ) : (
                       <ContextMenu
                         menuLabel={`Valmynd fyrir mál ${row.courtCaseNumber}`}
                         items={generateContextMenuItems(row)}
                         disclosure={
-                          <IconButton
-                            icon="ellipsisVertical"
-                            colorScheme="transparent"
+                          <motion.div
+                            className={styles.smallContainer}
+                            key={row.id}
+                            initial={{ opacity: 1 }}
+                            animate={{ opacity: 1, y: 1 }}
+                            exit={{ opacity: 0, y: 5 }}
                             onClick={(evt) => {
                               evt.stopPropagation()
                             }}
-                          />
+                          >
+                            <IconButton
+                              icon="ellipsisVertical"
+                              colorScheme="transparent"
+                            />
+                          </motion.div>
                         }
                       />
                     )}
diff --git a/apps/judicial-system/web/src/components/Table/TableSkeleton/TableSkeleton.tsx b/apps/judicial-system/web/src/components/Table/TableSkeleton/TableSkeleton.tsx
index 7b99b7e0f664..4c850a5c28da 100644
--- a/apps/judicial-system/web/src/components/Table/TableSkeleton/TableSkeleton.tsx
+++ b/apps/judicial-system/web/src/components/Table/TableSkeleton/TableSkeleton.tsx
@@ -52,122 +52,122 @@ const TableSkeleton = () => {
       </thead>
       <tbody>
         <tr className={styles.tableRowContainer}>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
         </tr>
         <tr className={styles.tableRowContainer}>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
         </tr>
         <tr className={styles.tableRowContainer}>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
         </tr>
         <tr className={styles.tableRowContainer}>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
         </tr>
         <tr className={styles.tableRowContainer}>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
         </tr>
         <tr className={styles.tableRowContainer}>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
         </tr>
diff --git a/apps/judicial-system/web/src/routes/Shared/Cases/ActiveCases.strings.ts b/apps/judicial-system/web/src/routes/Shared/Cases/ActiveCases.strings.ts
deleted file mode 100644
index d3e123d46de1..000000000000
--- a/apps/judicial-system/web/src/routes/Shared/Cases/ActiveCases.strings.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { defineMessages } from 'react-intl'
-
-export const strings = defineMessages({
-  postponed: {
-    id: 'judicial.system.core:active_cases.postponed',
-    defaultMessage: 'Frestað',
-    description:
-      'Notaður í stað dagsetningar í töflum fyrir mál sem hefur verið frestað.',
-  },
-})
diff --git a/apps/judicial-system/web/src/routes/Shared/Cases/ActiveCases.tsx b/apps/judicial-system/web/src/routes/Shared/Cases/ActiveCases.tsx
index 81929ed240ef..b221b12e12d5 100644
--- a/apps/judicial-system/web/src/routes/Shared/Cases/ActiveCases.tsx
+++ b/apps/judicial-system/web/src/routes/Shared/Cases/ActiveCases.tsx
@@ -1,427 +1,111 @@
-import React, { FC, useEffect, useMemo, useState } from 'react'
+import React, { FC } from 'react'
 import { useIntl } from 'react-intl'
-import { useLocalStorage } from 'react-use'
-import format from 'date-fns/format'
-import localeIS from 'date-fns/locale/is'
-import parseISO from 'date-fns/parseISO'
-import { AnimatePresence, LayoutGroup, motion } from 'framer-motion'
 
-import { Box, IconMapIcon, Text } from '@island.is/island-ui/core'
-import { theme } from '@island.is/island-ui/theme'
-import {
-  capitalize,
-  displayFirstPlusRemaining,
-  formatDOB,
-} from '@island.is/judicial-system/formatters'
-import { isRequestCase } from '@island.is/judicial-system/types'
+import { capitalize } from '@island.is/judicial-system/formatters'
 import { core, tables } from '@island.is/judicial-system-web/messages'
-import {
-  ContextMenu,
-  Modal,
-  TagAppealState,
-  TagCaseState,
-} from '@island.is/judicial-system-web/src/components'
-import { contextMenu as contextMenuStrings } from '@island.is/judicial-system-web/src/components/ContextMenu/ContextMenu.strings'
-import IconButton from '@island.is/judicial-system-web/src/components/IconButton/IconButton'
+import { TagCaseState } from '@island.is/judicial-system-web/src/components'
+import { useContextMenu } from '@island.is/judicial-system-web/src/components/ContextMenu/ContextMenu'
+import { contextMenu } from '@island.is/judicial-system-web/src/components/ContextMenu/ContextMenu.strings'
 import {
   ColumnCaseType,
+  CourtCaseNumber,
   CourtDate,
-  SortButton,
+  CreatedDate,
+  DefendantInfo,
 } from '@island.is/judicial-system-web/src/components/Table'
-import { table as tableStrings } from '@island.is/judicial-system-web/src/components/Table/Table.strings'
-import {
-  CaseListEntry,
-  CaseState,
-} from '@island.is/judicial-system-web/src/graphql/schema'
-import {
-  directionType,
-  sortableTableColumn,
-  SortConfig,
-} from '@island.is/judicial-system-web/src/types'
-import {
-  useCaseList,
-  useViewport,
-} from '@island.is/judicial-system-web/src/utils/hooks'
-import { compareLocaleIS } from '@island.is/judicial-system-web/src/utils/sortHelper'
-
-import MobileCase from './MobileCase'
-import { strings } from './ActiveCases.strings'
-import { cases as m } from './Cases.strings'
-import * as styles from './Cases.css'
+import Table from '@island.is/judicial-system-web/src/components/Table/Table'
+import { CaseListEntry } from '@island.is/judicial-system-web/src/graphql/schema'
 
 interface Props {
   cases: CaseListEntry[]
-  isDeletingCase: boolean
-  onDeleteCase?: (caseToDelete: CaseListEntry) => Promise<void>
+  onContextMenuDeleteClick: (id: string) => void
 }
 
-const ActiveCases: FC<Props> = ({ cases, isDeletingCase, onDeleteCase }) => {
+const ActiveCases: FC<Props> = (props) => {
+  const { cases, onContextMenuDeleteClick } = props
   const { formatMessage } = useIntl()
-  const { width } = useViewport()
-  const [sortConfig, setSortConfig] = useLocalStorage<SortConfig>(
-    'sortConfig',
-    {
-      column: 'courtDate',
-      direction: 'descending',
-    },
-  )
-  const { isOpeningCaseId, showLoading, handleOpenCase, LoadingIndicator } =
-    useCaseList()
-  const [displayCases, setDisplayCases] = useState<CaseListEntry[]>([])
-  const [modalVisible, setVisibleModal] = useState<'DELETE_CASE'>()
-  // The id of the case that's about to be removed
-  const [caseToRemove, setCaseToRemove] = useState<CaseListEntry>()
-
-  useEffect(() => {
-    setDisplayCases(cases)
-  }, [cases])
-
-  useMemo(() => {
-    if (cases && sortConfig) {
-      cases.sort((a: CaseListEntry, b: CaseListEntry) => {
-        const getColumnValue = (entry: CaseListEntry) => {
-          if (
-            sortConfig.column === 'defendants' &&
-            entry.defendants &&
-            entry.defendants.length > 0
-          ) {
-            return entry.defendants[0].name ?? ''
-          }
-          if (sortConfig.column === 'courtDate') {
-            return entry.postponedIndefinitelyExplanation
-              ? ''
-              : entry.courtDate ?? ''
-          }
-          return entry.created
-        }
-        const compareResult = compareLocaleIS(
-          getColumnValue(a),
-          getColumnValue(b),
-        )
-
-        return sortConfig.direction === 'ascending'
-          ? compareResult
-          : -compareResult
-      })
-    }
-  }, [cases, sortConfig])
-
-  const requestSort = (column: sortableTableColumn) => {
-    let d: directionType = 'ascending'
-
-    if (
-      sortConfig &&
-      sortConfig.column === column &&
-      sortConfig.direction === 'ascending'
-    ) {
-      d = 'descending'
-    }
-    setSortConfig({ column, direction: d })
-  }
-
-  const getClassNamesFor = (name: sortableTableColumn) => {
-    if (!sortConfig) {
-      return
-    }
-    return sortConfig.column === name ? sortConfig.direction : undefined
-  }
+  const { openCaseInNewTabMenuItem } = useContextMenu()
 
-  return width < theme.breakpoints.md ? (
-    <>
-      {displayCases.map((theCase: CaseListEntry) => (
-        <Box marginTop={2} key={theCase.id}>
-          <MobileCase
-            onClick={() => {
-              handleOpenCase(theCase.id)
-            }}
-            theCase={theCase}
-            isCourtRole={false}
-            isLoading={isOpeningCaseId === theCase.id && showLoading}
-          >
-            {theCase.state &&
-              theCase.state === CaseState.WAITING_FOR_CONFIRMATION && (
-                <Text fontWeight={'medium'} variant="small">
-                  {`${formatMessage(
-                    m.activeRequests.table.headers.prosecutor,
-                  )}: ${theCase.prosecutor?.name}`}
-                </Text>
-              )}
-            {theCase.postponedIndefinitelyExplanation ? (
-              <Text>{formatMessage(strings.postponed)}</Text>
-            ) : (
-              theCase.courtDate && (
-                <Text fontWeight={'medium'} variant="small">
-                  {`${formatMessage(tableStrings.hearing)} ${format(
-                    parseISO(theCase.courtDate),
-                    'd.M.y',
-                  )} kl. ${format(parseISO(theCase.courtDate), 'kk:mm')}`}
-                </Text>
-              )
-            )}
-          </MobileCase>
-        </Box>
-      ))}
-    </>
-  ) : (
-    <>
-      <table className={styles.table} data-testid="activeCasesTable">
-        <thead className={styles.thead}>
-          <tr>
-            <th className={styles.th}>
-              <Text as="span" fontWeight="regular">
-                {formatMessage(tables.caseNumber)}
-              </Text>
-            </th>
-            <th className={styles.th}>
-              <SortButton
-                title={capitalize(
-                  formatMessage(core.defendant, { suffix: 'i' }),
-                )}
-                onClick={() => requestSort('defendants')}
-                sortAsc={getClassNamesFor('defendants') === 'ascending'}
-                sortDes={getClassNamesFor('defendants') === 'descending'}
-                isActive={sortConfig?.column === 'defendants'}
-                dataTestid="accusedNameSortButton"
-              />
-            </th>
-            <th className={styles.th}>
-              <Text as="span" fontWeight="regular">
-                {formatMessage(m.activeRequests.table.headers.type)}
-              </Text>
-            </th>
-            <th className={styles.th}>
-              <SortButton
-                title={capitalize(
-                  formatMessage(tables.created, { suffix: 'i' }),
-                )}
-                onClick={() => requestSort('created')}
-                sortAsc={getClassNamesFor('created') === 'ascending'}
-                sortDes={getClassNamesFor('created') === 'descending'}
-                isActive={sortConfig?.column === 'created'}
-                dataTestid="createdAtSortButton"
-              />
-            </th>
-            <th className={styles.th}>
-              <Text as="span" fontWeight="regular">
-                {formatMessage(tables.state)}
-              </Text>
-            </th>
-            <th className={styles.th}>
-              <SortButton
-                title={capitalize(formatMessage(tableStrings.hearing))}
-                onClick={() => requestSort('courtDate')}
-                sortAsc={getClassNamesFor('courtDate') === 'ascending'}
-                sortDes={getClassNamesFor('courtDate') === 'descending'}
-                isActive={sortConfig?.column === 'courtDate'}
-              />
-            </th>
-            <th className={styles.th}></th>
-          </tr>
-        </thead>
-        <LayoutGroup>
-          <tbody>
-            <AnimatePresence>
-              {cases.map((c) => (
-                <motion.tr
-                  key={c.id}
-                  className={styles.tableRowContainer}
-                  layout
-                  data-testid="custody-cases-table-row"
-                  role="button"
-                  aria-label="Opna kröfu"
-                  aria-disabled={isDeletingCase || isOpeningCaseId === c.id}
-                  onClick={() => {
-                    handleOpenCase(c.id)
-                  }}
-                >
-                  <td className={styles.td}>
-                    {c.appealCaseNumber ? (
-                      <Box display="flex" flexDirection="column">
-                        <Text as="span" variant="small">
-                          {c.appealCaseNumber}
-                        </Text>
-                        <Text as="span" variant="small">
-                          {c.courtCaseNumber}
-                        </Text>
-                        <Text as="span" variant="small">
-                          {displayFirstPlusRemaining(c.policeCaseNumbers)}
-                        </Text>
-                      </Box>
-                    ) : c.courtCaseNumber ? (
-                      <>
-                        <Box component="span" className={styles.blockColumn}>
-                          <Text as="span">{c.courtCaseNumber}</Text>
-                        </Box>
-                        <Text
-                          as="span"
-                          variant="small"
-                          color="dark400"
-                          title={c.policeCaseNumbers?.join(', ')}
-                        >
-                          {displayFirstPlusRemaining(c.policeCaseNumbers)}
-                        </Text>
-                      </>
-                    ) : (
-                      <Text as="span" title={c.policeCaseNumbers?.join(', ')}>
-                        {displayFirstPlusRemaining(c.policeCaseNumbers) || '-'}
-                      </Text>
-                    )}
-                  </td>
-                  <td className={styles.td}>
-                    {c.defendants && c.defendants.length > 0 ? (
-                      <>
-                        <Text>
-                          <Box component="span" className={styles.blockColumn}>
-                            {c.defendants[0].name ?? '-'}
-                          </Box>
-                        </Text>
-                        {c.defendants.length === 1 ? (
-                          (!c.defendants[0].noNationalId ||
-                            c.defendants[0].nationalId) && (
-                            <Text>
-                              <Text as="span" variant="small" color="dark400">
-                                {formatDOB(
-                                  c.defendants[0].nationalId,
-                                  c.defendants[0].noNationalId,
-                                )}
-                              </Text>
-                            </Text>
-                          )
-                        ) : (
-                          <Text as="span" variant="small" color="dark400">
-                            {`+ ${c.defendants.length - 1}`}
-                          </Text>
-                        )}
-                      </>
-                    ) : (
-                      <Text>-</Text>
-                    )}
-                  </td>
-                  <td className={styles.td}>
-                    <ColumnCaseType
-                      type={c.type}
-                      decision={c?.decision}
-                      parentCaseId={c.parentCaseId}
-                    />
-                  </td>
-                  <td className={styles.td}>
-                    <Text as="span">
-                      {format(parseISO(c.created ?? ''), 'd.M.y', {
-                        locale: localeIS,
-                      })}
-                    </Text>
-                  </td>
-                  <td className={styles.td} data-testid="tdTag">
-                    <Box
-                      marginRight={c.appealState ? 1 : 0}
-                      marginBottom={c.appealState ? 1 : 0}
-                    >
-                      <TagCaseState
-                        caseState={c.state}
-                        caseType={c.type}
-                        isValidToDateInThePast={c.isValidToDateInThePast}
-                        courtDate={c.courtDate}
-                        indictmentDecision={c.indictmentDecision}
-                        indictmentRulingDecision={c.indictmentRulingDecision}
-                      />
-                    </Box>
-                    {c.appealState && (
-                      <TagAppealState
-                        appealState={c.appealState}
-                        appealRulingDecision={c.appealRulingDecision}
-                      />
-                    )}
-                  </td>
-                  <td className={styles.td}>
-                    <CourtDate
-                      courtDate={c.courtDate}
-                      postponedIndefinitelyExplanation={
-                        c.postponedIndefinitelyExplanation
-                      }
-                      courtSessionType={c.courtSessionType}
-                    />
-                  </td>
-                  <td className={styles.td}>
-                    <AnimatePresence exitBeforeEnter initial={false}>
-                      {isOpeningCaseId === c.id && showLoading ? (
-                        <div className={styles.deleteButtonWrapper}>
-                          <LoadingIndicator />
-                        </div>
-                      ) : (
-                        <ContextMenu
-                          menuLabel={`Valmynd fyrir mál ${c.courtCaseNumber}`}
-                          items={[
-                            {
-                              title: formatMessage(
-                                contextMenuStrings.openInNewTab,
-                              ),
-                              onClick: () => handleOpenCase(c.id, true),
-                              icon: 'open',
-                            },
-                            ...(isRequestCase(c.type) ||
-                            c.state === CaseState.DRAFT ||
-                            c.state === CaseState.WAITING_FOR_CONFIRMATION
-                              ? [
-                                  {
-                                    title: formatMessage(
-                                      contextMenuStrings.deleteCase,
-                                    ),
-                                    onClick: () => {
-                                      setCaseToRemove(c)
-                                      setVisibleModal('DELETE_CASE')
-                                    },
-                                    icon: 'trash' as IconMapIcon,
-                                  },
-                                ]
-                              : []),
-                          ]}
-                          disclosure={
-                            <IconButton
-                              icon="ellipsisVertical"
-                              colorScheme="transparent"
-                              onClick={(evt) => {
-                                evt.stopPropagation()
-                              }}
-                            />
-                          }
-                        />
-                      )}
-                    </AnimatePresence>
-                  </td>
-                </motion.tr>
-              ))}
-            </AnimatePresence>
-          </tbody>
-        </LayoutGroup>
-      </table>
-      {modalVisible === 'DELETE_CASE' && (
-        <Modal
-          title={formatMessage(m.activeRequests.deleteCaseModal.title)}
-          text={formatMessage(m.activeRequests.deleteCaseModal.text)}
-          onPrimaryButtonClick={async () => {
-            if (onDeleteCase && caseToRemove) {
-              await onDeleteCase(caseToRemove)
-              setDisplayCases((prev) =>
-                prev.filter((c) => c.id !== caseToRemove.id),
-              )
-              setCaseToRemove(undefined)
-              setVisibleModal(undefined)
-            }
-          }}
-          onSecondaryButtonClick={() => {
-            setVisibleModal(undefined)
-          }}
-          primaryButtonText={formatMessage(
-            m.activeRequests.deleteCaseModal.primaryButtonText,
-          )}
-          primaryButtonColorScheme="destructive"
-          secondaryButtonText={formatMessage(
-            m.activeRequests.deleteCaseModal.secondaryButtonText,
-          )}
-          isPrimaryButtonLoading={isDeletingCase}
-        />
-      )}
-    </>
+  return (
+    <Table
+      thead={[
+        {
+          title: formatMessage(tables.caseNumber),
+        },
+        {
+          title: capitalize(formatMessage(core.defendant, { suffix: 'i' })),
+          sortable: { isSortable: true, key: 'defendants' },
+        },
+        {
+          title: formatMessage(tables.type),
+        },
+        {
+          title: capitalize(formatMessage(tables.created, { suffix: 'i' })),
+          sortable: { isSortable: true, key: 'created' },
+        },
+        { title: formatMessage(tables.state) },
+        {
+          title: formatMessage(tables.hearingArrangementDate),
+          sortable: {
+            isSortable: true,
+            key: 'courtDate',
+          },
+        },
+      ]}
+      data={cases}
+      generateContextMenuItems={(row) => {
+        return [
+          openCaseInNewTabMenuItem(row.id),
+          {
+            title: formatMessage(contextMenu.deleteCase),
+            onClick: () => {
+              onContextMenuDeleteClick(row.id)
+            },
+            icon: 'trash',
+          },
+        ]
+      }}
+      columns={[
+        {
+          cell: (row) => (
+            <CourtCaseNumber
+              courtCaseNumber={row.courtCaseNumber ?? ''}
+              policeCaseNumbers={row.policeCaseNumbers ?? []}
+              appealCaseNumber={row.appealCaseNumber ?? ''}
+            />
+          ),
+        },
+        {
+          cell: (row) => <DefendantInfo defendants={row.defendants} />,
+        },
+        {
+          cell: (row) => <ColumnCaseType type={row.type} />,
+        },
+        {
+          cell: (row) => <CreatedDate created={row.created} />,
+        },
+        {
+          cell: (row) => (
+            <TagCaseState
+              caseState={row.state}
+              isCourtRole={true}
+              indictmentDecision={row.indictmentDecision}
+            />
+          ),
+        },
+        {
+          cell: (row) => (
+            <CourtDate
+              courtDate={row.courtDate}
+              postponedIndefinitelyExplanation={
+                row.postponedIndefinitelyExplanation
+              }
+              courtSessionType={row.courtSessionType}
+            />
+          ),
+        },
+      ]}
+    />
   )
 }
 
diff --git a/apps/judicial-system/web/src/routes/Shared/Cases/Cases.css.ts b/apps/judicial-system/web/src/routes/Shared/Cases/Cases.css.ts
index 527e5b175238..e7bb513aec33 100644
--- a/apps/judicial-system/web/src/routes/Shared/Cases/Cases.css.ts
+++ b/apps/judicial-system/web/src/routes/Shared/Cases/Cases.css.ts
@@ -19,15 +19,6 @@ export const filterContainer = style({
   maxWidth: '432px',
 })
 
-export const table = style({
-  borderSpacing: 0,
-  borderCollapse: 'collapse',
-  overflow: 'hidden',
-
-  // Needed for Safari.
-  width: '100%',
-})
-
 export const infoContainer = style({
   marginBottom: theme.spacing[3],
 
@@ -37,85 +28,3 @@ export const infoContainer = style({
     },
   },
 })
-
-export const thead = style({
-  background: theme.color.blue100,
-  textAlign: 'left',
-})
-
-export const thButton = style({
-  outline: 'none',
-
-  ':active': {
-    color: theme.color.dark400,
-  },
-})
-
-export const tableRowContainer = style({
-  borderBottom: `1px solid ${theme.color.blue200}`,
-  cursor: 'pointer',
-  margin: `0 ${theme.spacing[2]}px`,
-})
-
-export const blockColumn = style({
-  display: 'block',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-})
-
-export const th = style({
-  padding: `${theme.spacing[2]}px 0`,
-
-  selectors: {
-    '&:first-child': {
-      paddingLeft: theme.spacing[2],
-    },
-  },
-})
-
-export const td = style({
-  padding: `${theme.spacing[2]}px 0`,
-  selectors: {
-    '&:first-child': {
-      paddingLeft: theme.spacing[2],
-    },
-  },
-})
-
-export const deleteButtonWrapper = style({
-  margin: '0 auto',
-  padding: 10,
-  width: 44,
-  height: 44,
-})
-
-export const sortIcon = style({
-  opacity: 0.4,
-  transition: 'opacity .2s ease-in-out',
-
-  selectors: {
-    [`${thButton}:hover &`]: {
-      opacity: 1,
-    },
-  },
-})
-
-export const sortCreatedAsc = style({
-  opacity: 1,
-  transform: 'rotate(180deg)',
-})
-
-export const sortCreatedDes = style({
-  opacity: 1,
-  transform: 'rotate(0deg)',
-})
-
-export const sortAccusedNameAsc = style({
-  opacity: 1,
-  transform: 'rotate(0deg)',
-})
-
-export const sortAccusedNameDes = style({
-  opacity: 1,
-  transform: 'rotate(180deg)',
-})
diff --git a/apps/judicial-system/web/src/routes/Shared/Cases/Cases.spec.tsx b/apps/judicial-system/web/src/routes/Shared/Cases/Cases.spec.tsx
index e4ccf3879de6..7da99096c234 100644
--- a/apps/judicial-system/web/src/routes/Shared/Cases/Cases.spec.tsx
+++ b/apps/judicial-system/web/src/routes/Shared/Cases/Cases.spec.tsx
@@ -205,9 +205,7 @@ describe('Cases', () => {
       )
 
       expect(
-        await waitFor(
-          () => screen.getAllByTestId('custody-cases-table-row').length,
-        ),
+        await waitFor(() => screen.getAllByTestId('tableRow').length),
       ).toEqual(5)
     })
 
@@ -243,9 +241,7 @@ describe('Cases', () => {
         </MockedProvider>,
       )
 
-      expect(
-        (await screen.findAllByTestId('custody-cases-table-row')).length,
-      ).toEqual(5)
+      expect((await screen.findAllByTestId('tableRow')).length).toEqual(5)
     })
   })
 
@@ -323,9 +319,9 @@ describe('Cases', () => {
         </MockedProvider>,
       )
 
-      await user.click(await screen.findByTestId('accusedNameSortButton'))
+      await user.click(await screen.findByTestId('defendantsSortButton'))
 
-      const tableRows = await screen.findAllByTestId('custody-cases-table-row')
+      const tableRows = await screen.findAllByTestId('tableRow')
 
       expect(tableRows[0]).toHaveTextContent('D. M. Kil')
       expect(tableRows[1]).toHaveTextContent('Erlingur L Kristinsson')
@@ -349,9 +345,9 @@ describe('Cases', () => {
         </MockedProvider>,
       )
 
-      await user.dblClick(await screen.findByTestId('accusedNameSortButton'))
+      await user.dblClick(await screen.findByTestId('defendantsSortButton'))
 
-      const tableRows = await screen.findAllByTestId('custody-cases-table-row')
+      const tableRows = await screen.findAllByTestId('tableRow')
 
       expect(tableRows[0]).toHaveTextContent('D. M. Kil')
       expect(tableRows[1]).toHaveTextContent('Erlingur L Kristinsson')
@@ -375,9 +371,9 @@ describe('Cases', () => {
         </MockedProvider>,
       )
 
-      await user.click(await screen.findByTestId('createdAtSortButton'))
+      await user.click(await screen.findByTestId('createdSortButton'))
 
-      const tableRows = await screen.findAllByTestId('custody-cases-table-row')
+      const tableRows = await screen.findAllByTestId('tableRow')
 
       expect(tableRows[0]).toHaveTextContent('Erlingur L Kristinsson')
       expect(tableRows[1]).toHaveTextContent('Jon Harring Sr.')
@@ -401,9 +397,9 @@ describe('Cases', () => {
         </MockedProvider>,
       )
 
-      await user.dblClick(await screen.findByTestId('createdAtSortButton'))
+      await user.dblClick(await screen.findByTestId('createdSortButton'))
 
-      const tableRows = await screen.findAllByTestId('custody-cases-table-row')
+      const tableRows = await screen.findAllByTestId('tableRow')
 
       expect(tableRows[0]).toHaveTextContent('Erlingur L Kristinsson')
       expect(tableRows[1]).toHaveTextContent('Jon Harring Sr.')
diff --git a/apps/judicial-system/web/src/routes/Shared/Cases/Cases.strings.ts b/apps/judicial-system/web/src/routes/Shared/Cases/Cases.strings.ts
index 3bd539610055..131fd30f48df 100644
--- a/apps/judicial-system/web/src/routes/Shared/Cases/Cases.strings.ts
+++ b/apps/judicial-system/web/src/routes/Shared/Cases/Cases.strings.ts
@@ -16,33 +16,6 @@ export const cases = {
     },
   }),
   activeRequests: {
-    table: {
-      headers: defineMessages({
-        type: {
-          id: 'judicial.system.core:cases.active_requests.table.headers.type',
-          defaultMessage: 'Tegund',
-          description:
-            'Notaður sem titill fyrir tegund dálk í lista yfir mál í vinnslu.',
-        },
-        date: {
-          id: 'judicial.system.core:cases.active_requests.table.headers.date',
-          defaultMessage: 'Stofnað/Fyrirtaka',
-          description:
-            'Notaður sem titill fyrir dagsetningardálk í lista yfir óafgreidd mál í vinnslu.',
-        },
-        created: {
-          id: 'judicial.system.core:cases.active_requests.table.headers.created',
-          defaultMessage: 'Stofnað',
-          description:
-            'Notaður sem titill fyrir dagsetningu í lista yfir óafgreidd mál í vinnslu.',
-        },
-        prosecutor: {
-          id: 'judicial.system.core:cases.active_requests.table.headers.prosecutor',
-          defaultMessage: 'Sækjandi',
-          description: 'Notaður sem titill fyrir sækjanda í málalista.',
-        },
-      }),
-    },
     title: defineMessage({
       id: 'judicial.system.core:cases.active_requests.title',
       defaultMessage: 'Mál í vinnslu',
diff --git a/apps/judicial-system/web/src/routes/Shared/Cases/Cases.tsx b/apps/judicial-system/web/src/routes/Shared/Cases/Cases.tsx
index 90c4dd02d541..d84fc1a7a347 100644
--- a/apps/judicial-system/web/src/routes/Shared/Cases/Cases.tsx
+++ b/apps/judicial-system/web/src/routes/Shared/Cases/Cases.tsx
@@ -300,10 +300,7 @@ export const Cases: FC = () => {
                   {activeCases.length > 0 ? (
                     <ActiveCases
                       cases={activeCases}
-                      isDeletingCase={
-                        isTransitioningCase || isSendingNotification
-                      }
-                      onDeleteCase={deleteCase}
+                      onContextMenuDeleteClick={setVisibleModal}
                     />
                   ) : (
                     <div className={styles.infoContainer}>
diff --git a/apps/judicial-system/web/src/routes/Shared/SignedVerdictOverview/SignedVerdictOverview.tsx b/apps/judicial-system/web/src/routes/Shared/SignedVerdictOverview/SignedVerdictOverview.tsx
index 1288c0d39528..c552eb851fd7 100644
--- a/apps/judicial-system/web/src/routes/Shared/SignedVerdictOverview/SignedVerdictOverview.tsx
+++ b/apps/judicial-system/web/src/routes/Shared/SignedVerdictOverview/SignedVerdictOverview.tsx
@@ -719,7 +719,7 @@ export const SignedVerdictOverview: FC = () => {
             onPrimaryButtonClick={() => setSharedCaseModal(undefined)}
           />
         )}
-        <AnimatePresence exitBeforeEnter>
+        <AnimatePresence mode="wait">
           {isModifyingDates && (
             <ModifyDatesModal
               workingCase={workingCase}
diff --git a/package.json b/package.json
index 214622f18a95..b57758db0d52 100644
--- a/package.json
+++ b/package.json
@@ -181,7 +181,7 @@
     "font-awesome": "4.7.0",
     "form-data": "3.0.0",
     "formik": "2.2.9",
-    "framer-motion": "6.5.1",
+    "framer-motion": "9.0.0",
     "fridagar": "^3.2.0",
     "fuse.js": "7.0.0",
     "glob": "10.3.3",
diff --git a/yarn.lock b/yarn.lock
index 57a87eeaf986..ce8886939434 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13010,68 +13010,68 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@motionone/animation@npm:^10.12.0":
-  version: 10.14.0
-  resolution: "@motionone/animation@npm:10.14.0"
+"@motionone/animation@npm:^10.18.0":
+  version: 10.18.0
+  resolution: "@motionone/animation@npm:10.18.0"
   dependencies:
-    "@motionone/easing": ^10.14.0
-    "@motionone/types": ^10.14.0
-    "@motionone/utils": ^10.14.0
+    "@motionone/easing": ^10.18.0
+    "@motionone/types": ^10.17.1
+    "@motionone/utils": ^10.18.0
     tslib: ^2.3.1
-  checksum: 664f7f036418e3604bdcb267636ed21057a2036a21cdff90f9fa49b62e788cdfc3149f6f9a27e9530ebfbee3a39d6e7dcd73adaa95d16af25bfcf1e01bd95cbb
+  checksum: 841cb9f4843a89e5e4560b9f960f52cbe78afc86f87c769f71e9edb3aadd53fb87982b7e11914428f228b29fd580756be531369c2ffac06432550afa4e87d1c3
   languageName: node
   linkType: hard
 
-"@motionone/dom@npm:10.12.0":
-  version: 10.12.0
-  resolution: "@motionone/dom@npm:10.12.0"
+"@motionone/dom@npm:^10.15.3":
+  version: 10.18.0
+  resolution: "@motionone/dom@npm:10.18.0"
   dependencies:
-    "@motionone/animation": ^10.12.0
-    "@motionone/generators": ^10.12.0
-    "@motionone/types": ^10.12.0
-    "@motionone/utils": ^10.12.0
+    "@motionone/animation": ^10.18.0
+    "@motionone/generators": ^10.18.0
+    "@motionone/types": ^10.17.1
+    "@motionone/utils": ^10.18.0
     hey-listen: ^1.0.8
     tslib: ^2.3.1
-  checksum: 123356f28e44362c4f081aae3df22e576f46bfcb07e01257b2ac64a115668448f29b8de67e4b6e692c5407cffb78ffe7cf9fa1bc064007482bab5dd23a69d380
+  checksum: b11f5366b05d1a93d7df0c91923f0339412e5eb65de2010b1d0484bcbb8027d352334722ce6b839f1be776585d849d1bcbee9d96b2445f6bb6e82301fe67bbeb
   languageName: node
   linkType: hard
 
-"@motionone/easing@npm:^10.14.0":
-  version: 10.14.0
-  resolution: "@motionone/easing@npm:10.14.0"
+"@motionone/easing@npm:^10.18.0":
+  version: 10.18.0
+  resolution: "@motionone/easing@npm:10.18.0"
   dependencies:
-    "@motionone/utils": ^10.14.0
+    "@motionone/utils": ^10.18.0
     tslib: ^2.3.1
-  checksum: c845b7a445d6dbfb6d9d830fe8c88050345988fb6e423e63c1962506995e99efe899d6e7b14a8960b7df27aa279dfdfb02202a20de01bc65dcbd416ec2315d37
+  checksum: 6bd37f7a9d5a88f868cc0ad6e47d2ba8d9fefd7da84fccfea7ed77ec08c2e6d1e42df88dda462665102a5cf03f748231a1a077de7054b5a8ccb0fbf36f61b1e7
   languageName: node
   linkType: hard
 
-"@motionone/generators@npm:^10.12.0":
-  version: 10.14.0
-  resolution: "@motionone/generators@npm:10.14.0"
+"@motionone/generators@npm:^10.18.0":
+  version: 10.18.0
+  resolution: "@motionone/generators@npm:10.18.0"
   dependencies:
-    "@motionone/types": ^10.14.0
-    "@motionone/utils": ^10.14.0
+    "@motionone/types": ^10.17.1
+    "@motionone/utils": ^10.18.0
     tslib: ^2.3.1
-  checksum: 14cb500441f7b19dd84672c00ebeda0380fa151922118ac7e1bd13bf7b7b6bd87f876454863f3acf0849bb9c7b83a496eb0fba8f7b4d720f99bf5fa2121f056f
+  checksum: 51a0e075681697b11d0771998cac8c76a745f00141502f81adb953896992b7f49478965e4afe696bc83361afaae8d2f1057d71c25b21035fe67258ff73764f1c
   languageName: node
   linkType: hard
 
-"@motionone/types@npm:^10.12.0, @motionone/types@npm:^10.14.0":
-  version: 10.14.0
-  resolution: "@motionone/types@npm:10.14.0"
-  checksum: 2fbd65f925c786b190d99867010960ffb458beda5f9b5499eeb0822094871ecbeded1aae917c194b605d80f0c56a55a13ff1e0fa4f6bad3ad8ff32fe5a3201dc
+"@motionone/types@npm:^10.17.1":
+  version: 10.17.1
+  resolution: "@motionone/types@npm:10.17.1"
+  checksum: 3fa74db64e371e61a7f7669d7d541d11c9a8dd871032d59c69041e3b2e07a67ad2ed8767cb9273bac90eed4e1f76efc1f14c8673c2e9a288f6070ee0fef64a25
   languageName: node
   linkType: hard
 
-"@motionone/utils@npm:^10.12.0, @motionone/utils@npm:^10.14.0":
-  version: 10.14.0
-  resolution: "@motionone/utils@npm:10.14.0"
+"@motionone/utils@npm:^10.18.0":
+  version: 10.18.0
+  resolution: "@motionone/utils@npm:10.18.0"
   dependencies:
-    "@motionone/types": ^10.14.0
+    "@motionone/types": ^10.17.1
     hey-listen: ^1.0.8
     tslib: ^2.3.1
-  checksum: eb4c0a50e458ba7e7944dba7d0b063665744fed60aef9b4670bbc26fe02bed43f26595e9515f8ca6e4899ff5f31e7d81708feb42c16bf6e91c871d310085bc48
+  checksum: a27f9afde693a0cbbbcb33962b12bbe40dd2cfa514b0732f3c7953c5ef4beed738e1e8172a2de89e3b9f74a253ef0a70d7f3efb730be97b77d7176a3ffacb67a
   languageName: node
   linkType: hard
 
@@ -32300,33 +32300,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"framer-motion@npm:6.5.1":
-  version: 6.5.1
-  resolution: "framer-motion@npm:6.5.1"
+"framer-motion@npm:9.0.0":
+  version: 9.0.0
+  resolution: "framer-motion@npm:9.0.0"
   dependencies:
     "@emotion/is-prop-valid": ^0.8.2
-    "@motionone/dom": 10.12.0
-    framesync: 6.0.1
+    "@motionone/dom": ^10.15.3
     hey-listen: ^1.0.8
-    popmotion: 11.0.3
-    style-value-types: 5.0.0
-    tslib: ^2.1.0
+    tslib: ^2.4.0
   peerDependencies:
-    react: ">=16.8 || ^17.0.0 || ^18.0.0"
-    react-dom: ">=16.8 || ^17.0.0 || ^18.0.0"
+    react: ^18.0.0
+    react-dom: ^18.0.0
   dependenciesMeta:
     "@emotion/is-prop-valid":
       optional: true
-  checksum: 737959063137b4ccafe01e0ac0c9e5a9531bf3f729f62c34ca7a5d7955e6664f70affd22b044f7db51df41acb21d120a4f71a860e17a80c4db766ad66f2153a1
-  languageName: node
-  linkType: hard
-
-"framesync@npm:6.0.1":
-  version: 6.0.1
-  resolution: "framesync@npm:6.0.1"
-  dependencies:
-    tslib: ^2.1.0
-  checksum: a23ebe8f7e20a32c0b99c2f8175b6f07af3ec6316aad52a2316316a6d011d717af8d2175dcc2827031c59fabb30232ed3e19a720a373caba7f070e1eae436325
+  checksum: eaafa53fc5e48dc6ea241c6259fa192bd467fb46bda416bf0d0855a81ed48761f66905bb9f39185746c3a39e7bc6c2474a407153bbed553a25e9f3578c624c80
   languageName: node
   linkType: hard
 
@@ -36162,7 +36150,7 @@ __metadata:
     font-awesome: 4.7.0
     form-data: 3.0.0
     formik: 2.2.9
-    framer-motion: 6.5.1
+    framer-motion: 9.0.0
     fridagar: ^3.2.0
     fuse.js: 7.0.0
     glob: 10.3.3
@@ -44455,18 +44443,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"popmotion@npm:11.0.3":
-  version: 11.0.3
-  resolution: "popmotion@npm:11.0.3"
-  dependencies:
-    framesync: 6.0.1
-    hey-listen: ^1.0.8
-    style-value-types: 5.0.0
-    tslib: ^2.1.0
-  checksum: 9fe7d03b4ec0e85bfb9dadc23b745147bfe42e16f466ba06e6327197d0e38b72015afc2f918a8051dedc3680310417f346ffdc463be6518e2e92e98f48e30268
-  languageName: node
-  linkType: hard
-
 "portfinder@npm:^1.0.28":
   version: 1.0.28
   resolution: "portfinder@npm:1.0.28"
@@ -51113,16 +51089,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"style-value-types@npm:5.0.0":
-  version: 5.0.0
-  resolution: "style-value-types@npm:5.0.0"
-  dependencies:
-    hey-listen: ^1.0.8
-    tslib: ^2.1.0
-  checksum: 16d198302cd102edf9dba94e7752a2364c93b1eaa5cc7c32b42b28eef4af4ccb5149a3f16bc2a256adc02616a2404f4612bd15f3081c1e8ca06132cae78be6c0
-  languageName: node
-  linkType: hard
-
 "styled-components@npm:5.3.6":
   version: 5.3.6
   resolution: "styled-components@npm:5.3.6"