diff --git a/CHANGELOG.md b/CHANGELOG.md
index 53c3dfe00..854f5a931 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to
### Added
- 💄(frontend) redesign 404 error standalone page #2696
+- 💄(frontend) redesign 403 access denied page #2720
- ✨(frontend) duplicate with subdocuments #2584
- ✨(helm) allow disallowing search engine indexing per instance #2694
- 🐛(frontend) reduce PostHog volume from web vitals and opt_in spam #2701
diff --git a/src/frontend/apps/impress/src/assets/icons/error-403.svg b/src/frontend/apps/impress/src/assets/icons/error-403.svg
new file mode 100644
index 000000000..e910ada1d
--- /dev/null
+++ b/src/frontend/apps/impress/src/assets/icons/error-403.svg
@@ -0,0 +1,102 @@
+
diff --git a/src/frontend/apps/impress/src/assets/icons/icon-403.png b/src/frontend/apps/impress/src/assets/icons/icon-403.png
deleted file mode 100644
index 480944f34..000000000
Binary files a/src/frontend/apps/impress/src/assets/icons/icon-403.png and /dev/null differ
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocPage403.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocPage403.tsx
index b8ce5330c..f2b5669d8 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocPage403.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocPage403.tsx
@@ -1,19 +1,15 @@
-import { Button } from '@gouvfr-lasuite/ui-components';
import Head from 'next/head';
-import Image from 'next/image';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
-import styled from 'styled-components';
+import { css } from 'styled-components';
-import img403 from '@/assets/icons/icon-403.png';
+import Error403Svg from '@/assets/icons/error-403.svg';
+import BubbleTextSvg from '@/assets/icons/ui-kit/bubble-text.svg';
import { Box, Icon, Loading, StyledLink, Text } from '@/components';
import { ButtonAccessRequest } from '@/docs/doc-share';
import { useDocAccessRequests } from '@/docs/doc-share/api/useDocAccessRequest';
import { useSkeletonStore } from '@/features/skeletons';
-
-const StyledButton = styled(Button)`
- width: fit-content;
-`;
+import HomeSvg from '@/icons/house-rounded.svg';
interface DocProps {
id: string;
@@ -40,6 +36,7 @@ export const DocPage403 = ({ id }: DocProps) => {
const hasRequested = !!requests?.results.find(
(request) => request.document === id,
);
+ const isSubDocument = docAccessError?.status === 404;
if (isLoadingRequest) {
return ;
@@ -61,55 +58,93 @@ export const DocPage403 = ({ id }: DocProps) => {
-
-
-
-
+
+
+
+ {t('Access denied')}
+
+
{hasRequested
? t('Your access request for this document is pending.')
: t('Insufficient access rights to view the document.')}
-
- {docAccessError?.status === 404 && (
+ {isSubDocument && (
{t(
"You're currently viewing a sub-document. To gain access, please request permission from the main document.",
)}
)}
-
-
-
- }
- color="brand"
- variant="secondary"
- >
- {t('Home')}
-
-
- {docAccessError?.status !== 404 && (
-
- )}
-
+
+
+
+ }
+ $theme="neutral"
+ $variation="tertiary"
+ />
+
+ {t('Home')}
+
+
+ {!isSubDocument && (
+ }
+ />
+ )}
>