diff --git a/package.json b/package.json
index 3b7e1f0a6..a74865242 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openstax/ui-components",
-  "version": "1.15.4",
+  "version": "1.16.0-pre2",
   "license": "MIT",
   "source": "./src/index.ts",
   "types": "./dist/index.d.ts",
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index dd2c04c8f..569bcc0ab 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -2,8 +2,9 @@ import styled, {css} from "styled-components";
 import theme from '../../src/theme';
 import { applyButtonVariantStyles, ButtonVariant } from "../theme/buttons";
 
-const StyledButton = styled.button<{ variant: ButtonVariant }>`
-  ${props => applyButtonVariantStyles(props.variant)}
+export { applyButtonVariantStyles };
+export const buttonCss = css<{variant?: ButtonVariant}>`
+  ${props => applyButtonVariantStyles(props.variant || 'primary')}
 
   font-size: 1.6rem;
   line-height: 2rem;
@@ -23,13 +24,6 @@ const StyledButton = styled.button<{ variant: ButtonVariant }>`
   user-select: none;
   white-space: nowrap;
 
-  ${props => props.variant === 'primary' ? `
-    &:focus {
-      outline: solid ${theme.colors.palette.white};
-      box-shadow: inset 0 0 0 3px ${theme.colors.palette.black};
-    }
-  `: ''}
-
   &:not([disabled]) {
     cursor: pointer;
   }
@@ -59,27 +53,31 @@ interface WaitingButtonProps extends ButtonBase {
   waitingText: string;
 }
 
-export const Button = (props: ButtonProps | WaitingButtonProps) => {
+export const Button = styled((props: ButtonProps | WaitingButtonProps) => {
   const {
     disabled,
     isWaiting,
     waitingText,
     children,
-    variant = 'primary',
+    variant,
     ...otherProps
   } = props;
 
-  return <StyledButton
+  return <button
     {...otherProps}
     disabled={isWaiting || disabled}
-    variant={variant}
   >
     {(isWaiting && waitingText) || children}
-  </StyledButton>;
-}
+  </button>;
+})`
+  ${buttonCss}
+`;
 
-export const LinkButton = ({ variant = 'primary', ...props}: LinkButtonBase) =>
-  <StyledButton {...props} as='a' variant={variant}>{props.children}</StyledButton>
+export const LinkButton = styled(({ variant, ...props}: LinkButtonBase) =>
+  <a {...props}>{props.children}</a>
+)`
+  ${buttonCss}
+`;
 
 export const linkStyle = css`
   color: ${theme.colors.link.color};
diff --git a/src/components/__snapshots__/Button.spec.tsx.snap b/src/components/__snapshots__/Button.spec.tsx.snap
index 6c6fa7da2..5a5af14b7 100644
--- a/src/components/__snapshots__/Button.spec.tsx.snap
+++ b/src/components/__snapshots__/Button.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Button isWaiting state matches snapshot 1`] = `
 <button
-  className="sc-bczRLJ jBPkZO"
+  className="sc-bczRLJ dOOknK"
   disabled={true}
 >
   Submitting...
@@ -11,7 +11,7 @@ exports[`Button isWaiting state matches snapshot 1`] = `
 
 exports[`Button matches light color snapshot 1`] = `
 <button
-  className="sc-bczRLJ fUWpMe"
+  className="sc-bczRLJ esoxNv"
 >
   Click Me
 </button>
@@ -19,7 +19,7 @@ exports[`Button matches light color snapshot 1`] = `
 
 exports[`Button matches snapshot 1`] = `
 <button
-  className="sc-bczRLJ jBPkZO"
+  className="sc-bczRLJ dOOknK"
 >
   Click Me
 </button>
@@ -27,7 +27,7 @@ exports[`Button matches snapshot 1`] = `
 
 exports[`Button renders as a tag 1`] = `
 <a
-  className="sc-bczRLJ jBPkZO"
+  className="sc-gsnTZi bOGeQ"
 >
   Click Me
 </a>
@@ -35,7 +35,7 @@ exports[`Button renders as a tag 1`] = `
 
 exports[`Button renders as a tag variant 1`] = `
 <a
-  className="sc-bczRLJ fUWpMe"
+  className="sc-gsnTZi gaKcuZ"
 >
   Click Me
 </a>
@@ -43,7 +43,7 @@ exports[`Button renders as a tag variant 1`] = `
 
 exports[`Button renders button that looks like a link 1`] = `
 <button
-  className="sc-gsnTZi sc-dkzDqf czjxlp jmylct"
+  className="sc-dkzDqf sc-hKMtZM bLbJrC bAtAjm"
 >
   Click Me
 </button>
@@ -51,7 +51,7 @@ exports[`Button renders button that looks like a link 1`] = `
 
 exports[`Button renders plain button 1`] = `
 <button
