diff --git a/src/components/Commands.vue b/src/components/Commands.vue
new file mode 100644
index 0000000..5ccb2bb
--- /dev/null
+++ b/src/components/Commands.vue
@@ -0,0 +1,402 @@
+<template>
+    <div class="container">
+        <section class="section">
+
+
+            <h1 class="title">{{ $t('Manage Commands') }}</h1>
+            <p class="lead">
+                {{ $t('List, create and delete') }} <strong>{{ $t('commands') }}</strong>
+            </p>
+            <br/>
+
+            <b-tabs v-model="tabIndex" card>
+                <b-tab title="Command list" active>
+                    <template slot="title">
+                        <font-awesome-icon icon="list"/>&nbsp;<font-awesome-icon icon="door-open"/>
+                        <strong>command</strong>&nbsp;<i>list</i>
+                    </template>
+                    <p>{{ $t('There are')}}&nbsp;{{commands.length}}&nbsp;{{ $t('commands defined')}}:</p>
+                    <b-card-group deck>
+                        <b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(command) in commands"
+                                :header="command.name + ' (' +command.number+ ')'" v-bind:key="command.id">
+                            <b-card-text>
+                                <h5 class="card-title">{{ $t('name') }}:&nbsp;
+                                    <span v-if="!formEditField[command.id+'_name']">{{command.name}}&nbsp;
+                                        <a class="float-right badge badge-pill badge-primary">
+                                            <font-awesome-icon
+                                                    @click="initcommandUpdate(command, 'name')"
+                                                    icon="pencil-alt"/>
+                                        </a>
+                                    </span>
+                                    <b-input-group v-else>
+                                        <b-form-input :id="command.id+'_name'" name="name"
+                                                      v-model="updateValues[command.id+'_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="'Name ('+command.name +')'"
+                                                      required></b-form-input>
+                                        <b-input-group-append>
+                                            <b-button :disabled="errors.has('name')"
+                                                      @click="updatecommand(command.id, 'name')"
+                                                      variant="outline-success">
+                                                <font-awesome-icon icon="check"></font-awesome-icon>
+                                            </b-button>
+                                        </b-input-group-append>
+                                    </b-input-group>
+                                </h5>
+                                <p class="card-text"><strong>{{ $t('alternate_name') }}:</strong>&nbsp;
+                                    <span v-if="!formEditField[command.id+'_alternate_name']">{{command.alternate_name}}&nbsp;
+                                        <a class="float-right badge badge-pill badge-info">
+                                            <font-awesome-icon
+                                                    @click="initcommandUpdate(command, 'alternate_name')"
+                                                    icon="pencil-alt"/>
+                                        </a>
+                                    </span>
+                                    <b-input-group v-else size="sm">
+                                        <b-form-input name="alternate_name"
+                                                      v-model="updateValues[command.id+'_alternate_name']"
+                                                      class="form-control" type="text"
+                                                      :placeholder="'Alternate name ('+command.alternate_name +')'"
+                                                      @blur="updatecommand(command.id, 'alternate_name')"
+                                                      @keyup.enter="updatecommand(command.id, 'alternate_name')"></b-form-input>
+                                        <b-input-group-append>
+                                            <b-button :disabled="errors.has('alternate_name')"
+                                                      @click="updatecommand(command.id, 'alternate_name')"
+                                                      variant="outline-success">
+                                                <font-awesome-icon icon="check"></font-awesome-icon>
+                                            </b-button>
+                                        </b-input-group-append>
+                                    </b-input-group>
+                                </p>
+                                <p class="card-text"><strong>{{ $t('command_number') }}:</strong>&nbsp;
+                                    <span v-if="!formEditField[command.id+'_number']">{{command.number}}&nbsp;
+                                        <a class="float-right badge badge-pill badge-info">
+                                            <font-awesome-icon
+                                                    @click="initcommandUpdate(command, 'number')"
+                                                    icon="pencil-alt"/>
+                                        </a>
+                                    </span>
+                                    <b-input-group v-else size="sm">
+                                        <b-form-input name="number"
+                                                      v-model="updateValues[command.id+'_number']"
+                                                      v-validate="'required|min:3'"
+                                                      v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
+                                                      class="form-control" type="text"
+                                                      :placeholder="'command number ('+command.number +')'"
+                                                      @blur="updatecommand(command.id, 'number')"
+                                                      @keyup.enter="updatecommand(command.id, 'number')"
+                                                      required></b-form-input>
+                                        <b-input-group-append>
+                                            <b-button :disabled="errors.has('number')"
+                                                      @click="updatecommand(command.id, 'number')"
+                                                      variant="outline-success">
+                                                <font-awesome-icon icon="check"></font-awesome-icon>
+                                            </b-button>
+                                        </b-input-group-append>
+                                    </b-input-group>
+                                </p>
+                                <p class="card-text">
+                                    <small><strong>{{ $t('comment') }}:</strong>&nbsp;
+                                        <span v-if="!formEditField[command.id+'_comment']">{{command.comment}}&nbsp;
+                                        <a class="float-right badge badge-pill badge-info">
+                                            <font-awesome-icon
+                                                    @click="initcommandUpdate(command, 'comment')"
+                                                    icon="pencil-alt"/>
+                                        </a>
+                                        </span>
+                                        <textarea class="textarea form-control" v-else name="comment"
+                                                  v-model="updateValues[command.id+'_comment']"
+                                                  :placeholder="'Comment ('+command.comment +')'"
+                                                  @blur="updatecommand(command.id, 'comment')"></textarea>
+                                    </small>
+                                </p>
+                                <hr/>
+                                <span v-if="!formEditField[command.id+'_recorder_id']">{{command.recorder_id}}&nbsp;
+                                    <div v-if="command.recorder">
+                                        <p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{command.recorder.name}}&nbsp;
+                                            ({{command.recorder.ip}}) / ({{command.recorder.network_name}})
+                                    </div>
+                                    <div v-else>
+                                        <p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{
+                                            $t('no_recorder_defined')}}</p>
+                                    </div>
+                                    <a class="float-right badge badge-pill badge-info">
+                                        <font-awesome-icon
+                                                @click="initcommandUpdate(command, 'recorder_id')" icon="pencil-alt"/>
+                                    </a>
+                                </span>
+                                <b-form v-else>
+                                    <b-input-group>
+                                        <select class="form-control" v-model="updateValues[command.id+'_recorder_id']">
+                                            <option value="">No recorder selected</option>
+                                            <option v-for="recorder in recorders" v-bind:value="recorder.id">
+                                                {{ recorder.name }}
+                                            </option>
+                                        </select>
+                                        <b-input-group-append>
+                                            <b-button :disabled="errors.has('recorder_id')"
+                                                      @click="updatecommand(command.id, 'recorder_id')"
+                                                      variant="outline-success">
+                                                <font-awesome-icon icon="check"></font-awesome-icon>
+                                            </b-button>
+                                        </b-input-group-append>
+                                    </b-input-group>
+
+                                    <div class="form-check">
+                                        <input class="form-check-input" type="checkbox"
+                                               v-model="show_assigned_recorders" id="defaultCheck1">
+                                        <label class="form-check-label" for="defaultCheck1">
+                                            Show already assigned recorders
+                                        </label>
+                                    </div>
+                                </b-form>
+
+                            </b-card-text>
+                            <div slot="footer">
+                                <small class="text-muted">
+                                    <p>{{ $t('created')}}: {{command.created_at | moment("dddd, MMMM Do YYYY")}}
+                                        <span class="pull-right">
+                                            <button type="button" v-on:click="deletecommand(command.id)"
+                                                    class="btn btn-sm btn-danger">{{
+                                        $t('delete') }}&nbsp;<font-awesome-icon
+                                                        icon="trash"/>
+                                            </button>
+                                        </span>
+                                    </p>
+                                </small>
+                            </div>
+                        </b-card>
+                    </b-card-group>
+                </b-tab>
+
+                <b-tab title="Create command">
+                    <template slot="title">
+                        <font-awesome-icon icon="plus"/>
+                        <i>{{$t('create')}}</i>&nbsp;<font-awesome-icon icon="door-open"/>
+                        <strong>{{$t('command')}}</strong>
+                    </template>
+                    <b-card-text>
+                        <p>{{ $t('Create a new command')}}:</p>
+                        <!-- form starts here -->
+                        <form v-on:submit.prevent="savecommand()">
+                            <section class="form">
+
+                                <div class="form-group row">
+                                    <label class="label required col-sm-2 col-form-label">{{ $t('name') }}</label>
+                                    <div class="col-sm-6">
+                                        <input name="name"
+                                               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="command name" required>
+                                    </div>
+                                    <p class="col-sm-4" v-show="errors.has('name')">
+                                        {{ errors.first('name') }}
+                                    </p>
+                                </div>
+
+                                <div class="form-group row">
+                                    <label class="label col-sm-2 col-form-label">{{ $t('alternate_name') }}</label>
+                                    <div class="col-sm-6">
+                                        <input name="alternate_name"
+                                               v-model="form.alternate_name"
+                                               class="form-control" type="text" placeholder="Alternate name">
+                                    </div>
+                                </div>
+
+                                <div class="form-group row">
+                                    <label class="label required col-sm-2 col-form-label">{{ $t('number') }}</label>
+                                    <div class="col-sm-6">
+                                        <input name="number"
+                                               v-model="form.number"
+                                               v-validate="'required|min:3'"
+                                               v-bind:class="{'is-danger': errors.has('number'), 'is-invalid': errors.has('number')}"
+                                               class="form-control" type="text" placeholder="command number" required>
+                                    </div>
+                                    <p class="col-sm-4" v-show="errors.has('number')">
+                                        {{ errors.first('number') }}
+                                    </p>
+                                </div>
+
+                                <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."
+                                      v-model="form.comment"></textarea>
+                                    </div>
+                                </div>
+
+                                <div class="form-group row">
+                                    <label class="label col-sm-2 col-form-label">{{ $t('recorder') }}</label>
+                                    <div class="col-sm-6">
+                                        <select class="form-control" v-model="form.recorder_id">
+                                            <option value="">No recorder selected</option>
+                                            <option v-for="recorder in recorders" v-bind:value="recorder.id">
+                                                {{ recorder.name }}
+                                            </option>
+                                        </select>
+                                    </div>
+                                </div>
+
+
+                                <div class="field is-grouped">
+                                    <div class="control">
+                                        <button
+                                                v-bind:disabled="errors.any()"
+                                                type="submit"
+                                                class="btn btn-primary">
+                                            Create command
+                                        </button>
+                                    </div>
+                                </div>
+
+                            </section>
+                        </form>
+                    </b-card-text>
+                </b-tab>
+            </b-tabs>
+        </section>
+
+        <hr>
+
+        <div class="column">
+            <section class="section" id="results">
+                <div class="box">
+                    <ul>
+                        <!-- loop through all the `form` properties and show their values -->
+                        <li v-for="(item, k) in form">
+                            <strong>{{ k }}:</strong> {{ item }}
+                        </li>
+                    </ul>
+                </div>
+            </section>
+        </div>
+
+        <div class="column">
+            <section class="section">
+                {{recorders}}
+            </section>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import {EventBus} from '@/utils';
+    import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
+    import getRepository from '@/api/RepositoryFactory';
+
+    const commandRepository = getRepository('command');
+
+    export default {
+        components: {
+            PulseLoader,
+        },
+        props: [],
+        data() {
+            return {
+                tabIndex: 0,
+                updateValues: {},
+                formEditField: {},
+                show_assigned_recorders: false,
+                form: {
+                    name: null,
+                    alternate_name: null,
+                    number: null,
+                    comment: null,
+                    recorder_id: null,
+                },
+            };
+        },
+        methods: {
+            savecommand() {
+                this.$parent.$data.isLoading = true;
+                commandRepository.createcommand(this.form)
+                    .then(() => {
+                        this.$store.dispatch('loadcommands')
+                            .then(() => {
+                                this.$parent.$data.isLoading = false;
+                                this.tabIndex = 0;
+                            });
+                    }).catch((msg) => {
+                    this.showErrorMessage('Could not safe command!');
+                    this.$log.warn(msg);
+                });
+            },
+            initcommandUpdate(command, fieldName) {
+                this.$set(this.formEditField, command.id + '_' + fieldName, true);
+                this.$set(this.updateValues, command.id + '_' + fieldName, command[fieldName]);
+            },
+            updatecommand(id, fieldName) {
+                this.$parent.$data.isLoading = true;
+                const data = {};
+                data[fieldName] = this.updateValues[id + '_' + fieldName];
+                commandRepository.updatecommand(id, data)
+                    .then(() => {
+                        this.$store.dispatch('loadcommands')
+                            .then(() => {
+                                this.$parent.$data.isLoading = false;
+                                this.formEditField[id + '_' + fieldName] = false;
+                            });
+                    });
+            },
+            deletecommand(id) {
+                this.$parent.$data.isLoading = true;
+                commandRepository.deletecommand(id)
+                    .then(() => {
+                        this.$store.dispatch('loadcommands')
+                            .then(() => {
+                                this.$parent.$data.isLoading = false;
+                            });
+                    });
+            },
+            showErrorMessage(msg) {
+                this.$parent.$data.isLoading = false;
+                this.$parent.$data.showAlert = true;
+                this.$parent.$data.alertMessage = msg;
+            },
+        },
+        mounted() {
+            this.$parent.$data.isLoading = true;
+            this.$parent.$data.showAlert = false;
+            this.$store.dispatch('loadcommands')
+                .then(() => {
+                    this.$store.dispatch('loadRecorders')
+                        .then(() => {
+                            this.$parent.$data.isLoading = false;
+                        });
+                });
+        },
+        computed: {
+            options() {
+                return {
+                    recorders: [
+                        {value: 8, text: 'SMP 351 AudiMax'},
+                        {value: 13, text: 'SMP 351 HMU'},
+                    ],
+                };
+            },
+            commands() {
+                return this.$store.state.commands;
+            },
+            recorders() {
+                return this.$store.state.recorders;
+            },
+        },
+    };
+</script>
+
+<style>
+    .comment {
+        white-space: pre-wrap;
+    }
+
+    .card:hover {
+        background-color: whitesmoke;
+    }
+
+    .required:after {
+        content: " *";
+    }
+</style>
diff --git a/src/components/Recorders.vue b/src/components/Recorders.vue
index 232424a..fcb7d35 100644
--- a/src/components/Recorders.vue
+++ b/src/components/Recorders.vue
@@ -269,6 +269,120 @@
                         <font-awesome-icon icon="list"/>&nbsp;Recorder&nbsp;<font-awesome-icon icon="scroll"/>
                         <strong>Model</strong>&nbsp;<i>list</i>
                     </template>
