diff --git a/packages/web/src/components/AppBar/index.tsx b/packages/web/src/components/AppBar/index.tsx
index 9577252c23..66b006349c 100644
--- a/packages/web/src/components/AppBar/index.tsx
+++ b/packages/web/src/components/AppBar/index.tsx
@@ -1,20 +1,20 @@
-import * as React from 'react';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import MenuIcon from '@mui/icons-material/Menu';
+import MenuOpenIcon from '@mui/icons-material/MenuOpen';
+import MuiAppBar from '@mui/material/AppBar';
import type { ContainerProps } from '@mui/material/Container';
+import IconButton from '@mui/material/IconButton';
+import Toolbar from '@mui/material/Toolbar';
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
-import MuiAppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import MenuIcon from '@mui/icons-material/Menu';
-import MenuOpenIcon from '@mui/icons-material/MenuOpen';
-import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import * as React from 'react';
-import * as URLS from 'config/urls';
import AccountDropdownMenu from 'components/AccountDropdownMenu';
-import TrialStatusBadge from 'components/TrialStatusBadge/index.ee';
import Container from 'components/Container';
-import { FormattedMessage } from 'react-intl';
+import Logo from 'components/Logo/index';
+import TrialStatusBadge from 'components/TrialStatusBadge/index.ee';
+import * as URLS from 'config/urls';
+
import { Link } from './style';
type AppBarProps = {
@@ -60,11 +60,9 @@ export default function AppBar(props: AppBarProps): React.ReactElement {
{drawerOpen && matchSmallScreens ? : }
-
+
-
-
-
+
diff --git a/packages/web/src/components/CustomLogo/index.ee.tsx b/packages/web/src/components/CustomLogo/index.ee.tsx
new file mode 100644
index 0000000000..b43a85b423
--- /dev/null
+++ b/packages/web/src/components/CustomLogo/index.ee.tsx
@@ -0,0 +1,15 @@
+import useConfig from 'hooks/useConfig';
+
+const CustomLogo = () => {
+ const { config, loading } = useConfig(['logo.svgData']);
+
+ if (loading || !config?.['logo.svgData']) return null;
+
+ const logoSvgData = config['logo.svgData'] as string;
+
+ return (
+
+ );
+};
+
+export default CustomLogo;
diff --git a/packages/web/src/components/Logo/index.tsx b/packages/web/src/components/Logo/index.tsx
new file mode 100644
index 0000000000..bf20aa2e72
--- /dev/null
+++ b/packages/web/src/components/Logo/index.tsx
@@ -0,0 +1,23 @@
+import Typography from '@mui/material/Typography';
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import CustomLogo from 'components/CustomLogo/index.ee';
+import useConfig from 'hooks/useConfig';
+
+const Logo = () => {
+ const { config, loading } = useConfig(['logo.svgData']);
+
+ const logoSvgData = config?.['logo.svgData'] as string;
+ if (loading && !logoSvgData) return ();
+
+ if (logoSvgData) return ;
+
+ return (
+
+
+
+ );
+};
+
+export default Logo;
diff --git a/packages/web/src/components/Logo/style.ts b/packages/web/src/components/Logo/style.ts
new file mode 100644
index 0000000000..5c44684270
--- /dev/null
+++ b/packages/web/src/components/Logo/style.ts
@@ -0,0 +1,8 @@
+import { styled } from '@mui/material/styles';
+import { Link as RouterLink } from 'react-router-dom';
+
+export const Link = styled(RouterLink)(() => ({
+ textDecoration: 'none',
+ color: 'inherit',
+ display: 'inline-flex',
+}));
diff --git a/packages/web/src/components/PublicLayout/index.tsx b/packages/web/src/components/PublicLayout/index.tsx
index ef6a8b23fb..cb44ba0f8b 100644
--- a/packages/web/src/components/PublicLayout/index.tsx
+++ b/packages/web/src/components/PublicLayout/index.tsx
@@ -3,10 +3,9 @@ import * as React from 'react';
import Toolbar from '@mui/material/Toolbar';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
+import Logo from 'components/Logo';
import Container from 'components/Container';
-import { FormattedMessage } from 'react-intl';
type LayoutProps = {
children: React.ReactNode;
@@ -18,14 +17,7 @@ export default function Layout({ children }: LayoutProps): React.ReactElement {
-
-
-
+