-  className="sc-gsnTZi czjxlp"
+  className="sc-dkzDqf bLbJrC"
 >
   Click Me
 </button>
diff --git a/src/components/__snapshots__/DropdownMenu.spec.tsx.snap b/src/components/__snapshots__/DropdownMenu.spec.tsx.snap
index 04ed674a8..3882db5ed 100644
--- a/src/components/__snapshots__/DropdownMenu.spec.tsx.snap
+++ b/src/components/__snapshots__/DropdownMenu.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`DropdownMenu matches snapshots 1`] = `
   <button
     aria-expanded="false"
     aria-haspopup="true"
-    class="sc-bczRLJ Ecumh"
+    class="sc-bczRLJ hTVCmA"
     data-rac=""
     id="react-aria-1"
     type="button"
@@ -20,7 +20,7 @@ exports[`DropdownMenu matches snapshots 2`] = `
   <button
     aria-expanded="false"
     aria-haspopup="true"
-    class="sc-bczRLJ ilnBtE"
+    class="sc-bczRLJ ga-doNl"
     data-rac=""
     id="react-aria-4"
     type="button"
diff --git a/src/components/__snapshots__/ErrorModal.spec.tsx.snap b/src/components/__snapshots__/ErrorModal.spec.tsx.snap
index 6167e2000..cf0bc9e34 100644
--- a/src/components/__snapshots__/ErrorModal.spec.tsx.snap
+++ b/src/components/__snapshots__/ErrorModal.spec.tsx.snap
@@ -12,7 +12,7 @@ exports[`Modal matches snapshot 1`] = `
     hidden=""
   />
   <div
-    class="sc-papXJ dSNZGe"
+    class="sc-jqUVSM mLxLT"
     data-rac=""
     style="--visual-viewport-height: 768px;"
   >
@@ -31,20 +31,20 @@ exports[`Modal matches snapshot 1`] = `
         />
       </div>
       <div
-        class="sc-jqUVSM kHnGYC"
+        class="sc-kDDrLX kcRDJd"
       >
         <section
           aria-labelledby="react-aria-2"
-          class="sc-eCYdqJ iasutB"
+          class="sc-jSMfEi jOuQOj"
           data-rac=""
           role="dialog"
           tabindex="-1"
         >
           <header
-            class="sc-jSMfEi klYGKb"
+            class="sc-gKXOVf fMZXQS"
           >
             <h2
-              class="sc-gKXOVf czyrNV"
+              class="sc-iBkjds crmGxr"
               id="react-aria-2"
               slot="title"
             >
@@ -52,7 +52,7 @@ exports[`Modal matches snapshot 1`] = `
             </h2>
             <button
               aria-label="Close"
-              class="sc-hKMtZM jBFomg"
+              class="sc-eCYdqJ dRnxZp"
               type="button"
             >
               <svg
@@ -86,11 +86,11 @@ exports[`Modal matches snapshot 1`] = `
             </button>
           </header>
           <div
-            class="sc-ftvSup dDFSJu"
+            class="sc-papXJ jvMkIj"
             data-testid="error"
           >
             <h3
-              class="sc-iBkjds jzXZzg"
+              class="sc-ftvSup dzrTqv"
             >
               Uh-oh, there's been a glitch
             </h3>
@@ -103,15 +103,15 @@ exports[`Modal matches snapshot 1`] = `
             </a>
             .
             <div
-              class="sc-iqcoie hdouAN"
+              class="sc-crXcEl gaTpxy"
               data-testid="event-id"
             />
           </div>
           <div
-            class="sc-kDDrLX elkCOb"
+            class="sc-iqcoie cqUGeK"
           >
             <button
-              class="sc-bczRLJ jBPkZO"
+              class="sc-bczRLJ dOOknK"
             >
               OK
             </button>
@@ -140,7 +140,7 @@ exports[`Modal matches snapshot when heading and children are set 1`] = `
     hidden=""
   />
   <div
-    class="sc-papXJ dSNZGe"
+    class="sc-jqUVSM mLxLT"
     data-rac=""
     style="--visual-viewport-height: 768px;"
   >
@@ -159,20 +159,20 @@ exports[`Modal matches snapshot when heading and children are set 1`] = `
         />
       </div>
       <div
-        class="sc-jqUVSM kHnGYC"
+        class="sc-kDDrLX kcRDJd"
       >
         <section
           aria-labelledby="react-aria-4"
-          class="sc-eCYdqJ iasutB"
+          class="sc-jSMfEi jOuQOj"
           data-rac=""
           role="dialog"
           tabindex="-1"
         >
           <header
-            class="sc-jSMfEi klYGKb"
+            class="sc-gKXOVf fMZXQS"
           >
             <h2
-              class="sc-gKXOVf czyrNV"
+              class="sc-iBkjds crmGxr"
               id="react-aria-4"
               slot="title"
             >
@@ -180,7 +180,7 @@ exports[`Modal matches snapshot when heading and children are set 1`] = `
             </h2>
             <button
               aria-label="Close"
