diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 7d5251c334..f9c076ab7d 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -40,6 +40,7 @@
   - [ ] The original issue (or this PR itself) has been added to the Team Apps project and to the current sprint board
   - [ ] I don't have permissions to do that, please help me out
 - Labels
+
   - [ ] I have added a `kind/*` and `backport*` label to this PR for proper release notes grouping
   - [ ] I don't have permissions to add labels, please help me out
   <!---
diff --git a/package.json b/package.json
index f7dc0fda7a..372af50900 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.4",
+    "@digdir/designsystemet-react": "1.0.4",
+    "@digdir/designsystemet-theme": "1.0.4",
     "@navikt/aksel-icons": "^7.17.4",
     "@tanstack/react-query": "5.74.4",
     "ajv": "8.17.1",
diff --git a/src/app-components/Button/Button.tsx b/src/app-components/Button/Button.tsx
index 55965b5769..43a0a38728 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'
@@ -76,13 +76,13 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
       id={id}
       disabled={disabled || isLoading}
       variant={variant}
-      color={color}
-      size={size}
+      data-color={color}
+      data-size={size}
+      data-fullwidth={fullWidth}
       ref={ref}
       className={className}
       title={title}
       icon={icon}
-      fullWidth={fullWidth}
       onClick={onClick}
       style={expandedStyle}
       tabIndex={tabIndex}
