diff --git a/src/App.vue b/src/App.vue
index 30bca30..bcd62ef 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,36 +6,53 @@
         </b-alert>
 
         <div id="nav">
-            <router-link to="/">Home</router-link>
-            |
-            <router-link to="/about">About</router-link>
-            |
-            <router-link to="/login">Login</router-link>
-            |
-            <router-link to="/profile">Profile</router-link>
-            |
-            <router-link :to="{ name: 'rooms' }">{{ $t('rooms') }}</router-link>
-            |
-            <router-link :to="{ name: 'recorders' }">{{ $t('recorders') }}</router-link>
-            |
-            <router-link :to="{ name: 'commands' }">{{ $t('commands') }}</router-link>
-            |
-            <!-- Example split danger button -->
-            <div class="btn-group">
-                <button type="button" onclick="location.href='/admin'" class="btn btn-danger">Admin</button>
-                <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split"
-                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    <span class="sr-only">Toggle Dropdown</span>
-                </button>
-                <div class="dropdown-menu">
-                    <router-link class="dropdown-item" :to="{ name: 'admin.user' }">{{ $t('user') }}</router-link>
-                    <router-link class="dropdown-item" :to="{ name: 'admin.group' }">{{ $t('group') }}</router-link>
-                    <a class="dropdown-item" href="#">Something else here</a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Separated link</a>
-                </div>
-            </div>
-            |
+            <b-navbar toggleable="lg" type="dark" variant="info">
+                <b-navbar-brand to="/">
+                    <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten">
+                    LRC - <strong>L</strong>ecture <strong>R</strong>ecord <strong>C</strong>ontrol
+                </b-navbar-brand>
+
+                <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+                <b-collapse id="nav-collapse" is-nav>
+                    <b-navbar-nav>
+                        <b-nav-item to="/about">About</b-nav-item>
+                        <b-nav-item to="/login" >Login</b-nav-item>
+
+                        <b-nav-item :to="{name: 'rooms'}">{{ $t('Rooms') }}</b-nav-item>
+                        <b-nav-item :to="{name: 'recorders'}">{{ $t('Recorders') }}</b-nav-item>
+                        <b-nav-item :to="{name: 'commands'}">{{ $t('Commands') }}</b-nav-item>
+                    </b-navbar-nav>
+
+                    <!-- Right aligned nav items -->
+                    <b-navbar-nav class="ml-auto">
+                        <b-nav-form>
+                            <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
+                            <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
+                        </b-nav-form>
+
+                        <b-nav-item-dropdown split split-to="admin" variant="outline-danger" :text="$t('admin')">
+                            <b-dropdown-item to="user">{{ $t('user') }}</b-dropdown-item>
+                            <b-dropdown-item to="group">{{ $t('group') }}</b-dropdown-item>
+                            <b-dropdown-item href="#">Something else here...</b-dropdown-item>
+                        </b-nav-item-dropdown>
+
+                        <b-nav-item-dropdown text="Lang" right>
+                            <b-dropdown-item v-for="(lang, i) in langs"
+                                             v-bind:key="lang"
+                                             @click="$i18n.locale=lang">{{ lang }}</b-dropdown-item>
+                        </b-nav-item-dropdown>
+
+                        <b-nav-item-dropdown right>
+                            <!-- Using 'button-content' slot -->
+                            <template slot="button-content"><em>User</em></template>
+                            <b-dropdown-item to="/profile">Profile</b-dropdown-item>
+                            <b-dropdown-item to="/logout">Sign Out</b-dropdown-item>
+                        </b-nav-item-dropdown>
+                    </b-navbar-nav>
+                </b-collapse>
+            </b-navbar>
+
             <span>({{tokenValidity}})</span> |
             <span>({{refreshTokenValidity}})</span>
         </div>
@@ -59,6 +76,7 @@
                 refreshTokenValidity: -1,
                 showAlert: true,
                 alertMessage: 'NO MESSAGE PROVIDED',