-              class="sc-hKMtZM jBFomg"
+              class="sc-eCYdqJ dRnxZp"
               type="button"
             >
               <svg
@@ -214,11 +214,11 @@ exports[`Modal matches snapshot when heading and children are set 1`] = `
             </button>
           </header>
           <div
-            class="sc-ftvSup dDFSJu"
+            class="sc-papXJ jvMkIj"
             data-testid="error"
           >
             <h3
-              class="sc-iBkjds jzXZzg"
+              class="sc-ftvSup dzrTqv"
             >
               Scores not sent
             </h3>
@@ -232,15 +232,15 @@ exports[`Modal matches snapshot when heading and children are set 1`] = `
             </a>
             .
             <div
-              class="sc-iqcoie hdouAN"
+              class="sc-crXcEl gaTpxy"
               data-testid="event-id"
             />
           </div>
           <div
-            class="sc-kDDrLX elkCOb"
+            class="sc-iqcoie cqUGeK"
           >
             <button
-              class="sc-bczRLJ jBPkZO"
+              class="sc-bczRLJ dOOknK"
             >
               OK
             </button>
diff --git a/src/components/__snapshots__/ManageCookies.spec.tsx.snap b/src/components/__snapshots__/ManageCookies.spec.tsx.snap
index 03718ead7..a4a205911 100644
--- a/src/components/__snapshots__/ManageCookies.spec.tsx.snap
+++ b/src/components/__snapshots__/ManageCookies.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`ManageCookies when CookieYes loads renders button 1`] = `
 <button
-  className="sc-gsnTZi sc-dkzDqf czjxlp jmylct cky-banner-element"
+  className="sc-dkzDqf sc-hKMtZM bLbJrC bAtAjm cky-banner-element"
 >
   Manage Cookies
 </button>
@@ -11,7 +11,7 @@ exports[`ManageCookies when CookieYes loads renders button 1`] = `
 exports[`ManageCookies when CookieYes loads renders button in wrapper 1`] = `
 <div>
   <button
-    className="sc-gsnTZi sc-dkzDqf czjxlp jmylct cky-banner-element"
+    className="sc-dkzDqf sc-hKMtZM bLbJrC bAtAjm cky-banner-element"
   >
     Manage Cookies
   </button>
@@ -20,7 +20,7 @@ exports[`ManageCookies when CookieYes loads renders button in wrapper 1`] = `
 
 exports[`ManageCookies when CookieYes loads renders button with className 1`] = `
 <button
-  className="sc-gsnTZi sc-dkzDqf czjxlp jmylct cky-banner-element test"
+  className="sc-dkzDqf sc-hKMtZM bLbJrC bAtAjm cky-banner-element test"
 >
   Manage Cookies
 </button>
@@ -28,7 +28,7 @@ exports[`ManageCookies when CookieYes loads renders button with className 1`] =
 
 exports[`ManageCookies when CookieYes loads renders button with content and correct class 1`] = `
 <button
-  className="sc-gsnTZi sc-dkzDqf czjxlp jmylct cky-banner-element"
+  className="sc-dkzDqf sc-hKMtZM bLbJrC bAtAjm cky-banner-element"
 >
   some content
 </button>
