diff --git a/database/migrations/2023_09_17_071311_create_english_language_record.php b/database/migrations/2023_09_17_071311_create_english_language_record.php
index aafb7ba..6073e73 100644
--- a/database/migrations/2023_09_17_071311_create_english_language_record.php
+++ b/database/migrations/2023_09_17_071311_create_english_language_record.php
@@ -9,6 +9,7 @@ public function up(): void
     {
         DB::table('languages')
             ->insertOrIgnore([
+                'uuid' => Str::orderedUuid()->toString(),
                 'code' => 'en',
                 'name' => 'English',
             ]);
diff --git a/resources/js/console/components/Input/Input.vue b/resources/js/console/components/Input/Input.vue
index e6df619..099d4c3 100644
--- a/resources/js/console/components/Input/Input.vue
+++ b/resources/js/console/components/Input/Input.vue
@@ -9,7 +9,7 @@
         v-if="type !== 'file'"
         v-bind="$attrs"
         :type="type"
-        class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+        class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200"
         :placeholder="placeholder"
         :value="modelValue"
         @input="onInput"
@@ -18,7 +18,7 @@
         v-else
         v-bind="$attrs"
         :type="type"
-        class="px-4 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+        class="px-4 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200"
         :placeholder="placeholder"
         @change="onInput"
       />
diff --git a/resources/js/console/repositories/language.repository.js b/resources/js/console/repositories/language.repository.js
index c554a6b..0a41bb1 100644
--- a/resources/js/console/repositories/language.repository.js
+++ b/resources/js/console/repositories/language.repository.js
@@ -24,13 +24,23 @@ export const languageRepository = {
   },
 
   /**
-   *
    * @param {{name: string, code: string}} data
    */
   create(data) {
     return httpClient.post(`languages`, data).then(getData).catch(catchError);
   },
 
+  /**
+   * @param {String} id
+   * @param {{name: String}} data
+   */
+  update(id, data) {
+    return httpClient
+      .put(`languages/${id}`, data)
+      .then(getData)
+      .catch(catchError);
+  },
+
   destroy(id) {
     return httpClient.delete(`languages/${id}`).then(getData).catch(catchError);
   },
diff --git a/resources/js/console/screens/LanguagesList/LanguaguesListScreen.vue b/resources/js/console/screens/LanguagesList/LanguaguesListScreen.vue
index cdd317c..50faca7 100644
--- a/resources/js/console/screens/LanguagesList/LanguaguesListScreen.vue
+++ b/resources/js/console/screens/LanguagesList/LanguaguesListScreen.vue
@@ -10,10 +10,16 @@
         <CreateNewLanguage @created="loadRecords" />
       </template>
       <template #record-actions="{ record }">
-        <DeleteLanguageButton
-          :language="record"
-          @deleted="loadRecords"
-        />
+        <div class="flex gap-x-2">
+          <UpdateLanguageButton
+            :language="record"
+            @updated="loadRecords"
+          />
+          <DeleteLanguageButton
+            :language="record"
+            @deleted="loadRecords"
+          />
+        </div>
       </template>
     </Table>
   </Card>
@@ -26,6 +32,7 @@ import { ref } from 'vue';
 import CreateNewLanguage from './components/CreateNewLanguage.vue';
 import DeleteLanguageButton from './components/DeleteLanguageButton.vue';
 import { languageRepository } from '../../repositories/language.repository';
+import UpdateLanguageButton from './components/UpdateLanguageButton.vue';
 
 const columns = [
   {
diff --git a/resources/js/console/screens/LanguagesList/components/CreateNewLanguage.vue b/resources/js/console/screens/LanguagesList/components/CreateNewLanguage.vue
index ef889ca..a29f178 100644
--- a/resources/js/console/screens/LanguagesList/components/CreateNewLanguage.vue
+++ b/resources/js/console/screens/LanguagesList/components/CreateNewLanguage.vue
@@ -1,7 +1,7 @@
 <template>
   <Button @click="onClickCreate">Create New Language</Button>
   <Modal
-    title="Create New Font"
+    title="Create New Language"
     :is-open="isOpenModal"
   >
     <template #default>
diff --git a/resources/js/console/screens/LanguagesList/components/UpdateLanguageButton.vue b/resources/js/console/screens/LanguagesList/components/UpdateLanguageButton.vue
new file mode 100644
index 0000000..426e9af
--- /dev/null
+++ b/resources/js/console/screens/LanguagesList/components/UpdateLanguageButton.vue
@@ -0,0 +1,104 @@
+<template>
+  <Button @click="onClickCreate">Update</Button>
+  <Modal
+    title="Update Language"
+    :is-open="isOpenModal"
+  >
+    <template #default>
+      <div class="flex flex-col mt-4 gap-2">
+        <Input
+          :model-value="language.code"
+          label="Language ISO Code"
+          disabled
+        />
+        <Input
+          v-model="formFields.name"
+          label="Name"
+          :disabled="isLoading"
+        />
+      </div>
+    </template>
+    <template #bottom-buttons>
+      <div class="gap-1 flex">
+        <Button
+          @click="onClickCloseModal"
+          :disabled="isLoading"
+          type="secondary"
+        >
+          Cancel
+        </Button>
+        <Button
+          @click="onClickSubmit"
+          :disabled="isLoading"
+        >
+          Update
+        </Button>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+import Button from '../../../components/Button/Button.vue';
+import Modal from '../../../components/Modal/Modal.vue';
+import { ref } from 'vue';
+import Input from '../../../components/Input/Input.vue';
+import { notify } from '@kyvg/vue3-notification';
+import { useLoading } from '../../../composable/useLoading';
+import { useRouter } from 'vue-router';
+import { languageRepository } from '../../../repositories/language.repository';
+
+const props = defineProps({
+  language: {
+    type: Object,
+    required: true,
+  },
+});
+const emits = defineEmits(['updated']);
+
+const router = useRouter();
+const isOpenModal = ref(false);
+const { isLoading, startLoading, stopLoading } = useLoading();
+
+const getBlankFields = () => ({
+  name: '',
+});
+
+const formFields = ref(getBlankFields());
+
+const onClickCreate = () => {
+  isOpenModal.value = true;
+  formFields.value.name = props.language.name;
+};
+
+const onClickCloseModal = () => {
+  isOpenModal.value = false;
+  formFields.value = getBlankFields();
+};
+
+const onClickSubmit = async () => {
+  startLoading();
+
+  console.log(props.language);
+  const data = await languageRepository.update(props.language.uuid, {
+    ...formFields.value,
+  });
+
+  stopLoading();
+
+  if (!data) {
+    return;
+  }
+
+  notify({
+    type: 'success',
+    title: 'Action OK',
+    text: 'Language has been updated.',
+  });
+
+  onClickCloseModal();
+  emits('updated');
+};
+</script>
+
+<style scoped></style>