diff --git a/src/components/button/button.css b/src/components/button/button.css
index 6910c98..0cea281 100644
--- a/src/components/button/button.css
+++ b/src/components/button/button.css
@@ -11,7 +11,6 @@
   display: inline-block;
   cursor: pointer;
   border: 0;
-  border-radius: 3em;
   font-weight: 600; /* Keeps text bold across all buttons */
   letter-spacing: 0%; /* Ensures no unintended spacing differences */
   
@@ -65,8 +64,8 @@
 
 .storybook-button--desktop--medium {
   font-size: 19.2px;
-  width: 161;
-  height: 61;
+  width: 161px;
+  height: 61px;
   line-height: 28.8px;
 
   border-radius: 48px;
@@ -114,16 +113,18 @@
   &:hover {
     background-color:  #005CB8;
   }
-  &:focus {
+  &:focus-visible {
     background-color: #0073E6;
-    border: 6px solid #002E5C;
+    outline: 6px solid #002E5C;
+    
   }
   &:active {
     background-color: #00458A;
+    
   }
   &:disabled {
     background-color: #57ABFF;
-    border: 4px solid  #1F8FFF;
+    outline: 4px solid  #1F8FFF;
   }
 
 }
@@ -132,22 +133,21 @@
 .storybook-button--secondary.storybook-button--light {
   background-color: #FFFFFF;
   color: #000000;
-  border: 3px solid #000000;
+  outline: 3px solid #000000;
   &:hover {
     background: var(--Buttons-CTA-Button-Secondary-secondary-hover, #D6D6D6);
-    border: 3px solid var(--Buttons-CTA-Button-Secondary-secondary-outline, #000000);
   }
-  &:focus {
+  &:focus-visible {
     background: var(--Buttons-CTA-Button-Secondary-secondary-default, #FFFFFF);
-    border: 6px solid var(--Buttons-CTA-Button-Secondary-secondary-outline, #000000);
+    outline: 6px solid var(--Buttons-CTA-Button-Secondary-secondary-outline, #000000);
   }
   &:active {
     background: var(--Buttons-CTA-Button-Secondary-secondary-active, #ABABAB);
-    border: 3px solid var(--Buttons-CTA-Button-Secondary-secondary-outline, #000000);
+    
   }
   &:disabled {
     background: var(--Buttons-CTA-Button-Secondary-secondary-default, #FFFFFF);
-    border: 5px solid var(--Buttons-CTA-Button-Secondary-secondary-disabled-outline, #979797);
+    outline: 5px solid var(--Buttons-CTA-Button-Secondary-secondary-disabled-outline, #979797);
   }
 }
 /* danger */
@@ -157,39 +157,37 @@
   &:hover {
     background: var(--Buttons-CTA-Button-Primary-Danger-primary-hover, #A11C29);
   }
-  &:focus {
+  &:focus-visible {
     background: var(--Buttons-CTA-Button-Primary-Danger-primary-default, #C82333);
-    border: 6px solid var(--Buttons-CTA-Button-Primary-Danger-primary-active-border, #4E0E14);
+    outline: 6px solid var(--Buttons-CTA-Button-Primary-Danger-primary-active-border, #4E0E14);
   }
   &:active {
     background: var(--Buttons-CTA-Button-Primary-Danger-primary-active, #7A151F);
   }
   &:disabled {
     background: var(--Buttons-CTA-Button-Primary-Danger-primary-disabled, #EC8E97);
-    border: 4px solid var(--Buttons-CTA-Button-Primary-Danger-primary-disabled-border, #E36370);
+    outline: 4px solid var(--Buttons-CTA-Button-Primary-Danger-primary-disabled-border, #E36370);
   }
 }
 /* secondary danger */
 .storybook-button--danger.storybook-button--secondary.storybook-button--light {
-  background-color: #ffffff;
-  border: 3px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #C82333);
+  
+  outline: 3px solid #C82333;
   color: #c82333;
   &:hover {
     background: var(--Buttons-CTA-Button-Secondary-Danger-secondary-hover, #FBE9EB);
-    border: 3px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #C82333);
   }
-  &:focus {
+  &:focus-visible {
     background: var(--Buttons-CTA-Button-Secondary-Danger-secondary-default, #FFFFFF);
-    border: 6px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #C82333);
+    outline: 6px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #C82333);
   }
   &:active {
-    border: 3px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #C82333);
     background: var(--Buttons-CTA-Button-Secondary-Danger-secondary-active, #F7CFD3);
 
   }
   &:disabled {
     background: var(--Buttons-CTA-Button-Secondary-Danger-secondary-default, #FFFFFF);
-    border: 5px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-disabled-outline, #EC8E97);
+    outline: 5px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-disabled-outline, #EC8E97);
   }
 }
 
@@ -203,9 +201,9 @@
   &:hover {
     background: var(--Buttons-CTA-Button-Primary-primary-hover, #57ABFF);
   }
-  &:focus {
+  &:focus-visible {
     background: var(--Buttons-CTA-Button-Primary-primary-default, #1F8FFF);
-    border: 6px solid var(--Buttons-CTA-Button-Primary-primary-active-border, #C7E3FF)
+    outline: 6px solid var(--Buttons-CTA-Button-Primary-primary-active-border, #C7E3FF)
   }
   &:active {
     background: var(--Buttons-CTA-Button-Primary-primary-active, #8FC7FF);
@@ -213,29 +211,27 @@
   }
   &:disabled {
     background: var(--Buttons-CTA-Button-Primary-primary-disabled, #005CB8);
-    border: 4px solid var(--Buttons-CTA-Button-Primary-primary-disabled-border, #0073E6);
+    outline: 4px solid var(--Buttons-CTA-Button-Primary-primary-disabled-border, #0073E6);
   }
 }
 /* secondary */
 .storybook-button--secondary.storybook-button--dark {
   background-color: #25262B;
   color: #ffffff;
-  border: 3px solid var(--Buttons-CTA-Button-Secondary-secondary-outline, #FFFFFF);
+  outline: 3px solid var(--Buttons-CTA-Button-Secondary-secondary-outline, #FFFFFF);
   &:hover {
     background: var(--Buttons-CTA-Button-Secondary-secondary-hover, #42444D);
-    border: 3px solid var(--Buttons-CTA-Button-Secondary-secondary-outline, #FFFFFF);
   }
-  &:focus {
+  &:focus-visible {
     background: var(--Buttons-CTA-Button-Secondary-secondary-default, #25262B);
-    border: 6px solid var(--Buttons-CTA-Button-Secondary-secondary-outline, #FFFFFF);
+    outline: 6px solid var(--Buttons-CTA-Button-Secondary-secondary-outline, #FFFFFF);
   }
   &:active {
     background: var(--Buttons-CTA-Button-Secondary-secondary-active, #656876);
-    border: 3px solid var(--Buttons-CTA-Button-Secondary-secondary-outline, #FFFFFF);
   }
   &:disabled {
     background: var(--Buttons-CTA-Button-Secondary-secondary-default, #25262B);
-    border: 5px solid var(--Buttons-CTA-Button-Secondary-secondary-disabled-outline, #797C8B);
+    outline: 5px solid var(--Buttons-CTA-Button-Secondary-secondary-disabled-outline, #797C8B);
   }
 }
 /* danger */
@@ -245,9 +241,9 @@
   &:hover {
     background: var(--Buttons-CTA-Button-Primary-Danger-primary-hover, #EC8E97);
   }
-  &:focus {
+  &:focus-visible {
     background: var(--Buttons-CTA-Button-Primary-Danger-primary-default, #E36370);
-    border: 6px solid var(--Buttons-CTA-Button-Primary-Danger-primary-active-border, #F7CFD3);
+    outline: 6px solid var(--Buttons-CTA-Button-Primary-Danger-primary-active-border, #F7CFD3);
   }
   &:active {
     background: var(--Buttons-CTA-Button-Primary-Danger-primary-active, #F3AAB1);
@@ -255,29 +251,27 @@
   }
   &:disabled {
     background: var(--Buttons-CTA-Button-Primary-Danger-primary-disabled, #A11C29);
-    border: 4px solid var(--Buttons-CTA-Button-Primary-Danger-primary-disabled-border, #C82333);
+    outline: 4px solid var(--Buttons-CTA-Button-Primary-Danger-primary-disabled-border, #C82333);
   }
 }
 /* secondary danger */
 .storybook-button--danger.storybook-button--secondary.storybook-button--dark {
   color: #e36370;
   background-color: #25262B;
-  border: 3px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #E36370);
+  outline: 3px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #E36370);
   &:hover {
     background: var(--Buttons-CTA-Button-Secondary-Danger-secondary-hover, #27070A);
-    border: 3px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #E36370);
   }
-  &:focus {
+  &:focus-visible {
     background: var(--Buttons-CTA-Button-Secondary-Danger-secondary-default, #25262B);
-    border: 6px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #E36370);
+    outline: 6px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #E36370);
   }
   &:active {
     background: var(--Buttons-CTA-Button-Secondary-Danger-secondary-active, #4E0E14);
-    border: 3px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #E36370);
   }
   &:disabled {
     background: var(--Buttons-CTA-Button-Secondary-Danger-secondary-default, #25262B);
-    border: 5px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-disabled-outline, #A11C29);
+    outline: 5px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-disabled-outline, #A11C29);
   }
 }