diff --git a/src/App.tsx b/src/App.tsx
index 585ef90..df701f6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,22 +10,20 @@ import ManualReallocationPage from "./pages/manualReallocationPage";
 const App: React.FC = () => {
   const [network, setNetwork] = useState<"ethereum" | "base">("ethereum");
 
-  const handleNetworkSwitch = () => {
-    setNetwork((prevNetwork) =>
-      prevNetwork === "ethereum" ? "base" : "ethereum"
-    );
+  const handleNetworkSwitch = (selectedNetwork: "ethereum" | "base") => {
+    setNetwork(selectedNetwork);
   };
 
   return (
-    <div className="w-full p-2 bg-[#222529]">
-      <div className="w-full h-14 px-4 justify-between items-center">
+    <div className="w-full p-1 bg-[#222529]">
+      <div className="w-full h-15 px-4 justify-between items-center">
         <NavBar
           currentNetwork={network}
           onNetworkSwitch={handleNetworkSwitch}
         />
       </div>
       <div
-        className="p-6 rounded-t-lg min-h-screen"
+        className="p-3 rounded-t-lg min-h-screen"
         style={{
           background:
             "linear-gradient(180deg, rgba(21, 24, 26, 0.00) 63.77%, rgba(255, 255, 255, 0.04) 89.72%), var(--Background-Base, #15181A)",
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 93b6242..13d78a9 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -8,7 +8,7 @@ const NavBarWrapper = styled.div`
   justify-content: space-between;
   align-items: center;
   background-color: #191d200f;
-  padding: 10px 20px;
+  padding: 10px 10px;
   color: #2470ff;
 `;
 
@@ -33,7 +33,6 @@ const NavLink = styled(Link)<{ $isActive: boolean }>`
   font-weight: 500;
   height: 100%;
   transition: all 0.3s;
-
   &:hover {
     background-color: ${(props) => (props.$isActive ? "#2973FF" : "#3a3f45")};
   }
@@ -45,7 +44,7 @@ export const NetworkSelector = styled.div`
   background-color: #2c2f33;
   border-radius: 9999px;
   height: 45px;
-  margin-left: auto;
+  /* Remove margin-left:auto here */
 `;
 
 export const NetworkButton = styled.button<{ $isActive: boolean }>`
@@ -56,14 +55,12 @@ export const NetworkButton = styled.button<{ $isActive: boolean }>`
   background-color: ${(props) => (props.$isActive ? "#2973FF" : "transparent")};
   border-radius: 9999px;
   padding: 8px 16px;
-  text-decoration: none;
   font-size: 0.875rem;
   font-weight: 500;
   height: 100%;
   transition: all 0.3s;
   border: none;
   cursor: pointer;
-
   &:hover {
     background-color: ${(props) => (props.$isActive ? "#2973FF" : "#3a3f45")};
   }
@@ -72,6 +69,13 @@ export const NetworkButton = styled.button<{ $isActive: boolean }>`
 export const ethLogo = "https://cdn.morpho.org/assets/chains/eth.svg";
 export const baseLogo = "https://cdn.morpho.org/assets/chains/base.png";
 
+const NetworkContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin-left: auto;
+`;
+
 type NetworkOption = {
   value: "ethereum" | "base";
   label: JSX.Element;
@@ -113,9 +117,7 @@ type NavBarProps = {
 
 const NavBar: React.FC<NavBarProps> = ({ currentNetwork, onNetworkSwitch }) => {
   const location = useLocation();
-
   const chainId = useChainId();
-
   const defaultNetwork =
     chainId === 8453 ? "base" : chainId === 1 ? "ethereum" : "ethereum";
   const [selectedNetwork, setSelectedNetwork] = useState<NetworkOption>(
@@ -157,17 +159,22 @@ const NavBar: React.FC<NavBarProps> = ({ currentNetwork, onNetworkSwitch }) => {
           </NavLink>
         ))}
       </NavLinks>
-      <NetworkSelector>
-        {networkOptions.map((option) => (
-          <NetworkButton
-            key={option.value}
-            $isActive={selectedNetwork.value === option.value}
-            onClick={() => handleNetworkChange(option.value)}
-          >
-            {option.label}
-          </NetworkButton>
-        ))}
-      </NetworkSelector>
+      <NetworkContainer>
+        <NetworkSelector>
+          {networkOptions.map((option) => (
+            <NetworkButton
+              key={option.value}
+              $isActive={selectedNetwork.value === option.value}
+              onClick={() => handleNetworkChange(option.value)}
+            >
+              {option.label}
+            </NetworkButton>
+          ))}
+        </NetworkSelector>
+        <div className="text-xs text-gray-400 mt-1 italic">
+          Default is latest connected chain
+        </div>
+      </NetworkContainer>
     </NavBarWrapper>
   );
 };
diff --git a/src/pages/vaultPage.tsx b/src/pages/vaultPage.tsx
index dd7ea15..362638c 100644
--- a/src/pages/vaultPage.tsx
+++ b/src/pages/vaultPage.tsx
@@ -495,7 +495,9 @@ const VaultPage: React.FC<VaultPageProps> = ({ network }) => {
     <PageWrapper>
       <HeaderWrapper>
         <TitleContainer>
-          <h1 style={{ color: "white", fontWeight: "300" }}>Morpho Vaults</h1>
+          <h1 style={{ color: "white", fontWeight: "300" }}>
+            Morpho Vaults - {network}
+          </h1>
           <h2 style={{ color: "white", fontWeight: "200" }}>
             Number of vaults: {filteredVaults.length}
           </h2>