diff --git a/integration/manualtests/tx_test.go b/integration/manualtests/tx_test.go
index 72d37b3a84..1c71ff29c3 100644
--- a/integration/manualtests/tx_test.go
+++ b/integration/manualtests/tx_test.go
@@ -34,7 +34,7 @@ const (
 // Testnet values used for quick debugging:
 // l1 host: testnet-eth2network.uksouth.cloudapp.azure.com
 // l1 port: 9000
-// l2 host: testnet.obscu.ro
+// l2 host: erpc.testnet.obscu.ro
 // l2 port: 81
 // l2wallet: 8dfb8083da6275ae3e4f41e3e8a8c19d028d32c9247e24530933782f2a05035b -> 0xA58C60cc047592DE97BF1E8d2f225Fc5D959De77
 
@@ -48,10 +48,10 @@ var (
 
 	l2Wallet = wallet.NewInMemoryWalletFromConfig(
 		"4bfe14725e685901c062ccd4e220c61cf9c189897b6c78bd18d7f51291b2b8f8",
-		443,
+		777,
 		gethlog.New())
-	l2Host = "localhost"
-	l2Port = 43900
+	l2Host = "erpc.testnet.obscu.ro"
+	l2Port = 81
 )
 
 func TestL1IssueContractInteractWaitReceipt(t *testing.T) {
@@ -327,8 +327,9 @@ func TestL2IssueTxWaitReceipt(t *testing.T) {
 	require.NoError(t, err)
 
 	if balance.Cmp(big.NewInt(0)) <= 0 {
-		t.Errorf("not enough balance: has %s has %s obx", l2Wallet.Address().Hex(), balance.String())
+		t.Fatalf("not enough balance: has %s has %s obx", l2Wallet.Address().Hex(), balance.String())
 	}
+	fmt.Println("balance: ", balance.String())
 
 	toAddr := datagenerator.RandomAddress()
 	nonce, err := authClient.NonceAt(ctx, nil)
diff --git a/tools/obscuroscan_v2/frontend/src/App.vue b/tools/obscuroscan_v2/frontend/src/App.vue
index 32a3e5cd18..2466145094 100644
--- a/tools/obscuroscan_v2/frontend/src/App.vue
+++ b/tools/obscuroscan_v2/frontend/src/App.vue
@@ -36,14 +36,6 @@ export default {
 </script>
 
 <style scoped>
-.nav-bar-header {
-  background:black;
-  min-height: 40vh;
-}
-
-.main-content {
-  margin-top: -35vh;
-}
 
 .bot-bar {
   background:black;
diff --git a/tools/obscuroscan_v2/frontend/src/assets/imgs/icon_contracts.png b/tools/obscuroscan_v2/frontend/src/assets/imgs/icon_contracts.png
new file mode 100644
index 0000000000..d22f56f573
Binary files /dev/null and b/tools/obscuroscan_v2/frontend/src/assets/imgs/icon_contracts.png differ
diff --git a/tools/obscuroscan_v2/frontend/src/assets/imgs/icon_ethereum.png b/tools/obscuroscan_v2/frontend/src/assets/imgs/icon_ethereum.png
new file mode 100644
index 0000000000..c94b2857e9
Binary files /dev/null and b/tools/obscuroscan_v2/frontend/src/assets/imgs/icon_ethereum.png differ
diff --git a/tools/obscuroscan_v2/frontend/src/assets/imgs/icon_l1_rollup.png b/tools/obscuroscan_v2/frontend/src/assets/imgs/icon_l1_rollup.png
new file mode 100644
index 0000000000..780575ecdb
Binary files /dev/null and b/tools/obscuroscan_v2/frontend/src/assets/imgs/icon_l1_rollup.png differ
diff --git a/tools/obscuroscan_v2/frontend/src/assets/imgs/icon_l2_batch.png b/tools/obscuroscan_v2/frontend/src/assets/imgs/icon_l2_batch.png
new file mode 100644
index 0000000000..780575ecdb
Binary files /dev/null and b/tools/obscuroscan_v2/frontend/src/assets/imgs/icon_l2_batch.png differ
diff --git a/tools/obscuroscan_v2/frontend/src/assets/imgs/icon_metamask.png b/tools/obscuroscan_v2/frontend/src/assets/imgs/icon_metamask.png
new file mode 100644
index 0000000000..9696ef127e
Binary files /dev/null and b/tools/obscuroscan_v2/frontend/src/assets/imgs/icon_metamask.png differ
diff --git a/tools/obscuroscan_v2/frontend/src/assets/imgs/icon_nodes.png b/tools/obscuroscan_v2/frontend/src/assets/imgs/icon_nodes.png
new file mode 100644
index 0000000000..c41d108cfc
Binary files /dev/null and b/tools/obscuroscan_v2/frontend/src/assets/imgs/icon_nodes.png differ
diff --git a/tools/obscuroscan_v2/frontend/src/assets/imgs/icon_transactions.png b/tools/obscuroscan_v2/frontend/src/assets/imgs/icon_transactions.png
new file mode 100644
index 0000000000..d22f56f573
Binary files /dev/null and b/tools/obscuroscan_v2/frontend/src/assets/imgs/icon_transactions.png differ
diff --git a/tools/obscuroscan_v2/frontend/src/assets/imgs/obscuro_logo_black.png b/tools/obscuroscan_v2/frontend/src/assets/imgs/obscuro_logo_black.png
new file mode 100644
index 0000000000..4ebaa8ecfb
Binary files /dev/null and b/tools/obscuroscan_v2/frontend/src/assets/imgs/obscuro_logo_black.png differ
diff --git a/tools/obscuroscan_v2/frontend/src/components/MetaMaskConnectButton.vue b/tools/obscuroscan_v2/frontend/src/components/MetaMaskConnectButton.vue
index ebe0213c32..d556c2fa41 100644
--- a/tools/obscuroscan_v2/frontend/src/components/MetaMaskConnectButton.vue
+++ b/tools/obscuroscan_v2/frontend/src/components/MetaMaskConnectButton.vue
@@ -1,5 +1,8 @@
 <template>
-  <button @click="connectMetamask">Connect to Metamask</button>
+  <el-button @click="connectMetamask" size="large" >
+    <img src="@/assets/imgs/icon_metamask.png" alt="Connect with MetaMask" class="metamask-icon" />
+    Connect with MetaMask
+  </el-button>
 </template>
 
 <script>
@@ -40,5 +43,10 @@ export default {
 </script>
 
 <style scoped>
-/* Add your styles here */
+.metamask-icon {
+  width: 24px;       /* Set desired width */
+  height: 24px;      /* Set desired height */
+  object-fit: cover; /* Ensure image content is not distorted */
+  margin-right: 8px; /* Optional space between the icon and the text */
+}
 </style>
\ No newline at end of file
diff --git a/tools/obscuroscan_v2/frontend/src/components/PublicTxDataGrid.vue b/tools/obscuroscan_v2/frontend/src/components/PublicTxDataGrid.vue
index 763e4aa920..d8dddc2378 100644
--- a/tools/obscuroscan_v2/frontend/src/components/PublicTxDataGrid.vue
+++ b/tools/obscuroscan_v2/frontend/src/components/PublicTxDataGrid.vue
@@ -1,7 +1,7 @@
 <template>
   <el-card class="fill-width">
     <el-table  height="60vh" :data="publicTransactionsData">
-      <el-table-column prop="BatchHeight" label="BatchHeight" width="180" />
+      <el-table-column prop="BatchHeight" label="Batch Height" width="180" />
       <el-table-column prop="Finality" label="Finality" width="180" />
       <el-table-column prop="TransactionHash" label="Tx Hash"  />
     </el-table>
diff --git a/tools/obscuroscan_v2/frontend/src/components/RotatingBatchesItem.vue b/tools/obscuroscan_v2/frontend/src/components/RotatingBatchesItem.vue
index 2b70a5892e..294cd3355a 100644
--- a/tools/obscuroscan_v2/frontend/src/components/RotatingBatchesItem.vue
+++ b/tools/obscuroscan_v2/frontend/src/components/RotatingBatchesItem.vue
@@ -1,13 +1,12 @@
 <template>
-  <el-card class="centered-container">
-  <div class="slider-container">
-    <div class="slider-content" :class="{ 'slide-out': isAnimating }">
-      <el-card v-for="card in displayedCards" :key="card.hash" class="card-content">
-        <h3>Height: {{ card.number }}</h3>
+  <el-card class="centered-container" shadow="never" style="border-radius: 20px;">
+  <div class="slider-container" style="width: 100%;">
+    <div class="slider-content" :class="{ 'slide-out': isAnimating }" >
+      <el-card v-for="card in displayedCards" :key="card.hash" class="card-content box">
+        <h3 class="header-text" >Batch: {{ card.number }}</h3>
         <p>&nbsp;</p>
         <h5><ShortenedHash :hash="card.hash" /></h5>
         <h5><Timestamp :unixTimestampSeconds="Number(card.timestamp)" /></h5>
-        <h5>No of Txs: N/A</h5>
       </el-card>
     </div>
   </div>
@@ -47,6 +46,16 @@ export default {
 
 <style scoped>
 
+.box {
+  border-radius: 15px;
+  background: #F4F6FF;
+}
+
+.header-text {
+  color: #5973B8;
+  font-weight: bold;
+}
+
 .centered-container {
   display: flex;
   justify-content: center;  /* Center children horizontally */
@@ -67,6 +76,7 @@ export default {
   display: inline-block;
   width: 200px;  /* If 5 cards need to be displayed at a time, and container width is 1000px, then each card can be approximately 200px wide */
   margin-right: 20px;  /* Adjust as needed */
+  text-align: center;
 }
 
 
diff --git a/tools/obscuroscan_v2/frontend/src/components/RotatingRollupsItem.vue b/tools/obscuroscan_v2/frontend/src/components/RotatingRollupsItem.vue
index e4f1d83d48..d3a822d6d0 100644
--- a/tools/obscuroscan_v2/frontend/src/components/RotatingRollupsItem.vue
+++ b/tools/obscuroscan_v2/frontend/src/components/RotatingRollupsItem.vue
@@ -1,13 +1,13 @@
 <template>
-  <el-card class="centered-container">
-  <div class="slider-container">
+  <el-card class="centered-container" shadow="never" style="border-radius: 20px; ">
+  <div class="slider-container" style="width: 100%;">
     <div class="slider-content" :class="{ 'slide-out': isAnimating }">
-      <el-card v-for="card in displayedCards"  class="card-content">
-        <h3>Block: {{ card.L1ProofNumber }}</h3>
+      <el-card v-for="card in displayedCards"  class="card-content box">
+        <h3 class="header-text">Rollup: <ShortenedHash :hash="card.hash" /></h3>
         <p>&nbsp;</p>
-        <h5>R: <ShortenedHash :hash="card.hash" /></h5>
-        <h5>Block: <ShortenedHash :hash="card.L1Proof" /></h5>
-        <h5>No of Txs: N/A</h5>
+        <h5>Last Batch: {{ card.LastBatchSeqNo }}</h5>
+        <h5><ShortenedHash :hash="card.CompressionL1Head" /></h5>
+
       </el-card>
     </div>
   </div>
@@ -46,6 +46,16 @@ export default {
 
 <style scoped>
 
+.header-text {
+  color: #5973B8;
+  font-weight: bold;
+}
+
+.box {
+  border-radius: 15px;
+  background: #F4F6FF;
+}
+
 .centered-container {
   display: flex;
   justify-content: center;  /* Center children horizontally */
@@ -66,6 +76,7 @@ export default {
   display: inline-block;
   width: 200px;  /* If 5 cards need to be displayed at a time, and container width is 1000px, then each card can be approximately 200px wide */
   margin-right: 20px;  /* Adjust as needed */
+  text-align: center;
 }
 
 
diff --git a/tools/obscuroscan_v2/frontend/src/components/SummaryItem.vue b/tools/obscuroscan_v2/frontend/src/components/SummaryItem.vue
index 218129b240..50e5ea6ac5 100644
--- a/tools/obscuroscan_v2/frontend/src/components/SummaryItem.vue
+++ b/tools/obscuroscan_v2/frontend/src/components/SummaryItem.vue
@@ -1,65 +1,79 @@
 <template>
-  <el-row>
-    <el-col :span="4">
-      <el-card class="box" shadow="always">
-        <p>Ether Price</p>
+  <el-card shadow="never" style=" border-radius: 20px; ">
+  <el-row justify="space-evenly">
+    <el-col :span="4" >
+      <el-card class="box" shadow="never">
+        <p class="header-text">
+          <img class="icon" src="@/assets/imgs/icon_ethereum.png"/>
+          Ether Price
+        </p>
+
         <div>
           <div v-if="ethPriceUSD">$ {{ ethPriceUSD }}</div>
-          <div v-else>-</div>
+          <div v-else v-loading=true element-loading-background="#F4F6FF">loading...</div>
         </div>
       </el-card>
       <p>&nbsp;</p>
 
-      <el-card class="box" shadow="always">
-        <p>Nodes</p>
-        <p>n/a</p>
+      <el-card class="box" shadow="never">
+        <p class="header-text">
+          <img class="icon" src="@/assets/imgs/icon_nodes.png"/>
+          Nodes
+        </p>
+        <p v-loading=true element-loading-background="#F4F6FF">loading...</p>
       </el-card>
     </el-col>
 
-    <el-col :span="4" :offset="2">
-      <el-card class="box" shadow="always">
-        <p>Latest L2 Batch</p>
+    <el-col :span="4" :offset="3">
+      <el-card class="box" shadow="never">
+        <p class="header-text">
+          <img class="icon" src="@/assets/imgs/icon_l2_batch.png"/>
+          Latest L2 Batch
+        </p>
         <div>
           <div v-if="latestBatch">{{ latestBatch }}</div>
-          <div v-else>-</div>
+          <div v-else v-loading=true element-loading-background="#F4F6FF">loading...</div>
         </div>
       </el-card>
       <p>&nbsp;</p>
 
-      <el-card class="box" shadow="always">
-        <p>Latest L1 Rollup</p>
+      <el-card class="box" shadow="never">
+        <p class="header-text">
+          <img class="icon" src="@/assets/imgs/icon_l1_rollup.png"/>
+          Latest L1 Rollup
+        </p>
         <div>
           <div v-if="latestL1Proof">
             <ShortenedHash :hash="latestL1Proof" />
           </div>
-          <div v-else>-</div>
+          <div v-else v-loading=true element-loading-background="#F4F6FF">loading...</div>
         </div>
       </el-card>
     </el-col>
-    <el-col :span="4" :offset="2">
-      <el-card class="box" shadow="always">
-        <p>Transactions</p>
+    <el-col :span="4" :offset="3">
+      <el-card class="box" shadow="never">
+        <p class="header-text">
+          <img class="icon" src="@/assets/imgs/icon_transactions.png"/>
+          Transactions</p>
         <div>
           <div v-if="totalTransactionCount">{{ totalTransactionCount }}</div>
-          <div v-else>-</div>
+          <div v-else v-loading=true element-loading-background="#F4F6FF">loading...</div>
         </div>
       </el-card>
       <p>&nbsp;</p>
 
-      <el-card class="box" shadow="always">
-        <p>Contracts</p>
+      <el-card class="box" shadow="never">
+        <p class="header-text">
+          <img class="icon" src="@/assets/imgs/icon_contracts.png"/>
+          Contracts</p>
         <div>
           <div v-if="totalContractCount">{{ totalContractCount }}</div>
-          <div v-else>-</div>
+          <div v-else v-loading=true element-loading-background="#F4F6FF">loading...</div>
         </div>
       </el-card>
     </el-col>
-    <el-col :span="4" :offset="2">
-      <el-card class="box" shadow="always" style="min-height: 100%">
-        <p>News from Foundation</p>
-      </el-card>
-    </el-col>
   </el-row>
+  </el-card>
 </template>
 
 <script>
@@ -106,5 +120,21 @@ export default {
 <style scoped>
 .box {
   border-radius: 15px;
+  background: #F4F6FF;
+}
+
+.icon {
+  height: 24px;      /* Set desired height */
+  object-fit: cover; /* Ensure image content is not distorted */
+  margin-right: 8px; /* Optional space between the icon and the text */
+}
+
+.header-text {
+  color: #5973B8;
+  font-weight: bold;
+}
+
+.el-icon-loading:before {
+  color: red;
 }
 </style>
diff --git a/tools/obscuroscan_v2/frontend/src/components/icons/IconCommunity.vue b/tools/obscuroscan_v2/frontend/src/components/icons/IconCommunity.vue
deleted file mode 100644
index 2dc8b05525..0000000000
--- a/tools/obscuroscan_v2/frontend/src/components/icons/IconCommunity.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
-    />
-  </svg>
-</template>
diff --git a/tools/obscuroscan_v2/frontend/src/components/icons/IconDocumentation.vue b/tools/obscuroscan_v2/frontend/src/components/icons/IconDocumentation.vue
deleted file mode 100644
index 6d4791cfbc..0000000000
--- a/tools/obscuroscan_v2/frontend/src/components/icons/IconDocumentation.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
-    <path
-      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
-    />
-  </svg>
-</template>
diff --git a/tools/obscuroscan_v2/frontend/src/components/icons/IconEcosystem.vue b/tools/obscuroscan_v2/frontend/src/components/icons/IconEcosystem.vue
deleted file mode 100644
index c3a4f078c0..0000000000
--- a/tools/obscuroscan_v2/frontend/src/components/icons/IconEcosystem.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
-    <path
-      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
-    />
-  </svg>
-</template>
diff --git a/tools/obscuroscan_v2/frontend/src/components/icons/IconSupport.vue b/tools/obscuroscan_v2/frontend/src/components/icons/IconSupport.vue
deleted file mode 100644
index 7452834d3e..0000000000
--- a/tools/obscuroscan_v2/frontend/src/components/icons/IconSupport.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
-    />
-  </svg>
-</template>
diff --git a/tools/obscuroscan_v2/frontend/src/components/icons/IconTooling.vue b/tools/obscuroscan_v2/frontend/src/components/icons/IconTooling.vue
deleted file mode 100644
index 660598d7c7..0000000000
--- a/tools/obscuroscan_v2/frontend/src/components/icons/IconTooling.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    aria-hidden="true"
-    role="img"
-    class="iconify iconify--mdi"
-    width="24"
-    height="24"
-    preserveAspectRatio="xMidYMid meet"
-    viewBox="0 0 24 24"
-  >
-    <path
-      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
-      fill="currentColor"
-    ></path>
-  </svg>
-</template>
diff --git a/tools/obscuroscan_v2/frontend/src/views/NavbarView.vue b/tools/obscuroscan_v2/frontend/src/views/NavbarView.vue
index a75a23f6a0..bdbb04b05d 100644
--- a/tools/obscuroscan_v2/frontend/src/views/NavbarView.vue
+++ b/tools/obscuroscan_v2/frontend/src/views/NavbarView.vue
@@ -1,18 +1,17 @@
 <template>
   <header>
-    <el-row class="align-vertical" justify="space-between">
-      <el-col :span="6">
-        <img src="@/assets/imgs/obscuroscan_logo.png" alt="obscu.ro" class="header-image" />
+    <el-container class="align-vertical">
+      <el-main>
+    <el-row justify="space-around">
+      <el-col :span="2" >
+        <img src="@/assets/imgs/obscuro_logo_black.png" alt="obscu.ro" class="header-image"  style="max-height: 5vh;"/>
       </el-col>
-      <el-col :span="4">
-        <meta-mask-connect-button />
-      </el-col>
-      <el-col :span="8">
+      <el-col :span="10" :offset="7">
         <nav class="nav-bar">
           <el-radio-group size="default">
-            <RouterLink to="/">  <el-radio-button label="top"> Home</el-radio-button></RouterLink>
-            <RouterLink to="/personal">  <el-radio-button label="right">Personal</el-radio-button></RouterLink>
-            <el-radio-button label="left">
+            <RouterLink to="/">  <el-button link class="paddedTop"> Home</el-button></RouterLink>
+            <RouterLink to="/personal">  <el-button link class="paddedTop">Personal</el-button></RouterLink>
+            <el-button link class="paddedTop">
               <el-dropdown>
                 <span class="el-dropdown-link">
                   Blockchain
@@ -25,8 +24,8 @@
                   </el-dropdown-menu>
                 </template>
               </el-dropdown>
-              </el-radio-button>
-            <el-radio-button label="left">
+              </el-button>
+            <el-button link class="paddedTop" style="margin: 0px">
               <el-dropdown>
                 <span class="el-dropdown-link">
                   Resources
@@ -38,27 +37,28 @@
                   </el-dropdown-menu>
                 </template>
               </el-dropdown>
-            </el-radio-button>
+            </el-button>
           </el-radio-group>
         </nav>
       </el-col>
-      <el-col :span="6">
-        <search-bar-item />
+      <el-col :span="5" >
+        <meta-mask-connect-button />
       </el-col>
+<!--      <el-col :span="4" >-->
+<!--        <search-bar-item />-->
+<!--      </el-col>-->
     </el-row>
-    <el-row>
-      <div class="white-bar"></div>
-    </el-row>
+      </el-main>
+    </el-container>
   </header>
 </template>
 
 <script>
-import SearchBarItem from '@/components/SearchBarItem.vue'
 import MetaMaskConnectButton from '@/components/MetaMaskConnectButton.vue'
 
 export default {
   name: 'NavbarView',
-  components: { MetaMaskConnectButton, SearchBarItem }
+  components: { MetaMaskConnectButton }
 }
 </script>
 
@@ -73,16 +73,8 @@ export default {
   object-fit: cover; /* If image's aspect ratio doesn't match, it'll still cover the space without distortion */
 }
 
-.white-bar {
-  background-color: white;
-  height: 1px;
-  width: 98%;
-  margin-top: 5px; /* Adds a small margin at the top */
-  align-self: center; /* Centers the bar in the flex layout */
+.paddedTop {
+  padding: 10px;
 }
 
-.align-vertical {
-  display: flex;
-  align-items: center;
-}
 </style>