Index: document/src/App.jsx
===================================================================
diff -u -r9a8a9a5cca54feb8f381a088501839cff499b02e -r744ac432b7176fb496f274c226781aec7a42f812
--- document/src/App.jsx	(.../App.jsx)	(revision 9a8a9a5cca54feb8f381a088501839cff499b02e)
+++ document/src/App.jsx	(.../App.jsx)	(revision 744ac432b7176fb496f274c226781aec7a42f812)
@@ -1,8 +1,8 @@
 import { Routes, Route, Navigate } from 'react-router-dom'
 import { ThemeProvider } from '@/components/shadcn/theme-provider'
 import { SubMenuContextProvider } from '@/contexts/contexts'
-import '../../reference/light-blue/documentation/css/font-awesome/css/font-awesome.min.css'
-import '../../reference/light-blue/css/lib/font-awesome/font-awesome.css'
+// import '../../reference/light-blue/documentation/css/font-awesome/css/font-awesome.min.css'
+// import '../../reference/light-blue/css/lib/font-awesome/font-awesome.css'
 import '@/assets/css/globals.css'
 import '@/assets/css/test.css'
 import Layout from '@/layout/Layout'
@@ -35,7 +35,7 @@
               Route path 를 만들고 contexts/contexts.jsx 파일로 가서 서브 메뉴 링크를 수정하면 연결 됩니다.  
               To connect the path to the submenu, check 'contexts/contets.jsx' 
             */}
-           {/* <Route element={<Layout />}> */}
+         
               <Route path='/' element={<Dashboard /> } />
               <Route path='*' element={ <Navigate replace to="/" /> } />
               <Route path='installation' element={<Installation /> } />
@@ -47,7 +47,7 @@
               <Route path='version-control-choice' element={<VersionControlChoice /> } />
               <Route path='version-control-check' element={<VersionControlCheck /> } />
               <Route path='version-control-edit' element={<VersionControlEdit /> } />
-           {/* </Route> */}
+       
            </Routes>
           </Layout>
       </SubMenuContextProvider>
Index: document/src/assets/css/globals.css
===================================================================
diff -u -r3dbe1098df9b1ed1b18f66471db263644b63efb2 -r744ac432b7176fb496f274c226781aec7a42f812
--- document/src/assets/css/globals.css	(.../globals.css)	(revision 3dbe1098df9b1ed1b18f66471db263644b63efb2)
+++ document/src/assets/css/globals.css	(.../globals.css)	(revision 744ac432b7176fb496f274c226781aec7a42f812)
@@ -65,7 +65,7 @@
     --ring: 228 48% 40%;
   }
 }
-.loading{
+.loading {
   width: 20px !important;
   height: 20px !important;
   animation: spin 3s linear infinite;
@@ -79,10 +79,6 @@
 /* global lucide icon size  */
 /* 루시드 아이콘 전역 사이즈 변경 */
 .lucide {
-  width: 12px;
-  height: 12px;
+  width: 13px;
+  height: 13px;
 }
-
-.lucide-loader {
-
-}
\ No newline at end of file
Index: document/src/components/shadcn/ui/accordion.jsx
===================================================================
diff -u -rccb300fdb5164cab7100b83ce99df42b554b9d3b -r744ac432b7176fb496f274c226781aec7a42f812
--- document/src/components/shadcn/ui/accordion.jsx	(.../accordion.jsx)	(revision ccb300fdb5164cab7100b83ce99df42b554b9d3b)
+++ document/src/components/shadcn/ui/accordion.jsx	(.../accordion.jsx)	(revision 744ac432b7176fb496f274c226781aec7a42f812)
@@ -9,7 +9,7 @@
 const Accordion = AccordionPrimitive.Root
 
 const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={cn("lg:border-0", className)} {...props} />
+  <AccordionPrimitive.Item ref={ref} className={cn("lg:border-0", className)} {...props} /> // lg:border-0  when it's on the large screen size: border none 
 ))
 AccordionItem.displayName = "AccordionItem"
 
@@ -23,7 +23,7 @@
       )}
       {...props}>
       {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 chevronDown ml-auto" />
+      {/* <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 chevronDown ml-auto" /> */}
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ))
@@ -34,7 +34,7 @@
     ref={ref}
     className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}>
-    <div className={cn("pb-2 pt-1 first:mt-[2px] last:mb-[2px]", className)}>{children}</div>
+    <div className={cn("pb-1 pt-1", className)}>{children}</div>
   </AccordionPrimitive.Content>
 ))
 
