diff --git a/package-lock.json b/package-lock.json
index abf5641..b9c8a90 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,20 @@
 {
-  "name": "my-vue-app",
+  "name": "github-runner-viewer",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "my-vue-app",
+      "name": "github-runner-viewer",
       "version": "0.1.0",
       "dependencies": {
+        "@headlessui/vue": "^1.7.22",
+        "@heroicons/vue": "^2.1.5",
         "axios": "^1.7.2",
         "core-js": "^3.8.3",
-        "vue": "^3.2.13"
+        "moment": "^2.30.1",
+        "vue": "^3.2.13",
+        "vue-router": "^4.4.0"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -19,7 +23,8 @@
         "@vue/cli-plugin-eslint": "~5.0.0",
         "@vue/cli-service": "~5.0.0",
         "eslint": "^7.32.0",
-        "eslint-plugin-vue": "^8.0.3"
+        "eslint-plugin-vue": "^8.0.3",
+        "naive-ui": "^2.39.0"
       }
     },
     "node_modules/@achrinza/node-ipc": {
@@ -1945,6 +1950,26 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@css-render/plugin-bem": {
+      "version": "0.15.14",
+      "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.14.tgz",
+      "integrity": "sha512-QK513CJ7yEQxm/P3EwsI+d+ha8kSOcjGvD6SevM41neEMxdULE+18iuQK6tEChAWMOQNQPLG/Rw3Khb69r5neg==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "css-render": "~0.15.14"
+      }
+    },
+    "node_modules/@css-render/vue3-ssr": {
+      "version": "0.15.14",
+      "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.14.tgz",
+      "integrity": "sha512-//8027GSbxE9n3QlD73xFY6z4ZbHbvrOVB7AO6hsmrEzGbg+h2A09HboUyDgu+xsmj7JnvJD39Irt+2D0+iV8g==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.0.11"
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -1955,6 +1980,13 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -2032,6 +2064,30 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "node_modules/@headlessui/vue": {
+      "version": "1.7.22",
+      "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.22.tgz",
+      "integrity": "sha512-Hoffjoolq1rY+LOfJ+B/OvkhuBXXBFgd8oBlN+l1TApma2dB0En0ucFZrwQtb33SmcCqd32EQd0y07oziXWNYg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/vue-virtual": "^3.0.0-beta.60"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/@heroicons/vue": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.1.5.tgz",
+      "integrity": "sha512-IpqR72sFqFs55kyKfFS7tN+Ww6odFNeH/7UxycIOrlVYfj4WUGAdzQtLBnJspucSeqWFQsKM0g0YrgU655BEfA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": ">= 3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
@@ -2119,6 +2175,13 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
@@ -2317,6 +2380,32 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.8.3.tgz",
+      "integrity": "sha512-vd2A2TnM5lbnWZnHi9B+L2gPtkSeOtJOAw358JqokIH1+v2J7vUAzFVPwB/wrye12RFOurffXu33plm4uQ+JBQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/vue-virtual": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.8.3.tgz",
+      "integrity": "sha512-xrFLkOiqLoGwohgr1+Q880hkNdQWqwi19EXzx38iAjVEm1Db3KIAV0aVP57/dnNXU3NO1Vx8wnIHII5J4n1LyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.8.3"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.0.0"
+      }
+    },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -2455,6 +2544,30 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/katex": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.7.tgz",
+      "integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash": {
+      "version": "4.17.7",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz",
+      "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/mime": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
@@ -3298,6 +3411,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.3.tgz",
+      "integrity": "sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==",
+      "license": "MIT"
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.4.34",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.34.tgz",
@@ -3851,6 +3970,13 @@
         "lodash": "^4.17.14"
       }
     },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -5078,6 +5204,24 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/css-render": {
+      "version": "0.15.14",
+      "resolved": "https://registry.npmjs.org/css-render/-/css-render-0.15.14.tgz",
+      "integrity": "sha512-9nF4PdUle+5ta4W5SyZdLCCmFd37uVimSjg1evcTqKJCyvCEEj12WKzOSBNak6r4im4J4iYXKH1OWpUV5LBYFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/hash": "~0.8.0",
+        "csstype": "~3.0.5"
+      }
+    },
+    "node_modules/css-render/node_modules/csstype": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
+      "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/css-select": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
@@ -5233,6 +5377,33 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/date-fns-tz": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.1.tgz",
+      "integrity": "sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "date-fns": "2.x"
+      }
+    },
     "node_modules/debounce": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
