diff --git a/frontend/.gitattributes b/frontend/.gitattributes
new file mode 100644
index 000000000..3914ba8a6
--- /dev/null
+++ b/frontend/.gitattributes
@@ -0,0 +1,2 @@
+# 자동 생성되는 라우트 트리 파일의 줄바꿈을 LF로 고정
+src/routeTree.gen.ts text eol=lf
diff --git a/frontend/src/components/report-page/ReportLegend.tsx b/frontend/src/components/report-page/ReportLegend.tsx
new file mode 100644
index 000000000..7b29cc872
--- /dev/null
+++ b/frontend/src/components/report-page/ReportLegend.tsx
@@ -0,0 +1,30 @@
+import clsx from 'clsx';
+
+const LEGEND_COLOR = {
+  primary: 'bg-primary-normal',
+  secondary: 'bg-cool-neutral-90',
+} as const;
+
+const SHAPE_STYLE = {
+  box: 'size-2.5',
+  line: 'w-6.25 h-1 rounded-modal-10',
+} as const;
+
+interface ReportLegendProps {
+  color: keyof typeof LEGEND_COLOR;
+  label: string;
+  variant?: keyof typeof SHAPE_STYLE;
+}
+
+const ReportLegend = ({ color, label, variant = 'box' }: ReportLegendProps) => {
+  return (
+    <div className="flex items-center gap-1.5">
+      <div className={clsx(SHAPE_STYLE[variant], LEGEND_COLOR[color])} />
+      <span className="label1-normal-regular text-label-alternative">
+        {label}
+      </span>
+    </div>
+  );
+};
+
+export default ReportLegend;
diff --git a/frontend/src/components/report-page/VerticalGrid.tsx b/frontend/src/components/report-page/VerticalGrid.tsx
new file mode 100644
index 000000000..589bb25a5
--- /dev/null
+++ b/frontend/src/components/report-page/VerticalGrid.tsx
@@ -0,0 +1,67 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import { clsx } from 'clsx';
+
+interface VerticalGridProps extends ComponentPropsWithoutRef<'div'> {
+  steps?: number;
+  labels: (number | string)[];
+  positions?: number[]; // 커스텀 위치 배열
+}
+
+const VerticalGrid = ({
+  steps,
+  labels,
+  positions,
+  className,
+}: VerticalGridProps) => {
+  const gridPositions =
+    positions ||
+    (steps !== undefined
+      ? Array.from({ length: steps + 1 }, (_, i) => (i / steps) * 100)
+      : []);
+
+  if (gridPositions.length === 0) return null;
+
+  return (
+    <div
+      className={clsx(
+        'pointer-events-none absolute inset-0 flex h-full flex-col gap-4 pr-5',
+        className,
+      )}
+    >
+      <div className="relative flex-1">
+        {gridPositions.map((position, i) => (
+          <div
+            key={i}
+            className="border-line-normal-normal absolute top-0 h-full border-l border-dashed"
+            style={{
+              left: `${position}%`,
+            }}
+          />
+        ))}
+      </div>
+      <div className="relative">
+        {gridPositions.map((position, i) => {
+          const label = labels[i];
+          if (label === undefined || label === null) return null;
+
+          return (
+            <div
+              key={i}
+              className="text-label-assistive absolute text-xs whitespace-nowrap"
+              style={{
+                left: `${position}%`,
+                transform: 'translateX(-50%)',
+              }}
+            >
+              {typeof label === 'number'
+                ? Math.round(label).toLocaleString()
+                : label}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default VerticalGrid;
diff --git a/frontend/src/components/report-page/category/ReportBar.tsx b/frontend/src/components/report-page/category/ReportBar.tsx
index 3fb9f4a40..2f3a9d05b 100644
--- a/frontend/src/components/report-page/category/ReportBar.tsx
+++ b/frontend/src/components/report-page/category/ReportBar.tsx
@@ -6,7 +6,6 @@ import CurrencyAmountDisplay from '@/components/currency/CurrencyAmountDisplay';
 import CurrencyBadge from '@/components/currency/CurrencyBadge';
 import { useReportContext } from '@/components/report-page/ReportContext';
 
-import { type CountryCode } from '@/data/countryCode';
 import { useAccountBookStore } from '@/stores/useAccountBookStore';
 
 interface ReportBarProps {
@@ -30,8 +29,10 @@ const VARIANT_STYLES = {
 
 const ReportBar = ({ value, variant, maxValue }: ReportBarProps) => {
   const { currencyType } = useReportContext();
-  const countryCode = useAccountBookStore((state) => state.accountBook?.localCountryCode) as CountryCode;
-  
+  const countryCode = useAccountBookStore(
+    (state) => state.accountBook?.localCountryCode,
+  );
+
   const styles = VARIANT_STYLES[variant];
   const percentage = (value / maxValue) * 100;
   const [showAmount, setShowAmount] = useState(false);
@@ -46,6 +47,8 @@ const ReportBar = ({ value, variant, maxValue }: ReportBarProps) => {
     return () => clearTimeout(timer);
   }, []);
 
+  if (!countryCode) return null;
+
   return (
     <div className="flex flex-1 items-center gap-2">
       <div
diff --git a/frontend/src/components/report-page/category/ReportBarGraph.tsx b/frontend/src/components/report-page/category/ReportBarGraph.tsx
index 38c44f878..89f38b7ba 100644
--- a/frontend/src/components/report-page/category/ReportBarGraph.tsx
+++ b/frontend/src/components/report-page/category/ReportBarGraph.tsx
@@ -1,31 +1,9 @@
 import { useMemo } from 'react';
-import clsx from 'clsx';
 
 import ReportBarList from '@/components/report-page/category/ReportBarList';
+import ReportLegend from '@/components/report-page/ReportLegend';
 
-import type { CategoryId } from '@/types/category';
-
-const LEGEND_COLOR = {
-  me: 'bg-primary-normal',
-  other: 'bg-cool-neutral-95',
-} as const;
-
-interface ReportBarLegendProps {
-  color: keyof typeof LEGEND_COLOR;
-  label: string;
-}
-
-const ReportBarLegend = ({ color, label }: ReportBarLegendProps) => {
-  return (
-    <div className="flex items-center gap-1.5">
-      <div className={clsx('h-2.5 w-2.5', LEGEND_COLOR[color])} />
-      <span className="label1-normal-regular text-label-alternative">
-        {label}
-      </span>
-    </div>
-  );
-};
-
+import { type CategoryId } from '@/types/category';
 interface ReportBarGraphProps {
   maxLabel: number;
   items: {
@@ -49,8 +27,8 @@ const ReportBarGraph = ({ maxLabel, items }: ReportBarGraphProps) => {
   return (
     <div className="flex w-145.5 flex-col gap-3.5">
       <div className="flex justify-end gap-4">
-        <ReportBarLegend label="나" color="me" />
-        <ReportBarLegend label="다른 학생" color="other" />
+        <ReportLegend label="나" color="primary" />
+        <ReportLegend label="다른 학생" color="secondary" />
       </div>
       <ReportBarList items={data} maxLabel={maxLabel} />
     </div>
diff --git a/frontend/src/components/report-page/category/ReportBarList.tsx b/frontend/src/components/report-page/category/ReportBarList.tsx
index 3eb5d1908..278f62528 100644
--- a/frontend/src/components/report-page/category/ReportBarList.tsx
+++ b/frontend/src/components/report-page/category/ReportBarList.tsx
@@ -1,5 +1,5 @@
 import ReportBarRow from '@/components/report-page/category/ReportBarRow';
-import VerticalGrid from '@/components/report-page/category/VerticalGrid';
+import VerticalGrid from '@/components/report-page/VerticalGrid';
 
 import type { CategoryId } from '@/types/category';
 
@@ -12,9 +12,15 @@ interface ReportBarListProps {
   }[];
 }
 const ReportBarList = ({ items, maxLabel }: ReportBarListProps) => {
+  const steps = 6;
+  const labels = Array.from(
+    { length: steps + 1 },
+    (_, i) => (maxLabel / steps) * i,
+  );
+
   return (
     <div className="relative h-125.25 pt-4.75">
-      <VerticalGrid steps={6} maxLabel={maxLabel} />
+      <VerticalGrid steps={steps} labels={labels} className="left-14.75" />
       <div className="relative z-10 flex flex-col gap-4.5">
         {items.map((item) => (
           <ReportBarRow
diff --git a/frontend/src/components/report-page/category/ReportCategory.tsx b/frontend/src/components/report-page/category/ReportCategory.tsx
index c3008d231..a9ec52943 100644
--- a/frontend/src/components/report-page/category/ReportCategory.tsx
+++ b/frontend/src/components/report-page/category/ReportCategory.tsx
@@ -23,10 +23,10 @@ const ReportCategory = ({ data }: ReportCategoryProps) => {
 
   return (
     <ReportContainer title="월별 지출 비교">
-      <ReportContent className="h-166.5 w-162.5 gap-7">
+      <ReportContent className="h-166.5 w-162.5 gap-7 pb-10.25">
         <h3 className="heading1-bold text-label-normal">
           나랑 같은 국가의 교환학생보다{' '}
-          <span className="text-primary-normal">{category}</span> 소비가 유독{' '}
+          <span className="text-primary-strong">{category}</span> 소비가 유독{' '}
           {data.isOverSpent ? '많아요' : '적어요'}
         </h3>
         <ReportBarGraph maxLabel={maxLabelValue} items={data.items} />
diff --git a/frontend/src/components/report-page/category/VerticalGrid.tsx b/frontend/src/components/report-page/category/VerticalGrid.tsx
deleted file mode 100644
index 4971a070c..000000000
--- a/frontend/src/components/report-page/category/VerticalGrid.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-interface VerticalGridProps {
-  steps: number;
-  maxLabel: number;
-}
-
-const VerticalGrid = ({ steps, maxLabel }: VerticalGridProps) => {
-  if (steps <= 0) {
-    return null;
-  }
-
-  const values = Array.from(
-    { length: steps + 1 },
-    (_, i) => (maxLabel / steps) * i,
-  );
-
-  return (
-    <div className="pointer-events-none absolute inset-0 left-14.75 flex h-full flex-col gap-4 pr-5">
-      <div className="relative flex-1">
-        {values.map((_, i) => (
-          <div
-            key={i}
-            className="border-line-normal-normal absolute top-0 h-full border-l border-dashed"
-            style={{
-              left: `${(i / steps) * 100}%`,
-            }}
-          />
-        ))}
-      </div>
-      <div className="relative">
-        {values.map((value, i) => (
-          <div
-            key={i}
-            className="text-label-assistive absolute text-xs"
-            style={{
-              left: `${(i / steps) * 100}%`,
-              transform: 'translateX(-50%)',
-            }}
-          >
-            {Math.round(value).toLocaleString()}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default VerticalGrid;
diff --git a/frontend/src/components/report-page/layout/ReportContent.tsx b/frontend/src/components/report-page/layout/ReportContent.tsx
index 7d3d4de3b..b2a079201 100644
--- a/frontend/src/components/report-page/layout/ReportContent.tsx
+++ b/frontend/src/components/report-page/layout/ReportContent.tsx
@@ -17,7 +17,7 @@ const ReportContent = ({
   return (
     <div
       className={cn(
-        'rounded-modal-8 bg-cool-neutral-99 flex flex-col justify-between p-8',
+        'rounded-modal-8 bg-cool-neutral-99 flex flex-col p-8',
         className,
       )}
     >
diff --git a/frontend/src/components/report-page/mock.ts b/frontend/src/components/report-page/mock.ts
index 7a10c7b5d..84234f58c 100644
--- a/frontend/src/components/report-page/mock.ts
+++ b/frontend/src/components/report-page/mock.ts
@@ -6,6 +6,11 @@ interface CategoryItem {
   averageSpentAmount: string;
 }
 
+interface MyselfItem {
+  date: string;
+  cumulatedAmount: string;
+}
+
 const mockData = {
   countryCode: 'US',
   compareWithAverage: {
@@ -16,70 +21,72 @@ const mockData = {
   },
   compareWithLastMonth: {
     diff: '150',
-    thisMonth: '2026-01',
-    thisMonthCount: 20,
-    lastMonth: '2025-12',
-    lastMonthCount: 31,
-    totalSpent: {
-      thisMonthToDate: '830',
-      lastMonthToSameDay: '680',
-      lastMonthTotal: '2311.46',
+    thisMonth: {
+      label: '1월',
+      dayCount: 20,
+      totalSpent: '830',
+      items: [
+        { date: '2026-01-01', cumulatedAmount: '12.5' },
+        { date: '2026-01-02', cumulatedAmount: '35.2' },
+        { date: '2026-01-03', cumulatedAmount: '52.8' },
+        { date: '2026-01-04', cumulatedAmount: '78.1' },
+        { date: '2026-01-05', cumulatedAmount: '101' },
+        { date: '2026-01-06', cumulatedAmount: '128.4' },
+        { date: '2026-01-07', cumulatedAmount: '160.9' },
+        { date: '2026-01-08', cumulatedAmount: '190.3' },
+        { date: '2026-01-09', cumulatedAmount: '230.7' },
+        { date: '2026-01-10', cumulatedAmount: '260.1' },
+        { date: '2026-01-11', cumulatedAmount: '300.6' },
+        { date: '2026-01-12', cumulatedAmount: '338.9' },
+        { date: '2026-01-13', cumulatedAmount: '380.2' },
+        { date: '2026-01-14', cumulatedAmount: '420.1' },
+        { date: '2026-01-15', cumulatedAmount: '465' },
+        { date: '2026-01-16', cumulatedAmount: '520.4' },
+        { date: '2026-01-17', cumulatedAmount: '600.9' },
+        { date: '2026-01-18', cumulatedAmount: '700.3' },
+        { date: '2026-01-19', cumulatedAmount: '780.1' },
+        { date: '2026-01-20', cumulatedAmount: '830' },
+      ] as MyselfItem[],
+    },
+
+    lastMonth: {
+      label: '12월',
+      dayCount: 31,
+      totalSpent: '2311.46',
+      items: [
+        { date: '2025-12-01', cumulatedAmount: '18' },
+        { date: '2025-12-02', cumulatedAmount: '26' },
+        { date: '2025-12-03', cumulatedAmount: '41' },
+        { date: '2025-12-04', cumulatedAmount: '58' },
+        { date: '2025-12-05', cumulatedAmount: '82' },
+        { date: '2025-12-06', cumulatedAmount: '103' },
+        { date: '2025-12-07', cumulatedAmount: '121' },
+        { date: '2025-12-08', cumulatedAmount: '150' },
+        { date: '2025-12-09', cumulatedAmount: '190' },
+        { date: '2025-12-10', cumulatedAmount: '220' },
+        { date: '2025-12-11', cumulatedAmount: '260' },
+        { date: '2025-12-12', cumulatedAmount: '300' },
+        { date: '2025-12-13', cumulatedAmount: '330' },
+        { date: '2025-12-14', cumulatedAmount: '370' },
+        { date: '2025-12-15', cumulatedAmount: '420' },
+        { date: '2025-12-16', cumulatedAmount: '480' },
+        { date: '2025-12-17', cumulatedAmount: '540' },
+        { date: '2025-12-18', cumulatedAmount: '610' },
+        { date: '2025-12-19', cumulatedAmount: '650' },
+        { date: '2025-12-20', cumulatedAmount: '680' },
+        { date: '2025-12-21', cumulatedAmount: '710' },
+        { date: '2025-12-22', cumulatedAmount: '760' },
+        { date: '2025-12-23', cumulatedAmount: '810' },
+        { date: '2025-12-24', cumulatedAmount: '860' },
+        { date: '2025-12-25', cumulatedAmount: '930' },
+        { date: '2025-12-26', cumulatedAmount: '990' },
+        { date: '2025-12-27', cumulatedAmount: '1100' },
+        { date: '2025-12-28', cumulatedAmount: '1300' },
+        { date: '2025-12-29', cumulatedAmount: '1600' },
+        { date: '2025-12-30', cumulatedAmount: '2000' },
+        { date: '2025-12-31', cumulatedAmount: '2311.46' },
+      ] as MyselfItem[],
     },
-    thisMonthItem: [
-      { date: '2026-01-01', cumulatedAmount: '12.5' },
-      { date: '2026-01-02', cumulatedAmount: '35.2' },
-      { date: '2026-01-03', cumulatedAmount: '52.8' },
-      { date: '2026-01-04', cumulatedAmount: '78.1' },
-      { date: '2026-01-05', cumulatedAmount: '101' },
-      { date: '2026-01-06', cumulatedAmount: '128.4' },
-      { date: '2026-01-07', cumulatedAmount: '160.9' },
-      { date: '2026-01-08', cumulatedAmount: '190.3' },
-      { date: '2026-01-09', cumulatedAmount: '230.7' },
-      { date: '2026-01-10', cumulatedAmount: '260.1' },
-      { date: '2026-01-11', cumulatedAmount: '300.6' },
-      { date: '2026-01-12', cumulatedAmount: '338.9' },
-      { date: '2026-01-13', cumulatedAmount: '380.2' },
-      { date: '2026-01-14', cumulatedAmount: '420.1' },
-      { date: '2026-01-15', cumulatedAmount: '465' },
-      { date: '2026-01-16', cumulatedAmount: '520.4' },
-      { date: '2026-01-17', cumulatedAmount: '600.9' },
-      { date: '2026-01-18', cumulatedAmount: '700.3' },
-      { date: '2026-01-19', cumulatedAmount: '780.1' },
-      { date: '2026-01-20', cumulatedAmount: '830' },
-    ],
-    prevMonthItem: [
-      { date: '2025-12-01', cumulatedAmount: '18' },
-      { date: '2025-12-02', cumulatedAmount: '26' },
-      { date: '2025-12-03', cumulatedAmount: '41' },
-      { date: '2025-12-04', cumulatedAmount: '58' },
-      { date: '2025-12-05', cumulatedAmount: '82' },
-      { date: '2025-12-06', cumulatedAmount: '103' },
-      { date: '2025-12-07', cumulatedAmount: '121' },
-      { date: '2025-12-08', cumulatedAmount: '150' },
-      { date: '2025-12-09', cumulatedAmount: '190' },
-      { date: '2025-12-10', cumulatedAmount: '220' },
-      { date: '2025-12-11', cumulatedAmount: '260' },
-      { date: '2025-12-12', cumulatedAmount: '300' },
-      { date: '2025-12-13', cumulatedAmount: '330' },
-      { date: '2025-12-14', cumulatedAmount: '370' },
-      { date: '2025-12-15', cumulatedAmount: '420' },
-      { date: '2025-12-16', cumulatedAmount: '480' },
-      { date: '2025-12-17', cumulatedAmount: '540' },
-      { date: '2025-12-18', cumulatedAmount: '610' },
-      { date: '2025-12-19', cumulatedAmount: '650' },
-      { date: '2025-12-20', cumulatedAmount: '680' },
-      { date: '2025-12-21', cumulatedAmount: '710' },
-      { date: '2025-12-22', cumulatedAmount: '760' },
-      { date: '2025-12-23', cumulatedAmount: '810' },
-      { date: '2025-12-24', cumulatedAmount: '860' },
-      { date: '2025-12-25', cumulatedAmount: '930' },
-      { date: '2025-12-26', cumulatedAmount: '990' },
-      { date: '2025-12-27', cumulatedAmount: '1100' },
-      { date: '2025-12-28', cumulatedAmount: '1300' },
-      { date: '2025-12-29', cumulatedAmount: '1600' },
-      { date: '2025-12-30', cumulatedAmount: '2000' },
-      { date: '2025-12-31', cumulatedAmount: '2311.46' },
-    ],
   },
   compareByCategory: {
     maxDiffCategoryIndex: 4,
@@ -88,45 +95,21 @@ const mockData = {
     items: [
       {
         categoryIndex: 1,
-        mySpentAmount: '302.62',
-        averageSpentAmount: '379.21',
+        mySpentAmount: '302',
+        averageSpentAmount: '379',
       },
       {
         categoryIndex: 3,
-        mySpentAmount: '210.1',
-        averageSpentAmount: '180.05',
-      },
-      {
-        categoryIndex: 4,
-        mySpentAmount: '480',
-        averageSpentAmount: '300',
-      },
-      {
-        categoryIndex: 6,
-        mySpentAmount: '150',
-        averageSpentAmount: '220',
-      },
-      {
-        categoryIndex: 2,
-        mySpentAmount: '600',
-        averageSpentAmount: '650',
-      },
-      {
-        categoryIndex: 5,
-        mySpentAmount: '280',
-        averageSpentAmount: '240',
-      },
-      {
-        categoryIndex: 7,
-        mySpentAmount: '60',
-        averageSpentAmount: '55',
-      },
-      {
-        categoryIndex: 8,
-        mySpentAmount: '120',
-        averageSpentAmount: '130',
+        mySpentAmount: '210',
+        averageSpentAmount: '180',
       },
-    ] as Array<CategoryItem>,
+      { categoryIndex: 4, mySpentAmount: '480', averageSpentAmount: '300' },
+      { categoryIndex: 6, mySpentAmount: '150', averageSpentAmount: '220' },
+      { categoryIndex: 2, mySpentAmount: '600', averageSpentAmount: '650' },
+      { categoryIndex: 5, mySpentAmount: '280', averageSpentAmount: '240' },
+      { categoryIndex: 7, mySpentAmount: '60', averageSpentAmount: '55' },
+      { categoryIndex: 8, mySpentAmount: '120', averageSpentAmount: '130' },
+    ] as CategoryItem[],
   },
 } as const;
 
diff --git a/frontend/src/components/report-page/monthly/ReportMonthly.tsx b/frontend/src/components/report-page/monthly/ReportMonthly.tsx
new file mode 100644
index 000000000..4c2a2bdd7
--- /dev/null
+++ b/frontend/src/components/report-page/monthly/ReportMonthly.tsx
@@ -0,0 +1,17 @@
+import ReportContainer from '@/components/report-page/layout/ReportContainer';
+import ReportContent from '@/components/report-page/layout/ReportContent';
+
+const ReportMonthly = () => {
+  return (
+    <ReportContainer title="월별 지출 비교">
+      <ReportContent className="h-62 w-109 gap-7 py-8.75 pl-7">
+        <h3 className="heading1-bold text-label-normal">
+          나랑 같은 국가의 교환학생보다 <br />
+          <span className="text-primary-strong">234달러 덜</span> 썼어요
+        </h3>
+      </ReportContent>
+    </ReportContainer>
+  );
+};
+
+export default ReportMonthly;
diff --git a/frontend/src/components/report-page/myself/ReportLineChart.tsx b/frontend/src/components/report-page/myself/ReportLineChart.tsx
new file mode 100644
index 000000000..6a8185509
--- /dev/null
+++ b/frontend/src/components/report-page/myself/ReportLineChart.tsx
@@ -0,0 +1,79 @@
+import {
+  buildAreaPath,
+  buildLinePath,
+} from '@/components/report-page/myself/buildPath';
+import { type ChartItem } from '@/components/report-page/reportType';
+
+type MonthlyChartData = {
+  dayCount: number;
+  items: ChartItem[];
+};
+
+interface ReportLineChartProps {
+  thisMonth: MonthlyChartData;
+  lastMonth: MonthlyChartData;
+  maxValue: number;
+  width?: number;
+  height?: number;
+}
+
+const ReportLineChart = ({
+  thisMonth,
+  lastMonth,
+  maxValue,
+  width = 348,
+  height = 140,
+}: ReportLineChartProps) => {
+  const maxDay = Math.max(thisMonth.dayCount, lastMonth.dayCount);
+
+  const thisPath = buildLinePath(
+    thisMonth.items,
+    width,
+    height,
+    maxValue,
+    maxDay,
+  );
+  const lastLinePath = buildLinePath(
+    lastMonth.items,
+    width,
+    height,
+    maxValue,
+    maxDay,
+  );
+  const lastAreaPath = buildAreaPath(
+    lastMonth.items,
+    width,
+    height,
+    maxValue,
+    maxDay,
+  );
+
+  const thisMonthWidth = (thisMonth.items.length / maxDay) * width;
+
+  return (
+    <svg width={width} height={height}>
+      <defs>
+        <clipPath id="thisMonthClip">
+          <rect x="0" y="0" width={thisMonthWidth} height={height} />
+        </clipPath>
+        <linearGradient id="graphGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" stopColor="rgba(194, 196, 200, 0.50)" />
+          <stop offset="100%" stopColor="rgba(255, 255, 255, 0.50)" />
+        </linearGradient>
+      </defs>
+      <path d={lastAreaPath} fill="url(#graphGradient)" stroke="none" />
+      <path d={lastLinePath} fill="none" stroke="#C2C4C8" strokeWidth={2.5} />
+      <path
+        d={thisPath}
+        fill="none"
+        stroke="#44A3B6"
+        strokeWidth={2.5}
+        strokeDasharray="1000"
+        className="animate-draw-path"
+        clipPath="url(#thisMonthClip)"
+      />
+    </svg>
+  );
+};
+
+export default ReportLineChart;
diff --git a/frontend/src/components/report-page/myself/ReportLineGraph.tsx b/frontend/src/components/report-page/myself/ReportLineGraph.tsx
new file mode 100644
index 000000000..ab76f020d
--- /dev/null
+++ b/frontend/src/components/report-page/myself/ReportLineGraph.tsx
@@ -0,0 +1,52 @@
+import ReportLineChart from '@/components/report-page/myself/ReportLineChart';
+import ReportLegend from '@/components/report-page/ReportLegend';
+import { type ChartItem } from '@/components/report-page/reportType';
+import VerticalGrid from '@/components/report-page/VerticalGrid';
+
+type MonthlyGraphData = {
+  label: string;
+  dayCount: number;
+  items: ChartItem[];
+};
+
+interface ReportLineGraphProps {
+  thisMonth: MonthlyGraphData;
+  lastMonth: MonthlyGraphData;
+  maxValue: number;
+}
+
+const ReportLineGraph = ({
+  thisMonth,
+  lastMonth,
+  maxValue,
+}: ReportLineGraphProps) => {
+  const maxDays = Math.max(thisMonth.dayCount, lastMonth.dayCount);
+
+  const positions = [0, ((thisMonth.dayCount - 1) / (maxDays - 1)) * 100, 100];
+  const labels = ['1일', `${thisMonth.dayCount}일`, `${maxDays}일`];
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex justify-end gap-4">
+        <ReportLegend label={thisMonth.label} color="primary" variant="line" />
+        <ReportLegend
+          label={lastMonth.label}
+          color="secondary"
+          variant="line"
+        />
+      </div>
+      <div className="relative h-42 pl-3">
+        <VerticalGrid positions={positions} labels={labels} className="pl-3" />
+        <div className="relative z-10 pt-2">
+          <ReportLineChart
+            thisMonth={thisMonth}
+            lastMonth={lastMonth}
+            maxValue={maxValue}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ReportLineGraph;
diff --git a/frontend/src/components/report-page/myself/ReportMyself.tsx b/frontend/src/components/report-page/myself/ReportMyself.tsx
new file mode 100644
index 000000000..e9d869989
--- /dev/null
+++ b/frontend/src/components/report-page/myself/ReportMyself.tsx
@@ -0,0 +1,68 @@
+import ReportContainer from '@/components/report-page/layout/ReportContainer';
+import ReportContent from '@/components/report-page/layout/ReportContent';
+import ReportLineGraph from '@/components/report-page/myself/ReportLineGraph';
+import { useReportContext } from '@/components/report-page/ReportContext';
+import { type ChartItem } from '@/components/report-page/reportType';
+
+import { type CountryCode } from '@/data/countryCode';
+import { getCountryInfo } from '@/lib/country';
+import { useAccountBookStore } from '@/stores/useAccountBookStore';
+
+type MonthlyData = {
+  label: string;
+  dayCount: number;
+  totalSpent: string;
+  items: ChartItem[];
+};
+
+interface ReportMyselfProps {
+  data: {
+    diff: string;
+    thisMonth: MonthlyData;
+    lastMonth: MonthlyData;
+  };
+}
+
+const ReportMyself = ({ data }: ReportMyselfProps) => {
+  const { currencyType } = useReportContext();
+  const countryCode = useAccountBookStore((state) =>
+    currencyType === 'LOCAL'
+      ? state.accountBook?.localCountryCode
+      : state.accountBook?.baseCountryCode,
+  ) as CountryCode;
+
+  const unit = getCountryInfo(countryCode)?.currencyUnitKor || '';
+
+  const maxValue = Math.max(
+    Number(data.lastMonth.totalSpent),
+    Number(data.thisMonth.totalSpent),
+  );
+
+  return (
+    <ReportContainer title="전월 대비 지출 비교">
+      <ReportContent className="h-86.25 w-109 pb-5 pl-6.5">
+        <div className="flex flex-col gap-2.5">
+          <h3 className="heading1-bold text-label-normal">
+            지난달보다{' '}
+            <span className="text-primary-strong">
+              {data.diff}
+              {unit} 더
+            </span>{' '}
+            쓰는 중이에요
+          </h3>
+          <span className="body1-normal-medium text-label-alternative">
+            오늘까지 {data.thisMonth.totalSpent}
+            {unit} 썼어요
+          </span>
+        </div>
+        <ReportLineGraph
+          thisMonth={data.thisMonth}
+          lastMonth={data.lastMonth}
+          maxValue={maxValue}
+        />
+      </ReportContent>
+    </ReportContainer>
+  );
+};
+
+export default ReportMyself;
diff --git a/frontend/src/components/report-page/myself/buildPath.ts b/frontend/src/components/report-page/myself/buildPath.ts
new file mode 100644
index 000000000..67e4f4cb0
--- /dev/null
+++ b/frontend/src/components/report-page/myself/buildPath.ts
@@ -0,0 +1,46 @@
+import { type ChartItem } from '@/components/report-page/reportType';
+
+const buildLineSegments = (
+  data: ChartItem[],
+  stepX: number,
+  height: number,
+  maxValue: number,
+) =>
+  data
+    .map((item, index) => {
+      const x = stepX * index;
+      const value = Number(item.cumulatedAmount);
+      const y = height - (value / maxValue) * height;
+
+      return `${index === 0 ? 'M' : 'L'} ${x} ${y}`;
+    })
+    .join(' ');
+
+export const buildLinePath = (
+  data: ChartItem[],
+  width: number,
+  height: number,
+  maxValue: number,
+  maxDay: number,
+) => {
+  const stepX = width / (maxDay - 1);
+
+  return buildLineSegments(data, stepX, height, maxValue);
+};
+
+export const buildAreaPath = (
+  data: ChartItem[],
+  width: number,
+  height: number,
+  maxValue: number,
+  maxDay: number,
+) => {
+  const stepX = width / (maxDay - 1);
+  const linePath = buildLineSegments(data, stepX, height, maxValue);
+
+  const lastIndex = data.length - 1;
+  const lastX = stepX * lastIndex;
+  const closingPath = `L ${lastX} ${height} L 0 ${height} Z`;
+
+  return linePath + ' ' + closingPath;
+};
diff --git a/frontend/src/components/report-page/reportType.ts b/frontend/src/components/report-page/reportType.ts
new file mode 100644
index 000000000..50d8d72ea
--- /dev/null
+++ b/frontend/src/components/report-page/reportType.ts
@@ -0,0 +1,4 @@
+export type ChartItem = {
+  date: string;
+  cumulatedAmount: string;
+};
diff --git a/frontend/src/pages/ReportPage.tsx b/frontend/src/pages/ReportPage.tsx
index c4c479048..78637cb5c 100644
--- a/frontend/src/pages/ReportPage.tsx
+++ b/frontend/src/pages/ReportPage.tsx
@@ -2,20 +2,28 @@ import { useState } from 'react';
 
 import ReportCategory from '@/components/report-page/category/ReportCategory';
 import mockData from '@/components/report-page/mock';
+import ReportMonthly from '@/components/report-page/monthly/ReportMonthly';
+import ReportMyself from '@/components/report-page/myself/ReportMyself';
 import ReportProvider from '@/components/report-page/ReportProvider';
 
 import { type CurrencyType } from '@/types/currency';
 
 const ReportPage = () => {
   const categoryData = mockData.compareByCategory;
+  const myselfData = mockData.compareWithLastMonth;
   const [currencyType, setCurrencyType] = useState<CurrencyType>('LOCAL'); // @TODO: 드롭다운 추가 예정
 
   return (
-    <div className="flex p-3">
+    <div className="flex gap-3.5 p-3">
       <ReportProvider
         currencyType={currencyType}
         onCurrencyTypeChange={setCurrencyType}
       >
+        <div className="flex flex-col justify-between">
+          <ReportMonthly />
+          <ReportMyself data={myselfData} />
+        </div>
+
         <ReportCategory data={categoryData} />
       </ReportProvider>
     </div>
diff --git a/frontend/src/styles/animation.css b/frontend/src/styles/animation.css
index 2d40f21bb..6fb56b163 100644
--- a/frontend/src/styles/animation.css
+++ b/frontend/src/styles/animation.css
@@ -56,10 +56,20 @@
     }
   }
 
+  @keyframes draw-path {
+    from {
+      stroke-dashoffset: 1000;
+    }
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+
   --animate-float: float 2s ease-in-out infinite;
   --animate-marquee: marquee 30s linear infinite;
   --animate-marquee-reverse: marquee-reverse 30s linear infinite;
   --animate-ripple: ripple 2s ease-in-out infinite;
   --animate-grow: scale-up 0.2s ease-in-out forwards;
   --animate-expand-width: expand-width ease-out forwards;
+  --animate-draw-path: draw-path 2s ease-in-out forwards;
 }