diff --git a/package-lock.json b/package-lock.json
index 73e128e..685afd7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "status-frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@oceanprotocol/art": "^3.2.0",
         "@oceanprotocol/contracts": "^1.1.7",
         "@oceanprotocol/typographies": "^0.1.0",
         "@svgr/webpack": "^6.5.0",
@@ -2833,6 +2834,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@oceanprotocol/art": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/art/-/art-3.2.0.tgz",
+      "integrity": "sha512-aUQtg4m5hJlQ0u8C29O9TXJWcAenO3G9vP+vf6LNFkpTDOCMycN/F0SzHS89VNrvGUha8oTDEg7FAkfZBPv2WA=="
+    },
     "node_modules/@oceanprotocol/contracts": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.1.7.tgz",
@@ -8494,6 +8500,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@oceanprotocol/art": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/art/-/art-3.2.0.tgz",
+      "integrity": "sha512-aUQtg4m5hJlQ0u8C29O9TXJWcAenO3G9vP+vf6LNFkpTDOCMycN/F0SzHS89VNrvGUha8oTDEg7FAkfZBPv2WA=="
+    },
     "@oceanprotocol/contracts": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.1.7.tgz",
diff --git a/package.json b/package.json
index 888e31c..0f8bada 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "test": "npm run lint"
   },
   "dependencies": {
+    "@oceanprotocol/art": "^3.2.0",
     "@oceanprotocol/contracts": "^1.1.7",
     "@oceanprotocol/typographies": "^0.1.0",
     "@svgr/webpack": "^6.5.0",
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index b11ff08..8d38775 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -29,11 +29,14 @@ function statusStyle(state: State) {
 
 export default function HomePage(): ReactElement {
   const [data, setData] = useState<{ [key: string]: Status }>()
+  const [isLoading, setIsloading] = useState<boolean>()
 
   useEffect(() => {
     async function getStatuses() {
+      setIsloading(true)
       const data = await getData()
       setData(data)
+      setIsloading(false)
     }
     getStatuses()
   }, [])
@@ -60,84 +63,90 @@ export default function HomePage(): ReactElement {
       </header>
 
       <main>
-        {Object.entries(data || {}).map(([key, value]) => {
-          const networkKey = key
+        {isLoading ? (
+          <div className={styles.loading}>Loading...</div>
+        ) : (
+          Object.entries(data || {}).map(([key, value]) => {
+            const networkKey = key
 
-          return (
-            <Fragment key={networkKey}>
-              <h2 className={styles.networkName}>{networkKey}</h2>
-              <div className={styles.grid}>
-                {Object.entries(value)
-                  .filter(
-                    // TODO: Remove this filter if we fix this on API level
-                    // Needs a new `components` key under Status response
-                    ([key]) =>
-                      key !== 'currentBlock' &&
-                      key !== 'lastUpdatedOn' &&
-                      key !== 'network' &&
-                      key !== '_id' &&
-                      key !== '__v'
-                  )
-                  .map(([key, value]) => (
-                    <div
-                      key={key}
-                      className={`${styles.card} ${statusStyle(
-                        // TODO: all component states should be of type Status on API level
-                        key === 'market' || key === 'dataFarming'
-                          ? value
-                          : value.status
-                      )}`}
-                    >
-                      <h2 className={styles.titleComponent}>
-                        {statusIcon(
+            return (
+              <Fragment key={networkKey}>
+                <h2 className={styles.networkName}>{networkKey}</h2>
+                <div className={styles.grid}>
+                  {Object.entries(value)
+                    .filter(
+                      // TODO: Remove this filter if we fix this on API level
+                      // Needs a new `components` key under Status response
+                      ([key]) =>
+                        key !== 'currentBlock' &&
+                        key !== 'lastUpdatedOn' &&
+                        key !== 'network' &&
+                        key !== '_id' &&
+                        key !== '__v'
+                    )
+                    .map(([key, value]) => (
+                      <div
+                        key={key}
+                        className={`${styles.card} ${statusStyle(
+                          // TODO: all component states should be of type Status on API level
                           key === 'market' || key === 'dataFarming'
                             ? value
                             : value.status
-                        )}{' '}
-                        {key}
-                        <code
-                          className={styles.version}
-                          title="deployed version"
-                        >
-                          {value.version}
-                        </code>
-                      </h2>
+                        )}`}
+                      >
+                        <h2 className={styles.titleComponent}>
+                          {statusIcon(
+                            key === 'market' || key === 'dataFarming'
+                              ? value
+                              : value.status
+                          )}{' '}
+                          {key}
+                          <code
+                            className={styles.version}
+                            title="deployed version"
+                          >
+                            {value.version}
+                          </code>
+                        </h2>
 
-                      {value.statusMessages && value.statusMessages !== '' && (
-                        <ul className={styles.messages}>
-                          {value.statusMessages
-                            .split(',')
-                            .map((message: string, i: number) => (
-                              <li key={i} className={styles.statusMessage}>
-                                {message}
-                              </li>
-                            ))}
-                        </ul>
-                      )}
-                    </div>
-                  ))}
-              </div>
+                        {value.statusMessages && value.statusMessages !== '' && (
+                          <ul className={styles.messages}>
+                            {value.statusMessages
+                              .split(',')
+                              .map((message: string, i: number) => (
+                                <li key={i} className={styles.statusMessage}>
+                                  {message}
+                                </li>
+                              ))}
+                          </ul>
+                        )}
+                      </div>
+                    ))}
+                </div>
 
-              <details className={styles.contracts}>
-                <summary>
-                  <h3 className={styles.titleComponent}>Deployed Contracts</h3>
-                </summary>
-                <ul>
-                  {Object.entries((addresses as any)[networkKey]).map(
-                    ([key, value]) =>
-                      key !== 'chainId' &&
-                      key !== 'startBlock' && (
-                        <li key={key}>
-                          <code className={styles.key}>{key}</code>:{' '}
-                          <code>{JSON.stringify(value)}</code>
-                        </li>
-                      )
-                  )}
-                </ul>
-              </details>
-            </Fragment>
-          )
-        })}
+                <details className={styles.contracts}>
+                  <summary>
+                    <h3 className={styles.titleComponent}>
+                      Deployed Contracts
+                    </h3>
+                  </summary>
+                  <ul>
+                    {Object.entries((addresses as any)[networkKey]).map(
+                      ([key, value]) =>
+                        key !== 'chainId' &&
+                        key !== 'startBlock' && (
+                          <li key={key}>
+                            <code className={styles.key}>{key}</code>:{' '}
+                            <code>{JSON.stringify(value)}</code>
+                          </li>
+                        )
+                    )}
+                  </ul>
+                </details>
+              </Fragment>
+            )
+          })
+        )}
       </main>
 
       <footer className={styles.footer}></footer>
diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css
index ea52c61..02f9bc4 100644
--- a/src/styles/Home.module.css
+++ b/src/styles/Home.module.css
@@ -1,6 +1,8 @@
 .container {
   padding: var(--spacer);
   margin: 0 auto;
+  background: url('../../node_modules/@oceanprotocol/art/waves/waves.svg')
+    no-repeat center 13.5rem;
 }
 
 @media screen and (min-width: 50rem) {
@@ -36,7 +38,7 @@
 }
 
 .networkName {
-  margin-top: calc(var(--spacer) * 2);
+  margin-top: calc(var(--spacer) * 3);
   text-transform: capitalize;
 }
 
@@ -45,8 +47,10 @@
   text-align: left;
   color: inherit;
   text-decoration: none;
+  background: var(--background-content);
   border-radius: var(--border-radius);
-  border: 2px solid var(--border-color);
+  box-shadow: 0 6px 17px 0 var(--box-shadow-color);
+  border: 1px solid var(--border-color);
 }
 
 .titleComponent {
@@ -72,7 +76,7 @@
   fill: var(--font-color-heading);
   height: 4rem;
   width: 4rem;
-  margin: 0 auto;
+  margin: 0 auto calc(var(--spacer) / 2) auto;
 }
 
 .icon {
@@ -110,3 +114,8 @@
 .contracts .titleComponent {
   display: inline-block;
 }
+
+.loading {
+  margin-top: 30vh;
+  text-align: center;
+}