diff --git a/.gitignore b/.gitignore
index 20bcb253d..82783fce2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,9 @@ yarn-error.log*
 test/unit/coverage
 
 package-lock.json
+.env
+.env.development.local
+.env.production.local
 
 # Editor directories and files
 .idea
diff --git a/README.md b/README.md
index e5ac4a2d0..2e5fb18e1 100755
--- a/README.md
+++ b/README.md
@@ -1,3 +1,9 @@
+https://gruhn.github.io/vue-qrcode-reader/api/QrcodeStream.html
+https://github.com/gruhn/vue-qrcode-reader
+
+https://bootstrap-vue.org/docs/components/image
+
+
 # [BootstrapVue Argon Dashboard](https://demos.creative-tim.com/bootstrap-vue-argon-dashboard/?ref=bvad-github-readme) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/home?status=BootstrapVue%20Argon%20Dashboard%20is%20a%20Free%20Bootstrap%20and%Vue.js%20Dashboard%20made%20using%vue-cli%20%E2%9D%A4%EF%B8%8F%0Ahttps%3A//demos.creative-tim.com/bootstrap-vue-argon-dashboard%20%vue.js%20%23vue-cli%20%23argon%20%23argondesign%20%23angulardashboard%20%23argonvue%20%23vuedesign%20%23bootstrap%20%23design%20%23uikit%20%23freebie%20%20via%20%40CreativeTim)
 
 
diff --git a/package.json b/package.json
index 5acb7ca86..62c60bf2a 100755
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "vue-chartjs": "^3.5.0",
     "vue-clipboard2": "^0.3.0",
     "vue-flatpickr-component": "^8.1.2",
+    "vue-qrcode-reader": "^2.3.16",
     "vue-router": "^3.0.6",
     "vue2-transitions": "^0.2.3"
   },
