diff --git a/src/main/js/bundles/dn_labeling/LabelingWidget.vue b/src/main/js/bundles/dn_labeling/LabelingWidget.vue
index 50b3223..536e44b 100644
--- a/src/main/js/bundles/dn_labeling/LabelingWidget.vue
+++ b/src/main/js/bundles/dn_labeling/LabelingWidget.vue
@@ -16,10 +16,10 @@
 
 -->
 <template>
-    <div class="labelingWidgetContainer">
-        <div class="__selections-div">
-            <div>
-                <h4>{{ i18n.selectionTitle }}</h4>
+    <div class="ct-labeling-widget">
+        <div class="ct-labeling-widget__selections">
+            <v-sheet class="mb-1">
+                <h3>{{ i18n.selectionTitle }}</h3>
                 <v-autocomplete
                     v-model="selectedLayer"
                     :items="layers"
@@ -31,33 +31,47 @@
                     hide-details
                     class="pt-0 mt-0 pb-2"
                 />
-            </div>
-            <div>
-                <div v-show="edit">
-                    <v-sheet elevation="12">
-                        <v-btn
-                            id="iconRight"
-                            icon
-                            small
-                            @click="edit = !edit"
-                        >
-                            <v-icon>close</v-icon>
-                        </v-btn>
-                        <div id="editText">
-                            <v-text-field
-                                v-model="editedField.prefix"
-                                :label="i18n.prefix"
-                            />
-                            <v-text-field
-                                v-model="editedField.postfix"
-                                :label="i18n.postfix"
-                            />
-                        </div>
-                    </v-sheet>
+            </v-sheet>
+            <v-sheet
+                v-show="edit"
+                class="my-1 ct-labeling-widget__edit-section"
+            >
+                <div class="align-right">
+                    <v-tooltip
+                        top
+                        open-delay="800"
+                    >
+                        <template #activator="{ on }">
+                            <v-btn
+                                class="ct-labeling-widget__edit-close-section mr-2"
+                                icon
+                                small
+                                :aria-label="i18n.finishEditingAttributeLabel"
+                                v-on="on"
+                                @click="edit = !edit"
+                            >
+                                <!--TODO: maybe change Icon!-->
+                                <v-icon>close</v-icon>
+                            </v-btn>
+                        </template>
+                        <span>{{ i18n.finishEditingAttributeLabel }}</span>
+                    </v-tooltip>
+                </div>
+                <div class="ct-labeling-widget__edit-inputs">
+                    <v-text-field
+                        v-model="editedField.prefix"
+                        :label="i18n.prefix"
+                    />
+                    <v-text-field
+                        v-model="editedField.postfix"
+                        :label="i18n.postfix"
+                    />
                 </div>
-                <h4>{{ i18n.selectionFields }}</h4>
+            </v-sheet>
+            <v-sheet class="my-1">
+                <h3>{{ i18n.selectionFields }}</h3>
+                <!--TODO: Element not focusable with keyboard, even when not disabled-->
                 <v-select
-                    id="autocomplete"
                     v-model="selectedFields"
                     :items="fields"
                     rounded
@@ -66,13 +80,13 @@
                     label="Felder auswählen"
                     item-text="name"
                     return-object
-                    class="draggableSelect pt-1 mt-0"
+                    class="ct-labeling-widget__draggable-select pt-1 mt-0"
                     clearable
                     :disabled="!selectedLayer"
                 >
                     <template #selection="data">
                         <draggable
-                            :id="data.index"
+                            :id="`ct-labeling-attribute-${data.index}`"
                             :list="selectedFields"
                             v-bind="dragOptionsChips"
                             :move="move"
@@ -91,27 +105,48 @@
 
                                 <span>{{ data.item.name }}</span>
                                 <span>
-                                    <v-btn
-                                        icon
-                                        @click="setEdit(data.item)"
+                                    <v-tooltip
+                                        top
+                                        open-delay="800"
                                     >
-                                        <v-icon small>edit</v-icon>
-                                    </v-btn>
-                                    <v-btn
-                                        icon
-                                        @click="remove(data.item)"
+                                        <template #activator="{ on }">
+                                            <v-btn
+                                                icon
+                                                :aria-label="i18n.editAttributeLabel"
+                                                v-on="on"
+                                                @click="setEdit(data.item)"
+                                            >
+                                                <v-icon small>edit</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>{{ i18n.editAttributeLabel }}</span>
+                                    </v-tooltip>
+                                    <v-tooltip
+                                        top
+                                        open-delay="800"
                                     >
-                                        <v-icon small>close</v-icon>
-                                    </v-btn>
+                                        <template #activator="{ on }">
+                                            <v-btn
+                                                icon
+                                                :aria-label="i18n.deleteAttributeLabel"
+                                                v-on="on"
+                                                @click="remove(data.item)"
+                                            >
+                                                <v-icon small>close</v-icon>
+                                            </v-btn>
+                                        </template>
+                                        <span>{{ i18n.deleteAttributeLabel }}</span>
+                                    </v-tooltip>
                                 </span>
                             </v-chip>
                         </draggable>
                     </template>
                 </v-select>
-            </div>
+            </v-sheet>
         </div>
-        <div class="__controls-div">
-            <div>
+        <v-divider />
+        <div class="ct-labeling-widget__controls-div">
+            <div class="my-1">
                 <v-switch
                     v-model="showFeatureEdgeLengths"
                     class="controls circumference-switch"
