diff --git a/components/AppFileUpload.vue b/components/AppFileUpload.vue
index a31dcaf..e8aeb0a 100644
--- a/components/AppFileUpload.vue
+++ b/components/AppFileUpload.vue
@@ -1,34 +1,37 @@
 <template>
-    <div class="flex flex-col gap-2">
-        <label class="font-bold text-small">Upload Here</label>
-        <div class="border-2 border-dashed p-3 rounded flex flex-row items-center gap-3" style="
-    border-color: var(--surface-border);">
-            <input class="p-2 border rounded-lg" ref="fileRef" type="file" :accept="mimeTypeFromOsType">
-            <Button label="Upload" @click="submit" :loading="isPending" />
+    <div class="flex flex-column gap-3">
+        <input class="p-2 border rounded-lg" ref="fileRef" type="file" :accept="mimeTypeFromOsType">
+        <div class="flex flex-column gap-2">
+            <label for="releasenotes">Release Notes</label>
+            <InputText id="releasenotes" v-model="releaseNotes" aria-describedby="releasenotes-help" />
         </div>
+        <Button label="Upload" @click="submit" :loading="isPending" />
     </div>
 </template>
 
 <script setup lang="ts">
-const osType = inject<OsType>('detail-app')
-const mimeTypeFromOsType = getMimeTypeFromosType(osType)
-const fileRef = ref<HTMLInputElement | null>(null)
-const emit = defineEmits<{
-    (event: 'onUpload', file: File, resolve: (value: unknown) => void, reject: (value: unknown) => void): void
-}>()
+const releaseNotes = ref<string | null>(null)
+const dialogRef = inject<any>('dialogRef');
+const osType = ref<OsType | null>(null)
+const prop = ref<any>(null)
+onMounted(() => {
+    osType.value = dialogRef.value.data.osType;
+    prop.value = dialogRef.value.data.props
+})
 
-const refreshListArtifacts = inject<any>('refresh-list-artifacts')
+const mimeTypeFromOsType = computed(() => getMimeTypeFromosType(osType.value ?? 'android'))
+const fileRef = ref<HTMLInputElement | null>(null)
 
 const { mutateAsync, isPending } = useMutation({
     mutationFn: async (file: File) => {
-        await new Promise((resolve, reject) => {
-            emit('onUpload', file, resolve, reject)
-        })
+        await onUpload(file)
     },
     onSuccess: () => {
         if (fileRef.value) {
             fileRef.value.value = ''
-            refreshListArtifacts()
+            dialogRef.value.close({
+                success: true,
+            });
         }
     },
 })
@@ -41,4 +44,25 @@ const submit = async () => {
     }
     mutateAsync(realFile)
 }
+
+
+
+const onUpload = async (file: File) => {
+    const { url, file: key } = await $fetch('/api/artifacts/upload-artifact', {
+        method: 'post',
+    })
+    await $fetch(url, {
+        method: 'put',
+        body: file,
+        redirect: "follow",
+    })
+    await $fetch('/api/artifacts/upload-artifact-url', {
+        method: 'post',
+        body: {
+            key: key,
+            ...prop.value,
+            releaseNotes: releaseNotes.value,
+        },
+    })
+};
 </script>
diff --git a/components/Releases.vue b/components/Releases.vue
index ebd5b48..5bc46cb 100644
--- a/components/Releases.vue
+++ b/components/Releases.vue
@@ -1,14 +1,13 @@
 <template>
-    <AppFileUpload :onOnUpload="onUpload" />
-
-    <DataTable :value="list">
+    <Button @click="upload" label="Upload" class="mb-3"></Button>
+    <DataTable :value="list" single>
         <Column field="versionName" header="Version Name"></Column>
         <Column field="versionCode" header="Version Code"></Column>
         <Column field="createdAt" header="Date">
             <template #body="slotProps">
                 <label v-tooltip.bottom="{
-                        value: moment(slotProps.data.createdAt).format(),
-                    }">
+        value: moment(slotProps.data.createdAt).format(),
+    }">
                     {{ moment(slotProps.data.createdAt).fromNow() }}
                 </label>
             </template>
@@ -20,37 +19,40 @@
 
 <script setup lang="ts">
 import moment from 'moment'
+import AppFileUpload from './AppFileUpload.vue';
 
 const props = defineProps<{
     orgName: string,
     appName: string,
 }>()
 
