diff --git a/frontend/src/assets/img/howToApplyReleaseTemplates.png b/frontend/src/assets/img/howToApplyReleaseTemplates.png
new file mode 100644
index 0000000000..41249f3b9a
Binary files /dev/null and b/frontend/src/assets/img/howToApplyReleaseTemplates.png differ
diff --git a/frontend/src/assets/img/howToApplyReleaseTemplates.svg b/frontend/src/assets/img/howToApplyReleaseTemplates.svg
deleted file mode 100644
index 0d97d7ee93..0000000000
--- a/frontend/src/assets/img/howToApplyReleaseTemplates.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
diff --git a/frontend/src/assets/img/howToApplyReleaseTemplatesDark.png b/frontend/src/assets/img/howToApplyReleaseTemplatesDark.png
new file mode 100644
index 0000000000..ff05066963
Binary files /dev/null and b/frontend/src/assets/img/howToApplyReleaseTemplatesDark.png differ
diff --git a/frontend/src/assets/img/howToApplyReleaseTemplatesDark.svg b/frontend/src/assets/img/howToApplyReleaseTemplatesDark.svg
deleted file mode 100644
index 6090dfeb94..0000000000
--- a/frontend/src/assets/img/howToApplyReleaseTemplatesDark.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
diff --git a/frontend/src/assets/img/releaseTemplatePreview.png b/frontend/src/assets/img/releaseTemplatePreview.png
new file mode 100644
index 0000000000..60742d4e1c
Binary files /dev/null and b/frontend/src/assets/img/releaseTemplatePreview.png differ
diff --git a/frontend/src/assets/img/releaseTemplatePreview.svg b/frontend/src/assets/img/releaseTemplatePreview.svg
deleted file mode 100644
index 59980382f5..0000000000
--- a/frontend/src/assets/img/releaseTemplatePreview.svg
+++ /dev/null
@@ -1,92 +0,0 @@
-
diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx
index 37f7cbb2ce..21721b5030 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx
@@ -23,7 +23,7 @@ import MonitorHeartIcon from '@mui/icons-material/MonitorHeartOutlined';
import { useNavigate } from 'react-router-dom';
import { formatAssetPath } from 'utils/formatPath';
import FactCheckOutlinedIcon from '@mui/icons-material/FactCheckOutlined';
-import { ReactComponent as ReleaseManagementPreview } from 'assets/img/releaseTemplatePreview.svg';
+import ReleaseTemplatePreviewImage from 'assets/img/releaseTemplatePreview.png';
const StyledNewInUnleash = styled('div')(({ theme }) => ({
margin: theme.spacing(2, 0, 1, 0),
@@ -167,7 +167,12 @@ export const NewInUnleash = ({
label: 'Release templates',
summary: 'Save time and optimize your process',
icon: ,
- preview: ,
+ preview: (
+
+ ),
onCheckItOut: () => navigate('/release-templates'),
docsLink: 'https://docs.getunleash.io/reference/release-templates',
show: isEnterprise() && releasePlansEnabled,
diff --git a/frontend/src/component/releases/ReleaseManagement/ReleaseManagement.tsx b/frontend/src/component/releases/ReleaseManagement/ReleaseManagement.tsx
index 8d19fc81ec..900424ee87 100644
--- a/frontend/src/component/releases/ReleaseManagement/ReleaseManagement.tsx
+++ b/frontend/src/component/releases/ReleaseManagement/ReleaseManagement.tsx
@@ -13,11 +13,12 @@ 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 HowToApplyReleaseTemplatesImage from 'assets/img/howToApplyReleaseTemplates.png';
+import HowToApplyReleaseTemplatesDarkImage from 'assets/img/howToApplyReleaseTemplatesDark.png';
import type { Link as RouterLink } from 'react-router-dom';
import MenuBook from '@mui/icons-material/MenuBook';
import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
+import { formatAssetPath } from 'utils/formatPath';
const StyledLink = styled(Link)(({ theme }) => ({
display: 'flex',
@@ -35,6 +36,10 @@ const StyledMenuBook = styled(MenuBook)(({ theme }) => ({
fontSize: theme.spacing(2.25),
}));
+const StyledImg = styled('img')(() => ({
+ maxWidth: '100%',
+}));
+
const CenteredHowTo = styled(Box)(({ theme }) => ({
margin: theme.spacing(3, 0),
display: 'flex',
@@ -99,8 +104,22 @@ export const ReleaseManagement = () => {
}
- lightmode={}
+ darkmode={
+
+ }
+ lightmode={
+
+ }
/>