diff --git a/app/_layout.tsx b/app/_layout.tsx
index 8ceacf6..1f98c1b 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -11,7 +11,7 @@ export default function MainLayout() {
     <QueryClientProvider client={queryClient}>
       <Splash>
         <FavoritePresentationsProvider>
-          <View className='bg-slate-100 min-h-screen'>
+          <View className='bg-slate-100 dark:bg-slate-900 min-h-screen'>
             <Slot />
           </View>
         </FavoritePresentationsProvider>
diff --git a/components/base/item-card.tsx b/components/base/item-card.tsx
index bae2d0f..2a442a1 100644
--- a/components/base/item-card.tsx
+++ b/components/base/item-card.tsx
@@ -6,7 +6,7 @@ export function ItemCard({ className, ...props }: PressableProps) {
   return (
     <Pressable
       className={cn(
-        'mb-5 rounded-xl bg-white active:bg-slate-50 p-3 shadow-md shadow-slate-500/10 relative overflow-hidden',
+        'mb-5 rounded-xl bg-white dark:bg-slate-800 active:bg-slate-50 active:dark:bg-slate-700 p-3 shadow-md shadow-slate-500/10 relative overflow-hidden',
         className
       )}
       {...props}
diff --git a/components/base/screen.tsx b/components/base/screen.tsx
index b37c0c8..0bbc92c 100644
--- a/components/base/screen.tsx
+++ b/components/base/screen.tsx
@@ -3,5 +3,5 @@ import { View, ViewProps } from 'react-native';
 import { cn } from '../../utils/common.utils';
 
 export function Screen({ className, ...props }: ViewProps) {
-  return <View className={cn('bg-slate-100 h-full', className)} {...props} />;
+  return <View className={cn('bg-slate-100 dark:bg-slate-900 h-full', className)} {...props} />;
 }
diff --git a/components/base/text.tsx b/components/base/text.tsx
index 3da00eb..2f28a71 100644
--- a/components/base/text.tsx
+++ b/components/base/text.tsx
@@ -9,7 +9,7 @@ export function StyledText({ className, ...props }: TextProps) {
         fontFamily: 'Raleway',
         fontWeight: 'normal',
       }}
-      className={cn('font-raleway', className)}
+      className={cn('font-raleway text-slate-800 dark:text-slate-100', className)}
       {...props}
     />
   );
diff --git a/components/common/separator.tsx b/components/common/separator.tsx
index b995038..380717c 100644
--- a/components/common/separator.tsx
+++ b/components/common/separator.tsx
@@ -4,5 +4,5 @@ import { View, ViewProps } from 'react-native';
 import { cn } from '../../utils/common.utils';
 
 export function Separator({ className, ...props }: ViewProps) {
-  return <View className={cn('w-20 h-1 rounded-full bg-slate-300 my-5', className)} {...props} />;
+  return <View className={cn('w-20 h-1 rounded-full bg-slate-300 dark:bg-slate-700 my-5', className)} {...props} />;
 }
diff --git a/components/common/skeleton.tsx b/components/common/skeleton.tsx
index 9f426e5..7eef1c4 100644
--- a/components/common/skeleton.tsx
+++ b/components/common/skeleton.tsx
@@ -5,5 +5,11 @@ import { cn } from '../../utils/common.utils';
 
 export function SkeletonRectangle({ className, style, ...props }: ViewProps) {
   const { opacity } = usePulseAnimation();
-  return <Animated.View className={cn('bg-slate-200 rounded-xl', className)} style={[{ opacity }, style]} {...props} />;
+  return (
+    <Animated.View
+      className={cn('bg-slate-200 dark:bg-slate-800 rounded-xl', className)}
+      style={[{ opacity }, style]}
+      {...props}
+    />
+  );
 }
diff --git a/components/common/styled-button.tsx b/components/common/styled-button.tsx
index 2e7e03f..a2b4c85 100644
--- a/components/common/styled-button.tsx
+++ b/components/common/styled-button.tsx
@@ -10,7 +10,7 @@ type ButtonVariant = 'primary' | 'outline';
 
 const buttonStyles: Record<ButtonVariant, string> = {
   primary: 'bg-primary-500 active:bg-primary-600',
-  outline: 'bg-transparent border-2 border-primary-500 active:bg-primary-100',
+  outline: 'bg-transparent border-2 border-primary-500 active:bg-primary-500/30',
 };
 
 const textStyles: Record<ButtonVariant, string> = {
diff --git a/components/map/map.tsx b/components/map/map.tsx
index b93f0bd..1cf6e95 100644
--- a/components/map/map.tsx
+++ b/components/map/map.tsx
@@ -13,7 +13,6 @@ export function Map() {
       />
       <Path
         d='M77.3202 487.088L1.95703 448.264L26.4256 399.653L22.1844 397.043L105.704 233.919L111.25 236.856L117.122 225.111L129.194 199.663L166.712 123.322L172.258 124.953L180.088 95.9167L173.563 92.0017L221.522 -0.000131668L246.317 14.681L240.118 25.7734L244.359 28.3834L276.658 50.5683L351.042 50.5683L351.042 567.018L270.459 567.018L270.459 481.868L283.183 481.868L283.183 476.322L235.224 465.229L227.394 516.776L152.031 495.57L148.442 513.514L82.214 478.605L77.3202 487.088Z'
-        fill='white'
         stroke='#64748B'
         strokeWidth='3.26248'
         strokeLinejoin='round'
diff --git a/components/tabbar/tabbar-background.tsx b/components/tabbar/tabbar-background.tsx
index c37266f..cc85f60 100644
--- a/components/tabbar/tabbar-background.tsx
+++ b/components/tabbar/tabbar-background.tsx
@@ -1,5 +1,7 @@
 import { View } from 'react-native';
 
 export function TabbarBackground() {
-  return <View className='shadow-md shadow-slate-500/30 w-full h-full bg-white rounded-xl' />;
+  return (
+    <View className='shadow-md shadow-slate-500/30 dark:shadow-black/30 w-full h-full bg-white dark:bg-slate-800 rounded-xl' />
+  );
 }