diff --git a/src/views/Darta/Create.vue b/src/views/Darta/Create.vue
index 824c85e..47c7042 100644
--- a/src/views/Darta/Create.vue
+++ b/src/views/Darta/Create.vue
@@ -1,121 +1,171 @@
 <template>
-    <Towser :show="show" :title="towser.title" :actions="towser.action" @onClose="onClose" @onSave="onSave">
-        <div class="p-4">
-            <div>
-                <div class="mb-5">
-                    <h2 class="text-base font-semibold mb-3">Document Details</h2>
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <div class="">
-                            <label class="block text-sm font-medium mb-2">
-                                Department
-                                <span class="text-red-500">*</span>
-                            </label>
-                            <Multiselect
-                                v-model="formData.department"
-                                :options="departments"
-                                :multiple="false"
-                                :searchable="true"
-                                :allow-empty="false"
-                                label="name"
-                                track-by="id"
-                                placeholder="Select Department"
-                                :loading="isDepartmentLoading"
-                            />
-                        </div>
-                        <div class="flex flex-col">
-                            <label class="block text-sm font-medium mb-2">
-                                Category
-                                <span class="text-red-500">*</span>
-                            </label>
-                            <Multiselect
-                                v-model="formData.documentCategory"
-                                :options="categories"
-                                :multiple="false"
-                                :searchable="true"
-                                :allow-empty="false"
-                                label="name"
-                                track-by="id"
-                                placeholder="Select Category"
-                                :loading="isCategoryLoading"
-                            />
-                        </div>
-                    </div>
-
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
-                        <div class="flex flex-col">
-                            <label class="block text-sm font-medium mb-2">
-                                Document Number
-                                <span class="text-red-500">*</span>
-                            </label>
-                            <input
-                                v-model="formData.documentNumber"
-                                type="text"
-                                placeholder="Enter document number"
-                                class="form-input"
-                            />
-                        </div>
-                        <div class="flex flex-col">
-                            <label class="block text-sm font-medium mb-2">
-                                Subject
-                                <span class="text-red-500">*</span>
-                            </label>
-                            <input
-                                v-model="formData.subject"
-                                type="text"
-                                placeholder="Enter document subject"
-                                class="form-input"
-                            />
-                        </div>
-                    </div>
-
-                    <div class="mt-6">
-                        <label class="block text-sm font-medium mb-2">
-                            Document Body
+    <Towser
+        :show="dartaTowserStore.show"
+        :title="towser.title"
+        :actions="towser.action"
+        @onClose="onClose"
+        @onSave="onSave"
+    >
+        <div class="flex flex-col gap-[5px]">
+            <!-- Document Details Section -->
+            <div class="mb-[10px]">
+                <!-- <h3 class="text-lg font-semibold">Document Details</h3> -->
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-[5px]">
+                    <div class="flex flex-col">
+                        <label for="document_number">
+                            Document Number
                             <span class="text-red-500">*</span>
                         </label>
-                        <textarea
-                            v-model="formData.body"
-                            placeholder="Enter document body"
-                            class="w-full border p-2"
-                            rows="5"
-                        ></textarea>
+                        <input
+                            id="document_number"
+                            v-model="payload.document_number"
+                            type="text"
+                            placeholder="Enter Document Number"
+                            @input="errors && errors.document_number && delete errors.document_number"
+                            required
+                        />
+                    </div>
+                    <div class="flex flex-col">
+                        <label for="document_type">
+                            Document Type
+                            <span class="text-red-500">*</span>
+                        </label>
+                        <Multiselect
+                            ref="document_type"
+                            v-model="selectedItems.document_type"
+                            :options="documentTypeStore.itemList"
+                            track-by="id"
+                            placeholder="Select Document Type"
+                            label="title"
+                            :show-labels="false"
+                            @select="errors && errors.document_type && delete errors.document_type"
+                            class="bg-gray-800"
+                            required
+                        />
+                    </div>
+                    <div class="flex flex-col">
+                        <label for="document_category">
+                            Document Category
+                            <span class="text-red-500">*</span>
+                        </label>
+                        <Multiselect
+                            ref="document_category"
+                            v-model="selectedItems.document_category"
+                            :options="documentCategoryStore.itemList"
+                            track-by="id"
+                            placeholder="Select Document Category"
+                            label="title"
+                            :show-labels="false"
+                            @select="errors && errors.document_category && delete errors.document_category"
+                            class="bg-gray-800"
+                            required
+                        />
+                    </div>
+                    <div class="flex flex-col">
+                        <label for="department">
+                            Department
+                            <span class="text-red-500">*</span>
+                        </label>
+                        <Multiselect
+                            ref="department"
+                            v-model="selectedItems.department"
+                            :options="departmentStore.itemList"
+                            track-by="id"
+                            placeholder="Select Department"
+                            label="name"
+                            :show-labels="false"
+                            @select="errors && errors.department && delete errors.department"
+                        />
+                    </div>
+                    <div class="flex flex-col">
+                        <label for="date">Received Date</label>
+                        <DateSelector id="date" v-model="payload.date" :classValue="`w-full`" />
                     </div>
                 </div>
