diff --git a/packages/pl-fe/src/components/thumb-navigation.tsx b/packages/pl-fe/src/components/thumb-navigation.tsx
index 93c3fa7af..751cc574d 100644
--- a/packages/pl-fe/src/components/thumb-navigation.tsx
+++ b/packages/pl-fe/src/components/thumb-navigation.tsx
@@ -57,9 +57,7 @@ const ThumbNavigation: React.FC = React.memo((): JSX.Element => {
       onClick={handleOpenComposeModal}
       title={intl.formatMessage(messages.compose)}
     >
-      <Icon
-        src={require('@tabler/icons/outline/square-rounded-plus.svg')}
-      />
+      <Icon src={require('@tabler/icons/outline/square-rounded-plus.svg')} />
     </button>
   );
 
@@ -70,9 +68,7 @@ const ThumbNavigation: React.FC = React.memo((): JSX.Element => {
         onClick={isSidebarOpen ? closeSidebar : openSidebar}
         title={intl.formatMessage(isSidebarOpen ? messages.closeSidebar : messages.openSidebar)}
       >
-        <Icon
-          src={require('@tabler/icons/outline/menu-2.svg')}
-        />
+        <Icon src={require('@tabler/icons/outline/menu-2.svg')} />
       </button>
 
       <ThumbNavigationLink
diff --git a/packages/pl-fe/src/init/pl-fe-head.tsx b/packages/pl-fe/src/init/pl-fe-head.tsx
index 497e943fa..ad8e44b3c 100644
--- a/packages/pl-fe/src/init/pl-fe-head.tsx
+++ b/packages/pl-fe/src/init/pl-fe-head.tsx
@@ -25,12 +25,12 @@ const PlFeHead = () => {
   const themeCss = useThemeCss();
   const dsn = plFeConfig.sentryDsn;
 
-  const bodyClass = clsx('h-full bg-white text-base antialiased black:bg-black dark:bg-gray-800', {
+  const bodyClass = clsx({
     'no-reduce-motion': !reduceMotion,
     'underline-links': underlineLinks,
     'demetricator': demetricator,
     'system-font': systemFont,
-    'overflow-hidden': withModals,
+    'with-modals': withModals,
   });
 
   useEffect(() => {
@@ -44,7 +44,7 @@ const PlFeHead = () => {
       <Helmet>
         <html
           lang={locale}
-          className={clsx('h-full', `text-${themeSettings?.interfaceSize || 'md'}`, {
+          className={clsx(`text-${themeSettings?.interfaceSize || 'md'}`, {
             'dark': theme === 'dark',
             'dark black': theme === 'black',
           })}
diff --git a/packages/pl-fe/src/styles/basics.scss b/packages/pl-fe/src/styles/basics.scss
index 82ecddf92..e2e3fcdf8 100644
--- a/packages/pl-fe/src/styles/basics.scss
+++ b/packages/pl-fe/src/styles/basics.scss
@@ -19,13 +19,4 @@ noscript {
 
 .emojione {
   @apply w-4 h-4 -mt-[0.2ex] mb-[0.2ex] inline-block align-middle object-contain;
-}
-
-body.system-font,
-body.system-font .font-sans {
-  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
-}
-
-body.system-font .font-mono {
-  font-family: ui-monospace, monospace;
 }
\ No newline at end of file
diff --git a/packages/pl-fe/src/styles/new/ui.scss b/packages/pl-fe/src/styles/new/components.scss
similarity index 80%
rename from packages/pl-fe/src/styles/new/ui.scss
rename to packages/pl-fe/src/styles/new/components.scss
index 3023374d4..1662a5285 100644
--- a/packages/pl-fe/src/styles/new/ui.scss
+++ b/packages/pl-fe/src/styles/new/components.scss
@@ -109,28 +109,3 @@ a.⁂-list-item,
 .⁂-select {
   @apply truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm;
 }
-
-.⁂-thumb-navigation {
-  @apply fixed inset-x-0 bottom-0 z-50 flex w-full overflow-x-auto border-t border-solid border-gray-200 bg-white/90 shadow-2xl backdrop-blur-md black:bg-black/80 dark:border-gray-800 dark:bg-primary-900/90 lg:hidden;
-
-  &__item {
-    @apply flex flex-1 flex-col items-center px-2 py-4 text-lg text-gray-600;
-
-      .⁂-icon {
-        @apply size-5 text-gray-600 black:text-white;
-
-      }
-
-    &--active .⁂-icon {
-      @apply text-primary-500;
-    }
-
-    &--compose {
-      @apply px-1.5 py-3.5;
-
-      .⁂-icon {
-        @apply size-6;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/pl-fe/src/styles/new/index.scss b/packages/pl-fe/src/styles/new/index.scss
index 99780026f..242277348 100644
--- a/packages/pl-fe/src/styles/new/index.scss
+++ b/packages/pl-fe/src/styles/new/index.scss
@@ -1,2 +1,2 @@
-@use 'ui';
-
+@use 'components';
+@use 'layout';
diff --git a/packages/pl-fe/src/styles/new/layout.scss b/packages/pl-fe/src/styles/new/layout.scss
new file mode 100644
index 000000000..c7ad234c9
--- /dev/null
+++ b/packages/pl-fe/src/styles/new/layout.scss
@@ -0,0 +1,45 @@
+html {
+  @apply h-full;
+}
+
+body {
+  @apply h-full bg-white text-base antialiased black:bg-black dark:bg-gray-800;
+
+  &.system-font,
+  &.system-font .font-sans {
+    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
+  }
+
+  &.system-font .font-mono {
+    font-family: ui-monospace, monospace;
+  }
+
+  &.with-modals {
+    @apply overflow-hidden;
+  }
+}
+
+.⁂-thumb-navigation {
+  @apply fixed inset-x-0 bottom-0 z-50 flex w-full overflow-x-auto border-t border-solid border-gray-200 bg-white/90 shadow-2xl backdrop-blur-md black:bg-black/80 dark:border-gray-800 dark:bg-primary-900/90 lg:hidden;
+
+  &__item {
+    @apply flex flex-1 flex-col items-center px-2 py-4 text-lg text-gray-600;
+
+    .⁂-icon {
+      @apply size-5 text-gray-600 black:text-white;
+
+    }
+
+    &--active .⁂-icon {
+      @apply text-primary-500;
+    }
+
+    &--compose {
+      @apply px-1.5 py-3.5;
+
+      .⁂-icon {
+        @apply size-6;
+      }
+    }
+  }
+}
\ No newline at end of file
