diff --git a/babel.config.js b/babel.config.js
index f842b77..14f311c 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +1,17 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        root: ['./'],
+        alias: {
+          components: './src/components',
+          navigation: './src/navigation',
+          screens: './src/screens',
+          utils: './src/utils',
+        },
+      },
+    ],
+  ],
 };
diff --git a/package.json b/package.json
index 26b1f33..b6625ea 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "@types/react": "^18.0.24",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.2.1",
+    "babel-plugin-module-resolver": "^5.0.0",
     "eslint": "^8.19.0",
     "jest": "^29.2.1",
     "metro-react-native-babel-preset": "0.73.9",
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index a0bcfb5..dcd8266 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,12 +1,12 @@
-import {ReactNode} from 'react';
-import {Pressable, PressableProps, StyleSheet} from 'react-native';
+import { ReactNode } from 'react';
+import { Pressable, PressableProps, StyleSheet } from 'react-native';
 import Text from './Text';
 
 type ButtonProps = {
   title?: string;
   children?: ReactNode;
 } & PressableProps;
-function Button({title, children, ...props}: ButtonProps) {
+function Button({ title, children, ...props }: ButtonProps) {
   return (
     <Pressable style={styles.container} {...props}>
       {children}
diff --git a/src/components/ScreenContainer/index.tsx b/src/components/ScreenContainer/index.tsx
index 00facdc..be1e680 100644
--- a/src/components/ScreenContainer/index.tsx
+++ b/src/components/ScreenContainer/index.tsx
@@ -1,10 +1,10 @@
-import {ReactNode} from 'react';
-import {StyleSheet, View} from 'react-native';
+import { ReactNode } from 'react';
+import { StyleSheet, View } from 'react-native';
 
 type ScreenContainerProps = {
   children: ReactNode;
 };
-function ScreenContainer({children}: ScreenContainerProps) {
+function ScreenContainer({ children }: ScreenContainerProps) {
   return <View style={styles.container}>{children}</View>;
 }
 
diff --git a/src/components/Text.tsx b/src/components/Text.tsx
index db55246..49c97e7 100644
--- a/src/components/Text.tsx
+++ b/src/components/Text.tsx
@@ -6,7 +6,7 @@ import {
 
 type TextProps = RNTextProps;
 
-function Text({style, ...props}: TextProps) {
+function Text({ style, ...props }: TextProps) {
   return <RNText {...props} style={[styles.container, style]} />;
 }
 
diff --git a/src/navigation/RootNavigation.tsx b/src/navigation/RootNavigation.tsx
index 80b4309..3e54054 100644
--- a/src/navigation/RootNavigation.tsx
+++ b/src/navigation/RootNavigation.tsx
@@ -1,8 +1,10 @@
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-import C01LineChartScreen from '../screens/C01LineChartScreen';
-import HomeScreen from '../screens/HomeScreen';
+import C01LineChartScreen from 'screens/C01LineChartScreen';
+import C02LineChartWithOptionsScreen from 'screens/C02LineChartWithOptionsScreen';
+import HomeScreen from 'screens/HomeScreen';
+
 import { RootStackParamsList } from './types';
 
 const Stack = createNativeStackNavigator<RootStackParamsList>();
@@ -17,6 +19,11 @@ function RootNavigation() {
           component={C01LineChartScreen}
           options={{ animation: 'none' }}
         />
+        <Stack.Screen
+          name="C02LineChartWithOptions"
+          component={C02LineChartWithOptionsScreen}
+          options={{ animation: 'none' }}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );
diff --git a/src/navigation/types.ts b/src/navigation/types.ts
index 70b3c35..e3f470b 100644
--- a/src/navigation/types.ts
+++ b/src/navigation/types.ts
@@ -1,4 +1,5 @@
 export type RootStackParamsList = {
   C01LineChart: undefined;
+  C02LineChartWithOptions: undefined;
   Home: undefined;
 };
diff --git a/src/navigation/useNavigation.ts b/src/navigation/useNavigation.ts
index fbb6a2e..0c51552 100644
--- a/src/navigation/useNavigation.ts
+++ b/src/navigation/useNavigation.ts
@@ -1,6 +1,6 @@
-import {useNavigation as useRNNavigation} from '@react-navigation/native';
-import {NativeStackNavigationProp} from '@react-navigation/native-stack';
-import {RootStackParamsList} from './types';
+import { useNavigation as useRNNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { RootStackParamsList } from './types';
 
 type RootStackNavigationProp<RouteKey extends keyof RootStackParamsList> =
   NativeStackNavigationProp<RootStackParamsList, RouteKey>;
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Lines.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Lines.tsx
new file mode 100644
index 0000000..51db84f
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/Lines.tsx
@@ -0,0 +1,43 @@
+import { G, Path } from 'react-native-svg';
+import { LinesOptions, TimeSeries } from '../types';
+
+const DEFAULT_COLORS = [
+  'blue',
+  'skyblue',
+  'green',
+  'brown',
+  'gray',
+  'orange',
+  'purple',
+  'red',
+  'pink',
+  'black',
+];
+
+type LinesProps = LinesOptions & {
+  series: TimeSeries[];
+  lineFunc: d3.Line<TimeSeries['data'][0]>;
+};
+function Lines({
+  series,
+  lineFunc,
+  colors = DEFAULT_COLORS,
+  lineWidth = 1,
+}: LinesProps) {
+  return (
+    <G>
+      {series.map((sr, i) => (
+        <Path
+          key={i}
+          d={lineFunc(sr.data) ?? undefined}
+          stroke={sr.color ?? colors[i % colors.length]}
+          strokeLinecap="round"
+          fill="transparent"
+          strokeWidth={sr.lineWidth ?? lineWidth}
+        />
+      ))}
+    </G>
+  );
+}
+
+export default Lines;
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx
new file mode 100644
index 0000000..f009090
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/XAxis.tsx
@@ -0,0 +1,111 @@
+import * as d3 from 'd3';
+import { G, Line, Text } from 'react-native-svg';
+
+import dateFormat from 'utils/dateFormat';
+import PaneBoundary from 'utils/PaneBoundary';
+
+import { TimeAxisOptions } from '../types';
+
+const DEFAULT_TICK_LENGTH = 6;
+
+type XAxisProps = TimeAxisOptions & {
+  scale: d3.ScaleTime<number, number, never>;
+  paneBoundary: PaneBoundary;
+};
+function XAxis({
+  scale,
+  paneBoundary,
+  x = 0,
+  y = paneBoundary.y1,
+
+  enabled = true,
+
+  lineColor = 'black',
+  lineWidth = 1,
+
+  showTicks = true,
+  ticks: _ticks,
+
+  tickLength = DEFAULT_TICK_LENGTH,
+  tickWidth = 1,
+  tickColor = 'black',
+
+  tickLabelSize,
+  tickLabelFont,
+  tickLabelWeight,
+  tickLabelColor = 'black',
+  tickLabelFormatter = dateFormat,
+
+  showGridLines = false,
+  gridLineWidth = 1,
+  gridLineColor = 'lightgray',
+}: XAxisProps) {
+  const range = scale.range();
+  const ticks = !_ticks
+    ? scale.ticks()
+    : typeof _ticks === 'function'
+    ? _ticks(scale)
+    : _ticks;
+
+  if (!enabled) {
+    return null;
+  }
+  return (
+    <G>
+      <Line
+        x1={range[0] + x}
+        x2={range[1] + x}
+        y1={y}
+        y2={y}
+        stroke={lineColor}
+        strokeWidth={lineWidth}
+      />
+
+      {showTicks && (
+        <>
+          {ticks.map(tick => (
+            <Line
+              key={`${tick}`}
+              x1={scale(tick)}
+              x2={scale(tick)}
+              y1={y}
+              y2={y + tickLength}
+              stroke={tickColor}
+              strokeWidth={tickWidth}
+            />
+          ))}
+          {ticks.map(tick => (
+            <Text
+              key={`${tick}`}
+              x={scale(tick)}
+              y={y + tickLength + 2}
+              fill={tickLabelColor}
+              fontSize={tickLabelSize}
+              fontFamily={tickLabelFont}
+              fontWeight={tickLabelWeight}
+              textAnchor="middle"
+              alignmentBaseline="hanging"
+            >
+              {tickLabelFormatter(tick)}
+            </Text>
+          ))}
+        </>
+      )}
+
+      {showGridLines &&
+        ticks.map(tick => (
+          <Line
+            key={`${tick}`}
+            x1={scale(tick)}
+            x2={scale(tick)}
+            y1={paneBoundary.y1}
+            y2={paneBoundary.y2}
+            stroke={gridLineColor}
+            strokeWidth={gridLineWidth}
+          />
+        ))}
+    </G>
+  );
+}
+
+export default XAxis;
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/YAxis.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/YAxis.tsx
new file mode 100644
index 0000000..832682e
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/YAxis.tsx
@@ -0,0 +1,108 @@
+import * as d3 from 'd3';
+import { G, Line, Text } from 'react-native-svg';
+
+import PaneBoundary from 'utils/PaneBoundary';
+
+import { LinearAxisOptions } from '../types';
+
+const DEFAULT_TICK_LENGTH = 6;
+
+type YAxisProps = LinearAxisOptions & {
+  scale: d3.ScaleLinear<number, number, never>;
+  paneBoundary: PaneBoundary;
+};
+function YAxis({
+  scale,
+  paneBoundary,
+  x = paneBoundary.x1,
+  y = 0,
+
+  enabled = true,
+
+  lineColor = 'black',
+  lineWidth = 1,
+
+  showTicks = true,
+  ticks: _ticks,
+  tickLength = DEFAULT_TICK_LENGTH,
+  tickWidth = 1,
+  tickColor = 'black',
+
+  tickLabelSize,
+  tickLabelFont,
+  tickLabelWeight,
+  tickLabelColor = 'black',
+  tickLabelFormatter = val => `${val}`,
+
+  showGridLines = true,
+  gridLineWidth = 1,
+  gridLineColor = 'lightgray',
+}: YAxisProps) {
+  const range = scale.range();
+  const ticks = !_ticks
+    ? scale.ticks()
+    : typeof _ticks === 'function'
+    ? _ticks(scale)
+    : _ticks;
+
+  if (!enabled) {
+    return null;
+  }
+  return (
+    <G>
+      <Line
+        x1={x}
+        x2={x}
+        y1={range[0] + y}
+        y2={range[1] + y}
+        stroke={lineColor}
+        strokeWidth={lineWidth}
+      />
+      {showTicks && (
+        <>
+          {ticks.map(tick => (
+            <Line
+              key={`${tick}`}
+              x1={x - tickLength}
+              x2={x}
+              y1={scale(tick)}
+              y2={scale(tick)}
+              stroke={tickColor}
+              strokeWidth={tickWidth}
+            />
+          ))}
+          {ticks.map(tick => (
+            <Text
+              key={`${tick}`}
+              x={x - tickLength - 2}
+              y={scale(tick)}
+              fill={tickLabelColor}
+              fontSize={tickLabelSize}
+              fontFamily={tickLabelFont}
+              fontWeight={tickLabelWeight}
+              textAnchor="end"
+              alignmentBaseline="middle"
+            >
+              {tickLabelFormatter(tick)}
+            </Text>
+          ))}
+        </>
+      )}
+
+      {showGridLines &&
+        ticks.map(tick => (
+          <Line
+            key={`${tick}`}
+            x1={paneBoundary.x1}
+            x2={paneBoundary.x2}
+            y1={scale(tick)}
+            y2={scale(tick)}
+            stroke={gridLineColor}
+            strokeWidth={gridLineWidth}
+          />
+        ))}
+    </G>
+  );
+}
+
+export default YAxis;
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx
new file mode 100644
index 0000000..b6f9925
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/LineChartBody/index.tsx
@@ -0,0 +1,45 @@
+import { Fragment } from 'react';
+
+import PaneBoundary from 'utils/PaneBoundary';
+
+import {
+  TimeSeries,
+  TimeAxisOptions,
+  LinearAxisOptions,
+  LinesOptions,
+} from '../types';
+import XAxis from './XAxis';
+import YAxis from './YAxis';
+import Lines from './Lines';
+
+type LineChartBodyProps = {
+  series: TimeSeries[];
+  xScale: d3.ScaleTime<number, number, never>;
+  yScale: d3.ScaleLinear<number, number, never>;
+  lineFunc: d3.Line<TimeSeries['data'][0]>;
+  paneBoundary: PaneBoundary;
+
+  xAxisOptions?: TimeAxisOptions;
+  yAxisOptions?: LinearAxisOptions;
+  linesOptions?: LinesOptions;
+};
+function LineChartBody({
+  series,
+  xScale,
+  yScale,
+  lineFunc,
+  paneBoundary,
+  xAxisOptions,
+  yAxisOptions,
+  linesOptions,
+}: LineChartBodyProps) {
+  return (
+    <Fragment>
+      <XAxis scale={xScale} paneBoundary={paneBoundary} {...xAxisOptions} />
+      <YAxis scale={yScale} paneBoundary={paneBoundary} {...yAxisOptions} />
+      <Lines series={series} lineFunc={lineFunc} {...linesOptions} />
+    </Fragment>
+  );
+}
+
+export default LineChartBody;
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/constants.ts b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/constants.ts
new file mode 100644
index 0000000..d6387e6
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/constants.ts
@@ -0,0 +1,2 @@
+export const DEFAULT_X_AXIS_HEIGHT = 35;
+export const DEFAULT_Y_AXIS_WIDTH = 50;
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/getLinearScale.ts b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/getLinearScale.ts
new file mode 100644
index 0000000..cb02f05
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/getLinearScale.ts
@@ -0,0 +1,32 @@
+import * as d3 from 'd3';
+import { TimeSeries } from './types';
+
+function getLinearScale(series: TimeSeries[], range: [number, number]) {
+  if (!series?.length) {
+    return null;
+  }
+  if (range[0] === 0 && range[1] === 0) {
+    return null;
+  }
+
+  const allData = series.reduce(
+    (acc, sr) => [...acc, ...sr.data],
+    [] as TimeSeries['data']
+  );
+  if (!allData.length) {
+    return null;
+  }
+
+  const domain = d3.extent(allData, dt => dt.value) as [number, number];
+
+  const offsetDelta = 0.2;
+  const offset = (domain[1] - domain[0]) * offsetDelta;
+  domain[0] -= offset;
+  domain[1] += offset;
+
+  const scale = d3.scaleLinear().domain(domain).range(range);
+
+  return scale;
+}
+
+export default getLinearScale;
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/getTimeScale.ts b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/getTimeScale.ts
new file mode 100644
index 0000000..75d9dca
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/getTimeScale.ts
@@ -0,0 +1,25 @@
+import * as d3 from 'd3';
+import { TimeSeries } from './types';
+
+function getTimeScale(
+  series: TimeSeries[] | undefined,
+  range: [number, number]
+) {
+  if (!series?.length) {
+    return null;
+  }
+  if (range[0] === 0 && range[1] === 0) {
+    return null;
+  }
+
+  const allData = series.reduce(
+    (acc, sr) => [...acc, ...sr.data],
+    [] as TimeSeries['data']
+  );
+  const domain = d3.extent(allData, dt => dt.date) as [Date, Date];
+  const scale = d3.scaleTime().domain(domain).range(range);
+
+  return scale;
+}
+
+export default getTimeScale;
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx
new file mode 100644
index 0000000..d9870f0
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/index.tsx
@@ -0,0 +1,108 @@
+import * as d3 from 'd3';
+import { useEffect } from 'react';
+import { Svg, SvgProps } from 'react-native-svg';
+import { useImmer } from 'use-immer';
+
+import PaneBoundary from 'utils/PaneBoundary';
+
+import {
+  TimeSeries,
+  TimeAxisOptions,
+  LinearAxisOptions,
+  LinesOptions,
+  PaneOptions,
+} from './types';
+import getTimeScale from './getTimeScale';
+import getLinearScale from './getLinearScale';
+import LineChartBody from './LineChartBody';
+import { DEFAULT_X_AXIS_HEIGHT, DEFAULT_Y_AXIS_WIDTH } from './constants';
+
+type LineChartProps = {
+  series: TimeSeries[];
+  width?: string | number;
+  height?: string | number;
+  xAxisOptions?: TimeAxisOptions;
+  yAxisOptions?: LinearAxisOptions;
+  linesOptions?: LinesOptions;
+  paneOptions?: PaneOptions;
+};
+function LineChart({
+  series,
+  width = '100%',
+  height = 200,
+  xAxisOptions,
+  yAxisOptions,
+  linesOptions,
+  paneOptions = {},
+}: LineChartProps) {
+  const [state, setState] = useImmer({
+    width: 0,
+    height: 0,
+    paneBoundary: new PaneBoundary({ x1: 0, x2: 0, y1: 0, y2: 0 }),
+  });
+
+  const { margin, marginTop, marginLeft, marginRight, marginBottom } =
+    paneOptions || {};
+
+  const updatePaneBoundary = (width?: number, height?: number) => {
+    setState(dr => {
+      if (width !== undefined) {
+        dr.width = Math.round(width);
+      }
+      if (height !== undefined) {
+        dr.height = Math.round(height);
+      }
+
+      dr.paneBoundary = new PaneBoundary({
+        x1: marginLeft ?? margin ?? DEFAULT_Y_AXIS_WIDTH,
+        x2: dr.width - (marginRight ?? margin ?? 10),
+        y1: dr.height - (marginBottom ?? margin ?? DEFAULT_X_AXIS_HEIGHT),
+        y2: marginTop ?? margin ?? 10,
+      });
+    });
+  };
+
+  useEffect(() => {
+    if (!state.width || !state.height) {
+      return;
+    }
+    updatePaneBoundary();
+  }, [margin, marginTop, marginLeft, marginRight, marginBottom]);
+
+  const onLayout: SvgProps['onLayout'] = evt => {
+    const { layout } = evt.nativeEvent;
+    updatePaneBoundary(layout.width, layout.height);
+  };
+
+  const xScale = getTimeScale(series, state.paneBoundary.xs);
+  const yScale = getLinearScale(series, state.paneBoundary.ys);
+  const lineFunc =
+    !xScale || !yScale
+      ? null
+      : d3
+          .line<TimeSeries['data'][0]>()
+          .defined(dt => !isNaN(dt.value))
+          .x(dt => xScale(dt.date))
+          .y(dt => yScale(dt.value));
+
+  const loaded = xScale !== null && yScale !== null && lineFunc !== null;
+
+  return (
+    <Svg width={width} height={height} onLayout={onLayout}>
+      {loaded && (
+        <LineChartBody
+          series={series}
+          xScale={xScale}
+          yScale={yScale}
+          lineFunc={lineFunc}
+          paneBoundary={state.paneBoundary}
+          xAxisOptions={xAxisOptions}
+          yAxisOptions={yAxisOptions}
+          linesOptions={linesOptions}
+        />
+      )}
+    </Svg>
+  );
+}
+
+export default LineChart;
diff --git a/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts
new file mode 100644
index 0000000..2daf2e7
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/comps/LineChart/types.ts
@@ -0,0 +1,57 @@
+import { ScaleLinear, ScaleTime } from 'd3';
+import { FontWeight } from 'react-native-svg';
+
+export type TimeSeriesDatum = { date: Date; value: number };
+export type TimeSeries = {
+  color?: string;
+  lineWidth?: number;
+  data: TimeSeriesDatum[];
+};
+
+export type AxisOptions<Scale, Value> = {
+  enabled?: boolean;
+
+  x?: number;
+  y?: number;
+
+  lineColor?: string;
+  lineWidth?: number;
+
+  showTicks?: boolean;
+  ticks?: Value[] | ((scale: Scale) => Value[]);
+
+  tickLength?: number;
+  tickWidth?: number;
+  tickColor?: string;
+
+  tickLabelSize?: number;
+  tickLabelFont?: string;
+  tickLabelWeight?: FontWeight;
+  tickLabelColor?: string;
+  tickLabelFormatter?: (value: Value) => string;
+
+  showGridLines?: boolean;
+  gridLineWidth?: number;
+  gridLineColor?: string;
+};
+export type TimeAxisOptions = AxisOptions<
+  ScaleTime<number, number, never>,
+  Date
+>;
+export type LinearAxisOptions = AxisOptions<
+  ScaleLinear<number, number, never>,
+  number
+>;
+
+export type LinesOptions = {
+  colors?: string[];
+  lineWidth?: number;
+};
+
+export type PaneOptions = {
+  margin?: number;
+  marginTop?: number;
+  marginLeft?: number;
+  marginRight?: number;
+  marginBottom?: number;
+};
diff --git a/src/screens/C02LineChartWithOptionsScreen/dummySeries.ts b/src/screens/C02LineChartWithOptionsScreen/dummySeries.ts
new file mode 100644
index 0000000..6074a1e
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/dummySeries.ts
@@ -0,0 +1,52 @@
+import { TimeSeries } from './comps/LineChart/types';
+
+const dummyValues = [
+  [
+    990810, 921890, 1080000, 857030, 865140, 780000, 978650, 1136757, 1258378,
+    1002973, 1286757, 1477297, 1671892, 1469189, 1440811, 1400270, 1538108,
+    1371892, 1363784, 1542162, 1497568, 1570541, 1631351, 1542162, 1667838,
+    1757027, 1813784, 1854324, 1931352, 1732703, 1744865, 1680000, 1643514,
+    1558378, 1400270, 1602973, 1611081, 1546216, 1615135, 1651622, 1700270,
+    1838108, 1915136, 1980000, 1793514, 1740811, 1748919, 1882703, 1821892,
+    1728649, 1761081, 1631351, 1594865, 1448919, 1388108, 1448919,
+  ],
+  [
+    1631351, 1546216, 1440811, 1732703, 1757027, 1980000, 1915136, 1748919,
+    1286757, 1728649, 1667838, 1793514, 1002973, 1882703, 1136757, 1761081,
+    1615135, 1671892, 1388108, 1631351, 780000, 1542162, 1570541, 1448919,
+    1813784, 1538108, 990810, 978650, 921890, 1680000, 1821892, 1080000,
+    1558378, 1448919, 1363784, 857030, 1838108, 1651622, 1602973, 1611081,
+    1400270, 1700270, 1477297, 1594865, 1744865, 1931352, 1258378, 1854324,
+    1643514, 1497568, 1400270, 1469189, 865140, 1371892, 1542162, 1740811,
+  ],
+  [
+    780000, 857030, 865140, 921890, 978650, 990810, 1002973, 1080000, 1136757,
+    1258378, 1286757, 1363784, 1371892, 1388108, 1400270, 1400270, 1440811,
+    1448919, 1448919, 1469189, 1477297, 1497568, 1538108, 1542162, 1542162,
+    1546216, 1558378, 1570541, 1594865, 1602973, 1611081, 1615135, 1631351,
+    1631351, 1643514, 1651622, 1667838, 1671892, 1680000, 1700270, 1728649,
+    1732703, 1740811, 1744865, 1748919, 1757027, 1761081, 1793514, 1813784,
+    1821892, 1838108, 1854324, 1882703, 1915136, 1931352, 1980000,
+  ],
+  [
+    1980000, 1931352, 1915136, 1882703, 1854324, 1838108, 1821892, 1813784,
+    1793514, 1761081, 1757027, 1748919, 1744865, 1740811, 1732703, 1728649,
+    1700270, 1680000, 1671892, 1667838, 1651622, 1643514, 1631351, 1631351,
+    1615135, 1611081, 1602973, 1594865, 1570541, 1558378, 1546216, 1542162,
+    1542162, 1538108, 1497568, 1477297, 1469189, 1448919, 1448919, 1440811,
+    1400270, 1400270, 1388108, 1371892, 1363784, 1286757, 1258378, 1136757,
+    1080000, 1002973, 990810, 978650, 921890, 865140, 857030, 780000,
+  ],
+];
+
+const dummyDate = new Date('2022-01-01');
+
+const dummySeries: TimeSeries[] = dummyValues.map(values => ({
+  data: values.map((value, i) => {
+    const date = new Date(dummyDate);
+    date.setDate(date.getDate() + i);
+    return { date, value: Math.floor(value / 1000) };
+  }),
+}));
+
+export default dummySeries;
diff --git a/src/screens/C02LineChartWithOptionsScreen/index.tsx b/src/screens/C02LineChartWithOptionsScreen/index.tsx
new file mode 100644
index 0000000..2be8914
--- /dev/null
+++ b/src/screens/C02LineChartWithOptionsScreen/index.tsx
@@ -0,0 +1,122 @@
+import { ScrollView, StyleSheet, View } from 'react-native';
+
+import ScreenContainer from 'components/ScreenContainer';
+import Text from 'components/Text';
+
+import LineChart from './comps/LineChart';
+import dummySeries from './dummySeries';
+
+const dummySeriesWithCustom = [...dummySeries.map(sr => ({ ...sr }))];
+dummySeriesWithCustom[0].color = 'black';
+dummySeriesWithCustom[0].lineWidth = 4;
+
+function C02LineChartWithOptionsScreen() {
+  return (
+    <ScreenContainer>
+      <View style={styles.header}>
+        <Text style={styles.title}>C02LineChartWithOptionsScreen</Text>
+        <Text style={styles.desc}>- 라인 차트 옵션 기능 구현</Text>
+      </View>
+
+      <ScrollView>
+        <Text style={styles.subtitle}>옵션 적용 안 함</Text>
+        <LineChart series={dummySeries} width="100%" height={200} />
+
+        <Text style={styles.subtitle}>X 축 옵션 적용</Text>
+        <LineChart
+          series={dummySeries}
+          width="100%"
+          height={200}
+          xAxisOptions={{
+            enabled: true,
+            lineColor: 'red',
+            lineWidth: 2,
+            tickLength: 15,
+            tickWidth: 3,
+            tickColor: 'green',
+            tickLabelSize: 20,
+            tickLabelWeight: 100,
+            tickLabelFormatter: date =>
+              `${date.getMonth() + 1}.${date.getDate()}`,
+          }}
+        />
+
+        <Text style={styles.subtitle}>Y 축 옵션 적용</Text>
+        <LineChart
+          series={dummySeries}
+          width="100%"
+          height={200}
+          yAxisOptions={{
+            enabled: true,
+            lineColor: 'brown',
+            lineWidth: 3,
+            tickLength: 2,
+            tickWidth: 3,
+            tickColor: 'yellow',
+            tickLabelSize: 8,
+            tickLabelWeight: 700,
+            tickLabelFormatter: val => val.toLocaleString(),
+          }}
+        />
+
+        <Text style={styles.subtitle}>그리드라인 옵션 적용</Text>
+        <LineChart
+          series={dummySeries}
+          width="100%"
+          height={200}
+          xAxisOptions={{
+            showGridLines: true,
+            gridLineWidth: 2,
+            gridLineColor: 'rgba(0, 0, 0, 0.2)',
+          }}
+          yAxisOptions={{
+            showGridLines: false,
+          }}
+        />
+
+        <Text style={styles.subtitle}>라인 옵션 적용</Text>
+        <LineChart
+          series={dummySeries}
+          width="100%"
+          height={200}
+          xAxisOptions={{ showTicks: false, showGridLines: true }}
+          yAxisOptions={{ showTicks: false, showGridLines: true }}
+          paneOptions={{ margin: 4 }}
+          linesOptions={{
+            colors: ['red', 'orange', 'green', 'blue'],
+            lineWidth: 2,
+          }}
+        />
+
+        <Text style={styles.subtitle}>series 에 직접 라인 옵션 적용</Text>
+        <LineChart
+          series={dummySeriesWithCustom}
+          width="100%"
+          height={200}
+          xAxisOptions={{ showTicks: false, showGridLines: true }}
+          yAxisOptions={{ showTicks: false, showGridLines: true }}
+          paneOptions={{ margin: 4 }}
+          linesOptions={{
+            colors: ['red', 'orange', 'green', 'blue'],
+            lineWidth: 2,
+          }}
+        />
+      </ScrollView>
+    </ScreenContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    padding: 16,
+  },
+  title: {
+    fontSize: 20,
+  },
+  desc: {},
+  subtitle: {
+    marginTop: 16,
+    fontSize: 16,
+  },
+});
+export default C02LineChartWithOptionsScreen;
diff --git a/src/screens/HomeScreen/index.tsx b/src/screens/HomeScreen/index.tsx
index b4fbd8b..f9d8a01 100644
--- a/src/screens/HomeScreen/index.tsx
+++ b/src/screens/HomeScreen/index.tsx
@@ -1,8 +1,19 @@
+import { Fragment } from 'react';
 import { StyleSheet, View } from 'react-native';
-import Button from '../../components/Button';
-import ScreenContainer from '../../components/ScreenContainer';
-import Text from '../../components/Text';
-import useNavigation from '../../navigation/useNavigation';
+
+import Button from 'components/Button';
+import ScreenContainer from 'components/ScreenContainer';
+import Text from 'components/Text';
+import useNavigation from 'navigation/useNavigation';
+import { RootStackParamsList } from 'navigation/types';
+
+const buttons: { title: string; screenName: keyof RootStackParamsList }[] = [
+  { title: 'C01 - 라인차트 기본 기능 구현', screenName: 'C01LineChart' },
+  {
+    title: 'C02 - 라인차트 옵션 기능 구현',
+    screenName: 'C02LineChartWithOptions',
+  },
+];
 
 function HomeScreen() {
   const nav = useNavigation();
@@ -11,10 +22,15 @@ function HomeScreen() {
       <View style={styles.header}>
         <Text>화면 목록</Text>
       </View>
-      <Button
-        title="C01 - 라인차트 기본 기능 구현"
-        onPress={() => nav.navigate('C01LineChart')}
-      />
+      {buttons.map((btn, i) => (
+        <Fragment key={i}>
+          {i !== 0 && <View style={styles.separator} />}
+          <Button
+            title={btn.title}
+            onPress={() => nav.navigate(btn.screenName)}
+          />
+        </Fragment>
+      ))}
     </ScreenContainer>
   );
 }
@@ -23,6 +39,9 @@ const styles = StyleSheet.create({
   header: {
     padding: 16,
   },
+  separator: {
+    height: 8,
+  },
 });
 
 export default HomeScreen;
diff --git a/tsconfig.json b/tsconfig.json
index 45a6c70..e00fb9c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,3 +1,12 @@
 {
-  "extends": "@tsconfig/react-native/tsconfig.json"
+  "extends": "@tsconfig/react-native/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "components/*": ["src/components/*"],
+      "navigation/*": ["src/navigation/*"],
+      "screens/*": ["src/screens/*"],
+      "utils/*": ["src/utils/*"]
+    }
+  }
 }
diff --git a/yarn.lock b/yarn.lock
index 4b7dd9c..eac1eb1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2431,6 +2431,17 @@ babel-plugin-jest-hoist@^29.5.0:
     "@types/babel__core" "^7.1.14"
     "@types/babel__traverse" "^7.0.6"
 
+babel-plugin-module-resolver@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-5.0.0.tgz#2b7fc176bd55da25f516abf96015617b4f70fc73"
+  integrity sha512-g0u+/ChLSJ5+PzYwLwP8Rp8Rcfowz58TJNCe+L/ui4rpzE/mg//JVX0EWBUYoxaextqnwuGHzfGp2hh0PPV25Q==
+  dependencies:
+    find-babel-config "^2.0.0"
+    glob "^8.0.3"
+    pkg-up "^3.1.0"
+    reselect "^4.1.7"
+    resolve "^1.22.1"
+
 babel-plugin-polyfill-corejs2@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz#5d1bd3836d0a19e1b84bbf2d9640ccb6f951c122"
@@ -2564,6 +2575,13 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
 braces@^2.3.1:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
@@ -3933,6 +3951,14 @@ finalhandler@1.1.2:
     statuses "~1.5.0"
     unpipe "~1.0.0"
 
+find-babel-config@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/find-babel-config/-/find-babel-config-2.0.0.tgz#a8216f825415a839d0f23f4d18338a1cc966f701"
+  integrity sha512-dOKT7jvF3hGzlW60Gc3ONox/0rRZ/tz7WCil0bqA1In/3I8f1BctpXahRnEKDySZqci7u+dqq93sZST9fOJpFw==
+  dependencies:
+    json5 "^2.1.1"
+    path-exists "^4.0.0"
+
 find-cache-dir@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
@@ -4126,6 +4152,17 @@ glob@^7.1.3, glob@^7.1.4:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^8.0.3:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e"
+  integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^5.0.1"
+    once "^1.3.0"
+
 globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
@@ -4439,6 +4476,13 @@ is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
 
+is-core-module@^2.11.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.12.0.tgz#36ad62f6f73c8253fd6472517a12483cf03e7ec4"
+  integrity sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==
+  dependencies:
+    has "^1.0.3"
+
 is-core-module@^2.9.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
@@ -5214,7 +5258,7 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
-json5@^2.2.2:
+json5@^2.1.1, json5@^2.2.2:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -5753,6 +5797,13 @@ minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatc
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^5.0.1:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
+  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist@^1.2.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
@@ -6209,6 +6260,13 @@ pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
+pkg-up@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
+  integrity sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==
+  dependencies:
+    find-up "^3.0.0"
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -6567,6 +6625,11 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
+reselect@^4.1.7:
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.7.tgz#56480d9ff3d3188970ee2b76527bd94a95567a42"
+  integrity sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A==
+
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@@ -6608,6 +6671,15 @@ resolve@^1.14.2, resolve@^1.20.0:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.22.1:
+  version "1.22.2"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.2.tgz#0ed0943d4e301867955766c9f3e1ae6d01c6845f"
+  integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==
+  dependencies:
+    is-core-module "^2.11.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^2.0.0-next.4:
   version "2.0.0-next.4"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"