diff --git a/package.json b/package.json
index d104bb9..56f72c7 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tomodo",
   "private": true,
-  "version": "0.9.0",
+  "version": "0.9.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/public/robots.txt b/public/robots.txt
index 942a953..f65e2c2 100644
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -1,3 +1,3 @@
 User-Agent:*
-
-disallow: /collection/*
\ No newline at end of file
+Allow: /
+Disallow: /collection/*
\ No newline at end of file
diff --git a/src/components/ExampleJson.vue b/src/components/ExampleJson.vue
index 509b3c0..f4d7c90 100644
--- a/src/components/ExampleJson.vue
+++ b/src/components/ExampleJson.vue
@@ -1,5 +1,6 @@
 <script setup>
-defineProps({
+/** @type {import('@/types').ExampleJsonProp} */
+const { json } = defineProps({
   json: Object,
 });
 </script>
diff --git a/src/components/FormCollection.vue b/src/components/FormCollection.vue
index 03c19e6..c38570f 100644
--- a/src/components/FormCollection.vue
+++ b/src/components/FormCollection.vue
@@ -1,14 +1,8 @@
 <script setup>
-import { Form, Field, ErrorMessage } from "vee-validate";
-import * as yup from "yup";
-import { toRaw } from "vue";
-import { useRouter } from "vue-router";
-import useFormCollection from "@/composables/useFormCollection";
+import { Field, ErrorMessage } from "vee-validate";
 
