diff --git a/docs/src/__generated__/gatsby-schema.graphql b/docs/src/__generated__/gatsby-schema.graphql
index 44f4c90eb..af2357400 100644
--- a/docs/src/__generated__/gatsby-schema.graphql
+++ b/docs/src/__generated__/gatsby-schema.graphql
@@ -1728,12 +1728,14 @@ input SiteFieldSelector {
   children: NodeFieldSelector
   flags: SiteFlagsFieldSelector
   graphqlTypegen: SiteGraphqlTypegenFieldSelector
+  host: FieldSelectorEnum
   id: FieldSelectorEnum
   internal: InternalFieldSelector
   jsxRuntime: FieldSelectorEnum
   parent: NodeFieldSelector
   pathPrefix: FieldSelectorEnum
   polyfill: FieldSelectorEnum
+  port: FieldSelectorEnum
   siteMetadata: SiteSiteMetadataFieldSelector
   trailingSlash: FieldSelectorEnum
 }
@@ -2008,12 +2010,14 @@ input SiteSortInput {
   children: NodeSortInput
   flags: SiteFlagsSortInput
   graphqlTypegen: SiteGraphqlTypegenSortInput
+  host: SortOrderEnum
   id: SortOrderEnum
   internal: InternalSortInput
   jsxRuntime: SortOrderEnum
   parent: NodeSortInput
   pathPrefix: SortOrderEnum
   polyfill: SortOrderEnum
+  port: SortOrderEnum
   siteMetadata: SiteSiteMetadataSortInput
   trailingSlash: SortOrderEnum
 }
