diff --git a/components/Header/MainMenu/MobileMenuServer/index.tsx b/components/Header/MainMenu/MobileMenuServer/index.tsx
new file mode 100644
index 000000000..1932603f2
--- /dev/null
+++ b/components/Header/MainMenu/MobileMenuServer/index.tsx
@@ -0,0 +1,19 @@
+"use server"
+import { serverClient } from "@/lib/trpc/server"
+
+import MobileMenu from "../MobileMenu"
+
+export default async function MobileMenuServer({}) {
+  const [languages, headerData] = await Promise.all([
+    serverClient().contentstack.languageSwitcher.get(),
+    serverClient().contentstack.base.header(),
+  ])
+
+  if (!languages || !headerData) {
+    return null
+  }
+
+  return (
+    <MobileMenu languageUrls={languages.urls} topLink={headerData?.topLink} />
+  )
+}
diff --git a/components/Header/MainMenu/MyPagesMenuServer/index.tsx b/components/Header/MainMenu/MyPagesMenuServer/index.tsx
new file mode 100644
index 000000000..eaf5440c8
--- /dev/null
+++ b/components/Header/MainMenu/MyPagesMenuServer/index.tsx
@@ -0,0 +1,54 @@
+"use server"
+import { Link } from "react-feather"
+
+import { myPages } from "@/constants/routes/myPages"
+import { serverClient } from "@/lib/trpc/server"
+
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import Avatar from "../Avatar"
+import MyPagesMenu from "../MyPagesMenu"
+import MyPagesMobileMenu from "../MyPagesMobileMenu"
+
+import styles from "../mainMenu.module.css"
+
+export default async function MyPagesMenuServer({}) {
+  const lang = getLang()
+  const [intl, myPagesNavigation, user, membership] = await Promise.all([
+    getIntl(),
+    serverClient().contentstack.myPages.navigation.get(),
+    serverClient().user.name(),
+    serverClient().user.safeMembershipLevel(),
+  ])
+
+  return (
+    <>
+      {user ? (
+        <>
+          <MyPagesMenu
+            membership={membership}
+            navigation={myPagesNavigation}
+            user={user}
+          />
+          <MyPagesMobileMenu
+            membership={membership}
+            navigation={myPagesNavigation}
+            user={user}
+          />
+        </>
+      ) : (
+        <Link
+          href={myPages[lang]}
+          className={styles.loginLink}
+          aria-label={intl.formatMessage({ id: "Log in/Join" })}
+        >
+          <Avatar />
+          <span className={styles.userName}>
+            {intl.formatMessage({ id: "Log in/Join" })}
+          </span>
+        </Link>
+      )}
+    </>
+  )
+}
diff --git a/components/Header/MainMenu/index.tsx b/components/Header/MainMenu/index.tsx
index 22fd1bd9d..2727fd16d 100644
--- a/components/Header/MainMenu/index.tsx
+++ b/components/Header/MainMenu/index.tsx
@@ -1,18 +1,12 @@
 import NextLink from "next/link"
 import { Suspense } from "react"
 
-import { myPages } from "@/constants/routes/myPages"
-import { serverClient } from "@/lib/trpc/server"
-
 import Image from "@/components/Image"
-import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
-import Avatar from "./Avatar"
-import MobileMenu from "./MobileMenu"
-import MyPagesMenu from "./MyPagesMenu"
-import MyPagesMobileMenu from "./MyPagesMobileMenu"
+import MobileMenuServer from "./MobileMenuServer"
+import MyPagesMenuServer from "./MyPagesMenuServer"
 import NavigationMenu from "./NavigationMenu"
 
 import styles from "./mainMenu.module.css"
@@ -56,58 +50,3 @@ export default async function MainMenu({}: MainMenuProps) {
     </div>
   )
 }
-
-async function MyPagesMenuServer({}) {
-  const lang = getLang()
-  const [intl, myPagesNavigation, user, membership] = await Promise.all([
-    getIntl(),
-    serverClient().contentstack.myPages.navigation.get(),
-    serverClient().user.name(),
-    serverClient().user.safeMembershipLevel(),
-  ])
-
-  return (
-    <>
-      {user ? (
-        <>
-          <MyPagesMenu
-            membership={membership}
-            navigation={myPagesNavigation}
-            user={user}
-          />
-          <MyPagesMobileMenu
-            membership={membership}
-            navigation={myPagesNavigation}
-            user={user}
-          />
-        </>
-      ) : (
-        <Link
-          href={myPages[lang]}
-          className={styles.loginLink}
-          aria-label={intl.formatMessage({ id: "Log in/Join" })}
-        >
-          <Avatar />
-          <span className={styles.userName}>
-            {intl.formatMessage({ id: "Log in/Join" })}
-          </span>
-        </Link>
-      )}
-    </>
-  )
-}
-
-async function MobileMenuServer({}) {
-  const [languages, headerData] = await Promise.all([
-    serverClient().contentstack.languageSwitcher.get(),
-    serverClient().contentstack.base.header(),
-  ])
-
-  if (!languages || !headerData) {
-    return null
-  }
-
-  return (
-    <MobileMenu languageUrls={languages.urls} topLink={headerData?.topLink} />
-  )
-}