diff --git a/app/alerts-management/Alerts.tsx b/app/alerts-management/Alerts.tsx
index e54995dd2..99a961aff 100644
--- a/app/alerts-management/Alerts.tsx
+++ b/app/alerts-management/Alerts.tsx
@@ -8,20 +8,17 @@ import Card from '@/components/Card/card'
 import FeatureCard from '@/components/FeatureCard/FeatureCard'
 import ProductNav from '@/components/ProductNav/ProductNav'
 
-
 function Alerts() {
   return (
-    <main className='mb-auto !mt-[-10px]'>
-      <ProductNav/>
-      <div className='relative bg-signoz_ink-500'>
+    <main className="!mt-[-10px] mb-auto">
+      <ProductNav />
+      <div className="relative bg-signoz_ink-500">
         <div className="absolute left-0 right-0 top-0 h-screen bg-[url('/img/background_blur/Perlin_noise.png')] bg-[length:55%] bg-[center_top_4rem] sm:bg-no-repeat " />
         <div className="absolute left-0 right-0 top-0 h-screen bg-[url('/img/background_blur/Circle.png')] bg-[length:110%] bg-no-repeat sm:bg-[center_top_-50rem]" />
         <Header />
         <TrustedByTeams page="Alerts" />
         <SigNozFeatures />
-        {/* <SigNozUsage /> */}
         <UsageBasedPricing />
-        {/* <ExploreDocs /> */}
         <SigNozStats />
         <GetStarted page="Alerts" />
       </div>
@@ -31,94 +28,127 @@ function Alerts() {
 
 export default Alerts
 
-const PlatformCard = ({ title, description }) => {
+interface PlatformCardProps {
+  title: string
+  description: string
+}
+
+const PlatformCard = ({ title, description }: PlatformCardProps) => {
   return (
-    <div className="p-4 bg-signoz_ink-400 border border-signoz_slate-500 rounded-md">
-      <h3 className="text-base font-medium text-signoz_vanilla-100 mb-2">{title}</h3>
-      <p className="text-sm font-normal text-signoz_vanilla-400 mb-0">{description}</p>
+    <div className="rounded-md border border-signoz_slate-500 bg-signoz_ink-400 p-4">
+      <h3 className="mb-2 text-base font-medium text-signoz_vanilla-100">{title}</h3>
+      <p className="mb-0 text-sm font-normal text-signoz_vanilla-400">{description}</p>
     </div>
-  );
-};
+  )
+}
 
 const FeatureList = () => {
   const features = [
-    { title: 'Host Monitoring', description: 'Monitor any hosts such as VM, physical machines, containers, etc.' },
-    { title: 'Build dashboards for application metrics', description: 'You can create customized dashboards for your application metrics' },
-    { title: 'Kubernetes Infrastructure Monitoring', description: 'Query logs for specific conditions and add them to dashboards for continuous monitoring.' },
-    { title: 'Share log lines', description: 'Improved collaboration with your teammates while debugging by sharing specific log lines.' },
-  ];
+    {
+      title: 'Host Monitoring',
+      description: 'Monitor any hosts such as VM, physical machines, containers, etc.',
+    },
+    {
+      title: 'Build dashboards for application metrics',
+      description: 'You can create customized dashboards for your application metrics',
+    },
+    {
+      title: 'Kubernetes Infrastructure Monitoring',
+      description:
+        'Query logs for specific conditions and add them to dashboards for continuous monitoring.',
+    },
+    {
+      title: 'Share log lines',
+      description:
+        'Improved collaboration with your teammates while debugging by sharing specific log lines.',
+    },
+  ]
 
   return (
-    <div className="w-full flex flex-col gap-4">
+    <div className="flex w-full flex-col gap-4">
       {features.map((feature, index) => (
-        <PlatformCard
-          key={index}
-          title={feature.title}
-          description={feature.description}
-        />
+        <PlatformCard key={index} title={feature.title} description={feature.description} />
       ))}
     </div>
-  );
-};
+  )
+}
 
 const UsageList = () => {
   const Usage = [
-    { title: 'Pay only for data you send', description: 'We don’t have any SKU-based pricing. Get access to all features in the plan selected and only pay for the data you send. Pay only $0.1 per million samples for metrics.' },
-    { title: 'No special pricing for custom metrics', description: 'Vendors like Datadog charge $0.05 per custom metric, which limits a team’s ability to send and analyze custom metrics for monitoring. SigNoz does not treat custom metrics any differently. The charges remain $0.1 per million samples no matter what type of metrics you send.' },
-    { title: 'Add unlimited team members', description: 'Observability should be available to every developer at your company. After all, anyone can need debugging. That’s why we don’t charge for user seats, and you can add as many team members as you want.' },
-    { title: 'No Host (container or node) based pricing', description: 'For modern cloud-based applications it doesn’t make sense to charge on the basis of number of hosts or containers. You don’t need to worry about auto-scaling during peak hours. Only pay for the amount of data sent no matter the number of hosts.' },
+    {
+      title: 'Pay only for data you send',
+      description:
+        'We don’t have any SKU-based pricing. Get access to all features in the plan selected and only pay for the data you send. Pay only $0.1 per million samples for metrics.',
+    },
+    {
+      title: 'No special pricing for custom metrics',
+      description:
+        'Vendors like Datadog charge $0.05 per custom metric, which limits a team’s ability to send and analyze custom metrics for monitoring. SigNoz does not treat custom metrics any differently. The charges remain $0.1 per million samples no matter what type of metrics you send.',
+    },
+    {
+      title: 'Add unlimited team members',
+      description:
+        'Observability should be available to every developer at your company. After all, anyone can need debugging. That’s why we don’t charge for user seats, and you can add as many team members as you want.',
+    },
+    {
+      title: 'No Host (container or node) based pricing',
+      description:
+        'For modern cloud-based applications it doesn’t make sense to charge on the basis of number of hosts or containers. You don’t need to worry about auto-scaling during peak hours. Only pay for the amount of data sent no matter the number of hosts.',
+    },
   ]
 
   return (
-    <div className="w-full flex flex-col gap-4">
+    <div className="flex w-full flex-col gap-4">
       {Usage.map((feature, index) => (
-        <PlatformCard
-          key={index}
-          title={feature.title}
-          description={feature.description}
-        />
+        <PlatformCard key={index} title={feature.title} description={feature.description} />
       ))}
     </div>
-  );
-
+  )
 }
 
 const DocsList = () => {
   const Docs = [
-    { title: 'Node.js instrumentation', description: 'Instrument your Node.js application and monitor with SigNoz' },
-    { title: 'Python instrumentation', description: 'Instrument your Python application and monitor with SigNoz' },
-    { title: 'Java instrumentation', description: 'Instrument your Java application and monitor with SigNoz' },
-    { title: 'Get started with SigNoz APM', description: 'Instrument your Java application and monitor with SigNoz' },
+    {
+      title: 'Node.js instrumentation',
+      description: 'Instrument your Node.js application and monitor with SigNoz',
+    },
+    {
+      title: 'Python instrumentation',
+      description: 'Instrument your Python application and monitor with SigNoz',
+    },
+    {
+      title: 'Java instrumentation',
+      description: 'Instrument your Java application and monitor with SigNoz',
+    },
+    {
+      title: 'Get started with SigNoz APM',
+      description: 'Instrument your Java application and monitor with SigNoz',
+    },
   ]
 
   return (
-    <div className="w-full flex flex-col gap-4">
+    <div className="flex w-full flex-col gap-4">
       {Docs.map((feature, index) => (
-        <PlatformCard
-          key={index}
-          title={feature.title}
-          description={feature.description}
-        />
+        <PlatformCard key={index} title={feature.title} description={feature.description} />
       ))}
     </div>
-  );
+  )
 }
 
 const Header = () => {
-
   return (
     <header className="relative !mx-auto mt-16 !w-[100vw] md:!w-[80vw]">
       <div className="absolute bottom-0 left-[12px] right-[12px] top-0 z-[0] border !border-b-0 !border-t-0 border-dashed border-signoz_slate-400 md:left-[24px] md:right-[24px]" />
       <div className="relative !mx-auto flex !w-[100vw] flex-col items-center border !border-b-0 border-dashed border-signoz_slate-400 px-2 pb-4 pt-12 text-center md:!w-[80vw] md:px-5 md:pt-[8.5rem]">
+        <div className="absolute left-0 top-[101px] z-[0] h-9 !w-[100vw] border !border-l-0 !border-r-0 border-dashed border-signoz_slate-400 sm:h-14 md:top-[225px] md:!w-[80vw]" />
 
-        <div className="absolute left-0 top-[101px] h-9 sm:h-14 !w-[100vw] border !border-l-0 !border-r-0 border-dashed border-signoz_slate-400 md:top-[225px] md:!w-[80vw] z-[0]" />
-
-        <h1 className="my-4 text-2xl !p-3 sm:my-2 sm:text-3xl font-semibold tracking-tight dark:text-white sm:my-5 md:leading-[3.5rem] lg:text-[44px] text-gradient z-[1]">
-        Set Alerts on all Types of Observability Data
+        <h1 className="text-gradient z-[1] my-4 !p-3 text-2xl font-semibold tracking-tight dark:text-white sm:my-2 sm:my-5 sm:text-3xl md:leading-[3.5rem] lg:text-[44px]">
+          Set Alerts on all Types of Observability Data
         </h1>
-        
-        <p className="m-0 p-3 text-lg leading-8 font-normal sm:p-0 text-signoz_vanilla-400">
-        Create actionable alerts on metrics, logs, traces and exceptions and get notified in your preferred channel.
+
+        <p className="m-0 p-3 text-lg font-normal leading-8 text-signoz_vanilla-400 sm:p-0">
+          Create actionable alerts on metrics, logs, traces and exceptions and get notified in your
+          preferred channel.
           <br className="hidden lg:inline" />
           Creating alerts in SigNoz is easy - just 3 simple steps.
         </p>
@@ -138,7 +168,7 @@ const Header = () => {
           </Link>
         </Button>
       </div>
-      <div className="section-container !mx-auto !mt-0 !w-[90vw] border !border-b-0 !border-t-0 border-none border-signoz_slate-400 md:!w-[80vw] md:border-dashed max-sm:-mb-[3rem] -mb-[9rem]">
+      <div className="section-container !mx-auto !mt-0 -mb-[9rem] !w-[90vw] border !border-b-0 !border-t-0 border-none border-signoz_slate-400 max-sm:-mb-[3rem] md:!w-[80vw] md:border-dashed">
         <div className="w-100 mx-[-28px]">
           <div className="product-explainer-video hero-figure rounded-lg p-3">
             <div className="embed-container">
@@ -172,11 +202,15 @@ const COMPANIES = [
   { image: '/img/users/wombo.svg', imageDesc: 'wombo logo' },
 ]
 
-const TrustedByTeams = ({ page }) => {
+interface TrustedByTeamsProps {
+  page: string
+}
+
+const TrustedByTeams = ({ page }: TrustedByTeamsProps) => {
   const customerStoriesId = `btn-customer-stories-${page}-hero`
   return (
     <section
-      className={`relative pt-10 !m-0 !mx-auto !w-[100vw]  border !border-b-0 border-dashed border-signoz_slate-400 md:!w-[80vw] z-[1] bg-signoz_ink-500`}
+      className={`relative z-[1] !m-0 !mx-auto !w-[100vw]  border !border-b-0 border-dashed border-signoz_slate-400 bg-signoz_ink-500 pt-10 md:!w-[80vw]`}
     >
       <div className="section-container">
         <div className="mb-2 flex flex-col items-center text-center md:mb-12">
@@ -184,7 +218,7 @@ const TrustedByTeams = ({ page }) => {
             Trusted by the <span className="text-signoz_vanilla-100">best platform teams</span>
           </div>
         </div>
-        <div className="mb-12 mt-12 grid grid-cols-2 place-content-center gap-y-8 sm:gap-x-8 sm:gap-y-14 px-2  sm:grid-cols-4 md:mt-0 md:grid-cols-6 ">
+        <div className="mb-12 mt-12 grid grid-cols-2 place-content-center gap-y-8 px-2 sm:grid-cols-4 sm:gap-x-8  sm:gap-y-14 md:mt-0 md:grid-cols-6 ">
           {COMPANIES.map((company, idx) => (
             <div key={`${idx}-${company.image}`} className="flex items-center justify-center">
               <img
@@ -205,7 +239,7 @@ const TrustedByTeams = ({ page }) => {
               id={customerStoriesId}
               className=" button-background relative z-[1] flex h-8 items-center justify-center gap-1.5 truncate rounded-full py-2 pl-4 pr-3 text-center text-sm font-medium not-italic leading-5 text-white no-underline outline-none hover:text-white"
             >
-              <Link href="/case-study/" className="z-[1] mx-2 flex-center">
+              <Link href="/case-study/" className="flex-center z-[1] mx-2">
                 Read customer stories <ArrowRight size={14} />
               </Link>
             </Button>
@@ -216,14 +250,13 @@ const TrustedByTeams = ({ page }) => {
   )
 }
 
-
 const SigNozFeatures = () => {
-
   const sections = [
     {
       title: 'Step 1. Define the metrics',
-      desc: ['You can create alerts on any kind of telemetry signal - logs, metrics, traces and exceptions. You can create complex queries to get the required metrics that you want to monitor with alerts.',
-        'Alerts are powered by the same query builder that is used for logs, metrics, and trace explorer. You can add multiple queries and write formulae to query exactly what you want.'
+      desc: [
+        'You can create alerts on any kind of telemetry signal - logs, metrics, traces and exceptions. You can create complex queries to get the required metrics that you want to monitor with alerts.',
+        'Alerts are powered by the same query builder that is used for logs, metrics, and trace explorer. You can add multiple queries and write formulae to query exactly what you want.',
       ],
       logo: '/img/log-management/fast.svg',
     },
@@ -234,57 +267,53 @@ const SigNozFeatures = () => {
     },
     {
       title: 'Step 3. Configure your alert',
-      desc: ['In this step, you set the alerts metadata, including severity, name, and description. Set severity level of the alert like ‘warning’, or ‘critical’, set alert name and description. You can also add labels to your alerts. Then finally, set a notification channel to be notified.',
+      desc: [
+        'In this step, you set the alerts metadata, including severity, name, and description. Set severity level of the alert like ‘warning’, or ‘critical’, set alert name and description. You can also add labels to your alerts. Then finally, set a notification channel to be notified.',
       ],
       logo: '/img/log-management/fast.svg',
       buttonText: 'Learn More',
-      buttonLink: 'https://signoz.io/docs/alerts/'
-    },
-    {
+      buttonLink: 'https://signoz.io/docs/alerts/',
     },
+    {},
   ]
 
-
   const scrollsections = [
     {
       title: 'Metrics Based Alert',
-      desc: "A Metric-based alert in SigNoz allows you to define conditions based on metric data and trigger alerts when these conditions are met.",
-      image: "/img/features/alerts/metric-based-alert.webp",
+      desc: 'A Metric-based alert in SigNoz allows you to define conditions based on metric data and trigger alerts when these conditions are met.',
+      image: '/img/features/alerts/metric-based-alert.webp',
       buttonText: 'Learn More',
-      buttonLink: 'https://signoz.io/docs/alerts-management/metrics-based-alerts/'
+      buttonLink: 'https://signoz.io/docs/alerts-management/metrics-based-alerts/',
     },
     {
       title: 'Log Based Alerts',
-      desc: "A Log-based alert allows you to define conditions based on log data, triggering alerts when these conditions are met.",
-      image: "/img/features/alerts/log-based-alert.webp",
+      desc: 'A Log-based alert allows you to define conditions based on log data, triggering alerts when these conditions are met.',
+      image: '/img/features/alerts/log-based-alert.webp',
       buttonText: 'Learn More',
-      buttonLink: 'https://signoz.io/docs/alerts-management/log-based-alerts/'
+      buttonLink: 'https://signoz.io/docs/alerts-management/log-based-alerts/',
     },
     {
       title: 'Trace Based Alerts',
-      desc: "A Trace-based alert in SigNoz allows you to define conditions based on trace data, triggering alerts when these conditions are met.",
-      image: "/img/features/alerts/trace-based-alert.webp",
+      desc: 'A Trace-based alert in SigNoz allows you to define conditions based on trace data, triggering alerts when these conditions are met.',
+      image: '/img/features/alerts/trace-based-alert.webp',
       buttonText: 'Learn More',
-      buttonLink: 'https://signoz.io/docs/alerts-management/trace-based-alerts/'
+      buttonLink: 'https://signoz.io/docs/alerts-management/trace-based-alerts/',
     },
     {
       title: 'Exceptions Based Alerts',
-      desc: "An Exceptions-based alert in SigNoz allows you to define conditions based on exception data, triggering alerts when these conditions are met.",
-      image: "/img/features/alerts/exception-based-alert.webp",
+      desc: 'An Exceptions-based alert in SigNoz allows you to define conditions based on exception data, triggering alerts when these conditions are met.',
+      image: '/img/features/alerts/exception-based-alert.webp',
       buttonText: 'Learn More',
-      buttonLink: 'https://signoz.io/docs/alerts-management/exceptions-based-alerts/'
+      buttonLink: 'https://signoz.io/docs/alerts-management/exceptions-based-alerts/',
     },
     {
       title: 'Notification in your preferred channel',
-      desc: "Configure alerts to get notified in your preferred channel. We support popular channels like Slack, PagerDuty, Opsgenie, MS Teams, emails & and more. You can also use webhooks to configure alert notifications in whole array of different channels.",
-      image: "/img/features/alerts/notification-channel.webp",
+      desc: 'Configure alerts to get notified in your preferred channel. We support popular channels like Slack, PagerDuty, Opsgenie, MS Teams, emails & and more. You can also use webhooks to configure alert notifications in whole array of different channels.',
+      image: '/img/features/alerts/notification-channel.webp',
       buttonText: 'Learn More',
-      buttonLink: 'https://signoz.io/docs/setup-alerts-notification/'
+      buttonLink: 'https://signoz.io/docs/setup-alerts-notification/',
     },
-    {
-
-    }
-
+    {},
   ]
   return (
     <>
@@ -294,7 +323,7 @@ const SigNozFeatures = () => {
             <div className="flex flex-col gap-6 pb-44 pt-28 ">
               <div className="mx-auto mt-[50px] flex max-w-4xl flex-col items-center text-center">
                 <div className="text-[44px] font-semibold leading-[3.25rem] text-signoz_sienna-100">
-                Set Alerts in <br /> 3 Simple Steps
+                  Set Alerts in <br /> 3 Simple Steps
                 </div>
               </div>
             </div>
@@ -305,7 +334,7 @@ const SigNozFeatures = () => {
         <div className="!mx-auto grid !w-[100vw] grid-cols-1 border !border-b-0 !border-l-0 !border-t-0 border-dashed border-signoz_slate-400 sm:grid-cols-2 md:!w-[80vw]">
           {sections.map((section, index) => (
             <Card
-              key ={index}
+              key={index}
               logo={section.logo}
               subTitle={section.title}
               description={section.desc}
@@ -324,7 +353,7 @@ const SigNozFeatures = () => {
             <div className="flex flex-col gap-6 pb-44 pt-28 ">
               <div className="mx-auto mt-[50px] flex max-w-4xl flex-col items-center text-center">
                 <div className="text-[44px] font-semibold leading-[3.25rem] text-signoz_sienna-100">
-                Alerts Management <br /> Overview
+                  Alerts Management <br /> Overview
                 </div>
               </div>
             </div>
@@ -332,11 +361,10 @@ const SigNozFeatures = () => {
         </section>
       </div>
 
-
       <div className="!mx-auto grid !w-[100vw] grid-cols-1 border !border-l-0 !border-t-0 border-dashed border-signoz_slate-400 sm:grid-cols-2 md:!w-[80vw]">
         {scrollsections.map((scrollsections, index) => (
           <FeatureCard
-          key ={index}
+            key={index}
             title={scrollsections.title}
             description={scrollsections.desc}
             buttonText={scrollsections.buttonText}
@@ -349,19 +377,18 @@ const SigNozFeatures = () => {
   )
 }
 
-
-
 const SigNozUsage = () => {
   return (
     <div className="section-container !mx-auto !w-[100vw] border !border-b-0 border-dashed border-signoz_slate-400 !px-0 md:!w-[80vw]">
       <div className="flex flex-col sm:flex-row">
         <div className="!w-[100%]  flex-1 md:!w-[300px]">
           <p className="sticky top-[100px] px-10 pl-0 pt-10 text-4xl font-bold !leading-[3.5rem] text-signoz_vanilla-100 sm:text-[44px] md:px-0 md:pl-12">
-            Use SigNoz<br /> Metrics & Dashboards for...
+            Use SigNoz
+            <br /> Metrics & Dashboards for...
           </p>
         </div>
         <div className="flex-[2_2_0%]">
-          <div className="ml-0 justify-between gap-8 border !border-b-0 !border-r-0 !border-t-0 border-dashed border-signoz_slate-400 py-10 sm:flex-row px-10">
+          <div className="ml-0 justify-between gap-8 border !border-b-0 !border-r-0 !border-t-0 border-dashed border-signoz_slate-400 px-10 py-10 sm:flex-row">
             <FeatureList />
           </div>
         </div>
@@ -376,24 +403,28 @@ const UsageBasedPricing = () => {
       <div className="flex flex-col sm:flex-row">
         <div className="!w-[100%]  flex-1 md:!w-[300px]">
           <p className="sticky top-[100px] px-10 pl-0 pt-10 text-4xl font-bold !leading-[3.5rem] text-signoz_vanilla-100 sm:text-[44px] md:px-0 md:pl-12">
-            Simple<br /> usage-based <br /> pricing
+            Simple
+            <br /> usage-based <br /> pricing
           </p>
         </div>
         <div className="flex-[2_2_0%]">
-          <div className="ml-0 justify-between gap-8 border !border-b-0 !border-r-0 !border-t-0 border-dashed border-signoz_slate-400 py-10 sm:flex-row px-10">
-            <div className='text-signoz_vanilla-100 text-2xl font-semibold mb-2'>
+          <div className="ml-0 justify-between gap-8 border !border-b-0 !border-r-0 !border-t-0 border-dashed border-signoz_slate-400 px-10 py-10 sm:flex-row">
+            <div className="mb-2 text-2xl font-semibold text-signoz_vanilla-100">
               Pricing you can trust
             </div>
-            <p className='text-signoz_vanilla-400 text-base font-normal'>Tired of Datadog’s unpredictable bills or New Relic’s user-based pricing?<br />We’re here for you.</p>
+            <p className="text-base font-normal text-signoz_vanilla-400">
+              Tired of Datadog’s unpredictable bills or New Relic’s user-based pricing?
+              <br />
+              We’re here for you.
+            </p>
             <UsageList />
-          <Button id="btn-get-started-homepage-hero" className="mt-5">
-          <Link href="/pricing/" className="flex-center">
-            Check Pricing
-            <ArrowRight size={14} />
-          </Link>
-        </Button>
+            <Button id="btn-get-started-homepage-hero" className="mt-5">
+              <Link href="/pricing/" className="flex-center">
+                Check Pricing
+                <ArrowRight size={14} />
+              </Link>
+            </Button>
           </div>
-
         </div>
       </div>
     </div>
@@ -410,7 +441,7 @@ const ExploreDocs = () => {
           </p>
         </div>
         <div className="flex-[2_2_0%]">
-          <div className="ml-0 justify-between gap-8 border !border-b-0 !border-r-0 !border-t-0 border-dashed border-signoz_slate-400 py-10 sm:flex-row px-10">
+          <div className="ml-0 justify-between gap-8 border !border-b-0 !border-r-0 !border-t-0 border-dashed border-signoz_slate-400 px-10 py-10 sm:flex-row">
             <DocsList />
           </div>
         </div>
@@ -447,19 +478,29 @@ const SigNozStats = () => {
           <div className="flex flex-[2_2_0%] flex-col">
             <div className="grid grid-cols-1 text-left sm:grid-cols-2">
               {STATS_LIST.map((stat, index) => (
-                <Card logo={stat.logo} stats={stat.value} description={stat.name} logoSize={24} key={index} />
+                <Card
+                  logo={stat.logo}
+                  stats={stat.value}
+                  description={stat.name}
+                  logoSize={24}
+                  key={index}
+                />
               ))}
             </div>
             <div className="flex flex-col items-center gap-3 border !border-b-0 !border-r-0 border-dashed border-signoz_slate-400 py-6 sm:flex-row sm:py-6 sm:pl-10">
               <Button className="text-xs sm:text-sm" id="btn-join-community-homepage">
-                <Link href="https://signoz.io/slack/" className='flex-center'>
+                <Link href="https://signoz.io/slack/" className="flex-center">
                   <BookOpen className="h-3 w-3 sm:h-3.5 sm:w-3.5" />
                   Join the community
                   <ArrowRight className="h-3 w-3 sm:h-3.5 sm:w-3.5" />
                 </Link>
               </Button>
-              <Button type={Button.TYPES.SECONDARY} className="text-xs sm:text-sm" id="btn-github-repo-homepage">
-                <Link href="https://github.com/SigNoz/signoz/" className='flex-center'>
+              <Button
+                type={Button.TYPES.SECONDARY}
+                className="text-xs sm:text-sm"
+                id="btn-github-repo-homepage"
+              >
+                <Link href="https://github.com/SigNoz/signoz/" className="flex-center">
                   <BookOpen className="h-3 w-3 sm:h-3.5 sm:w-3.5" />
                   GitHub Repository
                   <ArrowRight className="h-3 w-3 sm:h-3.5 sm:w-3.5" />
@@ -473,18 +514,22 @@ const SigNozStats = () => {
   )
 }
 
-const GetStarted = ({ page }) => {
-  const getStartedId = `btn-get-started-${page}-bottom`;
-  const readDocumentationId = `btn-read-documentation-${page}-bottom`;
+interface GetStartedProps {
+  page: string
+}
+
+const GetStarted = ({ page }: GetStartedProps) => {
+  const getStartedId = `btn-get-started-${page}-bottom`
+  const readDocumentationId = `btn-read-documentation-${page}-bottom`
 
   return (
     <div className="bg-[url('/img/background_blur/Rectangle_959.png')] bg-[length:68%] bg-[center_top_-20rem] sm:bg-no-repeat">
       <div className="bg-[url('/img/background_blur/Frame_2185.png')] bg-[length:68%] bg-[center_top_-20rem] sm:bg-no-repeat">
-        <section className='!mx-auto !w-[100vw] border !border-b-0 border-dashed border-signoz_slate-400 md:!w-[80vw]'>
+        <section className="!mx-auto !w-[100vw] border !border-b-0 border-dashed border-signoz_slate-400 md:!w-[80vw]">
           <div className="bg-[url('/img/background_blur/Ellipse_206.png')] bg-[center_top_calc(-250px)] bg-no-repeat">
-            <div className='flex flex-col gap-16'>
-              <div className='flex flex-col gap-12'>
-                <p className='text-4xl font-bold text-center mb-0 mt-20'>
+            <div className="flex flex-col gap-16">
+              <div className="flex flex-col gap-12">
+                <p className="mb-0 mt-20 text-center text-4xl font-bold">
                   Get started with <br /> SigNoz Cloud today
                 </p>
                 <div className="flex items-center justify-center gap-3 pt-4 max-sm:flex-col">
@@ -503,11 +548,11 @@ const GetStarted = ({ page }) => {
                   </Button>
                 </div>
               </div>
-              <div className="relative flex justify-center items-center">
+              <div className="relative flex items-center justify-center">
                 <img
                   src="/img/landing/landing_thumbnail.png"
                   alt="Custom Thumbnail"
-                  className="w-3/5 rounded-lg max-sm:-mb-8 -mb-36 z-[0]"
+                  className="z-[0] -mb-36 w-3/5 rounded-lg max-sm:-mb-8"
                 />
               </div>
             </div>
@@ -516,4 +561,4 @@ const GetStarted = ({ page }) => {
       </div>
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/tsconfig.json b/tsconfig.json
index 86e352654..fda1f4c52 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,16 @@
 {
   "compilerOptions": {
+    "sourceMap": true,
     "incremental": true,
-    "target": "ESNext",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "target": "ES5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "composite": true,
@@ -14,18 +19,37 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
+    "allowSyntheticDefaultImports": true,
     "jsx": "preserve",
     "baseUrl": "./",
     "paths": {
-      "@/components/*": ["components/*"],
-      "@/utils/*": ["utils/*"],
-      "@/constants/*": ["constants/*"],
-      "@/data/*": ["data/*"],
-      "@/layouts/*": ["layouts/*"],
-      "@/css/*": ["css/*"],
-      "@/api/*": ["api/*"],
-      "@/hooks/*": ["hooks/*"],
-      "contentlayer/generated": ["./.contentlayer/generated"]
+      "@/components/*": [
+        "components/*"
+      ],
+      "@/utils/*": [
+        "utils/*"
+      ],
+      "@/constants/*": [
+        "constants/*"
+      ],
+      "@/data/*": [
+        "data/*"
+      ],
+      "@/layouts/*": [
+        "layouts/*"
+      ],
+      "@/css/*": [
+        "css/*"
+      ],
+      "@/api/*": [
+        "api/*"
+      ],
+      "@/hooks/*": [
+        "hooks/*"
+      ],
+      "contentlayer/generated": [
+        "./.contentlayer/generated"
+      ]
     },
     "plugins": [
       {
@@ -41,10 +65,12 @@
     "**/*.ts",
     "**/*.tsx",
     "**/*.json",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
     ".contentlayer/generated",
     ".contentlayer/generated/**/*.json",
-    ".next/types/**/*.ts",
-    "docs/shared/get-started-signoz.mdx"
-  ],
-  "exclude": ["node_modules"]
+    ".next/types/**/*.ts"
+  ]
 }