diff --git a/apps/landing/devup.json b/apps/landing/devup.json
index 7a14c7f3..c3133c47 100644
--- a/apps/landing/devup.json
+++ b/apps/landing/devup.json
@@ -1 +1,500 @@
-{"theme":{"colors":{"light":{"primary":"#6159D4","secondary":"#85A5F2","link":"#006BFF","text":"#2F2F2F","background":"#FFFFFF","containerBackground":"#FFFFFF","border":"#E0E0E0","success":"#4CAF50","warning":"#FF9800","error":"#F44336","info":"#2196F3","base":"#FFFFFF","negativeBase":"#000000","title":"#1A1A1A","caption":"#A9A8B4","shadow":"#87878740","codeBg":"#3E3B41","cardBg":"#F8F8F8","buttonBlue":"#266CCD","joinBg":"#CDE2FA","third":"#918AE9","buttonBlueHover":"#1453AC","buttonBlueActive":"#19498B","textReverse":"#FFFFFF","footerTitle":"#A3A4B4","footerBg":"#E6E7ED","footerText":"#51575F","menuHover":"#F6F4FF","menuActive":"#EAE8FC","captionBold":"#878594","search":"#9C50FF"},"dark":{"primary":"#737FE4","secondary":"#2A4586","link":"#006BFF","text":"#EDEDED","background":"#131313","containerBackground":"#1E1E1E","border":"#333333","success":"#4CAF50","warning":"#FF9800","error":"#F44336","info":"#2196F3","base":"#000000","negativeBase":"#FFFFFF","title":"#FAFAFA","caption":"#787878","shadow":"#62626240","codeBg":"#2E303C","cardBg":"#28272B","buttonBlue":"#0867AF","joinBg":"#2F363E","third":"#737FE4","buttonBlueHover":"#1453AC","buttonBlueActive":"#19498B","textReverse":"#2F2F2F","footerTitle":"#A3A4B4","footerBg":"#2E303C","footerText":"#FFFFFF","menuHover":"#3C404B","menuActive":"#283259","captionBold":"#878594","search":"#6FA4FF"}},"typography":{"h1":[{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":800,"fontSize":"38px","lineHeight":1.3,"letterSpacing":"-0.03em"},null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":800,"fontSize":"52px","lineHeight":1.3,"letterSpacing":"-0.03em"}],"h6Reg":[{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":400,"fontSize":"18px","lineHeight":1.3,"letterSpacing":"-0.03em"},null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":400,"fontSize":"24px","lineHeight":1.3,"letterSpacing":"-0.03em"}],"buttonL":[{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":800,"fontSize":"17px","lineHeight":1.3,"letterSpacing":"-0.03em"},null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":800,"fontSize":"20px","lineHeight":1.3,"letterSpacing":"-0.03em"}],"code":[{"fontFamily":"D2Coding","fontStyle":"normal","fontWeight":700,"fontSize":"13px","lineHeight":1.5,"letterSpacing":"-0.03em"},null,null,null,{"fontFamily":"D2Coding","fontStyle":"normal","fontWeight":700,"fontSize":"15px","lineHeight":1.5,"letterSpacing":"-0.03em"}],"buttonM":[{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":600,"fontSize":"15px","lineHeight":1.3,"letterSpacing":"-0.03em"},null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":600,"fontSize":"17px","lineHeight":1.3,"letterSpacing":"-0.03em"}],"h4":[{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":700,"fontSize":"28px","lineHeight":1.3,"letterSpacing":"-0.03em"},null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":700,"fontSize":"36px","lineHeight":1.3,"letterSpacing":"-0.03em"}],"body":[{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":500,"fontSize":"14px","lineHeight":1.3,"letterSpacing":"-0.03em"},null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":500,"fontSize":"16px","lineHeight":1.5,"letterSpacing":"-0.03em"}],"h6":[{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":600,"fontSize":"18px","lineHeight":1.3,"letterSpacing":"-0.03em"},null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":600,"fontSize":"24px","lineHeight":1.3,"letterSpacing":"-0.03em"}],"textS":[null,null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":500,"fontSize":"15px","lineHeight":1.4,"letterSpacing":"-0.03em"}],"buttonLbold":[{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":700,"fontSize":"17px","lineHeight":1.3,"letterSpacing":"-0.03em"},null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":700,"fontSize":"18px","lineHeight":1.3,"letterSpacing":"-0.03em"}],"buttonLsemiB":[{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":600,"fontSize":"17px","lineHeight":1.3,"letterSpacing":"-0.03em"},null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":600,"fontSize":"18px","lineHeight":1.3,"letterSpacing":"-0.03em"}],"h2":[{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":800,"fontSize":"36px","lineHeight":1.3,"letterSpacing":"-0.03em"},null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":800,"fontSize":"48px","lineHeight":1.3,"letterSpacing":"-0.03em"}],"h3":[{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":700,"fontSize":"32px","lineHeight":1.3,"letterSpacing":"-0.03em"},null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":700,"fontSize":"42px","lineHeight":1.3,"letterSpacing":"-0.03em"}],"h5":[{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":600,"fontSize":"24px","lineHeight":1.3,"letterSpacing":"-0.03em"},null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":600,"fontSize":"30px","lineHeight":1.3,"letterSpacing":"-0.03em"}],"buttonS":[{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":800,"fontSize":"14px","lineHeight":1.3,"letterSpacing":"-0.03em"},null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":700,"fontSize":"15px","lineHeight":1.3,"letterSpacing":"-0.03em"}],"caption":[null,null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":500,"fontSize":"14px","lineHeight":1.4,"letterSpacing":"-0.03em"}],"small":[{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":300,"fontSize":"11px","lineHeight":1.3,"letterSpacing":"-0.03em"},null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":400,"fontSize":"12px","lineHeight":1.4,"letterSpacing":"-0.03em"}],"buttonSmid":[{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":500,"fontSize":"14px","lineHeight":1.3,"letterSpacing":"-0.03em"},null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":500,"fontSize":"15px","lineHeight":1.3,"letterSpacing":"-0.03em"}],"captionBold":[null,null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":700,"fontSize":"14px","lineHeight":1.3,"letterSpacing":"-0.03em"}],"textSbold":[null,null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":700,"fontSize":"15px","lineHeight":1.4,"letterSpacing":"-0.03em"}],"textL":[{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":500,"fontSize":"16px","lineHeight":1.3,"letterSpacing":"-0.03em"},null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":500,"fontSize":"18px","lineHeight":1.5,"letterSpacing":"-0.03em"}],"footerMenu":[{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":500,"fontSize":"13px","lineHeight":1.4,"letterSpacing":"-0.03em"},null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":500,"fontSize":"14px","lineHeight":1.4,"letterSpacing":"-0.03em"}],"bodyReg":[null,null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":400,"fontSize":"16px","lineHeight":1.5,"letterSpacing":"-0.03em"}],"smallBold":[null,null,null,null,{"fontFamily":"Pretendard","fontStyle":"normal","fontWeight":800,"fontSize":"12px","lineHeight":1.4,"letterSpacing":"-0.03em"}]}}}
\ No newline at end of file
+{
+  "theme": {
+    "colors": {
+      "light": {
+        "primary": "#6159D4",
+        "secondary": "#85A5F2",
+        "link": "#006BFF",
+        "text": "#2F2F2F",
+        "background": "#FFFFFF",
+        "containerBackground": "#FFFFFF",
+        "border": "#E0E0E0",
+        "success": "#4CAF50",
+        "warning": "#FF9800",
+        "error": "#F44336",
+        "info": "#2196F3",
+        "base": "#FFFFFF",
+        "negativeBase": "#000000",
+        "title": "#1A1A1A",
+        "caption": "#A9A8B4",
+        "shadow": "#87878740",
+        "codeBg": "#3E3B41",
+        "cardBg": "#F8F8F8",
+        "buttonBlue": "#266CCD",
+        "joinBg": "#CDE2FA",
+        "third": "#918AE9",
+        "buttonBlueHover": "#1453AC",
+        "buttonBlueActive": "#19498B",
+        "textReverse": "#FFFFFF",
+        "footerTitle": "#A3A4B4",
+        "footerBg": "#E6E7ED",
+        "footerText": "#51575F",
+        "menuHover": "#F6F4FF",
+        "menuActive": "#EAE8FC",
+        "captionBold": "#878594",
+        "search": "#9C50FF"
+      },
+      "dark": {
+        "primary": "#737FE4",
+        "secondary": "#2A4586",
+        "link": "#006BFF",
+        "text": "#EDEDED",
+        "background": "#131313",
+        "containerBackground": "#1E1E1E",
+        "border": "#333333",
+        "success": "#4CAF50",
+        "warning": "#FF9800",
+        "error": "#F44336",
+        "info": "#2196F3",
+        "base": "#000000",
+        "negativeBase": "#FFFFFF",
+        "title": "#FAFAFA",
+        "caption": "#787878",
+        "shadow": "#62626240",
+        "codeBg": "#2E303C",
+        "cardBg": "#28272B",
+        "buttonBlue": "#0867AF",
+        "joinBg": "#2F363E",
+        "third": "#737FE4",
+        "buttonBlueHover": "#1453AC",
+        "buttonBlueActive": "#19498B",
+        "textReverse": "#2F2F2F",
+        "footerTitle": "#A3A4B4",
+        "footerBg": "#2E303C",
+        "footerText": "#FFFFFF",
+        "menuHover": "#3C404B",
+        "menuActive": "#283259",
+        "captionBold": "#878594",
+        "search": "#6FA4FF"
+      }
+    },
+    "typography": {
+      "h1": [
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 800,
+          "fontSize": "38px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        },
+        null,
+        null,
+        null,
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 800,
+          "fontSize": "52px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        }
+      ],
+      "h6Reg": [
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 400,
+          "fontSize": "18px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        },
+        null,
+        null,
+        null,
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 400,
+          "fontSize": "24px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        }
+      ],
+      "buttonL": [
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 800,
+          "fontSize": "17px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        },
+        null,
+        null,
+        null,
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 800,
+          "fontSize": "20px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        }
+      ],
+      "code": [
+        {
+          "fontFamily": "D2Coding",
+          "fontStyle": "normal",
+          "fontWeight": 700,
+          "fontSize": "13px",
+          "lineHeight": 1.5,
+          "letterSpacing": "-0.03em"
+        },
+        null,
+        null,
+        null,
+        {
+          "fontFamily": "D2Coding",
+          "fontStyle": "normal",
+          "fontWeight": 700,
+          "fontSize": "15px",
+          "lineHeight": 1.5,
+          "letterSpacing": "-0.03em"
+        }
+      ],
+      "buttonM": [
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 600,
+          "fontSize": "15px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        },
+        null,
+        null,
+        null,
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 600,
+          "fontSize": "17px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        }
+      ],
+      "h4": [
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 700,
+          "fontSize": "28px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        },
+        null,
+        null,
+        null,
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 700,
+          "fontSize": "36px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        }
+      ],
+      "body": [
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 500,
+          "fontSize": "14px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        },
+        null,
+        null,
+        null,
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 500,
+          "fontSize": "16px",
+          "lineHeight": 1.5,
+          "letterSpacing": "-0.03em"
+        }
+      ],
+      "h6": [
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 600,
+          "fontSize": "18px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        },
+        null,
+        null,
+        null,
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 600,
+          "fontSize": "24px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        }
+      ],
+      "textS": {
+        "fontFamily": "Pretendard",
+        "fontStyle": "normal",
+        "fontWeight": 500,
+        "fontSize": "15px",
+        "lineHeight": 1.4,
+        "letterSpacing": "-0.03em"
+      },
+      "buttonLbold": [
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 700,
+          "fontSize": "17px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        },
+        null,
+        null,
+        null,
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 700,
+          "fontSize": "18px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        }
+      ],
+      "buttonLsemiB": [
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 600,
+          "fontSize": "17px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        },
+        null,
+        null,
+        null,
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 600,
+          "fontSize": "18px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        }
+      ],
+      "h2": [
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 800,
+          "fontSize": "36px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        },
+        null,
+        null,
+        null,
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 800,
+          "fontSize": "48px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        }
+      ],
+      "h3": [
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 700,
+          "fontSize": "32px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        },
+        null,
+        null,
+        null,
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 700,
+          "fontSize": "42px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        }
+      ],
+      "h5": [
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 600,
+          "fontSize": "24px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        },
+        null,
+        null,
+        null,
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 600,
+          "fontSize": "30px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        }
+      ],
+      "buttonS": [
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 800,
+          "fontSize": "14px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        },
+        null,
+        null,
+        null,
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 700,
+          "fontSize": "15px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        }
+      ],
+      "caption": {
+        "fontFamily": "Pretendard",
+        "fontStyle": "normal",
+        "fontWeight": 500,
+        "fontSize": "14px",
+        "lineHeight": 1.4,
+        "letterSpacing": "-0.03em"
+      },
+      "small": [
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 300,
+          "fontSize": "11px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        },
+        null,
+        null,
+        null,
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 400,
+          "fontSize": "12px",
+          "lineHeight": 1.4,
+          "letterSpacing": "-0.03em"
+        }
+      ],
+      "buttonSmid": [
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 500,
+          "fontSize": "14px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        },
+        null,
+        null,
+        null,
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 500,
+          "fontSize": "15px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        }
+      ],
+      "captionBold": {
+        "fontFamily": "Pretendard",
+        "fontStyle": "normal",
+        "fontWeight": 700,
+        "fontSize": "14px",
+        "lineHeight": 1.3,
+        "letterSpacing": "-0.03em"
+      },
+      "textSbold": {
+        "fontFamily": "Pretendard",
+        "fontStyle": "normal",
+        "fontWeight": 700,
+        "fontSize": "15px",
+        "lineHeight": 1.4,
+        "letterSpacing": "-0.03em"
+      },
+      "textL": [
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 500,
+          "fontSize": "16px",
+          "lineHeight": 1.3,
+          "letterSpacing": "-0.03em"
+        },
+        null,
+        null,
+        null,
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 500,
+          "fontSize": "18px",
+          "lineHeight": 1.5,
+          "letterSpacing": "-0.03em"
+        }
+      ],
+      "footerMenu": [
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 500,
+          "fontSize": "13px",
+          "lineHeight": 1.4,
+          "letterSpacing": "-0.03em"
+        },
+        null,
+        null,
+        null,
+        {
+          "fontFamily": "Pretendard",
+          "fontStyle": "normal",
+          "fontWeight": 500,
+          "fontSize": "14px",
+          "lineHeight": 1.4,
+          "letterSpacing": "-0.03em"
+        }
+      ],
+      "bodyReg": {
+        "fontFamily": "Pretendard",
+        "fontStyle": "normal",
+        "fontWeight": 400,
+        "fontSize": "16px",
+        "lineHeight": 1.5,
+        "letterSpacing": "-0.03em"
+      },
+      "smallBold": {
+        "fontFamily": "Pretendard",
+        "fontStyle": "normal",
+        "fontWeight": 800,
+        "fontSize": "12px",
+        "lineHeight": 1.4,
+        "letterSpacing": "-0.03em"
+      }
+    }
+  }
+}
diff --git a/apps/landing/src/app/(detail)/docs/RightIndex.tsx b/apps/landing/src/app/(detail)/docs/RightIndex.tsx
index cfefdaba..1a16098f 100644
--- a/apps/landing/src/app/(detail)/docs/RightIndex.tsx
+++ b/apps/landing/src/app/(detail)/docs/RightIndex.tsx
@@ -1,65 +1,131 @@
-import { Box, Flex, Image, Text, VStack } from '@devup-ui/react'
+'use client'
+import { Box, css, Flex, Text, VStack } from '@devup-ui/react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useEffect, useState } from 'react'
 