@@ -36,7 +36,7 @@ exports[`ManageCookies when CookieYes loads renders button with content and corr
 
 exports[`ManageCookies with CookieYes already loaded renders button 1`] = `
 <button
-  className="sc-gsnTZi sc-dkzDqf czjxlp jmylct cky-banner-element"
+  className="sc-dkzDqf sc-hKMtZM bLbJrC bAtAjm cky-banner-element"
 >
   Manage Cookies
 </button>
@@ -45,7 +45,7 @@ exports[`ManageCookies with CookieYes already loaded renders button 1`] = `
 exports[`ManageCookies with CookieYes already loaded renders button in wrapper 1`] = `
 <div>
   <button
-    className="sc-gsnTZi sc-dkzDqf czjxlp jmylct cky-banner-element"
+    className="sc-dkzDqf sc-hKMtZM bLbJrC bAtAjm cky-banner-element"
   >
     Manage Cookies
   </button>
@@ -54,7 +54,7 @@ exports[`ManageCookies with CookieYes already loaded renders button in wrapper 1
 
 exports[`ManageCookies with CookieYes already loaded renders button with content and correct class 1`] = `
 <button
-  className="sc-gsnTZi sc-dkzDqf czjxlp jmylct cky-banner-element"
+  className="sc-dkzDqf sc-hKMtZM bLbJrC bAtAjm cky-banner-element"
 >
   some content
 </button>
diff --git a/src/components/forms/uncontrolled/index.tsx b/src/components/forms/uncontrolled/index.tsx
index 80e053531..e53da9c4d 100644
--- a/src/components/forms/uncontrolled/index.tsx
+++ b/src/components/forms/uncontrolled/index.tsx
@@ -7,7 +7,10 @@ export * from './inputs';
 /*
  * form element
  */
-const FormElement = styled.form`
+type FormProps = React.ComponentPropsWithoutRef<'form'>;
+export const Form = styled(({children, ...props}: FormProps) => <form {...props}>
+  {children}
+</form>)`
   margin: 5px;
   > *:not(:first-child) {
     margin-top: 2rem;
@@ -17,10 +20,6 @@ const FormElement = styled.form`
     border-bottom: 1px solid #ccc;
   }
 `;
-type FormProps = React.ComponentPropsWithoutRef<'form'>;
-export const Form = ({children, ...props}: FormProps) => <FormElement {...props}>
-  {children}
-</FormElement>;
 
 export const FormSection = styled.div`
   > *:not(:first-child) {
@@ -28,21 +27,29 @@ export const FormSection = styled.div`
   }
 `;
 
-const MessagesElement = styled.div`
-  font-weight: bold;
-`;
 type MessagesProps = {
   state: FetchState<any, string>;
+  className?: string;
 };
-export const Messages = ({state}: MessagesProps) => stateHasError(state)
-  ? <MessagesElement>{state.error}</MessagesElement>
+export const Messages = styled(({state}: MessagesProps) => stateHasError(state)
+  ? <div>{state.error}</div>
   : null
-;
+)`
+  font-weight: bold;
+`;
 
 /*
  * form buttons
  */
-const ButtonsElement = styled.div`
+type ButtonsProps = {
+  state: FetchState<any, string>;
+  onCancel?: () => void;
+  className?: string;
+};
+export const Buttons = styled((props: ButtonsProps) => <div className={props.className}>
+  {'onCancel' in props ? <Cancel onClick={props.onCancel}>Cancel</Cancel> : null}
+  <Submit />
+</div>)`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -50,23 +57,15 @@ const ButtonsElement = styled.div`
     margin-top: 3rem;
   }
 `;
-type ButtonsProps = {
-  state: FetchState<any, string>;
-  onCancel?: () => void;
-};
-export const Buttons = (props: ButtonsProps) => <ButtonsElement>
-  {'onCancel' in props ? <Cancel onClick={props.onCancel}>Cancel</Cancel> : null}
-  <Submit />
-</ButtonsElement>;
 
 // submit button
-const SubmitElement = styled.input`
-`;
 type SubmitButtonProps = React.ComponentPropsWithoutRef<'input'>;
-export const Submit = ({...props}: SubmitButtonProps) => <SubmitElement type="submit" value="Submit" {...props} />;
+export const Submit = styled(({...props}: SubmitButtonProps) =>
+  <input type="submit" value="Submit" {...props} />
+)`
+`;
 
 // cancel button
-const CancelElement = styled.button`
-`;
 type CancelButtonProps = React.ComponentPropsWithoutRef<'button'>;
-export const Cancel = ({...props}: CancelButtonProps) => <CancelElement {...props} />;
+export const Cancel = styled(({...props}: CancelButtonProps) => <button {...props} />)`
+`;
diff --git a/src/theme/buttons.ts b/src/theme/buttons.ts
index f8c259088..767140783 100644
--- a/src/theme/buttons.ts
+++ b/src/theme/buttons.ts
@@ -8,6 +8,8 @@ interface ButtonStyleSet {
   backgroundActive: string;
   backgroundHover: string;
   color: string;
+  outline: string;
+  shadow: string;
   fontWeight?: number;
 }
 
@@ -20,6 +22,8 @@ const buttonStyleSets = asButtonStyleSetTypes({
     backgroundActive: "#b03808",
     backgroundHover: "#be3c08",
     color: palette.white,
+    outline: palette.white,
+    shadow: palette.black,
   },
   light: {
     background: palette.white,
@@ -27,12 +31,16 @@ const buttonStyleSets = asButtonStyleSetTypes({
     backgroundHover: palette.white,
     color: palette.neutralDarker,
     fontWeight: 400,
+    outline: palette.white,
+    shadow: palette.black,
   },
   secondary: {
     background: palette.darkGray,
     backgroundActive: "#4c4c4c",
     backgroundHover: "#646464",
     color: palette.white,
+    outline: palette.white,
+    shadow: palette.black,
   },
 } as const);
 
@@ -51,5 +59,10 @@ export const applyButtonVariantStyles = (variant: ButtonVariant) => {
         background: ${set.backgroundActive};
       }
     }
+
+    &:focus {
+      outline: solid ${set.outline};
+      box-shadow: inset 0 0 0 0.3rem ${set.shadow};
+    }
   `;
 };