diff --git a/src/routes/community/+page.svelte b/src/routes/community/+page.svelte
index 5fffeb77..56fd47c7 100644
--- a/src/routes/community/+page.svelte
+++ b/src/routes/community/+page.svelte
@@ -348,23 +348,21 @@ $: {
 
 
 <svelte:head>
-  <title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Best Funny Memes and Breaking News · stocknear</title>
+  <title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} A community for discussion, insights, news and memes about financial markets. · stocknear</title>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
 
-  <meta name="description" content="Your daily dose of stock market funny memes, GIFs, videos and weird news stories. We deliver hundreds of new stock market memes daily.">
+  <meta name="description" content="A community for discussion, insights, news and memes about financial markets.">
   <!-- Other meta tags -->
-  <meta property="og:title" content="Best Funny Memes and Breaking News · stocknear"/>
-  <meta property="og:description" content="Your daily dose of stock market funny memes, GIFs, videos and weird news stories. We deliver hundreds of new stock market memes daily.">
-  <meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
+  <meta property="og:title" content="A community for discussion, insights, news and memes about financial markets. · stocknear"/>
+  <meta property="og:description" content="A community for discussion, insights, news and memes about financial markets.">
   <meta property="og:type" content="website"/>
   <!-- Add more Open Graph meta tags as needed -->
 
   <!-- Twitter specific meta tags -->
   <meta name="twitter:card" content="summary_large_image"/>
-  <meta name="twitter:title" content="Best Funny Memes and Breaking News · stocknear"/>
-  <meta name="twitter:description" content="Your daily dose of stock market funny memes, GIFs, videos and weird news stories. We deliver hundreds of new stock market memes daily.">
-  <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
+  <meta name="twitter:title" content="A community for discussion, insights, news and memes about financial markets. · stocknear"/>
+  <meta name="twitter:description" content="A community for discussion, insights, news and memes about financial markets.">
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
     
