diff --git a/frontend/public/locales/en/translations.json b/frontend/public/locales/en/translations.json
index de3b99f11..fa23b9630 100644
--- a/frontend/public/locales/en/translations.json
+++ b/frontend/public/locales/en/translations.json
@@ -41,7 +41,6 @@
   "common": {
     "head-title": "{{title}} | Infisical",
     "error_project-already-exists": "A project with this name already exists.",
-    "no-mobile": " To use Infisical, please log in through a device with larger dimensions. ",
     "email": "Email",
     "password": "Password",
     "first-name": "First Name",
diff --git a/frontend/public/locales/es/translations.json b/frontend/public/locales/es/translations.json
index d7ee331f4..1d217b89d 100644
--- a/frontend/public/locales/es/translations.json
+++ b/frontend/public/locales/es/translations.json
@@ -41,7 +41,6 @@
   "common": {
     "head-title": "{{title}} | Infisical",
     "error_project-already-exists": "Ya existe un proyecto con este nombre.",
-    "no-mobile": "Para usar Infisical, inicia sesión con un dispositivo de mayores dimesiones.",
     "email": "Correo electrónico",
     "password": "Contraseña",
     "first-name": "Nombre",
diff --git a/frontend/public/locales/fr/translations.json b/frontend/public/locales/fr/translations.json
index 60d5cf8cf..538b700c6 100644
--- a/frontend/public/locales/fr/translations.json
+++ b/frontend/public/locales/fr/translations.json
@@ -41,7 +41,6 @@
   "common": {
     "head-title": "{{title}} | Infisical",
     "error_project-already-exists": "Un projet avec ce nom existe déjà.",
-    "no-mobile": " Pour utiliser Infisical, veuillez vous connecter avec un appareil avec des dimensions plus grandes. ",
     "email": "Email",
     "password": "Mot de passe",
     "first-name": "Prénom",
diff --git a/frontend/public/locales/ko/translations.json b/frontend/public/locales/ko/translations.json
index e8169eaba..a9eb653cc 100644
--- a/frontend/public/locales/ko/translations.json
+++ b/frontend/public/locales/ko/translations.json
@@ -30,7 +30,6 @@
   "common": {
     "head-title": "{{title}} | Infisical",
     "error_project-already-exists": "동일한 이름을 가진 프로젝트가 이미 존재해요.",
-    "no-mobile": " Infisical을 사용하려면, 큰 화면을 가진 디바이스로 로그인하여 주세요.",
     "email": "메일",
     "password": "비밀번호",
     "first-name": "이름",
diff --git a/frontend/public/locales/pt-BR/translations.json b/frontend/public/locales/pt-BR/translations.json
index a491d3d74..9a0ab6768 100644
--- a/frontend/public/locales/pt-BR/translations.json
+++ b/frontend/public/locales/pt-BR/translations.json
@@ -41,7 +41,6 @@
   "common": {
     "head-title": "{{title}} | Infisical",
     "error_project-already-exists": "Já exite um projeto com este nome.",
-    "no-mobile": "Para usar o Infisical, faça o login através de um dispositivo com dimensões maiores.",
     "email": "Email",
     "password": "Senha",
     "first-name": "Primeiro Nome",
diff --git a/frontend/public/locales/tr/translations.json b/frontend/public/locales/tr/translations.json
index 93f228f96..5a564eb60 100644
--- a/frontend/public/locales/tr/translations.json
+++ b/frontend/public/locales/tr/translations.json
@@ -41,7 +41,6 @@
   "common": {
     "head-title": "{{title}} | Infisical",
     "error_project-already-exists": "Bu isimle bir proje zaten mevcut.",
-    "no-mobile": " Infisical'ı kullanmak için, lütfen daha büyük boyutlara sahip bir cihaz üzerinden giriş yapın. ",
     "email": "Email",
     "password": "Şifre",
     "first-name": "Adınız",
diff --git a/frontend/src/components/project/ProjectOverviewChangeSection.tsx b/frontend/src/components/project/ProjectOverviewChangeSection.tsx
index 455b0806a..dba917915 100644
--- a/frontend/src/components/project/ProjectOverviewChangeSection.tsx
+++ b/frontend/src/components/project/ProjectOverviewChangeSection.tsx
@@ -76,8 +76,8 @@ export const ProjectOverviewChangeSection = ({ showSlugField = false }: Props) =
 
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="justify-betweens flex">
-        <h2 className="mb-8 flex-1 text-xl font-medium text-mineshaft-100">Project Overview</h2>
+      <div className="justify-betweens mb-8 flex flex-wrap gap-2">
+        <h2 className="flex-1 text-xl font-medium text-mineshaft-100">Project Overview</h2>
         <div className="space-x-2">
           <Button
             variant="outline_bg"
diff --git a/frontend/src/layouts/AdminLayout/AdminLayout.tsx b/frontend/src/layouts/AdminLayout/AdminLayout.tsx
index 89e8a761e..9ab8c876d 100644
--- a/frontend/src/layouts/AdminLayout/AdminLayout.tsx
+++ b/frontend/src/layouts/AdminLayout/AdminLayout.tsx
@@ -1,6 +1,3 @@
-import { useTranslation } from "react-i18next";
-import { faMobile } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Outlet } from "@tanstack/react-router";
 
 import { Banner } from "@app/components/page-frames/Banner";
@@ -15,7 +12,6 @@ import { InsecureConnectionBanner } from "../OrganizationLayout/components/Insec
 import { AdminNavBar } from "./AdminNavBar";
 
 export const AdminLayout = () => {
-  const { t } = useTranslation();
   const { config } = useServerConfig();
   const { data: serverDetails, isLoading } = useFetchServerStatus();
   const { subscription } = useSubscription();
@@ -26,7 +22,7 @@ export const AdminLayout = () => {
     <>
       <Banner />
       <div
-        className={`dark hidden ${containerHeight} w-full flex-col overflow-x-hidden bg-bunker-800 transition-all md:flex`}
+        className={`dark ${containerHeight} flex w-full flex-col overflow-x-hidden bg-bunker-800 transition-all`}
       >
         <Navbar />
         {!isLoading && !serverDetails?.redisConfigured && <RedisBanner />}
@@ -40,12 +36,6 @@ export const AdminLayout = () => {
           </div>
         </div>
       </div>
-      <div className="z-200 flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
-        <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
-        <p className="max-w-sm px-6 text-center text-lg text-gray-200">
-          {` ${t("common.no-mobile")} `}
-        </p>
-      </div>
       <Banner />
     </>
   );
diff --git a/frontend/src/layouts/OrganizationLayout/OrganizationLayout.tsx b/frontend/src/layouts/OrganizationLayout/OrganizationLayout.tsx
index c1cc10e41..c91917423 100644
--- a/frontend/src/layouts/OrganizationLayout/OrganizationLayout.tsx
+++ b/frontend/src/layouts/OrganizationLayout/OrganizationLayout.tsx
@@ -1,6 +1,3 @@
-import { useTranslation } from "react-i18next";
-import { faMobile } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Outlet, useParams } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";
 
@@ -27,8 +24,6 @@ export const OrganizationLayout = () => {
 
   const { popUp, handlePopUpToggle } = usePopUp(["createOrg"] as const);
 
-  const { t } = useTranslation();
-
   const containerHeight = config.pageFrameContent ? "h-[94vh]" : "h-screen";
 
   const { data: serverDetails, isLoading } = useFetchServerStatus();
@@ -38,7 +33,7 @@ export const OrganizationLayout = () => {
     <>
       <Banner />
       <div
-        className={`dark hidden ${containerHeight} w-full flex-col overflow-x-hidden bg-bunker-800 transition-all md:flex`}
+        className={`dark ${containerHeight} flex w-full flex-col overflow-x-hidden bg-bunker-800 transition-all`}
       >
         <Navbar />
         <div className="flex grow flex-col overflow-y-hidden">
@@ -61,12 +56,6 @@ export const OrganizationLayout = () => {
         isOpen={popUp?.createOrg?.isOpen}
         onClose={() => handlePopUpToggle("createOrg", false)}
       />
-      <div className="z-200 flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
-        <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
-        <p className="max-w-sm px-6 text-center text-lg text-gray-200">
-          {` ${t("common.no-mobile")} `}
-        </p>
-      </div>
       <Banner />
     </>
   );
diff --git a/frontend/src/layouts/PersonalSettingsLayout/PersonalSettingsLayout.tsx b/frontend/src/layouts/PersonalSettingsLayout/PersonalSettingsLayout.tsx
index 2215b8ef7..44dcaaba6 100644
--- a/frontend/src/layouts/PersonalSettingsLayout/PersonalSettingsLayout.tsx
+++ b/frontend/src/layouts/PersonalSettingsLayout/PersonalSettingsLayout.tsx
@@ -1,29 +1,16 @@
-import { useTranslation } from "react-i18next";
-import { faMobile } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Outlet } from "@tanstack/react-router";
 
 import { InsecureConnectionBanner } from "../OrganizationLayout/components/InsecureConnectionBanner";
 
 export const PersonalSettingsLayout = () => {
-  const { t } = useTranslation();
-
   return (
-    <>
-      <div className="dark hidden h-screen w-full flex-col overflow-x-hidden bg-bunker-800 md:flex">
-        {!window.isSecureContext && <InsecureConnectionBanner />}
-        <div className="flex grow flex-col overflow-y-hidden md:flex-row">
-          <main className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 px-12 pt-10 pb-4 dark:scheme-dark">
-            <Outlet />
-          </main>
-        </div>
+    <div className="dark flex h-screen w-full flex-col overflow-x-hidden bg-bunker-800">
+      {!window.isSecureContext && <InsecureConnectionBanner />}
+      <div className="flex grow flex-col overflow-y-hidden md:flex-row">
+        <main className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 px-12 pt-10 pb-4 dark:scheme-dark">
+          <Outlet />
+        </main>
       </div>
-      <div className="z-200 flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
-        <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
-        <p className="max-w-sm px-6 text-center text-lg text-gray-200">
-          {` ${t("common.no-mobile")} `}
-        </p>
-      </div>
-    </>
+    </div>
   );
 };
diff --git a/frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx b/frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx
index 7aeb5e1fd..3d4dc2076 100644
--- a/frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx
+++ b/frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx
@@ -1,6 +1,3 @@
-import { useTranslation } from "react-i18next";
-import { faMobile } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, Outlet, useLocation } from "@tanstack/react-router";
 import { motion } from "framer-motion";
 
@@ -17,7 +14,6 @@ export const PkiManagerLayout = () => {
   const { currentProject } = useProject();
   const { assumedPrivilegeDetails } = useProjectPermission();
   const { subscription } = useSubscription();
-  const { t } = useTranslation();
 
   const { data: subscribers = [] } = useListWorkspacePkiSubscribers(currentProject?.id || "");
   const { data: templatesData } = useListWorkspaceCertificateTemplates({
@@ -32,147 +28,137 @@ export const PkiManagerLayout = () => {
 
   const location = useLocation();
   return (
-    <>
-      <div className="dark hidden h-full w-full flex-col overflow-x-hidden md:flex">
-        <div className="border-b border-mineshaft-600 bg-mineshaft-900">
-          <motion.div
-            key="menu-project-items"
-            initial={{ x: -150 }}
-            animate={{ x: 0 }}
-            exit={{ x: -150 }}
-            transition={{ duration: 0.2 }}
-            className="px-4"
-          >
-            <nav className="w-full">
-              <Tabs value="selected">
-                <TabList className="border-b-0">
-                  <Link
-                    to="/projects/cert-management/$projectId/policies"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Certificates</Tab>}
-                  </Link>
-                  <Link
-                    to="/projects/cert-management/$projectId/certificate-authorities"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => (
-                      <Tab value={isActive || location.pathname.match(/\/ca\//) ? "selected" : ""}>
-                        Certificate Authorities
-                      </Tab>
-                    )}
-                  </Link>
-                  <Link
-                    to="/projects/cert-management/$projectId/alerting"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Alerting</Tab>}
-                  </Link>
-                  <Link
-                    to="/projects/cert-management/$projectId/integrations"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Integrations</Tab>}
-                  </Link>
-                  <Link
-                    to="/projects/cert-management/$projectId/app-connections"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => (
-                      <Tab value={isActive ? "selected" : ""}>App Connections</Tab>
-                    )}
-                  </Link>
-                  {showLegacySection && (
-                    <>
-                      {(subscription.pkiLegacyTemplates || hasExistingSubscribers) && (
-                        <Link
-                          to="/projects/cert-management/$projectId/subscribers"
-                          params={{
-                            projectId: currentProject.id
-                          }}
-                        >
-                          {({ isActive }) => (
-                            <Tab value={isActive ? "selected" : ""}>Subscribers (Legacy)</Tab>
-                          )}
-                        </Link>
-                      )}
-                      {(subscription.pkiLegacyTemplates || hasExistingTemplates) && (
-                        <Link
-                          to="/projects/cert-management/$projectId/certificate-templates"
-                          params={{
-                            projectId: currentProject.id
-                          }}
-                        >
-                          {({ isActive }) => (
-                            <Tab value={isActive ? "selected" : ""}>
-                              Certificate Templates (Legacy)
-                            </Tab>
-                          )}
-                        </Link>
-                      )}
-                    </>
+    <div className="dark flex h-full w-full flex-col overflow-x-hidden">
+      <div className="border-b border-mineshaft-600 bg-mineshaft-900">
+        <motion.div
+          key="menu-project-items"
+          initial={{ x: -150 }}
+          animate={{ x: 0 }}
+          exit={{ x: -150 }}
+          transition={{ duration: 0.2 }}
+          className="px-4"
+        >
+          <nav className="w-full">
+            <Tabs value="selected">
+              <TabList className="border-b-0">
+                <Link
+                  to="/projects/cert-management/$projectId/policies"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Certificates</Tab>}
+                </Link>
+                <Link
+                  to="/projects/cert-management/$projectId/certificate-authorities"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => (
+                    <Tab value={isActive || location.pathname.match(/\/ca\//) ? "selected" : ""}>
+                      Certificate Authorities
+                    </Tab>
                   )}
-                  <Link
-                    to="/projects/cert-management/$projectId/access-management"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => (
-                      <Tab
-                        value={
-                          isActive ||
-                          location.pathname.match(/\/groups\/|\/identities\/|\/members\/|\/roles\//)
-                            ? "selected"
-                            : ""
-                        }
+                </Link>
+                <Link
+                  to="/projects/cert-management/$projectId/alerting"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Alerting</Tab>}
+                </Link>
+                <Link
+                  to="/projects/cert-management/$projectId/integrations"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Integrations</Tab>}
+                </Link>
+                <Link
+                  to="/projects/cert-management/$projectId/app-connections"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => <Tab value={isActive ? "selected" : ""}>App Connections</Tab>}
+                </Link>
+                {showLegacySection && (
+                  <>
+                    {(subscription.pkiLegacyTemplates || hasExistingSubscribers) && (
+                      <Link
+                        to="/projects/cert-management/$projectId/subscribers"
+                        params={{
+                          projectId: currentProject.id
+                        }}
                       >
-                        Access Control
-                      </Tab>
+                        {({ isActive }) => (
+                          <Tab value={isActive ? "selected" : ""}>Subscribers (Legacy)</Tab>
+                        )}
+                      </Link>
                     )}
-                  </Link>
-                  <Link
-                    to="/projects/cert-management/$projectId/audit-logs"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Audit Logs</Tab>}
-                  </Link>
-                  <Link
-                    to="/projects/cert-management/$projectId/settings"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Settings</Tab>}
-                  </Link>
-                </TabList>
-              </Tabs>
-            </nav>
-          </motion.div>
-        </div>
-        {assumedPrivilegeDetails && <AssumePrivilegeModeBanner />}
-        <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 px-12 pt-10 pb-4">
-          <Outlet />
-        </div>
+                    {(subscription.pkiLegacyTemplates || hasExistingTemplates) && (
+                      <Link
+                        to="/projects/cert-management/$projectId/certificate-templates"
+                        params={{
+                          projectId: currentProject.id
+                        }}
+                      >
+                        {({ isActive }) => (
+                          <Tab value={isActive ? "selected" : ""}>
+                            Certificate Templates (Legacy)
+                          </Tab>
+                        )}
+                      </Link>
+                    )}
+                  </>
+                )}
+                <Link
+                  to="/projects/cert-management/$projectId/access-management"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => (
+                    <Tab
+                      value={
+                        isActive ||
+                        location.pathname.match(/\/groups\/|\/identities\/|\/members\/|\/roles\//)
+                          ? "selected"
+                          : ""
+                      }
+                    >
+                      Access Control
+                    </Tab>
+                  )}
+                </Link>
+                <Link
+                  to="/projects/cert-management/$projectId/audit-logs"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Audit Logs</Tab>}
+                </Link>
+                <Link
+                  to="/projects/cert-management/$projectId/settings"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Settings</Tab>}
+                </Link>
+              </TabList>
+            </Tabs>
+          </nav>
+        </motion.div>
       </div>
-      <div className="z-200 flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
-        <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
-        <p className="max-w-sm px-6 text-center text-lg text-gray-200">
-          {` ${t("common.no-mobile")} `}
-        </p>
+      {assumedPrivilegeDetails && <AssumePrivilegeModeBanner />}
+      <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 px-12 pt-10 pb-4">
+        <Outlet />
       </div>
-    </>
+    </div>
   );
 };
diff --git a/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx b/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx
index 47a2333c7..4eb6433a5 100644
--- a/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx
+++ b/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx
@@ -1,6 +1,3 @@
-import { useTranslation } from "react-i18next";
-import { faMobile } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, Outlet, useLocation } from "@tanstack/react-router";
 import { motion } from "framer-motion";
 
@@ -20,7 +17,6 @@ export const SecretManagerLayout = () => {
   const { assumedPrivilegeDetails } = useProjectPermission();
   const location = useLocation();
 
-  const { t } = useTranslation();
   const projectSlug = currentProject?.slug || "";
 
   const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({
@@ -42,141 +38,131 @@ export const SecretManagerLayout = () => {
     (secretApprovalReqCount?.open || 0) + (accessApprovalRequestCount?.pendingCount || 0);
 
   return (
-    <>
-      <div className="dark hidden h-full w-full flex-col overflow-x-hidden md:flex">
-        <div className="border-b border-mineshaft-600 bg-mineshaft-900">
-          <motion.div
-            key="menu-project-items"
-            initial={{ x: -150 }}
-            animate={{ x: 0 }}
-            exit={{ x: -150 }}
-            transition={{ duration: 0.2 }}
-            className="px-4"
-          >
-            <nav className="w-full">
-              <Tabs value="selected">
-                <TabList className="border-b-0">
-                  <Link
-                    to="/projects/secret-management/$projectId/overview"
-                    params={{
-                      projectId: currentProject.id,
-                      ...(currentProject.environments.length
-                        ? { envSlug: currentProject.environments[0]?.slug }
-                        : {})
-                    }}
-                  >
-                    {({ isActive }) => (
-                      <Tab
-                        value={
-                          isActive || location.pathname.match(/\/secrets\/|\/commits\//)
-                            ? "selected"
-                            : ""
-                        }
-                      >
-                        Overview
-                      </Tab>
-                    )}
-                  </Link>
-                  <Link
-                    to="/projects/secret-management/$projectId/approval"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => (
-                      <Tab value={isActive ? "selected" : ""}>
-                        Approvals
-                        {Boolean(
-                          secretApprovalReqCount?.open || accessApprovalRequestCount?.pendingCount
-                        ) && (
-                          <Badge variant="warning" isSquare className="ml-1.5">
-                            {pendingRequestsCount}
-                          </Badge>
-                        )}
-                      </Tab>
-                    )}
-                  </Link>
-                  <Link
-                    to="/projects/secret-management/$projectId/integrations"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Integrations</Tab>}
-                  </Link>
-                  {Boolean(secretRotations?.length) && (
-                    <Link
-                      to="/projects/secret-management/$projectId/secret-rotation"
-                      params={{
-                        projectId: currentProject.id
-                      }}
+    <div className="dark flex h-full w-full flex-col overflow-x-hidden">
+      <div className="border-b border-mineshaft-600 bg-mineshaft-900">
+        <motion.div
+          key="menu-project-items"
+          initial={{ x: -150 }}
+          animate={{ x: 0 }}
+          exit={{ x: -150 }}
+          transition={{ duration: 0.2 }}
+          className="px-4"
+        >
+          <nav className="w-full">
+            <Tabs value="selected">
+              <TabList className="border-b-0">
+                <Link
+                  to="/projects/secret-management/$projectId/overview"
+                  params={{
+                    projectId: currentProject.id,
+                    ...(currentProject.environments.length
+                      ? { envSlug: currentProject.environments[0]?.slug }
+                      : {})
+                  }}
+                >
+                  {({ isActive }) => (
+                    <Tab
+                      value={
+                        isActive || location.pathname.match(/\/secrets\/|\/commits\//)
+                          ? "selected"
+                          : ""
+                      }
                     >
-                      {({ isActive }) => (
-                        <Tab value={isActive ? "selected" : ""}>Secret Rotations</Tab>
-                      )}
-                    </Link>
+                      Overview
+                    </Tab>
                   )}
+                </Link>
+                <Link
+                  to="/projects/secret-management/$projectId/approval"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => (
+                    <Tab value={isActive ? "selected" : ""}>
+                      Approvals
+                      {Boolean(
+                        secretApprovalReqCount?.open || accessApprovalRequestCount?.pendingCount
+                      ) && (
+                        <Badge variant="warning" isSquare className="ml-1.5">
+                          {pendingRequestsCount}
+                        </Badge>
+                      )}
+                    </Tab>
+                  )}
+                </Link>
+                <Link
+                  to="/projects/secret-management/$projectId/integrations"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Integrations</Tab>}
+                </Link>
+                {Boolean(secretRotations?.length) && (
                   <Link
-                    to="/projects/secret-management/$projectId/app-connections"
+                    to="/projects/secret-management/$projectId/secret-rotation"
                     params={{
                       projectId: currentProject.id
                     }}
                   >
                     {({ isActive }) => (
-                      <Tab value={isActive ? "selected" : ""}>App Connections</Tab>
+                      <Tab value={isActive ? "selected" : ""}>Secret Rotations</Tab>
                     )}
                   </Link>
-                  <Link
-                    to="/projects/secret-management/$projectId/access-management"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => (
-                      <Tab
-                        value={
-                          isActive ||
-                          location.pathname.match(/\/groups\/|\/identities\/|\/members\/|\/roles\//)
-                            ? "selected"
-                            : ""
-                        }
-                      >
-                        Access Control
-                      </Tab>
-                    )}
-                  </Link>
-                  <Link
-                    to="/projects/secret-management/$projectId/audit-logs"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Audit Logs</Tab>}
-                  </Link>
-                  <Link
-                    to="/projects/secret-management/$projectId/settings"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Settings</Tab>}
-                  </Link>
-                </TabList>
-              </Tabs>
-            </nav>
-          </motion.div>
-        </div>
-        {assumedPrivilegeDetails && <AssumePrivilegeModeBanner />}
-        <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 px-12 pt-10 pb-4">
-          <Outlet />
-        </div>
+                )}
+                <Link
+                  to="/projects/secret-management/$projectId/app-connections"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => <Tab value={isActive ? "selected" : ""}>App Connections</Tab>}
+                </Link>
+                <Link
+                  to="/projects/secret-management/$projectId/access-management"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => (
+                    <Tab
+                      value={
+                        isActive ||
+                        location.pathname.match(/\/groups\/|\/identities\/|\/members\/|\/roles\//)
+                          ? "selected"
+                          : ""
+                      }
+                    >
+                      Access Control
+                    </Tab>
+                  )}
+                </Link>
+                <Link
+                  to="/projects/secret-management/$projectId/audit-logs"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Audit Logs</Tab>}
+                </Link>
+                <Link
+                  to="/projects/secret-management/$projectId/settings"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Settings</Tab>}
+                </Link>
+              </TabList>
+            </Tabs>
+          </nav>
+        </motion.div>
       </div>
-      <div className="z-200 flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
-        <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
-        <p className="max-w-sm px-6 text-center text-lg text-gray-200">
-          {` ${t("common.no-mobile")} `}
-        </p>
+      {assumedPrivilegeDetails && <AssumePrivilegeModeBanner />}
+      <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 px-12 pt-10 pb-4">
+        <Outlet />
       </div>
-    </>
+    </div>
   );
 };
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionsTable.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionsTable.tsx
index 635377f2e..1af82c0c5 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionsTable.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionsTable.tsx
@@ -209,7 +209,7 @@ export const AppConnectionsTable = ({ projectId, projectType }: Props) => {
 
   return (
     <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4 flex items-center justify-between">
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
         <div>
           <div className="flex items-center gap-x-2">
             <p className="text-xl font-medium text-mineshaft-100">App Connections</p>
diff --git a/frontend/src/pages/organization/ProjectsPage/components/AllProjectView.tsx b/frontend/src/pages/organization/ProjectsPage/components/AllProjectView.tsx
index a1bd8c9e4..defc576f4 100644
--- a/frontend/src/pages/organization/ProjectsPage/components/AllProjectView.tsx
+++ b/frontend/src/pages/organization/ProjectsPage/components/AllProjectView.tsx
@@ -125,7 +125,7 @@ export const AllProjectView = ({
 
   return (
     <div>
-      <div className="flex w-full flex-row">
+      <div className="flex w-full flex-row flex-wrap gap-2 md:flex-nowrap md:gap-0">
         <ProjectListToggle value={projectListView} onChange={onProjectListViewChange} />
         <Input
           className="h-[2.3rem] bg-mineshaft-800 text-sm placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
diff --git a/frontend/src/pages/organization/ProjectsPage/components/MyProjectView.tsx b/frontend/src/pages/organization/ProjectsPage/components/MyProjectView.tsx
index 32301923b..cfbb1b25f 100644
--- a/frontend/src/pages/organization/ProjectsPage/components/MyProjectView.tsx
+++ b/frontend/src/pages/organization/ProjectsPage/components/MyProjectView.tsx
@@ -360,7 +360,7 @@ export const MyProjectView = ({
 
   return (
     <div>
-      <div className="flex w-full flex-row">
+      <div className="flex w-full flex-row flex-wrap gap-2 md:flex-nowrap md:gap-0">
         <ProjectListToggle value={projectListView} onChange={onProjectListViewChange} />
         <Input
           className="h-[2.3rem] bg-mineshaft-800 text-sm placeholder-mineshaft-50/60 duration-200 focus:bg-mineshaft-700/80"
diff --git a/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncsTab.tsx b/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncsTab.tsx
index b25681bfd..24fba3b64 100644
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncsTab.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncsTab.tsx
@@ -90,7 +90,7 @@ export const SecretSyncsTab = () => {
   return (
     <>
       <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-        <div className="mb-4 flex items-center justify-between">
+        <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
           <div>
             <div className="flex items-center gap-1.5">
               <p className="text-lg font-medium text-mineshaft-100">Secret Syncs</p>
diff --git a/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx b/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx
index 591b7cf3d..0e02ae8b1 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx
@@ -959,9 +959,9 @@ export const OverviewPage = () => {
             }
           />
         </div>
-        <div className="flex items-center justify-between">
+        <div className="flex flex-wrap items-center justify-between gap-2">
           <FolderBreadCrumbs secretPath={secretPath} onResetSearch={handleResetSearch} />
-          <div className="flex flex-row items-center justify-center space-x-2">
+          <div className="flex flex-row flex-wrap items-center gap-2">
             {isTableFiltered && (
               <Button
                 variant="plain"
diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx
index 24e43224a..e82378804 100644
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx
@@ -294,7 +294,7 @@ export const AccessApprovalRequest = ({
   return (
     <>
       <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-        <div className="mb-4 flex items-center justify-between">
+        <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
           <div>
             <div className="flex items-center gap-x-2">
               <p className="text-xl font-medium text-mineshaft-100">Access Requests</p>
diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/ApprovalPolicyList.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/ApprovalPolicyList.tsx
index c7090eee9..8d907bd96 100644
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/ApprovalPolicyList.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/ApprovalPolicyList.tsx
@@ -240,7 +240,7 @@ export const ApprovalPolicyList = ({ projectId }: IProps) => {
   return (
     <>
       <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-        <div className="mb-4 flex items-center justify-between">
+        <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
           <div>
             <div className="flex items-center gap-x-2">
               <p className="text-xl font-medium text-mineshaft-100">Policies</p>
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx
index 727903999..5706b10e2 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx
@@ -690,7 +690,7 @@ export const ActionBar = ({
 
   return (
     <>
-      <div className="mt-4 flex items-center space-x-2">
+      <div className="mt-4 flex flex-wrap items-center gap-2">
         <SecretSearchInput
           isSingleEnv
           className="w-2/5"