+                    <p>{{ $t('There are')}}&nbsp;{{recorderModels.length}}&nbsp;{{ $t('recorder models defined')}}:</p>
+                    <b-card-group deck>
+                        <b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(recorderModel) in recorderModels"
+                                :header="recorderModel.name"
+                                v-bind:key="recorderModel.id">
+                            {{recorderModel}}
+                            <b-card-text>
+                                <h5 class="card-title">{{ $t('model_name') }}:&nbsp;
+                                    <span v-if="!formEditField['model_'+recorderModel.id+'_model_name']">{{recorderModel.model_name}}&nbsp;
+                                        <a class="float-right badge badge-pill badge-primary">
+                                            <font-awesome-icon
+                                                    @click="initRecorderModelUpdate(recorderModel, 'model_name')"
+                                                    icon="pencil-alt"/>
+                                        </a>
+                                    </span>
+                                    <b-input-group v-else>
+                                        <b-form-input :id="recorderModel.id+'_model_name'" name="model_name"
+                                                      v-model="updateValues[recorderModel.id+'_model_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="'Model Name ('+recorderModel.model_name +')'"
+                                                      required></b-form-input>
+                                        <b-input-group-append>
+                                            <b-button :disabled="errors.has('model_name')"
+                                                      @click="updateRecorder(recorderModel.id, 'model_name')"
+                                                      variant="outline-success">
+                                                <font-awesome-icon icon="check"></font-awesome-icon>
+                                            </b-button>
+                                        </b-input-group-append>
+                                    </b-input-group>
+                                </h5>
+                                <p class="card-text">
+                                    <small><strong>{{ $t('notes') }}:</strong>&nbsp;
+                                        <span v-if="!formEditField['model_'+recorderModel.id+'notes']">{{recorderModel.notes}}&nbsp;
+                                        <a class="float-right badge badge-pill badge-info">
+                                            <font-awesome-icon
+                                                    @click="initrecorderModelUpdate(room, 'notes')"
+                                                    icon="pencil-alt"/>
+                                        </a>
+                                        </span>
+                                        <textarea class="textarea form-control" v-else name="notes"
+                                                  v-model="updateValues['model_'+recorderModel.id+'_notes']"
+                                                  :placeholder="'Notes ('+recorderModel.notes +')'"
+                                                  @blur="updaterecorderModel(recorderModel.id, 'notes')"></textarea>
+                                    </small>
+                                </p>
+
+                                <hr/>
+
+                                <span v-if="!formEditField[room.id+'_recorder_id']">{{room.recorder_id}}&nbsp;
+                                    <div v-if="room.recorder">
+                                        <p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{room.recorder.name}}&nbsp;
+                                            ({{room.recorder.ip}}) / ({{room.recorder.network_name}})
+                                    </div>
+                                    <div v-else>
+                                        <p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{
+                                            $t('no_recorder_defined')}}</p>
+                                    </div>
+                                    <a class="float-right badge badge-pill badge-info">
+                                        <font-awesome-icon
+                                                @click="initRoomUpdate(room, 'recorder_id')" icon="pencil-alt"/>
+                                    </a>
+                                </span>
+                                <b-form v-else>
+                                    <b-input-group>
+                                        <b-form-group>
+                                            <b-form-checkbox-group v-model="updateValues['model_'+room.id+'_recorder_command_ids']">
+                                                <b-form-checkbox v-for="recorderCommand in recorderCommands"
+                                                                 v-bind:value="recorderCommand.id">{{recorderCommand.name}}</b-form-checkbox>
+                                                <b-form-checkbox value="that">Check that out</b-form-checkbox>
+                                            </b-form-checkbox-group>
+                                        </b-form-group>
+                                        <select class="form-control" v-model="updateValues[room.id+'_recorder_id']">
+                                            <option value="">No recorder selected</option>
+                                            <option v-for="recorder in recorders" v-bind:value="recorder.id">
+                                                {{ recorder.name }}
+                                            </option>
+                                        </select>
+                                        <b-input-group-append>
+                                            <b-button :disabled="errors.has('recorder_id')"
+                                                      @click="updateRoom(room.id, 'recorder_id')"
+                                                      variant="outline-success">
+                                                <font-awesome-icon icon="check"></font-awesome-icon>
+                                            </b-button>
+                                        </b-input-group-append>
+                                    </b-input-group>
+
+                                    <div class="form-check">
+                                        <input class="form-check-input" type="checkbox"
+                                               v-model="show_assigned_recorders" id="defaultCheck1">
+                                        <label class="form-check-label" for="defaultCheck1">
+                                            Show already assigned recorders
+                                        </label>
+                                    </div>
+                                </b-form>
+
+
+                            </b-card-text>
+                            <div slot="footer">
+                                <small class="text-muted">
+                                    <p>{{ $t('created')}}: {{recorder.created_at | moment("dddd, MMMM Do YYYY")}}
+                                        <span class="pull-right">
+                                            <button type="button" v-on:click="deleteRecorder(recorder.id)"
+                                                    class="btn btn-sm btn-danger">{{
+                                        $t('delete') }}&nbsp;<font-awesome-icon
+                                                        icon="trash"/>
+                                            </button>
+                                        </span>
+                                    </p>
+                                </small>
+                            </div>
+                        </b-card>
+                    </b-card-group>
                 </b-tab>
                 <b-tab title="Create recorder model">
                     <template slot="title">
