diff --git a/src/app/components/pages/SubjectLandingPage.tsx b/src/app/components/pages/SubjectLandingPage.tsx
index 6e6f3d21de..e4e7966b52 100644
--- a/src/app/components/pages/SubjectLandingPage.tsx
+++ b/src/app/components/pages/SubjectLandingPage.tsx
@@ -64,7 +64,7 @@ const RandomQuestionBanner = ({context}: {context?: PageContextState}) => {
     return <div  className="d-flex flex-column pb-4 container-override random-question-panel" >
         <div className="d-flex my-3 justify-content-between align-items-center">
             <h4 className="m-0">Try a random question!</h4>
-            <button className="btn btn-link invert-underline d-flex align-items-center gap-2" onClick={handleGetDifferentQuestion}>
+            <button className="btn btn-link invert-underline d-flex align-items-center gap-2 p-1" onClick={handleGetDifferentQuestion}>
                 Get a different question
                 <i className="icon icon-refresh icon-color-black"/>
             </button>
diff --git a/src/scss/phy/button.scss b/src/scss/phy/button.scss
index b0ba3c7c65..a953027bfd 100644
--- a/src/scss/phy/button.scss
+++ b/src/scss/phy/button.scss
@@ -12,8 +12,8 @@
   opacity: 100%;
 
   &:focus:not(:focus-visible) {
-    outline: none !important;
-    box-shadow: 0 0 0 3px var(--buttons-light), 0 0 0 4.5px var(--buttons-focus-ring) !important;
+    outline: 1px solid var(--buttons-focus-ring) !important;
+    outline-offset: 3px;
   }
 
   &.btn-sm {
@@ -126,8 +126,8 @@
   }
 
   &:focus:not(:focus-visible) {
-    // TODO: depending on use case (colour of background this is used on), we may need to change how this offset border is generated
-    box-shadow: 0 0 0 3px var(--buttons-dark), 0 0 0 4.5px var(--buttons-focus-ring) !important;
+    outline: 2px solid var(--buttons-focus-ring) !important;
+    outline-offset: 3px;
   }
 
   &:disabled, &.disabled {
diff --git a/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Accessibility page #0.png b/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Accessibility page #0.png
index f7da9554f1..7f473f348b 100644
Binary files a/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Accessibility page #0.png and b/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Accessibility page #0.png differ
diff --git a/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Beta page #0.png b/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Beta page #0.png
index 47cd29ba66..ec535ce4c6 100644
Binary files a/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Beta page #0.png and b/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Beta page #0.png differ
diff --git a/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Notifications page #0.png b/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Notifications page #0.png
index e5d2e1c070..451eb223cb 100644
Binary files a/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Notifications page #0.png and b/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Notifications page #0.png differ
diff --git a/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Profile page #0.png b/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Profile page #0.png
index 587c6fc7ff..ca1b0a9fe6 100644
Binary files a/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Profile page #0.png and b/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Profile page #0.png differ
diff --git a/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Security page #0.png b/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Security page #0.png
index 7c8c49b8fa..6c3d5cf5b8 100644
Binary files a/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Security page #0.png and b/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Security page #0.png differ
diff --git a/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Teacher connections page #0.png b/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Teacher connections page #0.png
index f5f2ae628b..df5cefb3fd 100644
Binary files a/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Teacher connections page #0.png and b/src/test/pages/__image_snapshots__/sci/My Account should have no visual regressions on Teacher connections page #0.png differ
diff --git a/src/test/pages/__image_snapshots__/sci/Subject landing pages should have no visual regressions #0.png b/src/test/pages/__image_snapshots__/sci/Subject landing pages should have no visual regressions #0.png
index 338ba53609..e1d838b9d6 100644
Binary files a/src/test/pages/__image_snapshots__/sci/Subject landing pages should have no visual regressions #0.png and b/src/test/pages/__image_snapshots__/sci/Subject landing pages should have no visual regressions #0.png differ