diff --git a/public/favicon.png b/public/favicon.png
index 7d8b7d072..db3d73274 100644
Binary files a/public/favicon.png and b/public/favicon.png differ
diff --git a/public/img/brand/Gradido-Coin_300_120dpi.png b/public/img/brand/Gradido-Coin_300_120dpi.png
new file mode 100644
index 000000000..d7887a4b3
Binary files /dev/null and b/public/img/brand/Gradido-Coin_300_120dpi.png differ
diff --git a/public/img/brand/Gradido-Coin_300_120dpi_comic.png b/public/img/brand/Gradido-Coin_300_120dpi_comic.png
new file mode 100644
index 000000000..f32b4e922
Binary files /dev/null and b/public/img/brand/Gradido-Coin_300_120dpi_comic.png differ
diff --git a/public/img/brand/Gradido-Coin_300_120dpi_cubeb.png b/public/img/brand/Gradido-Coin_300_120dpi_cubeb.png
new file mode 100644
index 000000000..e190523bb
Binary files /dev/null and b/public/img/brand/Gradido-Coin_300_120dpi_cubeb.png differ
diff --git a/public/img/brand/Gradido-Coin_300_120dpi_sw.png b/public/img/brand/Gradido-Coin_300_120dpi_sw.png
new file mode 100644
index 000000000..f3bfe05e2
Binary files /dev/null and b/public/img/brand/Gradido-Coin_300_120dpi_sw.png differ
diff --git a/public/img/brand/Gradido-Coin_500_175dpi.png b/public/img/brand/Gradido-Coin_500_175dpi.png
new file mode 100644
index 000000000..bc7f1ef88
Binary files /dev/null and b/public/img/brand/Gradido-Coin_500_175dpi.png differ
diff --git a/public/img/brand/cube.webm b/public/img/brand/cube.webm
new file mode 100644
index 000000000..0bfcdad7b
Binary files /dev/null and b/public/img/brand/cube.webm differ
diff --git a/public/img/brand/favicon.png b/public/img/brand/favicon.png
index f8ae7cfcc..7515a34bc 100755
Binary files a/public/img/brand/favicon.png and b/public/img/brand/favicon.png differ
diff --git a/public/img/brand/green.png b/public/img/brand/green.png
index 2939ccf19..f87e1487d 100644
Binary files a/public/img/brand/green.png and b/public/img/brand/green.png differ
diff --git a/public/img/brand/white.png b/public/img/brand/white.png
index 2bf86a966..b7181bf1a 100755
Binary files a/public/img/brand/white.png and b/public/img/brand/white.png differ
diff --git a/public/img/icons/gradido/minus-low.png b/public/img/icons/gradido/minus-low.png
new file mode 100644
index 000000000..5c1f5afed
Binary files /dev/null and b/public/img/icons/gradido/minus-low.png differ
diff --git a/public/img/icons/gradido/minus.png b/public/img/icons/gradido/minus.png
new file mode 100644
index 000000000..b6c40ba22
Binary files /dev/null and b/public/img/icons/gradido/minus.png differ
diff --git a/public/img/icons/gradido/my_gradido.png b/public/img/icons/gradido/my_gradido.png
new file mode 100644
index 000000000..c5131678e
Binary files /dev/null and b/public/img/icons/gradido/my_gradido.png differ
diff --git a/public/img/icons/gradido/plus-low.png b/public/img/icons/gradido/plus-low.png
new file mode 100644
index 000000000..8ddf8a6fe
Binary files /dev/null and b/public/img/icons/gradido/plus-low.png differ
diff --git a/public/img/icons/gradido/plus.png b/public/img/icons/gradido/plus.png
new file mode 100644
index 000000000..8d22e3b50
Binary files /dev/null and b/public/img/icons/gradido/plus.png differ
diff --git a/public/img/icons/gradido/qr-make.png b/public/img/icons/gradido/qr-make.png
new file mode 100644
index 000000000..4890498e1
Binary files /dev/null and b/public/img/icons/gradido/qr-make.png differ
diff --git a/public/img/icons/gradido/qr-scan-pure.png b/public/img/icons/gradido/qr-scan-pure.png
new file mode 100644
index 000000000..88ee90091
Binary files /dev/null and b/public/img/icons/gradido/qr-scan-pure.png differ
diff --git a/public/img/icons/gradido/qr-scan.png b/public/img/icons/gradido/qr-scan.png
new file mode 100644
index 000000000..ac7185a22
Binary files /dev/null and b/public/img/icons/gradido/qr-scan.png differ
diff --git a/src/components/Cards/StatsCard.vue b/src/components/Cards/StatsCard.vue
index 6aea2e1f3..919384882 100644
--- a/src/components/Cards/StatsCard.vue
+++ b/src/components/Cards/StatsCard.vue
@@ -17,6 +17,13 @@
           </div>
         </slot>
       </b-col>
+        <b-col cols="auto" v-if="$slots.img || img">
+        <slot name="img">
+        
+          <img :src="img" width="80" />
+
+        </slot>
+      </b-col>
     </b-row>
 
     <p class="mt-3 mb-0 text-sm">
@@ -40,6 +47,7 @@
         default: 'primary'
       },
       icon: String,
+      img: String,
       title: String,
       subTitle: String,
       iconClasses: [String, Array]
diff --git a/src/views/KontoOverview.vue b/src/views/KontoOverview.vue
index 4e58517ea..7a53b8570 100644
--- a/src/views/KontoOverview.vue
+++ b/src/views/KontoOverview.vue
@@ -7,7 +7,7 @@
           <stats-card title="Aktueller Kontostand"
                       type="gradient-red"
                       sub-title="3500,897 GDD"
-                      icon="ni ni-money-coins"
+                      img="img/icons/gradido/my_gradido.png"
                       class="mb-4">
 
             <template slot="footer">
@@ -20,7 +20,7 @@
           <stats-card title="Erhaltene Gradido"
                       type="gradient-orange"
                       sub-title="2,356 GDD"
-                      icon="ni ni-cloud-download-95"
+                      img="img/icons/gradido/plus.png"
                       class="mb-4">
 
             <template slot="footer">
