diff --git a/src/app/(public)/features/components/FeaturersComparison.tsx b/src/app/(public)/features/components/FeaturersComparison.tsx
index aea0b40..dda5965 100644
--- a/src/app/(public)/features/components/FeaturersComparison.tsx
+++ b/src/app/(public)/features/components/FeaturersComparison.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Box, Typography, useMediaQuery } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import Image from 'next/image';
 import React from 'react';
 
@@ -43,7 +43,7 @@ const TableContainer = styled(Box)(({ theme }) => ({
   [theme.breakpoints.down('md')]: {
     maxWidth: '100%',
     marginTop: theme.spacing(4),
-    marginBottom: theme.spacing(16),
+    marginBottom: theme.spacing(6),
   },
   '&.mb6': {
     marginBottom: theme.spacing(6),
@@ -57,16 +57,10 @@ const TableRow = styled(Box)(({ theme }) => ({
   minHeight: 72,
   gridTemplateColumns: 'repeat(2, 400px)',
   background: '#ffffff',
-  [theme.breakpoints.down(800)]: {
-    gridTemplateColumns: '1fr',
-  },
   '&.header': {
     background: '#ffffff',
     borderBottom: '1px solid #a8f574',
     gridTemplateColumns: 'repeat(2, 400px)',
-    [theme.breakpoints.down(800)]: {
-      gridTemplateColumns: '1fr',
-    },
   },
   '&.diy, &.ai': {
     background: '#ffffff',
@@ -118,11 +112,23 @@ const IconText = styled(Box)({
 });
 
 export default function FeaturersComparison() {
+  const theme = useTheme();
   const isSmall = useMediaQuery('(max-width:800px)');
 
   return (
     <OuterBox>
-      <Typography variant="h2" sx={{ textAlign: 'center', mb: 4, mt: 24 }}>
+      <Typography
+        variant="h2"
+        sx={{
+          textAlign: 'center',
+          mb: 4,
+          mt: 24,
+          [theme.breakpoints.down('md')]: {
+            mb: 3,
+            mt: 6,
+          },
+        }}
+      >
         DIY vs AI Assistant
       </Typography>
       {isSmall ? (
@@ -138,10 +144,26 @@ export default function FeaturersComparison() {
               px: 3,
             }}
           >
-            <Box sx={{ textAlign: 'center' }}>
+            <Box
+              sx={{
+                textAlign: 'center',
+                height: '56px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
               <Typography variant="h3">DIY</Typography>
             </Box>
-            <Box sx={{ textAlign: 'center' }}>
+            <Box
+              sx={{
+                textAlign: 'center',
+                height: '56px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
               <Typography variant="h3">AI Assistant</Typography>
             </Box>
           </Box>
diff --git a/src/app/(public)/features/components/FeaturesBanner.tsx b/src/app/(public)/features/components/FeaturesBanner.tsx
index 0354d1e..2fc1c5c 100644
--- a/src/app/(public)/features/components/FeaturesBanner.tsx
+++ b/src/app/(public)/features/components/FeaturesBanner.tsx
@@ -15,7 +15,7 @@ const SleepIcon = () => (
 );
 
 const BannerSection = styled('section')(({ theme }) => ({
-  background: '#060606',
+  background: 'transparent',
   position: 'relative',
   paddingTop: theme.spacing(10),
   paddingBottom: theme.spacing(16),
@@ -30,7 +30,7 @@ const BannerSection = styled('section')(({ theme }) => ({
   },
   [theme.breakpoints.down('md')]: {
     minHeight: 'auto',
-    paddingBottom: theme.spacing(4),
+    paddingBottom: 0,
   },
 }));
 
@@ -121,7 +121,7 @@ const FloatingCardsWrapper = styled(Box)(({ theme }) => ({
   },
   [theme.breakpoints.down('md')]: {
     position: 'static', // Change to static positioning for 899px and narrower
-    marginTop: theme.spacing(2),
+    marginTop: theme.spacing(6),
     minHeight: 'auto',
   },
 }));
diff --git a/src/app/(public)/features/components/FeaturesSection.tsx b/src/app/(public)/features/components/FeaturesSection.tsx
index 28b7190..181bd1b 100644
--- a/src/app/(public)/features/components/FeaturesSection.tsx
+++ b/src/app/(public)/features/components/FeaturesSection.tsx
@@ -14,6 +14,10 @@ const SectionRoot = styled('section')(({ theme }) => ({
   [theme.breakpoints.up('md')]: {
     paddingTop: theme.spacing(8),
   },
+  [theme.breakpoints.down('md')]: {
+    paddingTop: 0,
+    paddingBottom: 0,
+  },
 }));
 
 const SectionContainer = styled(Container)({
@@ -28,6 +32,10 @@ const SectionTitle = styled(Typography)(({ theme }) => ({
   [theme.breakpoints.up('md')]: {
     marginBottom: theme.spacing(12),
   },
+  [theme.breakpoints.down('md')]: {
+    marginTop: theme.spacing(6),
+    marginBottom: theme.spacing(3),
+  },
 }));
 
 // Base card styles for unified responsive behavior
@@ -59,7 +67,7 @@ const BaseCard = styled(Box)(({ theme }) => ({
     maxWidth: 350,
     margin: '0 auto',
     padding: theme.spacing(3, 10),
-    marginBottom: theme.spacing(1),
+    marginBottom: theme.spacing(2),
     minHeight: 400,
   },
 }));
@@ -276,8 +284,14 @@ const GridContainer = styled('div')(({ theme }) => ({
       marginBottom: theme.spacing(0),
     },
   },
+  '&:last-of-type': {
+    [theme.breakpoints.down('md')]: {
+      paddingBottom: theme.spacing(4),
+    },
+  },
   [theme.breakpoints.down('md')]: {
-    paddingBottom: 32,
+    paddingBottom: 16,
+    rowGap: 0,
   },
 }));
 
@@ -303,7 +317,7 @@ const ImageContainer = styled(Box)(({ theme }) => ({
   zIndex: 1,
   [theme.breakpoints.down('md')]: {
     justifyContent: 'center',
-    marginTop: theme.spacing(4),
+    marginTop: 0,
   },
 }));
 
diff --git a/src/app/(public)/features/components/SetupSteps.tsx b/src/app/(public)/features/components/SetupSteps.tsx
index dfbbba1..719509a 100644
--- a/src/app/(public)/features/components/SetupSteps.tsx
+++ b/src/app/(public)/features/components/SetupSteps.tsx
@@ -2,6 +2,7 @@
 
 import { Box, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
+import { ro } from 'date-fns/locale';
 import React from 'react';
 
 const steps = [
@@ -31,6 +32,10 @@ const MainTitle = styled(Typography)(({ theme }) => ({
   textAlign: 'center',
   marginBottom: theme.spacing(1),
   marginTop: theme.spacing(12),
+  [theme.breakpoints.down('md')]: {
+    marginTop: theme.spacing(6),
+    marginBottom: theme.spacing(0.75),
+  },
 }));
 
 const SubTitle = styled(Typography)(({ theme }) => ({
@@ -38,6 +43,10 @@ const SubTitle = styled(Typography)(({ theme }) => ({
   textAlign: 'center',
   marginBottom: theme.spacing(12),
   marginTop: theme.spacing(1),
+  [theme.breakpoints.down('md')]: {
+    marginTop: theme.spacing(0.75),
+    marginBottom: theme.spacing(5.25),
+  },
 }));
 
 const StepContainer = styled(Box)(({ theme }) => ({
@@ -52,12 +61,16 @@ const StepContainer = styled(Box)(({ theme }) => ({
   [theme.breakpoints.down('md')]: {
     columnGap: theme.spacing(1),
     marginTop: theme.spacing(4),
+    rowGap: theme.spacing(1),
   },
   // Styles for 529px and below
   [theme.breakpoints.down(530)]: {
     flexDirection: 'column',
     alignItems: 'center',
-    gap: theme.spacing(3),
+    '& > *': {
+      marginBottom: theme.spacing(1),
+      marginTop: theme.spacing(1),
+    },
     maxWidth: '400px',
     margin: '0 auto',
     marginTop: theme.spacing(4),
diff --git a/src/components/layout/features-layout/index.tsx b/src/components/layout/features-layout/index.tsx
index 4dee3ed..17141d6 100644
--- a/src/components/layout/features-layout/index.tsx
+++ b/src/components/layout/features-layout/index.tsx
@@ -31,7 +31,16 @@ export default function MainLayout({
   return (
     <>
       <Navbar variant="dark" />
-      <Box id="features-banner" sx={{ background: '#060606', width: '100%' }}>
+      <Box
+        id="features-banner"
+        sx={{
+          background: {
+            xs: 'linear-gradient(to bottom, #060606 0%, #060606 40%, #fafafa 40%, #fafafa 100%)',
+            md: '#060606',
+          },
+          width: '100%',
+        }}
+      >
         <Container maxWidth="xl">
           <FeaturesBanner />
         </Container>