diff --git a/frontend/src/assets/img/howToApplyReleaseTemplates.svg b/frontend/src/assets/img/howToApplyReleaseTemplates.svg
new file mode 100644
index 0000000000..0d97d7ee93
--- /dev/null
+++ b/frontend/src/assets/img/howToApplyReleaseTemplates.svg
@@ -0,0 +1,91 @@
+
diff --git a/frontend/src/assets/img/howToApplyReleaseTemplatesDark.svg b/frontend/src/assets/img/howToApplyReleaseTemplatesDark.svg
new file mode 100644
index 0000000000..6090dfeb94
--- /dev/null
+++ b/frontend/src/assets/img/howToApplyReleaseTemplatesDark.svg
@@ -0,0 +1,91 @@
+
diff --git a/frontend/src/component/releases/ReleaseManagement/ReleaseManagement.tsx b/frontend/src/component/releases/ReleaseManagement/ReleaseManagement.tsx
index 5cc683b4a1..e2b9bdb8d4 100644
--- a/frontend/src/component/releases/ReleaseManagement/ReleaseManagement.tsx
+++ b/frontend/src/component/releases/ReleaseManagement/ReleaseManagement.tsx
@@ -1,5 +1,5 @@
import { PageContent } from 'component/common/PageContent/PageContent';
-import { Grid } from '@mui/material';
+import { Box, Grid, Link, styled } from '@mui/material';
import { styles as themeStyles } from 'component/common';
import { usePageTitle } from 'hooks/usePageTitle';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
@@ -13,6 +13,38 @@ import { useUiFlag } from 'hooks/useUiFlag';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature';
import { RELEASE_PLAN_TEMPLATE_CREATE } from '@server/types/permissions';
+import { ReactComponent as HowToApplyReleaseTemplates } from 'assets/img/howToApplyReleaseTemplates.svg';
+import { ReactComponent as HowToApplyReleaseTemplatesDark } from 'assets/img/howToApplyReleaseTemplatesDark.svg';
+import type { Link as RouterLink } from 'react-router-dom';
+import MenuBook from '@mui/icons-material/MenuBook';
+import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
+
+const StyledLink = styled(Link)(({ theme }) => ({
+ display: 'flex',
+ alignItems: 'center',
+ gap: theme.spacing(1),
+ padding: 0,
+ color: theme.palette.links,
+ fontWeight: theme.fontWeight.medium,
+ '&:hover, &:focus': {
+ textDecoration: 'underline',
+ },
+}));
+
+const StyledMenuBook = styled(MenuBook)(({ theme }) => ({
+ fontSize: theme.spacing(2.25),
+}));
+
+const CenteredHowTo = styled(Box)(({ theme }) => ({
+ margin: theme.spacing(3, 0),
+ display: 'flex',
+ borderRadius: theme.shape.borderRadiusLarge,
+ backgroundColor: theme.palette.background.elevation1,
+ boxShadow: 'none',
+ justifyContent: 'center',
+ alignItems: 'center',
+ '> svg': { display: 'block', width: '100%', height: 'auto' },
+}));
export const ReleaseManagement = () => {
usePageTitle('Release templates');
@@ -64,6 +96,26 @@ export const ReleaseManagement = () => {
)}
+
+ {data.templates.length === 0 ? (
+ <>
+
+ }
+ lightmode={}
+ />
+
+
+ Read more in our documentation
+
+
+ ) : null}
);
};