diff --git a/package-lock.json b/package-lock.json
index 157e7239..6ab685ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "blob-util": "^2.0.2",
         "cheerio": "^1.0.0-rc.12",
         "clsx": "^2.1.1",
+        "cmdk-sv": "^0.0.18",
         "compression": "^1.7.4",
         "d3-hierarchy": "^3.1.2",
         "d3-sankey": "^0.12.3",
@@ -3927,6 +3928,35 @@
         "node": ">=6"
       }
     },
+    "node_modules/cmdk-sv": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/cmdk-sv/-/cmdk-sv-0.0.18.tgz",
+      "integrity": "sha512-istixiQSy9Ez/mQ4VXWB69btqNyDZckbd1XFEwR46Vw+n5zjdmvoWAcOTj0uX3FZXtw9ikwLVmfoW2nwwMClRg==",
+      "dependencies": {
+        "bits-ui": "^0.21.12",
+        "nanoid": "^5.0.7"
+      },
+      "peerDependencies": {
+        "svelte": "^4.0.0 || ^5.0.0-next.1"
+      }
+    },
+    "node_modules/cmdk-sv/node_modules/nanoid": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz",
+      "integrity": "sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
     "node_modules/code-red": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
diff --git a/package.json b/package.json
index 81922428..35105794 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "blob-util": "^2.0.2",
     "cheerio": "^1.0.0-rc.12",
     "clsx": "^2.1.1",
+    "cmdk-sv": "^0.0.18",
     "compression": "^1.7.4",
     "d3-hierarchy": "^3.1.2",
     "d3-sankey": "^0.12.3",
