diff --git a/egovframe-template-simple-react-contribution/src/css/base.css b/egovframe-template-simple-react-contribution/src/css/base.css
index 250e35d..2559717 100644
--- a/egovframe-template-simple-react-contribution/src/css/base.css
+++ b/egovframe-template-simple-react-contribution/src/css/base.css
@@ -84,6 +84,7 @@ button {cursor: pointer;}
 .mw_400 {max-width: 400px;}
 .mw_450 {max-width: 450px;}
 
+.h_10 {height: 10px;}
 .h_20 {height: 20px;}
 .h_25 {height: 25px;}
 .h_30 {height: 30px;}
@@ -119,5 +120,5 @@ button {cursor: pointer;}
 .text-224 {color: #22498E !important;}
 
 .clickable{cursor: pointer;}
-
+.cursor{cursor: pointer;}
 /*.MuiTab-root.Mui-selected { color: #22498E; }*/
diff --git a/egovframe-template-simple-react-contribution/src/css/page.css b/egovframe-template-simple-react-contribution/src/css/page.css
index 64bcb6b..468e96e 100644
--- a/egovframe-template-simple-react-contribution/src/css/page.css
+++ b/egovframe-template-simple-react-contribution/src/css/page.css
@@ -647,7 +647,7 @@
     .calendar_info ul li a {color: #222; font-size: 16px; font-weight: 300;}
     .calendar_info ul li span {position: absolute; right: 15px; top: 15px; color: #808080; font-size: 16px; font-weight: 300;}
 
-    .viewerDiv{height: calc(100vh - 190px); overflow-y: auto;}
+    .viewerDiv{height: calc(100vh - 153px); overflow-y: auto;}
     .openDoc{background-color: bisque;}
     .docLink{color: black;background-color: palegreen}
     .docLink:hover{cursor: pointer}
@@ -671,7 +671,10 @@
     .modalDocInfoActive{filter: grayscale(0%);}
     .docInfoRow > div{--bs-gutter-x: 0.5rem;}
     .bookmarkModalHeader{--bs-modal-title-line-height:1;}
-    .optionBtn{--bs-btn-padding-y: 0.1rem;--bs-btn-padding-x: 0.25rem;--bs-btn-font-size: 0.7rem; margin-right: 7px;}
+    .optionBtn{--bs-btn-padding-y: 0.15rem;--bs-btn-padding-x: 0.25rem;--bs-btn-font-size: 0.7rem; margin-right: 7px;}
+    .detailInfoDiv {position: relative;}
+    .datailcollapse {position: absolute; top: 0; left: 0; margin-top: 200px; margin-left: 0;}
+    .datailcollapse img {position: fixed;}
 
 
     /* 건설기준코드 안내*/
diff --git a/egovframe-template-simple-react-contribution/src/pages/standardCode/viewer/CodeViewer.jsx b/egovframe-template-simple-react-contribution/src/pages/standardCode/viewer/CodeViewer.jsx
index 70ef815..dc620c4 100644
--- a/egovframe-template-simple-react-contribution/src/pages/standardCode/viewer/CodeViewer.jsx
+++ b/egovframe-template-simple-react-contribution/src/pages/standardCode/viewer/CodeViewer.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation, useParams, Link } from 'react-router-dom';
 import Loading from 'components/Loading'
 import BookmarkModal from './BookmarkModal';
 import {VwDiv, VwPtag} from './Vw.style'
@@ -31,8 +31,7 @@ function CodeViewer(props) {
     const [show, setShow] = useState(false);
     const [bookMarkModal, setBookMarkModal] = useState();
 
-    const [colList, setColList] = useState([3,2,7]);
-
+    const [colList, setColList] = useState([3,7,2]);
 
     const sessionUser = parseJwt(getLocalItem('accessToken'));
     const sessionUserSe = sessionUser?.userSe;
@@ -71,9 +70,9 @@ function CodeViewer(props) {
                 if(docInfo.length>0){
                     let optionTag = [];
                     let activeIndex = 0;
-                    let docTitle = "";
                     let docFileGrpId = "";
                     let rvsnFileGrpId = "";
+                    let docTitle = "";
                     if(ymd===undefined){
                         activeIndex = docInfo.length-1
                         docTitle = docInfo[docInfo.length-1].doc_nm
@@ -94,8 +93,8 @@ function CodeViewer(props) {
                             buttonClass += "btn-primary "
                         }
                         if(index === activeIndex){
-                            buttonClass += "docInfoActive"
-                            pClass += "yearInfoActive"
+                            buttonClass += "docInfoActive "
+                            pClass += "yearInfoActive "
                             docFileGrpId = item.doc_file_grp_id;
                             rvsnFileGrpId = item.rvsn_file_grp_id;
                         }
@@ -108,25 +107,51 @@ function CodeViewer(props) {
                                        onClick={docInfoSelectorChange}
                                        data-ymd={item.rvsn_ymd}
                                        data-doccode={item.kcsc_cd}
-                                       data-docinfoseq={item.doc_info_seq}/>
-                                <br/>
-                                <p className={pClass}>{item.doc_yr}</p>
+                                       data-docinfoseq={item.doc_info_seq} />
+                                {/*<div onClick={docInfoSelectorChange} value={item.doc_er==='E'?'제':'개'} data-ymd={item.rvsn_ymd} data-doccode={item.kcsc_cd} data-docinfoseq={item.doc_info_seq}>*/}
+                                {/*    <img*/}
+                                {/*        src={item.doc_er === 'E' ? '/assets/images/je.png' : '/assets/images/ge.png'}*/}
+                                {/*        alt={item.rvsn_ymd}*/}
+                                {/*        className={"h_20"}*/}
+                                {/*    />*/}
+                                    <br/>
+                                    <p className={pClass}>{item.doc_yr}</p>
+                                {/*</Button>*/}
                             </Col>)
                     })
                     headTag.push(
                         <>
-                            <Col xs={"auto"}>
-                                <Row className="docInfoRow">
-                                    <Col className="docInfoTitle">{docCode} {docTitle}</Col>
-                                    {optionTag}
+                            <Col xs={3} className={"d-flex align-items-center fw-bold"}>{docCode} {docTitle}</Col>
+                            <Col xs={9}>
+                                <Row className="justify-content-between">
+                                    <Col xs={"auto"}>
+                                        <Row>
+                                            <Col xs={"auto"}>
+                                                <Row className="docInfoRow">
+                                                    {/*<Col className="docInfoTitle">{docCode} {docTitle}</Col>*/}
+                                                    {optionTag}
+                                                </Row>
+                                            </Col>
+                                            <Col className={"d-flex align-items-center"}>
+                                                <Button type="button" variant={"22498E"} className="optionBtn w_75 h_30" >연혁</Button>
+                                                <Button type="button" variant={"22498E"}  className="optionBtn w_75 h_30"  >2단비교</Button>
+                                                {rvsnFileGrpId?<Button type="button" variant={"22498E"}  className="optionBtn w_75 h_30" onClick={()=>{File.download(rvsnFileGrpId)}} >신구조문</Button>:''}
+                                                {docFileGrpId?<Button type="button" variant={"22498E"}  className="optionBtn w_75 h_30" onClick={()=>{File.standardCode(docFileGrpId)}} >첨부파일</Button>:''}
+                                                <Button type="button" variant={"22498E"}  className="optionBtn w_75 h_30" >인용(3)</Button>
+                                                <Button type="button" variant={"22498E"}  className="optionBtn w_75 h_30" >피인용(5)</Button>
+                                                <Button type="button" variant={"22498E"}  className="optionBtn w_75 h_30" >인쇄</Button>
+                                            </Col>
+                                        </Row>
+                                    </Col>
+                                    <Col xs={"auto"}>
+                                        <InputGroup>
+                                            <Form.Control type="text" size={"sm"} placeholder={"문서 내 검색"} className={"me-2 rounded-1"}/>
+                                            {errorSelector}
+                                            <Button type={"button"} variant={"outline-22498E"} className={"px-3 rounded-1 btn-sm"} ><img src={"/assets/images/menu.png"} className={"h_10 mt-1"} /> 목차 닫기</Button>
+                                        </InputGroup>
+                                    </Col>
                                 </Row>
                             </Col>
-                            <Col>
-                                <input type="button" className="btn btn-sm btn-primary optionBtn" value="연혁"/>
-                                <input type="button" className="btn btn-sm btn-primary optionBtn" value="2단비교"/>
-                                {rvsnFileGrpId?<input type="button" className="btn btn-sm btn-primary optionBtn" value="신구조문" onClick={()=>{File.download(rvsnFileGrpId)}}/>:''}
-                                {docFileGrpId?<input type="button" className="btn btn-sm btn-primary optionBtn" value="첨부파일" onClick={()=>{File.standardCode(docFileGrpId)}}/>:''}
-                            </Col>
                         </>
                     )
                 }else{
@@ -262,7 +287,7 @@ function CodeViewer(props) {
                 setDocSummary(summaryTag);
                 setDocDetail(detailTag);
                 if(optionTag.length>0){
-                    errorTag.push(<Form.Select size="sm" onChange={errorSelectorChange}><option value="">선택</option>{optionTag}</Form.Select>)
+                    errorTag.push(<Form.Select size="sm" onChange={errorSelectorChange} className={"me-2 rounded-1"}><option value="">선택</option>{optionTag}</Form.Select>)
                     setErrorSelector(errorTag);
                 }
                 setDocLoading(false);
@@ -403,9 +428,9 @@ function CodeViewer(props) {
     }
     function treeControl(){
         if(colList[0]===3){
-            setColList([0,3,9]);
+            setColList([0,10,2]);
         }else{
-            setColList([3,2,7]);
+            setColList([3,7,2]);
         }
     }
 
@@ -422,38 +447,44 @@ function CodeViewer(props) {
             <Loading loadingState={treeLoading || docLoading}/>
             <Row className={`mx-0 ${treeLoading || docLoading?'d-none':''}`}>
                 <Col xs={12} className="border-bottom">
-                    <Row>
-                        <Col xs={3}></Col>
-                        <Col xs={9}>
-                            <Row className="justify-content-between">
-                                <Col xs={"auto"}>
-                                    <Row>
+                    <Row className={"pt-1"}>
+                        {/*<Col xs={3}></Col>*/}
+                        {/*<Col xs={9}>*/}
+                        {/*    <Row className="justify-content-between">*/}
+                        {/*        <Col xs={"auto"}>*/}
+                        {/*            <Row>*/}
                                         {docInfo}
-                                    </Row>
-                                </Col>
-                                <Col xs={"auto"}>
-                                    <InputGroup>
-                                        <Form.Control type="text" size={"sm"} placeholder={"문서 내 검색"}/>
-                                        {errorSelector}
-                                    </InputGroup>
-                                </Col>
-                            </Row>
-                        </Col>
+                        {/*            </Row>*/}
+                        {/*        </Col>*/}
+                        {/*        <Col xs={"auto"}>*/}
+                        {/*            <InputGroup>*/}
+                        {/*                <Form.Control type="text" size={"sm"} placeholder={"문서 내 검색"}/>*/}
+                        {/*                {errorSelector}*/}
+                        {/*            </InputGroup>*/}
+                        {/*        </Col>*/}
+                        {/*    </Row>*/}
+                        {/*</Col>*/}
                     </Row>
                 </Col>
                 <Col xs={colList[0]} className={`border-end viewerDiv ${colList[0]===3?'':'d-none'}`}>
                     {/*{codeTree}*/}
                     <ViewerTree docCode={docCode} updateDocCode={updateDocCode} setTreeLoading={setTreeLoading}/>
                 </Col>
-                <Col xs={colList[1]} className="border-end viewerDiv">
-                    <div>
-                        <Button size={"sm"} variant={"outline-secondary"} onClick={treeControl}>{colList[0]===3?'트리 접기':'트리 펼치기'}</Button>
+                <Col xs={colList[1]} className="viewerDiv detailInfoDiv" ref={actionAppend}>
+                    <div className={"datailcollapse"}>
+                        {/*<Button size={"sm"} variant={"outline-secondary"} onClick={treeControl}>{colList[0]===3?'트리 접기':'트리 펼치기'}</Button>*/}
+                        <img
+                            src={colList[0]===3 ? "/assets/images/close.png" : "/assets/images/open.png"}
+                            alt={colList[0]===3 ? "접기" : "열기"}
+                            onClick={treeControl}
+                            className={"cursor"}
+                        />
                     </div>
-                    {docSummary}
-                </Col>
-                <Col xs={colList[2]} className="viewerDiv detailInfoDiv" ref={actionAppend}>
                     {docDetail}
                 </Col>
+                <Col xs={colList[2]} className="border-end viewerDiv">
+                    {docSummary}
+                </Col>
             </Row>
             <Modal show={show} onHide={handleClose} size="xl" keyboard={false} scrollable>
                 {bookMarkModal}
diff --git a/egovframe-template-simple-react-contribution/src/pages/standardCode/viewer/ViwerComponents.jsx b/egovframe-template-simple-react-contribution/src/pages/standardCode/viewer/ViwerComponents.jsx
index 1f986fb..e3f6e17 100644
--- a/egovframe-template-simple-react-contribution/src/pages/standardCode/viewer/ViwerComponents.jsx
+++ b/egovframe-template-simple-react-contribution/src/pages/standardCode/viewer/ViwerComponents.jsx
@@ -67,7 +67,7 @@ export function CodeTree({docCode, setdoccodandname}) {
 //TODO 추가 분리 작업 필요
 export function CodeCotentData({docCode}) {
     const [codeChapter, setcodeChapter] = useState([]);
-    const [codeContent, setcodeContetn] = useState([]);
+    const [codeContent, setcodeContent] = useState([]);
     let result =[];
     const getCodeDetail = (docCode) => {
         EgovNet.requestFetch(
@@ -98,7 +98,7 @@ export function CodeCotentData({docCode}) {
             </VwDiv>
             )
         }))
-        setcodeContetn(result.map(item =>{
+        setcodeContent(result.map(item =>{
             const isTitle = item.full_content.includes(item.group_title);
             const docLinkReg = /([A-Z]{3,5}(\s[0-9]{2}){3,4})/g
             const docPartReg = /\((?:표|그림|부록)?\s*([A-Z]\.)?(?!\d\))\d+(\.\d+)*(\s?\(\d\))?(-\d+)?(?:\s*[A-Z])?\)/g