diff --git a/src/components/analytics/MonthlyComparisonChart.tsx b/src/components/analytics/MonthlyComparisonChart.tsx
index 7229c9b..e9afabc 100644
--- a/src/components/analytics/MonthlyComparisonChart.tsx
+++ b/src/components/analytics/MonthlyComparisonChart.tsx
@@ -40,7 +40,7 @@ const MonthlyComparisonChart: React.FC<MonthlyComparisonChartProps> = ({
   );
 
   return (
-    <div className="neuro-card h-72">
+    <div className="neuro-card h-72 w-full">
       {!isEmpty && monthlyData.length > 0 ? (
         <ResponsiveContainer width="100%" height="100%">
           <BarChart data={monthlyData} margin={{
diff --git a/src/components/analytics/SummaryCards.tsx b/src/components/analytics/SummaryCards.tsx
index 7ca9143..179246a 100644
--- a/src/components/analytics/SummaryCards.tsx
+++ b/src/components/analytics/SummaryCards.tsx
@@ -18,7 +18,7 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
   const isMobile = useIsMobile();
 
   return (
-    <div className={`grid ${isMobile ? 'grid-cols-1 gap-3' : 'grid-cols-3 gap-3'} mb-8 w-full`}>
+    <div className={`grid ${isMobile ? 'grid-cols-1' : 'grid-cols-3'} gap-3 mb-8 w-full`}>
       <div className="neuro-card w-full">
         <div className="flex items-center gap-2 mb-1 py-[5px]">
           <Wallet size={24} className="text-gray-500" />
diff --git a/src/hooks/use-mobile.tsx b/src/hooks/use-mobile.tsx
index 2b0fe1d..4c656f3 100644
--- a/src/hooks/use-mobile.tsx
+++ b/src/hooks/use-mobile.tsx
@@ -1,19 +1,25 @@
+
 import * as React from "react"
 
 const MOBILE_BREAKPOINT = 768
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+  const [isMobile, setIsMobile] = React.useState<boolean>(false)
 
   React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
+    const checkMobile = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
     }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
+    
+    // 초기 확인
+    checkMobile()
+    
+    // 리사이즈 이벤트 리스너 추가
+    window.addEventListener('resize', checkMobile)
+    
+    // 클린업 함수
+    return () => window.removeEventListener('resize', checkMobile)
   }, [])
 
-  return !!isMobile
+  return isMobile
 }
diff --git a/src/index.css b/src/index.css
index c4c5d75..1a156c1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -144,6 +144,17 @@
   .neuro-input {
     @apply neuro-pressed px-4 py-3 w-full focus:outline-none focus:ring-2 focus:ring-neuro-accent/30;
   }
+  
+  /* 모바일 화면에서의 추가 스타일 */
+  @media (max-width: 768px) {
+    .neuro-card {
+      @apply w-full;
+    }
+    
+    #root {
+      @apply p-0;
+    }
+  }
 }
 
 .font-inter {
diff --git a/src/pages/Analytics.tsx b/src/pages/Analytics.tsx
index f7ef2eb..0cac917 100644
--- a/src/pages/Analytics.tsx
+++ b/src/pages/Analytics.tsx
@@ -79,7 +79,7 @@ const Analytics = () => {
   
   return (
     <div className="min-h-screen bg-neuro-background pb-24">
-      <div className={`mx-auto ${isMobile ? 'w-full px-4' : 'max-w-lg px-4'}`}>
+      <div className={isMobile ? "w-full px-4" : "max-w-lg mx-auto px-4"}>
         {/* Header */}
         <header className="py-8 w-full">
           <h1 className="text-2xl font-bold neuro-text mb-5">지출 분석</h1>