diff --git a/_data/serverState.ts b/_data/serverState.ts
new file mode 100644
index 000000000..379f59072
--- /dev/null
+++ b/_data/serverState.ts
@@ -0,0 +1,51 @@
+import type { Server, ServerState } from '~/types/server';
+
+function makeid(length: number) {
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
+  const charactersLength = characters.length;
+  let result = '';
+  for (let i = 0; i < length; i++) result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  return result;
+}
+
+const registeredGuid = `1111-1111-${makeid(4)}-123412341234`; // this guid is registered in key server
+const newGuid = `1234-1234-${makeid(4)}-123412341234`; // this is a new USB, not registered
+const regWizTime = `1616711990500_${registeredGuid}`;
+const blacklistedGuid = '154B-00EE-0700-9B50CF819816';
+
+// ENOKEYFILE
+// TRIAL
+// BASIC
+// PLUS
+// PRO
+// EEXPIRED
+// EGUID
+// EGUID1
+// ETRIAL
+// ENOKEYFILE2
+// ENOKEYFILE1
+// ENOFLASH
+// EBLACKLISTED
+// EBLACKLISTED1
+// EBLACKLISTED2
+// ENOCONN
+const state: string = 'TRIAL';
+
+const uptime = Date.now() - 60 * 60 * 1000; // 1 hour ago
+let expireTime = 0;
+if (state === 'TRIAL') expireTime = Date.now() + 60 * 60 * 1000; // in 1 hour
+if (state === 'EEXPIRED') expireTime = uptime; // 1 hour ago
+
+const serverState = {
+  name: 'DevServer9000',
+  description: 'Fully automated media server and lab rig',
+  guid: '9292-1111-BITE-444444444444',
+  deviceCount: 8,
+  site: 'http://localhost:4321',
+  state,
+  locale: 'en',
+  expireTime,
+  uptime,
+};
+
+export default serverState;
\ No newline at end of file
diff --git a/components/ServerState.vue b/components/ServerState.vue
new file mode 100644
index 000000000..5392cfcb3
--- /dev/null
+++ b/components/ServerState.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { useServerStore } from '~/store/server';
+const serverStore = useServerStore();
+const { state, stateData } = storeToRefs(serverStore);
+</script>
+
+<template>
+  <template v-if="stateData.actions.includes('upgrade')">
+    <button
+      @click="console.log('TODO-UPGRADE_LINK')"
+      class="link text-gamma"
+      :title="'Upgrade'"
+    >
+      <h5>Unraid OS <em><strong>{{ stateData.humanReadable }}</strong></em></h5>
+    </button>
+  </template>
+  <h5 v-else>
+    Unraid OS <em :class="{ 'text-red': stateData.error || state === 'EEXPIRED' }"><strong>{{ stateData.humanReadable }}</strong></em>
+  </h5>
+
+  <template v-if="stateData.actions.includes('purchase')">
+    <button
+      @click="console.log('TODO-PURCHASE_LINK')"
+      class="link text-orange-dark ml-3"
+      :title="'Purchase'"
+    >{{ 'Purchase' }}</button>
+  </template>
+</template>
+
+
+<style lang="postcss" scoped>
+.link {
+  @apply text-sm font-semibold transition-colors duration-150 ease-in-out border-t-0 border-l-0 border-r-0 border-b-2 border-transparent;
+}
+
+.link:hover,
+.link:focus {
+  /* @apply text-alpha; */
+  @apply border-orange-dark;
+}
+
+.link:focus {
+  @apply outline-none;
+}
+</style>
\ No newline at end of file