diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index a000ab2e..33710b84 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -37,12 +37,14 @@ export default function Hero({
               <Fragment key={key}>
                 <button
                   onClick={() => handleQuestion({ question: demo.query })}
-                  className="w-full rounded-full border border-silver px-6 py-4 text-left hover:border-gray-4000 dark:hover:border-gray-3000 xl:min-w-[24vw] bg-white dark:bg-raisin-black focus:outline-none"
+                  className={`w-full rounded-full border bg-transparent px-6 py-4 text-left xl:min-w-[24vw] focus:outline-none
+                    border-dark-gray text-just-black hover:bg-cultured
+                    dark:border-dim-gray dark:text-chinese-white dark:hover:bg-charleston-green`}
                 >
                   <p className="mb-1 font-semibold text-black-1000 dark:text-bright-gray">
                     {demo.header}
                   </p>
-                  <span className="text-gray-700 dark:text-gray-300">
+                  <span className="text-gray-700 dark:text-gray-300 opacity-60">
                     {demo.query}
                   </span>
                 </button>
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 29438f93..a88e1415 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -382,10 +382,10 @@ export default function Conversation() {
         )}
       </div>
 
-      <div className="flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 z-3 sm:w-[62%] h-auto py-1">
+      <div className="flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 z-3 sm:w-[58%] xl:max-w-[52vw] h-auto py-1">
         <div
           {...getRootProps()}
-          className="flex w-full items-center rounded-[40px] border border-silver bg-white dark:bg-raisin-black"
+          className="flex w-full items-center rounded-[40px] border dark:border-grey border-dark-gray bg-lotion dark:bg-raisin-black"
         >
           <label htmlFor="file-upload" className="sr-only">
             {t('modals.uploadDoc.label')}
@@ -423,7 +423,7 @@ export default function Conversation() {
                 className="flex items-center justify-center"
               >
                 <img
-                  className="ml-[4px] h-6 w-6 text-white"
+                  className="ml-[4px] h-6 w-6 text-white filter dark:invert-[0.45] invert-[0.35]"
                   src={isDarkTheme ? SendDark : Send}
                   alt={t('send')}
                 />
@@ -432,7 +432,7 @@ export default function Conversation() {
           )}
         </div>
 
-        <p className="text-gray-595959 hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs dark:text-bright-gray md:inline md:w-full">
+        <p className="text-gray-4000 hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs dark:text-sonic-silver md:inline md:w-full">
           {t('tagline')}
         </p>
       </div>
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index d39cf485..813739f2 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -5,10 +5,14 @@ import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import { useSelector } from 'react-redux';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import {
+  vscDarkPlus,
+  oneLight,
+} from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import rehypeKatex from 'rehype-katex';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
+import { useDarkTheme } from '../hooks';
 
 import DocsGPT3 from '../assets/cute_docsgpt3.svg';
 import ChevronDown from '../assets/chevron-down.svg';
@@ -69,6 +73,7 @@ const ConversationBubble = forwardRef<
   ref,
 ) {
   const { t } = useTranslation();
+  const [isDarkTheme] = useDarkTheme();
   // const bubbleRef = useRef<HTMLDivElement | null>(null);
   const chunks = useSelector(selectChunks);
   const selectedDocs = useSelector(selectSelectedDocs);
@@ -333,7 +338,7 @@ const ConversationBubble = forwardRef<
             </p>
           </div>
           <div
-            className={`fade-in-bubble ml-2 mr-5 flex max-w-[90vw] rounded-[28px] bg-gray-1000 py-[14px] px-7 dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
+            className={`fade-in-bubble ml-2 mr-5 flex max-w-[90vw] rounded-[28px] bg-gray-1000 py-[18px] px-7 dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
               type === 'ERROR'
                 ? 'relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000  dark:border-red-2000 dark:text-white'
                 : 'flex-col rounded-3xl'
@@ -347,25 +352,31 @@ const ConversationBubble = forwardRef<
                 code(props) {
                   const { children, className, node, ref, ...rest } = props;
                   const match = /language-(\w+)/.exec(className || '');
+                  const language = match ? match[1] : '';
 
                   return match ? (
-                    <div className="group relative">
-                      <SyntaxHighlighter
-                        {...rest}
-                        PreTag="div"
-                        language={match[1]}
-                        style={vscDarkPlus}
-                      >
-                        {String(children).replace(/\n$/, '')}
-                      </SyntaxHighlighter>
-                      <div
-                        className={`absolute right-3 top-3 lg:invisible 
-                         ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''} `}
-                      >
+                    <div className="group relative rounded-lg overflow-hidden border border-light-silver dark:border-raisin-black">
+                      <div className="flex justify-between items-center px-3 py-2 bg-platinum dark:bg-eerie-black-2">
+                        <span className="text-xs font-medium text-just-black dark:text-chinese-white">
+                          {language}
+                        </span>
                         <CopyButton
                           text={String(children).replace(/\n$/, '')}
                         />
                       </div>
+                      <SyntaxHighlighter
+                        {...rest}
+                        PreTag="div"
+                        language={language}
+                        style={isDarkTheme ? vscDarkPlus : oneLight}
+                        className="!mt-0"
+                        customStyle={{
+                          margin: 0,
+                          borderRadius: 0,
+                        }}
+                      >
+                        {String(children).replace(/\n$/, '')}
+                      </SyntaxHighlighter>
                     </div>
                   ) : (
                     <code className="whitespace-pre-line rounded-[6px] bg-gray-200 px-[8px] py-[4px] text-xs font-normal dark:bg-independence dark:text-bright-gray">
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 938eacee..d8546373 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -11,7 +11,7 @@ module.exports = {
       colors: {
         'eerie-black': '#212121',
         'black-1000': '#343541',
-        jet: '#343541',
+        'jet': '#343541',
         'gray-alpha': 'rgba(0,0,0, .64)',
         'gray-1000': '#F6F6F6',
         'gray-2000': 'rgba(0, 0, 0, 0.5)',
@@ -32,23 +32,35 @@ module.exports = {
         'green-2000': '#0FFF50',
         'light-gray': '#edeef0',
         'white-3000': '#ffffff',
-        'just-black':"#00000",
-        'purple-taupe':'#464152',
+        'just-black': '#00000',
+        'purple-taupe': '#464152',
         'dove-gray': '#6c6c6c',
         'silver': '#c4c4c4',
         'rainy-gray': '#a4a4a4',
-        'raisin-black':'#222327',
-        'chinese-black':'#161616',
-        'chinese-silver':'#CDCDCD',
-        'dark-charcoal':'#2F3036',
-        'bright-gray':'#ECECF1',
-        'outer-space':'#444654',
-        'gun-metal':'#2E303E',
-        'sonic-silver':'#747474',
-        'soap':'#D8CCF1',
-        'independence':'#54546D',
-        'philippine-yellow':'#FFC700',
-        'bright-gray':'#EBEBEB'
+        'raisin-black': '#222327',
+        'chinese-black': '#161616',
+        'chinese-silver': '#CDCDCD',
+        'dark-charcoal': '#2F3036',
+        'bright-gray': '#ECECF1',
+        'outer-space': '#444654',
+        'gun-metal': '#2E303E',
+        'sonic-silver': '#747474',
+        'soap': '#D8CCF1',
+        'independence': '#54546D',
+        'philippine-yellow': '#FFC700',
+        'bright-gray': '#EBEBEB',
+        
+        // New semantically named colors for UI elements
+        'chinese-white': '#e0e0e0',
+        'dark-gray': '#aaaaaa',
+        'dim-gray': '#6A6A6A',
+        'cultured': '#f4f4f4',
+        'charleston-green': '#2b2c31',
+        'grey':'#7e7e7e',
+        'lotion':'#fbfbfb',
+        'platinum':'#e6e6e6',
+        'eerie-black-2': '#191919',
+        'light-silver': '#D9D9D9',
       },
     },
   },