diff --git a/assets/css/app.scss b/assets/css/app.scss
index 2b7b260f60..9f66a17736 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -2,39 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-    [type='text'],
-    [type='email'],
-    [type='url'],
-    [type='password'],
-    [type='number'],
-    [type='date'],
-    [type='datetime-local'],
-    [type='month'],
-    [type='search'],
-    [type='tel'],
-    [type='time'],
-    [type='week'],
-    [multiple],
-    textarea,
-    select {
-      @apply rounded border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500;
-    }
-
-    [type='checkbox'],
-    [type='radio'] {
-      @apply border-gray-300 text-blue-600 focus:ring-blue-500;
-    }
-}
-
-.btn {
-  @apply font-bold py-2 px-4 rounded;
-}
 .btn-blue {
-  @apply bg-blue-500 text-white;
+  @apply bg-primary text-white;
 }
 .btn-blue:hover {
-  @apply bg-blue-700;
 }
 
 @import '~cropper/dist/cropper.css';
@@ -45,36 +16,7 @@
 
 @layer components {
   .card {
-    @apply bg-white rounded shadow-lg w-full;
-  }
-
-  // Buttons.
-
-  .btn {
-    //@apply inline-block text-black px-4 py-2 text-xs font-medium leading-6 text-center bg-gray-100 uppercase transition rounded shadow hover:shadow-lg focus:outline-none;
-    //disabled:cursor-not-allowed
-    //@apply block px-4 py-2 transition duration-100 ease-in-out focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 ;
-    @apply font-bold h-10 inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2;
-  }
-
-  .btn-primary {
-    @apply text-ch-text-primary bg-ch-primary hover:bg-ch-primary-dark focus:ring-ch-primary-light;
-  }
-
-  .btn-secondary {
-    @apply text-ch-text-secondary bg-ch-secondary hover:bg-ch-secondary-dark focus:ring-ch-secondary-light;
-  }
-
-  .btn-warning {
-    @apply text-ch-text-warning bg-ch-warning hover:bg-ch-warning-dark focus:ring-ch-warning-light;
-  }
-
-  .btn-success {
-    @apply text-ch-text-success bg-ch-success hover:bg-ch-success-dark focus:ring-ch-success-light;
-  }
-
-  .btn-danger {
-    @apply text-ch-text-error bg-ch-error hover:bg-ch-error-dark focus:ring-ch-error-light;
+    @apply rounded shadow-lg w-full;
   }
 
   // Buttons with icons.
@@ -89,19 +31,18 @@
   // Forms.
 
   .help-block {
-    @apply mt-2 text-xs text-gray-500;
+    @apply mt-2 text-xs;
   }
 
   .has-error .ch-form-label {
-    @apply h-8 text-red-500;
+    @apply h-8;
   }
 
   .has-error .help-block {
-    @apply text-red-500 italic text-xs;
+    @apply italic text-xs;
   }
 
   .has-error .ch-form-control {
-    @apply border-red-500;
   }
 
   legend {
@@ -122,15 +63,13 @@
 
   // Tables
   table {
-      @apply min-w-full divide-y divide-gray-200;
+      @apply min-w-full divide-y;
   }
 
   table thead {
-    @apply bg-gray-50;
   }
 
   table tbody {
-    @apply bg-white divide-y divide-gray-200;
   }
 
   table thead th,
@@ -160,19 +99,15 @@
   }
 
   .alert-info {
-    @apply text-ch-text-info bg-ch-info;
   }
 
   .alert-warning {
-    @apply text-ch-text-warning bg-ch-warning;
   }
 
   .alert-success {
-    @apply text-ch-text-success bg-ch-success;
   }
 
   .alert-danger {
-    @apply text-ch-text-error bg-ch-error;
   }
 
   // Tabs
@@ -194,11 +129,11 @@
   // Page header
 
   .page-header {
-    @apply text-gray-500 text-2xl flex flex-row gap-2;
+    @apply text-2xl flex flex-row gap-2;
   }
 
   #no-data-view {
-    @apply flex flex-col items-center justify-center p-4 space-y-4 antialiased text-gray-900;
+    @apply flex flex-col items-center justify-center p-4 space-y-4 antialiased;
   }
 
   .pull-right {
@@ -210,16 +145,12 @@
   }
 
   .ch-tool-icon {
-    @apply font-extrabold text-transparent bg-clip-text bg-ch-primary mr-0.5;
   }
   .ch-tool-icon-disabled {
-    @apply font-extrabold text-transparent bg-clip-text bg-gray-400 mr-0.5;
   }
   .ch-tool-icon-gradient {
-    @apply font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-ch-primary to-ch-primary-light;
   }
   .ch-tool-icon-button {
-    @apply font-extrabold bg-clip-text bg-ch-text;
   }
 
   // Forms
