diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index a000ab2e4..33710b846 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/assets/user.png b/frontend/src/assets/user.png
index 3cc5d2f11..259d6b0bc 100644
Binary files a/frontend/src/assets/user.png and b/frontend/src/assets/user.png differ
diff --git a/frontend/src/components/ContextMenu.tsx b/frontend/src/components/ContextMenu.tsx
new file mode 100644
index 000000000..9a3046e4a
--- /dev/null
+++ b/frontend/src/components/ContextMenu.tsx
@@ -0,0 +1,122 @@
+import { SyntheticEvent, useRef, useEffect } from 'react';
+
+export interface MenuOption {
+  icon?: string;
+  label: string;
+  onClick: (event: SyntheticEvent) => void;
+  variant?: 'primary' | 'danger';
+  iconClassName?: string;
+  iconWidth?: number;
+  iconHeight?: number;
+}
+
+interface ContextMenuProps {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  options: MenuOption[];
+  anchorRef: React.RefObject<HTMLElement>;
+  className?: string;
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  offset?: { x: number; y: number };
+}
+
+export default function ContextMenu({
+  isOpen,
+  setIsOpen,
+  options,
+  anchorRef,
+  className = '',
+  position = 'bottom-right',
+  offset = { x: 1, y: 5 },
+}: ContextMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const getPositionClasses = () => {
+    const positionMap = {
+      'bottom-right': 'translate-x-1 translate-y-5',
+      'bottom-left': '-translate-x-full translate-y-5',
+      'top-right': 'translate-x-1 -translate-y-full',
+      'top-left': '-translate-x-full -translate-y-full',
+    };
+    return positionMap[position];
+  };
+
+  if (!isOpen) return null;
+
+  const getMenuPosition = () => {
+    if (!anchorRef.current) return {};
+
+    const rect = anchorRef.current.getBoundingClientRect();
+    return {
+      top: `${rect.top + window.scrollY + offset.y}px`,
+    };
+  };
+
+  const getOptionStyles = (option: MenuOption, index: number) => {
+    if (option.variant === 'danger') {
+      return `
+          dark:text-red-2000 dark:hover:bg-charcoal-grey
+          text-rosso-corsa hover:bg-bright-gray
+      }`;
+    }
+
+    return `
+      dark:text-bright-gray dark:hover:bg-charcoal-grey
+        text-eerie-black hover:bg-bright-gray
+    }`;
+  };
+
+  return (
+    <div
+      ref={menuRef}
+      className={`absolute z-30 ${getPositionClasses()} ${className}`}
+      style={getMenuPosition()}
+    >
+      <div
+        className={`flex w-32 flex-col rounded-xl text-sm shadow-xl md:w-36 dark:bg-charleston-green-2 bg-lotion`}
+        style={{ minWidth: '144px' }}
+      >
+        {options.map((option, index) => (
+          <button
+            key={index}
+            onClick={(event: SyntheticEvent) => {
+              event.stopPropagation();
+              option.onClick(event);
+              setIsOpen(false);
+            }}
+            className={`${`
+      flex justify-start items-center gap-4 p-3
+      transition-colors duration-200 ease-in-out
+      ${index === 0 ? 'rounded-t-xl' : ''}
+      ${index === options.length - 1 ? 'rounded-b-xl' : ''}
+    `}${getOptionStyles(option, index)}`}
+          >
+            {option.icon && (
+              <img
+                width={option.iconWidth || 16}
+                height={option.iconHeight || 16}
+                src={option.icon}
+                alt={option.label}
+                className={`cursor-pointer hover:opacity-75 ${option.iconClassName}`}
+              />
+            )}
+            <span>{option.label}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/Input.tsx b/frontend/src/components/Input.tsx
index e703ff147..247446ef6 100644
--- a/frontend/src/components/Input.tsx
+++ b/frontend/src/components/Input.tsx
@@ -1,4 +1,5 @@
 import { InputProps } from './types';
+import { useRef } from 'react';
 
 const Input = ({
   id,
@@ -27,15 +28,19 @@ const Input = ({
     thin: 'border',
     thick: 'border-2',
   };
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
   return (
     <div className="relative">
       <input
-        className={`h-[42px] w-full rounded-full px-3 py-1 outline-none dark:bg-transparent dark:text-white ${className} ${colorStyles[colorVariant]} ${borderStyles[borderVariant]}`}
+        ref={inputRef}
+        className={`peer h-[42px] w-full rounded-full px-3 py-1 outline-none dark:bg-transparent dark:text-white placeholder-transparent ${className} ${colorStyles[colorVariant]} ${borderStyles[borderVariant]}`}
         type={type}
         id={id}
         name={name}
         autoFocus={isAutoFocused}
-        placeholder={placeholder}
+        placeholder={placeholder || label || ''}
         maxLength={maxLength}
         value={value}
         onChange={onChange}
@@ -45,17 +50,21 @@ const Input = ({
       >
         {children}
       </input>
-      {label && (
-        <div className="absolute -top-2 left-2">
-          <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver flex items-center">
-            {label}
-            {required && (
-              <span className="text-[#D30000] dark:text-[#D42626] ml-0.5">
-                *
-              </span>
-            )}
-          </span>
-        </div>
+      {(label || placeholder) && (
+        <label
+          htmlFor={id}
+          className={`absolute left-3 -top-2.5 bg-white px-2 text-xs transition-all
+            peer-placeholder-shown:top-2.5 peer-placeholder-shown:left-3 
+            peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-4000
+            peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs peer-focus:text-gray-4000
+            dark:bg-[#26272E] dark:text-silver dark:peer-placeholder-shown:text-gray-400
+            cursor-none pointer-events-none`}
+        >
+          {label || placeholder}
+          {required && (
+            <span className="text-[#D30000] dark:text-[#D42626] ml-0.5">*</span>
+          )}
+        </label>
       )}
     </div>
   );
diff --git a/frontend/src/components/ToggleSwitch.tsx b/frontend/src/components/ToggleSwitch.tsx
index 061d25632..8293ece28 100644
--- a/frontend/src/components/ToggleSwitch.tsx
+++ b/frontend/src/components/ToggleSwitch.tsx
@@ -6,9 +6,8 @@ type ToggleSwitchProps = {
   className?: string;
   label?: string;
   disabled?: boolean;
-  activeColor?: string;
-  inactiveColor?: string;
-  id?: string;
+  size?: 'small' | 'medium' | 'large';
+  labelPosition?: 'left' | 'right';
 };
 
 const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
@@ -17,17 +16,44 @@ const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
   className = '',
   label,
   disabled = false,
-  activeColor = 'bg-purple-30',
-  inactiveColor = 'bg-transparent',
-  id,
+  size = 'medium',
+  labelPosition = 'left',
 }) => {
+  // Size configurations
+  const sizeConfig = {
+    small: {
+      box: 'h-6 w-10',
+      toggle: 'h-4 w-4 left-1 top-1',
+      translate: 'translate-x-4',
+    },
+    medium: {
+      box: 'h-8 w-14',
+      toggle: 'h-6 w-6 left-1 top-1',
+      translate: 'translate-x-full',
+    },
+    large: {
+      box: 'h-10 w-16',
+      toggle: 'h-8 w-8 left-1 top-1',
+      translate: 'translate-x-full',
+    },
+  };
+
+  const { box, toggle, translate } = sizeConfig[size];
+
   return (
     <label
-      className={`cursor-pointer select-none justify-between flex flex-row items-center ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
-      htmlFor={id}
+      className={`cursor-pointer select-none flex flex-row items-center ${
+        labelPosition === 'right' ? 'flex-row-reverse' : ''
+      } ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
     >
       {label && (
-        <span className="mr-2 text-eerie-black dark:text-white">{label}</span>
+        <span
+          className={`text-eerie-black dark:text-white ${
+            labelPosition === 'left' ? 'mr-1' : 'ml-1'
+          }`}
+        >
+          {label}
+        </span>
       )}
       <div className="relative">
         <input
@@ -36,18 +62,15 @@ const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
           onChange={(e) => onChange(e.target.checked)}
           className="sr-only"
           disabled={disabled}
-          id={id}
         />
         <div
-          className={`box block h-8 w-14 rounded-full border border-purple-30 ${
-            checked
-              ? `${activeColor} dark:${activeColor}`
-              : `${inactiveColor} dark:${inactiveColor}`
+          className={`box block ${box} rounded-full ${
+            checked ? 'bg-apple-green' : 'bg-silver dark:bg-charcoal-grey'
           }`}
         ></div>
         <div
-          className={`absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full transition ${
-            checked ? 'translate-x-full bg-silver' : 'bg-purple-30'
+          className={`absolute ${toggle} flex items-center justify-center rounded-full transition bg-white ${
+            checked ? `${translate} bg-silver` : ''
           }`}
         ></div>
       </div>
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 29438f931..4b0a5d466 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -294,19 +294,18 @@ export default function Conversation() {
   return (
     <div className="flex flex-col gap-1 h-full justify-end ">
       {conversationId && queries.length > 0 && (
-        <div className="absolute top-4 right-20 z-10 ">
-          {' '}
-          <div className="flex mt-2 items-center gap-4 ">
+        <div className="absolute top-4 right-20">
+          <div className="flex mt-2 items-center gap-4">
             {isMobile && queries.length > 0 && (
               <button
                 title="Open New Chat"
                 onClick={() => {
                   newChat();
                 }}
-                className="hover:bg-bright-gray dark:hover:bg-[#28292E]"
+                className="hover:bg-bright-gray dark:hover:bg-[#28292E] rounded-full p-2"
               >
                 <img
-                  className=" h-5 w-5 filter dark:invert "
+                  className="h-5 w-5 filter dark:invert"
                   alt="NewChat"
                   src={newChatIcon}
                 />
@@ -318,22 +317,27 @@ export default function Conversation() {
               onClick={() => {
                 setShareModalState(true);
               }}
-              className=" hover:bg-bright-gray dark:hover:bg-[#28292E]"
+              className="hover:bg-bright-gray dark:hover:bg-[#28292E] rounded-full p-2"
             >
               <img
-                className=" h-5 w-5 filter dark:invert"
+                className="h-5 w-5 filter dark:invert"
                 alt="share"
                 src={ShareIcon}
               />
             </button>
           </div>
           {isShareModalOpen && (
-            <ShareConversationModal
-              close={() => {
-                setShareModalState(false);
-              }}
-              conversationId={conversationId}
-            />
+            <div className="fixed inset-0 z-50 flex items-center justify-center">
+              <div className="absolute inset-0 bg-black/50 dark:bg-gray-alpha" />
+              <div className="relative z-50 w-full max-w-md rounded-3xl">
+                <ShareConversationModal
+                  close={() => {
+                    setShareModalState(false);
+                  }}
+                  conversationId={conversationId}
+                />
+              </div>
+            </div>
           )}
         </div>
       )}
@@ -382,10 +386,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 +427,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 +436,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 d39cf4855..2ee66b4c6 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);
@@ -122,7 +127,7 @@ const ConversationBubble = forwardRef<
                   setIsEditClicked(true);
                   setEditInputBox(message);
                 }}
-                className={`flex-shrink-0 h-fit mt-3 p-2 cursor-pointer rounded-full hover:bg-[#35363B] flex items-center ${isQuestionHovered || isEditClicked ? 'visible' : 'invisible'}`}
+                className={`flex-shrink-0 h-fit mt-3 p-2 cursor-pointer rounded-full hover:bg-light-silver dark:hover:bg-[#35363B] flex items-center ${isQuestionHovered || isEditClicked ? 'visible' : 'invisible'}`}
               >
                 <img src={Edit} alt="Edit" className="cursor-pointer" />
               </button>
@@ -138,17 +143,17 @@ const ConversationBubble = forwardRef<
                 onChange={(e) => setEditInputBox(e.target.value)}
                 rows={5}
                 value={editInputBox}
-                className="w-full resize-none border-2 border-black dark:border-white rounded-3xl px-4 py-3 text-base leading-relaxed text-black dark:bg-raisin-black dark:text-white focus:outline-none focus:ring-2 focus:ring-[#CDB5FF]"
+                className="w-full resize-none border border-silver dark:border-philippine-grey rounded-3xl px-4 py-3 text-base leading-relaxed text-carbon dark:text-chinese-white dark:bg-raisin-black focus:outline-none"
               />
               <div className="flex items-center justify-end gap-2">
                 <button
-                  className="rounded-full bg-[#CDB5FF] hover:bg-[#E1D3FF] px-4 py-2 text-purple-30 text-sm font-medium"
+                  className="rounded-full bg-purple-30 hover:bg-purple-hover px-4 py-2 text-white text-sm font-medium transition-colors"
                   onClick={handleEditClick}
                 >
                   {t('conversation.edit.update')}
                 </button>
                 <button
-                  className="px-4 py-2 text-purple-30 text-sm hover:underline"
+                  className="px-4 py-2 text-purple-30 text-sm hover:text-rich-black hover:bg-light-gray-hover dark:hover:bg-charcoal transition-colors rounded-full"
                   onClick={() => setIsEditClicked(false)}
                 >
                   {t('conversation.edit.cancel')}
@@ -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">
+                    <div className="group relative rounded-[14px] overflow-hidden border border-light-silver dark:border-raisin-black">
+                      <div className="flex justify-between items-center px-2 py-1 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={match[1]}
-                        style={vscDarkPlus}
+                        language={language}
+                        style={isDarkTheme ? vscDarkPlus : oneLight}
+                        className="!mt-0"
+                        customStyle={{
+                          margin: 0,
+                          borderRadius: 0,
+                        }}
                       >
                         {String(children).replace(/\n$/, '')}
                       </SyntaxHighlighter>
-                      <div
-                        className={`absolute right-3 top-3 lg:invisible 
-                         ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''} `}
-                      >
-                        <CopyButton
-                          text={String(children).replace(/\n$/, '')}
-                        />
-                      </div>
                     </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/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx
index c29b9d717..4da096c20 100644
--- a/frontend/src/conversation/ConversationTile.tsx
+++ b/frontend/src/conversation/ConversationTile.tsx
@@ -18,6 +18,8 @@ import { selectConversationId } from '../preferences/preferenceSlice';
 import { ActiveState } from '../models/misc';
 import { ShareConversationModal } from '../modals/ShareConversationModal';
 import { useTranslation } from 'react-i18next';
+import ContextMenu from '../components/ContextMenu';
+import { MenuOption } from '../components/ContextMenu';
 
 interface ConversationProps {
   name: string;
@@ -128,6 +130,39 @@ export default function ConversationTile({
     }
   };
 
+  const menuOptions: MenuOption[] = [
+    {
+      icon: Share,
+      label: t('convTile.share'),
+      onClick: (event: SyntheticEvent) => {
+        event.stopPropagation();
+        setShareModalState(true);
+        setOpen(false);
+      },
+      variant: 'primary',
+      iconWidth: 14,
+      iconHeight: 14,
+    },
+    {
+      icon: Edit,
+      label: t('convTile.rename'),
+      onClick: handleEditConversation,
+      variant: 'primary',
+    },
+    {
+      icon: Trash,
+      label: t('convTile.delete'),
+      onClick: (event: SyntheticEvent) => {
+        event.stopPropagation();
+        setDeleteModalState('ACTIVE');
+        setOpen(false);
+      },
+      iconWidth: 18,
+      iconHeight: 18,
+      variant: 'danger',
+    },
+  ];
+
   return (
     <>
       <div
@@ -143,9 +178,9 @@ export default function ConversationTile({
           conversationId !== conversation.id &&
             selectConversation(conversation.id);
         }}
-        className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between pl-4 gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${
+        className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between pl-4 gap-4 rounded-3xl hover:bg-bright-gray dark:hover:bg-dark-charcoal ${
           conversationId === conversation.id || isOpen || isHovered
-            ? 'bg-gray-100 dark:bg-[#28292E]'
+            ? 'bg-bright-gray dark:bg-dark-charcoal'
             : ''
         }`}
       >
@@ -160,13 +195,13 @@ export default function ConversationTile({
               onKeyDown={handleRenameKeyDown}
             />
           ) : (
-            <p className="my-auto overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-normal leading-6 text-eerie-black dark:text-white">
+            <p className="my-auto overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-normal leading-6 text-eerie-black dark:text-bright-gray">
               {conversationName}
             </p>
           )}
         </div>
         {(conversationId === conversation.id || isHovered || isOpen) && (
-          <div className="flex text-white dark:text-[#949494]" ref={menuRef}>
+          <div className="flex text-white dark:text-sonic-silver" ref={menuRef}>
             {isEdit ? (
               <div className="flex gap-1">
                 <img
@@ -204,64 +239,14 @@ export default function ConversationTile({
                 <img src={threeDots} width={8} />
               </button>
             )}
-            {isOpen && (
-              <div
-                className="flex-start absolute z-30 flex w-32 translate-x-1 translate-y-5 flex-col rounded-xl bg-stone-100 text-sm text-black shadow-xl dark:bg-chinese-black dark:text-chinese-silver md:w-36"
-                style={{
-                  top: `${(tileRef.current?.getBoundingClientRect().top ?? 0) + window.scrollY + 8}px`,
-                }}
-              >
-                <button
-                  onClick={(event: SyntheticEvent) => {
-                    event.stopPropagation();
-                    setShareModalState(true);
-                    setOpen(false);
-                  }}
-                  className="flex-start flex items-center gap-4 rounded-t-xl p-3 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
-                >
-                  <img
-                    src={Share}
-                    alt="Share"
-                    width={14}
-                    height={14}
-                    className="cursor-pointer hover:opacity-50"
-                    id={`img-${conversation.id}`}
-                  />
-                  <span>{t('convTile.share')}</span>
-                </button>
-                <button
-                  onClick={handleEditConversation}
-                  className="flex-start flex items-center gap-4 p-3 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
-                >
-                  <img
-                    src={Edit}
-                    alt="Edit"
-                    width={16}
-                    height={16}
-                    className="cursor-pointer hover:opacity-50"
-                    id={`img-${conversation.id}`}
-                  />
-                  <span>{t('convTile.rename')}</span>
-                </button>
-                <button
-                  onClick={(event: SyntheticEvent) => {
-                    event.stopPropagation();
-                    setDeleteModalState('ACTIVE');
-                    setOpen(false);
-                  }}
-                  className="flex-start flex items-center gap-3 rounded-b-xl p-2 text-red-700 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
-                >
-                  <img
-                    src={Trash}
-                    alt="Delete"
-                    width={24}
-                    height={24}
-                    className="cursor-pointer hover:opacity-50"
-                  />
-                  <span>{t('convTile.delete')}</span>
-                </button>
-              </div>
-            )}
+            <ContextMenu
+              isOpen={isOpen}
+              setIsOpen={setOpen}
+              options={menuOptions}
+              anchorRef={tileRef}
+              position="bottom-right"
+              offset={{ x: 1, y: 8 }}
+            />
           </div>
         )}
       </div>
diff --git a/frontend/src/modals/ShareConversationModal.tsx b/frontend/src/modals/ShareConversationModal.tsx
index 44156761c..d7ad40510 100644
--- a/frontend/src/modals/ShareConversationModal.tsx
+++ b/frontend/src/modals/ShareConversationModal.tsx
@@ -8,6 +8,7 @@ import {
   selectPrompt,
 } from '../preferences/preferenceSlice';
 import Dropdown from '../components/Dropdown';
+import ToggleSwitch from '../components/ToggleSwitch';
 import { Doc } from '../models/misc';
 import Spinner from '../assets/spinner.svg';
 const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
@@ -101,38 +102,21 @@ export const ShareConversationModal = ({
   return (
     <WrapperModal close={close}>
       <div className="flex flex-col gap-2">
-        <h2 className="text-xl font-medium text-eerie-black dark:text-white">
+        <h2 className="text-xl font-medium text-eerie-black dark:text-chinese-white">
           {t('modals.shareConv.label')}
         </h2>
-        <p className="text-sm text-eerie-black dark:text-white">
+        <p className="text-sm text-eerie-black dark:text-silver/60">
           {t('modals.shareConv.note')}
         </p>
         <div className="flex items-center justify-between">
           <span className="text-lg text-eerie-black dark:text-white">
             {t('modals.shareConv.option')}
           </span>
-          <label className="cursor-pointer select-none items-center">
-            <div className="relative">
-              <input
-                type="checkbox"
-                checked={allowPrompt}
-                onChange={togglePromptPermission}
-                className="sr-only"
-              />
-              <div
-                className={`box block h-8 w-14 rounded-full border border-purple-30 ${
-                  allowPrompt
-                    ? 'bg-purple-30 dark:bg-purple-30'
-                    : 'dark:bg-transparent'
-                }`}
-              ></div>
-              <div
-                className={`absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full  transition ${
-                  allowPrompt ? 'translate-x-full bg-silver' : 'bg-purple-30'
-                }`}
-              ></div>
-            </div>
-          </label>
+          <ToggleSwitch
+            checked={allowPrompt}
+            onChange={togglePromptPermission}
+            size="medium"
+          />
         </div>
         {allowPrompt && (
           <div className="my-4">
@@ -149,19 +133,19 @@ export const ShareConversationModal = ({
           </div>
         )}
         <div className="flex items-baseline justify-between gap-2">
-          <span className="no-scrollbar w-full overflow-x-auto whitespace-nowrap rounded-full border-2 py-3 px-4 text-eerie-black dark:text-white">
+          <span className="no-scrollbar w-full overflow-x-auto whitespace-nowrap rounded-full border-2 border-silver dark:border-silver/40 py-3 px-4 text-eerie-black dark:text-white">
             {`${domain}/share/${identifier ?? '....'}`}
           </span>
           {status === 'fetched' ? (
             <button
-              className="my-1 h-10 w-28 rounded-full border border-solid  bg-purple-30 p-2 text-sm text-white hover:bg-[#6F3FD1]"
+              className="my-1 h-10 w-28 rounded-full border border-solid  bg-purple-30 p-2 text-sm text-white hover:bg-purple-hover"
               onClick={() => handleCopyKey(`${domain}/share/${identifier}`)}
             >
               {isCopied ? t('modals.saveKey.copied') : t('modals.saveKey.copy')}
             </button>
           ) : (
             <button
-              className="my-1 flex h-10 w-28 items-center justify-evenly rounded-full  border border-solid bg-purple-30 p-2 text-center text-sm font-normal text-white hover:bg-[#6F3FD1]"
+              className="my-1 flex h-10 w-28 items-center justify-evenly rounded-full bg-purple-30 p-2 text-center text-sm font-normal text-white hover:bg-purple-hover"
               onClick={() => {
                 shareCoversationPublicly(allowPrompt);
               }}
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 938eaceee..8ff9518a0 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,48 @@ 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',
+        'charleston-green-2' : '#26272e',
+        'grey': '#7e7e7e',
+        'lotion': '#fbfbfb',
+        'platinum': '#e6e6e6',
+        'eerie-black-2': '#191919',
+        'light-silver': '#D9D9D9',
+        'carbon': '#2E2E2E',
+        'onyx':'#35363B',
+
+        // New colors for edit buttons
+        'purple-hover': '#6C4AB0', //royal purple
+        'rich-black': '#0F1419', // chinese-black-2
+        'light-gray-hover': '#D9DCDE', //gainsboro
+        'charcoal': '#35383C',//onyx 2
+        'philippine-grey': '#929292',
+        'charcoal-grey':'#53545D',
+        'rosso-corsa': '#D30000',
+        'apple-green': '#4CAF50',
       },
     },
   },