diff --git a/client/src/components/StockOrder/Index.tsx b/client/src/components/StockOrder/Index.tsx
new file mode 100644
index 00000000..9d5657fe
--- /dev/null
+++ b/client/src/components/StockOrder/Index.tsx
@@ -0,0 +1,20 @@
+import { styled } from "styled-components";
+
+import UpperBar from "./UpperBar";
+
+const StockOrder = () => {
+  return (
+    <Container>
+      <UpperBar />
+    </Container>
+  );
+};
+
+export default StockOrder;
+
+const Container = styled.div`
+  flex: 3.3 0 0;
+  min-width: 400px;
+  height: 100%;
+  border-left: 1px solid #2f4f4f;
+`;
diff --git a/client/src/components/StockOrder/UpperBar.tsx b/client/src/components/StockOrder/UpperBar.tsx
new file mode 100644
index 00000000..afe3e3b4
--- /dev/null
+++ b/client/src/components/StockOrder/UpperBar.tsx
@@ -0,0 +1,42 @@
+import { styled } from "styled-components";
+
+const titleText: string = "주식주문";
+
+const UpperBar = () => {
+  return (
+    <Container>
+      <Title>{titleText}</Title>
+      <CloseBtn>&#10005;</CloseBtn>
+    </Container>
+  );
+};
+
+export default UpperBar;
+
+const Container = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 43px;
+  border-bottom: 1px solid black;
+`;
+
+const Title = styled.div`
+  font-size: 17px;
+  font-weight: 450;
+  color: #1c1c1c;
+`;
+
+const CloseBtn = styled.button`
+  position: absolute;
+  right: 10px;
+  width: 28px;
+  height: 100%;
+  border: none;
+  font-size: 20px;
+  color: #525252;
+  background-color: #ffff;
+`;
diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx
index cc799abc..42508741 100644
--- a/client/src/page/MainPage.tsx
+++ b/client/src/page/MainPage.tsx
@@ -1,16 +1,17 @@
 import { styled } from "styled-components";
-import LogoutHeader from "../components/Headers/LogoutHeader"
-import LoginHeader from "../components/Headers/LoginHeader"
+
+import LoginHeader from "../components/Headers/LoginHeader";
+import StockOrder from "../components/StockOrder/Index";
 
 const MainPage = () => {
   return (
     <Container>
       <LoginHeader />
-      <LogoutHeader />
       <Main>
         <LeftSection></LeftSection>
         <CentralSection></CentralSection>
-        <RightSection></RightSection>
+        <StockOrder />
+        {/* <RightSection></RightSection> */}
       </Main>
     </Container>
   );
@@ -38,12 +39,12 @@ const LeftSection = styled.section`
   border: 1px solid black;
 `;
 
-const RightSection = styled.section`
-  flex: 3.3 0 0;
-  min-width: 400px;
-  height: 100%;
-  border: 1px solid black;
-`;
+// const RightSection = styled.section`
+//   flex: 3.3 0 0;
+//   min-width: 400px;
+//   height: 100%;
+//   border: 1px solid black;
+// `;
 
 const CentralSection = styled.section`
   flex: 6.7 0 0;