diff --git a/src/renderer/components/ParkingItem.vue b/src/renderer/components/ParkingItem.vue
new file mode 100644
index 0000000..e4b6fd0
--- /dev/null
+++ b/src/renderer/components/ParkingItem.vue
@@ -0,0 +1,26 @@
+<template>
+  <el-link type="primary" @click="show(parking.index)">{{parking.name}}{{parking.number}}</el-link>
+</template>
+
+<script lang="js">
+  export default {
+    name: 'parking-item',
+    props: {parking: Object},
+    mounted () {
+    },
+    data () {
+      return {
+      }
+    },
+    methods: {
+      show (idx) {
+        this.$parent.$parent.$parent.$parent.$parent.$refs.editLayer.show(idx)
+      }
+    },
+    computed: {
+    }
+}
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/renderer/components/ParkingList.vue b/src/renderer/components/ParkingList.vue
index 7897ee4..0350b36 100644
--- a/src/renderer/components/ParkingList.vue
+++ b/src/renderer/components/ParkingList.vue
@@ -7,27 +7,21 @@
       </div>
     </h1>
     <el-container direction="vertical">
-      <el-row>
         <li v-for="p in parkings" v-bind:key="p.index">
-          <el-link type="primary" @click="show(p.index)">{{p.name}} {{p.number}}</el-link>
+          <ParkingItem :parking="p"></ParkingItem>
         </li>
-      </el-row>
     </el-container>
   </div>
 </template>
 
 <script lang="js">
+  import ParkingItem from './ParkingItem'
   export default {
     name: 'parking-list',
+    components: {ParkingItem},
     props: [],
     data () {
       return {
-
-      }
-    },
-    methods: {
-      show (idx) {
-        this.$parent.$parent.$parent.$refs.editLayer.show(idx)
       }
     },
     computed: {
@@ -35,13 +29,7 @@
       // getter
         get: function () {
           if (this.$store.state.Parkings.items !== undefined) {
-            return this.$store.state.Parkings.items.sort((p1, p2) => {
-              if (p1.name === p2.name) {
-                return p1.number.localeCompare(p2.number)
-              } else {
-                return p1.name.localeCompare(p2.name)
-              }
-            })
+            return this.$store.state.Parkings.items
           }
         },
         // setter
diff --git a/src/renderer/loaders/groundnet_loader.js b/src/renderer/loaders/groundnet_loader.js
index c3a0501..a4bccb4 100644
--- a/src/renderer/loaders/groundnet_loader.js
+++ b/src/renderer/loaders/groundnet_loader.js
@@ -102,10 +102,10 @@ exports.readGroundnetXML = function (fDir, icao, force) {
             }).sort();
             
             store.default.dispatch('setParkings', parkingNodes.map( 
-                p => ({index: Number(p.attrs.index), name: String(p.attrs.name), number: String(p.attrs.number)}
+                p => ({index: Number(p.attrs.index), name: String(p.attrs.name), number: Number(p.attrs.number)}
             )).sort((p1, p2) => {
                 if (p1.name === p2.name) {
-                  return p1.number.localeCompare(p2.number)
+                    return p1.number - p2.number
                 } else {
                   return p1.name.localeCompare(p2.name)
                 }}));