diff --git a/web/components/layouts/Main.tsx b/web/components/layouts/Main.tsx
index 492527e18..fe25c8a0c 100644
--- a/web/components/layouts/Main.tsx
+++ b/web/components/layouts/Main.tsx
@@ -1,15 +1,20 @@
 import { Layout } from 'antd';
+import { useRecoilValue } from 'recoil';
 import { ServerStatusStore } from '../stores/ServerStatusStore';
-import { ClientConfigStore } from '../stores/ClientConfigStore';
+import { ClientConfigStore, clientConfigStateAtom } from '../stores/ClientConfigStore';
 import { Content, Header } from '../ui';
+import { ClientConfig } from '../../interfaces/client-config.model';
 
 function Main() {
+  const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
+  const { name, title } = clientConfig;
+
   return (
     <>
       <ServerStatusStore />
       <ClientConfigStore />
       <Layout>
-        <Header />
+        <Header name={title || name} />
         <Content />
       </Layout>
     </>