diff --git a/frontend/src/assets/scss/gradido.scss b/frontend/src/assets/scss/gradido.scss
index dba0f01da..abb491206 100644
--- a/frontend/src/assets/scss/gradido.scss
+++ b/frontend/src/assets/scss/gradido.scss
@@ -158,3 +158,53 @@ a,
 .gradido-global-color-gray {
   color: #858383;
 }
+
+.gradido-custom-background {
+  background-color: #ebebeba3 !important;
+}
+
+.gradido-max-width {
+  width: 100%;
+}
+
+.gradido-width-300 {
+  width: 300px;
+}
+
+.gradido-absolute {
+  position: absolute;
+}
+
+.gradido-width-95-absolute {
+  width: 95%;
+  position: absolute;
+}
+
+.gradido-width-96-absolute {
+  width: 96%;
+  position: absolute;
+}
+
+.gradido-no-border-radius {
+  border-radius: 0;
+}
+
+.gradido-no-border {
+  border: 0;
+}
+
+.gradido-background-f1 {
+  background-color: #f1f1f1;
+}
+
+.gradido-background-white {
+  background-color: #fff;
+}
+
+.gradido-font-large {
+  font-size: large;
+}
+
+.gradido-font-15rem {
+  font-size: 1.5rem;
+}
diff --git a/frontend/src/components/DecayInformations/DecayInformation-Decay.vue b/frontend/src/components/DecayInformations/DecayInformation-Decay.vue
index 80d45e242..19aac9e98 100644
--- a/frontend/src/components/DecayInformations/DecayInformation-Decay.vue
+++ b/frontend/src/components/DecayInformations/DecayInformation-Decay.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="decayinformation-decay">
     <div class="d-flex">
-      <div style="width: 100%" class="text-center pb-3">
+      <div class="text-center pb-3 gradido-max-width">
         <b-icon icon="droplet-half" height="12" class="mb-2" />
         <b>{{ $t('decay.calculation_decay') }}</b>
       </div>
diff --git a/frontend/src/components/DecayInformations/DecayInformation-Long.vue b/frontend/src/components/DecayInformations/DecayInformation-Long.vue
index 6a0b6a1c1..b5e1bbbe5 100644
--- a/frontend/src/components/DecayInformations/DecayInformation-Long.vue
+++ b/frontend/src/components/DecayInformations/DecayInformation-Long.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="decayinformation-long">
     <div class="d-flex">
-      <div style="width: 100%" class="text-center pb-3">
+      <div class="text-center pb-3 gradido-max-width">
         <b-icon icon="droplet-half" height="12" class="mb-2" />
         <b>{{ $t('decay.calculation_decay') }}</b>
       </div>
diff --git a/frontend/src/components/GddSend/TransactionForm.vue b/frontend/src/components/GddSend/TransactionForm.vue
index 0f5650543..850bb3b07 100644
--- a/frontend/src/components/GddSend/TransactionForm.vue
+++ b/frontend/src/components/GddSend/TransactionForm.vue
@@ -1,7 +1,7 @@
 <template>
   <b-row class="transaction-form">
     <b-col xl="12" md="12" class="p-0">
-      <b-card class="p-0 m-0" style="background-color: #ebebeba3 !important">
+      <b-card class="p-0 m-0 gradido-custom-background">
         <!-- -<QrCode @set-transaction="setTransaction"></QrCode> -->
         <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
           <b-form role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset">
@@ -39,8 +39,7 @@
                     @blur="normalizeEmail()"
                     type="email"
                     placeholder="E-Mail"
-                    style="font-size: large"
-                    class="pl-3"
+                    class="pl-3 gradido-font-large"
                     :disabled="isBalanceDisabled"
                   ></b-form-input>
                 </b-input-group>
@@ -75,8 +74,7 @@
                     @focus="amountFocused = true"
                     @blur="normalizeAmount(valid)"
                     :placeholder="$n(0.01)"
-                    style="font-size: large"
-                    class="pl-3"
+                    class="pl-3 gradido-font-large"
                     :disabled="isBalanceDisabled"
                   ></b-form-input>
                 </b-input-group>
@@ -105,8 +103,7 @@
                     id="input-3"
                     rows="3"
                     v-model="form.memo"
-                    class="pl-3"
-                    style="font-size: large"
+                    class="pl-3 gradido-font-large"
                     :disabled="isBalanceDisabled"
                   ></b-form-textarea>
                 </b-input-group>
diff --git a/frontend/src/components/GddSend/TransactionResult.vue b/frontend/src/components/GddSend/TransactionResult.vue
index 6489574c9..64a6749bd 100644
--- a/frontend/src/components/GddSend/TransactionResult.vue
+++ b/frontend/src/components/GddSend/TransactionResult.vue
@@ -2,8 +2,8 @@
   <b-container>
     <b-row v-if="error">
       <b-col>
-        <b-card class="p-0" style="background-color: #ebebeba3 !important">
-          <div class="p-4" style="font-size: 1.5rem">
+        <b-card class="p-0 gradido-custom-background">
+          <div class="p-4 gradido-font-15rem">
             <div>{{ $t('form.sorry') }}</div>
             <hr />
 
