diff --git a/src/lib/components/BullBearSay.svelte b/src/lib/components/BullBearSay.svelte
index 0cabba22..89ccdcbd 100644
--- a/src/lib/components/BullBearSay.svelte
+++ b/src/lib/components/BullBearSay.svelte
@@ -52,7 +52,7 @@
   <div class="space-y-3 overflow-hidden">
     <!--Start Content-->
     <div class="w-auto lg:w-full p-1 flex flex-col m-auto">
-      <div class="flex flex-col items-center w-full mb-6">
+      <div class="flex flex-col items-center w-full mb-1">
         <div class="flex flex-row justify-start mr-auto items-center">
           <!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
           <div class="flex flex-row items-center">
@@ -73,42 +73,36 @@
 
       <!--Start Header-->
       <div
-        class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 -mt-2"
+        class="inline-flex justify-center sm:justify-start w-full rounded-md sm:w-auto"
       >
-        {#each tabs as item, i}
-          <button
-            on:click={() => handleMode(i)}
-            class="group relative z-[1] rounded-full px-6 py-1 {activeIdx === i
-              ? 'z-0'
-              : ''} "
-          >
-            {#if activeIdx === i}
-              <div class="absolute inset-0 rounded-md bg-[#fff]"></div>
-            {/if}
-            <span
-              class="relative text-sm block font-semibold {activeIdx === i
-                ? 'text-black'
-                : 'text-white'}"
+        <div
+          class="bg-[#313131] w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+        >
+          {#each tabs as item, i}
+            <button
+              on:click={() => handleMode(i)}
+              class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
+              i
+                ? 'z-0'
+                : ''} "
             >
-              {item.title}
-              <svg
-                class="{data?.user?.tier !== 'Pro' && i === 1
-                  ? ''
-                  : 'hidden'} inline-block ml-1 -mt-0.5 w-3.5 h-3.5"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                ><path
-                  fill="#A3A3A3"
-                  d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
-                /></svg
+              {#if activeIdx === i}
+                <div class="absolute inset-0 rounded-md bg-[#fff]"></div>
+              {/if}
+              <span
+                class="relative text-sm block font-semibold {activeIdx === i
+                  ? 'text-black'
+                  : 'text-white'}"
               >
-            </span>
-          </button>
-        {/each}
+                {item.title}
+              </span>
+            </button>
+          {/each}
+        </div>
       </div>
 
       <!--End Header-->
-      <span class="text-white text-xs sm:text-sm italic mt-6 sm:ml-auto">
+      <span class="text-white text-sm italic mt-6 ml-auto">
         <label
           class="{latestInfoDate(rawData?.date)
             ? ''
@@ -124,29 +118,50 @@
             : 'bg-[#FF2F1F]'} w-full max-w-[3px] rounded-l-xl"
         />
         <span class="text-gray-100 ml-3 text-[1rem] w-full">
-          {#if activeIdx === 0}
+          {#if activeIdx === 0 && data?.user?.tier === "Pro"}
             <p class="pr-1">{rawData?.bullSays}</p>
-          {:else if data?.user?.tier === "Pro"}
+          {:else if activeIdx === 1 && data?.user?.tier === "Pro"}
             <p class="pr-1">{rawData?.bearSays}</p>
-          {:else}
-            <div
-              class="bg-[#111112] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold"
-            >
-              <svg
-                class="mr-1.5 w-5 h-5 inline-block"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                ><path
-                  fill="#A3A3A3"
-                  d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
-                /></svg
-              >
-              Unlock content with
-              <a
-                class="inline-block ml-2 text-blue-400 hover:sm:text-white"
-                href="/pricing">Pro Subscription</a
-              >
-            </div>
+          {:else if activeIdx === 0 && data?.user?.tier !== "Pro"}
+            <p>
+              {rawData?.bullSays?.slice(0, 150) + "..."}
+              <span class="mt-3">
+                Unlock content with
+                <a
+                  class="inline-block ml-0.5 text-blue-400 sm:hover:text-white"
+                  href="/pricing"
+                  >Pro Subscription <svg
+                    class="w-4 h-4 mb-1 inline-block text[#A3A3A3] sm:hover:text-white"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    ><path
+                      fill="currentColor"
+                      d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                    /></svg
+                  ></a
+                >
+              </span>
+            </p>
+          {:else if activeIdx === 1 && data?.user?.tier !== "Pro"}
+            <p>
+              {rawData?.bearSays?.slice(0, 150) + "..."}
+              <span class="mt-3">
+                Unlock content with
+                <a
+                  class="inline-block ml-0.5 text-blue-400 sm:hover:text-white"
+                  href="/pricing"
+                  >Pro Subscription <svg
+                    class="w-4 h-4 mb-1 inline-block text[#A3A3A3] sm:hover:text-white"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    ><path
+                      fill="currentColor"
+                      d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                    /></svg
+                  ></a
+                >
+              </span>
+            </p>
           {/if}
         </span>
       </div>
diff --git a/src/lib/components/WIIM.svelte b/src/lib/components/WIIM.svelte
index e4b810d1..095a4500 100644
--- a/src/lib/components/WIIM.svelte
+++ b/src/lib/components/WIIM.svelte
@@ -2,6 +2,7 @@
   import { stockTicker, etfTicker } from "$lib/store";
   import InfoModal from "$lib/components/InfoModal.svelte";
   import { get } from "svelte/store";
+  import { formatDate } from "$lib/utils";
 
   export let data;
 
@@ -11,7 +12,7 @@
 
   function latestInfoDate(inputDate) {
     // Convert the input date string to milliseconds since epoch
-    const inputDateMs = Date.parse(inputDate);
+    const inputDateMs = new Date(inputDate);
 
     // Get today's date in milliseconds since epoch
     const todayMs = Date.now();
@@ -54,7 +55,7 @@
 
     {#if isLoaded}
       {#if wiim?.length !== 0}
-        <div class="mt-7">
+        <div class="mt-2">
           {#each showFullHistory ? wiim : wiim?.slice(0, 2) as item, index}
             <div
               class="w-full {index === 1 && !showFullHistory && wiim?.length > 2
@@ -64,17 +65,30 @@
               <div class="relative">
                 <div class="">
                   <div class="flex justify-center">
-                    <!--<div class="{item?.changesPercentage >= 0 ? 'bg-[#00FC50]' : 'bg-[#FF2F1F]'} w-1.5 mb-5 rounded-l-xl" />-->
-
                     <!--Start Item-->
                     <div class="flex flex-row items-center w-full mb-6">
+                      <!-- Vertical Line -->
+                      <div
+                        class="w-1 h-full mr-4 rounded-lg"
+                        class:!bg-[#00FC50]={item?.changesPercentage > 0}
+                        class:!bg-[#FF2F1F]={item?.changesPercentage < 0}
+                        class:!bg-white={!item?.changesPercentage &&
+                          item?.changesPercentage !== 0}
+                      ></div>
+                      <!-- Item Content -->
                       <div
                         class="w-full border-b border-gray-600 h-full pt-2 pb-4"
                       >
                         <div class="flex flex-col items-start">
                           <div class="flex flex-row items-start w-full pt-2">
-                            <span class="text-white text-sm italic"
-                              >Updated {item?.date}</span
+                            <span class="text-white text-sm"
+                              >{formatDate(item?.date)} &#183;
+                              <a
+                                href={item?.url}
+                                class="inline-block text-sm text-white sm:hover:underline sm:hover:underline-offset-4"
+                              >
+                                Source
+                              </a></span
                             >
                             {#if latestInfoDate(item?.date)}
                               <label