diff --git a/src/context/color.ts b/src/context/color.ts
new file mode 100644
index 0000000..ea1889e
--- /dev/null
+++ b/src/context/color.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const selectedColorIdState = atom<number>({
+  key: 'selectedColorIdState',
+  default: 0,
+});
diff --git a/src/context/font.ts b/src/context/font.ts
new file mode 100644
index 0000000..a3268a2
--- /dev/null
+++ b/src/context/font.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const selectedFontIdState = atom<number>({
+  key: 'selectedFontIdState',
+  default: 0,
+});
diff --git a/src/hooks/useCustomData.ts b/src/hooks/useCustomData.ts
new file mode 100644
index 0000000..e595613
--- /dev/null
+++ b/src/hooks/useCustomData.ts
@@ -0,0 +1,41 @@
+import { Accessory } from '@api/accessory';
+import { AccessoryData } from '@api/accessory.types';
+import { Color } from '@api/color';
+import { ColorData } from '@api/color.types';
+import { Font } from '@api/font';
+import { FontData } from '@api/font.types';
+import { Pattern } from '@api/pattern';
+import { PatternData } from '@api/pattern.types';
+import { Wheel } from '@api/wheel';
+import { WheelData } from '@api/wheel.types';
+import { useEffect, useState } from 'react';
+
+function useCustomData() {
+  const [pattern, setPattern] = useState<PatternData[]>([]);
+  const [wheel, setWheel] = useState<WheelData[]>([]);
+  const [font, setFont] = useState<FontData[]>([]);
+  const [color, setColor] = useState<ColorData[]>([]);
+  const [accessory, setAccessory] = useState<AccessoryData[]>([]);
+
+  useEffect(() => {
+    const getData = async () => {
+      const [patterns, wheels, fonts, colors, accessories] = await Promise.all([
+        Pattern.list(),
+        Wheel.list(),
+        Font.list(),
+        Color.list(),
+        Accessory.list(),
+      ]);
+      setPattern(patterns);
+      setWheel(wheels);
+      setFont(fonts);
+      setColor(colors);
+      setAccessory(accessories);
+    };
+    getData();
+  }, []);
+
+  return { pattern, wheel, font, color, accessory };
+}
+
+export default useCustomData;
diff --git a/src/pages/production/button-group/index.style.tsx b/src/pages/production/button-group/index.style.tsx
index 27b8a66..6cafe4b 100644
--- a/src/pages/production/button-group/index.style.tsx
+++ b/src/pages/production/button-group/index.style.tsx
@@ -1,6 +1,10 @@
 import styled from 'styled-components';
 
-export const Container = styled.div`
+interface ContainerProps {
+  position?: 'default' | 'absolute';
+}
+
+export const Container = styled.div<ContainerProps>`
   background-color: #cdd1d9;
   width: 100%;
   height: 100%;
@@ -8,4 +12,8 @@ export const Container = styled.div`
   justify-content: center;
   align-items: center;
   gap: 5px;
+
+  ${({ position }) =>
+    position === 'absolute' &&
+    'position: absolute; bottom: 0; right: 0; height: 50px; background-color: #ffffff; width: 22%; margin: 30px;'}
 `;