-import { URL_PREFIX } from '../../../constants'
+function IndexMenu({
+  children,
+  selected,
+  sub,
+  onClick,
+}: {
+  children: React.ReactNode
+  selected?: boolean
+  sub?: boolean
+  onClick?: () => void
+}) {
+  return (
+    <Flex
+      alignItems="center"
+      cursor="pointer"
+      gap="10px"
+      onClick={onClick}
+      p={sub ? '4px 10px 4px 30px' : '4px 10px'}
+      role="group"
+    >
+      {selected && <Box bg="$primary" borderRadius="50%" boxSize="6px" />}
+      <Text
+        _groupHover={{ opacity: '0.8' }}
+        color={selected ? '$primary' : '$text'}
+        flex="1"
+        opacity={selected ? '0.8' : '0.6'}
+        typography="captionBold"
+      >
+        {children}
+      </Text>
+    </Flex>
+  )
+}
 
 export function RightIndex() {
+  const pathname = usePathname()
+  const editUrl = `https://github.com/dev-five-git/devup-ui/tree/main/apps/landing/src/app/(detail)/docs${pathname.split('docs')[1]}/page.mdx`
+  const [menus, setMenus] = useState<
+    {
+      text: string
+      sub?: boolean
+      onClick?: () => void
+    }[]
+  >([])
+  useEffect(() => {
+    const elements = document.querySelectorAll(
+      '.markdown-body h1, .markdown-body h2',
+    )
+    const menus = []
+    for (let i = 0; i < elements.length; i++) {
+      const element = elements[i]
+      const text = element.textContent!
+      menus.push({
+        text,
+        sub: element.tagName === 'H2',
+        onClick: () => {
+          element.scrollIntoView({ behavior: 'smooth' })
+        },
+      })
+    }
+    setMenus(menus)
+  }, [pathname])
+
   return (
     <VStack gap="16px" p="20px 16px" w="200px">
       <VStack>
-        <Flex alignItems="center" gap="10px" p="6px 0px">
+        <Flex alignItems="center" gap="10px" py="6px">
           <Text color="$text" flex="1" typography="captionBold">
             Contents
           </Text>
         </Flex>
-        <Flex alignItems="center" gap="10px" p="4px 10px">
-          <Box bg="$primary" borderRadius="100%" boxSize="6px" />
+        {menus.map((menu) => (
+          <IndexMenu key={menu.text} onClick={menu.onClick} sub={menu.sub}>
+            {menu.text}
+          </IndexMenu>
+        ))}
+      </VStack>
+      <Box bg="$border" h="1px" />
+      <Link
+        className={css({
+          textDecoration: 'none',
+          _hover: {
+            textDecoration: 'underline',
+            textDecorationColor: '$text',
+          },
+        })}
+        href={editUrl}
+        role="group"
+        target="_blank"
+      >
+        <Flex gap="4px">
           <Text
-            color="$primary"
+            _groupHover={{ color: '$text' }}
+            color="$caption"
             flex="1"
-            opacity="0.8"
-            typography="captionBold"
+            textAlign="right"
+            typography="small"
           >
-            Installation
-          </Text>
-        </Flex>
-        <Flex alignItems="center" gap="10px" p="4px 10px 30px">
-          <Text color="$text" flex="1" opacity="0.6" typography="caption">
-            General Guides
-          </Text>
-        </Flex>
-        <Flex alignItems="center" gap="10px" p="4px 10px 30px">
-          <Text color="$text" flex="1" opacity="0.6" typography="caption">
-            Framework Guides
-          </Text>
-        </Flex>
-        <Flex alignItems="center" gap="10px" p="4px 10px">
-          <Text color="$text" flex="1" opacity="0.6" typography="caption">
-            Next Steps
-          </Text>
-        </Flex>
-        <Flex alignItems="center" gap="10px" p="4px 10px">
-          <Text color="$text" flex="1" opacity="0.6" typography="caption">
-            Playground
-          </Text>
-        </Flex>
-        <Flex alignItems="center" gap="10px" p="4px 10px">
-          <Text color="$text" flex="1" opacity="0.6" typography="caption">
-            Acknowledgement
+            Edit this page
           </Text>
+          <svg
+            className={css({
+              color: '$caption',
+              _groupHover: { color: '$text' },
+            })}
+            fill="none"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M13.3344 8.0656H12.1499V5.34691L9.02246 8.48087L8.18399 7.64415L11.3037 4.51788H8.60216V3.33334H13.3344V8.0656Z"
+              fill="currentColor"
+            />
+            <path
+              d="M11.49 9.29411V12.8235H3.84297V5.17647H7.37239V4H3.84297C3.19592 4 2.6665 4.52941 2.6665 5.17647V12.8235C2.6665 13.4706 3.19592 14 3.84297 14H11.49C12.1371 14 12.6665 13.4706 12.6665 12.8235V9.29411H11.49Z"
+              fill="currentColor"
+            />
+          </svg>
         </Flex>
-      </VStack>
-      <Box bg="undefined" h="1px" />
-      <Flex gap="4px">
-        <Text color="$caption" flex="1" textAlign="right" typography="small">
-          Edit this page
-        </Text>
-        <Image
-          bg="$caption"
-          boxSize="16px"
-          maskImage={`url(${URL_PREFIX}/outlink.svg)`}
-          maskSize="100%"
-        />
-      </Flex>
+      </Link>
     </VStack>
   )
 }
