diff --git a/docs/pages/Developing/API-docs.md b/docs/pages/Developing/API-docs.md
index 258387428..eabd29c0a 100644
--- a/docs/pages/Developing/API-docs.md
+++ b/docs/pages/Developing/API-docs.md
@@ -73,7 +73,7 @@ HTML example:
     <input type="text" name="user" value="local" hidden>
     <input type="text" name="name" placeholder="Name:">
     
-    <button type="submit" class="py-2 px-4 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+    <button type="submit" class="py-2 px-4 text-white bg-purple-30 rounded-md hover:bg-purple-30 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-30">
         Upload
     </button>
 </form>
diff --git a/extensions/chrome/popup.html b/extensions/chrome/popup.html
index 432d31ae7..98921086c 100644
--- a/extensions/chrome/popup.html
+++ b/extensions/chrome/popup.html
@@ -20,7 +20,7 @@ <h1 class="text-lg font-medium">DocsGPT</h1>
               <div class="bg-indigo-500 text-white p-2 rounded-lg mb-2 self-start">
                 <p class="text-sm">Hello, ask me anything about this library. Im here to help</p>
               </div>
-              <div class="bg-blue-500 text-white p-2 rounded-lg mb-2 self-end">
+              <div class="bg-purple-30 text-white p-2 rounded-lg mb-2 self-end">
                 <p class="text-sm">How to create API key for Api gateway?</p>
               </div>
               <div class="bg-indigo-500 text-white p-2 rounded-lg mb-2 self-start">
@@ -46,7 +46,7 @@ <h1 class="text-lg font-medium">DocsGPT</h1>
         <div class=" flex mt-4 mb-2">
         <form id="message-form">
           <input id="message-input" class="bg-white p-2 rounded-lg ml-2 w-[26rem]" type="text" placeholder="Type your message here...">
-          <button class="bg-blue-500 text-white p-2 rounded-lg ml-2 mr-2 ml-2" type="submit">Send</button>
+          <button class="bg-purple-30 text-white p-2 rounded-lg ml-2 mr-2 ml-2" type="submit">Send</button>
         </form>
         </div>
 
diff --git a/extensions/chrome/popup.js b/extensions/chrome/popup.js
index 20f7bce38..70b7415d2 100644
--- a/extensions/chrome/popup.js
+++ b/extensions/chrome/popup.js
@@ -3,7 +3,7 @@ document.getElementById("message-form").addEventListener("submit", function(even
     var message = document.getElementById("message-input").value;
     chrome.runtime.sendMessage({msg: "sendMessage", message: message}, function(response) {
       console.log(response.response);
-      msg_html = '<div class="bg-blue-500 text-white p-2 rounded-lg mb-2 self-end"><p class="text-sm">'
+      msg_html = '<div class="bg-purple-30 text-white p-2 rounded-lg mb-2 self-end"><p class="text-sm">'
       msg_html += message
       msg_html += '</p></div>'
       document.getElementById("messages").innerHTML += msg_html;
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 2793a9bf6..37349660d 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -42,7 +42,7 @@ const ConversationBubble = forwardRef<
     bubble = (
       <div ref={ref} className={`flex flex-row-reverse self-end ${className}`}>
         <Avatar className="mt-2 text-2xl" avatar="🧑‍💻"></Avatar>
-        <div className="mr-2 ml-10 flex items-center rounded-3xl bg-blue-1000 p-3.5 text-white">
+        <div className="mr-2 ml-10 flex items-center rounded-3xl bg-purple-30 p-3.5 text-white">
           <ReactMarkdown className="whitespace-pre-wrap break-all">
             {message}
           </ReactMarkdown>
@@ -148,7 +148,7 @@ const ConversationBubble = forwardRef<
             <Like
               className={`cursor-pointer ${
                 feedback === 'LIKE'
-                  ? 'fill-blue-1000 stroke-blue-1000'
+                  ? 'fill-purple-30 stroke-purple-30'
                   : 'fill-none  stroke-gray-4000 hover:fill-gray-4000'
               }`}
               onClick={() => handleFeedback?.('LIKE')}
@@ -173,7 +173,7 @@ const ConversationBubble = forwardRef<
         </div>
 
         {sources && openSource !== null && sources[openSource] && (
-          <div className="ml-8 mt-2 w-3/4 rounded-xl bg-blue-200 p-2">
+          <div className="ml-8 mt-2 w-3/4 rounded-xl bg-purple-30 p-2">
             <p className="w-3/4 truncate text-xs text-gray-500">
               Source: {sources[openSource].title}
             </p>
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index 0edc971ba..755a9ad43 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -41,9 +41,9 @@ export default function Upload({
         <p className="mt-10 text-2xl">{progress?.percentage || 0}%</p>
 
         <div className="mb-10 w-[50%]">
-          <div className="h-1 w-[100%] bg-blue-4000"></div>
+          <div className="h-1 w-[100%] bg-purple-30"></div>
           <div
-            className={`relative bottom-1 h-1 bg-blue-5000 transition-all`}
+            className={`relative bottom-1 h-1 bg-purple-30 transition-all`}
             style={{ width: `${progress?.percentage || 0}%` }}
           ></div>
         </div>
@@ -55,7 +55,7 @@ export default function Upload({
             setProgress(undefined);
             setModalState('INACTIVE');
           }}
-          className={`rounded-3xl bg-blue-3000 px-4 py-2 text-sm font-medium text-white ${
+          className={`rounded-3xl bg-purple-30 px-4 py-2 text-sm font-medium text-white ${
             isCancellable ? '' : 'hidden'
           }`}
         >
@@ -189,7 +189,7 @@ export default function Upload({
           <span className="bg-white px-2 text-xs text-gray-4000">Name</span>
         </div>
         <div {...getRootProps()}>
-          <span className="rounded-3xl border border-blue-2000 px-4 py-2 font-medium text-blue-2000 hover:cursor-pointer">
+          <span className="rounded-3xl border border-purple-30 px-4 py-2 font-medium text-purple-30 hover:cursor-pointer">
             <input type="button" {...getInputProps()} />
             Choose Files
           </span>
@@ -206,7 +206,7 @@ export default function Upload({
         <div className="flex flex-row-reverse">
           <button
             onClick={uploadFile}
-            className="ml-6 rounded-3xl bg-blue-3000 py-2 px-6 text-white"
+            className="ml-6 rounded-3xl bg-purple-30 py-2 px-6 text-white"
           >
             Train
           </button>
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 64fb76f22..8e395a07d 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -24,6 +24,7 @@ module.exports = {
         'blue-1000': '#7D54D1',
         'blue-2000': '#002B49',
         'blue-3000': '#4B02E2',
+        'purple-30': '#7D54D1',
         'blue-4000': 'rgba(0, 125, 255, 0.36)',
         'blue-5000': 'rgba(0, 125, 255)',
       },