diff --git a/package-lock.json b/package-lock.json
index a6627ec..7bcdf8c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@ant-design/icons": "5.6.0",
         "@monaco-editor/react": "4.6.0",
         "@originjs/vite-plugin-federation": "1.3.6",
-        "@prorobotech/openapi-k8s-toolkit": "^0.0.1-alpha.136",
+        "@prorobotech/openapi-k8s-toolkit": "^0.0.1-alpha.137",
         "@readme/openapi-parser": "4.0.0",
         "@reduxjs/toolkit": "2.2.5",
         "@tanstack/react-query": "5.62.2",
@@ -2804,9 +2804,9 @@
       }
     },
     "node_modules/@prorobotech/openapi-k8s-toolkit": {
-      "version": "0.0.1-alpha.136",
-      "resolved": "https://registry.npmjs.org/@prorobotech/openapi-k8s-toolkit/-/openapi-k8s-toolkit-0.0.1-alpha.136.tgz",
-      "integrity": "sha512-Lwdifu6YwCYxg5uWR+oL52fDl7g5PU79kgg230y38nrfUqP7251H2amGSyg2QMmrYG3x31BwFM5iuWLPqDmqfA==",
+      "version": "0.0.1-alpha.137",
+      "resolved": "https://registry.npmjs.org/@prorobotech/openapi-k8s-toolkit/-/openapi-k8s-toolkit-0.0.1-alpha.137.tgz",
+      "integrity": "sha512-40wpiC8aRBmXZiNnkqYjqo15UEjF9mowoSGqe1/xzxFdjjeZtSBoDoGhLMFy/j6QBCvgaYnNH7mYqxZg5MS7rg==",
       "license": "MIT",
       "dependencies": {
         "@monaco-editor/react": "4.6.0",
diff --git a/package.json b/package.json
index 2d407f1..bff473d 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@ant-design/icons": "5.6.0",
     "@monaco-editor/react": "4.6.0",
     "@originjs/vite-plugin-federation": "1.3.6",
-    "@prorobotech/openapi-k8s-toolkit": "0.0.1-alpha.136",
+    "@prorobotech/openapi-k8s-toolkit": "0.0.1-alpha.137",
     "@readme/openapi-parser": "4.0.0",
     "@reduxjs/toolkit": "2.2.5",
     "@tanstack/react-query": "5.62.2",
diff --git a/src/App.tsx b/src/App.tsx
index 4ea0d50..6711b2b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -30,6 +30,7 @@ import {
 } from 'pages'
 import { getBasePrefix } from 'utils/getBaseprefix'
 import { colorsLight, colorsDark, sizes } from 'constants/colors'
+import { MainLayout } from 'templates/MainLayout'
 
 type TAppProps = {
   isFederation?: boolean
@@ -54,87 +55,77 @@ export const App: FC<TAppProps> = ({ isFederation, forcedTheme }) => {
 
   const renderRoutes = (prefix = '') => (
     <Routes>
-      <Route path={`${prefix}/`} element={<MainPage forcedTheme={forcedTheme} />} />
-      <Route path={`${prefix}/clusters`} element={<ListClustersPage forcedTheme={forcedTheme} />} />
-      <Route path={`${prefix}/clusters/:clusterName`} element={<ListProjectsPage forcedTheme={forcedTheme} />} />
-      <Route path={`${prefix}/inside/`} element={<MainPage forcedTheme={forcedTheme} />} />
-      <Route
-        path={`${prefix}/clusters/:clusterName/projects/:namespace`}
-        element={<ProjectInfoPage forcedTheme={forcedTheme} />}
-      />
-      <Route
-        path={`${prefix}/inside/clusters`}
-        element={<ListInsideClustersAndNsPage forcedTheme={forcedTheme} inside />}
-      />
-      <Route
-        path={`${prefix}/inside/:clusterName/:namespace?/apis`}
-        element={<ListInsideApiPage forcedTheme={forcedTheme} inside />}
-      />
-      <Route
-        path={`${prefix}/inside/:clusterName/:namespace?/crds-by-api/:apiGroup/:apiVersion/:apiExtensionVersion`}
-        element={<ListInsideCrdByApiGroupPage forcedTheme={forcedTheme} inside />}
-      />
-      <Route
-        path={`${prefix}/inside/:clusterName/:namespace?/apis-by-api/:apiGroup/:apiVersion/`}
-        element={<ListInsideApiByApiGroupPage forcedTheme={forcedTheme} inside />}
-      />
-      <Route
-        path={`${prefix}/:clusterName/:namespace?/:syntheticProject?/crd-table/:apiGroup/:apiVersion/:apiExtensionVersion/:crdName`}
-        element={<TableCrdPage forcedTheme={forcedTheme} />}
-      />
-      <Route
-        path={`${prefix}/:clusterName/:namespace?/:syntheticProject?/api-table/:apiGroup/:apiVersion/:typeName`}
-        element={<TableApiPage forcedTheme={forcedTheme} />}
-      />
-      <Route
-        path={`${prefix}/:clusterName/:namespace?/:syntheticProject?/builtin-table/:typeName`}
-        element={<TableBuiltinPage forcedTheme={forcedTheme} />}
-      />
-      <Route
-        path={`${prefix}/:clusterName/:namespace?/:syntheticProject?/forms/builtin/:apiVersion/:typeName/:entryName?/`}
-        element={<FormBuiltinPage forcedTheme={forcedTheme} />}
-      />
-      <Route
-        path={`${prefix}/:clusterName/:namespace?/:syntheticProject?/forms/apis/:apiGroup/:apiVersion/:typeName/:entryName?/`}
-        element={<FormApiPage forcedTheme={forcedTheme} />}
-      />
-      <Route
-        path={`${prefix}/:clusterName/:namespace?/:syntheticProject?/forms/crds/:apiGroup/:apiVersion/:typeName/:entryName?/`}
-        element={<FormCrdPage forcedTheme={forcedTheme} />}
-      />
-      <Route
-        path={`${prefix}/inside/:clusterName/:namespace?/:syntheticProject?/crd-table/:apiGroup/:apiVersion/:apiExtensionVersion/:crdName`}
-        element={<TableCrdPage forcedTheme={forcedTheme} inside />}
-      />
-      <Route
-        path={`${prefix}/inside/:clusterName/:namespace?/:syntheticProject?/api-table/:apiGroup/:apiVersion/:typeName`}
-        element={<TableApiPage forcedTheme={forcedTheme} inside />}
-      />
-      <Route
-        path={`${prefix}/inside/:clusterName/:namespace?/:syntheticProject?/builtin-table/:typeName`}
-        element={<TableBuiltinPage forcedTheme={forcedTheme} inside />}
-      />
-      <Route
-        path={`${prefix}/inside/:clusterName/:namespace?/:syntheticProject?/forms/builtin/:apiVersion/:typeName/:entryName?/`}
-        element={<FormBuiltinPage forcedTheme={forcedTheme} inside />}
-      />
-      <Route
-        path={`${prefix}/inside/:clusterName/:namespace?/:syntheticProject?/forms/apis/:apiGroup/:apiVersion/:typeName/:entryName?/`}
-        element={<FormApiPage forcedTheme={forcedTheme} inside />}
-      />
-      <Route
-        path={`${prefix}/inside/:clusterName/:namespace?/:syntheticProject?/forms/crds/:apiGroup/:apiVersion/:typeName/:entryName?/`}
-        element={<FormCrdPage forcedTheme={forcedTheme} inside />}
-      />
-      <Route
-        path={`${prefix}/:clusterName/:namespace?/:syntheticProject?/factory/:key/*`}
-        element={<FactoryPage forcedTheme={forcedTheme} />}
-      />
-      <Route
-        path={`${prefix}/:clusterName/:namespace?/:syntheticProject?/search/*`}
-        element={<SearchPage forcedTheme={forcedTheme} />}
-      />
-      <Route path={`${prefix}/factory-admin/*`} element={<FactoryAdminPage />} />
+      <Route element={<MainLayout forcedTheme={forcedTheme} />}>
+        <Route path={`${prefix}/`} element={<MainPage />} />
+        <Route path={`${prefix}/clusters`} element={<ListClustersPage />} />
+        <Route path={`${prefix}/clusters/:clusterName`} element={<ListProjectsPage />} />
+        <Route path={`${prefix}/inside/`} element={<MainPage />} />
+        <Route path={`${prefix}/clusters/:clusterName/projects/:namespace`} element={<ProjectInfoPage />} />
+        <Route path={`${prefix}/inside/clusters`} element={<ListInsideClustersAndNsPage inside />} />
+        <Route path={`${prefix}/inside/:clusterName/:namespace?/apis`} element={<ListInsideApiPage inside />} />
+        <Route
+          path={`${prefix}/inside/:clusterName/:namespace?/crds-by-api/:apiGroup/:apiVersion/:apiExtensionVersion`}
+          element={<ListInsideCrdByApiGroupPage inside />}
+        />
+        <Route
+          path={`${prefix}/inside/:clusterName/:namespace?/apis-by-api/:apiGroup/:apiVersion/`}
+          element={<ListInsideApiByApiGroupPage inside />}
+        />
+        <Route
+          path={`${prefix}/:clusterName/:namespace?/:syntheticProject?/crd-table/:apiGroup/:apiVersion/:apiExtensionVersion/:crdName`}
+          element={<TableCrdPage />}
+        />
+        <Route
+          path={`${prefix}/:clusterName/:namespace?/:syntheticProject?/api-table/:apiGroup/:apiVersion/:typeName`}
+          element={<TableApiPage />}
+        />
+        <Route
+          path={`${prefix}/:clusterName/:namespace?/:syntheticProject?/builtin-table/:typeName`}
+          element={<TableBuiltinPage />}
+        />
+        <Route
+          path={`${prefix}/:clusterName/:namespace?/:syntheticProject?/forms/builtin/:apiVersion/:typeName/:entryName?/`}
+          element={<FormBuiltinPage />}
+        />
+        <Route
+          path={`${prefix}/:clusterName/:namespace?/:syntheticProject?/forms/apis/:apiGroup/:apiVersion/:typeName/:entryName?/`}
+          element={<FormApiPage />}
+        />
+        <Route
+          path={`${prefix}/:clusterName/:namespace?/:syntheticProject?/forms/crds/:apiGroup/:apiVersion/:typeName/:entryName?/`}
+          element={<FormCrdPage />}
+        />
+        <Route
+          path={`${prefix}/inside/:clusterName/:namespace?/:syntheticProject?/crd-table/:apiGroup/:apiVersion/:apiExtensionVersion/:crdName`}
+          element={<TableCrdPage inside />}
+        />
+        <Route
+          path={`${prefix}/inside/:clusterName/:namespace?/:syntheticProject?/api-table/:apiGroup/:apiVersion/:typeName`}
+          element={<TableApiPage inside />}
+        />
+        <Route
+          path={`${prefix}/inside/:clusterName/:namespace?/:syntheticProject?/builtin-table/:typeName`}
+          element={<TableBuiltinPage inside />}
+        />
+        <Route
+          path={`${prefix}/inside/:clusterName/:namespace?/:syntheticProject?/forms/builtin/:apiVersion/:typeName/:entryName?/`}
+          element={<FormBuiltinPage inside />}
+        />
+        <Route
+          path={`${prefix}/inside/:clusterName/:namespace?/:syntheticProject?/forms/apis/:apiGroup/:apiVersion/:typeName/:entryName?/`}
+          element={<FormApiPage inside />}
+        />
+        <Route
+          path={`${prefix}/inside/:clusterName/:namespace?/:syntheticProject?/forms/crds/:apiGroup/:apiVersion/:typeName/:entryName?/`}
+          element={<FormCrdPage inside />}
+        />
+        <Route
+          path={`${prefix}/:clusterName/:namespace?/:syntheticProject?/factory/:key/*`}
+          element={<FactoryPage />}
+        />
+        <Route path={`${prefix}/:clusterName/:namespace?/:syntheticProject?/search/*`} element={<SearchPage />} />
+        <Route path={`${prefix}/factory-admin/*`} element={<FactoryAdminPage />} />
+      </Route>
     </Routes>
   )
 
diff --git a/src/components/organisms/Header/organisms/User/User.tsx b/src/components/organisms/Header/organisms/User/User.tsx
index 5565425..efe7ac3 100644
--- a/src/components/organisms/Header/organisms/User/User.tsx
+++ b/src/components/organisms/Header/organisms/User/User.tsx
@@ -25,7 +25,7 @@ export const User: FC = () => {
           // },
           {
             key: '2',
-            label: <div onClick={() => navigate(`${baseprefix}/inside`)}>Inside</div>,
+            label: <div onClick={() => navigate(`${baseprefix}/inside/clusters`)}>Inside</div>,
           },
           {
             key: '3',
diff --git a/src/components/organisms/HeaderSecond/organisms/SelectorCluster/SelectorCluster.tsx b/src/components/organisms/HeaderSecond/organisms/SelectorCluster/SelectorCluster.tsx
index e090ebf..00c75d7 100644
--- a/src/components/organisms/HeaderSecond/organisms/SelectorCluster/SelectorCluster.tsx
+++ b/src/components/organisms/HeaderSecond/organisms/SelectorCluster/SelectorCluster.tsx
@@ -38,7 +38,7 @@ export const SelectorCluster: FC<TSelectorClusterProps> = ({ clusterName }) => {
     <Flex gap={18} justify="start" align="center">
       <Typography.Text>Cluster: </Typography.Text>
       <EntrySelect
-        placeholder="Cluster"
+        placeholder="Select Cluster"
         options={clustersInSidebar}
         value={selectedClusterName}
         onChange={handleClusterChange}
diff --git a/src/components/organisms/HeaderSecond/organisms/SelectorClusterInside/SelectorClusterInside.tsx b/src/components/organisms/HeaderSecond/organisms/SelectorClusterInside/SelectorClusterInside.tsx
index 0805cac..d71663f 100644
--- a/src/components/organisms/HeaderSecond/organisms/SelectorClusterInside/SelectorClusterInside.tsx
+++ b/src/components/organisms/HeaderSecond/organisms/SelectorClusterInside/SelectorClusterInside.tsx
@@ -36,7 +36,7 @@ export const SelectorClusterInside: FC<TSelectorClusterInsideProps> = ({ cluster
     <Flex gap={18} justify="start" align="center">
       <Typography.Text>Cluster: </Typography.Text>
       <EntrySelect
-        placeholder="Cluster"
+        placeholder="Select Cluster"
         options={clustersInSidebar}
         value={selectedClusterName}
         onChange={handleClusterChange}
diff --git a/src/components/organisms/HeaderSecond/organisms/SelectorInside/SelectorInside.tsx b/src/components/organisms/HeaderSecond/organisms/SelectorInside/SelectorInside.tsx
index 78b641f..bd62b44 100644
--- a/src/components/organisms/HeaderSecond/organisms/SelectorInside/SelectorInside.tsx
+++ b/src/components/organisms/HeaderSecond/organisms/SelectorInside/SelectorInside.tsx
@@ -14,8 +14,8 @@ export const SelectorInside: FC<TSelectorInsideProps> = ({ clusterName, namespac
   const navigate = useNavigate()
   const params = useParams()
 
-  const [selectedClusterName, setSelectedClusterName] = useState(clusterName)
-  const [selectedNamespace, setSelectedNamespace] = useState(namespace)
+  const [selectedClusterName, setSelectedClusterName] = useState<string | undefined>(clusterName)
+  const [selectedNamespace, setSelectedNamespace] = useState<string | undefined>(namespace)
 
   // const { namespacesInSidebar, clustersInSidebar } = useNavSelectorInside(selectedClusterName)
   const { namespacesInSidebar } = useNavSelectorInside(selectedClusterName)
diff --git a/src/components/organisms/ListInsideClusterAndNs/ListInsideClusterAndNs.tsx b/src/components/organisms/ListInsideClusterAndNs/ListInsideClusterAndNs.tsx
index 577ba0f..b6fb99f 100644
--- a/src/components/organisms/ListInsideClusterAndNs/ListInsideClusterAndNs.tsx
+++ b/src/components/organisms/ListInsideClusterAndNs/ListInsideClusterAndNs.tsx
@@ -18,9 +18,10 @@ export const ListInsideClusterAndNs: FC = () => {
   const [selectedNamespace, setSelectedNamespace] = useState<string>()
 
   const namespacesData = useBuiltinResources({
-    clusterName: cluster,
+    clusterName: selectedCluster || '',
     typeName: 'namespaces',
     limit: null,
+    isEnabled: selectedCluster !== undefined,
   })
 
   return (
diff --git a/src/hooks/useNavSelector/useNavSelector.ts b/src/hooks/useNavSelector/useNavSelector.ts
index 6acb35d..4bc12ef 100644
--- a/src/hooks/useNavSelector/useNavSelector.ts
+++ b/src/hooks/useNavSelector/useNavSelector.ts
@@ -66,6 +66,7 @@ export const useNavSelector = (clusterName?: string, projectName?: string) => {
     apiVersion: BASE_PROJECTS_VERSION,
     typeName: BASE_PROJECTS_RESOURCE_NAME,
     limit: null,
+    isEnabled: clusterName !== undefined,
   })
 
   const { data: instances, isSuccess: allInstancesLoadingSuccess } = useApiResources({
@@ -75,6 +76,7 @@ export const useNavSelector = (clusterName?: string, projectName?: string) => {
     apiVersion: BASE_INSTANCES_VERSION,
     typeName: BASE_INSTANCES_RESOURCE_NAME,
     limit: null,
+    isEnabled: clusterName !== undefined,
   })
 
   const clustersInSidebar = clusterList ? clusterList.map(mappedClusterToOptionInSidebar) : []
diff --git a/src/hooks/useNavSelectorInside.ts b/src/hooks/useNavSelectorInside.ts
index d69405e..5736e2b 100644
--- a/src/hooks/useNavSelectorInside.ts
+++ b/src/hooks/useNavSelectorInside.ts
@@ -19,6 +19,7 @@ export const useNavSelectorInside = (clusterName?: string) => {
     clusterName: clusterName || '',
     typeName: 'namespaces',
     limit: null,
+    isEnabled: Boolean(clusterName),
   })
 
   const clustersInSidebar = clusterList ? clusterList.map(mappedClusterToOptionInSidebar) : []
diff --git a/src/pages/FactoryPage/FactoryPage.tsx b/src/pages/FactoryPage/FactoryPage.tsx
index 6ceb1fb..ad6c8e6 100644
--- a/src/pages/FactoryPage/FactoryPage.tsx
+++ b/src/pages/FactoryPage/FactoryPage.tsx
@@ -5,11 +5,7 @@ import { getBreadcrumbsIdPrefix } from 'utils/getBreadcrumbsIdPrefix'
 import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
 import { BaseTemplate } from 'templates'
 
-type TFactoryPageProps = {
-  forcedTheme?: 'light' | 'dark'
-}
-
-export const FactoryPage: FC<TFactoryPageProps> = ({ forcedTheme }) => {
+export const FactoryPage: FC = () => {
   const { namespace, syntheticProject, key } = useParams()
 
   const [currentTags, setCurrentTags] = useState<string[]>()
@@ -29,7 +25,6 @@ export const FactoryPage: FC<TFactoryPageProps> = ({ forcedTheme }) => {
 
   return (
     <BaseTemplate
-      forcedTheme={forcedTheme}
       sidebar={
         <ManageableSidebar
           instanceName={possibleInstance}
@@ -38,7 +33,7 @@ export const FactoryPage: FC<TFactoryPageProps> = ({ forcedTheme }) => {
           currentTags={currentTags}
         />
       }
-      withNoCluster
+      // withNoCluster
     >
       <NavigationContainer>
         <ManageableBreadcrumbs idToCompare={breadcrumbsId} />
diff --git a/src/pages/FormApiPage/FormApiPage.tsx b/src/pages/FormApiPage/FormApiPage.tsx
index 96cf7d4..aa623dc 100644
--- a/src/pages/FormApiPage/FormApiPage.tsx
+++ b/src/pages/FormApiPage/FormApiPage.tsx
@@ -18,11 +18,10 @@ import { BASE_USE_NAMESPACE_NAV } from 'constants/customizationApiGroupAndVersio
 import { BaseTemplate } from 'templates'
 
 type TFormApiPageProps = {
-  forcedTheme?: 'light' | 'dark'
   inside?: boolean
 }
 
-export const FormApiPage: FC<TFormApiPageProps> = ({ forcedTheme, inside }) => {
+export const FormApiPage: FC<TFormApiPageProps> = ({ inside }) => {
   const { clusterName, syntheticProject, namespace, apiGroup, apiVersion, typeName, entryName } = useParams()
   const [searchParams] = useSearchParams()
   const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix)
@@ -54,7 +53,6 @@ export const FormApiPage: FC<TFormApiPageProps> = ({ forcedTheme, inside }) => {
 
   return (
     <BaseTemplate
-      forcedTheme={forcedTheme}
       inside={inside}
       sidebar={
         <ManageableSidebar
diff --git a/src/pages/FormBuiltinPage/FormBuiltinPage.tsx b/src/pages/FormBuiltinPage/FormBuiltinPage.tsx
index 8eba7b9..2a61a46 100644
--- a/src/pages/FormBuiltinPage/FormBuiltinPage.tsx
+++ b/src/pages/FormBuiltinPage/FormBuiltinPage.tsx
@@ -18,11 +18,10 @@ import { BASE_USE_NAMESPACE_NAV } from 'constants/customizationApiGroupAndVersio
 import { BaseTemplate } from 'templates'
 
 type TFormBuiltinPageProps = {
-  forcedTheme?: 'light' | 'dark'
   inside?: boolean
 }
 
-export const FormBuiltinPage: FC<TFormBuiltinPageProps> = ({ forcedTheme, inside }) => {
+export const FormBuiltinPage: FC<TFormBuiltinPageProps> = ({ inside }) => {
   const { clusterName, syntheticProject, namespace, typeName, entryName } = useParams()
   const [searchParams] = useSearchParams()
   const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix)
@@ -54,7 +53,6 @@ export const FormBuiltinPage: FC<TFormBuiltinPageProps> = ({ forcedTheme, inside
 
   return (
     <BaseTemplate
-      forcedTheme={forcedTheme}
       inside={inside}
       sidebar={
         <ManageableSidebar
diff --git a/src/pages/FormCrdPage/FormCrdPage.tsx b/src/pages/FormCrdPage/FormCrdPage.tsx
index 7c515e3..75f6a49 100644
--- a/src/pages/FormCrdPage/FormCrdPage.tsx
+++ b/src/pages/FormCrdPage/FormCrdPage.tsx
@@ -18,11 +18,10 @@ import { BASE_USE_NAMESPACE_NAV } from 'constants/customizationApiGroupAndVersio
 import { BaseTemplate } from 'templates'
 
 type TFormCrdPageProps = {
-  forcedTheme?: 'light' | 'dark'
   inside?: boolean
 }
 
-export const FormCrdPage: FC<TFormCrdPageProps> = ({ forcedTheme, inside }) => {
+export const FormCrdPage: FC<TFormCrdPageProps> = ({ inside }) => {
   const { clusterName, syntheticProject, apiGroup, apiVersion, namespace, typeName, entryName } = useParams()
   const [searchParams] = useSearchParams()
   const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix)
@@ -54,7 +53,6 @@ export const FormCrdPage: FC<TFormCrdPageProps> = ({ forcedTheme, inside }) => {
 
   return (
     <BaseTemplate
-      forcedTheme={forcedTheme}
       inside={inside}
       sidebar={
         <ManageableSidebar
diff --git a/src/pages/ListClustersPage/ListClustersPage.tsx b/src/pages/ListClustersPage/ListClustersPage.tsx
index 08e9e5b..ddb7a78 100644
--- a/src/pages/ListClustersPage/ListClustersPage.tsx
+++ b/src/pages/ListClustersPage/ListClustersPage.tsx
@@ -7,11 +7,7 @@ import type { RootState } from 'store/store'
 import { ListClusters, NavigationContainer } from 'components'
 import { BaseTemplate } from 'templates'
 
-type TListClustersPageProps = {
-  forcedTheme?: 'light' | 'dark'
-}
-
-export const ListClustersPage: FC<TListClustersPageProps> = ({ forcedTheme }) => {
+export const ListClustersPage: FC = () => {
   const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix)
 
   const breadcrumbItems = [
@@ -26,7 +22,7 @@ export const ListClustersPage: FC<TListClustersPageProps> = ({ forcedTheme }) =>
   ]
 
   return (
-    <BaseTemplate withNoCluster forcedTheme={forcedTheme}>
+    <BaseTemplate>
       <NavigationContainer>
         <Breadcrumb items={breadcrumbItems} separator=">" />
       </NavigationContainer>
diff --git a/src/pages/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx b/src/pages/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx
index 4f8950a..bb5f561 100644
--- a/src/pages/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx
+++ b/src/pages/ListInsideApiByApiGroupPage/ListInsideApiByApiGroupPage.tsx
@@ -7,18 +7,17 @@ import { getBreadcrumbsIdPrefix } from 'utils/getBreadcrumbsIdPrefix'
 import { BaseTemplate } from 'templates'
 
 type TListInsideApiByApiGroupPageProps = {
-  forcedTheme?: 'light' | 'dark'
   inside?: boolean
 }
 
-export const ListInsideApiByApiGroupPage: FC<TListInsideApiByApiGroupPageProps> = ({ forcedTheme, inside }) => {
+export const ListInsideApiByApiGroupPage: FC<TListInsideApiByApiGroupPageProps> = ({ inside }) => {
   const { namespace, apiGroup, apiVersion } = useParams()
 
   const sidebarId = `${getSidebarIdPrefix({ namespace: !!namespace, inside })}api-by-api`
   const breadcrumbsId = `${getBreadcrumbsIdPrefix({ namespace: !!namespace, inside })}api-by-api`
 
   return (
-    <BaseTemplate forcedTheme={forcedTheme} inside={inside} sidebar={<ManageableSidebar idToCompare={sidebarId} />}>
+    <BaseTemplate inside={inside} sidebar={<ManageableSidebar idToCompare={sidebarId} />}>
       <NavigationContainer>
         <ManageableBreadcrumbs idToCompare={breadcrumbsId} inside />
       </NavigationContainer>
diff --git a/src/pages/ListInsideApiPage/ListInsideApiPage.tsx b/src/pages/ListInsideApiPage/ListInsideApiPage.tsx
index b38c085..9e5ae09 100644
--- a/src/pages/ListInsideApiPage/ListInsideApiPage.tsx
+++ b/src/pages/ListInsideApiPage/ListInsideApiPage.tsx
@@ -7,18 +7,17 @@ import { getBreadcrumbsIdPrefix } from 'utils/getBreadcrumbsIdPrefix'
 import { BaseTemplate } from 'templates'
 
 type TListInsideApiPageProps = {
-  forcedTheme?: 'light' | 'dark'
   inside?: boolean
 }
 
-export const ListInsideApiPage: FC<TListInsideApiPageProps> = ({ forcedTheme, inside }) => {
+export const ListInsideApiPage: FC<TListInsideApiPageProps> = ({ inside }) => {
   const { namespace } = useParams()
 
   const sidebarId = `${getSidebarIdPrefix({ namespace: !!namespace, inside })}apis`
   const breadcrumbsId = `${getBreadcrumbsIdPrefix({ namespace: !!namespace, inside })}apis`
 
   return (
-    <BaseTemplate forcedTheme={forcedTheme} inside={inside} sidebar={<ManageableSidebar idToCompare={sidebarId} />}>
+    <BaseTemplate inside={inside} sidebar={<ManageableSidebar idToCompare={sidebarId} />}>
       <NavigationContainer>
         <ManageableBreadcrumbs idToCompare={breadcrumbsId} inside />
       </NavigationContainer>
diff --git a/src/pages/ListInsideClustersAndNsPage/ListInsideClustersAndNsPage.tsx b/src/pages/ListInsideClustersAndNsPage/ListInsideClustersAndNsPage.tsx
index ded39d0..35ab413 100644
--- a/src/pages/ListInsideClustersAndNsPage/ListInsideClustersAndNsPage.tsx
+++ b/src/pages/ListInsideClustersAndNsPage/ListInsideClustersAndNsPage.tsx
@@ -8,11 +8,10 @@ import { ListInsideClusterAndNs, NavigationContainer } from 'components'
 import { BaseTemplate } from 'templates'
 
 type TListInsideClustersAndNsPageProps = {
-  forcedTheme?: 'light' | 'dark'
   inside?: boolean
 }
 
-export const ListInsideClustersAndNsPage: FC<TListInsideClustersAndNsPageProps> = ({ forcedTheme, inside }) => {
+export const ListInsideClustersAndNsPage: FC<TListInsideClustersAndNsPageProps> = ({ inside }) => {
   const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix)
 
   const breadcrumbItems = [
@@ -27,7 +26,7 @@ export const ListInsideClustersAndNsPage: FC<TListInsideClustersAndNsPageProps>
   ]
 
   return (
-    <BaseTemplate withNoCluster forcedTheme={forcedTheme} inside={inside}>
+    <BaseTemplate inside={inside}>
       <NavigationContainer>
         <Breadcrumb items={breadcrumbItems} separator=">" />
       </NavigationContainer>
diff --git a/src/pages/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx b/src/pages/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx
index 37796a9..19cd151 100644
--- a/src/pages/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx
+++ b/src/pages/ListInsideCrdByApiGroupPage/ListInsideCrdByApiGroupPage.tsx
@@ -7,18 +7,17 @@ import { getBreadcrumbsIdPrefix } from 'utils/getBreadcrumbsIdPrefix'
 import { BaseTemplate } from 'templates'
 
 type TListInsideCrdByApiGroupPageProps = {
-  forcedTheme?: 'light' | 'dark'
   inside?: boolean
 }
 
-export const ListInsideCrdByApiGroupPage: FC<TListInsideCrdByApiGroupPageProps> = ({ forcedTheme, inside }) => {
+export const ListInsideCrdByApiGroupPage: FC<TListInsideCrdByApiGroupPageProps> = ({ inside }) => {
   const { namespace, apiGroup, apiVersion, apiExtensionVersion } = useParams()
 
   const sidebarId = `${getSidebarIdPrefix({ namespace: !!namespace, inside })}crd-by-api`
   const breadcrumbsId = `${getBreadcrumbsIdPrefix({ namespace: !!namespace, inside })}crd-by-api`
 
   return (
-    <BaseTemplate forcedTheme={forcedTheme} inside={inside} sidebar={<ManageableSidebar idToCompare={sidebarId} />}>
+    <BaseTemplate inside={inside} sidebar={<ManageableSidebar idToCompare={sidebarId} />}>
       <NavigationContainer>
         <ManageableBreadcrumbs idToCompare={breadcrumbsId} inside />
       </NavigationContainer>
diff --git a/src/pages/ListProjectsPage/ListProjectsPage.tsx b/src/pages/ListProjectsPage/ListProjectsPage.tsx
index 1b9c9e4..1d02c38 100644
--- a/src/pages/ListProjectsPage/ListProjectsPage.tsx
+++ b/src/pages/ListProjectsPage/ListProjectsPage.tsx
@@ -2,13 +2,9 @@ import React, { FC } from 'react'
 import { RedirectProjectList } from 'components'
 import { BaseTemplate } from 'templates'
 
-type TListProjectsPageProps = {
-  forcedTheme?: 'light' | 'dark'
-}
-
-export const ListProjectsPage: FC<TListProjectsPageProps> = ({ forcedTheme }) => {
+export const ListProjectsPage: FC = () => {
   return (
-    <BaseTemplate forcedTheme={forcedTheme}>
+    <BaseTemplate>
       <RedirectProjectList />
     </BaseTemplate>
   )
diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx
index 11602d3..ec24134 100644
--- a/src/pages/MainPage/MainPage.tsx
+++ b/src/pages/MainPage/MainPage.tsx
@@ -2,16 +2,12 @@ import React, { FC, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { BaseTemplate } from 'templates'
 
-type TMainPageProps = {
-  forcedTheme?: 'light' | 'dark'
-}
-
-export const MainPage: FC<TMainPageProps> = ({ forcedTheme }) => {
+export const MainPage: FC = () => {
   const navigate = useNavigate()
 
   useEffect(() => {
     navigate('./clusters')
   }, [navigate])
 
-  return <BaseTemplate withNoCluster forcedTheme={forcedTheme} />
+  return <BaseTemplate />
 }
diff --git a/src/pages/ProjectInfoPage/ProjectInfoPage.tsx b/src/pages/ProjectInfoPage/ProjectInfoPage.tsx
index 8438dc7..f205d63 100644
--- a/src/pages/ProjectInfoPage/ProjectInfoPage.tsx
+++ b/src/pages/ProjectInfoPage/ProjectInfoPage.tsx
@@ -2,13 +2,9 @@ import React, { FC } from 'react'
 import { RedirectProjectInfo } from 'components'
 import { BaseTemplate } from 'templates'
 
-type TProjectInfoPageProps = {
-  forcedTheme?: 'light' | 'dark'
-}
-
-export const ProjectInfoPage: FC<TProjectInfoPageProps> = ({ forcedTheme }) => {
+export const ProjectInfoPage: FC = () => {
   return (
-    <BaseTemplate forcedTheme={forcedTheme}>
+    <BaseTemplate>
       <RedirectProjectInfo />
     </BaseTemplate>
   )
diff --git a/src/pages/SearchPage/SearchPage.tsx b/src/pages/SearchPage/SearchPage.tsx
index c69ed59..33e3e24 100644
--- a/src/pages/SearchPage/SearchPage.tsx
+++ b/src/pages/SearchPage/SearchPage.tsx
@@ -6,11 +6,7 @@ import { getSidebarIdPrefix } from 'utils/getSidebarIdPrefix'
 import { getBreadcrumbsIdPrefix } from 'utils/getBreadcrumbsIdPrefix'
 import { BaseTemplate } from 'templates'
 
-type TSearchPageProps = {
-  forcedTheme?: 'light' | 'dark'
-}
-
-export const SearchPage: FC<TSearchPageProps> = ({ forcedTheme }) => {
+export const SearchPage: FC = () => {
   const { namespace, syntheticProject } = useParams()
 
   const possibleProject = syntheticProject && namespace ? syntheticProject : namespace
@@ -28,7 +24,6 @@ export const SearchPage: FC<TSearchPageProps> = ({ forcedTheme }) => {
 
   return (
     <BaseTemplate
-      forcedTheme={forcedTheme}
       inside={false}
       isSearch
       sidebar={
diff --git a/src/pages/TableApiPage/TableApiPage.tsx b/src/pages/TableApiPage/TableApiPage.tsx
index 851dde5..87d2724 100644
--- a/src/pages/TableApiPage/TableApiPage.tsx
+++ b/src/pages/TableApiPage/TableApiPage.tsx
@@ -17,11 +17,10 @@ import {
 } from 'constants/customizationApiGroupAndVersion'
 
 type TTableApiPageProps = {
-  forcedTheme?: 'light' | 'dark'
   inside?: boolean
 }
 
-export const TableApiPage: FC<TTableApiPageProps> = ({ forcedTheme, inside }) => {
+export const TableApiPage: FC<TTableApiPageProps> = ({ inside }) => {
   const { clusterName, namespace, syntheticProject, apiGroup, apiVersion, typeName } = useParams()
   const [searchParams] = useSearchParams()
   const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix)
@@ -62,7 +61,6 @@ export const TableApiPage: FC<TTableApiPageProps> = ({ forcedTheme, inside }) =>
 
   return (
     <BaseTemplate
-      forcedTheme={forcedTheme}
       inside={inside}
       sidebar={
         <ManageableSidebar
diff --git a/src/pages/TableBuiltinPage/TableBuiltinPage.tsx b/src/pages/TableBuiltinPage/TableBuiltinPage.tsx
index 7d82f01..d36f48b 100644
--- a/src/pages/TableBuiltinPage/TableBuiltinPage.tsx
+++ b/src/pages/TableBuiltinPage/TableBuiltinPage.tsx
@@ -12,11 +12,10 @@ import { BaseTemplate } from 'templates'
 import { BASE_USE_NAMESPACE_NAV } from 'constants/customizationApiGroupAndVersion'
 
 type TTableBuiltinPageProps = {
-  forcedTheme?: 'light' | 'dark'
   inside?: boolean
 }
 
-export const TableBuiltinPage: FC<TTableBuiltinPageProps> = ({ forcedTheme, inside }) => {
+export const TableBuiltinPage: FC<TTableBuiltinPageProps> = ({ inside }) => {
   const { clusterName, namespace, syntheticProject, typeName } = useParams()
   const [searchParams] = useSearchParams()
   const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix)
@@ -49,7 +48,6 @@ export const TableBuiltinPage: FC<TTableBuiltinPageProps> = ({ forcedTheme, insi
 
   return (
     <BaseTemplate
-      forcedTheme={forcedTheme}
       inside={inside}
       sidebar={
         <ManageableSidebar
diff --git a/src/pages/TableCrdPage/TableCrdPage.tsx b/src/pages/TableCrdPage/TableCrdPage.tsx
index 3029efb..5f509ff 100644
--- a/src/pages/TableCrdPage/TableCrdPage.tsx
+++ b/src/pages/TableCrdPage/TableCrdPage.tsx
@@ -12,11 +12,10 @@ import { BaseTemplate } from 'templates'
 import { BASE_USE_NAMESPACE_NAV } from 'constants/customizationApiGroupAndVersion'
 
 type TTableCrdPageProps = {
-  forcedTheme?: 'light' | 'dark'
   inside?: boolean
 }
 
-export const TableCrdPage: FC<TTableCrdPageProps> = ({ forcedTheme, inside }) => {
+export const TableCrdPage: FC<TTableCrdPageProps> = ({ inside }) => {
   const { clusterName, namespace, syntheticProject, apiGroup, apiVersion, apiExtensionVersion, crdName } = useParams()
   const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix)
 
@@ -48,7 +47,6 @@ export const TableCrdPage: FC<TTableCrdPageProps> = ({ forcedTheme, inside }) =>
 
   return (
     <BaseTemplate
-      forcedTheme={forcedTheme}
       inside={inside}
       sidebar={
         <ManageableSidebar
diff --git a/src/templates/BaseTemplate/BaseTemplate.tsx b/src/templates/BaseTemplate/BaseTemplate.tsx
index f9ef2e8..aecf1cf 100644
--- a/src/templates/BaseTemplate/BaseTemplate.tsx
+++ b/src/templates/BaseTemplate/BaseTemplate.tsx
@@ -1,132 +1,32 @@
-import React, { FC, ReactNode, useEffect, useCallback } from 'react'
-import { Layout, theme as antdtheme, Alert, Col } from 'antd'
-import { useClusterList } from '@prorobotech/openapi-k8s-toolkit'
-import { useSelector, useDispatch } from 'react-redux'
-import { useParams, useNavigate } from 'react-router-dom'
+import React, { FC, ReactNode } from 'react'
+import { Col } from 'antd'
+import { useSelector } from 'react-redux'
 import type { RootState } from 'store/store'
-import { setTheme } from 'store/theme/theme/theme'
-import { setCluster } from 'store/cluster/cluster/cluster'
-import { setClusterList } from 'store/clusterList/clusterList/clusterList'
-import {
-  DefaultLayout,
-  DefaultColorProvider,
-  Header,
-  HeaderSecond,
-  Footer,
-  Sidebar,
-  RowFlexGrow,
-  FlexCol,
-} from 'components'
-import { Styled } from './styled'
+import { DefaultLayout, HeaderSecond, Footer, Sidebar, RowFlexGrow, FlexCol } from 'components'
 
 type TBaseTemplateProps = {
-  withNoCluster?: boolean
+  // withNoCluster?: boolean
   children?: ReactNode | undefined
-  forcedTheme?: 'dark' | 'light'
   inside?: boolean
   isSearch?: boolean
   sidebar?: ReactNode
 }
 
-export const BaseTemplate: FC<TBaseTemplateProps> = ({
-  children,
-  withNoCluster,
-  forcedTheme,
-  inside,
-  isSearch,
-  sidebar,
-}) => {
-  const navigate = useNavigate()
-  const { clusterName } = useParams()
-  const { useToken } = antdtheme
-  const { token } = useToken()
-  const dispatch = useDispatch()
-  const theme = useSelector((state: RootState) => state.openapiTheme.theme)
+export const BaseTemplate: FC<TBaseTemplateProps> = ({ children, inside, isSearch, sidebar }) => {
   const isFederation = useSelector((state: RootState) => state.federation.isFederation)
-  const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix)
-  const clusterListQuery = useClusterList({ refetchInterval: false })
-
-  useEffect(() => {
-    if (forcedTheme) {
-      return
-    }
-    const localStorageTheme = localStorage.getItem('theme')
-    if (localStorageTheme && (localStorageTheme === 'dark' || localStorageTheme === 'light')) {
-      dispatch(setTheme(localStorageTheme))
-    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      localStorage.setItem('theme', 'dark')
-      dispatch(setTheme('dark'))
-    } else {
-      localStorage.setItem('theme', 'light')
-      dispatch(setTheme('light'))
-    }
-  }, [dispatch, forcedTheme])
-
-  useEffect(() => {
-    if (forcedTheme) {
-      dispatch(setTheme(forcedTheme))
-    }
-  }, [dispatch, forcedTheme])
-
-  const handleStorage = useCallback(() => {
-    const localStorageTheme = localStorage.getItem('theme')
-    if (localStorageTheme && (localStorageTheme === 'dark' || localStorageTheme === 'light')) {
-      dispatch(setTheme(localStorageTheme))
-    }
-  }, [dispatch])
-
-  useEffect(() => {
-    window.addEventListener('storage', handleStorage)
-
-    return () => {
-      window.removeEventListener('storage', handleStorage)
-    }
-  }, [handleStorage])
-
-  useEffect(() => {
-    if (clusterListQuery.data) {
-      dispatch(setClusterList(clusterListQuery.data))
-    }
-  }, [clusterListQuery, dispatch])
-
-  if (clusterName) {
-    dispatch(setCluster(clusterName))
-  }
-
-  if (clusterName === undefined) {
-    dispatch(setCluster(''))
-  }
-
-  if (!clusterName && !withNoCluster) {
-    navigate(`${baseprefix}/`)
-  }
 
   return (
-    <DefaultColorProvider $color={token.colorText}>
-      <Styled.Container $isDark={theme === 'dark'}>
-        <Layout>
-          <DefaultLayout.Layout $bgColor={token.colorBgLayout}>
-            <DefaultLayout.ContentContainer>
-              <Header />
-              <RowFlexGrow wrap={false}>
-                <Col span="250px">
-                  <Sidebar sidebar={sidebar} />
-                </Col>
-                <FlexCol flex="auto">
-                  <DefaultLayout.ContentPadding $isFederation={isFederation}>
-                    <HeaderSecond inside={inside} isSearch={isSearch} />
-                    {clusterListQuery.error && (
-                      <Alert message={`Cluster List Error: ${clusterListQuery.error?.message} `} type="error" />
-                    )}
-                    {children}
-                  </DefaultLayout.ContentPadding>
-                  <Footer />
-                </FlexCol>
-              </RowFlexGrow>
-            </DefaultLayout.ContentContainer>
-          </DefaultLayout.Layout>
-        </Layout>
-      </Styled.Container>
-    </DefaultColorProvider>
+    <RowFlexGrow wrap={false}>
+      <Col span="250px">
+        <Sidebar sidebar={sidebar} />
+      </Col>
+      <FlexCol flex="auto">
+        <DefaultLayout.ContentPadding $isFederation={isFederation}>
+          <HeaderSecond inside={inside} isSearch={isSearch} />
+          {children}
+        </DefaultLayout.ContentPadding>
+        <Footer />
+      </FlexCol>
+    </RowFlexGrow>
   )
 }
diff --git a/src/templates/MainLayout/MainLayout.tsx b/src/templates/MainLayout/MainLayout.tsx
new file mode 100644
index 0000000..ec96087
--- /dev/null
+++ b/src/templates/MainLayout/MainLayout.tsx
@@ -0,0 +1,95 @@
+import React, { FC, ReactNode, useEffect, useCallback } from 'react'
+import { Layout, theme as antdtheme, Alert } from 'antd'
+import { useClusterList } from '@prorobotech/openapi-k8s-toolkit'
+import { useSelector, useDispatch } from 'react-redux'
+import { useParams, Outlet } from 'react-router-dom'
+import type { RootState } from 'store/store'
+import { setTheme } from 'store/theme/theme/theme'
+import { setCluster } from 'store/cluster/cluster/cluster'
+import { setClusterList } from 'store/clusterList/clusterList/clusterList'
+import { DefaultLayout, DefaultColorProvider, Header } from 'components'
+import { Styled } from './styled'
+
+type TMainLayoutProps = {
+  children?: ReactNode | undefined
+  forcedTheme?: 'dark' | 'light'
+}
+
+export const MainLayout: FC<TMainLayoutProps> = ({ children, forcedTheme }) => {
+  const { clusterName } = useParams()
+  const { useToken } = antdtheme
+  const { token } = useToken()
+  const dispatch = useDispatch()
+  const theme = useSelector((state: RootState) => state.openapiTheme.theme)
+  const clusterListQuery = useClusterList({ refetchInterval: false })
+
+  useEffect(() => {
+    if (forcedTheme) {
+      return
+    }
+    const localStorageTheme = localStorage.getItem('theme')
+    if (localStorageTheme && (localStorageTheme === 'dark' || localStorageTheme === 'light')) {
+      dispatch(setTheme(localStorageTheme))
+    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      localStorage.setItem('theme', 'dark')
+      dispatch(setTheme('dark'))
+    } else {
+      localStorage.setItem('theme', 'light')
+      dispatch(setTheme('light'))
+    }
+  }, [dispatch, forcedTheme])
+
+  useEffect(() => {
+    if (forcedTheme) {
+      dispatch(setTheme(forcedTheme))
+    }
+  }, [dispatch, forcedTheme])
+
+  const handleStorage = useCallback(() => {
+    const localStorageTheme = localStorage.getItem('theme')
+    if (localStorageTheme && (localStorageTheme === 'dark' || localStorageTheme === 'light')) {
+      dispatch(setTheme(localStorageTheme))
+    }
+  }, [dispatch])
+
+  useEffect(() => {
+    window.addEventListener('storage', handleStorage)
+
+    return () => {
+      window.removeEventListener('storage', handleStorage)
+    }
+  }, [handleStorage])
+
+  useEffect(() => {
+    if (clusterListQuery.data) {
+      dispatch(setClusterList(clusterListQuery.data))
+    }
+  }, [clusterListQuery, dispatch])
+
+  if (clusterName) {
+    dispatch(setCluster(clusterName))
+  }
+
+  if (clusterName === undefined) {
+    dispatch(setCluster(''))
+  }
+
+  return (
+    <DefaultColorProvider $color={token.colorText}>
+      <Styled.Container $isDark={theme === 'dark'}>
+        <Layout>
+          <DefaultLayout.Layout $bgColor={token.colorBgLayout}>
+            <DefaultLayout.ContentContainer>
+              <Header />
+              {clusterListQuery.error && (
+                <Alert message={`Cluster List Error: ${clusterListQuery.error?.message} `} type="error" />
+              )}
+              <Outlet />
+              {children}
+            </DefaultLayout.ContentContainer>
+          </DefaultLayout.Layout>
+        </Layout>
+      </Styled.Container>
+    </DefaultColorProvider>
+  )
+}
diff --git a/src/templates/MainLayout/index.ts b/src/templates/MainLayout/index.ts
new file mode 100644
index 0000000..62c740e
--- /dev/null
+++ b/src/templates/MainLayout/index.ts
@@ -0,0 +1 @@
+export { MainLayout } from './MainLayout'
diff --git a/src/templates/BaseTemplate/styled.ts b/src/templates/MainLayout/styled.ts
similarity index 100%
rename from src/templates/BaseTemplate/styled.ts
rename to src/templates/MainLayout/styled.ts