diff --git a/ui/src/components/PageTags/index.tsx b/ui/src/components/PageTags/index.tsx
new file mode 100644
index 00000000..449bd0ec
--- /dev/null
+++ b/ui/src/components/PageTags/index.tsx
@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import { Helmet } from 'react-helmet-async';
+
+import { brandingStore, pageTagStore } from '@/stores';
+
+const doInsertCustomCSS = !document.querySelector('link[href*="custom.css"]');
+
+const Index: FC = () => {
+  const { favicon, square_icon } = brandingStore((state) => state.branding);
+  const { pageTitle, keywords, description } = pageTagStore(
+    (state) => state.items,
+  );
+  return (
+    <Helmet>
+      <link
+        rel="icon"
+        type="image/png"
+        href={favicon || square_icon || '/favicon.ico'}
+      />
+      <link rel="icon" type="image/png" sizes="192x192" href={square_icon} />
+      <link rel="apple-touch-icon" type="image/png" href={square_icon} />
+      <title>{pageTitle}</title>
+      {keywords && <meta name="keywords" content={keywords} />}
+      {description && <meta name="description" content={description} />}
+      {doInsertCustomCSS && (
+        <link rel="stylesheet" href={`${process.env.PUBLIC_URL}/custom.css`} />
+      )}
+    </Helmet>
+  );
+};
+
+export default Index;
diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts
index 80b69eae..43376a1e 100644
--- a/ui/src/components/index.ts
+++ b/ui/src/components/index.ts
@@ -29,6 +29,7 @@ import Labels from './LabelsCard';
 import DiffContent from './DiffContent';
 import Customize from './Customize';
 import CustomizeTheme from './CustomizeTheme';
+import PageTags from './PageTags';
 
 export {
   Avatar,
@@ -64,5 +65,6 @@ export {
   DiffContent,
   Customize,
   CustomizeTheme,
+  PageTags,
 };
 export type { EditorRef, JSONSchema, UISchema };
diff --git a/ui/src/pages/Layout/index.tsx b/ui/src/pages/Layout/index.tsx
index 8ee5eb1e..a8186360 100644
--- a/ui/src/pages/Layout/index.tsx
+++ b/ui/src/pages/Layout/index.tsx
@@ -1,43 +1,28 @@
 import { FC, memo } from 'react';
 import { Outlet } from 'react-router-dom';
-import { Helmet, HelmetProvider } from 'react-helmet-async';
+import { HelmetProvider } from 'react-helmet-async';
 
 import { SWRConfig } from 'swr';
 
-import { toastStore, brandingStore, pageTagStore } from '@/stores';
-import { Header, Footer, Toast, Customize, CustomizeTheme } from '@/components';
+import { toastStore } from '@/stores';
+import {
+  Header,
+  Footer,
+  Toast,
+  Customize,
+  CustomizeTheme,
+  PageTags,
+} from '@/components';
 
-const doInsertCustomCSS = !document.querySelector('link[href*="custom.css"]');
 const Layout: FC = () => {
   const { msg: toastMsg, variant, clear: toastClear } = toastStore();
   const closeToast = () => {
     toastClear();
   };
-  const { favicon, square_icon } = brandingStore((state) => state.branding);
-  const { pageTitle, keywords, description } = pageTagStore(
-    (state) => state.items,
-  );
 
   return (
     <HelmetProvider>
-      <Helmet>
-        <link
-          rel="icon"
-          type="image/png"
-          href={favicon || square_icon || '/favicon.ico'}
-        />
-        <link rel="icon" type="image/png" sizes="192x192" href={square_icon} />
-        <link rel="apple-touch-icon" type="image/png" href={square_icon} />
-        <title>{pageTitle}</title>
-        {keywords && <meta name="keywords" content={keywords} />}
-        {description && <meta name="description" content={description} />}
-        {doInsertCustomCSS && (
-          <link
-            rel="stylesheet"
-            href={`${process.env.PUBLIC_URL}/custom.css`}
-          />
-        )}
-      </Helmet>
+      <PageTags />
       <CustomizeTheme />
       <SWRConfig
         value={{