diff --git a/client/src/components/AnlyticsStatus.vue b/client/src/components/AnlyticsStatus.vue
new file mode 100644
index 0000000..478e3ca
--- /dev/null
+++ b/client/src/components/AnlyticsStatus.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="analytic-status">
+    analytic status: <strong> {{ status }} </strong>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { getStatusGenerator } from '@/services/analytics.service';
+
+
+
+export default defineComponent({
+  name: 'AnalyticStatus',
+  components: {
+  },
+  data: function name() {
+    return {
+      status: "loading..."
+    }
+  },
+  mounted: async function() {
+    let g = getStatusGenerator();
+    for await (const data of g) {
+      this.status = data.toLowerCase();
+    }
+  }
+});
+</script>
diff --git a/client/src/components/Graph.vue b/client/src/components/Graph.vue
index 2fe2bdc..192f3b7 100644
--- a/client/src/components/Graph.vue
+++ b/client/src/components/Graph.vue
@@ -1,12 +1,6 @@
 <template>
   <div>
     <div id="chart"></div>
-    <div id="controls">
-      <div>
-        Hold <pre>ctrl</pre> to label patterns <br/>
-        Holde key <pre>D</pre> to delete patterns
-      </div>
-    </div>
   </div>
 </template>
 
@@ -107,8 +101,4 @@ export default defineComponent({
   width: 80%;
   height: 350px;
 }
-
-pre {
-  display: inline;
-}
 </style>
diff --git a/client/src/services/analytics.service.ts b/client/src/services/analytics.service.ts
new file mode 100644
index 0000000..1507591
--- /dev/null
+++ b/client/src/services/analytics.service.ts
@@ -0,0 +1,22 @@
+// TODO: https://github.com/hastic/hastic-grafana-app/blob/c67bd8af140105c36f24c875187929869e48e51e/src/panel/graph_panel/services/analytic_service.ts
+
+import { API_URL } from "@/config";
+import axios from 'axios';
+
+import { getGenerator } from '@/utils';
+
+import _ from 'lodash';
+
+const ANALYTICS_API_URL = API_URL + "analytics/";
+
+export async function getStatus(): Promise<string> {
+  const uri = ANALYTICS_API_URL + `status`;
+  const res = await axios.get(uri);
+  const data = res['data'] as any;
+  console.log(data.status);
+  return data.status;
+}
+
+export function getStatusGenerator(): AsyncIterableIterator<string> {
+  return getGenerator<string>(100, getStatus);
+}
diff --git a/client/src/utils.ts b/client/src/utils.ts
new file mode 100644
index 0000000..72aa441
--- /dev/null
+++ b/client/src/utils.ts
@@ -0,0 +1,15 @@
+export async function *getGenerator<T>(
+  duration: number,
+  func: (...args: any[]) => Promise<T>,
+  ...args
+): AsyncIterableIterator<T> {
+
+  let timeout = async () => new Promise(
+    resolve => setTimeout(resolve, duration)
+  );
+
+  while(true) {
+    yield await func(...args);
+    await timeout();
+  }
+}
\ No newline at end of file
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index e3d2836..6e92e46 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -2,17 +2,35 @@
   <div class="home">
     <img alt="Vue logo" src="../assets/logo.png">
     <graph />
+    
+    <div id="controls">
+      <div>
+        Hold <pre>ctrl</pre> to label patterns <br/>
+        Holde key <pre>D</pre> to delete patterns
+      </div>
+      <analytic-status />
+    </div>
+
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Graph from '@/components/Graph.vue';
+import AnalyticStatus from '@/components/AnlyticsStatus.vue';
+
 
 export default defineComponent({
   name: 'Home',
   components: {    
     Graph,
-  },
+    AnalyticStatus
+  }
 });
 </script>
+
+<style scoped>
+pre {
+  display: inline;
+}
+</style>