@@ -6515,6 +6686,13 @@
         "node": ">=0.8.x"
       }
     },
+    "node_modules/evtd": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/evtd/-/evtd-0.2.4.tgz",
+      "integrity": "sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/execa": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
@@ -8092,6 +8270,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -8692,6 +8877,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mrmime": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
@@ -8735,6 +8929,47 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/naive-ui": {
+      "version": "2.39.0",
+      "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.39.0.tgz",
+      "integrity": "sha512-5oUJzRG+rtLSH8eRU+fJvVYiQids2BxF9jp+fwGoAqHOptEINrBlgBu9uy+95RHE5FLJ7Q/z41o+qkoGnUrKxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@css-render/plugin-bem": "^0.15.12",
+        "@css-render/vue3-ssr": "^0.15.12",
+        "@types/katex": "^0.16.2",
+        "@types/lodash": "^4.14.198",
+        "@types/lodash-es": "^4.17.9",
+        "async-validator": "^4.2.5",
+        "css-render": "^0.15.12",
+        "csstype": "^3.1.3",
+        "date-fns": "^2.30.0",
+        "date-fns-tz": "^2.0.0",
+        "evtd": "^0.2.4",
+        "highlight.js": "^11.8.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "seemly": "^0.3.8",
+        "treemate": "^0.3.11",
+        "vdirs": "^0.1.8",
+        "vooks": "^0.2.12",
+        "vueuc": "^0.4.58"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/naive-ui/node_modules/highlight.js": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz",
+      "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -10589,6 +10824,13 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/seemly": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/seemly/-/seemly-0.3.8.tgz",
+      "integrity": "sha512-MW8Qs6vbzo0pHmDpFSYPna+lwpZ6Zk1ancbajw/7E8TKtHdV+1DfZZD+kKJEhG/cAoB/i+LiT+5msZOqj0DwRA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -11550,6 +11792,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/treemate": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/treemate/-/treemate-0.3.11.tgz",
+      "integrity": "sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tslib": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
@@ -11768,6 +12017,32 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vdirs": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/vdirs/-/vdirs-0.1.8.tgz",
+      "integrity": "sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "evtd": "^0.2.2"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.11"
+      }
+    },
+    "node_modules/vooks": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/vooks/-/vooks-0.2.12.tgz",
+      "integrity": "sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "evtd": "^0.2.2"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue": {
       "version": "3.4.34",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.34.tgz",
@@ -11991,6 +12266,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.0.tgz",
+      "integrity": "sha512-HB+t2p611aIZraV2aPSRNXf0Z/oLZFrlygJm+sZbdJaW6lcFqEDQwnzUBXn+DApw+/QzDU/I9TeWx9izEjTmsA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -12016,6 +12306,25 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vueuc": {
+      "version": "0.4.58",
+      "resolved": "https://registry.npmjs.org/vueuc/-/vueuc-0.4.58.tgz",
+      "integrity": "sha512-Wnj/N8WbPRSxSt+9ji1jtDHPzda5h2OH/0sFBhvdxDRuyCZbjGg3/cKMaKqEoe+dErTexG2R+i6Q8S/Toq1MYg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@css-render/vue3-ssr": "^0.15.10",
+        "@juggle/resize-observer": "^3.3.1",
+        "css-render": "^0.15.10",
+        "evtd": "^0.2.4",
+        "seemly": "^0.3.6",
+        "vdirs": "^0.1.4",
+        "vooks": "^0.2.4"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.11"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz",
diff --git a/package.json b/package.json
index 0cf8f8a..b575c27 100644
--- a/package.json
+++ b/package.json
@@ -8,9 +8,13 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@headlessui/vue": "^1.7.22",
+    "@heroicons/vue": "^2.1.5",
     "axios": "^1.7.2",
     "core-js": "^3.8.3",
-    "vue": "^3.2.13"
+    "moment": "^2.30.1",
+    "vue": "^3.2.13",
+    "vue-router": "^4.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -19,7 +23,8 @@
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3"
+    "eslint-plugin-vue": "^8.0.3",
+    "naive-ui": "^2.39.0"
   },
   "eslintConfig": {
     "root": true,
diff --git a/public/index.html b/public/index.html
index 8a93759..7344259 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,17 +6,16 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <style>
-      body {
-        background-color: #0d1117; 
-      }
-      a {
-        color: #3DC2EC;
-      }
-      a:visited {
-        color: #3DC2EC;
-      }
-    </style>
+<style>
+  body {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    background-color: rgb(24 24 28);
+  }
+.dotted-underline {
+    text-decoration: underline;
+    text-decoration-style: dotted; /* This makes the underline dotted */
+}
+</style>
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index 5ecd7e8..791fb77 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,36 @@
 <template>
-  <RunnersView />
+<n-config-provider :theme="darkTheme">
 
+  <n-card title="Github Actions Runners UI" style="margin-bottom: 16px">
+    <n-tabs type="line" animated>
+      <n-tab-pane name="runners" tab="Show Runners">
+        <RunnersView/>
+      </n-tab-pane>
+      <n-tab-pane name="jobs" tab="Show Jobs">
+        <JobsView/>
+      </n-tab-pane>
+    </n-tabs>
+  </n-card>
+</n-config-provider>
 </template>
 
 <script>
-import RunnersView from './components/Runners.vue'
+  import { darkTheme } from 'naive-ui'
+  import RunnersView from './components/Runners.vue'
+  import JobsView from './components/Jobs.vue'
 
-export default {
-  name: 'App',
-  components: {
-    RunnersView
+  export default {
+    name: 'App',
+    components: {
+      RunnersView,
+      JobsView
+    },
+      setup() {
+        return {
+          darkTheme
+        }
+      }
   }
-}
 </script>
 
 <style>
@@ -20,7 +39,7 @@ export default {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  margin-top: 60px;
-  color: white;
+
+
 }
 </style>
diff --git a/src/common.js b/src/common.js
new file mode 100644
index 0000000..3e5f1e5
--- /dev/null
+++ b/src/common.js
@@ -0,0 +1,31 @@
+export function parseRunnerState(statusCode) {
+  const RunnerStatus = {
+    0: "Unknown",
+    1: "🏗️ Creation queued",
+    2: "🏗️ Created",
+    3: "✅ Provisioned",
+    4: "⏳ Processing",
+    5: "💣 Deletion queued",
+    6: "🪦  Deleted",
+    7: "⚠️  Failure",
+    8: "VanishedOnCloud",
+    9: "🧹 Cleanup"
+  };
+  if (Object.prototype.hasOwnProperty.call(RunnerStatus, statusCode)) {
+    return RunnerStatus[statusCode];
+  }
+  return "Unknown";  // Default case if status code is not found
+}
+
+export function parseJobState(statusCode) {
+  const JobState = {
+    0: "Unknown",
+    1: "⏸️  Queued",
+    2: "▶️  In Progress",
+    3: "✅ Completed"
+  };
+  if (Object.prototype.hasOwnProperty.call(JobState, statusCode)) {
+    return JobState[statusCode];
+  }
+  return "Unknown";  // Default case if status code is not found
+}
diff --git a/src/components/Jobs.vue b/src/components/Jobs.vue
new file mode 100644
index 0000000..4b09902
--- /dev/null
+++ b/src/components/Jobs.vue
@@ -0,0 +1,81 @@
+<template>
+   <n-form
+    inline
+    :label-width="80"
+    >
+    <n-form-item>
+        <n-checkbox v-model:checked="hideComplete">Hide completed jobs</n-checkbox>
+    </n-form-item>
+    <n-form-item>
+      <n-button @click="fetchJobs">Refresh</n-button>
+    </n-form-item>
+  </n-form>
+  <n-table striped>
+    <thead>
+      <tr>
+        <th>Owner</th>
+        <th>Repository</th>
+        <th>Status</th>
+        <th>Requested Size</th>
+        <th>Requested Profile</th>
+        <th>Queued</th>
+        <th>In progress</th>
+        <th>Completed</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="j in filteredJobs" v-bind:key="j.jobId">
+        <td>{{ j.owner }}</td>
+        <td>{{ j.repository }}</td>
+        <td>{{ getJobState(j.state) }}</td>
+        <td>{{ j.requestedSize }}</td>
+        <td>{{ j.requestedProfile }}</td>
+        <td>{{ j.queueTime }}</td>
+        <td>{{ j.inProgressTime }}</td>
+        <td>{{ j.completeTime }}</td>
+      </tr>
+    </tbody>
+  </n-table>
+</template>
+
+<script>
+import axios from 'axios';
+import {parseJobState} from '../common'
+export default {
+  name: 'RunnersView',
+  data() {
+    return {
+      jobs: [],
+      hideComplete: false
+    };
+  },
+  mounted() {
+    this.fetchJobs()
+    
+  },
+  computed: {
+    filteredJobs() {
+      return this.jobs
+        .filter(job => {
+          if(this.hideComplete === true) {
+            return job.state !== 3
+          } else {
+            return true;
+          }
+        });
+
+    }
+  },
+  methods: {
+    async fetchJobs() {
+      console.info("Loading Jobs")
+      let jobResp = await axios.get(process.env.VUE_APP_API_URL + '/api/get-jobs');
+      this.jobs = jobResp.data;
+
+    },
+    getJobState(code) {
+      return parseJobState(code)
+    },
+  }
+}
+</script>
diff --git a/src/components/RunnerDetails.vue b/src/components/RunnerDetails.vue
new file mode 100644
index 0000000..a514186
--- /dev/null
+++ b/src/components/RunnerDetails.vue
@@ -0,0 +1,134 @@
+<template>
+  <h3>Runner Details</h3>
+    <n-table>
+      <tr>
+        <th>Hostname</th><td>{{ getStatusIcon(runner.isOnline) }} {{ runner.hostname }}</td>
+        <th>Status</th><td>{{ getRunnerState(runner.lastState) }}</td>
+      </tr>
+      <tr>
+        <th>IPv4 Address</th><td>{{ runner.iPv4 }}</td>
+        <th>Cloud Provider</th><td>{{ runner.cloud }}</td>
+      </tr>
+      <tr>
+        <th>Size</th><td>{{ runner.size }}</td>
+        <th>Profile</th><td>{{ runner.profile }}</td>
+      </tr>
+      <tr>
+        <th>Created</th><td><span class="dotted-underline" :title="runner.lifecycle[0].eventTimeUtc">{{ getTimeSince(runner.lifecycle[0].eventTimeUtc) }}</span></td>
+        <th>Last State Update</th><td><span class="dotted-underline" :title="runner.lifecycle[runner.lifecycle.length-1].eventTimeUtc">{{ getTimeSince(runner.lifecycle[runner.lifecycle.length-1].eventTimeUtc) }}</span></td>
+      </tr>
+    </n-table>
+
+
+
+  <h3>Job Details</h3>
+  <div v-if="runner.job">
+    <n-table>
+      <tr>
+        <th>Repository</th><td><n-button text tag="a" type="primary" :href="'https://github.com/' + runner.job.repository" target="_blank">{{ runner.job.repository}}</n-button></td>
+        <th>Status</th><td>{{ getJobState(runner.job.state)}}</td>
+      </tr>
+      <tr v-if="ghLoaded">
+        <th>GitHub Workflow</th><td><n-button text tag="a" type="primary" :href="githubJob.html_url" target="_blank">{{ githubJob.workflow_name}} => {{ githubJob.name }}</n-button></td>
+        <th>GitHub Status</th><td>{{ githubJob.status }} [{{ githubJob.conclusion}}]</td>
+      </tr>
+      <tr v-if="ghLoaded">
+        <th>Labels</th><td>
+          <ul v-for="l in githubJob.labels" v-bind:key="l">
+            <li>{{ l }}</li>
+          </ul>
+        </td>
+        <th>Branch/Ref</th><td>{{ githubJob.head_branch }} [<n-button text tag="a" type="primary" :href="getCommitUrl(githubJob.head_sha, runner.job.repository)" target="_blank"><code>{{ githubJob.head_sha}}</code></n-button>]</td>
+      </tr>
+      <tr v-else>
+        <td colSpan=2>Loading GitHub job...</td>
+      </tr>
+    </n-table>
+  </div>
+  <div v-else>
+    No Job assigned jet.
+  </div>
+  
+  <h3>Runner Timeline</h3>
+  <n-table striped>
+    <thead>
+      <tr>
+        <th>Event Time</th>
+        <th>Status</th>
+        <th>Event</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="event in runner.lifecycle" :key="event.runnerLifecycleId">
+        <td><span class="dotted-underline" :title="event.eventTimeUtc" >{{ getEventTime(event.eventTimeUtc) }}</span></td>
+        <td>{{ getRunnerState(event.status)}}</td>
+        <td>{{ event.event }}</td>
+      </tr>
+    </tbody>
+  </n-table>
+</template>
+<script>
+  import {parseRunnerState, parseJobState} from '../common';
+  import moment from 'moment';
+  import axios from 'axios'; 
+  export default {
+    name: 'RunnerDetails',
+    data() {
+      return {
+        ghLoaded: false,
+        githubJob: {}
+      }
+    },
+    mounted() {
+      if(this.runner.job) {
+        this.loadGitHubjob()
+      }
+    },
+    props: {
+      runner: Object
+    },
+    computed: {
+
+    },
+    methods: {
+      getRunnerState(statusCode) {
+        return parseRunnerState(statusCode)
+      },
+      getTimeSince(timestamp) {
+        return moment(timestamp).fromNow();
+      },
+      getJobState(code) {
+        return parseJobState(code)
+      },
+      getCommitUrl(sha, repo) {
+        return "https://github.com/" + repo + "/commit/" + sha
+      },
+      getStatusIcon(isOnline) {
+        return isOnline ? "🟢" : "🔴";
+      },
+      getEventTime(eventTime) {
+
+        if(eventTime === this.runner.lifecycle[0].eventTimeUtc) {
+          return new moment(eventTime).format("HH:mm:ss")
+        } else {
+          var x = new moment(this.runner.lifecycle[0].eventTimeUtc)
+          var y = new moment(eventTime)
+          var duration = moment.duration(x.diff(y));
+          return duration.humanize();
+        }
+      },
+      async loadGitHubjob() {
+
+        try {
+          let resp = await axios.get(this.runner.job.jobUrl);
+          this.githubJob = resp.data;
+          this.ghLoaded = true;
+        }
+        catch {
+          console.log("unable to query github")
+        }
+      }
+    }
+  }
+
+</script>
diff --git a/src/components/Runners.vue b/src/components/Runners.vue
index 08ae7dd..96346d6 100644
--- a/src/components/Runners.vue
+++ b/src/components/Runners.vue
@@ -1,14 +1,29 @@
 <template>
   <div>
-    <h1>Runners Overview</h1>
-    <div>
-      <p>Search for runner: <input type="text" v-model="searchRunner" placeholder="runner name" /></p>
-      <p><input type="checkbox" v-model.lazy="searchOnlyOnline" id="online"/><label for="online">Show only online runners</label></p>
-    </div>
-    <table>
+    <n-form
+      inline
+      :label-width="80"
+      >
+      <n-form-item>
+          <n-checkbox v-model:checked="searchOnlyOnline">Show only online Runners</n-checkbox>
+      </n-form-item>
+      <n-form-item>
+          <n-input v-model:value="searchRunner" placeholder="Enter runner name"/>
+      </n-form-item>
+      <n-form-item>
+        <n-button @click="fetchrunners">Refresh</n-button>
+      </n-form-item>
+    </n-form>
+    <n-drawer v-model:show="show" :width="'60%'">
+      <n-drawer-content :title="'Runner Details for ' + this.selectedRunner.hostname" closable>
+        <RunnerDetails :runner="selectedRunner" />
+      </n-drawer-content>
+    </n-drawer>
+    <n-table striped>
       <thead>
         <tr>
           <th>Hostname</th>
+          <th>Created</th>
           <th>Job</th>
           <th>Owner</th>
           <th>Size</th>
@@ -23,97 +38,56 @@
         <template v-for="runner in sortedRunners" :key="runner.runnerId">
         <tr>
           <td>{{ getStatusIcon(runner.isOnline)}} <a target="_blank" title="Show monitoring" :href="'https://grafana.ethquokkaops.io/d/rYdddlPWk/node-exporter-full?orgId=1&var-DS_PROMETHEUS=default&var-job=integrations%2Fnode_exporter&var-node='+ runner.hostname +':9090'">📈</a> {{ runner.hostname }}</td>
+          <td><span class="dotted-underline" :title="runner.lifecycle[0].eventTimeUtc">{{ getAge(runner.lifecycle[0].eventTimeUtc) }}</span></td>
           <td>{{ getRunnerJobState(runner)}}</td>
-          <td><a :href="'https://github.com/' + runner.owner" target="_blank">{{ runner.owner }}</a></td>
+          <td><n-button text tag="a" type="primary" :href="'https://github.com/' + runner.owner" target="_blank">{{ runner.owner }}</n-button></td>
           <td>{{ runner.size }}</td>
           <td><code>{{ runner.iPv4 }}</code></td>
           <td>{{ runner.cloud }}</td>
           <td>{{ runner.profile }}</td>
           <td>{{ getRunnerState(runner.lastState) }}</td>
           <td>
-            <button @click="toggleDetails(runner.runnerId, runner.jobId)">Toggle Details</button>
-          </td>
-        </tr>
-        <!-- Job details -->
-        <!-- Timeline details -->
-        <tr v-if="visibleRunners.includes(runner.runnerId)">
-          <td colSpan="4" style="vertical-align: top;">
-            <div>
-              <h4>Runner Timeline</h4>
-              <table>
-                <thead>
-                  <tr>
-                    <th>Event Time</th>
-                    <th>Status</th>
-                    <th>Event</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr v-for="event in runner.lifecycle" :key="event.runnerLifecycleId">
-                    <td>{{ event.eventTimeUtc }}</td>
-                    <td>{{ getRunnerState(event.status)}}</td>
-                    <td>{{ event.event }}</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </td>
-          <td colSpan="5" style="vertical-align: top;">
-            <div>
-              <h4>Job Details</h4>
-              <div v-if="runner.job">
-                <table>
-                  <tr>
-                    <th>Repository</th><td><a :href="'https://github.com/' + runner.job.db.repository" target="_blank">{{ runner.job.db.repository}}</a></td>
-                    <th>Status</th><td>{{ getJobState(runner.job.db.state)}}</td>
-                  </tr>
-                  <tr>
-                    <th>GitHub Workflow</th><td><a :href="runner.job.gh.html_url" target="_blank">{{ runner.job.gh.workflow_name}} => {{ runner.job.gh.name }}</a></td>
-                    <th>GitHub Status</th><td>{{ runner.job.gh.status }} [{{ runner.job.gh.conclusion}}]</td>
-                  </tr>
-                  <tr>
-                    <th>Labels</th><td>
-                      <ul v-for="l in runner.job.gh.labels" v-bind:key="l">
-                        <li>{{ l }}</li>
-                      </ul>
-                    </td>
-                    <th>Branch/Ref</th><td>{{ runner.job.gh.head_branch }} [<a :href="getCommitUrl(runner.job.gh.head_sha, runner.job.db.repository)" target="_blank"><code>{{ runner.job.gh.head_sha}}</code></a>]</td>
-                  </tr>
-                </table>
-              </div>
-              <div v-else>
-                No Job assigned jet.
-              </div>
-            </div>
+            <n-button type="primary" @click="toggleDetails(runner.runnerId, runner.jobId)">Show Details</n-button>
           </td>
         </tr>
         </template>
       </tbody>
-    </table>
+    </n-table>
   </div>
 </template>
 
 <script>
+import {parseRunnerState, parseJobState} from '../common'
+import RunnerDetails from './RunnerDetails'
 import axios from 'axios';
+import moment from 'moment';
+import { ref } from 'vue';
 
 export default {
   name: 'RunnersView',
+  components: {
+    RunnerDetails
+  },
   data() {
     return {
       runners: [],
-      visibleRunners: [],
       jobs: [],
       searchRunner: "",
-      searchOnlyOnline: false
+      searchOnlyOnline: false,
+      selectedRunner: {}
     };
   },
+  setup() {
+    return {
+      show: ref(false)
+    }
+  },
   mounted() {
     this.fetchRunners();
     setInterval(this.fetchRunners, 10000);
   },
   computed: {
     sortedRunners() {
-      console.log("Triggered compute")
       return this.runners
         .filter(runner => {
           if(this.searchOnlyOnline === true) {
@@ -121,80 +95,39 @@ export default {
           } else {
             return runner.hostname.includes(this.searchRunner)
           }
-        })
-        .map(runner => ({
-        ...runner,
-        lifecycle: runner.lifecycle.slice().sort((a, b) => new Date(a.eventTimeUtc) - new Date(b.eventTimeUtc)),
-        job: this.jobs.find(j => j.runnerId === runner.runnerId)
-      }));
+        });
     }
   },
   methods: {
     getRunnerJobState(runner) {
-      if(runner.jobId) {
-        if(runner.job) {
-          return this.getJobState(runner.job.db.state); 
-        }
-        else {
-          return "welp"
-        }
+      if(runner.job) {
+        return this.getJobState(runner.job.state); 
       }
       else {
         return "🔎 No job assigned";
       }
     },
-    getCommitUrl(sha, repo) {
-      return "https://github.com/" + repo + "/commit/" + sha
+    getAge(timestamp) {
+      return moment(timestamp).fromNow();
     },
     getStatusIcon(isOnline) {
       return isOnline ? "🟢" : "🔴";
     },
     getRunnerState(statusCode) {
-      const RunnerStatus = {
-        0: "Unknown",
-        1: "🏗️ Creation queued",
-        2: "🏗️ Created",
-        3: "✅ Provisioned",
-        4: "⏳ Processing",
-        5: "💣 Deletion queued",
-        6: "🪦  Deleted",
-        7: "⚠️  Failure",
-        8: "VanishedOnCloud",
-        9: "🧹 Cleanup"
-      };
-      if (Object.prototype.hasOwnProperty.call(RunnerStatus, statusCode)) {
-        return RunnerStatus[statusCode];
-      }
-      return "Unknown";  // Default case if status code is not found
-
+      return parseRunnerState(statusCode)
     },
-    getJobState(statusCode) {
-      const JobState = {
-        0: "Unknown",
-        1: "⏸️  Queued",
-        2: "▶️  In Progress",
-        3: "✅ Completed"
-      };
-      if (Object.prototype.hasOwnProperty.call(JobState, statusCode)) {
-        return JobState[statusCode];
-      }
-      return "Unknown";  // Default case if status code is not found
-
+    getJobState(code) {
+      return parseJobState(code)
     },
     async fetchRunners() {
       let runnerResp = await axios.get(process.env.VUE_APP_API_URL + '/api/get-runners');
-      this.runners = runnerResp.data;
+      this.runners = runnerResp.data.map(runner => ({
+        ...runner,
+        lifecycle: runner.lifecycle.slice().sort((a, b) => new Date(a.eventTimeUtc) - new Date(b.eventTimeUtc)),
+      }));
 
-      // Fetch job infos
-      for(var r of this.runners) {
-        if(r.jobId) {
-          let loadGh = this.visibleRunners.includes(r.runnerId)
-          await this.fetchJob(r.jobId, r.runnerId, loadGh)
-        }
-      }
-          
     },
-    async fetchJob(jobid,runnerid, withGithub) {
+    async fetchJob(jobid,runnerid) {
       if(!jobid) { return }
       let jobDb = await axios.get(process.env.VUE_APP_API_URL + '/api/get-job/'+jobid);
 
@@ -209,47 +142,12 @@ export default {
         db: jobDb.data,
         gh: {}
       })
-
-      if(withGithub)  {
-        try {
-        let resp = await axios.get(jobDb.data.jobUrl);
-        let j = this.jobs.find(j => j.runnerId === runnerid);
-        j['gh'] = resp.data;
-        }
-        catch {
-          console.log("unable to query github")
-        }
-      }
-          
-
     },
-    toggleDetails(id,jobid) {
-      const index = this.visibleRunners.indexOf(id);
-      if (index > -1) {
-        this.visibleRunners.splice(index, 1);
-      } else {
-        this.fetchJob(jobid,id,true)
-        this.visibleRunners.push(id);
-      }
+    toggleDetails(id) {
+      this.selectedRunner = this.runners.find(x => x.runnerId === id);
+      this.show = true
     }
   }
 }
 </script>
 
-<style>
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-th, td {
-  border: 1px solid #6EACDA;
-  padding: 8px;
-  text-align: left;
-}
-
-button {
-  margin: 10px 0;
-}
-</style>
-
diff --git a/src/main.js b/src/main.js
index 1d4acd7..62afb47 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,3 +1,23 @@
 import { createApp } from 'vue'
+import naive from "naive-ui";
 import App from './App.vue'
-createApp(App).mount('#app')
+
+import RunnersView from './components/Runners.vue'
+import JobsView from './components/Jobs.vue'
+import { createMemoryHistory, createRouter } from 'vue-router'
+
+const routes = [
+  { path: '/', component: RunnersView },
+  { path: '/runners', component: RunnersView },
+  { path: '/jobs', component: JobsView },
+]
+
+const router = createRouter({
+  history: createMemoryHistory(),
+  routes,
+})
+
+const app = createApp(App);
+app.use(router);
+app.use(naive);
+app.mount('#app')