diff --git a/web/assets/main.css b/web/assets/main.css
index 8b49830f0..729aa0524 100644
--- a/web/assets/main.css
+++ b/web/assets/main.css
@@ -25,5 +25,15 @@ body {
   --ring-shadow: 0 0 --var(--color-beta);
 }
 
+/* .button-gradient-border-to-bg {
+  background: linear-gradient(to right,#e03237 0%,#fd8c3c 100%) left top no-repeat,linear-gradient(to right,#e03237 0%,#fd8c3c 100%) left bottom no-repeat,linear-gradient(to top,#e03237 0%,#e03237 100%) left bottom no-repeat,linear-gradient(to top,#fd8c3c 0%,#fd8c3c 100%) right bottom no-repeat;
+  background-size: 100% 2px,100% 2px,2px 100%,2px 100%;
+
+  &:hover,
+  &:focus {
+    background: linear-gradient(to right,#E22828 0%,#FF8C2F 100%);
+  }
+} */
+
 /* Ensure this is always at the bottom – @see https://tailwindcss.com/docs/content-configuration#working-with-third-party-libraries */
 @tailwind utilities;
diff --git a/web/components/Brand/Button.vue b/web/components/Brand/Button.vue
index 07fa95c12..cf2ffd7a3 100644
--- a/web/components/Brand/Button.vue
+++ b/web/components/Brand/Button.vue
@@ -32,26 +32,26 @@ const props = withDefaults(defineProps<ButtonProps>(), {
 defineEmits(['click']);
 
 const classes = computed(() => {
-  const buttonDefaults = 'group text-center font-semibold flex flex-row items-center justify-center cursor-pointer rounded-md disabled:opacity-50 disabled:hover:opacity-50 disabled:focus:opacity-50 disabled:cursor-not-allowed';
+  const buttonDefaults = 'group text-center font-semibold relative z-0 flex flex-row items-center justify-center cursor-pointer rounded-md shadow-none hover:shadow-md focus:shadow-md disabled:opacity-50 disabled:hover:opacity-50 disabled:focus:opacity-50 disabled:cursor-not-allowed';
   let buttonColors = '';
   let buttonSize = '';
   let iconSize = '';
 
   switch (props.btnStyle) {
     case 'fill':
-      buttonColors = 'text-white bg-gradient-to-r from-unraid-red to-orange shadow-none hover:from-unraid-red/60 hover:to-orange/60 focus:from-unraid-red/60 focus:to-orange/60 hover:shadow-md focus:shadow-md';
+      buttonColors = 'text-white';
       break;
     case 'gray':
-      buttonColors = 'text-black bg-grey shadow-none transition hover:text-white focus:text-white hover:bg-grey-mid focus:bg-grey-mid hover:shadow-md focus:shadow-md';
+      buttonColors = 'text-black bg-grey transition hover:text-white focus:text-white hover:bg-grey-mid focus:bg-grey-mid';
       break;
     case 'outline':
-      buttonColors = 'text-orange bg-gradient-to-r from-transparent to-transparent border-2 border-solid border-orange shadow-none hover:text-white focus:text-white hover:from-unraid-red hover:to-orange focus:from-unraid-red focus:to-orange hover:shadow-md focus:shadow-md';
+      buttonColors = 'text-orange bg-transparent border-2 border-solid border-orange hover:text-white focus:text-white';
       break;
     case 'underline':
-      buttonColors = 'opacity-75 hover:opacity-100 focus:opacity-100 underline transition shadow-none hover:text-alpha hover:bg-beta focus:text-alpha focus:bg-beta hover:shadow-md focus:shadow-md';
+      buttonColors = 'opacity-75 hover:opacity-100 focus:opacity-100 underline transition hover:text-alpha hover:bg-beta focus:text-alpha focus:bg-beta';
       break;
     case 'white':
-      buttonColors = 'text-black bg-white shadow-none transition hover:bg-grey focus:bg-grey hover:shadow-md focus:shadow-md';
+      buttonColors = 'text-black bg-white transition hover:bg-grey focus:bg-grey';
       break;
   }
 
@@ -100,6 +100,12 @@ const classes = computed(() => {
     :class="classes.button"
     @click="click ?? $emit('click')"
   >
+
+    <div v-if="btnStyle === 'fill'"
+      class="absolute inset-0 -z-10 bg-gradient-to-r from-unraid-red to-orange opacity-100 transition-all rounded-md group-hover:opacity-60 group-focus:opacity-60" />
+    <div v-if="btnStyle === 'outline'"
+      class="absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-gradient-to-r from-unraid-red to-orange opacity-0  transition-all rounded-md group-hover:opacity-100 group-focus:opacity-100" />
+
     <component
       v-if="icon"
       :is="icon"
@@ -116,3 +122,15 @@ const classes = computed(() => {
       ]" />
   </component>
 </template>
+
+<style lang="postcss">
+/* .button-gradient-border-to-bg {
+  background: linear-gradient(to right,#e03237 0%,#fd8c3c 100%) left top no-repeat,linear-gradient(to right,#e03237 0%,#fd8c3c 100%) left bottom no-repeat,linear-gradient(to top,#e03237 0%,#e03237 100%) left bottom no-repeat,linear-gradient(to top,#fd8c3c 0%,#fd8c3c 100%) right bottom no-repeat;
+  background-size: 100% 2px,100% 2px,2px 100%,2px 100%;
+
+  &:hover,
+  &:focus {
+    background: linear-gradient(to right,#E22828 0%,#FF8C2F 100%);
+  }
+} */
+</style>
\ No newline at end of file