diff --git a/package-lock.json b/package-lock.json
index 24fcd9d4..db332b1e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,7 @@
       "name": "uswds-sandbox",
       "license": "CC0-1.0",
       "dependencies": {
-        "@uswds/uswds": "3.6.0"
+        "@uswds/uswds": "github:uswds/uswds#cm-refactor-button-styles"
       },
       "devDependencies": {
         "@11ty/eleventy": "^2.0.1",
@@ -488,11 +488,11 @@
       }
     },
     "node_modules/@uswds/uswds": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/@uswds/uswds/-/uswds-3.6.0.tgz",
-      "integrity": "sha512-bsFSwhMctRgCushvId/rnfPthKJUGC2v0stOuc98LxgQzwQWP90C3P3FDVzEWKz0HYr4XTGgrWA5rcuZ9qml2w==",
+      "version": "3.8.0",
+      "resolved": "git+ssh://git@github.com/uswds/uswds.git#f3ad5c3a1d3f5bdc0a4dabd716536c15f3665972",
+      "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
-        "classlist-polyfill": "1.0.3",
+        "classlist-polyfill": "1.2.0",
         "object-assign": "4.1.1",
         "receptor": "1.0.0",
         "resolve-id-refs": "0.1.0"
@@ -1415,9 +1415,9 @@
       }
     },
     "node_modules/classlist-polyfill": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.0.3.tgz",
-      "integrity": "sha512-bDLDUsSg5LYFWsc2hphtG6ulyaCFSupdEBU3wxNECKWHnyPVvY8EB9Wbt9DzWkstWclFZhDaZK/VnEK/DmqE/Q=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
+      "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ=="
     },
     "node_modules/clean-stack": {
       "version": "2.2.0",
@@ -9109,11 +9109,10 @@
       }
     },
     "@uswds/uswds": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/@uswds/uswds/-/uswds-3.6.0.tgz",
-      "integrity": "sha512-bsFSwhMctRgCushvId/rnfPthKJUGC2v0stOuc98LxgQzwQWP90C3P3FDVzEWKz0HYr4XTGgrWA5rcuZ9qml2w==",
+      "version": "git+ssh://git@github.com/uswds/uswds.git#f3ad5c3a1d3f5bdc0a4dabd716536c15f3665972",
+      "from": "@uswds/uswds@https://github.com/uswds/uswds/tree/cm-refactor-button-styles",
       "requires": {
-        "classlist-polyfill": "1.0.3",
+        "classlist-polyfill": "1.2.0",
         "object-assign": "4.1.1",
         "receptor": "1.0.0",
         "resolve-id-refs": "0.1.0"
@@ -9784,9 +9783,9 @@
       }
     },
     "classlist-polyfill": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.0.3.tgz",
-      "integrity": "sha512-bDLDUsSg5LYFWsc2hphtG6ulyaCFSupdEBU3wxNECKWHnyPVvY8EB9Wbt9DzWkstWclFZhDaZK/VnEK/DmqE/Q=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
+      "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ=="
     },
     "clean-stack": {
       "version": "2.2.0",
diff --git a/package.json b/package.json
index ebe04e17..dbaa30c0 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "test": "snyk test"
   },
   "dependencies": {
-    "@uswds/uswds": "3.6.0"
+    "@uswds/uswds": "github:uswds/uswds#cm-refactor-button-styles"
   },
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
diff --git a/src/_styles/_uswds-theme-custom-styles.scss b/src/_styles/_uswds-theme-custom-styles.scss
index ca6e6fa1..2818b65a 100644
--- a/src/_styles/_uswds-theme-custom-styles.scss
+++ b/src/_styles/_uswds-theme-custom-styles.scss
@@ -1 +1,5 @@
-@use "uswds-core" as *;
\ No newline at end of file
+@use "uswds-core" as *;
+
+.usa-button {
+  background-color: color("green-cool-30");
+}
diff --git a/src/index.md b/src/index.md
index 602b2c1d..548480ce 100644
--- a/src/index.md
+++ b/src/index.md
@@ -5,6 +5,247 @@ body:
 ---
 
 <div class="padding-2">
