diff --git a/src/routes/etf/[tickerID]/+page.svelte b/src/routes/etf/[tickerID]/+page.svelte
index c207ebae..73f258eb 100644
--- a/src/routes/etf/[tickerID]/+page.svelte
+++ b/src/routes/etf/[tickerID]/+page.svelte
@@ -3,7 +3,7 @@
   import {AreaSeries, Chart, PriceLine, CandlestickSeries} from 'svelte-lightweight-charts';
   
     import { TrackingModeExitMode } from 'lightweight-charts';
-    import {getCache, setCache, taRatingComponent,  optionsNetFlowComponent, optionComponent, sentimentComponent, varComponent, retailVolumeComponent, trendAnalysisComponent, priceAnalysisComponent, assetType, screenWidth, globalForm, numberOfUnreadNotification, displayCompanyName, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, clientSideCache, etfTicker, isOpen,  isBeforeMarketOpen, isWeekend} from '$lib/store';
+    import {getCache, setCache, taRatingComponent, failToDeliverComponent, optionsNetFlowComponent, optionComponent, sentimentComponent, varComponent, retailVolumeComponent, trendAnalysisComponent, priceAnalysisComponent, assetType, screenWidth, globalForm, numberOfUnreadNotification, displayCompanyName, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, clientSideCache, etfTicker, isOpen,  isBeforeMarketOpen, isWeekend} from '$lib/store';
     import { onDestroy, onMount } from 'svelte';    
     import ETFKeyInformation from '$lib/components/ETFKeyInformation.svelte';
     import Lazy from '$lib/components/Lazy.svelte';
@@ -1397,21 +1397,19 @@ async function exportData(timePeriod:string) {
                                     </div>
                                   </Lazy>
                                   
-                                  <!--
                                   <Lazy>
-                                    <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$impliedVolatilityComponent ? 'hidden' : ''}">
-                                      {#await import('$lib/components/ImpliedVolatility.svelte') then {default: Comp}}
-                                        <svelte:component this={Comp} data={data} />
+                                    <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$failToDeliverComponent ? 'hidden' : ''}">
+                                      {#await import("$lib/components/FailToDeliver.svelte") then { default: Comp }}
+                                        <svelte:component this={Comp} {data} />
                                       {/await}
                                     </div>
                                   </Lazy>
-                                  -->
                 
   
                                     <!--End Price Prediction Model-->
     
                                      <!--Start CountrySegmentation-->
-                                      <div class="w-full pt-10 sm:p-6 m-auto {geographicList?.length !== 0 ? '' : 'hidden'}">
+                                      <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {geographicList?.length !== 0 ? '' : 'hidden'}">
                                           {#if CountrySegmentation}
                                             <CountrySegmentation
                                             geographicList = {geographicList}
diff --git a/src/routes/industry/+page.svelte b/src/routes/industry/+page.svelte
index c4aabbd5..f5d92407 100644
--- a/src/routes/industry/+page.svelte
+++ b/src/routes/industry/+page.svelte
@@ -2,6 +2,7 @@
 import { screenWidth } from '$lib/store';
 import IndustryTable from '$lib/components/IndustryTable.svelte';
 import { industryList, sectorList } from '$lib/utils';
+import { goto } from '$app/navigation';
 
 export let data;
 let rawData = data?.getIndustryOverview;
@@ -90,7 +91,7 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
               <!-- Content area -->
               <div class="w-full">
                 {#each sectorList as sector}
-                    <h2 class="cursor-pointer text-white sm:hover:underline font-semibold text-lg sm:text-xl mt-5">
+                    <h2 on:click={() => sectorSelector(sector)} class="cursor-pointer text-white sm:hover:underline font-semibold text-lg sm:text-xl mt-5">
                         Sector: {sector} <svg class="inline-block h-6 w-6 -mt-1" viewBox="0 0 20 20" fill="white" style="max-width:40px"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                     </h2>
                     
diff --git a/src/routes/industry/sectors/+page.svelte b/src/routes/industry/sectors/+page.svelte
new file mode 100644
index 00000000..f5d92407
--- /dev/null
+++ b/src/routes/industry/sectors/+page.svelte
@@ -0,0 +1,112 @@
+<script lang='ts'>
+import { screenWidth } from '$lib/store';
+import IndustryTable from '$lib/components/IndustryTable.svelte';
+import { industryList, sectorList } from '$lib/utils';
+import { goto } from '$app/navigation';
+
+export let data;
+let rawData = data?.getIndustryOverview;
+
+const sectorNavigation = [
+    {
+        title: 'Financial Services',
+        link: '/list/financial-sector'
+    },
+    {
+        title: 'Finance',
+        link: '/list/financial-sector'
+    },
+    {
+        title: 'Healthcare',
+        link: '/list/healthcare-sector'
+    },
+    {
+        title: 'Technology',
+        link: '/list/technology-sector'
+    },
+    {
+        title: 'Industrials',
+        link: '/list/industrials-sector'
+    },
+    {
+        title: 'Energy',
+        link: '/list/energy-sector'
+    },
+    {
+        title: 'Utilities',
+        link: '/list/utilities-sector'
+    },
+    {
+        title: 'Consumer Cyclical',
+        link: '/list/consumer-cyclical-sector'
+    },
+    {
+        title: 'Real Estate',
+        link: '/list/real-estate-sector'
+    },
+    {
+        title: 'Basic Materials',
+        link: '/list/basic-materials-sector'
+    },
+    {
+        title: 'Communication Services',
+        link: '/list/communication-services-sector'
+    },
+    {
+        title: 'Consumer Defensive',
+        link: '/list/consumer-defensive-sector'
+    },
+]
+
+function sectorSelector(sector) {
+    const selectedSector = sectorNavigation?.find(item => item?.title === sector);
+
+    if (selectedSector) {
+      goto(selectedSector?.link);
+    } else {
+      // Handle the case when the sector is not found
+      console.error(`Sector not found: ${sector}`);
+    }
+  }
+
+$: charNumber = $screenWidth < 640 ? 20 : 30;
+
+</script>
+    
+    <section class="w-full overflow-hidden m-auto px-2 sm:px-0">
+            
+          
+        <div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
+            <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>
+            We categorize stocks into {sectorList?.length} sectors and {industryList?.length} industries, based on the company's primary business activity.
+        </div>
+    
+      
+        
+          <!-- Page wrapper -->
+          <div class="flex justify-center w-full m-auto h-full overflow-hidden">
+      
+              
+        
+              <!-- Content area -->
+              <div class="w-full">
+                {#each sectorList as sector}
+                    <h2 on:click={() => sectorSelector(sector)} class="cursor-pointer text-white sm:hover:underline font-semibold text-lg sm:text-xl mt-5">
+                        Sector: {sector} <svg class="inline-block h-6 w-6 -mt-1" viewBox="0 0 20 20" fill="white" style="max-width:40px"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
+                    </h2>
+                    
+                    <div class="border-t border-gray-600 mt-5"/>
+
+                    <IndustryTable charNumber = {charNumber} industryList = {rawData[sector]} />
+                    <div class="border-t border-gray-600 mt-5"/>
+                {/each}
+    
+                  
+          </div>
+
+          
+      
+      </section>
+      
+      
+    
\ No newline at end of file