diff --git a/src/.eslintrc.json b/src/.eslintrc.json
index 4f29360def..1f1f524973 100644
--- a/src/.eslintrc.json
+++ b/src/.eslintrc.json
@@ -59,7 +59,7 @@
     "import/no-unresolved": ["off"],
     "@typescript-eslint/no-unused-vars": [
       "error",
-      { "ignoreRestSiblings": true }
+      { "ignoreRestSiblings": true, "argsIgnorePattern": "^_" }
     ],
     "@typescript-eslint/consistent-type-imports": ["warn"],
     "react-hooks/exhaustive-deps": ["error"],
diff --git a/src/altinn-app-frontend/package.json b/src/altinn-app-frontend/package.json
index 5fb0a95a9e..6d376a181a 100644
--- a/src/altinn-app-frontend/package.json
+++ b/src/altinn-app-frontend/package.json
@@ -18,7 +18,7 @@
   "author": "Altinn",
   "license": "3-Clause BSD",
   "dependencies": {
-    "@altinn/altinn-design-system": "0.1.4",
+    "@altinn/altinn-design-system": "^0.2.0",
     "@babel/polyfill": "^7.12.1",
     "@date-io/moment": "1.3.13",
     "@material-ui/core": "^4.12.4",
diff --git a/src/altinn-app-frontend/src/components/GenericComponent.tsx b/src/altinn-app-frontend/src/components/GenericComponent.tsx
index fe40329632..242e44aa49 100644
--- a/src/altinn-app-frontend/src/components/GenericComponent.tsx
+++ b/src/altinn-app-frontend/src/components/GenericComponent.tsx
@@ -101,6 +101,7 @@ export function GenericComponent<Type extends ComponentExceptGroup>(
   const { id, ...passThroughProps } = props;
   const dispatch = useAppDispatch();
   const classes = useStyles(props);
+  const gridRef = React.useRef<HTMLDivElement>();
   const GetHiddenSelector = makeGetHidden();
   const GetFocusSelector = makeGetFocus();
   const [hasValidationMessages, setHasValidationMessages] =
@@ -154,6 +155,20 @@ export function GenericComponent<Type extends ComponentExceptGroup>(
     );
   }, [componentValidations]);
 
+  React.useLayoutEffect(() => {
+    if (!hidden && shouldFocus && gridRef.current) {
+      gridRef.current.scrollIntoView();
+
+      const maybeInput = gridRef.current.querySelector(
+        'input,textarea,select',
+      ) as HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement;
+      if (maybeInput) {
+        maybeInput.focus();
+      }
+      dispatch(FormLayoutActions.updateFocus({ focusComponentId: null }));
+    }
+  }, [shouldFocus, hidden, dispatch]);
+
   if (hidden) {
     return null;
   }
@@ -199,15 +214,6 @@ export function GenericComponent<Type extends ComponentExceptGroup>(
     );
   };
 