-  <p class="font-sans-3xl margin-bottom-0 text-bold">Hi.</p>
-  <p class="font-sans-3xl margin-top-1 text-light">It’s the new Sandbox, running on 11ty.</p>
+    <h3 class="site-preview-heading">Default</h3>
+    <button class="usa-button" type="button">Default</button>
+    <button class="usa-button usa-button--hover" type="button">Hover</button>
+    <button class="usa-button usa-button--active" type="button">Active</button>
+    <button class="usa-button usa-focus" type="button">Focus</button>
+    <button class="usa-button" type="button" disabled="disabled">Disabled</button>
+    <button class="usa-button" type="button" aria-disabled="true">
+    aria-disabled
+    </button>
+    <button class="usa-button usa-button--unstyled" type="button">
+    Unstyled button
+    </button>
+
+    <h3 class="site-preview-heading">Secondary color</h3>
+    <button class="usa-button usa-button--secondary" type="button">Default</button>
+    <button
+    class="usa-button usa-button--secondary usa-button--hover"
+    type="button"
+    >
+    Hover
+    </button>
+    <button
+    class="usa-button usa-button--secondary usa-button--active"
+    type="button"
+    >
+    Active
+    </button>
+    <button class="usa-button usa-button--secondary usa-focus" type="button">
+    Focus
+    </button>
+    <button
+    class="usa-button usa-button--secondary"
+    type="button"
+    disabled="disabled"
+    >
+    Disabled
+    </button>
+    <button
+    class="usa-button usa-button--secondary"
+    type="button"
+    aria-disabled="true"
+    >
+    aria-disabled
+    </button>
+    <button
+    class="usa-button usa-button--secondary usa-button--unstyled"
+    type="button"
+    >
+    Unstyled button
+    </button>
+
+    <h3 class="site-preview-heading">Accent cool color</h3>
+    <button class="usa-button usa-button--accent-cool" type="button">
+    Default
+    </button>
+    <button
+    class="usa-button usa-button--accent-cool usa-button--hover"
+    type="button"
+    >
+    Hover
+    </button>
+    <button
+    class="usa-button usa-button--accent-cool usa-button--active"
+    type="button"
+    >
+    Active
+    </button>
+    <button class="usa-button usa-button--accent-cool usa-focus" type="button">
+    Focus
+    </button>
+    <button
+    class="usa-button usa-button--accent-cool"
+    type="button"
+    disabled="disabled"
+    >
+    Disabled
+    </button>
+    <button
+    class="usa-button usa-button--accent-cool"
+    type="button"
+    aria-disabled="true"
+    >
+    aria-disabled
+    </button>
+    <button
+    class="usa-button usa-button--accent-cool usa-button--unstyled"
+    type="button"
+    >
+    Unstyled button
+    </button>
+
+    <h3 class="site-preview-heading">Accent warm color</h3>
+    <button class="usa-button usa-button--accent-warm" type="button">
+    Default
+    </button>
+    <button
+    class="usa-button usa-button--accent-warm usa-button--hover"
+    type="button"
+    >
+    Hover
+    </button>
+    <button
+    class="usa-button usa-button--accent-warm usa-button--active"
+    type="button"
+    >
+    Active
+    </button>
+    <button class="usa-button usa-button--accent-warm usa-focus" type="button">
+    Focus
+    </button>
+    <button
+    class="usa-button usa-button--accent-warm"
+    type="button"
+    disabled="disabled"
+    >
+    Disabled
+    </button>
+    <button
+    class="usa-button usa-button--accent-warm"
+    type="button"
+    aria-disabled="true"
+    >
+    aria-disabled
+    </button>
+    <button
+    class="usa-button usa-button--accent-warm usa-button--unstyled"
+    type="button"
+    >
+    Unstyled button
+    </button>
+
+    <h3 class="site-preview-heading">Base color</h3>
+    <button class="usa-button usa-button--base" type="button">Default</button>
+    <button class="usa-button usa-button--base usa-button--hover" type="button">
+    Hover
+    </button>
+    <button class="usa-button usa-button--base usa-button--active" type="button">
+    Active
+    </button>
+    <button class="usa-button usa-button--base usa-focus" type="button">
+    Focus
+    </button>
+    <button class="usa-button usa-button--base" type="button" disabled="disabled">
+    Disabled
+    </button>
+    <button class="usa-button usa-button--base" type="button" aria-disabled="true">
+    aria-disabled
+    </button>
+    <button class="usa-button usa-button--base usa-button--unstyled" type="button">
+    Unstyled button
+    </button>
+
+    <h3 class="site-preview-heading">Outline</h3>
+    <button class="usa-button usa-button--outline" type="button">Default</button>
+    <button class="usa-button usa-button--outline usa-button--hover" type="button">
+    Hover
+    </button>
+    <button class="usa-button usa-button--outline usa-button--active" type="button">
+    Active
+    </button>
+    <button class="usa-button usa-button--outline usa-focus" type="button">
+    Focus
+    </button>
+    <button
+    class="usa-button usa-button--outline"
+    type="button"
+    disabled="disabled"
+    >
+    Disabled
+    </button>
+    <button
+    class="usa-button usa-button--outline"
+    type="button"
+    aria-disabled="true"
+    >
+    aria-disabled
+    </button>
+    <button
+    class="usa-button usa-button--outline usa-button--unstyled"
+    type="button"
+    >
+    Unstyled button
+    </button>
+
+    <h3 class="site-preview-heading">Outline inverse</h3>
+    <div class="bg-base-darkest padding-1" style="max-width: fit-content">
+    <button
+        class="usa-button usa-button--outline usa-button--inverse"
+        type="button"
+    >
+        Default
+    </button>
+    <button
+        class="usa-button usa-button--outline usa-button--inverse usa-button--hover"
+        type="button"
+    >
+        Hover
+    </button>
+    <button
+        class="usa-button usa-button--outline usa-button--inverse usa-button--active"
+        type="button"
+    >
+        Active
+    </button>
+    <button
+        class="usa-button usa-button--outline usa-button--inverse usa-focus"
+        type="button"
+    >
+        Focus
+    </button>
+    <button
+        class="usa-button usa-button--outline usa-button--inverse"
+        type="button"
+        disabled="disabled"
+    >
+        Disabled
+    </button>
+    <button
+        class="usa-button usa-button--outline usa-button--inverse"
+        type="button"
+        aria-disabled="true"
+    >
+        aria-disabled
+    </button>
+    <button
+        class="usa-button usa-button--outline usa-button--inverse usa-button--unstyled"
+        type="button"
+    >
+        Unstyled button
+    </button>
+    </div>
+
+    <h3 class="site-preview-heading">Big button</h3>
+    <button class="usa-button usa-button--big" type="button">Default</button>
+    <button class="usa-button usa-button--big" type="button" disabled="disabled">
+    Disabled
+    </button>
+    <button class="usa-button usa-button--big" type="button" aria-disabled="true">
+    aria-disabled
+    </button>
+    <button class="usa-button usa-button--big usa-button--unstyled" type="button">
+    Unstyled button
+    </button>
 </div>