-const onUpload = async (file: File, resolve: (value: unknown) => void, reject: (value: any) => void) => {
-    try {
-        const { url, file: key } = await $fetch('/api/artifacts/upload-artifact', {
-            method: 'post',
-        })
-        await $fetch(url, {
-            method: 'put',
-            body: file,
-            redirect: "follow",
-        })
-        await $fetch('/api/artifacts/upload-artifact-url', {
-            method: 'post',
-            body: {
-                key: key,
-                ...props,
-            },
-        })
-        resolve(null)
-    } catch (e) {
-        reject(e)
-    }
-};
-
-const { data, refresh } = await useFetch('/api/artifacts/list-artifacts')
+const { data, refresh } = await useFetch('/api/artifacts/list-artifacts', {
+    query: {
+        orgName: props.orgName,
+        appName: props.appName,
+    },
+})
 const list = computed(() => data.value as any[])
 
-provide('refresh-list-artifacts', refresh)
+const dialog = useDialog();
+
+const osType = inject<OsType>('detail-app')
+
+const upload = () => {
+    dialog.open(AppFileUpload, {
+        props: {
+            modal: true,
+            header: 'Upload',
+        },
+        data: {
+            osType,
+            props,
+        },
+        onClose: (o) => {
+            if (o?.data?.success) {
+                refresh()
+            }
+        }
+    })
+}
 </script>
\ No newline at end of file
diff --git a/pages/orgs/[orgName]/apps/[appId].vue b/pages/orgs/[orgName]/apps/[appId].vue
index 6d0865b..fe1ad43 100644
--- a/pages/orgs/[orgName]/apps/[appId].vue
+++ b/pages/orgs/[orgName]/apps/[appId].vue
@@ -1,23 +1,39 @@
 <template>
     <h4>{{ detailApp.data.value?.displayName }}</h4>
-    <TabView v-model:active-index="active">
-        <TabPanel header="Artifacts">
+    <div class="flex flex-col gap-3">
+        <TabMenu v-model:active-index="active" :model="items" :pt="{
+        menu: 'remove-bg-tabmenu',
+        menuitem: 'remove-bg-tabmenu',
+    }" />
+        <div :style="{
+        display: active == 0 ? 'unset' : 'none',
+    }">
             <Releases :org-name="orgName" :app-name="appName" />
-        </TabPanel>
-        <TabPanel header="Groups">
-            <p class="m-0">
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
-                totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
-                dicta sunt explicabo. Nemo enim
-                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
-                dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam
-                eius modi.
-            </p>
-        </TabPanel>
-    </TabView>
+        </div>
+        <!-- <TabView v-model:active-index="active">
+            <TabPanel header="Artifacts">
+                <Releases :org-name="orgName" :app-name="appName" />
+            </TabPanel>
+            <TabPanel header="Groups">
+                <p class="m-0">
+                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
+                    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
+                    dicta sunt explicabo. Nemo enim
+                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
+                    dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam
+                    eius modi.
+                </p>
+            </TabPanel>
+        </TabView> -->
+    </div>
 </template>
 
 <script setup lang="ts">
+const items = ref([
+    { label: 'Artifacts' },
+    { label: 'Groups' },
+])
+
 const { currentRoute, push } = useRouter();
 const { query, params } = useRoute()
 const tabs = [
@@ -57,4 +73,14 @@ const detailApp = await useFetch('/api/detail-app', {
     },
 })
 provide('detail-app', toOsType(detailApp.data.value?.osType))
-</script>
\ No newline at end of file
+</script>
+
+<style>
+.remove-bg-tabmenu {
+    background: unset;
+}
+
+.remove-bg-tabmenu>a {
+    background: unset;
+}
+</style>
\ No newline at end of file
diff --git a/server/api/artifacts/upload-artifact-url.post.ts b/server/api/artifacts/upload-artifact-url.post.ts
index e36fe52..4de9b7c 100644
--- a/server/api/artifacts/upload-artifact-url.post.ts
+++ b/server/api/artifacts/upload-artifact-url.post.ts
@@ -1,7 +1,7 @@
 import { getStorageKeys } from "~/server/utils/utils"
 
 export default defineEventHandler(async (event) => {
-    const { key, appName, orgName } = await readBody(event)
+    const { key, appName, orgName, releaseNotes } = await readBody(event)
     const { temp, assets } = getStorageKeys(event.context.auth, key)
     const prisma = event.context.prisma
     await prisma.$transaction(async (t) => {
@@ -31,6 +31,7 @@ export default defineEventHandler(async (event) => {
                 versionCode: '1',
                 versionName: '1.0.0',
                 appsId: app.id,
+                releaseNotes: releaseNotes,
             },
         })
     })