diff --git a/package.json b/package.json
index eef09dd..d4d5292 100644
--- a/package.json
+++ b/package.json
@@ -59,8 +59,7 @@
     },
     "peerDependencies": {
         "react": ">=16.8",
-        "react-dom": ">=16.8",
-        "styled-components": ">=5.X"
+        "react-dom": ">=16.8"
     },
     "devDependencies": {
         "@babel/core": "^7.23.0",
diff --git a/src/components/ImageStage/components/Image/index.tsx b/src/components/ImageStage/components/Image/index.tsx
index b1707b2..eb79f67 100644
--- a/src/components/ImageStage/components/Image/index.tsx
+++ b/src/components/ImageStage/components/Image/index.tsx
@@ -6,7 +6,6 @@ import {
 } from '../../utils';
 import { useGesture } from 'react-use-gesture';
 import React, { useEffect, useRef, useState } from 'react';
-import styled, { AnyStyledComponent } from 'styled-components';
 import type { ImagesListItem } from '../../../../types/ImagesList';
 
 const defaultImageTransform = {
@@ -285,8 +284,7 @@ const Image = ({
     });
 
     return (
-        <AnimatedImage
-            $inline={inline}
+        <animated.img
             className="lightbox-image"
             draggable="false"
             onClick={(e: React.MouseEvent<HTMLImageElement>) => {
@@ -300,12 +298,17 @@ const Image = ({
             }}
             ref={imageRef}
             style={{
-                ...imgStyleProp,
+                height: 'auto',
                 maxHeight: pagerHeight,
+                maxWidth: '100%',
+                touchAction: !inline ? 'none' : 'pan-y',
+                ...imgStyleProp,
                 transform: to(
                     [scale, translateX, translateY],
                     (s, x, y) => `translate(${x}px, ${y}px) scale(${s})`,
                 ),
+                userSelect: 'none',
+                width: 'auto',
                 ...(isCurrentImage && { willChange: 'transform' }),
             }}
             // Include any valid img html attributes provided in the <Lightbox /> images prop
@@ -317,14 +320,3 @@ const Image = ({
 Image.displayName = 'Image';
 
 export default Image;
-
-const AnimatedImage = styled(animated.img as AnyStyledComponent)`
-    width: auto;
-    height: auto;
-    max-width: 100%;
-    user-select: none;
-    touch-action: ${({ $inline }) => (!$inline ? 'none' : 'pan-y')};
-    ::selection {
-        background: none;
-    }
-`;
diff --git a/src/components/ImageStage/components/ImagePager/index.tsx b/src/components/ImageStage/components/ImagePager/index.tsx
index 4797db9..3222cf6 100644
--- a/src/components/ImageStage/components/ImagePager/index.tsx
+++ b/src/components/ImageStage/components/ImagePager/index.tsx
@@ -2,7 +2,6 @@ import { animated, useSprings } from '@react-spring/web';
 import { useGesture } from 'react-use-gesture';
 import Image from '../Image';
 import React, { useEffect, useRef, useState } from 'react';
-import styled, { AnyStyledComponent } from 'styled-components';
 import type { ImagesList } from '../../../../types/ImagesList';
 
 type IImagePager = {
@@ -201,10 +200,9 @@ const ImagePager = ({
     );
 
     return (
-        <ImagePagerContainer>
+        <div style={{ height: '100%', width: '100%' }}>
             {pagerSprings.map(({ display, x }, i) => (
-                <AnimatedImagePager
-                    $inline={inline}
+                <animated.span
                     {...bind()}
                     className="lightbox-image-pager"
                     key={i}
@@ -219,20 +217,51 @@ const ImagePager = ({
                     }}
                     role="presentation"
                     style={{
+                        alignItems: 'center',
+                        bottom: 0,
                         display,
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        left: 0,
+                        position: 'absolute',
+                        right: 0,
+                        top: 0,
+                        touchAction: !inline ? 'none' : 'pan-y',
                         transform: x.to(
                             (xInterp: number) => `translateX(${xInterp}px)`,
                         ),
+                        width: '100%',
+                        willChange: 'transform',
                     }}
                 >
-                    <PagerContentWrapper>
-                        <PagerInnerContentWrapper>
-                            <ImageContainer
-                                $inline={inline}
+                    <div
+                        style={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            width: '100%',
+                        }}
+                    >
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                justifyContent: 'center',
+                            }}
+                        >
+                            <div
                                 onClick={(e) => {
                                     e.stopPropagation();
                                     e.nativeEvent.stopImmediatePropagation();
                                 }}
+                                style={{
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    position: 'relative',
+                                    touchAction: !inline ? 'none' : 'pan-y',
+                                    userSelect: 'none',
+                                    width: '100%',
+                                }}
                             >
                                 <Image
                                     imgProps={images[i]}
@@ -244,59 +273,15 @@ const ImagePager = ({
                                     singleClickToZoom={singleClickToZoom}
                                 />
                                 {renderImageOverlay()}
-                            </ImageContainer>
-                        </PagerInnerContentWrapper>
-                    </PagerContentWrapper>
-                </AnimatedImagePager>
+                            </div>
+                        </div>
+                    </div>
+                </animated.span>
             ))}
-        </ImagePagerContainer>
+        </div>
     );
 };
 
 ImagePager.displayName = 'ImagePager';
 
 export default ImagePager;
-
-const ImagePagerContainer = styled.div`
-    height: 100%;
-    width: 100%;
-`;
-
-const PagerInnerContentWrapper = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-`;
-
-const PagerContentWrapper = styled.div`
-    width: 100%;
-    display: flex;
-    justify-content: center;
-`;
-
-const AnimatedImagePager = styled(animated.span as AnyStyledComponent)<{
-    $inline: boolean;
-}>`
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    height: 100%;
-    width: 100%;
-    will-change: transform;
-    touch-action: ${({ $inline }) => (!$inline ? 'none' : 'pan-y')};
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-`;
-
-const ImageContainer = styled.div<{ $inline: boolean }>`
-    position: relative;
-    touch-action: ${({ $inline }) => (!$inline ? 'none' : 'pan-y')};
-    user-select: none;
-    display: flex;
-    justify-content: center;
-    width: 100%;
-`;
diff --git a/src/components/ImageStage/components/SSRImagePager/SSRImagePager.tsx b/src/components/ImageStage/components/SSRImagePager/SSRImagePager.tsx
index 281e630..5586520 100644
--- a/src/components/ImageStage/components/SSRImagePager/SSRImagePager.tsx
+++ b/src/components/ImageStage/components/SSRImagePager/SSRImagePager.tsx
@@ -1,5 +1,4 @@
 import type { ImagesList } from '../../../../types/ImagesList';
-import styled, { css } from 'styled-components';
 import * as React from 'react';
 
 type ISSRImagePagerProps = {
@@ -9,36 +8,28 @@ type ISSRImagePagerProps = {
 
 const SSRImagePager = ({ currentIndex, images }: ISSRImagePagerProps) => {
     return (
-        <ImagePagerContainer>
+        <div style={{ height: 'inherit', width: '100%' }}>
             {images.map(({ alt, src }, i) => {
+                const isCurrentImage = i === currentIndex;
                 return (
-                    <Image
-                        $isCurrentImage={i === currentIndex}
+                    <img
                         alt={alt}
                         key={`${alt}-${src}-${i}`}
                         src={src}
+                        style={{
+                            ...(!isCurrentImage && {
+                                display: 'none',
+                                visibility: 'hidden',
+                            }),
+                            height: '100%',
+                            objectFit: 'contain',
+                            width: '100%',
+                        }}
                     />
                 );
             })}
-        </ImagePagerContainer>
+        </div>
     );
 };
 
 export default SSRImagePager;
-
-const ImagePagerContainer = styled.div`
-    width: 100%;
-    height: inherit;
-`;
-
-const Image = styled.img<{ $isCurrentImage: boolean }>`
-    ${({ $isCurrentImage }) =>
-        !$isCurrentImage &&
-        css`
-            visibility: hidden;
-            display: none;
-        `}
-    height:100%;
-    width: 100%;
-    object-fit: contain;
-`;
diff --git a/src/components/ImageStage/index.tsx b/src/components/ImageStage/index.tsx
index 676dbbf..85cc2bf 100644
--- a/src/components/ImageStage/index.tsx
+++ b/src/components/ImageStage/index.tsx
@@ -1,6 +1,5 @@
 import ImagePager from './components/ImagePager';
 import React from 'react';
-import styled from 'styled-components';
 import useRefSize from './utils/useRefSize';
 import type { ImagesList } from '../../types/ImagesList';
 import SSRImagePager from './components/SSRImagePager/SSRImagePager';
@@ -57,10 +56,18 @@ const ImageStage = ({
         useRefSize();
 
     return (
-        <ImageStageContainer
+        <div
             className={className}
             data-testid="lightbox-image-stage"
             ref={containerRef}
+            style={{
+                alignItems: 'center',
+                display: 'flex',
+                height: '100%',
+                justifyContent: 'center',
+                position: 'relative',
+                width: '100%',
+            }}
         >
             {renderPrevButton({ canPrev })}
             {containerWidth ? (
@@ -80,17 +87,8 @@ const ImageStage = ({
                 <SSRImagePager currentIndex={currentIndex} images={images} />
             ) : null}
             {renderNextButton({ canNext })}
-        </ImageStageContainer>
+        </div>
     );
 };
 
 export default ImageStage;
-
-const ImageStageContainer = styled.div`
-    position: relative;
-    height: 100%;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-`;
diff --git a/src/components/PageContainer/index.tsx b/src/components/PageContainer/index.tsx
index a559428..59b3a8f 100644
--- a/src/components/PageContainer/index.tsx
+++ b/src/components/PageContainer/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { useTransition, animated, config } from '@react-spring/web';
-import styled, { AnyStyledComponent } from 'styled-components';
 
 type IPageContainerProps = {
     /** All child components of Lightbox */
@@ -42,15 +41,26 @@ const PageContainer = ({
             {transitions(
                 (animatedStyles, item) =>
                     item && (
-                        <AnimatedPageContainer
+                        <animated.div
                             className={`lightbox-container${
                                 className ? ` ${className}` : ''
                             }`}
                             data-testid="lightbox-container"
-                            style={{ ...animatedStyles, ...style }}
+                            style={{
+                                bottom: 0,
+                                display: 'flex',
+                                flexDirection: 'column',
+                                left: 0,
+                                position: 'fixed',
+                                right: 0,
+                                top: 0,
+                                zIndex: 400,
+                                ...animatedStyles,
+                                ...style,
+                            }}
                         >
                             {children}
-                        </AnimatedPageContainer>
+                        </animated.div>
                     ),
             )}
         </>
@@ -58,14 +68,3 @@ const PageContainer = ({
 };
 
 export default PageContainer;
-
-const AnimatedPageContainer = styled(animated.div as AnyStyledComponent)`
-    display: flex;
-    flex-direction: column;
-    position: fixed;
-    z-index: 400;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-`;
diff --git a/src/index.tsx b/src/index.tsx
index 2d58ee1..668b8e8 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -51,7 +51,6 @@ type ILightboxProps = {
  * Built with:
  * @see https://github.com/react-spring/react-use-gesture
  * @see https://github.com/react-spring/react-spring
- * @see https://github.com/styled-components/styled-components
  */
 const Lightbox = ({
     className = '',