diff --git a/package-lock.json b/package-lock.json
index 109308ce..0b704f01 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -48,7 +48,7 @@
         "jest-serializer-vue": "^3.1.0",
         "jsdoc": "^4.0.2",
         "jsdom": "^22.1.0",
-        "sass": "^1.32.7",
+        "sass": "^1.77.8",
         "sass-loader": "^12.0.0",
         "vite": "^4.4.6",
         "vitest": "^0.33.0",
@@ -16294,9 +16294,9 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.54.8",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.8.tgz",
-      "integrity": "sha512-ib4JhLRRgbg6QVy6bsv5uJxnJMTS2soVcCp9Y88Extyy13A8vV0G1fAwujOzmNkFQbR3LvedudAMbtuNRPbQww==",
+      "version": "1.77.8",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
+      "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -16307,7 +16307,7 @@
         "sass": "sass.js"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=14.0.0"
       }
     },
     "node_modules/sass-loader": {
diff --git a/package.json b/package.json
index 43a0013f..7d588bbc 100644
--- a/package.json
+++ b/package.json
@@ -55,10 +55,10 @@
     "jest-serializer-vue": "^3.1.0",
     "jsdoc": "^4.0.2",
     "jsdom": "^22.1.0",
-    "sass": "^1.32.7",
+    "sass": "^1.77.8",
     "sass-loader": "^12.0.0",
     "vite": "^4.4.6",
     "vitest": "^0.33.0",
     "volar-service-vetur": "latest"
   }
-}
\ No newline at end of file
+}
diff --git a/public/css/hop-styling.css b/public/css/hop-styling.css
index c81dda28..3598e48c 100644
--- a/public/css/hop-styling.css
+++ b/public/css/hop-styling.css
@@ -128,6 +128,17 @@ body .optional-label:after {
 }
 body .buttonContainer {
   height: 48px;
+  position: relative;
+}
+body .buttonContainer:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: auto;
+  cursor: pointer;
 }
 body .buttonContainer button {
   position: relative;
@@ -162,7 +173,6 @@ body .buttonContainer button:disabled {
   height: 48px;
   border: none;
   border-radius: 8px;
-  cursor: pointer;
   pointer-events: all;
 }
 body .buttonContainer button.has-loader {
diff --git a/public/scss/hop-styling.scss b/public/scss/hop-styling.scss
index a71e4aa4..0ab9dc9f 100644
--- a/public/scss/hop-styling.scss
+++ b/public/scss/hop-styling.scss
@@ -139,6 +139,17 @@ body {
 
     .buttonContainer {
         height: 48px;
+        position: relative;
+        &:after {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            pointer-events: auto;
+            cursor: pointer;
+        }
         button {
             position: relative;
             background: linear-gradient(270deg, #1574a1 0%, #003d58 100%);
@@ -171,7 +182,6 @@ body {
                 height: 48px;
                 border: none;
                 border-radius: 8px;
-                cursor: pointer;
                 pointer-events: all;
             }
             &.has-loader {