@@ -277,10 +391,62 @@
                         <strong>Model</strong>
                     </template>
                     <b-card-text>
-                        <p>{{ $t('Create a new recorder')}}:</p>
+                        <p>{{ $t('Create a new recorder model')}}:</p>
                         <!-- form starts here -->
-                        <form v-on:submit.prevent="saveRecorder">
+                        <form v-on:submit.prevent="saveRecorder()">
+                            <section class="form">
 
+                                <div class="form-group row">
+                                    <label class="label required col-sm-2 col-form-label">{{ $t('model_name') }}</label>
+                                    <div class="col-sm-6">
+                                        <input name="model_name"
+                                               v-model="form.model_name"
+                                               v-validate="'required|min:3'"
+                                               v-bind:class="{'is-danger': errors.has('model_name'), 'is-invalid': errors.has('model_name')}"
+                                               class="form-control" type="text" placeholder="Recorder Model name" required>
+                                    </div>
+                                    <p class="col-sm-4" v-show="errors.has('model_name')">
+                                        {{ errors.first('model_name') }}
+                                    </p>
+                                </div>
+
+
+                                <div class="form-group row">
+                                    <label class="label col-sm-2 col-form-label">{{ $t('notes') }}</label>
+                                    <div class="col-sm-6">
+                                        <textarea class="textarea form-control"
+                                                  placeholder="Comments, remarks, notes, etc."
+                                                  v-model="form.notes"></textarea>
+                                    </div>
+                                </div>
+
+
+                                <div class="form-group row">
+                                    <label class="label col-sm-2 col-form-label">{{ $t('recorder_commands') }}</label>
+                                    <div class="col-sm-6">
+                                        <b-form-group>
+                                            <b-form-checkbox-group v-model="recorder_command_ids">
+                                                <b-form-checkbox v-for="recorderCommand in recorderCommands"
+                                                                 v-bind:value="recorderCommand.id">{{recorderCommand.name}}</b-form-checkbox>
+                                                <b-form-checkbox value="that">Check that out</b-form-checkbox>
+                                            </b-form-checkbox-group>
+                                        </b-form-group>
+                                    </div>
+                                </div>
+
+
+                                <div class="field is-grouped">
+                                    <div class="control">
+                                        <button
+                                                v-bind:disabled="errors.any()"
+                                                type="submit"
+                                                class="btn btn-primary">
+                                            Create recorder
+                                        </button>
+                                    </div>
+                                </div>
+
+                            </section>
                         </form>
                     </b-card-text>
                 </b-tab>
diff --git a/src/router.ts b/src/router.ts
index 4ec298d..f5665ae 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -11,6 +11,7 @@ import User from '@/components/User.vue';
 import Group from '@/components/Group.vue';
 import Rooms from '@/components/Rooms.vue';
 import Recorders from '@/components/Recorders.vue';
+import Commands from '@/components/Commands.vue';
 import store from '@/store';
 
 Vue.use(Router);
@@ -69,7 +70,7 @@ export const router = new Router({
         }, {
             path: '/commands',
             name: 'commands',
-            component: Rooms,
+            component: Commands,
         }, {
             path: '/surveys',
             name: 'NewSurvey',