Index: document/src/contexts/contexts.jsx
===================================================================
diff -u -r2965a0b467402f0b6c3d8cd5b2f3d6957269dc9b -r744ac432b7176fb496f274c226781aec7a42f812
--- document/src/contexts/contexts.jsx	(.../contexts.jsx)	(revision 2965a0b467402f0b6c3d8cd5b2f3d6957269dc9b)
+++ document/src/contexts/contexts.jsx	(.../contexts.jsx)	(revision 744ac432b7176fb496f274c226781aec7a42f812)
@@ -56,54 +56,54 @@
       title: ["ARMS Product", "Service"],
       Icon: ()=> (<MonitorDown />),
       subMenus: [
-        { id: 1, to: '/product-service-choice', title: '제품관리 : 서비스 선택' },
-        { id: 2, to: '/product-service-check', title: '제품관리 : 서비스 산출물 조회' },
-        { id: 3, to: '/product-service-edit', title: '제품관리 : 서비스 산출물 편집/삭제' },
-        { id: 4, to: '/version-control-choice', title: '버전관리 : 서비스 선택' },
-        { id: 5, to: '/version-control-check', title: '버전관리 : 서비스 버전 조회' },
-        { id: 6, to: '/version-control-edit', title: '버전관리 : 서비스 버전 편집/삭제' },
+        { id: 1, to: '/product-service-choice', title: '서비스 선택' },
+        { id: 2, to: '/product-service-check', title: '서비스 산출물 조회' },
+        { id: 3, to: '/product-service-edit', title: '서비스 산출물 편집/삭제' },
+        { id: 4, to: '/version-control-choice', title: '서비스 선택' },
+        { id: 5, to: '/version-control-check', title: '서비스 버전 조회' },
+        { id: 6, to: '/version-control-edit', title: '서비스 버전 편집/삭제' },
       ]
     },
     {
       to: "#",
       title: ["ALM", "Jira, github, etc."],
       Icon: ()=> (<Boxes />),
       subMenus: [
-        { id: 1, to: '#', title: '서버관리 : ALM 서버 조회' },
-        { id: 2, to: '#', title: '서버관리 : ALM 서버 편집/삭제' },
-        { id: 3, to: '#', title: '상태관리 : ALM 서버 선택' },
-        { id: 4, to: '#', title: '연결관리 : 연결된 Jira 조회' },
-        { id: 5, to: '#', title: '연결관리 : 제품 조회/선택' },
-        { id: 6, to: '#', title: '연결관리 : 제품 버전 조회' },
-        { id: 7, to: '#', title: '연결관리 : ALM 프로젝트 list' },
+        { id: 1, to: '#', title: 'ALM 서버 조회' },
+        { id: 2, to: '#', title: 'ALM 서버 편집/삭제' },
+        { id: 3, to: '#', title: 'ALM 서버 선택' },
+        { id: 4, to: '#', title: '연결된 Jira 조회' },
+        { id: 5, to: '#', title: '제품 조회/선택' },
+        { id: 6, to: '#', title: '제품 버전 조회' },
+        { id: 7, to: '#', title: 'ALM 프로젝트 list' },
       ]
     },
     {
       to: "#",
       title: "Requirement",
       Icon: ()=> (<ListChecks />),
       subMenus: [
-        { id: 1, to: '#', title: '요구관리 : 요구 사항 조회' },
-        { id: 2, to: '#', title: '요구관리 : 요구 사항 내용' },
-        { id: 3, to: '#', title: '현황관리 : 제품 버전 선택' },
-        { id: 4, to: '#', title: '현황관리 : Issue list' },
-        { id: 5, to: '#', title: '간트차트 : 간트 차트' },
-        { id: 6, to: '#', title: '칸반보드 : 칸반 보드' },
+        { id: 1, to: '#', title: '요구 사항 조회' },
+        { id: 2, to: '#', title: '요구 사항 내용' },
+        { id: 3, to: '#', title: '제품 버전 선택' },
+        { id: 4, to: '#', title: 'Issue list' },
+        { id: 5, to: '#', title: '간트 차트' },
+        { id: 6, to: '#', title: '칸반 보드' },
       ]
     },
     {
       to: "#",
       title: "Analysis",
       Icon: ()=> (<ChartLine />),
       subMenus: [
-        { id: 1, to: '#', title: '일정분석 : Time 분석' },
-        { id: 2, to: '#', title: '일정분석 : 진행 현황' },
-        { id: 3, to: '#', title: '범위분석 : Scope 분석' },
-        { id: 4, to: '#', title: '범위분석 : 범위별 차트' },
-        { id: 5, to: '#', title: '자원분석 : Resource 분석' },
-        { id: 6, to: '#', title: '자원분석 : 작업자 현황' },
-        { id: 7, to: '#', title: '비용분석 : Cost 분석' },
-        { id: 8, to: '#', title: '비용분석 : 프로젝트 비용 산정' },
+        { id: 2, to: '#', title: '진행 현황' },
+        { id: 1, to: '#', title: 'Time 분석' },
+        { id: 3, to: '#', title: 'Scope 분석' },
+        { id: 4, to: '#', title: '범위별 차트' },
+        { id: 5, to: '#', title: 'Resource 분석' },
+        { id: 6, to: '#', title: '작업자 현황' },
+        { id: 7, to: '#', title: 'Cost 분석' },
+        { id: 8, to: '#', title: '프로젝트 비용 산정' },
       ]
     },
     {
Index: document/src/layout/HeaderMenu.jsx
===================================================================
diff -u -r8d478ba62441f19281787298267e58ee501a6577 -r744ac432b7176fb496f274c226781aec7a42f812
--- document/src/layout/HeaderMenu.jsx	(.../HeaderMenu.jsx)	(revision 8d478ba62441f19281787298267e58ee501a6577)
+++ document/src/layout/HeaderMenu.jsx	(.../HeaderMenu.jsx)	(revision 744ac432b7176fb496f274c226781aec7a42f812)
@@ -5,39 +5,24 @@
 
 export const AccordionMenu = ({ title, to, isActive }) => {
   return (
-    <AccordionContent className='px-8 dark:text-white'>
-      <Link to={to} className={`!sm:text-base ${isActive ? 'active text-blue-400 font-bold' : ''}`}> {title} </Link>
+    <AccordionContent className='px-8 dark:text-white hover:text-data hover:bg-muted/10 rounded-sm'>
+      <Link to={to} className={`${isActive ? 'active text-data font-bold' : ''}`}> {title} </Link>
     </AccordionContent>
   )
 }
 
 export const SubMenu = () => {
   const { menuItems, activeLink } = useContext(SubMenuContext)
-  const [openItems, setOpenItems] = useState([])
-  const location = useLocation()
+  // const location = useLocation()
 
-  useEffect(() => {
-    const newOpenItems = menuItems
-      .map((item, index) => {
-        if (item.subMenus && (item.subMenus.some(subItem => subItem.to === location.pathname) || openItems.includes(`item-${index}`))) {
-          return `item-${index}`;
-        }
-        return null;
-      })
-      .filter(Boolean);
-    setOpenItems(newOpenItems);
-  }, [location, menuItems]);
+  const allItemValues = menuItems.map((_, index) => `item-${index}`); 
 
-  const handleAccordionChange = (value) => {
-    setOpenItems(value);
-  };
-
   return (
     <>
      {menuItems.map((item, index) => {
       const isActive = activeLink === item.to || (item.subMenus && item.subMenus.some(subItem => subItem.to === activeLink))
       const combinedClassName = `
-      ${isActive ? `active !text-blue-400` : ''}
+      ${isActive ? `active !text-data` : ''}
       ${item.className || ''}
       `.trim();
  
@@ -46,14 +31,12 @@
         item.subMenus && item.subMenus.length > 0 ? ( 
           <Accordion 
           key={index} 
-          type="multiple" 
-          value={openItems}
-          onValueChange={handleAccordionChange}
-          // collapsible 
-          className="flex flex-col gap-1">
+          type="multiple"
+          value={allItemValues}
+          className="flex flex-col ">
             <AccordionItem value={`item-${index}`}>
               <AccordionTrigger
-                 className={`!justify-start gap-3 rounded-lg px-3 py-2 dark:text-white transition-all hover:text-blue-400 hover:bg-muted ${isActive ? 'active !text-blue-400 data-[state=open]:animate-accordion-down' : ''}`}
+                 className={`!justify-start gap-3 rounded-lg px-3 py-2 dark:text-white transition-all hover:text-data hover:bg-muted/10 ${isActive ? 'active !text-data' : ''}`}
                 >
                 <item.Icon />
                     {Array.isArray(item.title) ? (
@@ -64,17 +47,19 @@
                     item.title
                   )} 
               </AccordionTrigger>
-              <div className="pl-1 !sm:text-sm">
-              {/* 아코디언 서브 메뉴 출력 */}
+           
+              <div className="pl-1 last:mb-3 [&>*:first-child]:mt-1">
+              {/*서브 메뉴 출력 */}
                 {item.subMenus.map((el) => (
                   <AccordionMenu 
                   key={el.id} 
                   title={el.title} 
                   to={el.to}
                   isActive={activeLink === el.to}
+                  className=''
                   />
                 ))}
-              {/* 아코디언 서브 메뉴 출력 END */}
+              {/* 서브 메뉴 출력 END */}
               </div>
             </AccordionItem>
           </Accordion>
@@ -83,9 +68,10 @@
           <Link
             key={index}
             to={item.to}
-             className={`flex items-center gap-3 rounded-lg px-3 py-2 dark:text-white transition-all hover:text-blue-400 hover:bg-muted ${combinedClassName}` }
+             className={`flex items-center gap-3 rounded-lg px-3 py-2 dark:text-white transition-all hover:text-data hover:bg-muted/10 ${combinedClassName}` }
              >
-            <item.Icon />
+            {/* <item.Icon /> */}
+            <i className="fa-solid fa-user"></i>
             {Array.isArray(item.title) ? (
                 <>
                   {item.title[0]} <sup>{item.title[1]}</sup>
@@ -108,13 +94,13 @@
       <div className="menu-style hidden md:block">
         <div className="flex h-full max-h-screen flex-col">
           <div className="menu-top flex">
-            <Link to="/" className="link-logo items-center">
+            <Link to="/" className="link-logo items-center" >
               {/* 상단 브랜드 로고 --  Page Header -- */}
               <span className="bg-logo"></span>
             </Link>
           </div>
           <div className="menu-body flex-1">
-            <nav className="grid items-start px-2 text-sm lg:px-4">
+            <nav className="grid items-start px-5 py-5 text-sm lg:px-7 lg:py-5">
               {/* 좌측 메뉴 -- Right hand side menu -- */}
               <SubMenu />
             </nav>
Index: document/src/layout/Layout.jsx
===================================================================
diff -u -r7de66ed50c6874931389156aa375ef779036b8cc -r744ac432b7176fb496f274c226781aec7a42f812
--- document/src/layout/Layout.jsx	(.../Layout.jsx)	(revision 7de66ed50c6874931389156aa375ef779036b8cc)
+++ document/src/layout/Layout.jsx	(.../Layout.jsx)	(revision 744ac432b7176fb496f274c226781aec7a42f812)
@@ -1,17 +1,22 @@
 import HeaderMenu from '@/layout/HeaderMenu'
 import HeaderMenuComponents from '@/layout/HeaderMenu.component'
-import { Outlet } from 'react-router-dom'
 
 function Layout({ children }) {
   return (
-    <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
-      <HeaderMenu />
-      <div className="flex flex-col">
-      <HeaderMenuComponents />
-      {/* <Outlet /> */}
+    <>
+    {/* 
+      layout width by the screen size
+      사이드 바 사이즈 mideum : md:grid-cols-[230px_1fr]
+      large : lg:grid-cols-[230px_1fr]
+     */}
+    <div className="grid min-h-screen w-full md:grid-cols-[230px_1fr] lg:grid-cols-[230px_1fr]">
+       <HeaderMenu />
+       <div className="flex flex-col">
+       <HeaderMenuComponents />
       { children }
       </div>
    </div>
+   </>
   )
 }
 
Index: document/src/main.jsx
===================================================================
diff -u -re0f7b0bbc0c0e80b5bb9f294ba073020c974de14 -r744ac432b7176fb496f274c226781aec7a42f812
--- document/src/main.jsx	(.../main.jsx)	(revision e0f7b0bbc0c0e80b5bb9f294ba073020c974de14)
+++ document/src/main.jsx	(.../main.jsx)	(revision 744ac432b7176fb496f274c226781aec7a42f812)
@@ -9,8 +9,8 @@
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     {/* -- React-Router-dom -- BrowserRouter : URL 변경 시 렌더링할 컴포넌트 */}
-    <BrowserRouter basename="/document/dist">
-    {/* <BrowserRouter basename="/"> */}
+    {/* <BrowserRouter basename="/document/dist"> */}
+    <BrowserRouter basename="/">
       <App />
     </BrowserRouter>
   </StrictMode>,
Index: document/tailwind.config.js
===================================================================
diff -u -ra1b82c3f3fefbd315243221c0efe5b1f7d7df660 -r744ac432b7176fb496f274c226781aec7a42f812
--- document/tailwind.config.js	(.../tailwind.config.js)	(revision a1b82c3f3fefbd315243221c0efe5b1f7d7df660)
+++ document/tailwind.config.js	(.../tailwind.config.js)	(revision 744ac432b7176fb496f274c226781aec7a42f812)
@@ -16,8 +16,8 @@
     },
     fontSize: {
       xs: '0.7rem',
-      sm: '0.8rem',
-      base: '1rem',
+      sm: '12px',
+      base: '14px',
     },
     container: {
       center: true,
@@ -61,6 +61,17 @@
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        white: '#fff',
+        gray: {
+          100: '#f8f8f8',
+          200: 'lighten(#000, 93.5%)',
+          300: '#ddd',
+          400: 'lighten(#000, 60%)',
+          500: '#777',
+        },
+        blue: '#2477ff',
+        'link-color': '#3360ae',
+        'data': '#a4c6ff'
       },
       borderRadius: {
         lg: "var(--radius)",