-  const handleFocusUpdate = (componentId: string, step?: number) => {
-    dispatch(
-      FormLayoutActions.updateFocus({
-        currentComponentId: componentId,
-        step: step || 0,
-      }),
-    );
-  };
-
   const getValidationsForInternalHandling = () => {
     if (
       props.type === 'AddressComponent' ||
@@ -288,7 +294,6 @@ export function GenericComponent<Type extends ComponentExceptGroup>(
 
   const componentProps = {
     handleDataChange,
-    handleFocusUpdate,
     getTextResource: getTextResourceWrapper,
     getTextResourceAsString,
     formData,
@@ -332,6 +337,7 @@ export function GenericComponent<Type extends ComponentExceptGroup>(
   return (
     <FormComponentContext.Provider value={formComponentContext}>
       <Grid
+        ref={gridRef}
         item={true}
         container={true}
         {...gridBreakpoints(props.grid)}
diff --git a/src/altinn-app-frontend/src/components/base/CheckboxesContainerComponent.md b/src/altinn-app-frontend/src/components/base/CheckboxesContainerComponent.md
index 2e487d27ce..a30edb7aca 100644
--- a/src/altinn-app-frontend/src/components/base/CheckboxesContainerComponent.md
+++ b/src/altinn-app-frontend/src/components/base/CheckboxesContainerComponent.md
@@ -1,10 +1,12 @@
 Simple checkbox with 3 options
 
 ```tsx
-import {CheckboxContainerComponent} from './CheckboxesContainerComponent';
+import { CheckboxContainerComponent } from './CheckboxesContainerComponent';
 import Legend from '../../features/form/components/Legend';
-import {nb} from '../../shared/resources/language/texts/nb';
-const dummyFunc = () => {return;}
+import { nb } from '../../shared/resources/language/texts/nb';
+const dummyFunc = () => {
+  return;
+};
 
 const legend = () => {
   return (
@@ -15,13 +17,12 @@ const legend = () => {
       helpTextProps={{}}
     />
   );
-}
+};
 
 const props = {
   id: 'simpleCheckbox',
   formData: '',
   handleDataChange: dummyFunc,
-  handleFocusUpdate: dummyFunc,
   isValid: true,
   validationMessages: {},
   options: [
@@ -44,9 +45,5 @@ const props = {
   legend,
 };
 
-<CheckboxContainerComponent
-  {...props}
-/>
-
+<CheckboxContainerComponent {...props} />;
 ```
-
diff --git a/src/altinn-app-frontend/src/components/base/CheckboxesContainerComponent.test.tsx b/src/altinn-app-frontend/src/components/base/CheckboxesContainerComponent.test.tsx
index e923497e91..9a17ffa136 100644
--- a/src/altinn-app-frontend/src/components/base/CheckboxesContainerComponent.test.tsx
+++ b/src/altinn-app-frontend/src/components/base/CheckboxesContainerComponent.test.tsx
@@ -42,7 +42,6 @@ const render = (
     validationMessages: {},
     legend: 'legend',
     handleDataChange: jest.fn(),
-    handleFocusUpdate: jest.fn(),
     getTextResource: (value) => value,
     getTextResourceAsString: (value) => value,
     ...({} as IComponentProps),
diff --git a/src/altinn-app-frontend/src/components/base/CheckboxesContainerComponent.tsx b/src/altinn-app-frontend/src/components/base/CheckboxesContainerComponent.tsx
index aadaf63447..389403c809 100644
--- a/src/altinn-app-frontend/src/components/base/CheckboxesContainerComponent.tsx
+++ b/src/altinn-app-frontend/src/components/base/CheckboxesContainerComponent.tsx
@@ -85,7 +85,6 @@ export const CheckboxContainerComponent = ({
   formData,
   preselectedOptionIndex,
   handleDataChange,
-  handleFocusUpdate,
   layout,
   legend,
   getTextResourceAsString,
@@ -146,7 +145,6 @@ export const CheckboxContainerComponent = ({
     } else {
       handleDataChange(selected.concat(clickedItem).join(','));
     }
-    handleFocusUpdate(id);
   };
 
   const handleBlur = () => {
diff --git a/src/altinn-app-frontend/src/components/base/RadioButtons/ControlledRadioGroup.tsx b/src/altinn-app-frontend/src/components/base/RadioButtons/ControlledRadioGroup.tsx
index 06c4ede00d..3bed2e8b2d 100644
--- a/src/altinn-app-frontend/src/components/base/RadioButtons/ControlledRadioGroup.tsx
+++ b/src/altinn-app-frontend/src/components/base/RadioButtons/ControlledRadioGroup.tsx
@@ -28,7 +28,6 @@ export const ControlledRadioGroup = ({
   id,
   layout,
   legend,
-  shouldFocus,
   getTextResource,
   validationMessages,
   fetchingOptions,
@@ -66,11 +65,7 @@ export const ControlledRadioGroup = ({
           {calculatedOptions.map((option: any, index: number) => (
             <React.Fragment key={index}>
               <FormControlLabel
-                control={
-                  <StyledRadio
-                    autoFocus={shouldFocus && selected === option.value}
-                  />
-                }
+                control={<StyledRadio />}
                 label={getTextResource(option.label)}
                 value={option.value}
                 classes={{ root: cn(classes.margin) }}
diff --git a/src/altinn-app-frontend/src/components/base/RadioButtons/RadioButtonsContainerComponent.test.tsx b/src/altinn-app-frontend/src/components/base/RadioButtons/RadioButtonsContainerComponent.test.tsx
index ae68fbbd82..cfb4670a60 100644
--- a/src/altinn-app-frontend/src/components/base/RadioButtons/RadioButtonsContainerComponent.test.tsx
+++ b/src/altinn-app-frontend/src/components/base/RadioButtons/RadioButtonsContainerComponent.test.tsx
@@ -41,7 +41,6 @@ const render = (
     preselectedOptionIndex: undefined,
     legend: 'legend',
     handleDataChange: jest.fn(),
-    handleFocusUpdate: jest.fn(),
     getTextResource: (value) => value,
     ...({} as IComponentProps),
     ...props,
diff --git a/src/altinn-app-frontend/src/components/base/RadioButtons/radioButtonsUtils.ts b/src/altinn-app-frontend/src/components/base/RadioButtons/radioButtonsUtils.ts
index 64f059a81e..455d0d85c7 100644
--- a/src/altinn-app-frontend/src/components/base/RadioButtons/radioButtonsUtils.ts
+++ b/src/altinn-app-frontend/src/components/base/RadioButtons/radioButtonsUtils.ts
@@ -54,10 +54,8 @@ export const useRadioStyles = makeStyles((theme) => ({
 }));
 
 export const useRadioButtons = ({
-  id,
   optionsId,
   options,
-  handleFocusUpdate,
   handleDataChange,
   preselectedOptionIndex,
   formData,
@@ -103,7 +101,6 @@ export const useRadioButtons = ({
   }, [handleDataChange, optionsHasChanged, formData]);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    handleFocusUpdate(id);
     handleDataChange(event.target.value);
   };
 
diff --git a/src/altinn-app-frontend/src/components/custom/CustomWebComponent.test.tsx b/src/altinn-app-frontend/src/components/custom/CustomWebComponent.test.tsx
index d5f520ed22..ec24b98c28 100644
--- a/src/altinn-app-frontend/src/components/custom/CustomWebComponent.test.tsx
+++ b/src/altinn-app-frontend/src/components/custom/CustomWebComponent.test.tsx
@@ -39,7 +39,6 @@ describe('CustomWebComponent', () => {
         title: 'Title',
       },
       handleDataChange: (value: string) => value,
-      handleFocusUpdate: jest.fn(),
       getTextResource: (key: string) => {
         return key;
       },
diff --git a/src/altinn-app-frontend/src/components/index.ts b/src/altinn-app-frontend/src/components/index.ts
index 5986eeeb4a..ea2d9952e6 100644
--- a/src/altinn-app-frontend/src/components/index.ts
+++ b/src/altinn-app-frontend/src/components/index.ts
@@ -63,7 +63,6 @@ export interface IComponentProps extends IGenericComponentProps {
     skipValidation?: boolean,
     checkIfRequired?: boolean,
   ) => void;
-  handleFocusUpdate: (componentId: string, step?: number) => void;
   getTextResource: (key: string) => React.ReactNode;
   getTextResourceAsString: (key: string) => string;
   language: ILanguage;
diff --git a/src/altinn-app-frontend/src/components/message/ErrorReport.test.tsx b/src/altinn-app-frontend/src/components/message/ErrorReport.test.tsx
index 235a7e6958..0d21740c63 100644
--- a/src/altinn-app-frontend/src/components/message/ErrorReport.test.tsx
+++ b/src/altinn-app-frontend/src/components/message/ErrorReport.test.tsx
@@ -11,11 +11,6 @@ import type { IValidations } from 'src/types';
 import { getParsedLanguageFromText } from 'altinn-shared/utils';
 
 describe('ErrorReport', () => {
-  const genericErrorText =
-    getInitialStateMock().language.language.form_filler[
-      'error_report_description'
-    ];
-
   const render = (validations: Partial<IValidations>) => {
     const mockValidationState: IValidationState = {
       validations: {
@@ -29,27 +24,17 @@ describe('ErrorReport', () => {
       formValidations: mockValidationState,
     });
 
-    return renderWithProviders(<ErrorReport />, {
+    return renderWithProviders(<ErrorReport components={[]} />, {
       preloadedState: initialState,
     });
   };
 
-  it('should render generic error message by default', () => {
-    const validations = {
-      page1: {
-        someComponent: {
-          simpleBinding: {
-            errors: [getParsedLanguageFromText('some error')],
-          },
-        },
-      },
-    };
-    render(validations);
-
-    expect(screen.getByText(genericErrorText)).toBeInTheDocument();
+  it('should not render when there are no errors', () => {
+    render({});
+    expect(screen.queryByTestId('ErrorReport')).not.toBeInTheDocument();
   });
 
-  it('should list unmapped errors if present and hide generic error message', () => {
+  it('should list unmapped errors as unclickable', () => {
     const validations = {
       unmapped: {
         // unmapped layout
@@ -64,8 +49,31 @@ describe('ErrorReport', () => {
     };
 
     render(validations);
+    expect(screen.getByTestId('ErrorReport')).toBeInTheDocument();
+
+    // Unmapped errors should not be clickable
+    const errorNode = screen.getByText('some unmapped error');
+    expect(errorNode).toBeInTheDocument();
+    expect(errorNode.parentElement.tagName).toEqual('LI');
+  });
+
+  it('should list mapped error as clickable', () => {
+    const validations = {
+      page1: {
+        someComponent: {
+          simpleBinding: {
+            errors: [getParsedLanguageFromText('some mapped error')],
+          },
+        },
+      },
+    };
+
+    render(validations);
+    expect(screen.getByTestId('ErrorReport')).toBeInTheDocument();
 
-    expect(screen.queryByText(genericErrorText)).not.toBeInTheDocument();
-    expect(screen.getByText('some unmapped error')).toBeInTheDocument();
+    const errorNode = screen.getByText('some mapped error');
+    expect(errorNode).toBeInTheDocument();
+    expect(errorNode.parentElement.parentElement.tagName).toEqual('LI');
+    expect(errorNode.parentElement.tagName).toEqual('BUTTON');
   });
 });
diff --git a/src/altinn-app-frontend/src/components/message/ErrorReport.tsx b/src/altinn-app-frontend/src/components/message/ErrorReport.tsx
index d773484021..09d60f012a 100644
--- a/src/altinn-app-frontend/src/components/message/ErrorReport.tsx
+++ b/src/altinn-app-frontend/src/components/message/ErrorReport.tsx
@@ -1,128 +1,141 @@
 import * as React from 'react';
 
-import { useAppSelector } from 'src/common/hooks';
-import { getUnmappedErrors } from 'src/utils/validation';
-import type { IValidations } from 'src/types';
+import { Panel, PanelVariant } from '@altinn/altinn-design-system';
+import { Grid, makeStyles } from '@material-ui/core';
+
+import { useAppDispatch, useAppSelector } from 'src/common/hooks';
+import { FullWidthWrapper } from 'src/features/form/components/FullWidthWrapper';
+import { renderLayoutComponent } from 'src/features/form/containers/Form';
+import { FormLayoutActions } from 'src/features/form/layout/formLayoutSlice';
+import { getMappedErrors, getUnmappedErrors } from 'src/utils/validation';
+import type { ILayout } from 'src/features/form/layout';
+import type { FlatError } from 'src/utils/validation';
 
 import { getLanguageFromKey } from 'altinn-shared/utils';
 
-const ErrorReport = () => {
-  const validations = useAppSelector(
-    (state) => state.formValidations.validations,
+export interface IErrorReportProps {
+  components: ILayout;
+}
+
+const ArrowForwardIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" style="position: relative; top: 2px">
+  <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path>
+</svg>`;
+
+const useStyles = makeStyles((theme) => ({
+  errorList: {
+    listStylePosition: 'inside',
+    listStyleImage: `url("data:image/svg+xml,${encodeURIComponent(
+      ArrowForwardIcon,
+    )}")`,
+    '& > li': {
+      marginBottom: theme.spacing(1),
+    },
+  },
+  buttonAsInvisibleLink: {
+    backgroundColor: 'transparent',
+    border: 'none',
+    cursor: 'pointer',
+    textDecoration: 'none',
+    display: 'inline',
+    margin: 0,
+    padding: 0,
+  },
+}));
+
+const ErrorReport = ({ components }: IErrorReportProps) => {
+  const classes = useStyles();
+  const dispatch = useAppDispatch();
+  const currentView = useAppSelector(
+    (state) => state.formLayout.uiConfig.currentView,
   );
-  const unmappedErrors = getUnmappedErrors(validations);
-  const hasUnmappedErrors = unmappedErrors.length > 0;
+  const [errorsMapped, errorsUnmapped] = useAppSelector((state) => [
+    getMappedErrors(state.formValidations.validations),
+    getUnmappedErrors(state.formValidations.validations),
+  ]);
   const language = useAppSelector((state) => state.language.language);
-  const formHasErrors = useAppSelector((state) =>
-    getFormHasErrors(state.formValidations.validations),
-  );
-  const hasSubmitted = useAppSelector((state) => state.formData.hasSubmitted);
-  const errorRef = React.useRef(null);
-
-  React.useEffect(() => {
-    if (hasSubmitted) {
-      errorRef?.current?.focus();
-    }
-  }, [hasSubmitted, unmappedErrors]);
+  const hasErrors = errorsUnmapped.length > 0 || errorsMapped.length > 0;
 
-  if (!formHasErrors) {
+  if (!hasErrors) {
     return null;
   }
 
+  const handleErrorClick =
+    (error: FlatError) => (ev: React.KeyboardEvent | React.MouseEvent) => {
+      if (
+        ev.type === 'keydown' &&
+        (ev as React.KeyboardEvent).key !== 'Enter'
+      ) {
+        return;
+      }
+      ev.preventDefault();
+      if (currentView === error.layout) {
+        dispatch(
+          FormLayoutActions.updateFocus({
+            focusComponentId: error.componentId,
+          }),
+        );
+      } else {
+        dispatch(
+          FormLayoutActions.updateCurrentView({
+            newView: error.layout,
+            runValidations: null,
+            returnToView: currentView,
+            focusComponentId: error.componentId,
+          }),
+        );
+      }
+    };
+
   return (
-    <div
+    <Grid
       data-testid='ErrorReport'
-      id='errorReport'
-      className='a-modal-content-target'
-      style={{ marginTop: '55px' }}
-      ref={errorRef}
-      tabIndex={-1}
+      item={true}
+      xs={12}
     >
-      <div className='a-page a-current-page'>
-        <div className='modalPage'>
-          <div className='modal-content'>
-            <div
-              className='modal-body'
-              style={{ paddingBottom: '0px' }}
+      <FullWidthWrapper isOnBottom={true}>
+        <Panel
+          title={getLanguageFromKey(
+            'form_filler.error_report_header',
+            language,
+          )}
+          showIcon={false}
+          variant={PanelVariant.Error}
+        >
+          <Grid
+            container={true}
+            item={true}
+            spacing={3}
+            alignItems='flex-start'
+          >
+            <Grid
+              item
+              xs={12}
             >
-              <div
-                className='a-iconText'
-                style={{ minHeight: '60px' }}
-              >
-                <div className='a-iconText-icon'>
-                  <i
-                    className='ai ai-circle-exclamation a-icon'
-                    style={{
-                      color: '#E23B53',
-                      fontSize: '4em',
-                      marginLeft: '12px',
-                    }}
-                    aria-hidden='true'
-                  />
-                </div>
-                <h2
-                  className='a-fontReg'
-                  style={{ marginBottom: '0px', marginLeft: '12px' }}
-                >
-                  <span className='a-iconText-text-large'>
-                    {getLanguageFromKey(
-                      'form_filler.error_report_header',
-                      language,
-                    )}
-                  </span>
-                </h2>
-              </div>
-            </div>
-            <div
-              className='modal-body a-modal-body'
-              style={{ paddingTop: '0px', paddingBottom: '24px' }}
-            >
-              {hasUnmappedErrors && (
-                <div>
-                  <ul style={{ listStylePosition: 'inside' }}>
-                    {unmappedErrors.map(
-                      (error: React.ReactNode, index: number) => {
-                        return <li key={index}>{error}</li>;
-                      },
-                    )}
-                  </ul>
-                </div>
-              )}
-              {!hasUnmappedErrors && (
-                // No errors to list, show a generic error message
-                <h4
-                  className='a-fontReg'
-                  style={{ marginBottom: '12px' }}
-                >
-                  <span>
-                    {getLanguageFromKey(
-                      'form_filler.error_report_description',
-                      language,
-                    )}
-                  </span>
-                </h4>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+              <ul className={classes.errorList}>
+                {errorsUnmapped.map((error: React.ReactNode, index: number) => (
+                  <li key={`unmapped-${index}`}>{error}</li>
+                ))}
+                {errorsMapped.map((error) => (
+                  <li key={`mapped-${error.componentId}`}>
+                    <button
+                      className={classes.buttonAsInvisibleLink}
+                      onClick={handleErrorClick(error)}
+                      onKeyDown={handleErrorClick(error)}
+                    >
+                      {error.message}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </Grid>
+            {components.map((component) => {
+              return renderLayoutComponent(component, []);
+            })}
+          </Grid>
+        </Panel>
+      </FullWidthWrapper>
+    </Grid>
   );
 };
 
-const getFormHasErrors = (validations: IValidations): boolean => {
-  for (const layout in validations) {
-    for (const key in validations[layout]) {
-      const validationObject = validations[layout][key];
-      for (const fieldKey in validationObject) {
-        const fieldValidationErrors = validationObject[fieldKey].errors;
-        if (fieldValidationErrors && fieldValidationErrors.length > 0) {
-          return true;
-        }
-      }
-    }
-  }
-  return false;
-};
-
 export default ErrorReport;
diff --git a/src/altinn-app-frontend/src/components/presentation/NavigationButtons.tsx b/src/altinn-app-frontend/src/components/presentation/NavigationButtons.tsx
index 2b71e5d3c7..0e534c4dbb 100644
--- a/src/altinn-app-frontend/src/components/presentation/NavigationButtons.tsx
+++ b/src/altinn-app-frontend/src/components/presentation/NavigationButtons.tsx
@@ -3,12 +3,14 @@ import * as React from 'react';
 import { Grid, makeStyles } from '@material-ui/core';
 import classNames from 'classnames';
 
+import type { IComponentProps } from '..';
+
 import { useAppDispatch, useAppSelector } from 'src/common/hooks';
 import { FormLayoutActions } from 'src/features/form/layout/formLayoutSlice';
 import { Triggers } from 'src/types';
 import { getTextFromAppOrDefault } from 'src/utils/textResource';
-import type { IComponentProps } from 'src/components';
 import type { ILayoutCompNavButtons } from 'src/features/form/layout';
+import type { IKeepComponentScrollPos } from 'src/features/form/layout/formLayoutTypes';
 import type { ILayoutNavigation, INavigationConfig } from 'src/types';
 
 import { AltinnButton } from 'altinn-shared/components';
@@ -25,6 +27,14 @@ export type INavigationButtons = IComponentProps &
 export function NavigationButtons(props: INavigationButtons) {
   const classes = useStyles();
   const dispatch = useAppDispatch();
+
+  const refPrev = React.useRef<HTMLButtonElement>();
+  const refNext = React.useRef<HTMLButtonElement>();
+
+  const keepScrollPos = useAppSelector(
+    (state) => state.formLayout.uiConfig.keepScrollPos,
+  );
+
   const [disableBack, setDisableBack] = React.useState<boolean>(false);
   const [disableNext, setDisableNext] = React.useState<boolean>(false);
   const currentView = useAppSelector(
@@ -73,6 +83,10 @@ export function NavigationButtons(props: INavigationButtons) {
     }
   };
 
+  const getScrollPosition = React.useCallback(() => {
+    return (refNext.current || refPrev.current)?.getClientRects().item(0)?.y;
+  }, []);
+
   const OnClickNext = () => {
     const runPageValidations =
       !returnToView && triggers?.includes(Triggers.ValidatePage);
@@ -82,10 +96,16 @@ export function NavigationButtons(props: INavigationButtons) {
       (runAllValidations && 'allPages') ||
       (runPageValidations && 'page') ||
       null;
+    const keepScrollPosAction: IKeepComponentScrollPos = {
+      componentId: props.id,
+      offsetTop: getScrollPosition(),
+    };
+
     if (triggers?.includes(Triggers.CalculatePageOrder)) {
       dispatch(
         FormLayoutActions.calculatePageOrderAndMoveToNextPage({
           runValidations,
+          keepScrollPos: keepScrollPosAction,
         }),
       );
     } else {
@@ -98,14 +118,34 @@ export function NavigationButtons(props: INavigationButtons) {
           FormLayoutActions.updateCurrentView({
             newView: goToView,
             runValidations,
+            keepScrollPos: keepScrollPosAction,
           }),
         );
       }
     }
   };
 
+  React.useLayoutEffect(() => {
+    if (
+      !keepScrollPos ||
+      typeof keepScrollPos.offsetTop !== 'number' ||
+      keepScrollPos.componentId !== props.id
+    ) {
+      return;
+    }
+
+    const currentPos = getScrollPosition();
+    if (typeof currentPos !== 'number') {
+      return;
+    }
+
+    window.scrollBy({ top: currentPos - keepScrollPos.offsetTop });
+    dispatch(FormLayoutActions.clearKeepScrollPos());
+  }, [keepScrollPos, dispatch, props.id, getScrollPosition]);
+
   return (
     <Grid
+      data-testid='NavigationButtons'
       container={true}
       justifyContent='space-between'
     >
@@ -115,6 +155,7 @@ export function NavigationButtons(props: INavigationButtons) {
       >
         {!disableBack && props.showBackButton && (
           <AltinnButton
+            ref={refPrev}
             btnText={getTextFromAppOrDefault(
               backTextKey,
               textResources,
@@ -129,6 +170,7 @@ export function NavigationButtons(props: INavigationButtons) {
         )}
         {!disableNext && (
           <AltinnButton
+            ref={refNext}
             btnText={getTextFromAppOrDefault(
               nextTextKey,
               textResources,
diff --git a/src/altinn-app-frontend/src/components/summary/SummaryComponent.test.tsx b/src/altinn-app-frontend/src/components/summary/SummaryComponent.test.tsx
index 0a00640110..91e6863a60 100644
--- a/src/altinn-app-frontend/src/components/summary/SummaryComponent.test.tsx
+++ b/src/altinn-app-frontend/src/components/summary/SummaryComponent.test.tsx
@@ -121,6 +121,7 @@ describe('SummaryComponent', () => {
       newView: pageId,
       runValidations: null,
       returnToView: 'otherPage',
+      focusComponentId: defaultId,
     });
   });
 
diff --git a/src/altinn-app-frontend/src/components/summary/SummaryComponent.tsx b/src/altinn-app-frontend/src/components/summary/SummaryComponent.tsx
index 6a2aab493a..118e80218a 100644
--- a/src/altinn-app-frontend/src/components/summary/SummaryComponent.tsx
+++ b/src/altinn-app-frontend/src/components/summary/SummaryComponent.tsx
@@ -135,6 +135,7 @@ export function SummaryComponent({
         newView: pageRef,
         runValidations: null,
         returnToView: summaryPageName,
+        focusComponentId: componentRef,
       }),
     );
   };
diff --git a/src/altinn-app-frontend/src/features/form/components/FullWidthWrapper.tsx b/src/altinn-app-frontend/src/features/form/components/FullWidthWrapper.tsx
index 929769eb35..8ee5a9bb3d 100644
--- a/src/altinn-app-frontend/src/features/form/components/FullWidthWrapper.tsx
+++ b/src/altinn-app-frontend/src/features/form/components/FullWidthWrapper.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 
 import { makeStyles } from '@material-ui/core';
+import cn from 'classnames';
 
 export interface IFullWidthWrapperProps {
   children?: React.ReactNode;
+  isOnBottom?: boolean;
 }
 
 const useStyles = makeStyles({
@@ -19,14 +21,25 @@ const useStyles = makeStyles({
       marginRight: '-96px',
     },
   },
+  consumeBottomPadding: {
+    marginBottom: '-24px',
+    '@media (min-width: 768px)': {
+      marginBottom: '-36px',
+    },
+  },
 });
 
-export function FullWidthWrapper({ children }: IFullWidthWrapperProps) {
+export function FullWidthWrapper({
+  children,
+  isOnBottom = false,
+}: IFullWidthWrapperProps) {
   const classes = useStyles();
 
   return (
     <div
-      className={classes.fullWidthWrapper}
+      className={cn(classes.fullWidthWrapper, {
+        [classes.consumeBottomPadding]: isOnBottom,
+      })}
       data-testid='fullWidthWrapper'
     >
       {children}
diff --git a/src/altinn-app-frontend/src/features/form/components/Panel.test.tsx b/src/altinn-app-frontend/src/features/form/components/Panel.test.tsx
index a6e84b057e..6afff00b46 100644
--- a/src/altinn-app-frontend/src/features/form/components/Panel.test.tsx
+++ b/src/altinn-app-frontend/src/features/form/components/Panel.test.tsx
@@ -35,6 +35,12 @@ describe('Panel', () => {
     it('should return PanelVariant.Info when no variant is passed', () => {
       expect(getVariant()).toBe(PanelVariant.Info);
     });
+
+    it('should return PanelVariant.Info when the wrong variant is passed', () => {
+      expect(getVariant({ variant: 'invalid' as 'warning' })).toBe(
+        PanelVariant.Info,
+      );
+    });
   });
 
   describe('FullWidthWrapper', () => {
@@ -66,7 +72,7 @@ const render = (
   const allProps = {
     title: 'Panel Title',
     children: 'Panel Content',
-    variant: 'info',
+    variant: 'info' as const,
     showIcon: false,
     showPointer: false,
     ...props,
diff --git a/src/altinn-app-frontend/src/features/form/components/Panel.tsx b/src/altinn-app-frontend/src/features/form/components/Panel.tsx
index 86861d3191..403948822b 100644
--- a/src/altinn-app-frontend/src/features/form/components/Panel.tsx
+++ b/src/altinn-app-frontend/src/features/form/components/Panel.tsx
@@ -8,12 +8,16 @@ import {
 import { FormComponentContext } from 'src/components';
 import { ConditionalWrapper } from 'src/components/ConditionalWrapper';
 import { FullWidthWrapper } from 'src/features/form/components/FullWidthWrapper';
+import { assertUnreachable } from 'src/types';
+import type { ILayoutCompPanel } from 'src/features/form/layout';
 
 interface IGetVariantProps {
-  variant?: string;
+  variant: ILayoutCompPanel['variant'];
 }
 
-const defaultObj = {};
+const defaultObj: IGetVariantProps = {
+  variant: 'info',
+};
 
 export const getVariant = ({ variant }: IGetVariantProps = defaultObj) => {
   switch (variant) {
@@ -21,17 +25,19 @@ export const getVariant = ({ variant }: IGetVariantProps = defaultObj) => {
       return PanelVariant.Info;
     case 'success':
       return PanelVariant.Success;
+    case 'error':
+      return PanelVariant.Error;
     case 'warning':
       return PanelVariant.Warning;
   }
 
-  return PanelVariant.Info;
+  return assertUnreachable(variant, () => PanelVariant.Info);
 };
 
 export interface IPanelProps {
   title: React.ReactNode;
   children?: React.ReactNode;
-  variant?: string;
+  variant?: ILayoutCompPanel['variant'];
   showIcon?: boolean;
   showPointer?: boolean;
 }
diff --git a/src/altinn-app-frontend/src/features/form/containers/Form.test.tsx b/src/altinn-app-frontend/src/features/form/containers/Form.test.tsx
index 45769e7acf..75aba3d438 100644
--- a/src/altinn-app-frontend/src/features/form/containers/Form.test.tsx
+++ b/src/altinn-app-frontend/src/features/form/containers/Form.test.tsx
@@ -157,6 +157,66 @@ describe('Form', () => {
     expect(screen.getByText('1. FormLayout')).toBeInTheDocument();
   });
 
+  it('should not render ErrorReport when there are no validation errors', () => {
+    renderForm(mockComponents);
+    expect(screen.queryByTestId('ErrorReport')).not.toBeInTheDocument();
+  });
+
+  it('should render ErrorReport when there are validation errors', () => {
+    renderForm(
+      mockComponents,
+      mockValidations({
+        component1: {
+          simpleBinding: {
+            errors: ['some error message'],
+          },
+        },
+      }),
+    );
+    expect(screen.getByTestId('ErrorReport')).toBeInTheDocument();
+  });
+
+  it('should render ErrorReport when there are unmapped validation errors', () => {
+    renderForm(
+      mockComponents,
+      mockValidations({
+        unmapped: {
+          simpleBinding: {
+            errors: ['some error message'],
+          },
+        },
+      }),
+    );
+    expect(screen.getByTestId('ErrorReport')).toBeInTheDocument();
+  });
+
+  it('should separate NavigationButtons and display them inside ErrorReport', () => {
+    renderForm(
+      [
+        ...mockComponents,
+        {
+          id: 'bottomNavButtons',
+          type: 'NavigationButtons',
+        },
+      ],
+      mockValidations({
+        component1: {
+          simpleBinding: {
+            errors: ['some error message'],
+          },
+        },
+      }),
+    );
+    const errorReport = screen.getByTestId('ErrorReport');
+    expect(errorReport).toBeInTheDocument();
+
+    expect(screen.getByTestId('NavigationButtons')).toBeInTheDocument();
+
+    expect(
+      within(errorReport).getByTestId('NavigationButtons'),
+    ).toBeInTheDocument();
+  });
+
   it('should render a summary component', () => {
     const summaryComponent: ILayoutEntry[] = [
       ...mockComponents,
@@ -198,4 +258,19 @@ describe('Form', () => {
       },
     );
   }
+
+  function mockValidations(
+    validations: RootState['formValidations']['validations'][string],
+  ): Partial<RootState> {
+    return {
+      formValidations: {
+        error: null,
+        invalidDataTypes: [],
+        currentSingleFieldValidation: {},
+        validations: {
+          page1: validations,
+        },
+      },
+    };
+  }
 });
diff --git a/src/altinn-app-frontend/src/features/form/containers/Form.tsx b/src/altinn-app-frontend/src/features/form/containers/Form.tsx
index de69b47032..6663ce67c5 100644
--- a/src/altinn-app-frontend/src/features/form/containers/Form.tsx
+++ b/src/altinn-app-frontend/src/features/form/containers/Form.tsx
@@ -3,15 +3,23 @@ import React from 'react';
 import Grid from '@material-ui/core/Grid';
 
 import { useAppSelector } from 'src/common/hooks';
+import ErrorReport from 'src/components/message/ErrorReport';
 import { SummaryComponent } from 'src/components/summary/SummaryComponent';
 import MessageBanner from 'src/features/form/components/MessageBanner';
 import { DisplayGroupContainer } from 'src/features/form/containers/DisplayGroupContainer';
 import { mapGroupComponents } from 'src/features/form/containers/formUtils';
 import { GroupContainer } from 'src/features/form/containers/GroupContainer';
 import { PanelGroupContainer } from 'src/features/form/containers/PanelGroupContainer';
-import { hasRequiredFields } from 'src/utils/formLayout';
+import {
+  extractBottomButtons,
+  hasRequiredFields,
+  topLevelComponents,
+} from 'src/utils/formLayout';
 import { renderGenericComponent } from 'src/utils/layout';
-import { missingFieldsInLayoutValidations } from 'src/utils/validation';
+import {
+  getFormHasErrors,
+  missingFieldsInLayoutValidations,
+} from 'src/utils/validation';
 import type {
   ILayout,
   ILayoutComponent,
@@ -90,11 +98,6 @@ function RenderLayoutGroup(
 }
 
 export function Form() {
-  const [filteredLayout, setFilteredLayout] = React.useState<any[]>([]);
-  const [currentLayout, setCurrentLayout] = React.useState<string>();
-  const [requiredFieldsMissing, setRequiredFieldsMissing] =
-    React.useState(false);
-
   const currentView = useAppSelector(
     (state) => state.formLayout.uiConfig.currentView,
   );
@@ -105,45 +108,31 @@ export function Form() {
   const validations = useAppSelector(
     (state) => state.formValidations.validations,
   );
+  const hasErrors = useAppSelector((state) =>
+    getFormHasErrors(state.formValidations.validations),
+  );
 
-  React.useEffect(() => {
-    setCurrentLayout(currentView);
-  }, [currentView]);
-
-  React.useEffect(() => {
+  const requiredFieldsMissing = React.useMemo(() => {
     if (validations && validations[currentView]) {
-      const areRequiredFieldsMissing = missingFieldsInLayoutValidations(
+      return missingFieldsInLayoutValidations(
         validations[currentView],
         language,
       );
-      setRequiredFieldsMissing(areRequiredFieldsMissing);
     }
+
+    return false;
   }, [currentView, language, validations]);
 
-  React.useEffect(() => {
-    let renderedInGroup: string[] = [];
-    if (layout) {
-      const groupComponents = layout.filter(
-        (component) => component.type === 'Group',
-      );
-      groupComponents.forEach((component: ILayoutGroup) => {
-        let childList = component.children;
-        if (component.edit?.multiPage) {
-          childList = component.children.map(
-            (childId) => childId.split(':')[1] || childId,
-          );
-        }
-        renderedInGroup = renderedInGroup.concat(childList);
-      });
-      const componentsToRender = layout.filter(
-        (component) => !renderedInGroup.includes(component.id),
-      );
-      setFilteredLayout(componentsToRender);
+  const [mainComponents, errorReportComponents] = React.useMemo(() => {
+    if (!layout) {
+      return [[], []];
     }
-  }, [layout]);
+    const topLevel = topLevelComponents(layout);
+    return hasErrors ? extractBottomButtons(topLevel) : [topLevel, []];
+  }, [layout, hasErrors]);
 
   return (
-    <div>
+    <>
       {hasRequiredFields(layout) && (
         <MessageBanner
           language={language}
@@ -156,14 +145,11 @@ export function Form() {
         spacing={3}
         alignItems='flex-start'
       >
-        {currentView === currentLayout &&
-          filteredLayout &&
-          filteredLayout.map((component) => {
-            return renderLayoutComponent(component, layout);
-          })}
+        {mainComponents.map((component) =>
+          renderLayoutComponent(component, layout),
+        )}
+        <ErrorReport components={errorReportComponents} />
       </Grid>
-    </div>
+    </>
   );
 }
-
-export default Form;
diff --git a/src/altinn-app-frontend/src/features/form/containers/PanelGroupContainer.tsx b/src/altinn-app-frontend/src/features/form/containers/PanelGroupContainer.tsx
index 8770f73a76..683210c802 100644
--- a/src/altinn-app-frontend/src/features/form/containers/PanelGroupContainer.tsx
+++ b/src/altinn-app-frontend/src/features/form/containers/PanelGroupContainer.tsx
@@ -157,6 +157,7 @@ export function PanelGroupContainer({
                       )
                     : undefined
                 }
+                showIcon={container.panel?.showIcon}
                 variant={getVariant({ variant: container.panel.variant })}
                 showPointer={!!repGroupReference}
               >
diff --git a/src/altinn-app-frontend/src/features/form/data/update/updateFormDataSagas.ts b/src/altinn-app-frontend/src/features/form/data/update/updateFormDataSagas.ts
index b371ea22e3..0bc81700fe 100644
--- a/src/altinn-app-frontend/src/features/form/data/update/updateFormDataSagas.ts
+++ b/src/altinn-app-frontend/src/features/form/data/update/updateFormDataSagas.ts
@@ -4,7 +4,6 @@ import type { SagaIterator } from 'redux-saga';
 
 import { FormDataActions } from 'src/features/form/data/formDataSlice';
 import { FormDynamicsActions } from 'src/features/form/dynamics/formDynamicsSlice';
-import { FormLayoutActions } from 'src/features/form/layout/formLayoutSlice';
 import { ValidationActions } from 'src/features/form/validation/validationSlice';
 import { getCurrentDataTypeForApplication } from 'src/utils/appMetadata';
 import { removeAttachmentReference } from 'src/utils/databindings';
@@ -34,7 +33,6 @@ export function* updateFormDataSaga({
 }: PayloadAction<IUpdateFormData>): SagaIterator {
   try {
     const state: IRuntimeState = yield select();
-    const focus = state.formLayout.uiConfig.focus;
 
     if (!skipValidation) {
       yield call(
@@ -62,10 +60,6 @@ export function* updateFormDataSaga({
     if (state.formDynamics.conditionalRendering) {
       yield put(FormDynamicsActions.checkIfConditionalRulesShouldRun({}));
     }
-
-    if (focus && focus !== '' && componentId !== focus) {
-      yield put(FormLayoutActions.updateFocus({ currentComponentId: '' }));
-    }
   } catch (error) {
     console.error(error);
     yield put(FormDataActions.updateRejected({ error }));
diff --git a/src/altinn-app-frontend/src/features/form/layout/formLayoutSlice.ts b/src/altinn-app-frontend/src/features/form/layout/formLayoutSlice.ts
index c979c85b5d..42a46d1a72 100644
--- a/src/altinn-app-frontend/src/features/form/layout/formLayoutSlice.ts
+++ b/src/altinn-app-frontend/src/features/form/layout/formLayoutSlice.ts
@@ -9,7 +9,6 @@ import {
   calculatePageOrderAndMoveToNextPageSaga,
   updateFileUploaderWithTagChosenOptionsSaga,
   updateFileUploaderWithTagEditIndexSaga,
-  updateFocus,
   updateRepeatingGroupEditIndexSaga,
   updateRepeatingGroupsSaga,
   watchInitialCalculatePageOrderAndMoveToNextPageSaga,
@@ -45,6 +44,7 @@ export const initialState: ILayoutState = {
     navigationConfig: {},
     layoutOrder: null,
     pageTriggers: [],
+    keepScrollPos: undefined,
   },
   layoutsets: null,
 };
@@ -155,31 +155,22 @@ const formLayoutSlice = createSagaSlice(
       updateCurrentViewFulfilled:
         mkAction<LayoutTypes.IUpdateCurrentViewFulfilled>({
           reducer: (state, action) => {
-            const { newView, returnToView } = action.payload;
-            state.uiConfig.currentView = newView;
-            state.uiConfig.returnToView = returnToView;
+            state.uiConfig.currentView = action.payload.newView;
+            state.uiConfig.returnToView = action.payload.returnToView;
+            state.uiConfig.keepScrollPos = undefined;
+            state.uiConfig.focus = action.payload.focusComponentId;
           },
         }),
       updateCurrentViewRejected:
-        mkAction<LayoutTypes.IFormLayoutActionRejected>({
+        mkAction<LayoutTypes.IUpdateCurrentViewRejected>({
           reducer: (state, action) => {
-            const { error } = action.payload;
-            state.error = error;
+            state.error = action.payload.error;
+            state.uiConfig.keepScrollPos = action.payload.keepScrollPos;
           },
         }),
       updateFocus: mkAction<LayoutTypes.IUpdateFocus>({
-        takeLatest: updateFocus,
-      }),
-      updateFocusFulfilled: mkAction<LayoutTypes.IUpdateFocusFulfilled>({
         reducer: (state, action) => {
-          const { focusComponentId } = action.payload;
-          state.uiConfig.focus = focusComponentId;
-        },
-      }),
-      updateFocusRejected: mkAction<LayoutTypes.IFormLayoutActionRejected>({
-        reducer: (state, action) => {
-          const { error } = action.payload;
-          state.error = error;
+          state.uiConfig.focus = action.payload.focusComponentId;
         },
       }),
       updateHiddenComponents: mkAction<LayoutTypes.IUpdateHiddenComponents>({
@@ -325,6 +316,11 @@ const formLayoutSlice = createSagaSlice(
       initRepeatingGroups: mkAction<void>({
         saga: () => watchInitRepeatingGroupsSaga,
       }),
+      clearKeepScrollPos: mkAction<void>({
+        reducer: (state) => {
+          state.uiConfig.keepScrollPos = undefined;
+        },
+      }),
     },
   }),
 );
diff --git a/src/altinn-app-frontend/src/features/form/layout/formLayoutTypes.ts b/src/altinn-app-frontend/src/features/form/layout/formLayoutTypes.ts
index 21fa754307..3db564fdac 100644
--- a/src/altinn-app-frontend/src/features/form/layout/formLayoutTypes.ts
+++ b/src/altinn-app-frontend/src/features/form/layout/formLayoutTypes.ts
@@ -37,18 +37,21 @@ export interface IUpdateCurrentView {
   returnToView?: string;
   runValidations?: 'allPages' | 'page';
   skipPageCaching?: boolean;
+  focusComponentId?: string;
+  keepScrollPos?: IKeepComponentScrollPos;
 }
 
 export interface IUpdateCurrentViewFulfilled {
   newView: string;
   returnToView?: string;
+  focusComponentId?: string;
 }
-export interface IUpdateFocus {
-  currentComponentId: string;
-  step?: number;
+
+export interface IUpdateCurrentViewRejected extends IFormLayoutActionRejected {
+  keepScrollPos?: IKeepComponentScrollPos;
 }
 
-export interface IUpdateFocusFulfilled {
+export interface IUpdateFocus {
   focusComponentId: string;
 }
 
@@ -114,9 +117,21 @@ export interface IUpdateFileUploaderWithTagChosenOptionsFulfilled {
   option: IOption;
 }
 
+/**
+ * Setting this keeps the component with the given componentId in the same viewport position after rendering
+ * new content above it. Support for this is implemented in the 'NavigationButtons' component, such that the
+ * component is visible on screen (in the same location) even if progressing to the next page fails, and
+ * validation messages are displayed above the navigation buttons.
+ */
+export interface IKeepComponentScrollPos {
+  componentId: string;
+  offsetTop: number;
+}
+
 export interface ICalculatePageOrderAndMoveToNextPage {
   runValidations?: 'allPages' | 'page';
   skipMoveToNext?: boolean;
+  keepScrollPos?: IKeepComponentScrollPos;
 }
 
 export interface ICalculatePageOrderAndMoveToNextPageFulfilled {
diff --git a/src/altinn-app-frontend/src/features/form/layout/index.ts b/src/altinn-app-frontend/src/features/form/layout/index.ts
index d7455bc554..d48e6e231f 100644
--- a/src/altinn-app-frontend/src/features/form/layout/index.ts
+++ b/src/altinn-app-frontend/src/features/form/layout/index.ts
@@ -40,9 +40,12 @@ export interface ILayoutGroup extends ILayoutCompBase<'Group'> {
   panel?: IGroupPanel;
 }
 
-export interface IGroupPanel {
-  variant?: string;
+export interface ILayoutCompPanelBase {
+  variant?: 'info' | 'warning' | 'error' | 'success';
   showIcon?: boolean;
+}
+
+export interface IGroupPanel extends ILayoutCompPanelBase {
   iconUrl?: string;
   iconAlt?: string;
   groupReference?: IGroupReference;
@@ -185,10 +188,7 @@ export type ILayoutCompNavBar = ILayoutCompBase<'NavigationBar'>;
 
 export type ILayoutCompPrintButton = ILayoutCompBase<'PrintButton'>;
 
-export interface ILayoutCompPanel extends ILayoutCompBase<'Panel'> {
-  variant?: 'info' | 'warning' | 'success';
-  showIcon?: boolean;
-}
+export type ILayoutCompPanel = ILayoutCompBase<'Panel'> & ILayoutCompPanelBase;
 
 export interface ILayoutCompCustom extends ILayoutCompBase<'Custom'> {
   tagName: string;
diff --git a/src/altinn-app-frontend/src/features/form/layout/update/updateFormLayoutSagas.test.ts b/src/altinn-app-frontend/src/features/form/layout/update/updateFormLayoutSagas.test.ts
index e5c9c5edc8..0305857fbe 100644
--- a/src/altinn-app-frontend/src/features/form/layout/update/updateFormLayoutSagas.test.ts
+++ b/src/altinn-app-frontend/src/features/form/layout/update/updateFormLayoutSagas.test.ts
@@ -22,7 +22,10 @@ import {
 import { ValidationActions } from 'src/features/form/validation/validationSlice';
 import { AttachmentActions } from 'src/shared/resources/attachments/attachmentSlice';
 import type { ILayoutCompFileUpload } from 'src/features/form/layout';
-import type { IUpdateRepeatingGroups } from 'src/features/form/layout/formLayoutTypes';
+import type {
+  ICalculatePageOrderAndMoveToNextPage,
+  IUpdateRepeatingGroups,
+} from 'src/features/form/layout/formLayoutTypes';
 import type { IAttachment } from 'src/shared/resources/attachments';
 import type { IDataModelBindings, IRuntimeState } from 'src/types';
 
@@ -253,6 +256,7 @@ describe('updateLayoutSagas', () => {
           FormLayoutActions.updateCurrentView({
             newView: 'page-3',
             runValidations: undefined,
+            keepScrollPos: undefined,
           }),
         )
         .run();
@@ -271,7 +275,15 @@ describe('updateLayoutSagas', () => {
     });
 
     it('stateless: should fetch pageOrder and update state accordingly', () => {
-      const action = { type: 'test', payload: {} };
+      const action: PayloadAction<ICalculatePageOrderAndMoveToNextPage> = {
+        type: 'test',
+        payload: {
+          keepScrollPos: {
+            componentId: 'someComponent',
+            offsetTop: 123,
+          },
+        },
+      };
       jest
         .spyOn(sharedUtils, 'getInstanceIdRegExp')
         .mockImplementation(originalInstanceIdRegExp);
@@ -306,6 +318,10 @@ describe('updateLayoutSagas', () => {
           FormLayoutActions.updateCurrentView({
             newView: 'page-3',
             runValidations: undefined,
+            keepScrollPos: {
+              componentId: 'someComponent',
+              offsetTop: 123,
+            },
           }),
         )
         .run();
@@ -334,6 +350,7 @@ describe('updateLayoutSagas', () => {
           FormLayoutActions.updateCurrentView({
             newView: 'return-here',
             runValidations: undefined,
+            keepScrollPos: undefined,
           }),
         )
         .run();
diff --git a/src/altinn-app-frontend/src/features/form/layout/update/updateFormLayoutSagas.ts b/src/altinn-app-frontend/src/features/form/layout/update/updateFormLayoutSagas.ts
index 7baa79b5d6..43bc4b64d4 100644
--- a/src/altinn-app-frontend/src/features/form/layout/update/updateFormLayoutSagas.ts
+++ b/src/altinn-app-frontend/src/features/form/layout/update/updateFormLayoutSagas.ts
@@ -66,7 +66,6 @@ import type {
   IUpdateCurrentView,
   IUpdateFileUploaderWithTagChosenOptions,
   IUpdateFileUploaderWithTagEditIndex,
-  IUpdateFocus,
   IUpdateRepeatingGroups,
   IUpdateRepeatingGroupsEditIndex,
 } from 'src/features/form/layout/formLayoutTypes';
@@ -98,33 +97,6 @@ export const selectValidations = (state: IRuntimeState): IValidations =>
 export const selectUnsavedChanges = (state: IRuntimeState): boolean =>
   state.formData.unsavedChanges;
 
-export function* updateFocus({
-  payload: { currentComponentId, step },
-}: PayloadAction<IUpdateFocus>): SagaIterator {
-  try {
-    const formLayoutState: ILayoutState = yield select(selectFormLayoutState);
-    if (currentComponentId) {
-      const layout =
-        formLayoutState.layouts[formLayoutState.uiConfig.currentView];
-      const currentComponentIndex = layout.findIndex(
-        (component: ILayoutComponent) => component.id === currentComponentId,
-      );
-      const focusComponentIndex = step
-        ? currentComponentIndex + step
-        : currentComponentIndex;
-      const focusComponentId =
-        focusComponentIndex > 0 ? layout[focusComponentIndex].id : null;
-      yield put(FormLayoutActions.updateFocusFulfilled({ focusComponentId }));
-    } else {
-      yield put(
-        FormLayoutActions.updateFocusFulfilled({ focusComponentId: null }),
-      );
-    }
-  } catch (error) {
-    yield put(FormLayoutActions.updateFocusRejected({ error }));
-  }
-}
-
 export function* updateRepeatingGroupsSaga({
   payload: { layoutElementId, remove, index, leaveOpen },
 }: PayloadAction<IUpdateRepeatingGroups>): SagaIterator {
@@ -322,7 +294,14 @@ export function* updateRepeatingGroupsSaga({
 }
 
 export function* updateCurrentViewSaga({
-  payload: { newView, runValidations, returnToView, skipPageCaching },
+  payload: {
+    newView,
+    runValidations,
+    returnToView,
+    skipPageCaching,
+    keepScrollPos,
+    focusComponentId,
+  },
 }: PayloadAction<IUpdateCurrentView>): SagaIterator {
   try {
     const state: IRuntimeState = yield select();
@@ -337,7 +316,11 @@ export function* updateCurrentViewSaga({
         localStorage.setItem(currentViewCacheKey, newView);
       }
       yield put(
-        FormLayoutActions.updateCurrentViewFulfilled({ newView, returnToView }),
+        FormLayoutActions.updateCurrentViewFulfilled({
+          newView,
+          returnToView,
+          focusComponentId,
+        }),
       );
     } else {
       const {
@@ -382,7 +365,12 @@ export function* updateCurrentViewSaga({
         if (!skipPageCaching) {
           localStorage.setItem(currentViewCacheKey, newView);
         }
-        yield put(FormLayoutActions.updateCurrentViewFulfilled({ newView }));
+        yield put(
+          FormLayoutActions.updateCurrentViewFulfilled({
+            newView,
+            focusComponentId,
+          }),
+        );
       } else if (
         !canFormBeSaved(
           {
@@ -392,7 +380,12 @@ export function* updateCurrentViewSaga({
           'Complete',
         )
       ) {
-        yield put(FormLayoutActions.updateCurrentViewRejected({ error: null }));
+        yield put(
+          FormLayoutActions.updateCurrentViewRejected({
+            error: null,
+            keepScrollPos,
+          }),
+        );
       } else {
         if (!skipPageCaching) {
           localStorage.setItem(currentViewCacheKey, newView);
@@ -401,6 +394,7 @@ export function* updateCurrentViewSaga({
           FormLayoutActions.updateCurrentViewFulfilled({
             newView,
             returnToView,
+            focusComponentId,
           }),
         );
       }
@@ -411,7 +405,7 @@ export function* updateCurrentViewSaga({
 }
 
 export function* calculatePageOrderAndMoveToNextPageSaga({
-  payload: { runValidations, skipMoveToNext },
+  payload: { runValidations, skipMoveToNext, keepScrollPos },
 }: PayloadAction<ICalculatePageOrderAndMoveToNextPage>): SagaIterator {
   try {
     const state: IRuntimeState = yield select();
@@ -469,7 +463,13 @@ export function* calculatePageOrderAndMoveToNextPageSaga({
     const returnToView = state.formLayout.uiConfig.returnToView;
     const newView =
       returnToView || layoutOrder[layoutOrder.indexOf(currentView) + 1];
-    yield put(FormLayoutActions.updateCurrentView({ newView, runValidations }));
+    yield put(
+      FormLayoutActions.updateCurrentView({
+        newView,
+        runValidations,
+        keepScrollPos,
+      }),
+    );
   } catch (error) {
     if (error?.response?.status === 404) {
       // We accept that the app does noe have defined a calculate page order as this is not default for older apps
diff --git a/src/altinn-app-frontend/src/selectors/getLayoutData.ts b/src/altinn-app-frontend/src/selectors/getLayoutData.ts
index 9f56e428a2..8ffd74e7ce 100644
--- a/src/altinn-app-frontend/src/selectors/getLayoutData.ts
+++ b/src/altinn-app-frontend/src/selectors/getLayoutData.ts
@@ -3,7 +3,7 @@ import type { ParametricSelector } from 'reselect';
 
 import type { RootState } from 'src/store';
 
-const selectFocusedLayout = (state: RootState) =>
+const selectFocusedComponent = (state: RootState) =>
   state.formLayout.uiConfig.focus;
 
 const selectHiddenFields = (state: RootState) =>
@@ -18,7 +18,10 @@ export const makeGetFocus = (): ParametricSelector<
   },
   boolean
 > =>
-  createSelector([selectFocusedLayout, selectId], (focus, id) => focus === id);
+  createSelector(
+    [selectFocusedComponent, selectId],
+    (focus, id) => focus === id,
+  );
 
 export const makeGetHidden = (): ParametricSelector<
   RootState,
diff --git a/src/altinn-app-frontend/src/shared/containers/Presentation.test.tsx b/src/altinn-app-frontend/src/shared/containers/Presentation.test.tsx
index e1daba5c71..b7efc462eb 100644
--- a/src/altinn-app-frontend/src/shared/containers/Presentation.test.tsx
+++ b/src/altinn-app-frontend/src/shared/containers/Presentation.test.tsx
@@ -161,18 +161,6 @@ describe('Presentation', () => {
       `background-color: ${AltinnAppTheme.altinnPalette.primary.greenLight}`,
     );
   });
-
-  it('should map validations if there are any and create error report', () => {
-    render({ type: ProcessTaskType.Data }, stateWithErrorsAndWarnings);
-
-    expect(screen.getByTestId('ErrorReport')).toBeInTheDocument();
-  });
-
-  it('should hide error report when there are no validation errors', () => {
-    render({ type: ProcessTaskType.Data });
-
-    expect(screen.queryByTestId('ErrorReport')).not.toBeInTheDocument();
-  });
 });
 
 const render = (
diff --git a/src/altinn-app-frontend/src/shared/containers/Presentation.tsx b/src/altinn-app-frontend/src/shared/containers/Presentation.tsx
index 8ba5eebbd2..63ad077a22 100644
--- a/src/altinn-app-frontend/src/shared/containers/Presentation.tsx
+++ b/src/altinn-app-frontend/src/shared/containers/Presentation.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 import { useAppDispatch, useAppSelector } from 'src/common/hooks';
-import ErrorReport from 'src/components/message/ErrorReport';
 import Header from 'src/components/presentation/Header';
 import NavBar from 'src/components/presentation/NavBar';
 import { FormLayoutActions } from 'src/features/form/layout/formLayoutSlice';
@@ -115,7 +114,6 @@ const PresentationComponent = (props: IPresentationProvidedProps) => {
       <main className='container'>
         <div className='row'>
           <div className='col-xl-12 a-p-static'>
-            <ErrorReport />
             {isProcessStepsArchived && instance?.status?.substatus && (
               <AltinnSubstatusPaper
                 label={getTextResourceByKey(
diff --git a/src/altinn-app-frontend/src/shared/containers/ProcessWrapper.tsx b/src/altinn-app-frontend/src/shared/containers/ProcessWrapper.tsx
index 474130d7ee..4bc667b924 100644
--- a/src/altinn-app-frontend/src/shared/containers/ProcessWrapper.tsx
+++ b/src/altinn-app-frontend/src/shared/containers/ProcessWrapper.tsx
@@ -100,7 +100,7 @@ const ProcessWrapper = () => {
       appOwner={appOwner}
       type={process.taskType}
     >
-      <div>
+      <>
         {isLoading === false ? (
           <>
             {process.taskType === ProcessTaskType.Data && <Form />}
@@ -130,7 +130,7 @@ const ProcessWrapper = () => {
             </AltinnContentLoader>
           </div>
         )}
-      </div>
+      </>
     </Presentation>
   );
 };
diff --git a/src/altinn-app-frontend/src/types/index.ts b/src/altinn-app-frontend/src/types/index.ts
index a33d628ec1..80246bb391 100644
--- a/src/altinn-app-frontend/src/types/index.ts
+++ b/src/altinn-app-frontend/src/types/index.ts
@@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
 import type Ajv from 'ajv/dist/core';
 
 import type { IFormData } from 'src/features/form/data';
+import type { IKeepComponentScrollPos } from 'src/features/form/layout/formLayoutTypes';
 import type { RootState } from 'src/store';
 
 export interface IAltinnWindow extends Window {
@@ -165,6 +166,7 @@ export interface IUiConfig {
   hideCloseButton?: boolean;
   showLanguageSelector?: boolean;
   showProgress?: boolean;
+  keepScrollPos?: IKeepComponentScrollPos;
 }
 
 export interface IValidationResult {
@@ -251,3 +253,17 @@ export interface IPartyIdInterfaceGuidParams {
   partyId: string;
   instanceGuid: string;
 }
+
+/**
+ * This function can be used to have TypeScript enforce that we never reach the code branch in question
+ * @see https://stackoverflow.com/a/39419171
+ */
+export function assertUnreachable<Ret = never>(
+  _x: never,
+  execute?: () => Ret,
+): Ret {
+  if (execute) {
+    return execute();
+  }
+  throw new Error('Reached unreachable code');
+}
diff --git a/src/altinn-app-frontend/src/utils/formLayout.test.ts b/src/altinn-app-frontend/src/utils/formLayout.test.ts
index 97fbb7ce51..fb2d6cdfa8 100644
--- a/src/altinn-app-frontend/src/utils/formLayout.test.ts
+++ b/src/altinn-app-frontend/src/utils/formLayout.test.ts
@@ -1,11 +1,13 @@
 import {
   createRepeatingGroupComponents,
+  extractBottomButtons,
   findChildren,
   getRepeatingGroups,
   hasRequiredFields,
   mapFileUploadersWithTag,
   removeRepeatingGroupFromUIConfig,
   setMappingForRepeatingGroupComponent,
+  topLevelComponents,
 } from 'src/utils/formLayout';
 import type {
   ILayout,
@@ -33,55 +35,55 @@ describe('setMappingForRepeatingGroupComponent', () => {
   });
 });
 
-describe('formLayout', () => {
-  const testLayout: ILayout = [
-    {
-      id: 'Group1',
-      type: 'Group',
-      dataModelBindings: {
-        group: 'Group1',
-      },
-      children: ['field1', 'Group2'],
-      maxCount: 3,
-    } as ILayoutGroup,
-    {
-      id: 'Group2',
-      type: 'Group',
-      dataModelBindings: {
-        group: 'Group1.Group2',
-      },
-      maxCount: 4,
-      children: ['field2'],
-    } as ILayoutGroup,
-    {
-      id: 'field1',
-      type: 'Input',
-      dataModelBindings: {
-        simple: 'Group1.prop1',
-      },
-      textResourceBindings: {
-        title: 'Title',
-      },
-      readOnly: false,
-      required: false,
-      disabled: false,
-    } as ILayoutComponent,
-    {
-      id: 'field2',
-      type: 'Input',
-      dataModelBindings: {
-        simple: 'Group1.Group2.prop1',
-      },
-      textResourceBindings: {
-        title: 'Title',
-      },
-      readOnly: false,
-      required: false,
-      disabled: false,
-    } as ILayoutComponent,
-  ];
-
-  it('getRepeatingGroups should handle nested groups', () => {
+const testLayout: ILayout = [
+  {
+    id: 'Group1',
+    type: 'Group',
+    dataModelBindings: {
+      group: 'Group1',
+    },
+    children: ['field1', 'Group2'],
+    maxCount: 3,
+  } as ILayoutGroup,
+  {
+    id: 'Group2',
+    type: 'Group',
+    dataModelBindings: {
+      group: 'Group1.Group2',
+    },
+    maxCount: 4,
+    children: ['field2'],
+  } as ILayoutGroup,
+  {
+    id: 'field1',
+    type: 'Input',
+    dataModelBindings: {
+      simple: 'Group1.prop1',
+    },
+    textResourceBindings: {
+      title: 'Title',
+    },
+    readOnly: false,
+    required: false,
+    disabled: false,
+  } as ILayoutComponent,
+  {
+    id: 'field2',
+    type: 'Input',
+    dataModelBindings: {
+      simple: 'Group1.Group2.prop1',
+    },
+    textResourceBindings: {
+      title: 'Title',
+    },
+    readOnly: false,
+    required: false,
+    disabled: false,
+  } as ILayoutComponent,
+];
+
+describe('getRepeatingGroups', () => {
+  it('should handle nested groups', () => {
     const formData = {
       'Group1[0].prop1': 'value-0-1',
       'Group1[0].Group2[0].group2prop': 'group2-0-0-value',
@@ -121,7 +123,7 @@ describe('formLayout', () => {
     expect(result).toEqual(expected);
   });
 
-  it('getRepeatingGroups should correctly handle out-of-order formData', () => {
+  it('should correctly handle out-of-order formData', () => {
     const formData = {
       'Group1[2].prop1': 'value-2-1',
       'Group1[2].Group2[1].group2prop': 'group2-2-2-value',
@@ -161,7 +163,7 @@ describe('formLayout', () => {
     expect(result).toEqual(expected);
   });
 
-  it('getRepeatingGroups should return correct count', () => {
+  it('should return correct count', () => {
     const testLayout: ILayout = [
       {
         id: 'Group1',
@@ -232,8 +234,10 @@ describe('formLayout', () => {
     const result = getRepeatingGroups(testLayout, formData);
     expect(result).toEqual(expected);
   });
+});
 
-  it('removeRepeatingGroupFromUIConfig should delete given index', () => {
+describe('removeRepeatingGroupFromUIConfig', () => {
+  it('should delete given index', () => {
     const repeatingGroups: IRepeatingGroups = {
       Group: {
         index: 1,
@@ -262,7 +266,7 @@ describe('formLayout', () => {
     expect(result).toEqual(expected);
   });
 
-  it('removeRepeatingGroupFromUIConfig should shift successfully', () => {
+  it('should shift successfully', () => {
     const repeatingGroups: IRepeatingGroups = {
       Group: {
         index: 1,
@@ -290,156 +294,151 @@ describe('formLayout', () => {
     };
     expect(result).toEqual(expected);
   });
+});
 
-  describe('createRepeatingGroupComponents', () => {
-    it('should handle text resources with variables', () => {
-      const testLayout: ILayout = [
-        {
-          id: 'Group1',
-          type: 'Group',
-          dataModelBindings: {
-            group: 'Group1',
-          },
-          children: ['field1'],
-          maxCount: 3,
-        } as ILayoutGroup,
-        {
-          id: 'field1',
-          type: 'Input',
-          dataModelBindings: {
-            simple: 'Group1.prop1',
-          },
-          textResourceBindings: {
-            title: 'title-w-variable',
-          },
-          readOnly: false,
-          required: false,
-          disabled: false,
-        } as ILayoutComponent,
-      ];
-      const mockTextResources = [
-        {
-          id: 'title-w-variable',
-          value: 'Test 123 {0}',
-          unparsedValue: 'Test 123 {0}',
-          variables: [
-            {
-              key: 'Group1[{0}].prop1',
-              dataSource: 'dataModel.default',
-            },
-          ],
+describe('createRepeatingGroupComponents', () => {
+  it('should handle text resources with variables', () => {
+    const testLayout: ILayout = [
+      {
+        id: 'Group1',
+        type: 'Group',
+        dataModelBindings: {
+          group: 'Group1',
         },
-      ];
-
-      const container: ILayoutGroup = testLayout[0] as ILayoutGroup;
-      const component: ILayoutComponent = testLayout[1] as ILayoutComponent;
-      const expected = [
-        [
-          {
-            ...testLayout[1],
-            id: `${component.id}-0`,
-            hidden: false,
-            baseComponentId: 'field1',
-            dataModelBindings: {
-              simple: 'Group1[0].prop1',
-            },
-            textResourceBindings: {
-              title: 'title-w-variable-0',
-            },
-          },
-        ],
-        [
+        children: ['field1'],
+        maxCount: 3,
+      } as ILayoutGroup,
+      {
+        id: 'field1',
+        type: 'Input',
+        dataModelBindings: {
+          simple: 'Group1.prop1',
+        },
+        textResourceBindings: {
+          title: 'title-w-variable',
+        },
+        readOnly: false,
+        required: false,
+        disabled: false,
+      } as ILayoutComponent,
+    ];
+    const mockTextResources = [
+      {
+        id: 'title-w-variable',
+        value: 'Test 123 {0}',
+        unparsedValue: 'Test 123 {0}',
+        variables: [
           {
-            ...testLayout[1],
-            id: `${component.id}-1`,
-            hidden: false,
-            baseComponentId: 'field1',
-            dataModelBindings: {
-              simple: 'Group1[1].prop1',
-            },
-            textResourceBindings: {
-              title: 'title-w-variable-1',
-            },
+            key: 'Group1[{0}].prop1',
+            dataSource: 'dataModel.default',
           },
         ],
-      ];
-
-      const result = createRepeatingGroupComponents(
-        container,
-        [testLayout[1]],
-        1,
-        mockTextResources,
-      );
-
-      expect(result).toEqual(expected);
-    });
+      },
+    ];
 
-    it('should leave panel groups and children untouched', () => {
-      const testLayout: ILayout = [
-        {
-          id: 'Group1',
-          type: 'Group',
-          dataModelBindings: {
-            group: 'Group1',
-          },
-          children: ['field1', 'panel-group'],
-          maxCount: 3,
-        } as ILayoutGroup,
+    const container: ILayoutGroup = testLayout[0] as ILayoutGroup;
+    const component: ILayoutComponent = testLayout[1] as ILayoutComponent;
+    const expected = [
+      [
         {
-          id: 'field1',
-          type: 'Input',
+          ...testLayout[1],
+          id: `${component.id}-0`,
+          hidden: false,
+          baseComponentId: 'field1',
           dataModelBindings: {
-            simple: 'Group1.prop1',
+            simple: 'Group1[0].prop1',
           },
           textResourceBindings: {
-            title: 'title-w-variable',
+            title: 'title-w-variable-0',
           },
-          readOnly: false,
-          required: false,
-          disabled: false,
-        } as ILayoutComponent,
-        {
-          id: 'panel-group',
-          type: 'Group',
-          dataModelBindings: {
-            group: 'Group1',
-          },
-          children: ['panel-group-child'],
-          panel: {
-            groupReference: {
-              group: 'some-group',
-            },
-          },
-        } as ILayoutGroup,
+        },
+      ],
+      [
         {
-          id: 'panel-group-child',
-          type: 'Input',
+          ...testLayout[1],
+          id: `${component.id}-1`,
+          hidden: false,
+          baseComponentId: 'field1',
           dataModelBindings: {
-            simple: 'Group1.prop1',
+            simple: 'Group1[1].prop1',
           },
           textResourceBindings: {
-            title: 'title-w-variable',
+            title: 'title-w-variable-1',
           },
-          readOnly: false,
-          required: false,
-          disabled: false,
-        } as ILayoutComponent,
-      ];
-
-      const container: ILayoutGroup = testLayout[0] as ILayoutGroup;
-      const components = testLayout.splice(0, 1);
-
-      const result = createRepeatingGroupComponents(
-        container,
-        components,
-        0,
-        [],
-      );
-
-      expect(result[0]).not.toEqual(components[0]);
-      expect(result[1]).toEqual(components[1]);
-      expect(result[2]).toEqual(components[2]);
-    });
+        },
+      ],
+    ];
+
+    const result = createRepeatingGroupComponents(
+      container,
+      [testLayout[1]],
+      1,
+      mockTextResources,
+    );
+
+    expect(result).toEqual(expected);
+  });
+
+  it('should leave panel groups and children untouched', () => {
+    const testLayout: ILayout = [
+      {
+        id: 'Group1',
+        type: 'Group',
+        dataModelBindings: {
+          group: 'Group1',
+        },
+        children: ['field1', 'panel-group'],
+        maxCount: 3,
+      } as ILayoutGroup,
+      {
+        id: 'field1',
+        type: 'Input',
+        dataModelBindings: {
+          simple: 'Group1.prop1',
+        },
+        textResourceBindings: {
+          title: 'title-w-variable',
+        },
+        readOnly: false,
+        required: false,
+        disabled: false,
+      } as ILayoutComponent,
+      {
+        id: 'panel-group',
+        type: 'Group',
+        dataModelBindings: {
+          group: 'Group1',
+        },
+        children: ['panel-group-child'],
+        panel: {
+          groupReference: {
+            group: 'some-group',
+          },
+        },
+      } as ILayoutGroup,
+      {
+        id: 'panel-group-child',
+        type: 'Input',
+        dataModelBindings: {
+          simple: 'Group1.prop1',
+        },
+        textResourceBindings: {
+          title: 'title-w-variable',
+        },
+        readOnly: false,
+        required: false,
+        disabled: false,
+      } as ILayoutComponent,
+    ];
+
+    const container: ILayoutGroup = testLayout[0] as ILayoutGroup;
+    const components = testLayout.splice(0, 1);
+
+    const result = createRepeatingGroupComponents(container, components, 0, []);
+
+    expect(result[0]).not.toEqual(components[0]);
+    expect(result[1]).toEqual(components[1]);
+    expect(result[2]).toEqual(components[2]);
   });
 
   it('baseComponentId should never contain group index', () => {
@@ -521,8 +520,10 @@ describe('formLayout', () => {
 
     expect(numericBaseComponentIds).toEqual([]);
   });
+});
 
-  it('getFileUploadersWithTag should return expected uiConfig', () => {
+describe('mapFileUploadersWithTag', () => {
+  it('should return expected uiConfig', () => {
     const testLayout: ILayout = [
       {
         id: 'file-upload-with-tag1',
@@ -658,8 +659,10 @@ describe('formLayout', () => {
     const result = hasRequiredFields(layout);
     expect(result).toBeTruthy();
   });
+});
 
-  it('findChildren should work with simple layouts', () => {
+describe('findChildren', () => {
+  it('should work with simple layouts', () => {
     const result1 = findChildren(testLayout);
     expect(result1).toHaveLength(2);
 
@@ -680,7 +683,7 @@ describe('formLayout', () => {
     expect(result4).toHaveLength(0);
   });
 
-  it('findChildren should work with multi-page groups', () => {
+  it('should work with multi-page groups', () => {
     const layout: ILayout = [
       {
         id: 'field1',
@@ -720,7 +723,7 @@ describe('formLayout', () => {
     expect(result2.map((c) => c.id)).toEqual(['field2', 'field3:0']);
   });
 
-  it('findChildren should work with nested groups out-of-order', () => {
+  it('should work with nested groups out-of-order', () => {
     const layout: ILayout = [
       {
         id: 'field1',
@@ -770,3 +773,57 @@ describe('formLayout', () => {
     expect(result2.map((c) => c.id)).toEqual(['field2', 'field3', 'field4']);
   });
 });
+
+function onlyIds(layout: ILayout): string[] {
+  return layout.map((c) => c.id);
+}
+
+describe('topLevelComponents', () => {
+  it('should only return the test layout group', () => {
+    const output = topLevelComponents(testLayout);
+    expect(onlyIds(output)).toEqual(['Group1']);
+  });
+  it('should also include a free-standing top level component', () => {
+    const output = topLevelComponents([
+      ...testLayout,
+      {
+        id: 'freeStanding',
+        type: 'Button',
+      },
+    ]);
+    expect(onlyIds(output)).toEqual(['Group1', 'freeStanding']);
+  });
+});
+
+describe('extractBottomButtons', () => {
+  it('should not extract anything from the test layout', () => {
+    expect(extractBottomButtons(testLayout)).toEqual([testLayout, []]);
+  });
+
+  it('should extract a button from the end of the test layout', () => {
+    const [layout, extractedButtons] = extractBottomButtons([
+      ...topLevelComponents(testLayout),
+      {
+        id: 'bottomButton',
+        type: 'Button',
+      },
+    ]);
+    expect(onlyIds(layout)).toEqual(['Group1']);
+    expect(onlyIds(extractedButtons)).toEqual(['bottomButton']);
+  });
+
+  it('should leave a bottom on the top alone', () => {
+    const [, extractedButtons] = extractBottomButtons([
+      {
+        id: 'topButton',
+        type: 'NavigationButtons',
+      },
+      ...testLayout,
+      {
+        id: 'bottomButton',
+        type: 'NavigationButtons',
+      },
+    ]);
+    expect(onlyIds(extractedButtons)).toEqual(['bottomButton']);
+  });
+});
diff --git a/src/altinn-app-frontend/src/utils/formLayout.ts b/src/altinn-app-frontend/src/utils/formLayout.ts
index dd6473b828..85f2aceb1f 100644
--- a/src/altinn-app-frontend/src/utils/formLayout.ts
+++ b/src/altinn-app-frontend/src/utils/formLayout.ts
@@ -1,4 +1,5 @@
 import type {
+  ComponentTypes,
   IGroupEditProperties,
   ILayout,
   ILayoutComponent,
@@ -474,3 +475,45 @@ export function findChildren(
 
   return out;
 }
+
+/**
+ * Takes a layout and removes the components in it that belong to groups. This returns
+ * only the top-level layout components.
+ */
+export function topLevelComponents(layout: ILayout) {
+  const inGroup = new Set<string>();
+  layout.forEach((component) => {
+    if (component.type === 'Group') {
+      const childList = component.edit?.multiPage
+        ? component.children.map((childId) => childId.split(':')[1] || childId)
+        : component.children;
+      childList.forEach((childId) => inGroup.add(childId));
+    }
+  });
+  return layout.filter((component) => !inGroup.has(component.id));
+}
+
+/**
+ * Takes a layout and splits it into two return parts; the last will contain
+ * all the buttons on the bottom of the input layout, while the first returned
+ * value is the input layout except for these extracted components.
+ */
+export function extractBottomButtons(layout: ILayout) {
+  const extract = new Set<ComponentTypes>([
+    'NavigationButtons',
+    'Button',
+    'PrintButton',
+  ]);
+
+  const toMainLayout: ILayout = [];
+  const toErrorReport: ILayout = [];
+  for (const component of [...layout].reverse()) {
+    if (extract.has(component.type) && toMainLayout.length === 0) {
+      toErrorReport.push(component);
+    } else {
+      toMainLayout.push(component);
+    }
+  }
+
+  return [toMainLayout.reverse(), toErrorReport.reverse()];
+}
diff --git a/src/altinn-app-frontend/src/utils/validation/index.ts b/src/altinn-app-frontend/src/utils/validation/index.ts
index 14ec67251f..fc6bbb03e6 100644
--- a/src/altinn-app-frontend/src/utils/validation/index.ts
+++ b/src/altinn-app-frontend/src/utils/validation/index.ts
@@ -17,6 +17,9 @@ export {
   removeGroupValidationsByIndex,
   validateGroup,
   getParentGroup,
+  getFormHasErrors,
+  getMappedErrors,
+  type FlatError,
 } from './validation';
 
 export { runClientSideValidation } from './runClientSideValidation';
diff --git a/src/altinn-app-frontend/src/utils/validation/validation.ts b/src/altinn-app-frontend/src/utils/validation/validation.ts
index 6d9f4277d0..0ec54b00d0 100644
--- a/src/altinn-app-frontend/src/utils/validation/validation.ts
+++ b/src/altinn-app-frontend/src/utils/validation/validation.ts
@@ -1283,10 +1283,8 @@ function addValidation(
  * gets unmapped errors from validations as string array
  * @param validations the validations
  */
-export function getUnmappedErrors(
-  validations: IValidations,
-): React.ReactNode[] {
-  const messages: React.ReactNode[] = [];
+export function getUnmappedErrors(validations: IValidations): ReactNode[] {
+  const messages: ReactNode[] = [];
   if (!validations) {
     return messages;
   }
@@ -1300,6 +1298,59 @@ export function getUnmappedErrors(
   return messages;
 }
 
+export interface FlatError {
+  layout: string;
+  componentId: string;
+  message: string | ReactNode;
+}
+
+/**
+ * Gets all mapped errors as flat array
+ */
+export const getMappedErrors = (validations: IValidations): FlatError[] => {
+  const errors: FlatError[] = [];
+
+  for (const layout in validations) {
+    for (const componentId in validations[layout]) {
+      if (componentId === 'unmapped') {
+        continue;
+      }
+
+      const validationObject = validations[layout][componentId];
+      for (const fieldKey in validationObject) {
+        for (const message of validationObject[fieldKey].errors || []) {
+          errors.push({
+            layout,
+            componentId,
+            message,
+          });
+        }
+      }
+    }
+  }
+
+  return errors;
+};
+
+/**
+ * Returns true if there are errors in the form at all (faster than getting all mapped/unmapped errors)
+ * When this returns true, ErrorReport.tsx should be displayed
+ */
+export const getFormHasErrors = (validations: IValidations): boolean => {
+  for (const layout in validations) {
+    for (const key in validations[layout]) {
+      const validationObject = validations[layout][key];
+      for (const fieldKey in validationObject) {
+        const fieldValidationErrors = validationObject[fieldKey].errors;
+        if (fieldValidationErrors && fieldValidationErrors.length > 0) {
+          return true;
+        }
+      }
+    }
+  }
+  return false;
+};
+
 /**
  * checks if a validation contains any errors of a given severity.
  * @param validations the validations
diff --git a/src/shared/src/language/texts/en.ts b/src/shared/src/language/texts/en.ts
index 799c1dad9a..a94f16529d 100644
--- a/src/shared/src/language/texts/en.ts
+++ b/src/shared/src/language/texts/en.ts
@@ -39,7 +39,7 @@ export function en() {
     },
     form_filler: {
       back_to_summary: 'Return to summary',
-      error_report_header: 'There is a problem',
+      error_report_header: 'These need to be corrected before continuing',
       error_report_description:
         'The form contains errors that prevent it from being submitted. Try submitting again once the errors are corrected.',
       error_required: 'You have to fill out {0}',
diff --git a/src/shared/src/language/texts/nb.ts b/src/shared/src/language/texts/nb.ts
index d5ebe591b9..7918f483df 100644
--- a/src/shared/src/language/texts/nb.ts
+++ b/src/shared/src/language/texts/nb.ts
@@ -39,7 +39,7 @@ export function nb() {
     },
     form_filler: {
       back_to_summary: 'Tilbake til oppsummering',
-      error_report_header: 'Det er feil i skjema',
+      error_report_header: 'Du må rette disse feilene før du kan gå videre',
       error_report_description:
         'Skjemaet inneholder feil eller mangler som hindrer oss fra å sende det inn. Når du har rettet feilene, kan du sende inn skjemaet på nytt.',
       error_required: 'Du må fylle ut {0}',
diff --git a/src/shared/src/language/texts/nn.ts b/src/shared/src/language/texts/nn.ts
index ee88df060b..35e9c8198a 100644
--- a/src/shared/src/language/texts/nn.ts
+++ b/src/shared/src/language/texts/nn.ts
@@ -39,7 +39,7 @@ export function nn() {
     },
     form_filler: {
       back_to_summary: 'Attende til samandrag',
-      error_report_header: 'Det er feil i skjema',
+      error_report_header: 'Du må retta desse feila før du kan gå vidare',
       error_report_description:
         'Skjemaet inneheld feil eller manglar som hindrar oss frå å sende det inn. Når du har retta feila, kan du sende inn skjemaet på nytt.',
       error_required: 'Du må fylle ut {0}',
diff --git a/src/yarn.lock b/src/yarn.lock
index 8427e3b7df..ce439ab742 100644
--- a/src/yarn.lock
+++ b/src/yarn.lock
@@ -5,23 +5,23 @@ __metadata:
   version: 6
   cacheKey: 8
 
-"@altinn/altinn-design-system@npm:0.1.4":
-  version: 0.1.4
-  resolution: "@altinn/altinn-design-system@npm:0.1.4::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40altinn%2Faltinn-design-system%2F0.1.4%2F8be73e9065c8b8f244d77540f8fed74b98e23a369c8927d5d565deddf5cdd108"
+"@altinn/altinn-design-system@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "@altinn/altinn-design-system@npm:0.2.0::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40altinn%2Faltinn-design-system%2F0.2.0%2F44acbeb21e302b1bcb78005b465a48997ff3bdd6aeb414a702e87ecda5b14d70"
   dependencies:
-    "@altinn/figma-design-tokens": ^0.1.0
-    "@react-hookz/web": ^14.2.2
+    "@altinn/figma-design-tokens": ^0.3.0
+    "@react-hookz/web": ^15.0.1
   peerDependencies:
     react: ^17.0.0 || ^18.0.0
     react-dom: ^17.0.0 || ^18.0.0
-  checksum: 89609dd093efc3b510e651b01e5da6674dd2c39de7161c81143e12eb5645d50625376dcba20cff99e313fc12430d9bdabad0ea91c8a8fd75dc2306061b7e0512
+  checksum: 81582d9ff3a8e3aa1f1fdcb763410a9dfa6505282e46a499c366e98491a887072d31cdb183bca70cb5c2342a9da8b8670f2fc0522cee5f373e1f46f6b499d344
   languageName: node
   linkType: hard
 
-"@altinn/figma-design-tokens@npm:^0.1.0":
-  version: 0.1.0
-  resolution: "@altinn/figma-design-tokens@npm:0.1.0::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40altinn%2Ffigma-design-tokens%2F0.1.0%2Fe7eae212dbc9788e35d19c9dd5ad29c342c73589c220ef06cd15fd3f8ef60ef0"
-  checksum: 2c4a01c8e06661ac1d6f0434ad0dad947cbb0c32043bbd82e18bb9dfcf0975613a6c735422980e623ac305180f341cfb31bb141e612d3cfd3eb910596ec9d97e
+"@altinn/figma-design-tokens@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "@altinn/figma-design-tokens@npm:0.3.0::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40altinn%2Ffigma-design-tokens%2F0.3.0%2Fc97036531b1b29622f09e601f9a3c9f8f49b36a5d97649f656bad4411a9fe674"
+  checksum: 72a0fa141e08d93912ff87714d98e5a5537ba0fb5cfb0bdad8e59e6fd05f37efa60bcb171f6ecb7c7901b24e2473d9b3b576dccae141c876d3bd3f536905e2ba
   languageName: node
   linkType: hard
 
@@ -2733,9 +2733,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-hookz/web@npm:^14.2.2":
-  version: 14.2.2
-  resolution: "@react-hookz/web@npm:14.2.2"
+"@react-hookz/web@npm:^15.0.1":
+  version: 15.0.1
+  resolution: "@react-hookz/web@npm:15.0.1"
   dependencies:
     "@react-hookz/deep-equal": ^1.0.2
   peerDependencies:
@@ -2745,7 +2745,7 @@ __metadata:
   peerDependenciesMeta:
     js-cookie:
       optional: true
-  checksum: b85f3bdb64c569e5046d58cea838e23e92b6381241688ee77844c94055b46b86c278d3d1892ac79f00a2b9ad389bab0b68fd020125fe3832a5b1cbcd4606b9ab
+  checksum: 26face421e2fe8722640140203a59dad422607f2d32d35c833631bcf2967018c5de809b93e45ccd2ae82de9c9aec32f8d97143be94b0ea270d18879765dc9d3e
   languageName: node
   linkType: hard
 
@@ -4232,7 +4232,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "altinn-app-frontend@workspace:altinn-app-frontend"
   dependencies:
-    "@altinn/altinn-design-system": 0.1.4
+    "@altinn/altinn-design-system": ^0.2.0
     "@babel/core": ^7.18.6
     "@babel/polyfill": ^7.12.1
     "@babel/preset-env": ^7.18.6
diff --git a/test/cypress/e2e/fixtures/texts.json b/test/cypress/e2e/fixtures/texts.json
index 326773f6d8..fde4c4fab6 100644
--- a/test/cypress/e2e/fixtures/texts.json
+++ b/test/cypress/e2e/fixtures/texts.json
@@ -8,7 +8,7 @@
   "dateOfEffect": "Når vil du at navnendringen skal skje?",
   "downloadAttachment": "last ned",
   "errorInGroup": "En av radene er ikke fylt ut riktig, dette må fikses før skjema kan sendes inn",
-  "errorReport": "Det er feil i skjema",
+  "errorReport": "Du må rette disse feilene før du kan gå videre",
   "feedback": "Du må flytte instansen til neste prosess med et API kall til process/next",
   "goToRightPage": "Gå til riktig side i skjema",
   "infoMessage": "Dette er en infomelding",
diff --git a/test/cypress/e2e/integration/app-frontend/validation.js b/test/cypress/e2e/integration/app-frontend/validation.js
index ec2995dba7..8c15eecb67 100644
--- a/test/cypress/e2e/integration/app-frontend/validation.js
+++ b/test/cypress/e2e/integration/app-frontend/validation.js
@@ -133,13 +133,50 @@ describe('Validation', () => {
     cy.get(appFrontend.changeOfName.newFirstName).should('be.visible').clear().type('test').blur();
     cy.get(appFrontend.changeOfName.confirmChangeName).should('be.visible').find('input').check();
     cy.intercept('GET', '**/validate').as('validateData');
-    cy.get(mui.button).should('be.visible').click();
+    cy.get(mui.button).should('be.visible').scrollIntoView();
+    cy.get(mui.button).should('be.inViewport');
+    cy.get(mui.button).click();
     cy.wait('@validateData');
     cy.get(appFrontend.errorReport)
       .should('exist')
       .should('be.visible')
-      .should('be.focused')
-      .should('contain.text', texts.errorReport);
+      .should('be.inViewport')
+      .should('contain.text', texts.errorReport)
+      .should('contain.text', texts.requiredFieldLastName)
+      .should('contain.text', texts.requiredFieldDateFrom);
+
+    const lastNameError = appFrontend.fieldValidationError.replace(
+      'field',
+      appFrontend.changeOfName.newLastName.substring(1),
+    );
+    cy.get(lastNameError).should('exist').should('not.be.inViewport');
+    cy.get(appFrontend.changeOfName.newLastName).should('not.be.focused');
+
+    cy.get(appFrontend.errorReport)
+      .get(`button:contains("${texts.requiredFieldLastName}")`)
+      .should('be.inViewport')
+      .click();
+
+    // Observe that we scrolled to show the error message and have the field focussed
+    cy.get(lastNameError).should('be.inViewport');
+    cy.get(appFrontend.changeOfName.newLastName).should('be.focused');
+
+    // Go to the summary page
+    cy.get(appFrontend.navMenu).find('li > button').last().click();
+    cy.get(appFrontend.errorReport)
+      .should('be.visible')
+      .should('contain.text', texts.errorReport)
+      .should('contain.text', texts.requiredFieldLastName)
+      .should('contain.text', texts.requiredFieldDateFrom);
+    cy.get(lastNameError).should('not.exist');
+
+    // Click the error text, which should lead us back to the change name form and focus the field
+    cy.get(appFrontend.errorReport)
+      .get(`button:contains("${texts.requiredFieldLastName}")`)
+      .click();
+
+    cy.get(lastNameError).should('exist').should('be.inViewport');
+    cy.get(appFrontend.changeOfName.newLastName).should('be.focused');
   });
 
   it('Validation on uploaded attachment type', () => {
@@ -175,7 +212,6 @@ describe('Validation', () => {
     cy.get(appFrontend.errorReport)
       .should('exist')
       .should('be.visible')
-      .should('be.focused')
       .should('contain.text', 'task validation');
   });
 });
diff --git a/test/cypress/e2e/pageobjects/app-frontend.js b/test/cypress/e2e/pageobjects/app-frontend.js
index 4e0c5ee782..d2defb7ecc 100644
--- a/test/cypress/e2e/pageobjects/app-frontend.js
+++ b/test/cypress/e2e/pageobjects/app-frontend.js
@@ -14,7 +14,7 @@ export default class AppFrontend {
     this.sendinButton = '#sendInButton';
     this.instantiationButton = '#instantiation-button';
     this.errorExclamation = '.fa-circle-exclamation';
-    this.errorReport = '#errorReport';
+    this.errorReport = '[data-testid="ErrorReport"]';
     this.altinnError = '[data-testid="AltinnError"]';
     this.profileIconButton = '#profile-icon-button';
     this.logOut = '#logout-menu-item';
diff --git a/test/cypress/e2e/support/chai-extensions.js b/test/cypress/e2e/support/chai-extensions.js
new file mode 100644
index 0000000000..1071a00538
--- /dev/null
+++ b/test/cypress/e2e/support/chai-extensions.js
@@ -0,0 +1,24 @@
+export default _chai => {
+
+  /**
+   * @see https://www.webtips.dev/webtips/cypress/check-if-element-is-in-viewport
+   */
+  function assertIsInViewport() {
+    const subject = this._obj;
+
+    const height = Cypress.$(cy.state('window')).height();
+    const width = Cypress.$(cy.state('window')).width();
+    const rect = subject[0].getBoundingClientRect();
+
+    this.assert(
+      // Changed from the linked source to make sure the element is entirely visible inside
+      // the viewport (no part of the element is outside)
+      rect.top > 0 && rect.top < height && rect.right <= width && rect.left >= 0 && rect.bottom <= height,
+      'expected #{this} to be in the viewport',
+      'expected #{this} to not be in the viewport',
+      this._obj
+    );
+  }
+
+  _chai.Assertion.addMethod('inViewport', assertIsInViewport);
+};
diff --git a/test/cypress/e2e/support/index.js b/test/cypress/e2e/support/index.js
index fe725a44d7..a6802ab2be 100644
--- a/test/cypress/e2e/support/index.js
+++ b/test/cypress/e2e/support/index.js
@@ -6,8 +6,10 @@ import 'cypress-plugin-tab';
 import './start-app-instance';
 import './wcag';
 import 'cypress-axe';
+import chaiExtensions from './chai-extensions';
 
 before(() => {
+  chai.use(chaiExtensions);
   Cypress.on('uncaught:exception', (e, runnable) => {
     console.log('error', e);
     console.log('runnable', runnable);