diff --git a/package.json b/package.json
index 9ded8eddb2..e9364f1d7d 100644
--- a/package.json
+++ b/package.json
@@ -132,10 +132,9 @@
   "dependencies": {
     "@babel/polyfill": "7.12.1",
     "@date-fns/tz": "1.2.0",
-    "@digdir/design-system-react": "0.54.0",
-    "@digdir/designsystemet-css": "0.10.0",
-    "@digdir/designsystemet-react": "0.63.1",
-    "@digdir/designsystemet-theme": "0.15.3",
+    "@digdir/designsystemet-css": "1.0.6",
+    "@digdir/designsystemet-react": "1.0.6",
+    "@digdir/designsystemet-theme": "1.0.6",
     "@navikt/aksel-icons": "^7.17.4",
     "@tanstack/react-query": "5.80.10",
     "ajv": "8.17.1",
diff --git a/src/app-components/Button/Button.tsx b/src/app-components/Button/Button.tsx
index 55965b5769..a0146c851f 100644
--- a/src/app-components/Button/Button.tsx
+++ b/src/app-components/Button/Button.tsx
@@ -16,6 +16,7 @@ export type ButtonProps = {
   isLoading?: boolean;
   size?: 'sm' | 'md' | 'lg';
   className?: string;
+  fullWidth?: boolean;
   textAlign?: TextAlign;
 } & Pick<
   DesignSystemButtonProps,
@@ -23,7 +24,6 @@ export type ButtonProps = {
   | 'title'
   | 'disabled'
   | 'icon'
-  | 'fullWidth'
   | 'onClick'
   | 'style'
   | 'tabIndex'
@@ -37,8 +37,22 @@ export type ButtonProps = {
   | 'aria-describedby'
   | 'onKeyUp'
   | 'asChild'
+  | 'popovertarget'
 >;
 
+type DSButtonColor = 'accent' | 'neutral' | 'success' | 'danger' | 'brand1' | 'brand2' | 'brand3' | undefined;
+
+function mapColorNames(color: ButtonColor): DSButtonColor {
+  switch (color) {
+    case 'first':
+      return 'accent';
+    case 'second':
+      return 'neutral';
+    default:
+      return color ?? 'accent';
+  }
+}
+
 export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProps>>(function Button(
   {
     id,
@@ -59,6 +73,7 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
     onKeyUp,
     asChild,
     textAlign,
+    popovertarget,
     'aria-label': ariaLabel,
     'aria-busy': ariaBusy,
     'aria-controls': ariaControls,
@@ -76,19 +91,20 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
       id={id}
       disabled={disabled || isLoading}
       variant={variant}
-      color={color}
-      size={size}
+      data-color={mapColorNames(color)}
+      data-size={size}
+      data-fullwidth={fullWidth ? true : undefined}
       ref={ref}
       className={className}
       title={title}
       icon={icon}
-      fullWidth={fullWidth}
       onClick={onClick}
       style={expandedStyle}
       tabIndex={tabIndex}
       onMouseDown={onMouseDown}
       onKeyUp={onKeyUp}
       asChild={asChild}
+      popovertarget={popovertarget}
       aria-label={ariaLabel}
       aria-busy={ariaBusy}
       aria-controls={ariaControls}
@@ -101,9 +117,9 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
         <>
           <Spinner
             aria-hidden='true'
-            color={color}
-            size={size === 'lg' ? 'sm' : 'xs'}
-            title={langAsString('general.loading')}
+            data-color={color}
+            data-size={size === 'lg' ? 'sm' : 'xs'}
+            aria-label={langAsString('general.loading')}
           />
           {children}
         </>
diff --git a/src/app-components/Card/Card.module.css b/src/app-components/Card/Card.module.css
new file mode 100644
index 0000000000..f157517e97
--- /dev/null
+++ b/src/app-components/Card/Card.module.css
@@ -0,0 +1,7 @@
+.mediaCard {
+  padding: 0;
+  margin-bottom: -7px;
+}
+.mediaCard img {
+  object-fit: cover;
+}
diff --git a/src/app-components/Card/Card.tsx b/src/app-components/Card/Card.tsx
new file mode 100644
index 0000000000..858499d512
--- /dev/null
+++ b/src/app-components/Card/Card.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { Card, Heading, Paragraph } from '@digdir/designsystemet-react';
+
+import classes from 'src/app-components/Card/Card.module.css';
+
+type AppCardProps = {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  footer?: React.ReactNode;
+  media?: React.ReactNode;
+  mediaPosition?: 'top' | 'bottom';
+  color?: Parameters<typeof Card>[0]['color'];
+  children?: React.ReactNode;
+  variant?: 'tinted' | 'default';
+};
+
+export function AppCard({
+  title,
+  description,
+  footer,
+  media,
+  color = 'neutral',
+  mediaPosition = 'top',
+  children,
+  variant = 'tinted',
+}: AppCardProps) {
+  return (
+    <Card
+      data-color={color}
+      variant={variant}
+    >
+      {media && mediaPosition === 'top' && <Card.Block className={classes.mediaCard}>{media}</Card.Block>}
+      <Card.Block>
+        {title && <Heading data-size='md'>{title}</Heading>}
+        {description && <Paragraph>{description}</Paragraph>}
+
+        {children}
+      </Card.Block>
+      {footer && (
+        <Card.Block>
+          <Paragraph data-size='sm'>{footer}</Paragraph>
+        </Card.Block>
+      )}
+      {media && mediaPosition === 'bottom' && <Card.Block className={classes.mediaCard}>{media}</Card.Block>}
+    </Card>
+  );
+}
diff --git a/src/app-components/Datepicker/Calendar.module.css b/src/app-components/Datepicker/Calendar.module.css
index 9bbd5783cd..df8dafaeb4 100644
--- a/src/app-components/Datepicker/Calendar.module.css
+++ b/src/app-components/Datepicker/Calendar.module.css
@@ -1,52 +1,32 @@
-.calendarToggleButton {
-  margin: 1px;
-  min-height: 36px;
-  min-width: 36px;
-  border-radius: 2px;
-}
-
-.calendarDay {
-  width: 48px;
-  height: 48px;
-  text-align: center;
-}
-.calendarDay:hover {
-  border-radius: var(--fds-border_radius-medium);
-  background: var(--fds-colors-blue-200);
-}
-
-.calendarDayButton {
-  height: 46px;
-  width: 46px;
-  background: transparent;
-  border: none;
+.datepickerLabelWrapper span[id*='description-'] {
+  margin-bottom: 0;
 }
 
 .focusedDate {
-  border-radius: var(--fds-border_radius-medium);
-  background: var(--fds-colors-blue-200);
+  border-radius: var(--ds-border-radius-md);
+  background: var(--ds-color-accent-surface-active);
 }
 .today {
-  border-radius: var(--fds-border_radius-medium);
-  border: var(--fds-border_width-default) solid var(--fds-colors-blue-200);
+  border-radius: var(--ds-border-radius-md);
+  border: var(--ds-border-width-default) solid var(--ds-color-accent-border-subtle);
 }
 
 .selectedDate {
-  background-color: var(--fds-colors-blue-900);
+  background-color: var(--ds-color-accent-base-active);
   color: white;
   font-weight: normal;
-  border-radius: var(--fds-border_radius-medium);
+  border-radius: var(--ds-border-radius-md);
 }
 .selectedDate:hover {
-  background: var(--fds-colors-blue-800);
+  background: var(--ds-color-accent-base-active);
 }
 .selectedDate button {
   color: white;
 }
 
 .disabledDate {
-  border-radius: var(--fds-border_radius-medium);
-  background: var(--fds-colors-grey-100);
+  border-radius: var(--ds-border-radius-md);
+  background: var(--ds-color-neutral-surface-tinted);
   cursor: not-allowed;
 }
 .disabledDate button {
@@ -57,7 +37,8 @@
 }
 
 .calendarWrapper {
-  max-width: 363px;
+  max-width: 380px;
+  box-sizing: content-box;
 }
 .calendar {
   width: 350px;
@@ -73,40 +54,61 @@
   font: inherit;
   font-weight: 500;
 }
+.calendarDay:hover {
+  border-radius: var(--ds-border-radius-md);
+  background: var(--ds-color-accent-surface-hover);
+  cursor: pointer;
+}
+.calendarDay {
+  width: 48px;
+  height: 48px;
+  text-align: center;
+}
+.calendarDayButton {
+  height: 46px;
+  width: 46px;
+  background: transparent;
+  border: none;
+}
 .monthWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
+  align-items: center;
 }
 .dropdownCaption {
   display: flex;
   margin-bottom: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
   gap: 4px;
 }
 
 .calendarInputWrapper {
   display: flex;
   border-radius: 4px;
-  border: var(--fds-border_width-default, 1px) solid var(--fds-semantic-border-neutral-default);
-  gap: var(--fds-spacing-1);
+  border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-strong);
+  gap: var(--ds-size-1);
   background: white;
 }
+
+.calendarInputWrapper button {
+  margin: 1px;
+}
+
 .calendarInputWrapper:hover {
-  border-color: var(--fds-semantic-border-input-hover);
-  box-shadow: inset 0 0 0 1px var(--fds-semantic-border-input-hover);
+  box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
 }
 .calendarInput {
   padding: 1px;
 }
-.calendarInput,
-.calendarInput * {
-  height: 36px;
-}
 
-.calendarInput input:not(:focus-visible) {
+.calendarInput input:not(:focus-visible),
+.calendarInput button {
   border: none;
   background: white;
 }
+
 .calendarInput input:not(:focus-visible):hover {
   box-shadow: none;
 }
diff --git a/src/app-components/Datepicker/DatePickerCalendar.tsx b/src/app-components/Datepicker/DatePickerCalendar.tsx
index 12e93b8c27..46de342bbe 100644
--- a/src/app-components/Datepicker/DatePickerCalendar.tsx
+++ b/src/app-components/Datepicker/DatePickerCalendar.tsx
@@ -7,7 +7,6 @@ import { getLocale } from 'src/app-components/Datepicker/utils/dateHelpers';
 
 export interface CalendarDialogProps {
   id: string;
-  isOpen?: boolean;
   selectedDate: Date | undefined;
   onSelect: (value: Date) => void;
   maxDate?: Date;
diff --git a/src/app-components/Datepicker/DatePickerInput.tsx b/src/app-components/Datepicker/DatePickerInput.tsx
index c604d8b0df..8f4e6aa02d 100644
--- a/src/app-components/Datepicker/DatePickerInput.tsx
+++ b/src/app-components/Datepicker/DatePickerInput.tsx
@@ -57,6 +57,7 @@ function DatePickerInputRef(
       getInputRef={ref}
       format={getFormatAsPatternFormat(datepickerFormat)}
       customInput={Textfield}
+      data-size='sm'
       mask='_'
       className={styles.calendarInput}
       type='text'
diff --git a/src/app-components/Datepicker/Datepicker.tsx b/src/app-components/Datepicker/Datepicker.tsx
index 7fb9a118ed..98cc9b0150 100644
--- a/src/app-components/Datepicker/Datepicker.tsx
+++ b/src/app-components/Datepicker/Datepicker.tsx
@@ -4,7 +4,6 @@ import type { MonthCaption } from 'react-day-picker';
 import { CalendarIcon } from '@navikt/aksel-icons';
 import { isValid as isValidDate } from 'date-fns';
 
-import { Button } from 'src/app-components/Button/Button';
 import styles from 'src/app-components/Datepicker/Calendar.module.css';
 import { DatePickerCalendar } from 'src/app-components/Datepicker/DatePickerCalendar';
 import { DatePickerDialog } from 'src/app-components/Datepicker/DatepickerDialog';
@@ -78,32 +77,17 @@ export const DatePickerControl: React.FC<DatePickerControlProps> = ({
           autoComplete={autoComplete}
         />
         <DatePickerDialog
+          id={id}
+          buttonAriaLabel={buttonAriaLabel}
+          readOnly={readOnly}
           isDialogOpen={isDialogOpen}
           setIsDialogOpen={setIsDialogOpen}
-          trigger={
-            <Button
-              id={`${id}-button`}
-              className={styles.calendarToggleButton}
-              variant='tertiary'
-              icon={true}
-              aria-controls='dialog'
-              aria-haspopup='dialog'
-              onClick={() => setIsDialogOpen(!isDialogOpen)}
-              aria-label={buttonAriaLabel}
-              aria-expanded={isDialogOpen}
-              disabled={readOnly}
-              color='first'
-              size='sm'
-            >
-              <CalendarIcon title={calendarIconTitle} />
-            </Button>
-          }
+          trigger={<CalendarIcon title={calendarIconTitle} />}
         >
           <DatePickerCalendar
             id={id}
             locale={locale}
             selectedDate={dayPickerDate}
-            isOpen={isDialogOpen}
             onSelect={(date) => {
               handleDayPickerSelect(date);
               setIsDialogOpen(false);
diff --git a/src/app-components/Datepicker/DatepickerDialog.tsx b/src/app-components/Datepicker/DatepickerDialog.tsx
index ba62b5a0fe..ceb4a32a67 100644
--- a/src/app-components/Datepicker/DatepickerDialog.tsx
+++ b/src/app-components/Datepicker/DatepickerDialog.tsx
@@ -1,17 +1,29 @@
 import React, { useEffect, useRef } from 'react';
 import type { PropsWithChildren, ReactNode } from 'react';
 
-import { Modal, Popover } from '@digdir/designsystemet-react';
+import { Dialog, Popover } from '@digdir/designsystemet-react';
 
 import styles from 'src/app-components/Datepicker/Calendar.module.css';
 import { useIsMobile } from 'src/hooks/useDeviceWidths';
 
+type DatePickerDialogProps = {
+  id: string;
+  buttonAriaLabel: string;
+  readOnly: boolean;
+  trigger: ReactNode;
+  isDialogOpen: boolean;
+  setIsDialogOpen: (open: boolean) => void;
+};
+
 export function DatePickerDialog({
+  id,
+  buttonAriaLabel,
+  readOnly,
   children,
   trigger,
   isDialogOpen,
   setIsDialogOpen,
-}: PropsWithChildren<{ trigger: ReactNode; isDialogOpen: boolean; setIsDialogOpen: (open: boolean) => void }>) {
+}: PropsWithChildren<DatePickerDialogProps>) {
   const isMobile = useIsMobile();
   const modalRef = useRef<HTMLDialogElement>(null);
 
@@ -22,40 +34,58 @@ export function DatePickerDialog({
 
   if (isMobile) {
     return (
-      <>
-        {trigger}
-        <Modal
-          role='dialog'
+      <Dialog.TriggerContext>
+        <Dialog.Trigger
+          id={`${id}-button`}
+          variant='tertiary'
+          icon
+          onClick={() => setIsDialogOpen(!isDialogOpen)}
+          aria-label={buttonAriaLabel}
+          disabled={readOnly}
+          data-size='sm'
+        >
+          {trigger}
+        </Dialog.Trigger>
+        <Dialog
           ref={modalRef}
-          onInteractOutside={() => setIsDialogOpen(false)}
+          role='dialog'
+          aria-hidden={!isDialogOpen}
+          closedby='any'
+          modal
           style={{ width: 'fit-content', minWidth: 'fit-content' }}
+          onClose={() => setIsDialogOpen(false)}
         >
-          <Modal.Content>{children}</Modal.Content>
-        </Modal>
-      </>
+          {children}
+        </Dialog>
+      </Dialog.TriggerContext>
     );
   }
   return (
-    <Popover
-      portal={true}
-      open={isDialogOpen}
-      onClose={() => setIsDialogOpen(false)}
-      size='lg'
-      placement='top'
-    >
+    <Popover.TriggerContext>
       <Popover.Trigger
+        id={`${id}-button`}
+        variant='tertiary'
+        icon
         onClick={() => setIsDialogOpen(!isDialogOpen)}
-        asChild={true}
+        aria-label={buttonAriaLabel}
+        disabled={readOnly}
+        data-size='sm'
       >
         {trigger}
       </Popover.Trigger>
-      <Popover.Content
+      <Popover
         className={styles.calendarWrapper}
         aria-modal
+        aria-hidden={!isDialogOpen}
+        role='dialog'
+        open={isDialogOpen}
+        data-size='lg'
+        placement='top'
         autoFocus={true}
+        onClose={() => setIsDialogOpen(false)}
       >
         {children}
-      </Popover.Content>
-    </Popover>
+      </Popover>
+    </Popover.TriggerContext>
   );
 }
diff --git a/src/app-components/DynamicForm/DynamicForm.tsx b/src/app-components/DynamicForm/DynamicForm.tsx
index 0289275d05..0dbb96dca2 100644
--- a/src/app-components/DynamicForm/DynamicForm.tsx
+++ b/src/app-components/DynamicForm/DynamicForm.tsx
@@ -150,7 +150,7 @@ export function FieldRenderer({
           >
             <Textfield
               label={label}
-              size='sm'
+              data-size='sm'
               required={required}
               value={(formData[fieldKey] as string) || ''}
               onChange={(e) => handleChange(fieldKey, e.target.value)}
@@ -166,7 +166,7 @@ export function FieldRenderer({
           >
             <Textfield
               label={label}
-              size='sm'
+              data-size='sm'
               type='number'
               required={required}
               value={formData[fieldKey] !== undefined ? String(formData[fieldKey]) : ''}
@@ -205,7 +205,7 @@ export function FieldRenderer({
           <div key={fieldKey}>
             {component?.options?.map(({ label, value }) => (
               <Radio
-                size='sm'
+                data-size='sm'
                 key={value}
                 value={value}
                 checked={formData[fieldKey] === value}
@@ -213,9 +213,8 @@ export function FieldRenderer({
                   handleChange(fieldKey, e.target.value);
                 }}
                 name={`${fieldKey}-${rowIndex}`}
-              >
-                {label}
-              </Radio>
+                label={label}
+              />
             ))}
           </div>
         );
diff --git a/src/app-components/HelpText/HelpText.test.tsx b/src/app-components/HelpText/HelpText.test.tsx
index 8de94b4242..b2f65d4541 100644
--- a/src/app-components/HelpText/HelpText.test.tsx
+++ b/src/app-components/HelpText/HelpText.test.tsx
@@ -34,11 +34,11 @@ describe('HelpText', () => {
     render();
     const helpTextTrigger = screen.getByRole('button');
 
-    expect(screen.queryByText('Help')).not.toBeInTheDocument();
+    expect(helpTextTrigger).toHaveAttribute('aria-expanded', 'false');
     await act(async () => {
       await user.click(helpTextTrigger);
     });
-    expect(screen.queryByText('Help')).toBeInTheDocument();
+    expect(helpTextTrigger).toHaveAttribute('aria-expanded', 'true');
   });
 
   it('should close HelpText on trigger-click when open', async () => {
@@ -48,23 +48,23 @@ describe('HelpText', () => {
     await act(async () => {
       await user.click(helpTextTrigger);
     });
-    expect(screen.queryByText('Help')).toBeInTheDocument();
+    expect(helpTextTrigger).toHaveAttribute('aria-expanded', 'true');
     await act(async () => {
       await user.click(helpTextTrigger);
     });
-    expect(screen.queryByText('Help')).not.toBeInTheDocument();
+    expect(helpTextTrigger).toHaveAttribute('aria-expanded', 'false');
   });
 
   it('should open HelpText on SPACE pressed when closed', async () => {
     render();
     const helpTextTrigger = screen.getByRole('button');
 
-    expect(screen.queryByText('Help')).not.toBeInTheDocument();
+    expect(helpTextTrigger).toHaveAttribute('aria-expanded', 'false');
     helpTextTrigger.focus();
     await act(async () => {
       await user.keyboard('[Space]');
     });
-    expect(screen.queryByText('Help')).toBeInTheDocument();
+    expect(helpTextTrigger).toHaveAttribute('aria-expanded', 'true');
   });
 
   it('should close HelpText on ESC pressed when open', async () => {
@@ -75,11 +75,11 @@ describe('HelpText', () => {
     await act(async () => {
       await user.click(helpTextTrigger);
     });
-    expect(screen.queryByText('Help')).toBeInTheDocument();
+    expect(helpTextTrigger).toHaveAttribute('aria-expanded', 'true');
     await act(async () => {
       await user.keyboard('[Escape]');
     });
-    expect(screen.queryByText('Help')).not.toBeInTheDocument();
+    expect(helpTextTrigger).toHaveAttribute('aria-expanded', 'false');
   });
 
   it('should have `aria-expanded` set to `false` when closed', () => {
diff --git a/src/app-components/HelpText/HelpText.tsx b/src/app-components/HelpText/HelpText.tsx
index c2c2996ff4..03abcbd47e 100644
--- a/src/app-components/HelpText/HelpText.tsx
+++ b/src/app-components/HelpText/HelpText.tsx
@@ -12,10 +12,9 @@ import { HelpTextIcon } from 'src/app-components/HelpText/HelpTextIcon';
 export type HelpTextProps = {
   id?: string;
   title?: string;
-  size?: PopoverProps['size'];
+  size?: PopoverProps['data-size'];
   placement?: 'right' | 'bottom' | 'left' | 'top';
-  portal?: boolean;
-} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
 
 export function getSize(size: string) {
   switch (size) {
@@ -45,27 +44,19 @@ export function getSize(size: string) {
 }
 
 export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(function HelpText(
-  { id, title, placement = 'right', portal, className, children, ...rest },
+  { id, title, placement = 'right', className, children, ...rest },
   ref,
 ) {
   const uuid = uuidv4();
   const [open, setOpen] = useState(false);
 
-  const size = getSize(rest.size || 'md') as PopoverProps['size'];
+  const size = getSize(rest.size || 'md') as PopoverProps['data-size'];
 
   const helpTextSize = size ? classes[`helpText-${size}`] : '';
   return (
-    <Popover
-      variant='info'
-      placement={placement}
-      size={size}
-      portal={portal}
-      open={open}
-      onClose={() => setOpen(false)}
-    >
+    <Popover.TriggerContext>
       <Popover.Trigger
         asChild
-        variant='tertiary'
         ref={ref}
         aria-label={title}
         id={id ?? uuid}
@@ -84,10 +75,19 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(function He
             className={cl(classes['helpText-icon'])}
             openState={open}
           />
-          <span className={classes.screenReaderOnly}>{title}</span>
         </button>
       </Popover.Trigger>
-      <Popover.Content className={classes.helpTextContent}>{children}</Popover.Content>
-    </Popover>
+      <Popover
+        data-testid='helptext'
+        className={classes.helpTextContent}
+        data-color='info'
+        placement={placement}
+        data-size={size}
+        open={open}
+        onClose={() => setOpen(false)}
+      >
+        {children}
+      </Popover>
+    </Popover.TriggerContext>
   );
 });
diff --git a/src/app-components/HelpText/Helptext.module.css b/src/app-components/HelpText/Helptext.module.css
index 27e28d7bfe..ad78b33f40 100644
--- a/src/app-components/HelpText/Helptext.module.css
+++ b/src/app-components/HelpText/Helptext.module.css
@@ -19,11 +19,11 @@
 }
 
 .helpText-icon {
-  color: var(--fds-semantic-text-action-default);
-  width: var(--fds-sizing-7);
-  height: var(--fds-sizing-7);
-  min-width: var(--fds-sizing-7);
-  min-height: var(--fds-sizing-7);
+  color: var(--ds-color-accent-base-default);
+  width: var(--ds-size-9);
+  height: var(--ds-size-9);
+  min-width: var(--ds-size-9);
+  min-height: var(--ds-size-9);
 }
 
 .helpTextButton:where(:hover, :focus, [data-state^='open']) > .helpText-icon {
@@ -35,31 +35,30 @@
 }
 
 .helpTextContent {
-  font: var(--fds-typography-paragraph-medium);
+  font: var(--ds-typography-paragraph-md);
   font-family: inherit;
-  width: fit-content;
+  width: moz-fit-content;
   max-width: 700px;
 }
 
 .helpText-sm .helpText-icon {
-  width: var(--fds-sizing-6);
-  height: var(--fds-sizing-6);
+  width: var(--ds-size-6);
+  height: var(--ds-size-6);
 }
 
 .helpText-md .helpText-icon {
-  width: var(--fds-sizing-7);
-  height: var(--fds-sizing-7);
+  width: var(--ds-size-7);
+  height: var(--ds-size-7);
 }
 
 .helpText-lg .helpText-icon {
-  width: var(--fds-sizing-8);
-  height: var(--fds-sizing-8);
+  width: var(--ds-size-8);
+  height: var(--ds-size-8);
 }
 .helpText-focus:focus-visible {
-  --fds-focus-border-width: 3px;
-  outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);
-  outline-offset: var(--fds-focus-border-width);
-  box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
+  outline: var(--ds-border-width-focus) solid var(--ds-color-neutral-text-default);
+  outline-offset: var(--ds-border-width-focus);
+  box-shadow: 0 0 0 var(--ds-border-width-focus) var(--ds-color-neutral-background-default);
 }
 .screenReaderOnly {
   border: 0;
diff --git a/src/app-components/Input/Input.module.css b/src/app-components/Input/Input.module.css
index 5252ad2529..97666f0c29 100644
--- a/src/app-components/Input/Input.module.css
+++ b/src/app-components/Input/Input.module.css
@@ -6,14 +6,13 @@ input[type='search'] {
 }
 
 .text-padding {
-  padding: 0 var(--fds-spacing-2);
+  padding: 0 var(--ds-size-2);
   line-height: 32px;
 }
 
 .focusable:focus-visible {
-  --fds-focus-border-width: 3px;
-  outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);
-  outline-offset: var(--fds-focus-border-width);
-  box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
-  border-radius: var(--fds-border_radius-medium);
+  outline: var(--ds-border-width-focus) solid var(--ds-color-neutral-text-default);
+  outline-offset: var(--ds-border-width-focus);
+  box-shadow: 0 0 0 var(--ds-border-width-focus) var(--ds-color-neutral-background-default);
+  border-radius: var(--ds-border-radius-md);
 }
diff --git a/src/app-components/Input/Input.tsx b/src/app-components/Input/Input.tsx
index 34d62a6513..ca5349e521 100644
--- a/src/app-components/Input/Input.tsx
+++ b/src/app-components/Input/Input.tsx
@@ -2,22 +2,27 @@ import React from 'react';
 import type { InputHTMLAttributes, ReactNode } from 'react';
 
 import { Paragraph, Textfield } from '@digdir/designsystemet-react';
-import type { CharacterLimitProps } from '@digdir/designsystemet-react/dist/types/components/form/CharacterCounter';
 
 import classes from 'src/app-components/Input/Input.module.css';
+import { useCharacterLimit } from 'src/utils/inputUtils';
 import type { InputType } from 'src/app-components/Input/constants';
 
+type LabelRequired =
+  | { 'aria-label': string; 'aria-labelledby'?: never; label?: never }
+  | { 'aria-label'?: never; 'aria-labelledby'?: never; label: ReactNode }
+  | { 'aria-label'?: never; 'aria-labelledby': string; label?: never };
+
 export type InputProps = {
   size?: 'sm' | 'md' | 'lg';
   prefix?: string;
   suffix?: string;
-  characterLimit?: CharacterLimitProps;
   error?: ReactNode;
   disabled?: boolean;
   id?: string;
   readOnly?: boolean;
   type?: InputType;
   textonly?: boolean;
+  maxLength?: number;
 } & Pick<
   InputHTMLAttributes<HTMLInputElement>,
   | 'value'
@@ -33,10 +38,13 @@ export type InputProps = {
   | 'style'
   | 'pattern'
   | 'onKeyDown'
->;
+> &
+  LabelRequired;
 
 export function Input(props: InputProps) {
-  const { size = 'sm', readOnly, textonly, ...rest } = props;
+  const { size = 'sm', readOnly, error, textonly, maxLength, ...rest } = props;
+
+  const characterLimit = useCharacterLimit(maxLength);
 
   const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
     if (readOnly) {
@@ -53,7 +61,7 @@ export function Input(props: InputProps) {
     return (
       <Paragraph
         id={id}
-        size={size}
+        data-size={size}
         className={`${classes.textPadding} ${classes.focusable} ${className}`}
         tabIndex={0}
       >
@@ -64,9 +72,11 @@ export function Input(props: InputProps) {
 
   return (
     <Textfield
+      data-size={size}
       onPaste={handlePaste}
-      size={size}
+      aria-invalid={!!error}
       readOnly={readOnly}
+      counter={!readOnly ? characterLimit : undefined}
       {...rest}
     />
   );
diff --git a/src/app-components/Label/Fieldset.tsx b/src/app-components/Label/Fieldset.tsx
index 00dce996e8..da0c9fda34 100644
--- a/src/app-components/Label/Fieldset.tsx
+++ b/src/app-components/Label/Fieldset.tsx
@@ -12,7 +12,7 @@ import type { IGridStyling } from 'src/layout/common.generated';
 export type FieldsetProps = {
   id?: string;
   legend: string | ReactElement | undefined;
-  legendSize?: Extract<DesignsystemetLabelProps['size'], 'sm' | 'md' | 'lg' | 'xl'>;
+  legendSize?: Extract<DesignsystemetLabelProps['data-size'], 'sm' | 'md' | 'lg' | 'xl'>;
   className?: string;
   grid?: IGridStyling;
   optionalIndicator?: ReactElement;
@@ -21,7 +21,7 @@ export type FieldsetProps = {
   required?: boolean;
   requiredIndicator?: JSX.Element;
   style?: DesignsystemetLabelProps['style'];
-  size?: Extract<DesignsystemetLabelProps['size'], 'sm' | 'md' | 'lg' | 'xl'>;
+  size?: Extract<DesignsystemetLabelProps['data-size'], 'sm' | 'md' | 'lg' | 'xl'>;
 };
 
 export function Fieldset({
@@ -69,12 +69,13 @@ export function Fieldset({
       >
         <DesignsystemetFieldset
           className={cn(className)}
-          size={size}
-          legend={
+          data-size={size}
+        >
+          <DesignsystemetFieldset.Legend className={labelClasses.legend}>
             <span className={cn(labelClasses.labelAndHelpWrapper)}>
               <DesignsystemetLabel
                 weight='medium'
-                size={legendSize}
+                data-size={legendSize}
                 style={style}
                 asChild
               >
@@ -86,10 +87,8 @@ export function Fieldset({
               </DesignsystemetLabel>
               {help}
             </span>
-          }
-          // FIXME: find a way to use classnames for setting font size. Not working currently
-          description={description}
-        >
+          </DesignsystemetFieldset.Legend>
+          <DesignsystemetFieldset.Description>{description}</DesignsystemetFieldset.Description>
           {children}
         </DesignsystemetFieldset>
       </Flex>
diff --git a/src/app-components/Label/Label.module.css b/src/app-components/Label/Label.module.css
index cdc87ac406..32ffedb53a 100644
--- a/src/app-components/Label/Label.module.css
+++ b/src/app-components/Label/Label.module.css
@@ -1,20 +1,24 @@
 .labelAndHelpWrapper {
   display: flex;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
   align-items: center;
 }
 
+.legend {
+  display: inline-flex;
+}
+
 .labelAndDescWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-1);
+  gap: var(--ds-size-1);
   align-items: flex-start;
 }
 
 .description {
-  padding-bottom: var(--fds-spacing-2);
+  padding-bottom: var(--ds-size-2);
 }
 
 .labelPadding {
-  padding-bottom: var(--fds-spacing-2);
+  padding-bottom: var(--ds-size-2);
 }
diff --git a/src/app-components/Label/Label.tsx b/src/app-components/Label/Label.tsx
index a3f14753c9..36713f95a5 100644
--- a/src/app-components/Label/Label.tsx
+++ b/src/app-components/Label/Label.tsx
@@ -10,6 +10,7 @@ import classes from 'src/app-components/Label/Label.module.css';
 import type { IGridStyling } from 'src/layout/common.generated';
 
 type LabelProps = {
+  id?: string;
   label: string | ReactElement | undefined;
   htmlFor?: DesignsystemetLabelProps['htmlFor'];
   required?: boolean;
@@ -19,12 +20,13 @@ type LabelProps = {
   description?: ReactElement;
   className?: string;
   grid?: IGridStyling;
-  size?: DesignsystemetLabelProps['size'];
+  size?: DesignsystemetLabelProps['data-size'];
   style?: DesignsystemetLabelProps['style'];
 };
 
 export const Label = forwardRef<HTMLLabelElement, PropsWithChildren<LabelProps>>(function Label(
   {
+    id,
     label,
     htmlFor,
     required,
@@ -57,9 +59,10 @@ export const Label = forwardRef<HTMLLabelElement, PropsWithChildren<LabelProps>>
         <span className={classes.labelAndDescWrapper}>
           <span className={classes.labelAndHelpWrapper}>
             <DesignsystemetLabel
+              id={id}
               ref={ref}
               weight='medium'
-              size={size}
+              data-size={size}
               htmlFor={htmlFor}
               className={cn(className, {
                 [classes.labelPadding]: !children,
diff --git a/src/app-components/Number/DisplayNumber.tsx b/src/app-components/Number/DisplayNumber.tsx
index a7fd03f28b..367206a83b 100644
--- a/src/app-components/Number/DisplayNumber.tsx
+++ b/src/app-components/Number/DisplayNumber.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 
-import { formatNumericText } from '@digdir/design-system-react';
-
 import classes from 'src/app-components/Number/Number.module.css';
 import { getMapToReactNumberConfig } from 'src/hooks/useMapToReactNumberConfig';
+import { formatNumericText } from 'src/utils/formattingUtils';
 import type { CompInternal } from 'src/layout/layout';
 
 type Formatting = Exclude<CompInternal<'Input'>['formatting'], undefined>;
diff --git a/src/app-components/Pagination/Pagination.module.css b/src/app-components/Pagination/Pagination.module.css
index cbcdf8b51a..5f5de936c4 100644
--- a/src/app-components/Pagination/Pagination.module.css
+++ b/src/app-components/Pagination/Pagination.module.css
@@ -2,19 +2,15 @@
   visibility: hidden;
 }
 .pagination {
-  ul[class*='fds-pagination'] {
+  ul[class*='ds-pagination'] {
     padding: 0;
   }
 }
 .rowsPerPageDropdown {
-  display: flex;
-  flex-direction: row-reverse;
-
-  div[class*='fds-combobox__input__wrapper'] {
-    width: 80px;
-  }
+  width: var(--ds-size-22);
+}
 
-  div[class*='fds-combobox__chip-and-input'] {
-    width: 34px;
-  }
+.rowsPerPageField {
+  display: flex;
+  gap: var(--ds-size-2);
 }
diff --git a/src/app-components/Pagination/Pagination.tsx b/src/app-components/Pagination/Pagination.tsx
index 1fd4feb63d..daf6153a79 100644
--- a/src/app-components/Pagination/Pagination.tsx
+++ b/src/app-components/Pagination/Pagination.tsx
@@ -1,20 +1,23 @@
 import React from 'react';
 
-import { Combobox, Pagination as DesignSystemPagination, usePagination } from '@digdir/designsystemet-react';
-import { ChevronLeftIcon, ChevronRightIcon } from '@navikt/aksel-icons';
+import {
+  Field,
+  Label,
+  Pagination as DesignSystemPagination,
+  Select,
+  usePagination,
+} from '@digdir/designsystemet-react';
 
 import classes from 'src/app-components/Pagination/Pagination.module.css';
-import { Lang } from 'src/features/language/Lang';
 import { useLanguage } from 'src/features/language/useLanguage';
 import { useIsMini, useIsMobile, useIsTablet } from 'src/hooks/useDeviceWidths';
-import { optionSearchFilter } from 'src/utils/options';
 
 type PaginationProps = {
   nextLabel: string;
   nextLabelAriaLabel: string;
   previousLabel: string;
   previousLabelAriaLabel: string;
-  size: NonNullable<Parameters<typeof DesignSystemPagination>[0]['size']>;
+  size: NonNullable<Parameters<typeof DesignSystemPagination>[0]['data-size']>;
   compact?: boolean;
   hideLabels?: boolean;
   showRowsPerPageDropdown?: boolean;
@@ -23,25 +26,19 @@ type PaginationProps = {
   pageSize: number;
   rowsPerPageText: string;
   rowsPerPageOptions?: number[];
-  onPageSizeChange?: (value: string[]) => void;
-  onChange: Parameters<typeof DesignSystemPagination>[0]['onChange'];
+  onPageSizeChange: (value: number) => void;
+  setCurrentPage: (pageNumber: number) => void;
+  onChange?: Parameters<typeof DesignSystemPagination>[0]['onChange'];
 } & Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>;
 
-const iconSize = {
-  small: '1rem',
-  medium: '1.5rem',
-  large: '2rem',
-};
-
 export const Pagination = ({
   nextLabel,
-  nextLabelAriaLabel,
   previousLabel,
-  previousLabelAriaLabel,
   size,
   compact,
   hideLabels,
   currentPage,
+  setCurrentPage,
   onChange,
   onPageSizeChange,
   numberOfRows = 0,
@@ -50,88 +47,69 @@ export const Pagination = ({
   showRowsPerPageDropdown = false,
   pageSize,
 }: PaginationProps) => {
-  const totalPages = Math.ceil(numberOfRows / pageSize);
-  const pageNumber = currentPage + 1;
-
   const isMini = useIsMini();
   const isMobile = useIsMobile();
   const isTablet = useIsTablet();
+  const isCompact = compact || isMini || isTablet;
 
-  const { pages, showNextPage, showPreviousPage } = usePagination({
-    compact: compact || isMini || isTablet,
-    currentPage: pageNumber,
+  const totalPages = Math.ceil(numberOfRows / pageSize);
+  let showPages = isCompact ? 3 : 5;
+
+  if (showPages > totalPages) {
+    showPages = totalPages;
+  }
+
+  const { pages, prevButtonProps, nextButtonProps } = usePagination({
+    currentPage,
+    setCurrentPage,
     totalPages,
+    onChange,
+    showPages,
   });
   const { langAsString } = useLanguage();
 
   return (
     <>
       {showRowsPerPageDropdown && !isMobile && (
-        <Combobox
-          id='paginationRowsPerPageDropdown'
-          data-testid='paginationRowsPerPageDropdown'
-          filter={optionSearchFilter}
-          size='sm'
-          value={[pageSize.toString()]}
-          onValueChange={onPageSizeChange}
-          label={rowsPerPageText}
-          aria-label={rowsPerPageText}
-          className={classes.rowsPerPageDropdown}
-        >
-          <Combobox.Empty>
-            <Lang id='form_filler.no_options_found' />
-          </Combobox.Empty>
-          {rowsPerPageOptions?.map((option, i) => (
-            <Combobox.Option
-              key={`${option}${i}`}
-              value={option.toString()}
-              displayValue={option.toString()}
-            >
-              <span>
-                <wbr />
+        <Field className={classes.rowsPerPageField}>
+          <Select
+            id='paginationRowsPerPageDropdown'
+            data-size='sm'
+            value={pageSize}
+            onChange={(e) => onPageSizeChange(parseInt(e.target.value))}
+            className={classes.rowsPerPageDropdown}
+          >
+            {rowsPerPageOptions?.map((option, i) => (
+              <Select.Option
+                key={`${option}${i}`}
+                value={option}
+              >
                 {option}
-              </span>
-            </Combobox.Option>
-          ))}
-        </Combobox>
+              </Select.Option>
+            ))}
+          </Select>
+          <Label htmlFor='paginationRowsPerPageDropdown'>{rowsPerPageText}</Label>
+        </Field>
       )}
-      <DesignSystemPagination.Root
+      <DesignSystemPagination
         data-testid='pagination'
         aria-label='Pagination'
-        size={size}
-        compact={compact || isMini || isTablet}
+        data-size={size}
         className={classes.pagination}
       >
-        <DesignSystemPagination.Content>
+        <DesignSystemPagination.List>
           <DesignSystemPagination.Item>
-            <DesignSystemPagination.Previous
-              data-testid='paginationPreviousButton'
-              className={!showPreviousPage ? classes.hidden : undefined}
-              onClick={() => {
-                onChange(currentPage - 1);
-              }}
-              aria-label={previousLabelAriaLabel}
-            >
-              <ChevronLeftIcon
-                aria-hidden
-                fontSize={iconSize[size]}
-              />
+            <DesignSystemPagination.Button {...prevButtonProps}>
               {!hideLabels && !isMobile && previousLabel}
-            </DesignSystemPagination.Previous>
+            </DesignSystemPagination.Button>
           </DesignSystemPagination.Item>
-          {pages.map((page, i) => (
-            <DesignSystemPagination.Item key={`${page}${i}`}>
-              {page === 'ellipsis' ? (
-                <DesignSystemPagination.Ellipsis />
-              ) : (
+          {pages.map(({ page, itemKey, buttonProps }) => (
+            <DesignSystemPagination.Item key={itemKey}>
+              {typeof page === 'number' && (
                 <DesignSystemPagination.Button
-                  color='first'
-                  aria-current={pageNumber === page}
-                  isActive={pageNumber === page}
+                  aria-current={currentPage === page}
                   aria-label={langAsString('general.page_number', [page])}
-                  onClick={() => {
-                    onChange(page - 1);
-                  }}
+                  {...buttonProps}
                 >
                   {page}
                 </DesignSystemPagination.Button>
@@ -139,23 +117,12 @@ export const Pagination = ({
             </DesignSystemPagination.Item>
           ))}
           <DesignSystemPagination.Item>
-            <DesignSystemPagination.Next
-              data-testid='paginationNextButton'
-              aria-label={nextLabelAriaLabel}
-              onClick={() => {
-                onChange(currentPage + 1);
-              }}
-              className={!showNextPage ? classes.hidden : undefined}
-            >
+            <DesignSystemPagination.Button {...nextButtonProps}>
               {!hideLabels && !isMobile && nextLabel}
-              <ChevronRightIcon
-                aria-hidden
-                fontSize={iconSize[size]}
-              />
-            </DesignSystemPagination.Next>
+            </DesignSystemPagination.Button>
           </DesignSystemPagination.Item>
-        </DesignSystemPagination.Content>
-      </DesignSystemPagination.Root>
+        </DesignSystemPagination.List>
+      </DesignSystemPagination>
     </>
   );
 };
diff --git a/src/app-components/Panel/Panel.module.css b/src/app-components/Panel/Panel.module.css
index 3d02831d17..1a5be27aff 100644
--- a/src/app-components/Panel/Panel.module.css
+++ b/src/app-components/Panel/Panel.module.css
@@ -1,27 +1,27 @@
 /* breakpoints-xs */
 @media only screen and (min-width: 0) {
   .panel {
-    --y-padding: var(--fds-spacing-6);
-    --x-padding: var(--fds-spacing-6);
-    --content-gap: var(--fds-spacing-3);
+    --y-padding: var(--ds-size-6);
+    --x-padding: var(--ds-size-6);
+    --content-gap: var(--ds-size-3);
   }
 }
 
 /* breakpoints-sm */
 @media only screen and (min-width: 540px) {
   .panel:not(.panelMobileLayout) {
-    --y-padding: var(--fds-spacing-9);
-    --x-padding: var(--fds-spacing-22);
-    --content-gap: var(--fds-spacing-3);
+    --y-padding: var(--ds-size-9);
+    --x-padding: var(--ds-size-22);
+    --content-gap: var(--ds-size-3);
   }
 }
 
 /* print style */
 @media print {
   .panel {
-    --y-padding: var(--fds-spacing-6);
-    --x-padding: var(--fds-spacing-6);
-    --content-gap: var(--fds-spacing-3);
+    --y-padding: var(--ds-size-6);
+    --x-padding: var(--ds-size-6);
+    --content-gap: var(--ds-size-3);
   }
 }
 
@@ -36,19 +36,19 @@
 }
 
 .panelContentWrapper_info {
-  background-color: var(--fds-semantic-surface-info-subtle);
+  background-color: var(--ds-color-info-surface-tinted);
 }
 
 .panelContentWrapper_success {
-  background-color: var(--fds-semantic-surface-success-subtle);
+  background-color: var(--ds-color-success-surface-tinted);
 }
 
 .panelContentWrapper_warning {
-  background-color: var(--fds-semantic-surface-warning-subtle);
+  background-color: var(--ds-color-warning-surface-tinted);
 }
 
 .panelContentWrapper_error {
-  background-color: var(--fds-semantic-surface-danger-subtle);
+  background-color: var(--ds-color-danger-surface-tinted);
 }
 
 .panelIconWrapper {
@@ -57,25 +57,25 @@
 }
 
 .panelIconWrapper_success svg {
-  color: var(--fds-semantic-surface-success-default);
+  color: var(--ds-color-success-base-default);
 }
 
 .panelIconWrapper_info svg {
-  color: var(--fds-semantic-border-info-default);
+  color: var(--ds-color-info-border-strong);
 }
 
 .panelIconWrapper_error svg {
-  color: var(--fds-semantic-surface-danger-default);
+  color: var(--ds-color-danger-base-default);
 }
 
 .panelIconWrapper_warning svg {
-  color: var(--fds-semantic-border-warning-default);
+  color: var(--ds-color-warning-border-default);
 }
 
 .panelContent {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-1);
+  gap: var(--ds-size-1);
   width: 100%;
 }
 
diff --git a/src/app-components/Panel/Panel.tsx b/src/app-components/Panel/Panel.tsx
index e68b9db5f6..8a7456ecf3 100644
--- a/src/app-components/Panel/Panel.tsx
+++ b/src/app-components/Panel/Panel.tsx
@@ -120,7 +120,7 @@ export const Panel: React.FC<PanelProps> = ({
             {title && (
               <Heading
                 level={2}
-                size={isMobileLayout ? 'xs' : 'sm'}
+                data-size={isMobileLayout ? 'xs' : 'sm'}
                 className={classes.panelHeader}
               >
                 {title}
diff --git a/src/app-components/Table/Table.module.css b/src/app-components/Table/Table.module.css
index b84a9abc72..255e6d458b 100644
--- a/src/app-components/Table/Table.module.css
+++ b/src/app-components/Table/Table.module.css
@@ -5,7 +5,7 @@
 .buttonContainer {
   display: flex;
   justify-content: end;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
 }
 
 .mobileTable {
@@ -34,7 +34,7 @@
   display: flex;
   flex-direction: column;
   border: none;
-  padding: var(--fds-spacing-2) 0;
+  padding: var(--ds-size-2) 0;
 }
 
 .mobileTable td .contentWrapper {
@@ -45,17 +45,17 @@
 }
 
 .mobileTable tbody tr:last-child {
-  border-bottom: 2px solid var(--fds-semantic-border-neutral-default);
+  border-bottom: 2px solid var(--ds-color-neutral-border-strong);
 }
 
 .mobileTable tbody tr:first-child {
-  border-top: 2px solid var(--fds-semantic-border-neutral-default);
+  border-top: 2px solid var(--ds-color-neutral-border-strong);
 }
 
 .mobileTable tr {
-  border-bottom: 1px solid var(--fds-semantic-border-neutral-default);
-  padding-top: var(--fds-spacing-3);
-  padding-bottom: var(--fds-spacing-3);
+  border-bottom: 1px solid var(--ds-color-neutral-border-strong);
+  padding-top: var(--ds-size-3);
+  padding-bottom: var(--ds-size-3);
 }
 
 .mobileTable tr:hover td {
@@ -74,19 +74,6 @@
   justify-content: start;
 }
 
-.visuallyHidden {
-  border: none;
-  padding: 0;
-  margin: 0;
-  position: absolute;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  clip: rect(1px 1px 1px 1px);
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 .emptyCell {
   align-items: 'left';
   color: var(--semantic-text-neutral-subtle);
diff --git a/src/app-components/Table/Table.tsx b/src/app-components/Table/Table.tsx
index de77e889e6..37fa5224e1 100644
--- a/src/app-components/Table/Table.tsx
+++ b/src/app-components/Table/Table.tsx
@@ -8,6 +8,7 @@ import { pick } from 'dot-object';
 import type { JSONSchema7 } from 'json-schema';
 
 import classes from 'src/app-components/Table/Table.module.css';
+import utilClasses from 'src/styles/utils.module.css';
 import type { FormDataValue } from 'src/app-components/DynamicForm/DynamicForm';
 
 interface Column<T> {
@@ -87,7 +88,7 @@ export function AppTable<T>({
   const defaultButtonVariant = mobile ? 'secondary' : 'tertiary';
   return (
     <Table
-      size={size ?? 'sm'}
+      data-size={size ?? 'sm'}
       className={cn(classes.table, tableClassName, { [classes.mobileTable]: mobile })}
       zebra={zebra}
       stickyHeader={stickyHeader}
@@ -107,7 +108,7 @@ export function AppTable<T>({
           ))}
           {actionButtons && actionButtons.length > 0 && (
             <Table.HeaderCell>
-              <span className={classes.visuallyHidden}>{actionButtonHeader}</span>
+              <span className={utilClasses.visuallyHidden}>{actionButtonHeader}</span>
             </Table.HeaderCell>
           )}
         </Table.Row>
@@ -120,9 +121,8 @@ export function AppTable<T>({
               style={{ textAlign: 'center' }}
             >
               <Spinner
-                title='Loading data...'
-                variant='default'
-                size='md'
+                aria-label='Loading data...'
+                data-size='md'
               />
             </Table.Cell>
           </Table.Row>
@@ -196,7 +196,7 @@ export function AppTable<T>({
                       <Button
                         key={idx}
                         onClick={() => button.onClick(rowIndex, rowData)}
-                        size='sm'
+                        data-size='sm'
                         variant={button.variant ? button.variant : defaultButtonVariant}
                         color={button.color ? button.color : 'second'}
                       >
diff --git a/src/app-components/TextArea/TextArea.tsx b/src/app-components/TextArea/TextArea.tsx
index 4074cee620..42f625a5aa 100644
--- a/src/app-components/TextArea/TextArea.tsx
+++ b/src/app-components/TextArea/TextArea.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { Textarea } from '@digdir/designsystemet-react';
-import type { CharacterLimitProps } from '@digdir/designsystemet-react/dist/types/components/form/CharacterCounter';
+import { Field, Textarea } from '@digdir/designsystemet-react';
+import type { FieldCounterProps } from '@digdir/designsystemet-react';
 
 export interface TextAreaWithLabelProps {
   id: string;
@@ -9,7 +9,7 @@ export interface TextAreaWithLabelProps {
   onChange: (value: string) => void;
   onBlur?: () => void;
   readOnly?: boolean;
-  characterLimit?: CharacterLimitProps | undefined;
+  characterLimit?: FieldCounterProps | undefined;
   error?: boolean;
   dataTestId?: string;
   ariaDescribedBy?: string;
@@ -25,25 +25,25 @@ export const TextArea: React.FC<TextAreaWithLabelProps> = ({
   onBlur,
   readOnly = false,
   characterLimit,
-  error = false,
   dataTestId,
   ariaDescribedBy,
   ariaLabel,
   autoComplete,
   style,
 }) => (
-  <Textarea
-    id={id}
-    onChange={(e) => onChange(e.target.value)}
-    onBlur={onBlur}
-    readOnly={readOnly}
-    characterLimit={characterLimit}
-    error={error}
-    value={value}
-    data-testid={dataTestId}
-    aria-describedby={ariaDescribedBy}
-    aria-label={ariaLabel}
-    autoComplete={autoComplete}
-    style={style}
-  />
+  <Field>
+    <Textarea
+      id={id}
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onBlur}
+      readOnly={readOnly}
+      value={value}
+      data-testid={dataTestId}
+      aria-describedby={ariaDescribedBy}
+      aria-label={ariaLabel}
+      autoComplete={autoComplete}
+      style={style}
+    />
+    {characterLimit && <Field.Counter {...characterLimit} />}
+  </Field>
 );
diff --git a/src/components/AltinnSpinner.tsx b/src/components/AltinnSpinner.tsx
index cfb6643972..21e577d225 100644
--- a/src/components/AltinnSpinner.tsx
+++ b/src/components/AltinnSpinner.tsx
@@ -24,7 +24,6 @@ export const AltinnSpinner = (props: IAltinnSpinnerComponentProvidedProps) => {
     >
       <Spinner
         role='progressbar'
-        title={spinnerText || langAsString('general.loading')}
         aria-label={spinnerText || langAsString('general.loading')}
         id={id}
       />
diff --git a/src/components/CircleIcon.module.css b/src/components/CircleIcon.module.css
index a8381bd8aa..6845c0a01d 100644
--- a/src/components/CircleIcon.module.css
+++ b/src/components/CircleIcon.module.css
@@ -3,7 +3,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: var(--fds-semantic-surface-action-default);
+  background-color: var(--ds-color-accent-base-default);
   width: calc(var(--icon-size) * 0.75);
   height: calc(var(--icon-size) * 0.75);
   padding: calc(var(--icon-size) * 0.25);
diff --git a/src/components/PDFGeneratorPreview/PDFGeneratorPreview.tsx b/src/components/PDFGeneratorPreview/PDFGeneratorPreview.tsx
index db8aecd417..56da1fefad 100644
--- a/src/components/PDFGeneratorPreview/PDFGeneratorPreview.tsx
+++ b/src/components/PDFGeneratorPreview/PDFGeneratorPreview.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
 
-import { Modal, Spinner } from '@digdir/designsystemet-react';
+import { Dialog, Heading, Spinner } from '@digdir/designsystemet-react';
 import { FilePdfIcon } from '@navikt/aksel-icons';
 
 import { Button } from 'src/app-components/Button/Button';
 import classes from 'src/features/devtools/components/PDFPreviewButton/PDFPreview.module.css';
 import { useLaxInstanceId } from 'src/features/instance/InstanceContext';
-import { Lang } from 'src/features/language/Lang';
 import { useCurrentLanguage } from 'src/features/language/LanguageProvider';
 import { useLanguage } from 'src/features/language/useLanguage';
 import { getPdfPreviewUrl } from 'src/utils/urls/appUrlHelper';
@@ -73,10 +72,10 @@ export function PDFGeneratorPreview({
         />
         {buttonTitle ? langAsString(buttonTitle) : langAsString('pdfPreview.defaultButtonText')}
       </Button>
-      <Modal
+      <Dialog
         ref={modalRef}
         onClose={() => abortRef.current?.abort()}
-        onInteractOutside={() => modalRef.current?.close()}
+        closedby='any'
         className={classes.modal}
       >
         {blobUrl ? (
@@ -87,28 +86,24 @@ export function PDFGeneratorPreview({
           />
         ) : errorText ? (
           <div style={{ textAlign: 'center' }}>
-            <Modal.Header>
-              <Lang id='pdfPreview.error' />
-            </Modal.Header>
-            <Modal.Content>
-              {showErrorDetails &&
-                errorText.split('\n').map((line) => (
-                  <React.Fragment key={line}>
-                    {line}
-                    <br />
-                  </React.Fragment>
-                ))}
-            </Modal.Content>
+            <Heading id='pdfPreview.error' />
+            {showErrorDetails &&
+              errorText.split('\n').map((line) => (
+                <React.Fragment key={line}>
+                  {line}
+                  <br />
+                </React.Fragment>
+              ))}
           </div>
         ) : (
           <div className={classes.loading}>
             <Spinner
-              title={langAsString('general.loading')}
-              size='xlarge'
+              aria-label={langAsString('general.loading')}
+              data-size='xl'
             />
           </div>
         )}
-      </Modal>
+      </Dialog>
     </>
   );
 }
diff --git a/src/components/atoms/AltinnAttachment.module.css b/src/components/atoms/AltinnAttachment.module.css
index 593e4d285f..17a82414c5 100644
--- a/src/components/atoms/AltinnAttachment.module.css
+++ b/src/components/atoms/AltinnAttachment.module.css
@@ -19,7 +19,7 @@
 
 .attachmentLink:hover {
   border-bottom: none;
-  background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
+  background-color: var(--ds-color-accent-surface-default);
 }
 
 .attachmentIcon {
diff --git a/src/components/atoms/AltinnAttachments.tsx b/src/components/atoms/AltinnAttachments.tsx
index 82de2d751f..b138d1b53f 100644
--- a/src/components/atoms/AltinnAttachments.tsx
+++ b/src/components/atoms/AltinnAttachments.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { PropsWithChildren } from 'react';
 
-import { Link, List } from '@digdir/designsystemet-react';
+import { Heading, Link, List } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
 import classes from 'src/components/atoms/AltinnAttachment.module.css';
@@ -33,12 +33,22 @@ export function AltinnAttachments({
     .sort((a, b) => (a.name && b.name ? a.name.localeCompare(b.name, selectedLanguage, { numeric: true }) : 0));
 
   return (
-    <List.Root
+    <div
       id={id}
       data-testid='attachment-list'
     >
-      {title && <List.Heading>{title}</List.Heading>}
-      <List.Unordered className={classes.attachmentList}>
+      {title && (
+        <Heading
+          level={2}
+          data-size='xs'
+        >
+          {title}
+        </Heading>
+      )}
+      <List.Unordered
+        className={classes.attachmentList}
+        data-size='sm'
+      >
         {filteredAndSortedAttachments?.map((attachment, index) => (
           <Attachment
             key={index}
@@ -48,7 +58,7 @@ export function AltinnAttachments({
           />
         ))}
       </List.Unordered>
-    </List.Root>
+    </div>
   );
 }
 
diff --git a/src/components/form/Description.module.css b/src/components/form/Description.module.css
index 622c30d409..34a06a33d5 100644
--- a/src/components/form/Description.module.css
+++ b/src/components/form/Description.module.css
@@ -1,8 +1,8 @@
 .description {
   word-break: break-word;
-  line-height: var(--fds-sizing-6);
+  line-height: var(--ds-size-6);
   color: var(--semantic-text-neutral-subtle);
   display: inline-block;
   font-weight: normal;
-  font-size: var(--fds-sizing-4);
+  font-size: var(--ds-size-4);
 }
diff --git a/src/components/form/Fieldset.module.css b/src/components/form/Fieldset.module.css
index f2a8c6ff86..4225875ef4 100644
--- a/src/components/form/Fieldset.module.css
+++ b/src/components/form/Fieldset.module.css
@@ -8,5 +8,5 @@
 .description {
   font-size: 1.125rem;
   margin: 0;
-  padding-bottom: var(--fds-spacing-3);
+  padding-bottom: var(--ds-size-3);
 }
diff --git a/src/components/form/MessageBanner.module.css b/src/components/form/MessageBanner.module.css
index 27dd04c7d3..0036535e02 100644
--- a/src/components/form/MessageBanner.module.css
+++ b/src/components/form/MessageBanner.module.css
@@ -7,9 +7,9 @@
 }
 
 .default {
-  background-color: var(--fds-colors-grey-200);
+  background-color: var(--ds-color-neutral-surface-tinted);
 }
 
 .error {
-  background-color: var(--fds-colors-red-200);
+  background-color: var(--ds-color-danger-surface-active);
 }
diff --git a/src/components/form/MessageBanner.test.tsx b/src/components/form/MessageBanner.test.tsx
index 231fefd9fd..8290436f17 100644
--- a/src/components/form/MessageBanner.test.tsx
+++ b/src/components/form/MessageBanner.test.tsx
@@ -18,7 +18,7 @@ describe('MessageBanner', () => {
     expect(messageBanner).toBeInTheDocument();
     expect(messageBanner.className).toContain('default');
     const backgroundColor = window.getComputedStyle(messageBanner).backgroundColor;
-    const regularColor = window.getComputedStyle(document.body).getPropertyValue('--fds-colors-grey-200');
+    const regularColor = window.getComputedStyle(document.body).getPropertyValue('--ds-color-neutral-border-subtle');
     expect(backgroundColor).toEqual(regularColor);
   });
 
@@ -36,7 +36,7 @@ describe('MessageBanner', () => {
     expect(messageBanner).toBeInTheDocument();
     expect(messageBanner.className).toContain('error');
     const backgroundColor = window.getComputedStyle(messageBanner).backgroundColor;
-    const errorColor = window.getComputedStyle(document.body).getPropertyValue('--fds-colors-red-200');
+    const errorColor = window.getComputedStyle(document.body).getPropertyValue('--ds-color-danger-surface-active');
     expect(backgroundColor).toEqual(errorColor);
   });
 });
diff --git a/src/components/form/RadioButton.module.css b/src/components/form/RadioButton.module.css
index 87e4ae3ca6..0cf4d786d7 100644
--- a/src/components/form/RadioButton.module.css
+++ b/src/components/form/RadioButton.module.css
@@ -1,6 +1,6 @@
 .radioLabelContainer {
   display: flex;
-  gap: var(--fds-spacing-1);
+  gap: var(--ds-size-1);
   align-items: center;
 }
 
@@ -9,11 +9,11 @@
 }
 
 .card {
-  border-radius: 6px;
-  background-color: var(--fds-semantic-background-subtle);
+  border-radius: var(--ds-border-radius-md);
+  background-color: var(--ds-color-neutral-background-tinted);
   width: 100%;
-  padding: var(--fds-spacing-2);
-  margin-bottom: var(--fds-spacing-3);
+  padding: var(--ds-size-3);
+  margin-bottom: var(--ds-size-3);
   cursor: pointer;
 }
 
@@ -22,23 +22,25 @@
 }
 
 .card:hover {
-  background: var(--fds-semantic-surface-neutral-subtle-hover);
+  background: var(--ds-color-accent-surface-hover);
 }
 
 .card:active {
-  background: var(--fds-semantic-border-neutral-subtle);
+  background: var(--ds-color-neutral-border-subtle);
 }
 
 .card:is(:checked, :has(:checked)) {
-  background: var(--fds-semantic-surface-neutral-selected);
-  box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-first-active);
+  background: var(--ds-color-accent-surface-tinted);
+  box-shadow: 0 0 0 var(--ds-border-width-focus) var(--ds-color-accent-border-strong);
 }
 
 .card:has(:focus-visible) {
-  --fds-focus-border-width: 3px;
-  background: var(--fds-semantic-surface-neutral-selected);
+  box-shadow: 0 0 0 var(--ds-border-width-focus) var(--ds-color-focus-inner);
+  outline: var(--ds-border-width-focus) solid var(--ds-color-focus-outer);
+  outline-offset: var(--ds-border-width-focus);
+}
 
-  box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-inner-focus-border-color);
-  outline: var(--fds-focus-border-width) solid var(--fds-outer-focus-border-color);
-  outline-offset: var(--fds-focus-border-width);
+.card > div:has(:focus-visible) {
+  outline: none;
+  box-shadow: none;
 }
diff --git a/src/components/form/RadioButton.test.tsx b/src/components/form/RadioButton.test.tsx
index e80feba423..79febb1f2f 100644
--- a/src/components/form/RadioButton.test.tsx
+++ b/src/components/form/RadioButton.test.tsx
@@ -52,7 +52,10 @@ describe('RadioButton', () => {
     const helpTextButton = screen.getByRole('button', { name: /Hjelpetekst: trykk på knappen/i });
     expect(helpTextButton).toBeVisible();
     await userEvent.click(helpTextButton);
-    expect(await screen.findByRole('dialog')).toHaveTextContent('Hjelpetekst: trykk på knappen');
+    expect(screen.getByRole('button', { name: 'Hjelpetekst: trykk på knappen' })).toHaveAttribute(
+      'aria-expanded',
+      'true',
+    );
   });
   it('should render with hidden label', async () => {
     await render({ label: 'Dette er en knapp', hideLabel: true });
diff --git a/src/components/form/RadioButton.tsx b/src/components/form/RadioButton.tsx
index 016f286092..d57d864bc9 100644
--- a/src/components/form/RadioButton.tsx
+++ b/src/components/form/RadioButton.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
 
 import { Radio } from '@digdir/designsystemet-react';
 import cn from 'classnames';
@@ -11,9 +11,8 @@ import { DeleteWarningPopover } from 'src/features/alertOnChange/DeleteWarningPo
 import { useAlertOnChange } from 'src/features/alertOnChange/useAlertOnChange';
 import { useLanguage } from 'src/features/language/useLanguage';
 
-export interface IRadioButtonProps extends Omit<RadioProps, 'children'> {
+export interface IRadioButtonProps extends Omit<RadioProps, 'children' | 'aria-label' | 'aria-labelledby'> {
   showAsCard?: boolean;
-  label?: string;
   helpText?: React.ReactNode;
   hideLabel?: boolean;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -22,19 +21,21 @@ export interface IRadioButtonProps extends Omit<RadioProps, 'children'> {
   confirmChangeText?: string;
 }
 
-export const RadioButton = ({
-  showAsCard = false,
-  label,
-  helpText,
-  hideLabel,
-  onChange,
-  alertOnChange,
-  alertText,
-  confirmChangeText,
-  className,
-  ...rest
-}: IRadioButtonProps) => {
-  const inputRef = useRef<HTMLInputElement>(null);
+export const RadioButton = forwardRef<HTMLInputElement, IRadioButtonProps>(function RadioButton(
+  {
+    showAsCard = false,
+    helpText,
+    label,
+    hideLabel,
+    onChange,
+    alertOnChange,
+    alertText,
+    confirmChangeText,
+    className,
+    ...rest
+  },
+  forwardedRef,
+) {
   const { elementAsString } = useLanguage();
 
   const { alertOpen, setAlertOpen, handleChange, confirmChange, cancelChange } = useAlertOnChange(
@@ -42,20 +43,28 @@ export const RadioButton = ({
     onChange,
   );
 
+  const internalRef = useRef<HTMLInputElement | null>(null);
+
   const radioButton = (
     <Radio
       {...rest}
-      className={cn(classes.radioButton, className)}
-      onChange={handleChange}
-      ref={showAsCard ? inputRef : undefined}
-    >
-      {label && (
+      label={
         <div className={`${hideLabel ? 'sr-only' : ''} ${classes.radioLabelContainer}`}>
           {label}
           {helpText ? <HelpText title={elementAsString(helpText)}>{helpText}</HelpText> : null}
         </div>
-      )}
-    </Radio>
+      }
+      className={cn(classes.radioButton, className)}
+      onChange={handleChange}
+      ref={(elem) => {
+        internalRef.current = elem;
+        if (typeof forwardedRef === 'function') {
+          forwardedRef(elem);
+        } else if (forwardedRef) {
+          forwardedRef.current = elem;
+        }
+      }}
+    />
   );
   const cardElement = (
     /** This element is only clickable for visual
@@ -66,9 +75,7 @@ export const RadioButton = ({
       className={classes.card}
       data-testid={`test-id-${label}`}
       onClick={() => {
-        if (inputRef.current) {
-          inputRef.current.click();
-        }
+        internalRef.current?.click();
       }}
     >
       {radioButton}
@@ -94,4 +101,4 @@ export const RadioButton = ({
       {showAsCard ? cardElement : radioButton}
     </ConditionalWrapper>
   );
-};
+});
diff --git a/src/components/form/caption/Caption.module.css b/src/components/form/caption/Caption.module.css
index 174e3bf2f5..37292ce015 100644
--- a/src/components/form/caption/Caption.module.css
+++ b/src/components/form/caption/Caption.module.css
@@ -1,6 +1,6 @@
 .tableCaption {
   text-align: left;
-  padding-bottom: var(--fds-spacing-2);
+  padding-bottom: var(--ds-size-2);
 }
 
 .captionTitle {
@@ -10,11 +10,11 @@
 }
 
 .description {
-  padding-bottom: var(--fds-spacing-3);
+  padding-bottom: var(--ds-size-3);
 }
 
 .titleAndHelpWrapper {
   display: flex;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
   align-items: center;
 }
diff --git a/src/components/label/Label.module.css b/src/components/label/Label.module.css
index a18230d6ea..8004622a5a 100644
--- a/src/components/label/Label.module.css
+++ b/src/components/label/Label.module.css
@@ -1,6 +1,6 @@
 .fieldWrapper {
   display: grid;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
 }
 
 .fullWidth {
diff --git a/src/components/label/LabelContent.module.css b/src/components/label/LabelContent.module.css
index 4aa85c2098..96b3c4a86f 100644
--- a/src/components/label/LabelContent.module.css
+++ b/src/components/label/LabelContent.module.css
@@ -1,6 +1,6 @@
 .labelContainer {
   display: flex;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
   align-items: center;
 }
 
@@ -11,10 +11,10 @@
 .labelWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-1);
+  gap: var(--ds-size-1);
   align-items: flex-start;
 }
 
 .description {
-  padding-bottom: var(--fds-spacing-3);
+  padding-bottom: var(--ds-size-3);
 }
diff --git a/src/components/message/ErrorReport.module.css b/src/components/message/ErrorReport.module.css
index 6c26056466..918bb6d853 100644
--- a/src/components/message/ErrorReport.module.css
+++ b/src/components/message/ErrorReport.module.css
@@ -1,5 +1,5 @@
-.errorReport {
-  width: 100%;
+.errorSummary {
+  padding: var(--ds-size-4) var(--modal-padding-x);
 }
 
 .errorList {
@@ -8,12 +8,10 @@
   padding: 0;
 }
 
-.errorList li {
-  margin-bottom: 8px;
-}
 .errorList span {
   font-size: 1rem;
 }
+
 .errorList button {
   text-align: left;
   border-bottom: 2px solid transparent;
diff --git a/src/components/message/ErrorReport.tsx b/src/components/message/ErrorReport.tsx
index 9c188639c5..2b32c0460f 100644
--- a/src/components/message/ErrorReport.tsx
+++ b/src/components/message/ErrorReport.tsx
@@ -1,16 +1,17 @@
 import React, { createContext, useContext } from 'react';
-import { Link } from 'react-router-dom';
 import type { PropsWithChildren } from 'react';
 
+import { ErrorSummary } from '@digdir/designsystemet-react';
+
 import { Flex } from 'src/app-components/Flex/Flex';
-import { PANEL_VARIANT } from 'src/app-components/Panel/constants';
-import { Panel } from 'src/app-components/Panel/Panel';
+import { FullWidthWrapper } from 'src/app-components/FullWidthWrapper/FullWidthWrapper';
 import classes from 'src/components/message/ErrorReport.module.css';
 import { useAllAttachments } from 'src/features/attachments/hooks';
 import { FileScanResults } from 'src/features/attachments/types';
 import { useNavigateToNode } from 'src/features/form/layout/NavigateToNode';
 import { Lang } from 'src/features/language/Lang';
 import { useSelectedParty } from 'src/features/party/PartiesProvider';
+import { useIsMobile } from 'src/hooks/useDeviceWidths';
 import { isAxiosError } from 'src/utils/isAxiosError';
 import { DataModelLocationProviderFromNode } from 'src/utils/layout/DataModelLocation';
 import { Hidden, useNode } from 'src/utils/layout/NodesContext';
@@ -36,17 +37,18 @@ const ErrorReportContext = createContext(false);
 
 export const ErrorReport = ({ children, errors, show }: IErrorReportProps) => {
   const hasErrorReport = useContext(ErrorReportContext);
+  const isMobile = useIsMobile();
   if (errors === undefined || hasErrorReport || !show) {
     return children;
   }
 
   return (
     <ErrorReportContext.Provider value={true}>
-      <div data-testid='ErrorReport'>
-        <Panel
-          title={<Lang id='form_filler.error_report_header' />}
-          variant={PANEL_VARIANT.Error}
-          isOnBottom
+      <FullWidthWrapper isOnBottom={true}>
+        <ErrorSummary
+          data-testid='ErrorReport'
+          className={classes.errorSummary}
+          data-size={isMobile ? 'md' : 'lg'}
         >
           <Flex
             container
@@ -58,18 +60,21 @@ export const ErrorReport = ({ children, errors, show }: IErrorReportProps) => {
               item
               size={{ xs: 12 }}
             >
-              <ul className={classes.errorList}>{errors}</ul>
+              <ErrorSummary.Heading>
+                <Lang id='form_filler.error_report_header' />
+              </ErrorSummary.Heading>
+              <ErrorSummary.List className={classes.errorList}>{errors}</ErrorSummary.List>
             </Flex>
             {children}
           </Flex>
-        </Panel>
-      </div>
+        </ErrorSummary>
+      </FullWidthWrapper>
     </ErrorReportContext.Provider>
   );
 };
 
 function ErrorReportListItem({ children }: PropsWithChildren) {
-  return <li style={{ listStyleImage: listStyleImg }}>{children}</li>;
+  return <ErrorSummary.Item style={{ listStyleImage: listStyleImg }}>{children}</ErrorSummary.Item>;
 }
 
 interface ErrorReportListProps {
@@ -152,9 +157,9 @@ export function ErrorListFromInstantiation({ error }: { error: unknown }) {
             params={[selectedParty?.name]}
           />{' '}
           (
-          <Link to='/party-selection/'>
+          <ErrorSummary.Link href='/party-selection/'>
             <Lang id='party_selection.change_party' />
-          </Link>
+          </ErrorSummary.Link>
           ).
         </span>
       </ErrorReportListItem>
diff --git a/src/components/molecules/AltinnCollapsibleAttachments.tsx b/src/components/molecules/AltinnCollapsibleAttachments.tsx
index 93c22c049c..39d708ba60 100644
--- a/src/components/molecules/AltinnCollapsibleAttachments.tsx
+++ b/src/components/molecules/AltinnCollapsibleAttachments.tsx
@@ -48,7 +48,7 @@ export function AltinnCollapsibleAttachments({
             fontSize='1.5rem'
             className={cn({ [classes.transformArrowRight]: !open }, classes.transition)}
           />
-          <Heading size='xs'>
+          <Heading data-size='xs'>
             {title} {attachmentCount}
           </Heading>
         </div>
diff --git a/src/components/organisms/AltinnReceipt.tsx b/src/components/organisms/AltinnReceipt.tsx
index e7bda66837..b9fb40b37b 100644
--- a/src/components/organisms/AltinnReceipt.tsx
+++ b/src/components/organisms/AltinnReceipt.tsx
@@ -42,7 +42,7 @@ export function ReceiptComponent({
     >
       <Heading
         level={2}
-        size='medium'
+        data-size='md'
       >
         {title}
       </Heading>
@@ -69,7 +69,7 @@ export function ReceiptComponent({
           {titleSubmitted && (
             <Heading
               level={3}
-              size='small'
+              data-size='sm'
               style={{
                 paddingTop: '2.562rem',
                 paddingBottom: '0.3125rem',
diff --git a/src/components/organisms/AltinnReceiptSimple.tsx b/src/components/organisms/AltinnReceiptSimple.tsx
index 5153679267..ff051f1ca5 100644
--- a/src/components/organisms/AltinnReceiptSimple.tsx
+++ b/src/components/organisms/AltinnReceiptSimple.tsx
@@ -15,7 +15,7 @@ export function ReceiptComponentSimple({ title, body }: IReceiptComponentProps)
     <div className={classes.wordBreak}>
       <Heading
         level={2}
-        size='medium'
+        data-size='md'
       >
         {title}
       </Heading>
diff --git a/src/components/presentation/AppHeader/AppHeader.test.tsx b/src/components/presentation/AppHeader/AppHeader.test.tsx
index b47a60f9f3..078b25931f 100644
--- a/src/components/presentation/AppHeader/AppHeader.test.tsx
+++ b/src/components/presentation/AppHeader/AppHeader.test.tsx
@@ -77,7 +77,7 @@ describe('presentation/AppHeader', () => {
       ),
     );
     expect(
-      screen.getByRole('menuitem', {
+      screen.getByRole('link', {
         name: /logg ut/i,
         hidden: true,
       }),
diff --git a/src/components/presentation/AppHeader/AppHeaderMenu.module.css b/src/components/presentation/AppHeader/AppHeaderMenu.module.css
index 2f2ff87d65..48b75cd96a 100644
--- a/src/components/presentation/AppHeader/AppHeaderMenu.module.css
+++ b/src/components/presentation/AppHeader/AppHeaderMenu.module.css
@@ -10,6 +10,6 @@
 }
 
 .button-active {
-  background-color: var(--fds-semantic-surface-action-first-no_fill-active);
-  color: var(--fds-semantic-text-action-first-active);
+  background-color: var(--ds-color-accent-surface-hover);
+  color: var(--ds-color-accent-base-active);
 }
diff --git a/src/components/presentation/AppHeader/AppHeaderMenu.tsx b/src/components/presentation/AppHeader/AppHeaderMenu.tsx
index 63a551cfaf..e4f880210d 100644
--- a/src/components/presentation/AppHeader/AppHeaderMenu.tsx
+++ b/src/components/presentation/AppHeader/AppHeaderMenu.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { DropdownMenu } from '@digdir/designsystemet-react';
+import { Button, Dropdown } from '@digdir/designsystemet-react';
 import { Buildings3Icon, PersonIcon } from '@navikt/aksel-icons';
 import cn from 'classnames';
 
@@ -33,13 +33,8 @@ export function AppHeaderMenu({ logoColor }: AppHeaderMenuProps) {
   return (
     <>
       <span className={classes.partyName}>{displayName}</span>
-      <DropdownMenu
-        size='sm'
-        open={isOpen}
-        onClose={() => setIsOpen(false)}
-      >
-        <DropdownMenu.Trigger
-          size='sm'
+      <Dropdown.TriggerContext>
+        <Dropdown.Trigger
           variant='tertiary'
           style={{ padding: 0, borderRadius: '50%' }}
           aria-label={langAsString('general.header_profile_icon_label')}
@@ -62,17 +57,28 @@ export function AppHeaderMenu({ logoColor }: AppHeaderMenuProps) {
               />
             )}
           </CircleIcon>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content>
-          <DropdownMenu.Group heading={isMobile ? displayName : undefined}>
-            <DropdownMenu.Item asChild>
-              <a href={logoutUrlAltinn(window.location.host)}>
-                <Lang id='general.log_out' />
-              </a>
-            </DropdownMenu.Item>
-          </DropdownMenu.Group>
-        </DropdownMenu.Content>
-      </DropdownMenu>
+        </Dropdown.Trigger>
+        <Dropdown
+          data-testid='app-header-menu'
+          data-size='sm'
+          open={isOpen}
+          onClose={() => setIsOpen(false)}
+        >
+          {isMobile && <Dropdown.Heading>{displayName}</Dropdown.Heading>}
+          <Dropdown.List>
+            <Dropdown.Item>
+              <Button
+                variant='tertiary'
+                asChild
+              >
+                <a href={logoutUrlAltinn(window.location.host)}>
+                  <Lang id='general.log_out' />
+                </a>
+              </Button>
+            </Dropdown.Item>
+          </Dropdown.List>
+        </Dropdown>
+      </Dropdown.TriggerContext>
     </>
   );
 }
diff --git a/src/components/presentation/BackNavigationButton.tsx b/src/components/presentation/BackNavigationButton.tsx
index 36c638c475..641eb7a0fe 100644
--- a/src/components/presentation/BackNavigationButton.tsx
+++ b/src/components/presentation/BackNavigationButton.tsx
@@ -32,9 +32,9 @@ export function BackNavigationButton(props: Parameters<typeof Button>[0]) {
   if (isFetchingReturnUrl) {
     return (
       <Spinner
-        size='sm'
+        data-size='sm'
         className={classes.spinner}
-        title={langAsString('general.loading')}
+        aria-label={langAsString('general.loading')}
       />
     );
   }
diff --git a/src/components/presentation/ExpandWidthButton.tsx b/src/components/presentation/ExpandWidthButton.tsx
index cb33c975b0..60c9426f63 100644
--- a/src/components/presentation/ExpandWidthButton.tsx
+++ b/src/components/presentation/ExpandWidthButton.tsx
@@ -17,7 +17,7 @@ export function ExpandWidthButton(props: Parameters<typeof Button>[0]) {
       onClick={toggleExpandedWidth}
       variant='tertiary'
       color='first'
-      size='sm'
+      data-size='sm'
       {...props}
       className={cn(classes.expandWidthButton, props.className)}
     >
diff --git a/src/components/presentation/Header.tsx b/src/components/presentation/Header.tsx
index be05235cac..b1f2680ce1 100644
--- a/src/components/presentation/Header.tsx
+++ b/src/components/presentation/Header.tsx
@@ -33,7 +33,7 @@ const InnerHeader = ({ header, aboveHeader, children }: IInnerHeaderProps) => (
         <Flex item>
           <Heading
             level={1}
-            size='medium'
+            data-size='md'
             className={cn({ [classes.noAboveHeader]: !aboveHeader })}
             data-testid='presentation-heading'
           >
diff --git a/src/components/presentation/LanguageSelector.module.css b/src/components/presentation/LanguageSelector.module.css
index 0035e989d1..7d8be457fd 100644
--- a/src/components/presentation/LanguageSelector.module.css
+++ b/src/components/presentation/LanguageSelector.module.css
@@ -15,6 +15,6 @@
 }
 
 .button-active {
-  background-color: var(--fds-semantic-surface-action-first-no_fill-active);
-  color: var(--fds-semantic-text-action-first-active);
+  background-color: var(--ds-color-accent-surface-hover);
+  color: var(--ds-color-accent-base-active);
 }
diff --git a/src/components/presentation/LanguageSelector.tsx b/src/components/presentation/LanguageSelector.tsx
index 157bc07551..e9eda04650 100644
--- a/src/components/presentation/LanguageSelector.tsx
+++ b/src/components/presentation/LanguageSelector.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { DropdownMenu } from '@digdir/designsystemet-react';
+import { Dropdown } from '@digdir/designsystemet-react';
 import { CheckmarkIcon, ChevronDownIcon, GlobeIcon } from '@navikt/aksel-icons';
 import cn from 'classnames';
 
@@ -33,13 +33,9 @@ export const LanguageSelector = () => {
   }
 
   return (
-    <DropdownMenu
-      size='sm'
-      open={isOpen}
-      onClose={() => setIsOpen(false)}
-    >
-      <DropdownMenu.Trigger
-        size='sm'
+    <Dropdown.TriggerContext>
+      <Dropdown.Trigger
+        data-size='sm'
         variant='tertiary'
         onClick={() => setIsOpen((o) => !o)}
         aria-label={langAsString('language.language_selection')}
@@ -54,30 +50,41 @@ export const LanguageSelector = () => {
           className={cn(classes.icon, { [classes.flipVertical]: isOpen })}
           aria-hidden
         />
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content role='menu'>
-        <DropdownMenu.Group heading={isMobile ? <Lang id='language.language_selection' /> : undefined}>
+      </Dropdown.Trigger>
+      <Dropdown
+        role='menu'
+        data-size='sm'
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+      >
+        {isMobile && (
+          <Dropdown.Heading>
+            <Lang id='language.language_selection' />
+          </Dropdown.Heading>
+        )}
+        <Dropdown.List>
           {appLanguages?.map((lang) => {
             const selected = currentLanguage === lang;
 
             return (
-              <DropdownMenu.Item
-                role='menuitemradio'
-                aria-checked={selected}
-                key={lang}
-                onClick={() => updateLanguage(lang)}
-              >
-                <CheckmarkIcon
-                  style={{ opacity: selected ? 1 : 0 }}
-                  className={cn(classes.icon, classes.checkmark)}
-                  aria-hidden
-                />
-                <Lang id={`language.full_name.${lang}`} />
-              </DropdownMenu.Item>
+              <Dropdown.Item key={lang}>
+                <Dropdown.Button
+                  onClick={() => updateLanguage(lang)}
+                  aria-checked={selected}
+                  role='menuitemradio'
+                >
+                  <CheckmarkIcon
+                    style={{ opacity: selected ? 1 : 0 }}
+                    className={cn(classes.icon, classes.checkmark)}
+                    aria-hidden
+                  />
+                  <Lang id={`language.full_name.${lang}`} />
+                </Dropdown.Button>
+              </Dropdown.Item>
             );
           })}
-        </DropdownMenu.Group>
-      </DropdownMenu.Content>
-    </DropdownMenu>
+        </Dropdown.List>
+      </Dropdown>
+    </Dropdown.TriggerContext>
   );
 };
diff --git a/src/components/presentation/NavBar.module.css b/src/components/presentation/NavBar.module.css
index 46e7e88c55..fd4d77a594 100644
--- a/src/components/presentation/NavBar.module.css
+++ b/src/components/presentation/NavBar.module.css
@@ -21,5 +21,5 @@
 }
 
 .button-margin {
-  margin-top: calc(2 * var(--fds-focus-border-width));
+  margin-top: calc(2 * var(--ds-border-width-focus));
 }
diff --git a/src/components/presentation/OrganisationLogo/OrganisationLogo.module.css b/src/components/presentation/OrganisationLogo/OrganisationLogo.module.css
index 6a979ccd13..8e98d26206 100644
--- a/src/components/presentation/OrganisationLogo/OrganisationLogo.module.css
+++ b/src/components/presentation/OrganisationLogo/OrganisationLogo.module.css
@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
 }
 
 .small {
diff --git a/src/components/presentation/Progress.module.css b/src/components/presentation/Progress.module.css
index f90c6d844a..b58f7f75e7 100644
--- a/src/components/presentation/Progress.module.css
+++ b/src/components/presentation/Progress.module.css
@@ -6,12 +6,12 @@
 }
 
 .circleBackground {
-  stroke: var(--fds-colors-blue-200);
+  stroke: var(--ds-color-accent-border-subtle);
 }
 
 .circleTransition {
   transition: stroke-dashoffset 1s ease-in-out;
-  stroke: var(--fds-colors-blue-900);
+  stroke: var(--ds-color-accent-base-active);
   stroke-dasharray: 100 100;
 }
 
diff --git a/src/features/alertOnChange/DeleteWarningPopover.module.css b/src/features/alertOnChange/DeleteWarningPopover.module.css
index eb3a485043..73cb5cde9e 100644
--- a/src/features/alertOnChange/DeleteWarningPopover.module.css
+++ b/src/features/alertOnChange/DeleteWarningPopover.module.css
@@ -1,6 +1,3 @@
-.popoverContent {
-  z-index: 1700;
-}
 .popoverButtonContainer {
   display: flex;
   flex-direction: row;
diff --git a/src/features/alertOnChange/DeleteWarningPopover.tsx b/src/features/alertOnChange/DeleteWarningPopover.tsx
index d4c037210a..75e3cad9a4 100644
--- a/src/features/alertOnChange/DeleteWarningPopover.tsx
+++ b/src/features/alertOnChange/DeleteWarningPopover.tsx
@@ -7,12 +7,13 @@ import classes from 'src/features/alertOnChange/DeleteWarningPopover.module.css'
 import { Lang } from 'src/features/language/Lang';
 
 export interface IDeleteWarningPopover {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   onPopoverDeleteClick: () => void;
   onCancelClick: () => void;
   deleteButtonText: string;
   messageText: React.ReactNode;
   open: boolean;
+  popoverId?: string;
   setOpen: (open: boolean) => void;
   placement?: 'bottom' | 'left' | 'right' | 'top';
 }
@@ -24,18 +25,25 @@ export function DeleteWarningPopover({
   deleteButtonText,
   messageText,
   placement = 'bottom',
+  popoverId,
   open,
   setOpen,
 }: IDeleteWarningPopover) {
   return (
-    <Popover
-      variant='warning'
-      placement={placement}
-      open={open}
-      onOpenChange={() => setOpen(!open)}
-    >
-      <Popover.Trigger asChild>{children}</Popover.Trigger>
-      <Popover.Content className={classes.popoverContent}>
+    <Popover.TriggerContext>
+      <Popover.Trigger
+        asChild
+        onClick={() => setOpen(!open)}
+      >
+        {children}
+      </Popover.Trigger>
+      <Popover
+        data-testid='delete-warning-popover'
+        id={popoverId}
+        open={open}
+        placement={placement}
+        data-color='warning'
+      >
         <div>{messageText}</div>
         <div className={classes.popoverButtonContainer}>
           <Button
@@ -52,7 +60,7 @@ export function DeleteWarningPopover({
             <Lang id='general.cancel' />
           </Button>
         </div>
-      </Popover.Content>
-    </Popover>
+      </Popover>
+    </Popover.TriggerContext>
   );
 }
diff --git a/src/features/dataLists/useDataListQuery.tsx b/src/features/dataLists/useDataListQuery.tsx
index e7635734ad..8d03f8128d 100644
--- a/src/features/dataLists/useDataListQuery.tsx
+++ b/src/features/dataLists/useDataListQuery.tsx
@@ -1,7 +1,6 @@
 import type { AriaAttributes } from 'react';
 
 import { useQuery } from '@tanstack/react-query';
-import type { SortDirection } from '@digdir/design-system-react/dist/types/components/legacy/LegacyTable/utils';
 import type { UseQueryResult } from '@tanstack/react-query';
 
 import { useAppQueries } from 'src/core/contexts/AppQueriesProvider';
@@ -13,6 +12,8 @@ import { getDataListsUrl } from 'src/utils/urls/appUrlHelper';
 import type { IDataList } from 'src/features/dataLists/index';
 import type { IMapping } from 'src/layout/common.generated';
 
+type SortDirection = 'asc' | 'desc' | 'notSortable' | 'notActive';
+
 export type Filter = {
   pageSize: number;
   pageNumber: number;
diff --git a/src/features/devtools/DevTools.module.css b/src/features/devtools/DevTools.module.css
index a820d3a728..7b6f03d052 100644
--- a/src/features/devtools/DevTools.module.css
+++ b/src/features/devtools/DevTools.module.css
@@ -18,8 +18,8 @@
   justify-content: center;
   height: 100%;
   text-align: center;
-  color: var(--fds-colors-red-600);
-  border: 3px solid var(--fds-colors-red-600);
+  color: var(--ds-color-danger-text-subtle);
+  border: 3px solid var(--ds-color-danger-border-strong);
 }
 
 .panel {
diff --git a/src/features/devtools/DevToolsControls.tsx b/src/features/devtools/DevToolsControls.tsx
index 1949884dc8..78fc9d29ce 100644
--- a/src/features/devtools/DevToolsControls.tsx
+++ b/src/features/devtools/DevToolsControls.tsx
@@ -30,7 +30,7 @@ export const DevToolsControls = () => {
   return (
     <Tabs
       className={classes.tabs}
-      size='small'
+      data-size='sm'
       value={activeTab}
       onChange={setActiveTab}
     >
@@ -52,7 +52,7 @@ export const DevToolsControls = () => {
         {isInForm && <Tabs.Tab value={DevToolsTab.Expressions}>{DevToolsTab.Expressions}</Tabs.Tab>}
         {/* <Tabs.Tab value={DevToolsTab.FeatureToggles}>{DevToolsTab.FeatureToggles}</Tabs.Tab> */}
       </Tabs.List>
-      <Tabs.Content value={DevToolsTab.General}>
+      <Tabs.Panel value={DevToolsTab.General}>
         <div className={classes.page}>
           <PDFPreviewButton />
           <DevNavigationButtons />
@@ -63,24 +63,24 @@ export const DevToolsControls = () => {
           <DownloadXMLButton />
           <ReactQueryDevtools initialIsOpen={false} />
         </div>
-      </Tabs.Content>
-      <Tabs.Content value={DevToolsTab.Logs}>
+      </Tabs.Panel>
+      <Tabs.Panel value={DevToolsTab.Logs}>
         <DevToolsLogs />
-      </Tabs.Content>
+      </Tabs.Panel>
       {isInForm && (
-        <Tabs.Content value={DevToolsTab.Layout}>
+        <Tabs.Panel value={DevToolsTab.Layout}>
           <LayoutInspector />
-        </Tabs.Content>
+        </Tabs.Panel>
       )}
       {isInForm && (
-        <Tabs.Content value={DevToolsTab.Components}>
+        <Tabs.Panel value={DevToolsTab.Components}>
           <NodeInspector />
-        </Tabs.Content>
+        </Tabs.Panel>
       )}
       {isInForm && (
-        <Tabs.Content value={DevToolsTab.Expressions}>
+        <Tabs.Panel value={DevToolsTab.Expressions}>
           <ExpressionPlayground />
-        </Tabs.Content>
+        </Tabs.Panel>
       )}
       {
         // <Tabs.Content value={DevToolsTab.FeatureToggles}>
diff --git a/src/features/devtools/components/DevHiddenFunctionality/DevHiddenFunctionality.tsx b/src/features/devtools/components/DevHiddenFunctionality/DevHiddenFunctionality.tsx
index 2456a08253..8046a3d27c 100644
--- a/src/features/devtools/components/DevHiddenFunctionality/DevHiddenFunctionality.tsx
+++ b/src/features/devtools/components/DevHiddenFunctionality/DevHiddenFunctionality.tsx
@@ -25,11 +25,12 @@ function InnerDevHiddenFunctionality() {
   const setShowHiddenComponents = useDevToolsStore((state) => state.actions.setShowHiddenComponents);
 
   return (
-    <Fieldset legend='Skjulte komponenter'>
+    <Fieldset>
+      <Fieldset.Legend>Skjulte komponenter</Fieldset.Legend>
       <MarkHiddenComponents />
       <div>
         <ToggleGroup
-          size='small'
+          data-size='sm'
           onChange={(selectedValue) => setShowHiddenComponents(selectedValue as IDevToolsState['hiddenComponents'])}
           value={state}
         >
diff --git a/src/features/devtools/components/DevLanguageSelector/DevLanguageSelector.tsx b/src/features/devtools/components/DevLanguageSelector/DevLanguageSelector.tsx
index 040de9ba8f..0636ebb582 100644
--- a/src/features/devtools/components/DevLanguageSelector/DevLanguageSelector.tsx
+++ b/src/features/devtools/components/DevLanguageSelector/DevLanguageSelector.tsx
@@ -6,7 +6,6 @@ import { LanguageSelector } from 'src/components/presentation/LanguageSelector';
 
 export const DevLanguageSelector = () => (
   <Fieldset
-    legend='Språk'
     style={{
       width: 250,
       display: 'flex',
@@ -15,6 +14,7 @@ export const DevLanguageSelector = () => (
       justifyContent: 'space-between',
     }}
   >
+    <Fieldset.Legend>Språk</Fieldset.Legend>
     <LanguageSelector />
   </Fieldset>
 );
diff --git a/src/features/devtools/components/DevNavigationButtons/DevNavigationButtons.tsx b/src/features/devtools/components/DevNavigationButtons/DevNavigationButtons.tsx
index 4b873fb6ec..43f7244450 100644
--- a/src/features/devtools/components/DevNavigationButtons/DevNavigationButtons.tsx
+++ b/src/features/devtools/components/DevNavigationButtons/DevNavigationButtons.tsx
@@ -71,26 +71,25 @@ const InnerDevNavigationButtons = () => {
   const compactView = allPages.length > 8;
 
   return (
-    <Fieldset legend='Navigasjon'>
+    <Fieldset
+      data-size='sm'
+      className={classes.chipGroup}
+    >
+      <Fieldset.Legend>Navigasjon</Fieldset.Legend>
       <div className={compactView ? classes.hidden : classes.responsiveButtons}>
-        <Chip.Group
-          size='small'
-          className={classes.chipGroup}
-        >
-          {orderedPages.map((page) => (
-            <Chip.Toggle
-              key={page}
-              className={isHidden(page) ? classes.hiddenPage : undefined}
-              title={hiddenText(page)}
-              // TODO(DevTools): Navigate to hidden pages is not working
-              disabled={isHidden(page)}
-              onClick={() => handleChange([page])}
-              selected={pageKey == page}
-            >
-              {page}
-            </Chip.Toggle>
-          ))}
-        </Chip.Group>
+        {orderedPages.map((page) => (
+          <Chip.Radio
+            key={page}
+            className={isHidden(page) ? classes.hiddenPage : undefined}
+            title={hiddenText(page)}
+            // TODO(DevTools): Navigate to hidden pages is not working
+            disabled={isHidden(page)}
+            onClick={() => handleChange([page])}
+            checked={pageKey == page}
+          >
+            {page}
+          </Chip.Radio>
+        ))}
       </div>
       <div className={cn(classes.dropdown, { [classes.responsiveDropdown]: !compactView })}>
         <Combobox
diff --git a/src/features/devtools/components/DevToolsLogs/DevToolsLogs.tsx b/src/features/devtools/components/DevToolsLogs/DevToolsLogs.tsx
index ea26170aa8..c5fdcf124f 100644
--- a/src/features/devtools/components/DevToolsLogs/DevToolsLogs.tsx
+++ b/src/features/devtools/components/DevToolsLogs/DevToolsLogs.tsx
@@ -71,6 +71,7 @@ export const DevToolsLogs = () => {
         </Button>
         <div className={classes.filterField}>
           <Input
+            aria-label='Filtrer logger'
             value={filter}
             onChange={(e) => setFilter(e.target.value)}
             placeholder='Filtrer logger'
diff --git a/src/features/devtools/components/DownloadXMLButton/DownloadXMLButton.tsx b/src/features/devtools/components/DownloadXMLButton/DownloadXMLButton.tsx
index c94c4e1e06..b5e67ec524 100644
--- a/src/features/devtools/components/DownloadXMLButton/DownloadXMLButton.tsx
+++ b/src/features/devtools/components/DownloadXMLButton/DownloadXMLButton.tsx
@@ -70,7 +70,8 @@ const InnerDownloadXMLButton = () => {
     }
   };
   return (
-    <Fieldset legend='Skjemadata'>
+    <Fieldset>
+      <Fieldset.Legend>Skejmadata</Fieldset.Legend>
       {writableDataTypes?.length > 1 && (
         <Combobox
           size='sm'
diff --git a/src/features/devtools/components/ExpressionPlayground/ExpressionPlayground.tsx b/src/features/devtools/components/ExpressionPlayground/ExpressionPlayground.tsx
index 1917b6f705..9d31d71336 100644
--- a/src/features/devtools/components/ExpressionPlayground/ExpressionPlayground.tsx
+++ b/src/features/devtools/components/ExpressionPlayground/ExpressionPlayground.tsx
@@ -92,7 +92,7 @@ export const ExpressionPlayground = () => {
           {outputs.length > 1 && (
             <div className={classes.outputs}>
               <Tabs
-                size='small'
+                data-size='sm'
                 value={activeOutputTab}
                 onChange={(outputName) => {
                   setActiveOutputTab(outputName);
@@ -114,7 +114,7 @@ export const ExpressionPlayground = () => {
                 {outputs.map((output, i) => {
                   const { key, value } = getTabKeyAndValue(i, output);
                   return (
-                    <Tabs.Content
+                    <Tabs.Panel
                       value={value}
                       key={key}
                     >
@@ -125,7 +125,7 @@ export const ExpressionPlayground = () => {
                         value={output.value}
                         placeholder='Resultatet av uttrykket vises her'
                       />
-                    </Tabs.Content>
+                    </Tabs.Panel>
                   );
                 })}
               </Tabs>
@@ -133,7 +133,8 @@ export const ExpressionPlayground = () => {
           )}
         </SplitView>
         <div className={classes.rightColumn}>
-          <Fieldset legend='Kjør uttrykk i kontekst av komponent'>
+          <Fieldset>
+            <Fieldset.Legend>Kjør uttrykk i kontekst av komponent</Fieldset.Legend>
             <Combobox
               size='sm'
               value={selectedContext}
@@ -181,14 +182,14 @@ export const ExpressionPlayground = () => {
                   setShowAllSteps(ev.target.checked);
                 }}
                 value='nothing'
-              >
-                Vis alle steg i evalueringen
-              </Checkbox>
+                label='Vis alle steg i evalueringen'
+              />
             </div>
           </Fieldset>
           <br />
           <br />
-          <Fieldset legend='Dokumentasjon'>
+          <Fieldset>
+            <Fieldset.Legend>Dokumentasjon</Fieldset.Legend>
             Les mer om uttrykk{' '}
             <a
               href='https://docs.altinn.studio/nb/altinn-studio/reference/logic/expressions/'
diff --git a/src/features/devtools/components/LayoutInspector/LayoutInspector.tsx b/src/features/devtools/components/LayoutInspector/LayoutInspector.tsx
index 3af242e4c2..d0d7d0a0eb 100644
--- a/src/features/devtools/components/LayoutInspector/LayoutInspector.tsx
+++ b/src/features/devtools/components/LayoutInspector/LayoutInspector.tsx
@@ -142,7 +142,7 @@ export const LayoutInspector = () => {
             {validationErrorsForPage[selectedComponent] && validationErrorsForPage[selectedComponent].length > 0 && (
               <Alert
                 className={classes.errorAlert}
-                severity='warning'
+                data-color='warning'
               >
                 <div className={classes.errorList}>
                   <ul>
diff --git a/src/features/devtools/components/NodeInspector/NodeInspector.tsx b/src/features/devtools/components/NodeInspector/NodeInspector.tsx
index d71ca118c9..a4bba14ff3 100644
--- a/src/features/devtools/components/NodeInspector/NodeInspector.tsx
+++ b/src/features/devtools/components/NodeInspector/NodeInspector.tsx
@@ -66,7 +66,7 @@ export const NodeInspector = () => {
             }}
           >
             <Tabs
-              size='small'
+              data-size='sm'
               defaultValue='properties'
               className={reusedClasses.tabs}
             >
@@ -74,7 +74,7 @@ export const NodeInspector = () => {
                 <Tabs.Tab value='properties'>Egenskaper</Tabs.Tab>
                 {implementsAnyValidation(selectedNode.def) && <Tabs.Tab value='validation'>Validering</Tabs.Tab>}
               </Tabs.List>
-              <Tabs.Content value='properties'>
+              <Tabs.Panel value='properties'>
                 <div className={reusedClasses.properties}>
                   <div className={reusedClasses.headerLink}>
                     <a
@@ -90,12 +90,12 @@ export const NodeInspector = () => {
                   {/*  eslint-disable-next-line @typescript-eslint/no-explicit-any */}
                   {selectedNode.def.renderDevToolsInspector(selectedNode as any)}
                 </div>
-              </Tabs.Content>
-              <Tabs.Content value='validation'>
+              </Tabs.Panel>
+              <Tabs.Panel value='validation'>
                 <div className={reusedClasses.scrollable}>
                   <ValidationInspector node={selectedNode} />
                 </div>
-              </Tabs.Content>
+              </Tabs.Panel>
             </Tabs>
           </NodeInspectorContextProvider>
         </>
diff --git a/src/features/devtools/components/PDFPreviewButton/PDFPreviewButton.tsx b/src/features/devtools/components/PDFPreviewButton/PDFPreviewButton.tsx
index d4bf664947..74ae8481a6 100644
--- a/src/features/devtools/components/PDFPreviewButton/PDFPreviewButton.tsx
+++ b/src/features/devtools/components/PDFPreviewButton/PDFPreviewButton.tsx
@@ -16,19 +16,19 @@ export const PDFPreviewButton = () => {
   const setPdfPreview = useDevToolsStore((state) => state.actions.setPdfPreview);
 
   return (
-    <Fieldset
-      legend='Forhåndsvis PDF'
-      description={
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        !(window as any).chrome ? (
-          <span>
-            Vær oppmerksom på at <code>Forhåndsvis PDF</code> ikke vil se riktig ut i andre nettlesere enn Google
-            Chrome.
-          </span>
-        ) : undefined
-      }
-      className={classes.fieldset}
-    >
+    <Fieldset className={classes.fieldset}>
+      <Fieldset.Legend>Forhåndsvis PDF</Fieldset.Legend>
+      <Fieldset.Description>
+        {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          !(window as any).chrome ? (
+            <span>
+              Vær oppmerksom på at <code>Forhåndsvis PDF</code> ikke vil se riktig ut i andre nettlesere enn Google
+              Chrome.
+            </span>
+          ) : undefined
+        }
+      </Fieldset.Description>
       <Button
         onClick={() => setPdfPreview(true)}
         disabled={taskType !== ProcessTaskType.Data}
diff --git a/src/features/devtools/components/PermissionsEditor/PermissionsEditor.tsx b/src/features/devtools/components/PermissionsEditor/PermissionsEditor.tsx
index fe7e59b62c..78bfa095cb 100644
--- a/src/features/devtools/components/PermissionsEditor/PermissionsEditor.tsx
+++ b/src/features/devtools/components/PermissionsEditor/PermissionsEditor.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Checkbox } from '@digdir/designsystemet-react';
+import { Checkbox, Fieldset } from '@digdir/designsystemet-react';
 
 import classes from 'src/features/devtools/components/PermissionsEditor/PermissionsEditor.module.css';
 import { useLaxInstanceId } from 'src/features/instance/InstanceContext';
@@ -25,12 +25,10 @@ export const PermissionsEditor = () => {
   }
 
   return (
-    <Checkbox.Group
-      legend='Policy'
-      className={classes.checkboxWrapper}
-    >
+    <Fieldset className={classes.checkboxWrapper}>
+      <Fieldset.Legend>Policy</Fieldset.Legend>
       <Checkbox
-        size='small'
+        data-size='sm'
         checked={Boolean(write)}
         onChange={(e) =>
           handleChange((obj) => {
@@ -39,11 +37,10 @@ export const PermissionsEditor = () => {
           })
         }
         value='nothing'
-      >
-        Write
-      </Checkbox>
+        label='Write'
+      />
       <Checkbox
-        size='small'
+        data-size='sm'
         checked={Boolean(actions?.confirm)}
         onChange={(e) =>
           handleChange((obj) => {
@@ -52,11 +49,10 @@ export const PermissionsEditor = () => {
           })
         }
         value='nothing'
-      >
-        Confirm
-      </Checkbox>
+        label='Confirm'
+      />
       <Checkbox
-        size='small'
+        data-size='sm'
         checked={Boolean(actions?.sign)}
         onChange={(e) =>
           handleChange((obj) => {
@@ -65,11 +61,10 @@ export const PermissionsEditor = () => {
           })
         }
         value='nothing'
-      >
-        Sign
-      </Checkbox>
+        label='Sign'
+      />
       <Checkbox
-        size='small'
+        data-size='sm'
         checked={Boolean(actions?.reject)}
         onChange={(e) =>
           handleChange((obj) => {
@@ -78,9 +73,8 @@ export const PermissionsEditor = () => {
           })
         }
         value='nothing'
-      >
-        Reject
-      </Checkbox>
-    </Checkbox.Group>
+        label='Reject'
+      />
+    </Fieldset>
   );
 };
diff --git a/src/features/devtools/components/VersionSwitcher/VersionSwitcher.tsx b/src/features/devtools/components/VersionSwitcher/VersionSwitcher.tsx
index e8948278b0..f5b6a498c0 100644
--- a/src/features/devtools/components/VersionSwitcher/VersionSwitcher.tsx
+++ b/src/features/devtools/components/VersionSwitcher/VersionSwitcher.tsx
@@ -47,7 +47,7 @@ export const VersionSwitcher = () => {
   };
 
   if (isVersionsLoading || isHtmlLoading || !versions) {
-    return <Spinner title='Laster...' />;
+    return <Spinner aria-label='Laster...' />;
   }
 
   if (isVersionsError || isHtmlError) {
@@ -55,10 +55,8 @@ export const VersionSwitcher = () => {
   }
 
   return (
-    <Fieldset
-      legend='Frontend versjon'
-      style={{ width: 250 }}
-    >
+    <Fieldset style={{ width: 250 }}>
+      <Fieldset.Legend>Frontend versjon</Fieldset.Legend>
       <Combobox
         size='sm'
         value={selectedVersion ? [selectedVersion] : []}
diff --git a/src/features/footer/Footer.module.css b/src/features/footer/Footer.module.css
index 0e03828b07..535845c152 100644
--- a/src/features/footer/Footer.module.css
+++ b/src/features/footer/Footer.module.css
@@ -28,7 +28,7 @@
 
 .separator {
   margin: 36px 0;
-  background-color: var(--fds-semantic-surface-neutral-dark);
+  background-color: var(----ds-color-neutral-base-default);
   height: 1px;
   width: 100%;
 }
diff --git a/src/features/instantiate/containers/PartySelection.tsx b/src/features/instantiate/containers/PartySelection.tsx
index 50f827eab4..e32e85fc69 100644
--- a/src/features/instantiate/containers/PartySelection.tsx
+++ b/src/features/instantiate/containers/PartySelection.tsx
@@ -175,23 +175,21 @@ export const PartySelection = () => {
             >
               <Flex item>
                 <Checkbox
-                  size='sm'
+                  data-size='sm'
                   value='showDeleted'
                   checked={showDeleted}
                   onChange={toggleShowDeleted}
-                >
-                  <Lang id='party_selection.show_deleted' />
-                </Checkbox>
+                  label={<Lang id='party_selection.show_deleted' />}
+                />
               </Flex>
               <Flex item>
                 <Checkbox
-                  size='sm'
+                  data-size='sm'
                   value='showSubUnits'
                   checked={showSubUnits}
                   onChange={toggleShowSubUnits}
-                >
-                  <Lang id='party_selection.show_sub_unit' />
-                </Checkbox>
+                  label={<Lang id='party_selection.show_sub_unit' />}
+                />
               </Flex>
             </Flex>
           </Flex>
@@ -201,7 +199,7 @@ export const PartySelection = () => {
           <Flex style={{ padding: 12 }}>
             <Heading
               level={2}
-              size='medium'
+              data-size='md'
               style={{ fontSize: '1.5rem', fontWeight: '500', marginBottom: 12 }}
             >
               <Lang id='party_selection.why_seeing_this' />
diff --git a/src/features/instantiate/instantiateHeader/InstantiateHeader.module.css b/src/features/instantiate/instantiateHeader/InstantiateHeader.module.css
index 79b92596a7..8600fb2835 100644
--- a/src/features/instantiate/instantiateHeader/InstantiateHeader.module.css
+++ b/src/features/instantiate/instantiateHeader/InstantiateHeader.module.css
@@ -17,11 +17,11 @@
 }
 
 .header-link a {
-  color: var(--fds-semantic-surface-action-default);
+  color: var(--ds-color-accent-base-default);
   border-bottom: 0;
 }
 .header-link a:hover {
-  border-bottom: 3px solid var(--fds-semantic-surface-action-default);
+  border-bottom: 3px solid var(--ds-color-accent-base-default);
 }
 
 .header-link-list {
diff --git a/src/features/instantiate/selection/InstanceSelection.module.css b/src/features/instantiate/selection/InstanceSelection.module.css
index cf41f1dbae..e19896805d 100644
--- a/src/features/instantiate/selection/InstanceSelection.module.css
+++ b/src/features/instantiate/selection/InstanceSelection.module.css
@@ -36,19 +36,17 @@ Altinn, and making sure they are consistent. */
   padding-top: 12px;
   padding-bottom: 12px;
 }
+
+.table tfoot td {
+  background-color: #f5f5f5;
+  border-top: none;
+}
 /* ==== */
 
 .table tr:hover {
   background-color: unset;
 }
 
-.tableFooter {
-  background-color: #f5f5f5; /* Remove this when upgrading to the new design system component look*/
-}
-tr.tableFooter:hover {
-  background-color: var(--fds-semantic-background-subtle);
-}
-
 .startNewButtonContainer {
   margin-top: 12px;
 }
diff --git a/src/features/instantiate/selection/InstanceSelection.tsx b/src/features/instantiate/selection/InstanceSelection.tsx
index acef6e66b6..d0627538bc 100644
--- a/src/features/instantiate/selection/InstanceSelection.tsx
+++ b/src/features/instantiate/selection/InstanceSelection.tsx
@@ -77,15 +77,15 @@ function InstanceSelection() {
     selectedIndex !== undefined && rowsPerPageOptions.length - 1 >= selectedIndex && selectedIndex >= 0;
 
   const defaultSelectedOption = doesIndexExist(selectedIndex) ? selectedIndex : 0;
-  const [currentPage, setCurrentPage] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1);
   const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageOptions[defaultSelectedOption]);
 
   const instances = instanceSelectionOptions?.sortDirection === 'desc' ? [..._instances].reverse() : _instances;
-  const paginatedInstances = instances.slice(currentPage * rowsPerPage, (currentPage + 1) * rowsPerPage);
+  const paginatedInstances = instances.slice((currentPage - 1) * rowsPerPage, currentPage * rowsPerPage);
 
   function handleRowsPerPageChanged(newRowsPerPage: number) {
     setRowsPerPage(newRowsPerPage);
-    if (instances.length < currentPage * newRowsPerPage) {
+    if (instances.length < (currentPage - 1) * newRowsPerPage) {
       setCurrentPage(Math.floor(instances.length / newRowsPerPage));
     }
   }
@@ -93,7 +93,7 @@ function InstanceSelection() {
   const renderMobileTable = () => (
     <>
       <Heading
-        size='xsmall'
+        data-size='xs'
         level={3}
         className={classes.leftOffHeading}
       >
@@ -153,13 +153,13 @@ function InstanceSelection() {
                     previousLabelAriaLabel={langAsString('list_component.previousPageAriaLabel')}
                     rowsPerPageText={langAsString('list_component.rowsPerPage')}
                     size='sm'
-                    currentPage={currentPage}
                     numberOfRows={instances.length}
-                    pageSize={rowsPerPage}
                     showRowsPerPageDropdown={true}
                     rowsPerPageOptions={rowsPerPageOptions}
-                    onPageSizeChange={(value) => handleRowsPerPageChanged(+value)}
-                    onChange={setCurrentPage}
+                    currentPage={currentPage}
+                    setCurrentPage={setCurrentPage}
+                    pageSize={rowsPerPage}
+                    onPageSizeChange={(value) => handleRowsPerPageChanged(value)}
                   />
                 </div>
               </Table.Cell>
@@ -232,7 +232,7 @@ function InstanceSelection() {
                     pageSize={rowsPerPage}
                     rowsPerPageOptions={rowsPerPageOptions}
                     onPageSizeChange={(value) => handleRowsPerPageChanged(+value)}
-                    onChange={setCurrentPage}
+                    setCurrentPage={setCurrentPage}
                   />
                 </div>
               </Table.Cell>
@@ -253,7 +253,7 @@ function InstanceSelection() {
         <div>
           <Heading
             level={2}
-            size='medium'
+            data-size='md'
             id='instance-selection-header'
           >
             <Lang id='instance_selection.header' />
diff --git a/src/features/language/Lang.test.tsx b/src/features/language/Lang.test.tsx
index e8ecfa2e90..539c056def 100644
--- a/src/features/language/Lang.test.tsx
+++ b/src/features/language/Lang.test.tsx
@@ -45,7 +45,7 @@ describe('Lang', () => {
         <LanguageProvider>
           <div data-testid='test-subject'>
             <Lang
-              id='input_components.remaining_characters'
+              id='general.progress'
               params={[
                 <Lang
                   key={0}
@@ -63,7 +63,7 @@ describe('Lang', () => {
     });
 
     expect(console.error).not.toHaveBeenCalled();
-    expect(screen.getByTestId('test-subject')).toHaveTextContent('Du har innboks av profil tegn igjen');
+    expect(screen.getByTestId('test-subject')).toHaveTextContent('Side innboks av profil');
   });
 
   it('should fallback if Language is not provided', async () => {
diff --git a/src/features/language/useLanguage.test.tsx b/src/features/language/useLanguage.test.tsx
index f506dff9d0..62593b2d1c 100644
--- a/src/features/language/useLanguage.test.tsx
+++ b/src/features/language/useLanguage.test.tsx
@@ -31,7 +31,7 @@ const TestComplexAsString = () => {
     '<strong>hello world</strong>',
     <span key={0}>
       <Lang
-        id='input_components.character_limit_sr_label'
+        id='form_filler.error_required'
         params={[
           <div key={0}>
             {'et hundre og '}
@@ -43,7 +43,7 @@ const TestComplexAsString = () => {
     </span>,
   ];
 
-  const langId = 'input_components.remaining_characters';
+  const langId = 'general.progress';
 
   return (
     <>
@@ -99,7 +99,7 @@ describe('useLanguage', () => {
       renderer: () => <TestComplexAsString />,
     });
 
-    const expected = 'Du har hello world av Tekstfeltet kan inneholde maks et hundre og Hjelp tegn tegn igjen';
+    const expected = 'Side hello world av Du må fylle ut et hundre og Hjelp';
 
     expect(screen.getByTestId('subject1')).toHaveTextContent(expected);
     expect(screen.getByTestId('subject2')).toHaveTextContent(expected);
@@ -131,17 +131,23 @@ describe('useLanguage', () => {
 
     expect(screen.getByTestId('as-string').innerHTML).toEqual('This is my message');
     expect(screen.getByTestId('as-element')).toHaveTextContent('This is my message');
-    expect(screen.getByTestId('as-element').innerHTML).toMatch(/<h1 class="[a-z0-9- ]*">This is my message<\/h1>/);
+    expect(screen.getByTestId('as-element').innerHTML).toMatch(
+      /<h1 class="[a-z0-9- ]*" data-size="[a-z]{2}">This is my message<\/h1>/,
+    );
 
     rerender(<TestSimple input='simpleHtml' />);
     expect(screen.getByTestId('as-string').innerHTML).toEqual('This is my message');
     expect(screen.getByTestId('as-element')).toHaveTextContent('This is my message');
-    expect(screen.getByTestId('as-element').innerHTML).toMatch(/<h1 class="[a-z0-9- ]*">This is my message<\/h1>/);
+    expect(screen.getByTestId('as-element').innerHTML).toMatch(
+      /<h1 class="[a-z0-9- ]*" data-size="[a-z]{2}">This is my message<\/h1>/,
+    );
 
     rerender(<TestSimple input='simpleMarkdown' />);
     expect(screen.getByTestId('as-string').innerHTML).toEqual('This is my message');
     expect(screen.getByTestId('as-element')).toHaveTextContent('This is my message');
-    expect(screen.getByTestId('as-element').innerHTML).toMatch(/<h1 class="[a-z0-9- ]*">This is my message<\/h1>/);
+    expect(screen.getByTestId('as-element').innerHTML).toMatch(
+      /<h1 class="[a-z0-9- ]*" data-size="[a-z]{2}">This is my message<\/h1>/,
+    );
   });
 
   it('langAsString() should work with complex lookups and arrays', async () => {
diff --git a/src/features/navigation/AppNavigation.module.css b/src/features/navigation/AppNavigation.module.css
index 04b5219250..9a6291ff66 100644
--- a/src/features/navigation/AppNavigation.module.css
+++ b/src/features/navigation/AppNavigation.module.css
@@ -16,3 +16,8 @@
 .group-list > li:not(:last-child) {
   margin-bottom: 28px;
 }
+
+.closeButton {
+  margin-left: auto;
+  width: min-content;
+}
diff --git a/src/features/navigation/AppNavigation.tsx b/src/features/navigation/AppNavigation.tsx
index 8c2b00585e..591fe85408 100644
--- a/src/features/navigation/AppNavigation.tsx
+++ b/src/features/navigation/AppNavigation.tsx
@@ -90,7 +90,7 @@ export const appNavigationHeadingId = 'app-navigation-heading';
 export function AppNavigationHeading({
   showClose,
   onClose,
-}: { showClose?: undefined; onClose?: undefined } | { showClose: true; onClose: () => void }) {
+}: { showClose?: undefined; onClose?: undefined } | { showClose: boolean; onClose: () => void }) {
   const { langAsString } = useLanguage();
   return (
     <div
@@ -100,7 +100,7 @@ export function AppNavigationHeading({
       <Heading
         id='app-navigation-heading'
         level={3}
-        size='xs'
+        data-size='xs'
       >
         <Lang id='navigation.form_pages' />
       </Heading>
@@ -109,9 +109,10 @@ export function AppNavigationHeading({
           variant='tertiary'
           color='second'
           size='sm'
-          icon={true}
+          icon
           onClick={onClose}
           aria-label={langAsString('general.close')}
+          className={classes.closeButton}
         >
           <XMarkIcon aria-hidden />
         </Button>
diff --git a/src/features/navigation/PopoverNavigation.module.css b/src/features/navigation/PopoverNavigation.module.css
index 275ec3b4d5..77943233dc 100644
--- a/src/features/navigation/PopoverNavigation.module.css
+++ b/src/features/navigation/PopoverNavigation.module.css
@@ -1,39 +1,13 @@
-.popover-wrapper {
-  position: relative;
+.popoverButtonActive {
+  background-color: var(--ds-color-accent-surface-hover);
+  border-color: var(--ds-color-accent-base-active);
+  color: var(--ds-color-accent-base-active);
 }
 
-.popover-container {
-  border: none;
-  border-radius: 0;
-  box-shadow: 1px 1px 4px 0 rgb(137 137 137 / 50%);
-  width: 320px;
-  box-sizing: border-box;
-  padding: 16px;
-
-  /* Override positioning */
-  max-width: unset !important;
-  transform: unset !important;
-  will-change: unset !important;
-  top: calc(100% + 8px) !important;
-  left: 0 !important;
-  bottom: unset !important;
-  right: unset !important;
-}
-
-.popover-container :global(.fds-popover__arrow) {
-  display: none;
-}
-
-.popover-button-active {
-  background-color: var(--fds-semantic-surface-action-first-no_fill-active);
-  border-color: var(--fds-semantic-border-action-first-active);
-  color: var(--fds-semantic-text-action-first-active);
-}
-
-.popover-button-icon {
+.popoverButtonIcon {
   font-size: 1.2rem;
 }
-.popover-button-icon-margin {
+.popoverButtonIconMargin {
   margin-right: 4px;
 }
 
@@ -43,9 +17,8 @@
   height: 90vh;
 }
 
-.modal-container {
+.modalContainer {
   box-sizing: border-box;
   padding: 16px;
-  max-height: unset;
   height: 100%;
 }
diff --git a/src/features/navigation/PopoverNavigation.tsx b/src/features/navigation/PopoverNavigation.tsx
index 080715b749..6536c69ca8 100644
--- a/src/features/navigation/PopoverNavigation.tsx
+++ b/src/features/navigation/PopoverNavigation.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 
-import { Modal, Popover } from '@digdir/designsystemet-react';
+import { Dialog, Dropdown } from '@digdir/designsystemet-react';
 import { BulletListIcon } from '@navikt/aksel-icons';
 import cn from 'classnames';
 import type { Button } from '@digdir/designsystemet-react';
@@ -39,85 +39,80 @@ function InnerPopoverNavigation(props: Parameters<typeof Button>[0]) {
 
   if (!isMobile) {
     return (
-      <div className={classes.popoverWrapper}>
-        <Popover
-          open={isDialogOpen}
-          onClose={closeDialog}
-        >
-          <Popover.Trigger
+      <div>
+        <Dropdown.TriggerContext>
+          <Dropdown.Trigger
             data-testid='page-navigation-trigger'
-            onClick={toggleDialog}
             variant='secondary'
-            color='first'
-            size='sm'
+            data-color='accent'
+            onClick={() => toggleDialog()}
+            data-size='sm'
             {...props}
             className={cn({ [classes.popoverButtonActive]: isDialogOpen }, props.className)}
           >
-            <PopoverNavigationButtonContent />
-          </Popover.Trigger>
-          <Popover.Content
+            <BulletListIcon
+              className={cn(classes.popoverButtonIcon, classes.popoverButtonIconMargin)}
+              aria-hidden
+            />
+            <Lang id='navigation.form_pages' />
+          </Dropdown.Trigger>
+          <Dropdown
             data-testid='page-navigation-dialog'
-            className={classes.popoverContainer}
-            aria-modal
+            placement='bottom-start'
             autoFocus={true}
+            autoPlacement={false}
+            open={isDialogOpen}
+            onClose={closeDialog}
           >
-            <AppNavigationHeading
-              showClose={true}
-              onClose={closeDialog}
-            />
+            <Dropdown.Heading asChild>
+              <AppNavigationHeading
+                showClose={true}
+                onClose={closeDialog}
+              />
+            </Dropdown.Heading>
             <div style={{ paddingRight: 12 }}>
               <AppNavigation onNavigate={closeDialog} />
             </div>
-          </Popover.Content>
-        </Popover>
+          </Dropdown>
+        </Dropdown.TriggerContext>
       </div>
     );
   }
 
   return (
-    <Modal.Root>
-      <Modal.Trigger
+    <Dialog.TriggerContext>
+      <Dialog.Trigger
         data-testid='page-navigation-trigger'
         onClick={toggleDialog}
         variant='secondary'
-        color='first'
-        size='sm'
+        daata-color='accent'
+        data-size='sm'
         {...props}
         className={cn({ [classes.popoverButtonActive]: isDialogOpen }, props.className)}
       >
-        <PopoverNavigationButtonContent />
-      </Modal.Trigger>
-      <Modal.Dialog
+        <BulletListIcon
+          className={cn(classes.popoverButtonIcon, classes.popoverButtonIconMargin)}
+          aria-hidden
+        />
+        <Lang id='navigation.form_pages' />
+      </Dialog.Trigger>
+      <Dialog
         aria-labelledby='app-navigation-heading'
         ref={modalRef}
-        onInteractOutside={closeDialog}
-        className={classes.modal}
+        closedby='any'
+        modal={true}
+        onClose={() => closeDialog()}
+        className={cn(classes.modal, classes.modalContainer)}
+        data-testid='page-navigation-dialog'
       >
-        <Modal.Content
-          data-testid='page-navigation-dialog'
-          className={classes.modalContainer}
-        >
-          <AppNavigationHeading
-            showClose={true}
-            onClose={closeDialog}
-          />
-          <div style={{ paddingRight: 12 }}>
-            <AppNavigation onNavigate={closeDialog} />
-          </div>
-        </Modal.Content>
-      </Modal.Dialog>
-    </Modal.Root>
-  );
-}
-
-function PopoverNavigationButtonContent() {
-  return (
-    <>
-      <BulletListIcon
-        className={cn(classes.popoverButtonIcon, classes.popoverButtonIconMargin)}
-        aria-hidden
-      />
-      <Lang id='navigation.form_pages' />
-    </>
+        <AppNavigationHeading
+          showClose={false}
+          onClose={closeDialog}
+        />
+        <div style={{ paddingRight: 12 }}>
+          <AppNavigation onNavigate={closeDialog} />
+        </div>
+      </Dialog>
+    </Dialog.TriggerContext>
   );
 }
diff --git a/src/features/navigation/components/Page.module.css b/src/features/navigation/components/Page.module.css
index 824ebb857f..238f29bc8c 100644
--- a/src/features/navigation/components/Page.module.css
+++ b/src/features/navigation/components/Page.module.css
@@ -15,7 +15,7 @@
   position: absolute;
   box-sizing: border-box;
   width: 0;
-  border-left: 2px solid var(--fds-colors-grey-700);
+  border-left: 2px solid var(--ds-color-neutral-base-default);
   height: calc(100% - 8px);
   top: 25px;
   left: 13px;
@@ -25,7 +25,7 @@
   font-family: var(--font-family);
   font-size: 16px;
   font-weight: normal;
-  color: var(--fds-colors-blue-700);
+  color: var(--ds-color-accent-text-subtle);
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -35,7 +35,7 @@
   align-items: start;
   text-align: left;
 
-  border-radius: var(--fds-border_radius-interactive);
+  border-radius: var(--ds-border-radius-md);
   overflow-wrap: anywhere;
   padding: 2px 6px;
   margin: -2px -6px -2px -2px;
@@ -67,28 +67,28 @@
 
 .page-symbol-error {
   font-size: 14px;
-  color: var(--fds-colors-red-700);
-  border-color: var(--fds-colors-red-500);
-  background-color: var(--fds-colors-red-100);
+  color: var(--ds-color-danger-text-default);
+  border-color: var(--ds-color-danger-border-default);
+  background-color: var(--ds-color-danger-surface-tinted);
 }
 
 .page-symbol-complete {
   font-size: 14px;
   color: white;
-  border-color: var(--fds-colors-blue-700);
-  background-color: var(--fds-colors-blue-700);
+  border-color: var(--ds-color-accent-base-default);
+  background-color: var(--ds-color-accent-base-default);
 }
 
 .page-symbol-default {
-  border-color: var(--fds-colors-blue-400);
-  background-color: var(--fds-colors-grey-100);
+  border-color: var(--ds-color-accent-border-default);
+  background-color: var(--ds-color-neutral-background-tinted);
 }
 
 .page-symbol-active {
-  border-color: var(--fds-colors-blue-900);
-  background-color: var(--fds-colors-blue-900);
+  border-color: var(--ds-color-accent-base-active);
+  background-color: var(--ds-color-accent-base-active);
 
-  outline: 2px solid var(--fds-colors-grey-100);
+  outline: 2px solid var(--ds-color-neutral-background-tinted);
   outline-offset: -4px;
 }
 
diff --git a/src/features/navigation/components/Page.tsx b/src/features/navigation/components/Page.tsx
index c841946cac..617854dcf5 100644
--- a/src/features/navigation/components/Page.tsx
+++ b/src/features/navigation/components/Page.tsx
@@ -83,7 +83,7 @@ function PageSymbol({
     return (
       <Spinner
         style={{ width: 20, height: 20 }}
-        title={langAsString('general.loading')}
+        aria-label={langAsString('general.loading')}
       />
     );
   }
diff --git a/src/features/navigation/components/PageGroup.module.css b/src/features/navigation/components/PageGroup.module.css
index 0f235d9136..3feda5bce5 100644
--- a/src/features/navigation/components/PageGroup.module.css
+++ b/src/features/navigation/components/PageGroup.module.css
@@ -16,7 +16,7 @@
   font-family: var(--font-family);
   font-size: 16px;
   font-weight: normal;
-  color: var(--fds-colors-grey-800);
+  color: var(--ds-color-neutral-text-default);
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -26,7 +26,7 @@
   align-items: start;
   text-align: left;
 
-  border-radius: var(--fds-border_radius-interactive);
+  border-radius: var(--ds-border-radius-md);
   overflow-wrap: anywhere;
   padding: 2px 6px 2px 2px;
   margin: -2px -6px -2px -2px;
@@ -47,14 +47,14 @@
 }
 
 .group-button-single {
-  color: var(--fds-colors-blue-700);
+  color: var(--ds-color-accent-text-subtle);
   grid-template-columns: auto auto;
 }
 
 .group-chevron {
   margin-top: 6px;
   margin-right: -4px; /* The icon has some internal padding, this makes the edge line up better */
-  color: var(--fds-colors-grey-700);
+  color: var(--ds-color-neutral-text-default);
   font-size: 16px;
 }
 
@@ -69,7 +69,7 @@
   font-size: 20px;
   border-width: 2px;
   border-style: solid;
-  border-radius: var(--fds-border_radius-interactive);
+  border-radius: var(--ds-border-radius-md);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -84,32 +84,32 @@
 }
 
 .group-symbol-error {
-  color: var(--fds-colors-red-700);
-  border-color: var(--fds-colors-red-500);
-  background-color: var(--fds-colors-red-100);
+  color: var(--ds-color-danger-text-default);
+  border-color: var(--ds-color-danger-border-default);
+  background-color: var(--ds-color-danger-surface-tinted);
 }
 
 .group-symbol-complete {
-  color: var(--fds-colors-grey-100);
-  border-color: var(--fds-colors-blue-700);
-  background-color: var(--fds-colors-blue-700);
+  color: var(--ds-color-neutral-background-tinted);
+  border-color: var(--ds-color-accent-base-default);
+  background-color: var(--ds-color-accent-base-default);
 }
 
 .group-symbol-active {
-  color: var(--fds-colors-grey-100);
-  border-color: var(--fds-colors-blue-900);
-  background-color: var(--fds-colors-blue-900);
+  color: var(--ds-color-neutral-background-tinted);
+  border-color: var(--ds-color-accent-base-active);
+  background-color: var(--ds-color-accent-base-active);
 }
 
 .group-symbol-active.group-symbol-single:not(.group-symbol-info) {
-  outline: 2px solid var(--fds-colors-grey-100);
+  outline: 2px solid var(--ds-color-neutral-background-tinted);
   outline-offset: -4px;
 }
 
 .group-symbol-default {
-  color: var(--fds-colors-blue-900);
-  border-color: var(--fds-colors-blue-400);
-  background-color: var(--fds-colors-grey-100);
+  color: var(--ds-color-accent-text-default);
+  border-color: var(--ds-color-accent-border-default);
+  background-color: var(--ds-color-neutral-surface-tinted);
 }
 
 .page-list {
@@ -123,7 +123,7 @@
   position: absolute;
   box-sizing: border-box;
   width: 0;
-  border-left: 2px solid var(--fds-colors-grey-700);
+  border-left: 2px solid var(--ds-color-neutral-base-default);
   height: calc(100% - 21px);
   top: 33px;
   left: 15px;
diff --git a/src/features/navigation/components/PageGroup.tsx b/src/features/navigation/components/PageGroup.tsx
index ec1eb885ee..7786552301 100644
--- a/src/features/navigation/components/PageGroup.tsx
+++ b/src/features/navigation/components/PageGroup.tsx
@@ -207,7 +207,7 @@ function PageGroupSymbol({
     return (
       <Spinner
         style={{ width: 28, height: 28 }}
-        title={langAsString('general.loading')}
+        aria-label={langAsString('general.loading')}
       />
     );
   }
diff --git a/src/features/navigation/components/SubformsForPage.module.css b/src/features/navigation/components/SubformsForPage.module.css
index 873d30709d..bc752ea810 100644
--- a/src/features/navigation/components/SubformsForPage.module.css
+++ b/src/features/navigation/components/SubformsForPage.module.css
@@ -7,7 +7,7 @@
   font-family: var(--font-family);
   font-size: 16px;
   font-weight: normal;
-  color: var(--fds-colors-grey-700);
+  color: var(--ds-color-neutral-text-subtle);
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -17,7 +17,7 @@
   align-items: start;
   text-align: left;
 
-  border-radius: var(--fds-border_radius-interactive);
+  border-radius: var(--ds-border-radius-md);
   overflow-wrap: anywhere;
   padding: 2px 6px;
   margin: -2px -6px -2px -2px;
@@ -33,7 +33,7 @@
 .subform-expand-chevron {
   margin-top: 1px;
   margin-right: -4px; /* The icon has some internal padding, this makes the edge line up better */
-  color: var(--fds-colors-grey-700);
+  color: var(--ds-color-neutral-text-subtle);
   font-size: 16px;
 }
 
@@ -59,13 +59,13 @@
   font-family: var(--font-family);
   font-size: 14px;
   font-weight: normal;
-  color: var(--fds-colors-blue-700);
+  color: var(--ds-color-accent-text-subtle);
   background-color: transparent;
   border: none;
   cursor: pointer;
   text-align: left;
 
-  border-radius: var(--fds-border_radius-interactive);
+  border-radius: var(--ds-border-radius-md);
   overflow-wrap: anywhere;
   padding: 2px 6px;
   margin: -2px -6px -2px -2px;
diff --git a/src/features/navigation/components/TaskGroup.module.css b/src/features/navigation/components/TaskGroup.module.css
index c9b054d220..165446edd3 100644
--- a/src/features/navigation/components/TaskGroup.module.css
+++ b/src/features/navigation/components/TaskGroup.module.css
@@ -10,7 +10,7 @@
   align-items: start;
   text-align: left;
 
-  border-radius: var(--fds-border_radius-interactive);
+  border-radius: var(--ds-border-radius-md);
   overflow-wrap: anywhere;
   padding: 2px 6px 2px 2px;
   margin: -2px -6px -2px -2px;
@@ -37,20 +37,20 @@
   font-size: 20px;
   border-width: 2px;
   border-style: solid;
-  border-radius: var(--fds-border_radius-interactive);
+  border-radius: var(--ds-border-radius-md);
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .task-symbol-locked {
-  color: var(--fds-colors-grey-800);
-  border-color: var(--fds-colors-grey-600);
-  background-color: var(--fds-colors-grey-100);
+  color: var(--ds-color-neutral-text-default);
+  border-color: var(--ds-color-neutral-border-default);
+  background-color: var(--ds-color-neutral-surface-tinted);
 }
 
 .task-symbol-active {
-  color: var(--fds-colors-grey-100);
-  border-color: var(--fds-colors-blue-900);
-  background-color: var(--fds-colors-blue-900);
+  color: var(--ds-color-accent-text-default);
+  border-color: var(--ds-color-accent-border-default);
+  background-color: var(--ds-color-neutral-surface-tinted);
 }
diff --git a/src/features/pdf/PDFView.module.css b/src/features/pdf/PDFView.module.css
index 5a176e87d6..ddc492d3c3 100644
--- a/src/features/pdf/PDFView.module.css
+++ b/src/features/pdf/PDFView.module.css
@@ -16,17 +16,17 @@
 .pdf-wrapper .page {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-4);
-  margin-bottom: var(--fds-spacing-2);
+  gap: var(--ds-size-4);
+  margin-bottom: var(--ds-size-2);
 }
 
 .pdf-wrapper .instanceInfo {
-  margin-bottom: var(--fds-spacing-4);
+  margin-bottom: var(--ds-size-4);
 }
 
 .pdf-logo-container {
   display: flex;
-  margin-bottom: var(--fds-spacing-12);
+  margin-bottom: var(--ds-size-12);
 }
 
 @media print {
diff --git a/src/features/pdf/PdfView2.tsx b/src/features/pdf/PdfView2.tsx
index 34561cf2f7..50a137f02b 100644
--- a/src/features/pdf/PdfView2.tsx
+++ b/src/features/pdf/PdfView2.tsx
@@ -98,7 +98,7 @@ function PdfWrapping({ children }: PropsWithChildren) {
       {appOwner && <span role='doc-subtitle'>{appOwner}</span>}
       <Heading
         level={1}
-        size='lg'
+        data-size='lg'
       >
         {isPayment ? `${appName} - ${langAsString('payment.receipt.title')}` : appName}
       </Heading>
diff --git a/src/features/processEnd/confirm/containers/ConfirmPage.test.tsx b/src/features/processEnd/confirm/containers/ConfirmPage.test.tsx
index 4b5e233cbb..fd2ddeb1e4 100644
--- a/src/features/processEnd/confirm/containers/ConfirmPage.test.tsx
+++ b/src/features/processEnd/confirm/containers/ConfirmPage.test.tsx
@@ -100,7 +100,7 @@ describe('ConfirmPage', () => {
     expect(screen.getByRole('button', { name: submitBtnText })).toBeInTheDocument();
 
     await waitFor(() => {
-      expect(screen.getByText(loadingText)).toBeInTheDocument();
+      expect(screen.getByLabelText(loadingText)).toBeInTheDocument();
     });
   });
 });
diff --git a/src/features/validation/ComponentValidations.module.css b/src/features/validation/ComponentValidations.module.css
new file mode 100644
index 0000000000..24c7a682eb
--- /dev/null
+++ b/src/features/validation/ComponentValidations.module.css
@@ -0,0 +1,6 @@
+.errorList {
+  padding: 0;
+  padding-top: var(--ds-size-2);
+  margin: 0;
+  list-style-type: none;
+}
diff --git a/src/features/validation/ComponentValidations.tsx b/src/features/validation/ComponentValidations.tsx
index c3b78e0a57..f47bdfb43d 100644
--- a/src/features/validation/ComponentValidations.tsx
+++ b/src/features/validation/ComponentValidations.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { Alert as AlertDesignSystem, ErrorMessage } from '@digdir/designsystemet-react';
+import { Alert as AlertDesignSystem, ValidationMessage } from '@digdir/designsystemet-react';
 
 import { Lang } from 'src/features/language/Lang';
+import classes from 'src/features/validation/ComponentValidations.module.css';
 import { useUnifiedValidationsForNode } from 'src/features/validation/selectors/unifiedValidationsForNode';
 import { validationsOfSeverity } from 'src/features/validation/utils';
 import { useCurrentNode } from 'src/layout/FormComponentContext';
@@ -96,15 +97,20 @@ function ErrorValidations({ validations }: { validations: BaseValidation<'error'
   const getUniqueKeyFromObject = useGetUniqueKeyFromObject();
 
   return (
-    <ul style={{ padding: 0, margin: 0, listStyleType: 'none' }}>
+    <ul className={classes.errorList}>
       {validations.map((validation) => (
         <li key={getUniqueKeyFromObject(validation)}>
-          <ErrorMessage size='small'>
-            <Lang
-              id={validation.message.key}
-              params={validation.message.params}
-            />
-          </ErrorMessage>
+          <ValidationMessage
+            data-size='sm'
+            asChild
+          >
+            <span>
+              <Lang
+                id={validation.message.key}
+                params={validation.message.params}
+              />
+            </span>
+          </ValidationMessage>
         </li>
       ))}
     </ul>
@@ -121,10 +127,10 @@ function SoftValidations({
   const getUniqueKeyFromObject = useGetUniqueKeyFromObject();
 
   return (
-    <div style={{ paddingTop: 'var(--fds-spacing-2)' }}>
+    <div style={{ paddingTop: 'var(--ds-size-2)' }}>
       <AlertDesignSystem
         style={{ breakInside: 'avoid' }}
-        severity={severity}
+        data-color={severity}
       >
         <ul style={{ paddingLeft: 0, listStyleType: 'none' }}>
           {validations.map((validation) => (
diff --git a/src/index.css b/src/index.css
index 21c6316eec..30c338830b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8,21 +8,7 @@
   font-weight: normal;
   line-height: 1.5;
   text-align: left;
-  color: var(--fds-semantic-text-neutral-default);
-}
-
-/* Workaround for the design-system aggressively setting the font to 'Inter' */
-[class^='fds-'] {
-  font-family: var(--font-family);
-}
-
-/* Override design system variables */
-* {
-  --component-panel-font_size-header-breakpoint_sm: 1.4rem;
-  --component-panel-font_size-header-breakpoint_md: 1.6rem;
-  --component-panel-font_size-header-breakpoint_lg: 1.75rem;
-  --component-panel-font_size-body-breakpoint_md: 1rem;
-  --component-panel-font_weight-heading: 500;
+  color: var(--ds-color-neutral-text-default);
 }
 
 /* Global variables */
@@ -54,14 +40,9 @@
   --table-input-margin: 15px; /* From design-system, move to figma-tokens? */
 
   --repeating-group-edit-surface-color: #f1fbff;
-  --repeating-group-edit-border-color: var(--fds-colors-blue-400);
-  --repeating-group-edit-divider-color: var(--fds-colors-blue-200);
-  --repeating-group-error-color: var(--fds-colors-red-200);
-
-  /* Focus styles */
-  --fds-inner-focus-border-color: #1e2b3c;
-  --fds-outer-focus-border-color: #fadf4b;
-  --fds-focus-border-width: 3px;
+  --repeating-group-edit-border-color: var(--ds-color-accent-border-default);
+  --repeating-group-edit-divider-color: var(--ds-color-accent-border-subtle);
+  --repeating-group-error-color: var(--ds-color-danger-surface-tinted);
 
   /*Border styles*/
   --border-color-primary: var(--colors-primary-blueMedium);
@@ -73,16 +54,16 @@
   --button-gap: 0.75rem;
 
   /* Toast styles */
-  --toastify-color-info: var(--fds-semantic-surface-action-primary-default);
-  --toastify-color-success: var(--fds-semantic-surface-success-default);
-  --toastify-color-warning: var(--fds-semantic-surface-warning-default);
-  --toastify-color-error: var(--fds-semantic-surface-danger-default);
+  --toastify-color-info: var(--ds-color-accent-base-default);
+  --toastify-color-success: var(--ds-color-success-base-default);
+  --toastify-color-warning: var(--ds-color-warning-surface-default);
+  --toastify-color-error: var(--ds-color-danger-base-default);
   --toastify-toast-width: 400px;
 }
 
 .Toastify__toast {
   line-height: 1.5rem;
-  padding: var(--fds-spacing-3) var(--fds-spacing-3) var(--fds-spacing-4) var(--fds-spacing-3);
+  padding: var(--ds-size-3) var(--ds-size-3) var(--ds-size-4) var(--ds-size-3);
 }
 
 /* Custom CSS for all app */
@@ -154,10 +135,7 @@ dl {
 }
 
 /* Workaround: The above style affects DropdownMenu from the design system */
-ul.fds-dropdownmenu {
-  padding: 8px;
-}
-ul.fds-dropdownmenu__section {
+.ds-dropdown ul {
   padding: 0;
 }
 
diff --git a/src/index.tsx b/src/index.tsx
index ff4e24481f..6987de2e4f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -13,6 +13,7 @@ import 'src/features/toggles';
 import 'src/features/logging';
 import 'src/features/styleInjection';
 import '@digdir/designsystemet-css';
+import '@digdir/designsystemet-theme';
 
 import { App } from 'src/App';
 import { ErrorBoundary } from 'src/components/ErrorBoundary';
@@ -43,7 +44,6 @@ import * as queries from 'src/queries/queries';
 import 'leaflet/dist/leaflet.css';
 import 'react-toastify/dist/ReactToastify.css';
 import 'src/index.css';
-import '@digdir/designsystemet-theme/brand/altinn/tokens.css';
 
 const router = createHashRouter([
   {
diff --git a/src/language/sharedLanguage.ts b/src/language/sharedLanguage.ts
index 2ccd77fccf..93aafc0a11 100644
--- a/src/language/sharedLanguage.ts
+++ b/src/language/sharedLanguage.ts
@@ -88,42 +88,42 @@ const parserOptions: HTMLReactParserOptions = {
     if (isElement(domNode) && domNode.name === 'h1') {
       return React.createElement(
         Heading,
-        { level: 1, size: 'large' },
+        { level: 1, 'data-size': 'lg' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
     if (isElement(domNode) && domNode.name === 'h2') {
       return React.createElement(
         Heading,
-        { level: 2, size: 'medium' },
+        { level: 2, 'data-size': 'md' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
     if (isElement(domNode) && domNode.name === 'h3') {
       return React.createElement(
         Heading,
-        { level: 3, size: 'small' },
+        { level: 3, 'data-size': 'sm' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
     if (isElement(domNode) && domNode.name === 'h4') {
       return React.createElement(
         Heading,
-        { level: 4, size: 'xsmall' },
+        { level: 4, 'data-size': 'xs' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
     if (isElement(domNode) && domNode.name === 'h5') {
       return React.createElement(
         Heading,
-        { level: 5, size: 'xsmall' },
+        { level: 5, 'data-size': 'xs' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
     if (isElement(domNode) && domNode.name === 'h6') {
       return React.createElement(
         Heading,
-        { level: 6, size: 'xsmall' },
+        { level: 6, 'data-size': 'xs' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
diff --git a/src/language/texts/en.ts b/src/language/texts/en.ts
index a29b7eb2fb..9cecc7282d 100644
--- a/src/language/texts/en.ts
+++ b/src/language/texts/en.ts
@@ -196,9 +196,8 @@ export function en() {
     'iframe_component.unsupported_browser_title': 'Your browser is unsupported',
     'iframe_component.unsupported_browser':
       'Your browser does not support iframes that use srcdoc. This may result in not being able to see all the content intended to be displayed here. We recommend trying a different browser.',
-    'input_components.character_limit_sr_label': 'Textfield has a maximum length of {0} characters',
-    'input_components.remaining_characters': 'You have {0} of {1} characters left',
-    'input_components.exceeded_max_limit': 'You have exceeded the maximum limit with {0} characters',
+    'input_components.remaining_characters': 'You have %d characters left',
+    'input_components.exceeded_max_limit': 'You have exceeded the maximum limit with %d characters',
     'instance_selection.changed_by': 'Changed by',
     'instance_selection.continue': 'Continue here',
     'instance_selection.description':
@@ -317,7 +316,7 @@ export function en() {
     'person_lookup.validation_error_name_too_short': "The name can't be empty.",
     'person_lookup.validation_error_ssn': 'The national ID number/D-number is invalid.',
     'person_lookup.validation_error_not_found':
-      'No person is registered with this combination of national ID number/D-number and name. Please check the fields and try again. \n\nNote: After 5 failed attempts, the search functionality will be temporarily locked.',
+      'No person is registered with this combination of national ID number/D-number and name. Please check the fields and try again. <br> Note: After 5 failed attempts, the search functionality will be temporarily locked.',
     'person_lookup.validation_error_too_many_requests': 'Too many requests. Please try again later.',
     'person_lookup.validation_error_forbidden':
       'You do not have permission to perform this action. A security level of minimum 2 is required.',
diff --git a/src/language/texts/nb.ts b/src/language/texts/nb.ts
index 9cb309bca6..5c09650a59 100644
--- a/src/language/texts/nb.ts
+++ b/src/language/texts/nb.ts
@@ -197,9 +197,8 @@ export function nb() {
     'iframe_component.unsupported_browser_title': 'Nettleseren din støttes ikke',
     'iframe_component.unsupported_browser':
       'Nettleseren du bruker støtter ikke iframes som benytter seg av srcdoc. Dette kan føre til at du ikke ser all innholdet som er ment å vises her. Vi anbefaler deg å prøve en annen nettleser.',
-    'input_components.character_limit_sr_label': 'Tekstfeltet kan inneholde maks {0} tegn',
-    'input_components.remaining_characters': 'Du har {0} av {1} tegn igjen',
-    'input_components.exceeded_max_limit': 'Du har overskredet maks antall tegn med {0}',
+    'input_components.remaining_characters': 'Du har %d tegn igjen',
+    'input_components.exceeded_max_limit': 'Du har overskredet maks antall tegn med %d',
     'instance_selection.changed_by': 'Endret av',
     'instance_selection.continue': 'Fortsett her',
     'instance_selection.description':
@@ -321,7 +320,7 @@ export function nb() {
     'person_lookup.validation_error_name_too_short': 'Etternavn kan ikke være tomt.',
     'person_lookup.validation_error_ssn': 'Fødselsnummeret/D-nummeret er ugyldig.',
     'person_lookup.validation_error_not_found':
-      'Ingen person er registrert med denne kombinasjonen av fødselsnummer/D-nummer og navn. Vennligst kontroller feltene og prøv igjen. \n\nMerk: Etter 5 feilforsøk blir søkemuligheten midlertidig sperret.',
+      'Ingen person er registrert med denne kombinasjonen av fødselsnummer/D-nummer og navn. Vennligst kontroller feltene og prøv igjen. <br> Merk: Etter 5 feilforsøk blir søkemuligheten midlertidig sperret.',
     'person_lookup.validation_error_too_many_requests':
       'Du har nådd grensen for antall søk. Vennligst prøv igjen senere.',
     'person_lookup.validation_error_forbidden':
diff --git a/src/language/texts/nn.ts b/src/language/texts/nn.ts
index 870af6834c..88527f5f53 100644
--- a/src/language/texts/nn.ts
+++ b/src/language/texts/nn.ts
@@ -197,9 +197,8 @@ export function nn() {
     'iframe_component.unsupported_browser_title': 'Nettlesaren din støttas ikkje',
     'iframe_component.unsupported_browser':
       'Nettlesaren di støttar ikkje iframes som brukar srcdoc. Dette kan føre til at du ikkje ser all innhaldet som er meint å visast her. Vi anbefalar deg å prøve ein annan nettlesar.',
-    'input_components.character_limit_sr_label': 'Tekstfeltet kan innehalde maks {0} teikn.',
-    'input_components.remaining_characters': 'Du har {0} av {1} teikn igjen',
-    'input_components.exceeded_max_limit': 'Du har overskride maks teikn med {0}',
+    'input_components.remaining_characters': 'Du har %d teikn igjen',
+    'input_components.exceeded_max_limit': 'Du har overskride maks teikn med %d',
     'instance_selection.changed_by': 'Endra av',
     'instance_selection.continue': 'Hald fram her',
     'instance_selection.description':
@@ -319,7 +318,7 @@ export function nn() {
     'person_lookup.validation_error_name_too_short': 'Etternamn kan ikkje vere tomt.',
     'person_lookup.validation_error_ssn': 'Fødselsnummeret/D-nummeret er ugyldig.',
     'person_lookup.validation_error_not_found':
-      'Ingen person er registrert med denne kombinasjonen av fødselsnummer/D-nummer og namn. Ver venleg og kontroller felta og prøv igjen. \n\nMerk: Etter 5 feilforsøk blir søkemoglegheita mellombels sperra.',
+      'Ingen person er registrert med denne kombinasjonen av fødselsnummer/D-nummer og namn. Ver venleg og kontroller felta og prøv igjen. <br> Merk: Etter 5 feilforsøk blir søkemoglegheita mellombels sperra.',
     'person_lookup.validation_error_too_many_requests': 'Du har gjort for mange søk. Ver venleg, prøv igjen seinare.',
     'person_lookup.validation_error_forbidden':
       'Du har ikkje tilgang til å gjere dette søket. Sikkerheitsnivå 2 eller høgare er påkravd.',
diff --git a/src/layout/Accordion/Accordion.test.tsx b/src/layout/Accordion/Accordion.test.tsx
index 31f0ce8639..49aac58edd 100644
--- a/src/layout/Accordion/Accordion.test.tsx
+++ b/src/layout/Accordion/Accordion.test.tsx
@@ -9,27 +9,23 @@ describe('Accordion', () => {
   it('should display text from textResourceBindings', async () => {
     await render({ title: 'Accordion title' });
 
-    expect(await screen.findByRole('heading', { name: /accordion title/i })).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: /accordion title/i })).toBeInTheDocument();
   });
 
   it('should display text from textResourceBindings if an ID to a text resource is used as title', async () => {
     await render({ title: 'accordion.title' });
 
-    expect(await screen.findByRole('heading', { name: /this is a title/i })).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: /this is a title/i })).toBeInTheDocument();
   });
 
   it('should open accordion by default if openByDefault is set to true', async () => {
-    const { container } = await render({ openByDefault: true });
-    const element = container.querySelector('.fds-animate-height') as HTMLElement;
-    expect(element).toHaveClass('fds-animate-height--open');
-    expect(element).not.toHaveClass('fds-animate-height--closed');
+    await render({ openByDefault: true, title: 'accordion.title' });
+    expect(await screen.findByRole('button', { name: /this is a title/i })).toHaveAttribute('aria-expanded', 'true');
   });
 
   it('accordion should be closed by default if openByDefault is set to false', async () => {
-    const { container } = await render({ openByDefault: false });
-    const element = container.querySelector('.fds-animate-height') as HTMLElement;
-    expect(element).toHaveClass('fds-animate-height--closed');
-    expect(element).not.toHaveClass('fds-animate-height--open');
+    await render({ openByDefault: false, title: 'accordion.title' });
+    expect(await screen.findByRole('button', { name: /this is a title/i })).toHaveAttribute('aria-expanded', 'false');
   });
 });
 
diff --git a/src/layout/Accordion/Accordion.tsx b/src/layout/Accordion/Accordion.tsx
index 7dab247cb0..e5a1df7189 100644
--- a/src/layout/Accordion/Accordion.tsx
+++ b/src/layout/Accordion/Accordion.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Accordion as DesignSystemAccordion } from '@digdir/designsystemet-react';
+import { Card } from '@digdir/designsystemet-react';
 
 import { Flex } from 'src/app-components/Flex/Flex';
 import { useLanguage } from 'src/features/language/useLanguage';
@@ -15,7 +15,7 @@ import type { PropsFromGenericComponent } from 'src/layout';
 type IAccordionProps = PropsFromGenericComponent<'Accordion'>;
 
 export const Accordion = ({ node }: IAccordionProps) => {
-  const { textResourceBindings, headingLevel, childComponents, openByDefault } = useNodeItem(node);
+  const { textResourceBindings, childComponents, openByDefault } = useNodeItem(node);
   const { langAsString } = useLanguage();
   const renderAsAccordionItem = useIsInAccordionGroup();
 
@@ -25,7 +25,6 @@ export const Accordion = ({ node }: IAccordionProps) => {
     <AltinnAcordionItem
       title={title}
       className={className}
-      headingLevel={headingLevel}
       open={openByDefault}
     >
       <Flex
@@ -49,13 +48,9 @@ export const Accordion = ({ node }: IAccordionProps) => {
       {renderAsAccordionItem ? (
         <AccordionItem className={classes.container} />
       ) : (
-        <DesignSystemAccordion
-          color='subtle'
-          border
-          className={classes.container}
-        >
-          <AccordionItem />
-        </DesignSystemAccordion>
+        <Card data-color='neutral'>
+          <AccordionItem className={classes.container} />
+        </Card>
       )}
     </ComponentStructureWrapper>
   );
diff --git a/src/layout/Accordion/AccordionItem.tsx b/src/layout/Accordion/AccordionItem.tsx
index f39b610d42..1b1bb75f04 100644
--- a/src/layout/Accordion/AccordionItem.tsx
+++ b/src/layout/Accordion/AccordionItem.tsx
@@ -1,44 +1,31 @@
 import React from 'react';
 
-import { Accordion as DesignSystemAccordion } from '@digdir/designsystemet-react';
+import { Details } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
 import classes from 'src/layout/Accordion/Accordion.module.css';
 import type { ExprVal, ExprValToActualOrExpr } from 'src/features/expressions/types';
-import type { HeadingLevel } from 'src/layout/common.generated';
 
 interface AccordionBaseComponentProps {
   title: string;
   children: React.ReactNode;
   className?: string;
-  headingLevel?: HeadingLevel;
   open?: ExprValToActualOrExpr<ExprVal.Boolean>;
 }
 
-export const AccordionItem = ({
-  title,
-  children,
-  className,
-  headingLevel = 2,
-  open,
-}: AccordionBaseComponentProps): React.JSX.Element => {
+export const AccordionItem = ({ title, children, className, open }: AccordionBaseComponentProps): React.JSX.Element => {
   const [isOpen, setOpen] = React.useState(open);
 
-  const handleHeaderClick = () => {
-    setOpen(!isOpen);
-  };
   return (
-    <DesignSystemAccordion.Item
+    <Details
       open={isOpen as boolean}
+      onToggle={() => {
+        setOpen(!isOpen);
+      }}
       className={cn(className, classes.accordion)}
     >
-      <DesignSystemAccordion.Header
-        level={headingLevel}
-        onHeaderClick={handleHeaderClick}
-      >
-        {title}
-      </DesignSystemAccordion.Header>
-      <DesignSystemAccordion.Content>{children}</DesignSystemAccordion.Content>
-    </DesignSystemAccordion.Item>
+      <Details.Summary>{title}</Details.Summary>
+      <Details.Content>{children}</Details.Content>
+    </Details>
   );
 };
diff --git a/src/layout/Accordion/SummaryAccordion.module.css b/src/layout/Accordion/SummaryAccordion.module.css
index 1f741aa269..623e94a2d2 100644
--- a/src/layout/Accordion/SummaryAccordion.module.css
+++ b/src/layout/Accordion/SummaryAccordion.module.css
@@ -1,7 +1,7 @@
 .container {
   border-radius: 3px;
-  border: 1px solid var(--fds-semantic-border-neutral-subtle);
-  background-color: var(--fds-semantic-surface-neutral-subtle);
+  border: 1px solid var(--ds-color-neutral-border-subtle);
+  background-color: var(--ds-color-neutral-background-tinted);
 }
 
 .summary2width {
@@ -9,16 +9,16 @@
 }
 
 .header {
-  border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle);
-  background-color: var(--fds-semantic-surface-neutral-subtle);
+  border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
+  background-color: var(--ds-color-neutral-background-tinted);
 }
 
 .padding {
-  padding: var(--fds-spacing-5);
+  padding: var(--ds-size-5);
 }
 
 .paddingSmall {
-  padding: var(--fds-spacing-3) var(--fds-spacing-5);
+  padding: var(--ds-size-3) var(--ds-spacing-5);
 }
 
 .container .header > h2,
diff --git a/src/layout/Accordion/SummaryAccordion.tsx b/src/layout/Accordion/SummaryAccordion.tsx
index 36ef746511..c1b83f6822 100644
--- a/src/layout/Accordion/SummaryAccordion.tsx
+++ b/src/layout/Accordion/SummaryAccordion.tsx
@@ -37,7 +37,7 @@ export function SummaryAccordionComponent({ targetNode }: SummaryRendererProps<'
 
   return (
     <div className={cn(classes.container)}>
-      <div className={classes.header}>
+      <div className={cn(classes.header, classes.padding)}>
         <Heading className={classes.paddingSmall}>{title}</Heading>
       </div>
       <div className={classes.padding}>
@@ -67,7 +67,7 @@ export function SummaryAccordionComponent2({ target }: Summary2Props<'Accordion'
       target={target}
     >
       <div className={cn(classes.container, classes.summary2width)}>
-        <div className={classes.header}>
+        <div className={cn(classes.header, classes.padding)}>
           <Heading className={classes.paddingSmall}>{title}</Heading>
         </div>
         <div className={classes.padding}>
diff --git a/src/layout/AccordionGroup/AccordionGroup.tsx b/src/layout/AccordionGroup/AccordionGroup.tsx
index e94c039808..f613f9bbbd 100644
--- a/src/layout/AccordionGroup/AccordionGroup.tsx
+++ b/src/layout/AccordionGroup/AccordionGroup.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Card } from '@digdir/designsystemet-react';
+
 import { AccordionGroupProvider } from 'src/layout/AccordionGroup/AccordionGroupContext';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
 import { GenericComponentById } from 'src/layout/GenericComponent';
@@ -14,12 +16,14 @@ export const AccordionGroup = ({ node }: IAccordionGroupProps) => {
   return (
     <AccordionGroupProvider>
       <ComponentStructureWrapper node={node}>
-        {childComponents.map((id) => (
-          <GenericComponentById
-            key={id}
-            id={id}
-          />
-        ))}
+        <Card data-color='neutral'>
+          {childComponents.map((id) => (
+            <GenericComponentById
+              key={id}
+              id={id}
+            />
+          ))}
+        </Card>
       </ComponentStructureWrapper>
     </AccordionGroupProvider>
   );
diff --git a/src/layout/AccordionGroup/SummaryAccordionGroupComponent.tsx b/src/layout/AccordionGroup/SummaryAccordionGroupComponent.tsx
index 920eca3d05..8b7f9ae14a 100644
--- a/src/layout/AccordionGroup/SummaryAccordionGroupComponent.tsx
+++ b/src/layout/AccordionGroup/SummaryAccordionGroupComponent.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { Accordion as DesignSystemAccordion } from '@digdir/designsystemet-react';
-
 import { SummaryAccordionComponent, SummaryAccordionComponent2 } from 'src/layout/Accordion/SummaryAccordion';
 import { EmptyChildrenBoundary } from 'src/layout/Summary2/isEmpty/EmptyChildrenContext';
 import { SummaryFlexForContainer } from 'src/layout/Summary2/SummaryComponent2/ComponentSummary';
@@ -14,17 +12,13 @@ import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
 export const SummaryAccordionGroupComponent = ({ targetNode, ...rest }: SummaryRendererProps<'AccordionGroup'>) => {
   const { childComponents } = useNodeItem(targetNode);
-  return (
-    <DesignSystemAccordion>
-      {childComponents.map((childId) => (
-        <Child
-          key={childId}
-          id={childId}
-          {...rest}
-        />
-      ))}
-    </DesignSystemAccordion>
-  );
+  return childComponents.map((childId) => (
+    <Child
+      key={childId}
+      id={childId}
+      {...rest}
+    />
+  ));
 };
 
 export const SummaryAccordionGroupComponent2 = ({ target, ...rest }: Summary2Props<'AccordionGroup'>) => {
@@ -35,16 +29,14 @@ export const SummaryAccordionGroupComponent2 = ({ target, ...rest }: Summary2Pro
       hideWhen={hideEmptyFields}
       target={target}
     >
-      <DesignSystemAccordion style={{ width: '100%' }}>
-        {childComponents.map((childId) => (
-          <Child2
-            target={target}
-            key={childId}
-            id={childId}
-            {...rest}
-          />
-        ))}
-      </DesignSystemAccordion>
+      {childComponents.map((childId) => (
+        <Child2
+          target={target}
+          key={childId}
+          id={childId}
+          {...rest}
+        />
+      ))}
     </SummaryFlexForContainer>
   );
 };
diff --git a/src/layout/AddToList/AddToList.tsx b/src/layout/AddToList/AddToList.tsx
index a221cc87b6..989c270ea8 100644
--- a/src/layout/AddToList/AddToList.tsx
+++ b/src/layout/AddToList/AddToList.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import type { MonthCaption } from 'react-day-picker';
 
-import { Button, Modal, ModalContent, ModalFooter, ModalHeader } from '@digdir/designsystemet-react';
+import { Button, Dialog } from '@digdir/designsystemet-react';
 import { v4 as uuidv4 } from 'uuid';
 import type { JSONSchema7 } from 'json-schema';
 
@@ -40,7 +40,9 @@ interface ModalDynamicFormProps {
   onChange: (data: FormDataObject) => void;
   initialData?: FormDataObject; // Added to receive existing item
   locale?: string;
-  onInteractOutside?: () => void;
+  backdropClose?: boolean;
+  onClose?: () => void;
+  modalRef?: React.RefObject<HTMLDialogElement>;
   DropdownCaption: typeof MonthCaption;
 }
 
@@ -48,11 +50,13 @@ export function AddToListModal({
   onChange,
   initialData,
   dataModelReference,
-  onInteractOutside,
+  onClose,
+  modalRef,
   DropdownCaption,
 }: ModalDynamicFormProps) {
   const appendToList = FD.useAppendToList();
-  const modalRef = useRef<HTMLDialogElement>(null);
+  let addToListModalRef = useRef<HTMLDialogElement>(null);
+  addToListModalRef = modalRef ?? addToListModalRef;
 
   const { schemaLookup } = DataModels.useFullStateRef().current;
 
@@ -63,7 +67,6 @@ export function AddToListModal({
   const { langAsString } = useLanguage();
 
   useEffect(() => {
-    modalRef.current?.showModal();
     if (!initialData) {
       const uuid = uuidv4();
       appendToList({
@@ -84,14 +87,14 @@ export function AddToListModal({
     return null;
   }
   return (
-    <Modal
-      ref={modalRef}
-      style={{ padding: 'var(--fds-spacing-3)' }}
-      onInteractOutside={onInteractOutside}
-      onClose={onInteractOutside}
+    <Dialog
+      ref={addToListModalRef}
+      style={{ padding: 'var(--ds-size-3)' }}
+      closedby='any'
+      modal={true}
+      onClose={onClose}
     >
-      <ModalHeader />
-      <ModalContent>
+      <Dialog.Block>
         <DynamicForm
           schema={schema?.items}
           onChange={onFormDataUpdate}
@@ -100,10 +103,10 @@ export function AddToListModal({
           buttonAriaLabel={langAsString('date_picker.aria_label_icon')}
           calendarIconTitle={langAsString('date_picker.aria_label_icon')}
         />
-      </ModalContent>
-      <ModalFooter>
+      </Dialog.Block>
+      <Dialog.Block>
         <Button
-          size='md'
+          data-size='md'
           variant='primary'
           onClick={() => {
             if (tempFormData) {
@@ -113,8 +116,8 @@ export function AddToListModal({
         >
           Lagre
         </Button>
-      </ModalFooter>
-    </Modal>
+      </Dialog.Block>
+    </Dialog>
   );
 }
 
@@ -124,6 +127,7 @@ export function AddToListComponent({ node }: AddToListProps) {
   const { formData } = useDataModelBindings(item.dataModelBindings, 1, 'raw');
   const setMultiLeafValues = FD.useSetMultiLeafValues();
 
+  const modalRef = useRef<HTMLDialogElement>(null);
   const [showForm, setShowForm] = useState(false);
 
   return (
@@ -131,6 +135,7 @@ export function AddToListComponent({ node }: AddToListProps) {
       {showForm && (
         <AddToListModal
           dataModelReference={item.dataModelBindings.data}
+          modalRef={modalRef}
           onChange={(formProps) => {
             const changes = Object.entries(formProps).map((entry) => ({
               reference: {
@@ -142,17 +147,15 @@ export function AddToListComponent({ node }: AddToListProps) {
             setMultiLeafValues({ changes });
             setShowForm(false);
           }}
-          onInteractOutside={() => {
-            setShowForm(false);
-          }}
+          backdropClose={true}
           DropdownCaption={DropdownCaption}
         />
       )}
 
       <Button
-        size='md'
+        data-size='md'
         variant='primary'
-        onClick={() => setShowForm(true)} // Call onChange when button is clicked
+        onClick={() => modalRef.current?.showModal()} // Call onChange when button is clicked
       >
         Legg til
       </Button>
diff --git a/src/layout/Address/AddressComponent.tsx b/src/layout/Address/AddressComponent.tsx
index 2e40238463..f50df7ea69 100644
--- a/src/layout/Address/AddressComponent.tsx
+++ b/src/layout/Address/AddressComponent.tsx
@@ -68,6 +68,7 @@ export function AddressComponent({ node }: IAddressProps) {
     >
       <div>
         <Label
+          id={`address_address_label_${id}`}
           htmlFor={`address_address_${id}`}
           label={langAsString(textResourceBindings?.title ?? 'address_component.address')}
           required={required}
@@ -88,6 +89,7 @@ export function AddressComponent({ node }: IAddressProps) {
             <Input
               id={`address_address_${id}`}
               data-bindingkey={bindingKeys.address}
+              aria-labelledby={`address_address_label_${id}`}
               error={hasValidationErrors(bindingValidations?.address)}
               value={address}
               onChange={(ev) => setValue('address', ev.target.value)}
@@ -107,6 +109,7 @@ export function AddressComponent({ node }: IAddressProps) {
       {!simplified && (
         <div>
           <Label
+            id={`address_care_of_label_${id}`}
             htmlFor={`address_care_of_${id}`}
             label={langAsString(textResourceBindings?.careOfTitle ?? 'address_component.care_of')}
             required={required}
@@ -127,6 +130,7 @@ export function AddressComponent({ node }: IAddressProps) {
               <Input
                 id={`address_care_of_${id}`}
                 data-bindingkey={bindingKeys.careOf}
+                aria-labelledby={`address_care_of_label_${id}`}
                 error={hasValidationErrors(bindingValidations?.careOf)}
                 value={careOf}
                 onChange={(ev) => setValue('careOf', ev.target.value)}
@@ -152,6 +156,7 @@ export function AddressComponent({ node }: IAddressProps) {
           className={`${classes.addressComponentZipCode} ${classes.addressComponentSmallInputs}`}
         >
           <Label
+            id={`address_zip_code_label_${id}`}
             htmlFor={`address_zip_code_${id}`}
             label={langAsString(textResourceBindings?.zipCodeTitle ?? 'address_component.zip_code')}
             required={required}
@@ -172,6 +177,7 @@ export function AddressComponent({ node }: IAddressProps) {
               <Input
                 id={`address_zip_code_${id}`}
                 data-bindingkey={bindingKeys.zipCode}
+                aria-labelledby={`address_zip_code_label_${id}`}
                 error={hasValidationErrors(bindingValidations?.zipCode)}
                 value={zipCode}
                 onChange={(ev) => setValue('zipCode', ev.target.value)}
@@ -193,6 +199,7 @@ export function AddressComponent({ node }: IAddressProps) {
           className={classes.addressComponentPostplace}
         >
           <Label
+            id={`address_post_place_label_${id}`}
             htmlFor={`address_post_place_${id}`}
             label={langAsString(textResourceBindings?.postPlaceTitle ?? 'address_component.post_place')}
             required={required}
@@ -213,6 +220,7 @@ export function AddressComponent({ node }: IAddressProps) {
               <Input
                 id={`address_post_place_${id}`}
                 data-bindingkey={bindingKeys.postPlace}
+                aria-labelledby={`address_post_place_label_${id}`}
                 value={postPlace}
                 readOnly={true}
                 required={required}
@@ -226,6 +234,7 @@ export function AddressComponent({ node }: IAddressProps) {
       {!simplified && (
         <div>
           <Label
+            id={`address_house_number_label_${id}`}
             htmlFor={`address_house_number_${id}`}
             required={required}
             label={langAsString(textResourceBindings?.houseNumberTitle ?? 'address_component.house_number')}
@@ -254,6 +263,7 @@ export function AddressComponent({ node }: IAddressProps) {
                 <Input
                   id={`address_house_number_${id}`}
                   data-bindingkey={bindingKeys.houseNumber}
+                  aria-labelledby={`address_house_number_label_${id}`}
                   error={hasValidationErrors(bindingValidations?.houseNumber)}
                   value={houseNumber}
                   onChange={(ev) => setValue('houseNumber', ev.target.value)}
diff --git a/src/layout/Address/AddressSummary/AddressSummary.module.css b/src/layout/Address/AddressSummary/AddressSummary.module.css
index 425bbd1287..c7ed0fbb98 100644
--- a/src/layout/Address/AddressSummary/AddressSummary.module.css
+++ b/src/layout/Address/AddressSummary/AddressSummary.module.css
@@ -21,7 +21,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  gap: var(--fds-spacing-4);
+  gap: var(--ds-size-4);
 }
 
 .addressSummaryComponentPostplaceZipCode {
@@ -49,5 +49,5 @@
 }
 
 .addressComponentZipCode {
-  margin-right: var(--fds-spacing-4);
+  margin-right: var(--ds-size-4);
 }
diff --git a/src/layout/Alert/AlertBaseComponent.tsx b/src/layout/Alert/AlertBaseComponent.tsx
index d353f31830..510abe0f91 100644
--- a/src/layout/Alert/AlertBaseComponent.tsx
+++ b/src/layout/Alert/AlertBaseComponent.tsx
@@ -23,7 +23,7 @@ export type AlertBaseComponentProps = {
 export const AlertBaseComponent = ({ title, children, useAsAlert, severity, ariaLabel }: AlertBaseComponentProps) => (
   <AlertDesignSystem
     className={styles.container}
-    severity={severity}
+    data-color={severity}
     role={useAsAlert ? 'alert' : undefined}
     aria-live={useAsAlert ? calculateAriaLive(severity) : undefined}
     aria-label={useAsAlert ? (ariaLabel ?? title) : undefined}
diff --git a/src/layout/Cards/Cards.tsx b/src/layout/Cards/Cards.tsx
index 77e69b3a0b..bca341687e 100644
--- a/src/layout/Cards/Cards.tsx
+++ b/src/layout/Cards/Cards.tsx
@@ -1,18 +1,16 @@
 import React from 'react';
 import type { CSSProperties } from 'react';
 
-import { Card } from '@digdir/designsystemet-react';
-
+import { AppCard } from 'src/app-components/Card/Card';
 import { Flex } from 'src/app-components/Flex/Flex';
 import { Lang } from 'src/features/language/Lang';
 import { CardProvider } from 'src/layout/Cards/CardContext';
-import classes from 'src/layout/Cards/Cards.module.css';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
-import { GenericComponent, GenericComponentById } from 'src/layout/GenericComponent';
+import { GenericComponent } from 'src/layout/GenericComponent';
 import { useNode } from 'src/utils/layout/NodesContext';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
+import { typedBoolean } from 'src/utils/typing';
 import type { PropsFromGenericComponent } from 'src/layout';
-import type { CardInternal } from 'src/layout/Cards/CardsPlugin';
 import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
 type ICardsProps = PropsFromGenericComponent<'Cards'>;
@@ -21,121 +19,109 @@ function parseSize(size: string | undefined, defaultValue: string): string {
   return size && /^[0-9]+$/.test(size) ? `${size}px` : (size ?? defaultValue);
 }
 
+const colorVariantMap: Record<string, 'tinted' | 'default'> = {
+  neutral: 'default',
+  subtle: 'tinted',
+};
+
 export const Cards = ({ node }: ICardsProps) => {
   const { cardsInternal, minMediaHeight, minWidth, color, mediaPosition: _mediaPosition } = useNodeItem(node);
   const processedMinWidth = parseSize(minWidth, '250px');
   const processedMinMediaHeight = parseSize(minMediaHeight, '150px');
   const mediaPosition = _mediaPosition ?? 'top';
-
   const cardContainer: CSSProperties = {
     display: 'grid',
     gap: '28px',
     gridTemplateColumns: `repeat(auto-fit, minmax(${processedMinWidth}, 1fr))`,
   };
-
   return (
     <ComponentStructureWrapper node={node}>
       <div style={cardContainer}>
         {cardsInternal.map((card, idx) => (
-          <Card
+          <AppCard
             key={idx}
-            color={color}
-            className={classes.card}
+            title={card.title && <Lang id={card.title} />}
+            description={card.description && <Lang id={card.description} />}
+            footer={card.footer && <Lang id={card.footer} />}
+            variant={colorVariantMap[color]}
+            mediaPosition={mediaPosition}
+            media={
+              card.mediaId && (
+                <CardItem
+                  key={idx}
+                  nodeId={card.mediaId}
+                  parentNode={node}
+                  isMedia={true}
+                  minMediaHeight={processedMinMediaHeight}
+                />
+              )
+            }
           >
-            {mediaPosition === 'top' && (
-              <Media
-                card={card}
-                node={node}
-                minMediaHeight={processedMinMediaHeight}
-              />
-            )}
-            {card.title && (
-              <Card.Header>
-                <Lang id={card.title} />
-              </Card.Header>
-            )}
-            {card.description && (
-              <Card.Content>
-                <Lang id={card.description} />
-              </Card.Content>
-            )}
-            {card.childIds && card.childIds.length > 0 && (
+            <Flex
+              container
+              direction='row'
+              spacing={6}
+              item
+            >
               <Flex
                 container
-                item
-                direction='row'
+                alignItems='flex-start'
                 spacing={6}
+                item
               >
-                <Flex
-                  container
-                  alignItems='flex-start'
-                  item
-                  spacing={6}
-                >
-                  <CardProvider
-                    node={node}
-                    renderedInMedia={false}
-                  >
-                    {card.childIds.map((childId, idx) => (
-                      <GenericComponentById
-                        key={idx}
-                        id={childId}
-                      />
-                    ))}
-                  </CardProvider>
-                </Flex>
+                {card?.childIds &&
+                  card.childIds?.length > 0 &&
+                  card.childIds?.filter(typedBoolean).map((childId, idx) => (
+                    <CardItem
+                      key={idx}
+                      nodeId={childId}
+                      parentNode={node}
+                      isMedia={false}
+                    />
+                  ))}
               </Flex>
-            )}
-            {card.footer && (
-              <Card.Footer>
-                <Lang id={card.footer} />
-              </Card.Footer>
-            )}
-            {mediaPosition === 'bottom' && (
-              <Media
-                card={card}
-                node={node}
-                minMediaHeight={processedMinMediaHeight}
-              />
-            )}
-          </Card>
+            </Flex>
+          </AppCard>
         ))}
       </div>
     </ComponentStructureWrapper>
   );
 };
 
-interface MediaProps {
-  card: CardInternal;
-  node: LayoutNode<'Cards'>;
-  minMediaHeight: string | undefined;
-}
+type CardItemProps = {
+  nodeId: string;
+  parentNode: LayoutNode<'Cards'>;
+  isMedia: boolean;
+  minMediaHeight?: string;
+};
 
-function Media({ card, node, minMediaHeight }: MediaProps) {
-  const mediaNode = useNode(card.mediaId);
-  if (!mediaNode) {
+function CardItem({ nodeId, parentNode, isMedia, minMediaHeight }: CardItemProps) {
+  const itemNode = useNode(nodeId);
+  if (!itemNode) {
     return null;
   }
 
   return (
-    <Card.Media className={classes.cardMedia}>
-      <CardProvider
-        node={node}
-        renderedInMedia={true}
-        minMediaHeight={minMediaHeight}
-      >
+    <CardProvider
+      node={parentNode}
+      renderedInMedia={isMedia}
+      minMediaHeight={minMediaHeight}
+    >
+      {isMedia ? (
         <div
-          data-componentid={mediaNode.id}
-          data-componentbaseid={mediaNode.baseId}
+          data-componentid={nodeId}
+          data-componentbaseid={itemNode.baseId}
         >
           <GenericComponent
-            node={mediaNode}
+            node={itemNode}
             overrideDisplay={{
               directRender: true,
             }}
           />
         </div>
-      </CardProvider>
-    </Card.Media>
+      ) : (
+        <GenericComponent node={itemNode} />
+      )}
+    </CardProvider>
   );
 }
diff --git a/src/layout/Checkboxes/CheckboxesContainerComponent.module.css b/src/layout/Checkboxes/CheckboxesContainerComponent.module.css
index cfbb36c8be..fd97bc5ff8 100644
--- a/src/layout/Checkboxes/CheckboxesContainerComponent.module.css
+++ b/src/layout/Checkboxes/CheckboxesContainerComponent.module.css
@@ -2,21 +2,16 @@
   No longer supported with horizontal layout in design system.
   Possible breaking change if we remove this option of styling.
   */
-.horizontal > div {
+.horizontal {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
-  gap: var(--fds-spacing-2);
-}
-
-.checkboxGroup div label {
-  display: inline-flex;
-  padding-left: 3px;
+  gap: var(--ds-size-2);
 }
 
 .checkboxLabelContainer {
   display: flex;
-  gap: var(--fds-spacing-1);
+  gap: var(--ds-size-1);
   align-items: center;
 }
 
@@ -24,3 +19,7 @@
   font-size: 1rem;
   word-break: break-word;
 }
+
+.legend {
+  display: inline-flex;
+}
diff --git a/src/layout/Checkboxes/CheckboxesContainerComponent.test.tsx b/src/layout/Checkboxes/CheckboxesContainerComponent.test.tsx
index 5b4f017236..57ecfdfdf0 100644
--- a/src/layout/Checkboxes/CheckboxesContainerComponent.test.tsx
+++ b/src/layout/Checkboxes/CheckboxesContainerComponent.test.tsx
@@ -216,7 +216,7 @@ describe('CheckboxesContainerComponent', () => {
       options: threeOptions,
     });
 
-    expect(screen.queryByTestId('checkboxes-fieldset')?.className).toContain('horizontal');
+    expect(screen.queryByTestId('horizontalWrapper')).toBeInTheDocument();
   });
 
   it('should show items in a row when layout is not defined, and options count is 2', async () => {
@@ -229,7 +229,7 @@ describe('CheckboxesContainerComponent', () => {
       options: twoOptions,
     });
 
-    expect(screen.queryByTestId('checkboxes-fieldset')?.className).toContain('horizontal');
+    expect(screen.queryByTestId('horizontalWrapper')).toBeInTheDocument();
   });
 
   it('should show items in a column when layout is "column" and options count is 2 ', async () => {
@@ -242,7 +242,7 @@ describe('CheckboxesContainerComponent', () => {
       options: twoOptions,
     });
 
-    expect(screen.queryByTestId('checkboxes-fieldset')).not.toHaveClass('horizontal');
+    expect(screen.queryByTestId('horizontalWrapper')).not.toBeInTheDocument();
   });
 
   it('should show items in a columns when layout is not defined, and options count is 3', async () => {
@@ -253,7 +253,7 @@ describe('CheckboxesContainerComponent', () => {
       options: threeOptions,
     });
 
-    expect(screen.queryByTestId('checkboxes-fieldset')).not.toHaveClass('horizontal');
+    expect(screen.queryByTestId('horizontalWrapper')).not.toBeInTheDocument();
   });
 
   it('should present replaced label if using data model source and trigger setLeafValue with replaced values', async () => {
@@ -276,17 +276,19 @@ describe('CheckboxesContainerComponent', () => {
     expect(screen.getByText(/Description: The value from the group is: Label for first/)).toBeInTheDocument();
     expect(screen.getByText(/Description: The value from the group is: Label for second/)).toBeInTheDocument();
 
-    expect(screen.getByText(/Help Text: The value from the group is: Label for first/)).toBeInTheDocument();
     await userEvent.click(
       screen.getByRole('button', { name: /Help Text: The value from the group is: Label for first/ }),
     );
-    expect(screen.getAllByText(/Help Text: The value from the group is: Label for first/)).toHaveLength(2);
+    expect(
+      screen.getByRole('button', { name: /Help Text: The value from the group is: Label for first/ }),
+    ).toHaveAttribute('aria-expanded', 'true');
 
-    expect(screen.getByText(/Help Text: The value from the group is: Label for second/)).toBeInTheDocument();
     await userEvent.click(
       screen.getByRole('button', { name: /Help Text: The value from the group is: Label for second/ }),
     );
-    expect(screen.getAllByText(/Help Text: The value from the group is: Label for second/)).toHaveLength(2);
+    expect(
+      screen.getByRole('button', { name: /Help Text: The value from the group is: Label for second/ }),
+    ).toHaveAttribute('aria-expanded', 'true');
 
     expect(formDataMethods.setLeafValue).not.toHaveBeenCalled();
     await userEvent.click(getCheckbox({ name: /The value from the group is: Label for second/ }));
diff --git a/src/layout/Checkboxes/CheckboxesContainerComponent.tsx b/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
index b8ce0f2405..9fb2e96862 100644
--- a/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
+++ b/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { Checkbox } from '@digdir/designsystemet-react';
-import cn from 'classnames';
+import { Fieldset, useCheckboxGroup } from '@digdir/designsystemet-react';
 
+import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { AltinnSpinner } from 'src/components/AltinnSpinner';
 import { LabelContent } from 'src/components/label/LabelContent';
 import { Lang } from 'src/features/language/Lang';
@@ -61,6 +61,13 @@ export const CheckboxContainerComponent = ({ node, overrideDisplay }: ICheckboxC
     }
   };
 
+  const { getCheckboxProps } = useCheckboxGroup({
+    name: id,
+    readOnly,
+    value: selectedValues,
+    error: !isValid,
+  });
+
   const labelTextGroup = (
     <LabelContent
       componentId={id}
@@ -81,28 +88,44 @@ export const CheckboxContainerComponent = ({ node, overrideDisplay }: ICheckboxC
           id={id}
           key={`checkboxes_group_${id}`}
         >
-          <Checkbox.Group
-            className={cn({ [classes.horizontal]: horizontal }, classes.checkboxGroup)}
-            legend={labelTextGroup}
-            description={textResourceBindings?.description && <Lang id={textResourceBindings?.description} />}
-            readOnly={readOnly}
-            hideLegend={overrideDisplay?.renderLegend === false}
-            error={!isValid}
+          <Fieldset
+            className={classes.checkboxGroup}
             aria-label={ariaLabel}
-            data-testid='checkboxes-fieldset'
           >
-            {calculatedOptions.map((option) => (
-              <WrappedCheckbox
-                key={option.value}
-                id={id}
-                option={option}
-                hideLabel={hideLabel}
-                alertOnChange={alertOnChange}
-                checked={selectedValues.includes(option.value)}
-                setChecked={(isChecked) => setChecked(isChecked, option)}
-              />
-            ))}
-          </Checkbox.Group>
+            {overrideDisplay?.renderLegend !== false && (
+              <Fieldset.Legend className={classes.legend}>{labelTextGroup}</Fieldset.Legend>
+            )}
+            {textResourceBindings?.description && (
+              <Fieldset.Description>
+                <Lang id={textResourceBindings?.description} />
+              </Fieldset.Description>
+            )}
+            <ConditionalWrapper
+              condition={horizontal}
+              wrapper={(children) => (
+                <div
+                  data-testid='horizontalWrapper'
+                  className={classes.horizontal}
+                >
+                  {children}
+                </div>
+              )}
+            >
+              {calculatedOptions.map((option) => (
+                <WrappedCheckbox
+                  // Force remount to ensure checkbox reflects correct checked state
+                  key={`checkbox-${option.value}-${selectedValues.includes(option.value)}`}
+                  id={id}
+                  option={option}
+                  hideLabel={hideLabel}
+                  alertOnChange={alertOnChange}
+                  {...getCheckboxProps(option.value)}
+                  checked={selectedValues.includes(option.value)}
+                  setChecked={(isChecked) => setChecked(isChecked, option)}
+                />
+              ))}
+            </ConditionalWrapper>
+          </Fieldset>
         </div>
       )}
     </ComponentStructureWrapper>
diff --git a/src/layout/Checkboxes/CheckboxesSummary.module.css b/src/layout/Checkboxes/CheckboxesSummary.module.css
index c67a1f1b7f..1ec76dd082 100644
--- a/src/layout/Checkboxes/CheckboxesSummary.module.css
+++ b/src/layout/Checkboxes/CheckboxesSummary.module.css
@@ -5,7 +5,7 @@
 .labelValueWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
 }
 
 .checkboxSummaryItem {
diff --git a/src/layout/Checkboxes/WrappedCheckbox.tsx b/src/layout/Checkboxes/WrappedCheckbox.tsx
index d19dfd635b..0f4ceccce6 100644
--- a/src/layout/Checkboxes/WrappedCheckbox.tsx
+++ b/src/layout/Checkboxes/WrappedCheckbox.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 
 import { Checkbox } from '@digdir/designsystemet-react';
 import cn from 'classnames';
+import type { CheckboxProps } from '@digdir/designsystemet-react';
 
 import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { HelpText } from 'src/app-components/HelpText/HelpText';
@@ -12,16 +13,18 @@ import { useLanguage } from 'src/features/language/useLanguage';
 import classes from 'src/layout/Checkboxes/CheckboxesContainerComponent.module.css';
 import type { IOptionInternal } from 'src/features/options/castOptionsToStrings';
 
-interface IWrappedCheckboxProps {
+type IWrappedCheckboxProps = {
   id: string;
   option: IOptionInternal;
   hideLabel?: boolean;
   alertOnChange?: boolean;
-  checked: boolean;
   setChecked: (checked: boolean) => void;
-}
+} & Omit<CheckboxProps, 'label' | 'aria-label' | 'aria-labelledby'>;
 
-export function WrappedCheckbox({ id, option, hideLabel, alertOnChange, checked, setChecked }: IWrappedCheckboxProps) {
+export const WrappedCheckbox = forwardRef<HTMLInputElement, IWrappedCheckboxProps>(function WrappedCheckbox(
+  { id, option, hideLabel, alertOnChange, checked, setChecked, readOnly, ...rest }: IWrappedCheckboxProps,
+  ref,
+) {
   const { langAsString, elementAsString } = useLanguage();
 
   const { alertOpen, setAlertOpen, handleChange, confirmChange, cancelChange } = useAlertOnChange(
@@ -50,25 +53,28 @@ export function WrappedCheckbox({ id, option, hideLabel, alertOnChange, checked,
     >
       <Checkbox
         id={`${id}-${option.label.replace(/\s/g, '-')}`}
-        name={option.value}
         description={option.description && <Lang id={option.description} />}
         value={option.value}
+        readOnly={readOnly}
+        label={
+          <span className={cn({ 'sr-only': hideLabel }, classes.checkboxLabelContainer)}>
+            {langAsString(option.label)}
+            {option.helpText && (
+              <HelpText
+                id={id}
+                title={elementAsString(option.helpText)}
+              >
+                <Lang id={option.helpText} />
+              </HelpText>
+            )}
+          </span>
+        }
+        {...rest}
         checked={checked}
-        size='small'
+        data-size='sm'
         onChange={(e) => handleChange(e.target.checked)}
-      >
-        <span className={cn({ 'sr-only': hideLabel }, classes.checkboxLabelContainer)}>
-          {langAsString(option.label)}
-          {option.helpText && (
-            <HelpText
-              id={id}
-              title={elementAsString(option.helpText)}
-            >
-              <Lang id={option.helpText} />
-            </HelpText>
-          )}
-        </span>
-      </Checkbox>
+        ref={ref}
+      />
     </ConditionalWrapper>
   );
-}
+});
diff --git a/src/layout/Datepicker/DropdownCaption.tsx b/src/layout/Datepicker/DropdownCaption.tsx
index c354f10e6d..822e350634 100644
--- a/src/layout/Datepicker/DropdownCaption.tsx
+++ b/src/layout/Datepicker/DropdownCaption.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { formatMonthDropdown, useDayPicker } from 'react-day-picker';
 import type { MonthCaptionProps } from 'react-day-picker';
 
-import { Combobox } from '@digdir/designsystemet-react';
+import { Select } from '@digdir/designsystemet-react';
 import { ArrowLeftIcon, ArrowRightIcon } from '@navikt/aksel-icons';
 import { addYears, max, min, setMonth, setYear, startOfMonth, subYears } from 'date-fns';
 
@@ -10,16 +10,13 @@ import { Button } from 'src/app-components/Button/Button';
 import styles from 'src/app-components/Datepicker/Calendar.module.css';
 import { getMonths, getYears } from 'src/app-components/Datepicker/DatePickerHelpers';
 import { getDateLib } from 'src/app-components/Datepicker/utils/dateHelpers';
-import { Lang } from 'src/features/language/Lang';
 import { useCurrentLanguage } from 'src/features/language/LanguageProvider';
 import { useLanguage } from 'src/features/language/useLanguage';
-import { useIsMobile } from 'src/hooks/useDeviceWidths';
 import comboboxClasses from 'src/styles/combobox.module.css';
 
 export const DropdownCaption = ({ calendarMonth, id }: MonthCaptionProps) => {
   const { goToMonth, nextMonth, previousMonth } = useDayPicker();
   const { langAsString } = useLanguage();
-  const isMobile = useIsMobile();
   const languageLocale = useCurrentLanguage();
   const dateLib = getDateLib(languageLocale ?? 'nb');
 
@@ -51,54 +48,41 @@ export const DropdownCaption = ({ calendarMonth, id }: MonthCaptionProps) => {
         <ArrowLeftIcon />
       </Button>
       <div style={{ display: 'flex', gap: '8px' }}>
-        <Combobox
+        <Select
           style={{ width: '150px' }}
           id={id}
-          size='small'
-          value={[calendarMonth.date.getMonth().toString()]}
-          onValueChange={(months) => months.length && handleMonthChange(months[0])}
+          data-size='sm'
+          value={calendarMonth.date.getMonth().toString()}
+          onChange={(e) => handleMonthChange(e.target.value)}
           aria-label={langAsString('date_picker.aria_label_month_dropdown')}
-          className={comboboxClasses.container}
-          portal={!isMobile}
         >
-          <Combobox.Empty>
-            <Lang id='form_filler.no_options_found' />
-          </Combobox.Empty>
           {months.map((date) => (
-            <Combobox.Option
-              ref={scrollToIfSelected(date.getMonth() === calendarMonth.date.getMonth())}
+            <Select.Option
               key={date.getMonth()}
               value={date.getMonth().toString()}
-              displayValue={formatMonthDropdown(date, dateLib)}
             >
-              <Lang id={formatMonthDropdown(date, dateLib)} />
-            </Combobox.Option>
+              {langAsString(formatMonthDropdown(date, dateLib))}
+            </Select.Option>
           ))}
-        </Combobox>
-        <Combobox
+        </Select>
+        <Select
           style={{ width: '100px' }}
           id={id}
-          size='small'
-          value={[calendarMonth.date.getFullYear().toString()]}
-          onValueChange={(years) => years.length && handleYearChange(years[0])}
+          data-size='sm'
+          value={calendarMonth.date.getFullYear().toString()}
+          onChange={(e) => handleYearChange(e.target.value)}
           aria-label={langAsString('date_picker.aria_label_year_dropdown')}
           className={comboboxClasses.container}
-          portal={!isMobile}
         >
-          <Combobox.Empty>
-            <Lang id='form_filler.no_options_found' />
-          </Combobox.Empty>
           {years.map((date) => (
-            <Combobox.Option
-              ref={scrollToIfSelected(date.getFullYear() === calendarMonth.date.getFullYear())}
+            <Select.Option
               key={date.getFullYear().toString()}
               value={date.getFullYear().toString()}
-              displayValue={date.getFullYear().toString()}
             >
-              <Lang id={date.getFullYear().toString()} />
-            </Combobox.Option>
+              {langAsString(date.getFullYear().toString())}
+            </Select.Option>
           ))}
-        </Combobox>
+        </Select>
       </div>
       <Button
         icon={true}
@@ -113,30 +97,3 @@ export const DropdownCaption = ({ calendarMonth, id }: MonthCaptionProps) => {
     </div>
   );
 };
-
-/**
- * This is a workaround to make sure that the selected option is visible when opening the dropdown see: https://github.com/Altinn/app-frontend-react/issues/2637
- * The ref attribute will call this function with the option element, and this will try to scroll it into view once.
- * When it succeeds, we set a 'data-scroll' attribute to make sure it does not keep trying so the user can scroll as they please.
- */
-function scrollToIfSelected(selected: boolean) {
-  return selected
-    ? (el: HTMLButtonElement | null) => {
-        if (
-          el &&
-          el.parentElement &&
-          // The option list seems to first render with unbounded height and later rendering with scroll-bars, we need to check again when the height changes
-          el.getAttribute('data-scroll-element-height') !== `${el.parentElement.clientHeight}`
-        ) {
-          el.parentElement.scrollTop = el.offsetTop;
-          if (
-            el.offsetTop == 0 || // no scrolling necessary
-            el.parentElement.scrollHeight - el.parentElement.clientHeight == 0 || // container does not have scroll-bars
-            (el.offsetTop > 0 && el.parentElement.scrollTop > 0) // check that we have actually scrolled
-          ) {
-            el.setAttribute('data-scroll-element-height', `${el.parentElement.clientHeight}`);
-          }
-        }
-      }
-    : undefined;
-}
diff --git a/src/layout/Dropdown/DropdownComponent.module.css b/src/layout/Dropdown/DropdownComponent.module.css
new file mode 100644
index 0000000000..65940c4a38
--- /dev/null
+++ b/src/layout/Dropdown/DropdownComponent.module.css
@@ -0,0 +1,5 @@
+.readOnly > div {
+  background: var(--ds-color-neutral-surface-tinted);
+  border-color: var(--ds-color-neutral-border-subtle);
+  color: var(--ds-color-neutral-text-default);
+}
diff --git a/src/layout/Dropdown/DropdownComponent.test.tsx b/src/layout/Dropdown/DropdownComponent.test.tsx
index 35aae052f8..bd133531a6 100644
--- a/src/layout/Dropdown/DropdownComponent.test.tsx
+++ b/src/layout/Dropdown/DropdownComponent.test.tsx
@@ -211,17 +211,6 @@ describe('DropdownComponent', () => {
         newValue: 'Value for first',
       }),
     );
-
-    await userEvent.click(screen.getByRole('combobox'));
-    await userEvent.click(screen.getByText('The value from the group is: Label for second'));
-
-    await waitFor(() => expect(formDataMethods.setLeafValue).toHaveBeenCalledTimes(2));
-    await waitFor(() =>
-      expect(formDataMethods.setLeafValue).toHaveBeenCalledWith({
-        reference: { field: 'myDropdown', dataType: defaultDataTypeMock },
-        newValue: 'Value for second',
-      }),
-    );
   });
 
   it('should present the options list in the order it is provided when sortOrder is not specified', async () => {
diff --git a/src/layout/Dropdown/DropdownComponent.tsx b/src/layout/Dropdown/DropdownComponent.tsx
index 9afffc19fb..f9a6e82ae2 100644
--- a/src/layout/Dropdown/DropdownComponent.tsx
+++ b/src/layout/Dropdown/DropdownComponent.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 
 import { Combobox } from '@digdir/designsystemet-react';
+import cn from 'classnames';
 
 import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { Label } from 'src/app-components/Label/Label';
@@ -13,6 +14,7 @@ import { useLanguage } from 'src/features/language/useLanguage';
 import { useGetOptions } from 'src/features/options/useGetOptions';
 import { useIsValid } from 'src/features/validation/selectors/isValid';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
+import classes from 'src/layout/Dropdown/DropdownComponent.module.css';
 import comboboxClasses from 'src/styles/combobox.module.css';
 import { useLabel } from 'src/utils/layout/useLabel';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
@@ -57,32 +59,32 @@ export function DropdownComponent({ node, overrideDisplay }: IDropdownProps) {
   }
 
   return (
-    <ConditionalWrapper
-      condition={Boolean(alertOnChange)}
-      wrapper={(children) => (
-        <DeleteWarningPopover
-          onPopoverDeleteClick={confirmChange}
-          onCancelClick={cancelChange}
-          deleteButtonText={langAsString('form_filler.alert_confirm')}
-          messageText={alertMessage}
-          open={alertOpen}
-          setOpen={setAlertOpen}
-        >
-          {children}
-        </DeleteWarningPopover>
-      )}
+    <Label
+      htmlFor={id}
+      label={labelText}
+      grid={grid?.labelGrid}
+      required={required}
+      requiredIndicator={getRequiredComponent()}
+      optionalIndicator={getOptionalComponent()}
+      help={getHelpTextComponent()}
+      description={getDescriptionComponent()}
     >
-      <Label
-        htmlFor={id}
-        label={labelText}
-        grid={grid?.labelGrid}
-        required={required}
-        requiredIndicator={getRequiredComponent()}
-        optionalIndicator={getOptionalComponent()}
-        help={getHelpTextComponent()}
-        description={getDescriptionComponent()}
-      >
-        <ComponentStructureWrapper node={node}>
+      <ComponentStructureWrapper node={node}>
+        <ConditionalWrapper
+          condition={Boolean(alertOnChange)}
+          wrapper={(children) => (
+            <DeleteWarningPopover
+              onPopoverDeleteClick={confirmChange}
+              onCancelClick={cancelChange}
+              deleteButtonText={langAsString('form_filler.alert_confirm')}
+              messageText={alertMessage}
+              open={alertOpen}
+              setOpen={setAlertOpen}
+            >
+              {children}
+            </DeleteWarningPopover>
+          )}
+        >
           <Combobox
             id={id}
             filter={optionSearchFilter}
@@ -95,7 +97,7 @@ export function DropdownComponent({ node, overrideDisplay }: IDropdownProps) {
             error={!isValid}
             label={overrideDisplay?.renderedInTable ? langAsString(textResourceBindings?.title) : undefined}
             aria-label={overrideDisplay?.renderedInTable ? langAsString(textResourceBindings?.title) : undefined}
-            className={comboboxClasses.container}
+            className={cn(comboboxClasses.container, { [classes.readOnly]: readOnly })}
             style={{ width: '100%' }}
           >
             <Combobox.Empty>
@@ -115,8 +117,8 @@ export function DropdownComponent({ node, overrideDisplay }: IDropdownProps) {
               </Combobox.Option>
             ))}
           </Combobox>
-        </ComponentStructureWrapper>
-      </Label>
-    </ConditionalWrapper>
+        </ConditionalWrapper>
+      </ComponentStructureWrapper>
+    </Label>
   );
 }
diff --git a/src/layout/FileUpload/Error/FailedAttachments.module.css b/src/layout/FileUpload/Error/FailedAttachments.module.css
index 05f72faedd..c17869431d 100644
--- a/src/layout/FileUpload/Error/FailedAttachments.module.css
+++ b/src/layout/FileUpload/Error/FailedAttachments.module.css
@@ -18,7 +18,7 @@
 }
 
 .close-button {
-  color: var(--fds-semantic-text-neutral-default);
+  color: var(--ds-color-neutral-text-default);
   margin: -16px -16px 0 0;
   padding: 8px;
   min-width: 20px;
diff --git a/src/layout/FileUpload/Error/FailedAttachments.tsx b/src/layout/FileUpload/Error/FailedAttachments.tsx
index 8d51eb19b0..9eacfa2e44 100644
--- a/src/layout/FileUpload/Error/FailedAttachments.tsx
+++ b/src/layout/FileUpload/Error/FailedAttachments.tsx
@@ -34,8 +34,8 @@ function FileUploadError({ attachment, handleClose }: { attachment: IFailedAttac
   const { langAsString } = useLanguage();
   return (
     <Alert
-      size='sm'
-      severity='danger'
+      data-size='sm'
+      data-color='danger'
       role='alert'
       aria-live='assertive'
       aria-label={langAsString('form_filler.file_uploader_failed_to_upload_file', [attachment.data.filename])}
@@ -111,7 +111,7 @@ function ErrorDetails({ attachment: { data, error } }: { attachment: IFailedAtta
             <Button
               id={buttonId}
               style={{ marginTop: '0.5rem' }}
-              size='sm'
+              data-size='sm'
               variant='tertiary'
               color='second'
               onClick={() => {
diff --git a/src/layout/FileUpload/Error/InfectedFileAlert.tsx b/src/layout/FileUpload/Error/InfectedFileAlert.tsx
index d4ea75ef02..5024ce5dfd 100644
--- a/src/layout/FileUpload/Error/InfectedFileAlert.tsx
+++ b/src/layout/FileUpload/Error/InfectedFileAlert.tsx
@@ -44,8 +44,8 @@ function InfectedFileMessage({ filename }: { filename: string }) {
 
   return (
     <Alert
-      size='sm'
-      severity='warning'
+      data-size='sm'
+      data-color='warning'
       role='alert'
       aria-live='assertive'
       aria-label={langAsString('form_filler.file_uploader_infected_file_alert', [filename])}
diff --git a/src/layout/FileUpload/FileUploadTable/FileTableComponent.module.css b/src/layout/FileUpload/FileUploadTable/FileTableComponent.module.css
index f40352ab03..1f9bd8dffe 100644
--- a/src/layout/FileUpload/FileUploadTable/FileTableComponent.module.css
+++ b/src/layout/FileUpload/FileUploadTable/FileTableComponent.module.css
@@ -7,13 +7,13 @@
 .tableMobile {
   width: 100%;
   table-layout: fixed;
-  margin-bottom: var(--fds-spacing-2);
+  margin-bottom: var(--ds-size-2);
   box-shadow: none;
   border-spacing: 0;
 }
 
 .summaryLabelMargin {
-  margin-bottom: var(--fds-spacing-2);
+  margin-bottom: var(--ds-size-2);
 }
 
 .tableMobile tbody tr td {
@@ -52,7 +52,7 @@
 }
 
 .grayUnderline th {
-  border-bottom: var(--fds-semantic-border-neutral-default);
+  border-bottom: var(--ds-color-neutral-border-strong);
   font-size: 0.875rem;
   padding: 4px 4px 4px 6px;
 }
@@ -60,5 +60,5 @@
 .emptyField {
   font-style: italic;
   line-height: 1.6875;
-  color: var(--fds-semantic-text-neutral-subtle);
+  color: var(--ds-color-neutral-text-subtle);
 }
diff --git a/src/layout/FileUpload/FileUploadTable/FileTableRow.module.css b/src/layout/FileUpload/FileUploadTable/FileTableRow.module.css
index 485fbd891b..f85d5e3ceb 100644
--- a/src/layout/FileUpload/FileUploadTable/FileTableRow.module.css
+++ b/src/layout/FileUpload/FileUploadTable/FileTableRow.module.css
@@ -19,11 +19,11 @@ tr.blueUnderlineDotted td {
 }
 
 tr.grayUnderlineDotted td {
-  border-bottom: 1px dotted var(--fds-semantic-border-neutral-default);
+  border-bottom: 1px dotted var(--ds-color-neutral-border-strong);
 }
 
 tr.grayUnderline td {
-  border-bottom: 1px solid var(--fds-semantic-border-neutral-default);
+  border-bottom: 1px solid var(--ds-color-neutral-border-strong);
 }
 
 .altinnLoader {
diff --git a/src/layout/Grid/Grid.module.css b/src/layout/Grid/Grid.module.css
index 3a66d1e8e6..532db491d9 100644
--- a/src/layout/Grid/Grid.module.css
+++ b/src/layout/Grid/Grid.module.css
@@ -1,7 +1,7 @@
 .rowReadOnly,
 .rowReadOnly td,
 .rowReadOnly th {
-  background-color: var(--fds-semantic-surface-neutral-subtle);
+  background-color: var(--ds-color-neutral-background-tinted);
 }
 
 tr > .fullWidthCellFirst {
diff --git a/src/layout/Grid/GridSummary.module.css b/src/layout/Grid/GridSummary.module.css
index 2b2f2f2b23..2a4690dc52 100644
--- a/src/layout/Grid/GridSummary.module.css
+++ b/src/layout/Grid/GridSummary.module.css
@@ -1,7 +1,7 @@
 .rowReadOnly,
 .rowReadOnly td,
 .rowReadOnly th {
-  background-color: var(--fds-semantic-surface-neutral-subtle);
+  background-color: var(--ds-color-neutral-background-tinted);
 }
 
 tr > .fullWidthCellFirst {
@@ -18,11 +18,11 @@ tr > .fullWidthCellLast {
 
 .table th {
   font-weight: 500;
-  border-bottom: 2px solid var(--fds-semantic-border-neutral-strong);
+  border-bottom: 2px solid var(--ds-color-neutral-base-default);
 }
 
 .table td {
-  border-bottom: 1px dashed var(--fds-semantic-border-neutral-default);
+  border-bottom: 1px dashed var(--ds-color-neutral-border-strong);
 }
 
 .table tr:hover td {
@@ -92,11 +92,11 @@ tr > .fullWidthCellLast {
 }
 
 .validationError {
-  border-bottom: var(--fds-semantic-border-danger-default) solid 2px;
+  border-bottom: var(--ds-color-danger-border-default) solid 2px;
 }
 
 .errorMessage {
-  padding-bottom: var(--fds-spacing-2);
+  padding-bottom: var(--ds-size-2);
 }
 
 .mobileFieldset {
@@ -131,7 +131,7 @@ tr > .fullWidthCellLast {
   display: flex;
   flex-direction: column;
   border: none;
-  padding: var(--fds-spacing-2) 0;
+  padding: var(--ds-size-2) 0;
 }
 
 .responsiveTable td .contentWrapper {
@@ -146,9 +146,9 @@ tr > .fullWidthCellLast {
 }
 
 .responsiveTable tr {
-  border-bottom: 2px solid var(--fds-semantic-border-neutral-default);
-  padding-top: var(--fds-spacing-3);
-  padding-bottom: var(--fds-spacing-3);
+  border-bottom: 2px solid var(--ds-color-neutral-border-strong);
+  padding-top: var(--ds-size-3);
+  padding-bottom: var(--ds-size-3);
 }
 
 .responsiveTable td[data-header-title]:not([data-header-title=''])::before,
@@ -158,16 +158,3 @@ tr > .fullWidthCellLast {
   text-align: left;
   font-weight: 500;
 }
-
-.visuallyHidden {
-  border: none;
-  padding: 0;
-  margin: 0;
-  position: absolute;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  clip: rect(1px 1px 1px 1px);
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
diff --git a/src/layout/Grid/GridSummary.tsx b/src/layout/Grid/GridSummary.tsx
index 64eac91ba6..78c518f46b 100644
--- a/src/layout/Grid/GridSummary.tsx
+++ b/src/layout/Grid/GridSummary.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { JSX, PropsWithChildren } from 'react';
 
-import { ErrorMessage, Heading, Table } from '@digdir/designsystemet-react';
+import { Heading, Table, ValidationMessage } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
 import { LabelContent } from 'src/components/label/LabelContent';
@@ -31,6 +31,7 @@ import {
   SummaryFlexForContainer,
 } from 'src/layout/Summary2/SummaryComponent2/ComponentSummary';
 import { useSummaryOverrides, useSummaryProp } from 'src/layout/Summary2/summaryStoreContext';
+import utilClasses from 'src/styles/utils.module.css';
 import { getColumnStyles } from 'src/utils/formComponentUtils';
 import { Hidden, NodesInternal, useNode } from 'src/utils/layout/NodesContext';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
@@ -144,7 +145,7 @@ export const GridSummary = ({ componentNode }: GridSummaryProps) => {
         {title && (
           <caption className={classes.tableCaption}>
             <Heading
-              size='xs'
+              data-size='xs'
               level={4}
             >
               <Lang id={title} />
@@ -206,7 +207,7 @@ function SummaryGridRowRenderer(props: GridRowProps) {
           ))}
           {!pdfModeActive && row.header && !isSmall && (
             <Table.HeaderCell>
-              <span className={classes.visuallyHidden}>
+              <span className={utilClasses.visuallyHidden}>
                 <Lang id='general.edit' />
               </span>
             </Table.HeaderCell>
@@ -457,12 +458,15 @@ function SummaryCellWithComponent({
       <div className={cn({ [classes.errorMessage]: errors.length > 0 })} />
       {errors.length > 0 &&
         errors.map(({ message }) => (
-          <ErrorMessage key={message.key}>
+          <ValidationMessage
+            key={message.key}
+            data-size='sm'
+          >
             <Lang
               id={message.key}
               params={message.params}
             />
-          </ErrorMessage>
+          </ValidationMessage>
         ))}
     </CellComponent>
   );
diff --git a/src/layout/Group/GroupComponent.module.css b/src/layout/Group/GroupComponent.module.css
index b18c5500a6..d27f15086c 100644
--- a/src/layout/Group/GroupComponent.module.css
+++ b/src/layout/Group/GroupComponent.module.css
@@ -1,16 +1,16 @@
 .groupWrapper {
-  padding-top: var(--fds-spacing-3);
-  padding-bottom: var(--fds-spacing-9);
+  padding-top: var(--ds-size-3);
+  padding-bottom: var(--ds-size-9);
   width: 100%;
 
   .legend,
   .description {
-    padding: 0 var(--fds-spacing-3);
+    padding: 0 var(--ds-size-3);
   }
 }
 
 .panelWrapper {
-  padding: var(--fds-spacing-3);
+  padding: var(--ds-size-3);
   padding-bottom: 0;
   width: 100%;
 
@@ -24,22 +24,22 @@
   flex-wrap: wrap;
 
   > * {
-    padding: var(--fds-spacing-3);
+    padding: var(--ds-size-3);
   }
 }
 
 .indented {
   border-left: 2px solid #949494;
-  padding: var(--fds-spacing-3);
+  padding: var(--ds-size-3);
   padding-right: 0;
-  margin-left: var(--fds-spacing-3);
+  margin-left: var(--ds-size-3);
 }
 
 .summary {
   width: 100%;
 
   .groupContainer > * {
-    padding: var(--fds-spacing-3) 0;
+    padding: var(--ds-size-3) 0;
   }
 
   .legend,
diff --git a/src/layout/Group/GroupComponent.tsx b/src/layout/Group/GroupComponent.tsx
index 1020eccee7..67cdb83630 100644
--- a/src/layout/Group/GroupComponent.tsx
+++ b/src/layout/Group/GroupComponent.tsx
@@ -23,7 +23,7 @@ export interface IGroupComponent {
   renderLayoutNode: (node: LayoutNode) => JSX.Element | null;
 }
 
-const headingSizes: { [k in HeadingLevel]: Parameters<typeof Heading>[0]['size'] } = {
+const headingSizes: { [k in HeadingLevel]: Parameters<typeof Heading>[0]['data-size'] } = {
   [2]: 'sm',
   [3]: 'xs',
   [4]: '2xs',
@@ -69,7 +69,7 @@ export function GroupComponent({
               <Heading
                 className={classes.legend}
                 level={headingLevel}
-                size={headingSize}
+                data-size={headingSize}
               >
                 <Lang id={legend} />
               </Heading>
@@ -77,9 +77,9 @@ export function GroupComponent({
           }
           description={
             description && !isSummary ? (
-              <div className={classes.description}>
+              <span className={classes.description}>
                 <Lang id={description} />
-              </div>
+              </span>
             ) : undefined
           }
         >
diff --git a/src/layout/Group/GroupSummary.module.css b/src/layout/Group/GroupSummary.module.css
index 6b6d89f322..94b4885b75 100644
--- a/src/layout/Group/GroupSummary.module.css
+++ b/src/layout/Group/GroupSummary.module.css
@@ -2,13 +2,13 @@
   color: var(--semantic-text-neutral-subtle);
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-size-6);
 }
 
 .nested {
-  border-width: var(--fds-border_width-default);
-  border-radius: var(--fds-border_radius-medium);
-  border-color: var(--fds-semantic-border-neutral-default);
+  border-width: var(--ds-border-width-default);
+  border-radius: var(--ds-border-radius-md);
+  border-color: var(--ds-color-neutral-border-strong);
   border-style: dashed;
-  padding: var(--fds-spacing-6) var(--fds-spacing-4);
+  padding: var(--ds-size-6) var(--ds-size-4);
 }
diff --git a/src/layout/Group/GroupSummary.tsx b/src/layout/Group/GroupSummary.tsx
index 794b2673f8..e46aea8b68 100644
--- a/src/layout/Group/GroupSummary.tsx
+++ b/src/layout/Group/GroupSummary.tsx
@@ -85,7 +85,7 @@ export const GroupSummary = ({ componentNode, hierarchyLevel = 0 }: GroupCompone
       >
         {(summaryTitle || title) && (
           <Heading
-            size={isNestedGroup ? 'xsmall' : 'small'}
+            data-size={isNestedGroup ? 'xs' : 'sm'}
             level={headingLevel}
           >
             <Lang id={summaryTitle ?? title} />
diff --git a/src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap b/src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap
index c0a754a664..3e5e5abcf7 100644
--- a/src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap
+++ b/src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap
@@ -26,7 +26,10 @@ exports[`SummaryGroupComponent SummaryGroupComponent -- should match snapshot 1`
         </span>
         <button
           aria-label="Change: Mock group"
-          class="fds-btn fds-focus fds-btn--sm fds-btn--tertiary fds-btn--second editButton"
+          class="ds-button editButton"
+          data-color="neutral"
+          data-size="sm"
+          data-variant="tertiary"
           type="button"
         >
           Change
diff --git a/src/layout/Header/HeaderComponent.test.tsx b/src/layout/Header/HeaderComponent.test.tsx
index 8109bd0b23..d25d2a49e0 100644
--- a/src/layout/Header/HeaderComponent.test.tsx
+++ b/src/layout/Header/HeaderComponent.test.tsx
@@ -104,11 +104,12 @@ describe('HeaderComponent', () => {
     });
 
     const helpButton = screen.getByRole('button', { name: /Hjelp/i });
-    expect(screen.queryByText(helpText)).not.toBeInTheDocument();
+    expect(helpButton).toHaveAttribute('aria-expanded', 'false');
     fireEvent.click(helpButton);
     expect(screen.getByText(helpText)).toBeInTheDocument();
+    expect(helpButton).toHaveAttribute('aria-expanded', 'true');
     fireEvent.click(helpButton);
 
-    expect(screen.queryByText(helpText)).not.toBeInTheDocument();
+    expect(helpButton).toHaveAttribute('aria-expanded', 'false');
   });
 });
diff --git a/src/layout/Header/HeaderComponent.tsx b/src/layout/Header/HeaderComponent.tsx
index e0531099aa..9f7736b0a8 100644
--- a/src/layout/Header/HeaderComponent.tsx
+++ b/src/layout/Header/HeaderComponent.tsx
@@ -13,7 +13,7 @@ export type IHeaderProps = PropsFromGenericComponent<'Header'>;
 
 type HeadingProps = {
   level: Parameters<typeof Heading>[0]['level'];
-  size: Parameters<typeof Heading>[0]['size'];
+  size: Parameters<typeof Heading>[0]['data-size'];
 };
 
 function getHeaderProps(size?: string): HeadingProps {
@@ -22,14 +22,14 @@ function getHeaderProps(size?: string): HeadingProps {
     case 'h2': {
       return {
         level: 2,
-        size: 'medium',
+        size: 'md',
       };
     }
     case 'M':
     case 'h3': {
       return {
         level: 3,
-        size: 'small',
+        size: 'sm',
       };
     }
     case 'S':
@@ -37,7 +37,7 @@ function getHeaderProps(size?: string): HeadingProps {
     default: {
       return {
         level: 4,
-        size: 'xsmall',
+        size: 'xs',
       };
     }
   }
diff --git a/src/layout/Input/InputComponent.tsx b/src/layout/Input/InputComponent.tsx
index 66faa122e2..a991c64f12 100644
--- a/src/layout/Input/InputComponent.tsx
+++ b/src/layout/Input/InputComponent.tsx
@@ -13,7 +13,6 @@ import { useMapToReactNumberConfig } from 'src/hooks/useMapToReactNumberConfig';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
 import classes from 'src/layout/Input/InputComponent.module.css';
 import { isNumberFormat, isPatternFormat } from 'src/layout/Input/number-format-helpers';
-import { useCharacterLimit } from 'src/utils/inputUtils';
 import { useLabel } from 'src/utils/layout/useLabel';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import type { InputProps } from 'src/app-components/Input/Input';
@@ -121,7 +120,6 @@ export const InputVariant = ({ node, overrideDisplay }: Pick<IInputProps, 'node'
     setValue,
   } = useDataModelBindings(dataModelBindings, saveWhileTyping);
   const { langAsString } = useLanguage();
-  const characterLimit = useCharacterLimit(maxLength);
 
   const [localValue, setLocalValue] = React.useState<string | undefined>(undefined);
   const formValue = localValue ?? realFormValue;
@@ -131,7 +129,7 @@ export const InputVariant = ({ node, overrideDisplay }: Pick<IInputProps, 'node'
 
   const inputProps: InputProps = {
     id,
-    'aria-label': overrideDisplay?.renderedInTable === true ? langAsString(textResourceBindings?.title) : undefined,
+    'aria-label': langAsString(textResourceBindings?.title),
     'aria-describedby':
       textResourceBindings?.title && textResourceBindings?.description ? getDescriptionId(id) : undefined,
     autoComplete: autocomplete,
@@ -143,7 +141,6 @@ export const InputVariant = ({ node, overrideDisplay }: Pick<IInputProps, 'node'
     error: !useIsValid(node),
     prefix: textResourceBindings?.prefix ? langAsString(textResourceBindings.prefix) : undefined,
     suffix: textResourceBindings?.suffix ? langAsString(textResourceBindings.suffix) : undefined,
-    characterLimit: !readOnly ? characterLimit : undefined,
     style: { width: '100%' },
     inputMode,
     pattern,
@@ -160,6 +157,7 @@ export const InputVariant = ({ node, overrideDisplay }: Pick<IInputProps, 'node'
           onChange={(event) => {
             setValue('simpleBinding', event.target.value);
           }}
+          maxLength={maxLength}
         />
       );
     case 'pattern':
@@ -175,6 +173,7 @@ export const InputVariant = ({ node, overrideDisplay }: Pick<IInputProps, 'node'
             }
             setValue('simpleBinding', values.value);
           }}
+          maxLength={maxLength}
         />
       );
     case 'number':
@@ -229,6 +228,7 @@ export const InputVariant = ({ node, overrideDisplay }: Pick<IInputProps, 'node'
               setValue('simpleBinding', pastedText);
             }
           }}
+          maxLength={maxLength}
         />
       );
   }
diff --git a/src/layout/Input/index.tsx b/src/layout/Input/index.tsx
index f1a8b46b53..acf3de6f11 100644
--- a/src/layout/Input/index.tsx
+++ b/src/layout/Input/index.tsx
@@ -1,8 +1,6 @@
 import React, { forwardRef } from 'react';
 import type { JSX } from 'react';
 
-import { formatNumericText } from '@digdir/design-system-react';
-
 import { useDisplayData } from 'src/features/displayData/useDisplayData';
 import { useCurrentLanguage } from 'src/features/language/LanguageProvider';
 import { getMapToReactNumberConfig } from 'src/hooks/useMapToReactNumberConfig';
@@ -11,6 +9,7 @@ import { evalFormatting } from 'src/layout/Input/formatting';
 import { InputComponent } from 'src/layout/Input/InputComponent';
 import { InputSummary } from 'src/layout/Input/InputSummary';
 import { SummaryItemSimple } from 'src/layout/Summary/SummaryItemSimple';
+import { formatNumericText } from 'src/utils/formattingUtils';
 import { NodesInternal } from 'src/utils/layout/NodesContext';
 import { useNodeFormDataWhenType } from 'src/utils/layout/useNodeItem';
 import type { LayoutValidationCtx } from 'src/features/devtools/layoutValidation/types';
diff --git a/src/layout/InstantiationButton/InstantiationButton.test.tsx b/src/layout/InstantiationButton/InstantiationButton.test.tsx
index 7018c560f5..828516669e 100644
--- a/src/layout/InstantiationButton/InstantiationButton.test.tsx
+++ b/src/layout/InstantiationButton/InstantiationButton.test.tsx
@@ -56,12 +56,12 @@ describe('InstantiationButton', () => {
     expect(screen.getByText('Instantiate')).toBeInTheDocument();
 
     await waitFor(() => {
-      expect(screen.queryByText('Laster innhold')).not.toBeInTheDocument();
+      expect(screen.queryByLabelText('Laster innhold')).not.toBeInTheDocument();
     });
 
     await userEvent.click(screen.getByRole('button'));
 
-    expect(screen.getByText('Laster innhold')).toBeInTheDocument();
+    expect(screen.getByLabelText('Laster innhold')).toBeInTheDocument();
 
     expect(mutations.doInstantiateWithPrefill.mock).toHaveBeenCalledTimes(1);
 
diff --git a/src/layout/Likert/LikertComponent.module.css b/src/layout/Likert/LikertComponent.module.css
new file mode 100644
index 0000000000..8602a8e2a7
--- /dev/null
+++ b/src/layout/Likert/LikertComponent.module.css
@@ -0,0 +1,68 @@
+.likertTable {
+  width: 100%;
+}
+
+/* ====
+TODO(1779): Remove these styles after going through all the different Table styles in
+Altinn, and making sure they are consistent. */
+.likertTable {
+  box-shadow:
+    0 1px 1px rgba(0, 0, 0, 0.12),
+    0 2px 2px rgba(0, 0, 0, 0.12);
+}
+
+.likertTable th {
+  border-bottom: 1px solid #dde3e5;
+  padding-top: var(--ds-size-3);
+  padding-bottom: var(--ds-size-3);
+}
+
+.likertTable thead th {
+  background-color: var(--ds-color-neutral-background-tinted);
+}
+
+.likertTable tr td {
+  padding-top: var(--ds-size-4);
+  padding-bottom: var(--ds-size-4);
+  border-bottom: 1px solid #dde3e5;
+}
+
+.likertTable tr:last-of-type td {
+  border-bottom: none;
+}
+
+/* ==== */
+
+.likertTable thead td:not(:first-of-type) {
+  justify-content: center;
+}
+
+.likertTable thead th:not(:first-of-type) {
+  width: 100px;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.likertHeading {
+  text-align: left;
+  padding-bottom: var(--ds-size-4);
+}
+
+.likertMobileGroup {
+  gap: 12px;
+  display: flex;
+  flex-direction: column;
+}
+
+.likertCellDividerStart {
+  border-inline-start: 1px solid #dde3e5;
+}
+
+.likertCellDividerEnd {
+  border-inline-end: 1px solid #dde3e5;
+}
+
+.likertCellDividerBoth {
+  border-inline-start: 1px solid #dde3e5;
+  border-inline-end: 1px solid #dde3e5;
+}
diff --git a/src/layout/Likert/LikertComponent.tsx b/src/layout/Likert/LikertComponent.tsx
index 1e342d4ca6..7c7fff2c5f 100644
--- a/src/layout/Likert/LikertComponent.tsx
+++ b/src/layout/Likert/LikertComponent.tsx
@@ -15,8 +15,8 @@ import { LayoutStyle } from 'src/layout/common.generated';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
 import { GenericComponentById } from 'src/layout/GenericComponent';
 import { makeLikertChildId } from 'src/layout/Likert/Generator/makeLikertChildId';
+import classes from 'src/layout/Likert/LikertComponent.module.css';
 import { useLikertRows } from 'src/layout/Likert/rowUtils';
-import classes from 'src/layout/LikertItem/LikertItemComponent.module.css';
 import { DataModelLocationProvider } from 'src/utils/layout/DataModelLocation';
 import { useNode } from 'src/utils/layout/NodesContext';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
@@ -55,7 +55,7 @@ export const LikertComponent = ({ node }: LikertComponentProps) => {
           >
             <Heading
               level={2}
-              size='sm'
+              data-size='sm'
             >
               <Lang id={title} />
             </Heading>
@@ -100,6 +100,7 @@ export const LikertComponent = ({ node }: LikertComponentProps) => {
       ) : (
         <Table
           id={id}
+          border
           className={classes.likertTable}
           aria-describedby={textResourceBindings?.description ? getDescriptionId(id) : undefined}
         >
@@ -110,7 +111,7 @@ export const LikertComponent = ({ node }: LikertComponentProps) => {
             >
               <Heading
                 level={2}
-                size='sm'
+                data-size='sm'
               >
                 <Lang id={title} />
               </Heading>
diff --git a/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx b/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx
index 0c2e3cafe7..dea1cd7f5a 100644
--- a/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx
+++ b/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx
@@ -19,12 +19,12 @@ export interface IDisplayLikertContainer {
   renderLayoutNode: (node: LayoutNode) => JSX.Element | null;
 }
 
-const headingSizes: { [k in HeadingLevel]: Parameters<typeof Heading>[0]['size'] } = {
-  [2]: 'medium',
-  [3]: 'small',
-  [4]: 'xsmall',
-  [5]: 'xsmall',
-  [6]: 'xsmall',
+const headingSizes: { [k in HeadingLevel]: Parameters<typeof Heading>[0]['data-size'] } = {
+  [2]: 'md',
+  [3]: 'sm',
+  [4]: 'xs',
+  [5]: 'xs',
+  [6]: 'xs',
 };
 
 export function LargeLikertSummaryContainer({
@@ -54,7 +54,7 @@ export function LargeLikertSummaryContainer({
         legend && (
           <Heading
             level={headingLevel}
-            size={headingSize}
+            data-size={headingSize}
           >
             <Lang id={legend} />
           </Heading>
diff --git a/src/layout/Likert/Summary2/LikertSummary.module.css b/src/layout/Likert/Summary2/LikertSummary.module.css
index a7f3204150..c2e76abe8a 100644
--- a/src/layout/Likert/Summary2/LikertSummary.module.css
+++ b/src/layout/Likert/Summary2/LikertSummary.module.css
@@ -7,7 +7,7 @@
 .summaryItemWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-size-6);
 }
 
 .editButton {
diff --git a/src/layout/Likert/Summary2/LikertSummary.tsx b/src/layout/Likert/Summary2/LikertSummary.tsx
index 307630e4d1..22499ddbd4 100644
--- a/src/layout/Likert/Summary2/LikertSummary.tsx
+++ b/src/layout/Likert/Summary2/LikertSummary.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ErrorMessage, Heading } from '@digdir/designsystemet-react';
+import { Heading, ValidationMessage } from '@digdir/designsystemet-react';
 
 import { useDisplayData } from 'src/features/displayData/useDisplayData';
 import { Lang } from 'src/features/language/Lang';
@@ -64,7 +64,7 @@ export function LikertSummary({ target }: Summary2Props<'Likert'>) {
         <div className={classes.summaryItemWrapper}>
           <div className={classes.summaryItem}>
             <Heading
-              size='xs'
+              data-size='xs'
               level={4}
             >
               <Lang id={title} />
@@ -85,12 +85,12 @@ export function LikertSummary({ target }: Summary2Props<'Likert'>) {
             </DataModelLocationProvider>
           ))}
           {errors?.map(({ message }) => (
-            <ErrorMessage key={message.key}>
+            <ValidationMessage key={message.key}>
               <Lang
                 id={message.key}
                 params={message.params}
               />
-            </ErrorMessage>
+            </ValidationMessage>
           ))}
         </div>
       </SummaryFlexForContainer>
diff --git a/src/layout/LikertItem/LikertItemComponent.module.css b/src/layout/LikertItem/LikertItemComponent.module.css
index 89497ed486..3cef531e3d 100644
--- a/src/layout/LikertItem/LikertItemComponent.module.css
+++ b/src/layout/LikertItem/LikertItemComponent.module.css
@@ -1,61 +1,9 @@
-.likertTable {
-  width: 100%;
-}
-
-/* ====
-TODO(1779): Remove these styles after going through all the different Table styles in
-Altinn, and making sure they are consistent. */
-.likertTable {
-  box-shadow:
-    0 1px 1px rgba(0, 0, 0, 0.12),
-    0 2px 2px rgba(0, 0, 0, 0.12);
-}
-
-.likertTable th {
-  border-bottom: 1px solid #dde3e5;
-  padding-top: 15px;
-  padding-bottom: 15px;
-}
-
-.likertTable thead th {
-  background-color: var(--fds-colors-grey-100);
-}
-
-.likertTable tr:not(:last-of-type) td {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #dde3e5;
-}
-
-.likertTable tr:last-of-type td {
-  border-bottom: none;
-}
-
-/* ==== */
-
-.likertTable thead th:not(:first-of-type) {
-  width: 100px;
-  text-align: center;
-  box-sizing: border-box;
-}
-
 .likertRadioButton {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.likertHeading {
-  text-align: left;
-  padding-bottom: var(--fds-spacing-4);
-}
-
-.likertMobileGroup {
-  gap: 12px;
-  display: flex;
-  flex-direction: column;
-}
-
 /*
   This styling was causing a weird frame around
   the input element in some screen readers.
diff --git a/src/layout/LikertItem/LikertItemComponent.tsx b/src/layout/LikertItem/LikertItemComponent.tsx
index d986dc2fa2..651442038e 100644
--- a/src/layout/LikertItem/LikertItemComponent.tsx
+++ b/src/layout/LikertItem/LikertItemComponent.tsx
@@ -59,7 +59,7 @@ const RadioGroupTableRow = forwardRef<HTMLTableRowElement, PropsFromGenericCompo
       >
         <Label
           asChild
-          size='sm'
+          data-size='sm'
           weight='regular'
         >
           <span>
@@ -87,15 +87,16 @@ const RadioGroupTableRow = forwardRef<HTMLTableRowElement, PropsFromGenericCompo
               [classes.likertCellDividerBoth]: divider === 'both',
             })}
           >
-            <Radio
-              checked={isChecked}
-              readOnly={readOnly}
-              onChange={handleChange}
-              value={option.value}
-              className={classes.likertRadioButton}
-              name={rowLabelId}
-              aria-labelledby={labelledby}
-            />
+            <div className={classes.likertRadioButton}>
+              <Radio
+                checked={isChecked}
+                readOnly={readOnly}
+                onChange={handleChange}
+                value={option.value}
+                name={rowLabelId}
+                aria-labelledby={labelledby}
+              />
+            </div>
           </Table.Cell>
         );
       })}
diff --git a/src/layout/List/ListComponent.module.css b/src/layout/List/ListComponent.module.css
index 6599747a8f..ab33046807 100644
--- a/src/layout/List/ListComponent.module.css
+++ b/src/layout/List/ListComponent.module.css
@@ -4,7 +4,7 @@
 
 .listTable caption {
   text-align: left;
-  padding-bottom: var(--fds-spacing-4);
+  padding-bottom: var(--ds-size-4);
 }
 
 .listTable th:first-of-type {
@@ -12,7 +12,7 @@
 }
 
 .listTable th {
-  background-color: var(--fds-colors-grey-100);
+  background-color: var(--ds-color-neutral-background-tinted);
 }
 
 .listTable tr {
@@ -31,7 +31,7 @@
 
 .selectedRow,
 .selectedRowCell {
-  background-color: var(--fds-colors-blue-100);
+  background-color: var(--ds-color-accent-surface-tinted);
 }
 
 .pagination {
@@ -39,30 +39,28 @@
   display: flex;
   justify-content: right;
   align-items: center;
-  background-color: var(--fds-colors-grey-100);
+  background-color: var(--ds-color-neutral-background-tinted);
   width: 100%;
 }
 .paginationMobile {
   justify-content: center;
 }
 
-.mobileGroup > div {
-  display: flex;
-  flex-direction: column;
-}
-
 .mobileGroup > div :hover {
-  background-color: var(--fds-colors-grey-100);
+  background-color: var(--ds-color-neutral-background-tinted);
 }
 
 .mobile {
-  border-top: 1px solid var(--fds-colors-grey-200);
-  padding: var(--fds-spacing-4);
-  gap: var(--fds-spacing-8);
+  display: flex;
+  align-items: center;
+  width: auto;
+  border-top: 1px solid var(--ds-color-neutral-border-subtle);
+  padding: var(--ds-size-4);
+  gap: var(--ds-size-8);
 }
 
 .mobile input:checked:hover {
-  background-color: var(--fds-radio-border-color);
+  background-color: var(--ds-color-accent-base-default);
 }
 
 .mobile label {
@@ -72,19 +70,19 @@
 .mobile span {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-4);
+  gap: var(--ds-size-4);
 }
 
 .mobile label div {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
 }
 
 .listContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
 }
 
 .headerContainer {
diff --git a/src/layout/List/ListComponent.test.tsx b/src/layout/List/ListComponent.test.tsx
index 2dd8e6477f..65f0bdbcf6 100644
--- a/src/layout/List/ListComponent.test.tsx
+++ b/src/layout/List/ListComponent.test.tsx
@@ -198,7 +198,7 @@ describe('ListComponent', () => {
     ]);
   });
 
-  it('should save all field values in when in mobile', async () => {
+  it('should save all field values when in mobile', async () => {
     jest.useFakeTimers();
     jest.spyOn(useDeviceWidths, 'useIsMobile').mockReturnValue(true);
 
diff --git a/src/layout/List/ListComponent.tsx b/src/layout/List/ListComponent.tsx
index a8a0e72706..99e18a0726 100644
--- a/src/layout/List/ListComponent.tsx
+++ b/src/layout/List/ListComponent.tsx
@@ -1,7 +1,15 @@
 import React, { useState } from 'react';
 import type { AriaAttributes } from 'react';
 
-import { Checkbox, Heading, Radio, Table } from '@digdir/designsystemet-react';
+import {
+  Checkbox,
+  Fieldset,
+  Heading,
+  Radio,
+  Table,
+  useCheckboxGroup,
+  useRadioGroup,
+} from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
 import { Pagination as CustomPagination } from 'src/app-components/Pagination/Pagination';
@@ -42,13 +50,13 @@ export const ListComponent = ({ node }: IListProps) => {
   } = item;
 
   const [pageSize, setPageSize] = useState<number>(pagination?.default ?? 0);
-  const [pageNumber, setPageNumber] = useState<number>(0);
+  const [currentPage, setCurrentPage] = useState<number>(1);
   const [sortColumn, setSortColumn] = useState<string | undefined>();
   const [sortDirection, setSortDirection] = useState<AriaAttributes['aria-sort']>('none');
 
   const filter: Filter = {
     pageSize,
-    pageNumber,
+    pageNumber: currentPage - 1,
     sortColumn,
     sortDirection,
   };
@@ -93,6 +101,16 @@ export const ListComponent = ({ node }: IListProps) => {
     }
   };
 
+  const handleSort = (key: string) => {
+    if (sortColumn === key && sortDirection === 'ascending') {
+      setSortColumn(undefined);
+      setSortDirection(undefined);
+    } else {
+      setSortColumn(key);
+      setSortDirection(sortColumn === key && sortDirection === 'descending' ? 'ascending' : 'descending');
+    }
+  };
+
   const renderListItems = (row: Row, tableHeaders: { [x: string]: string | undefined }) =>
     tableHeadersToShowInMobile.map((key) => (
       <div key={key}>
@@ -103,70 +121,82 @@ export const ListComponent = ({ node }: IListProps) => {
       </div>
     ));
 
-  const options = enabled ? (
-    <Checkbox.Group
-      legend={
-        <Heading
-          level={2}
-          size='sm'
-        >
-          <Lang id={title} />
-          <RequiredIndicator required={required} />
-        </Heading>
-      }
-      description={description && <Lang id={description} />}
-    >
-      {data?.listItems.map((row) => (
-        <Checkbox
-          key={JSON.stringify(row)}
-          onClick={() => handleRowClick(row)}
-          value={JSON.stringify(row)}
-          className={cn(classes.mobile)}
-          checked={isChecked(row)}
-        >
-          {renderListItems(row, tableHeaders)}
-        </Checkbox>
-      ))}
-    </Checkbox.Group>
-  ) : (
-    <Radio.Group
-      role='radiogroup'
-      required={required}
-      legend={
-        <Heading
-          level={2}
-          size='sm'
-        >
-          <Lang id={title} />
-          <RequiredIndicator required={required} />
-        </Heading>
-      }
-      description={description && <Lang id={description} />}
-      className={classes.mobileGroup}
-      value={JSON.stringify(selectedRow)}
-    >
-      {data?.listItems.map((row) => (
-        <Radio
-          key={JSON.stringify(row)}
-          value={JSON.stringify(row)}
-          className={cn(classes.mobile, { [classes.selectedRow]: isRowSelected(row) })}
-          onClick={() => handleSelectedRadioRow({ selectedValue: row })}
-        >
-          {renderListItems(row, tableHeaders)}
-        </Radio>
-      ))}
-    </Radio.Group>
-  );
+  const { getRadioProps } = useRadioGroup({
+    name: node.id,
+    value: JSON.stringify(selectedRow),
+    required,
+  });
+
+  const { getCheckboxProps } = useCheckboxGroup({
+    name: node.id,
+    required,
+  });
 
   if (isMobile) {
     return (
       <ComponentStructureWrapper node={node}>
-        {options}
+        {enabled ? (
+          <Fieldset>
+            <Fieldset.Legend>
+              {description && (
+                <Fieldset.Description>
+                  <Lang id={description} />
+                </Fieldset.Description>
+              )}
+              <Heading
+                level={2}
+                data-size='sm'
+              >
+                <Lang id={title} />
+                <RequiredIndicator required={required} />
+              </Heading>
+            </Fieldset.Legend>
+            {data?.listItems.map((row) => (
+              <Checkbox
+                key={JSON.stringify(row)}
+                className={cn(classes.mobile)}
+                {...getCheckboxProps({ value: JSON.stringify(row) })}
+                onClick={() => handleRowClick(row)}
+                value={JSON.stringify(row)}
+                checked={isChecked(row)}
+                label={renderListItems(row, tableHeaders)}
+              />
+            ))}
+          </Fieldset>
+        ) : (
+          <Fieldset className={classes.mobileGroup}>
+            <Fieldset.Legend>
+              <Heading
+                level={2}
+                data-size='sm'
+              >
+                <Lang id={title} />
+                <RequiredIndicator required={required} />
+              </Heading>
+            </Fieldset.Legend>
+            {description && (
+              <Fieldset.Description>
+                <Lang id={description} />
+              </Fieldset.Description>
+            )}
+
+            {data?.listItems.map((row) => (
+              <Radio
+                key={JSON.stringify(row)}
+                {...getRadioProps({ value: JSON.stringify(row) })}
+                value={JSON.stringify(row)}
+                className={cn(classes.mobile, { [classes.selectedRow]: isRowSelected(row) })}
+                onClick={() => handleSelectedRadioRow({ selectedValue: row })}
+                label={renderListItems(row, tableHeaders)}
+              />
+            ))}
+          </Fieldset>
+        )}
         <Pagination
           pageSize={pageSize}
           setPageSize={setPageSize}
-          pageNumber={pageNumber}
-          setPageNumber={setPageNumber}
+          currentPage={currentPage}
+          setCurrentPage={setCurrentPage}
           numberOfRows={data?._metaData.totaltItemsCount}
           rowsPerPageOptions={pagination?.alternatives}
         />
@@ -181,7 +211,7 @@ export const ListComponent = ({ node }: IListProps) => {
           <caption id={getLabelId(node.id)}>
             <Heading
               level={2}
-              size='sm'
+              data-size='sm'
             >
               <Lang id={title} />
               <RequiredIndicator required={required} />
@@ -197,23 +227,22 @@ export const ListComponent = ({ node }: IListProps) => {
         <Table.Head>
           <Table.Row>
             <Table.HeaderCell />
-            {Object.entries(tableHeaders).map(([key, value]) => (
-              <Table.HeaderCell
-                key={key}
-                sortable={sortableColumns?.includes(key)}
-                sort={sortColumn === key ? sortDirection : undefined}
-                onSortClick={() => {
-                  if (sortColumn === key) {
-                    setSortDirection(sortDirection === 'ascending' ? 'descending' : 'ascending');
-                  } else {
-                    setSortDirection('descending');
-                    setSortColumn(key);
-                  }
-                }}
-              >
-                <Lang id={value} />
-              </Table.HeaderCell>
-            ))}
+            {Object.entries(tableHeaders).map(([key, value]) => {
+              const isSortable = sortableColumns?.includes(key);
+              let sort: AriaAttributes['aria-sort'] = undefined;
+              if (isSortable) {
+                sort = sortColumn === key ? sortDirection : 'none';
+              }
+              return (
+                <Table.HeaderCell
+                  key={key}
+                  sort={sort}
+                  onClick={isSortable ? () => handleSort(key) : undefined}
+                >
+                  <Lang id={value} />
+                </Table.HeaderCell>
+              );
+            })}
           </Table.Row>
         </Table.Head>
         <Table.Body>
@@ -267,8 +296,8 @@ export const ListComponent = ({ node }: IListProps) => {
         <Pagination
           pageSize={pageSize}
           setPageSize={setPageSize}
-          pageNumber={pageNumber}
-          setPageNumber={setPageNumber}
+          currentPage={currentPage}
+          setCurrentPage={setCurrentPage}
           numberOfRows={data?._metaData.totaltItemsCount}
           rowsPerPageOptions={pagination?.alternatives}
         />
@@ -280,8 +309,8 @@ export const ListComponent = ({ node }: IListProps) => {
 type PaginationProps = {
   pageSize: number;
   setPageSize: (pageSize: number) => void;
-  pageNumber: number;
-  setPageNumber: (pageNumber: number) => void;
+  currentPage: number;
+  setCurrentPage: (pageNumber: number) => void;
   numberOfRows: number | undefined;
   rowsPerPageOptions: number[] | undefined;
 };
@@ -289,8 +318,8 @@ type PaginationProps = {
 function Pagination({
   pageSize,
   setPageSize,
-  pageNumber,
-  setPageNumber,
+  currentPage,
+  setCurrentPage,
   numberOfRows = 0,
   rowsPerPageOptions = [],
 }: PaginationProps) {
@@ -298,11 +327,11 @@ function Pagination({
   const isMobile = useIsMobile();
 
   function handlePageSizeChange(newSize: number) {
-    setPageNumber(0);
+    setCurrentPage(1);
     setPageSize(newSize);
   }
   return (
-    <div className={cn({ [classes.paginationMobile]: isMobile }, classes.pagination, 'fds-table__header__cell')}>
+    <div className={cn({ [classes.paginationMobile]: isMobile }, classes.pagination, 'ds-table__header__cell')}>
       <CustomPagination
         nextLabel={langAsString('list_component.nextPage')}
         nextLabelAriaLabel={langAsString('list_component.nextPageAriaLabel')}
@@ -310,10 +339,10 @@ function Pagination({
         previousLabelAriaLabel={langAsString('list_component.previousPageAriaLabel')}
         rowsPerPageText={langAsString('list_component.rowsPerPage')}
         size='sm'
-        currentPage={pageNumber}
+        currentPage={currentPage}
         numberOfRows={numberOfRows}
         pageSize={pageSize}
-        onChange={setPageNumber}
+        setCurrentPage={setCurrentPage}
         showRowsPerPageDropdown
         onPageSizeChange={(value) => handlePageSizeChange(+value)}
         rowsPerPageOptions={rowsPerPageOptions}
diff --git a/src/layout/List/ListSummary.tsx b/src/layout/List/ListSummary.tsx
index b52ae7e693..1b03d24f2c 100644
--- a/src/layout/List/ListSummary.tsx
+++ b/src/layout/List/ListSummary.tsx
@@ -60,7 +60,7 @@ export const ListSummary = ({ target }: Summary2Props<'List'>) => {
             {title && (
               <caption className={classes.tableCaption}>
                 <Heading
-                  size='xs'
+                  data-size='xs'
                   level={4}
                 >
                   <Lang id={title} />
diff --git a/src/layout/Map/MapComponent.module.css b/src/layout/Map/MapComponent.module.css
index 700350980e..ceb19ced25 100644
--- a/src/layout/Map/MapComponent.module.css
+++ b/src/layout/Map/MapComponent.module.css
@@ -66,7 +66,7 @@
 }
 
 .map-error {
-  border-color: var(--fds-semantic-border-danger-default);
+  border-color: var(--ds-color-danger-border-default);
   border-width: 2px;
   border-style: solid;
 }
diff --git a/src/layout/Map/MapComponent.tsx b/src/layout/Map/MapComponent.tsx
index 6cefbe3a76..da5f958dc7 100644
--- a/src/layout/Map/MapComponent.tsx
+++ b/src/layout/Map/MapComponent.tsx
@@ -59,7 +59,7 @@ export function MapComponent({ node }: IMapComponentProps) {
         />
       </div>
       <Paragraph
-        size='sm'
+        data-size='sm'
         className={classes.footer}
       >
         {markerBinding ? (
diff --git a/src/layout/Map/Summary2/MapSummary.module.css b/src/layout/Map/Summary2/MapSummary.module.css
index 780a08ce60..a45585463d 100644
--- a/src/layout/Map/Summary2/MapSummary.module.css
+++ b/src/layout/Map/Summary2/MapSummary.module.css
@@ -7,7 +7,7 @@
 .summaryItemWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
   break-inside: avoid;
 }
 
@@ -17,7 +17,7 @@
 }
 
 .error {
-  border-bottom: var(--fds-semantic-border-danger-default) solid 2px;
+  border-bottom: var(--ds-color-danger-border-default) solid 2px;
 }
 
 .editButton {
diff --git a/src/layout/Map/Summary2/MapSummary.tsx b/src/layout/Map/Summary2/MapSummary.tsx
index 7320a55fd9..711baaeae7 100644
--- a/src/layout/Map/Summary2/MapSummary.tsx
+++ b/src/layout/Map/Summary2/MapSummary.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ErrorMessage, Paragraph } from '@digdir/designsystemet-react';
+import { Paragraph, ValidationMessage } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
 import { Label } from 'src/components/label/Label';
@@ -91,12 +91,12 @@ export function MapSummary({ target }: Summary2Props<'Map'>) {
           </Paragraph>
         )}
         {errors?.map(({ message }) => (
-          <ErrorMessage key={message.key}>
+          <ValidationMessage key={message.key}>
             <Lang
               id={message.key}
               params={message.params}
             />
-          </ErrorMessage>
+          </ValidationMessage>
         ))}
       </div>
     </SummaryFlex>
diff --git a/src/layout/MultipleSelect/MultipleSelectComponent.test.tsx b/src/layout/MultipleSelect/MultipleSelectComponent.test.tsx
index a2260996d2..502582722e 100644
--- a/src/layout/MultipleSelect/MultipleSelectComponent.test.tsx
+++ b/src/layout/MultipleSelect/MultipleSelectComponent.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { screen, waitFor } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
+import { screen } from '@testing-library/react';
 
 import { defaultDataTypeMock } from 'src/__mocks__/getLayoutSetsMock';
 import { MultipleSelectComponent } from 'src/layout/MultipleSelect/MultipleSelectComponent';
@@ -37,34 +36,6 @@ const render = async ({ component, ...rest }: Partial<RenderGenericComponentTest
   });
 
 describe('MultipleSelect', () => {
-  it('should display correct options as selected when supplied with a comma separated form data', async () => {
-    await render({
-      queries: {
-        fetchFormData: async () => ({ someField: 'value1,value3' }),
-      },
-    });
-    expect(screen.getByText('label1')).toBeInTheDocument();
-    expect(screen.queryByText('label2')).not.toBeInTheDocument();
-    expect(screen.getByText('label3')).toBeInTheDocument();
-  });
-
-  it('should remove item from comma separated form data on delete', async () => {
-    const { formDataMethods } = await render({
-      queries: {
-        fetchFormData: async () => ({ someField: 'value1,value2,value3' }),
-      },
-    });
-
-    await userEvent.click(screen.getByRole('button', { name: /Slett label2/i }));
-
-    await waitFor(() =>
-      expect(formDataMethods.setLeafValue).toHaveBeenCalledWith({
-        reference: { field: 'someField', dataType: defaultDataTypeMock },
-        newValue: 'value1,value3',
-      }),
-    );
-  });
-
   it('required validation should only show for simpleBinding', async () => {
     await render({
       component: {
diff --git a/src/layout/MultipleSelect/MultipleSelectComponent.tsx b/src/layout/MultipleSelect/MultipleSelectComponent.tsx
index 93c6d0a08e..4bd823de56 100644
--- a/src/layout/MultipleSelect/MultipleSelectComponent.tsx
+++ b/src/layout/MultipleSelect/MultipleSelectComponent.tsx
@@ -1,8 +1,7 @@
 import React, { useCallback } from 'react';
 
-import { Combobox } from '@digdir/designsystemet-react';
+import { EXPERIMENTAL_MultiSuggestion, Field } from '@digdir/designsystemet-react';
 
-import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { Label } from 'src/app-components/Label/Label';
 import { AltinnSpinner } from 'src/components/AltinnSpinner';
 import { getDescriptionId } from 'src/components/label/Label';
@@ -15,10 +14,10 @@ import { useGetOptions } from 'src/features/options/useGetOptions';
 import { useSaveValueToGroup } from 'src/features/saveToGroup/useSaveToGroup';
 import { useIsValid } from 'src/features/validation/selectors/isValid';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
-import comboboxClasses from 'src/styles/combobox.module.css';
+import utilclasses from 'src/styles/utils.module.css';
 import { useLabel } from 'src/utils/layout/useLabel';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
-import { optionSearchFilter } from 'src/utils/options';
+import { optionFilter } from 'src/utils/options';
 import type { PropsFromGenericComponent } from 'src/layout';
 
 export type IMultipleSelectProps = PropsFromGenericComponent<'MultipleSelect'>;
@@ -64,26 +63,20 @@ export function MultipleSelectComponent({ node, overrideDisplay }: IMultipleSele
     changeMessageGenerator,
   );
 
+  const [componentKey, setComponentKey] = React.useState(0);
+
+  // This is a workaround to force the component to update its internal state, when the user cancels the alert on change
+  const onCancelClick = () => {
+    cancelChange();
+    setComponentKey((prevKey) => prevKey + 1);
+  };
+
   if (isFetching) {
     return <AltinnSpinner />;
   }
 
   return (
-    <ConditionalWrapper
-      condition={Boolean(alertOnChange)}
-      wrapper={(children) => (
-        <DeleteWarningPopover
-          deleteButtonText={langAsString('form_filler.alert_confirm')}
-          messageText={alertMessage}
-          onCancelClick={cancelChange}
-          onPopoverDeleteClick={confirmChange}
-          open={alertOpen}
-          setOpen={setAlertOpen}
-        >
-          {children}
-        </DeleteWarningPopover>
-      )}
-    >
+    <Field style={{ width: '100%' }}>
       <Label
         htmlFor={id}
         label={labelText}
@@ -95,48 +88,67 @@ export function MultipleSelectComponent({ node, overrideDisplay }: IMultipleSele
         description={getDescriptionComponent()}
       >
         <ComponentStructureWrapper node={node}>
-          <Combobox
-            multiple
-            hideLabel
+          <EXPERIMENTAL_MultiSuggestion
+            key={componentKey}
             id={id}
-            filter={optionSearchFilter}
-            size='sm'
+            data-testid='multiple-select-component'
+            filter={optionFilter}
+            data-size='sm'
             value={selectedValues}
-            readOnly={readOnly}
             onValueChange={handleChange}
             onBlur={debounce}
-            error={!isValid}
-            clearButtonLabel={langAsString('form_filler.clear_selection')}
-            aria-label={overrideDisplay?.renderedInTable ? langAsString(textResourceBindings?.title) : undefined}
-            className={comboboxClasses.container}
-            aria-describedby={
-              overrideDisplay?.renderedInTable !== true &&
-              textResourceBindings?.title &&
-              textResourceBindings?.description
-                ? getDescriptionId(id)
-                : undefined
-            }
-            style={{ width: '100%' }}
           >
-            <Combobox.Empty>
-              <Lang id='form_filler.no_options_found' />
-            </Combobox.Empty>
-            {options.map((option) => (
-              <Combobox.Option
-                key={option.value}
-                value={option.value}
-                description={option.description ? langAsString(option.description) : undefined}
-                displayValue={langAsString(option.label) || '\u200b'} // Workaround to prevent component from crashing due to empty string
+            <EXPERIMENTAL_MultiSuggestion.Chips render={(e) => e.text} />
+            {alertOnChange && (
+              <DeleteWarningPopover
+                deleteButtonText={langAsString('form_filler.alert_confirm')}
+                messageText={alertMessage}
+                onCancelClick={onCancelClick}
+                onPopoverDeleteClick={confirmChange}
+                open={alertOpen}
+                setOpen={setAlertOpen}
               >
-                <span>
-                  <wbr />
-                  <Lang id={option.label} />
+                <span
+                  className={utilclasses.visuallyHidden}
+                  aria-hidden='true'
+                >
+                  Trigger
                 </span>
-              </Combobox.Option>
-            ))}
-          </Combobox>
+              </DeleteWarningPopover>
+            )}
+            <EXPERIMENTAL_MultiSuggestion.Input
+              aria-invalid={!isValid}
+              aria-label={overrideDisplay?.renderedInTable ? langAsString(textResourceBindings?.title) : undefined}
+              aria-describedby={
+                overrideDisplay?.renderedInTable !== true &&
+                textResourceBindings?.title &&
+                textResourceBindings?.description
+                  ? getDescriptionId(id)
+                  : undefined
+              }
+              readOnly={readOnly}
+            />
+            <EXPERIMENTAL_MultiSuggestion.Clear aria-label={langAsString('form_filler.clear_selection')} />
+            <EXPERIMENTAL_MultiSuggestion.List>
+              <EXPERIMENTAL_MultiSuggestion.Empty>
+                <Lang id='form_filler.no_options_found' />
+              </EXPERIMENTAL_MultiSuggestion.Empty>
+              {options.map((option) => (
+                <EXPERIMENTAL_MultiSuggestion.Option
+                  key={option.value}
+                  value={option.value}
+                >
+                  <span>
+                    <wbr />
+                    <Lang id={option.label} />
+                    {option.description && <Lang id={option.description} />}
+                  </span>
+                </EXPERIMENTAL_MultiSuggestion.Option>
+              ))}
+            </EXPERIMENTAL_MultiSuggestion.List>
+          </EXPERIMENTAL_MultiSuggestion>
         </ComponentStructureWrapper>
       </Label>
-    </ConditionalWrapper>
+    </Field>
   );
 }
diff --git a/src/layout/NavigationBar/NavigationBarComponent.module.css b/src/layout/NavigationBar/NavigationBarComponent.module.css
index a9c0d25e84..7caf03ffdf 100644
--- a/src/layout/NavigationBar/NavigationBarComponent.module.css
+++ b/src/layout/NavigationBar/NavigationBarComponent.module.css
@@ -49,9 +49,9 @@
 }
 
 .buttonBase:focus-within {
-  outline: var(--fds-focus-border-width) solid var(--fds-outer-focus-border-color);
-  outline-offset: var(--fds-focus-border-width);
-  box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-inner-focus-border-color);
+  outline: var(--ds-border-width-focus) solid var(--ds-color-focus-outer);
+  outline-offset: var(--ds-border-width-focus);
+  box-shadow: 0 0 0 var(--ds-border-width-focus) var(--ds-color-focus-inner);
 }
 
 .buttonBase:disabled {
diff --git a/src/layout/NavigationBar/NavigationBarComponent.tsx b/src/layout/NavigationBar/NavigationBarComponent.tsx
index c822aa072c..e014501ffd 100644
--- a/src/layout/NavigationBar/NavigationBarComponent.tsx
+++ b/src/layout/NavigationBar/NavigationBarComponent.tsx
@@ -160,7 +160,7 @@ export const NavigationBarComponent = ({ node }: INavigationBar) => {
                       {process === pageId && (
                         <Spinner
                           className={classes.spinner}
-                          title={langAsString('general.loading')}
+                          aria-label={langAsString('general.loading')}
                         />
                       )}
                       <span>
diff --git a/src/layout/Number/index.tsx b/src/layout/Number/index.tsx
index a319483d81..98b0b09d7e 100644
--- a/src/layout/Number/index.tsx
+++ b/src/layout/Number/index.tsx
@@ -1,14 +1,13 @@
 import React, { forwardRef } from 'react';
 import type { JSX } from 'react';
 
-import { formatNumericText } from '@digdir/design-system-react';
-
 import { useCurrentLanguage } from 'src/features/language/LanguageProvider';
 import { getMapToReactNumberConfig } from 'src/hooks/useMapToReactNumberConfig';
 import { evalFormatting } from 'src/layout/Input/formatting';
 import { NumberDef } from 'src/layout/Number/config.def.generated';
 import { NumberComponent } from 'src/layout/Number/NumberComponent';
 import { NumberSummary } from 'src/layout/Number/NumberSummary';
+import { formatNumericText } from 'src/utils/formattingUtils';
 import { NodesInternal } from 'src/utils/layout/NodesContext';
 import type { DisplayData } from 'src/features/displayData';
 import type { PropsFromGenericComponent } from 'src/layout';
diff --git a/src/layout/Option/OptionComponent.tsx b/src/layout/Option/OptionComponent.tsx
index 194e42993c..c88131007b 100644
--- a/src/layout/Option/OptionComponent.tsx
+++ b/src/layout/Option/OptionComponent.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { HelpText } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
+import { HelpText } from 'src/app-components/HelpText/HelpText';
 import { getLabelId } from 'src/components/label/Label';
 import { Lang } from 'src/features/language/Lang';
 import { useLanguage } from 'src/features/language/useLanguage';
diff --git a/src/layout/OrganisationLookup/OrganisationLookupComponent.module.css b/src/layout/OrganisationLookup/OrganisationLookupComponent.module.css
index 139796f72f..c33a76a714 100644
--- a/src/layout/OrganisationLookup/OrganisationLookupComponent.module.css
+++ b/src/layout/OrganisationLookup/OrganisationLookupComponent.module.css
@@ -9,7 +9,7 @@
       'apiError';
   }
   .submit {
-    margin-top: var(--fds-spacing-6);
+    margin-top: var(--ds-size-6);
   }
 }
 
@@ -23,7 +23,7 @@
       'orgnr submit'
       'orgname .'
       'apiError .';
-    column-gap: var(--fds-spacing-6);
+    column-gap: var(--ds-size-6);
   }
   .submit {
     margin-top: 0;
@@ -43,7 +43,7 @@
   }
 
   .orgname {
-    padding-top: var(--fds-spacing-2);
+    padding-top: var(--ds-size-2);
     grid-area: orgname;
   }
 
@@ -54,6 +54,6 @@
 
   .apiError {
     grid-area: apiError;
-    padding-top: var(--fds-spacing-2);
+    padding-top: var(--ds-size-2);
   }
 }
diff --git a/src/layout/OrganisationLookup/OrganisationLookupComponent.tsx b/src/layout/OrganisationLookup/OrganisationLookupComponent.tsx
index d7089f404c..b7e66480b0 100644
--- a/src/layout/OrganisationLookup/OrganisationLookupComponent.tsx
+++ b/src/layout/OrganisationLookup/OrganisationLookupComponent.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { ErrorMessage, Paragraph } from '@digdir/designsystemet-react';
+import { Field, Paragraph, ValidationMessage } from '@digdir/designsystemet-react';
 import { queryOptions, useQuery } from '@tanstack/react-query';
 
 import type { PropsFromGenericComponent } from '..';
@@ -88,7 +88,6 @@ export function OrganisationLookupComponent({
         ?.filter((error) => error.instancePath === '/orgNr')
         .map((error) => error.message)
         .filter((it) => it != null);
-
       setOrgNrErrors(errors);
       return false;
     }
@@ -119,6 +118,8 @@ export function OrganisationLookupComponent({
 
   const hasSuccessfullyFetched = !!organisation_lookup_orgnr;
 
+  const isValid = (orgNrErrors?.length && orgNrErrors?.length > 0) || data?.error;
+
   return (
     <Fieldset
       legend={labelText}
@@ -145,27 +146,34 @@ export function OrganisationLookupComponent({
               }
             />
           </div>
-          <NumericInput
-            id={`${id}_orgnr`}
-            aria-describedby={hasSuccessfullyFetched ? getDescriptionId(`${id}_orgnr`) : undefined}
-            value={hasSuccessfullyFetched ? organisation_lookup_orgnr : tempOrgNr}
-            className={classes.orgnr}
-            required={required}
-            readOnly={hasSuccessfullyFetched || isFetching}
-            error={orgNrErrors?.length && <Lang id={orgNrErrors.join(' ')} />}
-            onValueChange={(e) => {
-              setTempOrgNr(e.value);
-              setOrgNrErrors(undefined);
-            }}
-            onKeyDown={async (ev) => {
-              if (ev.key === 'Enter') {
-                await handleSubmit();
-              }
-            }}
-            allowLeadingZeros
-            inputMode='numeric'
-            pattern='[0-9]{9}'
-          />
+          <Field className={classes.orgnr}>
+            <NumericInput
+              id={`${id}_orgnr`}
+              aria-describedby={hasSuccessfullyFetched ? getDescriptionId(`${id}_orgnr`) : undefined}
+              aria-label={langAsString('organisation_lookup.orgnr_label')}
+              value={hasSuccessfullyFetched ? organisation_lookup_orgnr : tempOrgNr}
+              required={required}
+              readOnly={hasSuccessfullyFetched || isFetching}
+              error={isValid}
+              onValueChange={(e) => {
+                setTempOrgNr(e.value);
+                setOrgNrErrors(undefined);
+              }}
+              onKeyDown={async (ev) => {
+                if (ev.key === 'Enter') {
+                  await handleSubmit();
+                }
+              }}
+              allowLeadingZeros
+              inputMode='numeric'
+              pattern='[0-9]{9}'
+            />
+            {orgNrErrors?.length && (
+              <ValidationMessage data-size='sm'>
+                <Lang id={orgNrErrors.join(' ')} />
+              </ValidationMessage>
+            )}
+          </Field>
           <div className={classes.submit}>
             {!hasSuccessfullyFetched ? (
               <Button
@@ -186,19 +194,19 @@ export function OrganisationLookupComponent({
             )}
           </div>
           {data?.error && (
-            <ErrorMessage
-              size='sm'
+            <ValidationMessage
+              data-size='sm'
               className={classes.apiError}
             >
               <Lang id={data.error} />
-            </ErrorMessage>
+            </ValidationMessage>
           )}
           {hasSuccessfullyFetched && orgName && (
             <div
               className={classes.orgname}
               aria-label={langAsString('organisation_lookup.org_name')}
             >
-              {hasSuccessfullyFetched && <Paragraph size='sm'>{orgName}</Paragraph>}
+              {hasSuccessfullyFetched && <Paragraph data-size='sm'>{orgName}</Paragraph>}
             </div>
           )}
         </div>
diff --git a/src/layout/OrganisationLookup/OrganisationLookupSummary.module.css b/src/layout/OrganisationLookup/OrganisationLookupSummary.module.css
index c245f0e3d8..2d990f8a2c 100644
--- a/src/layout/OrganisationLookup/OrganisationLookupSummary.module.css
+++ b/src/layout/OrganisationLookup/OrganisationLookupSummary.module.css
@@ -17,7 +17,7 @@
 .organisationSummaryWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-size-6);
   width: 100%;
 }
 
diff --git a/src/layout/OrganisationLookup/OrganisationLookupSummary.tsx b/src/layout/OrganisationLookup/OrganisationLookupSummary.tsx
index de43608a6f..d3b820c92e 100644
--- a/src/layout/OrganisationLookup/OrganisationLookupSummary.tsx
+++ b/src/layout/OrganisationLookup/OrganisationLookupSummary.tsx
@@ -43,7 +43,7 @@ export function OrganisationLookupSummary({ componentNode }: OrganisationLookupS
     >
       <div className={classes.organisationSummaryWrapper}>
         <Heading
-          size='sm'
+          data-size='sm'
           level={2}
         >
           <Lang id={title} />
diff --git a/src/layout/Payment/PaymentComponent.module.css b/src/layout/Payment/PaymentComponent.module.css
index df8a49952a..f6d83ae310 100644
--- a/src/layout/Payment/PaymentComponent.module.css
+++ b/src/layout/Payment/PaymentComponent.module.css
@@ -1,16 +1,16 @@
 .buttonContainer {
   display: flex;
-  gap: var(--fds-spacing-3);
+  gap: var(--ds-size-3);
 }
 
 .alertContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-3);
+  gap: var(--ds-size-3);
 }
 
 .paymentContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-size-6);
 }
diff --git a/src/layout/Payment/PaymentComponent.tsx b/src/layout/Payment/PaymentComponent.tsx
index d8ded011be..e80eba4c34 100644
--- a/src/layout/Payment/PaymentComponent.tsx
+++ b/src/layout/Payment/PaymentComponent.tsx
@@ -37,12 +37,12 @@ export const PaymentComponent = ({ node }: PropsFromGenericComponent<'Payment'>)
         />
         <div className={classes.alertContainer}>
           {(paymentInfo?.status === PaymentStatus.Failed || paymentError) && (
-            <Alert severity='warning'>
+            <Alert data-color='warning'>
               <Lang id='payment.alert.failed' />
             </Alert>
           )}
           {paymentInfo?.status === PaymentStatus.Paid && (
-            <Alert severity='info'>
+            <Alert data-color='info'>
               <Lang id='payment.alert.paid' />
             </Alert>
           )}
diff --git a/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.module.css b/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.module.css
index 8107e50074..9238dd3fda 100644
--- a/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.module.css
+++ b/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.module.css
@@ -1,8 +1,8 @@
 .infoContainer {
   display: flex;
-  gap: var(--fds-spacing-3);
+  gap: var(--ds-size-3);
   flex-direction: row;
-  padding: var(--fds-spacing-3) 0;
+  padding: var(--ds-size-3) 0;
 }
 
 .infoDetailsContainer {
@@ -13,7 +13,7 @@
 .senderReceiverInfoContainer {
   display: flex;
   width: 100%;
-  gap: var(--fds-spacing-4);
+  gap: var(--ds-size-4);
 
   table {
     width: 100%;
@@ -27,5 +27,5 @@
 .paymentSummaryContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-4);
+  gap: var(--ds-size-4);
 }
diff --git a/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx b/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx
index 2931f6e818..ccc3678477 100644
--- a/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx
+++ b/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx
@@ -23,16 +23,16 @@ const PaymentInfoTableRow = ({ labelId, value }: PaymentInfoTableRowProps) => (
   <tr>
     <th>
       <Paragraph
-        size='small'
-        spacing={false}
+        data-size='sm'
+        data-spacing={false}
       >
         <Lang id={labelId} />
       </Paragraph>
     </th>
     <td>
       <Label
-        size='small'
-        spacing={false}
+        data-size='sm'
+        data-spacing={false}
         asChild
       >
         <span>{value}</span>
@@ -138,32 +138,32 @@ export const PaymentReceiptDetails = ({ title, description }: PaymentReceiptDeta
       <div className={classes.infoDetailsContainer}>
         {paymentInfo?.paymentDetails?.paymentId && (
           <Paragraph
-            size='small'
-            spacing={false}
+            data-size='sm'
+            data-spacing={false}
           >
             <Lang id='payment.receipt.payment_id' />: <b>{paymentInfo.paymentDetails.paymentId}</b>
           </Paragraph>
         )}
         {instanceId && (
           <Paragraph
-            size='small'
-            spacing={false}
+            data-size='sm'
+            data-spacing={false}
           >
             <Lang id='payment.receipt.altinn_ref' />: <b>{getInstanceReferenceNumber(instanceId)}</b>
           </Paragraph>
         )}
         {paymentInfo?.paymentDetails?.chargedDate && (
           <Paragraph
-            size='small'
-            spacing={false}
+            data-size='sm'
+            data-spacing={false}
           >
             <Lang id='payment.receipt.payment_date' />:{' '}
             <b>{formatDateLocale(selectedLanguage, new Date(paymentInfo?.paymentDetails?.chargedDate))}</b>
           </Paragraph>
         )}
         <Paragraph
-          size='small'
-          spacing={false}
+          data-size='sm'
+          data-spacing={false}
         >
           <Lang id='payment.receipt.total_amount' />:{' '}
           <b>
diff --git a/src/layout/Payment/SkeletonLoader/SkeletonLoader.module.css b/src/layout/Payment/SkeletonLoader/SkeletonLoader.module.css
deleted file mode 100644
index 8a7545eaaa..0000000000
--- a/src/layout/Payment/SkeletonLoader/SkeletonLoader.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.titleContainer {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  padding: 5px 0 5px 0;
-}
-
-.skeletonWrapper {
-  width: 100%;
-}
diff --git a/src/layout/Payment/SkeletonLoader/SkeletonLoader.tsx b/src/layout/Payment/SkeletonLoader/SkeletonLoader.tsx
deleted file mode 100644
index 52e826d20c..0000000000
--- a/src/layout/Payment/SkeletonLoader/SkeletonLoader.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-
-import { Heading, Skeleton } from '@digdir/designsystemet-react';
-
-import classes from 'src/layout/Payment/SkeletonLoader/SkeletonLoader.module.css';
-
-export const SkeletonLoader = () => (
-  <div className={classes.skeletonWrapper}>
-    <Skeleton.Rectangle
-      width='100%'
-      height='150px'
-    />
-    <div className={classes.titleContainer}>
-      <Skeleton.Circle
-        width='30px'
-        height='30px'
-      />
-      <Heading
-        asChild
-        size='medium'
-      >
-        <Skeleton.Text>En medium tittel</Skeleton.Text>
-      </Heading>
-    </div>
-    <Skeleton.Text width='100%' />
-    <Skeleton.Text width='100%' />
-    <Skeleton.Text width='80%' />
-  </div>
-);
diff --git a/src/layout/Payment/SkeletonLoader/index.tsx b/src/layout/Payment/SkeletonLoader/index.tsx
deleted file mode 100644
index b4531f9669..0000000000
--- a/src/layout/Payment/SkeletonLoader/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-import { SkeletonLoader } from 'src/layout/Payment/SkeletonLoader/SkeletonLoader';
-export { SkeletonLoader };
diff --git a/src/layout/PaymentDetails/PaymentDetailsTable.module.css b/src/layout/PaymentDetails/PaymentDetailsTable.module.css
index 90644d4077..a83807c425 100644
--- a/src/layout/PaymentDetails/PaymentDetailsTable.module.css
+++ b/src/layout/PaymentDetails/PaymentDetailsTable.module.css
@@ -7,5 +7,5 @@
 }
 
 .tableRow:hover td {
-  background-color: var(--fds-semantic-surface-neutral-default);
+  background-color: var(--ds-color-neutral-background-default);
 }
diff --git a/src/layout/PersonLookup/PersonLookupComponent.module.css b/src/layout/PersonLookup/PersonLookupComponent.module.css
index 58e5d2937b..2187bf66f6 100644
--- a/src/layout/PersonLookup/PersonLookupComponent.module.css
+++ b/src/layout/PersonLookup/PersonLookupComponent.module.css
@@ -6,7 +6,7 @@
 
   .nameLabel,
   .submit {
-    margin-top: var(--fds-spacing-6);
+    margin-top: var(--ds-size-6);
   }
 }
 
@@ -16,7 +16,7 @@
     grid-template-columns: minmax(100px, 200px) auto min-content;
     grid-template-areas: 'ssnLabel nameLabel .' 'ssn name submit' 'apiError apiError .';
     align-items: start;
-    column-gap: var(--fds-spacing-6);
+    column-gap: var(--ds-size-6);
   }
   .nameLabel,
   .submit {
@@ -51,6 +51,6 @@
 
   .apiError {
     grid-area: apiError;
-    padding-top: var(--fds-spacing-2);
+    padding-top: var(--ds-size-2);
   }
 }
diff --git a/src/layout/PersonLookup/PersonLookupComponent.tsx b/src/layout/PersonLookup/PersonLookupComponent.tsx
index 58eec5f188..198391fec0 100644
--- a/src/layout/PersonLookup/PersonLookupComponent.tsx
+++ b/src/layout/PersonLookup/PersonLookupComponent.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { ErrorMessage } from '@digdir/designsystemet-react';
+import { Field, ValidationMessage } from '@digdir/designsystemet-react';
 import { queryOptions, useQuery } from '@tanstack/react-query';
 
 import { Button } from 'src/app-components/Button/Button';
@@ -149,6 +149,10 @@ export function PersonLookupComponent({ node, overrideDisplay }: PropsFromGeneri
 
   const hasSuccessfullyFetched = !!person_lookup_name && !!person_lookup_ssn;
 
+  const invalidSsn =
+    (ssnErrors?.length && ssnErrors?.length > 0) || hasValidationErrors(bindingValidations?.person_lookup_ssn);
+  const invalidName = !!nameError || hasValidationErrors(bindingValidations?.person_lookup_name);
+
   return (
     <Fieldset
       legend={labelText}
@@ -176,36 +180,41 @@ export function PersonLookupComponent({ node, overrideDisplay }: PropsFromGeneri
               }
             />
           </div>
-          <NumericInput
-            id={`${id}_ssn`}
-            aria-describedby={hasSuccessfullyFetched ? getDescriptionId(`${id}_ssn`) : undefined}
-            value={hasSuccessfullyFetched ? person_lookup_ssn : tempSsn}
-            className={classes.ssn}
-            required={required}
-            readOnly={hasSuccessfullyFetched}
-            error={
-              (ssnErrors?.length && <Lang id={ssnErrors.join(' ')} />) ||
+          <Field className={classes.ssn}>
+            <NumericInput
+              id={`${id}_ssn`}
+              aria-describedby={hasSuccessfullyFetched ? getDescriptionId(`${id}_ssn`) : undefined}
+              aria-label={langAsString('person_lookup.ssn_label')}
+              value={hasSuccessfullyFetched ? person_lookup_ssn : tempSsn}
+              required={required}
+              readOnly={hasSuccessfullyFetched}
+              error={invalidSsn}
+              onValueChange={(e) => {
+                setTempSsn(e.value);
+                setSsnErrors(undefined);
+              }}
+              onKeyDown={async (ev) => {
+                if (ev.key === 'Enter') {
+                  await handleSubmit();
+                }
+              }}
+              allowLeadingZeros
+              inputMode='numeric'
+              pattern='[0-9]{11}'
+              autoComplete='off'
+            />
+            {(ssnErrors?.length && (
+              <ValidationMessage>
+                <Lang id={ssnErrors.join(' ')} />
+              </ValidationMessage>
+            )) ||
               (hasValidationErrors(bindingValidations?.person_lookup_ssn) && (
                 <ComponentValidations
                   validations={bindingValidations?.person_lookup_ssn}
                   node={node}
                 />
-              ))
-            }
-            onValueChange={(e) => {
-              setTempSsn(e.value);
-              setSsnErrors(undefined);
-            }}
-            onKeyDown={async (ev) => {
-              if (ev.key === 'Enter') {
-                await handleSubmit();
-              }
-            }}
-            allowLeadingZeros
-            inputMode='numeric'
-            pattern='[0-9]{11}'
-            autoComplete='off'
-          />
+              ))}
+          </Field>
           <div className={classes.nameLabel}>
             <Label
               htmlFor={`${id}_name`}
@@ -222,35 +231,41 @@ export function PersonLookupComponent({ node, overrideDisplay }: PropsFromGeneri
               }
             />
           </div>
-          <Input
-            id={`${id}_name`}
-            aria-describedby={hasSuccessfullyFetched ? getDescriptionId(`${id}_name`) : undefined}
-            value={hasSuccessfullyFetched ? person_lookup_name : tempName}
-            className={classes.name}
-            type='text'
-            required={required}
-            readOnly={hasSuccessfullyFetched}
-            error={
-              (nameError && <Lang id={nameError} />) ||
+          <Field className={classes.name}>
+            <Input
+              id={`${id}_name`}
+              aria-describedby={hasSuccessfullyFetched ? getDescriptionId(`${id}_name`) : undefined}
+              aria-label={langAsString(
+                hasSuccessfullyFetched ? 'person_lookup.name_label' : 'person_lookup.surname_label',
+              )}
+              value={hasSuccessfullyFetched ? person_lookup_name : tempName}
+              type='text'
+              required={required}
+              readOnly={hasSuccessfullyFetched}
+              error={invalidName}
+              onChange={(e) => {
+                setTempName(e.target.value);
+                setNameError(undefined);
+              }}
+              onKeyDown={async (ev) => {
+                if (ev.key === 'Enter') {
+                  await handleSubmit();
+                }
+              }}
+              autoComplete='family-name'
+            />
+            {(nameError && (
+              <ValidationMessage>
+                <Lang id={nameError} />
+              </ValidationMessage>
+            )) ||
               (hasValidationErrors(bindingValidations?.person_lookup_name) && (
                 <ComponentValidations
                   validations={bindingValidations?.person_lookup_name}
                   node={node}
                 />
-              ))
-            }
-            onChange={(e) => {
-              setTempName(e.target.value);
-              setNameError(undefined);
-            }}
-            onKeyDown={async (ev) => {
-              if (ev.key === 'Enter') {
-                await handleSubmit();
-              }
-            }}
-            autoComplete='family-name'
-          />
-
+              ))}
+          </Field>
           <div className={classes.submit}>
             {!hasSuccessfullyFetched ? (
               <Button
@@ -271,12 +286,12 @@ export function PersonLookupComponent({ node, overrideDisplay }: PropsFromGeneri
             )}
           </div>
           {data?.error && (
-            <ErrorMessage
-              size='sm'
+            <ValidationMessage
+              data-size='sm'
               className={classes.apiError}
             >
               <Lang id={data.error} />
-            </ErrorMessage>
+            </ValidationMessage>
           )}
         </div>
       </ComponentStructureWrapper>
diff --git a/src/layout/PersonLookup/PersonLookupSummary.module.css b/src/layout/PersonLookup/PersonLookupSummary.module.css
index 900d2922f0..acfcc38990 100644
--- a/src/layout/PersonLookup/PersonLookupSummary.module.css
+++ b/src/layout/PersonLookup/PersonLookupSummary.module.css
@@ -17,7 +17,7 @@
 .personSummaryWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-size-6);
   width: 100%;
 }
 
diff --git a/src/layout/PersonLookup/PersonLookupSummary.tsx b/src/layout/PersonLookup/PersonLookupSummary.tsx
index 35b3eec895..5a3727f011 100644
--- a/src/layout/PersonLookup/PersonLookupSummary.tsx
+++ b/src/layout/PersonLookup/PersonLookupSummary.tsx
@@ -43,7 +43,7 @@ export function PersonLookupSummary({ componentNode }: PersonLookupSummaryProps)
     >
       <div className={classes.personSummaryWrapper}>
         <Heading
-          size='sm'
+          data-size='sm'
           level={2}
         >
           <Lang id={title} />
diff --git a/src/layout/RadioButtons/ControlledRadioGroup.module.css b/src/layout/RadioButtons/ControlledRadioGroup.module.css
new file mode 100644
index 0000000000..46d997d315
--- /dev/null
+++ b/src/layout/RadioButtons/ControlledRadioGroup.module.css
@@ -0,0 +1,9 @@
+.inlineRadioGroup {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ds-size-6);
+}
+
+.legend {
+  display: inline-flex;
+}
diff --git a/src/layout/RadioButtons/ControlledRadioGroup.test.tsx b/src/layout/RadioButtons/ControlledRadioGroup.test.tsx
index 48de1fe195..efb2c9bdda 100644
--- a/src/layout/RadioButtons/ControlledRadioGroup.test.tsx
+++ b/src/layout/RadioButtons/ControlledRadioGroup.test.tsx
@@ -185,16 +185,16 @@ describe('RadioButtonsContainerComponent', () => {
     await userEvent.click(
       screen.getByRole('button', { name: 'Help Text: The value from the group is: Label for first' }),
     );
-    expect(await screen.findByRole('dialog')).toHaveTextContent(
-      'Help Text: The value from the group is: Label for first',
-    );
+    expect(
+      screen.getByRole('button', { name: 'Help Text: The value from the group is: Label for first' }),
+    ).toHaveAttribute('aria-expanded', 'true');
 
     await userEvent.click(
       screen.getByRole('button', { name: 'Help Text: The value from the group is: Label for second' }),
     );
-    expect(await screen.findByRole('dialog')).toHaveTextContent(
-      'Help Text: The value from the group is: Label for second',
-    );
+    expect(
+      screen.getByRole('button', { name: 'Help Text: The value from the group is: Label for second' }),
+    ).toHaveAttribute('aria-expanded', 'true');
 
     expect(formDataMethods.setLeafValue).not.toHaveBeenCalled();
     await userEvent.click(getRadio({ name: /The value from the group is: Label for first/ }));
diff --git a/src/layout/RadioButtons/ControlledRadioGroup.tsx b/src/layout/RadioButtons/ControlledRadioGroup.tsx
index 20d6800f47..9374b34cc9 100644
--- a/src/layout/RadioButtons/ControlledRadioGroup.tsx
+++ b/src/layout/RadioButtons/ControlledRadioGroup.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 
-import { Radio } from '@digdir/designsystemet-react';
+import { Fieldset, useRadioGroup } from '@digdir/designsystemet-react';
+import cn from 'classnames';
 
+import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { AltinnSpinner } from 'src/components/AltinnSpinner';
 import { RadioButton } from 'src/components/form/RadioButton';
 import { LabelContent } from 'src/components/label/LabelContent';
@@ -9,7 +11,9 @@ import { Lang } from 'src/features/language/Lang';
 import { useLanguage } from 'src/features/language/useLanguage';
 import { useIsValid } from 'src/features/validation/selectors/isValid';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
+import classes from 'src/layout/RadioButtons/ControlledRadioGroup.module.css';
 import { useRadioButtons } from 'src/layout/RadioButtons/radioButtonsUtils';
+import utilClasses from 'src/styles/utils.module.css';
 import { shouldUseRowLayout } from 'src/utils/layout';
 import { LayoutNode } from 'src/utils/layout/LayoutNode';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
@@ -34,6 +38,13 @@ export const ControlledRadioGroup = (props: IControlledRadioGroupProps) => {
     : null;
   const confirmChangeText = langAsString('form_filler.alert_confirm');
 
+  const { getRadioProps } = useRadioGroup({
+    name: id,
+    value: selectedValues[0],
+    onChange: () => handleChange,
+    error: !isValid,
+  });
+
   let leftColumnHeader: string | undefined = undefined;
   if (node.parent instanceof LayoutNode && node.parent.isType('Likert')) {
     // The parent node type never changes, so this doesn't break the rule of hooks
@@ -78,35 +89,46 @@ export const ControlledRadioGroup = (props: IControlledRadioGroupProps) => {
   return (
     <ComponentStructureWrapper node={node}>
       <div id={id}>
-        <Radio.Group
-          legend={labelText}
-          hideLegend={overrideDisplay?.renderLegend === false}
-          description={<Lang id={textResourceBindings?.description} />}
-          error={!isValid}
-          readOnly={readOnly}
-          inline={shouldDisplayHorizontally}
-          role='radiogroup'
-        >
-          {calculatedOptions.map((option) => (
-            <RadioButton
-              value={option.value}
-              label={langAsString(option.label)}
-              description={option.description && <Lang id={option.description} />}
-              helpText={option.helpText && <Lang id={option.helpText} />}
-              name={id}
-              key={option.value}
-              checked={option.value === selectedValues[0]}
-              showAsCard={showAsCard}
-              readOnly={readOnly}
-              onChange={handleChange}
-              hideLabel={hideLabel}
-              size='small'
-              alertOnChange={alertOnChange}
-              alertText={alertText}
-              confirmChangeText={confirmChangeText}
-            />
-          ))}
-        </Radio.Group>
+        <Fieldset role='radiogroup'>
+          <Fieldset.Legend
+            className={cn(classes.legend, { [utilClasses.visuallyHidden]: overrideDisplay?.renderLegend === false })}
+          >
+            {labelText}
+          </Fieldset.Legend>
+          {textResourceBindings?.description && (
+            <Fieldset.Description>
+              <Lang id={textResourceBindings?.description} />
+            </Fieldset.Description>
+          )}
+          <ConditionalWrapper
+            condition={shouldDisplayHorizontally}
+            wrapper={(children) => <div className={classes.inlineRadioGroup}>{children}</div>}
+          >
+            {calculatedOptions.map((option) => {
+              const radioProps = getRadioProps({ value: option.value });
+              return (
+                <RadioButton
+                  key={option.value}
+                  label={langAsString(option.label)}
+                  description={option.description && <Lang id={option.description} />}
+                  helpText={option.helpText && <Lang id={option.helpText} />}
+                  value={radioProps.value}
+                  name={id}
+                  checked={option.value === selectedValues[0]}
+                  showAsCard={showAsCard}
+                  readOnly={readOnly}
+                  onChange={handleChange}
+                  hideLabel={hideLabel}
+                  data-size='sm'
+                  aria-invalid={!isValid}
+                  alertOnChange={alertOnChange}
+                  alertText={alertText}
+                  confirmChangeText={confirmChangeText}
+                />
+              );
+            })}
+          </ConditionalWrapper>
+        </Fieldset>
       </div>
     </ComponentStructureWrapper>
   );
diff --git a/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.module.css b/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.module.css
index ccb288b1fd..92aa9fc6ec 100644
--- a/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.module.css
+++ b/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.module.css
@@ -9,7 +9,7 @@
 
 .row,
 .row td {
-  background-color: var(--fds-semantic-surface-neutral-subtle);
+  background-color: var(--ds-color-neutral-background-tinted);
 }
 
 .hidden {
diff --git a/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx b/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx
index 65fbfdcfb6..7481d5b13f 100644
--- a/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx
+++ b/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { Pagination, Table, usePagination } from '@digdir/designsystemet-react';
-import { ChevronLeftIcon, ChevronRightIcon } from '@navikt/aksel-icons';
 
 import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { useResetScrollPosition } from 'src/core/ui/useResetScrollPosition';
@@ -18,11 +17,9 @@ import { NodesInternal } from 'src/utils/layout/NodesContext';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import { splitDashedKey } from 'src/utils/splitDashedKey';
 import type { LayoutNode } from 'src/utils/layout/LayoutNode';
-
 interface RepeatingGroupPaginationProps {
   inTable?: boolean;
 }
-
 /**
  * Simple wrapper to prevent running any hooks unless pagination is actually going to be used
  * Specifically, usePagesWithErrors and useRowStructure would be doing unecessary work
@@ -30,14 +27,11 @@ interface RepeatingGroupPaginationProps {
 export function RepeatingGroupPagination(props: RepeatingGroupPaginationProps) {
   const { visibleRows } = useRepeatingGroupRowState();
   const { hasPagination, rowsPerPage } = useRepeatingGroupPagination();
-
   if (!hasPagination || visibleRows.length <= rowsPerPage) {
     return null;
   }
-
   return <RGPagination {...props} />;
 }
-
 function RGPagination({ inTable = true }: RepeatingGroupPaginationProps) {
   const { changePage, node } = useRepeatingGroup();
   const { hasPagination, rowsPerPage, currentPage, totalPages } = useRepeatingGroupPagination();
@@ -46,30 +40,30 @@ function RGPagination({ inTable = true }: RepeatingGroupPaginationProps) {
   const isMobile = useIsMobile();
   const isMini = useIsMini();
   const textResourceBindings = useNodeItem(node, (i) => i.textResourceBindings || {});
-
   const getScrollPosition = useCallback(
     () => document.querySelector(`[data-pagination-id="${node.id}"]`)?.getClientRects().item(0)?.y,
     [node],
   );
-
   /**
    * The last page can have fewer items than the other pages,
    * navigating to or from the last page will cause everything to move.
    * This resets the scroll position so that the buttons are in the same place.
    */
   const resetScrollPosition = useResetScrollPosition(getScrollPosition);
-
   // Should never be true, but leaving it for type inference
   if (!hasPagination) {
     return null;
   }
 
-  const onChange = async (pageNumber: number) => {
+  const onChange = async () => {
     const prevScrollPosition = getScrollPosition();
-    await changePage(pageNumber - 1);
     resetScrollPosition(prevScrollPosition);
   };
 
+  const setCurrentPage = (pagenumber: number) => {
+    changePage(pagenumber - 1);
+  };
+
   return (
     <ConditionalWrapper
       condition={inTable}
@@ -89,49 +83,43 @@ function RGPagination({ inTable = true }: RepeatingGroupPaginationProps) {
         currentPage={currentPage + 1}
         totalPages={totalPages}
         pagesWithErrors={pagesWithErrors}
-        onChange={onChange}
-        compact={isTablet}
+        onChange={() => onChange}
+        setCurrentPage={setCurrentPage}
         hideLabels={isMobile}
-        size={isMini ? 'small' : 'medium'}
+        size={isMini ? 'sm' : 'md'}
       />
     </ConditionalWrapper>
   );
 }
-
 type PaginationComponentProps = {
   nextTextKey: string;
   backTextKey: string;
-  size: NonNullable<Parameters<typeof Pagination>[0]['size']>;
-  compact: boolean;
+  size: NonNullable<Parameters<typeof Pagination>[0]['data-size']>;
   hideLabels: boolean;
   currentPage: number;
   totalPages: number;
   pagesWithErrors: number[];
+  setCurrentPage: (pageNumber: number) => void;
   onChange: Parameters<typeof Pagination>[0]['onChange'];
 } & Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>;
 
-const iconSize = {
-  small: '1rem',
-  medium: '1.5rem',
-  large: '2rem',
-};
-
 function PaginationComponent({
   nextTextKey,
   backTextKey,
   size,
-  compact,
   hideLabels,
   currentPage,
   totalPages,
   pagesWithErrors,
+  setCurrentPage,
   onChange,
   ...rest
 }: PaginationComponentProps) {
-  const { pages, showNextPage, showPreviousPage } = usePagination({
-    compact,
+  const { pages, prevButtonProps, nextButtonProps, hasPrev, hasNext } = usePagination({
+    setCurrentPage,
     currentPage,
     totalPages,
+    onChange,
   });
   const { langAsString } = useLanguage();
 
@@ -139,71 +127,51 @@ function PaginationComponent({
   const previousLabel = langAsString(backTextKey);
 
   return (
-    <Pagination.Root
+    <Pagination
       aria-label='Pagination'
-      size={size}
-      compact={compact}
+      data-size={size}
       {...rest}
     >
-      <Pagination.Content>
+      <Pagination.List>
         <Pagination.Item>
-          <Pagination.Previous
-            className={!showPreviousPage ? classes.hidden : undefined}
-            onClick={() => {
-              onChange(currentPage - 1);
-            }}
+          <Pagination.Button
+            className={!hasPrev ? classes.hidden : undefined}
             aria-label={previousLabel}
+            {...prevButtonProps}
           >
-            <ChevronLeftIcon
-              aria-hidden
-              fontSize={iconSize[size]}
-            />
             {!hideLabels && previousLabel}
-          </Pagination.Previous>
+          </Pagination.Button>
         </Pagination.Item>
-        {pages.map((page, i) => {
+        {pages.map(({ page, buttonProps, itemKey }) => {
           const hasErrors = typeof page === 'number' && pagesWithErrors.includes(page - 1);
           const label = hasErrors
             ? `${langAsString('general.edit_alt_error')}: ${langAsString('general.page_number', [page])}`
             : langAsString('general.page_number', [page]);
 
           return (
-            <Pagination.Item key={`${page}${i}`}>
-              {page === 'ellipsis' ? (
-                <Pagination.Ellipsis />
-              ) : (
-                <Pagination.Button
-                  color={hasErrors ? 'danger' : 'first'}
-                  aria-current={currentPage === page}
-                  isActive={currentPage === page}
-                  aria-label={label}
-                  onClick={() => {
-                    onChange(page);
-                  }}
-                >
-                  {page}
-                </Pagination.Button>
-              )}
+            <Pagination.Item key={itemKey}>
+              <Pagination.Button
+                color={hasErrors ? 'danger' : 'accent'}
+                aria-current={currentPage === page}
+                aria-label={label}
+                {...buttonProps}
+              >
+                {page}
+              </Pagination.Button>
             </Pagination.Item>
           );
         })}
         <Pagination.Item>
-          <Pagination.Next
+          <Pagination.Button
             aria-label={nextLabel}
-            onClick={() => {
-              onChange(currentPage + 1);
-            }}
-            className={!showNextPage ? classes.hidden : undefined}
+            className={!hasNext ? classes.hidden : undefined}
+            {...nextButtonProps}
           >
             {!hideLabels && nextLabel}
-            <ChevronRightIcon
-              aria-hidden
-              fontSize={iconSize[size]}
-            />
-          </Pagination.Next>
+          </Pagination.Button>
         </Pagination.Item>
-      </Pagination.Content>
-    </Pagination.Root>
+      </Pagination.List>
+    </Pagination>
   );
 }
 
diff --git a/src/layout/RepeatingGroup/RepeatingGroup.module.css b/src/layout/RepeatingGroup/RepeatingGroup.module.css
index ecfd023426..cf83ee2289 100644
--- a/src/layout/RepeatingGroup/RepeatingGroup.module.css
+++ b/src/layout/RepeatingGroup/RepeatingGroup.module.css
@@ -57,16 +57,16 @@ Altinn, and making sure they are consistent. */
 }
 
 .nestedTable {
-  background-color: var(--fds-semantic-surface-neutral-default);
+  background-color: var(--ds-color-neutral-background-default);
 }
 
 .nestedTable > thead > tr > th {
-  /*background-color: var(--fds-semantic-background-subtle);*/
+  /*background-color: var(--ds-color-neutral-background-tinted);*/
   background-color: #f5f5f5;
 }
 
 .nestedTable thead:not(:first-of-type) th {
-  /*border-top: 2px solid var(--fds-semantic-border-divider-default);*/
+  /*border-top: 2px solid var(--ds-color-neutral-border-subtle);*/
   border-top: 1px solid #dde3e5; /* Remove this and uncomment the line above when adjusting the new table component*/
 }
 
@@ -115,19 +115,6 @@ table > tbody > tr.editingRow:hover {
   border-left: 2px dotted var(--repeating-group-edit-border-color);
 }
 
-.visuallyHidden {
-  border: none;
-  padding: 0;
-  margin: 0;
-  position: absolute;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  clip: rect(1px 1px 1px 1px);
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 .contentFormatting {
   --cell-max-number-of-lines: 2;
   --cell-text-alignment: left;
diff --git a/src/layout/RepeatingGroup/Summary/LargeGroupSummaryContainer.tsx b/src/layout/RepeatingGroup/Summary/LargeGroupSummaryContainer.tsx
index 53471820c9..c1842a675e 100644
--- a/src/layout/RepeatingGroup/Summary/LargeGroupSummaryContainer.tsx
+++ b/src/layout/RepeatingGroup/Summary/LargeGroupSummaryContainer.tsx
@@ -19,12 +19,12 @@ export interface IDisplayRepAsLargeGroup {
   renderLayoutNode: (node: LayoutNode) => JSX.Element | null;
 }
 
-const headingSizes: { [k in HeadingLevel]: Parameters<typeof Heading>[0]['size'] } = {
-  [2]: 'medium',
-  [3]: 'small',
-  [4]: 'xsmall',
-  [5]: 'xsmall',
-  [6]: 'xsmall',
+const headingSizes: { [k in HeadingLevel]: Parameters<typeof Heading>[0]['data-size'] } = {
+  [2]: 'md',
+  [3]: 'sm',
+  [4]: 'xs',
+  [5]: 'xs',
+  [6]: 'xs',
 };
 
 export function LargeGroupSummaryContainer({ groupNode, id, restriction, renderLayoutNode }: IDisplayRepAsLargeGroup) {
@@ -44,20 +44,18 @@ export function LargeGroupSummaryContainer({ groupNode, id, restriction, renderL
 
   return (
     <Fieldset
-      legend={
-        legend && (
-          <Heading
-            level={headingLevel}
-            size={headingSize}
-          >
-            <Lang id={legend} />
-          </Heading>
-        )
-      }
       className={cn(pageBreakStyles(item.pageBreak), classes.summary, {
         [classes.largeGroupContainer]: !isNested,
       })}
     >
+      <Fieldset.Legend>
+        <Heading
+          level={headingLevel}
+          data-size={headingSize}
+        >
+          <Lang id={legend} />
+        </Heading>
+      </Fieldset.Legend>
       <div
         id={id || item.id}
         className={classes.largeGroupContainer}
diff --git a/src/layout/RepeatingGroup/Summary/__snapshots__/SummaryRepeatingGroup.test.tsx.snap b/src/layout/RepeatingGroup/Summary/__snapshots__/SummaryRepeatingGroup.test.tsx.snap
index ecde963873..8d11f9aaa2 100644
--- a/src/layout/RepeatingGroup/Summary/__snapshots__/SummaryRepeatingGroup.test.tsx.snap
+++ b/src/layout/RepeatingGroup/Summary/__snapshots__/SummaryRepeatingGroup.test.tsx.snap
@@ -26,7 +26,10 @@ exports[`SummaryRepeatingGroup SummaryRepeatingGroup -- should match snapshot 1`
         </span>
         <button
           aria-label="Change: Mock group"
-          class="fds-btn fds-focus fds-btn--sm fds-btn--tertiary fds-btn--second editButton"
+          class="ds-button editButton"
+          data-color="neutral"
+          data-size="sm"
+          data-variant="tertiary"
           type="button"
         >
           Change
diff --git a/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.module.css b/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.module.css
index c1b33eb2fb..08419bcc5b 100644
--- a/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.module.css
+++ b/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.module.css
@@ -1,37 +1,37 @@
 .summaryWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-size-6);
 }
 
 .contentWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-8);
+  gap: var(--ds-size-8);
 }
 
 .rowDivider {
-  height: var(--fds-border_width-active);
+  height: var(--ds-border-width-highlight);
   border: none;
-  background-color: var(--fds-semantic-border-neutral-default);
+  background-color: var(--ds-color-neutral-border-strong);
   margin: 0;
 }
 
 .nestedSummaryWrapper {
   display: flex;
-  gap: var(--fds-spacing-3);
+  gap: var(--ds-size-3);
   flex-direction: column;
 }
 
 .nestedContentWrapper {
-  border: dashed 1px var(--fds-semantic-border-neutral-default);
-  padding: var(--fds-spacing-2) var(--fds-spacing-4);
-  border-radius: var(--fds-border_radius-medium);
+  border: dashed 1px var(--ds-color-neutral-border-strong);
+  padding: var(--ds-size-2) var(--ds-size-4);
+  border-radius: var(--ds-border-radius-md);
 }
 
 .errorMessage {
   display: flex;
   flex-direction: row;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
   align-items: center;
 }
diff --git a/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.tsx b/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.tsx
index 5bee6812d0..34360af09b 100644
--- a/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.tsx
+++ b/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { ErrorMessage, Heading } from '@digdir/designsystemet-react';
-import { ExclamationmarkTriangleIcon } from '@navikt/aksel-icons';
+import { Heading, ValidationMessage } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
 import { Flex } from 'src/app-components/Flex/Flex';
@@ -81,7 +80,7 @@ export const RepeatingGroupSummary = ({ target }: Summary2Props<'RepeatingGroup'
         data-testid='summary-repeating-group-component'
       >
         <Heading
-          size='xs'
+          data-size='xs'
           level={4}
         >
           <Lang id={title} />
@@ -117,16 +116,15 @@ export const RepeatingGroupSummary = ({ target }: Summary2Props<'RepeatingGroup'
           })}
         </div>
         {errors?.map(({ message }) => (
-          <ErrorMessage
+          <ValidationMessage
             key={message.key}
             className={classes.errorMessage}
           >
-            <ExclamationmarkTriangleIcon fontSize='1.5rem' />
             <Lang
               id={message.key}
               params={message.params}
             />
-          </ErrorMessage>
+          </ValidationMessage>
         ))}
       </div>
     </SummaryFlexForContainer>
diff --git a/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.module.css b/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.module.css
index 9ff9aafdd0..0381fb7d5c 100644
--- a/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.module.css
+++ b/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.module.css
@@ -24,7 +24,7 @@
   display: flex;
   flex-direction: column;
   border: none;
-  padding: var(--fds-spacing-2) 0;
+  padding: var(--ds-size-2) 0;
 }
 
 .mobileTable td .contentWrapper {
@@ -35,17 +35,17 @@
 }
 
 .mobileTable tbody tr:last-child {
-  border-bottom: 2px solid var(--fds-semantic-border-neutral-default);
+  border-bottom: 2px solid var(--ds-color-neutral-border-strong);
 }
 
 .mobileTable tbody tr:first-child {
-  border-top: 2px solid var(--fds-semantic-border-neutral-default);
+  border-top: 2px solid var(--ds-color-neutral-border-strong);
 }
 
 .mobileTable tr {
-  border-bottom: 1px solid var(--fds-semantic-border-neutral-default);
-  padding-top: var(--fds-spacing-3);
-  padding-bottom: var(--fds-spacing-3);
+  border-bottom: 1px solid var(--ds-color-neutral-border-strong);
+  padding-top: var(--ds-size-3);
+  padding-bottom: var(--ds-size-3);
 }
 
 .mobileTable tr:hover td {
@@ -64,19 +64,6 @@
   align-items: start;
 }
 
-.visuallyHidden {
-  border: none;
-  padding: 0;
-  margin: 0;
-  position: absolute;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  clip: rect(1px 1px 1px 1px);
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 .narrowLastColumn {
   width: 1%;
 }
diff --git a/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx b/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx
index f1cb98811e..28f3243173 100644
--- a/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx
+++ b/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ErrorMessage, Table } from '@digdir/designsystemet-react';
+import { Table, ValidationMessage } from '@digdir/designsystemet-react';
 import { ExclamationmarkTriangleIcon } from '@navikt/aksel-icons';
 import cn from 'classnames';
 
@@ -23,6 +23,7 @@ import { RepGroupHooks } from 'src/layout/RepeatingGroup/utils';
 import { EditButtonFirstVisible } from 'src/layout/Summary2/CommonSummaryComponents/EditButton';
 import { useReportSummaryRender } from 'src/layout/Summary2/isEmpty/EmptyChildrenContext';
 import { ComponentSummaryById, SummaryContains } from 'src/layout/Summary2/SummaryComponent2/ComponentSummary';
+import utilClasses from 'src/styles/utils.module.css';
 import { useColumnStylesRepeatingGroups } from 'src/utils/formComponentUtils';
 import { DataModelLocationProvider } from 'src/utils/layout/DataModelLocation';
 import { useNode } from 'src/utils/layout/NodesContext';
@@ -67,7 +68,7 @@ export const RepeatingGroupTableSummary = ({ componentNode }: { componentNode: L
             </DataModelLocationProvider>
             {!pdfModeActive && !isSmall && (
               <Table.HeaderCell className={tableClasses.narrowLastColumn}>
-                <span className={tableClasses.visuallyHidden}>
+                <span className={utilClasses.visuallyHidden}>
                   <Lang id='general.edit' />
                 </span>
               </Table.HeaderCell>
@@ -92,8 +93,9 @@ export const RepeatingGroupTableSummary = ({ componentNode }: { componentNode: L
         </Table.Body>
       </Table>
       {errors?.map(({ message }) => (
-        <ErrorMessage
+        <ValidationMessage
           key={message.key}
+          data-size='sm'
           className={classes.errorMessage}
         >
           <ExclamationmarkTriangleIcon fontSize='1.5rem' />
@@ -101,7 +103,7 @@ export const RepeatingGroupTableSummary = ({ componentNode }: { componentNode: L
             id={message.key}
             params={message.params}
           />
-        </ErrorMessage>
+        </ValidationMessage>
       ))}
     </div>
   );
diff --git a/src/layout/RepeatingGroup/Table/RepeatingGroupTable.tsx b/src/layout/RepeatingGroup/Table/RepeatingGroupTable.tsx
index c059aeb6c8..bc89dde184 100644
--- a/src/layout/RepeatingGroup/Table/RepeatingGroupTable.tsx
+++ b/src/layout/RepeatingGroup/Table/RepeatingGroupTable.tsx
@@ -21,6 +21,7 @@ import { RepeatingGroupTableRow } from 'src/layout/RepeatingGroup/Table/Repeatin
 import { RepeatingGroupTableTitle } from 'src/layout/RepeatingGroup/Table/RepeatingGroupTableTitle';
 import { useTableComponentIds } from 'src/layout/RepeatingGroup/useTableComponentIds';
 import { RepGroupHooks } from 'src/layout/RepeatingGroup/utils';
+import utilClasses from 'src/styles/utils.module.css';
 import { useColumnStylesRepeatingGroups } from 'src/utils/formComponentUtils';
 import { DataModelLocationProvider } from 'src/utils/layout/DataModelLocation';
 import { LayoutNode } from 'src/utils/layout/LayoutNode';
@@ -119,14 +120,14 @@ export function RepeatingGroupTable(): React.JSX.Element | null {
               </DataModelLocationProvider>
               {displayEditColumn && (
                 <Table.HeaderCell style={{ padding: 0, paddingRight: '10px' }}>
-                  <span className={classes.visuallyHidden}>
+                  <span className={utilClasses.visuallyHidden}>
                     <Lang id='general.edit' />
                   </span>
                 </Table.HeaderCell>
               )}
               {displayDeleteColumn && (
                 <Table.HeaderCell style={{ padding: 0 }}>
-                  <span className={classes.visuallyHidden}>
+                  <span className={utilClasses.visuallyHidden}>
                     <Lang id='general.delete' />
                   </span>
                 </Table.HeaderCell>
diff --git a/src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx b/src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx
index ee32957b7a..c7a16b443c 100644
--- a/src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx
+++ b/src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx
@@ -6,7 +6,6 @@ import { PencilIcon, TrashIcon, XMarkOctagonFillIcon } from '@navikt/aksel-icons
 import cn from 'classnames';
 
 import { Button } from 'src/app-components/Button/Button';
-import { ConditionalWrapper } from 'src/app-components/ConditionalWrapper/ConditionalWrapper';
 import { Flex } from 'src/app-components/Flex/Flex';
 import { DeleteWarningPopover } from 'src/features/alertOnChange/DeleteWarningPopover';
 import { useAlertOnChange } from 'src/features/alertOnChange/useAlertOnChange';
@@ -390,9 +389,8 @@ function DeleteElement({
   children: React.ReactNode;
 }) {
   return (
-    <ConditionalWrapper
-      condition={Boolean(editForRow?.alertOnDelete)}
-      wrapper={(children) => (
+    <>
+      {editForRow?.alertOnDelete && (
         <DeleteWarningPopover
           placement='left'
           deleteButtonText={langAsString('group.row_popover_delete_button_confirm')}
@@ -400,15 +398,14 @@ function DeleteElement({
           onCancelClick={cancelChange}
           onPopoverDeleteClick={confirmChange}
           open={alertOpen}
+          popoverId='delete-warning-popover'
           setOpen={setAlertOpen}
-        >
-          {children}
-        </DeleteWarningPopover>
+        />
       )}
-    >
       <Button
         variant='tertiary'
         color='danger'
+        popovertarget='delete-warning-popover'
         disabled={isDeletingRow || disabled}
         onClick={() => handleDelete({ index, uuid })}
         aria-label={`${deleteButtonText}-${firstCellData}`}
@@ -421,7 +418,7 @@ function DeleteElement({
           aria-hidden='true'
         />
       </Button>
-    </ConditionalWrapper>
+    </>
   );
 }
 
diff --git a/src/layout/SigneeList/SigneeListComponent.module.css b/src/layout/SigneeList/SigneeListComponent.module.css
index ede9f3e389..08fe79b0c1 100644
--- a/src/layout/SigneeList/SigneeListComponent.module.css
+++ b/src/layout/SigneeList/SigneeListComponent.module.css
@@ -1,7 +1,7 @@
 .header {
-  background-color: var(--fds-semantic-surface-action-subtle);
+  background-color: var(--ds-color-accent-surface-default);
   font-weight: 400;
-  border-bottom-color: var(--fds-semantic-border-action-hover);
+  border-bottom-color: var(--ds-color-accent-base-hover);
 }
 
 .table tr td:last-child {
diff --git a/src/layout/SigneeList/SigneeListComponent.tsx b/src/layout/SigneeList/SigneeListComponent.tsx
index 0e53e069d2..2ed0baa76d 100644
--- a/src/layout/SigneeList/SigneeListComponent.tsx
+++ b/src/layout/SigneeList/SigneeListComponent.tsx
@@ -38,7 +38,7 @@ export function SigneeListComponent({ node }: PropsFromGenericComponent<'SigneeL
             title={<Lang id={textResourceBindings?.title} />}
             description={<Lang id={textResourceBindings?.description} />}
             helpText={textResourceBindings?.help ? { text: textResourceBindings?.help } : undefined}
-            designSystemLabelProps={{ size: 'lg' }}
+            designSystemLabelProps={{ 'data-size': 'lg' }}
           />
         ) : undefined
       }
diff --git a/src/layout/SigneeList/SigneeListSummary.module.css b/src/layout/SigneeList/SigneeListSummary.module.css
index 2a6e782740..3329ca893f 100644
--- a/src/layout/SigneeList/SigneeListSummary.module.css
+++ b/src/layout/SigneeList/SigneeListSummary.module.css
@@ -14,12 +14,12 @@
 
 .divider {
   width: 100%;
-  border-top: 1px dashed var(--fds-semantic-border-divider-default);
+  border-top: 1px dashed var(--ds-color-neutral-border-subtle);
   margin-top: 0;
-  margin-bottom: var(--fds-spacing-1);
+  margin-bottom: var(--ds-size-1);
 }
 
 .signeeDescription {
-  color: var(--fds-colors-grey-600);
+  color: var(--ds-color-neutral-text-subtle);
   font-style: italic;
 }
diff --git a/src/layout/SigneeList/SigneeStateTag.tsx b/src/layout/SigneeList/SigneeStateTag.tsx
index b56b65661c..03df6aff20 100644
--- a/src/layout/SigneeList/SigneeStateTag.tsx
+++ b/src/layout/SigneeList/SigneeStateTag.tsx
@@ -52,7 +52,7 @@ export function SigneeStateTag({ state }: { state: SigneeState }) {
   return (
     <Tag
       color={color}
-      size='sm'
+      data-size='sm'
     >
       <Lang id={SIGNEE_STATUS[status]} />
     </Tag>
diff --git a/src/layout/SigningActions/OnBehalfOfChooser.tsx b/src/layout/SigningActions/OnBehalfOfChooser.tsx
index 07d33d264c..f8ae3d81e2 100644
--- a/src/layout/SigningActions/OnBehalfOfChooser.tsx
+++ b/src/layout/SigningActions/OnBehalfOfChooser.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ChangeEvent } from 'react';
 
-import { ErrorMessage } from '@digdir/designsystemet-react';
+import { ValidationMessage } from '@digdir/designsystemet-react';
 
 import { Fieldset } from 'src/app-components/Label/Fieldset';
 import { RadioButton } from 'src/components/form/RadioButton';
@@ -57,9 +57,9 @@ export const OnBehalfOfChooser = ({
         />
       ))}
       {error && (
-        <ErrorMessage size='small'>
+        <ValidationMessage data-size='sm'>
           <Lang id='signing.error_signing_no_on_behalf_of' />
-        </ErrorMessage>
+        </ValidationMessage>
       )}
     </Fieldset>
   );
diff --git a/src/layout/SigningActions/PanelAwaitingCurrentUserSignature.tsx b/src/layout/SigningActions/PanelAwaitingCurrentUserSignature.tsx
index f49ce4c08a..ece39aaae2 100644
--- a/src/layout/SigningActions/PanelAwaitingCurrentUserSignature.tsx
+++ b/src/layout/SigningActions/PanelAwaitingCurrentUserSignature.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
-import { Checkbox, ErrorMessage, Heading, Spinner } from '@digdir/designsystemet-react';
+import { Checkbox, Heading, Spinner, ValidationMessage } from '@digdir/designsystemet-react';
 
 import { Button } from 'src/app-components/Button/Button';
 import { Panel } from 'src/app-components/Panel/Panel';
@@ -112,7 +112,7 @@ export function AwaitingCurrentUserSignaturePanel({
         isOnBottom
       >
         <div className={classes.loadingContainer}>
-          <Spinner title={langAsString('signing.loading')} />
+          <Spinner aria-label={langAsString('signing.loading')} />
         </div>
       </Panel>
     );
@@ -154,7 +154,7 @@ export function AwaitingCurrentUserSignaturePanel({
       {unsignedUserSigneeParties.length === 1 && unsignedUserSigneeParties.at(0)?.organization && (
         <Heading
           level={1}
-          size='2xs'
+          data-size='2xs'
         >
           <Lang
             id='signing.submit_panel_single_org_choice'
@@ -177,13 +177,12 @@ export function AwaitingCurrentUserSignaturePanel({
             }
           }}
           className={classes.checkbox}
-        >
-          <Lang id={checkboxLabel} />
-        </Checkbox>
+          label={<Lang id={checkboxLabel} />}
+        />
         {confirmReadDocumentsError && (
-          <ErrorMessage size='small'>
+          <ValidationMessage data-size='sm'>
             <Lang id='signing.error_signing_not_confirmed_documents' />
-          </ErrorMessage>
+          </ValidationMessage>
         )}
       </div>
     </SigningPanel>
diff --git a/src/layout/SigningActions/PanelSigning.tsx b/src/layout/SigningActions/PanelSigning.tsx
index c33818fc8f..27a03f5525 100644
--- a/src/layout/SigningActions/PanelSigning.tsx
+++ b/src/layout/SigningActions/PanelSigning.tsx
@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import type { PropsWithChildren, ReactElement } from 'react';
 
-import { ErrorMessage, Heading, Modal, Paragraph } from '@digdir/designsystemet-react';
+import { Dialog, Heading, Paragraph, ValidationMessage } from '@digdir/designsystemet-react';
 import { useIsMutating, useMutation } from '@tanstack/react-query';
 
 import { Button } from 'src/app-components/Button/Button';
@@ -43,7 +43,7 @@ export function SigningPanel({
       <div className={classes.contentContainer}>
         <Heading
           level={4}
-          size='xs'
+          data-size='xs'
         >
           {heading}
         </Heading>
@@ -55,7 +55,7 @@ export function SigningPanel({
             {actionButton}
             {canReject && <RejectButton node={node} />}
           </div>
-          {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
+          {errorMessage && <ValidationMessage>{errorMessage}</ValidationMessage>}
         </div>
       </div>
     </Panel>
@@ -94,8 +94,8 @@ function RejectButton({ node }: RejectTextProps) {
   });
 
   return (
-    <Modal.Root>
-      <Modal.Trigger asChild>
+    <Dialog.TriggerContext>
+      <Dialog.Trigger asChild>
         <Button
           color='danger'
           variant='secondary'
@@ -103,17 +103,22 @@ function RejectButton({ node }: RejectTextProps) {
         >
           <Lang id={modalTriggerButton} />
         </Button>
-      </Modal.Trigger>
-      <Modal.Dialog ref={modalRef}>
-        <Modal.Header>
-          <Lang id={modalTitle} />
-        </Modal.Header>
-        <Modal.Content>
+      </Dialog.Trigger>
+      <Dialog
+        modal
+        ref={modalRef}
+      >
+        <Dialog.Block>
+          <Heading>
+            <Lang id={modalTitle} />
+          </Heading>
+        </Dialog.Block>
+        <Dialog.Block>
           <Paragraph>
             <Lang id={modalDescription} />
           </Paragraph>
-        </Modal.Content>
-        <Modal.Footer>
+        </Dialog.Block>
+        <Dialog.Block>
           <Button
             color='danger'
             disabled={isAnyProcessing}
@@ -131,8 +136,8 @@ function RejectButton({ node }: RejectTextProps) {
           >
             <Lang id='general.close' />
           </Button>
-        </Modal.Footer>
-      </Modal.Dialog>
-    </Modal.Root>
+        </Dialog.Block>
+      </Dialog>
+    </Dialog.TriggerContext>
   );
 }
diff --git a/src/layout/SigningActions/SigningActions.module.css b/src/layout/SigningActions/SigningActions.module.css
index e6a437c5f7..38fa302d87 100644
--- a/src/layout/SigningActions/SigningActions.module.css
+++ b/src/layout/SigningActions/SigningActions.module.css
@@ -10,23 +10,23 @@
 }
 
 .signingPanel {
-  padding-top: var(--fds-spacing-8);
+  padding-top: var(--ds-size-8);
   display: flex;
   flex-direction: column;
 
   .contentContainer {
-    padding: var(--fds-spacing-2);
+    padding: var(--ds-size-2);
     display: flex;
     flex-direction: column;
-    gap: var(--fds-spacing-4);
+    gap: var(--ds-size-4);
   }
 
   .buttonContainer {
-    padding: var(--fds-spacing-4) 0;
+    padding: var(--ds-size-4) 0;
     display: flex;
     flex-direction: row-reverse; /* reversed for correct tab order */
     justify-content: start;
-    gap: var(--fds-spacing-4);
+    gap: var(--ds-size-4);
     flex-wrap: wrap;
   }
 }
diff --git a/src/layout/SigningActions/SigningActionsComponent.test.tsx b/src/layout/SigningActions/SigningActionsComponent.test.tsx
index 4aea4f90eb..d2d31b542a 100644
--- a/src/layout/SigningActions/SigningActionsComponent.test.tsx
+++ b/src/layout/SigningActions/SigningActionsComponent.test.tsx
@@ -153,7 +153,7 @@ describe('SigningActionsComponent', () => {
       />,
     );
 
-    expect(screen.getByText('signing.loading')).toBeInTheDocument();
+    expect(screen.getByLabelText('signing.loading')).toBeInTheDocument();
   });
 
   it('should render ErrorPanel on API error', () => {
diff --git a/src/layout/SigningActions/SigningActionsComponent.tsx b/src/layout/SigningActions/SigningActionsComponent.tsx
index 854e0189ba..ee7b272d0f 100644
--- a/src/layout/SigningActions/SigningActionsComponent.tsx
+++ b/src/layout/SigningActions/SigningActionsComponent.tsx
@@ -50,7 +50,7 @@ export function SigningActionsComponent({ node }: PropsFromGenericComponent<'Sig
         isOnBottom
       >
         <div className={classes.loadingContainer}>
-          <Spinner title={langAsString('signing.loading')} />
+          <Spinner aria-label={langAsString('signing.loading')} />
         </div>
       </Panel>
     );
diff --git a/src/layout/SigningDocumentList/SigningDocumentListComponent.tsx b/src/layout/SigningDocumentList/SigningDocumentListComponent.tsx
index adf44d0018..82a2de74fa 100644
--- a/src/layout/SigningDocumentList/SigningDocumentListComponent.tsx
+++ b/src/layout/SigningDocumentList/SigningDocumentListComponent.tsx
@@ -43,7 +43,7 @@ export function SigningDocumentListComponent({
             title={<Lang id={textResourceBindings?.title} />}
             description={textResourceBindings?.description && <Lang id={textResourceBindings?.description} />}
             helpText={textResourceBindings?.help ? { text: textResourceBindings?.help } : undefined}
-            designSystemLabelProps={{ size: 'lg' }}
+            designSystemLabelProps={{ 'data-size': 'lg' }}
           />
         ) : undefined
       }
diff --git a/src/layout/SimpleTable/SimpleTableComponent.tsx b/src/layout/SimpleTable/SimpleTableComponent.tsx
index d51b317ee7..145f36725d 100644
--- a/src/layout/SimpleTable/SimpleTableComponent.tsx
+++ b/src/layout/SimpleTable/SimpleTableComponent.tsx
@@ -130,9 +130,7 @@ export function SimpleTableComponent({ node, dataModelBindings }: TableComponent
             setEditItemIndex(-1);
             setShowEdit(false);
           }}
-          onInteractOutside={() => {
-            setShowEdit(false);
-          }}
+          backdropClose={true}
           DropdownCaption={DropdownCaption}
         />
       )}
diff --git a/src/layout/Subform/SubformComponent.module.css b/src/layout/Subform/SubformComponent.module.css
index 60720f8de1..f2d4235943 100644
--- a/src/layout/Subform/SubformComponent.module.css
+++ b/src/layout/Subform/SubformComponent.module.css
@@ -1,16 +1,3 @@
-.visuallyHidden {
-  border: none;
-  padding: 0;
-  margin: 0;
-  position: absolute;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  clip: rect(1px 1px 1px 1px);
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 .tableButton {
   width: max-content;
 }
@@ -83,7 +70,7 @@ Altinn, and making sure they are consistent. */
 
 .addButton {
   width: 100%;
-  margin-bottom: var(--fds-spacing-2);
+  margin-bottom: var(--ds-size-2);
 }
 
 .emptyField {
diff --git a/src/layout/Subform/SubformComponent.tsx b/src/layout/Subform/SubformComponent.tsx
index a4cc5f10c8..fb6ff2c284 100644
--- a/src/layout/Subform/SubformComponent.tsx
+++ b/src/layout/Subform/SubformComponent.tsx
@@ -22,6 +22,7 @@ import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper'
 import { SubformCellContent } from 'src/layout/Subform/SubformCellContent';
 import classes from 'src/layout/Subform/SubformComponent.module.css';
 import { useExpressionDataSourcesForSubform, useSubformFormData } from 'src/layout/Subform/utils';
+import utilClasses from 'src/styles/utils.module.css';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import type { PropsFromGenericComponent } from 'src/layout';
 import type { IData } from 'src/types/shared';
@@ -110,13 +111,13 @@ export function SubformComponent({ node }: PropsFromGenericComponent<'Subform'>)
                     </Table.HeaderCell>
                   )}
                   <Table.HeaderCell>
-                    <span className={classes.visuallyHidden}>
+                    <span className={utilClasses.visuallyHidden}>
                       <Lang id='general.edit' />
                     </span>
                   </Table.HeaderCell>
                   {showDeleteButton && (
                     <Table.HeaderCell>
-                      <span className={classes.visuallyHidden}>
+                      <span className={utilClasses.visuallyHidden}>
                         <Lang id='general.delete' />
                       </span>
                     </Table.HeaderCell>
@@ -209,7 +210,7 @@ function SubformTableRow({
     return (
       <Table.Row>
         <Table.Cell colSpan={actualColumns}>
-          <Spinner title={langAsString('general.loading')} />
+          <Spinner aria-label={langAsString('general.loading')} />
         </Table.Cell>
       </Table.Row>
     );
diff --git a/src/layout/Subform/Summary/SubformSummaryComponent.tsx b/src/layout/Subform/Summary/SubformSummaryComponent.tsx
index d3df5f08b7..b5bb1321af 100644
--- a/src/layout/Subform/Summary/SubformSummaryComponent.tsx
+++ b/src/layout/Subform/Summary/SubformSummaryComponent.tsx
@@ -57,8 +57,8 @@ function SubformSummaryRow({ dataElement, node }: { dataElement: IData; node: La
   if (isSubformDataFetching) {
     return (
       <Spinner
-        title={langAsString('general.loading')}
-        size='xs'
+        aria-label={langAsString('general.loading')}
+        data-size='xs'
       />
     );
   } else if (subformDataError) {
diff --git a/src/layout/Subform/Summary/SubformSummaryComponent2.module.css b/src/layout/Subform/Summary/SubformSummaryComponent2.module.css
index a0ee45dee2..cdcfd19dd0 100644
--- a/src/layout/Subform/Summary/SubformSummaryComponent2.module.css
+++ b/src/layout/Subform/Summary/SubformSummaryComponent2.module.css
@@ -1,11 +1,11 @@
 .emptyField {
   font-style: italic;
   line-height: 1.6875;
-  color: var(--fds-semantic-text-neutral-subtle);
+  color: var(--ds-color-neutral-text-subtle);
 }
 
 .summaryLabelMargin {
-  margin-bottom: var(--fds-spacing-2);
+  margin-bottom: var(--ds-size-2);
 }
 
 .table {
@@ -17,8 +17,8 @@
 .tableMobile {
   width: 100%;
   table-layout: fixed;
-  margin-top: var(--fds-spacing-2);
-  margin-bottom: var(--fds-spacing-2);
+  margin-top: var(--ds-size-2);
+  margin-bottom: var(--ds-size-2);
   box-shadow: none;
   border-spacing: 0;
 }
@@ -59,7 +59,7 @@
 }
 
 .grayUnderline th {
-  border-bottom: var(--fds-semantic-border-neutral-default);
+  border-bottom: var(--ds-color-neutral-border-strong);
   font-size: 0.875rem;
   padding: 4px 4px 4px 6px;
 }
@@ -74,8 +74,8 @@ tr.noRowSpacing td {
 }
 
 .summaryWrapperMargin {
-  margin-top: var(--fds-spacing-3);
-  margin-bottom: var(--fds-spacing-8);
+  margin-top: var(--ds-size-3);
+  margin-bottom: var(--ds-size-8);
 }
 
 .editColumnHeader {
diff --git a/src/layout/Subform/Summary/SubformSummaryComponent2.tsx b/src/layout/Subform/Summary/SubformSummaryComponent2.tsx
index 362b2faca9..81a21d51b8 100644
--- a/src/layout/Subform/Summary/SubformSummaryComponent2.tsx
+++ b/src/layout/Subform/Summary/SubformSummaryComponent2.tsx
@@ -121,8 +121,7 @@ const DoSummaryWrapper = ({
               {subformEntryName && (
                 <Heading
                   className='no-visual-testing'
-                  spacing={false}
-                  size='sm'
+                  data-size='sm'
                   level={2}
                 >
                   {subformEntryName}
diff --git a/src/layout/Subform/Summary/SubformSummaryTable.tsx b/src/layout/Subform/Summary/SubformSummaryTable.tsx
index 3e0c742688..b36c8c12e8 100644
--- a/src/layout/Subform/Summary/SubformSummaryTable.tsx
+++ b/src/layout/Subform/Summary/SubformSummaryTable.tsx
@@ -20,6 +20,7 @@ import classes1 from 'src/layout/Subform/SubformComponent.module.css';
 import classes2 from 'src/layout/Subform/Summary/SubformSummaryComponent2.module.css';
 import { useExpressionDataSourcesForSubform, useSubformFormData } from 'src/layout/Subform/utils';
 import { EditButton } from 'src/layout/Summary2/CommonSummaryComponents/EditButton';
+import utilClasses from 'src/styles/utils.module.css';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import type { ISubformSummaryComponent } from 'src/layout/Subform/Summary/SubformSummaryComponent';
 import type { IData } from 'src/types/shared';
@@ -53,7 +54,7 @@ function SubformTableRow({
     return (
       <Table.Row>
         <Table.Cell colSpan={numColumns}>
-          <Spinner title={langAsString('general.loading')} />
+          <Spinner aria-label={langAsString('general.loading')} />
         </Table.Cell>
       </Table.Row>
     );
@@ -180,7 +181,7 @@ export function SubformSummaryTable({ targetNode }: ISubformSummaryComponent): R
               )}
               {!pdfModeActive && (
                 <Table.HeaderCell className={classNames(classes2.editColumnHeader, classes2.noRightPad)}>
-                  <span className={classes1.visuallyHidden}>
+                  <span className={utilClasses.visuallyHidden}>
                     <Lang id='general.edit' />
                   </span>
                 </Table.HeaderCell>
diff --git a/src/layout/Summary2/CommonSummaryComponents/LayoutSetSummaryAccordion.tsx b/src/layout/Summary2/CommonSummaryComponents/LayoutSetSummaryAccordion.tsx
index 4e8296524c..9e67d56a47 100644
--- a/src/layout/Summary2/CommonSummaryComponents/LayoutSetSummaryAccordion.tsx
+++ b/src/layout/Summary2/CommonSummaryComponents/LayoutSetSummaryAccordion.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Accordion, Label } from '@digdir/designsystemet-react';
+import { Details, Label } from '@digdir/designsystemet-react';
 
 import { Flex } from 'src/app-components/Flex/Flex';
 import { Lang } from 'src/features/language/Lang';
@@ -13,40 +13,36 @@ type LayoutSetAccordionSummaryProps = {
 };
 
 export function LayoutSetSummaryAccordion({ filteredPages }: LayoutSetAccordionSummaryProps) {
-  return (
-    <Accordion
-      border
+  return filteredPages.map((layoutId: string) => (
+    <Details
+      key={layoutId}
+      defaultOpen={true}
       color='neutral'
       className={classes.summaryItem}
     >
-      {filteredPages.map((layoutId: string) => (
-        <Accordion.Item
-          key={layoutId}
-          defaultOpen={true}
-        >
-          <Accordion.Header level={2}>
-            <Label asChild>
-              <span>
-                <Lang id={layoutId} />
-              </span>
-            </Label>
-          </Accordion.Header>
-          <Accordion.Content>
-            <Flex
-              container
-              spacing={6}
-              alignItems='flex-start'
-            >
-              <EmptyChildrenBoundary>
-                <PageSummary
-                  pageId={layoutId}
-                  key={layoutId}
-                />
-              </EmptyChildrenBoundary>
-            </Flex>
-          </Accordion.Content>
-        </Accordion.Item>
-      ))}
-    </Accordion>
-  );
+      <Details>
+        <Details.Summary>
+          <Label asChild>
+            <span>
+              <Lang id={layoutId} />
+            </span>
+          </Label>
+        </Details.Summary>
+        <Details.Content>
+          <Flex
+            container
+            spacing={6}
+            alignItems='flex-start'
+          >
+            <EmptyChildrenBoundary>
+              <PageSummary
+                pageId={layoutId}
+                key={layoutId}
+              />
+            </EmptyChildrenBoundary>
+          </Flex>
+        </Details.Content>
+      </Details>
+    </Details>
+  ));
 }
diff --git a/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.module.css b/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.module.css
index fb37d6f25f..c9bb926571 100644
--- a/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.module.css
+++ b/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.module.css
@@ -1,7 +1,7 @@
 .labelValueWrapper:not(.compact) {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
 }
 
 .labelValueWrapper.compact {
@@ -9,7 +9,7 @@
 }
 
 .labelValueWrapper.compact label {
-  margin-right: var(--fds-spacing-2);
+  margin-right: var(--ds-size-2);
 }
 
 .formValue {
@@ -17,12 +17,12 @@
 }
 
 .emptyValue {
-  color: var(--fds-semantic-text-neutral-subtle);
+  color: var(--ds-color-neutral-text-subtle);
   font-style: italic;
 }
 
 .error {
-  border-bottom: var(--fds-semantic-border-danger-default) solid 2px;
+  border-bottom: var(--ds-color-danger-border-default) solid 2px;
 }
 
 .summaryItemWrapper {
@@ -35,7 +35,7 @@
 .summaryItem {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
 }
 
 .editButton {
diff --git a/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.tsx b/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.tsx
index 0ea3db6f2c..d287066e71 100644
--- a/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.tsx
+++ b/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ErrorMessage, Label, List, Paragraph } from '@digdir/designsystemet-react';
+import { Label, List, Paragraph, ValidationMessage } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 import dot from 'dot-object';
 
@@ -91,18 +91,16 @@ export const MultipleValueSummary = ({
         >
           <Label weight='regular'>{title}</Label>
           {displayType === 'list' && (
-            <List.Root>
-              <List.Unordered>
-                {displayValues?.map((item) => (
-                  <List.Item
-                    key={`list-item-${item}`}
-                    className={classes.formValue}
-                  >
-                    {item}
-                  </List.Item>
-                ))}
-              </List.Unordered>
-            </List.Root>
+            <List.Unordered>
+              {displayValues?.map((item) => (
+                <List.Item
+                  key={`list-item-${item}`}
+                  className={classes.formValue}
+                >
+                  {item}
+                </List.Item>
+              ))}
+            </List.Unordered>
           )}
           {displayType === 'inline' && (
             <Paragraph
@@ -125,12 +123,15 @@ export const MultipleValueSummary = ({
         </div>
         {errors.length > 0 &&
           errors.map(({ message }) => (
-            <ErrorMessage key={message.key}>
+            <ValidationMessage
+              key={message.key}
+              data-size='sm'
+            >
               <Lang
                 id={message.key}
                 params={message.params}
               />
-            </ErrorMessage>
+            </ValidationMessage>
           ))}
       </div>
       <EditButton
diff --git a/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.module.css b/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.module.css
index 28f0beda99..1077506ffa 100644
--- a/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.module.css
+++ b/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.module.css
@@ -7,14 +7,14 @@
 .summaryItemWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
   break-inside: avoid;
 }
 
 .labelValueWrapper:not(.compact) {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
 }
 
 .labelValueWrapper.compact {
@@ -22,7 +22,7 @@
 }
 
 .labelValueWrapper.compact label {
-  margin-right: var(--fds-spacing-2);
+  margin-right: var(--ds-size-2);
 }
 
 .formValue {
@@ -30,7 +30,7 @@
 }
 
 .emptyValue {
-  color: var(--fds-semantic-text-neutral-subtle);
+  color: var(--ds-color-neutral-text-subtle);
   font-style: italic;
 }
 
@@ -40,7 +40,7 @@
 }
 
 .error {
-  border-bottom: var(--fds-semantic-border-danger-default) solid 2px;
+  border-bottom: var(--ds-color-danger-border-default) solid 2px;
 }
 
 .editButton {
diff --git a/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.tsx b/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.tsx
index 7a7326157c..e411ed037a 100644
--- a/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.tsx
+++ b/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ErrorMessage, Label, Paragraph } from '@digdir/designsystemet-react';
+import { Label, Paragraph, ValidationMessage } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
 import { Lang } from 'src/features/language/Lang';
@@ -70,12 +70,15 @@ export const SingleValueSummary = ({
     {errors &&
       errors?.length > 0 &&
       errors?.map(({ message }) => (
-        <ErrorMessage key={message.key}>
+        <ValidationMessage
+          key={message.key}
+          data-size='sm'
+        >
           <Lang
             id={message.key}
             params={message.params}
           />
-        </ErrorMessage>
+        </ValidationMessage>
       ))}
   </div>
 );
diff --git a/src/layout/Tabs/Tabs.module.css b/src/layout/Tabs/Tabs.module.css
index 669146ab41..044399a869 100644
--- a/src/layout/Tabs/Tabs.module.css
+++ b/src/layout/Tabs/Tabs.module.css
@@ -1,9 +1,12 @@
 .tabContent {
-  background-color: white;
+  background-color: var(--ds-color-neutral-surface-default);
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-size-6);
 }
 .icon {
-  width: var(--fds-sizing-6);
+  width: var(--ds-size-6);
+}
+.tabHeader {
+  white-space: unset;
 }
diff --git a/src/layout/Tabs/Tabs.tsx b/src/layout/Tabs/Tabs.tsx
index 1e55cf013a..9bb259757a 100644
--- a/src/layout/Tabs/Tabs.tsx
+++ b/src/layout/Tabs/Tabs.tsx
@@ -14,8 +14,14 @@ import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import { typedBoolean } from 'src/utils/typing';
 import type { PropsFromGenericComponent } from 'src/layout';
 
+const sizeMap: Record<string, 'sm' | 'md' | 'lg'> = {
+  small: 'sm',
+  medium: 'md',
+  large: 'lg',
+};
+
 export const Tabs = ({ node }: PropsFromGenericComponent<'Tabs'>) => {
-  const size = useNodeItem(node, (i) => i.size);
+  const size = useNodeItem(node, (i) => i.size) ?? 'medium';
   const defaultTab = useNodeItem(node, (i) => i.defaultTab);
   const tabs = useNodeItem(node, (i) => i.tabsInternal);
   const [activeTab, setActiveTab] = useState<string | undefined>(defaultTab ?? tabs.at(0)?.id);
@@ -40,7 +46,7 @@ export const Tabs = ({ node }: PropsFromGenericComponent<'Tabs'>) => {
         defaultValue={activeTab}
         value={activeTab}
         onChange={(tabId) => setActiveTab(tabId)}
-        size={size}
+        data-size={sizeMap[size]}
       >
         <DesignsystemetTabs.List>
           {tabs.map((tab) => (
@@ -54,7 +60,7 @@ export const Tabs = ({ node }: PropsFromGenericComponent<'Tabs'>) => {
           ))}
         </DesignsystemetTabs.List>
         {tabs.map((tab) => (
-          <DesignsystemetTabs.Content
+          <DesignsystemetTabs.Panel
             key={tab.id}
             value={tab.id}
             role='tabpanel'
@@ -72,24 +78,14 @@ export const Tabs = ({ node }: PropsFromGenericComponent<'Tabs'>) => {
                 />
               ))}
             </Flex>
-          </DesignsystemetTabs.Content>
+          </DesignsystemetTabs.Panel>
         ))}
       </DesignsystemetTabs>
     </ComponentStructureWrapper>
   );
 };
 
-function TabHeader({
-  id,
-  title,
-  icon,
-  isActive,
-}: {
-  id: string;
-  title: string;
-  icon: string | undefined;
-  isActive?: boolean;
-}) {
+function TabHeader({ id, title, icon }: { id: string; title: string; icon: string | undefined; isActive?: boolean }) {
   const { langAsString } = useLanguage();
   const translatedTitle = langAsString(title);
 
@@ -108,10 +104,8 @@ function TabHeader({
     <DesignsystemetTabs.Tab
       key={id}
       value={id}
-      style={{
-        backgroundColor: isActive ? 'white' : 'transparent',
-      }}
       tabIndex={0}
+      className={classes.tabHeader}
     >
       {!!icon && (
         <img
diff --git a/src/layout/Tabs/TabsSummary.module.css b/src/layout/Tabs/TabsSummary.module.css
index 358d3dd555..59d2555fc6 100644
--- a/src/layout/Tabs/TabsSummary.module.css
+++ b/src/layout/Tabs/TabsSummary.module.css
@@ -1,18 +1,18 @@
 .summaryContent {
   display: flex;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-size-6);
   flex-direction: column;
 }
 
 .tabDivider {
-  height: var(--fds-border_width-active);
+  height: var(--ds-border-width-highlight);
   border: none;
-  background-color: var(--fds-semantic-border-neutral-default);
+  background-color: var(--ds-color-neutral-border-strong);
   margin: 0;
 }
 
 .tabWrapper {
   display: flex;
-  gap: var(--fds-spacing-8);
+  gap: var(--ds-size-8);
   flex-direction: column;
 }
diff --git a/src/layout/Tabs/TabsSummary.tsx b/src/layout/Tabs/TabsSummary.tsx
index 6849b856d6..fcec09cb9f 100644
--- a/src/layout/Tabs/TabsSummary.tsx
+++ b/src/layout/Tabs/TabsSummary.tsx
@@ -45,7 +45,7 @@ export const TabsSummary = ({ componentNode }: TabsSummaryProps) => {
               className={classes.tabWrapper}
             >
               <Heading
-                size='xs'
+                data-size='xs'
                 level={4}
               >
                 <Lang id={tab.title} />
diff --git a/src/setupTests.ts b/src/setupTests.ts
index e3b558d230..65f52ee2d3 100644
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -4,6 +4,9 @@ import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/jest-globals';
 import 'core-js/stable/structured-clone'; // https://github.com/jsdom/jsdom/issues/3363
 import 'jest';
+// Importing CSS for jest-preview to look nicer
+import '@digdir/designsystemet-theme';
+import '@digdir/designsystemet-css';
 
 import { jest } from '@jest/globals';
 import { configure as testingLibraryConfigure } from '@testing-library/dom';
@@ -17,7 +20,6 @@ import type { fetchApplicationMetadata, fetchProcessState } from 'src/queries/qu
 import type { AppQueries } from 'src/queries/types';
 
 // Importing CSS for jest-preview to look nicer
-import '@digdir/designsystemet-theme/brand/altinn/tokens.css';
 import 'src/index.css';
 import 'src/styles/shared.css';
 
diff --git a/src/styles/combobox.module.css b/src/styles/combobox.module.css
index 496af66398..9fb3c9f8d9 100644
--- a/src/styles/combobox.module.css
+++ b/src/styles/combobox.module.css
@@ -1,8 +1,8 @@
 /*
  * Workaround to make the combobox shrink on narrow screens
  */
-.container [class*='fds-combobox__input__wrapper'],
-.container [class*='fds-combobox__chip-and-input'],
+.container [class*='ds-combobox__input__wrapper'],
+.container [class*='ds-combobox__chip-and-input'],
 .container input {
   min-width: 0;
 }
diff --git a/src/styles/utils.module.css b/src/styles/utils.module.css
index 5f116e8df6..4d15a2ab73 100644
--- a/src/styles/utils.module.css
+++ b/src/styles/utils.module.css
@@ -1,6 +1,19 @@
 /* Focus utility class */
 .focusable:focus-within {
-  outline: var(--fds-focus-border-width) solid var(--fds-outer-focus-border-color);
-  outline-offset: var(--fds-focus-border-width);
-  box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-inner-focus-border-color);
+  outline: var(--ds-border-width-focus) solid var(--ds-color-focus-outer);
+  outline-offset: var(--ds-border-width-focus);
+  box-shadow: 0 0 0 var(--ds-border-width-focus) var(--ds-color-focus-inner);
+}
+
+.visuallyHidden {
+  border: none;
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px);
+  clip-path: inset(50%);
+  white-space: nowrap;
 }
diff --git a/src/utils/formattingUtils.test.ts b/src/utils/formattingUtils.test.tsx
similarity index 61%
rename from src/utils/formattingUtils.test.ts
rename to src/utils/formattingUtils.test.tsx
index cd5228c257..ba2f3c8305 100644
--- a/src/utils/formattingUtils.test.ts
+++ b/src/utils/formattingUtils.test.tsx
@@ -1,4 +1,9 @@
-import { formatNumber } from 'src/utils/formattingUtils';
+import React from 'react';
+import type { NumericFormatProps, PatternFormatProps } from 'react-number-format';
+
+import { render as renderRtl, screen } from '@testing-library/react';
+
+import { formatNumber, formatNumericText } from 'src/utils/formattingUtils';
 import type { CurrencyFormattingOptions, UnitFormattingOptions } from 'src/utils/formattingUtils';
 
 const value = '12000.20';
@@ -41,3 +46,45 @@ describe('dynamic number formatting', () => {
     expect(' kr').toEqual(formatNumber(value, language, currencyOptions, position).suffix);
   });
 });
+
+describe('numberFormat', () => {
+  it('should render as NumericFormat if format is of type NumericFormatProps', () => {
+    render({
+      text: '12345.6789',
+      format: {
+        prefix: 'NOK ',
+        thousandSeparator: ' ',
+        decimalSeparator: ',',
+        decimalScale: 2,
+      },
+    });
+
+    expect(screen.getByText('NOK 12 345,67')).toBeInTheDocument();
+  });
+
+  it('should render as PatternFormat if format is of type PatternFormatProps', () => {
+    render({
+      text: '98765432',
+      format: {
+        format: '+47 ### ## ###',
+      },
+    });
+
+    expect(screen.getByText('+47 987 65 432')).toBeInTheDocument();
+  });
+
+  it('should render as plain text if format is undefined', () => {
+    render({
+      text: '12345.6789',
+    });
+
+    expect(screen.getByText('12345.6789')).toBeInTheDocument();
+  });
+});
+
+interface FormatNumericTextProps {
+  text: string;
+  format?: NumericFormatProps | PatternFormatProps;
+}
+
+const render = (props: FormatNumericTextProps) => renderRtl(<span>{formatNumericText(props.text, props.format)}</span>);
diff --git a/src/utils/formattingUtils.ts b/src/utils/formattingUtils.ts
index 6890386f3b..b13b600fdd 100644
--- a/src/utils/formattingUtils.ts
+++ b/src/utils/formattingUtils.ts
@@ -1,3 +1,6 @@
+import { numericFormatter, patternFormatter } from 'react-number-format';
+import type { NumericFormatProps, PatternFormatProps } from 'react-number-format';
+
 type FormattingResult = {
   thousandSeparator: string | undefined;
   decimalSeparator: string | undefined;
@@ -56,3 +59,21 @@ export const formatNumber = (
   });
   return intlResult;
 };
+
+export const isPatternFormat = (
+  numberFormat: NumericFormatProps | PatternFormatProps,
+): numberFormat is PatternFormatProps => (numberFormat as PatternFormatProps).format !== undefined;
+
+export const isNumericFormat = (
+  numberFormat: NumericFormatProps | PatternFormatProps,
+): numberFormat is NumericFormatProps => (numberFormat as PatternFormatProps).format === undefined;
+
+export const formatNumericText = (text: string, format?: NumericFormatProps | PatternFormatProps) => {
+  if (format && isNumericFormat(format)) {
+    return numericFormatter(text, format);
+  } else if (format && isPatternFormat(format)) {
+    return patternFormatter(text, format);
+  } else {
+    return text;
+  }
+};
diff --git a/src/utils/inputUtils.tsx b/src/utils/inputUtils.tsx
index 27112af705..42be035740 100644
--- a/src/utils/inputUtils.tsx
+++ b/src/utils/inputUtils.tsx
@@ -1,11 +1,11 @@
-import type { CharacterLimit } from '@digdir/design-system-react/dist/types/utilities/InputWrapper';
+import type { FieldCounterProps } from '@digdir/designsystemet-react';
 
 import { useLanguage } from 'src/features/language/useLanguage';
 
 /**
  * Hook to create a character limit object for use in input components
  */
-export const useCharacterLimit = (maxLength: number | undefined): CharacterLimit | undefined => {
+export const useCharacterLimit = (maxLength: number | undefined): FieldCounterProps | undefined => {
   const { langAsString } = useLanguage();
 
   if (maxLength === undefined) {
@@ -13,12 +13,8 @@ export const useCharacterLimit = (maxLength: number | undefined): CharacterLimit
   }
 
   return {
-    maxCount: maxLength,
-    label: (count: number) =>
-      count >= 0
-        ? langAsString('input_components.remaining_characters', [`${count}`, `${maxLength}`])
-        : langAsString('input_components.exceeded_max_limit', [`${Math.abs(count)}`]),
-
-    srLabel: langAsString('input_components.character_limit_sr_label', [`${maxLength}`]),
+    limit: maxLength,
+    under: langAsString('input_components.remaining_characters'),
+    over: langAsString('input_components.exceeded_max_limit'),
   };
 };
diff --git a/src/utils/options.ts b/src/utils/options.ts
index 7eb1b7b41f..7077031400 100644
--- a/src/utils/options.ts
+++ b/src/utils/options.ts
@@ -1,7 +1,12 @@
-import type { Option } from '@digdir/designsystemet-react/dist/types/components/form/Combobox/useCombobox';
-
 import type { IOptionInternal } from 'src/features/options/castOptionsToStrings';
 
+type Option = {
+  value: string;
+  label: string;
+  displayValue?: string;
+  description?: string;
+};
+
 const emptyArray: IOptionInternal[] = [];
 export function verifyAndDeduplicateOptions(options: IOptionInternal[] | undefined, multi: boolean): IOptionInternal[] {
   if (!options) {
@@ -114,3 +119,18 @@ export function optionSearchFilter(inputValue: string, option: Option): boolean
 
   return label.includes(search) || (!!desc && desc.includes(search));
 }
+
+export function optionFilter(args: {
+  index: number;
+  text: string;
+  value: string;
+  optionElement: HTMLOptionElement;
+  input: HTMLInputElement;
+}): boolean {
+  const { value, optionElement, input } = args;
+  const search = input.value.toLowerCase();
+  const label = value.toLowerCase();
+  const desc = optionElement.getAttribute('aria-description')?.toLowerCase();
+
+  return label.includes(search) || (!!desc && desc.includes(search));
+}
diff --git a/src/utils/urls/appUrlHelper.ts b/src/utils/urls/appUrlHelper.ts
index 6cef768e58..9529975be9 100644
--- a/src/utils/urls/appUrlHelper.ts
+++ b/src/utils/urls/appUrlHelper.ts
@@ -1,5 +1,3 @@
-import type { SortDirection } from '@digdir/design-system-react/dist/types/components/legacy/LegacyTable/utils';
-
 import { getQueryStringFromObject } from 'src/utils/urls/urlHelper';
 
 const { org, app } = window;
@@ -222,6 +220,9 @@ export const getOptionsUrl = ({ optionsId, queryParameters, language, secure, in
 
   return url.toString();
 };
+
+type SortDirection = 'asc' | 'desc' | 'notSortable' | 'notActive';
+
 interface IGetDataListsUrlParams {
   dataListId: string;
   queryParameters?: Record<string, ParamValue>;
diff --git a/test/e2e/integration/component-library/checkboxes.ts b/test/e2e/integration/component-library/checkboxes.ts
index 730697e052..f6c2f11ce4 100644
--- a/test/e2e/integration/component-library/checkboxes.ts
+++ b/test/e2e/integration/component-library/checkboxes.ts
@@ -251,7 +251,7 @@ describe('Checkboxes component', () => {
 
     cy.get('div[data-componentbaseid="CheckboxesPage-Header-Summary2-Display-String"]')
       .next()
-      .find('span.fds-paragraph') // Targets the span with the summary text
+      .find('span.ds-paragraph') // Targets the span with the summary text
       .should('have.text', expectedText);
   });
   it('Renders the summary2 component with correct text for Checkboxes with group and soft deletion', () => {
@@ -289,7 +289,7 @@ describe('Checkboxes component', () => {
 
     cy.get(`div${summary2}`)
       .next()
-      .find('span.fds-paragraph') // Targets the span with the summary text
+      .find('span.ds-paragraph') // Targets the span with the summary text
       .should('have.text', expectedText);
   });
   it('Renders the summary2 component with correct text for Checkboxes with group and hard deletion', () => {
@@ -333,7 +333,7 @@ describe('Checkboxes component', () => {
 
     cy.get(`div${summary2}`)
       .next()
-      .find('span.fds-paragraph') // Targets the span with the summary text
+      .find('span.ds-paragraph') // Targets the span with the summary text
       .should('have.text', expectedText);
   });
   it('Renders the summary2 component with correct text for Checkboxes with group, hard deletion, Number and label', () => {
@@ -386,7 +386,7 @@ describe('Checkboxes component', () => {
 
     cy.get(`div${summary2}`)
       .next()
-      .find('span.fds-paragraph') // Targets the span with the summary text
+      .find('span.ds-paragraph') // Targets the span with the summary text
       .should('have.text', expectedText);
   });
 
diff --git a/test/e2e/integration/component-library/dropdown.ts b/test/e2e/integration/component-library/dropdown.ts
index 2fcce05c91..234d02b93f 100644
--- a/test/e2e/integration/component-library/dropdown.ts
+++ b/test/e2e/integration/component-library/dropdown.ts
@@ -12,7 +12,7 @@ describe('Dropdown component', () => {
     cy.get('div[role="listbox"]').contains('span', testText).click();
     cy.get('[data-testid="summary-single-value-component"]')
       .eq(0)
-      .find('span.fds-paragraph')
+      .find('span.ds-paragraph')
       .should('have.text', testText);
   });
 
diff --git a/test/e2e/integration/component-library/multiple-select.ts b/test/e2e/integration/component-library/multiple-select.ts
index e75e49e8d5..ec0243d1e3 100644
--- a/test/e2e/integration/component-library/multiple-select.ts
+++ b/test/e2e/integration/component-library/multiple-select.ts
@@ -3,43 +3,42 @@ import { AppFrontend } from 'test/e2e/pageobjects/app-frontend';
 const appFrontend = new AppFrontend();
 
 describe('Multiple select component', () => {
+  const multiselect = '#form-content-MultipleSelectPage-Checkboxes2';
+  const multiselectList = 'u-datalist[role="listbox"]';
+  const summary2 = '[data-componentid=MultipleSelectPage-Header-Summary2-Component2]';
+  const repGroup = '[data-componentid=MultipleSelectPage-RepeatingGroup]';
+
+  const checkboxText1 = 'Karoline';
+  const checkboxText2 = 'Kåre';
+  const checkboxText3 = 'Johanne';
+  const checkboxText4 = 'Kari';
+  const checkboxText5 = 'Petter';
+
   it('Adds and removes data properly when using group and soft deletion', () => {
     cy.startAppInstance(appFrontend.apps.componentLibrary, { authenticationLevel: '2' });
     cy.gotoNavPage('Flervalg');
 
-    const multiselect = '#form-content-MultipleSelectPage-Checkboxes2';
-    const multiselectList = 'div[role="listbox"]';
-    const repGroup = '[data-componentid=MultipleSelectPage-RepeatingGroup]';
-
-    // Define the text for the last three checkboxes
-    const checkboxText1 = 'Karoline';
-    const checkboxText2 = 'Kåre';
-    const checkboxText3 = 'Johanne';
-    const checkboxText4 = 'Kari';
-    const checkboxText5 = 'Petter';
-
     cy.get(multiselect).click();
 
     cy.get(multiselectList).contains('span', checkboxText1).click();
-    cy.get(multiselect).contains('span', checkboxText1).should('exist');
+    cy.findByRole('button', { name: /Karoline, Press to remove, 1 of 1/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText2).click();
-    cy.get(multiselect).contains('span', checkboxText2).should('exist');
+    cy.findByRole('button', { name: /Kåre, Press to remove, 2 of 2/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText3).click();
-    cy.get(multiselect).contains('span', checkboxText3).should('exist');
+    cy.findByRole('button', { name: /Johanne, Press to remove, 3 of 3/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText4).click();
-    cy.get(multiselect).contains('span', checkboxText4).should('exist');
+    cy.findByRole('button', { name: /Kari, Press to remove, 4 of 4/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText5).click();
-    cy.get(multiselect).contains('span', checkboxText5).should('exist');
+    cy.findByRole('button', { name: /Petter, Press to remove, 5 of 5/i }).should('exist');
 
     //Uncheck
     cy.get(multiselectList).contains('span', checkboxText4).click();
-
-    cy.get(multiselect).contains('span', checkboxText4).should('not.exist');
+    cy.findByRole('button', { name: /^Kari/i }).should('not.exist');
     cy.get(multiselectList).contains('span', checkboxText5).click();
-    cy.get(multiselect).contains('span', checkboxText5).should('not.exist');
+    cy.findByRole('button', { name: /^Petter/i }).should('not.exist');
 
-    //Clicking on the repeating group to close the popover from the multiselect
-    cy.get(repGroup).click({ force: true });
+    // Close the multiple select component
+    cy.get(multiselect).type('{esc}');
 
     //Validate that the corresponding options in checkboxes is available in RepeatingGroup
     cy.get(repGroup).findByRole('cell', { name: checkboxText1 }).should('exist');
@@ -54,10 +53,11 @@ describe('Multiple select component', () => {
       .findAllByRole('button', { name: /^Slett/ })
       .first()
       .click();
-    cy.get(multiselect).contains('span', checkboxText1).should('not.exist');
+    cy.findByRole('button', { name: /^Karoline/i }).should('not.exist');
 
     // Unchecking from Checkboxes should remove from RepeatingGroup (observe that data is preserved)
-    cy.get(multiselect).contains('span', checkboxText2).should('exist');
+    cy.get(multiselect).type('{esc}'); // Make sure the multiselect is closed
+    cy.findByRole('button', { name: /Kåre, Press to remove, 1 of 2/i }).should('exist');
     cy.get(repGroup).findAllByRole('row').should('have.length', 3); // Header + 2 row
     cy.get(repGroup)
       .findAllByRole('button', { name: /^Rediger/ })
@@ -70,17 +70,43 @@ describe('Multiple select component', () => {
     cy.get(repGroup).findByRole('cell', { name: checkboxText2 }).parent().contains('td', '20');
     cy.get(multiselect).click();
     cy.get(multiselectList).contains('span', checkboxText2).click();
-    cy.get(repGroup).click({ force: true }); //closing the multiselect popover
+    cy.get(multiselect).type('{esc}'); // Close the multiple select component
     cy.get(repGroup).findAllByRole('row').should('have.length', 2);
 
     // Checking 'Kåre' again should not bring back the age
     cy.get(multiselect).click();
     cy.get(multiselectList).contains('span', checkboxText2).click();
-    cy.get(repGroup).click({ force: true }); //closing the multiselect popover
+    cy.get(multiselect).type('{esc}'); // Close the multiple select component
     cy.get(repGroup).findAllByRole('row').should('have.length', 3); // Header + 1 row
     cy.get(repGroup).findByRole('cell', { name: checkboxText2 }).should('exist');
     cy.get(repGroup).findAllByRole('cell', { name: '20' }).should('exist');
   });
+
+  it('displays the values of the currently selected options', () => {
+    cy.startAppInstance(appFrontend.apps.componentLibrary, { authenticationLevel: '2' });
+    cy.gotoNavPage('Flervalg');
+
+    cy.get('#form-content-MultipleSelectPage-Checkboxes').click();
+
+    cy.findByRole('option', { name: /Korte strekninger med bykjøring, eller annen moro/i }).click();
+    cy.findByRole('option', { name: /Kjøring i skogen/i }).click();
+    cy.findByRole('option', { name: /Kjøre til hytta på fjellet/i }).click();
+
+    cy.findByRole('button', {
+      name: /Korte strekninger med bykjøring, eller annen moro, Press to remove, 1 of 3/i,
+    }).should('exist');
+    cy.findByRole('button', { name: /Kjøring i skogen, Press to remove, 2 of 3/i }).should('exist');
+    cy.findByRole('button', { name: /Kjøre til hytta på fjellet, Press to remove, 3 of 3/i }).should('exist');
+
+    // The clickable element is a psuedo-element within the button
+    cy.findByRole('button', { name: /Kjøring i skogen, Press to remove, 2 of 3/i }).click('right', { force: true });
+
+    cy.findByRole('button', {
+      name: /Korte strekninger med bykjøring, eller annen moro, Press to remove, 1 of 2/i,
+    }).should('exist');
+    cy.findByRole('button', { name: /Kjøre til hytta på fjellet, Press to remove, 2 of 2/i }).should('exist');
+  });
+
   it('Adds and removes data properly when using group and hard deletion', () => {
     cy.interceptLayout('ComponentLayouts', (component) => {
       if (component.type === 'MultipleSelect' && component.id === 'MultipleSelectPage-Checkboxes2') {
@@ -91,42 +117,30 @@ describe('Multiple select component', () => {
     cy.startAppInstance(appFrontend.apps.componentLibrary, { authenticationLevel: '2' });
     cy.gotoNavPage('Flervalg');
 
-    const multiselect = '#form-content-MultipleSelectPage-Checkboxes2';
-    const multiselectList = 'div[role="listbox"]';
-    const repGroup = '[data-componentid=MultipleSelectPage-RepeatingGroup]';
-    //const summary1 = '[data-componentid=ListPage-Summary-Component2]';
-
-    // Define the text for the last three checkboxes
-    const checkboxText1 = 'Karoline';
-    const checkboxText2 = 'Kåre';
-    const checkboxText3 = 'Johanne';
-    const checkboxText4 = 'Kari';
-    const checkboxText5 = 'Petter';
-
     cy.get(multiselect).click();
 
-    //Check options in checkboxes component
+    // Check options in multiple select component
     cy.get(multiselectList).contains('span', checkboxText1).click();
-    cy.get(multiselect).contains('span', checkboxText1).should('exist');
+    cy.findByRole('button', { name: /Karoline, Press to remove, 1 of 1/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText2).click();
-    cy.get(multiselect).contains('span', checkboxText2).should('exist');
+    cy.findByRole('button', { name: /Kåre, Press to remove, 2 of 2/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText3).click();
-    cy.get(multiselect).contains('span', checkboxText3).should('exist');
+    cy.findByRole('button', { name: /Johanne, Press to remove, 3 of 3/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText4).click();
-    cy.get(multiselect).contains('span', checkboxText4).should('exist');
+    cy.findByRole('button', { name: /Kari, Press to remove, 4 of 4/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText5).click();
-    cy.get(multiselect).contains('span', checkboxText5).should('exist');
+    cy.findByRole('button', { name: /Petter, Press to remove, 5 of 5/i }).should('exist');
 
     //Uncheck
     cy.get(multiselectList).contains('span', checkboxText4).click();
-    cy.get(multiselect).contains('span', checkboxText4).should('not.exist');
+    cy.findByRole('button', { name: /^Kari/i }).should('not.exist');
     cy.get(multiselectList).contains('span', checkboxText5).click();
-    cy.get(multiselect).contains('span', checkboxText5).should('not.exist');
+    cy.findByRole('button', { name: /^Petter/i }).should('not.exist');
 
-    //Clicking on the repeating group to close the popover from the multiselect
-    cy.get(repGroup).click({ force: true });
+    // Close the multiple select component
+    cy.get(multiselect).type('{esc}');
 
-    //Validate that the corresponding options in checkboxes is available in RepeatingGroup
+    // Validate that the corresponding options in multiple select is avaliable in repeating group
     cy.get(repGroup).findByRole('cell', { name: checkboxText1 }).should('exist');
     cy.get(repGroup).findByRole('cell', { name: checkboxText2 }).should('exist');
     cy.get(repGroup).findByRole('cell', { name: checkboxText3 }).should('exist');
@@ -139,11 +153,14 @@ describe('Multiple select component', () => {
       .findAllByRole('button', { name: /^Slett/ })
       .first()
       .click();
-    cy.get(multiselect).contains('span', checkboxText1).should('not.exist');
+    cy.findByRole('button', {
+      name: /Karoline, Press to remove, 1 of 3/i,
+    }).should('not.exist');
 
-    // Unchecking from Checkboxes should remove from RepeatingGroup (observe that data is preserved)
+    // Unchecking from multiple select should remove from RepeatingGroup (observe that data is preserved)
     cy.get(multiselect).contains('span', checkboxText2).should('exist');
     cy.get(repGroup).findAllByRole('row').should('have.length', 3); // Header + 2 rows
+    cy.get(multiselect).type('{esc}'); // Close the multiple select component
     cy.get(repGroup)
       .findAllByRole('button', { name: /^Rediger/ })
       .first()
@@ -176,52 +193,44 @@ describe('Multiple select component', () => {
 
     cy.get('#form-content-MultipleSelectPage-Checkboxes').click();
 
-    cy.get('div[role="listbox"]').contains('span', checkboxText).click();
+    cy.get('u-datalist[role="listbox"]').contains('span', checkboxText).click();
     cy.get('div[data-componentbaseid="MultipleSelectPage-Header-Summary2-Display-String"]')
       .next()
-      .find('span.fds-paragraph') // Targets the span with the summary text
+      .find('span.ds-paragraph') // Targets the span with the summary text
       .should('have.text', checkboxText);
   });
   it('Renders the summary2 component with correct text for MultipleSelect with group and soft deletion', () => {
     cy.startAppInstance(appFrontend.apps.componentLibrary, { authenticationLevel: '2' });
     cy.gotoNavPage('Flervalg');
 
-    const multiselect = '#form-content-MultipleSelectPage-Checkboxes2';
-    const multiselectList = 'div[role="listbox"]';
-    const summary2 = '[data-componentid=MultipleSelectPage-Header-Summary2-Component2]';
-
-    const checkboxText1 = 'Karoline';
-    const checkboxText2 = 'Kåre';
-    const checkboxText3 = 'Johanne';
-    const checkboxText4 = 'Kari';
-    const checkboxText5 = 'Petter';
-
     cy.get(multiselect).click();
 
-    //Check options in checkboxes component
+    // Check options in multiple select component
     cy.get(multiselectList).contains('span', checkboxText1).click();
-    cy.get(multiselect).contains('span', checkboxText1).should('exist');
+    cy.findByRole('button', { name: /Karoline, Press to remove, 1 of 1/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText2).click();
-    cy.get(multiselect).contains('span', checkboxText2).should('exist');
+    cy.findByRole('button', { name: /Kåre, Press to remove, 2 of 2/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText3).click();
-    cy.get(multiselect).contains('span', checkboxText3).should('exist');
+    cy.findByRole('button', { name: /Johanne, Press to remove, 3 of 3/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText4).click();
-    cy.get(multiselect).contains('span', checkboxText4).should('exist');
+    cy.findByRole('button', { name: /Kari, Press to remove, 4 of 4/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText5).click();
-    cy.get(multiselect).contains('span', checkboxText5).should('exist');
+    cy.findByRole('button', { name: /Petter, Press to remove, 5 of 5/i }).should('exist');
 
     //Uncheck
     cy.get(multiselectList).contains('span', checkboxText4).click();
-
-    cy.get(multiselect).contains('span', checkboxText4).should('not.exist');
+    cy.findByRole('button', { name: /^Kari/i }).should('not.exist');
     cy.get(multiselectList).contains('span', checkboxText5).click();
-    cy.get(multiselect).contains('span', checkboxText5).should('not.exist');
+    cy.findByRole('button', { name: /^Petter/i }).should('not.exist');
+
+    // Close the multiple select component
+    cy.get(multiselect).type('{esc}');
 
     const expectedText = [checkboxText1, checkboxText2, checkboxText3].join(', ');
 
     cy.get(`div${summary2}`)
       .next()
-      .find('span.fds-paragraph') // Targets the span with the summary text
+      .find('span.ds-paragraph') // Targets the span with the summary text
       .should('have.text', expectedText);
   });
   it('Renders the summary2 component with correct text for MultipleSelect with group and hard deletion', () => {
@@ -234,42 +243,34 @@ describe('Multiple select component', () => {
     cy.startAppInstance(appFrontend.apps.componentLibrary, { authenticationLevel: '2' });
     cy.gotoNavPage('Flervalg');
 
-    const multiselect = '#form-content-MultipleSelectPage-Checkboxes2';
-    const multiselectList = 'div[role="listbox"]';
-    const summary2 = '[data-componentid=MultipleSelectPage-Header-Summary2-Component2]';
-
-    const checkboxText1 = 'Karoline';
-    const checkboxText2 = 'Kåre';
-    const checkboxText3 = 'Johanne';
-    const checkboxText4 = 'Kari';
-    const checkboxText5 = 'Petter';
-
     cy.get(multiselect).click();
 
-    //Check options in checkboxes component
+    // Check options in multiple select component
     cy.get(multiselectList).contains('span', checkboxText1).click();
-    cy.get(multiselect).contains('span', checkboxText1).should('exist');
+    cy.findByRole('button', { name: /Karoline, Press to remove, 1 of 1/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText2).click();
-    cy.get(multiselect).contains('span', checkboxText2).should('exist');
+    cy.findByRole('button', { name: /Kåre, Press to remove, 2 of 2/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText3).click();
-    cy.get(multiselect).contains('span', checkboxText3).should('exist');
+    cy.findByRole('button', { name: /Johanne, Press to remove, 3 of 3/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText4).click();
-    cy.get(multiselect).contains('span', checkboxText4).should('exist');
+    cy.findByRole('button', { name: /Kari, Press to remove, 4 of 4/i }).should('exist');
     cy.get(multiselectList).contains('span', checkboxText5).click();
-    cy.get(multiselect).contains('span', checkboxText5).should('exist');
+    cy.findByRole('button', { name: /Petter, Press to remove, 5 of 5/i }).should('exist');
 
     //Uncheck
     cy.get(multiselectList).contains('span', checkboxText4).click();
-
-    cy.get(multiselect).contains('span', checkboxText4).should('not.exist');
+    cy.findByRole('button', { name: /^Kari/i }).should('not.exist');
     cy.get(multiselectList).contains('span', checkboxText5).click();
-    cy.get(multiselect).contains('span', checkboxText5).should('not.exist');
+    cy.findByRole('button', { name: /^Petter/i }).should('not.exist');
+
+    // Close the multiple select component
+    cy.get(multiselect).type('{esc}');
 
     const expectedText = [checkboxText1, checkboxText2, checkboxText3].join(', ');
 
     cy.get(`div${summary2}`)
       .next()
-      .find('span.fds-paragraph') // Targets the span with the summary text
+      .find('span.ds-paragraph') // Targets the span with the summary text
       .should('have.text', expectedText);
   });
 
@@ -288,7 +289,7 @@ describe('Multiple select component', () => {
     cy.get(checkboxes).contains('span', 'Du må fylle ut hva skal kjøretøyet brukes til?').should('exist');
     const checkboxText1 = 'Korte strekninger med bykjøring, eller annen moro';
     cy.get('#form-content-MultipleSelectPage-Checkboxes').click();
-    cy.get('div[role="listbox"]').contains('span', checkboxText1).click();
+    cy.get(multiselectList).contains('span', checkboxText1).click();
     cy.get(checkboxes).contains('span', 'Du må fylle ut hva skal kjøretøyet brukes til?').should('not.exist');
   });
   it('Required validation shows when MultipleSelect is selected with group and soft delete', () => {
@@ -308,7 +309,7 @@ describe('Multiple select component', () => {
 
     const checkboxText1 = 'Karoline';
     cy.get('#form-content-MultipleSelectPage-Checkboxes2').click();
-    cy.get('div[role="listbox"]').contains('span', checkboxText1).click();
+    cy.get(multiselectList).contains('span', checkboxText1).click();
 
     cy.get(checkboxes).contains('span', 'Du må fylle ut velg personer').should('not.exist');
   });
@@ -329,9 +330,8 @@ describe('Multiple select component', () => {
 
     cy.get(checkboxes).contains('span', 'Du må fylle ut velg personer').should('exist');
 
-    const checkboxText1 = 'Karoline';
     cy.get('#form-content-MultipleSelectPage-Checkboxes2').click();
-    cy.get('div[role="listbox"]').contains('span', checkboxText1).click();
+    cy.get(multiselectList).contains('span', checkboxText1).click();
 
     cy.get(checkboxes).contains('span', 'Du må fylle ut velg personer').should('not.exist');
   });
diff --git a/test/e2e/integration/component-library/radio-buttons.ts b/test/e2e/integration/component-library/radio-buttons.ts
index 696a06188f..d0b45b4717 100644
--- a/test/e2e/integration/component-library/radio-buttons.ts
+++ b/test/e2e/integration/component-library/radio-buttons.ts
@@ -11,7 +11,7 @@ describe('RadioButtons component', () => {
     cy.contains('label', testText).click();
     cy.get('[data-testid="summary-single-value-component"]')
       .eq(0)
-      .find('span.fds-paragraph')
+      .find('span.ds-paragraph')
       .should('have.text', testText);
   });
 });
diff --git a/test/e2e/integration/component-library/text-area.ts b/test/e2e/integration/component-library/text-area.ts
index 5b3de4c2c6..25f973e1d7 100644
--- a/test/e2e/integration/component-library/text-area.ts
+++ b/test/e2e/integration/component-library/text-area.ts
@@ -11,7 +11,7 @@ describe('TextArea component', () => {
     cy.get('#TextareaPage-Textarea').type(testText);
     cy.get('[data-testid="summary-single-value-component"]')
       .eq(0)
-      .find('span.fds-paragraph')
+      .find('span.ds-paragraph')
       .should('have.text', testText);
 
     cy.snapshot('textarea');
diff --git a/test/e2e/integration/frontend-test/accordion.ts b/test/e2e/integration/frontend-test/accordion.ts
index cf99681579..57a9c6ffa2 100644
--- a/test/e2e/integration/frontend-test/accordion.ts
+++ b/test/e2e/integration/frontend-test/accordion.ts
@@ -4,7 +4,7 @@ describe('Accordion', () => {
 
     const accordionContent = /in horas tendebat resumptis/i;
 
-    cy.findByText(accordionContent).should('not.be.visible');
+    cy.findByText(accordionContent).should('not.exist');
     cy.findByRole('button', { name: /mer informasjon vedrørende navneendring/i }).click();
     cy.findByText(accordionContent).should('be.visible');
   });
diff --git a/test/e2e/integration/frontend-test/attachments-in-group.ts b/test/e2e/integration/frontend-test/attachments-in-group.ts
index ad0b03d869..b6b5de0cd9 100644
--- a/test/e2e/integration/frontend-test/attachments-in-group.ts
+++ b/test/e2e/integration/frontend-test/attachments-in-group.ts
@@ -226,7 +226,9 @@ describe('Repeating group attachments', () => {
       }
     });
 
-    cy.get(appFrontend.group.saveMainGroup).click();
+    cy.findAllByRole('button', { name: /lagre og lukk/i })
+      .last()
+      .click({ force: true });
     cy.get(appFrontend.group.saveMainGroup).should('not.exist');
     addNewRow();
     gotoSecondPage();
@@ -252,7 +254,7 @@ describe('Repeating group attachments', () => {
         cy.get(appFrontend.group.row(1).uploadMulti.addMoreBtn).click();
       }
     });
-    cy.get(appFrontend.group.saveMainGroup).click();
+    cy.get(appFrontend.group.saveMainGroup).click({ force: true });
     cy.get(appFrontend.group.saveMainGroup).should('not.exist');
 
     [0, 1].forEach((row) => {
diff --git a/test/e2e/integration/frontend-test/auto-save-behavior.ts b/test/e2e/integration/frontend-test/auto-save-behavior.ts
index bccaa9aa52..a831fb3948 100644
--- a/test/e2e/integration/frontend-test/auto-save-behavior.ts
+++ b/test/e2e/integration/frontend-test/auto-save-behavior.ts
@@ -18,7 +18,7 @@ describe('Auto save behavior', () => {
       }).as('saveFormData');
     });
 
-    cy.get(appFrontend.group.prefill.liten).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
     cy.wait('@saveFormData');
     cy.get<ReqCounter>('@formDataReq').then(({ count }) => {
       expect(count).to.be.eq(1);
@@ -48,7 +48,7 @@ describe('Auto save behavior', () => {
         formDataReq.count++;
       }).as('saveFormData');
     });
-    cy.get(appFrontend.group.prefill.liten).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
     // Doing a hard wait to be sure no request is sent to backend
     // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.wait(1000);
@@ -67,7 +67,7 @@ describe('Auto save behavior', () => {
     cy.findByRole('button', { name: 'Forrige' }).clickAndGone();
 
     cy.navPage('prefill').should('have.attr', 'aria-current', 'page');
-    cy.get(appFrontend.group.prefill.liten).should('be.visible');
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).should('be.visible');
 
     // Go forward again, change something and then observe the back button saves
     cy.findByRole('button', { name: 'Neste' }).clickAndGone();
@@ -82,7 +82,7 @@ describe('Auto save behavior', () => {
     });
 
     // NavigationBar
-    cy.get(appFrontend.group.prefill.middels).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.middels }).check();
     cy.gotoNavPage('repeating');
     cy.get<ReqCounter>('@formDataReq').then(({ count }) => {
       expect(count).to.be.eq(3);
@@ -131,7 +131,7 @@ describe('Auto save behavior', () => {
         .check();
       cy.get(appFrontend.changeOfName.reasonRelationship).click();
       cy.get(appFrontend.changeOfName.reasonRelationship).type('hello world');
-      cy.get(`${appFrontend.changeOfName.dateOfEffect}-button`).click();
+      cy.findByRole('button', { name: appFrontend.changeOfName.datePickerButton }).click();
       cy.get('button[aria-label*="Today"]').click();
 
       cy.findByRole('button', { name: /Neste/ }).click();
@@ -206,7 +206,7 @@ describe('Auto save behavior', () => {
       cy.get(appFrontend.changeOfName.confirmChangeName).find('input').dsCheck();
       cy.get(appFrontend.changeOfName.reasonRelationship).click();
       cy.get(appFrontend.changeOfName.reasonRelationship).type('hello world');
-      cy.get(`${appFrontend.changeOfName.dateOfEffect}-button`).click();
+      cy.findByRole('button', { name: appFrontend.changeOfName.datePickerButton }).click();
       cy.get('button[aria-label*="Today"]').click();
 
       cy.findByRole('button', { name: /Neste/ }).click();
diff --git a/test/e2e/integration/frontend-test/components.ts b/test/e2e/integration/frontend-test/components.ts
index 12ea4caa83..bc239c72c3 100644
--- a/test/e2e/integration/frontend-test/components.ts
+++ b/test/e2e/integration/frontend-test/components.ts
@@ -14,7 +14,7 @@ describe('UI Components', () => {
   const newFirstNameNb = /nytt fornavn/i;
   const newMiddleNameNb = /nytt mellomnavn/i;
   const newLastNameNb = /nytt etternavn/i;
-  const confirmChangeOfName = /ja, jeg bekrefter at navnet er riktig og slik jeg ønsker det dette er en hjelpetekst\./i;
+  const confirmChangeOfName = /ja, jeg bekrefter at navnet er riktig og slik jeg ønsker det/i;
 
   it('Image component with help text', () => {
     cy.goto('message');
@@ -25,9 +25,11 @@ describe('UI Components', () => {
       cy.wrap(image).find('img').should('have.attr', 'alt', 'Altinn logo').should('exist');
     });
     cy.findByRole('button', { name: /Hjelpetekst for Altinn logo/i }).click();
-    cy.get(appFrontend.helpText.alert).should('contain.text', 'Altinn logo');
-    cy.get(appFrontend.helpText.alert).trigger('keydown', { keyCode: 27 }); // Press ESC key
-    cy.get(appFrontend.helpText.alert).should('not.exist');
+    cy.get(appFrontend.helpText.alert).eq(0).should('be.visible');
+    cy.get(appFrontend.helpText.alert).eq(0).should('contain.text', 'Altinn logo');
+    cy.findByRole('button', { name: /Hjelpetekst for Altinn logo/i }).click();
+    cy.get('body').type('{esc}'); // Press ESC key
+    cy.get(appFrontend.helpText.alert).eq(0).should('not.be.visible');
     cy.get('body').should('have.css', 'background-color', 'rgb(239, 239, 239)');
   });
 
@@ -35,12 +37,13 @@ describe('UI Components', () => {
     cy.goto('message');
     cy.findByRole('button', { name: /Hjelpetekst for Appen for test av app frontend/i }).click();
     // check that the markdown is rendered correctly with a list, bold text and a link
-    cy.get(appFrontend.helpText.alert).then((alert) => {
-      cy.wrap(alert).find('li').should('have.length', 5);
-      cy.wrap(alert).find('b').should('have.length', 1);
-      cy.wrap(alert).find('a').should('have.length', 1);
-    });
-    cy.snapshot('helptext');
+    cy.get(appFrontend.helpText.alert)
+      .eq(1)
+      .then((alert) => {
+        cy.wrap(alert).find('li').should('have.length', 5);
+        cy.wrap(alert).find('b').should('have.length', 1);
+        cy.wrap(alert).find('a').should('have.length', 1);
+      });
   });
 
   it('while file upload is in progress, the animation should be visible', () => {
@@ -359,7 +362,7 @@ describe('UI Components', () => {
     cy.findByRole('textbox', { name: newMiddleNameNb }).clear();
     cy.findByRole('textbox', { name: newMiddleNameNb }).type('all_readOnly');
     cy.findByRole('checkbox', {
-      name: /ja, jeg bekrefter at navnet er riktig og slik jeg ønsker det dette er en hjelpetekst\./i,
+      name: /ja, jeg bekrefter at navnet er riktig og slik jeg ønsker det/i,
     }).should('have.attr', 'readonly');
     cy.get(appFrontend.changeOfName.reasons).find('input').should('have.attr', 'readonly');
     cy.snapshot('components:read-only');
@@ -375,17 +378,16 @@ describe('UI Components', () => {
     cy.get(appFrontend.changeOfName.newLastName).blur();
 
     cy.get(appFrontend.changeOfName.confirmChangeName).findByText('Dette er en beskrivelse.').should('be.visible');
+    cy.get(appFrontend.helpText.alert).eq(1).should('not.be.visible');
     cy.get(appFrontend.changeOfName.confirmChangeName).findByRole('button').click();
-    cy.get(appFrontend.changeOfName.confirmChangeName)
-      .findByRole('dialog')
-      .should('contain.text', 'Dette er en hjelpetekst.');
+    cy.get(appFrontend.helpText.alert).eq(1).should('be.visible');
 
     cy.get(appFrontend.changeOfName.confirmChangeName).find('label').click();
     cy.get(appFrontend.changeOfName.reasons).should('be.visible');
 
     cy.get(appFrontend.changeOfName.reasons).findByText('Dette er en beskrivelse.').should('be.visible');
     cy.get(appFrontend.changeOfName.reasons).findByRole('button').click();
-    cy.get(appFrontend.changeOfName.reasons).findByRole('dialog').should('contain.text', 'Dette er en hjelpetekst.');
+    cy.get(appFrontend.helpText.alert).eq(2).should('be.visible');
   });
 
   it('should display alert on changing radio button', () => {
@@ -407,7 +409,7 @@ describe('UI Components', () => {
 
     cy.findByRole('radio', { name: /Gårdsbruk/ }).check();
     //makes sure that textresources from active radiobutton are displayed in the alert dialog
-    cy.findByRole('dialog').should('contain.text', 'Er du sikker på at du vil endre fra Slektskap?');
+    cy.get(appFrontend.deleteWarningPopover).should('contain.text', 'Er du sikker på at du vil endre fra Slektskap?');
     cy.findByRole('button', { name: /Avbryt/ }).click();
     cy.findByRole('radio', { name: /Slektskap/ }).should('be.checked');
 
@@ -429,13 +431,19 @@ describe('UI Components', () => {
 
     cy.get(appFrontend.changeOfName.sources).click();
     cy.findByRole('option', { name: /digitaliseringsdirektoratet/i }).click();
-    cy.findByRole('dialog').should('contain.text', 'Er du sikker på at du vil endre til Digitaliseringsdirektoratet?');
+    cy.get(appFrontend.deleteWarningPopover).should(
+      'contain.text',
+      'Er du sikker på at du vil endre til Digitaliseringsdirektoratet?',
+    );
     cy.findByRole('button', { name: /Avbryt/ }).click();
     cy.get(appFrontend.changeOfName.sources).should('have.value', 'Altinn');
 
     cy.get(appFrontend.changeOfName.sources).click();
     cy.findByRole('option', { name: /digitaliseringsdirektoratet/i }).click();
-    cy.findByRole('dialog').should('contain.text', 'Er du sikker på at du vil endre til Digitaliseringsdirektoratet?');
+    cy.get(appFrontend.deleteWarningPopover).should(
+      'contain.text',
+      'Er du sikker på at du vil endre til Digitaliseringsdirektoratet?',
+    );
     cy.findByRole('button', { name: /Bekreft/ }).click();
     cy.get(appFrontend.changeOfName.sources).should('have.value', 'Digitaliseringsdirektoratet');
   });
@@ -451,7 +459,7 @@ describe('UI Components', () => {
 
     cy.gotoHiddenPage('label-data-bindings');
 
-    cy.findByRole('combobox', { name: /velg noen farger/i }).click();
+    cy.get('#form-content-colorsCheckboxes').click();
     cy.findByRole('option', { name: /blå/i }).click();
     cy.findByRole('option', { name: /blå/i }).should('have.attr', 'aria-selected', 'true');
     cy.findByRole('option', { name: /cyan/i }).click();
@@ -461,29 +469,23 @@ describe('UI Components', () => {
     cy.findByRole('option', { name: /gul/i }).click();
     cy.findByRole('option', { name: /gul/i }).should('have.attr', 'aria-selected', 'true');
 
-    cy.findByRole('button', { name: /slett grønn/i, hidden: true }).click();
-    cy.findByRole('dialog').should('contain.text', 'Er du sikker på at du vil slette Grønn?');
-    cy.findByRole('button', { name: /Avbryt/ }).click();
-    cy.findByRole('button', { name: /slett grønn/i, hidden: true }).should('be.visible');
-
-    cy.findByRole('button', { name: /slett gul/i, hidden: true }).click();
-    cy.findByRole('dialog').should('contain.text', 'Er du sikker på at du vil slette Gul?');
-    cy.findByRole('button', { name: /Bekreft/ }).click();
-    cy.findByRole('button', { name: /slett gul/i, hidden: true }).should('not.exist');
-
-    cy.findByRole('button', { name: /fjern alle valgte/i, hidden: true }).click();
-    cy.findByRole('dialog').should('contain.text', 'Er du sikker på at du vil slette Blå, Cyan, Grønn?');
+    cy.findByRole('button', {
+      name: /Grønn, Press to remove, 2 of 4/i,
+    }).click('right', { force: true });
+    cy.get(appFrontend.deleteWarningPopover).should('contain.text', 'Er du sikker på at du vil slette Grønn?');
     cy.findByRole('button', { name: /Avbryt/ }).click();
-    cy.findByRole('button', { name: /slett blå/i, hidden: true }).should('be.visible');
-    cy.findByRole('button', { name: /slett cyan/i, hidden: true }).should('be.visible');
-    cy.findByRole('button', { name: /slett grønn/i, hidden: true }).should('be.visible');
-
-    cy.findByRole('button', { name: /fjern alle valgte/i, hidden: true }).click();
-    cy.findByRole('dialog').should('contain.text', 'Er du sikker på at du vil slette Blå, Cyan, Grønn?');
+    cy.findByRole('button', {
+      name: /Grønn, Press to remove, 2 of 4/i,
+    }).should('exist');
+
+    cy.findByRole('button', {
+      name: /Gul, Press to remove, 3 of 4/i,
+    }).click('right', { force: true });
+    cy.get(appFrontend.deleteWarningPopover).should('contain.text', 'Er du sikker på at du vil slette Gul?');
     cy.findByRole('button', { name: /Bekreft/ }).click();
-    cy.findByRole('button', { name: /slett blå/i, hidden: true }).should('not.exist');
-    cy.findByRole('button', { name: /slett cyan/i, hidden: true }).should('not.exist');
-    cy.findByRole('button', { name: /slett grønn/i, hidden: true }).should('not.exist');
+    cy.findByRole('button', {
+      name: /Gul, Press to remove, 3 of 4/i,
+    }).should('not.exist');
   });
 
   it('should display alert when unchecking checkbox', () => {
@@ -514,9 +516,9 @@ describe('UI Components', () => {
     cy.goto('changename');
     cy.gotoNavPage('grid');
     // dialog pops up when unchecking a checkbox
-    cy.get('[data-testid="checkboxes-fieldset"]').find('label').contains('Ja').dblclick();
+    cy.findAllByRole('checkbox', { name: /Ja/ }).first().dblclick();
     //Make sure that the alert popover for only one checkbox is displayed, if several dialogs are displayed, the test will fail
-    cy.findByRole('dialog');
+    cy.get(appFrontend.deleteWarningPopover);
   });
 
   it('should render components as summary', () => {
@@ -578,11 +580,11 @@ describe('UI Components', () => {
       });
 
       cy.goto('changename');
-      cy.get('#form-content-newFirstName').contains(`Du har ${maxLength} av ${maxLength} tegn igjen`);
+      cy.get('#form-content-newFirstName').contains(`Du har ${maxLength} tegn igjen`);
       cy.get(appFrontend.changeOfName.newFirstName).type('Per');
-      cy.get('#form-content-newFirstName').contains(`Du har ${maxLength - 3} av ${maxLength} tegn igjen`);
+      cy.get('#form-content-newFirstName').contains(`Du har ${maxLength - 3} tegn igjen`);
       cy.get(appFrontend.changeOfName.newFirstName).type('r');
-      cy.get('#form-content-newFirstName').contains(`Du har ${maxLength - 4} av ${maxLength} tegn igjen`);
+      cy.get('#form-content-newFirstName').contains(`Du har ${maxLength - 4} tegn igjen`);
       cy.get(appFrontend.changeOfName.newFirstName).type('rrr');
       cy.get('#form-content-newFirstName').contains(`Du har overskredet maks antall tegn med ${7 - maxLength}`);
 
diff --git a/test/e2e/integration/frontend-test/custom-confirm.ts b/test/e2e/integration/frontend-test/custom-confirm.ts
index 3209cc4209..b6786f49e7 100644
--- a/test/e2e/integration/frontend-test/custom-confirm.ts
+++ b/test/e2e/integration/frontend-test/custom-confirm.ts
@@ -9,13 +9,13 @@ describe('Custom confirm page', () => {
     cy.goto('datalist');
 
     cy.get(dataListPage.tableBody).contains('Johanne').closest('tr').click();
-    cy.findByRole('button', { name: 'Neste' }).click();
+    cy.findAllByRole('button', { name: 'Neste' }).last().click();
     cy.get('[data-componentid="useCustomConfirm"]').findByText('Ja, bruk egendefinert').click();
     cy.findByRole('button', { name: 'Forrige' }).click();
 
     for (const name of ['Caroline', 'Kåre', 'Petter']) {
       cy.get(dataListPage.tableBody).contains(name).closest('tr').click();
-      cy.findByRole('button', { name: 'Neste' }).click();
+      cy.findAllByRole('button', { name: 'Neste' }).last().click();
       cy.get(appFrontend.sendinButton).click();
 
       cy.get('[data-componentid="confirmBody"]').should('contain.text', 'Dette er en egendefinert bekreftelsesside');
@@ -25,7 +25,7 @@ describe('Custom confirm page', () => {
       cy.get(dataListPage.tableBody).contains(name).closest('tr').find('input').should('be.checked');
     }
 
-    cy.findByRole('button', { name: 'Neste' }).click();
+    cy.findAllByRole('button', { name: 'Neste' }).last().click();
     cy.get(appFrontend.sendinButton).click();
     cy.get('[data-componentid="confirmBody"]').should('contain.text', 'Dette er en egendefinert bekreftelsesside');
     cy.get('[data-componentid="confirmBody"]').should('contain.text', `på forrige side valgte du Petter.`);
diff --git a/test/e2e/integration/frontend-test/grid.ts b/test/e2e/integration/frontend-test/grid.ts
index e29d5e0aee..d3fa00793c 100644
--- a/test/e2e/integration/frontend-test/grid.ts
+++ b/test/e2e/integration/frontend-test/grid.ts
@@ -16,20 +16,20 @@ describe('Grid component', () => {
     cy.get(appFrontend.changeOfName.confirmChangeName).find('input').check();
     cy.get(appFrontend.changeOfName.reasonRelationship).click();
     cy.get(appFrontend.changeOfName.reasonRelationship).type('hello world');
-    cy.get(`${appFrontend.changeOfName.dateOfEffect}-button`).click();
+    cy.findByRole('button', { name: appFrontend.changeOfName.datePickerButton }).click();
     cy.get('button[aria-label*="Today"]').click();
 
     cy.gotoNavPage('grid');
 
     // Dynamics hiding the entire grid table
     cy.get(appFrontend.grid.gridWithAll).should('be.visible');
-    cy.get(appFrontend.grid.showGridWithAll).find('label:contains("Nei")').dsCheck();
+    cy.findAllByRole('radio', { name: /nei/i }).eq(1).check();
     cy.get(appFrontend.grid.gridWithAll).should('not.exist');
 
     // Dynamics hiding an entire row
-    cy.get(appFrontend.grid.hasCreditCard).find('label:contains("Nei")').dsCheck();
+    cy.findAllByRole('radio', { name: /nei/i }).eq(0).check();
     cy.get(appFrontend.grid.grid).find('tr').should('have.length', 6);
-    cy.get(appFrontend.grid.hasCreditCard).find('label:contains("Ja")').dsCheck();
+    cy.findAllByRole('radio', { name: /ja/i }).eq(0).check();
     cy.get(appFrontend.grid.grid).find('tr').should('have.length', 7);
 
     // Filling out the form without ending up at 100% total. We reference these fields in their respective rows
@@ -118,7 +118,7 @@ describe('Grid component', () => {
       'contain.text',
       'Er fordelingen av kredittkortgjeld verifisert?',
     );
-    cy.get(appFrontend.grid.hasCreditCard).find('label:contains("Nei")').dsCheck();
+    cy.findAllByRole('radio', { name: /nei/i }).eq(0).check();
     cy.get(appFrontend.grid.kredittkort.percent).should('not.exist');
     cy.get(appFrontend.grid.kredittkort.percentComponent).should('not.exist');
     cy.get(appFrontend.grid.kredittkort.verifiedComponent).should('not.exist');
@@ -137,7 +137,7 @@ describe('Grid component', () => {
     });
 
     cy.goto('group');
-    cy.get(appFrontend.group.prefill.liten).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
     cy.gotoNavPage('repeating');
     cy.get(appFrontend.group.showGroupToContinue).find('input').check();
     cy.findByRole('button', { name: 'Se innhold NOK 1' }).click();
@@ -174,10 +174,10 @@ describe('Grid component', () => {
     cy.get(appFrontend.helpText.alert).should('contain.text', 'Help text');
 
     cy.findByRole('cell', {
-      name: /prosentandel av gjeld i studielån hjelpetekst for prosentandel av gjeld i studielån dette er en beskrivende tekst/i,
+      name: /prosentandel av gjeld i studielån dette er en beskrivende tekst/i,
     }).should('exist');
     cy.findByRole('button', { name: /Hjelpetekst for Prosentandel av gjeld i studielån/i }).click();
-    cy.focused().should('have.attr', 'id', 'fordeling-studie-helptext');
+    cy.focused().should('have.attr', 'aria-label', 'Hjelpetekst for Prosentandel av gjeld i studielån');
     cy.get(appFrontend.helpText.alert).should('contain.text', 'Dette er en hjelpetekst');
   });
 });
diff --git a/test/e2e/integration/frontend-test/group.ts b/test/e2e/integration/frontend-test/group.ts
index 1bb0bc3659..ace612d2d0 100644
--- a/test/e2e/integration/frontend-test/group.ts
+++ b/test/e2e/integration/frontend-test/group.ts
@@ -259,9 +259,9 @@ describe('Group', () => {
       cy.findByRole('button', { name: 'Forrige' }).click();
       for (const item of Object.keys(items)) {
         if (items[item] === true) {
-          cy.get(appFrontend.group.prefill[item]).check();
+          cy.findByRole('checkbox', { name: appFrontend.group.prefill[item] }).check();
         } else {
-          cy.get(appFrontend.group.prefill[item]).uncheck();
+          cy.findByRole('checkbox', { name: appFrontend.group.prefill[item] }).uncheck();
         }
       }
       cy.findByRole('button', { name: /Neste/ }).click();
@@ -310,7 +310,7 @@ describe('Group', () => {
 
     cy.get(appFrontend.fieldValidation('currentValue-0')).should('have.text', texts.requiredFieldFromValue);
 
-    cy.findByRole('textbox', { name: '1. Endre fra*' }).type('123');
+    cy.findByRole('textbox', { name: '1. Endre fra' }).type('123');
     cy.get(appFrontend.group.saveMainGroup).click();
 
     cy.get(appFrontend.fieldValidation('newValue-0')).should('have.text', texts.requiredFieldToValue);
@@ -441,7 +441,6 @@ describe('Group', () => {
 
     cy.get(appFrontend.group.subGroup).find('tbody > tr > td').first().should('have.text', 'automation');
     cy.get(appFrontend.group.subGroup).findByRole('button', { name: 'Slett-automation' }).click();
-    cy.snapshot('group: delete-warning-popup');
 
     cy.findByRole('button', { name: 'Avbryt' }).click({ force: true });
     cy.get(appFrontend.group.subGroup).findByRole('button', { name: 'Slett-automation' }).click();
@@ -471,12 +470,11 @@ describe('Group', () => {
     });
 
     cy.gotoNavPage('prefill');
-    cy.get(appFrontend.group.prefill.liten).check();
-    cy.get(appFrontend.group.prefill.middels).check();
-    cy.get(appFrontend.group.prefill.enorm).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.middels }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.enorm }).check();
     cy.gotoNavPage('repeating');
     cy.get(appFrontend.group.showGroupToContinue).findByRole('checkbox', { name: 'Ja' }).check();
-    cy.get(appFrontend.group.showGroupToContinue).findByRole('checkbox', { name: 'Ja' }).blur();
     cy.get(appFrontend.group.mainGroupTableBody).find('tr').should('have.length', 3);
     cy.snapshot('group:edit-in-table');
 
@@ -611,9 +609,9 @@ describe('Group', () => {
     });
 
     cy.goto('group');
-    cy.get(appFrontend.group.prefill.liten).check();
-    cy.get(appFrontend.group.prefill.middels).check();
-    cy.get(appFrontend.group.prefill.enorm).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.middels }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.enorm }).check();
     cy.gotoNavPage('repeating');
     cy.get(appFrontend.group.showGroupToContinue).findByRole('checkbox', { name: 'Ja' }).check();
 
@@ -654,16 +652,14 @@ describe('Group', () => {
   it('adding group rows should trigger backend calculations + selecting options from source', () => {
     cy.goto('group');
 
-    cy.get(appFrontend.group.prefill.liten).check();
-    cy.get(appFrontend.group.prefill.middels).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.middels }).check();
 
     cy.gotoNavPage('repeating');
     cy.get(appFrontend.group.showGroupToContinue).findByRole('checkbox', { name: 'Ja' }).check();
 
-    // The title and description is set to the same text resource binding, and duplicates the text we need to
-    // put in `name` for this to work
     const selectedOption = 'Endre fra: 120, Endre til: 350';
-    const longSelectedText = `${selectedOption} Fungerer kalkulatoren din? ${selectedOption} Fungerer kalkulatoren din?`;
+    const longSelectedText = `${selectedOption} Fungerer kalkulatoren din?`;
 
     // First make sure to check the second item in the bottom-most radio group. This should also change the items
     // in the two dropdowns above.
@@ -710,7 +706,7 @@ describe('Group', () => {
 
     // Adding a new row to the main group adds a new option
     cy.gotoNavPage('prefill');
-    cy.get(appFrontend.group.prefill.stor).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.stor }).check();
     cy.gotoNavPage('repeating');
 
     cy.get(appFrontend.group.secondGroup).find('tbody > tr').should('have.length', 2);
@@ -760,7 +756,7 @@ describe('Group', () => {
     ]) {
       // It is very important that these gets checked in this order, as the rest of the test relies on that.
       // Order is not guaranteed here, so we'll wait for each one to be saved before continuing.
-      cy.get(prefill).check();
+      cy.findByRole('checkbox', { name: prefill }).check();
       cy.waitUntilSaved();
     }
 
@@ -776,7 +772,7 @@ describe('Group', () => {
     // Navigating between pages should clear the state for which group row is editing, so now the
     // first one (that is not hidden) should be open
     cy.gotoNavPage('prefill');
-    cy.get(appFrontend.group.prefill.liten).should('be.visible');
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).should('be.visible');
     cy.gotoNavPage('repeating');
 
     cy.get(appFrontend.group.editContainer).find('input').first().should('have.value', 'NOK 120');
@@ -789,7 +785,7 @@ describe('Group', () => {
     // value using C# default values in the strict model.
     cy.get('#prefill-enabled').findByRole('radio', { name: 'Ja' }).should('be.checked');
 
-    cy.get(appFrontend.group.prefill.liten).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
     cy.gotoNavPage('repeating');
     cy.get(appFrontend.group.showGroupToContinue).findByRole('checkbox', { name: 'Ja' }).check();
     cy.get(appFrontend.group.mainGroupTableBody).find('tr').should('have.length', 1);
@@ -797,7 +793,7 @@ describe('Group', () => {
 
     cy.gotoNavPage('prefill');
     cy.get('#prefill-enabled').findByRole('radio', { name: 'Nei' }).click();
-    cy.get(appFrontend.group.prefill.middels).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.middels }).check();
     cy.waitUntilSaved();
 
     cy.gotoNavPage('repeating');
@@ -806,7 +802,7 @@ describe('Group', () => {
 
     cy.gotoNavPage('prefill');
     cy.get('#prefill-enabled').findByRole('radio', { name: 'Ja' }).click();
-    cy.get(appFrontend.group.prefill.stor).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.stor }).check();
 
     // When we temporarily disabled the prefilling functionality, ruleHandler tricked the backend by
     // setting PrefillValuesShadow to the same value as PrefillValues, making the backend think the 'middels' row we
@@ -829,11 +825,11 @@ describe('Group', () => {
       }
     });
     cy.goto('group');
-    cy.get(appFrontend.group.prefill.liten).check();
-    cy.get(appFrontend.group.prefill.middels).check();
-    cy.get(appFrontend.group.prefill.stor).check();
-    cy.get(appFrontend.group.prefill.svaer).check();
-    cy.get(appFrontend.group.prefill.enorm).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.middels }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.stor }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.svaer }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.enorm }).check();
     cy.gotoNavPage('repeating');
     cy.get(appFrontend.group.showGroupToContinue).findByRole('checkbox', { name: 'Ja' }).check();
 
@@ -964,9 +960,9 @@ describe('Group', () => {
     // starts as soon as the data is saved, and when you at that point immediately click a new checkbox, that triggers
     // a new node generation process - before the first one has finished.
     cy.goto('group');
-    cy.get(appFrontend.group.prefill.liten).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
     cy.waitUntilSaved();
-    cy.get(appFrontend.group.prefill.middels).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.middels }).check();
     cy.gotoNavPage('repeating');
     cy.get(appFrontend.group.showGroupToContinue).findByRole('checkbox', { name: 'Ja' }).check();
     cy.get(appFrontend.group.mainGroupTableBody).find('tr').should('have.length', 2);
diff --git a/test/e2e/integration/frontend-test/hide-row-in-group.ts b/test/e2e/integration/frontend-test/hide-row-in-group.ts
index cfc58d82e9..d2d7a15bda 100644
--- a/test/e2e/integration/frontend-test/hide-row-in-group.ts
+++ b/test/e2e/integration/frontend-test/hide-row-in-group.ts
@@ -5,7 +5,7 @@ const appFrontend = new AppFrontend();
 it('should be possible to hide rows when "Endre fra" is greater or equals to [...]', () => {
   cy.goto('group');
   for (const prefill of Object.values(appFrontend.group.prefill)) {
-    cy.get(prefill).check();
+    cy.findByRole('checkbox', { name: prefill }).check();
     cy.waitUntilSaved();
   }
   const headerRow = 1;
@@ -157,7 +157,7 @@ it('"save and next"-button should open row 3 when row 2 is hidden', () => {
 it('rowsAfter should align with the cells in the table above', () => {
   cy.goto('group');
   for (const prefill of Object.values(appFrontend.group.prefill)) {
-    cy.get(prefill).check();
+    cy.findByRole('checkbox', { name: prefill }).check();
     cy.waitUntilSaved();
   }
   cy.findByRole('button', { name: /Neste/ }).click();
diff --git a/test/e2e/integration/frontend-test/list-component.ts b/test/e2e/integration/frontend-test/list-component.ts
index 60ac613d33..5df59940b6 100644
--- a/test/e2e/integration/frontend-test/list-component.ts
+++ b/test/e2e/integration/frontend-test/list-component.ts
@@ -61,12 +61,10 @@ describe('List component', () => {
 
     cy.get(dataListPage.listComponent).get(dataListPage.selectComponent).should('have.value', '5');
     cy.get(dataListPage.listComponent).get(dataListPage.tableBody).find('tr').its('length').should('eq', 5);
-    cy.get(dataListPage.listComponent).get(dataListPage.selectComponent).click();
-    cy.findByRole('option', { name: '10' }).click();
+    cy.get(dataListPage.listComponent).get(dataListPage.selectComponent).select('10');
     cy.get(dataListPage.listComponent).get(dataListPage.selectComponent).should('have.value', 10);
     cy.get(dataListPage.listComponent).get(dataListPage.tableBody).find('tr').its('length').should('eq', 10);
-    cy.get(dataListPage.listComponent).get(dataListPage.selectComponent).click();
-    cy.findByRole('option', { name: '5' }).click();
+    cy.get(dataListPage.listComponent).get(dataListPage.selectComponent).select('5');
   });
 
   it('Sorting should work as expected', () => {
@@ -81,19 +79,22 @@ describe('List component', () => {
   it('Navigation in pagination should work as expected', () => {
     cy.goto('datalist');
 
-    cy.get(dataListPage.navigateNextButton).should('not.be.disabled');
+    cy.findAllByRole('button', { name: /neste/i }).first().should('not.be.disabled');
     cy.get(dataListPage.tableBody).first().first().contains('Caroline');
-    cy.get(dataListPage.navigateNextButton).click();
-    cy.get(dataListPage.navigateNextButton).get(dataListPage.tableBody).first().first().contains('Hans');
-    cy.get(dataListPage.navigatePreviousButton).click();
-    cy.get(dataListPage.navigatePreviousButton).get(dataListPage.tableBody).first().first().contains('Caroline');
+    cy.findAllByRole('button', { name: /neste/i }).first().click();
+    cy.findAllByRole('button', { name: /neste/i }).first().get(dataListPage.tableBody).first().first().contains('Hans');
+    cy.findByRole('button', { name: /forrige/i }).click();
+    cy.findByRole('button', { name: /forrige/i })
+      .get(dataListPage.tableBody)
+      .first()
+      .first()
+      .contains('Caroline');
   });
 
   it('Should expand to 10 rows and take a snapshot', () => {
     cy.goto('datalist');
 
-    cy.get(dataListPage.listComponent).get(dataListPage.selectComponent).click();
-    cy.findByRole('option', { name: '10' }).click();
+    cy.get(dataListPage.listComponent).get(dataListPage.selectComponent).select('10');
     cy.get(dataListPage.listComponent).get(dataListPage.tableBody).find('tr').its('length').should('eq', 10);
 
     cy.snapshot('list-component');
diff --git a/test/e2e/integration/frontend-test/mobile.ts b/test/e2e/integration/frontend-test/mobile.ts
index 7534e30d9c..493dfcd230 100644
--- a/test/e2e/integration/frontend-test/mobile.ts
+++ b/test/e2e/integration/frontend-test/mobile.ts
@@ -40,11 +40,11 @@ function testChangeName() {
 
 function testGroup(mode: Mode) {
   cy.wait('@getLayoutGroup');
-  cy.get(appFrontend.group.prefill.liten).check();
-  cy.get(appFrontend.group.prefill.middels).check();
-  cy.get(appFrontend.group.prefill.stor).check();
-  cy.get(appFrontend.group.prefill.svaer).check();
-  cy.get(appFrontend.group.prefill.enorm).check();
+  cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
+  cy.findByRole('checkbox', { name: appFrontend.group.prefill.middels }).check();
+  cy.findByRole('checkbox', { name: appFrontend.group.prefill.stor }).check();
+  cy.findByRole('checkbox', { name: appFrontend.group.prefill.svaer }).check();
+  cy.findByRole('checkbox', { name: appFrontend.group.prefill.enorm }).check();
 
   cy.navPage('repeating').click();
   cy.get(appFrontend.group.showGroupToContinue).find('input').check();
@@ -106,7 +106,7 @@ function testLikert() {
 }
 
 function testListMobile() {
-  cy.findByRole('radiogroup').within(() => {
+  cy.findByRole('group', { name: /Hvem gjelder saken? */ }).within(() => {
     cy.findByRole('radio', { name: /caroline/i }).check();
     cy.findByRole('radio', { name: /caroline/i }).should('be.checked');
   });
@@ -119,7 +119,7 @@ function testListTablet() {
     cy.findByRole('row', { name: /caroline/i }).click();
     cy.findByRole('radio', { name: /caroline/i }).should('be.checked');
   });
-  cy.findByRole('button', { name: 'Neste' }).click();
+  cy.findAllByRole('button', { name: 'Neste' }).eq(1).click();
   sendIn();
 }
 
diff --git a/test/e2e/integration/frontend-test/on-entry.ts b/test/e2e/integration/frontend-test/on-entry.ts
index d3cf7e211a..6bce0bde15 100644
--- a/test/e2e/integration/frontend-test/on-entry.ts
+++ b/test/e2e/integration/frontend-test/on-entry.ts
@@ -106,7 +106,7 @@ describe('On Entry', () => {
       .eq(1)
       .should('have.text', 'Ola Nordmann');
 
-    cy.get(appFrontend.selectInstance.nexPageButton).click();
+    cy.findByRole('button', { name: /neste/i }).click();
 
     cy.get(appFrontend.selectInstance.tableBody)
       .find('tr')
diff --git a/test/e2e/integration/frontend-test/options.ts b/test/e2e/integration/frontend-test/options.ts
index 732fbc8759..6e20023bc7 100644
--- a/test/e2e/integration/frontend-test/options.ts
+++ b/test/e2e/integration/frontend-test/options.ts
@@ -361,18 +361,18 @@ describe('Options', () => {
 
     cy.dsReady('[data-componentid="ingredientType-0"]');
     cy.get('[data-componentid="ingredientType-0"]').findByRole('combobox').click();
-    cy.get('[class*="fds-combobox__option"]').should('contain.text', 'Vannmelon');
-    cy.get('[class*="fds-combobox__option"]').should('not.contain.text', 'Blåbær');
-    cy.get('[class*="fds-combobox__option"]').findByText('Vannmelon').click();
+    cy.get('[class*="ds-combobox__option"]').should('contain.text', 'Vannmelon');
+    cy.get('[class*="ds-combobox__option"]').should('not.contain.text', 'Blåbær');
+    cy.get('[class*="ds-combobox__option"]').findByText('Vannmelon').click();
     cy.get('[data-componentid="ingredientId-0"]').should('have.text', '10');
 
     cy.findByRole('button', { name: 'Legg til ny' }).click();
     cy.dsReady('[data-componentid="ingredientType-1"]');
     cy.get('[data-componentid="ingredientType-1"]').findByRole('combobox').click();
-    cy.get('[class*="fds-combobox__option"]').should('contain.text', 'Banan');
-    cy.get('[class*="fds-combobox__option"]').should('not.contain.text', 'Vannmelon');
-    cy.get('[class*="fds-combobox__option"]').should('not.contain.text', 'Blåbær');
-    cy.get('[class*="fds-combobox__option"]').findByText('Banan').click();
+    cy.get('[class*="ds-combobox__option"]').should('contain.text', 'Banan');
+    cy.get('[class*="ds-combobox__option"]').should('not.contain.text', 'Vannmelon');
+    cy.get('[class*="ds-combobox__option"]').should('not.contain.text', 'Blåbær');
+    cy.get('[class*="ds-combobox__option"]').findByText('Banan').click();
     cy.get('[data-componentid="ingredientId-1"]').should('have.text', '5');
 
     // Disliking 'vannmelon' will remove the selection and not allow it to be re-selected
@@ -380,7 +380,7 @@ describe('Options', () => {
     cy.get('[data-componentid="ingredientId-0"]').should('have.text', '');
     cy.get('[data-componentid="ingredientId-1"]').should('have.text', '5');
     cy.get('[data-componentid="ingredientType-0"]').findByRole('combobox').click();
-    cy.get('[class*="fds-combobox__option"]').should('not.contain.text', 'Vannmelon');
+    cy.get('[class*="ds-combobox__option"]').should('not.contain.text', 'Vannmelon');
     cy.get('[data-componentid="ingredientType-0"]').type('{esc}');
 
     // Add two rows with no ingredients selected
diff --git a/test/e2e/integration/frontend-test/page-order-with-dynamics.ts b/test/e2e/integration/frontend-test/page-order-with-dynamics.ts
index 1619630358..fa3e031b3f 100644
--- a/test/e2e/integration/frontend-test/page-order-with-dynamics.ts
+++ b/test/e2e/integration/frontend-test/page-order-with-dynamics.ts
@@ -15,7 +15,7 @@ describe('Calculate Page Order', () => {
     cy.goto('group');
     cy.get(appFrontend.navMenuButtons).should('have.length', 5);
 
-    cy.get(appFrontend.group.prefill.stor).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.stor }).check();
     cy.get(appFrontend.navMenuCurrent).should('have.text', '1. prefill');
 
     // Both pages the 'repeating' and 'hide' pages are now hidden
diff --git a/test/e2e/integration/frontend-test/summary.ts b/test/e2e/integration/frontend-test/summary.ts
index 1695e9cda6..071c6a6cc7 100644
--- a/test/e2e/integration/frontend-test/summary.ts
+++ b/test/e2e/integration/frontend-test/summary.ts
@@ -102,7 +102,7 @@ describe('Summary', () => {
         cy.wrap(summaryDate).contains(texts.dateOfEffect).should('have.css', 'color', 'rgb(213, 32, 59)');
         cy.wrap(summaryDate).contains(common.altinnFlex, texts.requiredFieldDateFrom).should('be.visible');
         cy.wrap(summaryDate).contains('button', texts.goToRightPage).click();
-        cy.get(`${appFrontend.changeOfName.dateOfEffect}-button`).click();
+        cy.findByRole('button', { name: appFrontend.changeOfName.datePickerButton }).click();
         cy.get('button[aria-label*="Today"]').click();
         cy.get(appFrontend.errorReport).should('not.exist');
         cy.findByRole('button', { name: 'Tilbake til oppsummering' }).click();
@@ -217,9 +217,9 @@ describe('Summary', () => {
     groupElements().eq(5).should('contain.text', `${texts.nestedOption2}, ${texts.nestedOption3}`);
 
     cy.gotoNavPage('prefill');
-    cy.get(appFrontend.group.prefill.liten).check();
-    cy.get(appFrontend.group.prefill.middels).check();
-    cy.get(appFrontend.group.prefill.svaer).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.middels }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.svaer }).check();
     cy.gotoNavPage('summary');
 
     function assertSummaryItem(groupRow: number, items: { [key: string]: boolean }) {
@@ -337,7 +337,7 @@ describe('Summary', () => {
     });
     cy.goto('group');
 
-    cy.get(appFrontend.group.prefill['liten']).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
     cy.gotoNavPage('repeating');
     cy.get(appFrontend.group.showGroupToContinue).find('input').check();
     // Add data
diff --git a/test/e2e/integration/frontend-test/validation.ts b/test/e2e/integration/frontend-test/validation.ts
index 60d88e9fd5..b2d2784561 100644
--- a/test/e2e/integration/frontend-test/validation.ts
+++ b/test/e2e/integration/frontend-test/validation.ts
@@ -38,7 +38,7 @@ describe('Validation', () => {
 
     cy.findByRole('checkbox', { name: /Ja[a-z, ]*/ }).check();
     cy.get(appFrontend.changeOfName.reasonRelationship).type('test');
-    cy.get(`${appFrontend.changeOfName.dateOfEffect}-button`).click();
+    cy.findByRole('button', { name: appFrontend.changeOfName.datePickerButton }).click();
     cy.get('button[aria-label*="Today"]').click();
     cy.findByRole('button', { name: /Neste/ }).click();
 
@@ -320,7 +320,7 @@ describe('Validation', () => {
   it('List component: validation messages should only show up once', () => {
     cy.goto('datalist');
     cy.get(dataListPage.tableBody).first().first().contains('Caroline');
-    cy.findByRole('button', { name: 'Neste' }).click();
+    cy.findAllByRole('button', { name: /neste/i }).eq(1).click();
     cy.get(appFrontend.errorReport)
       .should('be.inViewport')
       .should('contain.text', texts.errorReport)
@@ -345,9 +345,8 @@ describe('Validation', () => {
     });
     cy.goto('group');
 
-    cy.get(appFrontend.group.prefill.liten).check();
-    cy.get(appFrontend.group.prefill.stor).check();
-    cy.get(appFrontend.group.prefill.stor).blur();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).check();
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.stor }).check();
     cy.findByRole('button', { name: /Neste/ }).clickAndGone();
     cy.navPage('repeating').should('have.attr', 'aria-current', 'page');
 
@@ -364,7 +363,7 @@ describe('Validation', () => {
     cy.get(appFrontend.group.addNewItem).click();
     cy.get(appFrontend.group.editContainer).find(appFrontend.group.next).click();
     cy.get(appFrontend.group.row(2).nestedGroup.row(0).comments).should('be.visible');
-    cy.get(appFrontend.group.saveMainGroup).click();
+    cy.get(appFrontend.group.saveMainGroup).click({ force: true });
     cy.get(appFrontend.group.editContainer).should('be.visible');
     cy.get(appFrontend.errorReport).findAllByRole('listitem').should('have.length', 3);
     cy.get(appFrontend.errorReport).findByText('Du må fylle ut 1. endre fra').click();
@@ -391,7 +390,7 @@ describe('Validation', () => {
     cy.get(appFrontend.group.saveSubGroup).click();
     cy.get(appFrontend.errorReport).should('contain.text', texts.requiredComment);
     cy.gotoNavPage('prefill');
-    cy.get(appFrontend.group.prefill.liten).should('be.visible');
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).should('be.visible');
     cy.gotoNavPage('repeating');
     cy.findByRole('button', { name: 'Se innhold NOK 1 233' }).click();
     cy.get(appFrontend.errorReport).findByText(texts.requiredComment).click();
@@ -769,7 +768,7 @@ describe('Validation', () => {
     });
     cy.goto('message');
 
-    cy.findByRole('textbox', { name: 'Input with falsy value*' }).type('0');
+    cy.findByRole('textbox', { name: 'Input with falsy value' }).type('0');
     cy.findByRole('button', { name: 'Send inn' }).click();
 
     // Content from next page
@@ -938,7 +937,7 @@ describe('Validation', () => {
     cy.get(appFrontend.group.comments).should('be.visible'); // Required field in the nested group
     cy.get(appFrontend.group.row(1).nestedGroup.row(0).tableRow).should('not.contain.text', 'Rett feil her');
     cy.get(appFrontend.group.row(1).tableRow).should('not.contain.text', 'Rett feil her');
-    cy.get(appFrontend.group.saveMainGroup).click();
+    cy.get(appFrontend.group.saveMainGroup).click({ force: true });
     cy.get(appFrontend.group.row(1).nestedGroup.row(0).tableRow).should('contain.text', 'Rett feil her');
     cy.get(appFrontend.group.row(1).tableRow).should('contain.text', 'Rett feil her');
     cy.get(appFrontend.errorReport).findAllByRole('listitem').should('have.length', 1);
@@ -946,7 +945,7 @@ describe('Validation', () => {
 
     // Forcing us away from the 'repeating' page should reset the open-state in the repeating group, but not the errors
     cy.gotoNavPage('prefill');
-    cy.get(appFrontend.group.prefill.liten).should('be.visible');
+    cy.findByRole('checkbox', { name: appFrontend.group.prefill.liten }).should('be.visible');
     cy.gotoNavPage('repeating');
     cy.get(appFrontend.group.row(1).tableRow).should('contain.text', 'Rett feil her');
     cy.get(appFrontend.group.row(1).editBtn).click();
diff --git a/test/e2e/integration/navigation-test/navigation.ts b/test/e2e/integration/navigation-test/navigation.ts
index 905504149e..3ab4bcae21 100644
--- a/test/e2e/integration/navigation-test/navigation.ts
+++ b/test/e2e/integration/navigation-test/navigation.ts
@@ -17,13 +17,15 @@ describe('navigation', () => {
   ['desktop', 'tablet', 'mobile'].forEach((device: keyof typeof viewportSizes) =>
     it(`navigation component on ${device}`, () => {
       const { width, height } = viewportSizes[device];
-      const isUsingDialog = device === 'mobile' || device === 'tablet';
+      const isUsingMobile = device === 'mobile';
+      const isUsingTablet = device === 'tablet';
       cy.viewport(width, height);
       cy.startAppInstance(appFrontend.apps.navigationTest);
       cy.waitForLoad();
 
       // Check initial conditions
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup(/^Informasjon/).should('have.attr', 'aria-expanded', 'true');
       cy.navGroup(/^Informasjon/).should('have.attr', 'aria-current', 'step');
       cy.navGroup(/^Informasjon/, 'Generell info').should('have.attr', 'aria-current', 'page');
@@ -43,20 +45,24 @@ describe('navigation', () => {
 
       cy.navGroup('Kvittering').should('be.disabled');
       cy.navGroup('Kvittering').should('not.have.attr', 'aria-current');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
 
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup(/^Informasjon/).should('have.attr', 'aria-expanded', 'true');
       cy.navGroup(/^Informasjon/).should('have.attr', 'aria-current', 'step');
       cy.navGroup(/^Informasjon/, 'Generell info').should('not.have.attr', 'aria-current');
       cy.navGroup(/^Informasjon/, 'Litt mer info').should('have.attr', 'aria-current', 'page');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
 
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup(/^Informasjon/).should('have.attr', 'aria-expanded', 'false');
       cy.navGroup(/^Informasjon/).should('not.have.attr', 'aria-current');
 
@@ -67,68 +73,81 @@ describe('navigation', () => {
       cy.navGroup('Utfylling', 'Etternavn').find(ICON_COMPLETE).should('not.exist');
       cy.navGroup('Utfylling', 'Alder').find(ICON_COMPLETE).should('not.exist');
       cy.navGroup('Utfylling', 'Alder').find(ICON_ERROR).should('not.exist');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
 
       cy.findByRole('textbox', { name: /Fornavn/ }).type('Donald');
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
       cy.findByRole('textbox', { name: /Etternavn/ }).type('Duck');
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling').should('have.attr', 'aria-expanded', 'true');
       cy.navGroup('Utfylling').should('have.attr', 'aria-current', 'step');
       cy.navGroup('Utfylling', 'Fornavn').find(ICON_COMPLETE).should('be.visible');
       cy.navGroup('Utfylling', 'Etternavn').find(ICON_COMPLETE).should('be.visible');
       cy.navGroup('Utfylling', 'Alder').should('have.attr', 'aria-current', 'page');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
 
       cy.findByRole('textbox', { name: /Alder/ }).type('123');
       cy.get(appFrontend.errorReport).should('be.visible');
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling', 'Alder').find(ICON_COMPLETE).should('not.exist');
       cy.navGroup('Utfylling', 'Alder').find(ICON_ERROR).should('not.exist');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
 
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling', 'Fødselsdag').should('have.attr', 'aria-current', 'page');
       cy.navGroup('Utfylling', 'Alder').find(ICON_COMPLETE).should('not.exist');
       cy.navGroup('Utfylling', 'Alder').find(ICON_ERROR).should('be.visible');
       cy.readFile('test/percy.css').then((percyCSS) => {
         cy.testWcag();
-        cy.percySnapshot(`navigation:page-states (${device})`, { percyCSS, widths: [width] });
+        if (device === 'mobile') {
+          cy.percySnapshot(`navigation:page-states (${device})`, { percyCSS, widths: [width] });
+        }
       });
-      cy.gotoNavGroup(/^Informasjon/, 'Generell info');
+      cy.gotoNavGroup(/^Informasjon/, device, 'Generell info');
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup(/^Informasjon/).should('have.attr', 'aria-expanded', 'true');
       cy.navGroup(/^Informasjon/).should('have.attr', 'aria-current', 'step');
       cy.navGroup(/^Informasjon/, 'Generell info').should('have.attr', 'aria-current', 'page');
       cy.navGroup('Utfylling').should('have.attr', 'aria-expanded', 'false');
       cy.navGroup('Utfylling').should('not.have.attr', 'aria-current');
       cy.navGroup('Utfylling').find(ICON_ERROR).should('be.visible');
-      cy.gotoNavGroup('Utfylling', 'Alder');
+      cy.gotoNavGroup('Utfylling', device, 'Alder');
 
       cy.findByRole('textbox', { name: /Alder/ }).clear();
       cy.findByRole('textbox', { name: /Alder/ }).type('42');
       cy.get(appFrontend.errorReport).should('not.exist');
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling', 'Kjøretøy').find(ICON_COMPLETE).should('not.exist');
       cy.navGroup('Utfylling', 'Kjøretøy').find(ICON_ERROR).should('not.exist');
-      cy.gotoNavGroup('Utfylling', 'Kjøretøy');
+      cy.gotoNavGroup('Utfylling', device, 'Kjøretøy');
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling', 'Alder').find(ICON_COMPLETE).should('be.visible');
       cy.navGroup('Utfylling', 'Alder').find(ICON_ERROR).should('not.exist');
-      cy.gotoNavGroup('Utfylling', 'Fødselsdag');
+      cy.gotoNavGroup('Utfylling', device, 'Fødselsdag');
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling', 'Kjøretøy').find(ICON_COMPLETE).should('not.exist');
       cy.navGroup('Utfylling', 'Kjøretøy').find(ICON_ERROR).should('not.exist');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
 
       cy.findByRole('textbox', { name: /Fødselsdag/ }).type('09061934');
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
@@ -143,7 +162,8 @@ describe('navigation', () => {
       cy.waitForLoad();
       cy.findByRole('textbox', { name: /Registreringsnummer/ }).should('be.visible');
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Registreringsnummer').should('have.attr', 'aria-current', 'page');
       cy.navGroup('Registreringsnummer').should('not.have.attr', 'aria-expanded');
       cy.navGroup('Informasjon').should('have.attr', 'aria-expanded', 'false');
@@ -153,7 +173,8 @@ describe('navigation', () => {
       cy.navGroup('Informasjon', 'Årsmodell').should('not.have.attr', 'aria-current');
       cy.navGroup('Bekreftelse').should('not.exist');
       cy.navGroup('Kvittering').should('not.exist');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
 
       cy.findByRole('button', { name: /Kjøretøy$/ }).clickAndGone();
       cy.waitForLoad();
@@ -162,26 +183,31 @@ describe('navigation', () => {
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling').should('have.attr', 'aria-expanded', 'false');
       cy.navGroup('Utfylling').should('not.have.attr', 'aria-current');
       cy.navGroup('Utfylling').find(ICON_COMPLETE).should('be.visible');
       cy.openNavGroup('Innsending');
       cy.navGroup('Innsending', 'Tilbakemelding').should('be.visible');
       cy.navGroup('Innsending', 'Oppsummering').should('be.visible');
-      cy.gotoNavGroup('Utfylling', 'Ekstra');
+      cy.gotoNavGroup('Utfylling', device, 'Ekstra');
 
       cy.findByRole('checkbox', { name: 'Skjul tilbakemelding' }).dsCheck();
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.openNavGroup('Innsending');
       cy.navGroup('Innsending', 'Tilbakemelding').should('not.exist');
       cy.navGroup('Innsending', 'Oppsummering').should('be.visible');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
       cy.findByRole('checkbox', { name: 'Skjul oppsummering' }).dsCheck();
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Innsending').should('not.exist');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
 
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
       cy.findByRole('heading', { name: 'Viktig informasjon' }).should('be.visible');
@@ -194,14 +220,16 @@ describe('navigation', () => {
       cy.findByRole('button', { name: 'Send inn' }).clickAndGone();
       cy.findByRole('heading', { name: 'Se over svarene dine før du sender inn' }).should('be.visible');
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Personopplysninger').should('be.disabled');
       cy.navGroup('Personopplysninger').should('not.have.attr', 'aria-current');
       cy.navGroup('Bekreftelse').should('be.disabled');
       cy.navGroup('Bekreftelse').should('have.attr', 'aria-current', 'step');
       cy.navGroup('Kvittering').should('be.disabled');
       cy.navGroup('Kvittering').should('not.have.attr', 'aria-current');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
 
       cy.findByRole('button', { name: 'Send inn' }).clickAndGone();
 
@@ -214,13 +242,15 @@ describe('navigation', () => {
   ['desktop', 'tablet', 'mobile'].forEach((device: keyof typeof viewportSizes) =>
     it(`navigation with subform on ${device}`, () => {
       const { width, height } = viewportSizes[device];
-      const isUsingDialog = device === 'mobile' || device === 'tablet';
+      const isUsingMobile = device === 'mobile';
+      const isUsingTablet = device === 'tablet';
       cy.viewport(width, height);
       cy.startAppInstance(appFrontend.apps.navigationTest);
       cy.waitForLoad();
 
-      isUsingDialog && cy.showNavGroups();
-      cy.gotoNavGroup('Utfylling', 'Fornavn');
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
+      cy.gotoNavGroup('Utfylling', device, 'Fornavn');
       cy.findByRole('textbox', { name: /Fornavn/ }).type('Skrue');
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
       cy.findByRole('textbox', { name: /Etternavn/ }).type('McDuck');
@@ -237,13 +267,15 @@ describe('navigation', () => {
         .type('skrue.mcduck@digdir.no');
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling', 'Fornavn').find(ICON_COMPLETE).should('be.visible');
       cy.navGroup('Utfylling', 'Etternavn').find(ICON_COMPLETE).should('be.visible');
       cy.navGroup('Utfylling', 'Alder').find(ICON_COMPLETE).should('be.visible');
       cy.navGroup('Utfylling', 'Fødselsdag').find(ICON_COMPLETE).should('be.visible');
       cy.navGroup('Utfylling', 'E-post').find(ICON_COMPLETE).should('be.visible');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
 
       cy.findByRole('button', { name: 'Legg til bil' }).clickAndGone();
       cy.waitForLoad();
@@ -253,15 +285,17 @@ describe('navigation', () => {
       cy.findByRole('button', { name: 'Neste' }).clickAndGone();
       cy.findByRole('textbox', { name: /Årsmodell/ }).type('1998');
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Registreringsnummer').find(ICON_COMPLETE).should('be.visible');
-      cy.gotoNavGroup('Registreringsnummer');
-      isUsingDialog && cy.showNavGroups();
+      cy.gotoNavGroup('Registreringsnummer', device);
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Informasjon').find(ICON_COMPLETE).should('be.visible');
       cy.openNavGroup('Informasjon');
       cy.navGroup('Informasjon', 'Merke').find(ICON_COMPLETE).should('be.visible');
       cy.navGroup('Informasjon', 'Årsmodell').find(ICON_COMPLETE).should('be.visible');
-      cy.gotoNavGroup('Informasjon', 'Årsmodell');
+      cy.gotoNavGroup('Informasjon', device, 'Årsmodell');
       cy.findByRole('button', { name: /Ferdig/ }).clickAndGone();
       cy.waitForLoad();
 
@@ -291,7 +325,8 @@ describe('navigation', () => {
           cy.get('td').eq(2).should('have.text', '2010');
         });
 
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.openNavGroup('Utfylling', 'Kjøretøy', /Biler/);
       cy.navGroup('Utfylling', 'Kjøretøy', /Biler/)
         .parent()
@@ -300,8 +335,9 @@ describe('navigation', () => {
           cy.findByRole('button', { name: 'En fet Lamborghini fra 2010', container }).should('be.visible');
         });
 
-      cy.gotoNavGroup(/Informasjon/, 'Generell info');
-      isUsingDialog && cy.showNavGroups();
+      cy.gotoNavGroup(/Informasjon/, device, 'Generell info');
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.openNavGroup('Utfylling', 'Kjøretøy', /Biler/);
 
       cy.readFile('test/percy.css').then((percyCSS) => {
@@ -317,10 +353,12 @@ describe('navigation', () => {
       cy.waitForLoad();
       cy.findByRole('textbox', { name: /Registreringsnummer/ }).should('have.value', 'XY98765');
       cy.findByRole('button', { name: /Kjøretøy$/ }).clickAndGone();
+      cy.waitForLoad();
       cy.url().should('not.include', '?focusComponentId=subform&exitSubform=true');
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling', 'Kjøretøy').should('have.attr', 'aria-current', 'page');
-      cy.gotoNavGroup('Innsending', 'Oppsummering');
+      cy.gotoNavGroup('Innsending', device, 'Oppsummering');
 
       cy.findByRole('heading', { name: 'En fet Toyota fra 1998' }).should('be.visible');
       cy.findByRole('heading', { name: 'En fet Lamborghini fra 2010' }).should('be.visible');
@@ -350,9 +388,11 @@ describe('navigation', () => {
       cy.findByTestId('summary-Summary-subform')
         .then((container) => cy.findByRole('button', { name: /Endre/, container }))
         .clickAndGone();
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling', 'Kjøretøy').should('have.attr', 'aria-current', 'page');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
       cy.findByRole('button', { name: 'Tilbake til oppsummering' }).clickAndGone();
 
       cy.get('#subform-subform-table tbody tr')
@@ -363,10 +403,13 @@ describe('navigation', () => {
       cy.waitForLoad();
       cy.findByRole('textbox', { name: /Registreringsnummer/ }).should('have.value', 'AB12345');
       cy.findByRole('button', { name: /Kjøretøy$/ }).clickAndGone();
+      cy.waitForLoad();
       cy.url().should('not.include', '?focusComponentId=subform&exitSubform=true');
-      isUsingDialog && cy.showNavGroups();
+      isUsingMobile && cy.showNavGroupsMobile();
+      isUsingTablet && cy.showNavGroupsTablet();
       cy.navGroup('Utfylling', 'Kjøretøy').should('have.attr', 'aria-current', 'page');
-      isUsingDialog && cy.hideNavGroups();
+      isUsingMobile && cy.hideNavGroupsMobile();
+      isUsingTablet && cy.hideNavGroupsTablet();
       cy.findByRole('button', { name: 'Tilbake til oppsummering' }).clickAndGone();
 
       cy.findByRole('button', { name: 'Send inn' }).clickAndGone();
@@ -379,7 +422,7 @@ describe('navigation', () => {
   it('navigation processing state should not stay pending if a useWaitForState unmounts before resolving', () => {
     cy.startAppInstance(appFrontend.apps.navigationTest);
     cy.waitForLoad();
-    cy.gotoNavGroup('Utfylling', 'Fødselsdag');
+    cy.gotoNavGroup('Utfylling', 'desktop', 'Fødselsdag');
     // Typing invalid data into the date-picker and immediately clicking next
     // causes us to first wait for saving, then when the validation fails
     // the error report causes the next-button to unmount before
diff --git a/test/e2e/integration/payment-test/payment.ts b/test/e2e/integration/payment-test/payment.ts
index ee611ed294..68dc3740e4 100644
--- a/test/e2e/integration/payment-test/payment.ts
+++ b/test/e2e/integration/payment-test/payment.ts
@@ -67,7 +67,7 @@ describe('Payment', () => {
         },
       ).as('paymentInfoRequest');
       cy.wait('@paymentInfoRequest').then((_) => {
-        cy.get('div.fds-alert--warning')
+        cy.get('div.ds-alert')
           .should('exist')
           .and('be.visible')
           .within(() => {
diff --git a/test/e2e/integration/signering-brukerstyrt/signing.ts b/test/e2e/integration/signering-brukerstyrt/signing.ts
index 24e5cadb89..e4050a8eef 100644
--- a/test/e2e/integration/signering-brukerstyrt/signing.ts
+++ b/test/e2e/integration/signering-brukerstyrt/signing.ts
@@ -107,7 +107,7 @@ describe('Signing', () => {
 
       // Signing step
       cy.findByRole('table', {
-        name: /personer som skal signere hjelp personer som skal signere beskrivelse/i,
+        name: /personer som skal signere personer som skal signere beskrivelse/i,
       }).within(() => {
         cy.findByRole('row', {
           name: new RegExp(`${sivilisertAvansertIsbjoernSA.name} (venter på signering|varsling mislyktes)`, 'i'),
@@ -140,7 +140,7 @@ describe('Signing', () => {
       cy.findByRole('button', { name: 'Signer' }).click();
 
       cy.findByRole('table', {
-        name: /personer som skal signere hjelp personer som skal signere beskrivelse/i,
+        name: /personer som skal signere personer som skal signere beskrivelse/i,
       }).within(() => {
         cy.findByRole('row', {
           name: new RegExp(
diff --git a/test/e2e/integration/stateless-app/stateless.ts b/test/e2e/integration/stateless-app/stateless.ts
index 9ab33aa12f..b93bbd5ce5 100644
--- a/test/e2e/integration/stateless-app/stateless.ts
+++ b/test/e2e/integration/stateless-app/stateless.ts
@@ -37,8 +37,8 @@ describe('Stateless', () => {
 
   it('Logout from appfrontend', () => {
     cy.findByRole('button', { name: 'Profil ikon knapp' }).click();
-    cy.findByRole('dialog').should('be.visible');
-    cy.findByRole('menuitem', { name: 'Logg ut' }).should('be.visible');
+    cy.get('div[data-testid="app-header-menu"]').should('be.visible');
+    cy.findByRole('link', { name: 'Logg ut' }).should('be.visible');
   });
 
   it('is possible to start app instance from stateless app', () => {
diff --git a/test/e2e/integration/subform-test/subform.ts b/test/e2e/integration/subform-test/subform.ts
index b108eff0c0..94eb5dab49 100644
--- a/test/e2e/integration/subform-test/subform.ts
+++ b/test/e2e/integration/subform-test/subform.ts
@@ -20,8 +20,7 @@ describe('Subform test', () => {
     cy.get('#Input-Name').should('be.visible').type(name);
 
     // Test process next when required subform is missing
-    cy.get('[data-testid="NavigationButtons"] button.fds-btn--primary').contains('Neste').scrollIntoView();
-    cy.get('[data-testid="NavigationButtons"] button.fds-btn--primary').should('be.visible').click();
+    cy.findByRole('button', { name: /Neste/i }).click();
     cy.get('[data-testid="ErrorReport"]').should('be.visible');
 
     // Navigate to the subform page
@@ -107,7 +106,7 @@ describe('Subform test', () => {
     cy.get('#subform-subform-mopeder-table tbody tr').should('have.length', 2);
     cy.get('#subform-subform-mopeder-table tbody tr').eq(1).findByText('Slett').clickAndGone();
     cy.get('#subform-subform-mopeder-table tbody tr').should('have.length', 1);
-    cy.get('[data-testid="NavigationButtons"] button.fds-btn--primary').clickAndGone();
+    cy.findByRole('button', { name: /Neste/i }).clickAndGone();
 
     // Verify summary fields
     cy.get('[data-testid=summary-single-value-component]').eq(0).should('contain.text', name);
@@ -127,7 +126,7 @@ describe('Subform test', () => {
 
     cy.findByRole('button', { name: 'Vis Summary2 for hele steget' }).clickAndGone();
 
-    cy.get('.fds-paragraph')
+    cy.get('.ds-paragraph')
       .eq(0)
       .should(
         'contain.text',
diff --git a/test/e2e/pageobjects/app-frontend.ts b/test/e2e/pageobjects/app-frontend.ts
index cfa1772fc3..dbedfe67bf 100644
--- a/test/e2e/pageobjects/app-frontend.ts
+++ b/test/e2e/pageobjects/app-frontend.ts
@@ -57,10 +57,12 @@ export class AppFrontend {
   public notExpandedWidth = '[data-expanded="false"]';
 
   public helpText = {
-    button: 'button[class^="fds-helptext"]',
-    alert: 'div[role="dialog"]',
+    button: 'button[class^="ds-helptext"]',
+    alert: 'div[data-testid="helptext"]',
   };
 
+  public deleteWarningPopover = 'div[data-testid="delete-warning-popover"]';
+
   public navMenu = '#navigation-menu';
   public navMenuButtons = '#navigation-menu li > button';
   public navMenuCurrent = '#navigation-menu li > button[aria-current=page]';
@@ -162,6 +164,7 @@ export class AppFrontend {
     reference: '#reference',
     reference2: '#reference2',
     dateOfEffect: '#dateOfEffect',
+    datePickerButton: /åpne datovelger/i,
     municipalityMetadata: '#kommuner-metadata',
     municipality: '#kommune',
     upload: '#fileUpload-changename',
@@ -191,11 +194,11 @@ export class AppFrontend {
   //group - task 3
   public group = {
     prefill: {
-      liten: 'input[name=liten]',
-      middels: 'input[name=middels]',
-      stor: 'input[name=stor]',
-      svaer: 'input[name=svaer]',
-      enorm: 'input[name=enorm]',
+      liten: /En liten endring/i,
+      middels: /En middels endring/i,
+      stor: /En stor endring/i,
+      svaer: /En svær endring/i,
+      enorm: /En enorm endring/i,
     },
     showGroupToContinue: '#showGroupToContinue',
     mainGroup: '#group-mainGroup',
diff --git a/test/e2e/pageobjects/datalist.ts b/test/e2e/pageobjects/datalist.ts
index abe3613db6..85ee269655 100644
--- a/test/e2e/pageobjects/datalist.ts
+++ b/test/e2e/pageobjects/datalist.ts
@@ -1,6 +1,6 @@
 export class Datalist {
   public listComponent = '#form-content-listComponent';
-  public selectComponent = '[data-testid^="paginationRowsPerPageDropdown"]';
+  public selectComponent = '#paginationRowsPerPageDropdown';
   public tableBody = '#form-content-listComponent table tbody';
   public navigateNextButton = '[data-testid=paginationNextButton]';
   public navigatePreviousButton = '[data-testid=paginationPreviousButton]';
diff --git a/test/e2e/support/apps/component-library/fillAddressAndVerify.ts b/test/e2e/support/apps/component-library/fillAddressAndVerify.ts
index c81d54e4e3..19193651aa 100644
--- a/test/e2e/support/apps/component-library/fillAddressAndVerify.ts
+++ b/test/e2e/support/apps/component-library/fillAddressAndVerify.ts
@@ -6,23 +6,20 @@ export const fillInAddressAndVerify = (address: string, co: string, zip: string,
   cy.get('#address_house_number_AddressPage-Address').type(houseNumber);
 
   // Verify Gateadresse (Street address)
-  cy.get('[data-testid="summary-single-value-component"]')
-    .eq(0)
-    .find('span.fds-paragraph')
-    .should('have.text', address);
+  cy.get('[data-testid="summary-single-value-component"]').eq(0).find('span.ds-paragraph').should('have.text', address);
 
   // Verify C/O eller annan tilleggsadresse (C/O or additional address)
-  cy.get('[data-testid="summary-single-value-component"]').eq(1).find('span.fds-paragraph').should('have.text', co);
+  cy.get('[data-testid="summary-single-value-component"]').eq(1).find('span.ds-paragraph').should('have.text', co);
 
   // Verify Postnr (Postal code)
-  cy.get('[data-testid="summary-single-value-component"]').eq(2).find('span.fds-paragraph').should('have.text', zip);
+  cy.get('[data-testid="summary-single-value-component"]').eq(2).find('span.ds-paragraph').should('have.text', zip);
 
   // Verify Poststad (City)
-  cy.get('[data-testid="summary-single-value-component"]').eq(3).find('span.fds-paragraph').should('have.text', 'OSLO');
+  cy.get('[data-testid="summary-single-value-component"]').eq(3).find('span.ds-paragraph').should('have.text', 'OSLO');
 
   // Verify Bustadnummer (House number)
   cy.get('[data-testid="summary-single-value-component"]')
     .eq(4)
-    .find('span.fds-paragraph')
+    .find('span.ds-paragraph')
     .should('have.text', houseNumber);
 };
diff --git a/test/e2e/support/apps/component-library/groupCheckboxMultiSelectListAndVerify.ts b/test/e2e/support/apps/component-library/groupCheckboxMultiSelectListAndVerify.ts
index 87a293fd36..e09629510c 100644
--- a/test/e2e/support/apps/component-library/groupCheckboxMultiSelectListAndVerify.ts
+++ b/test/e2e/support/apps/component-library/groupCheckboxMultiSelectListAndVerify.ts
@@ -7,10 +7,11 @@ export const groupCheckboxMultiSelectListAndVerify = (checkboxText = '', multiSe
   cy.gotoNavPage('Flervalg');
   const multiselect = '#form-content-MultipleSelectPage-Checkboxes2';
   const repGroup = '[data-componentid=MultipleSelectPage-RepeatingGroup]';
-  const multiselectList = 'div[role="listbox"]';
+  const multiselectList = 'u-datalist[role="listbox"]';
   cy.get(multiselect).click();
   cy.get(multiselectList).contains('span', multiSelectText).click();
   cy.get(multiselect).contains('span', multiSelectText).should('exist');
+  cy.findByRole('button', { name: new RegExp(`${multiSelectText}, Press to remove, 1 of 1`) }).should('exist');
   cy.get(repGroup).click({ force: true });
 
   cy.gotoNavPage('Liste (tabell)');
diff --git a/test/e2e/support/apps/component-library/inputAndVerify.ts b/test/e2e/support/apps/component-library/inputAndVerify.ts
index fd52474c42..7fd29c1a44 100644
--- a/test/e2e/support/apps/component-library/inputAndVerify.ts
+++ b/test/e2e/support/apps/component-library/inputAndVerify.ts
@@ -1,5 +1,5 @@
 export const fillInInputAndVerify = (text: string) => {
   cy.gotoNavPage('Kort svar');
   cy.get('#InputPage-Input').type(text);
-  cy.get('[data-testid="summary-single-value-component"]').eq(0).find('span.fds-paragraph').should('have.text', text);
+  cy.get('[data-testid="summary-single-value-component"]').eq(0).find('span.ds-paragraph').should('have.text', text);
 };
diff --git a/test/e2e/support/custom.ts b/test/e2e/support/custom.ts
index 1d0f2d7a0b..091d47f28c 100644
--- a/test/e2e/support/custom.ts
+++ b/test/e2e/support/custom.ts
@@ -75,7 +75,7 @@ Cypress.Commands.add('dsSelect', (selector, value, debounce = true) => {
   // It is tempting to just use findByRole('option', { name: value }) here, but that's flakier than using findByText()
   // as it never retries if the element re-renders. More information here:
   // https://github.com/testing-library/cypress-testing-library/issues/205#issuecomment-974688283
-  cy.get('[class*="fds-combobox__option"]').findByText(value).click();
+  cy.get('[class*="ds-combobox__option"]').findByText(value).click();
   if (debounce) {
     cy.get('body').click();
   }
@@ -180,9 +180,15 @@ const knownWcagViolations: KnownViolation[] = [
   {
     spec: 'frontend-test/hide-row-in-group.ts',
     test: 'should be possible to hide rows when "Endre fra" is greater or equals to [...]',
-    id: 'heading-order',
+    id: 'page-has-heading-one',
     nodeLength: 1,
   },
+  {
+    spec: 'frontend-test/hide-row-in-group.ts',
+    test: 'should be possible to hide rows when "Endre fra" is greater or equals to [...]',
+    id: 'aria-hidden-focus', // floating-ui marks everything else as aria-hidden, when dropdown from DS is open, swap to suggestion component when it is no longer experimental
+    nodeLength: 18,
+  },
   {
     spec: 'frontend-test/likert.ts',
     test: 'Should show validation message for required likert',
@@ -438,9 +444,9 @@ Cypress.Commands.add(
     cy.get(appFrontend.group.mainGroup).find(appFrontend.group.editContainer).find(appFrontend.group.next).click();
 
     if (openByDefault || typeof openByDefault === 'undefined') {
-      cy.get(appFrontend.group.addNewItemSubGroup).should('not.exist');
+      cy.findByRole('button', { name: 'Legg til ny' }).should('not.exist');
     } else {
-      cy.get(appFrontend.group.addNewItemSubGroup).click();
+      cy.findByRole('button', { name: 'Legg til ny' }).click({ force: true });
     }
 
     cy.get(appFrontend.group.comments).type(comment);
@@ -872,15 +878,28 @@ Cypress.Commands.add('getCurrentViewportSize', function () {
   }));
 });
 
-Cypress.Commands.add('showNavGroups', () => {
-  cy.findByRole('button', { name: 'Skjemasider' }).click();
-  cy.findByRole('dialog', { name: 'Skjemasider' }).should('be.visible');
-  cy.findByRole('dialog', { name: 'Skjemasider' }).should('have.css', 'opacity', '1');
+Cypress.Commands.add('showNavGroupsTablet', () => {
+  cy.findByRole('button', { name: /Skjemasider/i }).click();
+  cy.get('div[data-testid="page-navigation-dialog"]').should('be.visible');
+  cy.get('div[data-testid="page-navigation-dialog"]').should('have.css', 'opacity', '1');
 });
 
-Cypress.Commands.add('hideNavGroups', () => {
-  cy.findByRole('dialog', { name: 'Skjemasider' }).within(() => cy.findByRole('button', { name: 'Lukk' }).click());
-  cy.findByRole('dialog', { name: 'Skjemasider' }).should('not.exist');
+Cypress.Commands.add('showNavGroupsMobile', () => {
+  cy.findByRole('button', { name: /Skjemasider/i }).click();
+  cy.get('dialog[data-testid="page-navigation-dialog"]').should('be.visible');
+  cy.get('dialog[data-testid="page-navigation-dialog"]').should('have.css', 'opacity', '1');
+});
+
+Cypress.Commands.add('hideNavGroupsTablet', () => {
+  cy.get('div[data-testid="page-navigation-dialog"]').within(() => cy.findByRole('button', { name: 'Lukk' }).click());
+  cy.get('div[data-testid="page-navigation-dialog"]').should('not.be.visible');
+});
+
+Cypress.Commands.add('hideNavGroupsMobile', () => {
+  cy.get('dialog[data-testid="page-navigation-dialog"]').within(() =>
+    cy.findByRole('button', { name: /Lukk dialogvindu/i }).click(),
+  );
+  cy.get('dialog[data-testid="page-navigation-dialog"]').should('not.be.visible');
 });
 
 Cypress.Commands.add('navGroup', (groupName, pageName, subformName) => {
@@ -907,9 +926,11 @@ Cypress.Commands.add('navGroup', (groupName, pageName, subformName) => {
   }
 });
 
-Cypress.Commands.add('gotoNavGroup', (groupName, pageName) => {
+Cypress.Commands.add('gotoNavGroup', (groupName, device, pageName) => {
   cy.get('body').then((body) => {
     const isUsingDialog = !!body.find('[data-testid=page-navigation-trigger]').length;
+    const isMobile = device === 'mobile';
+    const isTablet = device === 'tablet';
     if (pageName) {
       cy.navGroup(groupName).then((group) => {
         if (group[0].getAttribute('aria-expanded') === 'false') {
@@ -918,16 +939,20 @@ Cypress.Commands.add('gotoNavGroup', (groupName, pageName) => {
       });
       cy.navGroup(groupName).should('have.attr', 'aria-expanded', 'true');
       cy.navGroup(groupName, pageName).click();
-      if (isUsingDialog) {
-        cy.findByRole('dialog', { name: 'Skjemasider' }).should('not.exist');
+      if (isUsingDialog && isMobile) {
+        cy.findByRole('dialog', { name: /Skjemasider/i }).should('not.exist');
+      } else if (isUsingDialog && isTablet) {
+        cy.get('div[data-testid="page-navigation-dialog"]').should('not.be.visible');
       } else {
         cy.navGroup(groupName, pageName).should('have.attr', 'aria-current', 'page');
       }
     } else {
       cy.navGroup(groupName).should('not.have.attr', 'aria-expanded');
       cy.navGroup(groupName).click();
-      if (isUsingDialog) {
-        cy.findByRole('dialog', { name: 'Skjemasider' }).should('not.exist');
+      if (isUsingDialog && isMobile) {
+        cy.findByRole('dialog', { name: /Skjemasider/i }).should('not.exist');
+      } else if (isUsingDialog && isTablet) {
+        cy.get('div[data-testid="page-navigation-dialog"]').should('not.be.visible');
       } else {
         cy.navGroup(groupName).should('have.attr', 'aria-current', 'page');
       }
diff --git a/test/e2e/support/formFiller.ts b/test/e2e/support/formFiller.ts
index d104ebb626..723a049eef 100644
--- a/test/e2e/support/formFiller.ts
+++ b/test/e2e/support/formFiller.ts
@@ -49,7 +49,7 @@ function fillOutChangeName() {
       .check();
     cy.get(appFrontend.changeOfName.reasonRelationship).click();
     cy.get(appFrontend.changeOfName.reasonRelationship).type('test');
-    cy.get(`${appFrontend.changeOfName.dateOfEffect}-button`).click();
+    cy.findByRole('button', { name: appFrontend.changeOfName.datePickerButton }).click();
     cy.get('button[aria-label*="Today"]').click();
     cy.get(appFrontend.changeOfName.upload).selectFile('test/e2e/fixtures/test.pdf', { force: true });
 
@@ -126,7 +126,7 @@ function fillOutLikert() {
 
 function fillOutList() {
   cy.get(dataListPage.tableBody).contains('Caroline').closest('tr').click();
-  cy.findByRole('button', { name: 'Neste' }).click();
+  cy.findAllByRole('button', { name: 'Neste' }).last().click();
 }
 
 const functionMap: { [key in FillableFrontendTasks]: () => void } = {
diff --git a/test/e2e/support/global.ts b/test/e2e/support/global.ts
index 14753f7595..d6750ed404 100644
--- a/test/e2e/support/global.ts
+++ b/test/e2e/support/global.ts
@@ -306,8 +306,10 @@ declare global {
 
       getCurrentViewportSize(): Chainable<Size>;
 
-      showNavGroups(): Chainable<null>;
-      hideNavGroups(): Chainable<null>;
+      showNavGroupsTablet(): Chainable<null>;
+      hideNavGroupsTablet(): Chainable<null>;
+      showNavGroupsMobile(): Chainable<null>;
+      hideNavGroupsMobile(): Chainable<null>;
 
       navGroup(
         groupName: string | RegExp,
@@ -315,7 +317,11 @@ declare global {
         subformName?: string | RegExp,
       ): Chainable<JQuery<Element>>;
 
-      gotoNavGroup(groupName: string | RegExp, pageName?: string | RegExp): Chainable<null>;
+      gotoNavGroup(
+        groupName: string | RegExp,
+        device: 'mobile' | 'tablet' | 'desktop',
+        pageName?: string | RegExp,
+      ): Chainable<null>;
 
       openNavGroup(
         groupName: string | RegExp,
diff --git a/webpack.config.production.js b/webpack.config.production.js
index 4c2552355c..96ed7d0f3a 100644
--- a/webpack.config.production.js
+++ b/webpack.config.production.js
@@ -1,4 +1,4 @@
-const TerserPlugin = require('terser-webpack-plugin');
+const { EsbuildPlugin } = require('esbuild-loader');
 
 const common = require('./webpack.common');
 
@@ -11,19 +11,22 @@ module.exports = {
   },
   optimization: {
     minimize: true,
-    minimizer: [new TerserPlugin()],
+        minimizer: [
+      new EsbuildPlugin({
+        target: 'es2020',
+        css: true,
+      }),
+    ],
   },
   module: {
     rules: [
       ...common.module.rules,
       {
-        test: /\.tsx?/,
-        use: [
-          {
-            loader: 'ts-loader',
-            options: { transpileOnly: true },
-          },
-        ],
+        test: /\.tsx?$/,
+        loader: 'esbuild-loader',
+        options: {
+          target: 'es2020',
+        },
       },
     ],
   },
diff --git a/yarn.lock b/yarn.lock
index 749b9e9d41..645833ab78 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19,13 +19,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@altinn/figma-design-tokens@npm:^6.0.1":
-  version: 6.0.1
-  resolution: "@altinn/figma-design-tokens@npm:6.0.1"
-  checksum: 10c0/9db16449a6f6d65a6302339ddd57858ed98cdabff4e853fe5283aca56ac2793e43a9ba5754dfbdd22be203551f91d075cc7fe7bc31e5100730db7a3e72c2bcba
-  languageName: node
-  linkType: hard
-
 "@ampproject/remapping@npm:^2.2.0":
   version: 2.3.0
   resolution: "@ampproject/remapping@npm:2.3.0"
@@ -1671,48 +1664,37 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@digdir/design-system-react@npm:0.54.0":
-  version: 0.54.0
-  resolution: "@digdir/design-system-react@npm:0.54.0"
-  dependencies:
-    "@altinn/figma-design-tokens": "npm:^6.0.1"
-    "@digdir/designsystemet-theme": "npm:0.15.3"
-    "@floating-ui/react": "npm:0.26.4"
-    "@navikt/aksel-icons": "npm:^5.12.2"
-    react-number-format: "npm:5.3.1"
-  peerDependencies:
-    react: ">=18.3.1"
-    react-dom: ">=18.3.1"
-  checksum: 10c0/4e528ed980d764fbfab266c1025d0bb2f7921dd14cbea52ced543f31d0b57e3e8adcf6c2d635ade347f3c7fb1edc7d204f81aa5033e7f3c98c30ddc45eabf0e6
-  languageName: node
-  linkType: hard
-
-"@digdir/designsystemet-css@npm:0.10.0":
-  version: 0.10.0
-  resolution: "@digdir/designsystemet-css@npm:0.10.0"
-  checksum: 10c0/695f3bedf73aa440d832bccdf710a7ebb1a0fc05bfce2b4f9a70fb3e8abfae67f3792cfaaaddf1d87f5a2e7cd8edbf2e6f0d3fd020878b731dee5e3f61044935
+"@digdir/designsystemet-css@npm:1.0.6":
+  version: 1.0.6
+  resolution: "@digdir/designsystemet-css@npm:1.0.6"
+  checksum: 10c0/aa380bac76075ca3869b303d954e1651bf421837f8aad6c5800840bec0269c3edd9037e3fac79ec2abda8605c1fbd08a21ef1af389bbcdfeb66da80f46bf342b
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-react@npm:0.63.1":
-  version: 0.63.1
-  resolution: "@digdir/designsystemet-react@npm:0.63.1"
-  dependencies:
-    "@floating-ui/react": "npm:0.26.12"
-    "@navikt/aksel-icons": "npm:^5.12.2"
-    "@radix-ui/react-slot": "npm:^1.0.2"
-    "@tanstack/react-virtual": "npm:^3.2.0"
+"@digdir/designsystemet-react@npm:1.0.6":
+  version: 1.0.6
+  resolution: "@digdir/designsystemet-react@npm:1.0.6"
+  dependencies:
+    "@floating-ui/dom": "npm:^1.7.0"
+    "@floating-ui/react": "npm:0.26.23"
+    "@navikt/aksel-icons": "npm:^7.21.0"
+    "@radix-ui/react-slot": "npm:^1.2.0"
+    "@tanstack/react-virtual": "npm:^3.13.6"
+    "@u-elements/u-datalist": "npm:^0.1.5"
+    "@u-elements/u-details": "npm:^0.1.1"
+    "@u-elements/u-tags": "npm:^0.1.4"
+    clsx: "npm:^2.1.1"
   peerDependencies:
-    react: ">=18.3.1"
-    react-dom: ">=18.3.1"
-  checksum: 10c0/20ad11de9fb0203ff10cffd0966b56a39503a7863db1aa69b772e38b47c3fd98828a60310a4ce8c1d4163d7edc9704341222877286e6a7ad65723b7909e2ac5b
+    react: ">=18.3.1 || ^19.0.0"
+    react-dom: ">=18.3.1 || ^19.0.0"
+  checksum: 10c0/c17653aa13d7a1b15c07203e23756cfe6449d9957c11ce905bf9f800e5b05536365b3a886a2c23b996469b1d873d844402da808077e643d7b54b52cc14641a81
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-theme@npm:0.15.3":
-  version: 0.15.3
-  resolution: "@digdir/designsystemet-theme@npm:0.15.3"
-  checksum: 10c0/1aab6ad54c3442aaf0fab9b5585e640c596a6d3a45cb8bbb3ca959f15d592321e7c9db01bca0bb778aaeb04fb04901e56b2b01bbd6aa0b8a9b2b6ad54d8a6e72
+"@digdir/designsystemet-theme@npm:1.0.6":
+  version: 1.0.6
+  resolution: "@digdir/designsystemet-theme@npm:1.0.6"
+  checksum: 10c0/dba369ec98921f092bb0122a4bf032dc3a1dd1e01f2cc1d5c63193592419aa726e22b5653e8d3fd95d5c66ce176926f27a6e00daa3b6cf2576d45c27489d98fd
   languageName: node
   linkType: hard
 
@@ -2021,7 +2003,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/dom@npm:^1.0.0":
+"@floating-ui/dom@npm:^1.0.0, @floating-ui/dom@npm:^1.7.0":
   version: 1.7.0
   resolution: "@floating-ui/dom@npm:1.7.0"
   dependencies:
@@ -2031,7 +2013,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/react-dom@npm:^2.0.0, @floating-ui/react-dom@npm:^2.0.3":
+"@floating-ui/react-dom@npm:^2.1.1":
   version: 2.1.2
   resolution: "@floating-ui/react-dom@npm:2.1.2"
   dependencies:
@@ -2043,42 +2025,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/react@npm:0.26.12":
-  version: 0.26.12
-  resolution: "@floating-ui/react@npm:0.26.12"
+"@floating-ui/react@npm:0.26.23":
+  version: 0.26.23
+  resolution: "@floating-ui/react@npm:0.26.23"
   dependencies:
-    "@floating-ui/react-dom": "npm:^2.0.0"
-    "@floating-ui/utils": "npm:^0.2.0"
+    "@floating-ui/react-dom": "npm:^2.1.1"
+    "@floating-ui/utils": "npm:^0.2.7"
     tabbable: "npm:^6.0.0"
   peerDependencies:
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 10c0/f47e133b9fe5dd404886c4e69e760dc0d6ab30774de82b5547cba83d0cd6e7a3bb4c221587e115a3c0c466ac344578c3db78b5808b5acd70ae5d43d587de9fd1
-  languageName: node
-  linkType: hard
-
-"@floating-ui/react@npm:0.26.4":
-  version: 0.26.4
-  resolution: "@floating-ui/react@npm:0.26.4"
-  dependencies:
-    "@floating-ui/react-dom": "npm:^2.0.3"
-    "@floating-ui/utils": "npm:^0.1.5"
-    tabbable: "npm:^6.0.1"
-  peerDependencies:
-    react: ">=16.8.0"
-    react-dom: ">=16.8.0"
-  checksum: 10c0/116e8d39cf1460b547ad763c66c1168e104fb9b1b6003f7c5f766bc58108dfb2e70f2a2f736f7e80537b996b52bc258982309cfaf90fce6f640261eb364ded94
-  languageName: node
-  linkType: hard
-
-"@floating-ui/utils@npm:^0.1.5":
-  version: 0.1.6
-  resolution: "@floating-ui/utils@npm:0.1.6"
-  checksum: 10c0/0a089db0e0526b89e83cb0a773a903517db5c9067cd473febfd8fa91a3a2ccbc3a835234796c1bb528def21dbb67be50e28d9c473cb58a6d90679d7e549b9c0c
+  checksum: 10c0/d339c3d760e83c8384a16c8a38fb47f7f855a3db4d19117fd54cccbf871a27b089887202074e9871ffc19ad769bed709ecdd69445a39d2ea9406c84814427f3b
   languageName: node
   linkType: hard
 
-"@floating-ui/utils@npm:^0.2.0, @floating-ui/utils@npm:^0.2.9":
+"@floating-ui/utils@npm:^0.2.7, @floating-ui/utils@npm:^0.2.9":
   version: 0.2.9
   resolution: "@floating-ui/utils@npm:0.2.9"
   checksum: 10c0/48bbed10f91cb7863a796cc0d0e917c78d11aeb89f98d03fc38d79e7eb792224a79f538ed8a2d5d5584511d4ca6354ef35f1712659fd569868e342df4398ad6f
@@ -2497,17 +2458,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@npm:^5.12.2":
-  version: 5.18.3
-  resolution: "@navikt/aksel-icons@npm:5.18.3"
-  checksum: 10c0/1a1bb143f0353fea6d383a4b1be2a9c34826b9e4b7f64c1decf85cf660db60fb9ed1e468e8423af6ebe8b0e399fc1621d8a9cab0ef9949a3582ae9adb916bc0d
-  languageName: node
-  linkType: hard
-
-"@navikt/aksel-icons@npm:^7.17.4":
-  version: 7.23.2
-  resolution: "@navikt/aksel-icons@npm:7.23.2"
-  checksum: 10c0/b985042693e56e0b33fdebaca0290cb05dc812616ada080ca96bd35ca57fb11193f236234e6c4f36378a00361c47baf6df2e1dba983dfd96ddf21d24059db715
+"@navikt/aksel-icons@npm:^7.17.4, @navikt/aksel-icons@npm:^7.21.0":
+  version: 7.22.0
+  resolution: "@navikt/aksel-icons@npm:7.22.0"
+  checksum: 10c0/a644ad2a3920729d7bbbfcd6a309fba7121063a78d1dc485efb3d385e6987ab68d3e61554dfcab6f026227d219a09ba473d500ea989e8bbb7752507964455540
   languageName: node
   linkType: hard
 
@@ -2986,9 +2940,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:^1.0.2":
-  version: 1.2.0
-  resolution: "@radix-ui/react-slot@npm:1.2.0"
+"@radix-ui/react-slot@npm:^1.2.0":
+  version: 1.2.3
+  resolution: "@radix-ui/react-slot@npm:1.2.3"
   dependencies:
     "@radix-ui/react-compose-refs": "npm:1.1.2"
   peerDependencies:
@@ -2997,7 +2951,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/f1455f36479e87a0a2254fc2e2b2aba6740d1fbcada949071210bf2a009a031ad508ac01b544bce96337bcca82f49531b46c71615141a5985aaa11ae69b967b1
+  checksum: 10c0/5913aa0d760f505905779515e4b1f0f71a422350f077cc8d26d1aafe53c97f177fec0e6d7fbbb50d8b5e498aa9df9f707ca75ae3801540c283b26b0136138eef
   languageName: node
   linkType: hard
 
@@ -3258,22 +3212,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/react-virtual@npm:^3.2.0":
-  version: 3.13.6
-  resolution: "@tanstack/react-virtual@npm:3.13.6"
+"@tanstack/react-virtual@npm:^3.13.6":
+  version: 3.13.9
+  resolution: "@tanstack/react-virtual@npm:3.13.9"
   dependencies:
-    "@tanstack/virtual-core": "npm:3.13.6"
+    "@tanstack/virtual-core": "npm:3.13.9"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  checksum: 10c0/3d2fdf024cb9189981cc015518a34a771a57cd698ca775022ad481431e6f26e596309f57d2238ef15f3b53b805879edaed6394e4cad1bb550ee92259e4d52633
+  checksum: 10c0/aa05fb24e30686516e74ccdec94a83d195615a4f29bc866a53ee6b0107e466c6d6e3e947b3fb0613b907b0f982d74b00367868cf6b1ac956562d0e7c24d6764b
   languageName: node
   linkType: hard
 
-"@tanstack/virtual-core@npm:3.13.6":
-  version: 3.13.6
-  resolution: "@tanstack/virtual-core@npm:3.13.6"
-  checksum: 10c0/9c40af4deccf0fadc5c371f4e659f1aff221db0ede9664ee7cf3642a2d05f6f1c9494605f3606f70d7c8948dc22e50c48519a8435d0e845f1b1f34c9353722c8
+"@tanstack/virtual-core@npm:3.13.9":
+  version: 3.13.9
+  resolution: "@tanstack/virtual-core@npm:3.13.9"
+  checksum: 10c0/6e9526a9d52f8ddc54af8a1dc7380814b10ab38d8a4265e362a5b69c3132097ace51496d4206fe8aa90e33129aaf1a177c93d7ed018b5564b78e057fc9cdb48d
   languageName: node
   linkType: hard
 
@@ -4179,6 +4133,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@u-elements/u-datalist@npm:^0.1.5":
+  version: 0.1.5
+  resolution: "@u-elements/u-datalist@npm:0.1.5"
+  checksum: 10c0/b3d45e57537ddf9c9decbb6b3bc6778839f37ffaeb61f8a535dc0f647cc8846385763bc4523de45877df64dcf30b1d7190dde0690eb6a850ef070e0b351fc4eb
+  languageName: node
+  linkType: hard
+
+"@u-elements/u-details@npm:^0.1.1":
+  version: 0.1.1
+  resolution: "@u-elements/u-details@npm:0.1.1"
+  checksum: 10c0/df382b61dc31f44d6b093193afe0e5ba795d27009158a71440e0a53cb47a7aa0c6ebba03ce44186a77e18c3cbdb7e8f4c312018a837f7e5ee41cf5bb1f349c2d
+  languageName: node
+  linkType: hard
+
+"@u-elements/u-tags@npm:^0.1.4":
+  version: 0.1.4
+  resolution: "@u-elements/u-tags@npm:0.1.4"
+  checksum: 10c0/36359c2031777a6cbfff8bdee6374a7557999a9c77a3cb22e7569f2052643f028789e9530c76980b3b396a131bc7d6431eec08f30afade214d7b8d833b8d208c
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/ast@npm:1.14.1, @webassemblyjs/ast@npm:^1.14.1":
   version: 1.14.1
   resolution: "@webassemblyjs/ast@npm:1.14.1"
@@ -4687,10 +4662,9 @@ __metadata:
     "@babel/runtime": "npm:7.27.6"
     "@babel/runtime-corejs3": "npm:7.27.6"
     "@date-fns/tz": "npm:1.2.0"
-    "@digdir/design-system-react": "npm:0.54.0"
-    "@digdir/designsystemet-css": "npm:0.10.0"
-    "@digdir/designsystemet-react": "npm:0.63.1"
-    "@digdir/designsystemet-theme": "npm:0.15.3"
+    "@digdir/designsystemet-css": "npm:1.0.6"
+    "@digdir/designsystemet-react": "npm:1.0.6"
+    "@digdir/designsystemet-theme": "npm:1.0.6"
     "@eslint/compat": "npm:1.3.0"
     "@faker-js/faker": "npm:9.8.0"
     "@navikt/aksel-icons": "npm:^7.17.4"
@@ -13253,7 +13227,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -13588,18 +13562,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-number-format@npm:5.3.1":
-  version: 5.3.1
-  resolution: "react-number-format@npm:5.3.1"
-  dependencies:
-    prop-types: "npm:^15.7.2"
-  peerDependencies:
-    react: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/9e37698ab3d8224fd6cf5a69845c0308720d04de8459757031de0304379cfd2c0c897834cc9f62869933c4702a97888ba51abeb6490b7282e237a4c19a5fab04
-  languageName: node
-  linkType: hard
-
 "react-number-format@npm:5.4.4":
   version: 5.4.4
   resolution: "react-number-format@npm:5.4.4"
@@ -15242,7 +15204,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tabbable@npm:^6.0.0, tabbable@npm:^6.0.1":
+"tabbable@npm:^6.0.0":
   version: 6.2.0
   resolution: "tabbable@npm:6.2.0"
   checksum: 10c0/ced8b38f05f2de62cd46836d77c2646c42b8c9713f5bd265daf0e78ff5ac73d3ba48a7ca45f348bafeef29b23da7187c72250742d37627883ef89cbd7fa76898
@@ -16876,9 +16838,9 @@ __metadata:
   linkType: hard
 
 "zod@npm:^3.23.8":
-  version: 3.25.67
-  resolution: "zod@npm:3.25.67"
-  checksum: 10c0/80a0cab3033272c4ab9312198081f0c4ea88e9673c059aa36dc32024906363729db54bdb78f3dc9d5529bd1601f74974d5a56c0a23e40c6f04a9270c9ff22336
+  version: 3.25.56
+  resolution: "zod@npm:3.25.56"
+  checksum: 10c0/3800f01d4b1df932b91354eb1e648f69cc7e5561549e6d2bf83827d930a5f33bbf92926099445f6fc1ebb64ca9c6513ef9ae5e5409cfef6325f354bcf6fc9a24
   languageName: node
   linkType: hard