diff --git a/apps/wow-docs/app/component/button/_component/ComponentTab.tsx b/apps/wow-docs/app/component/button/_component/ComponentTab.tsx
new file mode 100644
index 00000000..827239e0
--- /dev/null
+++ b/apps/wow-docs/app/component/button/_component/ComponentTab.tsx
@@ -0,0 +1,119 @@
+import Card from "@components/Card";
+import Space from "@components/Space";
+import Text from "@components/Text";
+import { Flex, Grid } from "@styled-system/jsx";
+import Button from "wowds-ui/Button";
+
+type ButtonProps = {
+  key: number;
+  variant?: "outline" | "solid" | "sub";
+  disabled?: boolean;
+  "data-hover"?: boolean;
+  "data-active"?: boolean;
+};
+
+const largeButtons: ButtonProps[] = [
+  { key: 1 },
+  { key: 2, variant: "outline" },
+  { key: 3, disabled: true },
+  { key: 4, variant: "outline", disabled: true },
+  { key: 5, "data-hover": true },
+  { key: 6, variant: "outline", "data-hover": true },
+  { key: 7, "data-active": true },
+  { key: 8, variant: "outline", "data-active": true },
+];
+
+const smallButtons: ButtonProps[] = [
+  { key: 1 },
+  { key: 2, disabled: true },
+  { key: 3, "data-hover": true },
+  { key: 4, "data-active": true },
+];
+
+const ComponentTab = () => {
+  return (
+    <>
+      <Space height={48} />
+      <Text as="h2" typo="display2WebPage">
+        Component
+      </Text>
+      <Space height={40} />
+
+      <Text as="h3" typo="headingWebPage">
+        L size
+      </Text>
+      <Space height={20} />
+      <Card isBackground>
+        <Grid
+          gridTemplateColumns="repeat(2, 1fr)"
+          justifyItems="center"
+          maxWidth={328 * 2}
+          width="100%"
+        >
+          <Text color="sub" typo="body1">
+            Solid
+          </Text>
+          <Text color="sub" typo="body1">
+            Outline
+          </Text>
+          {largeButtons.map((props) => (
+            <Button {...props}>Button1</Button>
+          ))}
+        </Grid>
+      </Card>
+      <Space height={40} />
+
+      <Text as="h3" typo="headingWebPage">
+        S size
+      </Text>
+      <Space height={20} />
+      <Card
+        isBackground
+        contentStyle={{
+          flexDirection: "column",
+          gap: 20,
+        }}
+      >
+        <Flex alignItems="center" direction="column" gap={12}>
+          <Text color="sub" typo="body1">
+            Outline
+          </Text>
+          <Flex gap="1rem">
+            {smallButtons.map((props) => (
+              <Button size="sm" variant="outline" {...props}>
+                Button2
+              </Button>
+            ))}
+          </Flex>
+        </Flex>
+        <Flex alignItems="center" direction="column" gap={12}>
+          <Text color="sub" typo="body1">
+            Solid
+          </Text>
+          <Flex gap="1rem">
+            {smallButtons.map((props) => (
+              <Button size="sm" variant="solid" {...props}>
+                Button2
+              </Button>
+            ))}
+          </Flex>
+        </Flex>
+        <Flex alignItems="center" direction="column" gap={12}>
+          <Text color="sub" typo="body1">
+            Sub
+          </Text>
+          <Flex gap="1rem">
+            {smallButtons.map((props) => (
+              <Button size="sm" variant="sub" {...props}>
+                Button2
+              </Button>
+            ))}
+          </Flex>
+        </Flex>
+      </Card>
+      <Space height={40} />
+    </>
+  );
+};
+
+export default ComponentTab;
diff --git a/apps/wow-docs/app/component/button/_component/GuidelineTab.tsx b/apps/wow-docs/app/component/button/_component/GuidelineTab.tsx
new file mode 100644
index 00000000..f3a3631e
--- /dev/null
+++ b/apps/wow-docs/app/component/button/_component/GuidelineTab.tsx
@@ -0,0 +1,51 @@
+import ImageCards from "@components/ImageCards";
+import Space from "@components/Space";
+import Text from "@components/Text";
+import Divider from "wowds-ui/Divider";
+
+import {
+  combinationButtonItems,
+  widthButtonItems,
+  withIconButtonItems,
+  withSubjectButtonItems,
+} from "../../../../constants/store";
+
+const GuidelineTab = () => {
+  return (
+    <>
+      <Space height={48} />
+      <Text as="h2" typo="display2WebPage">
+        Guideline
+      </Text>
+      <Space height={40} />
+      <Text as="h3" typo="headingWebPage">
+        Width
+      </Text>
+      <Space height={40} />
+      <ImageCards items={widthButtonItems} />
+      <Divider />
+      <Space height={40} />
+      <Text as="h3" typo="headingWebPage">
+        Combination
+      </Text>
+      <Space height={40} />
+      <ImageCards items={combinationButtonItems} />
+      <Divider />
+      <Space height={40} />
+      <Text as="h3" typo="headingWebPage">
+        With Icon
+      </Text>
+      <Space height={40} />
+      <ImageCards items={withIconButtonItems} />
+      <Divider />
+      <Space height={40} />
+      <Text as="h3" typo="headingWebPage">
+        With Subject
+      </Text>
+      <Space height={40} />
+      <ImageCards items={withSubjectButtonItems} />
+    </>
+  );
+};
+
+export default GuidelineTab;
diff --git a/apps/wow-docs/app/component/button/page.tsx b/apps/wow-docs/app/component/button/page.tsx
new file mode 100644
index 00000000..a80f7727
--- /dev/null
+++ b/apps/wow-docs/app/component/button/page.tsx
@@ -0,0 +1,38 @@
+import Card from "@components/Card";
+import ComponentDetailTabs from "@components/ComponentDetailTabs";
+import Space from "@components/Space";
+import Title from "@components/Text/Title";
+import type { Metadata } from "next/types";
+import Button from "wowds-ui/Button";
+
+import ComponentTab from "@/component/button/_component/ComponentTab";
+import GuidelineTab from "@/component/button/_component/GuidelineTab";
+
+export const metadata: Metadata = {
+  title: "Button",
+  description: "와우 디자인 시스템의 Button 입니다.",
+};
+
+const ButtonPage = () => {
+  return (
+    <>
+      <Title
+        main="Button"
+        sub="사용자가 설정한 동작을 수행하기 위해 누르는 컴포넌트입니다."
+        variant="header"
+      />
+      <Space height={40} />
+      <Card style={{ padding: "156px 154px", gap: 24 }}>
+        <Button>Button1</Button>
+        <Button variant="outline">Button1</Button>
+      </Card>
+      <Space height={92} />
+      <ComponentDetailTabs
+        componentTab={<ComponentTab />}
+        guidelineTab={<GuidelineTab />}
+      />
+    </>
+  );
+};
+
+export default ButtonPage;
diff --git a/apps/wow-docs/app/foundation/grid/page.tsx b/apps/wow-docs/app/foundation/grid/page.tsx
new file mode 100644
index 00000000..806730d9
--- /dev/null
+++ b/apps/wow-docs/app/foundation/grid/page.tsx
@@ -0,0 +1,40 @@
+import ImageCards from "@components/ImageCards";
+import Space from "@components/Space";
+import Text from "@components/Text";
+import Title from "@components/Text/Title";
+import type { Metadata } from "next/types";
+import Divider from "wowds-ui/Divider";
+
+import { breakpointItems, gridItems } from "../../../constants/store";
+
+export const metadata: Metadata = {
+  title: "Grid",
+  description: "와우 디자인 시스템의 Grid 입니다.",
+};
+
+const GridPage = () => {
+  return (
+    <>
+      <Title
+        main="Grid"
+        sub="그리드는 페이지의 일관성과 시각적 질서를 유지하기 위해 사용합니다."
+        variant="header"
+      />
+      <Space height={68} />
+      <Text as="h2" typo="display2WebPage">
+        Layout Grid
+      </Text>
+      <Space height={40} />
+      <ImageCards items={gridItems} />
+      <Divider />
+      <Space height={40} />
+      <Text as="h2" typo="display2WebPage">
+        Breakpoint
+      </Text>
+      <Space height={40} />
+      <ImageCards items={breakpointItems} />
+    </>
+  );
+};
+
+export default GridPage;
diff --git a/apps/wow-docs/components/Card.tsx b/apps/wow-docs/components/Card.tsx
index 87c34364..cc52cdd6 100644
--- a/apps/wow-docs/components/Card.tsx
+++ b/apps/wow-docs/components/Card.tsx
@@ -1,9 +1,36 @@
-import { css } from "@styled-system/css";
-import type { PropsWithChildren } from "react";
+import { css, cx } from "@styled-system/css";
+import type { CSSProperties, PropsWithChildren } from "react";
 
