diff --git a/src/App.vue b/src/App.vue
index b057192..ceb4ef8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,7 +24,6 @@
 			:color="$store.state.snackbar.snackbar.color"
 		>
 			{{ $store.state.snackbar.snackbar.message }}
-			<v-btn v-if="$store.state.snackbar.snackbar.showClose" dark text @click="$store.commit('snackbar/setSnackbarShow', false)">Cerrar</v-btn>
 		</v-snackbar>
 	</v-app>
 </template>
diff --git a/src/components/Interface/Dialogs/Delete.vue b/src/components/Interface/Dialogs/Delete.vue
index 79a608e..78c0e32 100644
--- a/src/components/Interface/Dialogs/Delete.vue
+++ b/src/components/Interface/Dialogs/Delete.vue
@@ -1,18 +1,18 @@
 <template>
 	<v-dialog max-width="400px" v-model="show" persistent>
 		<v-card>
-			<v-card-title class="headline">{{ $t('products.delete_product_modal_title') }}</v-card-title>
-			<v-card-text>{{ $t('products.delete_product_modal_message') }}</v-card-text>
+			<v-card-title class="headline">{{headerMessage || $t('products.delete_product_modal_title') }}</v-card-title>
+			<v-card-text>{{ bodyMessage || $t('products.delete_product_modal_message') }}</v-card-text>
 			<v-card-actions>
 				<v-spacer></v-spacer>
-				<v-btn class="delete" color="error" @click="$emit('confirm')">{{ $t('call_action_buttons.delete') }}</v-btn>
-				<v-btn class="cancel" color="primary" text @click="$emit('cancel')">{{ $t('products.keep_item') }}</v-btn>
+				<v-btn class="delete" color="error" @click="$emit('confirm')">{{ confirmMessage || $t('call_action_buttons.delete') }}</v-btn>
+				<v-btn class="cancel" color="primary" text @click="$emit('cancel')">{{ cancelMessage || $t('products.keep_item') }}</v-btn>
 			</v-card-actions>
 		</v-card>
 	</v-dialog>
 </template>
 <script>
 export default {
-	props:['show']
+	props:['show','headerMessage', 'bodyMessage', 'confirmMessage', 'cancelMessage'],
 };
 </script>
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index 7fb297a..58c099e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -109,7 +109,12 @@
     "cancel": "Cancel",
     "go_to_resume":"Go to resume",
     "action":"Action",
-    "done": "Done"
+    "done": "Done",
+    "addMeasurementUnit":"Add measurement unit",
+    "delete_measurement_unit":"Delete measurement unit",
+    "no_go_back": "No, go back",
+    "addCategory": "Add category",
+    "delete_category": "Delete category"
   },
   "messages": {
     "save": "Item save",
@@ -137,7 +142,10 @@
     "password_length":"Password must be less than",
     "characters":"characters",
     "invalid_token":"the token is not valid, please request a new account recovery email",
-    "select_or_add_brand":"Select or write a brand name"
+    "select_or_add_brand":"Select or write a brand name",
+    "measurement_units_description": "Units of measure are the units in which the product is measured, for example, unit, package, box, etc.",
+    "delete_measurement_unit": "Are you sure you want to delete this unit of measure?",
+    "delete_category": "Are you sure you want to delete this category?"
   },
   "category":{
     "name":"Name",
@@ -151,7 +159,7 @@
     "name":"Name",
     "measurement_description_section":"The categories help you to carry out deeper analyzes to know which categories you consume more",
     "measurement":"Measurement unit",
-    "measurement_placeholder":"Unit, Sixpack",
+    "measurement_placeholder":"Unit, package, box, etc.",
     "registered_measurement":"Registered measurement unit",
     "forbiden_delete":"This unit of measure cannot be eliminated because it has associated products"
   },
diff --git a/src/locales/es.json b/src/locales/es.json
index 7a53439..becbb00 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -109,7 +109,12 @@
     "cancel": "Cancelar",
     "go_to_resume": "Ir al resumen",
     "action": "Acción",
