diff --git a/packages/cmsui/news/8012.bugfix b/packages/cmsui/news/8012.bugfix
new file mode 100644
index 0000000000..5b2aee1f0d
--- /dev/null
+++ b/packages/cmsui/news/8012.bugfix
@@ -0,0 +1 @@
+Separate public UI and CMS UI styles. @arybakov05
\ No newline at end of file
diff --git a/packages/cmsui/routes/layout.tsx b/packages/cmsui/routes/layout.tsx
index f7ae77dcab..40abcc791b 100644
--- a/packages/cmsui/routes/layout.tsx
+++ b/packages/cmsui/routes/layout.tsx
@@ -18,6 +18,7 @@ import { shouldShowToolbar } from '@plone/layout/helpers';
 import Sidebar, { sidebarAtom } from '../components/Sidebar/Sidebar';
 import Settings from '@plone/components/icons/settings.svg?react';
 import { useAtom } from 'jotai';
+import { useLayoutEffect } from 'react';
 import { clsx } from 'clsx';
 import config from '@plone/registry';
 
@@ -73,6 +74,12 @@ export default function Index() {
   const navigate = useNavigate();
   const [collapsed, setCollapsed] = useAtom(sidebarAtom);
 
+  useLayoutEffect(() => {
+    document
+      .querySelectorAll('link[href*="publicui.css"]')
+      .forEach((el) => el.remove());
+  }, []);
+
   if (!rootData) {
     return null;
   }
diff --git a/packages/cmsui/styles/cmsui.css b/packages/cmsui/styles/cmsui.css
index db3c2d741c..d4349b4428 100644
--- a/packages/cmsui/styles/cmsui.css
+++ b/packages/cmsui/styles/cmsui.css
@@ -3,15 +3,16 @@
 
 @source '../node_modules/@plone/components/dist/quanta';
 
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/preflight.css' layer(base);
+@import 'tailwindcss/utilities.css' layer(utilities);
+
 @custom-variant dark (&:where(.dark, .dark *));
 
 @layer cmsui {
   @import '@plone/components/src/styles/basic/theme.css';
-  @import 'tailwindcss/theme.css';
-  @import 'tailwindcss/preflight.css';
-  @import 'tailwindcss/utilities.css';
 
-  :root {
+  body.cmsui {
     --background: hsl(0 0% 100%);
     --foreground: hsl(222.2 84% 4.9%);
     --card: hsl(0 0% 100%);
@@ -40,7 +41,7 @@
     /* --radius: 0.6rem; */
   }
 
-  .dark {
+  body.cmsui.dark {
     --background: hsl(222.2 84% 4.9%);
     --foreground: hsl(210 40% 98%);
     --card: hsl(222.2 84% 4.9%);
diff --git a/packages/publicui/news/8012.bugfix b/packages/publicui/news/8012.bugfix
new file mode 100644
index 0000000000..5b2aee1f0d
--- /dev/null
+++ b/packages/publicui/news/8012.bugfix
@@ -0,0 +1 @@
+Separate public UI and CMS UI styles. @arybakov05
\ No newline at end of file
diff --git a/packages/publicui/routes/index.tsx b/packages/publicui/routes/index.tsx
index ca94b3cdab..f1e9cc3fcc 100644
--- a/packages/publicui/routes/index.tsx
+++ b/packages/publicui/routes/index.tsx
@@ -15,6 +15,7 @@ import {
   type LinksFunction,
   type MetaFunction,
 } from 'react-router';
+import { useLayoutEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Link,
@@ -86,6 +87,12 @@ export default function Index() {
     .filter((match) => match.handle?.bodyClass)
     .map((match) => match.handle?.bodyClass);
 
+  useLayoutEffect(() => {
+    document
+      .querySelectorAll('link[href*="cmsui.css"]')
+      .forEach((el) => el.remove());
+  }, []);
+
   if (!rootData) {
     return null;
   }