diff --git a/src/lib/components/Feedback.svelte b/src/lib/components/Feedback.svelte
index 4e8e5977..eb94daa0 100644
--- a/src/lib/components/Feedback.svelte
+++ b/src/lib/components/Feedback.svelte
@@ -117,16 +117,13 @@
 <!--Start Create Watchlist Modal-->
 <input type="checkbox" id="feedbackInfo" class="modal-toggle" />
 
-<dialog
-  id="feedbackInfo"
-  class="modal modal-bottom sm:modal-middle overflow-hidden"
->
+<dialog id="feedbackInfo" class="modal overflow-hidden p-2 sm:p-0">
   <label
     for="feedbackInfo"
-    class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.9]"
+    class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.8]"
   ></label>
 
-  <div class="modal-box w-full bg-[#09090B] border border-gray-600">
+  <div class="modal-box rounded w-full bg-primary border border-gray-600">
     <div class="flex flex-row items-center pt-5">
       <h1 class="text-white text-xl sm:text-2xl font-bold">
         Your Feedback matters!
@@ -174,8 +171,8 @@
         <li on:click={() => (rating = "Very Good")} class="cursor-pointer">
           <div
             class="rounded-full w-16 h-16 relative {rating === 'Very Good'
-              ? 'bg-[#333333]'
-              : ''} hover:bg-[#333333] flex items-center justify-center"
+              ? 'bg-secondary'
+              : ''} hover:bg-secondary flex items-center justify-center"
           >
             <img
               class="w-8 h-8 sm:w-10 sm:h-10"
@@ -187,8 +184,8 @@
         <li on:click={() => (rating = "Good")} class="cursor-pointer">
           <div
             class="rounded-full w-16 h-16 relative {rating === 'Good'
-              ? 'bg-[#333333]'
-              : ''} hover:bg-[#333333] flex items-center justify-center"
+              ? 'bg-secondary'
+              : ''} hover:bg-secondary flex items-center justify-center"
           >
             <img
               class="w-8 h-8 sm:w-10 sm:h-10"
@@ -200,8 +197,8 @@
         <li on:click={() => (rating = "Bad")} class="cursor-pointer">
           <div
             class="rounded-full w-16 h-16 relative {rating === 'Bad'
-              ? 'bg-[#333333]'
-              : ''} hover:bg-[#333333] flex items-center justify-center"
+              ? 'bg-secondary'
+              : ''} hover:bg-secondary flex items-center justify-center"
           >
             <img
               class="w-8 h-8 sm:w-10 sm:h-10"
@@ -213,8 +210,8 @@
         <li on:click={() => (rating = "Very Bad")} class="cursor-pointer">
           <div
             class="rounded-full w-16 h-16 relative {rating === 'Very Bad'
-              ? 'bg-[#333333]'
-              : ''} hover:bg-[#333333] flex items-center justify-center"
+              ? 'bg-secondary'
+              : ''} hover:bg-secondary flex items-center justify-center"
           >
             <img
               class="w-8 h-8 sm:w-10 sm:h-10"
diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte
index 686278f5..a9bd39f9 100644
--- a/src/routes/options-flow/+page.svelte
+++ b/src/routes/options-flow/+page.svelte
@@ -2282,20 +2282,19 @@ function sendMessage(message) {
 <!-- Put this part before </body> tag -->
 <input type="checkbox" id="optionDetailsDesktopModal" class="modal-toggle" />
 
-<label
-  for="optionDetailsDesktopModal"
-  class="modal modal-bottom sm:modal-middle cursor-pointer"
->
-  <label for="optionDetailsDesktopModal" class="cursor-pointer modal-backdrop"
+<label for="optionDetailsDesktopModal" class="modal p-2 sm:p-0">
+  <label
+    for="optionDetailsDesktopModal"
+    class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.8]"
   ></label>
 
   <!-- svelte-ignore a11y-label-has-associated-control -->
   <label
-    class="modal-box w-full relative bg-[#09090B] h-auto max-h-[900px] border border-gray-800 overflow-y-scroll"
+    class="modal-box rounded w-full relative bg-primary h-auto max-h-[900px] border border-gray-800 overflow-y-scroll"
   >
     <label
       for="optionDetailsDesktopModal"
-      class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-2xl text-white"
+      class="cursor-pointer absolute right-5 top-2 bg-primary text-2xl text-white"
     >
       ✕
     </label>
