diff --git a/src/routes/list/basic-materials-sector/+page.svelte b/src/routes/list/basic-materials-sector/+page.svelte
index 5f5dd7e0..7effe931 100644
--- a/src/routes/list/basic-materials-sector/+page.svelte
+++ b/src/routes/list/basic-materials-sector/+page.svelte
@@ -130,104 +130,104 @@ function getPlotOptions() {
               A complete list of companies in the Basic Materials Sector that are publicly traded on the US stock exchange.
           </div>
       
-          <div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
-            
-            <div class="grid grid-cols-2 sm:grid-cols-4">
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Stocks
-                  </label>
-                  <InfoModal
-                    title={"Stocks"}
-                    content={"The total number of companies who operates in this sector."}
-                    id={"stocksInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
+           <div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Stocks
+              <InfoModal
+                title={"Stocks"}
+                content={"The total number of companies who operate in this sector."}
+                id={"stocksInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {rawData?.length}
               </div>
-              
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Market Cap
-                </label>
-                <InfoModal
-                      title={"Market Cap"}
-                      content={"Combined market cap of all companies in this sector."}
-                      id={"marketCapModal"}
-                    />
-                </div>
-                
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
-              </div>
-              
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Revenue
-                </label>
-                <InfoModal
-                  title={"Revenue"}
-                  content={"The total revenue of all companies in this sector."}
-                    id={"revenueInfo"}
-                    />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profits
-                  </label>
-                  <InfoModal
-                    title={"Profits"}
-                    content={"The total net income of all companies in this sector."}
-                    id={"profitsInfo"}
-                    />
-                    </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profit Margin
-                  </label>
-                  <InfoModal
-                    title={"Profit Margin"}
-                    content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
-                      id={"profitMarginInfo"}
-                      />
-                  </div>
-
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
-              </div>
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    PE Ratio
-                  </label>
-                  <InfoModal
-                    title={"PE Ratio"}
-                    content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
-                    id={"peRatioInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
-              </div>
-
-
             </div>
-
-              
           </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Market Cap
+              <InfoModal
+                title={"Market Cap"}
+                content={"Combined market cap of all companies in this sector."}
+                id={"marketCapModal"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalMarketCap, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Revenue
+              <InfoModal
+                title={"Revenue"}
+                content={"The total revenue of all companies in this sector."}
+                id={"revenueInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalRevenue, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profits
+              <InfoModal
+                title={"Profits"}
+                content={"The total net income of all companies in this sector."}
+                id={"profitsInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalProfits, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profit Margin
+              <InfoModal
+                title={"Profit Margin"}
+                content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
+                id={"profitMarginInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalProfits / totalRevenue * 100)?.toFixed(2)}%
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              PE Ratio
+              <InfoModal
+                title={"PE Ratio"}
+                content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
+                id={"peRatioInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalMarketCap / totalProfits)?.toFixed(2)}
+              </div>
+            </div>
+          </div>
+        </div>
+
       
           <h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
             Historical Performance
diff --git a/src/routes/list/communication-services-sector/+page.svelte b/src/routes/list/communication-services-sector/+page.svelte
index ab3637d2..4cb6584a 100644
--- a/src/routes/list/communication-services-sector/+page.svelte
+++ b/src/routes/list/communication-services-sector/+page.svelte
@@ -130,104 +130,104 @@ function getPlotOptions() {
               A complete list of companies in the Communication Services Sector that are publicly traded on the US stock exchange.
           </div>
       
-          <div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
-            
-            <div class="grid grid-cols-2 sm:grid-cols-4">
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Stocks
-                  </label>
-                  <InfoModal
-                    title={"Stocks"}
-                    content={"The total number of companies who operates in this sector."}
-                    id={"stocksInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
+          <div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Stocks
+              <InfoModal
+                title={"Stocks"}
+                content={"The total number of companies who operate in this sector."}
+                id={"stocksInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {rawData?.length}
               </div>
-              
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Market Cap
-                </label>
-                <InfoModal
-                      title={"Market Cap"}
-                      content={"Combined market cap of all companies in this sector."}
-                      id={"marketCapModal"}
-                    />
-                </div>
-                
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
-              </div>
-              
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Revenue
-                </label>
-                <InfoModal
-                  title={"Revenue"}
-                  content={"The total revenue of all companies in this sector."}
-                    id={"revenueInfo"}
-                    />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profits
-                  </label>
-                  <InfoModal
-                    title={"Profits"}
-                    content={"The total net income of all companies in this sector."}
-                    id={"profitsInfo"}
-                    />
-                    </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profit Margin
-                  </label>
-                  <InfoModal
-                    title={"Profit Margin"}
-                    content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
-                      id={"profitMarginInfo"}
-                      />
-                  </div>
-
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
-              </div>
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    PE Ratio
-                  </label>
-                  <InfoModal
-                    title={"PE Ratio"}
-                    content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
-                    id={"peRatioInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
-              </div>
-
-
             </div>
-
-              
           </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Market Cap
+              <InfoModal
+                title={"Market Cap"}
+                content={"Combined market cap of all companies in this sector."}
+                id={"marketCapModal"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalMarketCap, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Revenue
+              <InfoModal
+                title={"Revenue"}
+                content={"The total revenue of all companies in this sector."}
+                id={"revenueInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalRevenue, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profits
+              <InfoModal
+                title={"Profits"}
+                content={"The total net income of all companies in this sector."}
+                id={"profitsInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalProfits, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profit Margin
+              <InfoModal
+                title={"Profit Margin"}
+                content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
+                id={"profitMarginInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalProfits / totalRevenue * 100)?.toFixed(2)}%
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              PE Ratio
+              <InfoModal
+                title={"PE Ratio"}
+                content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
+                id={"peRatioInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalMarketCap / totalProfits)?.toFixed(2)}
+              </div>
+            </div>
+          </div>
+        </div>
+
       
           <h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
             Historical Performance
diff --git a/src/routes/list/consumer-cyclical-sector/+page.svelte b/src/routes/list/consumer-cyclical-sector/+page.svelte
index 4fdfce07..e45e4c7c 100644
--- a/src/routes/list/consumer-cyclical-sector/+page.svelte
+++ b/src/routes/list/consumer-cyclical-sector/+page.svelte
@@ -130,104 +130,104 @@ function getPlotOptions() {
               A complete list of companies in the Consumer Cyclical Sector that are publicly traded on the US stock exchange.
           </div>
       
-          <div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
-            
-            <div class="grid grid-cols-2 sm:grid-cols-4">
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Stocks
-                  </label>
-                  <InfoModal
-                    title={"Stocks"}
-                    content={"The total number of companies who operates in this sector."}
-                    id={"stocksInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
+           <div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Stocks
+              <InfoModal
+                title={"Stocks"}
+                content={"The total number of companies who operate in this sector."}
+                id={"stocksInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {rawData?.length}
               </div>
-              
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Market Cap
-                </label>
-                <InfoModal
-                      title={"Market Cap"}
-                      content={"Combined market cap of all companies in this sector."}
-                      id={"marketCapModal"}
-                    />
-                </div>
-                
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
-              </div>
-              
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Revenue
-                </label>
-                <InfoModal
-                  title={"Revenue"}
-                  content={"The total revenue of all companies in this sector."}
-                    id={"revenueInfo"}
-                    />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profits
-                  </label>
-                  <InfoModal
-                    title={"Profits"}
-                    content={"The total net income of all companies in this sector."}
-                    id={"profitsInfo"}
-                    />
-                    </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profit Margin
-                  </label>
-                  <InfoModal
-                    title={"Profit Margin"}
-                    content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
-                      id={"profitMarginInfo"}
-                      />
-                  </div>
-
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
-              </div>
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    PE Ratio
-                  </label>
-                  <InfoModal
-                    title={"PE Ratio"}
-                    content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
-                    id={"peRatioInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
-              </div>
-
-
             </div>
-
-              
           </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Market Cap
+              <InfoModal
+                title={"Market Cap"}
+                content={"Combined market cap of all companies in this sector."}
+                id={"marketCapModal"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalMarketCap, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Revenue
+              <InfoModal
+                title={"Revenue"}
+                content={"The total revenue of all companies in this sector."}
+                id={"revenueInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalRevenue, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profits
+              <InfoModal
+                title={"Profits"}
+                content={"The total net income of all companies in this sector."}
+                id={"profitsInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalProfits, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profit Margin
+              <InfoModal
+                title={"Profit Margin"}
+                content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
+                id={"profitMarginInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalProfits / totalRevenue * 100)?.toFixed(2)}%
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              PE Ratio
+              <InfoModal
+                title={"PE Ratio"}
+                content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
+                id={"peRatioInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalMarketCap / totalProfits)?.toFixed(2)}
+              </div>
+            </div>
+          </div>
+        </div>
+
       
           <h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
             Historical Performance
diff --git a/src/routes/list/consumer-defensive-sector/+page.svelte b/src/routes/list/consumer-defensive-sector/+page.svelte
index 03db1552..767f3ee9 100644
--- a/src/routes/list/consumer-defensive-sector/+page.svelte
+++ b/src/routes/list/consumer-defensive-sector/+page.svelte
@@ -130,104 +130,104 @@ function getPlotOptions() {
               A complete list of companies in the Consumer Defensive Sector that are publicly traded on the US stock exchange.
           </div>
       
-          <div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
-            
-            <div class="grid grid-cols-2 sm:grid-cols-4">
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Stocks
-                  </label>
-                  <InfoModal
-                    title={"Stocks"}
-                    content={"The total number of companies who operates in this sector."}
-                    id={"stocksInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
+           <div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Stocks
+              <InfoModal
+                title={"Stocks"}
+                content={"The total number of companies who operate in this sector."}
+                id={"stocksInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {rawData?.length}
               </div>
-              
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Market Cap
-                </label>
-                <InfoModal
-                      title={"Market Cap"}
-                      content={"Combined market cap of all companies in this sector."}
-                      id={"marketCapModal"}
-                    />
-                </div>
-                
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
-              </div>
-              
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Revenue
-                </label>
-                <InfoModal
-                  title={"Revenue"}
-                  content={"The total revenue of all companies in this sector."}
-                    id={"revenueInfo"}
-                    />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profits
-                  </label>
-                  <InfoModal
-                    title={"Profits"}
-                    content={"The total net income of all companies in this sector."}
-                    id={"profitsInfo"}
-                    />
-                    </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profit Margin
-                  </label>
-                  <InfoModal
-                    title={"Profit Margin"}
-                    content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
-                      id={"profitMarginInfo"}
-                      />
-                  </div>
-
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
-              </div>
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    PE Ratio
-                  </label>
-                  <InfoModal
-                    title={"PE Ratio"}
-                    content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
-                    id={"peRatioInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
-              </div>
-
-
             </div>
-
-              
           </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Market Cap
+              <InfoModal
+                title={"Market Cap"}
+                content={"Combined market cap of all companies in this sector."}
+                id={"marketCapModal"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalMarketCap, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Revenue
+              <InfoModal
+                title={"Revenue"}
+                content={"The total revenue of all companies in this sector."}
+                id={"revenueInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalRevenue, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profits
+              <InfoModal
+                title={"Profits"}
+                content={"The total net income of all companies in this sector."}
+                id={"profitsInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalProfits, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profit Margin
+              <InfoModal
+                title={"Profit Margin"}
+                content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
+                id={"profitMarginInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalProfits / totalRevenue * 100)?.toFixed(2)}%
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              PE Ratio
+              <InfoModal
+                title={"PE Ratio"}
+                content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
+                id={"peRatioInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalMarketCap / totalProfits)?.toFixed(2)}
+              </div>
+            </div>
+          </div>
+        </div>
+
       
           <h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
             Historical Performance
diff --git a/src/routes/list/energy-sector/+page.svelte b/src/routes/list/energy-sector/+page.svelte
index 07f266be..b8408ab2 100644
--- a/src/routes/list/energy-sector/+page.svelte
+++ b/src/routes/list/energy-sector/+page.svelte
@@ -130,104 +130,104 @@ function getPlotOptions() {
               A complete list of companies in the Energy Sector that are publicly traded on the US stock exchange.
           </div>
       
-          <div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
-            
-            <div class="grid grid-cols-2 sm:grid-cols-4">
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Stocks
-                  </label>
-                  <InfoModal
-                    title={"Stocks"}
-                    content={"The total number of companies who operates in this sector."}
-                    id={"stocksInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
+           <div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Stocks
+              <InfoModal
+                title={"Stocks"}
+                content={"The total number of companies who operate in this sector."}
+                id={"stocksInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {rawData?.length}
               </div>
-              
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Market Cap
-                </label>
-                <InfoModal
-                      title={"Market Cap"}
-                      content={"Combined market cap of all companies in this sector."}
-                      id={"marketCapModal"}
-                    />
-                </div>
-                
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
-              </div>
-              
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Revenue
-                </label>
-                <InfoModal
-                  title={"Revenue"}
-                  content={"The total revenue of all companies in this sector."}
-                    id={"revenueInfo"}
-                    />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profits
-                  </label>
-                  <InfoModal
-                    title={"Profits"}
-                    content={"The total net income of all companies in this sector."}
-                    id={"profitsInfo"}
-                    />
-                    </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profit Margin
-                  </label>
-                  <InfoModal
-                    title={"Profit Margin"}
-                    content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
-                      id={"profitMarginInfo"}
-                      />
-                  </div>
-
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
-              </div>
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    PE Ratio
-                  </label>
-                  <InfoModal
-                    title={"PE Ratio"}
-                    content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
-                    id={"peRatioInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
-              </div>
-
-
             </div>
-
-              
           </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Market Cap
+              <InfoModal
+                title={"Market Cap"}
+                content={"Combined market cap of all companies in this sector."}
+                id={"marketCapModal"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalMarketCap, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Revenue
+              <InfoModal
+                title={"Revenue"}
+                content={"The total revenue of all companies in this sector."}
+                id={"revenueInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalRevenue, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profits
+              <InfoModal
+                title={"Profits"}
+                content={"The total net income of all companies in this sector."}
+                id={"profitsInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalProfits, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profit Margin
+              <InfoModal
+                title={"Profit Margin"}
+                content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
+                id={"profitMarginInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalProfits / totalRevenue * 100)?.toFixed(2)}%
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              PE Ratio
+              <InfoModal
+                title={"PE Ratio"}
+                content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
+                id={"peRatioInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalMarketCap / totalProfits)?.toFixed(2)}
+              </div>
+            </div>
+          </div>
+        </div>
+
       
           <h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
             Historical Performance
diff --git a/src/routes/list/financial-sector/+page.svelte b/src/routes/list/financial-sector/+page.svelte
index a205ad53..13ea4805 100644
--- a/src/routes/list/financial-sector/+page.svelte
+++ b/src/routes/list/financial-sector/+page.svelte
@@ -129,106 +129,108 @@ function getPlotOptions() {
               <svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
               A complete list of companies in the Financial Sector that are publicly traded on the US stock exchange.
           </div>
-      
-          <div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
-            
-            <div class="grid grid-cols-2 sm:grid-cols-4">
+          
 
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Stocks
-                  </label>
-                  <InfoModal
-                    title={"Stocks"}
-                    content={"The total number of companies who operates in this sector."}
-                    id={"stocksInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
+         <div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Stocks
+              <InfoModal
+                title={"Stocks"}
+                content={"The total number of companies who operate in this sector."}
+                id={"stocksInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {rawData?.length}
               </div>
-              
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Market Cap
-                </label>
-                <InfoModal
-                      title={"Market Cap"}
-                      content={"Combined market cap of all companies in this sector."}
-                      id={"marketCapModal"}
-                    />
-                </div>
-                
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
-              </div>
-              
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Revenue
-                </label>
-                <InfoModal
-                  title={"Revenue"}
-                  content={"The total revenue of all companies in this sector."}
-                    id={"revenueInfo"}
-                    />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profits
-                  </label>
-                  <InfoModal
-                    title={"Profits"}
-                    content={"The total net income of all companies in this sector."}
-                    id={"profitsInfo"}
-                    />
-                    </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profit Margin
-                  </label>
-                  <InfoModal
-                    title={"Profit Margin"}
-                    content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
-                      id={"profitMarginInfo"}
-                      />
-                  </div>
-
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
-              </div>
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    PE Ratio
-                  </label>
-                  <InfoModal
-                    title={"PE Ratio"}
-                    content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
-                    id={"peRatioInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
-              </div>
-
-
             </div>
-
-              
           </div>
-      
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Market Cap
+              <InfoModal
+                title={"Market Cap"}
+                content={"Combined market cap of all companies in this sector."}
+                id={"marketCapModal"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalMarketCap, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Revenue
+              <InfoModal
+                title={"Revenue"}
+                content={"The total revenue of all companies in this sector."}
+                id={"revenueInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalRevenue, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profits
+              <InfoModal
+                title={"Profits"}
+                content={"The total net income of all companies in this sector."}
+                id={"profitsInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalProfits, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profit Margin
+              <InfoModal
+                title={"Profit Margin"}
+                content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
+                id={"profitMarginInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalProfits / totalRevenue * 100)?.toFixed(2)}%
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              PE Ratio
+              <InfoModal
+                title={"PE Ratio"}
+                content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
+                id={"peRatioInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalMarketCap / totalProfits)?.toFixed(2)}
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+
           <h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
             Historical Performance
           </h2>
diff --git a/src/routes/list/healthcare-sector/+page.svelte b/src/routes/list/healthcare-sector/+page.svelte
index 7e484011..1a88bfa2 100644
--- a/src/routes/list/healthcare-sector/+page.svelte
+++ b/src/routes/list/healthcare-sector/+page.svelte
@@ -130,104 +130,104 @@ function getPlotOptions() {
               A complete list of companies in the Healthcare Sector that are publicly traded on the US stock exchange.
           </div>
       
-          <div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
-            
-            <div class="grid grid-cols-2 sm:grid-cols-4">
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Stocks
-                  </label>
-                  <InfoModal
-                    title={"Stocks"}
-                    content={"The total number of companies who operates in this sector."}
-                    id={"stocksInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
+           <div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Stocks
+              <InfoModal
+                title={"Stocks"}
+                content={"The total number of companies who operate in this sector."}
+                id={"stocksInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {rawData?.length}
               </div>
-              
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Market Cap
-                </label>
-                <InfoModal
-                      title={"Market Cap"}
-                      content={"Combined market cap of all companies in this sector."}
-                      id={"marketCapModal"}
-                    />
-                </div>
-                
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
-              </div>
-              
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Revenue
-                </label>
-                <InfoModal
-                  title={"Revenue"}
-                  content={"The total revenue of all companies in this sector."}
-                    id={"revenueInfo"}
-                    />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profits
-                  </label>
-                  <InfoModal
-                    title={"Profits"}
-                    content={"The total net income of all companies in this sector."}
-                    id={"profitsInfo"}
-                    />
-                    </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profit Margin
-                  </label>
-                  <InfoModal
-                    title={"Profit Margin"}
-                    content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
-                      id={"profitMarginInfo"}
-                      />
-                  </div>
-
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
-              </div>
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    PE Ratio
-                  </label>
-                  <InfoModal
-                    title={"PE Ratio"}
-                    content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
-                    id={"peRatioInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
-              </div>
-
-
             </div>
-
-              
           </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Market Cap
+              <InfoModal
+                title={"Market Cap"}
+                content={"Combined market cap of all companies in this sector."}
+                id={"marketCapModal"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalMarketCap, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Revenue
+              <InfoModal
+                title={"Revenue"}
+                content={"The total revenue of all companies in this sector."}
+                id={"revenueInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalRevenue, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profits
+              <InfoModal
+                title={"Profits"}
+                content={"The total net income of all companies in this sector."}
+                id={"profitsInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalProfits, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profit Margin
+              <InfoModal
+                title={"Profit Margin"}
+                content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
+                id={"profitMarginInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalProfits / totalRevenue * 100)?.toFixed(2)}%
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              PE Ratio
+              <InfoModal
+                title={"PE Ratio"}
+                content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
+                id={"peRatioInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalMarketCap / totalProfits)?.toFixed(2)}
+              </div>
+            </div>
+          </div>
+        </div>
+
       
           <h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
             Historical Performance
diff --git a/src/routes/list/industrials-sector/+page.svelte b/src/routes/list/industrials-sector/+page.svelte
index 03d69796..a02aab39 100644
--- a/src/routes/list/industrials-sector/+page.svelte
+++ b/src/routes/list/industrials-sector/+page.svelte
@@ -130,104 +130,104 @@ function getPlotOptions() {
               A complete list of companies in the Industrials Sector that are publicly traded on the US stock exchange.
           </div>
       
-          <div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
-            
-            <div class="grid grid-cols-2 sm:grid-cols-4">
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Stocks
-                  </label>
-                  <InfoModal
-                    title={"Stocks"}
-                    content={"The total number of companies who operates in this sector."}
-                    id={"stocksInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
+           <div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Stocks
+              <InfoModal
+                title={"Stocks"}
+                content={"The total number of companies who operate in this sector."}
+                id={"stocksInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {rawData?.length}
               </div>
-              
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Market Cap
-                </label>
-                <InfoModal
-                      title={"Market Cap"}
-                      content={"Combined market cap of all companies in this sector."}
-                      id={"marketCapModal"}
-                    />
-                </div>
-                
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
-              </div>
-              
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Revenue
-                </label>
-                <InfoModal
-                  title={"Revenue"}
-                  content={"The total revenue of all companies in this sector."}
-                    id={"revenueInfo"}
-                    />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profits
-                  </label>
-                  <InfoModal
-                    title={"Profits"}
-                    content={"The total net income of all companies in this sector."}
-                    id={"profitsInfo"}
-                    />
-                    </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profit Margin
-                  </label>
-                  <InfoModal
-                    title={"Profit Margin"}
-                    content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
-                      id={"profitMarginInfo"}
-                      />
-                  </div>
-
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
-              </div>
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    PE Ratio
-                  </label>
-                  <InfoModal
-                    title={"PE Ratio"}
-                    content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
-                    id={"peRatioInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
-              </div>
-
-
             </div>
-
-              
           </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Market Cap
+              <InfoModal
+                title={"Market Cap"}
+                content={"Combined market cap of all companies in this sector."}
+                id={"marketCapModal"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalMarketCap, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Revenue
+              <InfoModal
+                title={"Revenue"}
+                content={"The total revenue of all companies in this sector."}
+                id={"revenueInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalRevenue, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profits
+              <InfoModal
+                title={"Profits"}
+                content={"The total net income of all companies in this sector."}
+                id={"profitsInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalProfits, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profit Margin
+              <InfoModal
+                title={"Profit Margin"}
+                content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
+                id={"profitMarginInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalProfits / totalRevenue * 100)?.toFixed(2)}%
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              PE Ratio
+              <InfoModal
+                title={"PE Ratio"}
+                content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
+                id={"peRatioInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalMarketCap / totalProfits)?.toFixed(2)}
+              </div>
+            </div>
+          </div>
+        </div>
+
       
           <h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
             Historical Performance
diff --git a/src/routes/list/real-estate-sector/+page.svelte b/src/routes/list/real-estate-sector/+page.svelte
index 0597433d..4be53eb7 100644
--- a/src/routes/list/real-estate-sector/+page.svelte
+++ b/src/routes/list/real-estate-sector/+page.svelte
@@ -130,104 +130,104 @@ function getPlotOptions() {
               A complete list of companies in the Real Estate Sector that are publicly traded on the US stock exchange.
           </div>
       
-          <div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
-            
-            <div class="grid grid-cols-2 sm:grid-cols-4">
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Stocks
-                  </label>
-                  <InfoModal
-                    title={"Stocks"}
-                    content={"The total number of companies who operates in this sector."}
-                    id={"stocksInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
+           <div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Stocks
+              <InfoModal
+                title={"Stocks"}
+                content={"The total number of companies who operate in this sector."}
+                id={"stocksInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {rawData?.length}
               </div>
-              
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Market Cap
-                </label>
-                <InfoModal
-                      title={"Market Cap"}
-                      content={"Combined market cap of all companies in this sector."}
-                      id={"marketCapModal"}
-                    />
-                </div>
-                
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
-              </div>
-              
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Revenue
-                </label>
-                <InfoModal
-                  title={"Revenue"}
-                  content={"The total revenue of all companies in this sector."}
-                    id={"revenueInfo"}
-                    />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profits
-                  </label>
-                  <InfoModal
-                    title={"Profits"}
-                    content={"The total net income of all companies in this sector."}
-                    id={"profitsInfo"}
-                    />
-                    </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profit Margin
-                  </label>
-                  <InfoModal
-                    title={"Profit Margin"}
-                    content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
-                      id={"profitMarginInfo"}
-                      />
-                  </div>
-
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
-              </div>
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    PE Ratio
-                  </label>
-                  <InfoModal
-                    title={"PE Ratio"}
-                    content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
-                    id={"peRatioInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
-              </div>
-
-
             </div>
-
-              
           </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Market Cap
+              <InfoModal
+                title={"Market Cap"}
+                content={"Combined market cap of all companies in this sector."}
+                id={"marketCapModal"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalMarketCap, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Revenue
+              <InfoModal
+                title={"Revenue"}
+                content={"The total revenue of all companies in this sector."}
+                id={"revenueInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalRevenue, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profits
+              <InfoModal
+                title={"Profits"}
+                content={"The total net income of all companies in this sector."}
+                id={"profitsInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalProfits, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profit Margin
+              <InfoModal
+                title={"Profit Margin"}
+                content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
+                id={"profitMarginInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalProfits / totalRevenue * 100)?.toFixed(2)}%
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              PE Ratio
+              <InfoModal
+                title={"PE Ratio"}
+                content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
+                id={"peRatioInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalMarketCap / totalProfits)?.toFixed(2)}
+              </div>
+            </div>
+          </div>
+        </div>
+
       
           <h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
             Historical Performance
diff --git a/src/routes/list/technology-sector/+page.svelte b/src/routes/list/technology-sector/+page.svelte
index ef76609a..5379c394 100644
--- a/src/routes/list/technology-sector/+page.svelte
+++ b/src/routes/list/technology-sector/+page.svelte
@@ -130,104 +130,104 @@ function getPlotOptions() {
               A complete list of companies in the Technology Sector that are publicly traded on the US stock exchange.
           </div>
       
-          <div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
-            
-            <div class="grid grid-cols-2 sm:grid-cols-4">
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Stocks
-                  </label>
-                  <InfoModal
-                    title={"Stocks"}
-                    content={"The total number of companies who operates in this sector."}
-                    id={"stocksInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
+           <div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Stocks
+              <InfoModal
+                title={"Stocks"}
+                content={"The total number of companies who operate in this sector."}
+                id={"stocksInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {rawData?.length}
               </div>
-              
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Market Cap
-                </label>
-                <InfoModal
-                      title={"Market Cap"}
-                      content={"Combined market cap of all companies in this sector."}
-                      id={"marketCapModal"}
-                    />
-                </div>
-                
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
-              </div>
-              
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Revenue
-                </label>
-                <InfoModal
-                  title={"Revenue"}
-                  content={"The total revenue of all companies in this sector."}
-                    id={"revenueInfo"}
-                    />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profits
-                  </label>
-                  <InfoModal
-                    title={"Profits"}
-                    content={"The total net income of all companies in this sector."}
-                    id={"profitsInfo"}
-                    />
-                    </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profit Margin
-                  </label>
-                  <InfoModal
-                    title={"Profit Margin"}
-                    content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
-                      id={"profitMarginInfo"}
-                      />
-                  </div>
-
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
-              </div>
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    PE Ratio
-                  </label>
-                  <InfoModal
-                    title={"PE Ratio"}
-                    content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
-                    id={"peRatioInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
-              </div>
-
-
             </div>
-
-              
           </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Market Cap
+              <InfoModal
+                title={"Market Cap"}
+                content={"Combined market cap of all companies in this sector."}
+                id={"marketCapModal"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalMarketCap, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Revenue
+              <InfoModal
+                title={"Revenue"}
+                content={"The total revenue of all companies in this sector."}
+                id={"revenueInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalRevenue, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profits
+              <InfoModal
+                title={"Profits"}
+                content={"The total net income of all companies in this sector."}
+                id={"profitsInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalProfits, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profit Margin
+              <InfoModal
+                title={"Profit Margin"}
+                content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
+                id={"profitMarginInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalProfits / totalRevenue * 100)?.toFixed(2)}%
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              PE Ratio
+              <InfoModal
+                title={"PE Ratio"}
+                content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
+                id={"peRatioInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalMarketCap / totalProfits)?.toFixed(2)}
+              </div>
+            </div>
+          </div>
+        </div>
+
       
           <h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
             Historical Performance
diff --git a/src/routes/list/utilities-sector/+page.svelte b/src/routes/list/utilities-sector/+page.svelte
index 1dcd4caf..e5507b18 100644
--- a/src/routes/list/utilities-sector/+page.svelte
+++ b/src/routes/list/utilities-sector/+page.svelte
@@ -130,104 +130,104 @@ function getPlotOptions() {
               A complete list of companies in the Utilities Sector that are publicly traded on the US stock exchange.
           </div>
       
-          <div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
-            
-            <div class="grid grid-cols-2 sm:grid-cols-4">
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Stocks
-                  </label>
-                  <InfoModal
-                    title={"Stocks"}
-                    content={"The total number of companies who operates in this sector."}
-                    id={"stocksInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
+           <div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Stocks
+              <InfoModal
+                title={"Stocks"}
+                content={"The total number of companies who operate in this sector."}
+                id={"stocksInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {rawData?.length}
               </div>
-              
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Market Cap
-                </label>
-                <InfoModal
-                      title={"Market Cap"}
-                      content={"Combined market cap of all companies in this sector."}
-                      id={"marketCapModal"}
-                    />
-                </div>
-                
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
-              </div>
-              
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                <label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                  Revenue
-                </label>
-                <InfoModal
-                  title={"Revenue"}
-                  content={"The total revenue of all companies in this sector."}
-                    id={"revenueInfo"}
-                    />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profits
-                  </label>
-                  <InfoModal
-                    title={"Profits"}
-                    content={"The total net income of all companies in this sector."}
-                    id={"profitsInfo"}
-                    />
-                    </div>
-                <div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
-              </div>
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    Profit Margin
-                  </label>
-                  <InfoModal
-                    title={"Profit Margin"}
-                    content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
-                      id={"profitMarginInfo"}
-                      />
-                  </div>
-
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
-              </div>
-
-
-              <div class="stat">
-                <div class="flex flex-row items-center">
-                  <label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
-                    PE Ratio
-                  </label>
-                  <InfoModal
-                    title={"PE Ratio"}
-                    content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
-                    id={"peRatioInfo"}
-                  />
-                  </div>
-                <div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
-              </div>
-
-
             </div>
-
-              
           </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Market Cap
+              <InfoModal
+                title={"Market Cap"}
+                content={"Combined market cap of all companies in this sector."}
+                id={"marketCapModal"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalMarketCap, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Revenue
+              <InfoModal
+                title={"Revenue"}
+                content={"The total revenue of all companies in this sector."}
+                id={"revenueInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalRevenue, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profits
+              <InfoModal
+                title={"Profits"}
+                content={"The total net income of all companies in this sector."}
+                id={"profitsInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {abbreviateNumber(totalProfits, true)}
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              Profit Margin
+              <InfoModal
+                title={"Profit Margin"}
+                content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
+                id={"profitMarginInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalProfits / totalRevenue * 100)?.toFixed(2)}%
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bp:p-5 sm:p-6">
+            <label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
+              PE Ratio
+              <InfoModal
+                title={"PE Ratio"}
+                content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
+                id={"peRatioInfo"}
+              />
+            </label>
+            <div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
+              <div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
+                {(totalMarketCap / totalProfits)?.toFixed(2)}
+              </div>
+            </div>
+          </div>
+        </div>
+
       
           <h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
             Historical Performance