diff --git a/.vscode/screen.code-snippets b/.vscode/screen.code-snippets
index 821994200d7d97306726b8064d4bb8c4bf9b3a6c..6d9b273bd1de9e6732361db899818088aa79d797 100644
--- a/.vscode/screen.code-snippets
+++ b/.vscode/screen.code-snippets
@@ -139,6 +139,16 @@
     "description": "(841px, 1440px)",
     "scope": "scss, less"
   },
+  "(840, 1680)": {
+    "prefix": ["w840-1680", "@include responsd-to('pad_v-pc_s')"],
+    "body": [
+      "@include respond-to('pad_v-pc_s') {",
+      " $1 ",
+      "}"
+    ],
+    "description": "(840px, 1680px)",
+    "scope": "scss, less"
+  },
   "(1441-1920)": {
     "prefix": ["w1440-1920", "@include responsd-to('pc')"],
     "body": [
diff --git a/packages/opendesign/src/button/style/index.scss b/packages/opendesign/src/button/style/index.scss
index e6b6f59b06731c7cec52d32669a01b1cb474daeb..8bb47c5840ef5591b0176e882570a9878c439b64 100644
--- a/packages/opendesign/src/button/style/index.scss
+++ b/packages/opendesign/src/button/style/index.scss
@@ -1,3 +1,3 @@
 @use './style.scss' as *;
-@use './media.scss' as *;
 @use './var.scss' as *;
+@use './media.scss' as *;
diff --git a/packages/opendesign/src/button/style/media.scss b/packages/opendesign/src/button/style/media.scss
index 1d53a84060757c058a0391b16c697fe169c756b4..ee75a82af2da184ebc0870f4908744dae4fe98fc 100644
--- a/packages/opendesign/src/button/style/media.scss
+++ b/packages/opendesign/src/button/style/media.scss
@@ -1,11 +1,20 @@
 @use '../../_styles/mixin.scss' as *;
 
-@include respond-to('laptop') {
+@include respond-to('pad_v-pc_s') {
   .o-btn-large {
+    --btn-height: 36px;
     --btn-padding: 0 15px;
+    font-size: var(--o-font_size-tip1);
+    line-height: var(--o-line_height-tip1);
     --btn-icon-size: var(--o-icon_size-s);
-
+  }
+}
+@include respond-to('<=pc_s') {
+  .o-btn-medium {
+    --btn-height: 28px;
+    --btn-padding: 0 15px;
     font-size: var(--o-font_size-tip1);
     line-height: var(--o-line_height-tip1);
+    --btn-icon-size: var(--o-icon_size-xs);
   }
 }
diff --git a/packages/opendesign/src/button/style/style.scss b/packages/opendesign/src/button/style/style.scss
index e0d3a703b13e7a6283c8aaaeee0a8c0e7bd97420..79d6720cc0cfbafd84232237b77fb341e69bed04 100644
--- a/packages/opendesign/src/button/style/style.scss
+++ b/packages/opendesign/src/button/style/style.scss
@@ -103,7 +103,7 @@
 .o-btn-prefix {
   display: inline-flex;
   align-items: center;
-  margin-right: var(--btn-gap);
+  margin-right: var(--btn-gap-prefix);
   font-size: var(--btn-icon-size);
 
   .o-btn-icon-only & {
@@ -116,6 +116,6 @@
 .o-btn-suffix {
   display: inline-flex;
   align-items: center;
-  margin-left: var(--btn-gap);
+  margin-left: var(--btn-gap-suffix);
   font-size: var(--btn-icon-size);
 }
diff --git a/packages/opendesign/src/button/style/var.scss b/packages/opendesign/src/button/style/var.scss
index 49e2c789430adf97195166c5b73c81bd36090dba..a30c3c1bb60e0a473ed89180eb19dad4a5a06cd5 100644
--- a/packages/opendesign/src/button/style/var.scss
+++ b/packages/opendesign/src/button/style/var.scss
@@ -158,6 +158,8 @@
 .o-btn-small {
   --btn-radius: var(--o-radius_control-xs);
   --btn-gap: 2px;
+  --btn-gap-prefix: var(--btn-gap);
+  --btn-gap-suffix: var(--btn-gap);
   --btn-padding: 0 11px;
   --btn-icon-size: var(--o-icon_size-xs);
   --btn-height: var(--o-control_size-s);
@@ -167,6 +169,8 @@
 
   --btn-radius: var(--o-radius_control-s);
   --btn-gap: 8px;
+  --btn-gap-prefix: var(--btn-gap);
+  --btn-gap-suffix: var(--btn-gap);
   --btn-padding: 0 15px;
   --btn-icon-size: var(--o-icon_size-xs);
   --btn-height: var(--o-control_size-m);
@@ -176,6 +180,8 @@
 
   --btn-radius: var(--o-radius_control-s);
   --btn-gap: 8px;
+  --btn-gap-prefix: var(--btn-gap);
+  --btn-gap-suffix: var(--btn-gap);
   --btn-padding: 0 23px;
   --btn-icon-size: var(--o-icon_size-m);
   --btn-height: var(--o-control_size-l);
@@ -185,7 +191,6 @@
 }
 .o-btn-round-pill {
   --btn-radius: var(--o-control_size-l);
-  --btn-gap: 6px;
 }
 
 .o-btn-text {