diff --git a/changelog/unreleased/enhancement-primary-button-gradient b/changelog/unreleased/enhancement-primary-button-gradient
new file mode 100644
index 000000000..ebe81a48c
--- /dev/null
+++ b/changelog/unreleased/enhancement-primary-button-gradient
@@ -0,0 +1,6 @@
+Enhancement: Make filled primary OcButton use gradient background
+
+We've updated the OcButton to use the gradient background color when used in its `filled` appearance.
+
+https://github.com/owncloud/owncloud-design-system/issues/1952
+https://github.com/owncloud/owncloud-design-system/pull/2036
diff --git a/src/components/atoms/OcButton/OcButton.vue b/src/components/atoms/OcButton/OcButton.vue
index 2118c3c28..aed63ef86 100644
--- a/src/components/atoms/OcButton/OcButton.vue
+++ b/src/components/atoms/OcButton/OcButton.vue
@@ -130,26 +130,15 @@ export default {
   },
   computed: {
     $_ocButton_buttonClass() {
-      const classes = [
+      return [
         "oc-button",
         "oc-rounded",
         `oc-button-${getSizeClass(this.size)}`,
         `oc-button-justify-content-${this.justifyContent}`,
         `oc-button-gap-${getSizeClass(this.gapSize)}`,
+        `oc-button-${this.variation}`,
+        `oc-button-${this.variation}-${this.appearance}`,
       ]
-
-      classes.push(`oc-button-${this.variation}`)
-
-      switch (this.appearance) {
-        case "raw":
-          classes.push(`oc-button-${this.variation}-raw`)
-          break
-        case "outline":
-          classes.push(`oc-button-${this.variation}-outline`)
-          break
-      }
-
-      return classes
     },
 
     additionalAttributes() {
@@ -358,6 +347,9 @@ export default {
       var(--oc-color-swatch-primary-hover),
       var(--oc-color-swatch-primary-muted)
     );
+    &-filled {
+      @extend .oc-background-primary-gradient;
+    }
   }
 
   &-success {
diff --git a/src/styles/theme/background.scss b/src/styles/theme/background.scss
index c93413914..3c16c5d48 100644
--- a/src/styles/theme/background.scss
+++ b/src/styles/theme/background.scss
@@ -15,7 +15,7 @@
   border-color:
     linear-gradient(90deg,
     var(--oc-color-swatch-primary-muted) 0%,
-    var(--oc-color-swatch-primary-gradient) 100%);
+    var(--oc-color-swatch-primary-gradient) 100%) !important;
 }
 /* stylelint-enable */