@@ -122,23 +157,18 @@
             </div>
             <div>
                 <v-btn
-                    v-if="!active"
-                    color="primary"
-                    @click.native="setLabeling"
-                >
-                    <v-icon>icon-play</v-icon>
-                    {{ i18n.labeling.start }}
-                </v-btn>
-                <v-btn
-                    v-else
                     color="primary"
+                    :aria-pressed="active"
+                    :disabled="selectedFields.length === 0"
                     @click.native="setLabeling"
                 >
-                    <v-icon>icon-pause</v-icon>
-                    {{ i18n.labeling.stop }}
+                    <v-icon>{{ !active ? "icon-play" : "icon-pause" }}</v-icon>
+                    {{ !active ? i18n.labeling.start : i18n.labeling.stop }}
                 </v-btn>
                 <v-btn
-                    color="secondary"
+                    color="error"
+                    outline
+                    :disabled="!selectedLayer || (selectedLayer && selectedFields.length === 0)"
                     @click.native="deleteLabel"
                 >
                     <v-icon>icon-trashcan-detailed</v-icon>
diff --git a/src/main/js/bundles/dn_labeling/css/styles.css b/src/main/js/bundles/dn_labeling/css/styles.css
index 52e5367..775aee9 100644
--- a/src/main/js/bundles/dn_labeling/css/styles.css
+++ b/src/main/js/bundles/dn_labeling/css/styles.css
@@ -13,15 +13,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.ctAppRoot .labelingWidget .labelingWidgetContainer {
+.ctAppRoot .ct-labeling-widget {
     display: flex;
     flex-direction: column;
     height: 100%;
+    justify-content: space-between;
 
-    .__selections-div {
+    .ct-labeling-widget__selections {
         display: flex;
         flex-direction: column;
-        flex-grow: 1;
+        flex: 1 1 auto;
+        overflow: auto;
 
         .v-select__selections {
             display: grid;
@@ -31,18 +33,19 @@
             .v-chip {
                 width: 98%;
 
-                .v-chip__content{
+                .v-chip__content {
                     width: 100%;
                     padding: 0;
+                    cursor: move;
                 }
             }
         }
     }
 
-    .__controls-div {
+    .ct-labeling-widget__controls-div {
         display: flex;
         flex-direction: column;
-        flex-shrink: 1;
+        flex: 0 0 auto;
 
         .circumference-switch {
             margin-top: 0;
@@ -53,30 +56,23 @@
             margin-left: 0;
         }
     }
-}
-
-.ctAppRoot .labelingWidget .v-btn--icon{
-    margin: 0;
-}
 
-.ctAppRoot .labelingWidget #editText{
-    padding: 5px;
-    margin: 10px;
-}
+    .v-btn--icon {
+        margin: 0;
+    }
 
-.ctAppRoot .labelingWidget #iconRight{
-    float:  right;
-}
+    .ct-labeling-widget__edit-inputs {
+        padding: 5px;
+        margin: 10px;
+    }
 
-.ctAppRoot .labelingWidget #autocomplete {
-    display: none;
-}
+    .ct-labeling-widget__draggable-select.v-input--is-dirty .v-input__slot:before {
+        display: none;
+    }
 
-.ctAppRoot .labelingWidget .draggableSelect.v-input--is-dirty .v-input__slot:before {
-    display: none;
+    .ct-labeling-widget__selections .v-select__selections .v-chip span {
+        color: #45474d;
+    }
 }
 
-.ctAppRoot .labelingWidget .labelingWidgetContainer .__selections-div .v-select__selections .v-chip span {
-    color: #45474d;
-}
 
diff --git a/src/main/js/bundles/dn_labeling/nls/bundle.ts b/src/main/js/bundles/dn_labeling/nls/bundle.ts
index 12e1dd0..a6c68ac 100644
--- a/src/main/js/bundles/dn_labeling/nls/bundle.ts
+++ b/src/main/js/bundles/dn_labeling/nls/bundle.ts
@@ -38,6 +38,9 @@ const i18n = {
             tooltip: "Labeling Tool",
             selectionTitle: "Select Layer",
             selectionFields: "Select Fields",
+            editAttributeLabel: "Edit attribute label",
+            finishEditingAttributeLabel: "Finish editing attribute label",
+            deleteAttributeLabel: "Delete attribute label",
             edgesLabel: "Label Edge Lengths",
             autoUpdate: "Keep updated",
             prefix: "Prefix",
diff --git a/src/main/js/bundles/dn_labeling/nls/de/bundle.ts b/src/main/js/bundles/dn_labeling/nls/de/bundle.ts
index d1a08e7..70e3aa0 100644
--- a/src/main/js/bundles/dn_labeling/nls/de/bundle.ts
+++ b/src/main/js/bundles/dn_labeling/nls/de/bundle.ts
@@ -40,6 +40,9 @@ export default {
         tooltip: "Beschriftungswerkzeug",
         selectionTitle: "Layer auswählen",
         selectionFields: "Felder auswählen",
+        editAttributeLabel: "Attributbeschriftung bearbeiten",
+        finishEditingAttributeLabel: "Bearbeitung der Attributbeschriftung beenden",
+        deleteAttributeLabel: "Attributbeschriftung entfernen",
         edgesLabel: "Kantenlängen beschriften",
         autoUpdate: "Änderungen automatisch anwenden",
         prefix: "Präfix",