diff --git a/apps/landing/src/app/(detail)/docs/layout.tsx b/apps/landing/src/app/(detail)/docs/layout.tsx
index a2d660ff..db37239a 100644
--- a/apps/landing/src/app/(detail)/docs/layout.tsx
+++ b/apps/landing/src/app/(detail)/docs/layout.tsx
@@ -14,7 +14,7 @@ export default function DetailLayout({
         <Box p="20px 16px" w="220px">
           <LeftMenu />
         </Box>
-        <Box flex={1} px="60px" py="40px">
+        <Box className="markdown-body" flex={1} px="60px" py="40px">
           {children}
         </Box>
         <RightIndex />
diff --git a/apps/landing/src/app/(detail)/team/TeamCard.tsx b/apps/landing/src/app/(detail)/team/TeamCard.tsx
new file mode 100644
index 00000000..5b4f60f4
--- /dev/null
+++ b/apps/landing/src/app/(detail)/team/TeamCard.tsx
@@ -0,0 +1,68 @@
+import { Box, Flex, Image, Text, VStack } from '@devup-ui/react'
+import Link from 'next/link'
+
+import { Github } from '../../../components/Header/Github'
+import { Insta } from '../../../components/Header/Insta'
+
+interface TeamCardProps {
+  userId: string
+  role: string
+  instaId?: string
+}
+
+export async function TeamCard({ userId, role, instaId }: TeamCardProps) {
+  const data = await fetch(`https://api.github.com/users/${userId}`).then(
+    (res) => res.json(),
+  )
+  const avatarUrl = data.avatar_url
+  const name = data.name
+  return (
+    <VStack
+      alignItems="flex-end"
+      bg="$background"
+      borderRadius="16px"
+      boxShadow="0px 0px 6px 0px rgba(0, 0, 0, 0.18)"
+      flex="1"
+      justifyContent="space-between"
+      overflow="hidden"
+      pb="24px"
+      pos="relative"
+    >
+      <Box bg="#eccafa" h="64px" pos="absolute" w="100%" />
+      <Flex
+        justifyContent="space-between"
+        mt="24px"
+        px="24px"
+        w="100%"
+        zIndex={1}
+      >
+        <VStack gap="12px">
+          <Image
+            bg="#eccafa"
+            borderRadius="100%"
+            boxSize="80px"
+            src={avatarUrl}
+          />
+          <VStack gap="4px">
+            <Text color="$title" typography="buttonLbold">
+              {name}
+            </Text>
+            <Text color="$caption" typography="caption">
+              {role}
+            </Text>
+          </VStack>
+        </VStack>
+        <Flex alignItems="end" gap="10px">
+          <Link href={`https://github.com/${userId}`} target="_blank">
+            <Github />
+          </Link>
+          {instaId && (
+            <Link href={`https://instagram.com/${instaId}`} target="_blank">
+              <Insta />
+            </Link>
+          )}
+        </Flex>
+      </Flex>
+    </VStack>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/team/page.mdx b/apps/landing/src/app/(detail)/team/page.mdx
index 788f860d..0b58811c 100644
--- a/apps/landing/src/app/(detail)/team/page.mdx
+++ b/apps/landing/src/app/(detail)/team/page.mdx
@@ -1,14 +1,10 @@
-## Team
-a
-## What is Devup UI?
-## What is Devup UI?
-## What is Devup UI?
-## What is Devup UI?
-## What is Devup UI?
-## What is Devup UI?
-## What is Devup UI?
-## What is Devup UI?
-## What is Devup UI?
-## What is Devup UI?
-## What is Devup UI?
-## What is Devup UI?
+# Team
+
+We are a team committed to developing the most optimized CSS-in-JS solutions.
+
+---
+
+import {TeamCard} from "./TeamCard";
+
+<TeamCard role={"FULL-STACK"} userId={"owjs3901"} instaId={"owjs3901"}/>
+
diff --git a/apps/landing/src/app/layout.tsx b/apps/landing/src/app/layout.tsx
index da952f6c..7557fc73 100644
--- a/apps/landing/src/app/layout.tsx
+++ b/apps/landing/src/app/layout.tsx
@@ -23,7 +23,7 @@ export default function RootLayout({
       <head>
         <ThemeScript auto />
         <meta content="width=device-width, initial-scale=1.0" name="viewport" />
-        <base href={URL_PREFIX} />
+        {URL_PREFIX && <base href={URL_PREFIX} />}
         <link href={URL_PREFIX + '/favicon.ico'} rel="shortcut icon" />
       </head>
       <body
diff --git a/apps/landing/src/app/markdown.css b/apps/landing/src/app/markdown.css
index 0ea90bba..a98ca728 100644
--- a/apps/landing/src/app/markdown.css
+++ b/apps/landing/src/app/markdown.css
@@ -1,3 +1,4 @@
+@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
 
 table {
     border-collapse: collapse;
diff --git a/apps/landing/src/components/Footer.tsx b/apps/landing/src/components/Footer.tsx
index 6e389b2c..ce1aa959 100644
--- a/apps/landing/src/components/Footer.tsx
+++ b/apps/landing/src/components/Footer.tsx
@@ -1,76 +1,119 @@
-import { Flex, Image, Text, VStack } from '@devup-ui/react'
+import { Box, css, Flex, Image, Text, VStack } from '@devup-ui/react'
+import Link from 'next/link'
 
 import { URL_PREFIX } from '../constants'
 
 export function Footer() {
   return (
-    <VStack bg="$footerBg" gap="80px">
-      <Flex justifyContent="space-between">
-        <VStack flex="1" gap="20px">
-          <Text color="$footerTitle" typography="buttonS">
-            메뉴 타이틀 1
-          </Text>
-          <VStack gap="14px">
-            <Text color="$footerText" typography="footerMenu">
-              상세 메뉴 1
-            </Text>
-            <Text color="$footerText" typography="footerMenu">
-              상세 메뉴 2
-            </Text>
-            <Text color="$footerText" typography="footerMenu">
-              상세 메뉴 3
-            </Text>
-            <Text color="$footerText" typography="footerMenu">
-              상세 메뉴 4
+    <Box as="footer" bg="$footerBg" px="16px" py={['30px', '60px']}>
+      <VStack gap={['50px', '80px']} maxW="1280px" mx="auto">
+        <Flex
+          flexDir={['column', 'row']}
+          gap={['10px', 0]}
+          justifyContent="space-between"
+        >
+          <VStack flex="1" gap={[1, 0]}>
+            <Link
+              className={css({ textDecoration: 'none' })}
+              href={URL_PREFIX + '/docs/overview'}
+            >
+              <Text color="$footerTitle" typography="buttonS">
+                Docs
+              </Text>
+            </Link>
+            <VStack gap="14px">
+              <Link
+                className={css({ textDecoration: 'none' })}
+                href={URL_PREFIX + '/docs/overview'}
+              >
+                <Text color="$footerText" typography="footerMenu">
+                  Overview
+                </Text>
+              </Link>
+
+              <Link
+                className={css({ textDecoration: 'none' })}
+                href={URL_PREFIX + '/docs/installation'}
+              >
+                <Text color="$footerText" typography="footerMenu">
+                  Installation
+                </Text>
+              </Link>
+              <Link
+                className={css({ textDecoration: 'none' })}
+                href={URL_PREFIX + '/docs/features'}
+              >
+                <Text color="$footerText" typography="footerMenu">
+                  Features
+                </Text>
+              </Link>
+              <Link
+                className={css({ textDecoration: 'none' })}
+                href={URL_PREFIX + '/docs/api/box'}
+              >
+                <Text color="$footerText" typography="footerMenu">
+                  API
+                </Text>
+              </Link>
+              <Link
+                className={css({ textDecoration: 'none' })}
+                href={URL_PREFIX + '/docs/devup/devup-json'}
+              >
+                <Text color="$footerText" typography="footerMenu">
+                  Devup
+                </Text>
+              </Link>
+            </VStack>
+          </VStack>
+          <VStack flex="1" gap="20px">
+            <Link
+              className={css({ textDecoration: 'none' })}
+              href={URL_PREFIX + '/team'}
+            >
+              <Text color="$footerTitle" typography="buttonS">
+                Team
+              </Text>
+            </Link>
+          </VStack>
+        </Flex>
+        <Flex
+          alignItems={['center', 'flex-end']}
+          flexDir={['column', 'row']}
+          justifyContent="space-between"
+        >
+          <Link href={URL_PREFIX + '/'}>
+            <Image
+              alt="white-logo"
+              src={URL_PREFIX + '/white-logo.svg'}
+              w={['164px', '204px']}
+            />
+          </Link>
+          <VStack
+            alignItems={['center', 'flex-end']}
+            gap="10px"
+            pt={['20px', 0]}
+          >
+            <Text
+              color="$footerText"
+              textAlign={['center', 'right']}
+              typography="small"
+            >
+              상호: (주)데브파이브 | 대표자명: 오정민 |{' '}
+              <Box as="br" display={[null, null, 'none']} />
+              사업자등록번호: 사업자등록번호: 868-86-03159
+              <Box as="br" display={[null, null, 'none']} />
+              주소: 경기 고양시 덕양구 마상로140번길 81 4층
             </Text>
-            <Text color="$footerText" typography="footerMenu">
-              상세 메뉴 5
+            <Text
+              color="$footerTitle"
+              textAlign={['center', 'right']}
+              typography="small"
+            >
+              Copyright © 2021-2024 데브파이브. All Rights Reserved.
             </Text>
           </VStack>
-        </VStack>
-        <VStack flex="1" gap="20px">
-          <Text color="$footerTitle" typography="buttonS">
-            메뉴 타이틀 2
-          </Text>
-          <Text color="$footerText" typography="footerMenu">
-            상세 메뉴 1
-          </Text>
-          <Text color="$footerText" typography="footerMenu">
-            상세 메뉴 2
-          </Text>
-        </VStack>
-        <VStack flex="1" gap="20px">
-          <Text color="$footerTitle" typography="buttonS">
-            메뉴 타이틀 3
-          </Text>
-          <Text color="$footerText" typography="footerMenu">
-            상세 메뉴 1
-          </Text>
-          <Text color="$footerText" typography="footerMenu">
-            상세 메뉴 2
-          </Text>
-          <Text color="$footerText" typography="footerMenu">
-            상세 메뉴 3
-          </Text>
-          <Text color="$footerText" typography="footerMenu">
-            상세 메뉴 4
-          </Text>
-        </VStack>
-      </Flex>
-      <Flex alignItems="flex-end" justifyContent="space-between">
-        <Flex alignItems="flex-end">
-          <Image alt="white-logo" src={URL_PREFIX + '/white-logo.svg'} />
         </Flex>
-        <VStack alignItems="flex-end" gap="10px">
-          <Text color="$footerText" textAlign="right" typography="small">
-            상호: (주)데브파이브 | 대표자명: 오정민 | 사업자등록번호:
-            868-86-03159 주소: 경기 고양시 덕양구 마상로140번길 81 4층
-          </Text>
-          <Text color="$footerTitle" textAlign="right" typography="small">
-            Copyright © 2021-2024 데브파이브. All Rights Reserved.
-          </Text>
-        </VStack>
-      </Flex>
-    </VStack>
+      </VStack>
+    </Box>
   )
 }
diff --git a/apps/landing/src/components/Header/Github.tsx b/apps/landing/src/components/Header/Github.tsx
index 3012d37a..87fdf3fc 100644
--- a/apps/landing/src/components/Header/Github.tsx
+++ b/apps/landing/src/components/Header/Github.tsx
@@ -1,30 +1,21 @@
 import { css } from '@devup-ui/react'
-import Link from 'next/link'
 
 export function Github() {
   return (
-    <Link
+    <svg
       className={css({
-        textDecoration: 'none',
+        color: '$text',
       })}
-      href="https://github.com/dev-five-git/devup-ui"
-      target="_blank"
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <svg
-        className={css({
-          color: '$text',
-        })}
-        fill="none"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 16.42 4.87 20.17 8.84 21.5C9.34 21.58 9.5 21.27 9.5 21V19.31C6.73 19.91 6.14 17.97 6.14 17.97C5.68 16.81 5.03 16.5 5.03 16.5C4.12 15.88 5.1 15.9 5.1 15.9C6.1 15.97 6.63 16.93 6.63 16.93C7.5 18.45 8.97 18 9.54 17.76C9.63 17.11 9.89 16.67 10.17 16.42C7.95 16.17 5.62 15.31 5.62 11.5C5.62 10.39 6 9.5 6.65 8.79C6.55 8.54 6.2 7.5 6.75 6.15C6.75 6.15 7.59 5.88 9.5 7.17C10.29 6.95 11.15 6.84 12 6.84C12.85 6.84 13.71 6.95 14.5 7.17C16.41 5.88 17.25 6.15 17.25 6.15C17.8 7.5 17.45 8.54 17.35 8.79C18 9.5 18.38 10.39 18.38 11.5C18.38 15.32 16.04 16.16 13.81 16.41C14.17 16.72 14.5 17.33 14.5 18.26V21C14.5 21.27 14.66 21.59 15.17 21.5C19.14 20.16 22 16.42 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z"
-          fill="currentColor"
-        />
-      </svg>
-    </Link>
+      <path
+        d="M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 16.42 4.87 20.17 8.84 21.5C9.34 21.58 9.5 21.27 9.5 21V19.31C6.73 19.91 6.14 17.97 6.14 17.97C5.68 16.81 5.03 16.5 5.03 16.5C4.12 15.88 5.1 15.9 5.1 15.9C6.1 15.97 6.63 16.93 6.63 16.93C7.5 18.45 8.97 18 9.54 17.76C9.63 17.11 9.89 16.67 10.17 16.42C7.95 16.17 5.62 15.31 5.62 11.5C5.62 10.39 6 9.5 6.65 8.79C6.55 8.54 6.2 7.5 6.75 6.15C6.75 6.15 7.59 5.88 9.5 7.17C10.29 6.95 11.15 6.84 12 6.84C12.85 6.84 13.71 6.95 14.5 7.17C16.41 5.88 17.25 6.15 17.25 6.15C17.8 7.5 17.45 8.54 17.35 8.79C18 9.5 18.38 10.39 18.38 11.5C18.38 15.32 16.04 16.16 13.81 16.41C14.17 16.72 14.5 17.33 14.5 18.26V21C14.5 21.27 14.66 21.59 15.17 21.5C19.14 20.16 22 16.42 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z"
+        fill="currentColor"
+      />
+    </svg>
   )
 }
diff --git a/apps/landing/src/components/Header/Insta.tsx b/apps/landing/src/components/Header/Insta.tsx
new file mode 100644
index 00000000..be55b7eb
--- /dev/null
+++ b/apps/landing/src/components/Header/Insta.tsx
@@ -0,0 +1,21 @@
+import { css } from '@devup-ui/react'
+
+export function Insta() {
+  return (
+    <svg
+      className={css({
+        color: '$text',
+      })}
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13.0276 2C14.1526 2.003 14.7236 2.009 15.2166 2.023L15.4106 2.03C15.6346 2.038 15.8556 2.048 16.1226 2.06C17.1866 2.11 17.9126 2.278 18.5496 2.525C19.2096 2.779 19.7656 3.123 20.3216 3.678C20.8303 4.17773 21.2238 4.78247 21.4746 5.45C21.7216 6.087 21.8896 6.813 21.9396 7.878C21.9516 8.144 21.9616 8.365 21.9696 8.59L21.9756 8.784C21.9906 9.276 21.9966 9.847 21.9986 10.972L21.9996 11.718V13.028C22.002 13.7574 21.9944 14.4868 21.9766 15.216L21.9706 15.41C21.9626 15.635 21.9526 15.856 21.9406 16.122C21.8906 17.187 21.7206 17.912 21.4746 18.55C21.2238 19.2175 20.8303 19.8223 20.3216 20.322C19.8219 20.8307 19.2171 21.2242 18.5496 21.475C17.9126 21.722 17.1866 21.89 16.1226 21.94L15.4106 21.97L15.2166 21.976C14.7236 21.99 14.1526 21.997 13.0276 21.999L12.2816 22H10.9726C10.2429 22.0026 9.51312 21.9949 8.78359 21.977L8.58959 21.971C8.3522 21.962 8.11487 21.9517 7.87759 21.94C6.81359 21.89 6.08759 21.722 5.44959 21.475C4.78242 21.2241 4.17804 20.8306 3.67859 20.322C3.16954 19.8224 2.7757 19.2176 2.52459 18.55C2.27759 17.913 2.10959 17.187 2.05959 16.122L2.02959 15.41L2.02459 15.216C2.00616 14.4868 1.99782 13.7574 1.99959 13.028V10.972C1.99682 10.2426 2.00416 9.5132 2.02159 8.784L2.02859 8.59C2.03659 8.365 2.04659 8.144 2.05859 7.878C2.10859 6.813 2.27659 6.088 2.52359 5.45C2.77529 4.7822 3.16982 4.17744 3.67959 3.678C4.17875 3.16955 4.78278 2.77607 5.44959 2.525C6.08759 2.278 6.81259 2.11 7.87759 2.06C8.14359 2.048 8.36559 2.038 8.58959 2.03L8.78359 2.024C9.51278 2.00623 10.2422 1.99857 10.9716 2.001L13.0276 2ZM11.9996 7C10.6735 7 9.40174 7.52678 8.46406 8.46447C7.52638 9.40215 6.99959 10.6739 6.99959 12C6.99959 13.3261 7.52638 14.5979 8.46406 15.5355C9.40174 16.4732 10.6735 17 11.9996 17C13.3257 17 14.5974 16.4732 15.5351 15.5355C16.4728 14.5979 16.9996 13.3261 16.9996 12C16.9996 10.6739 16.4728 9.40215 15.5351 8.46447C14.5974 7.52678 13.3257 7 11.9996 7ZM11.9996 9C12.3936 8.99993 12.7837 9.07747 13.1477 9.22817C13.5117 9.37887 13.8424 9.5998 14.1211 9.87833C14.3997 10.1569 14.6207 10.4875 14.7715 10.8515C14.9224 11.2154 15 11.6055 15.0001 11.9995C15.0002 12.3935 14.9226 12.7836 14.7719 13.1476C14.6212 13.5116 14.4003 13.8423 14.1218 14.121C13.8432 14.3996 13.5126 14.6206 13.1486 14.7714C12.7847 14.9223 12.3946 14.9999 12.0006 15C11.2049 15 10.4419 14.6839 9.87927 14.1213C9.31666 13.5587 9.00059 12.7956 9.00059 12C9.00059 11.2044 9.31666 10.4413 9.87927 9.87868C10.4419 9.31607 11.2049 9 12.0006 9M17.2506 5.5C16.9191 5.5 16.6011 5.6317 16.3667 5.86612C16.1323 6.10054 16.0006 6.41848 16.0006 6.75C16.0006 7.08152 16.1323 7.39946 16.3667 7.63388C16.6011 7.8683 16.9191 8 17.2506 8C17.5821 8 17.9001 7.8683 18.1345 7.63388C18.3689 7.39946 18.5006 7.08152 18.5006 6.75C18.5006 6.41848 18.3689 6.10054 18.1345 5.86612C17.9001 5.6317 17.5821 5.5 17.2506 5.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/Header/index.tsx b/apps/landing/src/components/Header/index.tsx
index 64355e6c..0fb7169c 100644
--- a/apps/landing/src/components/Header/index.tsx
+++ b/apps/landing/src/components/Header/index.tsx
@@ -19,7 +19,15 @@ export function Header() {
   const top = (
     <Flex alignItems="center">
       <Flex alignItems="center" px="10px">
-        <Github />
+        <Link
+          className={css({
+            textDecoration: 'none',
+          })}
+          href="https://github.com/dev-five-git/devup-ui"
+          target="_blank"
+        >
+          <Github />
+        </Link>
       </Flex>
       <Flex alignItems="center" px="10px">
         <Discord />