diff --git a/apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx b/apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
index aa65c25a074..c5179d1b0fa 100644
--- a/apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
+++ b/apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
@@ -16,16 +16,16 @@ export function FeatureDemo({
 }: FeatureDemoProps) {
 	return (
 		<div
-			className={`relative w-full aspect-4/3 rounded-2xl overflow-hidden ${className}`}
+			className={`relative w-full min-h-[300px] lg:aspect-4/3 rounded overflow-hidden ${className}`}
 		>
 			{/* Background gradient */}
 			<MeshGradient
 				colors={colors}
-				className="absolute inset-0 w-full h-full"
+				className="absolute inset-0 w-full h-full rounded"
 			/>
 
 			{/* Content overlay */}
-			<div className="relative z-10 w-full h-full flex items-center justify-center p-6">
+			<div className="relative z-10 w-full h-full flex items-center justify-start sm:justify-center p-4 sm:p-6">
 				{children}
 			</div>
 		</div>
diff --git a/apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx b/apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx
index 5e5d5ee910e..02530a0ccf1 100644
--- a/apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx
+++ b/apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx
@@ -100,7 +100,7 @@ export function IsolationDemo() {
 	return (
 		<motion.div
 			ref={ref}
-			className="w-full max-w-2xl bg-[#1a1a1a]/90 backdrop-blur-sm rounded-lg border border-white/10 shadow-2xl overflow-hidden"
+			className="w-full min-w-[500px] max-w-2xl bg-[#1a1a1a]/90 backdrop-blur-sm rounded-lg border border-white/10 shadow-2xl overflow-hidden"
 			initial={{ opacity: 0, y: 20 }}
 			animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
 			transition={{ duration: 0.5 }}
@@ -117,10 +117,10 @@ export function IsolationDemo() {
 						components/HeroSection/HeroSection.tsx
 					</span>
 				</div>
-				<div className="flex items-center gap-2">
+				<div className="flex items-center gap-2 mx-2">
 					<button
 						type="button"
-						className="px-2 py-1 text-xs text-white/60 hover:text-white/80 bg-white/5 rounded transition-colors"
+						className="px-2 py-1 text-xs text-white/60 hover:text-white/80 bg-white/5 rounded transition-colors whitespace-nowrap"
 					>
 						Side by Side
 					</button>
diff --git a/apps/marketing/src/app/components/FeaturesSection/components/ParallelExecutionDemo/ParallelExecutionDemo.tsx b/apps/marketing/src/app/components/FeaturesSection/components/ParallelExecutionDemo/ParallelExecutionDemo.tsx
index cc8991de5d6..e74765dc4a3 100644
--- a/apps/marketing/src/app/components/FeaturesSection/components/ParallelExecutionDemo/ParallelExecutionDemo.tsx
+++ b/apps/marketing/src/app/components/FeaturesSection/components/ParallelExecutionDemo/ParallelExecutionDemo.tsx
@@ -142,7 +142,7 @@ export function ParallelExecutionDemo() {
 	return (
 		<motion.div
 			ref={ref}
-			className="w-full max-w-2xl bg-[#1a1a1a]/90 backdrop-blur-sm rounded-lg border border-white/10 shadow-2xl overflow-hidden"
+			className="w-full min-w-[500px] max-w-2xl bg-[#1a1a1a]/90 backdrop-blur-sm rounded-lg border border-white/10 shadow-2xl overflow-hidden"
 			initial={{ opacity: 0, y: 20 }}
 			animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
 			transition={{ duration: 0.5 }}