diff --git a/src/pages/production/button-group/index.tsx b/src/pages/production/button-group/index.tsx
index c0a0526..209ee20 100644
--- a/src/pages/production/button-group/index.tsx
+++ b/src/pages/production/button-group/index.tsx
@@ -4,13 +4,14 @@ import { useNavigate } from 'react-router';
 
 interface ButtonGroupProps {
   step: number;
+  position?: 'default' | 'absolute';
 }
 
 function ButtonGroup(props: ButtonGroupProps) {
   const navigate = useNavigate();
 
   return (
-    <Container>
+    <Container className="button_group" position={props.position}>
       {props.step > 0 ? (
         <Button text="이전" inversion onClick={() => navigate(`/production?step=${props.step - 1}`)} />
       ) : (
@@ -19,7 +20,7 @@ function ButtonGroup(props: ButtonGroupProps) {
       <Button
         text={props.step < 3 ? '다음 단계로' : '결과 확인하기'}
         onClick={() => {
-          if (props.step < 1) navigate(`/production?step=${props.step + 1}`);
+          if (props.step < 2) navigate(`/production?step=${props.step + 1}`);
         }}
       />
     </Container>
diff --git a/src/pages/production/content/index.style.tsx b/src/pages/production/content/index.style.tsx
index b718999..8fef6b6 100644
--- a/src/pages/production/content/index.style.tsx
+++ b/src/pages/production/content/index.style.tsx
@@ -1,8 +1,13 @@
 import styled from 'styled-components';
 
-export const Container = styled.div`
+interface ContainerProps {
+  direction?: 'row' | 'column';
+}
+
+export const Container = styled.div<ContainerProps>`
   width: 100%;
   display: flex;
+  flex-direction: ${({ direction }) => direction || 'row'};
   justify-content: space-around;
   align-items: center;
   gap: 50px;
diff --git a/src/pages/production/content/index.tsx b/src/pages/production/content/index.tsx
index ec3fe2e..34125e4 100644
--- a/src/pages/production/content/index.tsx
+++ b/src/pages/production/content/index.tsx
@@ -1,23 +1,16 @@
 import Preview from '@pages/production/content/preview';
 import { Container } from './index.style';
 import Summary from '@pages/production/content/summary';
-import { PatternData } from '@api/pattern.types';
-import { WheelData } from '@api/wheel.types';
-import { AccessoryData } from '@api/accessory.types';
 
 interface ContentProps {
-  data: PatternData | WheelData | AccessoryData;
+  direction?: 'row' | 'column';
 }
 
 function Content(props: ContentProps) {
-  if (!props.data) {
-    return <div>Loading...</div>;
-  }
-
   return (
-    <Container className="content">
+    <Container className="content" direction={props.direction}>
       <Preview />
-      <Summary data={props.data} />
+      <Summary />
     </Container>
   );
 }
diff --git a/src/pages/production/content/summary/index.style.tsx b/src/pages/production/content/summary/index.style.tsx
index 7617d56..eac797a 100644
--- a/src/pages/production/content/summary/index.style.tsx
+++ b/src/pages/production/content/summary/index.style.tsx
@@ -30,4 +30,10 @@ export const Container = styled.div`
   height: 450px;
   border-radius: 50px;
   background-color: #f1f6f9;
+  .font_example {
+    border: 1px solid #000000;
+    background-color: gray;
+    font-size: 70px;
+    font-weight: 600;
+  }
 `;
diff --git a/src/pages/production/content/summary/index.tsx b/src/pages/production/content/summary/index.tsx
index 3240fb1..b16f76e 100644
--- a/src/pages/production/content/summary/index.tsx
+++ b/src/pages/production/content/summary/index.tsx
@@ -1,29 +1,77 @@
+import useCustomData from '@hooks/useCustomData';
 import { Container, Explanation, Name, Price } from './index.style';
-import { PatternData } from '@api/pattern.types';
-import { WheelData } from '@api/wheel.types';
-import { AccessoryData } from '@api/accessory.types';
-
-interface SummaryProps {
-  data: PatternData | WheelData | AccessoryData;
-}
+import { useSearchParams } from 'react-router-dom';
+import { selectedPatternIdState } from '@context/pattern';
+import { useRecoilState } from 'recoil';
+import { selectedWheelIdState } from '@context/wheel';
+import { selectedFontIdState } from '@context/font';
+import { selectedColorIdState } from '@context/color';
 
 function formatCurrency(price: number) {
   return '+ ' + price.toLocaleString('ko-KR') + '원';
 }
 
-function Summary(props: SummaryProps) {
-  return (
-    <Container className="summary">
-      <div className="top">
-        <Name>{props.data.name}</Name>
-        <Price>{formatCurrency(props.data.price)}</Price>
-      </div>
-      <hr className="sep" />
-      <Explanation>
-        <p>{props.data.explanation}</p>
-      </Explanation>
-    </Container>
-  );
+function Summary() {
+  const [searchParams] = useSearchParams();
+  const step: number = Number(searchParams.get('step'));
+  const { pattern, wheel, font, color, accessory } = useCustomData();
+  const [selectedPattern] = useRecoilState(selectedPatternIdState);
+  const [selectedWheel] = useRecoilState(selectedWheelIdState);
+  const [selectedFont] = useRecoilState(selectedFontIdState);
+  const [selectedColor] = useRecoilState(selectedColorIdState);
+
+  if (!pattern.length || !wheel.length || !font.length || !color.length || !accessory.length) {
+    return <div>Loading...</div>;
+  }
+
+  switch (step) {
+    case 0:
+      return (
+        <Container className="summary">
+          <div className="top">
+            <Name>{pattern[selectedPattern].name}</Name>
+            <Price>{formatCurrency(pattern[selectedPattern].price)}</Price>
+          </div>
+          <hr className="sep" />
+          <Explanation>
+            <p>{pattern[selectedPattern].explanation}</p>
+          </Explanation>
+        </Container>
+      );
+    case 1:
+      return (
+        <Container className="summary">
+          <div className="top">
+            <Name>{wheel[selectedWheel].name}</Name>
+            <Price>{formatCurrency(wheel[selectedWheel].price)}</Price>
+          </div>
+          <hr className="sep" />
+          <Explanation>
+            <p>{wheel[selectedWheel].explanation}</p>
+          </Explanation>
+        </Container>
+      );
+    case 2:
+      return (
+        <Container className="summary">
+          <div className="top">
+            <Name>{`${font[selectedFont].name}/${color[selectedColor].name}`}</Name>
+            <Price>{formatCurrency(font[selectedFont].price)}</Price>
+          </div>
+          <hr className="sep" />
+          <Explanation>
+            <p
+              className="font_example"
+              style={{ color: color[selectedColor].name, fontFamily: font[selectedFont].name }}
+            >
+              Outfit Of Tire
+            </p>
+          </Explanation>
+        </Container>
+      );
+    default:
+      return <div>Error...</div>;
+  }
 }
 
 export default Summary;
diff --git a/src/pages/production/index.style.tsx b/src/pages/production/index.style.tsx
index 70ee997..67363b3 100644
--- a/src/pages/production/index.style.tsx
+++ b/src/pages/production/index.style.tsx
@@ -4,12 +4,30 @@ export const Container = styled.div`
   height: 100vh;
   display: flex;
   flex-direction: column;
-  .content {
-    flex-grow: 1;
-  }
-  .footer {
+
+  .content_cntr {
+    height: 100vh;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
+    .content {
+      flex-grow: 1;
+    }
+    .footer {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .side_cntr {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 50px;
+      }
+    }
+  }
+  .row {
+    flex-direction: row;
   }
 `;
diff --git a/src/pages/production/index.tsx b/src/pages/production/index.tsx
index 6490654..4b33303 100644
--- a/src/pages/production/index.tsx
+++ b/src/pages/production/index.tsx
@@ -1,72 +1,40 @@
 import Header from '@components/header';
 import { Container } from './index.style';
-import { useEffect, useState } from 'react';
-import { PatternData } from '@api/pattern.types';
-import { Pattern } from '@api/pattern';
 import TabMenu from './tab-menu';
 import OptionSelector from './option-selector';
-import { selectedPatternIdState } from '@context/pattern';
 import Content from '@pages/production/content';
-import { useRecoilState } from 'recoil';
 import ButtonGroup from './button-group';
 import { useSearchParams } from 'react-router-dom';
-import { WheelData } from '@api/wheel.types';
-import { FontData } from '@api/font.types';
-import { ColorData } from '@api/color.types';
-import { AccessoryData } from '@api/accessory.types';
-import { Wheel } from '@api/wheel';
-import { Font } from '@api/font';
-import { Color } from '@api/color';
-import { Accessory } from '@api/accessory';
-import { selectedWheelIdState } from '@context/wheel';
 
 function CustomPattern() {
   const [searchParams] = useSearchParams();
-  const [patterns, setPatterns] = useState<PatternData[]>([]);
-  const [wheels, setWheels] = useState<WheelData[]>([]);
-  const [fonts, setFonts] = useState<FontData[]>([]);
-  const [colors, setColors] = useState<ColorData[]>([]);
-  const [accessories, setAccessories] = useState<AccessoryData[]>([]);
-  const [selectedPattern] = useRecoilState(selectedPatternIdState);
-  const [selectedWheel] = useRecoilState(selectedWheelIdState);
   const step: number = Number(searchParams.get('step'));
 
   if (step < 0 || step > 3) {
     return <div>올바르지 않은 접근입니다.</div>;
   }
 
-  useEffect(() => {
-    const getData = async () => {
-      const [patterns, wheels, fonts, colors, accessories] = await Promise.all([
-        Pattern.list(),
-        Wheel.list(),
-        Font.list(),
-        Color.list(),
-        Accessory.list(),
-      ]);
-      setPatterns(patterns);
-      setWheels(wheels);
-      setFonts(fonts);
-      setColors(colors);
-      setAccessories(accessories);
-    };
-    getData();
-  }, []);
-
   return (
     <>
       <Container>
         <Header />
         <TabMenu step={step} />
-        {step === 0 && <Content data={patterns[selectedPattern]} />}
-        {step === 1 && <Content data={wheels[selectedWheel]} />}
-        <div className="footer">
-          {step === 0 && <OptionSelector type="square" data={patterns} />}
-          {step === 1 && <OptionSelector type="square" data={wheels} />}
-          {step === 2 && <OptionSelector type="circle" data={fonts} />}
-          {step === 2 && <OptionSelector type="circle" data={colors} />}
-          {step === 3 && <OptionSelector type="square" data={accessories} />}
-          <ButtonGroup step={step} />
+        <div className={`content_cntr ${step === 2 && 'row'}`}>
+          {step !== 2 && <Content direction="row" />}
+          {step === 2 && <Content direction="column" />}
+          <div className="footer">
+            {step === 0 && <OptionSelector shape="square" data={'pattern'} />}
+            {step === 1 && <OptionSelector shape="square" data={'wheel'} />}
+            {step === 2 && (
+              <div className="side_cntr">
+                <OptionSelector shape="circle" data={'font'} />
+                <OptionSelector shape="circle" data={'color'} />
+                <div>&nbsp;</div>
+              </div>
+            )}
+            {step === 3 && <OptionSelector shape="square" data={'accessory'} />}
+            {step === 2 ? <ButtonGroup step={step} position="absolute" /> : <ButtonGroup step={step} />}
+          </div>
         </div>
       </Container>
     </>
diff --git a/src/pages/production/option-selector/index.style.tsx b/src/pages/production/option-selector/index.style.tsx
index e039c3e..0ae787f 100644
--- a/src/pages/production/option-selector/index.style.tsx
+++ b/src/pages/production/option-selector/index.style.tsx
@@ -5,12 +5,23 @@ interface ContainerProps {
 }
 
 export const Container = styled.div<ContainerProps>`
-  height: 230px;
-  background-color: #cdd1d9;
   display: flex;
+  justify-content: center;
+  flex-direction: column;
+  height: ${(props) => {
+    if (props.type === 'circle') {
+      return '300px';
+    } else {
+      return '230px';
+    }
+  }};
+  background-color: #cdd1d9;
   align-items: center;
-  gap: 50px;
-  padding-left: 50px;
+  gap: 10px;
+  padding: 0 50px;
+  margin-right: ${(props) => {
+    return props.type === 'circle' ? '50px' : '0px';
+  }};
   border-radius: ${(props) => {
     if (props.type === 'circle') {
       return '25px';
@@ -18,4 +29,24 @@ export const Container = styled.div<ContainerProps>`
       return 'none';
     }
   }};
+  .item_group {
+    text-align: left;
+    display: flex;
+    flex-direction: row;
+    gap: 50px;
+  }
+  .divider {
+    width: 100%;
+    height: 1px;
+    background-color: black;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+`;
+
+export const Title = styled.div`
+  width: 100%;
+  text-align: left;
+  font-size: 30px;
+  font-weight: 600;
 `;
diff --git a/src/pages/production/option-selector/index.tsx b/src/pages/production/option-selector/index.tsx
index 4e51951..e15c5cc 100644
--- a/src/pages/production/option-selector/index.tsx
+++ b/src/pages/production/option-selector/index.tsx
@@ -1,47 +1,73 @@
-import { AccessoryData } from '@api/accessory.types';
-import { ColorData } from '@api/color.types';
-import { FontData } from '@api/font.types';
-import { PatternData } from '@api/pattern.types';
-import { WheelData } from '@api/wheel.types';
-import { Container } from './index.style';
+import { Container, Title } from './index.style';
 import Item from './item';
 import { useRecoilState } from 'recoil';
 import { selectedPatternIdState } from '@context/pattern';
-import { useSearchParams } from 'react-router-dom';
 import { selectedWheelIdState } from '@context/wheel';
+import useCustomData from 'hooks/useCustomData';
+import { selectedFontIdState } from '@context/font';
+import { selectedColorIdState } from '@context/color';
 
 interface OptionSelectorProps {
-  type: 'square' | 'circle';
+  shape: 'square' | 'circle';
   name?: string;
-  data: PatternData[] | WheelData[] | FontData[] | AccessoryData[] | ColorData[];
+  data: 'pattern' | 'wheel' | 'font' | 'color' | 'accessory';
 }
 
 function OptionSelector(props: OptionSelectorProps) {
-  const [searchParams] = useSearchParams();
   const [, setSelectedPattern] = useRecoilState(selectedPatternIdState);
   const [, setSelectedWheel] = useRecoilState(selectedWheelIdState);
-  const step: number = Number(searchParams.get('step'));
+  const [, setSelectedFont] = useRecoilState(selectedFontIdState);
+  const [, setSelectedColor] = useRecoilState(selectedColorIdState);
+  const data = getData(props.data);
 
   return (
-    <Container className="option_selector" type={props.type}>
-      {props.data.map((item, index) => (
-        <Item
-          id={index}
-          key={index}
-          name={item.name}
-          imageSrc={item.imageUrl}
-          onClick={() => {
-            {
-              step === 0 && setSelectedPattern(index);
-            }
-            {
-              step === 1 && setSelectedWheel(index);
-            }
-          }}
-        />
-      ))}
+    <Container className="option_selector" type={props.shape}>
+      {props.data === 'font' ? <Title className="title">폰트</Title> : null}
+      {props.data === 'color' ? <Title className="title">색상</Title> : null}
+      {(props.data === 'font' || props.data === 'color') && <div className="divider" />}
+      <div className="item_group">
+        {data.map((item, index) => (
+          <Item
+            id={index}
+            data={props.data}
+            key={index}
+            name={item.name}
+            imageSrc={item.imageUrl}
+            onClick={() => {
+              {
+                props.data === 'pattern' && setSelectedPattern(index);
+              }
+              {
+                props.data === 'wheel' && setSelectedWheel(index);
+              }
+              {
+                props.data === 'font' && setSelectedFont(index);
+              }
+              {
+                props.data === 'color' && setSelectedColor(index);
+              }
+            }}
+          />
+        ))}
+      </div>
     </Container>
   );
 }
 
+function getData(type: 'pattern' | 'wheel' | 'font' | 'color' | 'accessory') {
+  const { pattern, wheel, font, color, accessory } = useCustomData();
+  switch (type) {
+    case 'pattern':
+      return pattern;
+    case 'wheel':
+      return wheel;
+    case 'font':
+      return font;
+    case 'color':
+      return color;
+    case 'accessory':
+      return accessory;
+  }
+}
+
 export default OptionSelector;
diff --git a/src/pages/production/option-selector/item/index.style.tsx b/src/pages/production/option-selector/item/index.style.tsx
index e3ab134..56a6e90 100644
--- a/src/pages/production/option-selector/item/index.style.tsx
+++ b/src/pages/production/option-selector/item/index.style.tsx
@@ -1,5 +1,9 @@
 import styled from 'styled-components';
 
+interface ItemImageProps {
+  type?: 'square' | 'circle';
+}
+
 export const Container = styled.div`
   background-color: rgba(255, 255, 255, 0);
   cursor: pointer;
@@ -8,10 +12,40 @@ export const Container = styled.div`
   }
 `;
 
-export const ItemImage = styled.img`
-  border: 1px solid #000000;
-  width: 120px;
-  height: 120px;
+export const ItemImage = styled.img<ItemImageProps>`
+  border: ${(props) => {
+    if (props.type === 'circle') {
+      return 'none';
+    } else {
+      return '1px solid #000000;';
+    }
+  }};
+  border-radius: ${(props) => {
+    if (props.type === 'circle') {
+      return '50%';
+    } else {
+      return 'none;';
+    }
+  }};
+  width: ${(props) => {
+    if (props.type === 'circle') {
+      return '80px';
+    } else {
+      return '120px;';
+    }
+  }};
+  height: ${(props) => {
+    if (props.type === 'circle') {
+      return '80px';
+    } else {
+      return '120px;';
+    }
+  }};
+  margin: ${(props) => {
+    if (props.type === 'circle') {
+      return '10px 18px';
+    }
+  }};
 `;
 
 export const ItemName = styled.p`
diff --git a/src/pages/production/option-selector/item/index.tsx b/src/pages/production/option-selector/item/index.tsx
index 88001e6..8e22cd0 100644
--- a/src/pages/production/option-selector/item/index.tsx
+++ b/src/pages/production/option-selector/item/index.tsx
@@ -2,29 +2,41 @@ import { useRecoilState } from 'recoil';
 import { Container, ItemImage, ItemName } from './index.style';
 import { selectedPatternIdState } from '@context/pattern';
 import { selectedWheelIdState } from '@context/wheel';
-import { useSearchParams } from 'react-router-dom';
+import { selectedColorIdState } from '@context/color';
+import { selectedFontIdState } from '@context/font';
 
 interface ItemProps {
   id: number;
+  data: 'pattern' | 'wheel' | 'font' | 'color' | 'accessory';
   name: string;
   imageSrc: string;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
 
 function Item(props: ItemProps) {
-  const [searchParams] = useSearchParams();
   const [selectedPattern] = useRecoilState(selectedPatternIdState);
   const [selectedWheel] = useRecoilState(selectedWheelIdState);
-  const step: number = Number(searchParams.get('step'));
+  const [selectedFont] = useRecoilState(selectedFontIdState);
+  const [selectedColor] = useRecoilState(selectedColorIdState);
 
   return (
     <Container className="item_cntr" onClick={props.onClick}>
-      {step === 0 && (
+      {props.data === 'pattern' && (
         <ItemImage className={`item_image ${selectedPattern === props.id ? 'selected' : ''}`} src={props.imageSrc} />
       )}
-      {step === 1 && (
+      {props.data === 'wheel' && (
         <ItemImage className={`item_image ${selectedWheel === props.id ? 'selected' : ''}`} src={props.imageSrc} />
       )}
+      {props.data === 'font' && (
+        <ItemImage className={`item_image ${selectedFont === props.id ? 'selected' : ''}`} src={props.imageSrc} />
+      )}
+      {props.data === 'color' && (
+        <ItemImage
+          className={`item_image ${selectedColor === props.id ? 'selected' : ''}`}
+          src={props.imageSrc}
+          type="circle"
+        />
+      )}
       <ItemName className="item_name">{props.name}</ItemName>
     </Container>
   );
diff --git a/tsconfig.json b/tsconfig.json
index 0f41ca5..99efc36 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,7 +25,8 @@
       "@components/*": ["./components/*"],
       "@pages/*": ["./pages/*"],
       "@api/*": ["./api/*"],
-      "@context/*": ["./context/*"]
+      "@context/*": ["./context/*"],
+      "@hooks/*": ["./hooks/*"]
     }
   },
   "include": [