diff --git a/src/routes/community/profile/+page.svelte b/src/routes/community/profile/+page.svelte
index 4b6032a0..53a1ef8e 100644
--- a/src/routes/community/profile/+page.svelte
+++ b/src/routes/community/profile/+page.svelte
@@ -680,7 +680,7 @@ onDestroy(async () => {
                         <!--Start Content-->
                         <div class="w-full p-2 flex flex-col items-start">
                           <div class="ml-2 mt-3 rounded-full border border-gray-500 w-16 h-16 relative bg-[#20202E] flex items-center justify-center">
-                            <svg style="clip-path: circle(50%);" class="rounded-full w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#F9784E" d="M273.857 21.904c-24.193.012-51.198 5.552-81.1 17.467c143.7 12.608 150.35 129.263 84.032 132.814c-85.27 4.565-53.232-57.217-133.34-103.03C200.445 201.48 94.44 190.33 21.054 59.23c12.805 85.755 24.28 116.942 78.26 153.596C261.996 323.294 94.618 347.8 36.82 245.53c14.568 93.454 68.364 132.803 131.707 139.93c-42.753 24.49-99.452 32.49-143.01 25.556c51.025 42.317 131.606 40.94 193.515 8.576c-37.137 36.123-97.446 70.644-116.803 74.728H276.36C517 405.563 530.305 232.45 454.827 124.492c-2.433 26.21-10.08 49.507-25.545 70.23c-18.48-102.394-69.02-172.86-155.426-172.818zm2.82 184.666l141.384 52.155c.286-3.207.86-6.495 1.747-9.807c5.62-20.973 21.605-34.913 35.705-31.135s20.973 23.842 15.353 44.815c-5.62 20.974-21.603 34.914-35.703 31.136a18 18 0 0 1-2.113-.72l-60.58 49.394l70.637 19.584l-140.023 84.71l65.848-68.866l-31.32-7.006l-150.335 122.58l158.06-196.89l-137.39-41.137l137.006 5.654l-68.275-54.467z"/></svg>
+                            <svg style="clip-path: circle(50%);" class="rounded-full w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#9DED1E" d="M273.857 21.904c-24.193.012-51.198 5.552-81.1 17.467c143.7 12.608 150.35 129.263 84.032 132.814c-85.27 4.565-53.232-57.217-133.34-103.03C200.445 201.48 94.44 190.33 21.054 59.23c12.805 85.755 24.28 116.942 78.26 153.596C261.996 323.294 94.618 347.8 36.82 245.53c14.568 93.454 68.364 132.803 131.707 139.93c-42.753 24.49-99.452 32.49-143.01 25.556c51.025 42.317 131.606 40.94 193.515 8.576c-37.137 36.123-97.446 70.644-116.803 74.728H276.36C517 405.563 530.305 232.45 454.827 124.492c-2.433 26.21-10.08 49.507-25.545 70.23c-18.48-102.394-69.02-172.86-155.426-172.818zm2.82 184.666l141.384 52.155c.286-3.207.86-6.495 1.747-9.807c5.62-20.973 21.605-34.913 35.705-31.135s20.973 23.842 15.353 44.815c-5.62 20.974-21.603 34.914-35.703 31.136a18 18 0 0 1-2.113-.72l-60.58 49.394l70.637 19.584l-140.023 84.71l65.848-68.866l-31.32-7.006l-150.335 122.58l158.06-196.89l-137.39-41.137l137.006 5.654l-68.275-54.467z"/></svg>
                           </div>
                           <span class="ml-7 mt-2 text-white font-mono font-medium">Pro</span>
                         </div>
diff --git a/src/routes/etf/[tickerID]/+layout.svelte b/src/routes/etf/[tickerID]/+layout.svelte
index 3a881799..7f95b68c 100644
--- a/src/routes/etf/[tickerID]/+layout.svelte
+++ b/src/routes/etf/[tickerID]/+layout.svelte
@@ -549,7 +549,7 @@ $: {
                               {#if userWatchList?.length !== 0}
                                 <label for="addWatchListModal" class="cursor-pointer flex-shrink-0">
                                   {#if isTickerIncluded}
-                                    <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
+                                    <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#9DED1E" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
                                     {:else}
                                     <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>              
                                   {/if}
@@ -558,7 +558,7 @@ $: {
                               {:else if userWatchList?.length === 0}
                                 <label on:click={() => toggleUserWatchlist('firstList')} class="cursor-pointer flex-shrink-0">
                                   {#if isTickerIncluded}
-                                  <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
+                                  <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#9DED1E" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
                                   {:else}
                                   <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>              
                                   {/if}
@@ -609,7 +609,7 @@ $: {
                                               <div class="flex-shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#0F0F0F] flex items-center justify-center">
                                                 <label for="addWatchListModal" class="cursor-pointer flex-shrink-0">
                                                   {#if isTickerIncluded}
-                                                    <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
+                                                    <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#9DED1E" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
                                                     {:else}
                                                     <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>              
                                                   {/if}
@@ -620,7 +620,7 @@ $: {
                                               <div class="flex-shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#0F0F0F] flex items-center justify-center">
                                                 <label on:click={() => toggleUserWatchlist('firstList')} class="cursor-pointer flex-shrink-0">
                                                   {#if isTickerIncluded}
-                                                  <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
+                                                  <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#9DED1E" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
                                                   {:else}
                                                   <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>              
                                                   {/if}
diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte
index c416140b..a7d6268e 100644
--- a/src/routes/options-flow/+page.svelte
+++ b/src/routes/options-flow/+page.svelte
@@ -1,6 +1,6 @@
 <script lang='ts'>
   import { goto } from '$app/navigation';
-  import { userRegion, numberOfUnreadNotification, etfTicker, stockTicker, isOpen } from '$lib/store';
+  import { screenWidth, userRegion, numberOfUnreadNotification, etfTicker, stockTicker, isOpen } from '$lib/store';
   import notifySound from '$lib/audio/options-flow-reader.mp3';
   import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
   import { abbreviateNumber } from '$lib/utils.js';
@@ -26,7 +26,9 @@
   
   let optionList = []
   let rawData = [];
-  
+  let filterList = [];
+  let changeRuleFilter = false;
+
   let flowSentiment;
   let putCallRatio;
   let displayCallVolume;
@@ -63,7 +65,6 @@
   }
   
   
-  
   async function websocketRealtimeData() {
   
   try {
@@ -314,7 +315,6 @@ function calculateStats(optionList) {
                 rawData = newData;
                 optionList = rawData?.slice(0, 20);
                 notFound = false;
-                console.log('test');
             } else {
                 notFound = true;
                 rawData = data?.getOptionsFlowFeed;
@@ -339,7 +339,69 @@ function debounce(fn, delay) {
 }
 
 const debouncedHandleInput = debounce(handleInput, 200);
-  </script>
+
+
+async function handleFilter(newFilter) {
+    //e.preventDefault();
+  
+    const filterSet = new Set(filterList);
+  
+    // Check if the new filter already exists in the list
+    if (filterSet?.has(newFilter)) {
+      // If it exists, remove it from the list
+      filterSet?.delete(newFilter);
+    } else {
+      // If it doesn't exist, add it to the list
+      filterSet?.add(newFilter);
+  
+    }
+    filterList = Array?.from(filterSet);
+    //console.log(filterList)
+  
+  }
+  
+  
+  
+// Function to filter elements with date_expiration within a given number of days
+const filterExpiringSoon = (data, days) => {
+  const currentDate = new Date(); // Get today's date
+  return data.filter(item => {
+    const expirationDate = new Date(item?.date_expiration);
+    const timeDiff = expirationDate - currentDate; // Time difference in milliseconds
+    const daysDiff = timeDiff / (1000 * 60 * 60 * 24); // Convert to days
+    return daysDiff <= days && daysDiff >= 0; // Ensure it's within the specified number of days and not in the past
+  });
+};
+
+$: {
+    if(filterList)
+    {
+      console.log('triggered')
+      if(filterList?.length !== 0)
+      {
+        const newData = filterExpiringSoon(rawData, Math.max(...filterList));
+        if (newData?.length !== 0) {
+            rawData = newData;
+            optionList = rawData?.slice(0, 20);
+            notFound = false;
+        } else {
+            notFound = true;
+            rawData = data?.getOptionsFlowFeed;
+            optionList = [];
+        }
+        
+      }
+      else {
+        rawData = data?.getOptionsFlowFeed;
+        optionList = rawData?.slice(0,20);
+
+      }
+      calculateStats(rawData);
+
+   }
+  }
+
+</script>
          
     
   
@@ -482,7 +544,7 @@ const debouncedHandleInput = debounce(handleInput, 200);
           <div class="w-full mt-5 mb-10 m-auto flex justify-center items-center">
             <div class="w-full grid grid-cols-2 lg:grid-cols-4 gap-y-3 gap-x-3 ">
               <!--Start Flow Sentiment-->  
-              <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
+              <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-lg h-20">
                   <div class="flex flex-col items-start">
                       <span class="font-medium text-gray-200 text-sm ">Flow Sentiment</span>
                       <span class="text-start text-[1rem] font-medium {flowSentiment === 'Bullish' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">{flowSentiment}</span>
@@ -491,7 +553,7 @@ const debouncedHandleInput = debounce(handleInput, 200);
               </div>
               <!--End Flow Sentiment-->
                <!--Start Put/Call-->  
-               <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
+               <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-lg h-20">
                 <div class="flex flex-col items-start">
                     <span class="font-medium text-gray-200 text-sm ">Put/Call</span>
                     <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@@ -518,7 +580,7 @@ const debouncedHandleInput = debounce(handleInput, 200);
             </div>
             <!--End Put/Call-->
              <!--Start Call Flow-->  
-             <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
+             <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-lg h-20">
               <div class="flex flex-col items-start">
                   <span class="font-medium text-gray-200 text-sm ">Call Flow</span>
                   <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@@ -547,7 +609,7 @@ const debouncedHandleInput = debounce(handleInput, 200);
             </div>
             <!--End Call Flow-->
             <!--Start Put Flow-->  
-            <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
+            <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-lg h-20">
               <div class="flex flex-col items-start">
                   <span class="font-medium text-gray-200 text-sm ">Put Flow</span>
                   <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@@ -578,7 +640,7 @@ const debouncedHandleInput = debounce(handleInput, 200);
   
             {#if showMore}
              <!--Start Most Traded-->  
-             <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
+             <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-lg h-20">
               <div class="flex flex-col items-start">
                   <span class="font-medium text-gray-200 text-sm ">Most Traded Option</span>
                   <span class="text-start text-sm sm:text-[1rem] font-medium text-white mt-0.5">
@@ -595,7 +657,7 @@ const debouncedHandleInput = debounce(handleInput, 200);
             <!--End Most Traded-->
   
              <!--Start Highest Premium-->  
-             <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
+             <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-lg h-20">
               <div class="flex flex-col items-start">
                   <span class="font-medium text-gray-200 text-sm ">Highest Premium</span>
                   <span class="text-start text-sm sm:text-[1rem] font-medium text-white mt-0.5">
@@ -612,7 +674,7 @@ const debouncedHandleInput = debounce(handleInput, 200);
             <!--End Highest Premium-->
   
             <!--Start Highest Volume-->  
-            <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
+            <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-lg h-20">
               <div class="flex flex-col items-start">
                   <span class="font-medium text-gray-200 text-sm ">Highest Volume</span>
                   <span class="text-start text-sm sm:text-[1rem] font-medium text-white mt-0.5">
@@ -629,7 +691,7 @@ const debouncedHandleInput = debounce(handleInput, 200);
             <!--End Highest Volume-->
   
              <!--Start Highest Open Interest-->  
-             <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
+             <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-lg h-20">
               <div class="flex flex-col items-start">
                   <span class="font-medium text-gray-200 text-sm ">Highest Open Interest</span>
                   <span class="text-start text-sm sm:text-[1rem] font-medium text-white mt-0.5">
@@ -659,28 +721,40 @@ const debouncedHandleInput = debounce(handleInput, 200);
           <!--End Expand-->
   
           <!--Start Filter-->
-          <div class="w-full pb-3 mt-10 sm:mt-0">
+          <div class="w-full pb-3 mt-10 sm:mt-5">
             <div class="relative right-0 bg-[#0F0F0F]">
               <ul class="relative grid grid-cols-2 sm:grid-cols-4 gap-y-3 gap-x-3 flex flex-wrap p-1 list-none rounded-[3px]">
-                <li class="pl-3 py-1.5 flex-auto text-center bg-[#2E3238] rounded-[3px]">
-          <label class="flex flex-row items-center">
-            <input 
-            id="modal-search"
-              type="search" 
-              class="text-white sm:ml-2 text-sm sm:text-[1rem] placeholder-gray-400 border-transparent focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1 bg-inherit"
-              placeholder="Find by Symbol"
-              bind:value={filterQuery}
-              on:input={debouncedHandleInput}
-              autocomplete="off"
-            />
-            <svg class="ml-auto h-7 w-7 sm:h-8 sm:w-8 inline-block mr-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="m19.485 20.154l-6.262-6.262q-.75.639-1.725.989t-1.96.35q-2.402 0-4.066-1.663T3.808 9.503T5.47 5.436t4.064-1.667t4.068 1.664T15.268 9.5q0 1.042-.369 2.017t-.97 1.668l6.262 6.261zM9.539 14.23q1.99 0 3.36-1.37t1.37-3.361t-1.37-3.36t-3.36-1.37t-3.361 1.37t-1.37 3.36t1.37 3.36t3.36 1.37"/></svg>
-          </label>
-          {#if notFound === true}
-          <span class="label-text text-error text-[0.65rem] mt-1">
-              No Results Found
-          </span>
-          {/if}
-          </li>
+                <li class="relative pl-3 py-1.5 flex-auto text-center bg-[#2E3238] rounded-[3px]">
+                  <label class="flex flex-row items-center">
+                    <input 
+                    id="modal-search"
+                      type="search" 
+                      class="text-white sm:ml-2 text-sm sm:text-[1rem] placeholder-gray-400 border-transparent focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1 bg-inherit"
+                      placeholder="Find by Symbol"
+                      bind:value={filterQuery}
+                      on:input={debouncedHandleInput}
+                      autocomplete="off"
+                    />
+                    <svg class="ml-auto h-7 w-7 sm:h-8 sm:w-8 inline-block mr-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="m19.485 20.154l-6.262-6.262q-.75.639-1.725.989t-1.96.35q-2.402 0-4.066-1.663T3.808 9.503T5.47 5.436t4.064-1.667t4.068 1.664T15.268 9.5q0 1.042-.369 2.017t-.97 1.668l6.262 6.261zM9.539 14.23q1.99 0 3.36-1.37t1.37-3.361t-1.37-3.36t-3.36-1.37t-3.361 1.37t-1.37 3.36t1.37 3.36t3.36 1.37"/></svg>
+                  </label>
+                  {#if notFound === true}
+                  <span class="absolute left-1 -bottom-6 label-text text-error text-[0.65rem] mt-2">
+                      No Results Found
+                  </span>
+                  {/if}
+                  </li>
+                
+                
+              <li class="pl-3 py-1.5 flex-auto text-center bg-[#2E3238] rounded-[3px]">
+                <label for="filterList" class="flex flex-row items-center cursor-pointer">
+                  <span class=" text-sm sm:text-[1rem] text-gray-400 ml-2 text-start w-full px-0 py-1 bg-inherit">
+                    Filter
+                  </span>
+                  <svg class="ml-auto mr-5 h-5 w-5 inline-block transform transition-transform mr-2 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="#fff" d="m488.832 344.32l-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872l319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"/></svg>
+                </label>
+              </li>
+
+
           </ul>
         </div>
       </div>
@@ -802,4 +876,84 @@ const debouncedHandleInput = debounce(handleInput, 200);
       </section>
       
     
-      
\ No newline at end of file
+      
+
+
+
+      <!--Start View All List-->
+<input type="checkbox" id="filterList" class="modal-toggle" />
+    
+<dialog id="filterList" class="modal modal-bottom sm:modal-middle ">
+
+
+  <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="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">
+      <label for="filterList" class="cursor-pointer absolute right-0 top-0 m-2 sm:right-1 sm:top-1" aria-label="Close">
+        <svg class="w-6 h-6 text-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="max-width:40px">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+        </svg>
+      </label>
+    
+      <div class="border-default p-3 xs:p-4 xl:w-[1024px]">
+        <h3 class="mb-1 text-lg xs:mb-2 text-white font-semibold">
+          Filter Expiration Dates up to 
+        </h3>
+      </div> 
+    
+      <div class="h-[35vh] sm:h-[10vh] overflow-auto overscroll-contain px-3 pb-4 xs:h-[60vh] xs:px-4 lg:max-h-[600px] mt-5">
+        <div>
+          <div class="flex flex-wrap">
+            <div class="flex w-full items-center space-x-1.5 py-1.5 md:w-1/2 lg:w-1/3 lg:py-1">
+              <input on:click={() => handleFilter(7)} id="oneWeek" type="checkbox" class="cursor-pointer h-[18px] w-[18px] rounded-sm ring-offset-0 bg-gray-600 lg:h-4 lg:w-4">
+              <div class="-mt-0.5">
+                <label for="oneWeek" class="cursor-pointer text-white lg:text-sm">1 Week</label>  
+              </div>
+            </div>
+            <div class="flex w-full items-center space-x-1.5 py-1.5 md:w-1/2 lg:w-1/3 lg:py-1">
+              <input on:click={() => handleFilter(30)} id="oneMonth" type="checkbox" class="cursor-pointer h-[18px] w-[18px] rounded-sm ring-offset-0 bg-gray-600 lg:h-4 lg:w-4">
+              <div class="-mt-0.5">
+                <label for="oneMonth" class="cursor-pointer text-white lg:text-sm">1 Month</label>
+              </div>
+            </div>
+           <div class="flex w-full items-center space-x-1.5 py-1.5 md:w-1/2 lg:w-1/3 lg:py-1">
+              <input on:click={() => handleFilter(90)} id="threeMonths" type="checkbox" class="cursor-pointer h-[18px] w-[18px] rounded-sm ring-offset-0 bg-gray-600 lg:h-4 lg:w-4">
+              <div class="-mt-0.5">
+                <label for="threeMonths" class="cursor-pointer text-white lg:text-sm">3 Months</label>
+              </div>
+            </div>
+
+            <div class="flex w-full items-center space-x-1.5 py-1.5 md:w-1/2 lg:w-1/3 lg:py-1">
+              <input on:click={() => handleFilter(180)} id="sixMonths" type="checkbox" class="cursor-pointer h-[18px] w-[18px] rounded-sm ring-offset-0 bg-gray-600 lg:h-4 lg:w-4">
+              <div class="-mt-0.5">
+                <label for="sixMonths" class="cursor-pointer text-white lg:text-sm">6 Months</label>
+              </div>
+            </div>
+
+            <div class="flex w-full items-center space-x-1.5 py-1.5 md:w-1/2 lg:w-1/3 lg:py-1">
+              <input on:click={() => handleFilter(365)} id="oneYear" type="checkbox" class="cursor-pointer h-[18px] w-[18px] rounded-sm ring-offset-0 bg-gray-600 lg:h-4 lg:w-4">
+              <div class="-mt-0.5">
+                <label for="oneYear" class="cursor-pointer text-white lg:text-sm">1 Year</label>
+              </div>
+            </div>
+
+            <div on:click={() => handleFilter(1095)} class="flex w-full items-center space-x-1.5 py-1.5 md:w-1/2 lg:w-1/3 lg:py-1">
+              <input id="threeYears" type="checkbox" class="cursor-pointer h-[18px] w-[18px] rounded-sm ring-offset-0 bg-gray-600 lg:h-4 lg:w-4">
+              <div class="-mt-0.5">
+                <label for="threeYears" class="cursor-pointer text-white lg:text-sm">3 Years</label>
+              </div>
+            </div>
+
+
+          </div>
+        </div>
+      </div>
+    </div>
+
+        
+      </div>
+  </dialog>
diff --git a/src/routes/politicians/+page.svelte b/src/routes/politicians/+page.svelte
index 96a80e3b..b4ec5cad 100644
--- a/src/routes/politicians/+page.svelte
+++ b/src/routes/politicians/+page.svelte
@@ -239,7 +239,7 @@ onMount(async () => {
                         </li>
                       
                       <li class="pl-3 py-1.5 flex-auto text-center bg-[#2E3238] rounded-[3px]">
-                        <label for="filterList" class="flex flex-row items-center">
+                        <label for="filterList" class="flex flex-row items-center cursor-pointer">
                           <span class="text-[0.75rem] sm:text-[1rem] text-gray-400 ml-2 text-start w-full px-0 py-1 bg-inherit">
                             Filter
                           </span>
@@ -382,37 +382,8 @@ onMount(async () => {
           </div>
           <!--End Political Party-->
       
-          <!--Start Transaction Type-->
-          <div class="grid grid-cols-2 w-full ml-auto mt-4">
-            <div class="mb-4 mr-auto">
-              <h2 class="text-xl sm:text-2xl text-white font-bold mb-3">Transaction Type</h2>
-              <ul class="space-y-1">
-                <li class="mb-2 cursor-pointer">
-                  <label on:click|stopPropagation={(event) => handleFilter(event,'Bought')} class="cursor-pointer flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]">
-                    <input checked={filterList?.includes('Bought')} type="checkbox" class="cursor-pointer bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" />
-                    <label class="text-white text-md cursor-pointer">Bought</label>
-                  </label>
-                </li>
-              </ul>
-            </div>
-              <!-- Column 2 -->
-              <div class="mt-11">
-                <ul class="space-y-1">
-                  <li class="mb-2 cursor-pointer">
-                    <label on:click|stopPropagation={(event) => handleFilter(event,'Sold')} class="cursor-pointer flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]">
-                      <input checked={filterList?.includes('Sold')} type="checkbox" class="cursor-pointer bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" />
-                      <label class="text-white text-md cursor-pointer">Sold</label>
-                    </label>
-                  </li>
-                  <!-- ...other list items -->
-                </ul>
-              </div>
-          </div>
-      
-          <!--End Transaction Type-->
-      
-    
       
+  
       
           </div>
          
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index 60ab9526..9fcc2eba 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -537,7 +537,7 @@ $: {
                           {#if userWatchList?.length !== 0}
                             <label for="addWatchListModal" class="cursor-pointer flex-shrink-0">
                               {#if isTickerIncluded}
-                                <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
+                                <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#9DED1E" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
                                 {:else}
                                 <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>              
                               {/if}
@@ -546,7 +546,7 @@ $: {
                           {:else if userWatchList?.length === 0}
                             <label on:click={() => toggleUserWatchlist('firstList')} class="cursor-pointer flex-shrink-0">
                               {#if isTickerIncluded}
-                              <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
+                              <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#9DED1E" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
                               {:else}
                               <svg class="w-6 h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>              
                               {/if}
@@ -597,7 +597,7 @@ $: {
                                             <div class="flex-shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#0F0F0F] flex items-center justify-center">
                                               <label for="addWatchListModal" class="cursor-pointer flex-shrink-0">
                                                 {#if isTickerIncluded}
-                                                  <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
+                                                  <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#9DED1E" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
                                                   {:else}
                                                   <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>              
                                                 {/if}
@@ -608,7 +608,7 @@ $: {
                                             <div class="flex-shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#0F0F0F] flex items-center justify-center">
                                               <label on:click={() => toggleUserWatchlist('firstList')} class="cursor-pointer flex-shrink-0">
                                                 {#if isTickerIncluded}
-                                                <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
+                                                <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#9DED1E" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327l4.898.696c.441.062.612.636.282.95l-3.522 3.356l.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
                                                 {:else}
                                                 <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256l4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73l3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356l-.83 4.73zm4.905-2.767l-3.686 1.894l.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575l-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957l-3.686-1.894a.503.503 0 0 0-.461 0z"/></svg>              
                                                 {/if}