diff --git a/src/core/Slider/Slider.stories.tsx b/src/core/Slider/Slider.stories.tsx
index 59f444513..3475f136f 100644
--- a/src/core/Slider/Slider.stories.tsx
+++ b/src/core/Slider/Slider.stories.tsx
@@ -4,7 +4,7 @@ import Icon from "../Icon/component.tsx";
 
 const Slide = ({ name }: { name: string }) => (
   <div className="relative ">
-    <div className="relative mx-auto w-full sm:w-[560px] md:w-[784px] lg:w-[960px] bg-white overflow-hidden  flex gap-40 rounded-3xl shadow-container-subtle">
+    <div className="relative w-full sm:w-[560px] md:w-[784px] lg:w-[960px] bg-white overflow-hidden  flex gap-40 rounded-3xl shadow-container-subtle">
       <div className="w-full md:w-2/3 flex flex-col gap-24 pr-40 md:pr-0 pt-40 pl-40 pb-40 sm:pb-[120px] md:pb-40">
         <h2 className="ui-text-h2 font-medium text-neutral-1000">
           “Ably seamlessly absorbs sudden bursts in load during unexpected
diff --git a/src/core/Slider/component.tsx b/src/core/Slider/component.tsx
index 617658e0d..1e0237feb 100644
--- a/src/core/Slider/component.tsx
+++ b/src/core/Slider/component.tsx
@@ -74,7 +74,10 @@ const Slider = ({ children, interval = 15000 }: SliderProps) => {
           style={{ transform: `translateX(-${activeIndex * 100}%)` }}
         >
           {children.map((child, index) => (
-            <div key={index} className="w-full flex-shrink-0">
+            <div
+              key={index}
+              className="w-full flex-shrink-0 flex justify-center sm:px-60"
+            >
               {child}
             </div>
           ))}