diff --git a/code/src/ui/src/components/ColorSelect.css b/code/src/ui/src/components/ColorSelect.css
index 00fbf514..9032a486 100644
--- a/code/src/ui/src/components/ColorSelect.css
+++ b/code/src/ui/src/components/ColorSelect.css
@@ -1,4 +1,8 @@
 div.MuiPopover-paper > ul.MuiMenu-list > div.shade-row {
     display: flex;
     overflow: hidden;
-}
\ No newline at end of file
+}
+.baseLabel{
+    font-size: var(--caption-boldFontSize);
+    font-weight: var(--caption-boldFontWeight);
+}
diff --git a/code/src/ui/src/components/ColorSelect.tsx b/code/src/ui/src/components/ColorSelect.tsx
index d171cb1e..6c627fff 100644
--- a/code/src/ui/src/components/ColorSelect.tsx
+++ b/code/src/ui/src/components/ColorSelect.tsx
@@ -8,8 +8,12 @@ import { Event, EventType, PropertyColorShade, Shade } from '@finos/a11y-theme-b
 import { ColorShade } from '../components/ColorShade';
 import './ColorSelect.css';
 
+// baseColorHex is an optional property that allows the caller to specify a set of hex color values
+//  which this component will label as "base" if they appear in the selectable shades list.  A "base" color is 
+//  one of the actual colors that the user manually added to the color palette and not a calculated shade.
 interface Props {
     value: PropertyColorShade;
+    baseColorHex?: Set<string>;
     label?: string;
     defaultValue?: string;
 }
@@ -26,13 +30,14 @@ class GridShade {
     }
   }
 
