diff --git a/assets/carousel/frontblocks-advanced-option.js b/assets/carousel/frontblocks-advanced-option.js
index a5191eb..c61355e 100644
--- a/assets/carousel/frontblocks-advanced-option.js
+++ b/assets/carousel/frontblocks-advanced-option.js
@@ -47,6 +47,8 @@ function addCustomCarouselPanel(BlockEdit) {
       frblResponsiveToView = _props$attributes$frb5 === void 0 ? '1' : _props$attributes$frb5,
       _props$attributes$frb6 = _props$attributes.frblAutoplay,
       frblAutoplay = _props$attributes$frb6 === void 0 ? '' : _props$attributes$frb6,
+      _props$attributes$frbGap = _props$attributes.frblGap,
+      frblGap = _props$attributes$frbGap === void 0 ? '20' : _props$attributes$frbGap,
       _props$attributes$frb7 = _props$attributes.frblButtons,
       frblButtons = _props$attributes$frb7 === void 0 ? 'arrows' : _props$attributes$frb7,
       _props$attributes$frb8 = _props$attributes.frblRewind,
@@ -123,6 +125,15 @@ function addCustomCarouselPanel(BlockEdit) {
           frblAutoplay: value
         });
       }
+    }), /*#__PURE__*/React.createElement(TextControl, {
+      label: __('Gap (px)', 'frontblocks'),
+      value: frblGap,
+      onChange: function onChange(value) {
+        return props.setAttributes({
+          frblGap: value
+        });
+      },
+      help: __('Space between slides in pixels. Leave empty for 20.', 'frontblocks')
     }), frblGridOption === 'slider' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToggleControl, {
       label: __('Rewind', 'frontblocks'),
       checked: frblRewind,
diff --git a/assets/carousel/frontblocks-advanced-option.jsx b/assets/carousel/frontblocks-advanced-option.jsx
index ae46d89..6bfd2ef 100644
--- a/assets/carousel/frontblocks-advanced-option.jsx
+++ b/assets/carousel/frontblocks-advanced-option.jsx
@@ -37,6 +37,7 @@ function addCustomCarouselPanel(BlockEdit) {
 			frblTabletToView = '2',
 			frblResponsiveToView = '1',
 			frblAutoplay = '',
+			frblGap = '20',
 			frblButtons = 'arrows',
 			frblRewind = true,
 			frblButtonColor,
@@ -97,6 +98,12 @@ function addCustomCarouselPanel(BlockEdit) {
 						value={frblAutoplay}
 						onChange={(value) => props.setAttributes({ frblAutoplay: value })}
 					/>
+					<TextControl
+						label={__('Gap (px)', 'frontblocks')}
+						value={frblGap}
+						onChange={(value) => props.setAttributes({ frblGap: value })}
+						help={__('Space between slides in pixels. Leave empty for 20.', 'frontblocks')}
+					/>
 					{frblGridOption === 'slider' && (
 						<>
 							<ToggleControl
diff --git a/assets/carousel/frontblocks-carousel.css b/assets/carousel/frontblocks-carousel.css
index c522cc1..371e4dd 100644
--- a/assets/carousel/frontblocks-carousel.css
+++ b/assets/carousel/frontblocks-carousel.css
@@ -1,19 +1,31 @@
 /**
-* ## Glide Carousel style
-* --------------------------- */
+ * Frontblocks Carousel – scoped under .frontblocks so other Glide instances are not affected.
+ */
 
-.glide {
+.frontblocks.glide {
   position: relative;
   width: 100%;
+  max-width: 100%;
   box-sizing: border-box;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
 }
-.glide * {
+
+.frontblocks.glide * {
   box-sizing: inherit;
 }
-.glide__track {
+
+.frontblocks .glide__track {
   overflow: hidden;
+  width: 100%;
+  position: relative;
+  left: 0;
+  margin: 0;
+  padding: 0;
 }
-.glide__slides {
+
+.frontblocks .glide__slides {
   position: relative;
   width: 100%;
   list-style: none;
@@ -27,12 +39,13 @@
   display: flex;
   flex-wrap: nowrap;
   will-change: transform;
-  transition: transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
 }
-.glide__slides--dragging {
+
+.frontblocks .glide__slides--dragging {
   user-select: none;
 }
-.glide__slide {
+
+.frontblocks .glide__slide {
   width: 100%;
   height: 100%;
   flex-shrink: 0;
@@ -41,27 +54,29 @@
   -webkit-touch-callout: none;
   -webkit-tap-highlight-color: transparent;
 }
-.glide__slide a {
+
+.frontblocks .glide__slide a {
   user-select: none;
   -webkit-user-drag: none;
   -moz-user-select: none;
   -ms-user-select: none;
 }
-.glide__arrows {
+
+.frontblocks .glide__arrows {
   -webkit-touch-callout: none;
   user-select: none;
 }
-.glide__bullets {
+
+.frontblocks .glide__bullets {
   -webkit-touch-callout: none;
   user-select: none;
 }
-.glide--rtl {
+
+.frontblocks.glide--rtl {
   direction: rtl;
 }
 
-/*# sourceMappingURL=glide.core.css.map */
-
-.glide__arrow {
+.frontblocks .glide__arrow {
   position: absolute;
   display: block;
   top: 50%;
@@ -78,22 +93,28 @@
   transform: translateY(-50%);
   line-height: 1;
 }
-.glide__arrow:focus {
+
+.frontblocks .glide__arrow:focus {
   outline: none;
 }
-.glide__arrow:hover {
+
+.frontblocks .glide__arrow:hover {
   border-color: white;
 }
-.glide__arrow--left {
-  left: -1em;
+
+.frontblocks .glide__arrow--left {
+  left: 1em;
 }
-.glide__arrow--right {
-  right: -1em;
+
+.frontblocks .glide__arrow--right {
+  right: 1em;
 }
-.glide__arrow--disabled {
+
+.frontblocks .glide__arrow--disabled {
   opacity: 0.33;
 }
-.glide__bullets {
+
+.frontblocks .glide__bullets {
   position: absolute;
   z-index: 2;
   bottom: -1em;
@@ -103,7 +124,8 @@
   transform: translateX(-50%);
   gap: 5px;
 }
-.glide__bullet {
+
+.frontblocks .glide__bullet {
   background-color: rgba(255, 255, 255, 0.5);
   width: 13px;
   height: 13px;
@@ -115,188 +137,116 @@
   line-height: 0;
   margin: 0;
 }
-.glide__bullet:focus {
+
+.frontblocks .glide__bullet:focus {
   outline: none;
 }
-.glide__bullet:hover, .glide__bullet:focus {
+
+.frontblocks .glide__bullet:hover,
+.frontblocks .glide__bullet:focus {
   border: 2px solid white;
   background-color: rgba(255, 255, 255, 0.5);
 }
-.glide__bullet--active {
+
+.frontblocks .glide__bullet--active {
   background-color: white;
 }
-.glide--swipeable {
+
+.frontblocks.glide--swipeable {
   cursor: grab;
   cursor: -moz-grab;
   cursor: -webkit-grab;
 }
-.glide--dragging {
+
+.frontblocks.glide--dragging {
   cursor: grabbing;
   cursor: -moz-grabbing;
   cursor: -webkit-grabbing;
 }
-.glide__arrows--bottom .glide__arrow {
-    top: calc(100% + 25px);
-    left: 0;
+
+.frontblocks .glide__arrows--bottom .glide__arrow {
+  top: calc(100% + 25px);
+  left: 0;
 }
-.glide__arrows--bottom .glide__arrow--right {
-    left: 50px;
-    right: unset;
+
+.frontblocks .glide__arrows--bottom .glide__arrow--right {
+  left: 50px;
+  right: unset;
 }
-/* Arrows position top/side - spans full container width */
-.glide__arrows--top {
-	position: absolute;
-	top: 50%;
-	left: 0;
-	right: 0;
-	width: 100%;
-	z-index: 10;
-	pointer-events: none;
-	transform: translateY(-50%);
+
+.frontblocks .glide__arrows--top {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  width: 100%;
+  z-index: 10;
+  pointer-events: none;
+  transform: translateY(-50%);
 }
-.glide__arrows--top .glide__arrow {
-	pointer-events: all;
+
+.frontblocks .glide__arrows--top .glide__arrow {
+  pointer-events: all;
 }
-.glide__arrows--top .glide__arrow--left {
-	left: 2em;
+
+.frontblocks .glide__arrows--top .glide__arrow--left {
+  left: 2em;
 }
-.glide__arrows--top .glide__arrow--right {
-	right: 2em;
+
+.frontblocks .glide__arrows--top .glide__arrow--right {
+  right: 2em;
 }
-/* Responsive */
+
 @media only screen and (max-width: 768px) {
-	.glide__arrow--left {
-		left: 0;
-	}
-	.glide__arrow--right {
-		right: 0;
-	}
+  .frontblocks .glide__arrow--left {
+    left: 0.5em;
+  }
+  .frontblocks .glide__arrow--right {
+    right: 0.5em;
+  }
 }
 
-/*# sourceMappingURL=glide.theme.css.map */
-
 /**
- * Override native Gutenberg Grid styles when carousel is active
+ * Override native Gutenberg Grid styles when carousel is active (scoped to frontblocks carousel).
  */
 .wp-block-group.frontblocks-carousel,
 .wp-block-group.frontblocks-carousel.is-layout-grid {
-	display: block;
-	grid-template-columns: none;
-	gap: 0;
-}
-
-.wp-block-group.frontblocks-carousel > * {
-	width: 100%;
-}
-
-/* Ensure inner container doesn't interfere with carousel */
-.wp-block-group.frontblocks-carousel > .wp-block-group__inner-container {
-	display: block;
-	grid-template-columns: none;
-	gap: 0;
-	width: 100%;
+  display: block;
+  grid-template-columns: none;
+  gap: 0;
 }
 
-/* Override grid styles for direct children in carousel mode */
-.glide__slides.wp-block-group,
-.glide__slides.wp-block-group.is-layout-grid {
-	display: flex;
-	grid-template-columns: none;
-	gap: 0;
-	column-gap: 0;
-	row-gap: 0;
+.wp-block-group.frontblocks-carousel .frontblocks.glide,
+.wp-block-group.frontblocks-carousel .frontblocks .glide__track {
+  width: 100%;
+  max-width: 100%;
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
-/* Ensure slides have proper width */
-.glide__slides > .glide__slide {
-	min-width: 0;
-	flex-shrink: 0;
+.wp-block-group.frontblocks-carousel > * {
+  width: 100%;
 }
 
-/* Force full width for single slide view */
-.frontblocks-carousel[data-view="1"] .glide__slide {
-	margin-left: 0;
-	margin-right: 0;
+.wp-block-group.frontblocks-carousel > .wp-block-group__inner-container {
+  display: block;
+  grid-template-columns: none;
+  gap: 0;
+  width: 100%;
 }
 
-/* Remove gaps when showing one slide */
-.frontblocks-carousel[data-view="1"].glide__slides {
-	gap: 0;
+.frontblocks .glide__slides.wp-block-group,
+.frontblocks .glide__slides.wp-block-group.is-layout-grid {
+  display: flex;
+  grid-template-columns: none;
+  gap: 0;
+  column-gap: 0;
+  row-gap: 0;
 }
 
-/* Responsive single slide view */
-@media only screen and (max-width: 768px) {
-	.frontblocks-carousel[data-mobile-view="1"] .glide__slide {
-		width: 100%;
-		flex: 0 0 100%;
-		max-width: 100%;
-		margin-left: 0;
-		margin-right: 0;
-	}
-}
-
-@media only screen and (min-width: 769px) and (max-width: 1024px) {
-	.frontblocks-carousel[data-tablet-view="1"] .glide__slide {
-		width: 100%;
-		flex: 0 0 100%;
-		max-width: 100%;
-		margin-left: 0;
-		margin-right: 0;
-	}
-}
-
-@media only screen and (min-width: 1025px) and (max-width: 1440px) {
-	.frontblocks-carousel[data-laptop-view="1"] .glide__slide {
-		width: 100%;
-		flex: 0 0 100%;
-		max-width: 100%;
-		margin-left: 0;
-		margin-right: 0;
-	}
-}
-
-/* Handle alignfull content within carousel slides */
-.glide__slide > .wp-block-cover.alignfull,
-.glide__slide > .alignfull {
-	width: 100%;
-	max-width: none;
-	margin-left: 0;
-	margin-right: 0;
-}
-
-/* Ensure cover blocks maintain minimum height */
-.glide__slide .wp-block-cover {
-	min-height: 430px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-/* Prevent carousel from overflowing viewport */
-.glide {
-	position: relative;
-	overflow: visible;
-	min-height: 430px;
-}
-
-.glide__track {
-	overflow: hidden;
-	width: 100%;
-	position: relative;
-	z-index: 1;
-}
-
-.glide__slides {
-	position: relative;
-	z-index: 1;
-	height: auto;
-	min-height: 430px;
-}
-
-.glide__slide {
-	position: relative;
-	z-index: 1;
-	height: auto;
-	opacity: 1;
-	visibility: visible;
+.frontblocks .glide__slides > .glide__slide {
+  min-width: 0;
+  flex-shrink: 0;
 }
diff --git a/assets/carousel/frontblocks-carousel.js b/assets/carousel/frontblocks-carousel.js
index 8d5008e..c673414 100644
--- a/assets/carousel/frontblocks-carousel.js
+++ b/assets/carousel/frontblocks-carousel.js
@@ -28,7 +28,7 @@ window.addEventListener('load', function (event) {
 
             parentwrap.replaceChild(wrapperParent, wrapper);
             wrapperParent.appendChild(wrapper);
-            wrapperParent.classList.add('glide');
+            wrapperParent.classList.add('frontblocks', 'glide');
 
             // Options
             const carouselType = item.getAttribute('data-type') ? item.getAttribute('data-type') : 'carousel';
@@ -37,8 +37,9 @@ window.addEventListener('load', function (event) {
             const carouselLaptopView = item.getAttribute('data-laptop-view') ? parseInt(item.getAttribute('data-laptop-view')) : 3;
             const carouselTabletView = item.getAttribute('data-tablet-view') ? parseInt(item.getAttribute('data-tablet-view')) : 2;
             const carouselMobileView = item.getAttribute('data-mobile-view') ? parseInt(item.getAttribute('data-mobile-view')) : 1;
-            const autoplayValue = item.getAttribute('data-autoplay');
-            const carouselAutoplay = autoplayValue && autoplayValue !== '' ? parseInt(autoplayValue) : 0;
+            const autoplayAttr = item.getAttribute('data-autoplay');
+            const carouselAutoplay = (autoplayAttr !== '' && autoplayAttr !== null && autoplayAttr !== undefined) ? parseInt(autoplayAttr, 10) : 0;
+            const carouselGap = item.getAttribute('data-gap') ? parseInt(item.getAttribute('data-gap'), 10) : 20;
             const carouselRewind = item.getAttribute('data-rewind') ? item.getAttribute('data-rewind') : false;
             const carouselbuttonsColor = item.getAttribute('data-buttons-color') ? item.getAttribute('data-buttons-color') : 'black';
             const carouselbuttonsBackgroundColor = item.getAttribute('data-buttons-background-color') ? item.getAttribute('data-buttons-background-color') : 'transparent';
@@ -78,8 +79,8 @@ window.addEventListener('load', function (event) {
                 // Add custom CSS for active bullet color
                 const style = document.createElement('style');
                 style.textContent = `
-					.glide__bullet.glide__bullet--active {
-						background-color: ${carouselbuttonsColor} !important;
+					.frontblocks .glide__bullet.glide__bullet--active {
+						background-color: ${carouselbuttonsColor};
 					}
 				`;
                 document.head.appendChild(style);
@@ -109,28 +110,22 @@ window.addEventListener('load', function (event) {
                 arrows.innerHTML = arrowsHTML;
                 wrapperParent.appendChild(arrows);
             }
-            // Calculate gap based on perView - use 0 gap when showing 1 slide
-            const calculateGap = (view) => view === 1 ? 0 : 20;
-            
             const glideFrontBlocks = new Glide(wrapperParent, {
                 type: carouselType,
                 perView: carouselView,
                 startAt: 0,
-                autoplay: carouselAutoplay === 0 ? false : carouselAutoplay,
-                gap: calculateGap(carouselView),
+                autoplay: carouselAutoplay > 0 ? carouselAutoplay : false,
+                gap: isNaN(carouselGap) ? 20 : carouselGap,
                 rewind: carouselRewind,
                 breakpoints: {
                     768: {
-                        perView: carouselMobileView,
-                        gap: calculateGap(carouselMobileView)
+                        perView: carouselMobileView
                     },
                     1024: {
-                        perView: carouselTabletView,
-                        gap: calculateGap(carouselTabletView)
+                        perView: carouselTabletView
                     },
                     1440: {
-                        perView: carouselLaptopView,
-                        gap: calculateGap(carouselLaptopView)
+                        perView: carouselLaptopView
                     }
                 }
             });
@@ -153,4 +148,4 @@ window.addEventListener('load', function (event) {
             glideFrontBlocks.mount();
         });
     }
-});
\ No newline at end of file
+});
diff --git a/includes/Frontend/Carousel.php b/includes/Frontend/Carousel.php
index 742fd40..421afc3 100644
--- a/includes/Frontend/Carousel.php
+++ b/includes/Frontend/Carousel.php
@@ -75,6 +75,7 @@ public function add_custom_attributes_to_grid_block( $block_content, $block ) {
 		$tablet_to_view     = isset( $attrs['frblTabletToView'] ) ? (int) $attrs['frblTabletToView'] : 2;
 		$responsive_to_view = isset( $attrs['frblResponsiveToView'] ) ? (int) $attrs['frblResponsiveToView'] : 1;
 		$autoplay           = isset( $attrs['frblAutoplay'] ) ? ( (int) $attrs['frblAutoplay'] * 1000 ) : '';
+		$gap                = isset( $attrs['frblGap'] ) && '' !== $attrs['frblGap'] ? (int) $attrs['frblGap'] : 20;
 		$rewind             = isset( $attrs['frblRewind'] ) ? (bool) $attrs['frblRewind'] : true;
 		$buttons            = isset( $attrs['frblButtons'] ) ? sanitize_text_field( $attrs['frblButtons'] ) : 'arrows';
 		$button_color       = isset( $attrs['frblButtonColor'] ) ? sanitize_text_field( $attrs['frblButtonColor'] ) : '';
@@ -99,6 +100,7 @@ public function add_custom_attributes_to_grid_block( $block_content, $block ) {
 					' data-tablet-view="' . esc_attr( $tablet_to_view ) . '"' .
 					' data-mobile-view="' . esc_attr( $responsive_to_view ) . '"' .
 					' data-autoplay="' . esc_attr( $autoplay ) . '"' .
+					' data-gap="' . esc_attr( $gap ) . '"' .
 					' data-buttons="' . esc_attr( $buttons ) . '"' .
 					' data-buttons-color="' . esc_attr( $button_color ) . '"' .
 					' data-buttons-background-color="' . esc_attr( $button_bg_color ) . '"' .
@@ -139,6 +141,7 @@ public function add_custom_attributes_to_element_block( $block_content, $block )
 		$tablet_to_view     = isset( $attrs['frblTabletToView'] ) ? (int) $attrs['frblTabletToView'] : 2;
 		$responsive_to_view = isset( $attrs['frblResponsiveToView'] ) ? (int) $attrs['frblResponsiveToView'] : 1;
 		$autoplay           = isset( $attrs['frblAutoplay'] ) ? ( (int) $attrs['frblAutoplay'] * 1000 ) : '';
+		$gap                = isset( $attrs['frblGap'] ) && '' !== $attrs['frblGap'] ? (int) $attrs['frblGap'] : 20;
 		$rewind             = isset( $attrs['frblRewind'] ) ? (bool) $attrs['frblRewind'] : true;
 		$buttons            = isset( $attrs['frblButtons'] ) ? sanitize_text_field( $attrs['frblButtons'] ) : 'arrows';
 		$button_color       = isset( $attrs['frblButtonColor'] ) ? sanitize_text_field( $attrs['frblButtonColor'] ) : '';
@@ -163,6 +166,7 @@ public function add_custom_attributes_to_element_block( $block_content, $block )
 					' data-tablet-view="' . esc_attr( $tablet_to_view ) . '"' .
 					' data-mobile-view="' . esc_attr( $responsive_to_view ) . '"' .
 					' data-autoplay="' . esc_attr( $autoplay ) . '"' .
+					' data-gap="' . esc_attr( $gap ) . '"' .
 					' data-buttons="' . esc_attr( $buttons ) . '"' .
 					' data-buttons-color="' . esc_attr( $button_color ) . '"' .
 					' data-buttons-background-color="' . esc_attr( $button_bg_color ) . '"' .
@@ -203,6 +207,7 @@ public function add_custom_attributes_to_core_group_block( $block_content, $bloc
 		$tablet_to_view     = isset( $attrs['frblTabletToView'] ) ? (int) $attrs['frblTabletToView'] : 2;
 		$responsive_to_view = isset( $attrs['frblResponsiveToView'] ) ? (int) $attrs['frblResponsiveToView'] : 1;
 		$autoplay           = isset( $attrs['frblAutoplay'] ) ? ( (int) $attrs['frblAutoplay'] * 1000 ) : '';
+		$gap                = isset( $attrs['frblGap'] ) && '' !== $attrs['frblGap'] ? (int) $attrs['frblGap'] : 20;
 		$rewind             = isset( $attrs['frblRewind'] ) ? (bool) $attrs['frblRewind'] : true;
 		$buttons            = isset( $attrs['frblButtons'] ) ? sanitize_text_field( $attrs['frblButtons'] ) : 'arrows';
 		$button_color       = isset( $attrs['frblButtonColor'] ) ? sanitize_text_field( $attrs['frblButtonColor'] ) : '';
@@ -227,6 +232,7 @@ public function add_custom_attributes_to_core_group_block( $block_content, $bloc
 					' data-tablet-view="' . esc_attr( $tablet_to_view ) . '"' .
 					' data-mobile-view="' . esc_attr( $responsive_to_view ) . '"' .
 					' data-autoplay="' . esc_attr( $autoplay ) . '"' .
+					' data-gap="' . esc_attr( $gap ) . '"' .
 					' data-buttons="' . esc_attr( $buttons ) . '"' .
 					' data-buttons-color="' . esc_attr( $button_color ) . '"' .
 					' data-buttons-background-color="' . esc_attr( $button_bg_color ) . '"' .
@@ -299,6 +305,10 @@ public function register_custom_attributes_for_grid_block( $block_args, $block_t
 			'type'    => 'string',
 			'default' => '',
 		);
+		$block_args['attributes']['frblGap']              = array(
+			'type'    => 'string',
+			'default' => '20',
+		);
 		$block_args['attributes']['frblRewind']           = array(
 			'type'    => 'boolean',
 			'default' => true,
@@ -370,6 +380,10 @@ function( settings, name ) {
 							type: 'string',
 							default: ''
 						},
+						frblGap: {
+							type: 'string',
+							default: '20'
+						},
 						frblButtons: {
 							type: 'string',
 							default: 'arrows'