+            </div>
 
-                <div class="mb-8">
-                    <h2 class="text-base font-semibold mb-3">Recipient Information</h2>
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <div class="flex flex-col">
-                            <label class="block text-sm font-medium mb-2">Recipient Name</label>
-                            <input v-model="formData.recipientName" type="text" class="form-input" />
-                        </div>
-                        <div class="flex flex-col">
-                            <label class="block text-sm font-medium mb-2">Recipient Contact</label>
-                            <input v-model="formData.recipientContact" type="tel" class="form-input" />
-                        </div>
-                        <div class="flex flex-col md:col-span-2">
-                            <label class="block text-sm font-medium mb-2">Recipient Address</label>
-                            <input v-model="formData.recipientAddress" type="text" class="form-input" />
-                        </div>
+            <!-- Document Information Section -->
+            <div class="mb-[10px]">
+                <!-- <h3 class="text-lg font-semibold">Document Information</h3> -->
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-[5px]">
+                    <div class="flex flex-col">
+                        <label for="issued_date">Issued Date</label>
+                        <DateSelector id="issued_date" v-model="payload.issued_date" :classValue="`w-full`" />
+                    </div>
+
+                    <div class="flex flex-col">
+                        <label for="sender_name">
+                            Sender Name
+                            <span class="text-red-500">*</span>
+                        </label>
+                        <input
+                            id="sender_name"
+                            v-model="payload.sender_name"
+                            type="text"
+                            placeholder="Enter Sender Name"
+                            @input="errors && errors.sender_name && delete errors.sender_name"
+                            required
+                        />
+                    </div>
+                    <div class="flex flex-col">
+                        <label for="sender_address">
+                            Sender Address
+                            <span class="text-red-500">*</span>
+                        </label>
+                        <input
+                            id="sender_address"
+                            v-model="payload.sender_address"
+                            type="text"
+                            placeholder="Enter Sender Address"
+                            @input="errors && errors.sender_address && delete errors.sender_address"
+                            required
+                        />
+                    </div>
+                    <div class="flex flex-col">
+                        <label for="sender_contact">
+                            Sender Contact
+                            <span class="text-red-500">*</span>
+                        </label>
+                        <input
+                            id="sender_contact"
+                            v-model="payload.sender_contact"
+                            type="text"
+                            placeholder="Enter Sender Contact"
+                            @input="errors && errors.sender_contact && delete errors.sender_contact"
+                            required
+                        />
                     </div>
                 </div>
+            </div>
 
-                <div class="mb-8">
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <div class="flex flex-col">
-                            <label class="block text-sm font-medium mb-2">Issued Date</label>
-                            <input v-model="formData.issuedDate" type="date" class="form-input" />
-                        </div>
-                        <div class="flex flex-col">
-                            <label class="block text-sm font-medium mb-2">Dispatch Date</label>
-                            <input v-model="formData.dispatchDate" type="date" class="form-input" />
-                        </div>
+            <!-- Subject Section -->
+            <div class="mb-[10px]">
+                <!-- <h3 class="text-lg font-semibold">Subject</h3> -->
+                <div class="grid grid-cols-3 gap-[5px]">
+                    <div class="flex flex-col">
+                        <label for="subject">
+                            Subject
+                            <span class="text-red-500">*</span>
+                        </label>
+                        <input
+                            id="subject"
+                            v-model="payload.subject"
+                            type="text"
+                            placeholder="Enter subject of the letter"
+                            @input="errors && errors.subject && delete errors.subject"
+                            required
+                        />
                     </div>
                 </div>
-
-                <div class="mb-8">
-                    <h2 class="text-base font-semibold mb-3">Attachments</h2>
-                    <div class="border-2 border-dashed p-6 text-center cursor-pointer" @click="triggerFileInput">
+            </div>
+            <!--Attachment Section-->
+            <div class="grid grid-cols-3">
+                <div>
+                    <div>Attachments</div>
+                    <div
+                        class="border-2 border-dashed p-6 text-center cursor-pointer hover:bg-gray-50"
+                        @click="triggerFileInput"
+                    >
                         <input
                             type="file"
                             multiple
@@ -124,16 +174,16 @@
                             ref="fileInputRef"
                             accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.png"
                         />
-                        <p class="text-sm mb-2">Click to upload or drag and drop</p>
+                        <p class="text-gray-600 text-sm mb-2">Click to upload</p>
                         <div v-if="formData.attachments.length > 0" class="mt-4 text-left">
                             <ul class="space-y-2">
                                 <li
                                     v-for="(file, index) in formData.attachments"
                                     :key="index"
