diff --git a/files/static/dist/main.css b/files/static/dist/main.css
index 46f1a074d6..c665a3f3fe 100644
--- a/files/static/dist/main.css
+++ b/files/static/dist/main.css
@@ -2292,6 +2292,26 @@ video {
 .btn:disabled {
 	opacity: 0.5;
 }
+.btn-primary {
+	border-color: rgba(0, 0, 0, 0.1);
+	--tw-bg-opacity: 1;
+	background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+	background-image: linear-gradient(to top, var(--tw-gradient-stops));
+	--tw-gradient-from: rgb(var(--color-primary));
+	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--color-primary), 0));
+	--tw-gradient-to: rgba(var(--color-primary), 0.8);
+	--tw-text-opacity: 1;
+	color: rgba(var(--color-700), var(--tw-text-opacity));
+}
+.btn-primary:hover {
+	--tw-gradient-from: rgba(var(--color-primary), 0.9);
+	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
+	--tw-gradient-to: rgb(var(--color-primary));
+}
+.btn-primary:focus {
+	--tw-text-opacity: 1;
+	color: rgba(var(--color-900), var(--tw-text-opacity));
+}
 .btn-red {
 	--tw-border-opacity: 1;
 	border-color: rgba(127, 29, 29, var(--tw-border-opacity));
@@ -2330,6 +2350,25 @@ video {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-200), var(--tw-text-opacity));
 }
+.btn-blue {
+	--tw-border-opacity: 1;
+	border-color: rgba(12, 74, 110, var(--tw-border-opacity));
+	background-image: linear-gradient(to top, var(--tw-gradient-stops));
+	--tw-gradient-from: #0369a1;
+	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(3, 105, 161, 0));
+	--tw-gradient-to: #0284c7;
+	--tw-text-opacity: 1;
+	color: rgba(var(--color-100), var(--tw-text-opacity));
+}
+.btn-blue:hover {
+	--tw-gradient-from: #0284c7;
+	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(2, 132, 199, 0));
+	--tw-gradient-to: #0369a1;
+}
+.btn-blue:focus {
+	--tw-text-opacity: 1;
+	color: rgba(var(--color-200), var(--tw-text-opacity));
+}
 .btn-gray {
 	--tw-border-opacity: 1;
 	border-color: rgba(var(--color-300), var(--tw-border-opacity));
diff --git a/files/static/src/main.css b/files/static/src/main.css
index 680d1ac5d5..29f9c62f84 100644
--- a/files/static/src/main.css
+++ b/files/static/src/main.css
@@ -165,12 +165,18 @@
 .btn {
 	@apply inline-block px-4 py-2 active:shadow-inner border rounded-md text-shadow-t shadow-inset-t-white-10 text-sm font-bold focus:outline-none disabled:opacity-50;
 }
+.btn-primary {
+	@apply bg-white bg-gradient-to-t from-primary to-primary/80 hover:from-primary/90 hover:to-primary border-black/10 text-gray-700 focus:text-gray-900;
+}
 .btn-red {
 	@apply bg-gradient-to-t from-red-700 to-red-600 hover:from-red-600 hover:to-red-700 border-red-900 text-gray-100 focus:text-white;
 }
 .btn-green {
 	@apply bg-gradient-to-t from-green-700 to-green-600 hover:from-green-600 hover:to-green-700 border-green-900 text-gray-100 focus:text-gray-200;
 }
+.btn-blue {
+	@apply bg-gradient-to-t from-blue-700 to-blue-600 hover:from-blue-600 hover:to-blue-700 border-blue-900 text-gray-100 focus:text-gray-200;
+}
 .btn-gray {
 	@apply bg-gradient-to-t from-gray-200 to-gray-100 hover:from-gray-100 hover:to-gray-200 border-gray-300 text-gray-700 focus:text-gray-900;
 }