diff --git a/apps/web/src/app/(main)/about/page.tsx b/apps/web/src/app/(main)/about/page.tsx
index 348793ed..f969872c 100644
--- a/apps/web/src/app/(main)/about/page.tsx
+++ b/apps/web/src/app/(main)/about/page.tsx
@@ -1,3 +1,4 @@
+import Image from 'next/image'
 import {
   AritraImg,
   AtanuImg,
@@ -7,7 +8,6 @@ import {
   SwatiImg
 } from '@public/about/team'
 import { ColorBGSVG } from '@public/hero'
-import Image from 'next/image'
 import { TracingBeam } from '@/components/ui/tracing-beam'
 
 const teamData = [
@@ -145,7 +145,7 @@ function About(): React.JSX.Element {
                 amazing software.
               </p>
             </div>
-            <div className="mt-10 grid md:w-[60%] grid-cols-2 md:grid-cols-3 gap-3">
+            <div className="mt-10 grid grid-cols-2 gap-3 md:w-[60%] md:grid-cols-3">
               {teamData.map((members, index) => {
                 return (
                   <div
@@ -155,8 +155,8 @@ function About(): React.JSX.Element {
                   >
                     <Image
                       alt="Atanu"
-                      className="aspect-square object-center w-[10rem] rounded-md"
-                      placeholder='blur'
+                      className="aspect-square w-[10rem] rounded-md object-center"
+                      placeholder="blur"
                       src={members.img}
                     />
                     <div className="flex h-full flex-col justify-between">
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 757258d2..058309d7 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable turbo/no-undeclared-env-vars -- Ignored because the env vars are declared in the .env file */
 import './global.css'
 import type { Metadata } from 'next'
 
@@ -78,7 +77,6 @@ export default function RootLayout({
 }: {
   children: React.ReactNode
 }): React.JSX.Element {
-
   return (
     <html lang="en">
       <body>{children}</body>
diff --git a/apps/web/src/components/colabEasy/index.tsx b/apps/web/src/components/colabEasy/index.tsx
index 2a45448f..d65bdd6c 100644
--- a/apps/web/src/components/colabEasy/index.tsx
+++ b/apps/web/src/components/colabEasy/index.tsx
@@ -12,7 +12,9 @@ function ColabEasy(): React.JSX.Element {
   return (
     <section className="mt-[10vw] flex flex-col items-center gap-y-[5rem] md:gap-y-[9.69rem]">
       <div className="text-brandBlue/80 flex flex-col gap-y-[0.81rem]">
-        <h2 className={`${GeistSans.className}  text-center text-4xl md:text-5xl`}>
+        <h2
+          className={`${GeistSans.className}  text-center text-4xl md:text-5xl`}
+        >
           Collaboration made easy
         </h2>
         <span className="text-center">
@@ -30,7 +32,7 @@ function ColabEasy(): React.JSX.Element {
           </div>
           <WebhookSVG />
         </Card>
-        <div className="flex-col space-y-5 md:space-y-0 gap-5 md:flex">
+        <div className="flex-col gap-5 space-y-5 md:flex md:space-y-0">
           <div className="gap-5 space-y-5 md:flex md:space-y-0">
             <Card>
               <div className="p-6">
diff --git a/apps/web/src/components/hero/index.tsx b/apps/web/src/components/hero/index.tsx
index 588f21b3..ae141ea0 100644
--- a/apps/web/src/components/hero/index.tsx
+++ b/apps/web/src/components/hero/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 // import { GeistSans } from 'geist/font/sans'
 import Image from 'next/image'
-import { ColorBGSVG, HeroImage } from '@public/hero'
 import { useState } from 'react'
 import { Toaster, toast } from 'sonner'
+import { ColorBGSVG, HeroImage } from '@public/hero'
 import EncryptButton from '../ui/encrypt-btn'
 import { InputBorderSpotlight } from '../ui/input-spotlight'
 
diff --git a/apps/web/src/components/lifeEasySection/index.tsx b/apps/web/src/components/lifeEasySection/index.tsx
index faa9e127..d9bc4e26 100644
--- a/apps/web/src/components/lifeEasySection/index.tsx
+++ b/apps/web/src/components/lifeEasySection/index.tsx
@@ -12,7 +12,9 @@ function LifeEasySection(): React.JSX.Element {
   return (
     <section className="mt-[10vw] flex flex-col items-center gap-y-[5rem] md:gap-y-[9.69rem]">
       <div className="text-brandBlue/80 flex flex-col gap-y-[0.81rem]">
-        <h2 className={`${GeistSans.className}  text-center text-4xl md:text-5xl`}>
+        <h2
+          className={`${GeistSans.className}  text-center text-4xl md:text-5xl`}
+        >
           Making Developers Life Easy
         </h2>
         {/* <span className="text-center">
diff --git a/apps/web/src/components/secretSection/index.tsx b/apps/web/src/components/secretSection/index.tsx
index 0cd73631..b0ffee52 100644
--- a/apps/web/src/components/secretSection/index.tsx
+++ b/apps/web/src/components/secretSection/index.tsx
@@ -52,7 +52,9 @@ function SecrectSection(): React.JSX.Element {
   return (
     <section className="mt-[10vw] flex flex-col items-center gap-y-[5rem] md:gap-y-[9.69rem]">
       <div className="text-brandBlue/80 flex flex-col gap-y-[0.81rem]">
-        <h2 className={`${GeistSans.className}  text-center text-4xl md:text-5xl`}>
+        <h2
+          className={`${GeistSans.className}  text-center text-4xl md:text-5xl`}
+        >
           Secure Your Configurations with Confidence
         </h2>
         {/* <span>Built for your Seamless Secret Integration</span> */}
@@ -68,7 +70,7 @@ function SecrectSection(): React.JSX.Element {
               <div className="p-6">
                 <h3 className="text-lg font-medium">{heading}</h3>
                 <span className="text-base text-[#9394A1]">{description}</span>
-              </div> 
+              </div>
             </Card>
           )
         })}
diff --git a/apps/web/src/components/shared/card/index.tsx b/apps/web/src/components/shared/card/index.tsx
index 4870d3b5..bea56a8a 100644
--- a/apps/web/src/components/shared/card/index.tsx
+++ b/apps/web/src/components/shared/card/index.tsx
@@ -11,7 +11,7 @@ export default function Card({
 }: CardProps): React.JSX.Element {
   return (
     <div
-      className={`flex ${widthFull ? 'md:w-full w-[20rem]' : 'w-[20rem] md:w-[25rem]'} h-full flex-col justify-end rounded-2xl backdrop-blur-2xl`}
+      className={`flex ${widthFull ? 'w-[20rem] md:w-full' : 'w-[20rem] md:w-[25rem]'} h-full flex-col justify-end rounded-2xl backdrop-blur-2xl`}
       style={{
         background:
           'linear-gradient(180deg, rgba(52, 52, 52, 0.20) 0%, rgba(0, 0, 0, 0.00) 100%), rgba(17, 18, 27, 0.24)',
diff --git a/apps/web/src/components/shared/footer/index.tsx b/apps/web/src/components/shared/footer/index.tsx
index f7a52309..2c2f52c7 100644
--- a/apps/web/src/components/shared/footer/index.tsx
+++ b/apps/web/src/components/shared/footer/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
+import Link from 'next/link'
 import { FooterLogoSVG } from '@public/shared'
 import { SparklesCore } from '@/components/ui/sparkles'
 import EncryptText from '@/components/ui/encrypt-text'
-import Link from 'next/link'
 // import EncryptButton from '@/components/ui/encrypt-btn'
 
 function Footer(): React.JSX.Element {
diff --git a/apps/web/src/components/shared/navbar/index.tsx b/apps/web/src/components/shared/navbar/index.tsx
index 9b31a90b..b0354a78 100644
--- a/apps/web/src/components/shared/navbar/index.tsx
+++ b/apps/web/src/components/shared/navbar/index.tsx
@@ -5,7 +5,7 @@ import { Button } from '@/components/ui/moving-border'
 function Navbar(): React.JSX.Element {
   return (
     <nav
-      className="mt-5 flex mx-10 w-full md:w-[79.625rem] items-center justify-between rounded-full border border-[#728689]/60 px-2 md:px-[2.94rem] py-1"
+      className="mx-10 mt-5 flex w-full items-center justify-between rounded-full border border-[#728689]/60 px-2 py-1 md:w-[79.625rem] md:px-[2.94rem]"
       style={{
         background:
           'linear-gradient(180deg, rgba(226, 232, 255, 0.15) 0%, rgba(226, 232, 255, 0.03) 100%)'
@@ -15,7 +15,7 @@ function Navbar(): React.JSX.Element {
         <Logo className="hidden md:flex" />
         <LogoM className="flex md:hidden" />
       </Link>
-      <ul className="hidden md:flex gap-x-4 text-white/60">
+      <ul className="hidden gap-x-4 text-white/60 md:flex">
         <li>
           <a
             href="https://docs.keyshade.xyz/"
diff --git a/apps/web/src/components/ui/encrypt-btn.tsx b/apps/web/src/components/ui/encrypt-btn.tsx
index 235af4f7..125d74e7 100644
--- a/apps/web/src/components/ui/encrypt-btn.tsx
+++ b/apps/web/src/components/ui/encrypt-btn.tsx
@@ -1,5 +1,5 @@
 'use client'
-import type { HTMLProps} from 'react';
+import type { HTMLProps } from 'react'
 import React, { useRef, useState } from 'react'
 import { motion } from 'framer-motion'
 
diff --git a/apps/web/src/components/ui/following-pointer.tsx b/apps/web/src/components/ui/following-pointer.tsx
index ae3b336b..cafd29c5 100644
--- a/apps/web/src/components/ui/following-pointer.tsx
+++ b/apps/web/src/components/ui/following-pointer.tsx
@@ -1,4 +1,4 @@
-'use client';
+'use client'
 /* eslint-disable @typescript-eslint/no-unsafe-assignment -- This is a temporary fix */
 /* eslint-disable @typescript-eslint/no-explicit-any -- This is a temporary fix */
 // Core component that receives mouse positions and renders pointer and content
diff --git a/apps/web/src/components/ui/input-spotlight.tsx b/apps/web/src/components/ui/input-spotlight.tsx
index 4681dbdb..08019ff7 100644
--- a/apps/web/src/components/ui/input-spotlight.tsx
+++ b/apps/web/src/components/ui/input-spotlight.tsx
@@ -1,5 +1,5 @@
 'use client'
-import type { Dispatch, SetStateAction} from 'react';
+import type { Dispatch, SetStateAction } from 'react'
 import React, { useRef, useState } from 'react'
 
 interface InputBorderSpotlightProps {
@@ -46,7 +46,7 @@ export function InputBorderSpotlight({
       <input
         autoCapitalize="off"
         autoComplete="off"
-        className="border-brandBlue/[30%] backdrop-blur focus:border-brandBlue h-10 w-full cursor-text rounded-full border bg-transparent bg-gradient-to-b from-[#E2E8FF]/[0%] to-[#E2E8FF]/[6%] p-3.5 px-[0.94rem]  py-3 text-slate-100 transition-colors  duration-500 placeholder:select-none placeholder:text-[#E2E8FF]/[50%] placeholder:text-neutral-500 focus:outline-none"
+        className="border-brandBlue/[30%] focus:border-brandBlue h-10 w-full cursor-text rounded-full border bg-transparent bg-gradient-to-b from-[#E2E8FF]/[0%] to-[#E2E8FF]/[6%] p-3.5 px-[0.94rem] py-3  text-slate-100 backdrop-blur transition-colors  duration-500 placeholder:select-none placeholder:text-[#E2E8FF]/[50%] placeholder:text-neutral-500 focus:outline-none"
         id="mce-EMAIL"
         name="EMAIL"
         onBlur={handleBlur}
diff --git a/apps/web/src/components/ui/tracing-beam.tsx b/apps/web/src/components/ui/tracing-beam.tsx
index 2a065ed0..5fe03291 100644
--- a/apps/web/src/components/ui/tracing-beam.tsx
+++ b/apps/web/src/components/ui/tracing-beam.tsx
@@ -1,11 +1,6 @@
 'use client'
 import React, { useEffect, useRef, useState } from 'react'
-import {
-  motion,
-  useTransform,
-  useScroll,
-  useSpring
-} from 'framer-motion'
+import { motion, useTransform, useScroll, useSpring } from 'framer-motion'
 import { cn } from '@/utils/cn'
 
 export function TracingBeam({