@@ -29,6 +29,9 @@
             </template>
           </stats-card>
         </b-col>
+      </b-row>
+      <!-- Card sent-->
+      <b-row>
         <b-col xl="12" md="12">
          <base-button block icon type="primary" size="lg"  v-b-toggle.collapse-1>
             <span class="btn-inner--icon"><i class="ni ni-curved-next"></i></span>
@@ -37,63 +40,87 @@
             <b-collapse id="collapse-1" class="mt-2">
               <b-card>
                 <p class="card-text">
-            
-                  <b-form @submit="onSubmit" @reset="onReset" v-if="show">
-                      
-                  <div>
-                    <b-input-group
-                      id="input-group-1"
-                        label="Empfänger:"
-                        label-for="input-1"
-                        prepend="@"
-                        description="We'll never share your email with anyone else.">
+                    <b-row>
+                      <b-col>
+                       
+                       <qrcode-capture @detect="onDetect"  capture="user" ></qrcode-capture>
+                      </b-col>
+                      <b-col>  
+                        <span v-if="scan">
+                          <qrcode-stream @decode="onDecode" @detect="onDetect" ></qrcode-stream>
+                            <b-iconstack font-scale="5" @click="scan=false">
+                              <b-icon stacked icon="upc-scan" variant="info" scale="0.75"></b-icon>
+                              <b-icon stacked icon="slash-circle" variant="danger"></b-icon>
+                            </b-iconstack>
+                        </span>
+                        <span v-else >
+                          <img src="img/icons/gradido/qr-scan-pure.png" width="90" @click="scan=true"/>
+                          scan jetzt
+                        </span>
+                      </b-col>
+                    </b-row>               
+                    <b-form @submit="onSubmit" @reset="onReset" v-if="show">
+                      <br>
+                      <qrcode-drop-zone id="input-0" v-model="form.img" ></qrcode-drop-zone>
+                      <br>
+                      <div>
+                        <b-input-group
+                          id="input-group-1"
+                            label="Empfänger:"
+                            label-for="input-1"
+                            description="We'll never share your email with anyone else.">
 
-                      <b-form-input 
-                          id="input-1"
-                          v-model="form.email"
-                          type="email"
-                          placeholder="E-Mail"
-                          required></b-form-input>
+                          <b-form-input 
+                              id="input-1"
+                              v-model="form.email"
+                              type="email"
+                              placeholder="E-Mail"
+                              required></b-form-input>
 
-                      <b-input-group-append>
-                        <b-button variant="outline-primary">Adressbuch</b-button>
-                      </b-input-group-append>
+                          <b-input-group-append>
+                            <b-button variant="outline-primary" @click="adressbook">Adressbuch</b-button>
+                          </b-input-group-append>
 
-                    </b-input-group>
-                  </div>
-                  <br>
-               
-                    <div>
-                    <b-input-group id="input-group-2" label="Betrag:" label-for="input-2">
-                      <b-form-input  id="input-2"
-                            v-model="form.amount"
-                            type="number"                            
-                            required 
-                             min="0.001" placeholder="0.000">
-                      </b-form-input>
-                    </b-input-group>
-                  </div>
-                     <br>
-                  <b-button type="submit" variant="primary">jetzt versenden</b-button>
-                  <b-button type="reset" variant="danger">Cancel</b-button>
-                     <br>
+                        </b-input-group>
+                      </div>
+                      <br>                
+                      <div>
+                        <b-input-group id="input-group-2" label="Betrag:" label-for="input-2">
+                        <b-form-input  id="input-2"
+                              v-model="form.amount1"
+                              type="number"                            
+                              required 
+                              min="0" placeholder="0">
+                        </b-form-input>.<h1>GDD.</h1>
+                        <b-form-input  id="input-3"
+                              v-model="form.amount2"
+                              type="number"                             
+                              min="00" placeholder="00">
+                        </b-form-input>
+                      </b-input-group>
+                    </div>
+                    <br>
+                    <b-button type="submit" variant="primary">jetzt versenden</b-button>
+                    <b-button type="reset" variant="danger">Cancel</b-button>
+                    <br>
                   </b-form> 
