diff --git a/src/views/Chalani/Chalani.vue b/src/views/Chalani/Chalani.vue
index d317529..13afb7c 100644
--- a/src/views/Chalani/Chalani.vue
+++ b/src/views/Chalani/Chalani.vue
@@ -13,18 +13,17 @@
             />
         </template>
     </ContentLayout>
-    <Create />
+    <CreateChalani />
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, watch } from "vue";
+import { ref } from "vue";
 import { BStoAD, NepaliDate } from "nepali-date-library";
 
 import { storeToRefs } from "pinia";
-import Create from "@/views/Chalani/Create.vue";
+import CreateChalani from "@/views/Chalani/CreateChalani.vue";
 import { createGenericStore } from "@/stores/GenericStore";
 import { createOverlayStore } from "@/stores/OverlayStore";
-import { Toast } from "dolphin-components";
 
 const ChalaniStore = createGenericStore("chalani")();
 const ChalaniTowserStore = createOverlayStore("chalani-towser")();
@@ -52,7 +51,7 @@ const dateRange = ref({
     isBS: true,
 });
 
-const selectedDate = ref(BStoAD(new NepaliDate().format("YYYY-MM-DD")));
+// const selectedDate = ref(BStoAD(new NepaliDate().format("YYYY-MM-DD")));
 
 const headerDetails = [
     {
diff --git a/src/views/Chalani/Create.vue b/src/views/Chalani/Create.vue
deleted file mode 100644
index c2d6a67..0000000
--- a/src/views/Chalani/Create.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-    <!-- <Modal :title="modal.title" :actions="modal.action" @onClose="onClose"></Modal> -->
-         <Towser
-        :show="ChalaniTowserStore.show"
-        :title="towser.title"
-        :actions="towser.action"
-        @onClose="onClose"
-    >
-
-     </Towser>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import { createGenericStore } from "@/stores/GenericStore";
-import { createOverlayStore } from "@/stores/OverlayStore";
-const ChalaniStore = createGenericStore("user-meal-schedule")();
-const ChalaniTowserStore = createOverlayStore("chalani-towser")();
-const towser = ref({
-    show: false,
-    title: [
-        {
-            name: "Chalani",
-            link: "#",
-        },
-        {
-            name: "Create",
-        },
-    ],
-    action: [
-        {
-            title: "Close",
-            emit: "onClose",
-            class: "btn-outline",
-        },
-        {
-            title: "Save",
-            emit: "onSave",
-        },
-    ],
-});
-
-const onClose = () => {};
-</script>
diff --git a/src/views/Chalani/CreateChalani.vue b/src/views/Chalani/CreateChalani.vue
new file mode 100644
index 0000000..4bda12c
--- /dev/null
+++ b/src/views/Chalani/CreateChalani.vue
@@ -0,0 +1,245 @@
+<template>
+    <Towser :show="show" :title="towser.title" :actions="towser.action" @onClose="onClose" @onSave="onSave">
+        <div class="p-4 space-y-6">
+            <div>
+                <h2 class="font-semibold mb-4">Document Details</h2>
+                <div class="grid grid-cols-3 gap-x-[5px] gap-y-[15px] mb-4">
+                    <div class="">
+                        <label class="">
+                            Department
+                            <span class="text-red-500">*</span>
+                        </label>
+                        <Multiselect
+                            v-model="formData.department"
+                            :options="departments"
+                            :multiple="false"
+                            :searchable="true"
+                            :allow-empty="false"
+                            :show-labels="false"
+                            label="name"
+                            track-by="id"
+                            placeholder="Select Department"
+                        />
+                    </div>
+                    <div class="">
+                        <label class="">
+                            Category
+                            <span class="text-red-500">*</span>
+                        </label>
+                        <Multiselect
+                            v-model="formData.documentCategory"
+                            :options="documentCategories"
+                            :multiple="false"
+                            :searchable="true"
+                            :allow-empty="false"
+                            :show-labels="false"
+                            label="name"
+                            track-by="id"
+                            placeholder="Select Category"
+                        />
+                    </div>
+                    <div class="">
+                        <div class="flex flex-col">
+                            <label class="">
+                                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>
+                </div>
+
+                <div class="grid grid-cols-2 gap-x-[5px] gap-y-[15px]">
+                    <div class="flex flex-col">
+                        <label class="">
+                            Subject
+                            <span class="text-red-500">*</span>
+                        </label>
+                        <input
+                            v-model="formData.subject"
+                            type="text"
+                            placeholder="Enter document subject"
+                            class="form-input"
+                        />
+                    </div>
+
+                    <div class="flex flex-col">
+                        <label class="">
+                            Body
+                            <span class="text-red-500">*</span>
+                        </label>
+                        <input
+                            v-model="formData.subject"
+                            type="text"
+                            placeholder="Enter document subject"
+                            class="form-input"
+                        />
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="font-semibold mb-4">Receipent Information</h2>
+                <div class="grid grid-cols-3 gap-x-[5px] gap-y-[15px]">
+                    <div class="flex flex-col">
+                        <label class="">Recipient Name</label>
+                        <input
+                            v-model="formData.recipientName"
+                            type="text"
+                            placeholder="Enter Receipant Informtion"
+                            class="form-input"
+                        />
+                    </div>
+                    <div class="flex flex-col">
+                        <label class="">Recipient Contact</label>
+                        <input
+                            v-model="formData.recipientContact"
+                            type="tel"
+                            class="form-input"
+                            placeholder="Enter Receipant Contact Information"
+                        />
+                    </div>
+                    <div class="flex flex-col">
+                        <label class="">Receipant Address</label>
+                        <input
+                            v-model="formData.recipientAddress"
+                            type="text"
+                            class="form-input"
+                            placeholder="Enter Receipant address Information"
+                        />
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h2 class="text-base font-semibold mb-4">Attachments</h2>
+                <div class="border-2 border-dashed p-6 text-center cursor-pointer" @click="triggerFileInput">
+                    <input
+                        type="file"
+                        multiple
+                        @change="handleFileUpload"
+                        class="hidden"
+                        ref="fileInputRef"
+                        accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.png"
+                    />
+                    <p class="text-sm mb-2">Click to upload or drag and drop</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"
+                            >
+                                <span class="text-sm truncate">{{ file.name }}</span>
+                                <button type="button" @click.stop="removeFile(index)" class="text-sm">Remove</button>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <div class="grid grid-cols-3 gap-x-[5px] gap-y-[15px]">
+                    <div class="flex flex-col">
+                        <label class="">Issued Date</label>
+                        <input v-model="formData.issuedDate" type="date" class="form-input" />
+                    </div>
+                    <div class="flex flex-col">
+                        <label class="">Dispatch Date</label>
+                        <input v-model="formData.dispatchDate" type="date" class="form-input" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Towser>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { storeToRefs } from "pinia";
+import { createOverlayStore } from "@/stores/OverlayStore";
+import Multiselect from "vue-multiselect";
+
+const ChalaniTowserStore = createOverlayStore("chalani-towser")();
+const { show } = storeToRefs(ChalaniTowserStore);
+
+const fileInputRef = ref<HTMLInputElement | null>(null);
+
+const towser = ref({
+    title: [{ name: "Chalani", link: "#" }, { name: "Create" }],
+    action: [
+        {
+            title: "Close",
+            emit: "onClose",
+        },
+        {
+            title: "Save",
+            emit: "onSave",
+        },
+    ],
+});
+
+const formData = reactive({
+    department: null,
+    documentCategory: null,
+    documentNumber: "",
+    subject: "",
+    body: "",
+    recipientName: "",
+    recipientContact: "",
+    recipientAddress: "",
+    issuedDate: "",
+    dispatchDate: "",
+    attachments: [] as File[],
+});
+
+const departments = ref([
+    { id: 1, name: "Administration" },
+    { id: 2, name: "HR" },
+]);
+
+const documentCategories = ref([
+    { id: 1, name: "Confidential" },
+    { id: 2, name: "Public" },
+]);
+
+const resetForm = () => {
+    formData.documentNumber = "";
+    formData.subject = "";
+    formData.attachments = [];
+};
+
+const onClose = () => {
+    ChalaniTowserStore.close();
+    resetForm();
+};
+
+const removeFile = (index: number) => {
+    formData.attachments.splice(index, 1);
+};
+
+const onSave = () => {
+    submitForm();
+};
+
+const submitForm = async () => {
+    console.log("Submitting:", formData);
+    onClose();
+};
+
+const triggerFileInput = () => {
+    fileInputRef.value?.click();
+};
+
+const handleFileUpload = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    if (target.files) {
+        formData.attachments = [...formData.attachments, ...Array.from(target.files)];
+    }
+};
+</script>
diff --git a/src/views/Darta/Create.vue b/src/views/Darta/Create.vue
index 7734a94..53d4094 100644
--- a/src/views/Darta/Create.vue
+++ b/src/views/Darta/Create.vue
@@ -192,6 +192,7 @@
                     </div>
                 </div>
             </div>
+            </div>
         </div>
     </Towser>
 </template>
@@ -211,6 +212,7 @@ 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: [
         {
@@ -223,7 +225,16 @@ 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" },
@@ -245,6 +256,15 @@ 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);
@@ -271,3 +291,4 @@ const removeFile = (index: number) => {
 };
 
 </script>
+
diff --git a/src/views/Darta/Darta.vue b/src/views/Darta/Darta.vue
index 923290d..45850fb 100644
--- a/src/views/Darta/Darta.vue
+++ b/src/views/Darta/Darta.vue
@@ -16,10 +16,9 @@
 
     <Create />
 </template>
-
+ 
 <script setup lang="ts">
 import { ref } from "vue";
-import { BStoAD, NepaliDate } from "nepali-date-library";
 import { storeToRefs } from "pinia";
 import Create from "@/views/Darta/Create.vue";
 import { createGenericStore } from "@/stores/GenericStore";