diff --git a/packages/jotai/package.json b/packages/jotai/package.json
index 33bffbf..588af5b 100644
--- a/packages/jotai/package.json
+++ b/packages/jotai/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xionwcfm/jotai",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "license": "MIT",
   "scripts": {
     "build": "tsup",
@@ -25,7 +25,9 @@
   "publishConfig": {
     "access": "public"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "devDependencies": {
     "@testing-library/jest-dom": "catalog:",
     "@testing-library/react": "catalog:",
@@ -33,7 +35,6 @@
     "@vitejs/plugin-react": "catalog:",
     "@types/node": "^20.14.9",
     "@types/react": "catalog:react18",
-
     "@xionwcfm/typescript-config": "workspace:*",
     "happy-dom": "^14.12.0",
     "jotai": "^2.9.3",
diff --git a/packages/jotai/src/create-atom-hook.ts b/packages/jotai/src/create-atom-hook.ts
new file mode 100644
index 0000000..dadda1f
--- /dev/null
+++ b/packages/jotai/src/create-atom-hook.ts
@@ -0,0 +1,17 @@
+import { atom } from "jotai";
+import { Atom, WritableAtom, useAtom, useAtomValue, useSetAtom, useStore } from "jotai";
+
+export const createUseSetAtom = <Value, Args extends unknown[], Result>(
+  atom: WritableAtom<Value, Args, Result>,
+  options?: Parameters<typeof useStore>[0],
+) => {
+  return () => useSetAtom(atom, options);
+};
+
+export const createUseAtom = <Value>(atom: Atom<Value>, options?: Parameters<typeof useStore>[0]) => {
+  return () => useAtom(atom, options);
+};
+
+export const createUseAtomValue = <Value>(atom: Atom<Value>, options?: Parameters<typeof useStore>[0]) => {
+  return () => useAtomValue(atom, options);
+};
diff --git a/packages/jotai/src/index.ts b/packages/jotai/src/index.ts
index 312b271..7cd0a33 100644
--- a/packages/jotai/src/index.ts
+++ b/packages/jotai/src/index.ts
@@ -1,4 +1,4 @@
+import { createUseAtom, createUseAtomValue, createUseSetAtom } from "./create-atom-hook";
 import { createReusableAtom } from "./create-reusable-atom";
 import { createSafeAtom } from "./create-safe-atom";
-
-export { createSafeAtom, createReusableAtom };
+export { createSafeAtom, createReusableAtom, createUseSetAtom, createUseAtom, createUseAtomValue };
diff --git a/packages/token/src/index.css b/packages/token/src/index.css
index 7e4defd..75de153 100644
--- a/packages/token/src/index.css
+++ b/packages/token/src/index.css
@@ -267,6 +267,12 @@
   --danger-900: #ffdcdc;
 }
 
+@media (maxwidth: 767px) {
+  :root {
+    --font-size: 0.875rem;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --neutral-50: #1a1a1a;
diff --git a/packages/xds/src/button.stories.tsx b/packages/xds/src/button.stories.tsx
index fcac3dd..ca232b8 100644
--- a/packages/xds/src/button.stories.tsx
+++ b/packages/xds/src/button.stories.tsx
@@ -133,9 +133,9 @@ export const IconButtons: Story = {
   },
   render: () => (
     <div className="space-x-4">
-      <Button startIcon={<ArrowRightIcon />}>Start Icon</Button>
-      <Button endIcon={<ArrowRightIcon />}>End Icon</Button>
-      <Button startIcon={<ReloadIcon />} endIcon={<ArrowRightIcon />}>
+      <Button left={<ArrowRightIcon />}>Start Icon</Button>
+      <Button right={<ArrowRightIcon />}>End Icon</Button>
+      <Button left={<ReloadIcon />} right={<ArrowRightIcon />}>
         Both Icons
       </Button>
     </div>
diff --git a/packages/xds/src/button.tsx b/packages/xds/src/button.tsx
index eb9391a..fc23c44 100644
--- a/packages/xds/src/button.tsx
+++ b/packages/xds/src/button.tsx
@@ -1,11 +1,9 @@
-import { colors } from "@xionwcfm/token";
 import { type VariantProps, cva } from "class-variance-authority";
 import { type ElementType, type ReactNode, forwardRef } from "react";
 import { Box, type BoxProps } from "./box";
 import { cn } from "./cn";
 import { PolymorphicComponentPropsWithRef, PolymorphicRef } from "./internal-type/polymorphic";
 import { Spinner } from "./spinner";
-import { ThreeDotLoadingSpinner } from "./three-dot-loading-spinner";
 
 export const buttonVariants = cva(
   `items-center justify-center whitespace-nowrap 
@@ -65,8 +63,8 @@ export const buttonVariants = cva(
 );
 
 type ButtonOptionProps = {
-  startIcon?: ReactNode;
-  endIcon?: ReactNode;
+  left?: ReactNode;
+  right?: ReactNode;
   loading?: boolean;
 };
 
@@ -84,16 +82,16 @@ export const Button = forwardRef(function Button<C extends ElementType = "button
     size,
     loading,
     disabled,
-    endIcon,
+    right,
     type,
-    startIcon,
+    left,
     rounded,
     asChild = false,
     w,
     ...rest
   } = props;
   const typedRest = rest as PolymorphicComponentPropsWithRef<C, BoxProps<C>>;
-  const slotClass = !!startIcon || !!endIcon ? "flex items-center justify-center gap-x-4" : "";
+  const slotClass = !!left || !!right ? "flex items-center justify-center gap-x-4" : "";
   const ComponentAs = as || "button";
   const ariaLabel = props["aria-label"] ?? loading ? "loading progress" : "button";
 
@@ -115,15 +113,15 @@ export const Button = forwardRef(function Button<C extends ElementType = "button
             <Spinner color={"primary"} />
           </Box>
         ) : null}
-        {startIcon && !loading ? (
+        {left && !loading ? (
           <Box as="span" className=" mr-2">
-            {startIcon}
+            {left}
           </Box>
         ) : null}
         <div className={`${loading ? "invisible" : ""}`}>{children}</div>
-        {endIcon ? (
+        {right ? (
           <Box as="span" className="ml-2">
-            {endIcon}
+            {right}
           </Box>
         ) : null}
       </>
diff --git a/packages/xds/src/collapsible.stories.tsx b/packages/xds/src/collapsible.stories.tsx
index ac9e3ea..d73758d 100644
--- a/packages/xds/src/collapsible.stories.tsx
+++ b/packages/xds/src/collapsible.stories.tsx
@@ -46,7 +46,7 @@ export const BasicCollapsible: Story = {
         <Collapsible.Trigger asChild>
           <Button
             variant="outline"
-            endIcon={<ChevronDownIcon className={`transition-transform duration-200 ${open ? "rotate-180" : ""}`} />}
+            right={<ChevronDownIcon className={`transition-transform duration-200 ${open ? "rotate-180" : ""}`} />}
           >
             상세 정보 보기
           </Button>
@@ -77,7 +77,7 @@ export const ListCollapsible: Story = {
           <Button
             variant="ghost"
             className="w-full justify-between"
-            endIcon={<ChevronDownIcon className={`transition-transform duration-200 ${open ? "rotate-180" : ""}`} />}
+            right={<ChevronDownIcon className={`transition-transform duration-200 ${open ? "rotate-180" : ""}`} />}
           >
             최근 주문 내역 (3)
           </Button>
@@ -116,7 +116,7 @@ export const NestedCollapsible: Story = {
         <Collapsible.Trigger asChild>
           <Button
             variant="outline"
-            endIcon={
+            right={
               <ChevronDownIcon className={`transition-transform duration-200 ${parentOpen ? "rotate-180" : ""}`} />
             }
           >
@@ -132,7 +132,7 @@ export const NestedCollapsible: Story = {
                 <Button
                   variant="ghost"
                   size="sm"
-                  endIcon={
+                  right={
                     <ChevronDownIcon className={`transition-transform duration-200 ${childOpen ? "rotate-180" : ""}`} />
                   }
                 >