@@ -234,40 +165,11 @@
 
   // Special
 
-  .badge {
-    @apply rounded-sm p-1 font-medium;
-
-    &--error {
-      @apply bg-ch-error text-ch-text-error;
-    }
-
-    &--success {
-      @apply bg-ch-success text-ch-text-success;
-    }
-
-    &--warning {
-      @apply bg-ch-warning text-ch-text-warning;
-    }
-
-    &--info {
-      @apply bg-ch-info text-ch-text-info;
-    }
-
-    &--primary {
-      @apply bg-ch-primary text-ch-text-primary;
-    }
-
-    &--secondary {
-      @apply bg-ch-secondary text-ch-text-secondary;
-    }
-  }
-
   // Progress bars
   .progress {
-    @apply rounded-sm ring-1 ring-ch-secondary bg-ch-primary text-sm text-center min-h-full ml-12 mr-4;
+    @apply rounded-sm ring-1 text-sm text-center min-h-full ml-12 mr-4;
   }
   .progress .progress-bar {
-    @apply bg-ch-secondary text-ch-text-secondary;
   }
 
   // Pager
@@ -312,44 +214,3 @@
 @import "~@fancyapps/fancybox/dist/jquery.fancybox.css";
 @import "~timepicker/jquery.timepicker.min.css";
 //@import "~jquery-contextmenu/dist/jquery.contextMenu.css";