-                  </p>
+                </p>
               </b-card>
             </b-collapse>
         </b-col>
       </b-row>
+      <!-- Card table -->
       <div>
-        <b-table :items="items" :fields="fields" :tbody-tr-class="rowClass">
-          <template  #cell(show_status)="row">
-            <div class="h2 mb-0">
-              <b-icon-node-minus v-if="row.item.status === 'sent' "></b-icon-node-minus>
-              <b-icon-plus  v-if="row.item.status === 'received' && 'earned'"></b-icon-plus>
-            </div>
+        <b-table striped hover :items="items" :fields="fields" :tbody-tr-class="rowClass">
+          <template  #cell(status)="row">   
+            <img  v-if="row.item.status === 'sent' " src="img/icons/gradido/minus.png" width="50" />          
+              <img  v-else src="img/icons/gradido/plus-low.png" width="50" /> 
+               
+             
           </template>
-          <template #cell(show_details)="row">
+          <template #cell(details)="row">
             <b-button size="sm" @click="row.toggleDetails" class="mr-2">
-              {{ row.detailsShowing ? 'Ausblenden' : 'Anzeigen'}} der Details
+              {{ row.detailsShowing ? 'Ausblenden' : 'Anzeigen'}}
             </b-button>        
           </template>
 
@@ -105,8 +132,13 @@
               </b-row>
 
               <b-row class="mb-2">
-                <b-col sm="3" class="text-sm-right"><b>Ist aktiv:</b></b-col>
-                <b-col>{{ row.item.isActive }}</b-col>
+                <b-col sm="3" class="text-sm-right"><b>Vergänglichkeit: </b></b-col>
+                <b-col>{{ row.item.isActive }}0.0032 GDD</b-col>
+              </b-row>
+                <b-row class="mb-2">
+                <b-col sm="3" class="text-sm-right"><b>Absender: </b></b-col>
+                <b-col>{{ row.item.name }}</b-col>
+                <b-col>{{ row.item.date }}</b-col>
               </b-row>
 
               <b-button size="sm" @click="row.toggleDetails">Details ausblenden</b-button>
@@ -114,62 +146,113 @@
           </template>
         </b-table>
       </div>
+    
+
+      <!--Notice modal-->
+      <modal :show.sync="modal"
+            modal-classes="modal-danger"
+            modal-content-classes="bg-gradient-danger">
+        <h6 slot="header" class="modal-title">Your attention is required</h6>
+
+        <div class="py-3 text-center">
+          <i class="ni ni-bell-55 ni-3x"></i>
+          <h4 class="heading mt-4">You should read this!</h4>
+          <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
+        </div>
+
+
+        <template slot="footer">
+          <base-button type="white">Ok, Got it</base-button>
+          <base-button type="link" class="text-white ml-auto" @click="modals.notice = false">Close</base-button>
+        </template>
+
+      </modal>
+      
+
     </base-header>
-    <!--Notice modal-->
-<modal :show.sync="modals"
-       modal-classes="modal-danger"
-       modal-content-classes="bg-gradient-danger">
-  <h6 slot="header" class="modal-title">Your attention is required</h6>
-
-  <div class="py-3 text-center">
-    <i class="ni ni-bell-55 ni-3x"></i>
-    <h4 class="heading mt-4">You should read this!</h4>
-    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
-  </div>
-
-
-  <template slot="footer">
-    <base-button type="white">Ok, Got it</base-button>
-    <base-button type="link" class="text-white ml-auto" @click="modals.notice = false">Close</base-button>
-  </template>
-
-</modal>
-  </div> 
-  
+  </div>  
 </template>
 <script>
