diff --git a/src/lib/components/InfoModal.svelte b/src/lib/components/InfoModal.svelte
index df97856c..0a96713e 100644
--- a/src/lib/components/InfoModal.svelte
+++ b/src/lib/components/InfoModal.svelte
@@ -4,12 +4,12 @@
 export let title;
 export let content;
 export let id;
-
+export let hide = false;
 </script>
   
 
 <label for={id} class="cursor-pointer ml-1">
-  <svg class="w-5 h-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="gray"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="info-circle"> <g> <circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle> <line fill="none" stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="12" y2="16"></line> <line fill="none" stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="8"></line> </g> </g> </g> </g></svg>
+  <svg class="w-5 h-5 {hide ? 'hidden' : ''}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="gray"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="info-circle"> <g> <circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle> <line fill="none" stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="12" y2="16"></line> <line fill="none" stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="8"></line> </g> </g> </g> </g></svg>
 </label>
 
   <!-- Desktop modal using dialog component -->
diff --git a/src/routes/stocks/[tickerID]/analyst/+page.svelte b/src/routes/stocks/[tickerID]/analyst/+page.svelte
index d6c98408..94a346a9 100644
--- a/src/routes/stocks/[tickerID]/analyst/+page.svelte
+++ b/src/routes/stocks/[tickerID]/analyst/+page.svelte
@@ -130,91 +130,99 @@ changeTab(0)
             
                 {#if historyList?.length !== 0}
 
-                <div class="stats stats-horizontal bg-[#272727] w-full rounded-lg pr-6 sm:pr-0">
-        
-                  <div class="grid grid-cols-2">
-      
-                    <div class="stat">
-                      <div class="flex flex-row items-center">
-                        <label for="totalAnalystInfo" class="cursor-pointer stat-title text-md sm:text-lg font-medium text-gray-300">
-                          Total Analyst
-                        </label>
-                        <InfoModal
-                          title={"Total Analyst"}
-                          content={"The total number of analyst who provided a rating in the past 12 months."}
-                          id={"totalAnalystInfo"}
-                        />
-                        </div>
-                      <div class="stat-value mt-1 text-lg text-gray-200 font-semibold">
+                <div class="mb-4 grid grid-cols-2 grid-rows-2 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-4 md:grid-rows-1 md:divide-x">
+                  <div class="p-4 bp:p-5 sm:p-6">
+                      <div class="text-sm font-normal text-default xs:text-base">
+                          Total Analysts 
+                          <span class="relative" role="tooltip">
+                              <label for="totalAnalystInfo" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
+                                  <svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
+                                      <path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
+                                  </svg>
+                              </label>
+                              <InfoModal
+                                title={"Total Analyst"}
+                                content={"The total number of analyst who provided a rating in the past 12 months."}
+                                id={"totalAnalystInfo"}
+                                hide={true}
+                              />
+                          </span> 
+                      </div> 
+                      <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
                         {numOfAnalyst}
-                      </div>
-                    </div>
-                  
-      
-                    <div class="stat">
-                      <div class="flex flex-row items-center">
-                      <label for="consensusRatingInfo" class="cursor-pointer stat-title text-md sm:text-lg font-medium text-gray-300">
-                        Consensus Rating
-                      </label>
-                      <InfoModal
-                            title={"Consensus Rating"}
-                            content={`The average analyst rating for ${$stockTicker} is standardized to align with categories: Strong Buy, Buy, Hold, Sell, and Strong Sell.`}
-                            id={"consensusRatingInfo"}
-                          />
-                      </div>
-                      
-                      <div class="stat-value font-semibold {['Strong Buy', 'Buy']?.includes(consensusRating) ? 'text-[#10DB06]' : consensusRating === 'Hold' ? 'text-[#FF7070]' : ['Strong Sell','Sell']?.includes(consensusRating) ? 'text-[#FF2F1F]' : 'text-gray-200'} mt-1 text-lg">
+                      </div> 
+                  </div>
+                  <div class="p-4 bp:p-5 sm:p-6 border-l border-contrast md:border-0">
+                      <div class="text-sm font-normal text-default xs:text-base">
+                          Consensus Rating 
+                          <span class="relative" role="tooltip">
+                              <label for="consensusRatingInfo" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
+                                  <svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
+                                      <path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
+                                  </svg>
+                              </label>
+                              <InfoModal
+                                title={"Consensus Rating"}
+                                content={`The average analyst rating for ${$stockTicker} is standardized to align with categories: Strong Buy, Buy, Hold, Sell, and Strong Sell.`}
+                                id={"consensusRatingInfo"}
+                                hide={true}
+                              />
+                          </span> 
+                      </div> 
+                      <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
                         {consensusRating}
-                      </div>
-                    </div>
-                    
-                    <div class="stat">
-                      <div class="flex flex-row items-center">
-                      <label for="priceTargetInfo" class="cursor-pointer stat-title text-md sm:text-lg font-medium text-gray-300">
-                        Price Target
-                      </label>
-                      <InfoModal
-                        title={"Price Target"}
-                        content={"The average 12-month price target"}
-                          id={"priceTargetInfo"}
-                          />
-                        </div>
-                      <div class="stat-value font-semibold text-lg  text-gray-200">
+                      </div> 
+                  </div>
+                  <div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0">
+                      <div class="text-sm font-normal text-default xs:text-base">
+                          Price Target 
+                          <span class="relative" role="tooltip">
+                              <label for="priceTargetInfo" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
+                                  <svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
+                                      <path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
+                                  </svg>
+                              </label>
+                              <InfoModal
+                                title={"Price Target"}
+                                content={"The average 12-month price target"}
+                                id={"priceTargetInfo"}
+                                hide={true}
+                                />
+                          </span> 
+                      </div> 
+                      <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
                         ${priceTarget}
-                      </div>
-                    </div>
-      
-                    <div class="stat">
-                      <div class="flex flex-row items-center">
-                        <label for="upsideInfo" class="cursor-pointer stat-title text-md sm:text-lg font-medium text-gray-300">
-                          Upside
-                        </label>
-                        <InfoModal
-                          title={"Upside"}
-                          content={"The average price target's percentage difference from the current stock price."}
-                          id={"upsideInfo"}
-                          />
-                          </div>
-                      <div class="stat-value font-semibold text-lg text-gray-200">
-                        <div class="flex flex-row items-center">
-                          {#if changesPercentage >=0}
+                      </div> 
+                  </div>
+                  <div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0 border-l border-contrast md:border-0">
+                      <div class="text-sm font-normal text-default xs:text-base">
+                          Upside 
+                          <span class="relative" role="tooltip">
+                              <label for="upsideInfo" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
+                                  <svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
+                                      <path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
+                                  </svg>
+                              </label>
+                                <InfoModal
+                                  title={"Upside"}
+                                  content={"The average price target's percentage difference from the current stock price."}
+                                  id={"upsideInfo"}
+                                  hide ={true}
+                                  />
+                          </span> 
+                      </div> 
+                      <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
+                        {#if changesPercentage >=0}
                             <span class="text-[#10DB06]">+{changesPercentage}%</span>
                           {:else}
                             <span class="text-[#FF2F1F]">{changesPercentage}% </span> 
                           {/if}
-                        </div>
-                      </div>
-                    </div>
-      
-                    </div>
+                      </div> 
+                  </div>
+              </div>
+
                   
-                </div>
 
-
-                       
-    
-
-                    
                         
                         <h3 class="mt-10 text-2xl sm:text-3xl text-gray-200 font-bold mb-4 text-center sm:text-start">
                             Ratings History