-
-// Base Prime components
-.p-checkbox {
-  width: 16px;
-  height: 16px;
-}
-.p-checkbox .p-checkbox-box {
-  border: 2px solid #d4d4d8;
-  background: #ffffff;
-  width: 16px;
-  height: 16px;
-  color: #3f3f46;
-  border-radius: 0.375rem;
-  transition: none;
-}
-.p-checkbox .p-checkbox-box .p-checkbox-icon {
-  transition-duration: 0.2s;
-  color: #ffffff;
-  font-size: 10px;
-}
-.p-checkbox .p-checkbox-box.p-highlight {
-  border-color: #4F46E5;
-  background: #4F46E5;
-}
-.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
-  border-color: #d4d4d8;
-}
-.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366F1;
-  border-color: #4F46E5;
-}
-.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
-  border-color: #4F46E5;
-  background: #4F46E5;
-  color: #ffffff;
-}
-.p-checkbox.p-invalid > .p-checkbox-box {
-  border-color: #f0a9a7;
-}
diff --git a/assets/css/scorm.scss b/assets/css/scorm.scss
index ba33a9c14a..2c76f45ceb 100644
--- a/assets/css/scorm.scss
+++ b/assets/css/scorm.scss
@@ -243,13 +243,11 @@ body {
 .scorm_item_section .section {
     background: url("../../public/img/scorm/folder-item-closed.png") no-repeat 10px center;
     padding: 10px 20px 10px 35px;
-    @apply text-ch-ternary;
 }
 
 .scorm_item_section.scorm_completed .section {
     background: url("../../public/img/scorm/folder-item-open.png") no-repeat 10px center;
     padding-right: 1.5em;
-    @apply text-ch-ternary;
 }
 
 .scorm_item_normal a:hover {
@@ -273,7 +271,6 @@ body {
     padding: 0;
     display: inline-block;
     width: 100%;
-    @apply bg-ch-primary;
 }
 
 #scorm-info .description-autor p {
@@ -294,12 +291,11 @@ body {
 }
 
 #scorm-info #progress_bar .progress {
-    @apply rounded-sm ring-1 ring-ch-secondary bg-white text-sm text-center min-h-full ml-12 mr-4;
+    @apply rounded-sm ring-1 bg-white text-sm text-center min-h-full ml-12 mr-4;
 }
 
 #scorm-info .progress-bar {
   line-height: 17px;
-  @apply bg-ch-secondary text-ch-text-secondary;
 }
 
 .scorm-title {
@@ -444,27 +440,22 @@ body {
     text-align: center;
     border-radius: 100%;
     font-size: 20px;
-    @apply bg-ch-ternary text-ch-text-secondary;
 }
 
 .icon-toolbar .fa:hover,
 .icon-toolbar .mdi:hover {
-    @apply bg-ch-primary-light;
 }
 
 .expand .fa,
 .expand .mdi {
-    @apply bg-ch-ternary;
 }
 
 .expand .fa:hover,
 .expand .mdi:hover {
-    @apply bg-ch-primary-light text-ch-text-secondary;
 }
 
 .expand .fa:active, .expand .fa:focus,
 .expand .mdi:active, .expand .mdi:focus {
-    @apply bg-ch-primary-light text-ch-text-secondary;
 }
 
 .actions_lp {
@@ -501,7 +492,7 @@ body {
     -webkit-transition: all 0.4s ease-out;
     -moz-transition: all 0.4s ease-out;
     transition: all 0.4s ease-out;
-    @apply border-2 border-ch-ternary-dark bg-ch-text-secondary;
+    @apply border-2;
 }
 .c-menu-right .circle {
     opacity: 0;
@@ -510,7 +501,7 @@ body {
     padding: 2px;
     border-radius: 20px;
     background-color: #ffffff;
-    @apply border-2 border-ch-ternary-dark bg-ch-text-secondary;
+    @apply border-2;
 }
 
 .c-menu-left .open.circle {
@@ -531,7 +522,6 @@ body {
     line-height: 35px;
     text-align: center;
     border-radius: 100%;
-    @apply text-ch-text-secondary;
 }
 
 .c-menu-left .circle a:hover {
@@ -551,14 +541,12 @@ body {
     padding: 7px;
     background: #ffffff;
     font-size: 16px;
-    @apply border-2 border-ch-ternary-dark;
+    @apply border-2;
 }
 
 .menu-button:hover {
-  @apply bg-ch-ternary-light text-ch-text-secondary;
 }
 .menu-button-selected {
-  @apply bg-ch-ternary text-ch-text-secondary;
 }
 
 /* LP VIEW COLLAPSE */
@@ -671,19 +659,15 @@ body {
 }
 #learning_path_toc .child_item.lp_item_type_document.scorm_completed{
     background: url(../../public/img/icons/svg/check-completed.svg) right center no-repeat;
-    @apply bg-ch-ternary;
 }
 #learning_path_toc .child_item.lp_item_type_document.scorm_not_attempted{
     background: url(../../public/img/icons/svg/check-not-attempted.svg) right center no-repeat;
-    @apply bg-ch-ternary;
 }
 #learning_path_toc .root_item.lp_item_type_document.scorm_completed{
     background: url(../../public/img/icons/svg/check-completed.svg) right center no-repeat;
-    @apply bg-ch-ternary;
 }
 #learning_path_toc .root_item.lp_item_type_document.scorm_not_attempted{
     background: url(../../public/img/icons/svg/check-not-attempted.svg) right center no-repeat;
-    @apply bg-ch-ternary;
 }
 
 .status-heading .panel-heading .item-action{
@@ -704,42 +688,31 @@ body {
   width: 100%;
 }
 .scorm_completed .item a{
-  @apply text-ch-ternary;
 }
 .scorm_completed .item a.scorm_highlighted{
-  @apply text-ch-ternary;
 }
 .scorm_highlight .item {
   background: url("../../public/img/scorm/scorm_highlight.png") no-repeat 10px center !important;
-  @apply bg-ch-secondary text-ch-text-secondary;
 }
 .scorm_highlight.scorm_completed .item {
   background: url("../../public/img/scorm/scorm_current.png") no-repeat 10px center !important;
-  @apply bg-ch-secondary text-ch-text-secondary;
 }
 .scorm_highlight.scorm_failed .item {
   background: url("../../public/img/scorm/scorm_failed.png") no-repeat 10px center !important;
-  @apply bg-ch-secondary text-ch-text-secondary;
 }
 .scorm_item_normal.scorm_highlight {
-  @apply bg-ch-secondary text-ch-text-secondary;
 }
 .scorm_item_normal.scorm_highlight.scorm_not_attempted {
   background: url(../../public/img/icons/svg/check-not-attempted.svg) right center no-repeat;
-  @apply bg-ch-secondary text-ch-text-secondary;
 }
 .scorm_item_normal.scorm_highlight.scorm_completed {
   background: url(../../public/img/icons/svg/check-highlight.svg) right center no-repeat;
-  @apply bg-ch-secondary text-ch-text-secondary;
 }
 .scorm_item_normal.scorm_highlight a {
-  @apply text-ch-text-secondary;
 }
 #learning_path_toc .root_item.lp_item_type_document.scorm_highlight{
-  @apply bg-ch-primary;
 }
 #learning_path_toc .child_item.lp_item_type_document.scorm_highlight{
-  @apply bg-ch-primary;
 }
 #learning_path_right_zone .lp-view-tabs .tab-content {
   bottom: 0;