- 
+  import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'
+  import { BIcon } from 'bootstrap-vue'
+
   export default {
     components: {
+        QrcodeStream,
+        QrcodeDropZone,
+        QrcodeCapture
      },
     data() {
       return {
-         form: {
+        scan: false,
+        form: {
+          img: '',
           email: '',
-          amount: ''          
+          amount1: '',          
+          amount2: ''          
         },        
         show: true,
-        modals: false,
-        fields: [ 'show_status', 'amount', 'name', 'date', 'show_details'],
+        modal: false,
+        modaldate: {
+          classes:'',
+          content_classes:'',
+          title:'',
+          icon:'',
+          h4: '',
+          p: '',
+          footer_text: ''
+        },
+        fields: [ 'status', 'betrag', 'name', 'datum', 'details'],
         items: [
-          {   amount: 1000, name: 'Dickerson', date: '12.12.2020 14:04', status: 'received' },
-          {  amount: 302, name: 'Larsen', date: '22.06.2020 22:23', status: 'sent'  },
-          {  amount: 89, name: 'Geneva', date: '15.04.2020 12:55', status: 'sent' },
-          {  amount: 1000, name: 'Community', date: '10.03.2020 18:20', status: 'received'}
+          {  betrag: 1000, name: 'Dickerson', datum: '12.12.20', datel: '12.12.2020 14:04', status: 'received' },
+          {  betrag: 302,  name: 'Larsen',    datum: '22.06.20', datel: '22.06.2020 22:23', status: 'sent'  },
+          {  betrag: 89,   name: 'Geneva',    datum: '15.04.20', datel: '15.04.2020 12:55', status: 'sent' },
+          {  betrag: 1000, name: 'Community', datum: '10.03.20', datel: '10.03.2020 18:20', status: 'received'}
         ]       
       };
     },
     methods: {
+      async onDecode (decodedString) {
+           console.log('JSON.parse(decodedString)',JSON.parse(decodedString) )
+           const arr = JSON.parse(decodedString) 
+            console.log('arr',arr[0].email )
+           this.modal.h4 = 'Scan erfolgreich'
+           this.modal.p = arr
+           this.form.email = arr[0].email
+           this.form.amount1 = arr[0].amount
+            console.log('arr mail',arr.email)
+            console.log('arr mail',arr.amount)
+      
+          this.modals2 = true
+      },
+      async onDetect (promise) {
+        try {
+          const {
+            imageData,    // raw image data of image/frame
+            content,      // decoded String
+            location      // QR code coordinates
+          } = await promise
+            console.log('promise',promise)
+             console.log('JSON.parse(decodedString)',JSON.parse(promise) )
+           const arr = JSON.parse(decodedString) 
+            console.log('arr',arr)
+          
+        } catch (error) {
+          // ...
+        }
+      },
       onSubmit(event) {
         event.preventDefault()
         alert(JSON.stringify(this.form))
-        this.modals = true
+        this.modal = true
+        this.modal.h4 = 'TODO 1'
       },
       onReset(event) {
         event.preventDefault()
         // Reset our form values
         this.form.email = ''
-        this.form.amount = ''        
+        this.form.amount1 = ''
+        this.form.amount2 = ''   
         // Trick to reset/clear native browser form validation state
         this.show = false
         this.$nextTick(() => {
@@ -182,6 +265,11 @@
         if (item.status === 'sent') return 'table-warning'
         if (item.status === 'earned') return 'table-primary'
          
+      },
+      adressbook() {
+        this.modal = true
+        this.modaldata.h4 = 'Adressbuch'
+        this.modaldata.p = 'TODO ADRESSBUCH LISTE'
       }
     },
     mounted() {
@@ -206,3 +294,7 @@
   padding-right: 0px;
 }
 </style>
+
+
+
+ 
\ No newline at end of file
diff --git a/src/views/Pages/Login.vue b/src/views/Pages/Login.vue
index 56832533b..b5f19cd2d 100755
--- a/src/views/Pages/Login.vue
+++ b/src/views/Pages/Login.vue
@@ -2,17 +2,7 @@
   <div>
     <!-- Header -->
     <div class="header bg-gradient-success py-7 py-lg-8 pt-lg-9">
-      <b-container>
-        <div class="header-body text-center mb-7">
-          <b-row class="justify-content-center">
-            <b-col xl="5" lg="6" md="8" class="px-5">
-              <h1 class="text-white">Welcome!</h1>
-              <p class="text-lead text-white">Use these awesome forms to login or create new account in your project for
-                free.</p>
-            </b-col>
-          </b-row>
-        </div>
-      </b-container>
+     
       <div class="separator separator-bottom separator-skew zindex-100">
         <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1"
              xmlns="http://www.w3.org/2000/svg">
@@ -25,24 +15,21 @@
       <b-row class="justify-content-center">
         <b-col lg="5" md="7">
           <b-card no-body class="bg-secondary border-0 mb-0">
-            <b-card-header class="bg-transparent pb-5"  >
-              <div class="text-muted text-center mt-2 mb-3"><small>Sign in with</small></div>
-              <div class="btn-wrapper text-center">
-                <a href="#" class="btn btn-neutral btn-icon">
-                  <span class="btn-inner--icon"><img src="img/icons/common/github.svg"></span>
-                  <span class="btn-inner--text">Github</span>
-                </a>
-                <a href="#" class="btn btn-neutral btn-icon">
-                  <span class="btn-inner--icon"><img src="img/icons/common/google.svg"></span>
-                  <span class="btn-inner--text">Google</span>
-                </a>
-              </div>
+             
+            <b-card-header class="pb-1"  >
+                <video width="450" height="300" autoplay loop>
+                  <source src="/img/brand/cube.webm" type="video/webm">                  
+                    Your browser does not support the video tag.  
+                </video>
             </b-card-header>
             <b-card-body class="px-lg-5 py-lg-5">
               <div class="text-center text-muted mb-4">
-                <small>Or sign in with credentials</small>
+                <h2>Login Gradido Wallet</h2>
               </div>
-              <validation-observer v-slot="{handleSubmit}" ref="formValidator">
+              <div class="text-center text-muted mb-4">
+                <h4>Login Server 1</h4>
+              </div>
+              <!--<validation-observer v-slot="{handleSubmit}" ref="formValidator">
                 <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
                   <base-input alternative
                               class="mb-3"
@@ -68,7 +55,7 @@
                     <base-button type="primary" native-type="submit" class="my-4">Sign in</base-button>
                   </div>
                 </b-form>
-              </validation-observer>
+              </validation-observer> -->
             </b-card-body>
           </b-card>
           <b-row class="mt-3">
diff --git a/src/views/Pages/Register.vue b/src/views/Pages/Register.vue
index 25aaa7f73..60637cb29 100755
--- a/src/views/Pages/Register.vue
+++ b/src/views/Pages/Register.vue
@@ -6,9 +6,8 @@
         <div class="header-body text-center mb-7">
           <b-row class="justify-content-center">
             <b-col xl="5" lg="6" md="8" class="px-5">
-              <h1 class="text-white">Create an account</h1>
-              <p class="text-lead text-white">Use these awesome forms to login or create new account in your project for
-                free.</p>
+              <h1 class="text-white">Erstelle eine Gradido Wallet</h1>
+              <p class="text-lead text-white">Werde teil der Community</p>
             </b-col>
           </b-row>
         </div>
@@ -28,16 +27,7 @@
           <b-card no-body class="bg-secondary border-0">
             <b-card-header class="bg-transparent pb-5">
               <div class="text-muted text-center mt-2 mb-4"><small>Sign up with</small></div>
-              <div class="text-center">
-                <a href="#" class="btn btn-neutral btn-icon mr-4">
-                  <span class="btn-inner--icon"><img src="img/icons/common/github.svg"></span>
-                  <span class="btn-inner--text">Github</span>
-                </a>
-                <a href="#" class="btn btn-neutral btn-icon">
-                  <span class="btn-inner--icon"><img src="img/icons/common/google.svg"></span>
-                  <span class="btn-inner--text">Google</span>
-                </a>
-              </div>
+            
             </b-card-header>
             <b-card-body class="px-lg-5 py-lg-5">
               <div class="text-center text-muted mb-4">