-                                    class="flex justify-between items-center border p-2"
+                                    class="flex justify-between items-center bg-gray-100 p-2 rounded"
                                 >
                                     <span class="text-sm truncate">{{ file.name }}</span>
-                                    <button type="button" @click.stop="removeFile(index)" class="text-sm">
+                                    <button type="button" @click.stop="removeFile(index)" class="text-red-500 text-xs">
                                         Remove
                                     </button>
                                 </li>
@@ -142,6 +192,7 @@
                     </div>
                 </div>
             </div>
+            </div>
         </div>
     </Towser>
 </template>
@@ -149,24 +200,19 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, onBeforeMount } from "vue";
 import { storeToRefs } from "pinia";
-import { createOverlayStore } from "@/stores/OverlayStore";
-import Multiselect from "vue-multiselect";
-import { departmentAPI, categoryAPI } from "@/core/endpoints/dartachalani";
 import { createGenericStore } from "@/stores/GenericStore";
+import { createOverlayStore } from "@/stores/OverlayStore";
 
-const DartaTowserStore = createOverlayStore("darta-towser")();
-const { show } = storeToRefs(DartaTowserStore);
-
-const departmentStore = createGenericStore("departments")();
-const { itemList: departments } = storeToRefs(departmentStore);
-
-const categoryStore = createGenericStore("document-category")();
-const {itemList: categories } = storeToRefs(categoryStore);
-
-const isDepartmentLoading = ref(false);
-const isCategoryLoading = ref(false);
+const dartaStore = createGenericStore("darta")();
+const dartaTowserStore = createOverlayStore("darta-towser")();
+const { payload, selectedItems, errors } = storeToRefs(dartaStore);
 
+const documentCategoryStore = createGenericStore("document-category")();
+const documentTypeStore = createGenericStore("document-type")();
+const departmentStore = createGenericStore("department")();
+const emit = defineEmits(["onSave"]);
 const towser = ref({
+    title: [{ name: "Darta", link: "#" }, { name: "Create" }],
     title: [{ name: "Darta", link: "#" }, { name: "Create" }],
     action: [
         {
@@ -179,6 +225,24 @@ const towser = ref({
         },
     ],
 });
+});
+
+const departments = ref([
+    { id: 1, name: "Administration" },
+    { id: 2, name: "HR" },
+]);
+const documentCategories = ref([
+    { id: 1, name: "Confidential" },
+    { id: 2, name: "Public" },
+]);
+const departments = ref([
+    { id: 1, name: "Administration" },
+    { id: 2, name: "HR" },
+]);
+const documentCategories = ref([
+    { id: 1, name: "Confidential" },
+    { id: 2, name: "Public" },
+]);
 
 const formData = reactive({
     department: null,
@@ -192,18 +256,24 @@ const formData = reactive({
     issuedDate: "",
     dispatchDate: "",
     attachments: [] as File[],
+    documentNumber: "",
+    subject: "",
+    body: "",
+    recipientName: "",
+    recipientContact: "",
+    recipientAddress: "",
+    issuedDate: "",
+    dispatchDate: "",
+    attachments: [] as File[],
 });
 
 const fileInputRef = ref<HTMLInputElement | null>(null);
 
 const onClose = () => {
-    DartaTowserStore.close();
-    resetForm();
+    dartaTowserStore.close();
 };
 
-const onSave = () => {
-    handleSave();
-};
+const onSave = async () => {};
 
 const triggerFileInput = () => {
     fileInputRef.value?.click();
@@ -220,45 +290,5 @@ const removeFile = (index: number) => {
     formData.attachments.splice(index, 1);
 };
 
-const resetForm = () => {
-    formData.department = null;
-    formData.documentCategory = null;
-    formData.documentNumber = "";
-    formData.subject = "";
-    formData.body = "";
-    formData.recipientName = "";
-    formData.recipientContact = "";
-    formData.recipientAddress = "";
-    formData.issuedDate = "";
-    formData.dispatchDate = "";
-    formData.attachments = [];
-};
-
-const handleSave = async () => {
-    if (
-        !formData.department ||
-        !formData.documentCategory ||
-        !formData.documentNumber ||
-        !formData.subject ||
-        !formData.body
-    ) {
-        console.error("Please fill in all required fields");
-        return;
-    }
-
-    console.log("Saving:", formData);
-    onClose();
-};
-
-onMounted(()=>{
-    departmentStore.fetchList(departmentAPI, {}, isDepartmentLoading);
-    categoryStore.fetchList(categoryAPI, {}, isCategoryLoading);
-})
-
-onBeforeMount(()=>{
-    departmentStore.$reset();
-    departmentStore.$dispose();
-    categoryStore.$reset();
-    categoryStore.$dispose();
-})
 </script>
+