diff --git a/src/lib/components/AIScore.svelte b/src/lib/components/AIScore.svelte
index b6d1855e..03fc65e7 100644
--- a/src/lib/components/AIScore.svelte
+++ b/src/lib/components/AIScore.svelte
@@ -1,45 +1,177 @@
 
 <script lang ="ts">
-    
-    let aiScoreDict = {'score': 9};
-    let score = aiScoreDict?.score;
+
+    export let score;
 
 </script>
     
     
     
-    <section class="overflow-hidden text-white h-full pb-10 sm:pb-0">
+    <section class="overflow-hidden text-white">
         <main class="overflow-hidden ">
                         
+            <div class="w-full">
+                <div class="flex flex-col items-center w-auto p-4 sm:p-4 bg-[#09090B] sm:bg-[#09090B] rounded-lg relative">
+                    <div class="relative">
+                        <h3 class="text-center text-white text-sm sm:text-[1rem] mb-2">AI Score</h3>
 
-            {#if Object?.keys(aiScoreDict)?.length !== 0}
-            
-
-
-            <div class="pb-4 w-full mt-5">
-                <div class="w-auto p-4 sm:p-6 bg-[#09090B] sm:bg-[#09090B] rounded-lg relative">
-                  <div class="flex flex-row items-center justify-between ">
-                            <div class="relative size-[60px] sm:size-[90px] ml-auto">
-                            <svg class="size-full w-[60px] h-[60px] sm:w-[90px] sm:h-[90px]" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
-                                <!-- Background Circle -->
-                                <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#303030]" stroke-width="4"></circle>
-                                <!-- Progress Circle inside a group with rotation -->
-                                <g class="origin-center -rotate-90 transform">
-                                <circle cx="18" cy="18" r="16" fill="none" class="stroke-current {score > 5 ? 'text-[#37C97D]' : score < 5 ? 'text-[#FF2F1F]' : 'text-white'} " stroke-width="4" stroke-dasharray="100" stroke-dashoffset={10-score}></circle>
-                                </g>
+                        <label for="scoreInfo" class="absolute -top-3 -right-4 cursor-pointer border border-gray-900 rounded-full bg-[#242424] sm:hover:bg-[#313131] duration-100 p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
+                            <svg class="h-[8px] w-[8px]" 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>
+                    </div>
+
+                    <div class="flex flex-row items-center justify-between">
+                            <div class="relative size-[50px] sm:size-[60px] ml-auto">
+                            <svg class="size-full w-[50px] h-[50px] sm:w-[60px] sm:h-[60px]" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+                                <!-- Background Circle -->
+                                <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#303030]" stroke-width="2"></circle>
+                                <!-- score Circle inside a group with rotation -->
+                                <g class="origin-center -rotate-90 transform">
+                                    <!-- score Circle -->
+                                    <circle cx="18" cy="18" r="16" fill="none"
+                                        class="stroke-current {score >= 7 ? 'text-[#37C97D]' : score >=4 ? 'text-[#FF9E21]' : 'text-[#FF2F1F]'}" 
+                                        stroke-width="3" 
+                                        stroke-dasharray="100.48" 
+                                        stroke-dashoffset="{100.48 - (score / 10) * 100.48}">
+                                    </circle>
+                                </g>
+                                <!-- Text in the middle -->
+                                <text x="18" y="21" text-anchor="middle" font-size="10" fill="#000">{score}</text>
+                            </svg>
+
                             <!-- Percentage Text -->
                             <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
-                                <span class="text-center text-white text-xl sm:text-2xl font-semibold">
+                                <span class="text-center text-white text-xl font-semibold">
                                     {score}
                                 </span>
                             </div>
                             </div>
                 
                     </div>
+                    <h4 class="text-center text-white text-sm mt-2 font-semibold">
+                        {#if score === 10}
+                            Strong Buy
+                        {:else if score >=7}
+                            Buy
+                        {:else if score >=4}
+                            Hold
+                        {:else if score >=2}
+                            Sell
+                        {:else}
+                            Strong Sell
+                        {/if}
+                    </h4>
                 </div>
               </div>
-            {/if}
-
         </main>
-    </section>
\ No newline at end of file
+    </section>
+
+
+
+
+<!-- Put this part before </body> tag -->
+<input type="checkbox" id="scoreInfo" class="modal-toggle" />
+
+
+
+<label for="scoreInfo" class="modal modal-bottom sm:modal-middle cursor-pointer">
+
+  <label for="scoreInfo"  class="cursor-pointer modal-backdrop"></label>
+
+
+
+  <!-- svelte-ignore a11y-label-has-associated-control -->
+  <label class="modal-box w-full relative bg-[#09090B] border border-gray-800 h-auto">
+    <label for="scoreInfo" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-2xl text-white">
+      ✕
+    </label>
+
+    <h3 class="text-2xl font-bold text-white">
+      AI Score
+    </h3>
+    <p class="py-4 text-gray-200 bg-[#09090B] w-full">
+        Our AI model analyzes fundamental, technical, and statistical indicators to predict the probability of a bullish trend over the next three months.
+        <br>
+        <br>
+        We regularly update and refine our models to deliver the most reliable forecasts for you.
+    </p>
+
+    <table class="table table-sm table-compact bg-[#09090B] w-full mt-5 mb-10 text-white">
+      <!-- head -->
+      <thead>
+        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+          <th class="bg-[#09090B] text-white text-sm font-semibold">
+            Bullish Probability
+          </th>
+          <th class="bg-[#09090B] text-white text-sm font-semibold">
+            Sentiment
+          </th>
+          <th class="bg-[#09090B] text-white text-sm text-end font-semibold">
+            Score
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <!-- row 1 -->
+        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+          <td class="text-sm sm:text-[1rem]">+80% </td>
+          <td class="text-sm sm:text-[1rem]">Strong Bullish</td>
+          <td class="text-sm sm:text-[1rem] text-end">10</td>
+        </tr>
+        <!-- row 2 -->
+        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+          <td class="text-sm sm:text-[1rem]">+75%</td>
+          <td class="text-sm sm:text-[1rem]">Buy</td>
+          <td class="text-sm sm:text-[1rem] text-end">9</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+          <td class="text-sm sm:text-[1rem]">+70%</td>
+          <td class="text-sm sm:text-[1rem]">Buy</td>
+          <td class="text-sm sm:text-[1rem] text-end">8</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+          <td class="text-sm sm:text-[1rem]">
+           +60%
+            </td>
+            <td class="text-sm sm:text-[1rem]">Buys</td>
+          <td class="text-sm sm:text-[1rem] text-end">7</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+          <td class="text-sm sm:text-[1rem]">+50%</td>
+          <td class="text-sm sm:text-[1rem]">Hold</td>
+          <td class="text-sm sm:text-[1rem] text-end">6</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+          <td class="text-sm sm:text-[1rem]">+45%</td>
+          <td class="text-sm sm:text-[1rem]">Hold</td>
+          <td class="text-sm sm:text-[1rem] text-end">5</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+          <td class="text-sm sm:text-[1rem]">+40%</td>
+          <td class="text-sm sm:text-[1rem]">Hold</td>
+          <td class="text-sm sm:text-[1rem] text-end">4</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+          <td class="text-sm sm:text-[1rem]">+35%</td>
+          <td class="text-sm sm:text-[1rem]">Sell</td>
+          <td class="text-sm sm:text-[1rem] text-end">3</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#27272A]">
+          <td class="text-sm sm:text-[1rem]">+30%</td>
+          <td class="text-sm sm:text-[1rem]">Sell</td>
+          <td class="text-sm sm:text-[1rem] text-end">2</td>
+        </tr>
+        <tr class="odd:bg-[#27272A]">
+          <td class="text-sm sm:text-[1rem]">+20%</td>
+          <td class="text-sm sm:text-[1rem]">Strong Sell</td>
+          <td class="text-sm sm:text-[1rem] text-end">1</td>
+        </tr>
+      </tbody>
+    </table>
+
+
+  </label>
+</label>
+
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index ea37c364..ae95b912 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -7,6 +7,7 @@
   import toast from "svelte-french-toast";
   import Sidecard from "$lib/components/Sidecard.svelte";
   import Markethour from "$lib/components/Markethour.svelte";
+  import AIScore from "$lib/components/AIScore.svelte";
 
   export let data;
 
@@ -436,23 +437,24 @@ async function toggleUserWatchlist(watchListId: string) {
             </div>
             <!--End Mobile Navbar-->
 
-            <div class="pt-20 sm:pt-0 w-auto max-w-3xl lg:max-w-content 2xl:max-w-6xl px-3 sm:px-0">
+            <div class="pt-14 sm:pt-0 w-auto max-w-3xl lg:max-w-content 2xl:max-w-6xl px-3 sm:px-0">
               <div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
                 <!-- Main content -->
                 <div class="pb-12 md:pb-20 w-full 2xl:max-w-5xl">
                   <div class="md:pr-6 lg:pr-10">
                     <!-----Start-Header-CandleChart-Indicators------>
 
-                    <div class="m-auto pl-0 sm:pl-4 overflow-hidden mb-5 md:mt-10">
-                      <div class="hidden sm:flex flex-row w-full justify-between items-center pb-10">
+                    <div class="m-auto pl-0 sm:pl-4 overflow-hidden mb-3 md:mt-10 xl:pr-7">
+                      <div class="hidden sm:flex flex-row w-full justify-between items-center ">
                         <Markethour />
-
+                        
+                        
                         <!--Start Watchlist-->
 
                         {#if data?.user}
                           <div class="flex flex-col ml-auto mr-2">
                             {#if userWatchList?.length !== 0}
-                              <div class="flex-shrink-0 rounded-full hover:bg-white hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#09090B] flex items-center justify-center">
+                              <div class="flex-shrink-0 rounded-full sm:hover:bg-white sm:hover:bg-opacity-[0.02] transition ease-out w-12 h-12 relative bg-[#09090B] flex items-center justify-center">
                                 <label for="addWatchListModal" class="cursor-pointer flex-shrink-0">
                                   {#if isTickerIncluded}
                                     <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
@@ -522,8 +524,8 @@ async function toggleUserWatchlist(watchListId: string) {
                       <!-- svelte-ignore a11y-click-events-have-key-events -->
                       <!-- svelte-ignore a11y-label-has-associated-control -->
 
-                      <div class="flex items-center w-full">
-                        <div class="flex flex-row justify-start items-center mb-5 mt-2">
+                      <div class="flex items-center w-full mt-3">
+                        <div class="flex flex-row justify-start w-full items-center ">
                           <!--<img class="rounded-full w-10 h-10" src={logoUrl} alt="" />-->
                           <div class="flex-shrink-0 rounded-full w-10 h-10 relative bg-[#141417] flex items-center justify-center border border-slate-800">
                             <img style="clip-path: circle(50%);" class="avatar w-6 h-6" src={`https://financialmodelingprep.com/image-stock/${$stockTicker?.toUpperCase()}.png`} alt=" " loading="lazy" />
@@ -537,34 +539,16 @@ async function toggleUserWatchlist(watchListId: string) {
                               {$displayCompanyName?.length > charNumber ? $displayCompanyName?.slice(0, charNumber) + "..." : $displayCompanyName}
                             </span>
                           </div>
+
+                          <div class="ml-auto {data?.getStockDeck?.at(0)?.score === (undefined || null) ? 'invisible' : ''}">
+                            <AIScore score={data?.getStockDeck?.at(0)?.score} />
+                          </div>
+
+
                         </div>
 
-                        <div class="ml-auto sm:hidden">
-                          <Markethour />
-                        </div>
+    
 
-                        <!--Start Trade-->
-                        <!--
-                                        <div class="hidden sm:flex ml-auto">
-                                        {#if holdingShares !== 0 && data?.user}
-                                        
-                                        <label for="{!data?.user  ? 'userLogin' : userPortfolio?.length !== 0 ? 'typeOfTrade' : ''}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#2A303C] border border-slate-800 normal-case cursor-pointer items-center">
-                                          <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg>
-                                          <span class="text-white font-medium">
-                                            Portfolio
-                                          </span>
-                                        </label>
-                                        {:else}
-                                        <label for="{!data?.user  ? 'userLogin' : userPortfolio?.length === 0 ? 'addPortfolio' : 'buyTradeModal'}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#2A303C] border border-slate-800 normal-case  cursor-pointer items-center">
-                                          <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg>
-                                          <span class="text-white font-medium">
-                                            Portfolio
-                                          </span>
-                                        </label>
-                                        {/if}
-                                      </div>
-                                      -->
-                        <!--End Trade-->
                       </div>
                     </div>
                     <!-----End-Header-CandleChart-Indicators------>