diff --git a/frontend/src/pages/AppManagement.vue b/frontend/src/pages/AppManagement.vue
index 403cb4c..3ee1737 100644
--- a/frontend/src/pages/AppManagement.vue
+++ b/frontend/src/pages/AppManagement.vue
@@ -57,9 +57,10 @@ interface IAppDisplay{
 }
 
 const authStore = useAuthStore();
+const numberStringSorting = (a: string, b: string) => parseInt(a, 10) - parseInt(b, 10);
 
 const columns = [
-  { name: 'id', label: 'アプリID', field: 'id', align: 'left', sortable: true },
+  { name: 'id', label: 'アプリID', field: 'id', align: 'left', sortable: true, sort: numberStringSorting },
   { name: 'name', label: 'アプリ名', field: 'name', align: 'left', sortable: true },
   { name: 'url', label: 'URL', field: 'url', align: 'left', sortable: true },
   { name: 'user', label: '最後更新者', field: 'user', align: 'left', sortable: true},
@@ -77,16 +78,16 @@ const store = useFlowEditorStore();
 const getApps = async () => {
   loading.value = true;
   const result = await api.get('api/apps');
-  rows.value = result.data.map((item:IManagedApp) => {
+  rows.value = result.data.map((item: IManagedApp) => {
     return {
-      id: Number(item.appid),
+      id: item.appid,
       name: item.appname,
       url: `${item.domainurl}/k/${item.appid}`,
       user: `${item.user.first_name} ${item.user.last_name}` ,
       updatetime:date.formatDate(item.update_time, 'YYYY/MM/DD HH:mm'),
       version: Number(item.version)
     }
-  }).sort((a, b) => a.id - b.id); // set default order
+  }).sort((a: IAppDisplay, b: IAppDisplay) => numberStringSorting(a.id, b.id)); // set default order
   loading.value = false;
 }