-    "done": "Listo"
+    "done": "Listo",
+    "addMeasurementUnit": "Agregar unidad de medida",
+    "delete_measurement_unit": "Eliminar unidad de medida",
+    "no_go_back": "No, regresar",
+    "addCategory": "Agregar categoria",
+    "delete_category": "Eliminar categoria"
   },
   "messages": {
     "save": "Item guardado",
@@ -137,11 +142,14 @@
     "password_length": "La contraseña no debe tener menos de",
     "characters": "caracteres",
     "invalid_token": "El token no es válido, solicite un nuevo correo electrónico de recuperación de cuenta",
-    "select_or_add_brand": "Seleccione o escriba el nombre de una marca"
+    "select_or_add_brand": "Seleccione o escriba el nombre de una marca",
+    "measurement_units_description": "Las unidades de medida son las unidades en las que se mide el producto, por ejemplo, unidad, paquete, caja, etc.",
+    "delete_measurement_unit": "¿Estás seguro de que deseas eliminar esta unidad de medida?",
+    "delete_category": "¿Estás seguro de que deseas eliminar esta categoría?"
   },
   "category": {
     "name": "Nombre",
-    "category_description_section": "TLas categorías lo ayudan a realizar análisis más profundos para saber qué categorías consume más",
+    "category_description_section": "Las categorías lo ayudan a realizar análisis más profundos para saber qué categorías consume más",
     "category": "Categoria",
     "category_placeholder": "Gastable, Legumbres",
     "registered_categories": "Categorias registradas",
@@ -150,7 +158,7 @@
   "measurement_unit": {
     "name": "Nombre",
     "measurement": "Unidad de medida",
-    "measurement_placeholder": "Unidad, Sixpack",
+    "measurement_placeholder": "Unidad, Libras, Paquete, Caja, etc.",
     "registered_measurement": "Unidad de medida registrada",
     "forbiden_delete": "Esta unidad de medida no se puede eliminar porque tiene productos asociados."
   },
diff --git a/src/store/Modules/Snackbar.js b/src/store/Modules/Snackbar.js
index 7443bd2..0230f48 100644
--- a/src/store/Modules/Snackbar.js
+++ b/src/store/Modules/Snackbar.js
@@ -17,12 +17,12 @@ const snackbar = {
       state.snackbar.message = snackbar.message;
       state.snackbar.color = snackbar.color;
       state.snackbar.top = snackbar.top === undefined ? null : snackbar.top;
-      state.snackbar.showClose = snackbar.showClose === undefined ? true : snackbar.showClose;
+      state.snackbar.showClose = false
       state.snackbar.bottom =
         snackbar.bottom === undefined ? null : snackbar.bottom;
       setTimeout(() => {
         state.snackbar.show = false;
-      }, 5000);
+      }, snackbar.color === 'error' ? 5000 : 2000);
     },
     setSnackbarShow(state, value) {
       state.snackbar.show = value;
diff --git a/src/views/miscellany/categories.vue b/src/views/miscellany/categories.vue
index b579aae..91bb3a1 100644
--- a/src/views/miscellany/categories.vue
+++ b/src/views/miscellany/categories.vue
@@ -1,52 +1,86 @@
 <template>
-	<div>
-		<v-row>
-			<v-col cols="12">
-				<form @submit.prevent="createCategory">
-					<p>{{ $t('category.category_description_section') }}</p>
-					<v-text-field
-						name="name"
-						:label=" $t('category.category') "
-						id="name"
-						v-model="name"
-						:placeholder=" $t('category.category_placeholder') "
-						autocomplete="off"
-						@keyup="uppercase"
-					></v-text-field>
-					<v-btn color="primary" type="submit" class="ml-0" :disabled="name.length == 0">
-						<v-icon class="mr-2">fa-save</v-icon>
-						{{ $t('call_action_buttons.save') }}
-					</v-btn>
-				</form>
-			</v-col>
-			<v-col cols="12">
-				<h4>{{ $t('category.registered_categories') }}</h4>
-			</v-col>
-			<v-col cols="12">
-				<v-data-table
-					mobile-breakpoint="xs"
-					:headers="headers"
-					:items="$store.getters['categories/getAll']"
-				>
-					<template v-slot:no-data>
-						<v-alert :value="true" color="error" icon="fa-warning">{{ $t('messages.nothing_to_display') }}</v-alert>
-					</template>
-					<template v-slot:item.action="{item}">
-						<v-btn text color="error" class="ml-0 pl-0" @click="dispatchDeleteCategory(item)">
-							<v-icon class="mr-2" small>fa-trash</v-icon>
-							{{ $t('call_action_buttons.delete') }}
-						</v-btn>
-					</template>
-				</v-data-table>
-			</v-col>
-		</v-row>
-		<delete-dialog
-			:show="showDialogDeleteCategory"
-			@cancel="showDialogDeleteCategory = false"
-			@confirm="deleteCategory()"
-		/>
-		<loading :active.sync="isLoading" :can-cancel="false" :is-full-page="true" />
-	</div>
+  <div>
+    <v-row>
+      <v-col cols="12">
+        <p>{{ $t('category.category_description_section') }}</p>
+      </v-col>
+      <v-col cols="12" v-if="$store.getters['categories/getAll'].length === 0">
+        <v-alert type="info">
+          {{ $t('messages.nothing_to_display') }}
+        </v-alert>
+      </v-col>
+      <v-col cols="12">
+        <v-btn @click="handleOpenCreateForm()" color="primary">
+          <v-icon class="mr-2">fa-plus</v-icon>
+          {{ $t('call_action_buttons.addCategory') }}
+        </v-btn>
+      </v-col>
+      <v-col
+        cols="12"
+        v-for="item in $store.getters['categories/getAll']"
+        :key="item.id"
+      >
+        {{ item.name }}
+        <v-btn
+          class="float-right"
+          text
+          color="error"
+          @click="dispatchDeleteCategory(item)"
+        >
+          <v-icon class="mr-2" small>fa-trash</v-icon>
+          {{ $t('call_action_buttons.delete') }}
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <v-dialog v-model="showCreateFormDialog" width="500">
+      <v-card>
+        <v-card-title class="text-h5 grey lighten-2">
+          {{ $t('call_action_buttons.addCategory') }}
+        </v-card-title>
+
+        <v-card-text>
+          <form @submit.prevent="createCategory">
+            <v-text-field
+              ref="categoryNameRef"
+              name="name"
+              :label="$t('category.category')"
+              id="name"
+              v-model="name"
+              :placeholder="$t('category.category_placeholder')"
+              autocomplete="off"
+              @keyup="uppercase"
+            ></v-text-field>
+            <div class="text-center">
+              <v-btn
+                color="primary"
+                type="submit"
+                class="ml-0"
+                :disabled="name.length == 0"
+              >
+                <v-icon class="mr-2">fa-save</v-icon>
+                {{ $t('call_action_buttons.save') }}
+              </v-btn>
+            </div>
+          </form>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
+    <delete-dialog
+      :show="showDialogDeleteCategory"
+      :header-message="$t('call_action_buttons.delete_category')"
+      :body-message="$t('messages.delete_category')"
+      :cancel-message="$t('call_action_buttons.no_go_back')"
+      @cancel="showDialogDeleteCategory = false"
+      @confirm="deleteCategory()"
+    />
+    <loading
+      :active.sync="isLoading"
+      :can-cancel="false"
+      :is-full-page="true"
+    />
+  </div>
 </template>
 
 <script>
@@ -55,123 +89,131 @@ import deleteDialog from '@/components/Interface/Dialogs/Delete';
 import Loading from 'vue-loading-overlay';
 
 export default {
-	name: 'categories',
-	components: {
-		deleteDialog,
-		Loading
-	},
-	mounted() {
-		if (this.online) {
-			this.requestCategories();
-		}
-	},
-	data: function() {
-		return {
-			name: '',
-			headers: [
-				{ text: this.$t('category.name'), value: 'name' },
-				{ text: this.$t('call_action_buttons.action'), value: 'action' }
-			],
-			showDialogDeleteCategory: false,
-			indexCategoryForDelete: '',
-			isLoading: false
-		};
-	},
-	computed: {
-		...mapState(['online'])
-	},
-	methods: {
-		createCategory() {
-			if (this.online) {
-				this.isLoading = true;
-				this.$store
-					.dispatch('categories/create', { name: this.name })
-					.then(response => {
-						this.$store.commit('categories/ADD', response.data.data);
-						this.name = '';
-						this.$store.commit('snackbar/setSnackbar', {
-							show: true,
-							message: this.$t('messages.saved'),
-							color: 'success',
-							top: true
-						});
-					})
-					.catch(function(error) {
-						console.log('TCL: createCategory -> error', error);
-					})
-					.finally(() => {
-						this.isLoading = false;
-					});
-			} else {
-				this.$store.commit('snackbar/setSnackbar', {
-					show: true,
-					message: this.$t('messages.intenet_required'),
-					color: 'success',
-					top: true
-				});
-			}
-		},
-		dispatchDeleteCategory(item) {
-			this.showDialogDeleteCategory = true;
-			const index = this.$store.getters['categories/getAll'].findIndex(
-				category => category.id_category === item.id_category
-			);
-			this.indexCategoryForDelete = index;
-		},
-		deleteCategory() {
-			if (this.online) {
-				this.$store
-					.dispatch('categories/delete', {
-						id: this.$store.getters['categories/getAll'][
-							this.indexCategoryForDelete
-						].id_category
-					})
-					.then(response => {
-						this.$store.commit(
-							'categories/REMOVE',
-							this.indexCategoryForDelete
-						);
-						this.$store.commit('snackbar/setSnackbar', {
-							show: true,
-							message: this.$t('call_action_buttons.deleted'),
-							color: 'success',
-							top: true
-						});
-					})
-					.catch(error => {
-						if (error.response.status === 409) {
-							this.$store.commit('snackbar/setSnackbar', {
-								show: true,
-								message: this.$t('category.forbiden_delete'),
-								color: 'error',
-								top: true
-							});
-						}
-						console.log('TCL: deleteCategory -> error', error);
-					});
-			} else {
-				this.$store.commit('snackbar/setSnackbar', {
-					show: true,
-					message: this.$t('messages.intenet_required'),
-					color: 'error',
-					top: true
-				});
-			}
-			this.showDialogDeleteCategory = false;
-		},
-		uppercase() {
-			this.name = this.name.toUpperCase();
-		},
-		requestCategories() {
-			this.$store
-				.dispatch('categories/getAll')
-				.then(response => {
-					this.$store.commit('categories/SET', response.data.data);
-				})
-				.catch(error => {
-					console.log(error);
-				});
-		}
-	}
+  name: 'categories',
+  components: {
+    deleteDialog,
+    Loading,
+  },
+  mounted() {
+    if (this.online) {
+      this.requestCategories();
+    }
+  },
+  data: function () {
+    return {
+      name: '',
+      headers: [
+        { text: this.$t('category.name'), value: 'name' },
+        { text: this.$t('call_action_buttons.action'), value: 'action' },
+      ],
+      showDialogDeleteCategory: false,
+      indexCategoryForDelete: '',
+      isLoading: false,
+      showCreateFormDialog: false,
+    };
+  },
+  computed: {
+    ...mapState(['online']),
+  },
+  methods: {
+    createCategory() {
+      if (this.online) {
+        this.isLoading = true;
+        this.$store
+          .dispatch('categories/create', { name: this.name })
+          .then((response) => {
+            this.$store.commit('categories/ADD', response.data.data);
+            this.name = '';
+            this.$store.commit('snackbar/setSnackbar', {
+              show: true,
+              message: this.$t('messages.saved'),
+              color: 'success',
+              top: true,
+            });
+						this.showCreateFormDialog = false
+          })
+          .catch(function (error) {
+            console.log('TCL: createCategory -> error', error);
+          })
+          .finally(() => {
+            this.isLoading = false;
+          });
+      } else {
+        this.$store.commit('snackbar/setSnackbar', {
+          show: true,
+          message: this.$t('messages.intenet_required'),
+          color: 'success',
+          top: true,
+        });
+      }
+    },
+    dispatchDeleteCategory(item) {
+      this.showDialogDeleteCategory = true;
+      const index = this.$store.getters['categories/getAll'].findIndex(
+        (category) => category.id_category === item.id_category
+      );
+      this.indexCategoryForDelete = index;
+    },
+    deleteCategory() {
+      if (this.online) {
+        this.$store
+          .dispatch('categories/delete', {
+            id: this.$store.getters['categories/getAll'][
+              this.indexCategoryForDelete
+            ].id_category,
+          })
+          .then((response) => {
+            this.$store.commit(
+              'categories/REMOVE',
+              this.indexCategoryForDelete
+            );
+            this.$store.commit('snackbar/setSnackbar', {
+              show: true,
+              message: this.$t('call_action_buttons.deleted'),
+              color: 'success',
+              top: true,
+            });
+          })
+          .catch((error) => {
+            if (error.response.status === 409) {
+              this.$store.commit('snackbar/setSnackbar', {
+                show: true,
+                message: this.$t('category.forbiden_delete'),
+                color: 'error',
+                top: true,
+              });
+            }
+            console.log('TCL: deleteCategory -> error', error);
+          });
+      } else {
+        this.$store.commit('snackbar/setSnackbar', {
+          show: true,
+          message: this.$t('messages.intenet_required'),
+          color: 'error',
+          top: true,
+        });
+      }
+      this.showDialogDeleteCategory = false;
+    },
+    uppercase() {
+      this.name = this.name.toUpperCase();
+    },
+    requestCategories() {
+      this.$store
+        .dispatch('categories/getAll')
+        .then((response) => {
+          this.$store.commit('categories/SET', response.data.data);
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    handleOpenCreateForm() {
+      this.showCreateFormDialog = true;
+      setTimeout(() => {
+        this.$refs.categoryNameRef.focus();
+      }, 500);
+    },
+  },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/miscellany/measurement_units.vue b/src/views/miscellany/measurement_units.vue
index 0e267aa..6f6fcc8 100644
--- a/src/views/miscellany/measurement_units.vue
+++ b/src/views/miscellany/measurement_units.vue
@@ -1,59 +1,86 @@
 <template>
-	<div>
-		<v-row>
-			<v-col cols="12">
-				<form @submit.prevent="createMeasurementUnit">
-					<v-text-field
-						:name=" $t('measurement_unit.name') "
-						:label=" $t('measurement_unit.name') "
-						id="name"
-						v-model="name"
-						@keyup="uppercase"
-						:placeholder=" $t('measurement_unit.measurement_placeholder') "
-						autocomplete="off"
-					></v-text-field>
-					<v-btn type="submit" color="primary" :disabled="name.length == 0">
-						<v-icon class="mr-2">fa-save</v-icon>
-						{{ $t('call_action_buttons.save') }}
-					</v-btn>
-				</form>
-				<v-row>
-					<v-col cols="12">
-						<h4>{{ $t('measurement_unit.registered_measurement') }}</h4>
-					</v-col>
-					<v-col cols="12">
-						<v-data-table
-							mobile-breakpoint="xs"
-							:headers="headers"
-							:items="$store.getters['measurementUnits/getAll']"
-						>
-							<template v-slot:no-data>
-								<v-alert
-									:value="true"
-									color="error"
-									icon="fa-warning"
-								>{{ $t('message.nothing_to_display') }}</v-alert>
-							</template>
-							<template v-slot:item.action="{item}">
-								<td>
-									<v-btn text color="error" class="ml-0 pl-0" @click="dispatchDeleteMesasurementUnit(item)">
-										<v-icon class="mr-2" small>fa-trash</v-icon>
-										{{ $t('call_action_buttons.delete') }}
-									</v-btn>
-								</td>
-							</template>
-						</v-data-table>
-					</v-col>
-				</v-row>
-			</v-col>
-		</v-row>
-		<delete-dialog
-			:show="showDialogDeleteMeasurementUnit"
-			@cancel="showDialogDeleteMeasurementUnit = false"
-			@confirm="deleteMeasurementUnit()"
-		/>
-		<loading :active.sync="isLoading" :can-cancel="false" :is-full-page="true" />
-	</div>
+  <div>
+    <v-row>
+      <v-col cols="12">
+        <p>{{ $t('messages.measurement_units_description') }}</p>
+      </v-col>
+      <v-col cols="12">
+        <v-btn @click="handleOpenCreateForm()" color="primary">
+          <v-icon class="mr-2">fa-plus</v-icon>
+          {{ $t('call_action_buttons.addMeasurementUnit') }}
+        </v-btn>
+      </v-col>
+      <v-col cols="12">
+        <v-divider></v-divider>
+      </v-col>
+      <v-col
+        cols="12"
+        v-if="$store.getters['measurementUnits/getAll'].length === 0"
+      >
+        <v-alert type="info">
+          {{ $t('messages.nothing_to_display') }}
+        </v-alert>
+      </v-col>
+      <v-col
+        cols="12"
+        v-for="item in $store.getters['measurementUnits/getAll']"
+        :key="item.id"
+      >
+        {{ item.name }}
+        <v-btn
+          class="float-right"
+          text
+          color="error"
+          @click="dispatchDeleteMesasurementUnit(item)"
+        >
+          <v-icon class="mr-2" small>fa-trash</v-icon>
+          {{ $t('call_action_buttons.delete') }}
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <v-dialog v-model="showCreateFormDialog" width="500">
+      <v-card>
+        <v-card-title class="text-h5 grey lighten-2">
+          {{ $t('call_action_buttons.addMeasurementUnit') }}
+        </v-card-title>
+
+        <v-card-text>
+          <form @submit.prevent="createMeasurementUnit">
+            <v-text-field
+              ref="measurementUnitNameRef"
+              :name="$t('measurement_unit.name')"
+              :label="$t('measurement_unit.name')"
+              id="name"
+              v-model="name"
+              @keyup="uppercase"
+              :placeholder="$t('measurement_unit.measurement_placeholder')"
+              autocomplete="off"
+            />
+            <div class="text-center">
+              <v-btn type="submit" color="primary" :disabled="name.length == 0">
+                <v-icon class="mr-2">fa-save</v-icon>
+                {{ $t('call_action_buttons.save') }}
+              </v-btn>
+            </div>
+          </form>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+    <delete-dialog
+      :show="showDialogDeleteMeasurementUnit"
+      :header-message="$t('call_action_buttons.delete_measurement_unit')"
+      :body-message="$t('messages.delete_measurement_unit')"
+      :cancel-message="$t('call_action_buttons.no_go_back')"
+      @cancel="showDialogDeleteMeasurementUnit = false"
+      @confirm="deleteMeasurementUnit()"
+    />
+    <loading
+      :active.sync="isLoading"
+      :can-cancel="false"
+      :is-full-page="true"
+    />
+  </div>
 </template>
 
 <script>
@@ -62,130 +89,138 @@ import deleteDialog from '@/components/Interface/Dialogs/Delete';
 import Loading from 'vue-loading-overlay';
 
 export default {
-	name: 'MeasurementUnits',
-	mounted() {
-		if (this.online) {
-			this.requestMeasurementUnits();
-		}
-	},
-	data: function() {
-		return {
-			name: '',
-			headers: [
-				{ text: '#', value: 'index' },
-				{ text: this.$t('measurement_unit.name'), value: 'name' },
-				{ text: this.$t('call_action_buttons.action'), value: 'action' }
-			],
-			indexMeasurementUnitForDelete: '',
-			showDialogDeleteMeasurementUnit: false,
-			isLoading: false
-		};
-	},
-	components: {
-		deleteDialog,
-		Loading
-	},
-	computed: {
-		...mapState(['online'])
-	},
-	methods: {
-		...mapMutations([
-			'addMeasurementUnit',
-			'setMeasurementUnit',
-			'removeMeasurementUnit'
-		]),
+  name: 'MeasurementUnits',
+  mounted() {
+    if (this.online) {
+      this.requestMeasurementUnits();
+    }
+  },
+  data: function () {
+    return {
+      name: '',
+      headers: [
+        { text: '#', value: 'index' },
+        { text: this.$t('measurement_unit.name'), value: 'name' },
+        { text: this.$t('call_action_buttons.action'), value: 'action' },
+      ],
+      indexMeasurementUnitForDelete: '',
+      showDialogDeleteMeasurementUnit: false,
+      isLoading: false,
+      showCreateFormDialog: false,
+    };
+  },
+  components: {
+    deleteDialog,
+    Loading,
+  },
+  computed: {
+    ...mapState(['online']),
+  },
+  methods: {
+    ...mapMutations([
+      'addMeasurementUnit',
+      'setMeasurementUnit',
+      'removeMeasurementUnit',
+    ]),
 
-		createMeasurementUnit() {
-			if (this.online) {
-				this.isLoading = true;
-				this.$store
-					.dispatch('measurementUnits/create', { name: this.name })
-					.then(response => {
-						this.$store.commit('measurementUnits/ADD', response.data.data);
-						this.name = '';
-						this.$store.commit('snackbar/setSnackbar', {
-							show: true,
-							message: this.$t('messages.saved'),
-							color: 'success',
-							top: true
-						});
-					})
-					.catch(function(error) {
-						console.log('TCL: addMeasurementUnit -> error', error);
-					})
-					.finally(() => {
-						this.isLoading = false;
-					});
-			} else {
-				this.$store.commit('snackbar/setSnackbar', {
-					show: true,
-					message: this.$t('messages.intenet_required'),
-					color: 'error',
-					top: true
-				});
-			}
-		},
-		dispatchDeleteMesasurementUnit(item) {
-			this.showDialogDeleteMeasurementUnit = true;
-			const index = this.$store.getters['measurementUnits/getAll'].findIndex(
-				unit => unit.id_unit_measurement === item.id_unit_measurement
-			);
-			this.indexMeasurementUnitForDelete = index;
-		},
-		deleteMeasurementUnit() {
-			if (this.online) {
-				this.$store
-					.dispatch('measurementUnits/delete', {
-						id: this.$store.getters['measurementUnits/getAll'][
-							this.indexMeasurementUnitForDelete
-						].id_unit_measurement
-					})
-					.then(response => {
-						this.$store.commit(
-							'measurementUnits/REMOVE',
-							this.indexMeasurementUnitForDelete
-						);
-						this.$store.commit('snackbar/setSnackbar', {
-							show: true,
-							message: this.$t('call_action_buttons.deleted'),
-							color: 'success',
-							top: true
-						});
-					})
-					.catch(error => {
-						if (error.response.status === 409) {
-							this.$store.commit('snackbar/setSnackbar', {
-								show: true,
-								message: this.$t('measurement_unit.forbiden_delete'),
-								color: 'error',
-								top: true
-							});
-						}
-						console.log('TCL: deleteMeasurementUnit -> error', error);
-					});
-			} else {
-				this.$store.commit('snackbar/setSnackbar', {
-					show: true,
-					message: this.$t('messages.intenet_required'),
-					color: 'error',
-					top: true
-				});
-			}
-			this.showDialogDeleteMeasurementUnit = false;
-		},
-		uppercase() {
-			this.name = this.name.toUpperCase();
-		},
-		requestMeasurementUnits() {
-			this.$store
-				.dispatch('measurementUnits/getAll')
-				.then(response => {
-					this.$store.commit('measurementUnits/SET', response.data.data);
-				})
-				.catch(error => {
-					console.log(error);
-				});
-		}
-	}
+    createMeasurementUnit() {
+      if (this.online) {
+        this.isLoading = true;
+        this.$store
+          .dispatch('measurementUnits/create', { name: this.name })
+          .then((response) => {
+            this.$store.commit('measurementUnits/ADD', response.data.data);
+            this.name = '';
+            this.$store.commit('snackbar/setSnackbar', {
+              show: true,
+              message: this.$t('messages.saved'),
+              color: 'success',
+              top: true,
+            });
+            this.showCreateFormDialog = false;
+          })
+          .catch(function (error) {
+            console.log('TCL: addMeasurementUnit -> error', error);
+          })
+          .finally(() => {
+            this.isLoading = false;
+          });
+      } else {
+        this.$store.commit('snackbar/setSnackbar', {
+          show: true,
+          message: this.$t('messages.intenet_required'),
+          color: 'error',
+          top: true,
+        });
+      }
+    },
+    dispatchDeleteMesasurementUnit(item) {
+      this.showDialogDeleteMeasurementUnit = true;
+      const index = this.$store.getters['measurementUnits/getAll'].findIndex(
+        (unit) => unit.id_unit_measurement === item.id_unit_measurement
+      );
+      this.indexMeasurementUnitForDelete = index;
+    },
+    deleteMeasurementUnit() {
+      if (this.online) {
+        this.$store
+          .dispatch('measurementUnits/delete', {
+            id: this.$store.getters['measurementUnits/getAll'][
+              this.indexMeasurementUnitForDelete
+            ].id_unit_measurement,
+          })
+          .then((response) => {
+            this.$store.commit(
+              'measurementUnits/REMOVE',
+              this.indexMeasurementUnitForDelete
+            );
+            this.$store.commit('snackbar/setSnackbar', {
+              show: true,
+              message: this.$t('call_action_buttons.deleted'),
+              color: 'success',
+              top: true,
+            });
+          })
+          .catch((error) => {
+            if (error.response.status === 409) {
+              this.$store.commit('snackbar/setSnackbar', {
+                show: true,
+                message: this.$t('measurement_unit.forbiden_delete'),
+                color: 'error',
+                top: true,
+              });
+            }
+            console.log('TCL: deleteMeasurementUnit -> error', error);
+          });
+      } else {
+        this.$store.commit('snackbar/setSnackbar', {
+          show: true,
+          message: this.$t('messages.intenet_required'),
+          color: 'error',
+          top: true,
+        });
+      }
+      this.showDialogDeleteMeasurementUnit = false;
+    },
+    uppercase() {
+      this.name = this.name.toUpperCase();
+    },
+    requestMeasurementUnits() {
+      this.$store
+        .dispatch('measurementUnits/getAll')
+        .then((response) => {
+          this.$store.commit('measurementUnits/SET', response.data.data);
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    handleOpenCreateForm() {
+      this.showCreateFormDialog = true;
+      setTimeout(() => {
+        this.$refs.measurementUnitNameRef.focus();
+      }, 500);
+    },
+  },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/products/add.vue b/src/views/products/add.vue
index 16fea03..78ecd16 100644
--- a/src/views/products/add.vue
+++ b/src/views/products/add.vue
@@ -154,6 +154,7 @@ export default {
 							color: 'success',
 							top: true
 						});
+						this.$router.push('/product/list')
 					})
 					.catch(error => {
 						if (error.response.status === 409) {
diff --git a/src/views/products/list.vue b/src/views/products/list.vue
index 0be3fdf..6b6569b 100644
--- a/src/views/products/list.vue
+++ b/src/views/products/list.vue
@@ -3,13 +3,15 @@
     <v-row>
       <v-col cols="10">
         <v-text-field
+          ref="searchInputRef"
           prepend-inner-icon="fa-search"
           v-model="searchProductName"
           :label="$t('products.search') + '...'"
           clearable
+          @click:clear="$refs.searchInputRef.blur()"
         ></v-text-field>
       </v-col>
-      <v-col cols="2">
+      <v-col class="text-right" cols="2">
         <v-badge
           color="red"
           dot
diff --git a/src/views/shop/registrationShopping.vue b/src/views/shop/registrationShopping.vue
index c9cd11a..667e7a6 100644
--- a/src/views/shop/registrationShopping.vue
+++ b/src/views/shop/registrationShopping.vue
@@ -3,13 +3,15 @@
     <v-row v-if="products.length > 0">
       <v-col cols="10">
         <v-text-field
+          ref="searchInputRef"
           prepend-inner-icon="fa-search"
           v-model="searchProductName"
           :label="$t('products.search')"
           clearable
+          @click:clear="$refs.searchInputRef.blur()"
         ></v-text-field>
       </v-col>
-      <v-col cols="2">
+      <v-col class="text-right" cols="2">
         <v-badge color="red" dot left :value="hasFilters()" style="margin-top: 18px">
           <v-btn
             @click="handleShowFilters"