diff --git a/web/package-lock.json b/web/package-lock.json
index 2561e24..dd8b796 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -22248,6 +22248,7 @@
       "integrity": "sha512-tRuMRhxN4m1Y8hP9SNYfz7jRwt8lZdWxdjg/ohg5esKmsndJIn4yT96oJVcf5x0eA11taXl+sIp+ielu529k6g==",
       "dev": true,
       "requires": {
+        "cosmiconfig": "^7",
         "ts-node": "^10.7.0"
       }
     },
@@ -22335,7 +22336,9 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
           "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-          "requires": {}
+          "requires": {
+            "ajv": "^8.0.0"
+          }
         },
         "ajv-keywords": {
           "version": "5.1.0",
@@ -23430,7 +23433,9 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
           "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-          "requires": {}
+          "requires": {
+            "ajv": "^8.0.0"
+          }
         },
         "ajv-keywords": {
           "version": "5.1.0",
@@ -26726,7 +26731,9 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
           "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-          "requires": {}
+          "requires": {
+            "ajv": "^8.0.0"
+          }
         },
         "ajv-keywords": {
           "version": "5.1.0",
@@ -27776,6 +27783,7 @@
         "css-has-pseudo": "^2.0.0",
         "css-prefers-color-scheme": "^5.0.0",
         "cssdb": "^5.0.0",
+        "postcss": "^8.3",
         "postcss-attribute-case-insensitive": "^5.0.0",
         "postcss-color-functional-notation": "^4.0.1",
         "postcss-color-hex-alpha": "^8.0.0",
@@ -30059,7 +30067,9 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
           "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-          "requires": {}
+          "requires": {
+            "ajv": "^8.0.0"
+          }
         },
         "ajv-keywords": {
           "version": "5.1.0",
@@ -30139,7 +30149,9 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
           "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-          "requires": {}
+          "requires": {
+            "ajv": "^8.0.0"
+          }
         },
         "ajv-keywords": {
           "version": "5.1.0",
diff --git a/web/src/App.js b/web/src/App.js
index b4e34fb..496b286 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -35,7 +35,7 @@ function App() {
           ]}
         />
       </div>
-      <div className="grid grid-cols-1 gap-y-4">
+      <div className="grid grid-cols-1 gap-y-4 pb-32">
         <Services store={store} />
       </div>
     </div>
diff --git a/web/src/Service.jsx b/web/src/Service.jsx
index 46ec7f0..26c8fdf 100644
--- a/web/src/Service.jsx
+++ b/web/src/Service.jsx
@@ -2,16 +2,16 @@ import React from 'react';
 import Timeline from './Timeline';
 
 function Service(props) {
-  const { stack, alerts } = props;
+  const { service, alerts } = props;
 
-  const deployment = stack.deployment;
+  const deployment = service.deployment;
 
   return (
     <>
       <div className="w-full flex items-center justify-between space-x-6 bg-white pb-6 rounded-lg border border-neutral-300 shadow-lg">
         <div className="flex-1">
           <h3 className="flex text-lg font-bold rounded p-4">
-            <span className="cursor-pointer">{stack.service.name}</span>
+            <span className="cursor-pointer">{service.svc.metadata.name}</span>
             <>
             <div className="flex items-center ml-auto space-x-2">
               { deployment &&
@@ -36,8 +36,8 @@ function Service(props) {
                 <div>
                   <p className="text-base text-neutral-600">Pods</p>
                   {
-                    deployment && deployment.pods && deployment.pods.map((pod) => (
-                      <Pod key={pod.name} pod={pod} />
+                    service.pods.map((pod) => (
+                      <Pod key={pod.metadata.name} pod={pod} />
                     ))
                   }
                 </div>
@@ -121,13 +121,13 @@ function Service(props) {
                   <p className="text-base text-neutral-600">Address</p>
                   <div className="text-neutral-900 text-sm">
                     <div className="relative">
-                    {stack.service.name}.{stack.service.namespace}.svc.cluster.local
+                    {service.svc.name}.{service.svc.namespace}.svc.cluster.local
                     <button
                       className="absolute right-0 bg-transparent hover:bg-neutral-100 font-medium text-sm text-neutral-700 py-1 px-4 border border-neutral-300 rounded">
                       Port-forward command
                     </button>
                     </div>
-                    {stack.ingresses ? stack.ingresses.map((ingress) =>
+                    {service.ingresses ? service.ingresses.map((ingress) =>
                       <p key={`${ingress.namespace}/${ingress.name}`}>
                         <a href={'https://' + ingress.url} target="_blank" rel="noopener noreferrer">{ingress.url}
                         <svg xmlns="http://www.w3.org/2000/svg"
@@ -172,7 +172,7 @@ function Pod(props) {
 
   let color;
   let pulsar;
-  switch (pod.status) {
+  switch (pod.status.phase) {
     case 'Running':
       color = 'bg-green-200';
       pulsar = '';
@@ -194,8 +194,8 @@ function Pod(props) {
   }
 
   return (
-    <span className={`inline-block mr-1 mt-2 shadow-lg ${color} ${pulsar} font-bold px-2 cursor-default`} title={`${pod.name} - ${pod.status}`}>
-      {pod.status}
+    <span className={`inline-block mr-1 mt-2 shadow-lg ${color} ${pulsar} font-bold px-2 cursor-default`} title={`${pod.metadata.name} - ${pod.status}`}>
+      {pod.status.phase}
     </span>
   );
 }
diff --git a/web/src/Services.js b/web/src/Services.js
index 1320587..7955d4b 100644
--- a/web/src/Services.js
+++ b/web/src/Services.js
@@ -7,40 +7,13 @@ const Services = memo(function Services(props) {
   const [services, setServices] = useState(store.getState().services);
   store.subscribe(() => setServices(store.getState().services))
 
-  console.log(services)
-
   return (
     <>
-      <Service
-        stack={{
-          deployment: {
-            pods: [
-              { name: "xxx", status: "Running" },
-              { name: "yyy", status: "Running" }
-            ]
-          },
-          service: {
-            name: "my-app",
-            namespace: "default"
-          }
-        }}
-        alerts={[]}
-      />
-      <Service
-        stack={{
-          deployment: {
-            pods: [
-              { name: "zzz", status: "Running" },
-              { name: "uuu", status: "Running" }
-            ]
-          },
-          service: {
-            name: "your-app",
-            namespace: "default"
-          }
-        }}
-        alerts={[]}
-      />
+      {services.map((service) => {
+        return (
+          <Service key={`${service.svc.metadata.namespace}/${service.svc.metadata.name}`} service={service} alerts={[]} />
+        )
+      })}
     </>
   )
 })