diff --git a/assets/css/scss/_exercise.scss b/assets/css/scss/_exercise.scss
index b9d55507a9..3366aceb41 100644
--- a/assets/css/scss/_exercise.scss
+++ b/assets/css/scss/_exercise.scss
@@ -116,7 +116,7 @@
     }
 
     .exercise-draggable-answer-option {
-      @apply border border-gray-400 rounded-sm p-2 cursor-move bg-gray-100;
+      @apply border border-gray-50 rounded-sm p-2 cursor-move bg-gray-10;
     }
 
     .question-answer {
@@ -134,7 +134,7 @@
     }
 
     .droppable-item {
-      @apply p-2 bg-indigo-200;
+      @apply p-2;
 
       &.list-inline {
         @apply text-center align-middle;
@@ -148,7 +148,7 @@
         @apply p-2;
 
         &:empty {
-          @apply bg-indigo-300 rounded-sm;
+          @apply rounded-sm;
           min-height: 4rem;
           min-width: 6rem;
         }
@@ -185,25 +185,25 @@
     @apply mb-4;
 
     &-ribbon {
-      @apply mb-4 flex border bg-gray-100 rounded-md;
+      @apply mb-4 flex border bg-gray-10 rounded-md;
 
       &-title {
-        @apply font-bold p-3 rounded-l-md;
+        @apply font-bold p-3 rounded-l-md text-white;
 
         &--error {
-          @apply bg-ch-error text-ch-text-error;
+          @apply bg-error;
         }
 
         &--warning {
-          @apply bg-ch-warning text-ch-text-warning;
+          @apply bg-warning;
         }
 
         &--success {
-          @apply bg-ch-success text-ch-text-success;
+          @apply bg-success;
         }
 
         &--info {
-          @apply bg-ch-info text-ch-text-info;
+          @apply bg-info;
         }
       }
 
diff --git a/assets/css/scss/_forms.scss b/assets/css/scss/_forms.scss
deleted file mode 100755
index e69de29bb2..0000000000
diff --git a/assets/css/scss/components/_badges.scss b/assets/css/scss/components/_badges.scss
new file mode 100644
index 0000000000..821493e408
--- /dev/null
+++ b/assets/css/scss/components/_badges.scss
@@ -0,0 +1,31 @@
+.badge {
+  @apply font-semibold py-1 px-4 rounded-full text-white;
+
+  &--default {
+    @apply bg-gray-50;
+  }
+
+  &--error {
+    @apply bg-error;
+  }
+
+  &--success {
+    @apply bg-success;
+  }
+
+  &--warning {
+    @apply bg-warning;
+  }
+
+  &--info {
+    @apply bg-info;
+  }
+
+  &--primary {
+    @apply bg-primary;
+  }
+
+  &--secondary {
+    @apply bg-secondary;
+  }
+}
\ No newline at end of file
diff --git a/assets/css/scss/components/_buttons.scss b/assets/css/scss/components/_buttons.scss
new file mode 100644
index 0000000000..4bfa96d746
--- /dev/null
+++ b/assets/css/scss/components/_buttons.scss
@@ -0,0 +1,70 @@
+.btn {
+  @apply font-semibold px-6 py-3.5 rounded-md text-center transition;
+
+  &--primary {
+    @apply bg-primary text-white;
+
+    &:hover,
+    &:focus {
+      @apply bg-support-4;
+    }
+
+    &:disabled {
+      @apply bg-gray-25 cursor-default select-none text-gray-50;
+    }
+  }
+
+  &--primary-outline {
+    @apply bg-white border border-primary text-primary;
+
+    &:hover,
+    &:focus {
+      @apply bg-primary text-white;
+    }
+
+    &:disabled,
+    &.disabled{
+      @apply bg-gray-10 border-gray-25 text-gray-50;
+    }
+  }
+
+  &--secondary {
+    @apply bg-secondary text-white;
+
+    &:hover,
+    &:focus {
+      @apply bg-support-5;
+    }
+
+    &:disabled {
+      @apply bg-gray-25 cursor-default select-none text-gray-50;
+    }
+  }
+
+  &--secondary-outline {
+    @apply bg-white border border-secondary text-secondary;
+
+    &:hover,
+    &:focus {
+      @apply bg-secondary text-white;
+    }
+
+    &:disabled,
+    &.disabled{
+      @apply bg-gray-10 border-gray-25 text-gray-50;
+    }
+  }
+
+  &--gray {
+    @apply bg-gray-90 text-white;
+
+    &:hover,
+    &:focus {
+      @apply bg-black;
+    }
+
+    &:disabled {
+      @apply bg-gray-25 cursor-default select-none text-gray-50;
+    }
+  }
+}
diff --git a/assets/css/scss/components/_forms.scss b/assets/css/scss/components/_forms.scss
new file mode 100644
index 0000000000..4b670b0bed
--- /dev/null
+++ b/assets/css/scss/components/_forms.scss
@@ -0,0 +1,61 @@
+form {
+  .form__field {
+    @apply w-full;
+  }
+
+  input {
+    @apply w-full;
+  }
+}
+
+// input switch
+.p-inputswitch {
+  @apply align-middle h-4 w-8;
+
+  .p-inputswitch-slider {
+    @apply bg-gray-50 rounded-full transition-none;
+
+    &:before {
+      @apply bg-white duration-200 h-3 left-0.5 -mt-1.5 rounded-full w-3;
+    }
+  }
+
+  &.p-inputswitch-checked {
+    .p-inputswitch-slider {
+      @apply bg-secondary;
+
+      &:before {
+        @apply translate-x-4;
+      }
+    }
+  }
+
+  &.p-focus {
+    .p-inputswitch-slider {
+      @apply outline-none outline-offset-0;
+    }
+  }
+
+  ~ label {
+    @apply ml-4;
+  }
+}
+
+.p-inputwrapper {
+  @apply w-full;
+}
+
+// input text
+.p-inputtext {
+  @apply appearance-none rounded-md transition w-full;
+}
+
+.p-input-icon-right {
+  > .p-inputtext {
+    @apply pr-10;
+  }
+
+  > i:last-of-type {
+    @apply right-3;
+  }
+}
\ No newline at end of file
diff --git a/assets/css/scss/index.scss b/assets/css/scss/index.scss
index dc507aa3f5..47f2222d05 100755
--- a/assets/css/scss/index.scss
+++ b/assets/css/scss/index.scss
@@ -4,7 +4,9 @@
 //// Tools
 //@import 'inbox';
 //@import 'install';
-//@import "forms";
+@import "components/badges";
+@import "components/buttons";
+@import "components/forms";
 //@import 'announcement';
 
 @import "layout/topbar";
@@ -13,6 +15,8 @@
 @import 'layout/main_container';
 @import 'layout/toast';
 
+@import 'login';
+
 @import 'forums';
 @import 'exercise';
 //@import 'jqueryui';
diff --git a/assets/vue/components/Loading.vue b/assets/vue/components/Loading.vue
index 51b621f060..749df3a671 100644
--- a/assets/vue/components/Loading.vue
+++ b/assets/vue/components/Loading.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="visible" class="w-full h-full fixed block top-0 left-0 bg-white opacity-60 text-center"
        style="z-index: 9999;">
-    <div class="spinner-border text-green-500 opacity-75 top-1/2 my-0 mx-auto block relative w-0 h-0" role="status">
+    <div class="spinner-border text-success opacity-75 top-1/2 my-0 mx-auto block relative w-0 h-0" role="status">
       <span class="sr-only">Loading</span>
     </div>
   </div>
diff --git a/assets/vue/components/Toolbar.vue b/assets/vue/components/Toolbar.vue
index 0e5491d8a9..883e81312d 100644
--- a/assets/vue/components/Toolbar.vue
+++ b/assets/vue/components/Toolbar.vue
@@ -28,7 +28,7 @@
 <!--      <q-btn-->
 <!--        v-if="handleSubmit"-->
 <!--        no-caps-->
-<!--        class="btn btn-primary"-->
+<!--        class="btn btn--primary"-->
 <!--        :loading="isLoading"-->
 <!--        @click="submitItem"-->
 <!--        unelevated-->
@@ -81,7 +81,7 @@
       <q-btn
         v-if="handleAdd"
         no-caps
-        class="btn btn-primary"
+        class="btn btn--primary"
         @click="addItem"
       >
         <v-icon icon="mdi-folder-plus"/>
@@ -90,7 +90,7 @@
 
       <q-btn
         no-caps
-        class="btn btn-primary"
+        class="btn btn--primary"
         v-if="handleAddDocument"
         @click="addDocument"
       >
@@ -100,7 +100,7 @@
 
       <q-btn
         no-caps
-        class="btn btn-primary"
+        class="btn btn--primary"
         v-if="handleUploadDocument"
         @click="uploadDocument"
       >
diff --git a/assets/vue/components/social/WallPost.vue b/assets/vue/components/social/WallPost.vue
index 745510af82..85e395c14b 100644
--- a/assets/vue/components/social/WallPost.vue
+++ b/assets/vue/components/social/WallPost.vue
@@ -1,6 +1,6 @@
 <template>
   <q-card
-    :class="{ 'border-green-400': post.type === 4 }"
+    :class="{ 'border-success': post.type === 4 }"
     :flat="post.type !== 4"
     bordered
     class="mb-4"
@@ -65,7 +65,7 @@
 
     <q-list
       v-if="comments.length"
-      :class="{ 'border-green-400': post.type === 4 }"
+      :class="{ 'border-success': post.type === 4 }"
       bordered
       class="border-t-0"
       separator
diff --git a/assets/vue/views/account/Home.vue b/assets/vue/views/account/Home.vue
index 77497d1789..1e78846c62 100644
--- a/assets/vue/views/account/Home.vue
+++ b/assets/vue/views/account/Home.vue
@@ -18,7 +18,7 @@
       <q-route-tab to="/resources/personal_files" label="My files" />
     </q-tabs>
 
-    <a href="/account/edit" class="btn btn-primary">
+    <a href="/account/edit" class="btn btn--primary">
       Edit profile
     </a>
   </v-card>
diff --git a/assets/vue/views/course/Home.vue b/assets/vue/views/course/Home.vue
index 6bc643d1a7..f1bfad262b 100644
--- a/assets/vue/views/course/Home.vue
+++ b/assets/vue/views/course/Home.vue
@@ -10,7 +10,7 @@
 
       <div>
         <div class="flex flex-row" v-if="isCurrentTeacher && course">
-          <a class="btn btn-info mr-2 text-xs">
+          <a class="btn btn--info mr-2 text-xs">
             <v-icon icon="mdi-eye" class="pr-2" />
             {{ $t('See as student') }}
           </a>
@@ -64,7 +64,7 @@
         <div v-if="createInSession">
           <button
               v-if="introTool"
-              class="mt-2 btn btn-info"
+              class="mt-2 btn btn--info"
               @click="addIntro(course, introTool)"
           >
             <v-icon>mdi-plus</v-icon>
@@ -73,7 +73,7 @@
         </div>
         <div v-else>
           <button
-              class="mt-2 btn btn-info"
+              class="mt-2 btn btn--info"
               @click="updateIntro(intro)"
           >
             <v-icon>mdi-pencil</v-icon>
@@ -101,7 +101,7 @@
 
           <button
               v-if="introTool"
-              class="mt-2 btn btn-info"
+              class="mt-2 btn btn--info"
               @click="addIntro(course, introTool)"
           >
             <v-icon>mdi-plus</v-icon>
diff --git a/assets/vue/views/documents/DocumentForHtmlEditor.vue b/assets/vue/views/documents/DocumentForHtmlEditor.vue
index db437314ad..d73cd91ce0 100644
--- a/assets/vue/views/documents/DocumentForHtmlEditor.vue
+++ b/assets/vue/views/documents/DocumentForHtmlEditor.vue
@@ -3,11 +3,11 @@
     <template #left>
       <div v-if="isAuthenticated && isCurrentTeacher" class="flex flex-row gap-2" >
         <!--         <Button label="New" icon="pi pi-plus" class="p-button-primary p-button-sm p-mr-2" @click="openNew" />-->
-        <Button label="New folder" icon="pi pi-plus" class="btn btn-primary" @click="openNew" />
+        <Button label="New folder" icon="pi pi-plus" class="btn btn--primary" @click="openNew" />
 
         <!--         <Button label="New folder" icon="pi pi-plus" class="p-button-success p-mr-2" @click="addHandler()" />-->
         <!--         <Button label="New document" icon="pi pi-plus" class="p-button-sm p-button-primary p-mr-2" @click="addDocumentHandler()" />-->
-        <Button label="Upload" icon="pi pi-plus" class="btn btn-primary" @click="uploadDocumentHandler()" />
+        <Button label="Upload" icon="pi pi-plus" class="btn btn--primary" @click="uploadDocumentHandler()" />
       </div>
     </template>
   </Toolbar>
diff --git a/assets/vue/views/documents/List.vue b/assets/vue/views/documents/List.vue
index 77a06f5fa7..1cba062be6 100644
--- a/assets/vue/views/documents/List.vue
+++ b/assets/vue/views/documents/List.vue
@@ -93,23 +93,23 @@
     <div class="p-4 flex flex-row gap-1 mb-2">
       <div class="flex flex-row gap-2" >
         <!--         <Button label="New" icon="pi pi-plus" class="p-button-primary p-button-sm p-mr-2" @click="openNew" />-->
-        <Button class="btn btn-primary" @click="openNew">
+        <Button class="btn btn--primary" @click="openNew">
           <v-icon icon="mdi-folder-plus"/>
           {{ $t('New folder') }}
         </Button>
 
         <!--         <Button label="New folder" icon="pi pi-plus" class="p-button-success p-mr-2" @click="addHandler()" />-->
         <!--         <Button label="New document" icon="pi pi-plus" class="p-button-sm p-button-primary p-mr-2" @click="addDocumentHandler()" />-->
-        <Button label="{{ $t('New document') }}" class="btn btn-primary" @click="addDocumentHandler()" >
+        <Button label="{{ $t('New document') }}" class="btn btn--primary" @click="addDocumentHandler()" >
           <v-icon icon="mdi-file-plus"/>
           {{ $t('New document') }}
         </Button>
-        <Button label="{{ $t('Upload') }}" class="btn btn-primary" @click="uploadDocumentHandler()">
+        <Button label="{{ $t('Upload') }}" class="btn btn--primary" @click="uploadDocumentHandler()">
           <v-icon icon="mdi-file-upload"/>
           {{ $t('Upload') }}
         </Button>
         <!--
-        <Button label="{{ $t('Download') }}" class="btn btn-primary" @click="downloadDocumentHandler()" :disabled="!selectedItems || !selectedItems.length">
+        <Button label="{{ $t('Download') }}" class="btn btn--primary" @click="downloadDocumentHandler()" :disabled="!selectedItems || !selectedItems.length">
           <v-icon icon="mdi-file-download"/>
           {{ $t('Download') }}
         </Button>
@@ -206,16 +206,16 @@
     <Column :exportable="false">
       <template #body="slotProps">
         <div class="flex flex-row gap-2">
-          <Button class="btn btn-primary" @click="showHandler(slotProps.data)">
+          <Button class="btn btn--primary" @click="showHandler(slotProps.data)">
             <v-icon icon="mdi-information"/>
           </Button>
 
-          <Button v-if="isAuthenticated && isCurrentTeacher" class="btn btn-primary" @click="changeVisibilityHandler(slotProps.data, slotProps)">
+          <Button v-if="isAuthenticated && isCurrentTeacher" class="btn btn--primary" @click="changeVisibilityHandler(slotProps.data, slotProps)">
             <v-icon v-if="RESOURCE_LINK_PUBLISHED === slotProps.data.resourceLinkListFromEntity[0].visibility" icon="mdi-eye"/>
             <v-icon v-if="RESOURCE_LINK_DRAFT === slotProps.data.resourceLinkListFromEntity[0].visibility" icon="mdi-eye-off"/>
           </Button>
 
-          <Button v-if="isAuthenticated && isCurrentTeacher" class="btn btn-primary p-mr-2" @click="editHandler(slotProps.data)">
+          <Button v-if="isAuthenticated && isCurrentTeacher" class="btn btn--primary p-mr-2" @click="editHandler(slotProps.data)">
             <v-icon icon="mdi-pencil"/>
           </Button>
 
diff --git a/assets/vue/views/documents/Show.vue b/assets/vue/views/documents/Show.vue
index 3b32452d20..c1435e815a 100644
--- a/assets/vue/views/documents/Show.vue
+++ b/assets/vue/views/documents/Show.vue
@@ -39,7 +39,7 @@
 
             <!--            <span v-else>-->
             <!--                <q-btn-->
-            <!--                    class="btn btn-primary"-->
+            <!--                    class="btn btn--primary"-->
             <!--                    :to="item['downloadUrl']"-->
             <!--                >-->
             <!--                  <v-icon icon="mdi-file-download"/>-->
@@ -89,7 +89,7 @@
             <td>
               <div>
                 <a
-                    class="btn btn-primary"
+                    class="btn btn--primary"
                     :href="item['downloadUrl']"
                 >
                   <v-icon icon="mdi-file-download"/>
diff --git a/assets/vue/views/page/List.vue b/assets/vue/views/page/List.vue
index a58a546630..71edf86789 100644
--- a/assets/vue/views/page/List.vue
+++ b/assets/vue/views/page/List.vue
@@ -2,11 +2,11 @@
   <div v-if="isAdmin"  class="q-card">
     <div class="p-4 flex flex-row gap-1 mb-2">
       <div class="flex flex-row gap-2" >
-<!--        <Button class="btn btn-primary" @click="openNew">-->
+<!--        <Button class="btn btn--primary" @click="openNew">-->
 <!--          <v-icon icon="mdi-folder-plus"/>-->
 <!--          {{ $t('New category') }}-->
 <!--        </Button>-->
-        <Button label="{{ $t('New page') }}" class="btn btn-primary" @click="addHandler()" >
+        <Button label="{{ $t('New page') }}" class="btn btn--primary" @click="addHandler()" >
           <v-icon icon="mdi-file-plus"/>
           {{ $t('New page') }}
         </Button>
@@ -58,11 +58,11 @@
     <Column :exportable="false">
       <template #body="slotProps">
         <div class="flex flex-row gap-2">
-<!--          <Button class="btn btn-primary" @click="showHandler(slotProps.data)">-->
+<!--          <Button class="btn btn--primary" @click="showHandler(slotProps.data)">-->
 <!--            <v-icon icon="mdi-information"/>-->
 <!--          </Button>-->
 
-          <Button v-if="isAuthenticated" class="btn btn-primary p-mr-2" @click="editHandler(slotProps.data)">
+          <Button v-if="isAuthenticated" class="btn btn--primary p-mr-2" @click="editHandler(slotProps.data)">
             <v-icon icon="mdi-pencil"/>
           </Button>
 
diff --git a/assets/vue/views/personalfile/List.vue b/assets/vue/views/personalfile/List.vue
index 49bc5458ca..eca57959da 100644
--- a/assets/vue/views/personalfile/List.vue
+++ b/assets/vue/views/personalfile/List.vue
@@ -2,9 +2,9 @@
   <div v-if="isAuthenticated"  class="q-card">
     <div class="p-4 flex flex-row gap-1 mb-2">
       <div class="flex flex-row gap-2" >
-        <Button label="New folder" icon="fa fa-folder-plus" class="btn btn-primary" @click="openNew" />
-        <Button label="Upload" icon="fa fa-file-upload" class="btn btn-primary" @click="uploadDocumentHandler()" />
-        <Button label="Shared" icon="fa fa-file-upload" class="btn btn-success" @click="sharedDocumentHandler()" />
+        <Button label="New folder" icon="fa fa-folder-plus" class="btn btn--primary" @click="openNew" />
+        <Button label="Upload" icon="fa fa-file-upload" class="btn btn--primary" @click="uploadDocumentHandler()" />
+        <Button label="Shared" icon="fa fa-file-upload" class="btn btn--success" @click="sharedDocumentHandler()" />
         <Button label="Delete" icon="pi pi-trash" class="btn btn-danger " @click="confirmDeleteMultiple" :disabled="!selectedItems || !selectedItems.length" />
       </div>
     </div>
@@ -68,8 +68,8 @@
     <Column :exportable="false">
       <template #body="slotProps">
         <div class="flex flex-row gap-2">
-          <Button icon="fa fa-info-circle"  class="btn btn-primary " @click="showHandler(slotProps.data)" />
-          <Button v-if="isAuthenticated" icon="pi pi-pencil" class="btn btn-primary p-mr-2" @click="editHandler(slotProps.data)" />
+          <Button icon="fa fa-info-circle"  class="btn btn--primary " @click="showHandler(slotProps.data)" />
+          <Button v-if="isAuthenticated" icon="pi pi-pencil" class="btn btn--primary p-mr-2" @click="editHandler(slotProps.data)" />
           <Button v-if="isAuthenticated" icon="pi pi-trash" class="btn btn-danger" @click="confirmDeleteItem(slotProps.data)" />
         </div>
       </template>
diff --git a/assets/vue/views/personalfile/Shared.vue b/assets/vue/views/personalfile/Shared.vue
index 883b5b38c7..6da7578d45 100644
--- a/assets/vue/views/personalfile/Shared.vue
+++ b/assets/vue/views/personalfile/Shared.vue
@@ -53,7 +53,7 @@
     <Column :exportable="false">
       <template #body="slotProps">
         <div class="flex flex-row gap-2">
-          <Button icon="fa fa-info-circle"  class="btn btn-primary " @click="showHandler(slotProps.data)" />
+          <Button icon="fa fa-info-circle"  class="btn btn--primary " @click="showHandler(slotProps.data)" />
         </div>
       </template>
     </Column>
diff --git a/assets/vue/views/personalfile/Show.vue b/assets/vue/views/personalfile/Show.vue
index 5d80617113..2d3404532d 100644
--- a/assets/vue/views/personalfile/Show.vue
+++ b/assets/vue/views/personalfile/Show.vue
@@ -27,7 +27,7 @@
             </span>
             <span v-else>
                 <q-btn
-                    class="btn btn-primary"
+                    class="btn btn--primary"
                     :to="item['downloadUrl']"
                 >
                   <v-icon icon="mdi-file-download"/>
@@ -77,7 +77,7 @@
             <td>
               <div>
                 <a
-                    class="btn btn-primary"
+                    class="btn btn--primary"
                     :href="item['downloadUrl']"
                 >
                   <v-icon icon="mdi-file-download"/>