diff --git a/app.config.js b/app.config.js
new file mode 100644
index 0000000..d16b9b9
--- /dev/null
+++ b/app.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  statusServiceUri: process.env.NEXT_STATUS_API_URI || 'http://localhost:3000'
+}
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
index 76250fc..e2468dd 100644
--- a/node_modules/.package-lock.json
+++ b/node_modules/.package-lock.json
@@ -1458,6 +1458,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
+      "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
diff --git a/package-lock.json b/package-lock.json
index 24efedc..dc28b46 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "axios": "^0.27.2",
+        "dotenv": "^16.0.3",
         "next": "12.3.1",
         "react": "18.2.0",
         "react-dom": "18.2.0"
@@ -1647,6 +1648,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
+      "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
@@ -5093,6 +5102,11 @@
         "esutils": "^2.0.2"
       }
     },
+    "dotenv": {
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
+      "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ=="
+    },
     "elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
diff --git a/package.json b/package.json
index d988891..3fe73fd 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
+    "dotenv": "^16.0.3",
     "next": "12.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"
diff --git a/pages/index.tsx b/pages/index.tsx
index 9b4eae8..176ff24 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -13,90 +13,56 @@ const Home: NextPage = () => {
       </Head>
 
       <main className={styles.main}>
-        <h1 className={styles.title}>
-          Ocean Status
-        </h1>
+        <h1 className={styles.title}>Ocean Status</h1>
 
         <p className={styles.description}>
-        Current Status of Ocean Components{' '}
-          
+          Current Status of Ocean Components{' '}
         </p>
 
         <div className={styles.grid}>
-          <div  className={styles.card}>
+          <div className={styles.card}>
             <h2>Aquarius</h2>
             <p>UP</p>
           </div>
 
-          <div  className={styles.card}>
+          <div className={styles.card}>
             <h2>Provider</h2>
             <p>UP</p>
           </div>
 
-          <div
-            
-            className={styles.card}
-          >
+          <div className={styles.card}>
             <h2>Subgraph</h2>
             <p>UP</p>
           </div>
 
-          <div
-            className={styles.card}
-          >
+          <div className={styles.card}>
             <h2>Market</h2>
-            <p>
-              UP
-            </p>
+            <p>UP</p>
           </div>
-          <div
-            className={styles.card}
-          >
+          <div className={styles.card}>
             <h2>Port</h2>
-            <p>
-              UP
-            </p>
+            <p>UP</p>
           </div>
-          <div
-            className={styles.card}
-          >
+          <div className={styles.card}>
             <h2>Data Farming</h2>
-            <p>
-              UP
-            </p>
+            <p>UP</p>
           </div>
-          <div
-            className={styles.card}
-          >
+          <div className={styles.card}>
             <h2>Operator Service</h2>
-            <p>
-              UP
-            </p>
+            <p>UP</p>
           </div>
-          <div
-            className={styles.card}
-          >
+          <div className={styles.card}>
             <h2>Faucet</h2>
-            <p>
-              UP
-            </p>
+            <p>UP</p>
           </div>
-          <div
-            className={styles.card}
-          >
+          <div className={styles.card}>
             <h2>DAO Grants</h2>
-            <p>
-              UP
-            </p>
+            <p>UP</p>
           </div>
         </div>
       </main>
 
-      <footer className={styles.footer}>
-       
-     
-    
-      </footer>
+      <footer className={styles.footer}></footer>
     </div>
   )
 }
diff --git a/utils/getData.ts b/utils/getData.ts
new file mode 100644
index 0000000..5a3490a
--- /dev/null
+++ b/utils/getData.ts
@@ -0,0 +1,18 @@
+import axios, { AxiosResponse } from 'axios'
+import { Status } from '../@types'
+import { statusServiceUri } from '../app.config'
+
+export async function getData(): Promise<Status[] | void> {
+  try {
+    const response: AxiosResponse<Status[]> = await axios.get(
+      `${statusServiceUri}`
+    )
+    if (!response || response.status !== 200 || !response.data) return
+
+    const data = { ...response.data }
+    console.log('data', data)
+    return data
+  } catch (error) {
+    console.log(error)
+  }
+}