diff --git a/components/Releases.vue b/components/Releases.vue
new file mode 100644
index 0000000..5e69208
--- /dev/null
+++ b/components/Releases.vue
@@ -0,0 +1,3 @@
+<template>
+    Releases
+</template>
\ No newline at end of file
diff --git a/pages/apps.vue b/pages/apps.vue
index a388a1c..01f3a1c 100644
--- a/pages/apps.vue
+++ b/pages/apps.vue
@@ -13,7 +13,9 @@ const orgsStore = useOrgsStore()
 
 const onRowSelect = (event: any) => {
     const appName = event.data.name
-    navigateTo(`/orgs/${orgNameParam}/apps/${appName}`)
+    console.log(event.data)
+    const orgName = event.data.Organization.name
+    navigateTo(`/orgs/${orgName}/apps/${appName}`)
 };
 
 const addOrgVisible = ref(false)
@@ -121,17 +123,13 @@ const search = (e: any) => {
             selectionMode="single">
             <Column header="Name">
                 <template #body="prop">
-                    <RouterLink :to="`/orgs/${prop.data.Organization.name}/apps/${prop.data.name}`" custom>
-                        <a :href="`/orgs/${prop.data.Organization.name}/apps/${prop.data.name}`">
-                            <div class="flex flex-row gap-3 items-center px-3 py-2">
-                                <div class="rounded flex items-center justify-center"
-                                    style="height: 34px; width: 34px; background-color: #ece9fc; color: #2a1261">
-                                    <label class="text-2xl">{{ _.upperCase(prop.data.displayName[0]) }}</label>
-                                </div>
-                                <label class="font-semibold text-lg">{{ prop.data.displayName }}</label>
-                            </div>
-                        </a>
-                    </RouterLink>
+                    <div class="flex flex-row gap-3 items-center px-3 py-2">
+                        <div class="rounded flex items-center justify-center"
+                            style="height: 34px; width: 34px; background-color: #ece9fc; color: #2a1261">
+                            <label class="text-2xl">{{ _.upperCase(prop.data.displayName[0]) }}</label>
+                        </div>
+                        <label class="font-semibold text-lg">{{ prop.data.displayName }}</label>
+                    </div>
                 </template>
             </Column>
             <Column header="OS">
diff --git a/pages/orgs/[orgName]/apps/[appId].vue b/pages/orgs/[orgName]/apps/[appId].vue
index 91d2751..18dd6b6 100644
--- a/pages/orgs/[orgName]/apps/[appId].vue
+++ b/pages/orgs/[orgName]/apps/[appId].vue
@@ -1,8 +1,58 @@
 <template>
-    {{ route.params }}
+    <h4>{{ detailApp.data.value?.displayName }}</h4>
+    <div class="card px-2 py-1">
+        <TabView v-model:active-index="active">
+            <TabPanel header="Releases">
+                <Releases />
+            </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 route = useRoute()
-console.log(route.params)
+const { currentRoute, push } = useRouter();
+const { query, params } = useRoute()
+const tabs = [
+    'releases',
+    'groups'
+]
+const tabIndex = tabs.findIndex(e => e == query.tab as string)
+const active = ref(tabIndex !== -1 ? tabIndex : 0);
+
+watchEffect(() => {
+    const newTab = tabs[active.value]
+    push({
+        query: {
+            ...currentRoute.value.query,
+            tab: newTab,
+        },
+        replace: true,
+    })
+})
+onBeforeUnmount(() => {
+    push({
+        query: {
+            ...currentRoute.value.query,
+            tab: null,
+        },
+        replace: true,
+    })  
+})
+
+const detailApp = await useFetch('/api/detail-app', {
+    query: {
+        appName: params.appId,
+        orgName: params.orgName,
+    },
+})
 </script>
\ No newline at end of file
diff --git a/server/api/detail-app.get.ts b/server/api/detail-app.get.ts
new file mode 100644
index 0000000..54b5c3e
--- /dev/null
+++ b/server/api/detail-app.get.ts
@@ -0,0 +1,17 @@
+export default defineEventHandler(async (event) => {
+    const userId = event.context.auth.userId
+    const prisma = event.context.prisma
+    const { appName, orgName } = getQuery(event)
+    const app = await prisma.apps.findFirstOrThrow({
+        include: {
+            Organization: true,
+        },
+        where: {
+            name: appName!.toString(),
+            Organization: {
+                name: orgName!.toString(),
+            },
+        },
+    })
+    return app
+})