diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte
index a7d6268e..1eda47ba 100644
--- a/src/routes/options-flow/+page.svelte
+++ b/src/routes/options-flow/+page.svelte
@@ -27,7 +27,6 @@
   let optionList = []
   let rawData = [];
   let filterList = [];
-  let changeRuleFilter = false;
 
   let flowSentiment;
   let putCallRatio;
@@ -41,7 +40,7 @@
   let highestOpenInterestTicker;
   
   let audio;
-  let muted = true;
+  let muted = false;
   let socket;
   let filterQuery = '';
   let previousCallVolume = 0; //This is needed to play the sound only if it changes.
@@ -78,27 +77,46 @@
       try {
           rawData = [...JSON?.parse(newData)];
           
+
+          // Variables to track filter status
+          let queryFilteredData = rawData;
+          let listFilteredData = rawData;
+
+          // Apply filterQuery if it exists
           if (filterQuery?.length !== 0) {
-              const newData = [...rawData?.filter(item => item?.ticker === filterQuery?.toUpperCase())];
-              if (newData?.length !== 0) {
+              queryFilteredData = rawData.filter(item => item?.ticker === filterQuery?.toUpperCase());
+          }
+
+          // Apply filterList if it exists
+          if (filterList?.length !== 0) {
+              listFilteredData = filterExpiringSoon(rawData, Math.max(...filterList));
+          }
+
+          // Determine the final filtered data based on both filters
+          if (filterQuery?.length !== 0 && filterList?.length !== 0) {
+              rawData = queryFilteredData.filter(item => listFilteredData.includes(item));
+          } else if (filterQuery?.length !== 0) {
+              rawData = queryFilteredData;
+          } else if (filterList?.length !== 0) {
+              rawData = listFilteredData;
+          }
+
+          // Update optionList and notFound status
+          if (rawData?.length !== 0) {
               notFound = false;
-              rawData = [...newData]
-              optionList = rawData?.slice(0,20); //newData?.slice(0,20) //[...newData];
-              }
-              else {
-                  optionList = rawData?.slice(0,20);
-                  notFound = true;
-                  
-              }
+              optionList = rawData?.slice(0, 20);
           } else {
-              notFound = false;
-              optionList = rawData?.slice(0,20);
+              notFound = true;
+              rawData = data?.getOptionsFlowFeed ?? [];
+              optionList = [];
           }
-  
+
           calculateStats(rawData);
-          if(previousCallVolume !== displayCallVolume && !muted) {
-          audio?.play()
+          if (previousCallVolume !== displayCallVolume && !muted) {
+              audio?.play();
           }
+
+         
       }
       catch(e) {
           console.log(e)
@@ -373,8 +391,9 @@ const filterExpiringSoon = (data, days) => {
   });
 };
 
+
 $: {
-    if(filterList)
+    if(filterList && typeof window !== 'undefined' && mode === false)
     {
       console.log('triggered')
       if(filterList?.length !== 0)
@@ -889,7 +908,7 @@ $: {
   <label id="filterList" for="filterList" class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label>
   
   
-  <div class="modal-box w-full bg-[#202020] sm:border sm:border-slate-800 overflow-y-scroll rounded-md">
+  <div class="modal-box w-full bg-[#202020] sm:border sm:border-slate-800 overflow-hidden rounded-md">
 
 
     <div class="relative z-50 mx-2 max-h-[80vh] rounded bg-default opacity-100 bp:mx-3 sm:mx-4 w-full max-w-[1024px]" aria-modal="true">
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
index 1dfe8e5c..81d3e5a7 100644
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -127,7 +127,7 @@ async function purchasePlan() {
                     <span class="text-sm font-medium text-white text-opacity-[0.6]">
                         Pay Yearly
                     </span>
-                    <span class="text-[#10DB06] text-sm font-bold text-opacity-[0.8]">
+                    <span class="text-[#9DED1E] text-sm font-semibold">
                         Save up 25%
                     </span>
                 </div>
@@ -232,7 +232,7 @@ async function purchasePlan() {
                 <div class="{!mode ? 'hidden' : ''} ribbon ribbon-top-right"><span class="text-white">Discount</span></div>
 
                 <div class="absolute top-0 left-1/2 transform -translate-x-1/2 rounded-b-2xl flex flex-row items-center bg-red-600 p-2">
-                    <svg class="w-6 h-6 mr-2" fill="#D6D6DC" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" stroke="#E02424"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>star-solid</title> <g id="Layer_2" data-name="Layer 2"> <g id="invisible_box" data-name="invisible box"> <rect width="48" height="48" fill="none"></rect> </g> <g id="icons_Q2" data-name="icons Q2"> <path d="M24,3a2.1,2.1,0,0,0-1.8,1.1L16.5,15.7,3.7,17.5A2.1,2.1,0,0,0,2.6,21l9.2,8.9L9.7,42.7A2,2,0,0,0,11.6,45l1-.2,11.4-6,11.4,6,1,.2a2,2,0,0,0,1.9-2.3L36.2,29.9,45.4,21a2.1,2.1,0,0,0-1.1-3.5L31.5,15.7,25.8,4.1A2.1,2.1,0,0,0,24,3Z"></path> </g> </g> </g></svg>
+                    <svg class="w-6 h-6 mr-2" fill="#D6D6DC" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" stroke=""><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>star-solid</title> <g id="Layer_2" data-name="Layer 2"> <g id="invisible_box" data-name="invisible box"> <rect width="48" height="48" fill="none"></rect> </g> <g id="icons_Q2" data-name="icons Q2"> <path d="M24,3a2.1,2.1,0,0,0-1.8,1.1L16.5,15.7,3.7,17.5A2.1,2.1,0,0,0,2.6,21l9.2,8.9L9.7,42.7A2,2,0,0,0,11.6,45l1-.2,11.4-6,11.4,6,1,.2a2,2,0,0,0,1.9-2.3L36.2,29.9,45.4,21a2.1,2.1,0,0,0-1.1-3.5L31.5,15.7,25.8,4.1A2.1,2.1,0,0,0,24,3Z"></path> </g> </g> </g></svg>
                     <span class="text-white text-md font-medium">
                         Best Value
                     </span>
@@ -530,13 +530,13 @@ font-size: 0.97rem;
   --border-angle: 0turn;
   --border-radius: 30px; /* Added border radius */
   
-  background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
+  background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 10%, #000, #9DED1E);
   background-size: calc(100% - (var(--border-size) * 2)) calc(100% - (var(--border-size) * 2)), cover;
   background-position: center center;
   background-repeat: no-repeat;
   border-radius: var(--border-radius); /* Added border radius */
   
-  animation: bg-spin 5s linear infinite;
+  animation: bg-spin 4s linear infinite;
 }
 
 @keyframes bg-spin {
@@ -562,7 +562,7 @@ font-size: 0.97rem;
     .light-box-2 {
         --border-size: 1px;
         --border-angle: 0turn;
-        background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
+        background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 10%, #000, #9DED1E);
         background-position: center center;
         background-repeat: no-repeat;
     }
@@ -571,7 +571,7 @@ font-size: 0.97rem;
     .light-box-3 {
         --border-size: 1px;
         --border-angle: 0turn;
-        background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
+        background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 10%, #000, #9DED1E);
         background-position: center center;
         background-repeat: no-repeat;
     }