diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 9268559..15e3761 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import styled from 'styled-components';
 import { Icon } from '@iconify/react';
@@ -10,6 +10,14 @@ export default function Modal({
 }: PropsWithChildren<{ onClose: () => void }>) {
   const { clearModals } = useModalContext();
 
+  useEffect(() => {
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  }, []);
+
   return ReactDOM.createPortal(
     <ModalOverlay onClick={clearModals}>
       <ModalContent
diff --git a/src/pages/charge/chargePage.tsx b/src/pages/charge/chargePage.tsx
new file mode 100644
index 0000000..b2fc9ac
--- /dev/null
+++ b/src/pages/charge/chargePage.tsx
@@ -0,0 +1,190 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Icon } from '@iconify/react';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Box from '@mui/material/Box';
+import TabPage from './components/tab/TabPage';
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function CustomTabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+function ChargePage() {
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Container>
+      <TitleBox>
+        <Titles>
+          <Dot />
+          <Title>티켓 충전/환전</Title>
+        </Titles>
+        <CheckBox>
+          <Short>충전/ 환전 내역 조회하기</Short>
+          <Icon
+            icon="weui:arrow-outlined"
+            style={{
+              width: '23px',
+              height: '25px',
+              cursor: 'pointer',
+              color: '#8F8E94',
+            }}
+          />
+        </CheckBox>
+      </TitleBox>
+      <Line />
+      <Boxs>
+        <Box sx={{ width: '100%' }}>
+          <Box
+            sx={{
+              width: '100%',
+              borderBottom: 1,
+              borderColor: 'divider',
+            }}
+          >
+            <Tabs
+              sx={{
+                width: '100%',
+                '& .MuiTabs-flexContainer': {
+                  justifyContent: 'center',
+                },
+              }}
+              value={value}
+              onChange={handleChange}
+              textColor="secondary"
+              indicatorColor="secondary"
+              aria-label="basic tabs example"
+            >
+              <Tab
+                sx={{
+                  width: '100%',
+                  fontFamily: 'Pretendard',
+                  fontSize: '20px',
+                  fontSeight: '600',
+                  lineHeight: '17.308px',
+                }}
+                label="티켓 충전"
+                {...a11yProps(0)}
+              />
+              <Tab
+                sx={{
+                  width: '100%',
+                  fontFamily: 'Pretendard',
+                  fontSize: '20px',
+                  fontSeight: '600',
+                  lineHeight: '17.308px',
+                }}
+                label="티켓 환전"
+                {...a11yProps(1)}
+              />
+            </Tabs>
+          </Box>
+          <CustomTabPanel value={value} index={0}>
+            <TabPage type={0} />
+          </CustomTabPanel>
+          <CustomTabPanel value={value} index={1}>
+            <TabPage type={1} />
+          </CustomTabPanel>
+        </Box>
+      </Boxs>
+    </Container>
+  );
+}
+
+const Boxs = styled.div`
+  width: 858px;
+  height: 740px;
+  border-radius: 18px;
+  border: 1px solid #c1c1c1;
+  margin-bottom: 250px;
+  padding-top: 15px;
+`;
+
+const Line = styled.div`
+  margin-top: 20px;
+  margin-bottom: 53px;
+  width: 1080px;
+  height: 1px;
+  background-color: black;
+`;
+
+const CheckBox = styled.div`
+  display: flex;
+  column-gap: 30px;
+  align-items: center;
+`;
+
+const Short = styled.div`
+  color: #8f8e94;
+  font-family: Pretendard;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+`;
+
+const Title = styled.div`
+  font-family: Pretendard;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 600;
+`;
+
+const Dot = styled.div`
+  width: 14px;
+  height: 14px;
+  background-color: #c908ff;
+  border: #c908ff;
+  border-radius: 100%;
+`;
+
+const Titles = styled.div`
+  display: flex;
+  column-gap: 50px;
+  align-items: center;
+`;
+
+const TitleBox = styled.div`
+  margin-top: 63px;
+  width: 1080px;
+  height: 53px;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+export default ChargePage;
diff --git a/src/pages/charge/components/ChangeModal.tsx b/src/pages/charge/components/modal/ChangeModal.tsx
similarity index 95%
rename from src/pages/charge/components/ChangeModal.tsx
rename to src/pages/charge/components/modal/ChangeModal.tsx
index 9e66a84..00fea17 100644
--- a/src/pages/charge/components/ChangeModal.tsx
+++ b/src/pages/charge/components/modal/ChangeModal.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import Modal from '../../../components/Modal/Modal';
+import Modal from '../../../../components/Modal/Modal';
 import Checkbox from '@mui/material/Checkbox';
 import { Icon } from '@iconify/react';
 import CircleChecked from '@mui/icons-material/CheckCircleOutline';
 import CircleUnchecked from '@mui/icons-material/RadioButtonUnchecked';
-import { useModalContext } from '../../../components/Modal/context/ModalContext';
+import { useModalContext } from '../../../../components/Modal/context/ModalContext';
 import ChangeOkModal from './ChangeOkModal';
 
 interface ModalProps {
diff --git a/src/pages/charge/components/ChangeOkModal.tsx b/src/pages/charge/components/modal/ChangeOkModal.tsx
similarity index 91%
rename from src/pages/charge/components/ChangeOkModal.tsx
rename to src/pages/charge/components/modal/ChangeOkModal.tsx
index 0b56b57..805ed3e 100644
--- a/src/pages/charge/components/ChangeOkModal.tsx
+++ b/src/pages/charge/components/modal/ChangeOkModal.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import Modal from '../../../components/Modal/Modal';
+import Modal from '../../../../components/Modal/Modal';
 import styled from 'styled-components';
-import vector from '../../../assets/Vector.png';
-import ticket from '../../../assets/ticket.svg';
-import { useModalContext } from '../../../components/Modal/context/ModalContext';
+import vector from '../../../../assets/Vector.png';
+import ticket from '../../../../assets/ticket.svg';
+import { useModalContext } from '../../../../components/Modal/context/ModalContext';
 
 interface ModalProps {
   onClose: () => void;
diff --git a/src/pages/charge/components/ChargeModal.tsx b/src/pages/charge/components/modal/ChargeModal.tsx
similarity index 95%
rename from src/pages/charge/components/ChargeModal.tsx
rename to src/pages/charge/components/modal/ChargeModal.tsx
index f75a94c..a5d8ab6 100644
--- a/src/pages/charge/components/ChargeModal.tsx
+++ b/src/pages/charge/components/modal/ChargeModal.tsx
@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import Modal from '../../../components/Modal/Modal';
+import Modal from '../../../../components/Modal/Modal';
 import Checkbox from '@mui/material/Checkbox';
 import { Icon } from '@iconify/react';
 import CircleChecked from '@mui/icons-material/CheckCircleOutline';
 import CircleUnchecked from '@mui/icons-material/RadioButtonUnchecked';
 import ChargeOkModal from './ChargeOkModal';
-import { useModalContext } from '../../../components/Modal/context/ModalContext';
+import { useModalContext } from '../../../../components/Modal/context/ModalContext';
 
 interface ModalProps {
   onClose: () => void;
diff --git a/src/pages/charge/components/ChargeOkModal.tsx b/src/pages/charge/components/modal/ChargeOkModal.tsx
similarity index 92%
rename from src/pages/charge/components/ChargeOkModal.tsx
rename to src/pages/charge/components/modal/ChargeOkModal.tsx
index 3c755ac..f34c323 100644
--- a/src/pages/charge/components/ChargeOkModal.tsx
+++ b/src/pages/charge/components/modal/ChargeOkModal.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import Modal from '../../../components/Modal/Modal';
+import Modal from '../../../../components/Modal/Modal';
 import styled from 'styled-components';
-import vector from '../../../assets/Vector.png';
-import { useModalContext } from '../../../components/Modal/context/ModalContext';
+import vector from '../../../../assets/Vector.png';
+import { useModalContext } from '../../../../components/Modal/context/ModalContext';
 
 interface ModalProps {
   onClose: () => void;
diff --git a/src/pages/charge/components/tab/TabPage.tsx b/src/pages/charge/components/tab/TabPage.tsx
new file mode 100644
index 0000000..4187543
--- /dev/null
+++ b/src/pages/charge/components/tab/TabPage.tsx
@@ -0,0 +1,263 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import ticketIcon from '../../../../assets/ticket.svg';
+import { Icon } from '@iconify/react';
+import { useModalContext } from '../../../../components/Modal/context/ModalContext';
+import ChangeModal from '../modal/ChangeModal';
+
+interface TabTypeProps {
+  type: number;
+}
+
+function TabPage({ type }: TabTypeProps) {
+  const [ticket, setTicket] = useState<string>('');
+  const { openModal } = useModalContext();
+
+  useEffect(() => {
+    console.log(ticket);
+  }, [ticket]);
+
+  const handleNextModal = () => {
+    openModal(({ onClose }) => <ChangeModal onClose={onClose} />);
+  };
+
+  return (
+    <Container>
+      <Short>{type === 0 ? '충전할 응모 티켓' : '환전할 응모 티켓'}</Short>
+      <TicketContainer>
+        <InputContainer>
+          <Img src={ticketIcon} />
+          <Input
+            value={ticket ?? ''}
+            onChange={(event) => setTicket(event.target.value)}
+            type="number"
+          />
+          <Icon
+            icon={'ei:close-o'}
+            style={{
+              width: '25px',
+              height: '25px',
+              color: '#7D7D7D',
+              transform: 'translateX(-14px)',
+            }}
+            onClick={() => setTicket('')}
+          />
+        </InputContainer>
+        개
+      </TicketContainer>
+      <TicketContainer
+        style={{ marginTop: '15px', transform: 'translateX(-25px)' }}
+      >
+        <Button
+          onClick={() => {
+            setTicket((prev) => (Number(prev) + 10).toString());
+          }}
+        >
+          + 10개
+        </Button>
+        <Button
+          onClick={() => {
+            setTicket((prev) => (Number(prev) + 100).toString());
+          }}
+        >
+          + 100개
+        </Button>
+        <Button
+          onClick={() => {
+            setTicket((prev) => (Number(prev) + 1000).toString());
+          }}
+        >
+          + 1000개
+        </Button>
+      </TicketContainer>
+      {type === 0 ? (
+        <KakaoButtons>
+          <Icon
+            icon="raphael:bubble"
+            style={{
+              width: '15px',
+              height: '13px',
+              color: 'black',
+            }}
+          />
+          <Kakao>카카오페이로 결제하기</Kakao>
+        </KakaoButtons>
+      ) : (
+        <ChangeButton onClick={handleNextModal}>환전하기</ChangeButton>
+      )}
+      <Option>
+        <div>{type === 0 ? '충전 후 티켓' : '환전 후 티켓'}</div>
+        <div>500개</div>
+      </Option>
+      <Line />
+      <Option>
+        <div>{type === 0 ? '티켓 금액' : '입금 받을 금액'}</div>
+        <div>30,000원</div>
+      </Option>
+      <Line />
+      <div
+        style={{ width: '400px', display: 'flex', justifyContent: 'flex-end' }}
+      >
+        <Info>환전 시 등록된 계좌로 정산됩니다.</Info>
+      </div>
+    </Container>
+  );
+}
+
+const Info = styled.div`
+  color: #c908ff;
+  text-align: right;
+  font-family: Pretendard;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+`;
+
+const ChangeButton = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 193px;
+  height: 36px;
+  border-radius: 7px;
+  border: 0;
+  background-color: #c908ff;
+  color: white;
+  margin-bottom: 125px;
+  margin-top: 72px;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 600;
+  transform: translateX(-20px);
+`;
+
+const Line = styled.div`
+  border-top: 2px dashed gray;
+  width: 402px;
+  height: 2px;
+  margin-top: 11px;
+  margin-bottom: 15px;
+`;
+
+const Option = styled.div`
+  display: flex;
+  justify-content: space-between;
+  color: #8f8e94;
+  font-family: Pretendard;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 17.308px;
+  width: 375px;
+  height: 20px;
+`;
+
+const KakaoButtons = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 193px;
+  height: 36px;
+  border-radius: 7px;
+  border: 0;
+  background-color: #fbe44e;
+  color: black;
+  margin-bottom: 125px;
+  margin-top: 72px;
+  column-gap: 10px;
+  transform: translateX(-20px);
+`;
+
+const Kakao = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  transform: translateY(1px);
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 600;
+`;
+
+const Button = styled.button`
+  width: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 37px;
+  padding: 0px 14px;
+
+  background-color: white;
+  color: #8f8e94;
+  border-radius: 8px;
+  border: 1px solid #8f8e94;
+
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+`;
+
+const Input = styled.input`
+  outline: none;
+  border: none;
+  font-family: Pretendard;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 18px;
+  width: 223px;
+  margin-right: 15px;
+  transform: translateY(2px);
+`;
+
+const Img = styled.img`
+  width: 29.81px;
+  height: 19.562px;
+  margin-right: 19px;
+`;
+
+const InputContainer = styled.div`
+  width: 319px;
+  height: 49px;
+  border-radius: 8px;
+  border: 1px solid #000;
+  display: flex;
+  padding-left: 16px;
+  align-items: center;
+`;
+
+const Short = styled.div`
+  font-family: Pretendard;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 17.308px;
+  margin-bottom: 8px;
+  width: 349px;
+  display: flex;
+  justify-content: flex-start;
+`;
+
+const TicketContainer = styled.div`
+  display: flex;
+  column-gap: 13px;
+  align-items: center;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 18px;
+`;
+
+const Container = styled.div`
+  width: 858px;
+  height: auto;
+  display: flex;
+  align-items: center;
+  padding-top: 86px;
+  flex-direction: column;
+`;
+
+export default TabPage;