diff --git a/build.js b/build.js
index 46e5e84..e007ced 100644
--- a/build.js
+++ b/build.js
@@ -39,7 +39,7 @@ function createDirectories() {
 }
 
 // Copy common files
-function copyCommonFiles() {
+function copyCommonFiles(bundlePath) {
   commonFiles.forEach(file => {
     const source = file;
     const chromeDest = path.join(chromeDir, file);
@@ -55,6 +55,22 @@ function copyCommonFiles() {
       fs.copyFileSync(source, firefoxDest);
     }
   });
+
+  // Copy the bundled CSS to the extension's src/styles directory
+  if (bundlePath && fs.existsSync(bundlePath)) {
+    const chromeStylesDir = path.join(chromeDir, 'src/styles');
+    const firefoxStylesDir = path.join(firefoxDir, 'src/styles');
+
+    if (!fs.existsSync(chromeStylesDir)) {
+      fs.mkdirSync(chromeStylesDir, { recursive: true });
+    }
+    if (!fs.existsSync(firefoxStylesDir)) {
+      fs.mkdirSync(firefoxStylesDir, { recursive: true });
+    }
+
+    fs.copyFileSync(bundlePath, path.join(chromeStylesDir, 'core-bundle.css'));
+    fs.copyFileSync(bundlePath, path.join(firefoxStylesDir, 'core-bundle.css'));
+  }
 }
 
 function copyDirectoryRecursive(src, dest) {
@@ -137,13 +153,55 @@ function createZips() {
   });
 }
 
+// Bundle all CSS files (core + panels)
+function bundleCoreCss() {
+  const srcCssDir = 'src/styles';
+  const buildCssDir = path.join(buildDir, 'css');
+  const files = [
+    'tokens/color.css',
+    'tokens/size.css',
+    'tokens/typography.css',
+    'themes/default.css',
+    'generic/typography.css',
+    'core.css',
+    'welcome.css',
+    'results.css'
+  ];
+
+  // Create build/css directory if it doesn't exist
+  if (!fs.existsSync(buildCssDir)) {
+    fs.mkdirSync(buildCssDir, { recursive: true });
+  }
+
+  let bundledCss = '/* Core CSS Bundle for Carbon Visualizer Extension */\n';
+  bundledCss += '/* This file combines all design system CSS files in the correct dependency order */\n\n';
+
+  files.forEach(file => {
+    const filePath = path.join(srcCssDir, file);
+    try {
+      const content = fs.readFileSync(filePath, 'utf-8');
+      bundledCss += `/* ===== ${file} ===== */\n`;
+      bundledCss += content;
+      bundledCss += '\n\n';
+    } catch (error) {
+      console.error(`⚠️  Warning: Could not read CSS file ${filePath}:`, error.message);
+    }
+  });
+
+  const bundleOutputPath = path.join(buildCssDir, 'core-bundle.css');
+  fs.writeFileSync(bundleOutputPath, bundledCss);
+  console.log(`✅ Bundled core CSS: ${bundleOutputPath}`);
+  return bundleOutputPath;
+}
+
 // Main build function
 async function build() {
   try {
     console.log('🚀 Building Carbon Visualizer extension for Chrome and Firefox...');
-    
+
+    const bundlePath = bundleCoreCss();
     createDirectories();
-    copyCommonFiles();
+    copyCommonFiles(bundlePath);
     copyManifests();
     patchFirefoxManifest();
     
diff --git a/src/core/ExtensionManager.js b/src/core/ExtensionManager.js
index 8d78c35..ac250dd 100644
--- a/src/core/ExtensionManager.js
+++ b/src/core/ExtensionManager.js
@@ -53,19 +53,24 @@ class ExtensionManager {
   }
 
   async loadCoreCSS() {
-    if (document.getElementById('carbon-visualizer-core-css')) return;
+    // Check if core CSS bundle is already loaded
+    if (document.getElementById('carbon-visualizer-core-css-bundle')) {
+      return;
+    }
 
     try {
-      const cssUrl = this.browserAPI.runtime.getURL('src/styles/core.css');
+      // Load the bundled core CSS file
+      const cssUrl = this.browserAPI.runtime.getURL('src/styles/core-bundle.css');
       const response = await fetch(cssUrl);
       const css = await response.text();
 
+      // Create and append the style tag
       const style = document.createElement('style');
-      style.id = 'carbon-visualizer-core-css';
+      style.id = 'carbon-visualizer-core-css-bundle';
       style.textContent = css;
       document.head.appendChild(style);
     } catch (error) {
-      console.error(error);
+      console.error('Failed to load core CSS bundle:', error);
     }
   }
 
diff --git a/src/core/Panel.js b/src/core/Panel.js
index 466fb20..2dde2a1 100644
--- a/src/core/Panel.js
+++ b/src/core/Panel.js
@@ -13,14 +13,12 @@ class Panel {
     const configs = {
       welcome: {
         htmlFile: 'src/panels/welcome/welcome.html',
-        cssFile: 'src/styles/styles.css',
         jsFile: 'src/panels/welcome/welcome.js',
         containerId: 'carbon-visualizer-welcome-panel',
         className: 'cv-panel--welcome'
       },
       results: {
         htmlFile: 'src/panels/results/results.html',
-        cssFile: 'src/panels/results/results.css',
         jsFile: 'src/panels/results/results.js',
         containerId: 'carbon-visualizer-results-panel',
         className: 'cv-panel--results'
@@ -39,31 +37,13 @@ class Panel {
     // Reset visibility state
     this.isVisible = false;
 
-    // Load panel-specific CSS
-    await this.loadPanelCSS();
-
-    // Load and inject HTML
+    // Load and inject HTML (CSS is already bundled and loaded by ExtensionManager)
     await this.loadPanelHTML();
 
     // Load panel-specific JavaScript
     await this.loadPanelJS();
   }
 
-  async loadPanelCSS() {
-    try {
-      const cssUrl = this.browserAPI.runtime.getURL(this.config.cssFile);
-      const response = await fetch(cssUrl);
-      const css = await response.text();
-
-      const style = document.createElement('style');
-      style.id = `carbon-visualizer-${this.type}-css`;
-      style.textContent = css;
-      document.head.appendChild(style);
-    } catch (error) {
-      console.error(error);
-    }
-  }
-
   async loadPanelHTML() {
     try {
       const htmlUrl = this.browserAPI.runtime.getURL(this.config.htmlFile);
diff --git a/src/styles/styles.css b/src/styles/styles.css
deleted file mode 100644
index af33af0..0000000
--- a/src/styles/styles.css
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * the chrome-extension://* prefix lets us import from extension files
- * it will probably be best to have some sort of build step to output a single
- * file so we don't have to deal with browser compatibility issues
- */
-@import url('chrome-extension://__MSG_@@extension_id__/src/styles/tokens/color.css');
-@import url('chrome-extension://__MSG_@@extension_id__/src/styles/tokens/size.css');
-@import url('chrome-extension://__MSG_@@extension_id__/src/styles/tokens/typography.css');
-
-@import url('chrome-extension://__MSG_@@extension_id__/src/styles/themes/default.css');
-
-@import url('chrome-extension://__MSG_@@extension_id__/src/styles/generic/typography.css');
-
-/* keep existing styles for now, rework when building components */
-@import url('chrome-extension://__MSG_@@extension_id__/src/styles/core.css');
-@import url('chrome-extension://__MSG_@@extension_id__/src/styles/welcome.css');