-interface CardProps extends PropsWithChildren {}
-const Card = ({ children }: CardProps) => {
-  return <div className={containerStyle}>{children}</div>;
+interface CardProps extends PropsWithChildren {
+  isBackground?: boolean;
+  style?: CSSProperties;
+  contentStyle?: CSSProperties;
+  className?: string;
+}
+
+const Card = ({
+  children,
+  isBackground = false,
+  className,
+  ...props
+}: CardProps) => {
+  return (
+    <div
+      className={cx(containerStyle, className)}
+      {...(props.style && { style: props.style })}
+    >
+      {isBackground ? (
+        <div
+          className={contentStyle}
+          {...(props.contentStyle && { style: props.contentStyle })}
+        >
+          {children}
+        </div>
+      ) : (
+        children
+      )}
+    </div>
+  );
 };
 
 export default Card;
@@ -12,4 +39,20 @@ const containerStyle = css({
   backgroundColor: "backgroundAlternative",
   borderRadius: "sm",
   padding: "32px 40px",
+
+  display: "flex",
+  justifyContent: "center",
+});
+
+const contentStyle = css({
+  width: "100%",
+  height: "100%",
+  background: "white",
+
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+
+  paddingY: 20,
+  paddingX: 114,
 });
diff --git a/apps/wow-docs/components/ComponentDetailTabs.tsx b/apps/wow-docs/components/ComponentDetailTabs.tsx
new file mode 100644
index 00000000..e5349508
--- /dev/null
+++ b/apps/wow-docs/components/ComponentDetailTabs.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import type { ReactNode } from "react";
+import Tabs from "wowds-ui/Tabs";
+import TabsContent from "wowds-ui/TabsContent";
+import TabsItem from "wowds-ui/TabsItem";
+import TabsList from "wowds-ui/TabsList";
+
+interface ComponentTabsProps {
+  componentTab?: ReactNode;
+  guidelineTab?: ReactNode;
+  codeTab?: ReactNode;
+}
+
+const ComponentDetailTabs = ({
+  componentTab,
+  guidelineTab,
+  codeTab,
+}: ComponentTabsProps) => {
+  return (
+    <Tabs defaultValue="component">
+      <TabsList>
+        <TabsItem value="component">Component</TabsItem>
+        <TabsItem value="guideline">Guideline</TabsItem>
+        <TabsItem value="code">Code</TabsItem>
+      </TabsList>
+      <TabsContent value="component">{componentTab}</TabsContent>
+      <TabsContent value="guideline">{guidelineTab}</TabsContent>
+      <TabsContent value="code">{codeTab}</TabsContent>
+    </Tabs>
+  );
+};
+
+export default ComponentDetailTabs;
diff --git a/apps/wow-docs/components/ImageCards.tsx b/apps/wow-docs/components/ImageCards.tsx
new file mode 100644
index 00000000..68907c12
--- /dev/null
+++ b/apps/wow-docs/components/ImageCards.tsx
@@ -0,0 +1,40 @@
+import Card from "@components/Card";
+import Space from "@components/Space";
+import Title from "@components/Text/Title";
+import Image from "next/image";
+import type { ReactNode } from "react";
+
+export type Item = {
+  main: string;
+  sub?: string | ReactNode;
+  imageAlt: string;
+  imageSrc: string;
+  imageWidth: number;
+  imageHeight: number;
+};
+
+interface ImageCardProps {
+  items: Item[];
+}
+
+const ImageCards = ({ items }: ImageCardProps) => {
+  return items.map(
+    ({ main, sub, imageAlt, imageSrc, imageWidth, imageHeight }) => (
+      <>
+        <Title main={main} sub={sub} variant="component" />
+        <Space height={20} />
+        <Card>
+          <Image
+            alt={imageAlt}
+            height={imageHeight}
+            src={imageSrc}
+            width={imageWidth}
+          />
+        </Card>
+        <Space height={40} />
+      </>
+    )
+  );
+};
+
+export default ImageCards;
diff --git a/apps/wow-docs/constants/store/buttonData.ts b/apps/wow-docs/constants/store/buttonData.ts
new file mode 100644
index 00000000..a9a7ff3f
--- /dev/null
+++ b/apps/wow-docs/constants/store/buttonData.ts
@@ -0,0 +1,69 @@
+import type { Item } from "@components/ImageCards";
+
+export const widthButtonItems: Item[] = [
+  {
+    main: "PC",
+    sub: "최대 너비, 고정 너비는 그리드 기준 4칸",
+    imageAlt: "width-1",
+    imageSrc: "/button/width-1.png",
+    imageWidth: 907,
+    imageHeight: 148,
+  },
+  {
+    main: "Mobile",
+    sub: "전체 그리드 혹은 박스 컴포넌트에 Fill로 너비 맞추기",
+    imageAlt: "width-2",
+    imageSrc: "/button/width-2.png",
+    imageWidth: 390,
+    imageHeight: 254,
+  },
+];
+
+export const combinationButtonItems: Item[] = [
+  {
+    main: "L size",
+    sub: "좌우 및 상하로 2개의 버튼 조합 가능",
+    imageAlt: "combination-1",
+    imageSrc: "/button/combination-1.png",
+    imageWidth: 907,
+    imageHeight: 352,
+  },
+  {
+    main: "S size",
+    sub: "Outline, Solid 버튼끼리 자유롭게 조합",
+    imageAlt: "combination-2",
+    imageSrc: "/button/combination-2.png",
+    imageWidth: 907,
+    imageHeight: 230,
+  },
+];
+
+export const withIconButtonItems: Item[] = [
+  {
+    main: "L size",
+    sub: "20*20 size 아이콘과 병치",
+    imageAlt: "withIcon-1",
+    imageSrc: "/button/withIcon-1.png",
+    imageWidth: 907,
+    imageHeight: 156,
+  },
+  {
+    main: "S size",
+    sub: "14*14 size 아이콘과 병치",
+    imageAlt: "withIcon-2",
+    imageSrc: "/button/withIcon-2.png",
+    imageWidth: 907,
+    imageHeight: 134,
+  },
+];
+
+export const withSubjectButtonItems: Item[] = [
+  {
+    main: "L size",
+    sub: "Subtext는 메인 텍스트 하단에 배치, Subtext는 Label3으로 지정",
+    imageAlt: "withSubject-1",
+    imageSrc: "/button/withSubject-1.png",
+    imageWidth: 907,
+    imageHeight: 156,
+  },
+];
diff --git a/apps/wow-docs/constants/store/girdData.ts b/apps/wow-docs/constants/store/girdData.ts
new file mode 100644
index 00000000..12668ceb
--- /dev/null
+++ b/apps/wow-docs/constants/store/girdData.ts
@@ -0,0 +1,63 @@
+import type { Item } from "@components/ImageCards";
+
+export const gridItems: Item[] = [
+  {
+    main: "Basic Grid - PC",
+    sub: "데스크탑 환경에서 사용되는 그리드예요. 가운데 영역에 고정하여 배치해요.",
+    imageAlt: "grid-1",
+    imageSrc: "/grid/grid-1.png",
+    imageWidth: 900,
+    imageHeight: 280,
+  },
+  {
+    main: "Admin Grid - PC",
+    sub: "좌측에 사이드바 영역을 250px로 배치하고, 우측 남은 영역에 기본 PC 그리드를 동일하게 적용해요.",
+    imageAlt: "grid-2",
+    imageSrc: "/grid/grid-2.png",
+    imageWidth: 900,
+    imageHeight: 280,
+  },
+  {
+    main: "Basic Grid - Mobile",
+    sub: "4분할 반응형 그리드로, Margin과 Gutter값만 고정해요.",
+    imageAlt: "grid-3",
+    imageSrc: "/grid/grid-3.png",
+    imageWidth: 300,
+    imageHeight: 308,
+  },
+];
+
+export const breakpointItems: Item[] = [
+  {
+    main: "XS",
+    sub: "최소 규격은 360px, 최대 규격은 599px로, 주로 모바일 환경에 대응해요.",
+    imageAlt: "breakpoint-1",
+    imageSrc: "/grid/breakpoint-1.png",
+    imageWidth: 695,
+    imageHeight: 280,
+  },
+  {
+    main: "S",
+    sub: "최소 규격은 600px, 최대 규격은 899px로, 주로 태블릿 세로 규격에 대응해요.",
+    imageAlt: "breakpoint-2",
+    imageSrc: "/grid/breakpoint-2.png",
+    imageWidth: 630,
+    imageHeight: 444,
+  },
+  {
+    main: "M",
+    sub: "최소 규격은 900px, 최대 규격은 1279px로, 주로 태블릿 가로 규격에 대응해요.",
+    imageAlt: "breakpoint-3",
+    imageSrc: "/grid/breakpoint-3.png",
+    imageWidth: 895,
+    imageHeight: 444,
+  },
+  {
+    main: "L",
+    sub: "최소 규격은 가로 1280px, 그 이상의 모든 해상도에 적용되는 레이아웃으로, 데스크탑 환경에 대응해요.",
+    imageAlt: "breakpoint-4",
+    imageSrc: "/grid/breakpoint-4.png",
+    imageWidth: 895,
+    imageHeight: 210,
+  },
+];
diff --git a/apps/wow-docs/constants/store/index.ts b/apps/wow-docs/constants/store/index.ts
new file mode 100644
index 00000000..6825ed5b
--- /dev/null
+++ b/apps/wow-docs/constants/store/index.ts
@@ -0,0 +1,2 @@
+export * from "./buttonData";
+export * from "./girdData";
diff --git a/apps/wow-docs/public/button/combination-1.png b/apps/wow-docs/public/button/combination-1.png
new file mode 100644
index 00000000..cd3bc0b0
Binary files /dev/null and b/apps/wow-docs/public/button/combination-1.png differ
diff --git a/apps/wow-docs/public/button/combination-2.png b/apps/wow-docs/public/button/combination-2.png
new file mode 100644
index 00000000..e35f8697
Binary files /dev/null and b/apps/wow-docs/public/button/combination-2.png differ
diff --git a/apps/wow-docs/public/button/width-1.png b/apps/wow-docs/public/button/width-1.png
new file mode 100644
index 00000000..8015a5b2
Binary files /dev/null and b/apps/wow-docs/public/button/width-1.png differ
diff --git a/apps/wow-docs/public/button/width-2.png b/apps/wow-docs/public/button/width-2.png
new file mode 100644
index 00000000..712111ba
Binary files /dev/null and b/apps/wow-docs/public/button/width-2.png differ
diff --git a/apps/wow-docs/public/button/withIcon-1.png b/apps/wow-docs/public/button/withIcon-1.png
new file mode 100644
index 00000000..24b8fa24
Binary files /dev/null and b/apps/wow-docs/public/button/withIcon-1.png differ
diff --git a/apps/wow-docs/public/button/withIcon-2.png b/apps/wow-docs/public/button/withIcon-2.png
new file mode 100644
index 00000000..68b10787
Binary files /dev/null and b/apps/wow-docs/public/button/withIcon-2.png differ
diff --git a/apps/wow-docs/public/button/withSubject-1.png b/apps/wow-docs/public/button/withSubject-1.png
new file mode 100644
index 00000000..2bc014ec
Binary files /dev/null and b/apps/wow-docs/public/button/withSubject-1.png differ
diff --git a/apps/wow-docs/public/grid/breakpoint-1.png b/apps/wow-docs/public/grid/breakpoint-1.png
new file mode 100644
index 00000000..fa1a44ae
Binary files /dev/null and b/apps/wow-docs/public/grid/breakpoint-1.png differ
diff --git a/apps/wow-docs/public/grid/breakpoint-2.png b/apps/wow-docs/public/grid/breakpoint-2.png
new file mode 100644
index 00000000..1b6e4266
Binary files /dev/null and b/apps/wow-docs/public/grid/breakpoint-2.png differ
diff --git a/apps/wow-docs/public/grid/breakpoint-3.png b/apps/wow-docs/public/grid/breakpoint-3.png
new file mode 100644
index 00000000..e6178433
Binary files /dev/null and b/apps/wow-docs/public/grid/breakpoint-3.png differ
diff --git a/apps/wow-docs/public/grid/breakpoint-4.png b/apps/wow-docs/public/grid/breakpoint-4.png
new file mode 100644
index 00000000..8c5bff3c
Binary files /dev/null and b/apps/wow-docs/public/grid/breakpoint-4.png differ
diff --git a/apps/wow-docs/public/grid/grid-1.png b/apps/wow-docs/public/grid/grid-1.png
new file mode 100644
index 00000000..5ed7d47d
Binary files /dev/null and b/apps/wow-docs/public/grid/grid-1.png differ
diff --git a/apps/wow-docs/public/grid/grid-2.png b/apps/wow-docs/public/grid/grid-2.png
new file mode 100644
index 00000000..e390598d
Binary files /dev/null and b/apps/wow-docs/public/grid/grid-2.png differ
diff --git a/apps/wow-docs/public/grid/grid-3.png b/apps/wow-docs/public/grid/grid-3.png
new file mode 100644
index 00000000..f8d22d86
Binary files /dev/null and b/apps/wow-docs/public/grid/grid-3.png differ