diff --git a/src/sections/Meshery/Features-section/features-section.style.js b/src/sections/Meshery/Features-section/features-section.style.js
index 1a6a7bdaf614b..82213c814f82e 100644
--- a/src/sections/Meshery/Features-section/features-section.style.js
+++ b/src/sections/Meshery/Features-section/features-section.style.js
@@ -4,10 +4,17 @@ const FeaturesSectionWrapper = styled.section`
 
 	background-color: black;
 	transform: skew(0deg, -6deg);
-	padding-bottom:5rem;
+	padding-bottom: 5rem;
 	margin-bottom: 8rem;
 	overflow: hidden;
 	position: relative;
+	width: 100%;
+	max-width: 100%;
+	contain: layout style paint;
+	transform-origin: center;
+	z-index: 1;
+	height: auto;
+	isolate: isolate;
 	.skw{
 		display: grid;
 		position: relative;
@@ -50,6 +57,8 @@ const FeaturesSectionWrapper = styled.section`
 		transform: skew(0deg, 6deg);
 		padding: 0 1rem 3rem;
 		text-align: center;
+		position: relative;
+		z-index: 1;
 		h1, h2, p {
 			color: white;
 		}
@@ -80,6 +89,7 @@ const FeaturesSectionWrapper = styled.section`
 	.smp-section {
 		margin: 3rem auto;
 		max-width: 85%;
+		overflow: hidden;
 
 		.smp-section-row {
 			margin: 4rem 0;
@@ -100,8 +110,10 @@ const FeaturesSectionWrapper = styled.section`
 
 		.smp-section-caraousel {
 			.slick-slider {
+			    max-height: 520px;
 				.slick-list {
 					max-width: 50rem;
+					max-height: 520px;
 
 					.slick-slide {
 						img {
diff --git a/src/sections/Meshery/meshery.style.js b/src/sections/Meshery/meshery.style.js
index fc6f6792b6977..cfab258a21e1c 100644
--- a/src/sections/Meshery/meshery.style.js
+++ b/src/sections/Meshery/meshery.style.js
@@ -4,6 +4,10 @@ const MesheryWrapper = styled.section`
     position: relative;
     z-index: 1;
     overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
     .info {
         position: relative;
         overflow: hidden;