diff --git a/src/components/Modal/Modal.style.ts b/src/components/Modal/Modal.style.ts
index 28c068e..002f6ae 100644
--- a/src/components/Modal/Modal.style.ts
+++ b/src/components/Modal/Modal.style.ts
@@ -13,7 +13,7 @@ export const backdropStyling = css({
   width: '100%',
   height: '100%',
 
-  backgroundColor: 'rgba(0, 0, 0, .35)',
+  backgroundColor: 'rgba(0, 0, 0, .5)',
 
   cursor: 'pointer',
 });
@@ -22,27 +22,27 @@ export const dialogStyling = () => {
   const { theme } = useTheme();
 
   return css({
-  position: 'fixed',
-  top: '50%',
-  transform: 'translateY(-50%)',
-  zIndex: themes.dark.zIndex.overlayTop,
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-
-  minWidth: '300px',
-  padding: themes.dark.spacer.spacing4,
-  margin: '0 auto',
-
-  border: 'none',
-  borderRadius: themes.dark.borderRadius.large,
-
-  backgroundColor: theme.backgroundElevated,
-  boxShadow: themes.dark.boxShadow.shadow8,
-  color: theme.primary,
-
-  animation: `${fadeIn} 0.2s ease-in`,
+    position: 'fixed',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    zIndex: themes.dark.zIndex.overlayTop,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+
+    minWidth: '300px',
+    padding: themes.dark.spacer.spacing4,
+    margin: '0 auto',
+
+    border: 'none',
+    borderRadius: themes.dark.borderRadius.large,
+
+    backgroundColor: theme.backgroundElevated,
+    boxShadow: themes.dark.boxShadow.shadow8,
+    color: theme.primary,
+
+    animation: `${fadeIn} 0.2s ease-in`,
   });
 };
 
diff --git a/src/components/Skeleton/Skeleton.style.ts b/src/components/Skeleton/Skeleton.style.ts
index b6b3982..1576a9b 100644
--- a/src/components/Skeleton/Skeleton.style.ts
+++ b/src/components/Skeleton/Skeleton.style.ts
@@ -14,12 +14,13 @@ export const skeletonAnimation = keyframes`
   }
 `;
 
-export const getSkeletonStyling = (width: string, height: string, variant: 'square' | 'circle') => css({
+export const getSkeletonStyling = (width: string, height: string, variant: 'square' | 'circle') =>
+  css({
     width,
     height: variant === 'square' ? height : width,
     borderRadius: variant === 'square' ? themes.dark.spacer.spacing2 : '50%',
 
-    background: `linear-gradient(-90deg, ${themes.dark.secondary}, ${themes.dark.muted}, ${themes.dark.secondary}, ${themes.dark.backgroundElevated})`,
+    background: `linear-gradient(-90deg, ${themes.dark.faint}, ${themes.dark.muted}, ${themes.dark.faint}, ${themes.dark.backgroundElevated})`,
     backgroundSize: '400%',
 
     animation: `${skeletonAnimation} 3s infinite ease-out`,