+                langs: ['de', 'en', 'es'],
             };
         },
         methods: {
@@ -81,6 +99,9 @@
                     this.tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token);
                     this.refreshTokenValidity = getRemainingJwtValiditySeconds(this.$store.state.refresh_token);
                     // this.$log.debug(this.$store.state);
+                    if (this.tokenValidity < 50 && this.refreshTokenValidity > 30) {
+                        this.$store.dispatch('refreshToken');  // renew access token
+                    }
                 }, 1000);
             });
 
diff --git a/src/components/Login.vue b/src/components/Login.vue
index d80de32..cccf398 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -21,7 +21,7 @@
                 </li>
             </ul>
             <button v-on:click="oidc_login">Login via OIDC</button>
-            <a href="/api/auth/oidc?redirect_url=/login">OIDC with redirect</a>
+            <a href="http://localhost:5443/api/auth/oidc?redirect_url=/login">OIDC with redirect</a>
         </section>
         <section class="section">
             <div class="container">
diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 26581f0..acba739 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -18,12 +18,16 @@
                             <font-awesome-icon icon="pencil-alt"/></a>
                         </p>
 
-                        <p v-if="profile.nickname"><strong>{{$t('nickname')}}:&nbsp</strong>{{profile.nickname}}</p>
+                        <p v-if="!formEditField['nickname'] && profile.nickname"><font-awesome-icon v-b-tooltip.hover :title="$t('nickname')" icon="user-tag"/>&nbsp;{{profile.nickname}}
+                            <a class="badge badge-pill badge-info"
+                                @click="()=>{form.nickname=profile.nickname; formEditField['nickname']=true;}">
+                                <font-awesome-icon icon="pencil-alt"/></a>
+                        </p>
                         <b-input-group style="max-width: 50%;" v-else size="sm">
                             <b-form-input name="nickname"
                                           v-model="form.nickname"
                                           class="form-control" type="text"
-                                          :placeholder="$t('nickname') + '('+profile.nickname +')'"></b-form-input>
+                                          :placeholder="$t('set_your_nickname') + ' ('+profile.nickname +')'"></b-form-input>
                             <b-input-group-append>
                                 <b-button :disabled="errors.has('nickname')"
                                           @click="updateProfile('nickname')"
@@ -43,6 +47,13 @@
 
 
                     <hr/>
+
+                    <div>
+                        <button class="lang-btn" v-for="entry in languages" :key="entry.title" @click="changeLocale(entry.language)">
+                            <flag :iso="entry.flag" v-bind:squared="false"/>
+                            {{entry.title}}
+                        </button>
+                    </div>
                     <p class="title">Token validity ({{tokenValidity}})</p>
                     <p class="title">Refresh token validity ({{refreshTokenValidity}})</p>
                     <p class="title">access_token ({{access_token}})</p>
@@ -68,6 +79,12 @@
                 errorMsg: '',
                 tokenValidity: -1,
                 refreshTokenValidity: -1,
+                formEditField: {},
+                languages: [
+                    {flag: 'us', language: 'en', title: 'English'},
+                    {flag: 'es', language: 'es', title: 'Español'},
+                    {flag: 'de', language: 'de', title: 'Deutsch'},
+                ],
                 form: {
                     first_name: '',
                     last_name: '',
@@ -83,17 +100,22 @@
             },
             updateProfile(fieldName) {
                 this.$parent.$data.isLoading = true;
+                this.$set(this.formEditField, fieldName, false);
                 const data = {};
-                data[fieldName]= this.form[fieldName];
+                data[fieldName] = this.form[fieldName];
                 this.$log.debug(this.form);
                 userRepository.updateProfile(data)
                     .then(() => {
-                        this.$store.dispatch('loadRecorders')
+                        this.$store.dispatch('loadProfile')
                             .then(() => {
                                 this.$parent.$data.isLoading = false;
                             });
                     });
             },
+            changeLocale(locale) {
+                this.$i18n.locale = locale;
+                // Vue.$moment.locale(locale);
+            }
         },
         mounted() {
             this.$log.debug('Profile: mounting...');
@@ -131,4 +153,10 @@
         color: red;
         font-weight: bold;
     }
