diff --git a/src/components/Introduction.stories.mdx b/src/components/Introduction.stories.mdx
index dc76fc2f00..1ba5800abe 100644
--- a/src/components/Introduction.stories.mdx
+++ b/src/components/Introduction.stories.mdx
@@ -15,8 +15,5 @@ HTML markup for each component can be found in the HTML tab on each component st
 
 ## Base CSS
 
-
-- <a href={`https://github.com/uiowa/uids/tree/gh-pages/docs/v${version}/src/fonts.css`}>Fonts</a>
-- <a href={`https://github.com/uiowa/uids/tree/gh-pages/docs/v${version}/src/base.css`}>Base</a>
-
-
+- <a href={`https://github.com/uiowa/uids/tree/gh-pages/docs/v${version}/dist/css/base/fonts.css`}>Fonts</a>
+- <a href={`https://github.com/uiowa/uids/tree/gh-pages/docs/v${version}/dist/css/base/base.css`}>Base</a>
diff --git a/src/components/brand-bar/BrandBarDocs.mdx b/src/components/brand-bar/BrandBarDocs.mdx
index c0c195ad0e..48353c93f5 100644
--- a/src/components/brand-bar/BrandBarDocs.mdx
+++ b/src/components/brand-bar/BrandBarDocs.mdx
@@ -11,14 +11,13 @@ HTML markup can be found in the HTML tab on each component story.</p>
 ## Base CSS
 
 
-- <a href={`https://github.com/uiowa/uids/tree/gh-pages/docs/v${version}/src/fonts.css`}>Fonts</a>
-- <a href={`https://github.com/uiowa/uids/tree/gh-pages/docs/v${version}/src/base.css`}>Base</a>
+- <a href={`https://github.com/uiowa/uids/tree/gh-pages/docs/v${version}/dist/css/base/fonts.css`}>Fonts</a>
+- <a href={`https://github.com/uiowa/uids/tree/gh-pages/docs/v${version}/dist/css/base/base.css`}>Base</a>
 
 ## Component CSS
 
-- <a href={`https://github.com/uiowa/uids/tree/gh-pages/docs/v${version}/src/components/logo/logo.css`}>Logo</a>
-- <a href={`https://github.com/uiowa/uids/tree/gh-pages/docs/v${version}/src/components/brand-bar/brand-bar.css`}>Brand Bar</a>
-
+- <a href={`https://github.com/uiowa/uids/tree/gh-pages/docs/v${version}/dist/css/components/logo/logo.css`}>Logo</a>
+- <a href={`https://github.com/uiowa/uids/tree/gh-pages/docs/v${version}/dist/css/components/brand-bar/brand-bar.css`}>Brand Bar</a>
 
 <Primary withSource="none" />
 
diff --git a/vite-css-component.js b/vite-css-component.js
index 1defb5fb31..ca3abd1b78 100644
--- a/vite-css-component.js
+++ b/vite-css-component.js
@@ -15,10 +15,11 @@ export function cssPerComponentPlugin() {
         const isBaseFile = files_to_compile.some(file => id.endsWith(file));
 
         if (isBaseFile) {
+          // Extract the base file name
+          const baseFileName = path.basename(id, '.scss');
+
           // Define the output CSS path for base files
-          let relativePath = path.relative(process.cwd(), id);
-          relativePath = relativePath.replace('/assets/scss/', '/');
-          const outputCssPath = relativePath.replace('.scss', '.css');
+          const outputCssPath = `dist/css/base/${baseFileName}.css`;
 
           // Compile SCSS to CSS
           const result = sass.renderSync({
@@ -39,9 +40,11 @@ export function cssPerComponentPlugin() {
           // Extract the component name and path
           const matches = id.match(/\/components\/([^/]+)\/([^/]+)\.scss/);
           if (matches) {
+            const componentName = matches[2];
+            const componentPath = matches[1];
+
             // Define the output CSS path based on the component structure
-            const relativePath = path.relative(process.cwd(), id);
-            const outputCssPath = relativePath.replace('.scss', '.css');
+            const outputCssPath = `dist/css/components/${componentPath}/${componentName}.css`;
 
             // Compile SCSS to CSS
             const result = sass.renderSync({
@@ -63,4 +66,3 @@ export function cssPerComponentPlugin() {
     },
   };
 }
-