diff --git a/src/lib/images/newsletter.png:Zone.Identifier b/src/lib/images/newsletter.png:Zone.Identifier
deleted file mode 100644
index 85d14576..00000000
--- a/src/lib/images/newsletter.png:Zone.Identifier
+++ /dev/null
@@ -1,4 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=https://imagecompressor.com/
-HostUrl=https://imagecompressor.com/download/14lao7515uhpe1k0/file_og81ulb1md5krt1k6agg91hav1/Screenshot%202025-01-16%20112032-min.png
diff --git a/src/lib/images/trump-avatar.jpeg b/src/lib/images/trump-avatar.jpeg
new file mode 100644
index 00000000..7b1612d1
Binary files /dev/null and b/src/lib/images/trump-avatar.jpeg differ
diff --git a/src/lib/images/uw_x_stocknear.jpg:Zone.Identifier b/src/lib/images/uw_x_stocknear.jpg:Zone.Identifier
deleted file mode 100644
index a45e1ac4..00000000
--- a/src/lib/images/uw_x_stocknear.jpg:Zone.Identifier
+++ /dev/null
@@ -1,2 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
diff --git a/src/lib/images/visual_mod.webp:Zone.Identifier b/src/lib/images/visual_mod.webp:Zone.Identifier
deleted file mode 100644
index 92c07c11..00000000
--- a/src/lib/images/visual_mod.webp:Zone.Identifier
+++ /dev/null
@@ -1,4 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=https://useast-pb.stocknear.com/_/
-HostUrl=https://useast-pb.stocknear.com/api/files/_pb_users_auth_/9ncz4wunmhk0k52/profile_icon_kof6ixwefd4c1_n9a6Ljm6rj.webp?token=
diff --git a/src/routes/potus-tracker/+page.svelte b/src/routes/potus-tracker/+page.svelte
index aa0221a9..716651f6 100644
--- a/src/routes/potus-tracker/+page.svelte
+++ b/src/routes/potus-tracker/+page.svelte
@@ -1,13 +1,33 @@
 <script lang="ts">
   import SEO from "$lib/components/SEO.svelte";
-  import Map from "$lib/components/Map.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
-  import ArrowLogo from "lucide-svelte/icons/move-up-right";
+  import highcharts from "$lib/highcharts.ts";
+  import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
+  import { Button } from "$lib/components/shadcn/button/index.js";
+  import { sectorList } from "$lib/utils";
+  import avatar from "$lib/images/trump-avatar.jpeg";
 
   export let data;
 
+  const updatedSectorList = ["S&P500", ...sectorList];
+
   let rawData = data?.getData?.history || [];
   let executiveOrders = data?.getData?.executiveOrders || [];