@@ -29,7 +29,7 @@
     </b-row>
     <b-row v-if="!error">
       <b-col>
-        <b-card class="p-0" style="background-color: #ebebeba3 !important">
+        <b-card class="p-0 gradido-custom-background">
           <div class="p-4">
             {{ $t('form.thx') }}
             <hr />
diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index 63a131d9d..1c6f71955 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="component-navbar" style="background-color: #fff">
+  <div class="component-navbar gradido-background-white">
     <b-navbar toggleable="lg" type="light" variant="faded">
       <div class="navbar-brand">
         <b-navbar-nav @click="$emit('set-visible', false)">
diff --git a/frontend/src/components/Transaction.vue b/frontend/src/components/Transaction.vue
index 649b81b4d..acce0f7ff 100644
--- a/frontend/src/components/Transaction.vue
+++ b/frontend/src/components/Transaction.vue
@@ -3,12 +3,12 @@
     <div class="list-group">
       <div class="list-group-item gdt-transaction-list-item" v-b-toggle="collapseId">
         <!-- icon  -->
-        <div class="text-right" style="position: absolute">
+        <div class="text-right gradido-absolute">
           <b-icon :icon="getLinesByType.icon" :class="getLinesByType.iconclasses"></b-icon>
         </div>
 
         <!-- collaps Button  -->
-        <div class="text-right" style="width: 96%; position: absolute">
+        <div class="text-right gradido-width-96-absolute">
           <b-icon
             :icon="getCollapseState(id) ? 'caret-up-square' : 'caret-down-square'"
             :class="getCollapseState(id) ? 'text-black' : 'text-muted'"
diff --git a/frontend/src/components/TransactionCollapse.vue b/frontend/src/components/TransactionCollapse.vue
index 45af607d5..98358475b 100644
--- a/frontend/src/components/TransactionCollapse.vue
+++ b/frontend/src/components/TransactionCollapse.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="gdt-transaction-collapse p-2 pt-4 pb-4 mb-4"
-    style="border: 0px; background-color: #f1f1f1"
-  >
+  <div class="gdt-transaction-collapse p-2 pt-4 pb-4 mb-4 gradido-no-border gradido-background-f1">
     <b-row class="gdt-list-collapse-header-text text-center pb-3">
       <b-col class="collapse-headline">
         <b>{{ getLinesByType.headline }}</b>
diff --git a/frontend/src/components/Transactions/TransactionCreation.vue b/frontend/src/components/Transactions/TransactionCreation.vue
index a30a33ca5..d19a31b26 100644
--- a/frontend/src/components/Transactions/TransactionCreation.vue
+++ b/frontend/src/components/Transactions/TransactionCreation.vue
@@ -2,7 +2,7 @@
   <div class="transaction-slot-creation">
     <div @click="visible = !visible">
       <!-- Collaps Icon  -->
-      <div class="text-right" style="width: 95%; position: absolute">
+      <div class="text-right gradido-width-95-absolute">
         <b-icon
           :icon="visible ? 'caret-up-square' : 'caret-down-square'"
           :class="visible ? 'text-black' : 'text-muted'"
diff --git a/frontend/src/components/Transactions/TransactionDecay.vue b/frontend/src/components/Transactions/TransactionDecay.vue
index 0530c47f4..0baa5e292 100644
--- a/frontend/src/components/Transactions/TransactionDecay.vue
+++ b/frontend/src/components/Transactions/TransactionDecay.vue
@@ -2,7 +2,7 @@
   <div class="transaction-slot-decay">
     <div @click="visible = !visible">
       <!-- Collaps Icon  -->
-      <div class="text-right" style="width: 95%; position: absolute">
+      <div class="text-right gradido-width-95-absolute">
         <b-icon
           :icon="visible ? 'caret-up-square' : 'caret-down-square'"
           :class="visible ? 'text-black' : 'text-muted'"
diff --git a/frontend/src/components/Transactions/TransactionReceive.vue b/frontend/src/components/Transactions/TransactionReceive.vue
index 08c49d808..78eff8597 100644
--- a/frontend/src/components/Transactions/TransactionReceive.vue
+++ b/frontend/src/components/Transactions/TransactionReceive.vue
@@ -2,7 +2,7 @@
   <div class="transaction-slot-receive">
     <div @click="visible = !visible">
       <!-- Collaps Icon  -->
-      <div class="text-right" style="width: 95%; position: absolute">
+      <div class="text-right gradido-width-95-absolute">
         <b-icon
           :icon="visible ? 'caret-up-square' : 'caret-down-square'"
           :class="visible ? 'text-black' : 'text-muted'"
diff --git a/frontend/src/components/Transactions/TransactionSend.vue b/frontend/src/components/Transactions/TransactionSend.vue
index 67248fc3f..08f84bd58 100644
--- a/frontend/src/components/Transactions/TransactionSend.vue
+++ b/frontend/src/components/Transactions/TransactionSend.vue
@@ -2,7 +2,7 @@
   <div class="transaction-slot-send">
     <div @click="visible = !visible">
       <!-- Collaps Icon  -->
