diff --git a/src/page/MainPage.jsx b/src/page/MainPage.jsx
index 661cdde..adde490 100644
--- a/src/page/MainPage.jsx
+++ b/src/page/MainPage.jsx
@@ -5,14 +5,17 @@ const MainPage = () => {
     <GridContainer>
       <LeftBar>sidebar</LeftBar>
       <GridItem>main</GridItem>
-      <RightBar>sidebar</RightBar>
+      <RightBar>
+        <RightBarTop>Top</RightBarTop>
+        <RightBarBottom>Bottom</RightBarBottom>
+      </RightBar>
     </GridContainer>
   );
 };
 
 const GridContainer = styled.div`
   display: grid;
-  grid-template-columns: 2fr 6fr 2fr;
+  grid-template-columns: 2fr 4fr 3fr;
   grid-template-rows: 1fr;
   width: 100vw;
   height: 100vh;
@@ -46,4 +49,16 @@ const RightBar = styled(GridItem)`
     grid-row: 3;
   }
 `;
+
+const RightBarTop = styled.div`
+  flex: 1;
+  height: 50%;
+  background-color: lightblue;
+`;
+
+const RightBarBottom = styled.div`
+  flex: 1;
+  height: 50%;
+  background-color: lightgreen;
+`;
 export default MainPage;