+    .lang-btn {
+        padding: 15px;
+        border: 2px solid green;
+        font-size: 18px;
+        margin: 15px;
+    }
 </style>
diff --git a/src/components/Recorders.vue b/src/components/Recorders.vue
index 7b47b8e..c25259c 100644
--- a/src/components/Recorders.vue
+++ b/src/components/Recorders.vue
@@ -4,9 +4,9 @@
             <section class="section">
 
 
-                <h1 class="title">{{ $t('Manage recorders') }}</h1>
+                <h1 class="title">{{ $t('Manage_recorders') }}</h1>
                 <p class="lead">
-                    {{ $t('List, create and delete') }} <strong>{{ $t('recorders') }}</strong> and {{ $t('recordermodels')
+                    {{ $t('List_create_and_delete') }} <strong>{{ $t('recorders') }}</strong> {{$t('and')}} {{ $t('recorder_models')
                     }}
                 </p>
                 <br/>
@@ -15,9 +15,9 @@
                     <b-tab title="Recorder list" active>
                         <template slot="title">
                             <font-awesome-icon icon="list"/>&nbsp;<font-awesome-icon icon="circle"/>
-                            <strong>Recorder</strong>&nbsp;list
+                            <strong>{{$t('Recorders')}}</strong>&nbsp;{{$t('list')}}
                         </template>
-                        <p>{{ $t('There are')}}&nbsp;{{recorders.length}}&nbsp;{{ $t('recorders defined')}}:</p>
+                        <p>{{ $tc('recorders_defined', recorders.length, {num: recorders.length})}}:</p>
                         <b-card-group deck>
                             <b-card class="mb-2" style="max-width: 30rem; min-width:20rem;"
                                     v-for="(recorder) in recorders"
@@ -307,11 +307,12 @@
 
                                     <hr/>
 
-                                    <strong>{{ $t('Virtual commands') }}:</strong>&nbsp;
+                                    <strong>{{ $t('virtual_commands') }}:</strong>&nbsp;
 
                                     <b-list-group v-if="recorder.virtual_commands.length"
                                                   style="max-height: 400px; overflow-y:scroll;">
-                                        <b-list-group-item v-for="command in recorder.virtual_commands">
+                                        <b-list-group-item v-for="command in recorder.virtual_commands"
+                                                           v-bind:key="command.id">
                                             {{command.name}}
                                         </b-list-group-item>
 
@@ -345,7 +346,7 @@
                             <strong>{{ $t('Recorder') }}</strong>
                         </template>
                         <b-card-text>
-                            <p>{{ $t('Create a new recorder')}}:</p>
+                            <p>{{ $t('Create_a_new_recorder')}}:</p>
                             <!-- form starts here -->
                             <form v-on:submit.prevent="saveRecorder()">
                                 <section class="form">
@@ -357,7 +358,7 @@
                                                    v-model="form.name"
                                                    v-validate="'required|min:3'"
                                                    v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
-                                                   class="form-control" type="text" placeholder="Recorder name"
+                                                   class="form-control" type="text" :placeholder="$t('Recorder_name')"
                                                    required>
                                         </div>
                                         <p class="col-sm-4" v-show="errors.has('name')">
@@ -370,7 +371,7 @@
                                         <label class="label col-sm-2 col-form-label">{{ $t('description') }}</label>
                                         <div class="col-sm-6">
                                         <textarea class="textarea form-control"
-                                                  placeholder="Comments, remarks, notes, etc."
+                                                  :placeholder="$t('Comments') +', ' + $t('notes') + ', etc.'"
                                                   v-model="form.description"></textarea>
                                         </div>
                                     </div>
@@ -398,7 +399,7 @@
                                                    v-validate="'ip'"
                                                    v-model="form.ip"
                                                    v-bind:class="{'is-danger': errors.has('ip'), 'is-invalid': errors.has('ip')}"
-                                                   class="form-control" type="text" placeholder="Recorder IP">
+                                                   class="form-control" type="text" :placeholder="$t('Recorder') + ' ' + $t('ip')">
                                         </div>
                                         <p class="col-sm-4" v-show="errors.has('ip')">
                                             {{ errors.first('ip') }}
@@ -406,13 +407,13 @@
                                     </div>
 
                                     <div class="form-group row">
-                                        <label class="label col-sm-2 col-form-label">{{ $t('ip v6') }}</label>
+                                        <label class="label col-sm-2 col-form-label">{{ $t('ipv6') }}</label>
                                         <div class="col-sm-6">
                                             <input name="ip6"
                                                    v-validate="'ip:6'"
                                                    v-model="form.ip6"
                                                    v-bind:class="{'is-danger': errors.has('ip6'), 'is-invalid': errors.has('ip6')}"
-                                                   class="form-control" type="text" placeholder="Recorder IPv6">
+                                                   class="form-control" type="text" :placeholder="$t('Recorder') + ' ' + $t('ipv6')">
                                         </div>
                                         <p class="col-sm-4" v-show="errors.has('ip6')">
                                             {{ errors.first('ip6') }}
@@ -450,10 +451,10 @@
                                     </div>
 
                                     <div class="form-group row">
-                                        <label class="label col-sm-2 col-form-label">{{ $t('recorder_model') }}</label>
+                                        <label class="label col-sm-2 col-form-label">{{ $t('Model') }}</label>
                                         <div class="col-sm-6">
                                             <select class="form-control" v-model="form.recorder_model_id">
-                                                <option disabled value="">No recorder_model selected</option>
+                                                <option disabled value="">{{$t('No_recorder_model_selected')}}</option>
                                                 <option v-for="recorderModel in recorderModels"
                                                         v-bind:value="recorderModel.id">
                                                     {{ recorderModel.name }}
@@ -484,7 +485,7 @@
                                             >
                                         </div>
                                         <p class="col-sm-4">
-                                            {{ $t('username') }} {{$t('may be left blank (-> recorder model)')}}
+                                            {{$t('may_be_left_blank')}} (-> {{$t('Model')}})
                                         </p>
                                     </div>
 
@@ -498,7 +499,7 @@
                                             >
                                         </div>
                                         <p class="col-sm-4">
-                                            {{ $t('password') }} {{$t('may be left blank (-> recorder model)')}}
+                                            {{$t('may_be_left_blank')}} (-> {{$t('Model')}})
                                         </p>
                                     </div>
 
@@ -520,10 +521,10 @@
                     </b-tab>
                     <b-tab title="Recorder model list">
                         <template slot="title">
-                            <font-awesome-icon icon="list"/>&nbsp;Recorder&nbsp;<font-awesome-icon icon="scroll"/>
-                            <strong>Model</strong>&nbsp;<i>list</i>
+                            <font-awesome-icon icon="list"/>&nbsp;{{$t('Recorder')}}&nbsp;<font-awesome-icon icon="scroll"/>
+                            <strong>{{$t('Model')}}</strong>&nbsp;<i>{{$t('list')}}</i>
                         </template>
-                        <p>{{ $t('There are')}}&nbsp;{{recorderModels.length}}&nbsp;{{ $t('recorder models defined')}}:</p>
+                        <p>{{ $tc('recorder_models_defined', recorderModels.length, {num: recorderModels.length} ) }}:</p>
                         <b-card-group deck>
                             <b-card class="mb-2" style="max-width: 30rem; min-width:20rem;"
                                     v-for="(recorderModel) in recorderModels"
@@ -558,10 +559,12 @@
                                     <hr/>
 
                                     <b-list-group style="max-height: 400px; overflow-y:scroll;">
-                                        <strong>Recorder Model {{ $t('Commands') }}:</strong>&nbsp;
-                                        <b-list-group-item v-for="command in recorderModel.commands">
+                                        <strong>Recorder Model {{ $t('commands') }}:</strong>&nbsp;
+                                        <b-list-group-item v-for="command in recorderModel.commands"
+                                                           v-bind:key="command.id">
                                             {{command.name}}
                                             <b-badge v-for="(a_type, arg) in command.parameters"
+                                                     v-bind:key="arg"
                                                      v-if="command.parameters !== null" style="margin-right: 10px;">
                                                 <small>{{arg}}:&nbsp;{{a_type}}</small>
                                             </b-badge>
diff --git a/src/components/Rooms.vue b/src/components/Rooms.vue
index 58dc03c..1d16b19 100644
--- a/src/components/Rooms.vue
+++ b/src/components/Rooms.vue
@@ -3,9 +3,9 @@
         <section class="section">
 
 
-            <h1 class="title">{{ $t('Manage rooms') }}</h1>
+            <h1 class="title">{{ $t('Manage_rooms') }}</h1>
             <p class="lead">
-                {{ $t('List, create and delete') }} <strong>{{ $t('rooms') }}</strong>
+                {{ $t('List_create_and_delete') }} <strong>{{ $t('rooms') }}</strong>
             </p>
             <br/>
 
@@ -15,7 +15,7 @@
                         <font-awesome-icon icon="list"/>&nbsp;<font-awesome-icon icon="door-open"/>
                         <strong>Room</strong>&nbsp;<i>list</i>
                     </template>
-                    <p>{{ $t('There are')}}&nbsp;{{rooms.length}}&nbsp;{{ $t('rooms defined')}}:</p>
+                    <p>{{ $tc('rooms_defined', rooms.length, {num: rooms.length})}}:</p>
                     <b-card-group deck>
                         <b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(room) in rooms"
                                 :header="room.name + ' (' +room.building_number+ ')'" v-bind:key="room.id">
@@ -61,7 +61,7 @@
                                                       v-validate="'required|min:3'"
                                                       v-bind:class="{'is-danger': errors.has('building_number'), 'is-invalid': errors.has('building_number')}"
                                                       class="form-control" type="text"
-                                                      :placeholder="'Building number ('+room.building_number +')'"
+                                                      :placeholder="$t('Building_number') +'('+room.building_number +')'"
                                                       required></b-form-input>
                                         <b-input-group-append>
                                             <b-button :disabled="errors.has('building_number')"
@@ -231,7 +231,7 @@
                         <strong>{{$t('Room')}}</strong>
                     </template>
                     <b-card-text>
-                        <p>{{ $t('Create a new room')}}:</p>
+                        <p>{{ $t('Create_a_new_room')}}:</p>
                         <!-- form starts here -->
                         <form v-on:submit.prevent="saveRoom()">
                             <section class="form">
@@ -276,7 +276,8 @@
                                 <div class="form-group row">
                                     <label class="label col-sm-2 col-form-label">{{ $t('comment') }}</label>
                                     <div class="col-sm-6">
-                            <textarea class="textarea form-control" placeholder="Comments, remarks, notes, etc."
+                            <textarea class="textarea form-control"
+                                      :placeholder="$t('Comments') +', ' + $t('notes') + ', etc.'"
                                       v-model="form.comment"></textarea>
                                     </div>
                                 </div>
diff --git a/src/main.ts b/src/main.ts
index d356f88..8786f53 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -32,6 +32,7 @@ import {
     faAt,
     faUser,
     faEnvelope,
+    faUserTag,
 } from '@fortawesome/free-solid-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
 
@@ -45,7 +46,7 @@ import 'bootstrap-vue/dist/bootstrap-vue.css';
 const isProduction = process.env.NODE_ENV === 'production';
 
 library.add(faCoffee, faTrash, faPencilAlt, faScroll, faCheck, faCircle, faList, faPlus, faDoorOpen, faCogs, faAt,
-    faUser, faEnvelope);
+    faUser, faEnvelope, faUserTag);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 
diff --git a/src/plugins/i18n.ts b/src/plugins/i18n.ts
index bcd2863..34e4e50 100644
--- a/src/plugins/i18n.ts
+++ b/src/plugins/i18n.ts
@@ -5,6 +5,81 @@ Vue.use(VueI18n);
 
 
 const messages = {
+    de: {
+        welcomeMsg: 'Willkommen zu deiner Vue.js + TypeScript App',
+        guide: 'For a guide and recipes on how to configure / customize this project,',
+        checkout: 'check out the',
+        plugins: 'Installed CLI Plugins',
+        links: 'Essential Links',
+        ecosystem: 'Ecosystem',
+        Building_number: 'Gebäudenummer',
+        building_number: 'Gebäude #',
+        building_name: 'Gebäude',
+        Manage_rooms: 'Räume verwalten',
+        Manage_recorders: 'Aufzeichnungsgeräte verwalten',
+        Create_a_new_recorder: 'Ein neues Aufzeichnungsgerät anlegen',
+        Create_a_new_room: 'Einen neuen Raum anlegen',
+        Recorder_name: 'Name des Aufzeichnungsgerätes',
+        Recorder: 'Aufzeichnungsgerät',
+        recorder: 'Aufzeichnungsgerät',
+        Recorders: 'Aufzeichnungsgeräte',
+        recorders: 'Aufzeichnungsgeräte',
+        command: 'Befehl',
+        commands: 'Befehle',
+        Commands: 'Befehle',
+        virtual_commands: 'virtuelle Befehle',
+        admin: 'Admin',
+        name: 'Name',
+        alternate_name: 'alternativer Name',
+        group: 'Gruppe',
+        created: 'erstellt',
+        Comments: 'Kommentare',
+        Comment: 'Kommentar',
+        comment: 'Kommentar',
+        Room: 'Raum',
+        room: 'Raum',
+        Rooms: 'Räume',
+        rooms: 'Räume',
+        Room_number: 'Raumnummer',
+        room_number: 'Raumnummer',
+        user: 'Benutzer',
+        username: 'Benutzername',
+        password: 'Passwort',
+        first_name: 'Vorname',
+        last_name: 'Nachname',
+        nickname: 'Spitzname',
+        set_your_nickname: 'Lege deinen Spitznamen fest',
+        notes: 'Anmerkungen',
+        List_create_and_delete: 'Auflisten, anlegen und löschen von',
+        no_recorder_defined: 'Kein Aufzeichnungsgerät definiert',
+        No_recorder_selected: 'Kein Aufzeichnungsgerät ausgewählt',
+        No_recorder_model_selected: 'Kein Aufzeichnungsgerätemodell ausgewählt',
+        Model: 'Modell',
+        list: 'Liste',
+        recorder_model: 'Aufzeichnungsgerätemodell',
+        recorder_models: 'Aufzeichnungsgerätemodellen',
+        description: 'Beschreibung',
+        network_name: 'Netzwerkname',
+        ip: 'IP (v4)',
+        ipv6: 'IP v6',
+        may_be_left_blank: 'kann ggf. leer gelassen werden',
+        rooms_defined: 'Es ist kein Raum definiert! | Ein Raum ist definiert | {num} Räume sind definiert',
+        recorders_defined: 'Es ist kein Aufzeichnungsgerät definiert! | Ein Aufzeichnungsgerät ist definiert | ' +
+            '{num} Aufzeichnungsgeräte sind definiert',
+        recorder_models_defined: 'Es ist kein Aufzeichnungsgerätemodell definiert | ' +
+            'Ein Aufzeichnungsgerätemodell ist definiert' +
+            ' | {num} Aufzeichnungsgerätemodelle sind definiert',
+        no: 'nein',
+        yes: 'ja',
+        create: 'anlegen',
+        and: 'und',
+        number: 'Nummer',
+        delete: 'löschen',
+        requires_username: 'Nutzername benötigt',
+        requires_password: 'Passwort benötigt',
+        ssh_port: 'SSH Port',
+        telnet_port: 'Telnet Port',
+    },
     en: {
         welcomeMsg: 'Welcome to Your Vue.js + TypeScript App',
         guide: 'For a guide and recipes on how to configure / customize this project,',
@@ -12,8 +87,72 @@ const messages = {
         plugins: 'Installed CLI Plugins',
         links: 'Essential Links',
         ecosystem: 'Ecosystem',
+        Building_number: 'Building number',
         building_number: 'Building #',
         building_name: 'Building',
+        Manage_rooms: 'Manage rooms',
+        Manage_recorders: 'Manage recorders',
+        Create_a_new_recorder: 'Create a new recorder',
+        Create_a_new_room: 'Create a new room',
+        Recorder_name: 'Recorder name',
+        Recorder: 'Recorder',
+        recorder: 'recorder',
+        Recorders: 'Recorders',
+        recorders: 'recorders',
+        command: 'command',
+        commands: 'commands',
+        Commands: 'Commands',
+        virtual_commands: 'virtual commands',
+        admin: 'admin',
+        name: 'name',
+        alternate_name: 'alternate name',
+        group: 'group',
+        created: 'created',
+        Comments: 'comments',
+        comments: 'comments',
+        comment: 'comment',
+        Room: 'room',
+        room: 'room',
+        Rooms: 'Rooms',
+        rooms: 'rooms',
+        Room_number: 'Room number',
+        room_number: 'room number',
+        user: 'user',
+        username: 'username',
+        password: 'password',
+        first_name: 'first name',
+        last_name: 'last name',
+        nickname: 'nickname',
+        set_your_nickname: 'Set your nickname',
+        notes: 'notes',
+        List_create_and_delete: 'List_create_and_delete',
+        no_recorder_defined: 'no recorder defined',
+        No_recorder_selected: 'No recorder selected',
+        No_recorder_model_selected: 'No recorder model selected',
+        Model: 'Model',
+        list: 'list',
+        recorder_model: 'recorder model',
+        recorder_models: 'recorder models',
+        description: 'description',
+        network_name: 'network name',
+        ip: 'IP (v4)',
+        ipv6: 'IP v6',
+        may_be_left_blank: 'may be left blank',
+        rooms_defined: 'No room defined yet! | There is one room defined | There are {num} rooms defined',
+        recorders_defined: 'No recorder defined yet! | There is one recorder defined | ' +
+            'There are {num} recorders defined',
+        recorder_models_defined: 'No recorder model defined yet! | There is one recorder model defined | ' +
+            'There are {num} recorder models defined',
+        no: 'no',
+        yes: 'yes',
+        and: 'and',
+        delete: 'delete',
+        create: 'create',
+        number: 'number',
+        requires_username: 'requires username',
+        requires_password: 'requires password',
+        ssh_port: 'SSH Port',
+        telnet_port: 'Telnet Port',
     },
     es: {
         welcomeMsg: 'Bienvenido a tu aplicación Vue.js + TypeScript',
@@ -27,7 +166,7 @@ const messages = {
 
 
 export default new VueI18n({
-    locale: 'en', // set locale
-    fallbackLocale: 'es', // set fallback locale
+    locale: 'de', // set locale
+    fallbackLocale: 'en', // set fallback locale
     messages, // set locale messages
 });
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 52befe0..9662021 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,12 +1,7 @@
 <template>
     <div class="home">
         <b-alert show>Default Alert</b-alert>
-        <div>
-            <button class="lang-btn" v-for="entry in languages" :key="entry.title" @click="changeLocale(entry.language)">
-                <flag :iso="entry.flag" v-bind:squared="false"/>
-                {{entry.title}}
-            </button>
-        </div>
+
         <img alt="Vue logo" src="../assets/logo.png">
         <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
     </div>
@@ -25,26 +20,14 @@
     export default class Home extends Vue {
         public data() {
             return {
-                languages: [
-                    {flag: 'us', language: 'en', title: 'English'},
-                    {flag: 'es', language: 'es', title: 'Español'},
-                    {flag: 'de', language: 'de', title: 'Deutsch'},
-                ],
+
             };
         }
 
-        public changeLocale(locale: string): void {
-            i18n.locale = locale;
-            // Vue.$moment.locale(locale);
-        }
+
     }
 </script>
 
 <style>
-    .lang-btn {
-        padding: 15px;
-        border: 2px solid green;
-        font-size: 18px;
-        margin: 15px;
-    }
+
 </style>
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
index a23c668..1fc1196 100644
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@@ -1,5 +1,5 @@
 <template>
   <div>
-    <p>404 - Not Found</p>
+    <p>404 - Not Found -> have you meant... blabla (GT)</p>
   </div>
 </template>