-      <div class="text-right" style="width: 95%; position: absolute">
+      <div class="text-right gradido-width-95-absolute">
         <b-icon
           :icon="visible ? 'caret-up-square' : 'caret-down-square'"
           :class="visible ? 'text-black' : 'text-muted'"
diff --git a/frontend/src/components/UserCard_FormUserMail.vue b/frontend/src/components/UserCard_FormUserMail.vue
index b042a1961..e0d013973 100644
--- a/frontend/src/components/UserCard_FormUserMail.vue
+++ b/frontend/src/components/UserCard_FormUserMail.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-card id="formusermail" class="bg-transparent" style="background-color: #ebebeba3 !important">
+  <b-card id="formusermail" class="bg-transparent gradido-custom-background">
     <b-container>
       <b-row class="mb-4 text-right">
         <b-col class="text-right">
diff --git a/frontend/src/components/UserSettings/UserCoinAnimation.vue b/frontend/src/components/UserSettings/UserCoinAnimation.vue
index e73ddb7af..040825105 100644
--- a/frontend/src/components/UserSettings/UserCoinAnimation.vue
+++ b/frontend/src/components/UserSettings/UserCoinAnimation.vue
@@ -1,8 +1,7 @@
 <template>
   <b-card
     id="formusercoinanimation"
-    class="bg-transparent"
-    style="background-color: #ebebeba3 !important; border-radius: 0px"
+    class="bg-transparent gradido-custom-background gradido-no-border-radius"
   >
     <div>
       <b-row class="mb-3">
diff --git a/frontend/src/layouts/DashboardLayout_gdd.vue b/frontend/src/layouts/DashboardLayout_gdd.vue
index a8b356bd1..66221993f 100755
--- a/frontend/src/layouts/DashboardLayout_gdd.vue
+++ b/frontend/src/layouts/DashboardLayout_gdd.vue
@@ -11,11 +11,11 @@
       @logout="logout"
     />
     <div class="content-gradido">
-      <div class="d-none d-sm-none d-md-none d-lg-flex shadow-lg" style="width: 300px">
+      <div class="d-none d-sm-none d-md-none d-lg-flex shadow-lg gradido-width-300">
         <sidebar class="main-sidebar" :elopageUri="elopageUri" @admin="admin" @logout="logout" />
       </div>
 
-      <div class="main-page" style="width: 100%" @click="visible = false">
+      <div class="main-page gradido-max-width" @click="visible = false">
         <div class="main-content">
           <fade-transition :duration="200" origin="center top" mode="out-in">
             <router-view
diff --git a/frontend/src/pages/ForgotPassword.vue b/frontend/src/pages/ForgotPassword.vue
index 44d6e7e6b..da80e2628 100644
--- a/frontend/src/pages/ForgotPassword.vue
+++ b/frontend/src/pages/ForgotPassword.vue
@@ -15,7 +15,7 @@
     <b-container class="mt--8 p-1">
       <b-row class="justify-content-center">
         <b-col lg="6" md="8">
-          <b-card no-body class="border-0" style="background-color: #ebebeba3 !important">
+          <b-card no-body class="border-0 gradido-custom-background">
             <b-card-body class="p-4">
               <validation-observer ref="observer" v-slot="{ handleSubmit }">
                 <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index 57b97200d..7165fa677 100755
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -16,7 +16,7 @@
     <b-container class="mt--8">
       <b-row class="justify-content-center">
         <b-col lg="5" md="7">
-          <b-card no-body class="border-0 mb-0" style="background-color: #ebebeba3 !important">
+          <b-card no-body class="border-0 mb-0 gradido-custom-background">
             <b-card-body class="p-4">
               <div class="text-center text-muted mb-4 test-communitydata">
                 <b>{{ $store.state.community.name }}</b>
diff --git a/frontend/src/pages/Register.vue b/frontend/src/pages/Register.vue
index 0d3065d38..aec2ef1be 100755
--- a/frontend/src/pages/Register.vue
+++ b/frontend/src/pages/Register.vue
@@ -20,7 +20,7 @@
 
       <b-row class="justify-content-center">
         <b-col lg="6" md="8">
-          <b-card no-body class="border-0" style="background-color: #ebebeba3 !important">
+          <b-card no-body class="border-0 gradido-custom-background">
             <b-card-body class="p-4">
               <div class="text-center text-muted mb-4 test-communitydata">
                 <b>{{ $store.state.community.name }}</b>
diff --git a/frontend/src/pages/ResetPassword.vue b/frontend/src/pages/ResetPassword.vue
index 1790802d4..40c2f5ee4 100644
--- a/frontend/src/pages/ResetPassword.vue
+++ b/frontend/src/pages/ResetPassword.vue
@@ -19,7 +19,7 @@
     <b-container class="mt--8 p-1">
       <b-row class="justify-content-center">
         <b-col lg="6" md="8">
-          <b-card no-body class="border-0" style="background-color: #ebebeba3 !important">
+          <b-card no-body class="border-0 gradido-custom-background">
             <b-card-body class="p-4">
               <validation-observer ref="observer" v-slot="{ handleSubmit }">
                 <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">