@@ -2305,48 +2304,48 @@ function sendMessage(message) {
       <br />
       {optionSymbol}
     </p>
-    <p class="py-4 text-gray-200 bg-[#09090B] w-full">
+    <p class="py-4 text-gray-200 bg-primary w-full">
       <span class="font-semibold text-white">Description:</span>
       <br />
       {optionDescription}
     </p>
 
     <table
-      class="table table-sm table-compact bg-[#09090B] w-full mt-5 mb-10 text-white"
+      class="table table-sm table-compact bg-primary w-full mt-5 mb-10 text-white"
     >
       <tbody>
         <!-- row 1 -->
-        <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="font-semibold">Premium</td>
           <td class="">{optionPremium}</td>
           <td class="font-semibold">C/P</td>
           <td class="">{optionContract}</td>
         </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="font-semibold">Expiry</td>
           <td class="">{optionExpiry}</td>
           <td class="font-semibold">Type</td>
           <td class="">{optionType}</td>
         </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="font-semibold">Strike</td>
           <td class="">${optionStrike}</td>
           <td class="font-semibold">Volume</td>
           <td class="">{optionVolume}</td>
         </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="font-semibold">Spot</td>
           <td class="">${optionSpot}</td>
           <td class="font-semibold">Open Interest</td>
           <td class="">{optionOpenInterest}</td>
         </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="font-semibold">Price</td>
           <td class="">${optionPrice}</td>
           <td class="font-semibold">Sentiment</td>
           <td class="">{optionSentiment}</td>
         </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
+        <tr class="border-b border-slate-700 odd:bg-secondary">
           <td class="font-semibold">Execution Estimate</td>
           <td class="">{optionexecution_estimate}</td>
           <td class="font-semibold"></td>
@@ -2359,88 +2358,6 @@ function sendMessage(message) {
 
 <!--End Options Detial Desktop Modal-->
 
-<!--Start Options Detail Modal-->
-<!--
-<div class="hidden drawer drawer-end z-[999] w-full overflow-hidden">
-  <input id="optionDetailsMobileModal" type="checkbox" class="drawer-toggle"/>
-  <div class="drawer-side overflow-hidden z-[999]">
-  
-      
-    <div class="bg-[#000] min-h-screen w-full border pb-20 overflow-hidden">
-
-        <label for="optionDetailsMobileModal" class="absolute left-6 top-6">
-          <svg class="w-6 h-6 inline-block mb-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"/></svg>
-        </label>
-
-  
-  <div class="w-fit border overflow-hidden p-2">
-
-    <p class="text-xl font-semibold text-white mt-16 p-3">
-      <span class="text-xl font-semibold">Order Details:</span>
-      <br>
-      {optionSymbol}
-    </p>
-    <p class="py-4 text-gray-200 w-full p-3">
-      <span class="font-semibold text-white">Description:</span>
-      {optionDescription}
-    </p>
-
-    <table class="table table-sm table-compact w-full mt-5 mb-10 text-white">
-      <tbody>
-        <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
-          <td class="font-semibold">Premium</td>
-          <td class="">{optionPremium}</td>
-          <td class="font-semibold">C/P</td>
-          <td class="">{optionContract}</td>
-        </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
-          <td class="font-semibold">Expiry</td>
-          <td class="">{optionExpiry}</td>
-          <td class="font-semibold">Type</td>
-          <td class="">{optionType}</td>
-        </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
-          <td class="font-semibold">Strike</td>
-          <td class="">${optionStrike}</td>
-          <td class="font-semibold">Volume</td>
-          <td class="">{optionVolume}</td>
-        </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
-          <td class="font-semibold">Spot</td>
-          <td class="">${optionSpot}</td>
-          <td class="font-semibold">Open Interest</td>
-          <td class="">{optionOpenInterest}</td>
-        </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
-          <td class="font-semibold">Price</td>
-          <td class="">${optionPrice}</td>
-          <td class="font-semibold">Sentiment</td>
-          <td class="">{optionSentiment}</td>
-        </tr>
-        <tr class="odd:bg-[#2A2E39]">
-          <td class="font-semibold">Trade Count</td>
-          <td class="">{optionTradeCount}</td>
-          <td class="font-semibold">Exchange</td>
-          <td class="">{optionExchange}</td>
-        </tr>
-        <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
-          <td class="font-semibold">Execution Est.</td>
-          <td class="">{optionexecution_estimate}</td>
-          <td class="font-semibold"></td>
-          <td class=""></td>
-        </tr>
-      </tbody>
-    </table>
-
-        
-  </div>
-
-</div>
-</div>
-</div>
--->
-<!--End Options Detail Modal-->
-
 <style>
   .table-container {
     width: 100%;
diff --git a/src/routes/stock-screener/+page.svelte b/src/routes/stock-screener/+page.svelte
index 0e902498..741154fc 100644
--- a/src/routes/stock-screener/+page.svelte
+++ b/src/routes/stock-screener/+page.svelte
@@ -2455,7 +2455,7 @@ const handleKeyDown = (event) => {
       </div>
     </div>
 
-    <div class="rounded-md border border-gray-700 bg-[#262626] p-2">
+    <div class="rounded-md border border-gray-700 bg-primary p-2">
       <div class="items-end border-b border-gray-600">
         <div
           class="mr-1 flex items-center justify-between lg:mr-2 pb-1.5 border-b border-gray-600 mt-1.5"
@@ -3205,7 +3205,7 @@ const handleKeyDown = (event) => {
     <div class="flex justify-center items-center h-80">
       <div class="relative">
         <label
-          class="bg-[#262626] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+          class="bg-primary rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
         >
           <span class="loading loading-spinner loading-md text-gray-400"></span>
         </label>