diff --git a/apps/web/app/(landing)/Features.tsx b/apps/web/app/(landing)/Features.tsx
index dc4b333d..c690d44d 100644
--- a/apps/web/app/(landing)/Features.tsx
+++ b/apps/web/app/(landing)/Features.tsx
@@ -29,29 +29,28 @@ export default function Features() {
   }, []);
 
   return (
-    <section className="relative w-full overflow-hidden max-lg:after:hidden">
+    <section className="overflow-hidden relative w-full max-lg:after:hidden">
       <img
         src="https://tailwindcss.com/_next/static/media/docs@30.8b9a76a2.avif"
-        className="absolute -top-0 left-10 z-2 opacity-60"
+        className="absolute -top-0 left-10 opacity-60 z-2"
       />
-      <div className="relative bg-page-gradient ">
+      <div className="relative bg-page-gradient">
         <div className="-z-1 absolute inset-x-0 -top-0 h-screen  w-full bg-transparent bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)]  bg-[size:6rem_4rem] opacity-5 [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
 
-        <div className=" max-w-screen-xl mx-auto px-4 md:px-8  relative flex flex-col">
-          <div className="max-w-3xl mr-auto  space-y-4 text-left mb-10">
-            <h2 className="pt-16 text-4xl md:text-5xl lg:text-6xl  font-nomral tracking-tighter font-geist bg-gradient-to-tr from-zinc-400/50 via-white to-white/60 bg-clip-text text-transparent">
-              A Supermemory has all the memory saved for you 
+        <div className="flex relative flex-col px-4 mx-auto max-w-screen-xl md:px-8">
+          <div className="mr-auto mb-10 space-y-4 max-w-3xl text-left">
+            <h2 className="pt-16 text-4xl tracking-tighter text-transparent bg-clip-text bg-gradient-to-tr via-white md:text-5xl lg:text-6xl font-nomral font-geist from-zinc-400/50 to-white/60">
+              A Supermemory has all the memory saved for you
             </h2>
             <p className="text-zinc-400">
-              Supermemory offers all the vital building blocks you need to transform
-              your idea into a great-looking startup.
+              Supermemory offers all the vital building blocks you need to
+              transform your idea into a great-looking startup.
             </p>
-            <button className="group mt-4  w-fit px-10 font-geist bg-page-gradient tracking-tighter text-center rounded-md text-md bg-gradient-to-br from-zinc-400 to-zinc-700  py-2 text-lg text-zinc-50 ring-2 ring-zinc-500/50 ring-offset-1 ring-offset-zinc-950/5 transition-all hover:scale-[1.02] hover:ring-transparent active:scale-[0.98] active:ring-zinc-500/70 flex items-center justify-center gap-2">
+            <button className="flex gap-2 justify-center items-center py-2 px-10 mt-4 text-lg tracking-tighter text-center bg-gradient-to-br rounded-md ring-2 ring-offset-1 transition-all hover:ring-transparent group w-fit font-geist bg-page-gradient text-md from-zinc-400 to-zinc-700 text-zinc-50 ring-zinc-500/50 ring-offset-zinc-950/5 hover:scale-[1.02] active:scale-[0.98] active:ring-zinc-500/70">
               Get Started
-              <div className="relative ml-1 h-5 w-5 overflow-hidden">
-                <ArrowUpRight className="absolute transition-all duration-500 group-hover:-translate-y-5 group-hover:translate-x-4" />
-                <ArrowUpRight className="absolute transition-all duration-500 -translate-y-5 group-hover:translate-y-0 -translate-x-4 group-hover:translate-x-0" />
-
+              <div className="overflow-hidden relative ml-1 w-5 h-5">
+                <ArrowUpRight className="absolute transition-all duration-500 group-hover:translate-x-4 group-hover:-translate-y-5" />
+                <ArrowUpRight className="absolute transition-all duration-500 -translate-x-4 -translate-y-5 group-hover:translate-x-0 group-hover:translate-y-0" />
               </div>
             </button>
           </div>
@@ -59,20 +58,20 @@ export default function Features() {
         </div>
       </div>
 
-      <div className="py-12 md:pb-32 pt-0">
+      <div className="py-12 pt-0 md:pb-32">
         {/* Carousel */}
         <div
           id="use-cases"
-          className="mx-auto max-w-3xl px-0 sm:px-4 lg:px-0  md:pt-10 lg:max-w-6xl relative"
+          className="relative px-0 mx-auto max-w-3xl sm:px-4 md:pt-10 lg:px-0 lg:max-w-6xl"
         >
-          <div className="space-y-12 lg:flex lg:space-x-12 lg:space-y-0 xl:space-x-24">
+          <div className="space-y-12 lg:flex lg:space-y-0 lg:space-x-12 xl:space-x-24">
             {/* Content */}
-            <div className="lg:min-w-[524px] lg:max-w-none">
+            <div className="lg:max-w-none lg:min-w-[524px]">
               <div className="mb-8">
                 <div className="mb-4 inline-flex rounded-full border border-transparent px-4 py-0.5 text-sm font-medium text-zinc-400 [background:linear-gradient(theme(colors.zinc.800),theme(colors.zinc.800))_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]">
                   Use cases
                 </div>
-                <h3 className="font-normal mb-4 text-3xl tracking-tighter text-zinc-200">
+                <h3 className="mb-4 text-3xl font-normal tracking-tighter text-zinc-200">
                   Save time and keep things organised
                 </h3>
                 <p className="text-lg text-zinc-500">
@@ -93,10 +92,10 @@ export default function Features() {
 
             {/* Tabs items */}
             <div className="relative lg:max-w-none">
-              <div className="relative flex flex-col" ref={tabs}>
+              <div className="flex relative flex-col" ref={tabs}>
                 {/* Item 1 */}
                 <div
-                  className="transition-all duration-700 transform order-first"
+                  className="order-first transition-all duration-700 transform"
                   style={{
                     height: tab === 0 ? "auto" : 0,
                     opacity: tab === 0 ? 1 : 0,
@@ -115,7 +114,7 @@ export default function Features() {
                 </div>
                 {/* Item 2 */}
                 <div
-                  className="transition-all duration-700 transform order-first"
+                  className="order-first transition-all duration-700 transform"
                   style={{
                     height: tab === 1 ? "auto" : 0,
                     opacity: tab === 1 ? 1 : 0,
@@ -134,7 +133,7 @@ export default function Features() {
                 </div>
                 {/* Item 3 */}
                 <div
-                  className="transition-all duration-700 transform order-first"
+                  className="order-first transition-all duration-700 transform"
                   style={{
                     height: tab === 2 ? "auto" : 0,
                     opacity: tab === 2 ? 1 : 0,
@@ -159,14 +158,14 @@ export default function Features() {
         {/* Features blocks */}
         <div
           id="features"
-          className="mx-auto mt-24 max-w-6xl px-4 sm:px-6 md:pt-40"
+          className="px-4 mx-auto mt-24 max-w-6xl sm:px-6 md:pt-40"
         >
           <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 lg:gap-16">
             {/* Block #1 */}
             <div>
-              <div className="mb-1 flex items-center">
+              <div className="flex items-center mb-1">
                 <X className="mr-2" />
-                <h3 className="font-inter-tight font-semibold text-zinc-200">
+                <h3 className="font-semibold font-inter-tight text-zinc-200">
                   Import all your Twitter bookmarks
                 </h3>
               </div>
@@ -177,7 +176,7 @@ export default function Features() {
             </div>
             {/* Block #2 */}
             <div>
-              <div className="mb-1 flex items-center">
+              <div className="flex items-center mb-1">
                 <svg
                   className="mr-2 fill-zinc-400"
                   xmlns="http://www.w3.org/2000/svg"
@@ -186,7 +185,7 @@ export default function Features() {
                 >
                   <path d="M13 16c-.153 0-.306-.035-.447-.105l-3.851-1.926c-.231.02-.465.031-.702.031-4.411 0-8-3.14-8-7s3.589-7 8-7 8 3.14 8 7c0 1.723-.707 3.351-2 4.63V15a1.003 1.003 0 0 1-1 1Zm-4.108-4.054c.155 0 .308.036.447.105L12 13.382v-2.187c0-.288.125-.562.341-.752C13.411 9.506 14 8.284 14 7c0-2.757-2.691-5-6-5S2 4.243 2 7s2.691 5 6 5c.266 0 .526-.02.783-.048a1.01 1.01 0 0 1 .109-.006Z" />
                 </svg>
-                <h3 className="font-inter-tight font-semibold text-zinc-200">
+                <h3 className="font-semibold font-inter-tight text-zinc-200">
                   Chat with collections
                 </h3>
               </div>
@@ -197,7 +196,7 @@ export default function Features() {
             </div>
             {/* Block #3 */}
             <div>
-              <div className="mb-1 flex items-center">
+              <div className="flex items-center mb-1">
                 <svg
                   className="mr-2 fill-zinc-400"
                   xmlns="http://www.w3.org/2000/svg"
@@ -206,7 +205,7 @@ export default function Features() {
                 >
                   <path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7ZM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Zm8.707 12.293a.999.999 0 1 1-1.414 1.414L11.9 13.314a8.019 8.019 0 0 0 1.414-1.414l2.393 2.393Z" />
                 </svg>
-                <h3 className="font-inter-tight font-semibold text-zinc-200">
+                <h3 className="font-semibold font-inter-tight text-zinc-200">
                   Powerful search
                 </h3>
               </div>
@@ -217,7 +216,7 @@ export default function Features() {
             </div>
             {/* Block #4 */}
             <div>
-              <div className="mb-1 flex items-center">
+              <div className="flex items-center mb-1">
                 <svg
                   className="mr-2 fill-zinc-400"
                   xmlns="http://www.w3.org/2000/svg"
@@ -226,7 +225,7 @@ export default function Features() {
                 >
                   <path d="M13 0H1C.4 0 0 .4 0 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1ZM2 2h10v8H8v4H2V2Z" />
                 </svg>
-                <h3 className="font-inter-tight font-semibold text-zinc-200">
+                <h3 className="font-semibold font-inter-tight text-zinc-200">
                   Knowledge canvas
                 </h3>
               </div>
@@ -237,7 +236,7 @@ export default function Features() {
             </div>
             {/* Block #5 */}
             <div>
-              <div className="mb-1 flex items-center">
+              <div className="flex items-center mb-1">
                 <svg
                   className="mr-2 fill-zinc-400"
                   xmlns="http://www.w3.org/2000/svg"
@@ -246,7 +245,7 @@ export default function Features() {
                 >
                   <path d="M14.6.085 8 2.885 1.4.085c-.5-.2-1.4-.1-1.4.9v11c0 .4.2.8.6.9l7 3c.3.1.5.1.8 0l7-3c.4-.2.6-.5.6-.9v-11c0-1-.9-1.1-1.4-.9ZM2 2.485l5 2.1v8.8l-5-2.1v-8.8Zm12 8.8-5 2.1v-8.7l5-2.1v8.7Z" />
                 </svg>
-                <h3 className="font-inter-tight font-semibold text-zinc-200">
+                <h3 className="font-semibold font-inter-tight text-zinc-200">
                   Just... bookmarks
                 </h3>
               </div>
@@ -257,16 +256,16 @@ export default function Features() {
             </div>
             {/* Block #6 */}
             <div>
-              <div className="mb-1 flex items-center">
+              <div className="flex items-center mb-1">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 20 20"
                   fill="currentColor"
-                  className="mr-2 h-5 w-5 fill-zinc-400"
+                  className="mr-2 w-5 h-5 fill-zinc-400"
                 >
                   <path d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z" />
                 </svg>
-                <h3 className="font-inter-tight font-semibold text-zinc-200">
+                <h3 className="font-semibold font-inter-tight text-zinc-200">
                   Writing assistant
                 </h3>
               </div>
diff --git a/apps/web/app/(landing)/Features/index.tsx b/apps/web/app/(landing)/Features/index.tsx
index fab55698..5754383b 100644
--- a/apps/web/app/(landing)/Features/index.tsx
+++ b/apps/web/app/(landing)/Features/index.tsx
@@ -141,7 +141,7 @@ const Services = () => {
               background:
                 "linear-gradient(143.6deg, rgba(192, 132, 252, 0) 20.79%, rgba(140, 121, 249, 0.2) 40.92%, rgba(140, 121, 249, 0) 80.35%)",
             }}
-            className="flex overflow-hidden relative items-center p-8 mt-10 mb-5 rounded-3xl border lg:p-20 bg-page-gradient z-1 h-[38rem] border-white/20 xl:h-[28rem]"
+            className="flex overflow-hidden relative items-center p-8 mt-10 mb-5 rounded-3xl border lg:p-20 bg-page-gradient z-1 h-[38rem] border-white/20 xl:h-[28rem] dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset]"
           >
             <img
               src="https://tailwindcss.com/_next/static/media/docs@30.8b9a76a2.avif"
@@ -150,7 +150,7 @@ const Services = () => {
 
             <div className="absolute top-0 right-0 left-0 mx-auto w-full h-full pointer-events-none xl:w-auto">
               <img
-                className="object-cover z-40 w-full h-full border-r-2 md:scale-100 border-r-white/5"
+                className="object-cover z-40 w-full h-full border-r-2 md:scale-110 border-r-white/5"
                 width={800}
                 alt="Github"
                 height={730}