-const router = useRouter();
-const { addNewCollection, editCurrentCollection } = useFormCollection();
-
-const props = defineProps({
+/** @type {import('@/types').FormCollectionProp} */
+const { form, isEdit } = defineProps({
   form: Object,
   isEdit: Boolean,
 });
diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
index 798e70e..241e7cf 100644
--- a/src/components/ProgressBar.vue
+++ b/src/components/ProgressBar.vue
@@ -1,11 +1,13 @@
 <script setup>
 import { computed } from "vue";
 
-const props = defineProps({
+/** @type { import('@/types').ProgressBarProp }  */
+const { totalDoneTodos, totalTodos } = defineProps({
   totalDoneTodos: Number,
   totalTodos: Number,
 });
 
+/**  @returns {import('vue').ComputedRef<number>} */
 const percentage = computed(() => {
   const countTodos = Math.round(
     (props.totalDoneTodos / props.totalTodos) * 100
diff --git a/src/components/TodoItem.vue b/src/components/TodoItem.vue
index 37e4c03..5bf3395 100644
--- a/src/components/TodoItem.vue
+++ b/src/components/TodoItem.vue
@@ -1,5 +1,10 @@
 <script setup>
-defineProps({
+/**
+ * @typedef {import('@/types').TodoItemProp} TodoItemProp
+ */
+
+/** @type {TodoItemProp} */
+const { todo, isSelected } = defineProps({
   todo: Object,
   isSelected: Boolean,
 });
diff --git a/src/composables/useCollection.js b/src/composables/useCollection.js
index b9fa803..b2feb16 100644
--- a/src/composables/useCollection.js
+++ b/src/composables/useCollection.js
@@ -1,7 +1,12 @@
 import { ref, toRaw, computed } from "vue";
 import dbCollection from "@/repositories/db-collection";
+/**
+ * @typedef {import('@/types').Collection} Collection
+ * @typedef {import('vue').Ref<Collection>} CollectionRef
+ * @typedef {import('vue').Ref<Collection[]>} CollectionsRef
+ */
 
-const collections = ref([]);
+/** @type {CollectionRef} */
 const collection = ref({
   id: "",
   name: "",
@@ -9,11 +14,16 @@ const collection = ref({
   created_at: "",
   todos: [],
 });
+
+/** @type {CollectionsRef} */
+const collections = ref([]);
+
 const useCollection = () => {
   const descriptionCollection = computed(() => {
     return collection.value?.description.replace(/(?:\r\n|\r|\n)/g, "<br>");
   });
 
+  /** @param {Collection} collection */
   const addCollection = (collection) => {
     collections.value.push(collection);
 
@@ -22,24 +32,16 @@ const useCollection = () => {
   const getCollections = async () => {
     collections.value = await dbCollection.index();
   };
+
   /**
-   * Detail Collection
-   * @returns {{
-   * id: String,
-   * name: String,
-   * description: String,
-   * created_at: Date,
-   * todos: {
-   * name: String,
-   * priority: String,
-   * isDone: Boolean,
-   * created_at: Date,
-   * }[]
-   * }} collection
+   * @param {string} id
+   * @returns {Collection}
    */
   const getDetailCollection = (id) => {
     return collections.value.find((collection) => collection.id == id);
   };
+
+  /** @param {string} id */
   const deleteColllection = (id) => {
     const index = collections.value.findIndex(
       (collection) => collection.id === id
@@ -48,6 +50,11 @@ const useCollection = () => {
     collections.value.splice(index, 1);
     dbCollection.delete(id);
   };
+
+  /**
+   * @param {Collection} collection
+   * @returns {Collection}
+   */
   const updateCollection = (collection) => {
     const index = collections.value.findIndex(
       (coll) => coll.id === collection.id
diff --git a/src/composables/useFormCollection.js b/src/composables/useFormCollection.js
index e768ef2..8f5e4c7 100644
--- a/src/composables/useFormCollection.js
+++ b/src/composables/useFormCollection.js
@@ -1,9 +1,12 @@
 import { ref } from "vue";
 import { customAlphabet } from "nanoid";
 import useCollection from "@/composables/useCollection";
-import dbCollection from "@/repositories/db-collection";
 
 const { addCollection, updateCollection } = useCollection();
+/**
+ * @typedef {import('@/types').FormCollection} FormCollection
+ * @typedef {import('vue').Ref<FormCollection>} FormCollectionRef
+ */
 
 const collection = ref({
   name: "",
@@ -11,6 +14,7 @@ const collection = ref({
   todos: [],
 });
 
+/** @type {FormCollectionRef} */
 const form = ref({
   name: collection.value.name,
   description: collection.value.description,
@@ -33,6 +37,8 @@ const useFormCollection = () => {
   }
   function addNewCollection() {
     const nanoid = customAlphabet("1234567890abcdef", 10);
+
+    /** @type {FormCollection} */
     const collection = {
       id: nanoid(),
       name: form.value.name,
diff --git a/src/composables/useFormTodo.js b/src/composables/useFormTodo.js
index 2bc5c42..d6b92cf 100644
--- a/src/composables/useFormTodo.js
+++ b/src/composables/useFormTodo.js
@@ -1,7 +1,14 @@
 import { nanoid } from "nanoid";
 import { ref } from "vue";
 
+/**
+ *  @typedef {import('@/types').Todo} Todo
+ *  @typedef {import('vue').Ref<Todo>} FormTodo
+ */
+
 const isEditing = ref(false);
+
+/** @type {FormTodo} */
 const formTodo = ref({
   id: `todo-${nanoid(7)}`,
   name: "",
diff --git a/src/composables/useTodo.js b/src/composables/useTodo.js
index f6fde86..3589990 100644
--- a/src/composables/useTodo.js
+++ b/src/composables/useTodo.js
@@ -2,6 +2,8 @@ import dbCollection from "@/repositories/db-collection";
 import { toRaw, computed } from "vue";
 import useCollection from "@/composables/useCollection";
 
+/** @typedef {import('@/types')} Todo */
+
 const { collection, getDetailCollection } = useCollection();
 
 const useTodo = () => {
@@ -9,16 +11,8 @@ const useTodo = () => {
   const doneTodos = computed(() =>
     collection.value.todos?.filter((todo) => todo.isDone === true)
   );
-  /**
-   * Add new todo to collection
-   * @param {{
-   * id: string,
-   * name: string,
-   * priority: string,
-   * isDone: boolean,
-   * created_at: Date,
-   * }} todo
-   */
+
+  /** @param {Todo} todo */
   const addTodo = (todo) => {
     const { todos } = getDetailCollection(collection.value.id);
 
@@ -30,10 +24,7 @@ const useTodo = () => {
     dbCollection.update(rawCollection);
   };
 
-  /**
-   * mark todo as done or not
-   * @param {number} index
-   */
+  /** @param {number} index */
   const markTodo = (index) => {
     const todo = collection.value.todos.at(index);
 
@@ -45,16 +36,7 @@ const useTodo = () => {
     dbCollection.update(rawCollection);
   };
 
-  /**
-   * Edit todo in collection
-   * @param {{
-   * id: string,
-   * name: string,
-   * priority: string,
-   * isDone: boolean,
-   * created_at: Date,
-   * }} newTodo
-   */
+  /** @param {Todo} newTodo */
   const editTodo = (newTodo) => {
     const { todos } = getDetailCollection(collection.value.id);
     const index = collection.value.todos.findIndex(
@@ -68,11 +50,8 @@ const useTodo = () => {
 
     dbCollection.update(rawCollection);
   };
-  /**
-   *
-   * @param {number} index
-   * @description still wip
-   */
+
+  /** @param {number} index */
   const deleteTodo = (index) => {
     const { todos } = getDetailCollection(collection.value.id);
 
diff --git a/src/pages/collection/create.vue b/src/pages/collection/create.vue
index 62fea2d..58b0d49 100644
--- a/src/pages/collection/create.vue
+++ b/src/pages/collection/create.vue
@@ -12,6 +12,7 @@ const schema = yup.object({
   description: yup.string(),
 });
 
+/** @param {import('@/types').Collection} values */
 const onSubmit = (values) => {
   form.value = values;
   form.value.todos = [];
diff --git a/src/pages/collection/edit.vue b/src/pages/collection/edit.vue
index cdf7dbe..7ff8d50 100644
--- a/src/pages/collection/edit.vue
+++ b/src/pages/collection/edit.vue
@@ -15,6 +15,7 @@ const schema = yup.object({
 });
 const isEdit = route.fullPath.includes("edit");
 
+/** @param {import('@/types').Collection} values */
 const onSubmit = (values) => {
   form.value = {
     ...values,
diff --git a/src/pages/collection/id.vue b/src/pages/collection/id.vue
index b578358..3f1c5b5 100644
--- a/src/pages/collection/id.vue
+++ b/src/pages/collection/id.vue
@@ -23,6 +23,11 @@ const vFormTodo = useForm({
   },
 });
 
+/**
+ * @typedef {import('@/types').Todo} Todo
+ */
+
+/** @type {import('vue').Ref<Todo>} */
 const selectedTodo = ref({});
 const resetVForm = async () => {
   vFormTodo.setValues({
@@ -33,16 +38,21 @@ const resetVForm = async () => {
     created_at: new Date(),
   });
 };
+
+/** @param {Todo} values */
 const submitUpdateTodo = (values) => {
   editTodo(values);
   resetFormTodo();
   selectedTodo.value = {};
 };
+
+/** @param {import('@/types').Todo} values */
 const submitAddTodo = (values) => {
   addTodo(values);
   resetFormTodo();
   selectedTodo.value = {};
 };
+
 const submitTodo = async () => {
   const todo = {
     ...toRaw(vFormTodo.values),
@@ -63,6 +73,8 @@ const submitTodo = async () => {
 
   return;
 };
+
+/** @param {number} index */
 const selectTodo = (index) => {
   isEditing.value = true;
 
@@ -79,6 +91,7 @@ const selectTodo = (index) => {
   formTodo.value = todo;
 };
 
+/** @param {number} index */
 const handleMarkTodo = (index) => {
   if (isEditing.value) {
     resetFormTodo();
@@ -89,6 +102,7 @@ const handleMarkTodo = (index) => {
   vFormTodo.setErrors({});
 };
 
+/** @param {string} id */
 const handleDeleteCollection = (id) => {
   const question = confirm("Are you sure delete this collection?");
   if (question) {
diff --git a/src/pages/import.vue b/src/pages/import.vue
index d4cbfc8..0b3704d 100644
--- a/src/pages/import.vue
+++ b/src/pages/import.vue
@@ -11,12 +11,17 @@ const router = useRouter();
 const { addCollection, getDetailCollection, deleteColllection } =
   useCollection();
 
-const isAttached = ref(false);
+/** @type {import('@/composables/useCollection').CollectionRef} */
 const collection = ref(null);
+const isAttached = ref(false);
 const isCollectionExist = ref(false);
 
+/**
+ * @param {DragEvent} event
+ */
 function handleDrop(event) {
   event.preventDefault();
+
   const droppedFiles = event.dataTransfer?.files;
 
   if (droppedFiles[0].type.includes("json")) {
diff --git a/src/repositories/db-collection.js b/src/repositories/db-collection.js
index 30b8b81..d285fe3 100644
--- a/src/repositories/db-collection.js
+++ b/src/repositories/db-collection.js
@@ -1,5 +1,7 @@
 import { openDB } from "idb";
-
+/**
+ * @typedef {import('@/types').Collection} Collection
+ */
 const dbPromise = openDB("collection-db", 1, {
   upgrade(database) {
     database.createObjectStore("collections", {
@@ -12,15 +14,34 @@ const dbCollections = {
   async index() {
     return (await dbPromise).getAll("collections");
   },
+  /**
+   * @param {Collection} collection
+   * @returns {Promise<Collection>}
+   */
   async add(collection) {
     return (await dbPromise).add("collections", collection);
   },
+
+  /**
+   * @param {Collection} collection
+   * @returns {Promise<Collection>}
+   */
   async update(collection) {
     return (await dbPromise).put("collections", collection);
   },
+
+  /**
+   * @param {string} id
+   * @returns {Promise<Collection>}
+   */
   async delete(id) {
     return (await dbPromise).delete("collections", id);
   },
+
+  /**
+   * @param {string} id
+   * @returns {Promise<Collection>}
+   */
   async show(id) {
     return (await dbPromise).get("collections", id);
   },
diff --git a/src/types.d.ts b/src/types.d.ts
new file mode 100644
index 0000000..9bd3610
--- /dev/null
+++ b/src/types.d.ts
@@ -0,0 +1,37 @@
+export interface Collection {
+  id: string;
+  name: string;
+  description: string;
+  created_at: Date;
+  todos: Todo[];
+}
+
+export interface FormCollection extends Omit<"created_at"> {}
+
+export interface Todo {
+  id: string;
+  name: string;
+  priority: string;
+  isDone: boolean;
+  created_at: Date;
+}
+
+// Component Props
+export interface TodoItemProp {
+  todo: Todo;
+  isSelected: boolean;
+}
+
+export interface ProgressBarProp {
+  totalDoneTodos: number;
+  totalTodos: number;
+}
+
+export interface FormCollectionProp {
+  form: FormCollection;
+  isEdit: boolean;
+}
+
+export interface ExampleJsonProp {
+  json: Collection;
+}
diff --git a/src/utils/export-collection.js b/src/utils/export-collection.js
index 2bc879e..d757e48 100644
--- a/src/utils/export-collection.js
+++ b/src/utils/export-collection.js
@@ -1,3 +1,8 @@
+/**
+ *
+ * @param {import('@/types').Collection} collection
+ * @returns
+ */
 const exportCollection = (collection) => {
   const json = JSON.stringify(collection);
   const blob = new Blob([json], { type: "application/json" });
diff --git a/src/utils/json-parser.js b/src/utils/json-parser.js
index 23b1051..c1a11cf 100644
--- a/src/utils/json-parser.js
+++ b/src/utils/json-parser.js
@@ -1,3 +1,7 @@
+/**
+ * @param {File} file
+ * @returns {Promise<import('@/types').Collection>}
+ */
 function jsonParser(file) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
diff --git a/src/utils/validate-collection.js b/src/utils/validate-collection.js
index 5de5b3c..eef11d2 100644
--- a/src/utils/validate-collection.js
+++ b/src/utils/validate-collection.js
@@ -1,3 +1,7 @@
+/**
+ * @param {import('@/types').Collection} collection
+ * @returns {boolean}
+ */
 const validateCollection = (collection) => {
   if (
     collection.hasOwnProperty("id") &&