diff --git a/docs/demo/theme.ts b/docs/demo/theme.ts
index dd2cc46dd..8f1c278e1 100644
--- a/docs/demo/theme.ts
+++ b/docs/demo/theme.ts
@@ -179,6 +179,7 @@ export const theme: ConfigBase['theme'] = {
         },
         panel: {
           backgroundColor: 'var(--tk-elements-panel-backgroundColor)',
+          textColor: 'var(--tk-elements-panel-textColor)',
           header: {
             backgroundColor: 'var(--tk-elements-panel-header-backgroundColor)',
             textColor: 'var(--tk-elements-panel-header-textColor)',
diff --git a/packages/astro/src/default/styles/variables.css b/packages/astro/src/default/styles/variables.css
index cfbaf52fa..863e625c0 100644
--- a/packages/astro/src/default/styles/variables.css
+++ b/packages/astro/src/default/styles/variables.css
@@ -175,6 +175,7 @@
 
   /* Panel */
   --tk-elements-panel-backgroundColor: var(--tk-elements-app-backgroundColor);
+  --tk-elements-panel-textColor: var(--tk-elements-app-textColor);
 
   /* Panel > Header */
   --tk-elements-panel-header-backgroundColor: var(--tk-background-secondary);
diff --git a/packages/astro/src/theme.ts b/packages/astro/src/theme.ts
index 4a5bafef8..860997705 100644
--- a/packages/astro/src/theme.ts
+++ b/packages/astro/src/theme.ts
@@ -179,6 +179,7 @@ export const theme: ConfigBase['theme'] = {
         },
         panel: {
           backgroundColor: 'var(--tk-elements-panel-backgroundColor)',
+          textColor: 'var(--tk-elements-panel-textColor)',
           header: {
             backgroundColor: 'var(--tk-elements-panel-header-backgroundColor)',
             textColor: 'var(--tk-elements-panel-header-textColor)',
diff --git a/packages/components/react/src/BootScreen.tsx b/packages/components/react/src/BootScreen.tsx
index a9980f9e8..a4edca6cb 100644
--- a/packages/components/react/src/BootScreen.tsx
+++ b/packages/components/react/src/BootScreen.tsx
@@ -11,12 +11,7 @@ export function BootScreen({ className, tutorialStore }: Props) {
   const steps = useStore(tutorialStore.steps);
 
   return (
-    <div
-      className={classNames(
-        'flex-grow w-full flex justify-center items-center text-sm bg-tk-elements-app-backgroundColor text-tk-elements-app-textColor',
-        className,
-      )}
-    >
+    <div className={classNames('flex-grow w-full flex justify-center items-center text-sm', className)}>
       {steps ? (
         <ul className="space-y-1">
           {steps.map((step, index) => (
diff --git a/packages/components/react/src/Panels/EditorPanel.tsx b/packages/components/react/src/Panels/EditorPanel.tsx
index f0cb7a0b6..552f793fc 100644
--- a/packages/components/react/src/Panels/EditorPanel.tsx
+++ b/packages/components/react/src/Panels/EditorPanel.tsx
@@ -62,7 +62,7 @@ export function EditorPanel({
   }, [id]);
 
   return (
-    <PanelGroup className="bg-tk-elements-app-backgroundColor" direction="horizontal">
+    <PanelGroup className="bg-tk-elements-panel-backgroundColor" direction="horizontal">
       <Panel className="flex flex-col" collapsible defaultSize={0} minSize={10} ref={fileTreePanelRef}>
         <div className="panel-header border-r border-b border-tk-elements-app-borderColor">
           <div className="panel-title">
diff --git a/packages/components/react/src/Panels/PreviewPanel.tsx b/packages/components/react/src/Panels/PreviewPanel.tsx
index cb5385f00..f6f71a984 100644
--- a/packages/components/react/src/Panels/PreviewPanel.tsx
+++ b/packages/components/react/src/Panels/PreviewPanel.tsx
@@ -73,7 +73,7 @@ export const PreviewPanel = memo(
 
     if (!hasPreviews) {
       return (
-        <div className="flex flex-col h-full w-full">
+        <div className="panel-container bg-tk-elements-panel-backgroundColor text-tk-elements-panel-textColor">
           <div className="panel-header border-b border-tk-elements-app-borderColor justify-between">
             <div className="panel-title">
               <div className="panel-icon i-ph-lightning-duotone"></div>
diff --git a/packages/components/react/src/Panels/TerminalPanel.tsx b/packages/components/react/src/Panels/TerminalPanel.tsx
index 6f11ad4d0..7dda9cb61 100644
--- a/packages/components/react/src/Panels/TerminalPanel.tsx
+++ b/packages/components/react/src/Panels/TerminalPanel.tsx
@@ -44,7 +44,7 @@ export function TerminalPanel({ theme, tutorialStore }: TerminalPanelProps) {
   }, []);
 
   return (
-    <div className="panel-container bg-tk-elements-app-backgroundColor">
+    <div className="panel-container bg-tk-elements-panel-backgroundColor text-tk-elements-panel-textColor">
       <div className="panel-tabs-header overflow-x-hidden">
         <div className="panel-title w-full">
           <ul
diff --git a/packages/components/react/src/Panels/WorkspacePanel.tsx b/packages/components/react/src/Panels/WorkspacePanel.tsx
index 6f5d9ec60..00982019e 100644
--- a/packages/components/react/src/Panels/WorkspacePanel.tsx
+++ b/packages/components/react/src/Panels/WorkspacePanel.tsx
@@ -146,6 +146,7 @@ export function WorkspacePanel({ tutorialStore, theme }: Props) {
         maxSize={hasEditor ? 100 : 0}
         collapsible={!hasEditor}
         ref={editorPanelRef}
+        className="bg-tk-elements-panel-backgroundColor text-tk-elements-panel-textColor"
       >
         <EditorPanel
           id={tutorialStore.ref}
@@ -209,7 +210,7 @@ export function WorkspacePanel({ tutorialStore, theme }: Props) {
         onExpand={() => {
           terminalExpanded.current = true;
         }}
-        className={classNames({
+        className={classNames('bg-tk-elements-panel-backgroundColor text-tk-elements-panel-textColor', {
           'border-t border-tk-elements-app-borderColor': hasPreviews,
         })}
       >