@@ -101,9 +101,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..860a4fbfbf
--- /dev/null
+++ b/src/app-components/Card/Card.module.css
@@ -0,0 +1,4 @@
+.mediaCard {
+  padding: 0;
+  margin-bottom: -7px;
+}
diff --git a/src/app-components/Card/Card.tsx b/src/app-components/Card/Card.tsx
new file mode 100644
index 0000000000..d84d268c82
--- /dev/null
+++ b/src/app-components/Card/Card.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { Card, Heading, Paragraph } from '@digdir/designsystemet-react';
+
+import classes from 'src/app-components/Card/Card.module.css';
+import { Flex } from 'src/app-components/Flex/Flex';
+
+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;
+};
+
+export function AppCard({ title, description, footer, media, color, mediaPosition = 'top', children }: AppCardProps) {
+  return (
+    <Card color={color}>
+      {media && mediaPosition === 'top' && <Card.Block className={classes.mediaCard}>{media}</Card.Block>}
+      {(title || description) && (
+        <Card.Block>
+          {title && <Heading data-size='md'>{title}</Heading>}
+          {description && <Paragraph>{description}</Paragraph>}
+        </Card.Block>
+      )}
+      {children && (
+        <Card.Block>
+          <Flex
+            container
+            spacing={6}
+          >
+            {children}
+          </Flex>
+        </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..f109b98827 100644
--- a/src/app-components/Datepicker/Calendar.module.css
+++ b/src/app-components/Datepicker/Calendar.module.css
@@ -1,8 +1,5 @@
-.calendarToggleButton {
-  margin: 1px;
-  min-height: 36px;
-  min-width: 36px;
-  border-radius: 2px;
+.datepickerLabelWrapper span[id*='description-'] {
+  margin-bottom: 0;
 }
 
 .calendarDay {
@@ -32,10 +29,10 @@
 }
 
 .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);
@@ -45,19 +42,28 @@
 }
 
 .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-1);
   cursor: not-allowed;
 }
 .disabledDate button {
   text-decoration: line-through;
 }
+.focusedDate {
+  border-radius: var(--ds-border-radius-md);
+  background: var(--ds-blue-2);
+}
+.today {
+  border-radius: var(--ds-border-radius-md);
+  border: var(--ds-border-width-default) solid var(--ds-color-accent-border-subtle);
+}
 .disabledDate:hover button {
   cursor: not-allowed;
 }
 
 .calendarWrapper {
-  max-width: 363px;
+  max-width: 380px;
+  box-sizing: content-box;
 }
 .calendar {
   width: 350px;
@@ -73,40 +79,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 73884c3e96..8b7fc077ef 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 a2bbf5cef1..9c7a5eec03 100644
--- a/src/app-components/Datepicker/DatePickerInput.tsx
+++ b/src/app-components/Datepicker/DatePickerInput.tsx
@@ -58,6 +58,7 @@ export function DatePickerInput({
     <PatternFormat
       format={formatPattern}
       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 5db52c5741..17fc0608a7 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';
@@ -75,32 +74,17 @@ export const DatePickerControl: React.FC<DatePickerControlProps> = ({
           readOnly={readOnly}
         />
         <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 24df2fdcf8..24084232c3 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..bd5d9a400c 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}
@@ -87,7 +78,17 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(function He
           <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 8f899a3102..32049f0e9e 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'
@@ -31,10 +36,13 @@ export type InputProps = {
   | 'placeholder'
   | 'inputMode'
   | 'style'
->;
+> &
+  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) {
@@ -51,7 +59,7 @@ export function Input(props: InputProps) {
     return (
       <Paragraph
         id={id}
-        size={size}
+        data-size={size}
         className={`${classes.textPadding} ${classes.focusable} ${className}`}
         tabIndex={0}
       >
@@ -62,9 +70,11 @@ export function Input(props: InputProps) {
 
   return (
     <Textfield
+      data-size={size}
       onPaste={handlePaste}
-      size={size}
+      aria-invalid={!!error}
       readOnly={readOnly}
+      counter={characterLimit}
       {...rest}
     />
   );
diff --git a/src/app-components/Label/Fieldset.tsx b/src/app-components/Label/Fieldset.tsx
index 00dce996e8..206678d4e6 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,14 @@ export function Fieldset({
       >
         <DesignsystemetFieldset
           className={cn(className)}
-          size={size}
-          legend={
+          data-size={size}
+          // FIXME: find a way to use classnames for setting font size. Not working currently
+        >
+          <DesignsystemetFieldset.Legend>
             <span className={cn(labelClasses.labelAndHelpWrapper)}>
               <DesignsystemetLabel
                 weight='medium'
-                size={legendSize}
+                data-size={legendSize}
                 style={style}
                 asChild
               >
@@ -86,10 +88,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..d6a56eec5f 100644
--- a/src/app-components/Label/Label.module.css
+++ b/src/app-components/Label/Label.module.css
@@ -1,20 +1,20 @@
 .labelAndHelpWrapper {
   display: flex;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
   align-items: center;
 }
 
 .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 3e082dc60e..65c076f011 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;
@@ -23,6 +24,7 @@ type LabelProps = {
 };
 
 export function Label({
+  id,
   label,
   htmlFor,
   required,
@@ -52,8 +54,9 @@ export function Label({
         <span className={classes.labelAndDescWrapper}>
           <span className={classes.labelAndHelpWrapper}>
             <DesignsystemetLabel
+              id={id}
               weight='medium'
-              size='md'
+              data-size='md'
               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 d1bd58ac7f..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-no_fill-active);
+  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 f37838fda6..94cfd03ec1 100644
--- a/src/app-components/Panel/Panel.tsx
+++ b/src/app-components/Panel/Panel.tsx
@@ -95,7 +95,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 8a3555816d..1aac438392 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 {
@@ -73,16 +73,3 @@
 .mobileTable td .buttonContainer {
   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;
-}
diff --git a/src/app-components/Table/Table.tsx b/src/app-components/Table/Table.tsx
index 681e931860..69a2e22a18 100644
--- a/src/app-components/Table/Table.tsx
+++ b/src/app-components/Table/Table.tsx
@@ -7,6 +7,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 { FormDataObject, FormDataValue } from 'src/app-components/DynamicForm/DynamicForm';
 
 interface Column {
@@ -77,7 +78,7 @@ export function AppTable({
   const defaultButtonVariant = mobile ? 'secondary' : 'tertiary';
   return (
     <Table
-      size={size || 'sm'}
+      data-size={size || 'sm'}
       className={cn(classes.table, { [classes.mobileTable]: mobile })}
       zebra={zebra}
       stickyHeader={stickyHeader}
@@ -95,7 +96,7 @@ export function AppTable({
           ))}
           {actionButtons && actionButtons.length > 0 && (
             <Table.HeaderCell>
-              <span className={classes.visuallyHidden}>{actionButtonHeader}</span>
+              <span className={utilClasses.visuallyHidden}>{actionButtonHeader}</span>
             </Table.HeaderCell>
           )}
         </Table.Row>
@@ -161,7 +162,7 @@ export function AppTable({
                     <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 b463798cf4..8b8f2223db 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 10e3dad0b4..51b0f4a2ba 100644
--- a/src/components/atoms/AltinnAttachments.tsx
+++ b/src/components/atoms/AltinnAttachments.tsx
@@ -1,6 +1,6 @@
 import React 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';
@@ -27,16 +27,22 @@ export function AltinnAttachments({ attachments, id, title, links = true }: IAlt
     .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>
+        <Heading
+          level={2}
+          data-size='xs'
+        >
           <Lang id={title} />
-        </List.Heading>
+        </Heading>
       )}
-      <List.Unordered className={classes.attachmentList}>
+      <List.Unordered
+        className={classes.attachmentList}
+        data-size='sm'
+      >
         {filteredAndSortedAttachments?.map((attachment, index) => (
           <Attachment
             key={index}
@@ -45,7 +51,7 @@ export function AltinnAttachments({ attachments, id, title, links = true }: IAlt
           />
         ))}
       </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/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 59a196446f..cf5f0ebf06 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 58d120d38b..2e2b2c1c21 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,5 +10,5 @@
 }
 
 .description {
-  padding-bottom: var(--fds-spacing-3);
+  padding-bottom: var(--ds-size-3);
 }
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 45d2272b17..21048b3162 100644
--- a/src/components/message/ErrorReport.module.css
+++ b/src/components/message/ErrorReport.module.css
@@ -1,15 +1,11 @@
-.errorList {
-  list-style-position: outside;
-  margin: 0 0 0 24px;
-  padding: 0;
+.errorSummary {
+  padding: var(--ds-size-4) var(--modal-padding-x);
 }
 
-.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 4d3f55f0ab..f3eda198c6 100644
--- a/src/components/message/ErrorReport.tsx
+++ b/src/components/message/ErrorReport.tsx
@@ -1,8 +1,7 @@
 import React from '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 { ErrorSummary } from '@digdir/designsystemet-react';
+
 import { FullWidthWrapper } from 'src/components/form/FullWidthWrapper';
 import classes from 'src/components/message/ErrorReport.module.css';
 import { useNavigateToNode } from 'src/features/form/layout/NavigateToNode';
@@ -34,48 +33,39 @@ export const ErrorReport = ({ renderIds, formErrors, taskErrors }: IErrorReportP
   return (
     <div data-testid='ErrorReport'>
       <FullWidthWrapper isOnBottom={true}>
-        <Panel
-          title={<Lang id='form_filler.error_report_header' />}
-          variant={PANEL_VARIANT.Error}
+        <ErrorSummary
+          data-size='lg'
+          className={classes.errorSummary}
         >
-          <Flex
-            container
-            item
-            spacing={6}
-            alignItems='flex-start'
-          >
-            <Flex
-              item
-              size={{ xs: 12 }}
-            >
-              <ul className={classes.errorList}>
-                {taskErrors.map((error) => (
-                  <li
-                    key={getUniqueKeyFromObject(error)}
-                    style={{ listStyleImage: listStyleImg }}
-                  >
-                    <Lang
-                      id={error.message.key}
-                      params={error.message.params}
-                    />
-                  </li>
-                ))}
-                {formErrors.map((error) => (
-                  <Error
-                    key={getUniqueKeyFromObject(error)}
-                    error={error}
-                  />
-                ))}
-              </ul>
-            </Flex>
-            {renderIds.map((id) => (
-              <GenericComponentById
-                key={id}
-                id={id}
+          <ErrorSummary.Heading>
+            <Lang id='form_filler.error_report_header' />
+          </ErrorSummary.Heading>
+          <ErrorSummary.List className={classes.errorList}>
+            {taskErrors.map((error) => (
+              <ErrorSummary.Item
+                key={getUniqueKeyFromObject(error)}
+                style={{ listStyleImage: listStyleImg }}
+              >
+                <Lang
+                  id={error.message.key}
+                  params={error.message.params}
+                />
+              </ErrorSummary.Item>
+            ))}
+            {formErrors.map((error) => (
+              <Error
+                key={getUniqueKeyFromObject(error)}
+                error={error}
               />
             ))}
-          </Flex>
-        </Panel>
+          </ErrorSummary.List>
+          {renderIds.map((id) => (
+            <GenericComponentById
+              key={id}
+              id={id}
+            />
+          ))}
+        </ErrorSummary>
       </FullWidthWrapper>
     </div>
   );
@@ -100,7 +90,7 @@ function Error({ error }: { error: NodeRefValidation }) {
   };
 
   return (
-    <li style={{ listStyleImage: listStyleImg }}>
+    <ErrorSummary.Item style={{ listStyleImage: listStyleImg }}>
       <button
         className={classes.buttonAsInvisibleLink}
         onClick={handleErrorClick}
@@ -112,6 +102,6 @@ function Error({ error }: { error: NodeRefValidation }) {
           node={node}
         />
       </button>
-    </li>
+    </ErrorSummary.Item>
   );
 }
diff --git a/src/components/organisms/AltinnReceipt.tsx b/src/components/organisms/AltinnReceipt.tsx
index 2d7c0a4d30..bcd93af77e 100644
--- a/src/components/organisms/AltinnReceipt.tsx
+++ b/src/components/organisms/AltinnReceipt.tsx
@@ -129,7 +129,7 @@ export function ReceiptComponent({
     >
       <Heading
         level={2}
-        size='medium'
+        data-size='md'
       >
         {title}
       </Heading>
@@ -156,7 +156,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.tsx b/src/components/presentation/AppHeader/AppHeaderMenu.tsx
index b54cf2f361..926f1b1713 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,27 @@ 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-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 a926349b5a..9c929e7316 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.tsx b/src/components/presentation/LanguageSelector.tsx
index 157bc07551..8d37a8f538 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,14 +50,24 @@ 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
+              <Dropdown.Item
                 role='menuitemradio'
                 aria-checked={selected}
                 key={lang}
@@ -73,11 +79,11 @@ export const LanguageSelector = () => {
                   aria-hidden
                 />
                 <Lang id={`language.full_name.${lang}`} />
-              </DropdownMenu.Item>
+              </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..e5634e73e1 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-global-blue-2);
 }
 
 .circleTransition {
   transition: stroke-dashoffset 1s ease-in-out;
-  stroke: var(--fds-colors-blue-900);
+  stroke: var(--ds-global-blue-9);
   stroke-dasharray: 100 100;
 }
 
diff --git a/src/features/alertOnChange/DeleteWarningPopover.tsx b/src/features/alertOnChange/DeleteWarningPopover.tsx
index 3ef5461ee2..fefc5b64ed 100644
--- a/src/features/alertOnChange/DeleteWarningPopover.tsx
+++ b/src/features/alertOnChange/DeleteWarningPopover.tsx
@@ -28,14 +28,18 @@ export function DeleteWarningPopover({
   setOpen,
 }: IDeleteWarningPopover) {
   return (
-    <Popover
-      variant='warning'
-      placement={placement}
-      open={open}
-      onOpenChange={() => setOpen(!open)}
-    >
-      <Popover.Trigger asChild>{children}</Popover.Trigger>
-      <Popover.Content>
+    <Popover.TriggerContext>
+      <Popover.Trigger
+        asChild
+        onClick={() => setOpen(!open)}
+      >
+        {children}
+      </Popover.Trigger>
+      <Popover
+        open={open}
+        placement={placement}
+        data-color='warning'
+      >
         <div>{messageText}</div>
         <div className={classes.popoverButtonContainer}>
           <Button
@@ -52,7 +56,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..5560704bde 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-global-red-6);
+  border: 3px solid var(--ds-global-red-6);
 }
 
 .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 9135341170..d2cb45ef3f 100644
--- a/src/features/devtools/components/ExpressionPlayground/ExpressionPlayground.tsx
+++ b/src/features/devtools/components/ExpressionPlayground/ExpressionPlayground.tsx
@@ -90,7 +90,7 @@ export const ExpressionPlayground = () => {
           {outputs.length > 1 && (
             <div className={classes.outputs}>
               <Tabs
-                size='small'
+                data-size='sm'
                 value={activeOutputTab}
                 onChange={(outputName) => {
                   setActiveOutputTab(outputName);
@@ -112,7 +112,7 @@ export const ExpressionPlayground = () => {
                 {outputs.map((output, i) => {
                   const { key, value } = getTabKeyAndValue(i, output);
                   return (
-                    <Tabs.Content
+                    <Tabs.Panel
                       value={value}
                       key={key}
                     >
@@ -123,7 +123,7 @@ export const ExpressionPlayground = () => {
                         value={output.value}
                         placeholder='Resultatet av uttrykket vises her'
                       />
-                    </Tabs.Content>
+                    </Tabs.Panel>
                   );
                 })}
               </Tabs>
@@ -131,7 +131,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}
@@ -180,14 +181,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 b20663f58b..409dcabbd0 100644
--- a/src/features/instantiate/containers/PartySelection.tsx
+++ b/src/features/instantiate/containers/PartySelection.tsx
@@ -172,23 +172,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>
@@ -198,7 +196,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/selection/InstanceSelection.module.css b/src/features/instantiate/selection/InstanceSelection.module.css
index d2ecf3330a..b1967797a9 100644
--- a/src/features/instantiate/selection/InstanceSelection.module.css
+++ b/src/features/instantiate/selection/InstanceSelection.module.css
@@ -41,19 +41,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 8a71cd891e..84b55fbfa6 100644
--- a/src/features/instantiate/selection/InstanceSelection.tsx
+++ b/src/features/instantiate/selection/InstanceSelection.tsx
@@ -76,17 +76,17 @@ 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);
 
   const textStrings = language?.['list_component'];
 
   function handleRowsPerPageChanged(newRowsPerPage: number) {
     setRowsPerPage(newRowsPerPage);
-    if (instances.length < currentPage * newRowsPerPage) {
+    if (instances.length < (currentPage - 1) * newRowsPerPage) {
       setCurrentPage(Math.floor(instances.length / newRowsPerPage));
     }
   }
@@ -94,7 +94,7 @@ function InstanceSelection() {
   const renderMobileTable = () => (
     <>
       <Heading
-        size='xsmall'
+        data-size='xs'
         level={3}
         className={classes.leftOffHeading}
       >
@@ -154,13 +154,13 @@ function InstanceSelection() {
                     previousLabelAriaLabel={textStrings['previousPageAriaLabel']}
                     rowsPerPageText={textStrings['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>
@@ -233,7 +233,7 @@ function InstanceSelection() {
                     pageSize={rowsPerPage}
                     rowsPerPageOptions={rowsPerPageOptions}
                     onPageSizeChange={(value) => handleRowsPerPageChanged(+value)}
-                    onChange={setCurrentPage}
+                    setCurrentPage={setCurrentPage}
                   />
                 </div>
               </Table.Cell>
@@ -254,7 +254,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.tsx b/src/features/navigation/AppNavigation.tsx
index 3a82b477b4..17b7da952b 100644
--- a/src/features/navigation/AppNavigation.tsx
+++ b/src/features/navigation/AppNavigation.tsx
@@ -96,7 +96,7 @@ export function AppNavigationHeading({
       <Heading
         id='app-navigation-heading'
         level={3}
-        size='xs'
+        data-size='xs'
       >
         <Lang id='navigation.form_pages' />
       </Heading>
@@ -104,7 +104,7 @@ export function AppNavigationHeading({
         <Button
           variant='tertiary'
           color='second'
-          size='sm'
+          data-size='sm'
           icon={true}
           onClick={onClose}
           aria-label={langAsString('general.close')}
diff --git a/src/features/navigation/PopoverNavigation.tsx b/src/features/navigation/PopoverNavigation.tsx
index 080715b749..249d5188aa 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, Popover } from '@digdir/designsystemet-react';
 import { BulletListIcon } from '@navikt/aksel-icons';
 import cn from 'classnames';
 import type { Button } from '@digdir/designsystemet-react';
@@ -40,26 +40,25 @@ function InnerPopoverNavigation(props: Parameters<typeof Button>[0]) {
   if (!isMobile) {
     return (
       <div className={classes.popoverWrapper}>
-        <Popover
-          open={isDialogOpen}
-          onClose={closeDialog}
-        >
+        <Popover.TriggerContext>
           <Popover.Trigger
             data-testid='page-navigation-trigger'
             onClick={toggleDialog}
             variant='secondary'
-            color='first'
-            size='sm'
+            data-color='accent'
+            data-size='sm'
             {...props}
             className={cn({ [classes.popoverButtonActive]: isDialogOpen }, props.className)}
           >
             <PopoverNavigationButtonContent />
           </Popover.Trigger>
-          <Popover.Content
+          <Popover
             data-testid='page-navigation-dialog'
             className={classes.popoverContainer}
             aria-modal
             autoFocus={true}
+            open={isDialogOpen}
+            onClose={closeDialog}
           >
             <AppNavigationHeading
               showClose={true}
@@ -68,45 +67,42 @@ function InnerPopoverNavigation(props: Parameters<typeof Button>[0]) {
             <div style={{ paddingRight: 12 }}>
               <AppNavigation onNavigate={closeDialog} />
             </div>
-          </Popover.Content>
-        </Popover>
+          </Popover>
+        </Popover.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
+      </Dialog.Trigger>
+      <Dialog
         aria-labelledby='app-navigation-heading'
         ref={modalRef}
-        onInteractOutside={closeDialog}
-        className={classes.modal}
+        closedby='any'
+        modal={true}
+        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>
+        <AppNavigationHeading
+          showClose={true}
+          onClose={closeDialog}
+        />
+        <div style={{ paddingRight: 12 }}>
+          <AppNavigation onNavigate={closeDialog} />
+        </div>
+      </Dialog>
+    </Dialog.TriggerContext>
   );
 }
 
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.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/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 00d38f390b..76b9933a1c 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 908a299df6..c6296fe084 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,16 +97,16 @@ function ErrorValidations({ validations, node }: { validations: BaseValidation<'
   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'>
+          <ValidationMessage data-size='sm'>
             <Lang
               id={validation.message.key}
               params={validation.message.params}
               node={node}
             />
-          </ErrorMessage>
+          </ValidationMessage>
         </li>
       ))}
     </ul>
@@ -124,10 +125,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..3cd7a0dc4e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,20 +11,6 @@
   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;
-}
-
 /* Global variables */
 :root {
   /* @see altinnAppTheme.tsx */
@@ -58,11 +44,6 @@
   --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;
-
   /*Border styles*/
   --border-color-primary: var(--colors-primary-blueMedium);
   --dashed-border-primary: 1px dashed var(--border-color-primary);
@@ -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 bffcadc266..ed7b9477d2 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 2d9524e863..a38a7d005c 100644
--- a/src/language/texts/en.ts
+++ b/src/language/texts/en.ts
@@ -212,9 +212,8 @@ export function en() {
         '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',
-      remaining_characters: 'You have {0} of {1} characters left',
-      exceeded_max_limit: 'You have exceeded the maximum limit with {0} characters',
+      remaining_characters: 'You have %d characters left',
+      exceeded_max_limit: 'You have exceeded the maximum limit with %d characters',
     },
     instance_selection: {
       changed_by: 'Changed by',
@@ -348,7 +347,7 @@ export function en() {
       validation_error_name_too_short: "The name can't be empty.",
       validation_error_ssn: 'The national ID number/D-number is invalid.',
       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.',
       validation_error_too_many_requests: 'Too many requests. Please try again later.',
       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 9814244f80..a25a6b9576 100644
--- a/src/language/texts/nb.ts
+++ b/src/language/texts/nb.ts
@@ -212,9 +212,8 @@ export function nb(): FixedLanguageList {
         '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',
-      remaining_characters: 'Du har {0} av {1} tegn igjen',
-      exceeded_max_limit: 'Du har overskredet maks antall tegn med {0}',
+      remaining_characters: 'Du har %d tegn igjen',
+      exceeded_max_limit: 'Du har overskredet maks antall tegn med %d',
     },
     instance_selection: {
       changed_by: 'Endret av',
@@ -349,7 +348,7 @@ export function nb(): FixedLanguageList {
       validation_error_name_too_short: 'Etternavn kan ikke være tomt.',
       validation_error_ssn: 'Fødselsnummeret/D-nummeret er ugyldig.',
       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.',
       validation_error_too_many_requests: 'Du har nådd grensen for antall søk. Vennligst prøv igjen senere.',
       validation_error_forbidden:
         'Du har ikke tilgang til å søke på denne personen. Sikkerhetsnivå 2 eller høyere kreves.',
diff --git a/src/language/texts/nn.ts b/src/language/texts/nn.ts
index 83b346f3fb..070a223188 100644
--- a/src/language/texts/nn.ts
+++ b/src/language/texts/nn.ts
@@ -212,9 +212,8 @@ export function nn(): FixedLanguageList {
         '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.',
-      remaining_characters: 'Du har {0} av {1} teikn igjen',
-      exceeded_max_limit: 'Du har overskride maks teikn med {0}',
+      remaining_characters: 'Du har %d teikn igjen',
+      exceeded_max_limit: 'Du har overskride maks teikn med %d',
     },
     instance_selection: {
       changed_by: 'Endra av',
@@ -349,7 +348,7 @@ export function nn(): FixedLanguageList {
       validation_error_name_too_short: 'Etternamn kan ikkje vere tomt.',
       validation_error_ssn: 'Fødselsnummeret/D-nummeret er ugyldig.',
       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.',
       validation_error_too_many_requests: 'Du har gjort for mange søk. Ver venleg, prøv igjen seinare.',
       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..c592394cbf 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, Details } 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,14 @@ export const Accordion = ({ node }: IAccordionProps) => {
       {renderAsAccordionItem ? (
         <AccordionItem className={classes.container} />
       ) : (
-        <DesignSystemAccordion
-          color='subtle'
-          border
-          className={classes.container}
-        >
-          <AccordionItem />
-        </DesignSystemAccordion>
+        <Card>
+          <Details
+            data-color='subtle'
+            className={classes.container}
+          >
+            <AccordionItem />
+          </Details>
+        </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 beb1e204af..2d72d25709 100644
--- a/src/layout/Accordion/SummaryAccordion.module.css
+++ b/src/layout/Accordion/SummaryAccordion.module.css
@@ -1,20 +1,20 @@
 .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-subtle);
 }
 
 .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-subtle);
 }
 
 .padding {
-  padding: var(--fds-spacing-5);
+  padding: var(--ds-spacing-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/AccordionGroup/SummaryAccordionGroupComponent.tsx b/src/layout/AccordionGroup/SummaryAccordionGroupComponent.tsx
index dba82b6ab4..feff1e6bb3 100644
--- a/src/layout/AccordionGroup/SummaryAccordionGroupComponent.tsx
+++ b/src/layout/AccordionGroup/SummaryAccordionGroupComponent.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Accordion as DesignSystemAccordion } from '@digdir/designsystemet-react';
+import { Details as DesignSystemAccordion } from '@digdir/designsystemet-react';
 
 import { SummaryAccordionComponent } from 'src/layout/Accordion/SummaryAccordion';
 import { useNode } from 'src/utils/layout/NodesContext';
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 f5d68a0c4d..3e33284231 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)}
@@ -104,6 +106,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}
@@ -124,6 +127,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)}
@@ -146,6 +150,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}
@@ -166,6 +171,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)}
@@ -184,6 +190,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}
@@ -204,6 +211,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}
@@ -217,6 +225,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')}
@@ -245,6 +254,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..6ff1df945f 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 { Flex } from 'src/app-components/Flex/Flex';
+import { AppCard } from 'src/app-components/Card/Card';
+import { ConditionalWrapper } from 'src/components/ConditionalWrapper';
 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'>;
@@ -20,122 +18,93 @@ type ICardsProps = PropsFromGenericComponent<'Cards'>;
 function parseSize(size: string | undefined, defaultValue: string): string {
   return size && /^[0-9]+$/.test(size) ? `${size}px` : (size ?? defaultValue);
 }
-
 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}
+            title={card.title && <Lang id={card.title} />}
+            description={card.description && <Lang id={card.description} />}
+            footer={card.footer && <Lang id={card.footer} />}
             color={color}
-            className={classes.card}
+            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
-                item
-                direction='row'
-                spacing={6}
-              >
-                <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>
-              </Flex>
-            )}
-            {card.footer && (
-              <Card.Footer>
-                <Lang id={card.footer} />
-              </Card.Footer>
-            )}
-            {mediaPosition === 'bottom' && (
-              <Media
-                card={card}
-                node={node}
-                minMediaHeight={processedMinMediaHeight}
-              />
-            )}
-          </Card>
+            {card?.childIds &&
+              card.childIds?.length > 0 &&
+              card.childIds?.filter(typedBoolean).map((childId, idx) => (
+                <CardItem
+                  key={idx}
+                  nodeId={childId}
+                  parentNode={node}
+                  isMedia={false}
+                />
+              ))}
+          </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}
+    >
+      <ConditionalWrapper
+        condition={isMedia}
+        wrapper={(children) => (
+          <div
+            data-componentid={nodeId}
+            data-componentbaseid={itemNode.baseId}
+          >
+            {children}
+          </div>
+        )}
       >
-        <div
-          data-componentid={mediaNode.id}
-          data-componentbaseid={mediaNode.baseId}
-        >
-          <GenericComponent
-            node={mediaNode}
-            overrideDisplay={{
-              directRender: true,
-            }}
-          />
-        </div>
-      </CardProvider>
-    </Card.Media>
+        <GenericComponent
+          node={itemNode}
+          overrideDisplay={{
+            directRender: true,
+          }}
+        />
+      </ConditionalWrapper>
+    </CardProvider>
   );
 }
diff --git a/src/layout/Checkboxes/CheckboxesContainerComponent.module.css b/src/layout/Checkboxes/CheckboxesContainerComponent.module.css
index cfbb36c8be..917c802ba5 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;
 }
 
diff --git a/src/layout/Checkboxes/CheckboxesContainerComponent.test.tsx b/src/layout/Checkboxes/CheckboxesContainerComponent.test.tsx
index 33aaa4180b..bc7996cae6 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')).toHaveClass('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')).toHaveClass('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 a5f887cefc..29cb1e9f2f 100644
--- a/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
+++ b/src/layout/Checkboxes/CheckboxesContainerComponent.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { Checkbox } from '@digdir/designsystemet-react';
-import cn from 'classnames';
+import { Fieldset, useCheckboxGroup } from '@digdir/designsystemet-react';
 
 import { AltinnSpinner } from 'src/components/AltinnSpinner';
+import { ConditionalWrapper } from 'src/components/ConditionalWrapper';
 import { LabelContent } from 'src/components/label/LabelContent';
 import { Lang } from 'src/features/language/Lang';
 import { useLanguage } from 'src/features/language/useLanguage';
@@ -44,6 +44,13 @@ export const CheckboxContainerComponent = ({ node, overrideDisplay }: ICheckboxC
   const hideLabel = overrideDisplay?.renderedInTable === true && calculatedOptions.length === 1 && !showLabelsInTable;
   const ariaLabel = overrideDisplay?.renderedInTable ? langAsString(textResourceBindings?.title) : undefined;
 
+  const { getCheckboxProps } = useCheckboxGroup({
+    name: id,
+    readOnly,
+    value: selectedValues,
+    error: !isValid,
+  });
+
   return (
     <ComponentStructureWrapper node={node}>
       {isFetching ? (
@@ -53,34 +60,46 @@ 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}
-            value={selectedValues}
-            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) => {
-                  const newData = isChecked
-                    ? [...selectedValues, option.value]
-                    : selectedValues.filter((o) => o !== option.value);
-                  setData(newData);
-                }}
-              />
-            ))}
-          </Checkbox.Group>
+            {overrideDisplay?.renderLegend !== false && <Fieldset.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
+                  key={option.value}
+                  id={id}
+                  option={option}
+                  hideLabel={hideLabel}
+                  alertOnChange={alertOnChange}
+                  {...getCheckboxProps(option.value)}
+                  checked={selectedValues.includes(option.value)}
+                  setChecked={(isChecked) => {
+                    const newData = isChecked
+                      ? [...selectedValues, option.value]
+                      : selectedValues.filter((o) => o !== option.value);
+                    setData(newData);
+                  }}
+                />
+              ))}
+            </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 79ee77dd68..f127b66b2f 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 { HelpText } from 'src/app-components/HelpText/HelpText';
 import { ConditionalWrapper } from 'src/components/ConditionalWrapper';
@@ -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 5f0566fcef..28c335684f 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 { Label } from 'src/app-components/Label/Label';
 import { AltinnSpinner } from 'src/components/AltinnSpinner';
@@ -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';
@@ -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>
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/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 6dbd15b83b..3c5fe82690 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..4794422b10 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-subtle);
 }
 
 tr > .fullWidthCellFirst {
diff --git a/src/layout/Grid/GridSummary.module.css b/src/layout/Grid/GridSummary.module.css
index 2b2f2f2b23..02dbda52bf 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-subtle);
 }
 
 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 4b779afb80..9c1dd407b7 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';
@@ -19,6 +19,7 @@ import classes from 'src/layout/Grid/GridSummary.module.css';
 import { isGridRowHidden } from 'src/layout/Grid/tools';
 import { EditButton } from 'src/layout/Summary2/CommonSummaryComponents/EditButton';
 import { ComponentSummary } from 'src/layout/Summary2/SummaryComponent2/ComponentSummary';
+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';
@@ -115,7 +116,7 @@ export const GridSummary = ({ componentNode }: GridSummaryProps) => {
       {title && (
         <caption className={classes.tableCaption}>
           <Heading
-            size='xs'
+            data-size='xs'
             level={4}
           >
             <Lang
@@ -165,7 +166,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>
@@ -393,13 +394,16 @@ 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}
               node={node}
             />
-          </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 eca2634452..e63c828f36 100644
--- a/src/layout/Group/GroupComponent.tsx
+++ b/src/layout/Group/GroupComponent.tsx
@@ -24,7 +24,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',
@@ -74,7 +74,7 @@ export function GroupComponent({
               <Heading
                 className={classes.legend}
                 level={headingLevel}
-                size={headingSize}
+                data-size={headingSize}
               >
                 <Lang id={legend} />
               </Heading>
@@ -82,9 +82,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 6c9dbaf784..b1f13d74ef 100644
--- a/src/layout/Group/GroupSummary.tsx
+++ b/src/layout/Group/GroupSummary.tsx
@@ -81,7 +81,7 @@ export const GroupSummary = ({ componentNode, hierarchyLevel = 0, summaryOverrid
     >
       {(summaryTitle || title) && (
         <Heading
-          size={isNestedGroup ? 'xsmall' : 'small'}
+          data-size={isNestedGroup ? 'xs' : 'sm'}
           level={headingLevel}
         >
           <Lang
diff --git a/src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap b/src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap
index b6437e21ed..d548fc2766 100644
--- a/src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap
+++ b/src/layout/Group/__snapshots__/SummaryGroupComponent.test.tsx.snap
@@ -23,7 +23,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="second"
+        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 dd12d17b74..4a18fadc48 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 583e670d13..5f46757bf3 100644
--- a/src/layout/Input/InputComponent.tsx
+++ b/src/layout/Input/InputComponent.tsx
@@ -80,7 +80,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,
@@ -92,7 +92,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%' },
   };
 
@@ -109,6 +108,7 @@ export const InputVariant = ({ node, overrideDisplay }: Pick<IInputProps, 'node'
           onChange={(event) => {
             setValue('simpleBinding', event.target.value);
           }}
+          maxLength={maxLength}
         />
       );
     case 'pattern':
@@ -124,6 +124,7 @@ export const InputVariant = ({ node, overrideDisplay }: Pick<IInputProps, 'node'
             }
             setValue('simpleBinding', values.value);
           }}
+          maxLength={maxLength}
         />
       );
     case 'number':
@@ -158,6 +159,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 dba73e47bf..f62a234668 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..d939dbe40c
--- /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-1);
+}
+
+.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 378a290daf..9333d784e6 100644
--- a/src/layout/Likert/LikertComponent.tsx
+++ b/src/layout/Likert/LikertComponent.tsx
@@ -14,7 +14,7 @@ import { useIsMobileOrTablet } from 'src/hooks/useDeviceWidths';
 import { LayoutStyle } from 'src/layout/common.generated';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
 import { GenericComponentById } from 'src/layout/GenericComponent';
-import classes from 'src/layout/LikertItem/LikertItemComponent.module.css';
+import classes from 'src/layout/Likert/LikertComponent.module.css';
 import { useNode } from 'src/utils/layout/NodesContext';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import { typedBoolean } from 'src/utils/typing';
@@ -52,7 +52,7 @@ export const LikertComponent = ({ node }: LikertComponentProps) => {
           >
             <Heading
               level={2}
-              size='sm'
+              data-size='sm'
             >
               <Lang id={title} />
             </Heading>
@@ -92,6 +92,7 @@ export const LikertComponent = ({ node }: LikertComponentProps) => {
       ) : (
         <Table
           id={id}
+          border
           className={classes.likertTable}
           aria-describedby={textResourceBindings?.description ? getDescriptionId(id) : undefined}
         >
@@ -102,7 +103,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 ae00202e00..0009fa1355 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';
@@ -50,7 +50,7 @@ export function LikertSummary({ componentNode, emptyFieldText, isCompact }: Like
     <div className={classes.summaryItemWrapper}>
       <div className={classes.summaryItem}>
         <Heading
-          size='xs'
+          data-size='xs'
           level={4}
         >
           <Lang
@@ -69,13 +69,16 @@ export function LikertSummary({ componentNode, emptyFieldText, isCompact }: Like
         />
       ))}
       {errors?.map(({ message }) => (
-        <ErrorMessage key={message.key}>
+        <ValidationMessage
+          key={message.key}
+          data-size='sm'
+        >
           <Lang
             id={message.key}
             params={message.params}
             node={componentNode}
           />
-        </ErrorMessage>
+        </ValidationMessage>
       ))}
     </div>
   );
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 8dd35e5c37..a31c1d856a 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>
@@ -84,15 +84,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..3290375254 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-1);
 }
 
 .listTable tr {
@@ -31,7 +31,7 @@
 
 .selectedRow,
 .selectedRowCell {
-  background-color: var(--fds-colors-blue-100);
+  background-color: var(--ds-global-blue-1);
 }
 
 .pagination {
@@ -39,7 +39,7 @@
   display: flex;
   justify-content: right;
   align-items: center;
-  background-color: var(--fds-colors-grey-100);
+  background-color: var(--ds-color-neutral-1);
   width: 100%;
 }
 .paginationMobile {
@@ -52,17 +52,17 @@
 }
 
 .mobileGroup > div :hover {
-  background-color: var(--fds-colors-grey-100);
+  background-color: var(--ds-color-neutral-1);
 }
 
 .mobile {
-  border-top: 1px solid var(--fds-colors-grey-200);
-  padding: var(--fds-spacing-4);
-  gap: var(--fds-spacing-8);
+  border-top: 1px solid var(--ds-color-neutral-2);
+  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,13 +72,13 @@
 .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 {
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 d6549052a4..695d75d7bf 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 { v4 as uuidv4 } from 'uuid';
 
@@ -43,13 +51,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,
   };
@@ -140,70 +148,82 @@ export const ListComponent = ({ node }: IListProps) => {
       </div>
     ));
 
-  const options = groupBinding ? (
-    <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={isRowSelected(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}
+        {groupBinding ? (
+          <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={isRowSelected(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}
         />
@@ -218,7 +238,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} />
@@ -237,16 +257,7 @@ export const ListComponent = ({ node }: IListProps) => {
             {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);
-                  }
-                }}
+                sort={sortableColumns?.includes(key) && sortColumn === key ? sortDirection : undefined}
               >
                 <Lang id={value} />
               </Table.HeaderCell>
@@ -304,8 +315,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}
         />
@@ -317,8 +328,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;
 };
@@ -326,8 +337,8 @@ type PaginationProps = {
 function Pagination({
   pageSize,
   setPageSize,
-  pageNumber,
-  setPageNumber,
+  currentPage,
+  setCurrentPage,
   numberOfRows = 0,
   rowsPerPageOptions = [],
 }: PaginationProps) {
@@ -335,13 +346,13 @@ function Pagination({
   const isMobile = useIsMobile();
 
   function handlePageSizeChange(newSize: number) {
-    setPageNumber(0);
+    setCurrentPage(1);
     setPageSize(newSize);
   }
   const textStrings = language?.['list_component'];
 
   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={textStrings['nextPage']}
         nextLabelAriaLabel={textStrings['nextPageAriaLabel']}
@@ -349,10 +360,10 @@ function Pagination({
         previousLabelAriaLabel={textStrings['previousPageAriaLabel']}
         rowsPerPageText={textStrings['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 2d586e758f..4d0ad87ea2 100644
--- a/src/layout/List/ListSummary.tsx
+++ b/src/layout/List/ListSummary.tsx
@@ -52,7 +52,7 @@ export const ListSummary = ({ componentNode, isCompact, emptyFieldText }: ListCo
           {title && (
             <caption className={classes.tableCaption}>
               <Heading
-                size='xs'
+                data-size='xs'
                 level={4}
               >
                 <Lang
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 9f1474d8b2..1b24436b39 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';
@@ -82,13 +82,16 @@ export function MapSummary({ componentNode, emptyFieldText, isCompact }: MapSumm
         </Paragraph>
       )}
       {errors?.map(({ message }) => (
-        <ErrorMessage key={message.key}>
+        <ValidationMessage
+          key={message.key}
+          data-size='sm'
+        >
           <Lang
             id={message.key}
             params={message.params}
             node={componentNode}
           />
-        </ErrorMessage>
+        </ValidationMessage>
       ))}
     </div>
   );
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 0eacb267e9..548e5ca5c4 100644
--- a/src/layout/MultipleSelect/MultipleSelectComponent.tsx
+++ b/src/layout/MultipleSelect/MultipleSelectComponent.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import { Combobox } from '@digdir/designsystemet-react';
+import { EXPERIMENTAL_MultiSuggestion, Field } from '@digdir/designsystemet-react';
 
 import { Label } from 'src/app-components/Label/Label';
 import { AltinnSpinner } from 'src/components/AltinnSpinner';
@@ -14,10 +14,9 @@ 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 comboboxClasses from 'src/styles/combobox.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'>;
@@ -72,62 +71,70 @@ export function MultipleSelectComponent({ node, overrideDisplay }: IMultipleSele
         </DeleteWarningPopover>
       )}
     >
-      <Label
-        htmlFor={id}
-        label={labelText}
-        grid={grid?.labelGrid}
-        required={required}
-        requiredIndicator={getRequiredComponent()}
-        optionalIndicator={getOptionalComponent()}
-        help={getHelpTextComponent()}
-        description={getDescriptionComponent()}
-      >
-        <ComponentStructureWrapper node={node}>
-          <Combobox
-            multiple
-            hideLabel
-            id={id}
-            filter={optionSearchFilter}
-            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
-              >
-                <span>
-                  <wbr />
-                  <Lang
-                    id={option.label}
-                    node={node}
-                  />
-                </span>
-              </Combobox.Option>
-            ))}
-          </Combobox>
-        </ComponentStructureWrapper>
-      </Label>
+      <Field style={{ width: '100%' }}>
+        <Label
+          htmlFor={id}
+          label={labelText}
+          grid={grid?.labelGrid}
+          required={required}
+          requiredIndicator={getRequiredComponent()}
+          optionalIndicator={getOptionalComponent()}
+          help={getHelpTextComponent()}
+          description={getDescriptionComponent()}
+        >
+          <ComponentStructureWrapper node={node}>
+            <EXPERIMENTAL_MultiSuggestion
+              id={id}
+              data-testid='multiple-select-component'
+              filter={optionFilter}
+              data-size='sm'
+              value={selectedValues}
+              onValueChange={handleChange}
+              onBlur={debounce}
+            >
+              <EXPERIMENTAL_MultiSuggestion.Chips render={(e) => e.text} />
+              <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}
+                        node={node}
+                      />
+                      {option.description && (
+                        <Lang
+                          id={option.description}
+                          node={node}
+                        />
+                      )}
+                    </span>
+                  </EXPERIMENTAL_MultiSuggestion.Option>
+                ))}
+              </EXPERIMENTAL_MultiSuggestion.List>
+            </EXPERIMENTAL_MultiSuggestion>
+          </ComponentStructureWrapper>
+        </Label>
+      </Field>
     </ConditionalWrapper>
   );
 }
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 7808a3ec82..cad48f28d8 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 f7990a343e..3ad91cb720 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 1f62611380..d684c97dd4 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 1c9ce3141d..735ba0eb06 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 a73491d14c..04573d0b0f 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 '..';
@@ -45,6 +45,7 @@ export type OrganisationLookupResponse =
   | { success: true; organisationDetails: Organisation };
 
 async function fetchOrg(orgNr: string): Promise<{ org: Organisation; error: null } | { org: null; error: string }> {
+  console.log('fetchOrg', orgNr);
   if (!orgNr) {
     throw new Error('orgNr is required');
   }
@@ -88,11 +89,12 @@ export function OrganisationLookupComponent({
 
   function handleValidateOrgnr(orgNr: string) {
     if (!validateOrgnr({ orgNr })) {
+      console.log('handleValidateOrgnr', orgNr);
       const errors = validateOrgnr.errors
         ?.filter((error) => error.instancePath === '/orgNr')
         .map((error) => error.message)
         .filter((it) => it != null);
-
+      console.log('errors', errors);
       setOrgNrErrors(errors);
       return false;
     }
@@ -122,6 +124,12 @@ export function OrganisationLookupComponent({
 
   const hasSuccessfullyFetched = !!organisation_lookup_orgnr;
 
+  console.log(data);
+
+  const isValid =
+    (orgNrErrors?.length && orgNrErrors?.length > 0) ||
+    hasValidationErrors(bindingValidations?.organisation_lookup_orgnr);
+
   return (
     <Fieldset
       legend={labelText}
@@ -148,25 +156,30 @@ 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(' ')} />) ||
+          <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);
+              }}
+              onBlur={(e) => handleValidateOrgnr(e.target.value)}
+              allowLeadingZeros
+            />
+            {(orgNrErrors?.length && (
+              <ValidationMessage data-size='sm'>
+                <Lang id={orgNrErrors.join(' ')} />
+              </ValidationMessage>
+            )) ||
               (hasValidationErrors(bindingValidations?.organisation_lookup_orgnr) && (
                 <ComponentValidations validations={bindingValidations?.organisation_lookup_orgnr} />
-              ))
-            }
-            onValueChange={(e) => {
-              setTempOrgNr(e.value);
-            }}
-            onBlur={(e) => handleValidateOrgnr(e.target.value)}
-            allowLeadingZeros
-          />
+              ))}
+          </Field>
           <div className={classes.submit}>
             {!hasSuccessfullyFetched ? (
               <Button
@@ -187,19 +200,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 36f71d087d..025abddffa 100644
--- a/src/layout/OrganisationLookup/OrganisationLookupSummary.tsx
+++ b/src/layout/OrganisationLookup/OrganisationLookupSummary.tsx
@@ -28,7 +28,7 @@ export function OrganisationLookupSummary({ componentNode }: OrganisationLookupS
   return (
     <div className={classes.organisationSummaryWrapper}>
       <Heading
-        size='sm'
+        data-size='sm'
         level={2}
       >
         <Lang
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 d09b34476f..d72429f7f6 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 1af19f3ffb..10bd284411 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: repeat(2, minmax(250px, 250px)) auto;
     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 52720257d6..1052e33262 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';
@@ -146,6 +146,11 @@ 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 =
+    (nameErrors?.length && nameErrors?.length > 0) || hasValidationErrors(bindingValidations?.person_lookup_name);
+
   return (
     <Fieldset
       legend={labelText}
@@ -173,25 +178,30 @@ 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);
+              }}
+              onBlur={(e) => handleValidateSsn(e.target.value)}
+              allowLeadingZeros
+            />
+            {(ssnErrors?.length && (
+              <ValidationMessage>
+                <Lang id={ssnErrors.join(' ')} />
+              </ValidationMessage>
+            )) ||
               (hasValidationErrors(bindingValidations?.person_lookup_ssn) && (
                 <ComponentValidations validations={bindingValidations?.person_lookup_ssn} />
-              ))
-            }
-            onValueChange={(e) => {
-              setTempSsn(e.value);
-            }}
-            onBlur={(e) => handleValidateSsn(e.target.value)}
-            allowLeadingZeros
-          />
+              ))}
+          </Field>
           <div className={classes.nameLabel}>
             <Label
               htmlFor={`${id}_name`}
@@ -208,26 +218,32 @@ 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={
-              (nameErrors?.length && <Lang id={nameErrors.join(' ')} />) ||
+          <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);
+              }}
+              onBlur={(e) => handleValidateName(e.target.value)}
+            />
+            {(nameErrors?.length && (
+              <ValidationMessage>
+                <Lang id={nameErrors.join(' ')} />
+              </ValidationMessage>
+            )) ||
               (hasValidationErrors(bindingValidations?.person_lookup_name) && (
                 <ComponentValidations validations={bindingValidations?.person_lookup_name} />
-              ))
-            }
-            onChange={(e) => {
-              setTempName(e.target.value);
-            }}
-            onBlur={(e) => handleValidateName(e.target.value)}
-          />
-
+              ))}
+          </Field>
           <div className={classes.submit}>
             {!hasSuccessfullyFetched ? (
               <Button
@@ -248,12 +264,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 cfb55bd358..5780dd5b6d 100644
--- a/src/layout/PersonLookup/PersonLookupSummary.tsx
+++ b/src/layout/PersonLookup/PersonLookupSummary.tsx
@@ -28,7 +28,7 @@ export function PersonLookupSummary({ componentNode }: PersonLookupSummaryProps)
   return (
     <div className={classes.personSummaryWrapper}>
       <Heading
-        size='sm'
+        data-size='sm'
         level={2}
       >
         <Lang
diff --git a/src/layout/RadioButtons/ControlledRadioGroup.module.css b/src/layout/RadioButtons/ControlledRadioGroup.module.css
new file mode 100644
index 0000000000..68c3d39f5e
--- /dev/null
+++ b/src/layout/RadioButtons/ControlledRadioGroup.module.css
@@ -0,0 +1,5 @@
+.inlineRadioGroup {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ds-size-6);
+}
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 ecd30e0cd0..97eebc83e5 100644
--- a/src/layout/RadioButtons/ControlledRadioGroup.tsx
+++ b/src/layout/RadioButtons/ControlledRadioGroup.tsx
@@ -1,15 +1,19 @@
 import React from 'react';
 
-import { Radio } from '@digdir/designsystemet-react';
+import { Fieldset, useRadioGroup } from '@digdir/designsystemet-react';
+import cn from 'classnames';
 
 import { AltinnSpinner } from 'src/components/AltinnSpinner';
+import { ConditionalWrapper } from 'src/components/ConditionalWrapper';
 import { RadioButton } from 'src/components/form/RadioButton';
 import { LabelContent } from 'src/components/label/LabelContent';
 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,
+  });
+
   const leftColumnHeader = useNodeItem(node.parent instanceof LayoutNode ? node.parent : undefined, (i) =>
     i.type === 'Likert' ? i.textResourceBindings?.leftColumnHeader : undefined,
   );
@@ -74,35 +85,41 @@ 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({ [utilClasses.visuallyHidden]: overrideDisplay?.renderLegend === false })}>
+            {labelText}
+          </Fieldset.Legend>
+          <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'
+                  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..7f755a107c 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-subtle);
 }
 
 .hidden {
diff --git a/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx b/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx
index 221112d7f9..9185ba9d91 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/components/ConditionalWrapper';
 import { useResetScrollPosition } from 'src/core/ui/useResetScrollPosition';
@@ -17,11 +16,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
@@ -29,14 +26,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();
@@ -45,30 +39,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}
@@ -88,33 +82,28 @@ function RGPagination({ inTable = true }: RepeatingGroupPaginationProps) {
         currentPage={currentPage + 1}
         totalPages={totalPages}
         pagesWithErrors={pagesWithErrors}
-        onChange={onChange}
+        onChange={() => onChange}
+        setCurrentPage={setCurrentPage}
         compact={isTablet}
         hideLabels={isMobile}
-        size={isMini ? 'small' : 'medium'}
+        size={isMini ? 'sm' : 'md'}
       />
     </ConditionalWrapper>
   );
 }
-
 type PaginationComponentProps = {
   nextTextKey: string;
   backTextKey: string;
-  size: NonNullable<Parameters<typeof Pagination>[0]['size']>;
+  size: NonNullable<Parameters<typeof Pagination>[0]['data-size']>;
   compact: boolean;
   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,
@@ -124,13 +113,15 @@ function PaginationComponent({
   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();
 
@@ -138,71 +129,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..52424f1da0 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-subtle);*/
   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 3e290c02e7..d9ecd6e5c0 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,23 +44,21 @@ export function LargeGroupSummaryContainer({ groupNode, id, restriction, renderL
 
   return (
     <Fieldset
-      legend={
-        legend && (
-          <Heading
-            level={headingLevel}
-            size={headingSize}
-          >
-            <Lang
-              id={legend}
-              node={groupNode}
-            />
-          </Heading>
-        )
-      }
       className={cn(pageBreakStyles(item.pageBreak), classes.summary, {
         [classes.largeGroupContainer]: !isNested,
       })}
     >
+      <Fieldset.Legend>
+        <Heading
+          level={headingLevel}
+          data-size={headingSize}
+        >
+          <Lang
+            id={legend}
+            node={groupNode}
+          />
+        </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 cc6e59173a..8f213ea5ab 100644
--- a/src/layout/RepeatingGroup/Summary/__snapshots__/SummaryRepeatingGroup.test.tsx.snap
+++ b/src/layout/RepeatingGroup/Summary/__snapshots__/SummaryRepeatingGroup.test.tsx.snap
@@ -23,7 +23,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="second"
+        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 ae3677ab57..d85fadfbe5 100644
--- a/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.tsx
+++ b/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ErrorMessage, Heading } from '@digdir/designsystemet-react';
+import { Heading, ValidationMessage } from '@digdir/designsystemet-react';
 import { ExclamationmarkTriangleIcon } from '@navikt/aksel-icons';
 import cn from 'classnames';
 
@@ -64,7 +64,7 @@ export const RepeatingGroupSummary = ({
       data-testid='summary-repeating-group-component'
     >
       <Heading
-        size='xs'
+        daata-size='xs'
         level={4}
       >
         <Lang
@@ -103,8 +103,9 @@ export const RepeatingGroupSummary = ({
         })}
       </div>
       {errors?.map(({ message }) => (
-        <ErrorMessage
+        <ValidationMessage
           key={message.key}
+          data-size='sm'
           className={classes.errorMessage}
         >
           <ExclamationmarkTriangleIcon fontSize='1.5rem' />
@@ -113,7 +114,7 @@ export const RepeatingGroupSummary = ({
             params={message.params}
             node={componentNode}
           />
-        </ErrorMessage>
+        </ValidationMessage>
       ))}
     </div>
   );
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 7c7c28ff66..7737f229d5 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 { useTableComponentIds } from 'src/layout/RepeatingGroup/useTableComponen
 import { EditButtonById } from 'src/layout/Summary2/CommonSummaryComponents/EditButton';
 import { SingleValueSummary } from 'src/layout/Summary2/CommonSummaryComponents/SingleValueSummary';
 import { ComponentSummaryById } from 'src/layout/Summary2/SummaryComponent2/ComponentSummary';
+import utilClasses from 'src/styles/utils.module.css';
 import { useColumnStylesRepeatingGroups } from 'src/utils/formComponentUtils';
 import { DataModelLocationProvider, useDataModelLocationForRow } from 'src/utils/layout/DataModelLocation';
 import { useNode } from 'src/utils/layout/NodesContext';
@@ -90,7 +91,7 @@ export const RepeatingGroupTableSummary = ({
             ))}
             {!pdfModeActive && !isSmall && (
               <Table.HeaderCell className={tableClasses.narrowLastColumn}>
-                <span className={tableClasses.visuallyHidden}>
+                <span className={utilClasses.visuallyHidden}>
                   <Lang id='general.edit' />
                 </span>
               </Table.HeaderCell>
@@ -116,8 +117,9 @@ export const RepeatingGroupTableSummary = ({
         </Table.Body>
       </Table>
       {errors?.map(({ message }) => (
-        <ErrorMessage
+        <ValidationMessage
           key={message.key}
+          data-size='sm'
           className={classes.errorMessage}
         >
           <ExclamationmarkTriangleIcon fontSize='1.5rem' />
@@ -126,7 +128,7 @@ export const RepeatingGroupTableSummary = ({
             params={message.params}
             node={componentNode}
           />
-        </ErrorMessage>
+        </ValidationMessage>
       ))}
     </div>
   );
diff --git a/src/layout/RepeatingGroup/Table/RepeatingGroupTable.tsx b/src/layout/RepeatingGroup/Table/RepeatingGroupTable.tsx
index 7a3d517785..91c2a9538c 100644
--- a/src/layout/RepeatingGroup/Table/RepeatingGroupTable.tsx
+++ b/src/layout/RepeatingGroup/Table/RepeatingGroupTable.tsx
@@ -21,6 +21,7 @@ import classes from 'src/layout/RepeatingGroup/RepeatingGroup.module.css';
 import { RepeatingGroupTableRow } from 'src/layout/RepeatingGroup/Table/RepeatingGroupTableRow';
 import { RepeatingGroupTableTitle } from 'src/layout/RepeatingGroup/Table/RepeatingGroupTableTitle';
 import { useTableComponentIds } from 'src/layout/RepeatingGroup/useTableComponentIds';
+import utilClasses from 'src/styles/utils.module.css';
 import { useColumnStylesRepeatingGroups } from 'src/utils/formComponentUtils';
 import { DataModelLocationProvider, useDataModelLocationForRow } from 'src/utils/layout/DataModelLocation';
 import { LayoutNode } from 'src/utils/layout/LayoutNode';
@@ -124,14 +125,14 @@ export function RepeatingGroupTable(): React.JSX.Element | null {
               ))}
               {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/SimpleTable/SimpleTableComponent.tsx b/src/layout/SimpleTable/SimpleTableComponent.tsx
index 4734a71a41..d5e99bc3d5 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 e5736283e6..ab7a62e1c8 100644
--- a/src/layout/Subform/SubformComponent.tsx
+++ b/src/layout/Subform/SubformComponent.tsx
@@ -21,6 +21,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';
@@ -109,13 +110,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>
@@ -208,7 +209,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 35060e3df6..7d740a3228 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 ee839f3766..15cda8f3a3 100644
--- a/src/layout/Subform/Summary/SubformSummaryComponent2.tsx
+++ b/src/layout/Subform/Summary/SubformSummaryComponent2.tsx
@@ -114,8 +114,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 a8c54e20b2..6493d1d8b1 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 196f8b7bf7..88697c7513 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';
@@ -12,38 +12,34 @@ 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'
-            >
-              <PageSummary
-                pageId={layoutId}
-                key={layoutId}
-              />
-            </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'
+          >
+            <PageSummary
+              pageId={layoutId}
+              key={layoutId}
+            />
+          </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 095c92e01e..fb0035b5bc 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 { Lang } from 'src/features/language/Lang';
@@ -67,18 +67,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
@@ -101,13 +99,16 @@ 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}
                 node={componentNode}
               />
-            </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 647402625a..50a8330d96 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,13 +70,16 @@ 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}
             node={componentNode}
           />
-        </ErrorMessage>
+        </ValidationMessage>
       ))}
   </div>
 );
diff --git a/src/layout/Tabs/Tabs.module.css b/src/layout/Tabs/Tabs.module.css
index 669146ab41..92fc6bf1eb 100644
--- a/src/layout/Tabs/Tabs.module.css
+++ b/src/layout/Tabs/Tabs.module.css
@@ -1,9 +1,9 @@
 .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);
 }
diff --git a/src/layout/Tabs/Tabs.tsx b/src/layout/Tabs/Tabs.tsx
index 1e55cf013a..2fe9a5ede0 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,9 +104,6 @@ function TabHeader({
     <DesignsystemetTabs.Tab
       key={id}
       value={id}
-      style={{
-        backgroundColor: isActive ? 'white' : 'transparent',
-      }}
       tabIndex={0}
     >
       {!!icon && (
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 a79a8fbaec..34fe136e2c 100644
--- a/src/layout/Tabs/TabsSummary.tsx
+++ b/src/layout/Tabs/TabsSummary.tsx
@@ -39,7 +39,7 @@ export const TabsSummary = ({ componentNode }: TabsSummaryProps) => {
             className={classes.tabWrapper}
           >
             <Heading
-              size='xs'
+              data-size='xs'
               level={4}
             >
               <Lang
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 0c7d9f7960..97e76a0775 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;
@@ -219,6 +217,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 dabf8058a2..f1927fd106 100644
--- a/test/e2e/integration/component-library/checkboxes.ts
+++ b/test/e2e/integration/component-library/checkboxes.ts
@@ -25,7 +25,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);
   });
 });
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 542dfd64d4..e182a448e2 100644
--- a/test/e2e/integration/component-library/multiple-select.ts
+++ b/test/e2e/integration/component-library/multiple-select.ts
@@ -3,20 +3,43 @@ import { AppFrontend } from 'test/e2e/pageobjects/app-frontend';
 const appFrontend = new AppFrontend();
 
 describe('Multiple select component', () => {
-  it('Renders the summary2 component with correct text for MultipleSelext', () => {
+  it('Renders the summary2 component with correct text for MultipleSelect', () => {
     cy.startAppInstance(appFrontend.apps.componentLibrary, { authenticationLevel: '2' });
     cy.gotoNavPage('Flervalg');
 
     // Define the text for the last three checkboxes
-
     const checkboxText = 'Korte strekninger med bykjøring, eller annen moro';
 
     cy.get('#form-content-MultipleSelectPage-Checkboxes').click();
 
-    cy.get('div[role="listbox"]').contains('span', checkboxText).click();
+    cy.get('u-datalist').contains('u-option', 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('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');
+  });
 });
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 61813aca58..a0a692f065 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);
   });
 });
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 1cce2c7cfb..24fc560f1d 100644
--- a/test/e2e/integration/frontend-test/attachments-in-group.ts
+++ b/test/e2e/integration/frontend-test/attachments-in-group.ts
@@ -216,7 +216,9 @@ describe('Repeating group attachments', () => {
       }
     });
 
-    cy.get(appFrontend.group.saveMainGroup).click();
+    cy.findByRole('button', { name: /lagre og lukk/i })
+      .last()
+      .click();
     cy.get(appFrontend.group.saveMainGroup).should('not.exist');
     addNewRow();
     gotoSecondPage();
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 12ae9956e1..cbab527660 100644
--- a/test/e2e/integration/frontend-test/components.ts
+++ b/test/e2e/integration/frontend-test/components.ts
@@ -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,11 +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.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);
+      });
     cy.snapshot('helptext');
   });
 
@@ -375,17 +379,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', () => {
@@ -514,7 +517,7 @@ 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.findByRole('checkbox', { name: /Ja/ }).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');
   });
diff --git a/test/e2e/integration/frontend-test/grid.ts b/test/e2e/integration/frontend-test/grid.ts
index e29d5e0aee..14c182fa9e 100644
--- a/test/e2e/integration/frontend-test/grid.ts
+++ b/test/e2e/integration/frontend-test/grid.ts
@@ -16,7 +16,7 @@ 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');
@@ -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();
diff --git a/test/e2e/integration/frontend-test/group.ts b/test/e2e/integration/frontend-test/group.ts
index c891b2872c..1b34bd40b8 100644
--- a/test/e2e/integration/frontend-test/group.ts
+++ b/test/e2e/integration/frontend-test/group.ts
@@ -260,9 +260,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();
@@ -472,9 +472,9 @@ 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();
@@ -612,9 +612,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();
 
@@ -655,8 +655,8 @@ 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();
@@ -711,7 +711,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);
@@ -761,7 +761,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();
     }
 
@@ -777,7 +777,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');
@@ -790,7 +790,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);
@@ -798,7 +798,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');
@@ -807,7 +807,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
@@ -830,11 +830,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();
 
@@ -965,9 +965,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/mobile.ts b/test/e2e/integration/frontend-test/mobile.ts
index 7534e30d9c..4b17633af1 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();
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 11f723f0d1..116dcd0fc4 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();
@@ -212,9 +212,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 }) {
@@ -329,7 +329,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..9fc5e3d88a 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();
 
@@ -345,9 +345,9 @@ 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('checkbox', { name: appFrontend.group.prefill.stor }).blur();
     cy.findByRole('button', { name: /Neste/ }).clickAndGone();
     cy.navPage('repeating').should('have.attr', 'aria-current', 'page');
 
@@ -391,7 +391,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();
@@ -946,7 +946,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/payment-test/payment.ts b/test/e2e/integration/payment-test/payment.ts
index ee611ed294..05829788f9 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--warning')
           .should('exist')
           .and('be.visible')
           .within(() => {
diff --git a/test/e2e/integration/subform-test/subform.ts b/test/e2e/integration/subform-test/subform.ts
index b108eff0c0..a100b6641a 100644
--- a/test/e2e/integration/subform-test/subform.ts
+++ b/test/e2e/integration/subform-test/subform.ts
@@ -20,8 +20,8 @@ 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.get('[data-testid="NavigationButtons"] button.ds-btn--primary').contains('Neste').scrollIntoView();
+    cy.get('[data-testid="NavigationButtons"] button.ds-btn--primary').should('be.visible').click();
     cy.get('[data-testid="ErrorReport"]').should('be.visible');
 
     // Navigate to the subform page
diff --git a/test/e2e/pageobjects/app-frontend.ts b/test/e2e/pageobjects/app-frontend.ts
index 6672406a4d..7683a104d1 100644
--- a/test/e2e/pageobjects/app-frontend.ts
+++ b/test/e2e/pageobjects/app-frontend.ts
@@ -54,8 +54,8 @@ 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 navMenu = '#navigation-menu';
@@ -159,6 +159,7 @@ export class AppFrontend {
     reference: '#reference',
     reference2: '#reference2',
     dateOfEffect: '#dateOfEffect',
+    datePickerButton: /åpne datovelger/i,
     municipalityMetadata: '#kommuner-metadata',
     municipality: '#kommune',
     upload: '#fileUpload-changename',
@@ -188,11 +189,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/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/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 1dcad9f6a4..8262fd5abc 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();
   }
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/yarn.lock b/yarn.lock
index f4a2ca201b..cfb580567a 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"
@@ -2018,48 +2011,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.4":
+  version: 1.0.4
+  resolution: "@digdir/designsystemet-css@npm:1.0.4"
+  checksum: 10c0/3b6d541afa4d858dd48b18b4964b7ce3129e2241aaa46ab76abe967c721d7ab8a1b323701f1b5d84b3f9a4a4e358046abc74bfd3dd6966abc5e2ae9a380221ce
   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.4":
+  version: 1.0.4
+  resolution: "@digdir/designsystemet-react@npm:1.0.4"
+  dependencies:
+    "@floating-ui/dom": "npm:^1.6.13"
+    "@floating-ui/react": "npm:0.26.23"
+    "@navikt/aksel-icons": "npm:^7.18.0"
+    "@radix-ui/react-slot": "npm:^1.1.2"
+    "@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/bc8215fa18440c2340e34af86f24cc30f5ac84925e7b2a5a10085aa5693f514e42d0cd3bb430362a1adbfb960cb77fe2ebca379737d3d03d125edd21e0560b18
   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.4":
+  version: 1.0.4
+  resolution: "@digdir/designsystemet-theme@npm:1.0.4"
+  checksum: 10c0/ac8c9ec0419278e7aa74d12ed61c0c80cbeea3b3411f638840fa41b4c927b6e8a6a4fa381e555a17d1d776c0d35a4275e09b926afef0fa3ba6465ffa86db630a
   languageName: node
   linkType: hard
 
@@ -2376,7 +2358,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/react-dom@npm:^2.0.0, @floating-ui/react-dom@npm:^2.0.3":
+"@floating-ui/dom@npm:^1.6.13":
+  version: 1.6.13
+  resolution: "@floating-ui/dom@npm:1.6.13"
+  dependencies:
+    "@floating-ui/core": "npm:^1.6.0"
+    "@floating-ui/utils": "npm:^0.2.9"
+  checksum: 10c0/272242d2eb6238ffcee0cb1f3c66e0eafae804d5d7b449db5ecf904bc37d31ad96cf575a9e650b93c1190f64f49a684b1559d10e05ed3ec210628b19116991a9
+  languageName: node
+  linkType: hard
+
+"@floating-ui/react-dom@npm:^2.1.1":
   version: 2.1.2
   resolution: "@floating-ui/react-dom@npm:2.1.2"
   dependencies:
@@ -2388,42 +2380,28 @@ __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
+  checksum: 10c0/d339c3d760e83c8384a16c8a38fb47f7f855a3db4d19117fd54cccbf871a27b089887202074e9871ffc19ad769bed709ecdd69445a39d2ea9406c84814427f3b
   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
+"@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
   languageName: node
   linkType: hard
 
-"@floating-ui/utils@npm:^0.2.0, @floating-ui/utils@npm:^0.2.8":
+"@floating-ui/utils@npm:^0.2.8":
   version: 0.2.8
   resolution: "@floating-ui/utils@npm:0.2.8"
   checksum: 10c0/a8cee5f17406c900e1c3ef63e3ca89b35e7a2ed645418459a73627b93b7377477fc888081011c6cd177cac45ec2b92a6cab018c14ea140519465498dddd2d3f9
@@ -2833,14 +2811,14 @@ __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
+"@navikt/aksel-icons@npm:^7.17.4":
+  version: 7.18.0
+  resolution: "@navikt/aksel-icons@npm:7.18.0"
+  checksum: 10c0/367af40b56b820aaf6f93eecbc9e2e9e0919615b2dfede778608f26489f7369c7c3de40b65362df741925aecc0eb31b929e80085d54e53348fe324f59b566eee
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@npm:^7.17.4":
+"@navikt/aksel-icons@npm:^7.18.0":
   version: 7.20.0
   resolution: "@navikt/aksel-icons@npm:7.20.0"
   checksum: 10c0/af35281a207a73bd1d14dd1703d1db8cc794435bc775bda0da39ed4ecc7cfb7218cebfc3052c26a69c8d3b5c25761e010a7f623fc7a595b80f0e55b113551b39
@@ -3166,31 +3144,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-compose-refs@npm:1.1.0":
-  version: 1.1.0
-  resolution: "@radix-ui/react-compose-refs@npm:1.1.0"
+"@radix-ui/react-compose-refs@npm:1.1.2":
+  version: 1.1.2
+  resolution: "@radix-ui/react-compose-refs@npm:1.1.2"
   peerDependencies:
     "@types/react": "*"
     react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/7e18706084397d9458ca3473d8565b10691da06f6499a78edbcc4bd72cde08f62e91120658d17d58c19fc39d6b1dffe0133cc4535c8f5fce470abd478f6107e5
+  checksum: 10c0/d36a9c589eb75d634b9b139c80f916aadaf8a68a7c1c4b8c6c6b88755af1a92f2e343457042089f04cc3f23073619d08bb65419ced1402e9d4e299576d970771
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:^1.0.2":
-  version: 1.1.0
-  resolution: "@radix-ui/react-slot@npm:1.1.0"
+"@radix-ui/react-slot@npm:^1.1.2":
+  version: 1.2.0
+  resolution: "@radix-ui/react-slot@npm:1.2.0"
   dependencies:
-    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
   peerDependencies:
     "@types/react": "*"
     react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/a2e8bfb70c440506dd84a1a274f9a8bc433cca37ceae275e53552c9122612e3837744d7fc6f113d6ef1a11491aa914f4add71d76de41cb6d4db72547a8e261ae
+  checksum: 10c0/f1455f36479e87a0a2254fc2e2b2aba6740d1fbcada949071210bf2a009a031ad508ac01b544bce96337bcca82f49531b46c71615141a5985aaa11ae69b967b1
   languageName: node
   linkType: hard
 
@@ -3451,22 +3429,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/react-virtual@npm:^3.2.0":
-  version: 3.10.8
-  resolution: "@tanstack/react-virtual@npm:3.10.8"
+"@tanstack/react-virtual@npm:^3.13.6":
+  version: 3.13.6
+  resolution: "@tanstack/react-virtual@npm:3.13.6"
   dependencies:
-    "@tanstack/virtual-core": "npm:3.10.8"
+    "@tanstack/virtual-core": "npm:3.13.6"
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/b7aec88ef48f604d3e7245b9996ba42f06e6ee2c1a45146cb96814cb3873a4c888bf86d26d10284c847a5ed97e16dc9430c380387abc1231c2e43c00f6ebadff
+    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
   languageName: node
   linkType: hard
 
-"@tanstack/virtual-core@npm:3.10.8":
-  version: 3.10.8
-  resolution: "@tanstack/virtual-core@npm:3.10.8"
-  checksum: 10c0/ddb97cd03d84b343b38a2c14d85e33c788f4af622fccc0fdf997caf4e83e47e8f67b099b854c7dc4337d7662f647625ab3247cd8aa1bc9d4dda701bda83245f6
+"@tanstack/virtual-core@npm:3.13.6":
+  version: 3.13.6
+  resolution: "@tanstack/virtual-core@npm:3.13.6"
+  checksum: 10c0/9c40af4deccf0fadc5c371f4e659f1aff221db0ede9664ee7cf3642a2d05f6f1c9494605f3606f70d7c8948dc22e50c48519a8435d0e845f1b1f34c9353722c8
   languageName: node
   linkType: hard
 
@@ -4325,6 +4303,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"
@@ -4853,10 +4852,9 @@ __metadata:
     "@babel/runtime": "npm:7.27.0"
     "@babel/runtime-corejs3": "npm:7.27.0"
     "@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.4"
+    "@digdir/designsystemet-react": "npm:1.0.4"
+    "@digdir/designsystemet-theme": "npm:1.0.4"
     "@eslint/compat": "npm:1.2.8"
     "@faker-js/faker": "npm:9.7.0"
     "@navikt/aksel-icons": "npm:^7.17.4"
@@ -13920,7 +13918,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:
@@ -14253,18 +14251,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"
@@ -16010,7 +15996,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