diff --git a/src/resources/css/elements/buttons.css b/src/resources/css/elements/buttons.css
index 6a24b28..7a56e1d 100644
--- a/src/resources/css/elements/buttons.css
+++ b/src/resources/css/elements/buttons.css
@@ -1,23 +1,202 @@
+/** +------------------------+ **/
+/** | Base styling           | **/
+/** +------------------------+ **/
+
+.button-xs, .button-sm, .button, .button-lg {
+    @apply inline-grid grid-rows-1 auto-cols-max grid-flow-col gap-x-1 items-center justify-center;
+}
+
+.button-xs:not(.button-group > .button-xs),
+.button-sm:not(.button-group > .button-sm),
+.button:not(.button-group > .button),
+.button-lg:not(.button-group > .button-lg) {
+    @apply rounded-lg;
+}
+
+.button-xs {
+    @apply p-1;
+}
+
+.button-sm {
+    @apply px-3 py-1;
+}
+
 .button {
-    @apply inline-grid grid-flow-col auto-cols-max gap-x-2 items-center;
+    @apply px-4 py-2;
 }
 
-.button-primary {
-    @apply border-blue-300 bg-gradient-to-br from-blue-400 to-blue-700;
+.button-lg {
+    @apply px-5 py-3;
 }
 
-.button-secondary {
-    @apply border-indigo-300 bg-gradient-to-br from-indigo-400 to-indigo-700;
+
+/** +------------------------+ **/
+/** | Gradient Buttons       | **/
+/** +------------------------+ **/
+
+.button-xs[class*="button-gradient"],
+.button-sm[class*="button-gradient"],
+.button[class*="button-gradient"],
+.button-lg[class*="button-gradient"] {
+    @apply transition-all duration-300 ease-in-out border-2;
 }
 
-.button-tertiary {
-    @apply border-blue-300 bg-gradient-to-br from-green-400 to-blue-500;
+.button-gradient-primary {
+    @apply text-white;
+    background: linear-gradient(to right, hsl(291, 95.9%, 61.8%), hsl(187, 100%, 41.6%));
+    border-color: hsl(187, 100%, 41.6%);
+    box-shadow: 0 4px 12px 0 hsla(223, 15.7%, 65.1%, 0.1);
+}
+.button-gradient-primary:hover {
+    border-color: hsl(187, 100%, 51.6%);
 }
 
-.button-success {
-    @apply border-green-300 bg-gradient-to-br from-green-400 to-green-700;
+.button-gradient-secondary {
+    @apply text-white;
+    background: linear-gradient(to right, hsl(229, 75.9%, 65.9%), hsl(270, 36.7%, 46.5%) 90%);
+    border-color: hsl(270, 36.7%, 46.5%);
+    box-shadow: 0 4px 15px 0 hsla(265, 36%, 48.4%, 0.75);
+}
+.button-gradient-secondary:hover {
+    border-color: hsl(270, 36.7%, 56.5%);
 }
 
-.button-danger {
-    @apply border-red-300 bg-gradient-to-br from-red-400 to-red-700;
+.button-gradient-tertiary {
+    @apply text-white;
+    background: linear-gradient(to right, hsl(212, 18.8%, 19.8%), hsl(211, 15.8%, 33.5%));
+    border-color: hsl(211, 15.8%, 33.5%);
+    box-shadow: 0 4px 15px 0 hsla(213, 18.2%, 21.6%, 0.75);
+}
+.button-gradient-tertiary:hover {
+    border-color: hsl(211, 15.8%, 43.5%);
+    backdrop-filter: blur(25px) brightness(125%) hue-rotate(20deg);
+}
+
+.button-gradient-info {
+    @apply text-white;
+    background: linear-gradient(to right, hsl(198, 75.8%, 51.4%), hsl(218, 80.7%, 59.4%));
+    border-color: hsl(218, 80.7%, 59.4%);
+    box-shadow: 0 4px 15px 0 hsla(216, 80.1%, 58.6%, 0.75);
+}
+.button-gradient-info:hover {
+    border-color: hsl(218, 80.7%, 69.4%);
+}
+
+.button-gradient-success {
+    @apply text-white;
+    background: linear-gradient(to right, hsl(151, 71.8%, 52.7%), hsl(151, 61.8%, 44.1%));
+    border-color: hsl(151, 61.8%, 44.1%);
+    box-shadow: 0 4px 15px 0 hsla(155, 75.9%, 37.5%, 0.75);
+}
+.button-gradient-success:hover {
+    border-color: hsl(151, 61.8%, 54.1%);
+}
+
+.button-gradient-warning {
+    @apply text-white;
+    background: linear-gradient(to right, hsl(44, 88%, 67.3%), hsl(14, 97.4%, 45.3%));
+    border-color: hsl(14, 97.4%, 45.3%);
+    box-shadow: 0 4px 15px 0 hsla(15, 91.6%, 46.9%, 0.75);
+}
+.button-gradient-warning:hover {
+    border-color: hsl(14, 97.4%, 55.3%);
+}
+
+.button-gradient-danger {
+    @apply text-white;
+    background: linear-gradient(to right, hsl(357, 81.7%, 57.3%), hsl(358, 84%, 65.7%));
+    border-color: hsl(358, 84%, 65.7%);
+    box-shadow: 0 5px 15px hsla(358, 96.1%, 69.8%, 0.4);
+}
+.button-gradient-danger:hover {
+    border-color: hsl(358, 84%, 75.7%);
+}
+
+
+/** +------------------------+ **/
+/** | Outline Buttons        | **/
+/** +------------------------+ **/
+
+.button-xs[class*="button-outline"],
+.button-sm[class*="button-outline"],
+.button[class*="button-outline"],
+.button-lg[class*="button-outline"] {
+    @apply font-bold transition-all duration-300 ease-in-out border-2 bg-transparent;
+}
+
+.button-outline-primary {
+    color: hsl(187, 100%, 41.6%);
+    border-color: hsl(187, 100%, 41.6%);
+    box-shadow: 0 4px 12px 0 hsla(187, 100%, 41.6%, 0.25), inset 0 4px 12px 0 hsla(187, 100%, 41.6%, 0.25);
+}
+.button-outline-primary:hover {
+    color: hsl(187, 100%, 61.6%);
+    border-color: hsl(187, 100%, 61.6%);
+    box-shadow: 0 6px 16px 0 hsla(187, 100%, 61.6%, 0.33), inset 0 6px 16px 0 hsla(187, 100%, 61.6%, 0.33);
+}
+
+.button-outline-secondary {
+    color: hsl(270, 36.7%, 46.5%);
+    border-color: hsl(270, 36.7%, 46.5%);
+    box-shadow: 0 4px 12px 0 hsla(270, 36.7%, 46.5%, 0.25), inset 0 4px 12px 0 hsla(270, 36.7%, 46.5%, 0.25);
+}
+.button-outline-secondary:hover {
+    color: hsl(270, 36.7%, 66.5%);
+    border-color: hsl(270, 36.7%, 66.5%);
+    box-shadow: 0 6px 16px 0 hsla(270, 36.7%, 66.5%, 0.33), inset 0 6px 16px 0 hsla(270, 36.7%, 66.5%, 0.33);
+}
+
+.button-outline-tertiary {
+    color: hsl(211, 15.8%, 33.5%);
+    border-color: hsl(211, 15.8%, 33.5%);
+    box-shadow: 0 4px 12px 0 hsla(211, 15.8%, 33.5%, 0.25), inset 0 4px 12px 0 hsla(211, 15.8%, 33.5%, 0.25);
+}
+.button-outline-tertiary:hover {
+    color: hsl(211, 15.8%, 53.5%);
+    border-color: hsl(211, 15.8%, 53.5%);
+    box-shadow: 0 6px 16px 0 hsla(211, 15.8%, 53.5%, 0.33), inset 0 6px 16px 0 hsla(211, 15.8%, 53.5%, 0.33);
+}
+
+.button-outline-info {
+    color: hsl(218, 80.7%, 59.4%);
+    border-color: hsl(218, 80.7%, 59.4%);
+    box-shadow: 0 4px 12px 0 hsla(218, 80.7%, 59.4%, 0.25), inset 0 4px 12px 0 hsla(218, 80.7%, 59.4%, 0.25);
+}
+.button-outline-info:hover {
+    color: hsl(218, 80.7%, 79.4%);
+    border-color: hsl(218, 80.7%, 79.4%);
+    box-shadow: 0 6px 16px 0 hsla(218, 80.7%, 79.4%, 0.33), inset 0 6px 16px 0 hsla(218, 80.7%, 79.4%, 0.33);
+}
+
+.button-outline-success {
+    color: hsl(151, 61.8%, 44.1%);
+    border-color: hsl(151, 61.8%, 44.1%);
+    box-shadow: 0 4px 12px 0 hsla(151, 61.8%, 44.1%, 0.25), inset 0 4px 12px 0 hsla(151, 61.8%, 44.1%, 0.25);
+}
+.button-outline-success:hover {
+    color: hsl(151, 61.8%, 64.1%);
+    border-color: hsl(151, 61.8%, 64.1%);
+    box-shadow: 0 6px 16px 0 hsla(151, 61.8%, 64.1%, 0.33), inset 0 6px 16px 0 hsla(151, 61.8%, 64.1%, 0.33);
+}
+
+.button-outline-warning {
+    color: hsl(14, 97.4%, 45.3%);
+    border-color: hsl(14, 97.4%, 45.3%);
+    box-shadow: 0 4px 12px 0 hsla(14, 97.4%, 45.3%, 0.25), inset 0 4px 12px 0 hsla(14, 97.4%, 45.3%, 0.25);
+}
+.button-outline-warning:hover {
+    color: hsl(14, 97.4%, 65.3%);
+    border-color: hsl(14, 97.4%, 65.3%);
+    box-shadow: 0 6px 16px 0 hsla(14, 97.4%, 65.3%, 0.33), inset 0 6px 16px 0 hsla(14, 97.4%, 65.3%, 0.33);
+}
+
+.button-outline-danger {
+    color: hsl(358, 84%, 65.7%);
+    border-color: hsl(358, 84%, 65.7%);
+    box-shadow: 0 4px 12px 0 hsla(358, 84%, 65.7%, 0.25), inset 0 4px 12px 0 hsla(358, 84%, 65.7%, 0.25);
+}
+.button-outline-danger:hover {
+    color: hsl(358, 84%, 85.7%);
+    border-color: hsl(358, 84%, 85.7%);
+    box-shadow: 0 6px 16px 0 hsla(358, 84%, 85.7%, 0.33), inset 0 6px 16px 0 hsla(358, 84%, 85.7%, 0.33);
 }