diff --git a/docs/src/__generated__/gatsby-types.d.ts b/docs/src/__generated__/gatsby-types.d.ts
index ee00cad77..238504644 100644
--- a/docs/src/__generated__/gatsby-types.d.ts
+++ b/docs/src/__generated__/gatsby-types.d.ts
@@ -3361,7 +3361,7 @@ type SEOQuery = { readonly ogImage: { readonly gatsbyImageData: import('gatsby-p
 type SidebarQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-type SidebarQuery = { readonly allComponentMetaJson: { readonly nodes: ReadonlyArray<{ readonly name: string | null, readonly group: string | null, readonly alias: string | null, readonly platform: { readonly docs: { readonly overview: { readonly status: string | null, readonly mdx: { readonly childMdx: { readonly frontmatter: { readonly slug: string | null } | null } | null } | null } | null } | null } | null }> }, readonly allPrimitiveMetaJson: { readonly nodes: ReadonlyArray<{ readonly name: string | null, readonly description: string | null, readonly primitive: { readonly childMdx: { readonly frontmatter: { readonly slug: string | null } | null } | null } | null }> } };
+type SidebarQuery = { readonly allComponentMetaJson: { readonly nodes: ReadonlyArray<{ readonly name: string | null, readonly group: string | null, readonly alias: string | null, readonly platform: { readonly docs: { readonly overview: { readonly status: string | null, readonly mdx: { readonly childMdx: { readonly frontmatter: { readonly slug: string | null } | null } | null } | null } | null } | null } | null }> } };
 
 
 }
diff --git a/docs/src/components/ComponentDocumentCategoryNav.tsx b/docs/src/components/ComponentDocumentCategoryNav.tsx
index 5dea18a5e..ec0788023 100644
--- a/docs/src/components/ComponentDocumentCategoryNav.tsx
+++ b/docs/src/components/ComponentDocumentCategoryNav.tsx
@@ -1,7 +1,9 @@
 import { Link } from "gatsby";
+import * as React from "react";
 
 import * as style from "./ComponentDocumentCategoryNav.css";
 
+type Category = "overview" | "usage" | "style";
 interface ComponentDocumentCategoryNavProps {
   currentPath: string;
 }
@@ -9,26 +11,51 @@ interface ComponentDocumentCategoryNavProps {
 const ComponentDocumentCategoryNav = ({
   currentPath,
 }: ComponentDocumentCategoryNavProps) => {
+  const [currentCategory, setCurrentCategory] = React.useState<Category>();
+
+  const isOverview = /overview/g.test(currentPath);
+  const isUsage = /usage/g.test(currentPath);
+  const isStyle = /style/g.test(currentPath);
+
+  // NOTE: /component/alert-dialog/overview/ -> /component/alert-dialog/
+  const removedCategoryPath = currentPath.split("/").slice(0, -2).join("/");
+
+  React.useEffect(() => {
+    if (isOverview) {
+      setCurrentCategory("overview");
+      return;
+    }
+    if (isUsage) {
+      setCurrentCategory("usage");
+      return;
+    }
+    if (isStyle) {
+      setCurrentCategory("style");
+      return;
+    }
+    setCurrentCategory(undefined);
+  }, []);
+
   return (
     <>
       <nav className={style.navContainer}>
         <Link
           className={style.navLink({
-            active: currentPath.includes("overview"),
+            active: currentCategory === "overview",
           })}
-          to={`${currentPath.split("/").slice(0, -2).join("/")}/overview`}
+          to={`${removedCategoryPath}/overview`}
         >
           <p className={style.navLinkText}>Overview</p>
         </Link>
         <Link
-          className={style.navLink({ active: currentPath.includes("usage") })}
-          to={`${currentPath.split("/").slice(0, -2).join("/")}/usage`}
+          className={style.navLink({ active: currentCategory === "usage" })}
+          to={`${removedCategoryPath}/usage`}
         >
           <p className={style.navLinkText}>Usage</p>
         </Link>
         <Link
-          className={style.navLink({ active: currentPath.includes("style") })}
-          to={`${currentPath.split("/").slice(0, -2).join("/")}/style`}
+          className={style.navLink({ active: currentCategory === "style" })}
+          to={`${removedCategoryPath}/style`}
         >
           <p className={style.navLinkText}>Style</p>
         </Link>
diff --git a/docs/src/components/sidebar/Sidebar.tsx b/docs/src/components/sidebar/Sidebar.tsx
index 465aa9b6a..d5545a219 100644
--- a/docs/src/components/sidebar/Sidebar.tsx
+++ b/docs/src/components/sidebar/Sidebar.tsx
@@ -35,27 +35,17 @@ const SidebarItemContainer = ({ logo }: { logo?: boolean }) => {
           }
         }
       }
-
-      allPrimitiveMetaJson(sort: { name: ASC }) {
-        nodes {
-          name
-          description
-          primitive {
-            childMdx {
-              frontmatter {
-                slug
-              }
-            }
-          }
-        }
-      }
     }
   `);
 
-  const currentPath = typeof window !== "undefined" ? location.pathname : "";
-  const componentData = data.allComponentMetaJson.nodes;
-  const primitiveData = data.allPrimitiveMetaJson.nodes;
+  const [currentPath, setCurrentPath] = useState<string>("");
+  const currentPathname =
+    typeof window !== "undefined" ? window.location.pathname : "";
+  useEffect(() => {
+    setCurrentPath(currentPathname);
+  }, [currentPathname]);
 
+  const componentData = data.allComponentMetaJson.nodes;
   const groupedComponentData = groupby(componentData, (data) =>
     !data.group ? data.name : data.group,
   );
@@ -74,27 +64,24 @@ const SidebarItemContainer = ({ logo }: { logo?: boolean }) => {
       <SidebarTitleWithNoLink title="overview" />
 
       <SidebarItem
-        currentPath={currentPath}
         to="/overview/progress-board"
         name="Progress Board"
-        title="overview"
+        highlight={currentPath === "/overview/progress-board/"}
         onClick={closeSidebar}
       />
 
       <SidebarTitleWithNoLink title="foundation" />
 
       <SidebarItem
-        currentPath={currentPath}
         to="/foundation/color"
         name="Color"
-        title="foundation"
+        highlight={currentPath === "/foundation/color/"}
         onClick={closeSidebar}
       />
       <SidebarItem
-        currentPath={currentPath}
         to="/foundation/typography"
+        highlight={currentPath === "/foundation/typography/"}
         name="Typography"
-        title="foundation"
         onClick={closeSidebar}
       />
 
@@ -106,14 +93,18 @@ const SidebarItemContainer = ({ logo }: { logo?: boolean }) => {
           return (
             <SidebarCollapse title={groupName}>
               {groupItems?.map((item) => {
+                const convertedName = item?.name
+                  ?.replaceAll(" ", "-")
+                  .toLowerCase()!;
+                const regex = new RegExp(`^/component/${convertedName}/`, "g");
+
                 if (item?.platform?.docs?.overview?.status! === "todo") {
                   return (
                     <SidebarItem
                       key={`${item?.name}-todo`}
-                      currentPath={currentPath}
+                      highlight={regex.test(currentPath)}
                       to={item?.name!}
                       name={item?.name!}
-                      title="component"
                       onClick={closeSidebar}
                       status={item?.platform?.docs?.overview?.status!}
                       hasDeps
@@ -124,14 +115,13 @@ const SidebarItemContainer = ({ logo }: { logo?: boolean }) => {
                 return (
                   <SidebarItem
                     key={`${item?.name}-done-or-wip`}
-                    currentPath={currentPath}
                     to={
                       item?.platform?.docs?.overview?.mdx?.childMdx?.frontmatter
                         ?.slug!
                     }
                     alias={item?.alias!}
+                    highlight={regex.test(currentPath)}
                     name={item?.name!}
-                    title="component"
                     onClick={closeSidebar}
                     status={item?.platform?.docs?.overview?.status! as Status}
                     hasDeps
@@ -142,36 +132,27 @@ const SidebarItemContainer = ({ logo }: { logo?: boolean }) => {
           );
         }
 
+        const convertedName = groupItems[0]?.name
+          ?.replaceAll(" ", "-")
+          .toLowerCase()!;
+        const regex = new RegExp(`^/component/${convertedName}/`, "g");
+
         // non-그룹
         return (
           <SidebarItem
             key={`${groupItems[0]?.name}-only-one-component`}
-            currentPath={currentPath}
             to={
               groupItems[0]?.platform?.docs?.overview?.mdx?.childMdx
                 ?.frontmatter?.slug!
             }
             name={groupItems[0]?.name!}
             alias={groupItems[0]?.alias!}
-            title="component"
+            highlight={regex.test(currentPath)}
             onClick={closeSidebar}
             status={groupItems[0]?.platform?.docs?.overview?.status! as Status}
           />
         );
       })}
-
-      <SidebarTitleWithLink title="primitive" onClick={closeSidebar} />
-
-      {primitiveData!.map((node) => (
-        <SidebarItem
-          key={`${node.name!}-primitive-done-or-in-progress`}
-          currentPath={currentPath}
-          to={node?.primitive?.childMdx?.frontmatter?.slug!}
-          name={node.name!}
-          title="primitive"
-          onClick={closeSidebar}
-        />
-      ))}
     </div>
   );
 };
diff --git a/docs/src/components/sidebar/SidebarItem.tsx b/docs/src/components/sidebar/SidebarItem.tsx
index 340ca9877..a3518268b 100644
--- a/docs/src/components/sidebar/SidebarItem.tsx
+++ b/docs/src/components/sidebar/SidebarItem.tsx
@@ -1,35 +1,30 @@
 import type { GatsbyLinkProps } from "gatsby";
 import { Link } from "gatsby";
+import * as React from "react";
 
 import * as style from "./SidebarItem.css";
 
 type Status = "done" | "in-progress" | "todo";
 interface SidebarItemProps {
-  /**
-   * sidebar에 같은 이름으로 존재하는 컴포넌트가 있기 때문에 상위 카테고리로 구별해서 하이라이팅 해줌.
-   */
-  title: "component" | "primitive" | "foundation" | "overview";
   name: string;
+  highlight?: boolean;
   alias?: string;
-  currentPath: string;
   status?: Status;
   hasDeps?: boolean;
 }
 
+// localhost:8000/component/alert-dialog/overview/
+// {domain}/{category}/{component}/{section}/
 const SidebarItem = ({
-  currentPath,
   name,
-  title,
   alias,
   status,
   to,
+  highlight,
   hasDeps,
   onClick,
   onMouseEnter,
 }: GatsbyLinkProps<{}> & SidebarItemProps) => {
-  const currentPathName = currentPath.split("/")[2];
-  const currentname = name.replaceAll(" ", "-").toLowerCase();
-  const active = currentPathName === currentname && currentPath.includes(title);
   const displayName = alias || name;
 
   return (
@@ -42,7 +37,7 @@ const SidebarItem = ({
       <li
         className={style.item({
           disable: status === "todo",
-          highlight: active,
+          highlight,
           hasDeps,
         })}
       >