diff --git a/src/lib/components/ImpliedVolatility.svelte b/src/lib/components/ImpliedVolatility.svelte
index 4fc70cf6..ac8e799f 100644
--- a/src/lib/components/ImpliedVolatility.svelte
+++ b/src/lib/components/ImpliedVolatility.svelte
@@ -5,23 +5,19 @@
     import { formatDateRange } from "$lib/utils";
     import Lazy from 'svelte-lazy';
 
-
     export let data;
   
     let isLoaded = false;
-  
+    let displayIV = 'iv60';
+
     let rawData = [];
     let optionsData;
-    let avgFee;
     let lowestIV;
     let highestIV;
     let lowestRV;
     let highestRV;
     let ivRank;
-
-    let totalAvailableShares;
   
-
 function findLowestAndhighestIV(data, lastDateStr) {
     // Convert lastDateStr to Date object
     const lastDate = new Date(lastDateStr);
@@ -49,27 +45,16 @@ function findLowestAndhighestIV(data, lastDateStr) {
 }
 
   
-  function normalizer(value) {
-  if (Math?.abs(value) >= 1e18) {
-    return { unit: 'Q', denominator: 1e18 };
-  } else if (Math?.abs(value) >= 1e12) {
-    return { unit: 'T', denominator: 1e12 };
-  } else if (Math?.abs(value) >= 1e9) {
-    return { unit: 'B', denominator: 1e9 };
-  } else if (Math?.abs(value) >= 1e6) {
-    return { unit: 'M', denominator: 1e6 };
-  } else if (Math?.abs(value) >= 1e5) {
-    return { unit: 'K', denominator: 1e5 };
-  } else {
-    return { unit: '', denominator: 1 };
-  }
-  }
-  
+function changeStatement(event)
+{
+    displayIV = event.target.value;
+    optionsData = getPlotOptions()
+}
   
   function getPlotOptions() {
     let dates = [];
     let priceList = [];
-    let iv60List = [];
+    let ivList = [];
     let realizedVolatility = [];
 
     // Iterate over the data and extract required information
@@ -77,7 +62,7 @@ function findLowestAndhighestIV(data, lastDateStr) {
   
     dates?.push(item?.date);
     priceList?.push(item?.stockpx);
-    iv60List?.push(item?.iv60)
+    ivList?.push(item[displayIV])
     realizedVolatility?.push(item['60dorhv'])
 
     });
@@ -86,16 +71,10 @@ function findLowestAndhighestIV(data, lastDateStr) {
     findLowestAndhighestIV(rawData, rawData?.slice(-1)?.at(0)?.date)
 
    // Calculate IV Rank
-    const lowestIV = Math.min(...iv60List); // Find the lowest IV in the past
-    const highestIV = Math.max(...iv60List); // Find the highest IV in the past
-    ivRank = ((iv60List?.slice(-1) - lowestIV) / (highestIV - lowestIV) * 100).toFixed(2); // Compute IV Rank
+    const lowestIV = Math.min(...ivList); // Find the lowest IV in the past
+    const highestIV = Math.max(...ivList); // Find the highest IV in the past
+    ivRank = ((ivList?.slice(-1) - lowestIV) / (highestIV - lowestIV) * 100).toFixed(2); // Compute IV Rank
 
-    // Compute the average of item?.traded
-    const totalNumber = iv60List?.reduce((acc, item) => acc + item, 0);
-    avgFee = (totalNumber / iv60List?.length)?.toFixed(1);
-    totalAvailableShares = priceList?.reduce((accumulator, sum) => {
-        return accumulator + sum;
-    }, 0);
 
   
     const option = {
@@ -104,7 +83,7 @@ function findLowestAndhighestIV(data, lastDateStr) {
         trigger: 'axis',
         hideDelay: 100, // Set the delay in milliseconds
     },
-    animation: $screenWidth < 640 ? false: true,
+    animation: false,
     grid: {
         left: '0%',
         right: '0%',
@@ -166,7 +145,7 @@ function findLowestAndhighestIV(data, lastDateStr) {
         },
         {
             name: 'IV',
-            data: iv60List,
+            data: ivList,
             type: 'line',
             areaStyle: {opacity: 0.3},
             stack: 'ImpliedVolatility',
@@ -231,6 +210,7 @@ function findLowestAndhighestIV(data, lastDateStr) {
   $: {
   if($assetType === 'stock' ? $stockTicker : $etfTicker && typeof window !== 'undefined') {
     isLoaded=false;
+    displayIV = 'iv60';
     const ticker = $assetType === 'stock' ? $stockTicker : $etfTicker
     const asyncFunctions = [
       getImpliedVolatility(ticker)
@@ -273,12 +253,27 @@ function findLowestAndhighestIV(data, lastDateStr) {
   
         {#if rawData?.length !== 0}
   
-        <div class="w-full flex flex-col items-start">
+        <div class="w-full flex flex-col items-start mb-2">
             <div class="text-white text-[1rem] mt-2 mb-2 w-full">
                 Based on the past 12 months of historical data, {$displayCompanyName} has an IV Rank of <span class="font-semibold">{ivRank}%</span>, with the current implied volatility standing at <span class="font-semibold">{rawData?.slice(-1)?.at(0)?.iv60}%</span>.
             </div>
         </div>
+
+        <select class="mt-5 mb-5 sm:mb-0 sm:mt-3 ml-1 w-44 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]" on:change={changeStatement}>
+            <option disabled>Choose IV Period</option>
+            <option selected value="iv60">
+              60 Day IV
+            </option>
+            <option value="iv90">
+              90 Day IV
+            </option>
+            <option value="252dclshv">
+              1 Year historical volatility
+            </option>
+        </select>
   
+
+
         <div class="pb-2 rounded-lg bg-[#09090B]">
                 
           
diff --git a/src/lib/components/shadcn/Table/table.svelte b/src/lib/components/shadcn/Table/table.svelte
index 92b02485..05f345b1 100644
--- a/src/lib/components/shadcn/Table/table.svelte
+++ b/src/lib/components/shadcn/Table/table.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLTableAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils
 
 	type $$Props = HTMLTableAttributes;
 
diff --git a/src/lib/components/shadcn/accordion/accordion-item.svelte b/src/lib/components/shadcn/accordion/accordion-item.svelte
index 4a59da84..1d4335bd 100644
--- a/src/lib/components/shadcn/accordion/accordion-item.svelte
+++ b/src/lib/components/shadcn/accordion/accordion-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = AccordionPrimitive.ItemProps;
 
diff --git a/src/lib/components/shadcn/accordion/accordion-trigger.svelte b/src/lib/components/shadcn/accordion/accordion-trigger.svelte
index 82abdc8d..8b844102 100644
--- a/src/lib/components/shadcn/accordion/accordion-trigger.svelte
+++ b/src/lib/components/shadcn/accordion/accordion-trigger.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from "bits-ui";
 	import ChevronDown from "lucide-svelte/icons/chevron-down";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = AccordionPrimitive.TriggerProps;
 	type $$Events = AccordionPrimitive.TriggerEvents;
diff --git a/src/lib/components/shadcn/button/button.svelte b/src/lib/components/shadcn/button/button.svelte
index 5324c5bd..af4ebaca 100644
--- a/src/lib/components/shadcn/button/button.svelte
+++ b/src/lib/components/shadcn/button/button.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Button as ButtonPrimitive } from "bits-ui";
 	import { type Events, type Props, buttonVariants } from "./index.ts";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = Props;
 	type $$Events = Events;
diff --git a/src/lib/components/shadcn/card/card-content.svelte b/src/lib/components/shadcn/card/card-content.svelte
index 90121bdc..2240a27d 100644
--- a/src/lib/components/shadcn/card/card-content.svelte
+++ b/src/lib/components/shadcn/card/card-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
diff --git a/src/lib/components/shadcn/card/card-description.svelte b/src/lib/components/shadcn/card/card-description.svelte
index dd8fe383..811ea7b9 100644
--- a/src/lib/components/shadcn/card/card-description.svelte
+++ b/src/lib/components/shadcn/card/card-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLParagraphElement>;
 
diff --git a/src/lib/components/shadcn/card/card-footer.svelte b/src/lib/components/shadcn/card/card-footer.svelte
index 91b1ef98..ba73765d 100644
--- a/src/lib/components/shadcn/card/card-footer.svelte
+++ b/src/lib/components/shadcn/card/card-footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
diff --git a/src/lib/components/shadcn/card/card-header.svelte b/src/lib/components/shadcn/card/card-header.svelte
index 536d04c3..6161140d 100644
--- a/src/lib/components/shadcn/card/card-header.svelte
+++ b/src/lib/components/shadcn/card/card-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
diff --git a/src/lib/components/shadcn/card/card-title.svelte b/src/lib/components/shadcn/card/card-title.svelte
index b49b05f6..3a618547 100644
--- a/src/lib/components/shadcn/card/card-title.svelte
+++ b/src/lib/components/shadcn/card/card-title.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
 	import type { HeadingLevel } from "./index.ts";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
 		tag?: HeadingLevel;
diff --git a/src/lib/components/shadcn/card/card.svelte b/src/lib/components/shadcn/card/card.svelte
index 0c7c92a1..8b80d4bc 100644
--- a/src/lib/components/shadcn/card/card.svelte
+++ b/src/lib/components/shadcn/card/card.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
diff --git a/src/lib/components/shadcn/command/command-empty.svelte b/src/lib/components/shadcn/command/command-empty.svelte
index f22e8f0d..777c3166 100644
--- a/src/lib/components/shadcn/command/command-empty.svelte
+++ b/src/lib/components/shadcn/command/command-empty.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = CommandPrimitive.EmptyProps;
 	let className: string | undefined | null = undefined;
diff --git a/src/lib/components/shadcn/command/command-group.svelte b/src/lib/components/shadcn/command/command-group.svelte
index 8f631712..deaba959 100644
--- a/src/lib/components/shadcn/command/command-group.svelte
+++ b/src/lib/components/shadcn/command/command-group.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 	type $$Props = CommandPrimitive.GroupProps;
 
 	let className: string | undefined | null = undefined;
diff --git a/src/lib/components/shadcn/command/command-input.svelte b/src/lib/components/shadcn/command/command-input.svelte
index 96410584..4e5ac7f0 100644
--- a/src/lib/components/shadcn/command/command-input.svelte
+++ b/src/lib/components/shadcn/command/command-input.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "cmdk-sv";
 	import Search from "lucide-svelte/icons/search";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = CommandPrimitive.InputProps;
 
diff --git a/src/lib/components/shadcn/command/command-item.svelte b/src/lib/components/shadcn/command/command-item.svelte
index 9b97c9da..f63b94d3 100644
--- a/src/lib/components/shadcn/command/command-item.svelte
+++ b/src/lib/components/shadcn/command/command-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = CommandPrimitive.ItemProps;
 
diff --git a/src/lib/components/shadcn/command/command-list.svelte b/src/lib/components/shadcn/command/command-list.svelte
index 30f9bf67..87d88882 100644
--- a/src/lib/components/shadcn/command/command-list.svelte
+++ b/src/lib/components/shadcn/command/command-list.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = CommandPrimitive.ListProps;
 	let className: string | undefined | null = undefined;
diff --git a/src/lib/components/shadcn/command/command-separator.svelte b/src/lib/components/shadcn/command/command-separator.svelte
index 930408ac..fee00f50 100644
--- a/src/lib/components/shadcn/command/command-separator.svelte
+++ b/src/lib/components/shadcn/command/command-separator.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = CommandPrimitive.SeparatorProps;
 	let className: string | undefined | null = undefined;
diff --git a/src/lib/components/shadcn/command/command-shortcut.svelte b/src/lib/components/shadcn/command/command-shortcut.svelte
index 8450bfe6..ae066326 100644
--- a/src/lib/components/shadcn/command/command-shortcut.svelte
+++ b/src/lib/components/shadcn/command/command-shortcut.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 
diff --git a/src/lib/components/shadcn/command/command.svelte b/src/lib/components/shadcn/command/command.svelte
index ad20fa58..104ad14f 100644
--- a/src/lib/components/shadcn/command/command.svelte
+++ b/src/lib/components/shadcn/command/command.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = CommandPrimitive.CommandProps;
 
diff --git a/src/lib/components/shadcn/dialog/dialog-content.svelte b/src/lib/components/shadcn/dialog/dialog-content.svelte
index ea07e4e6..bb4b1d28 100644
--- a/src/lib/components/shadcn/dialog/dialog-content.svelte
+++ b/src/lib/components/shadcn/dialog/dialog-content.svelte
@@ -2,7 +2,7 @@
 	import { Dialog as DialogPrimitive } from "bits-ui";
 	import X from "lucide-svelte/icons/x";
 	import * as Dialog from "./index.js";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { cn, flyAndScale } from "$lib/utils";
 
 	type $$Props = DialogPrimitive.ContentProps;
 
diff --git a/src/lib/components/shadcn/dialog/dialog-description.svelte b/src/lib/components/shadcn/dialog/dialog-description.svelte
index 360f5c7e..82976fd2 100644
--- a/src/lib/components/shadcn/dialog/dialog-description.svelte
+++ b/src/lib/components/shadcn/dialog/dialog-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = DialogPrimitive.DescriptionProps;
 
diff --git a/src/lib/components/shadcn/dialog/dialog-footer.svelte b/src/lib/components/shadcn/dialog/dialog-footer.svelte
index 12b1e024..9ed3a226 100644
--- a/src/lib/components/shadcn/dialog/dialog-footer.svelte
+++ b/src/lib/components/shadcn/dialog/dialog-footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
diff --git a/src/lib/components/shadcn/dialog/dialog-header.svelte b/src/lib/components/shadcn/dialog/dialog-header.svelte
index ab921592..ee6a0d67 100644
--- a/src/lib/components/shadcn/dialog/dialog-header.svelte
+++ b/src/lib/components/shadcn/dialog/dialog-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
diff --git a/src/lib/components/shadcn/dialog/dialog-overlay.svelte b/src/lib/components/shadcn/dialog/dialog-overlay.svelte
index 0263c03e..b46fa081 100644
--- a/src/lib/components/shadcn/dialog/dialog-overlay.svelte
+++ b/src/lib/components/shadcn/dialog/dialog-overlay.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from "bits-ui";
 	import { fade } from "svelte/transition";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = DialogPrimitive.OverlayProps;
 
diff --git a/src/lib/components/shadcn/dialog/dialog-title.svelte b/src/lib/components/shadcn/dialog/dialog-title.svelte
index 6cf42445..713bb41b 100644
--- a/src/lib/components/shadcn/dialog/dialog-title.svelte
+++ b/src/lib/components/shadcn/dialog/dialog-title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = DialogPrimitive.TitleProps;
 
diff --git a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-checkbox-item.svelte b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-checkbox-item.svelte
index 94c0c1d6..e385c9e2 100644
--- a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import Check from "lucide-svelte/icons/check";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
 	type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;
diff --git a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-content.svelte b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-content.svelte
index ac42f6fe..abc5290e 100644
--- a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-content.svelte
+++ b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { cn, flyAndScale } from "$lib/utils";
 
 	type $$Props = DropdownMenuPrimitive.ContentProps;
 	type $$Events = DropdownMenuPrimitive.ContentEvents;
diff --git a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-item.svelte b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-item.svelte
index 28859bf0..fa588970 100644
--- a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-item.svelte
+++ b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = DropdownMenuPrimitive.ItemProps & {
 		inset?: boolean;
diff --git a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-label.svelte b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-label.svelte
index 1a316dd7..c31899c3 100644
--- a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-label.svelte
+++ b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-label.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = DropdownMenuPrimitive.LabelProps & {
 		inset?: boolean;
diff --git a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-radio-item.svelte b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-radio-item.svelte
index db4afc92..a4c896f6 100644
--- a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import Circle from "lucide-svelte/icons/circle";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = DropdownMenuPrimitive.RadioItemProps;
 	type $$Events = DropdownMenuPrimitive.RadioItemEvents;
diff --git a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-separator.svelte b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-separator.svelte
index 77b18c8a..9143b8e5 100644
--- a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-separator.svelte
+++ b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-separator.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = DropdownMenuPrimitive.SeparatorProps;
 
diff --git a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-shortcut.svelte b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-shortcut.svelte
index 46323fc3..9a62fe6d 100644
--- a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 
diff --git a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-sub-content.svelte b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-sub-content.svelte
index 79498863..0c79dae9 100644
--- a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { cn, flyAndScale } from "$lib/utils";
 
 	type $$Props = DropdownMenuPrimitive.SubContentProps;
 	type $$Events = DropdownMenuPrimitive.SubContentEvents;
diff --git a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-sub-trigger.svelte b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-sub-trigger.svelte
index fcdb402d..54b0c35a 100644
--- a/src/lib/components/shadcn/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/src/lib/components/shadcn/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import ChevronRight from "lucide-svelte/icons/chevron-right";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
 		inset?: boolean;
diff --git a/src/lib/components/shadcn/input/input.svelte b/src/lib/components/shadcn/input/input.svelte
index df49d859..04102bd0 100644
--- a/src/lib/components/shadcn/input/input.svelte
+++ b/src/lib/components/shadcn/input/input.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from "svelte/elements";
 	import type { InputEvents } from "./index.ts";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLInputAttributes;
 	type $$Events = InputEvents;
diff --git a/src/lib/components/shadcn/progress/progress.svelte b/src/lib/components/shadcn/progress/progress.svelte
index 6eea9021..d02b0bbb 100644
--- a/src/lib/components/shadcn/progress/progress.svelte
+++ b/src/lib/components/shadcn/progress/progress.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Progress as ProgressPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = ProgressPrimitive.Props;
 
diff --git a/src/lib/components/shadcn/select/index.ts b/src/lib/components/shadcn/select/index.ts
new file mode 100644
index 00000000..055d161b
--- /dev/null
+++ b/src/lib/components/shadcn/select/index.ts
@@ -0,0 +1,34 @@
+import { Select as SelectPrimitive } from "bits-ui";
+
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+
+const Root = SelectPrimitive.Root;
+const Group = SelectPrimitive.Group;
+const Input = SelectPrimitive.Input;
+const Value = SelectPrimitive.Value;
+
+export {
+	Root,
+	Group,
+	Input,
+	Label,
+	Item,
+	Value,
+	Content,
+	Trigger,
+	Separator,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	Input as SelectInput,
+	Label as SelectLabel,
+	Item as SelectItem,
+	Value as SelectValue,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator,
+};
\ No newline at end of file
diff --git a/src/lib/components/shadcn/select/select-content.svelte b/src/lib/components/shadcn/select/select-content.svelte
new file mode 100644
index 00000000..f46aa890
--- /dev/null
+++ b/src/lib/components/shadcn/select/select-content.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { scale } from "svelte/transition";
+	import { cn, flyAndScale } from "$lib/utils";
+
+	type $$Props = SelectPrimitive.ContentProps;
+	type $$Events = SelectPrimitive.ContentEvents;
+
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let inTransition: $$Props["inTransition"] = flyAndScale;
+	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
+	export let outTransition: $$Props["outTransition"] = scale;
+	export let outTransitionConfig: $$Props["outTransitionConfig"] = {
+		start: 0.95,
+		opacity: 0,
+		duration: 50,
+	};
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Content
+	{inTransition}
+	{inTransitionConfig}
+	{outTransition}
+	{outTransitionConfig}
+	{sideOffset}
+	class={cn(
+		"bg-[#09090B] text-white relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-gray-800 shadow-md outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+>
+	<div class="w-full p-1">
+		<slot />
+	</div>
+</SelectPrimitive.Content>
\ No newline at end of file
diff --git a/src/lib/components/shadcn/select/select-item.svelte b/src/lib/components/shadcn/select/select-item.svelte
new file mode 100644
index 00000000..698ca343
--- /dev/null
+++ b/src/lib/components/shadcn/select/select-item.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import Check from "lucide-svelte/icons/check";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SelectPrimitive.ItemProps;
+	type $$Events = SelectPrimitive.ItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export let label: $$Props["label"] = undefined;
+	export let disabled: $$Props["disabled"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Item
+	{value}
+	{disabled}
+	{label}
+	class={cn(
+		"data-[highlighted]:bg-[#27272A] data-[highlighted]:text-white relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<SelectPrimitive.ItemIndicator>
+			<Check class="h-4 w-4" />
+		</SelectPrimitive.ItemIndicator>
+	</span>
+	<slot>
+		{label || value}
+	</slot>
+</SelectPrimitive.Item>
\ No newline at end of file
diff --git a/src/lib/components/shadcn/select/select-label.svelte b/src/lib/components/shadcn/select/select-label.svelte
new file mode 100644
index 00000000..35d8b2e5
--- /dev/null
+++ b/src/lib/components/shadcn/select/select-label.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SelectPrimitive.LabelProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Label
+	class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+	{...$$restProps}
+>
+	<slot />
+</SelectPrimitive.Label>
\ No newline at end of file
diff --git a/src/lib/components/shadcn/select/select-separator.svelte b/src/lib/components/shadcn/select/select-separator.svelte
new file mode 100644
index 00000000..69761482
--- /dev/null
+++ b/src/lib/components/shadcn/select/select-separator.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SelectPrimitive.SeparatorProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Separator class={cn("bg-muted -mx-1 my-1 h-px", className)} {...$$restProps} />
\ No newline at end of file
diff --git a/src/lib/components/shadcn/select/select-trigger.svelte b/src/lib/components/shadcn/select/select-trigger.svelte
new file mode 100644
index 00000000..e3c5ad64
--- /dev/null
+++ b/src/lib/components/shadcn/select/select-trigger.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SelectPrimitive.TriggerProps;
+	type $$Events = SelectPrimitive.TriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Trigger
+	class={cn(
+		"border-input bg-[#09090B] ring-offset-background focus-visible:ring-ring aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-white flex h-10 w-full items-center justify-between rounded-md border border-gray-800 px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+	on:click
+	on:keydown
+>
+	<slot {builder} />
+	<div>
+		<ChevronDown class="h-4 w-4 opacity-50" />
+	</div>
+</SelectPrimitive.Trigger>
\ No newline at end of file
diff --git a/src/lib/components/shadcn/table/table-body.svelte b/src/lib/components/shadcn/table/table-body.svelte
index 10ba9da5..e17a78f6 100644
--- a/src/lib/components/shadcn/table/table-body.svelte
+++ b/src/lib/components/shadcn/table/table-body.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 
diff --git a/src/lib/components/shadcn/table/table-caption.svelte b/src/lib/components/shadcn/table/table-caption.svelte
index a5cb08b9..1919d612 100644
--- a/src/lib/components/shadcn/table/table-caption.svelte
+++ b/src/lib/components/shadcn/table/table-caption.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLTableCaptionElement>;
 
diff --git a/src/lib/components/shadcn/table/table-cell.svelte b/src/lib/components/shadcn/table/table-cell.svelte
index 1977ce52..c45da44b 100644
--- a/src/lib/components/shadcn/table/table-cell.svelte
+++ b/src/lib/components/shadcn/table/table-cell.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLTdAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLTdAttributes;
 
diff --git a/src/lib/components/shadcn/table/table-footer.svelte b/src/lib/components/shadcn/table/table-footer.svelte
index 5291e2fe..486bc2ba 100644
--- a/src/lib/components/shadcn/table/table-footer.svelte
+++ b/src/lib/components/shadcn/table/table-footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 
diff --git a/src/lib/components/shadcn/table/table-head.svelte b/src/lib/components/shadcn/table/table-head.svelte
index e6276641..c754950e 100644
--- a/src/lib/components/shadcn/table/table-head.svelte
+++ b/src/lib/components/shadcn/table/table-head.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLThAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLThAttributes;
 
diff --git a/src/lib/components/shadcn/table/table-header.svelte b/src/lib/components/shadcn/table/table-header.svelte
index de377f2e..309343c2 100644
--- a/src/lib/components/shadcn/table/table-header.svelte
+++ b/src/lib/components/shadcn/table/table-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 
diff --git a/src/lib/components/shadcn/table/table-row.svelte b/src/lib/components/shadcn/table/table-row.svelte
index 298cf563..23cce62b 100644
--- a/src/lib/components/shadcn/table/table-row.svelte
+++ b/src/lib/components/shadcn/table/table-row.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils";
 
 	type $$Props = HTMLAttributes<HTMLTableRowElement> & {
 		"data-state"?: unknown;
diff --git a/src/lib/components/shadcn/tooltip/tooltip-content.svelte b/src/lib/components/shadcn/tooltip/tooltip-content.svelte
index a9f76b76..55b7c702 100644
--- a/src/lib/components/shadcn/tooltip/tooltip-content.svelte
+++ b/src/lib/components/shadcn/tooltip/tooltip-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Tooltip as TooltipPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { cn, flyAndScale } from "$lib/utils";
 
 	type $$Props = TooltipPrimitive.ContentProps;
 
diff --git a/src/routes/dark-pool-flow/+page.svelte b/src/routes/dark-pool-flow/+page.svelte
index ad5f8ea5..d1650c9e 100644
--- a/src/routes/dark-pool-flow/+page.svelte
+++ b/src/routes/dark-pool-flow/+page.svelte
@@ -2,7 +2,7 @@
   import { numberOfUnreadNotification, screenWidth, isOpen } from '$lib/store';
   import { onMount, onDestroy } from 'svelte';
   import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
-  import { abbreviateNumber } from '$lib/utils.js';
+  import { abbreviateNumber } from '$lib/utils';
   import { goto } from '$app/navigation';
   
     export let data;