diff --git a/src/components/UI/Skeleton/SGLSkeleton.tsx b/src/components/UI/Skeleton/SGLSkeleton.tsx
new file mode 100644
index 0000000..a0e49b9
--- /dev/null
+++ b/src/components/UI/Skeleton/SGLSkeleton.tsx
@@ -0,0 +1,27 @@
+import Skeleton, {
+  type SkeletonProps as MuiSkeletonProps,
+} from '@mui/material/Skeleton'
+
+import type { CSSProperties } from '@mui/material/styles'
+import { skeletonStyles } from './styles'
+
+interface SGLSkeletonProps extends Omit<MuiSkeletonProps, 'style' | 'sx'> {
+  style?: CSSProperties
+}
+
+export const SGLSkeleton = ({
+  animation = 'wave',
+  style,
+  ...props
+}: SGLSkeletonProps) => {
+  return (
+    <Skeleton
+      sx={(theme) => ({
+        ...skeletonStyles(theme),
+        ...style,
+      })}
+      animation={animation}
+      {...props}
+    />
+  )
+}
\ No newline at end of file
diff --git a/src/components/UI/Skeleton/styles.ts b/src/components/UI/Skeleton/styles.ts
new file mode 100644
index 0000000..3a68c35
--- /dev/null
+++ b/src/components/UI/Skeleton/styles.ts
@@ -0,0 +1,12 @@
+import type { Theme } from '@mui/material/styles'
+
+export const skeletonStyles = (theme: Theme) => {
+  return {
+    backgroundColor: theme.palette.lightGrey.main,
+    opacity: 1,
+
+    '&.MuiSkeleton-wave::after': {
+      animationDuration: '1.6s',
+    },
+  }
+}
\ No newline at end of file