diff --git a/frontend/components/form/FormSearch.vue b/frontend/components/form/FormSearch.vue
index 50cfb74a5..0843f447d 100644
--- a/frontend/components/form/FormSearch.vue
+++ b/frontend/components/form/FormSearch.vue
@@ -15,8 +15,9 @@
 </template>
 
 <script setup lang="ts">
+import { v4 as uuidv4 } from 'uuid';
+
 import useFormInput from "../../composables/useFormSetup";
-import useUniqueID from "../../composables/useUniqueID";
 
 export interface Props {
   placeholder?: string;
@@ -29,6 +30,5 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["update:modelValue"]);
 const { updateValue } = useFormInput(props, emit, true);
-
-const uuid = useUniqueID().getID().toString();
+const uuid = uuidv4();
 </script>
diff --git a/frontend/components/form/FormTextField.vue b/frontend/components/form/FormTextField.vue
index 9ea0c5460..c51671048 100644
--- a/frontend/components/form/FormTextField.vue
+++ b/frontend/components/form/FormTextField.vue
@@ -17,8 +17,9 @@
 </template>
 
 <script setup lang="ts">
+import { v4 as uuidv4 } from 'uuid';
+
 import useFormInput from "../../composables/useFormSetup";
-import useUniqueID from "../../composables/useUniqueID";
 
 export interface Props {
   placeholder?: string;
@@ -35,13 +36,9 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits(["update:modelValue"]);
-
 const { updateValue } = useFormInput({ value: props?.modelValue }, emit, false);
-
-const uuid = useUniqueID().getID();
-
+const uuid = uuidv4();
 const refInputType = ref(props?.inputType);
-
 const changeInputType = () => {
   refInputType.value = refInputType.value === "password" ? "text" : "password";
 };
diff --git a/frontend/components/form/checkbox/FormCheckbox.vue b/frontend/components/form/checkbox/FormCheckbox.vue
index 71110217f..91b9e8dc3 100644
--- a/frontend/components/form/checkbox/FormCheckbox.vue
+++ b/frontend/components/form/checkbox/FormCheckbox.vue
@@ -21,8 +21,9 @@
 </template>
 
 <script setup lang="ts">
+import { v4 as uuidv4 } from 'uuid';
+
 import useFormInput from "../../../composables/useFormSetup";
-import useUniqueID from "../../../composables/useUniqueID";
 
 export interface Props {
   label?: string;
@@ -38,6 +39,5 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["update:modelValue"]);
 const { updateValue } = useFormInput(props, emit);
-
-const uuid = useUniqueID().getID().toString();
+const uuid = uuidv4();
 </script>
diff --git a/frontend/components/form/checkbox/FormCheckboxBtn.vue b/frontend/components/form/checkbox/FormCheckboxBtn.vue
index 7686a7fbb..49547b5a3 100644
--- a/frontend/components/form/checkbox/FormCheckboxBtn.vue
+++ b/frontend/components/form/checkbox/FormCheckboxBtn.vue
@@ -27,8 +27,9 @@
 </template>
 
 <script setup lang="ts">
+import { v4 as uuidv4 } from 'uuid';
+
 import useFormInput from "../../../composables/useFormSetup";
-import useUniqueID from "../../../composables/useUniqueID";
 
 export interface Props {
   label?: string;
@@ -45,7 +46,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["update:modelValue"]);
 const { updateValue } = useFormInput(props, emit);
-const uuid = useUniqueID().getID().toString();
+const uuid = uuidv4();
 const customColorClass =
   props.customColor !== ""
     ? `bg-light-${props.customColor}/60 dark:bg-dark-${props.customColor}/10 dark:text-dark-${props.customColor}`
diff --git a/frontend/components/form/radio/FormRadio.vue b/frontend/components/form/radio/FormRadio.vue
index 7aa5990de..f56b674b1 100644
--- a/frontend/components/form/radio/FormRadio.vue
+++ b/frontend/components/form/radio/FormRadio.vue
@@ -15,8 +15,9 @@
 </template>
 
 <script setup lang="ts">
+import { v4 as uuidv4 } from 'uuid';
+
 import useFormInput from "../../../composables/useFormSetup";
-import useUniqueID from "../../../composables/useUniqueID";
 
 export interface Props {
   label?: string;
@@ -31,5 +32,5 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["update:modelValue"]);
 const { updateValue } = useFormInput(props, emit);
-const uuid = useUniqueID().getID().toString();
+const uuid = uuidv4();
 </script>
diff --git a/frontend/components/form/radio/FormRadioBtn.vue b/frontend/components/form/radio/FormRadioBtn.vue
index 72051eac9..dfe0c3d9e 100644
--- a/frontend/components/form/radio/FormRadioBtn.vue
+++ b/frontend/components/form/radio/FormRadioBtn.vue
@@ -27,8 +27,9 @@
 </template>
 
 <script setup lang="ts">
+import { v4 as uuidv4 } from 'uuid';
+
 import useFormInput from "../../../composables/useFormSetup";
-import useUniqueID from "../../../composables/useUniqueID";
 
 export interface Props {
   label?: string;
@@ -46,7 +47,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["update:modelValue"]);
 const { updateValue } = useFormInput(props, emit);
-const uuid = useUniqueID().getID().toString();
+const uuid = uuidv4();
 const customColorClass =
   props.customColor !== ""
     ? `bg-light-${props.customColor}/60 dark:bg-dark-${props.customColor}/10 dark:text-dark-${props.customColor}`
diff --git a/frontend/composables/useUniqueID.ts b/frontend/composables/useUniqueID.ts
deleted file mode 100644
index 506206e55..000000000
--- a/frontend/composables/useUniqueID.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-let UUID = 0;
-
-export default function useUniqueID() {
-  const getID = () => {
-    UUID++;
-    return String(UUID);
-  };
-
-  return {
-    getID,
-  };
-}
diff --git a/frontend/package.json b/frontend/package.json
index 123203cfd..44e11c288 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,11 +18,13 @@
     "@nuxtjs/tailwindcss": "^6.2.0",
     "@pinia/nuxt": "^0.4.6",
     "@types/node": "^18.11.18",
+    "@types/uuid": "^9.0.5",
     "@vueuse/core": "^9.12.0",
     "@vueuse/nuxt": "^9.12.0",
     "nuxt": "npm:nuxt3@latest",
     "nuxt-icon": "^0.2.6",
     "typescript": "^5.1.3",
+    "uuid": "^9.0.1",
     "vue-tsc": "^1.8.8"
   },
   "dependencies": {
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index c3e89840e..8d5457b71 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1541,6 +1541,11 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.0.tgz#988ae8af1e5239e89f9fbb1ade4c935f4eeedf9a"
   integrity sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==
 
+"@types/uuid@^9.0.5":
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.5.tgz#25a71eb73eba95ac0e559ff3dd018fc08294acf6"
+  integrity sha512-xfHdwa1FMJ082prjSJpoEI57GZITiQz10r3vEJCHa2khEFQjKy91aWKz6+zybzssCvXUwE1LQWgWVwZ4nYUvHQ==
+
 "@types/web-bluetooth@^0.0.16":
   version "0.0.16"
   resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8"
@@ -8261,6 +8266,11 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+uuid@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
+
 uvu@^0.5.0:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/uvu/-/uvu-0.5.6.tgz#2754ca20bcb0bb59b64e9985e84d2e81058502df"