diff --git a/apps/web/src/components/ui/dropdown-menu/dropdown-menu.tsx b/apps/web/src/components/ui/dropdown-menu/dropdown-menu.tsx
index c6b0e9b04..3da024305 100644
--- a/apps/web/src/components/ui/dropdown-menu/dropdown-menu.tsx
+++ b/apps/web/src/components/ui/dropdown-menu/dropdown-menu.tsx
@@ -10,6 +10,7 @@ import {
 } from '../icons/NucleoIconOutlined';
 
 import { cn } from '@/lib/utils';
+import { THEME_RESET_STYLE } from '@/styles/theme-reset';
 
 function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
   return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
@@ -30,6 +31,7 @@ function DropdownMenuTrigger({
 function DropdownMenuContent({
   className,
   sideOffset = 4,
+  style,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
   return (
@@ -41,6 +43,7 @@ function DropdownMenuContent({
           'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
           className
         )}
+        style={{ ...THEME_RESET_STYLE, ...style }}
         {...props}
       />
     </DropdownMenuPrimitive.Portal>
diff --git a/apps/web/src/components/ui/report/ThemeWrapper/ThemeWrapper.tsx b/apps/web/src/components/ui/report/ThemeWrapper/ThemeWrapper.tsx
index 7e6b680ad..0c70b3763 100644
--- a/apps/web/src/components/ui/report/ThemeWrapper/ThemeWrapper.tsx
+++ b/apps/web/src/components/ui/report/ThemeWrapper/ThemeWrapper.tsx
@@ -3,7 +3,7 @@
 import { cn } from '@/lib/utils';
 
 import { ThemesStyle } from './ThemeStyles';
-import { DEFAULT_THEME_STYLE } from './themes';
+import { THEME_RESET_STYLE } from '@/styles/theme-reset';
 
 interface ThemeWrapperProps extends React.ComponentProps<'div'> {
   defaultTheme?: string;
@@ -12,9 +12,7 @@ interface ThemeWrapperProps extends React.ComponentProps<'div'> {
 export function ThemeWrapper({ children, className, defaultTheme }: ThemeWrapperProps) {
   return (
     <>
-      <div
-        style={DEFAULT_THEME_STYLE}
-        className={cn('themes-wrapper w-full antialiased', className)}>
+      <div style={THEME_RESET_STYLE} className={cn('themes-wrapper w-full antialiased', className)}>
         {children}
       </div>
 
diff --git a/apps/web/src/components/ui/report/ThemeWrapper/themes.ts b/apps/web/src/components/ui/report/ThemeWrapper/themes.ts
index b401bf91a..88a6dbdeb 100644
--- a/apps/web/src/components/ui/report/ThemeWrapper/themes.ts
+++ b/apps/web/src/components/ui/report/ThemeWrapper/themes.ts
@@ -1,106 +1,4 @@
-export const FONT_BASE_THEME = {
-  '--font-heading': 'ui-sans-serif, -apple-system, BlinkMacSystemFont',
-  '--font-sans': 'ui-sans-serif, -apple-system, BlinkMacSystemFont',
-  '--font-mono':
-    'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-  '--spacing': '0.25rem',
-  '--breakpoint-xl': '80rem',
-  '--breakpoint-2xl': '96rem',
-  '--container-sm': '24rem',
-  '--container-lg': '32rem',
-  '--container-2xl': '42rem',
-  '--container-3xl': '48rem',
-  '--text-xs': '0.75rem',
-  '--text-xs--line-height': 'calc(1 / 0.75)',
-  '--text-sm': '0.875rem',
-  '--text-sm--line-height': 'calc(1.25 / 0.875)',
-  '--text-base': '1rem',
-  '--text-base--line-height': 'calc(1.5 / 1)',
-  '--text-lg': '1.125rem',
-  '--text-lg--line-height': 'calc(1.75 / 1.125)',
-  '--text-xl': '1.25rem',
-  '--text-xl--line-height': 'calc(1.75 / 1.25)',
-  '--text-2xl': '1.5rem',
-  '--text-2xl--line-height': 'calc(2 / 1.5)',
-  '--text-3xl': '1.875rem',
-  '--text-3xl--line-height': 'calc(2.25 / 1.875)',
-  '--text-4xl': '2.25rem',
-  '--text-4xl--line-height': 'calc(2.5 / 2.25)',
-  '--text-5xl': '3rem',
-  '--text-5xl--line-height': '1',
-  '--font-weight-light': '300',
-  '--font-weight-normal': '400',
-  '--font-weight-medium': '500',
-  '--font-weight-semibold': '600',
-  '--font-weight-bold': '700',
-  '--font-weight-extrabold': '800',
-  '--tracking-tighter': '-0.05em',
-  '--tracking-tight': '-0.025em',
-  '--tracking-widest': '0.1em',
-  '--leading-tight': '1.25',
-  '--leading-normal': '1.5',
-  '--leading-relaxed': '1.625',
-  '--leading-loose': '2'
-};
-
-export const DEFAULT_COLOR_THEME = {
-  id: 'default-shadcn',
-  dark: {
-    accent: '240 3.7% 15.9%',
-    'accent-foreground': '0 0% 98%',
-    background: '240 10% 3.9%',
-    border: '240 3.7% 15.9%',
-    brand: '213.3 93.9% 67.8%',
-    card: '240 10% 3.9%',
-    'card-foreground': '0 0% 98%',
-    destructive: '0 62.8% 30.6%',
-    'destructive-foreground': '0 0% 98%',
-    foreground: '0 0% 98%',
-    highlight: '48 96% 53%',
-    input: '240 3.7% 15.9%',
-    muted: '240 3.7% 15.9%',
-    'muted-foreground': '240 5% 64.9%',
-    popover: '240 10% 3.9%',
-    'popover-foreground': '0 0% 98%',
-    primary: '0 0% 98%',
-    'primary-foreground': '240 5.9% 10%',
-    ring: '240 4.9% 83.9%',
-    secondary: '240 3.7% 15.9%',
-    'secondary-foreground': '0 0% 98%'
-  },
-  light: {
-    accent: '240 4.8% 95.9%',
-    'accent-foreground': '240 5.9% 10%',
-    background: '0 0% 100%',
-    border: '240 5.9% 90%',
-    brand: '217.2 91.2% 59.8%',
-    card: '0 0% 100%',
-    'card-foreground': '240 10% 3.9%',
-    destructive: '0 84.2% 60.2%',
-    'destructive-foreground': '0 0% 98%',
-    foreground: '240 10% 3.9%',
-    highlight: '47.9 95.8% 53.1%',
-    input: '240 5.9% 90%',
-    muted: '240 4.8% 95.9%',
-    'muted-foreground': '240 3.8% 46.1%',
-    popover: '0 0% 100%',
-    'popover-foreground': '240 10% 3.9%',
-    primary: '240 5.9% 10%',
-    'primary-foreground': '0 0% 98%',
-    ring: '240 10% 3.9%',
-    secondary: '240 4.8% 95.9%',
-    'secondary-foreground': '240 5.9% 10%'
-  },
-  name: 'Default'
-} as const;
-
-export const DEFAULT_THEME_STYLE = {
-  ...DEFAULT_COLOR_THEME,
-  ...FONT_BASE_THEME,
-  fontFamily: 'var(--font-sans), "Inter", sans-serif',
-  fontSynthesisWeight: 'normal' as 'none',
-  fontVariationSettings: 'normal'
-} as React.CSSProperties;
+import { THEME_RESET_COLORS } from '@/styles/theme-reset';
 
 const _THEMES = {
   ayu: {
@@ -253,7 +151,7 @@ const _THEMES = {
     },
     name: 'Default Palette'
   },
-  'default-shadcn': DEFAULT_COLOR_THEME,
+  'default-shadcn': THEME_RESET_COLORS,
   dune: {
     id: 'dune',
     dark: {
@@ -608,7 +506,7 @@ export function themeColorsToCssVariables(colors: Record<string, string>): Recor
   //     `${cssVars["--primary"]} / ${100 - key * 20}%`
   // }
 
-  return { ...cssVars, ...FONT_BASE_THEME };
+  return { ...cssVars };
 }
 
 export function themeColorNameToCssVariable(name: string) {
diff --git a/apps/web/src/components/ui/report/elements/AlignToolbarButton.tsx b/apps/web/src/components/ui/report/elements/AlignToolbarButton.tsx
index 69296f6d6..0f4b3c4c8 100644
--- a/apps/web/src/components/ui/report/elements/AlignToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/AlignToolbarButton.tsx
@@ -23,6 +23,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 
 import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
+import { THEME_RESET_STYLE } from '@/styles/theme-reset';
 
 const items = [
   {
@@ -62,7 +63,7 @@ export function AlignToolbarButton(props: DropdownMenuProps) {
         </ToolbarButton>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent className="min-w-0" align="start">
+      <DropdownMenuContent className="min-w-0" align="start" style={THEME_RESET_STYLE}>
         <DropdownMenuRadioGroup
           value={value}
           onValueChange={(value) => {
diff --git a/apps/web/src/components/ui/report/elements/BlockContextMenu.tsx b/apps/web/src/components/ui/report/elements/BlockContextMenu.tsx
index 13a5196ea..1c723c025 100644
--- a/apps/web/src/components/ui/report/elements/BlockContextMenu.tsx
+++ b/apps/web/src/components/ui/report/elements/BlockContextMenu.tsx
@@ -22,7 +22,7 @@ import {
   ContextMenuTrigger
 } from '@/components/ui/context-menu';
 import { useIsTouchDevice } from '@/hooks/useIsTouchDevice';
-import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
+import { THEME_RESET_STYLE } from '@/styles/theme-reset';
 
 type Value = 'askAI' | null;
 
@@ -92,7 +92,7 @@ export function BlockContextMenu({ children }: { children: React.ReactNode }) {
       </ContextMenuTrigger>
       <ContextMenuContent
         className="w-64"
-        style={DEFAULT_THEME_STYLE}
+        style={THEME_RESET_STYLE}
         onCloseAutoFocus={(e) => {
           e.preventDefault();
           editor.getApi(BlockSelectionPlugin).blockSelection.focus();
diff --git a/apps/web/src/components/ui/report/elements/Comment.tsx b/apps/web/src/components/ui/report/elements/Comment.tsx
index d46eb649b..4ab4f938e 100644
--- a/apps/web/src/components/ui/report/elements/Comment.tsx
+++ b/apps/web/src/components/ui/report/elements/Comment.tsx
@@ -32,7 +32,7 @@ import { type TDiscussion, discussionPlugin } from '../plugins/discussion-kit';
 
 import { EditorContainer } from '../EditorContainer';
 import { Editor } from '../Editor';
-import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
+import { THEME_RESET_STYLE } from '@/styles/theme-reset';
 
 export interface TComment {
   id: string;
@@ -335,7 +335,7 @@ function CommentMoreDropdown(props: {
       </DropdownMenuTrigger>
       <DropdownMenuContent
         className="w-48"
-        style={DEFAULT_THEME_STYLE}
+        style={THEME_RESET_STYLE}
         onCloseAutoFocus={(e) => {
           if (selectedEditCommentRef.current) {
             onCloseAutoFocus?.();
diff --git a/apps/web/src/components/ui/report/elements/ExportToolbarButton.tsx b/apps/web/src/components/ui/report/elements/ExportToolbarButton.tsx
index 38bc2fa62..736a7cfce 100644
--- a/apps/web/src/components/ui/report/elements/ExportToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/ExportToolbarButton.tsx
@@ -19,7 +19,7 @@ import {
 import { EditorStatic } from './EditorStatic';
 import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
 import { useBusterNotifications } from '@/context/BusterNotifications';
-import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
+import { THEME_RESET_STYLE } from '@/styles/theme-reset';
 
 export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) {
   const editor = useEditorRef();
@@ -194,7 +194,7 @@ export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) {
         </ToolbarButton>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent align="start" style={DEFAULT_THEME_STYLE}>
+      <DropdownMenuContent align="start" style={THEME_RESET_STYLE}>
         <DropdownMenuGroup>
           <DropdownMenuItem onSelect={exportToHtml}>Export as HTML</DropdownMenuItem>
           <DropdownMenuItem onSelect={exportToPdf}>Export as PDF</DropdownMenuItem>
diff --git a/apps/web/src/components/ui/report/elements/FontColorToolbarButton.tsx b/apps/web/src/components/ui/report/elements/FontColorToolbarButton.tsx
index a21e85234..ae10f77ba 100644
--- a/apps/web/src/components/ui/report/elements/FontColorToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/FontColorToolbarButton.tsx
@@ -26,7 +26,7 @@ import {
 import { cn } from '@/lib/utils';
 
 import { ToolbarButton, ToolbarMenuGroup } from '@/components/ui/toolbar/Toolbar';
-import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
+import { THEME_RESET_STYLE } from '@/styles/theme-reset';
 
 export function FontColorToolbarButton({
   children,
@@ -106,7 +106,7 @@ export function FontColorToolbarButton({
         </ToolbarButton>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent align="start" style={DEFAULT_THEME_STYLE}>
+      <DropdownMenuContent align="start" style={THEME_RESET_STYLE}>
         <ColorPicker
           color={selectedColor || color}
           clearColor={clearColor}
diff --git a/apps/web/src/components/ui/report/elements/ImportToolbarButton.tsx b/apps/web/src/components/ui/report/elements/ImportToolbarButton.tsx
index 40ed39d22..c20d06c3d 100644
--- a/apps/web/src/components/ui/report/elements/ImportToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/ImportToolbarButton.tsx
@@ -19,7 +19,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 
 import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
-import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
+import { THEME_RESET_STYLE } from '@/styles/theme-reset';
 
 type ImportType = 'html' | 'markdown';
 
@@ -78,7 +78,7 @@ export function ImportToolbarButton(props: DropdownMenuProps) {
         </ToolbarButton>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent align="start" style={DEFAULT_THEME_STYLE}>
+      <DropdownMenuContent align="start" style={THEME_RESET_STYLE}>
         <DropdownMenuGroup>
           <DropdownMenuItem
             onSelect={() => {
diff --git a/apps/web/src/components/ui/report/elements/InlineCombobox.tsx b/apps/web/src/components/ui/report/elements/InlineCombobox.tsx
index 2ea1ca3f4..f0f3181d7 100644
--- a/apps/web/src/components/ui/report/elements/InlineCombobox.tsx
+++ b/apps/web/src/components/ui/report/elements/InlineCombobox.tsx
@@ -27,7 +27,7 @@ import { cva } from 'class-variance-authority';
 import { useComposedRef, useEditorRef } from 'platejs/react';
 
 import { cn } from '@/lib/utils';
-import { DEFAULT_THEME_STYLE, FONT_BASE_THEME } from '../ThemeWrapper/themes';
+import { THEME_RESET_STYLE } from '@/styles/theme-reset';
 
 type FilterFn = (
   item: { value: string; group?: string; keywords?: string[]; label?: string },
@@ -238,7 +238,7 @@ const InlineComboboxContent: typeof ComboboxPopover = ({ className, style, ...pr
           className
         )}
         {...props}
-        style={{ ...DEFAULT_THEME_STYLE, ...style }}
+        style={{ ...THEME_RESET_STYLE, ...style }}
       />
     </Portal>
   );
diff --git a/apps/web/src/components/ui/report/elements/InsertToolbarButton.tsx b/apps/web/src/components/ui/report/elements/InsertToolbarButton.tsx
index a48982937..aa0721240 100644
--- a/apps/web/src/components/ui/report/elements/InsertToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/InsertToolbarButton.tsx
@@ -39,6 +39,7 @@ import {
 import { insertBlock, insertInlineElement } from './transforms';
 
 import { ToolbarButton, ToolbarMenuGroup } from '@/components/ui/toolbar/Toolbar';
+import { THEME_RESET_STYLE } from '@/styles/theme-reset';
 
 type Group = {
   group: string;
@@ -223,6 +224,7 @@ export function InsertToolbarButton(props: DropdownMenuProps) {
 
       <DropdownMenuContent
         className="flex max-h-[500px] min-w-0 flex-col overflow-y-auto"
+        style={THEME_RESET_STYLE}
         align="start">
         {groups.map(({ group, items: nestedItems }) => (
           <ToolbarMenuGroup key={group} label={group}>
diff --git a/apps/web/src/components/ui/report/elements/ListToolbarButton.tsx b/apps/web/src/components/ui/report/elements/ListToolbarButton.tsx
index 85e45d83b..385b3f9bd 100644
--- a/apps/web/src/components/ui/report/elements/ListToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/ListToolbarButton.tsx
@@ -21,7 +21,7 @@ import {
   ToolbarSplitButtonPrimary,
   ToolbarSplitButtonSecondary
 } from '@/components/ui/toolbar/Toolbar';
-import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
+import { THEME_RESET_STYLE } from '@/styles/theme-reset';
 
 export function BulletedListToolbarButton() {
   const editor = useEditorRef();
@@ -52,7 +52,7 @@ export function BulletedListToolbarButton() {
           <ToolbarSplitButtonSecondary />
         </DropdownMenuTrigger>
 
-        <DropdownMenuContent align="start" alignOffset={-32} style={DEFAULT_THEME_STYLE}>
+        <DropdownMenuContent align="start" alignOffset={-32} style={THEME_RESET_STYLE}>
           <DropdownMenuGroup>
             <DropdownMenuItem
               onClick={() =>
diff --git a/apps/web/src/components/ui/report/elements/MediaToolbarButton.tsx b/apps/web/src/components/ui/report/elements/MediaToolbarButton.tsx
index d260572bc..3aaa225f2 100644
--- a/apps/web/src/components/ui/report/elements/MediaToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/MediaToolbarButton.tsx
@@ -35,7 +35,7 @@ import {
   ToolbarSplitButtonPrimary,
   ToolbarSplitButtonSecondary
 } from '@/components/ui/toolbar/Toolbar';
-import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
+import { THEME_RESET_STYLE } from '@/styles/theme-reset';
 
 const MEDIA_CONFIG: Record<
   string,
@@ -130,7 +130,7 @@ export function MediaToolbarButton({
             onClick={(e) => e.stopPropagation()}
             align="start"
             alignOffset={-32}
-            style={DEFAULT_THEME_STYLE}>
+            style={THEME_RESET_STYLE}>
             <DropdownMenuGroup>
               <DropdownMenuItem onSelect={() => openFilePicker()}>
                 {currentConfig.icon}
diff --git a/apps/web/src/components/ui/report/elements/ModeToolbarButton.tsx b/apps/web/src/components/ui/report/elements/ModeToolbarButton.tsx
index c80a562c7..8b9019d80 100644
--- a/apps/web/src/components/ui/report/elements/ModeToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/ModeToolbarButton.tsx
@@ -16,7 +16,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 
 import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
-import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
+import { THEME_RESET_STYLE } from '@/styles/theme-reset';
 
 export function ModeToolbarButton(props: DropdownMenuProps) {
   const editor = useEditorRef();
@@ -55,7 +55,7 @@ export function ModeToolbarButton(props: DropdownMenuProps) {
         </ToolbarButton>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent className="min-w-[180px]" align="start" style={DEFAULT_THEME_STYLE}>
+      <DropdownMenuContent className="min-w-[180px]" align="start" style={THEME_RESET_STYLE}>
         <DropdownMenuRadioGroup
           value={value}
           onValueChange={(newValue) => {
diff --git a/apps/web/src/components/ui/report/elements/MoreToolbarButton.tsx b/apps/web/src/components/ui/report/elements/MoreToolbarButton.tsx
index dfc8a0145..b5397221d 100644
--- a/apps/web/src/components/ui/report/elements/MoreToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/MoreToolbarButton.tsx
@@ -17,7 +17,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 
 import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
-import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
+import { THEME_RESET_STYLE } from '@/styles/theme-reset';
 
 export function MoreToolbarButton(props: DropdownMenuProps) {
   const editor = useEditorRef();
@@ -34,7 +34,7 @@ export function MoreToolbarButton(props: DropdownMenuProps) {
       <DropdownMenuContent
         className="ignore-click-outside/toolbar flex max-h-[500px] min-w-[180px] flex-col overflow-y-auto"
         align="start"
-        style={DEFAULT_THEME_STYLE}>
+        style={THEME_RESET_STYLE}>
         <DropdownMenuGroup>
           <DropdownMenuItem
             onSelect={() => {
diff --git a/apps/web/src/components/ui/report/elements/TableNode/TableNode.tsx b/apps/web/src/components/ui/report/elements/TableNode/TableNode.tsx
index 158746902..4de3fafe7 100644
--- a/apps/web/src/components/ui/report/elements/TableNode/TableNode.tsx
+++ b/apps/web/src/components/ui/report/elements/TableNode/TableNode.tsx
@@ -100,7 +100,7 @@ import {
   ToolbarGroup,
   ToolbarMenuGroup
 } from '@/components/ui/toolbar/Toolbar';
-import { DEFAULT_THEME_STYLE } from '../../ThemeWrapper/themes';
+import { THEME_RESET_STYLE } from '@/styles/theme-reset';
 export const TableElement = withHOC(
   TableProvider,
   function TableElement({ children, ...props }: PlateElementProps<TTableElement>) {
@@ -281,7 +281,7 @@ function TableBordersDropdownMenuContent(
   return (
     <DropdownMenuContent
       className="min-w-[220px]"
-      style={DEFAULT_THEME_STYLE}
+      style={THEME_RESET_STYLE}
       onCloseAutoFocus={(e) => {
         e.preventDefault();
         editor.tf.focus();
diff --git a/apps/web/src/components/ui/report/elements/TableToolbarButton.tsx b/apps/web/src/components/ui/report/elements/TableToolbarButton.tsx
index 5b8ad110e..51e36feaf 100644
--- a/apps/web/src/components/ui/report/elements/TableToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/TableToolbarButton.tsx
@@ -45,7 +45,7 @@ import {
 import { cn } from '@/lib/utils';
 
 import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
-import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
+import { THEME_RESET_STYLE } from '@/styles/theme-reset';
 
 export function TableToolbarButton(props: DropdownMenuProps) {
   const tableSelected = useEditorSelector(
@@ -68,7 +68,7 @@ export function TableToolbarButton(props: DropdownMenuProps) {
       <DropdownMenuContent
         className="flex w-[180px] min-w-0 flex-col"
         align="start"
-        style={DEFAULT_THEME_STYLE}>
+        style={THEME_RESET_STYLE}>
         <DropdownMenuGroup>
           <DropdownMenuSub>
             <DropdownMenuSubTrigger className="gap-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
diff --git a/apps/web/src/components/ui/report/elements/TurnIntoToolbarButton.tsx b/apps/web/src/components/ui/report/elements/TurnIntoToolbarButton.tsx
index 4e46d25b9..96f4cc093 100644
--- a/apps/web/src/components/ui/report/elements/TurnIntoToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/TurnIntoToolbarButton.tsx
@@ -35,7 +35,7 @@ import {
 import { getBlockType, setBlockType } from './transforms';
 
 import { ToolbarButton, ToolbarMenuGroup } from '@/components/ui/toolbar/Toolbar';
-import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
+import { THEME_RESET_STYLE } from '@/styles/theme-reset';
 
 const turnIntoItems = [
   {
@@ -146,7 +146,7 @@ export function TurnIntoToolbarButton(props: DropdownMenuProps) {
 
       <DropdownMenuContent
         className="ignore-click-outside/toolbar min-w-0"
-        style={DEFAULT_THEME_STYLE}
+        style={THEME_RESET_STYLE}
         onCloseAutoFocus={(e) => {
           e.preventDefault();
           editor.tf.focus();
diff --git a/apps/web/src/styles/theme-reset.ts b/apps/web/src/styles/theme-reset.ts
new file mode 100644
index 000000000..72fe4b011
--- /dev/null
+++ b/apps/web/src/styles/theme-reset.ts
@@ -0,0 +1,104 @@
+import React from 'react';
+
+export const FONT_BASE_THEME = {
+  '--font-heading': 'ui-sans-serif, -apple-system, BlinkMacSystemFont',
+  '--font-sans': 'ui-sans-serif, -apple-system, BlinkMacSystemFont',
+  '--font-mono':
+    'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+  '--spacing': '0.25rem',
+  '--breakpoint-xl': '80rem',
+  '--breakpoint-2xl': '96rem',
+  '--container-sm': '24rem',
+  '--container-lg': '32rem',
+  '--container-2xl': '42rem',
+  '--container-3xl': '48rem',
+  '--text-xs': '0.75rem',
+  '--text-xs--line-height': 'calc(1 / 0.75)',
+  '--text-sm': '0.875rem',
+  '--text-sm--line-height': 'calc(1.25 / 0.875)',
+  '--text-base': '1rem',
+  '--text-base--line-height': 'calc(1.5 / 1)',
+  '--text-lg': '1.125rem',
+  '--text-lg--line-height': 'calc(1.75 / 1.125)',
+  '--text-xl': '1.25rem',
+  '--text-xl--line-height': 'calc(1.75 / 1.25)',
+  '--text-2xl': '1.5rem',
+  '--text-2xl--line-height': 'calc(2 / 1.5)',
+  '--text-3xl': '1.875rem',
+  '--text-3xl--line-height': 'calc(2.25 / 1.875)',
+  '--text-4xl': '2.25rem',
+  '--text-4xl--line-height': 'calc(2.5 / 2.25)',
+  '--text-5xl': '3rem',
+  '--text-5xl--line-height': '1',
+  '--font-weight-light': '300',
+  '--font-weight-normal': '400',
+  '--font-weight-medium': '500',
+  '--font-weight-semibold': '600',
+  '--font-weight-bold': '700',
+  '--font-weight-extrabold': '800',
+  '--tracking-tighter': '-0.05em',
+  '--tracking-tight': '-0.025em',
+  '--tracking-widest': '0.1em',
+  '--leading-tight': '1.25',
+  '--leading-normal': '1.5',
+  '--leading-relaxed': '1.625',
+  '--leading-loose': '2'
+};
+
+export const THEME_RESET_COLORS = {
+  id: 'default-shadcn',
+  dark: {
+    accent: '240 3.7% 15.9%',
+    'accent-foreground': '0 0% 98%',
+    background: '240 10% 3.9%',
+    border: '240 3.7% 15.9%',
+    brand: '213.3 93.9% 67.8%',
+    card: '240 10% 3.9%',
+    'card-foreground': '0 0% 98%',
+    destructive: '0 62.8% 30.6%',
+    'destructive-foreground': '0 0% 98%',
+    foreground: '0 0% 98%',
+    highlight: '48 96% 53%',
+    input: '240 3.7% 15.9%',
+    muted: '240 3.7% 15.9%',
+    'muted-foreground': '240 5% 64.9%',
+    popover: '240 10% 3.9%',
+    'popover-foreground': '0 0% 98%',
+    primary: '0 0% 98%',
+    'primary-foreground': '240 5.9% 10%',
+    ring: '240 4.9% 83.9%',
+    secondary: '240 3.7% 15.9%',
+    'secondary-foreground': '0 0% 98%'
+  },
+  light: {
+    accent: '240 4.8% 95.9%',
+    'accent-foreground': '240 5.9% 10%',
+    background: '0 0% 100%',
+    border: '240 5.9% 90%',
+    brand: '217.2 91.2% 59.8%',
+    card: '0 0% 100%',
+    'card-foreground': '240 10% 3.9%',
+    destructive: '0 84.2% 60.2%',
+    'destructive-foreground': '0 0% 98%',
+    foreground: '240 10% 3.9%',
+    highlight: '47.9 95.8% 53.1%',
+    input: '240 5.9% 90%',
+    muted: '240 4.8% 95.9%',
+    'muted-foreground': '240 3.8% 46.1%',
+    popover: '0 0% 100%',
+    'popover-foreground': '240 10% 3.9%',
+    primary: '240 5.9% 10%',
+    'primary-foreground': '0 0% 98%',
+    ring: '240 10% 3.9%',
+    secondary: '240 4.8% 95.9%',
+    'secondary-foreground': '240 5.9% 10%'
+  },
+  name: 'Default'
+} as const;
+
+export const THEME_RESET_STYLE = {
+  ...FONT_BASE_THEME,
+  fontFamily: 'var(--font-sans), "Inter", sans-serif',
+  fontSynthesisWeight: 'normal' as 'none',
+  fontVariationSettings: 'normal'
+} as React.CSSProperties;