+  let selectedSector = "S&P500";
+  const sectorDict = {
+    "S&P500": "SPY",
+    "Basic Materials": "XLB",
+    "Communication Services": "XLC",
+    Energy: "XLE",
+    "Financial Services": "XLF",
+    Industrials: "XLI",
+    Technology: "XLK",
+    "Consumer Defensive": "XLP",
+    "Real Estate": "XLRE",
+    Utilities: "XLU",
+    Healthcare: "XLV",
+    "Consumer Cyclical": "XLY",
+  };
 
   const groupedByDate = rawData?.reduce((acc, item) => {
     const dateKey = new Intl.DateTimeFormat("en-US", {
@@ -43,10 +63,9 @@
   ];
 
   let activeIdx = 0;
-
   let expandedDescriptions: { [key: string]: boolean } = {};
 
-  function truncateText(text: string, maxLength: number = 250) {
+  function truncateText(text: string, maxLength: number = 300) {
     if (text.length <= maxLength) return text;
     return text.slice(0, maxLength) + "...";
   }
@@ -75,6 +94,105 @@
     // Return whether the difference is less than or equal to 1 day
     return differenceInDays <= 2;
   }
+
+  function plotData() {
+    // Transform raw data into arrays for Highcharts
+    const rawData =
+      data?.getData?.marketPerformance[sectorDict[selectedSector]];
+
+    // Convert data into arrays for Highcharts
+    const categories = Object.keys(rawData);
+    const values = Object.values(rawData);
+
+    const options = {
+      credits: {
+        enabled: false,
+      },
+      chart: {
+        type: "column",
+        backgroundColor: "#09090B",
+        plotBackgroundColor: "#09090B",
+        height: 360,
+        animation: false,
+      },
+      title: {
+        text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-xl">${selectedSector} - Performance</h3>`,
+        style: {
+          color: "white",
+        },
+        useHTML: true,
+      },
+      xAxis: {
+        categories: categories,
+        gridLineWidth: 0,
+        labels: {
+          style: { color: "white" },
+        },
+      },
+      yAxis: {
+        gridLineWidth: 1,
+        gridLineColor: "#111827",
+        labels: {
+          style: { color: "white" },
+          formatter: function () {
+            return this.value + "%"; // Add percentage symbol
+          },
+        },
+        title: { text: null },
+        opposite: true,
+      },
+      tooltip: {
+        enabled: false,
+      },
+      plotOptions: {
+        series: {
+          color: "white",
+          animation: false,
+          dataLabels: {
+            enabled: true,
+            color: "white",
+            style: {
+              fontSize: "13px",
+              fontWeight: "bold",
+            },
+            formatter: function () {
+              return this.y.toFixed(2) + "%"; // Add percentage symbol
+            },
+          },
+        },
+      },
+      legend: {
+        enabled: false,
+      },
+      series: [
+        {
+          name: "Performance",
+          data: values,
+          zones: [
+            {
+              value: 0, // Values below 0
+              color: "#E02424", // Red
+              borderColor: "#E02424", // Red border
+            },
+            {
+              color: "#10B981", // Green for values 0 and above
+              borderColor: "#10B981", // Green border
+            },
+          ],
+        },
+      ],
+    };
+
+    return options;
+  }
+
+  let config = null;
+
+  $: {
+    if (selectedSector) {
+      config = plotData() || null;
+    }
+  }
 </script>
 
 <SEO
@@ -112,320 +230,422 @@
             <div class="mt-5 mb-5">
               <Infobox
                 text={`Since the inauguration of Donald J. Trump on January 20, 2025, the 
-  S&P500 has ${data?.getData?.returnSince >= 0 ? "grown" : "declined"} by <span class="${data?.getData?.returnSince >= 0 ? "text-[#00FC50] before:content-['+']" : "text-[#FF2F1F]"}">
-  ${data?.getData?.returnSince ?? "n/a"}%</span>.`}
+  ${selectedSector} has ${data?.getData?.marketPerformance[sectorDict[selectedSector]]["Inauguration"] >= 0 ? "grown" : "declined"} by <span class="${data?.getData?.marketPerformance[sectorDict[selectedSector]]["Inauguration"] >= 0 ? "text-[#00FC50] before:content-['+']" : "text-[#FF2F1F]"}">
+  ${data?.getData?.marketPerformance[sectorDict[selectedSector]]["Inauguration"] ?? "n/a"}%</span>.`}
               />
             </div>
 
-            <h2
-              class="text-white text-[1rem] sm:text-xl font-semibold mb-2 mt-4"
-            >
-              The President is in {(data?.getData?.city === "Washington" ||
-              data?.getData?.city === null
-                ? "the White House"
-                : data?.getData?.city) ?? "n/a"}
-            </h2>
-
-            <div class="w-full m-auto border border-gray-800 rounded-[10px]">
-              <Map LAT={data?.getData?.lat} LON={data?.getData?.lon} />
-            </div>
-            <span class="text-gray-300 text-xs">
-              Map data © OpenStreetMap
-            </span>
-
-            <h3
-              class="text-white text-lg sm:text-xl font-semibold mb-2 mt-6 border-y border-gray-800 pt-2 pb-2"
-            >
-              Official Presidential Schedule
-            </h3>
-            <div
-              class="max-h-[600px] overflow-y-auto border border-gray-800 rounded-md p-4 no-scrollbar"
-            >
-              <div class="space-y-4">
-                {#each Object.entries(groupedByDate) as [date, items], indexA}
-                  <div class="my-4">
-                    <div
-                      class="border-b border-gray-200 pb-2 w-full flex flex-row items-center justify-between"
+            <div class="flex flex-row items-center w-fit ml-auto mt-2 sm:mt-0">
+              <div class="relative inline-block text-left grow">
+                <DropdownMenu.Root>
+                  <DropdownMenu.Trigger asChild let:builder>
+                    <Button
+                      builders={[builder]}
+                      class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
                     >
-                      <span class="text-[1rem] font-semibold text-white">
-                        {date}</span
+                      <span class="truncate text-white">{selectedSector}</span>
+                      <svg
+                        class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        style="max-width:40px"
+                        aria-hidden="true"
                       >
-                      {#if items?.at(0)?.changesPercentage}
-                        <div class="ml-auto text-sm">
-                          <span class="inline-block">S&P500</span>
-                          <span
-                            class="{items?.at(0)?.changesPercentage > 0
-                              ? "text-[#00FC50] before:content-['+']"
-                              : 'text-[#FF2F1F]'} "
-                            >{items.length > 0
-                              ? items?.at(0)?.changesPercentage
-                              : "n/a"}%</span
+                        <path
+                          fill-rule="evenodd"
+                          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                          clip-rule="evenodd"
+                        ></path>
+                      </svg>
+                    </Button>
+                  </DropdownMenu.Trigger>
+                  <DropdownMenu.Content
+                    class="w-56 h-fit max-h-72 overflow-y-auto scroller"
+                  >
+                    <DropdownMenu.Label class="text-gray-400">
+                      Select Sector
+                    </DropdownMenu.Label>
+                    <DropdownMenu.Separator />
+                    <DropdownMenu.Group>
+                      {#each updatedSectorList as sector}
+                        {#if sector === "S&P500" || data?.user?.tier === "Pro"}
+                          <DropdownMenu.Item
+                            on:click={() => (selectedSector = sector)}
+                            class="cursor-pointer hover:bg-primary"
                           >
-                        </div>
-                      {/if}
-                    </div>
-                    <!-- Display date -->
-                    <br />
-                    {#each items as item, indexB}
-                      <div class="flex flex-col items-start space-y-1 mb-6">
-                        <div class="flex flex-row items-center space-x-2">
-                          <div class="relative">
+                            {sector}
+                          </DropdownMenu.Item>
+                        {:else}
+                          <DropdownMenu.Item
+                            on:click={() => goto("/pricing")}
+                            class="cursor-pointer hover:bg-primary"
+                          >
+                            {sector}
                             <svg
-                              fill={indexA === 0 && indexB === 0
-                                ? "#2E86DE"
-                                : "#808080"}
-                              class="w-5 h-5 relative z-10"
-                              viewBox="-51.2 -51.2 614.40 614.40"
-                              id="_78_Circle-Full"
-                              xmlns="http://www.w3.org/2000/svg"
-                              stroke={indexA === 0 && indexB === 0
-                                ? "#2E86DE"
-                                : "#808080"}
-                              stroke-width="0.00512"
+                              class="ml-1 size-4"
+                              viewBox="0 0 20 20"
+                              fill="currentColor"
+                              style="max-width: 40px;"
                             >
-                              <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-                              <g
-                                id="SVGRepo_tracerCarrier"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke="#CCCCCC"
-                                stroke-width="24.576"
-                              ></g>
-                              <g id="SVGRepo_iconCarrier">
-                                <path
-                                  id="Path_111"
-                                  data-name="Path 111"
-                                  d="M256,512C114.625,512,0,397.375,0,256S114.625,0,256,0,512,114.625,512,256,397.375,512,256,512Zm0-448C149.969,64,64,149.969,64,256s85.969,192,192,192,192-85.969,192-192S362.031,64,256,64Zm0,320A128,128,0,1,1,384,256,128.006,128.006,0,0,1,256,384Z"
-                                  fill-rule="evenodd"
-                                ></path>
-                              </g>
+                              <path
+                                fill-rule="evenodd"
+                                d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
+                                clip-rule="evenodd"
+                              >
+                              </path>
                             </svg>
+                          </DropdownMenu.Item>
+                        {/if}
+                      {/each}
+                    </DropdownMenu.Group>
+                  </DropdownMenu.Content>
+                </DropdownMenu.Root>
+              </div>
+            </div>
 
-                            {#if indexA === 0 && indexB === 0}
-                              <span
-                                class="absolute -inset-1 rounded-full animate-ping w-3 h-3 m-auto bg-blue-400/75"
-                              ></span>
-                            {/if}
+            <div
+              class="chart mt-5 border border-gray-800 rounded"
+              use:highcharts={config}
+            ></div>
+
+            <nav
+              class=" border-b-[2px] whitespace-nowrap mt-10 sm:mt-6 overflow-hidden"
+            >
+              <ul
+                class="flex flex-row items-center w-full text-[1rem] text-white"
+              >
+                {#each tabs as item, i}
+                  <button
+                    on:click={() => (activeIdx = i)}
+                    class="p-2 px-5 cursor-pointer {activeIdx === i
+                      ? 'text-white bg-primary sm:hover:bg-opacity-[0.95] font-semibold'
+                      : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                  >
+                    {item.title}
+                  </button>
+                {/each}
+              </ul>
+            </nav>
+
+            {#if activeIdx === 0}
+              <h3
+                class="text-white text-lg sm:text-xl font-semibold mb-2 mt-6 border-y border-gray-800 pt-2 pb-2"
+              >
+                Official Presidential Schedule
+              </h3>
+              <div
+                class="max-h-[600px] overflow-y-auto border border-gray-800 rounded-md p-4 no-scrollbar"
+              >
+                <div class="space-y-4">
+                  {#each Object.entries(groupedByDate) as [date, items], indexA}
+                    <div class="my-4">
+                      <div
+                        class="border-b border-gray-600 pb-2 w-full flex flex-row items-center justify-between"
+                      >
+                        <span
+                          class="text-[1rem] sm:text-lg font-semibold text-white"
+                        >
+                          {date}</span
+                        >
+                        {#if items?.at(0)?.changesPercentage}
+                          <div class="ml-auto text-sm">
+                            <span class="inline-block">S&P500</span>
+                            <span
+                              class="{items?.at(0)?.changesPercentage > 0
+                                ? "text-[#00FC50] before:content-['+']"
+                                : 'text-[#FF2F1F]'} "
+                              >{items.length > 0
+                                ? items?.at(0)?.changesPercentage
+                                : "n/a"}%</span
+                            >
+                          </div>
+                        {/if}
+                      </div>
+                      <!-- Display date -->
+                      <br />
+                      {#each items as item, indexB}
+                        <div class="flex flex-col items-start space-y-1 mb-6">
+                          <div class="flex flex-row items-center space-x-2">
+                            <div class="relative">
+                              <svg
+                                fill={indexA === 0 && indexB === 0
+                                  ? "#2E86DE"
+                                  : "#808080"}
+                                class="w-5 h-5 relative z-10"
+                                viewBox="-51.2 -51.2 614.40 614.40"
+                                id="_78_Circle-Full"
+                                xmlns="http://www.w3.org/2000/svg"
+                                stroke={indexA === 0 && indexB === 0
+                                  ? "#2E86DE"
+                                  : "#808080"}
+                                stroke-width="0.00512"
+                              >
+                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                                <g
+                                  id="SVGRepo_tracerCarrier"
+                                  stroke-linecap="round"
+                                  stroke-linejoin="round"
+                                  stroke="#CCCCCC"
+                                  stroke-width="24.576"
+                                ></g>
+                                <g id="SVGRepo_iconCarrier">
+                                  <path
+                                    id="Path_111"
+                                    data-name="Path 111"
+                                    d="M256,512C114.625,512,0,397.375,0,256S114.625,0,256,0,512,114.625,512,256,397.375,512,256,512Zm0-448C149.969,64,64,149.969,64,256s85.969,192,192,192,192-85.969,192-192S362.031,64,256,64Zm0,320A128,128,0,1,1,384,256,128.006,128.006,0,0,1,256,384Z"
+                                    fill-rule="evenodd"
+                                  ></path>
+                                </g>
+                              </svg>
+
+                              {#if indexA === 0 && indexB === 0}
+                                <span
+                                  class="absolute -inset-1 rounded-full animate-ping w-3 h-3 m-auto bg-blue-400/75"
+                                ></span>
+                              {/if}
+                            </div>
+
+                            <span class="text-sm text-gray-400">
+                              {item.time_formatted}
+                              {item.location !== null
+                                ? `- ${item?.location}`
+                                : ""}
+                            </span>
                           </div>
 
-                          <span class="text-sm text-gray-400">
-                            {item.time_formatted}
-                            {item.location !== null
-                              ? `- ${item?.location}`
-                              : ""}
+                          <span class="text-sm ml-7">
+                            {item.details}
                           </span>
                         </div>
-
-                        <span class="text-sm ml-7">
-                          {item.details}
-                        </span>
-                      </div>
-                    {/each}
-                  </div>
-                {/each}
-              </div>
-            </div>
-          </div>
-
-          <div
-            class="order-4 flex-shrink-0 lg:float-right lg:w-[336px] no-scrollbar overflow-y-auto"
-          >
-            <h3 class="text-white text-lg sm:text-xl font-semibold mb-2 mt-6">
-              Executive Actions
-            </h3>
-            <div
-              class="max-h-[600px] overflow-y-auto border border-gray-800 rounded-md p-4 no-scrollbar"
-            >
-              <div class="space-y-4">
-                {#each Object.entries(groupedOrders) as [date, items], indexA}
-                  <div class="my-4">
-                    <div
-                      class="border-b border-gray-300 pb-2 flex flex-row items-center"
-                    >
-                      <span class="text-lg font-semibold text-white"
-                        >{date}</span
-                      >
-                      {#if latestInfoDate(date)}
-                        <label
-                          class="bg-[#fff] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3 inline-block"
-                          >New</label
-                        >
-                      {/if}
+                      {/each}
                     </div>
-                    <br />
-
-                    {#each items as item, indexB}
+                  {/each}
+                </div>
+              </div>
+            {:else}
+              <h3
+                class="text-white text-lg sm:text-xl font-semibold mb-2 mt-6 border-y border-gray-800 pt-2 pb-2"
+              >
+                Executive Actions
+              </h3>
+              <div
+                class="max-h-[600px] overflow-y-auto border border-gray-800 rounded-md p-4 no-scrollbar"
+              >
+                <div class="space-y-4">
+                  {#each Object.entries(groupedOrders) as [date, items], indexA}
+                    <div class="my-4">
                       <div
-                        class="flex flex-col items-start space-y-1 mb-6 border-b border-gray-800 pb-4"
+                        class="border-b border-gray-600 pb-2 flex flex-row items-center"
                       >
-                        <div class="flex flex-row items-center space-x-2">
-                          <div class="relative">
+                        <span class="text-[1rem] font-semibold text-white"
+                          >{date}</span
+                        >
+                        {#if latestInfoDate(date)}
+                          <label
+                            class="bg-[#fff] rounded text-black font-semibold text-xs px-2 py-0.5 ml-3 inline-block"
+                            >New</label
+                          >
+                        {/if}
+                      </div>
+                      <br />
+
+                      {#each items as item, indexB}
+                        <div
+                          class="flex flex-col items-start space-y-1 mb-6 border-b border-gray-800 pb-4"
+                        >
+                          <div class="flex items-start space-x-3">
+                            <img
+                              class="w-10 h-10 rounded-full flex-shrink-0"
+                              src={avatar}
+                              alt="Avatar"
+                              loading="lazy"
+                            />
+
+                            <div class="flex flex-col w-full">
+                              <h3 class="text-white font-semibold">
+                                {item?.title}
+                              </h3>
+
+                              <div
+                                class={`mt-1 px-3 py-1 rounded text-xs sm:text-sm font-medium w-fit
+        ${
+          item?.sentiment === "Bullish"
+            ? "bg-emerald-500 text-white"
+            : item?.sentiment === "Bearish"
+              ? "bg-red-600 text-white"
+              : "bg-gray-200 text-black"
+        }`}
+                              >
+                                {item?.sentiment}
+                              </div>
+                            </div>
+                          </div>
+
+                          <span class="text-sm ml-14 pt-2">
+                            {#if item.description.length > 150}
+                              {expandedDescriptions[item.title]
+                                ? item.description
+                                : truncateText(item.description)}
+                              <button
+                                on:click={() =>
+                                  (expandedDescriptions[item.title] =
+                                    !expandedDescriptions[item.title])}
+                                class="text-blue-400 hover:text-blue-300 ml-1 font-medium"
+                              >
+                                {expandedDescriptions[item.title]
+                                  ? "Read less"
+                                  : "Read more"}
+                              </button>
+                            {:else}
+                              {item.description}
+                            {/if}
+                          </span>
+
+                          <a
+                            href={item?.link}
+                            rel="noopener noreferrer"
+                            target="_blank"
+                            class="ml-14 inline-block text-sm text-white hover:underline"
+                          >
+                            Source
                             <svg
-                              fill={indexA === 0 && indexB === 0
-                                ? "#2E86DE"
-                                : "#808080"}
-                              class="w-5 h-5 relative z-10"
-                              viewBox="-51.2 -51.2 614.40 614.40"
-                              id="_78_Circle-Full"
+                              class="w-4 h-4 sm:w-5 sm:h-5 -mt-0.5 inline-block"
+                              fill="#fff"
+                              viewBox="0 0 64 64"
+                              version="1.1"
                               xmlns="http://www.w3.org/2000/svg"
-                              stroke={indexA === 0 && indexB === 0
-                                ? "#2E86DE"
-                                : "#808080"}
-                              stroke-width="0.00512"
-                            >
-                              <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-                              <g
+                              xmlns:xlink="http://www.w3.org/1999/xlink"
+                              xml:space="preserve"
+                              xmlns:serif="http://www.serif.com/"
+                              style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+                              ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
                                 id="SVGRepo_tracerCarrier"
                                 stroke-linecap="round"
                                 stroke-linejoin="round"
-                                stroke="#CCCCCC"
-                                stroke-width="24.576"
-                              ></g>
-                              <g id="SVGRepo_iconCarrier">
-                                <path
-                                  id="Path_111"
-                                  data-name="Path 111"
-                                  d="M256,512C114.625,512,0,397.375,0,256S114.625,0,256,0,512,114.625,512,256,397.375,512,256,512Zm0-448C149.969,64,64,149.969,64,256s85.969,192,192,192,192-85.969,192-192S362.031,64,256,64Zm0,320A128,128,0,1,1,384,256,128.006,128.006,0,0,1,256,384Z"
-                                  fill-rule="evenodd"
-                                ></path>
-                              </g>
-                            </svg>
-
-                            {#if indexA === 0 && indexB === 0}
-                              <span
-                                class="absolute -inset-1 rounded-full animate-ping w-3 h-3 m-auto bg-blue-400/75"
-                              ></span>
-                            {/if}
-                          </div>
-
-                          <div
-                            class="text-sm flex flex-col items-start w-full mb-1"
-                          >
-                            <span
-                              class="text-white text-lg font-semibold inline-block"
-                              >{item.title}</span
+                              ></g><g id="SVGRepo_iconCarrier">
+                                <rect
+                                  id="Icons"
+                                  x="-896"
+                                  y="0"
+                                  width="1280"
+                                  height="800"
+                                  style="fill:none;"
+                                ></rect>
+                                <g id="Icons1" serif:id="Icons">
+                                  <g id="Strike"> </g> <g id="H1"> </g>
+                                  <g id="H2"> </g> <g id="H3"> </g>
+                                  <g id="list-ul"> </g>
+                                  <g id="hamburger-1"> </g>
+                                  <g id="hamburger-2"> </g>
+                                  <g id="list-ol"> </g>
+                                  <g id="list-task"> </g> <g id="trash"> </g>
+                                  <g id="vertical-menu"> </g>
+                                  <g id="horizontal-menu"> </g>
+                                  <g id="sidebar-2"> </g> <g id="Pen"> </g>
+                                  <g id="Pen1" serif:id="Pen"> </g>
+                                  <g id="clock"> </g>
+                                  <g id="external-link">
+                                    <path
+                                      d="M36.026,20.058l-21.092,0c-1.65,0 -2.989,1.339 -2.989,2.989l0,25.964c0,1.65 1.339,2.989 2.989,2.989l26.024,0c1.65,0 2.989,-1.339 2.989,-2.989l0,-20.953l3.999,0l0,21.948c0,3.308 -2.686,5.994 -5.995,5.995l-28.01,0c-3.309,0 -5.995,-2.687 -5.995,-5.995l0,-27.954c0,-3.309 2.686,-5.995 5.995,-5.995l22.085,0l0,4.001Z"
+                                    ></path>
+                                    <path
+                                      d="M55.925,25.32l-4.005,0l0,-10.481l-27.894,27.893l-2.832,-2.832l27.895,-27.895l-10.484,0l0,-4.005l17.318,0l0.002,0.001l0,17.319Z"
+                                    ></path>
+                                  </g> <g id="hr"> </g> <g id="info"> </g>
+                                  <g id="warning"> </g>
+                                  <g id="plus-circle"> </g>
+                                  <g id="minus-circle"> </g> <g id="vue"> </g>
+                                  <g id="cog"> </g> <g id="logo"> </g>
+                                  <g id="radio-check"> </g>
+                                  <g id="eye-slash"> </g> <g id="eye"> </g>
+                                  <g id="toggle-off"> </g>
+                                  <g id="shredder"> </g>
+                                  <g
+                                    id="spinner--loading--dots-"
+                                    serif:id="spinner [loading, dots]"
+                                  >
+                                  </g> <g id="react"> </g>
+                                  <g id="check-selected"> </g>
+                                  <g id="turn-off"> </g>
+                                  <g id="code-block"> </g>
+                                  <g id="user"> </g> <g id="coffee-bean"> </g>
+                                  <g id="coffee-beans">
+                                    <g id="coffee-bean1" serif:id="coffee-bean">
+                                    </g>
+                                  </g> <g id="coffee-bean-filled"> </g>
+                                  <g id="coffee-beans-filled">
+                                    <g id="coffee-bean2" serif:id="coffee-bean">
+                                    </g>
+                                  </g> <g id="clipboard"> </g>
+                                  <g id="clipboard-paste"> </g>
+                                  <g id="clipboard-copy"> </g>
+                                  <g id="Layer1"> </g>
+                                </g>
+                              </g></svg
                             >
-                          </div>
+                          </a>
                         </div>
-
-                        <div
-                          class="ml-7 {item?.sentiment === 'Bullish'
-                            ? 'bg-emerald-500 text-white'
-                            : item?.sentiment === 'Bearish'
-                              ? 'bg-red-600 text-white'
-                              : 'bg-white text-black'} py-1 rounded text-xs sm:text-sm w-fit px-2 font-medium"
-                        >
-                          {item?.sentiment}
-                        </div>
-
-                        <span class="text-[1rem] ml-7 pt-2">
-                          {#if item.description.length > 150}
-                            {expandedDescriptions[item.title]
-                              ? item.description
-                              : truncateText(item.description)}
-                            <button
-                              on:click={() =>
-                                (expandedDescriptions[item.title] =
-                                  !expandedDescriptions[item.title])}
-                              class="text-blue-400 hover:text-blue-300 ml-1 font-medium"
-                            >
-                              {expandedDescriptions[item.title]
-                                ? "Read less"
-                                : "Read more"}
-                            </button>
-                          {:else}
-                            {item.description}
-                          {/if}
-                        </span>
-
-                        <a
-                          href={item?.link}
-                          rel="noopener noreferrer"
-                          target="_blank"
-                          class="ml-7 inline-block text-sm sm:text-[1rem] text-white hover:underline"
-                        >
-                          Source
-                          <svg
-                            class="w-4 h-4 sm:w-5 sm:h-5 -mt-0.5 inline-block"
-                            fill="#fff"
-                            viewBox="0 0 64 64"
-                            version="1.1"
-                            xmlns="http://www.w3.org/2000/svg"
-                            xmlns:xlink="http://www.w3.org/1999/xlink"
-                            xml:space="preserve"
-                            xmlns:serif="http://www.serif.com/"
-                            style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
-                            ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
-                              id="SVGRepo_tracerCarrier"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                            ></g><g id="SVGRepo_iconCarrier">
-                              <rect
-                                id="Icons"
-                                x="-896"
-                                y="0"
-                                width="1280"
-                                height="800"
-                                style="fill:none;"
-                              ></rect>
-                              <g id="Icons1" serif:id="Icons">
-                                <g id="Strike"> </g> <g id="H1"> </g>
-                                <g id="H2"> </g> <g id="H3"> </g>
-                                <g id="list-ul"> </g>
-                                <g id="hamburger-1"> </g>
-                                <g id="hamburger-2"> </g>
-                                <g id="list-ol"> </g>
-                                <g id="list-task"> </g> <g id="trash"> </g>
-                                <g id="vertical-menu"> </g>
-                                <g id="horizontal-menu"> </g>
-                                <g id="sidebar-2"> </g> <g id="Pen"> </g>
-                                <g id="Pen1" serif:id="Pen"> </g>
-                                <g id="clock"> </g>
-                                <g id="external-link">
-                                  <path
-                                    d="M36.026,20.058l-21.092,0c-1.65,0 -2.989,1.339 -2.989,2.989l0,25.964c0,1.65 1.339,2.989 2.989,2.989l26.024,0c1.65,0 2.989,-1.339 2.989,-2.989l0,-20.953l3.999,0l0,21.948c0,3.308 -2.686,5.994 -5.995,5.995l-28.01,0c-3.309,0 -5.995,-2.687 -5.995,-5.995l0,-27.954c0,-3.309 2.686,-5.995 5.995,-5.995l22.085,0l0,4.001Z"
-                                  ></path>
-                                  <path
-                                    d="M55.925,25.32l-4.005,0l0,-10.481l-27.894,27.893l-2.832,-2.832l27.895,-27.895l-10.484,0l0,-4.005l17.318,0l0.002,0.001l0,17.319Z"
-                                  ></path>
-                                </g> <g id="hr"> </g> <g id="info"> </g>
-                                <g id="warning"> </g>
-                                <g id="plus-circle"> </g>
-                                <g id="minus-circle"> </g> <g id="vue"> </g>
-                                <g id="cog"> </g> <g id="logo"> </g>
-                                <g id="radio-check"> </g>
-                                <g id="eye-slash"> </g> <g id="eye"> </g>
-                                <g id="toggle-off"> </g>
-                                <g id="shredder"> </g>
-                                <g
-                                  id="spinner--loading--dots-"
-                                  serif:id="spinner [loading, dots]"
-                                >
-                                </g> <g id="react"> </g>
-                                <g id="check-selected"> </g>
-                                <g id="turn-off"> </g>
-                                <g id="code-block"> </g>
-                                <g id="user"> </g> <g id="coffee-bean"> </g>
-                                <g id="coffee-beans">
-                                  <g id="coffee-bean1" serif:id="coffee-bean">
-                                  </g>
-                                </g> <g id="coffee-bean-filled"> </g>
-                                <g id="coffee-beans-filled">
-                                  <g id="coffee-bean2" serif:id="coffee-bean">
-                                  </g>
-                                </g> <g id="clipboard"> </g>
-                                <g id="clipboard-paste"> </g>
-                                <g id="clipboard-copy"> </g>
-                                <g id="Layer1"> </g>
-                              </g>
-                            </g></svg
-                          >
-                        </a>
-                      </div>
-                    {/each}
-                  </div>
-                {/each}
+                      {/each}
+                    </div>
+                  {/each}
+                </div>
               </div>
+            {/if}
+          </div>
+
+          <div class="order-4 flex-shrink-0 lg:float-right lg:w-[336px]">
+            <div
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+            >
+              <a
+                href={`/newsletter`}
+                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+              >
+                <div class="w-full flex justify-between items-center p-3 mt-3">
+                  <h2 class="text-start text-xl font-semibold text-white ml-3">
+                    Market Newsletter
+                  </h2>
+                </div>
+                <span class="text-white p-3 ml-3 mr-3">
+                  Get a daily email with the top market news in bullet point
+                  format.
+                </span>
+              </a>
+            </div>
+
+            <div
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+            >
+              <a
+                href={"/stock-screener"}
+                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+              >
+                <div class="w-full flex justify-between items-center p-3 mt-3">
+                  <h2 class="text-start text-xl font-semibold text-white ml-3">
+                    Stock Screener
+                  </h2>
+                </div>
+                <span class="text-white p-3 ml-3 mr-3">
+                  Build your Stock Screener to find profitable stocks.
+                </span>
+              </a>
+            </div>
+            <div
+              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+            >
+              <a
+                href={"/watchlist/stocks"}
+                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+              >
+                <div class="w-full flex justify-between items-center p-3 mt-3">
+                  <h2 class="text-start text-xl font-semibold text-white ml-3">
+                    Watchlist
+                  </h2>
+                </div>
+                <span class="text-white p-3 ml-3 mr-3">
+                  Keep track of your favorite stocks in real-time.
+                </span>
+              </a>
             </div>
           </div>
         </div>