diff --git a/src/lib/components/shadcn/command/command-dialog.svelte b/src/lib/components/shadcn/command/command-dialog.svelte
new file mode 100644
index 00000000..8f339079
--- /dev/null
+++ b/src/lib/components/shadcn/command/command-dialog.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Dialog as DialogPrimitive } from "bits-ui";
+	import type { Command as CommandPrimitive } from "cmdk-sv";
+	import Command from "./command.svelte";
+	import * as Dialog from "$lib/components/shadcn/dialog/index.js";
+
+	type $$Props = DialogPrimitive.Props & CommandPrimitive.CommandProps;
+
+	export let open: $$Props["open"] = false;
+	export let value: $$Props["value"] = undefined;
+</script>
+
+<Dialog.Root bind:open {...$$restProps}>
+	<Dialog.Content class="overflow-hidden p-0 shadow-lg">
+		<Command
+			class="[&_[data-cmdk-group-heading]]:text-muted-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[data-cmdk-group]]:px-2 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-cmdk-input]]:h-12 [&_[data-cmdk-item]]:px-2 [&_[data-cmdk-item]]:py-3 [&_[data-cmdk-item]_svg]:h-5 [&_[data-cmdk-item]_svg]:w-5"
+			{...$$restProps}
+			bind:value
+		>
+			<slot />
+		</Command>
+	</Dialog.Content>
+</Dialog.Root>
\ No newline at end of file
diff --git a/src/lib/components/shadcn/command/command-empty.svelte b/src/lib/components/shadcn/command/command-empty.svelte
new file mode 100644
index 00000000..f22e8f0d
--- /dev/null
+++ b/src/lib/components/shadcn/command/command-empty.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CommandPrimitive.EmptyProps;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...$$restProps}>
+	<slot />
+</CommandPrimitive.Empty>
\ No newline at end of file
diff --git a/src/lib/components/shadcn/command/command-group.svelte b/src/lib/components/shadcn/command/command-group.svelte
new file mode 100644
index 00000000..8f631712
--- /dev/null
+++ b/src/lib/components/shadcn/command/command-group.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils.js";
+	type $$Props = CommandPrimitive.GroupProps;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Group
+	class={cn(
+		"text-foreground [&_[data-cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:py-1.5 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-medium",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</CommandPrimitive.Group>
\ No newline at end of file
diff --git a/src/lib/components/shadcn/command/command-input.svelte b/src/lib/components/shadcn/command/command-input.svelte
new file mode 100644
index 00000000..96410584
--- /dev/null
+++ b/src/lib/components/shadcn/command/command-input.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import Search from "lucide-svelte/icons/search";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CommandPrimitive.InputProps;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+	export let value: string = "";
+</script>
+
+<div class="flex items-center border-b px-2" data-cmdk-input-wrapper="">
+	<Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+	<CommandPrimitive.Input
+		class={cn(
+			"placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+			className
+		)}
+		{...$$restProps}
+		bind:value
+	/>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/shadcn/command/command-item.svelte b/src/lib/components/shadcn/command/command-item.svelte
new file mode 100644
index 00000000..9b97c9da
--- /dev/null
+++ b/src/lib/components/shadcn/command/command-item.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CommandPrimitive.ItemProps;
+
+	export let asChild = false;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Item
+	{asChild}
+	class={cn(
+		"text-white sm:hover:bg-[#27272A] sm:hover:text-white aria-selected:bg-[#27272A] aria-selected:text-white relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	let:action
+	let:attrs
+>
+	<slot {action} {attrs} />
+</CommandPrimitive.Item>
\ No newline at end of file
diff --git a/src/lib/components/shadcn/command/command-list.svelte b/src/lib/components/shadcn/command/command-list.svelte
new file mode 100644
index 00000000..30f9bf67
--- /dev/null
+++ b/src/lib/components/shadcn/command/command-list.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CommandPrimitive.ListProps;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.List
+	class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+	{...$$restProps}
+>
+	<slot />
+</CommandPrimitive.List>
\ No newline at end of file
diff --git a/src/lib/components/shadcn/command/command-separator.svelte b/src/lib/components/shadcn/command/command-separator.svelte
new file mode 100644
index 00000000..930408ac
--- /dev/null
+++ b/src/lib/components/shadcn/command/command-separator.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CommandPrimitive.SeparatorProps;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Separator class={cn("bg-border -mx-1 h-px", className)} {...$$restProps} />
\ No newline at end of file
diff --git a/src/lib/components/shadcn/command/command-shortcut.svelte b/src/lib/components/shadcn/command/command-shortcut.svelte
new file mode 100644
index 00000000..8450bfe6
--- /dev/null
+++ b/src/lib/components/shadcn/command/command-shortcut.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<span
+	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+	{...$$restProps}
+>
+	<slot />
+</span>
\ No newline at end of file
diff --git a/src/lib/components/shadcn/command/command.svelte b/src/lib/components/shadcn/command/command.svelte
new file mode 100644
index 00000000..ad20fa58
--- /dev/null
+++ b/src/lib/components/shadcn/command/command.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CommandPrimitive.CommandProps;
+
+	export let value: $$Props["value"] = undefined;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Root
+	class={cn(
+		"bg-[#09090B] text-white flex h-full w-full flex-col overflow-hidden rounded-md",
+		className
+	)}
+	bind:value
+	{...$$restProps}
+>
+	<slot />
+</CommandPrimitive.Root>
\ No newline at end of file
diff --git a/src/lib/components/shadcn/command/index.ts b/src/lib/components/shadcn/command/index.ts
new file mode 100644
index 00000000..a646126d
--- /dev/null
+++ b/src/lib/components/shadcn/command/index.ts
@@ -0,0 +1,37 @@
+import { Command as CommandPrimitive } from "cmdk-sv";
+
+import Root from "./command.svelte";
+import Dialog from "./command-dialog.svelte";
+import Empty from "./command-empty.svelte";
+import Group from "./command-group.svelte";
+import Item from "./command-item.svelte";
+import Input from "./command-input.svelte";
+import List from "./command-list.svelte";
+import Separator from "./command-separator.svelte";
+import Shortcut from "./command-shortcut.svelte";
+
+const Loading = CommandPrimitive.Loading;
+
+export {
+	Root,
+	Dialog,
+	Empty,
+	Group,
+	Item,
+	Input,
+	List,
+	Separator,
+	Shortcut,
+	Loading,
+	//
+	Root as Command,
+	Dialog as CommandDialog,
+	Empty as CommandEmpty,
+	Group as CommandGroup,
+	Item as CommandItem,
+	Input as CommandInput,
+	List as CommandList,
+	Separator as CommandSeparator,
+	Shortcut as CommandShortcut,
+	Loading as CommandLoading,
+};
\ No newline at end of file
diff --git a/src/lib/components/shadcn/dialog/dialog-content.svelte b/src/lib/components/shadcn/dialog/dialog-content.svelte
new file mode 100644
index 00000000..ea07e4e6
--- /dev/null
+++ b/src/lib/components/shadcn/dialog/dialog-content.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	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";
+
+	type $$Props = DialogPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 200,
+	};
+	export { className as class };
+</script>
+
+<Dialog.Portal>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		{transition}
+		{transitionConfig}
+		class={cn(
+			"bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg md:w-full",
+			className
+		)}
+		{...$$restProps}
+	>
+		<slot />
+		<DialogPrimitive.Close
+			class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+		>
+			<X class="h-4 w-4" />
+			<span class="sr-only">Close</span>
+		</DialogPrimitive.Close>
+	</DialogPrimitive.Content>
+</Dialog.Portal>
\ No newline at end of file
diff --git a/src/lib/components/shadcn/dialog/dialog-description.svelte b/src/lib/components/shadcn/dialog/dialog-description.svelte
new file mode 100644
index 00000000..360f5c7e
--- /dev/null
+++ b/src/lib/components/shadcn/dialog/dialog-description.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DialogPrimitive.DescriptionProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Description
+	class={cn("text-muted-foreground text-sm", className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Description>
\ No newline at end of file
diff --git a/src/lib/components/shadcn/dialog/dialog-footer.svelte b/src/lib/components/shadcn/dialog/dialog-footer.svelte
new file mode 100644
index 00000000..12b1e024
--- /dev/null
+++ b/src/lib/components/shadcn/dialog/dialog-footer.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
\ No newline at end of file
diff --git a/src/lib/components/shadcn/dialog/dialog-header.svelte b/src/lib/components/shadcn/dialog/dialog-header.svelte
new file mode 100644
index 00000000..ab921592
--- /dev/null
+++ b/src/lib/components/shadcn/dialog/dialog-header.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...$$restProps}>
+	<slot />
+</div>
\ No newline at end of file
diff --git a/src/lib/components/shadcn/dialog/dialog-overlay.svelte b/src/lib/components/shadcn/dialog/dialog-overlay.svelte
new file mode 100644
index 00000000..0263c03e
--- /dev/null
+++ b/src/lib/components/shadcn/dialog/dialog-overlay.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { fade } from "svelte/transition";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DialogPrimitive.OverlayProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = fade;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 150,
+	};
+	export { className as class };
+</script>
+
+<DialogPrimitive.Overlay
+	{transition}
+	{transitionConfig}
+	class={cn("bg-background/80 fixed inset-0 z-50 backdrop-blur-sm", className)}
+	{...$$restProps}
+/>
\ No newline at end of file
diff --git a/src/lib/components/shadcn/dialog/dialog-portal.svelte b/src/lib/components/shadcn/dialog/dialog-portal.svelte
new file mode 100644
index 00000000..872304d8
--- /dev/null
+++ b/src/lib/components/shadcn/dialog/dialog-portal.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	type $$Props = DialogPrimitive.PortalProps;
+</script>
+
+<DialogPrimitive.Portal {...$$restProps}>
+	<slot />
+</DialogPrimitive.Portal>
\ No newline at end of file
diff --git a/src/lib/components/shadcn/dialog/dialog-title.svelte b/src/lib/components/shadcn/dialog/dialog-title.svelte
new file mode 100644
index 00000000..6cf42445
--- /dev/null
+++ b/src/lib/components/shadcn/dialog/dialog-title.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DialogPrimitive.TitleProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Title
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Title>
\ No newline at end of file
diff --git a/src/lib/components/shadcn/dialog/index.ts b/src/lib/components/shadcn/dialog/index.ts
new file mode 100644
index 00000000..702e1221
--- /dev/null
+++ b/src/lib/components/shadcn/dialog/index.ts
@@ -0,0 +1,37 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+
+import Title from "./dialog-title.svelte";
+import Portal from "./dialog-portal.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+
+const Root = DialogPrimitive.Root;
+const Trigger = DialogPrimitive.Trigger;
+const Close = DialogPrimitive.Close;
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose,
+};
\ No newline at end of file
diff --git a/src/lib/components/shadcn/popover/index.ts b/src/lib/components/shadcn/popover/index.ts
new file mode 100644
index 00000000..3f14fa45
--- /dev/null
+++ b/src/lib/components/shadcn/popover/index.ts
@@ -0,0 +1,17 @@
+import { Popover as PopoverPrimitive } from "bits-ui";
+import Content from "./popover-content.svelte";
+const Root = PopoverPrimitive.Root;
+const Trigger = PopoverPrimitive.Trigger;
+const Close = PopoverPrimitive.Close;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	Close,
+	//
+	Root as Popover,
+	Content as PopoverContent,
+	Trigger as PopoverTrigger,
+	Close as PopoverClose,
+};
\ No newline at end of file
diff --git a/src/lib/components/shadcn/popover/popover-content.svelte b/src/lib/components/shadcn/popover/popover-content.svelte
new file mode 100644
index 00000000..9372ebcb
--- /dev/null
+++ b/src/lib/components/shadcn/popover/popover-content.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = PopoverPrimitive.ContentProps;
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export { className as class };
+</script>
+
+<PopoverPrimitive.Content
+	{transition}
+	{transitionConfig}
+	class={cn(
+		"bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</PopoverPrimitive.Content>
\ No newline at end of file
diff --git a/src/routes/economic-calendar/+page.svelte b/src/routes/economic-calendar/+page.svelte
index 04cf1de9..d6e67120 100644
--- a/src/routes/economic-calendar/+page.svelte
+++ b/src/routes/economic-calendar/+page.svelte
@@ -1,283 +1,98 @@
-
 <script lang="ts">
-
-    import { format, startOfWeek, addDays, addWeeks, subWeeks, differenceInWeeks } from 'date-fns'
-    import { screenWidth,  numberOfUnreadNotification } from '$lib/store';
-    import logo from '$lib/images/transcripts_logo.png';
-	  import ScrollToTop from '$lib/components/ScrollToTop.svelte';
-    import { listOfCountries } from '$lib/utils';
-    
-    export let data;
-    let rawData;
-    let filterList = [];
-    let weekdayFiltered = [];
-
-  async function handleFilter(e,newFilter) {
-    //e.preventDefault(); Weird bug but if you click on input box the blue checkmark does not appear when this line is included
-    //changeRuleFilter = true;
-    const filterSet = new Set(filterList);
+  import { format, startOfWeek, addDays, addWeeks, subWeeks, differenceInWeeks } from 'date-fns';
+  import { screenWidth, numberOfUnreadNotification } from '$lib/store';
+  import logo from '$lib/images/transcripts_logo.png';
+  import ScrollToTop from '$lib/components/ScrollToTop.svelte';
+  import { listOfCountries } from '$lib/utils';
   
-    // 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);
+  export let data;
+  let rawData;
+  let filterList = [];
+  let weekdayFiltered = [];
+  let syncWorker: Worker | undefined;
   
-    }
-    filterList = Array?.from(filterSet);
-    
-    if (filterList?.length !== 0) {
-      await loadWorker()
-    }
-    else {
-      weekday = rawData;
-    }
-    
+  const maxWeeksChange = 4;
+  const today = new Date();
+  let currentWeek = startOfWeek(today, { weekStartsOn: 1 });
+  let previousMax = false;
+  let nextMax = false;
   
+  $: economicCalendar = data?.getEconomicCalendar;
+  $: daysOfWeek = getDaysOfWeek(currentWeek);
+  $: formattedWeekday = daysOfWeek.map(day => format(day.date, "EEE, MMM d"));
+  $: weekday = getWeekdayData(economicCalendar, daysOfWeek);
+  $: rawData = weekday;
+  $: previousMax = differenceInWeeks(currentWeek, today) <= -maxWeeksChange;
+  $: nextMax = differenceInWeeks(currentWeek, today) >= maxWeeksChange;
+  
+  let currentDate = new Date();
+  let selectedWeekday = Math.min((currentDate.getDay() + 6) % 7, 4);
+  
+  function getDaysOfWeek(week) {
+      const startDate = startOfWeek(week, { weekStartsOn: 1 });
+      return Array.from({ length: 5 }, (_, i) => ({
+          name: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'][i],
+          date: addDays(startDate, i)
+      }));
   }
-
-let syncWorker: Worker | undefined = undefined;
-
-// Handling messages from the worker
-const handleMessage = async (event) => {
-    const finalData = event.data?.finalData
-    weekdayFiltered = finalData?.output ?? [];
-};
-
-const loadWorker = async () => {
-  const SyncWorker = await import('./workers/filterWorker?worker');
-  syncWorker = new SyncWorker.default();
-  syncWorker.postMessage({ rawData: rawData, filterList: filterList});
-  syncWorker.onmessage = handleMessage;
-
-};
-
-
-
-
-
-
-    let currentWeek = startOfWeek(new Date(), { weekStartsOn: 1 });
-    let economicCalendar = data?.getEconomicCalendar;
-    const maxWeeksChange = 4; // Maximum allowed week change
-    let previousMax = false;
-    let nextMax = false;
-    const today = new Date();
-  
-    let formattedMonday = startOfWeek(currentWeek, { weekStartsOn: 1 });
-    let formattedTuesday = format( addDays(formattedMonday, 1), "EEE, MMM d");
-    let formattedWednesday = format( addDays(formattedMonday, 2), "EEE, MMM d");
-    let formattedThursday = format( addDays(formattedMonday, 3), "EEE, MMM d");
-    let formattedFriday = format( addDays(formattedMonday, 4), "EEE, MMM d");
-    formattedMonday = format( formattedMonday, "EEE, MMM d");
-  
-    let formattedWeekday = [formattedMonday, formattedTuesday,formattedWednesday, formattedThursday, formattedFriday];
-    let weekday = [];
-  
-  
-    let startDate = startOfWeek(currentWeek, { weekStartsOn: 1 });
-    let endDate = addDays(startDate, 4);
-    let formattedStartDate = format(startDate, "yyyy-MM-dd");
-    let formattedEndDate = format(endDate, "yyyy-MM-dd");
-    let daysOfWeek = [
-        {
-          name: "Monday",
-          date: formattedStartDate,
-        },
-        {
-          name: "Tuesday",
-          date: format(addDays(startDate, 1), "yyyy-MM-dd"),
-        },
-        {
-          name: "Wednesday",
-          date: format(addDays(startDate, 2), "yyyy-MM-dd"),
-        },
-        {
-          name: "Thursday",
-          date: format(addDays(startDate, 3), "yyyy-MM-dd"),
-        },
-        {
-          name: "Friday",
-          date: formattedEndDate,
-        },
-      ];
-  
-    
-  
-    let currentDate = new Date();
-    let currentWeekday = Math.min((currentDate.getDay() + 6) % 7, 4);
-    let selectedWeekday = currentWeekday;
-    
-  
-    function toggleDate(index)
-    {
-      if($screenWidth > 640) {
-        selectedWeekday = index
-      }
-    }
-  
-  function clickWeekday (state, index)  {
-  
-      if (state==='next' && selectedWeekday+1 <=4)
-      {
-        selectedWeekday = selectedWeekday +1;
-      }
-      else if( state === 'previous' && selectedWeekday-1 >=0)
-      {
-        selectedWeekday --;
-      }
-  
-      else if (state=== 'previous' && index === 0 && differenceInWeeks(currentWeek, today) > -maxWeeksChange)
-      {
-        changeWeek(state)
-        selectedWeekday = 4;
-      }
-      else if (state=== 'next' && index === 4 && differenceInWeeks(currentWeek, today) < maxWeeksChange)
-      {
-        changeWeek(state)
-        selectedWeekday = 0;
-      }
-    
-    }
-  
-  async function changeWeek(state) {
-  
-    //Limit the user to go back max 4 weeks and look forward 4 weeks
-    if (state === 'previous' && differenceInWeeks(currentWeek, today) > -maxWeeksChange) {
-      currentWeek = subWeeks(currentWeek, 1);
-    } else if (state === 'next' && differenceInWeeks(currentWeek, today) < maxWeeksChange) {
-      currentWeek = addWeeks(currentWeek, 1);
-    }
-  
-  
-    formattedMonday = startOfWeek(currentWeek, { weekStartsOn: 1 });
-    formattedTuesday = format( addDays(formattedMonday, 1), "EEE, MMM d");
-    formattedWednesday = format( addDays(formattedMonday, 2), "EEE, MMM d");
-    formattedThursday = format( addDays(formattedMonday, 3), "EEE, MMM d");
-    formattedFriday = format( addDays(formattedMonday, 4), "EEE, MMM d");
-    formattedMonday = format( formattedMonday, "EEE, MMM d");
-  
-    formattedWeekday = [formattedMonday, formattedTuesday,formattedWednesday, formattedThursday, formattedFriday];
-    weekday = [];
-  
-    startDate = startOfWeek(currentWeek, { weekStartsOn: 1 });
-    endDate = addDays(startDate, 4);
-    formattedStartDate = format(startDate, "yyyy-MM-dd");
-    formattedEndDate = format(endDate, "yyyy-MM-dd");
-    daysOfWeek = [
-        {
-          name: "Monday",
-          date: formattedStartDate,
-        },
-        {
-          name: "Tuesday",
-          date: format(addDays(startDate, 1), "yyyy-MM-dd"),
-        },
-        {
-          name: "Wednesday",
-          date: format(addDays(startDate, 2), "yyyy-MM-dd"),
-        },
-        {
-          name: "Thursday",
-          date: format(addDays(startDate, 3), "yyyy-MM-dd"),
-        },
-        {
-          name: "Friday",
-          date: formattedEndDate,
-        },
-      ];
-  
-    economicCalendar = daysOfWeek.map((day) => {
-      return {
-        name: day?.name,
-        data: data?.getEconomicCalendar?.filter(
-          (item) => item.date === day.date
-        ),
-      };
-    });
-  
-
-    if (economicCalendar?.length) {
-        // Loop through each day of the week
-        for (let i = 0; i < economicCalendar?.length; i++) {
-          const dayData = economicCalendar[i].data;
-  
-          // Filter out entries with company name "---"
-  
-          // Sort and map the filtered data
-          weekday[i] = dayData
-        }
-  
-    }
-  
   
+  function getWeekdayData(calendar, days) {
+      if (!calendar) return [];
+      return days.map(day => {
+          const dayData = calendar.filter(item => item.date === format(day.date, "yyyy-MM-dd"));
+          return dayData.sort((a, b) => new Date(`1970-01-01T${a.time}`) - new Date(`1970-01-01T${b.time}`));
+      });
   }
+  
+  async function handleFilter(e, newFilter) {
+      const filterSet = new Set(filterList);
+      filterSet.has(newFilter) ? filterSet.delete(newFilter) : filterSet.add(newFilter);
+      filterList = Array.from(filterSet);
       
-  $: {
-    if(economicCalendar && typeof window !== 'undefined')
-    {
-      economicCalendar = daysOfWeek?.map((day) => {
-          return {
-            name: day.name,
-            data: data?.getEconomicCalendar?.filter(
-              (item) => item.date === day.date
-            ),
-          };
-        });
-  
-        if (economicCalendar?.length) {
-            // Loop through each day of the week
-            for (let i = 0; i < economicCalendar?.length; i++) {
-              const dayData = economicCalendar[i].data;
-              //Sort by earliest time
-              weekday[i] = dayData?.sort((a, b) => new Date(`1970-01-01T${a.time}`) - new Date(`1970-01-01T${b.time}`));
-
-            }
-
-            rawData = weekday;
-      
-        }
-  
-    }
+      if (filterList.length !== 0) {
+          await loadWorker();
+      } else {
+          weekday = rawData;
+      }
   }
   
-  $: {
-    if (currentWeek)
-    {
+  const handleMessage = (event) => {
+      weekdayFiltered = event.data?.finalData?.output ?? [];
+  };
   
-      if (differenceInWeeks(currentWeek, today) > -maxWeeksChange)
-      {
-        previousMax = false;
+  const loadWorker = async () => {
+      if (!syncWorker) {
+          const SyncWorker = await import('./workers/filterWorker?worker');
+          syncWorker = new SyncWorker.default();
+          syncWorker.onmessage = handleMessage;
       }
-      else {
-        previousMax = true;
+      syncWorker.postMessage({ rawData, filterList });
+  };
+  
+  function toggleDate(index) {
+      if ($screenWidth > 640) {
+          selectedWeekday = index;
       }
-    }
   }
   
-  $: {
-    if (currentWeek)
-    {
-      if (differenceInWeeks(currentWeek, today) < maxWeeksChange)
-      {
-        nextMax = false;
+  function clickWeekday(state, index) {
+      if (state === 'next' && selectedWeekday < 4) {
+          selectedWeekday++;
+      } else if (state === 'previous' && selectedWeekday > 0) {
+          selectedWeekday--;
+      } else if (state === 'previous' && index === 0 && !previousMax) {
+          changeWeek('previous');
+          selectedWeekday = 4;
+      } else if (state === 'next' && index === 4 && !nextMax) {
+          changeWeek('next');
+          selectedWeekday = 0;
       }
-      else {
-        nextMax = true;
-      }
-    }
   }
-    
-
-  $: {
-    if(filterList) {
-      console.log(filterList)
-    }
+  
+  function changeWeek(state) {
+      currentWeek = state === 'previous' ? subWeeks(currentWeek, 1) : addWeeks(currentWeek, 1);
   }
-</script>
-        
+  </script>
       
   <svelte:head>
   
@@ -364,7 +179,6 @@ const loadWorker = async () => {
                 <!-- Content area -->
                 <div class="relative flex flex-col flex-1 overflow-hidden">
       
-                      
                 <!-- Cards -->
                 <div class=" w-full flex flex-row justify-center m-auto items-center pl-2 pr-2 sm:pl-0 sm:pr-0">
                     <!-- Start Columns -->
@@ -416,20 +230,8 @@ const loadWorker = async () => {
   
   <!-- Dropdown menu -->
   
-  <ul tabindex="0" class="z-30 dropdown-content p-2 shadow bg-base-100 rounded w-60 h-72 oveflow-hidden overflow-y-scroll">
-    <!--
-    <div class="p-3">
-      <label for="input-group-search" class="sr-only">Search</label>
-      <div class="relative">
-        <div class="absolute inset-y-0 rtl:inset-r-0 start-0 flex items-center ps-3 pointer-events-none">
-          <svg class="w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
-          </svg>
-        </div>
-        <input type="text" id="input-group-search" class="block w-full p-2 ps-10 text-sm placeholder-white text-white border border-gray-300 rounded-lg bg-[#202327] focus:ring-blue-500 focus:border-blue-500 " placeholder="Search Country">
-      </div>
-    </div>
-    -->
+  <ul tabindex="0" class="z-30 dropdown-content p-2 shadow bg-[#1D232A] rounded w-60 h-72 oveflow-hidden overflow-y-scroll">
+
     <div class="mb-3 mt-1 ml-1">
       <span class="text-white text-sm mb-2">
         Popular