-export const ColorSelect: React.FC<Props> = ({value, label, defaultValue}) => {
+export const ColorSelect: React.FC<Props> = ({value,baseColorHex, label, defaultValue}) => {
 
     const [_selectedValue, _setSelectedValue] = useState<string>(defaultValue || "");
     const [_selectableValues, _setSelectableValues] = useState<GridShade[]>([]);
     const [_selectableValuesGrid, _setSelectableValuesGrid] = useState<Shade[][]>();
     const [_longestRow, _setLongestRow] = useState<number>(0);
     const [_disabled, _setDisabled] = useState<boolean>(false);
+    const [_shadeLabel, _setShadeLabel] = useState<string>("");
 
     useEffect(() => {
         if (value) {
@@ -120,6 +125,7 @@ export const ColorSelect: React.FC<Props> = ({value, label, defaultValue}) => {
             const newSelectedValue = _selectableValues[indexOfSelectedItem].shade;
             value.setValue(newSelectedValue);
             _setSelectedValue(selectedValue);
+            _setShadeLabel(_getShadeLabel(newSelectedValue));
             console.log(`Color changed by UI to ${value}`);
         }
     };
@@ -140,6 +146,10 @@ export const ColorSelect: React.FC<Props> = ({value, label, defaultValue}) => {
         return _selectableValues[parseInt(index)].shade;
     }
 
+    const _getShadeLabel = (shade: Shade): string => {
+        const label =  `${shade.getLabel()}`;
+        return label;
+    } 
     // this code will turn the unordered list (<ul />) internally used by
     //  Mui Select into a grid.  Each menu item in the list will be positioned
     //  in the grid based on where that shade was in the selectableValuesGrid
@@ -179,7 +189,11 @@ export const ColorSelect: React.FC<Props> = ({value, label, defaultValue}) => {
                     {_selectableValues && _selectableValues.map((gridShade, i) => {
                         return(
                             <MenuItem key={`shade${i}`} value={`${gridShade.shade.hex};${i}`} sx={{gridArea: `${gridShade.row+1}/${gridShade.column+1}`}}>
-                                <ColorShade shade={gridShade.shade} />
+                                <div>
+                                <ColorShade label={_getShadeLabel(gridShade.shade)} shade={gridShade.shade} />
+                                {baseColorHex?.has(gridShade.shade.hex.toLowerCase())&&<div className=" text-center baseLabel " id="color-id" style={{}}>Base</div>}
+                                {!baseColorHex?.has(gridShade.shade.hex.toLowerCase())&& <div style={{height:"25px"}}></div>}
+                                </div>
                             </MenuItem>
                         );
                     })}
@@ -194,4 +208,4 @@ export const ColorSelect: React.FC<Props> = ({value, label, defaultValue}) => {
     );
 
 }
-}
\ No newline at end of file
+}
diff --git a/code/src/ui/src/components/ColorShade.css b/code/src/ui/src/components/ColorShade.css
index bc66a5e8..60d68748 100644
--- a/code/src/ui/src/components/ColorShade.css
+++ b/code/src/ui/src/components/ColorShade.css
@@ -21,7 +21,7 @@
     margin: 8px auto;
 }
 li .Hex {
-  margin-right: 8px;
+  margin: 2px;
 }
 .color-block .Hex {
     margin: 8px auto !important;
diff --git a/code/src/ui/src/components/ColorShadeCss.tsx b/code/src/ui/src/components/ColorShadeCss.tsx
index 988ee3ab..815f059e 100644
--- a/code/src/ui/src/components/ColorShadeCss.tsx
+++ b/code/src/ui/src/components/ColorShadeCss.tsx
@@ -59,10 +59,11 @@ interface Props {
     label?: string;
     showId?: boolean;
     showDetails?: boolean;
+    isBaseColor?:boolean;
 
 }
 
-export const ColorShadeCss: React.FC<Props> = ({className, name, id, lm, label, showId, showDetails}) => {
+export const ColorShadeCss: React.FC<Props> = ({className, name, id, lm, label, showId, showDetails,isBaseColor}) => {
 
     const [_shade, _setShade] = useState<Shade>();
     let base = name+"-"+id;
@@ -102,10 +103,13 @@ export const ColorShadeCss: React.FC<Props> = ({className, name, id, lm, label,
     }, []);
 
     return (
-        <div className={className ?? ""}>
+        <div className={className ?? ""} style={isBaseColor ? {paddingTop:"2px",paddingLeft:"4px",borderRadius:"8px",backgroundColor:"var(--primary-quarter"} : {}}>
             {label && <div className="caption text-center">{label}</div>}
             {showId && <div className="subtitle1 text-center">{id}</div>}
             <div className="Hex" style={style}>Aa</div>
+            {isBaseColor&&<div className="inserted-item text-center " id="color-id" style={{fontSize:"var(--caption-boldFontSize)",fontWeight:"var(--caption-boldFontWeight)"}}>Base</div>}
+            {/* just to fix uppermargin */}
+            {!isBaseColor&&<div style={{height:"25px"}}></div>}
             {showDetails && <div className="swatch-details active">
                 Color: <span>{backgroundValue}</span>
             </div>}
diff --git a/code/src/ui/src/components/CreateColorTheme.tsx b/code/src/ui/src/components/CreateColorTheme.tsx
index ac745695..425228df 100644
--- a/code/src/ui/src/components/CreateColorTheme.tsx
+++ b/code/src/ui/src/components/CreateColorTheme.tsx
@@ -4,7 +4,7 @@
  */
 import React, { useEffect, useRef, useState } from 'react';
 import { Button, Grid } from '@mui/material';
-import { ColorTheme, ColorThemes, Event, EventType, Shade } from '@finos/a11y-theme-builder-sdk';
+import { ColorPalette, ColorTheme, ColorThemes, Event, EventType, Shade } from '@finos/a11y-theme-builder-sdk';
 import { ColorSelect } from './ColorSelect';
 import { ColorPairSelect } from './ColorPairSelect';
 import { ColorGradient } from './ColorGradient';
@@ -18,10 +18,11 @@ import { GeneratedCodeSection } from '../pages/content/GeneratedCodeSection'
 
 interface Props {
     atom: ColorThemes;
+    colorPalette: ColorPalette;
     handleDefaultThemeInitialized: (newDefaultThemeName: string) => void;
 }
 
-export const CreateColorTheme: React.FC<Props> = ({atom, handleDefaultThemeInitialized}) => {
+export const CreateColorTheme: React.FC<Props> = ({atom,colorPalette, handleDefaultThemeInitialized}) => {
 
     const defaultIconShade = Shade.fromHex("#ffffff");
 
@@ -29,6 +30,7 @@ export const CreateColorTheme: React.FC<Props> = ({atom, handleDefaultThemeIniti
     const [_themeInitialized, _setThemeInitialized] = useState<boolean>(false);
     const [_iconColor, _setIconColor] = useState<Shade>(defaultIconShade);
     const [_openConfirmation, _setOpenConfirmation] = useState<boolean>(false);
+    const [_baseColorsHex, _setBaseColorsHex] = useState<Set<string>>();
 
     const colorIconRef = useRef<HTMLDivElement>(null);
 
@@ -99,7 +101,17 @@ export const CreateColorTheme: React.FC<Props> = ({atom, handleDefaultThemeIniti
             handleDefaultThemeInitialized(_colorTheme?.name || "");
         }
     }
-
+    useEffect(() => {
+      const baseColorsHex= new Set<string>;
+      colorPalette.getColors().map((color)=>{
+        const hexValue = color.hex?.getValue();
+        if (hexValue) {
+            baseColorsHex.add(hexValue);
+        }
+      });
+      _setBaseColorsHex(baseColorsHex);
+    }, [colorPalette])
+    
     if (_colorTheme) {
     return (
         <div className="content theme-page active" id="buildThemes">
@@ -120,9 +132,9 @@ export const CreateColorTheme: React.FC<Props> = ({atom, handleDefaultThemeIniti
                               <div className="formRow">
                                   <div className="subtitle1">Theme Colors</div>
                                   <div className="form-columns top16">
-                                      <ColorSelect value={_colorTheme.primary} label="Primary"></ColorSelect>
-                                      <ColorSelect value={_colorTheme.secondary} label="Secondary"></ColorSelect>
-                                      <ColorSelect value={_colorTheme.tertiary} label="Tertiary"></ColorSelect>
+                                      <ColorSelect value={_colorTheme.primary} baseColorHex={_baseColorsHex} label="Primary"></ColorSelect>
+                                      <ColorSelect value={_colorTheme.secondary} baseColorHex={_baseColorsHex} label="Secondary"></ColorSelect>
+                                      <ColorSelect value={_colorTheme.tertiary} baseColorHex={_baseColorsHex} label="Tertiary"></ColorSelect>
                                   </div>
                               </div>
                               <div className="formRow">
diff --git a/code/src/ui/src/components/DisplayColorPalette.tsx b/code/src/ui/src/components/DisplayColorPalette.tsx
index aa93ea73..f90cbda2 100644
--- a/code/src/ui/src/components/DisplayColorPalette.tsx
+++ b/code/src/ui/src/components/DisplayColorPalette.tsx
@@ -41,6 +41,12 @@ export const DisplayColorPalette: React.FC<Props> = ({ colorPalette, colors, lig
                                 <div className="subtitle1">{color.name}</div>
                                 <div className="colorRow">
                                     {color.light.shades.map((shade, i) => {
+                                         if(shade.hex.toLowerCase()==color.hex.getValue()){
+                                            console.log("found base color",color.name);
+                                            return(
+                                                <ColorShadeCss className="color-block" key={"ColorShade" + i} name={color.name} id={shade.id} lm={true} showDetails={_showDetails} showId isBaseColor={true}/> 
+                                            )
+                                        }
                                         return (
                                             <ColorShadeCss className="color-block" key={"ColorShade" + i} name={color.name} id={shade.id} lm={true} showDetails={_showDetails} showId/>
                                         );
@@ -58,6 +64,11 @@ export const DisplayColorPalette: React.FC<Props> = ({ colorPalette, colors, lig
                                 <div className="subtitle1">{color.name}</div>
                                 <div className="colorRow">
                                     {color.dark.shades.map((shade, i) => {
+                                        if(shade.hex.toLowerCase()==color.hex.getValue()){
+                                            console.log("found base color");
+                                            return(
+                                                <ColorShadeCss className="color-block" key={"ColorShade" + i} name={color.name} id={shade.id} lm={true} showDetails={_showDetails} showId isBaseColor={true}/> 
+                                            )}
                                         return (
                                             <ColorShadeCss className="color-block" key={"ColorShade" + i} name={color.name} id={shade.id} lm={false} showDetails={_showDetails} showId/>
                                         );
diff --git a/code/src/ui/src/pages/atoms/ColorThemeAtom.tsx b/code/src/ui/src/pages/atoms/ColorThemeAtom.tsx
index 06b0747d..202b249c 100644
--- a/code/src/ui/src/pages/atoms/ColorThemeAtom.tsx
+++ b/code/src/ui/src/pages/atoms/ColorThemeAtom.tsx
@@ -3,16 +3,17 @@
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */
 import React, { useEffect, useState } from 'react';
-import { ColorThemes } from '@finos/a11y-theme-builder-sdk';
+import { ColorThemes, ColorPalette} from '@finos/a11y-theme-builder-sdk';
 import { CreateColorTheme } from '../../components/CreateColorTheme';
 import { DisplayColorTheme } from '../../components/DisplayColorTheme';
 
 interface Props {
     atom: ColorThemes;
+    colorPalette:ColorPalette;
     defaultColor?: string;
 }
 
-export const ColorThemeAtom: React.FC<Props> = ({ atom }) => {
+export const ColorThemeAtom: React.FC<Props> = ({ atom, colorPalette}) => {
 
     const [_themeInitialized, _setThemeInitialized] = useState<boolean>(false);
 
@@ -30,7 +31,7 @@ export const ColorThemeAtom: React.FC<Props> = ({ atom }) => {
         );
     }
     return (
-        <CreateColorTheme atom={atom} handleDefaultThemeInitialized={handleDefaultThemeInitialized} />
+        <CreateColorTheme atom={atom} colorPalette={colorPalette} handleDefaultThemeInitialized={handleDefaultThemeInitialized} />
     );
 }
 
diff --git a/code/src/ui/src/pages/content/atoms/AtomContent.tsx b/code/src/ui/src/pages/content/atoms/AtomContent.tsx
index 1d0e8a52..9625e0bb 100644
--- a/code/src/ui/src/pages/content/atoms/AtomContent.tsx
+++ b/code/src/ui/src/pages/content/atoms/AtomContent.tsx
@@ -239,7 +239,7 @@ export const AtomContent: React.FC<Props> = ({ user, designSystem }) => {
                     )}
                     {showAtom === atoms.colorThemes.value && (
                         <ErrorHandler>
-                            <ColorThemeAtom atom={designSystem.atoms.colorThemes}></ColorThemeAtom>
+                            <ColorThemeAtom atom={designSystem.atoms.colorThemes} colorPalette={designSystem.atoms.colorPalette}></ColorThemeAtom>
                         </ErrorHandler>
                     )}
                     {showAtom === atoms.subcolorThemes.value && (