diff --git a/README.md b/README.md
index b860294b..5458460e 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 <div align="center">
   <h1 > Monarch </h1>
   <img height=80 src="./imgs/logo.png"/>
-  <h5 align="center"> Easy access to Morpho Blue.</h5>
+  <h5 align="center"> Customized lending on Morpho Blue.</h5>
 
   <!-- move badges here -->
   <img src="https://img.shields.io/github/license/antoncoding/monarch?style=flat-square" alt="LICENSE" />
@@ -16,7 +16,7 @@
 
 ## Overview
 
-Monarch is an unofficial user interface designed to facilitate access to [Morpho Blue](https://github.com/morpho-org/morpho-blue) markets. It provides a streamlined way to supply to any markets created on the Morpho Blue protocol, without the need for MetaMorpho vaults.
+Monarch is an unofficial user interface designed for composing custom lending strategies on [Morpho Blue](https://github.com/morpho-org/morpho-blue). It enables you to compose your own lending strategies by bundling multiple markets, each with your defined risk parameters. Access Morpho Blue directly without intermediaries, maintaining full control over your lending positions.
 
 ## Local Setup
 
diff --git a/app/global.css b/app/global.css
index 21ee7548..08d067ba 100644
--- a/app/global.css
+++ b/app/global.css
@@ -56,6 +56,8 @@
 html {
   height: 100%;
   scroll-behavior: smooth;
+  /* Reserve space for scrollbar to prevent layout shifts */
+  scrollbar-gutter: stable;
 }
 
 body {
@@ -66,6 +68,8 @@ body {
   color: var(--color-text);
   font-family: Inter, sans-serif;
   overflow-x: hidden;
+  /* Add padding to account for scrollbar width in modern browsers */
+  padding-right: calc(100vw - 100%);
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
 }
@@ -120,6 +124,10 @@ h1 {
   text-align: center;
 }
 
+.table-body tr:not(.no-hover-effect tr, .no-hover-effect tr) {
+  border-left: 2px solid transparent;
+}
+
 .table-body tr:not(.no-hover-effect tr, .no-hover-effect tr):hover {
   background-color: var(--palette-bg-hovered);
   border-left: 2px solid var(--palette-orange);
@@ -127,7 +135,7 @@ h1 {
 
 .table-body-focused {
   background-color: var(--palette-bg-hovered);
-  border-left: 2px solid var(--palette-orange);
+  border-left: 2px solid var(--palette-orange) !important;
 }
 
 svg {
diff --git a/app/home/HomePage.tsx b/app/home/HomePage.tsx
index a5a30364..b5644165 100644
--- a/app/home/HomePage.tsx
+++ b/app/home/HomePage.tsx
@@ -3,53 +3,117 @@
 import React, { useState, useEffect } from 'react';
 import { useAccount } from 'wagmi';
 import PrimaryButton from '@/components/common/PrimaryButton';
-import Footer from '@/components/layout/footer/Footer';
-import HomeHeader from './_components/HomeHeader';
+import Header from '@/components/layout/header/Header';
 
 export default function HomePage() {
-  const [isMorphoBlue, setIsMorphoBlue] = useState(false);
+  const [showCustomized, setShowCustomized] = useState(true);
+  const [riskYieldIndex, setRiskYieldIndex] = useState(0);
+  const [secondCounter, setSecondCounter] = useState(0);
+
+  const riskYieldTerms = ['risk', 'yield'];
+  const secondPhrases = ['on Morpho Blue', 'with no intermediates'];
 
   useEffect(() => {
-    const interval = setInterval(() => {
-      setIsMorphoBlue((prev) => !prev);
+    // Toggle between customized and manage your own every 5 seconds
+    const customizedInterval = setInterval(() => {
+      setShowCustomized((prev) => !prev);
+    }, 5000);
+
+    // Change risk/yield every 3 seconds when showing manage your own
+    const riskYieldInterval = setInterval(() => {
+      if (!showCustomized) {
+        setRiskYieldIndex((prev) => (prev + 1) % riskYieldTerms.length);
+      }
     }, 3000);
-    return () => clearInterval(interval);
-  }, []);
+
+    // Second segment changes every 4 seconds
+    const secondInterval = setInterval(() => {
+      setSecondCounter((prev) => (prev + 1) % secondPhrases.length);
+    }, 4000);
+
+    return () => {
+      clearInterval(customizedInterval);
+      clearInterval(riskYieldInterval);
+      clearInterval(secondInterval);
+    };
+  }, [showCustomized]);
+
+  const renderFirstPhrase = () => {
+    if (showCustomized) {
+      return (
+        <span className="absolute inset-0 flex items-center justify-center text-primary transition-all duration-700 ease-in-out">
+          Customized lending
+        </span>
+      );
+    }
+    return (
+      <span className="absolute inset-0 flex items-center justify-center transition-all duration-700 ease-in-out">
+        <span className="-ml-8 inline-flex items-center text-primary">
+          Manage your own
+          <span className="relative mx-2 inline-flex items-center md:mx-4">
+            {riskYieldTerms.map((term, index) => (
+              <span
+                key={term}
+                className={`absolute left-0 text-monarch-primary transition-all duration-700 ease-in-out ${
+                  index === riskYieldIndex
+                    ? 'transform-none opacity-100'
+                    : 'translate-y-3 transform opacity-0'
+                }`}
+              >
+                {term}
+              </span>
+            ))}
+          </span>
+        </span>
+      </span>
+    );
+  };
 
   const { address } = useAccount();
 
   return (
     <div className="bg-main flex min-h-screen flex-col">
-      <div className="flex flex-col items-center justify-center">
-        <HomeHeader />
-        <main className="container flex flex-col">
-          <section className="mt-4 flex flex-col items-center justify-center sm:mt-8">
-            <div className="h-40 w-full sm:h-32 sm:w-4/5 md:w-3/5">
-              {' '}
-              {/* Fixed height container */}
-              <h2 className="mb-2 px-4 text-center font-zen text-3xl leading-tight text-primary sm:mb-10 sm:text-4xl md:text-5xl">
-                <span className="block sm:inline">Direct access to</span>{' '}
-                <span
-                  className={`block transition-all duration-1000 sm:inline ${
-                    isMorphoBlue ? 'text-blue-500' : 'text-gray-500'
-                  }`}
-                >
-                  {isMorphoBlue ? '{Morpho Blue}' : 'the most decentralized lending protocol.'}
-                </span>
-              </h2>
-            </div>
-          </section>
-        </main>
-        <div className="flex w-full flex-col items-center justify-center gap-4 px-4 pb-12 pt-4 sm:w-4/5 sm:flex-row">
-          <PrimaryButton isSecondary href="/info" className="w-full sm:w-auto">
-            Why Monarch
-          </PrimaryButton>
-          <PrimaryButton href={`/positions/${address ?? ''}`} className="w-full sm:w-auto">
-            View Portfolio
-          </PrimaryButton>
-        </div>
-      </div>
-      <Footer />
+      <Header ghost />
+      <main className="container mx-auto flex flex-1 flex-col items-center justify-center">
+        <section className="flex w-full flex-col items-center justify-center">
+          <div className="h-48 w-full sm:h-44 sm:w-4/5 md:w-3/5">
+            <h2 className="mb-2 flex flex-col gap-6 px-4 text-center font-zen text-3xl leading-tight text-secondary sm:mb-10 sm:text-4xl md:text-5xl">
+              <div className="relative h-[1.3em]">{renderFirstPhrase()}</div>
+              <div className="relative h-[1.3em]">
+                {secondPhrases.map((phrase, index) => (
+                  <span
+                    key={phrase}
+                    className={`absolute left-0 right-0 transform transition-all duration-700 ease-in-out ${
+                      index === secondCounter
+                        ? 'translate-y-0 opacity-100'
+                        : index ===
+                          (secondCounter - 1 + secondPhrases.length) % secondPhrases.length
+                        ? 'translate-y-2 opacity-0'
+                        : '-translate-y-2 opacity-0'
+                    }`}
+                  >
+                    {phrase.includes('Morpho Blue') ? (
+                      <span>
+                        on <span className="text-blue-500">Morpho Blue</span>
+                      </span>
+                    ) : (
+                      phrase
+                    )}
+                  </span>
+                ))}
+              </div>
+            </h2>
+          </div>
+          <div className="mt-8 flex w-full justify-center gap-4 px-4 sm:w-auto sm:flex-row">
+            <PrimaryButton isSecondary href="/info" className="w-full sm:w-auto">
+              Why Monarch
+            </PrimaryButton>
+            <PrimaryButton href={`/positions/${address ?? ''}`} className="w-full sm:w-auto">
+              Get Started
+            </PrimaryButton>
+          </div>
+        </section>
+      </main>
     </div>
   );
 }
diff --git a/app/home/_components/Home.module.css b/app/home/_components/Home.module.css
deleted file mode 100644
index c010849c..00000000
--- a/app/home/_components/Home.module.css
+++ /dev/null
@@ -1,102 +0,0 @@
-.HomeHeader {
-  --home-header-height: 400px;
-
-  height: var(--home-header-height);
-}
-
-.HomeHeaderGradient {
-  position: absolute;
-  z-index: -1;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: var(--home-header-height);
-  background: linear-gradient(180deg, #ff5800 0%, #cb59ab 100%, #ea36b8 100%);
-}
-
-.HomeHeaderHeadline {
-  margin-top: 45px;
-  color: white;
-  font-size: 92px;
-  font-weight: 400;
-  line-height: 85px;
-  text-align: center;
-  word-wrap: break-word;
-
-  @media (width <= 768px) {
-    font-size: 64px;
-  }
-}
-
-.HomeHeaderParagraph {
-  margin: 35px 0;
-  color: white;
-  font-size: 20px;
-  font-weight: 400;
-  line-height: 24px;
-  text-align: center;
-  word-wrap: break-word;
-
-  @media (width <= 768px) {
-    padding: 0 20px;
-    font-size: 18px;
-  }
-}
-
-.HomeHeaderCta {
-  display: flex;
-  justify-content: center;
-  margin: 16px 0 52px;
-
-  @media (width <= 768px) {
-    width: 80%;
-  }
-}
-
-.HomeHeaderWaves {
-  --home-header-waves-height: 25px;
-
-  position: relative;
-  margin-top: 4px;
-  margin-bottom: var(--home-header-waves-height);
-}
-
-.HomeHeaderWaves svg {
-  width: 100vw;
-  height: var(--home-header-waves-height);
-}
-
-.HomeHeaderWavesParallax > use {
-  animation: move-forever 30s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
-}
-
-.HomeHeaderWavesParallax > use:nth-child(1),
-.HomeHeaderWavesParallax > use:nth-child(2) {
-  animation-delay: -2s;
-  animation-duration: 6s;
-}
-
-.HomeHeaderWavesParallax > use:nth-child(3) {
-  animation-delay: -3s;
-  animation-duration: 12s;
-}
-
-.HomeHeaderWavesParallax > use:nth-child(4) {
-  animation-delay: -4s;
-  animation-duration: 15s;
-}
-
-.HomeHeaderWavesParallax > use:nth-child(5) {
-  animation-delay: -5s;
-  animation-duration: 20s;
-}
-
-@keyframes move-forever {
-  0% {
-    transform: translate3d(-90px, 0, 0);
-  }
-
-  100% {
-    transform: translate3d(85px, 0, 0);
-  }
-}
diff --git a/app/home/_components/HomeHeader.tsx b/app/home/_components/HomeHeader.tsx
deleted file mode 100644
index 42597294..00000000
--- a/app/home/_components/HomeHeader.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import Header from '@/components/layout/header/Header';
-import styles from './Home.module.css';
-
-export default function HomeHeader() {
-  return (
-    <div className={`${styles.HomeHeader} font-zen`}>
-      <Header />
-    </div>
-  );
-}
diff --git a/app/home/_components/WhyUseIt.tsx b/app/home/_components/WhyUseIt.tsx
deleted file mode 100644
index 15dbfc6a..00000000
--- a/app/home/_components/WhyUseIt.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function HomeMain() {
-  return <div />;
-}
diff --git a/app/markets/components/AssetFilter.tsx b/app/markets/components/AssetFilter.tsx
index 71a9c275..290057e2 100644
--- a/app/markets/components/AssetFilter.tsx
+++ b/app/markets/components/AssetFilter.tsx
@@ -1,6 +1,7 @@
 'use client';
 import { useState, useRef, useEffect, KeyboardEvent } from 'react';
 import { ChevronDownIcon, TrashIcon } from '@radix-ui/react-icons';
+import { motion, AnimatePresence } from 'framer-motion';
 import Image from 'next/image';
 import { ERC20Token, infoToKey } from '@/utils/tokens';
 
@@ -115,57 +116,67 @@ export default function AssetFilter({
           </span>
         </div>
       </div>
-      {isOpen && !loading && (
-        <div className="bg-surface absolute z-10 mt-1 w-full rounded-sm shadow-lg">
-          <input
-            type="text"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            placeholder="Search tokens..."
-            className="w-full border-none bg-transparent p-3 text-sm focus:outline-none"
-          />
-          <div className="relative">
-            <ul className="custom-scrollbar max-h-60 overflow-auto pb-12" role="listbox">
-              {filteredItems.map((token) => (
-                <li
-                  key={token.symbol}
-                  className={`m-2 flex cursor-pointer items-center justify-between rounded-md p-2 text-sm hover:bg-gray-300 dark:hover:bg-gray-700 ${
-                    selectedAssets.includes(
+      <AnimatePresence>
+        {isOpen && !loading && (
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.15 }}
+            className="bg-surface absolute z-10 mt-1 w-full rounded-sm shadow-lg"
+          >
+            <input
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search tokens..."
+              className="w-full border-none bg-transparent p-3 text-sm focus:outline-none"
+            />
+            <div className="relative">
+              <ul className="custom-scrollbar max-h-60 overflow-auto pb-12" role="listbox">
+                {filteredItems.map((token) => (
+                  <li
+                    key={token.symbol}
+                    className={`m-2 flex cursor-pointer items-center justify-between rounded-md p-2 text-sm hover:bg-gray-300 dark:hover:bg-gray-700 ${
+                      selectedAssets.includes(
+                        token.networks.map((n) => infoToKey(n.address, n.chain.id)).join('|'),
+                      )
+                        ? 'bg-gray-300 dark:bg-gray-700'
+                        : ''
+                    }`}
+                    onClick={() => selectOption(token)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        selectOption(token);
+                      }
+                    }}
+                    role="option"
+                    aria-selected={selectedAssets.includes(
                       token.networks.map((n) => infoToKey(n.address, n.chain.id)).join('|'),
-                    )
-                      ? 'bg-gray-300 dark:bg-gray-700'
-                      : ''
-                  }`}
-                  onClick={() => selectOption(token)}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                      selectOption(token);
-                    }
-                  }}
-                  role="option"
-                  aria-selected={selectedAssets.includes(
-                    token.networks.map((n) => infoToKey(n.address, n.chain.id)).join('|'),
-                  )}
-                  tabIndex={0}
+                    )}
+                    tabIndex={0}
+                  >
+                    <span>{token.symbol}</span>
+                    {token.img && (
+                      <Image src={token.img} alt={token.symbol} width={18} height={18} />
+                    )}
+                  </li>
+                ))}
+              </ul>
+              <div className="bg-surface absolute bottom-0 left-0 right-0 border-gray-700 p-2">
+                <button
+                  className="hover:bg-main flex w-full items-center justify-between rounded-sm p-2 text-left text-xs text-secondary"
+                  onClick={clearSelection}
+                  type="button"
                 >
-                  <span>{token.symbol}</span>
-                  {token.img && <Image src={token.img} alt={token.symbol} width={18} height={18} />}
-                </li>
-              ))}
-            </ul>
-            <div className="bg-surface absolute bottom-0 left-0 right-0 border-gray-700 p-2">
-              <button
-                className="hover:bg-main flex w-full items-center justify-between rounded-sm p-2 text-left text-xs text-secondary"
-                onClick={clearSelection}
-                type="button"
-              >
-                <span>Clear All</span>
-                <TrashIcon className="h-5 w-5" />
-              </button>
+                  <span>Clear All</span>
+                  <TrashIcon className="h-5 w-5" />
+                </button>
+              </div>
             </div>
-          </div>
-        </div>
-      )}
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }
diff --git a/app/markets/components/MarketTableBody.tsx b/app/markets/components/MarketTableBody.tsx
index 47c83de1..a8def89f 100644
--- a/app/markets/components/MarketTableBody.tsx
+++ b/app/markets/components/MarketTableBody.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Tooltip } from '@nextui-org/tooltip';
+import { motion, AnimatePresence } from 'framer-motion';
 import Image from 'next/image';
 import { FaShieldAlt } from 'react-icons/fa';
 import { GoStarFill, GoStar } from 'react-icons/go';
@@ -169,13 +170,26 @@ export function MarketTableBody({
                 </button>
               </td>
             </tr>
-            {expandedRowId === item.uniqueKey && (
-              <tr className={`${item.uniqueKey === expandedRowId ? 'table-body-focused' : ''}`}>
-                <td className="collaps-viewer bg-hovered" colSpan={13}>
-                  <ExpandedMarketDetail market={item} />
-                </td>
-              </tr>
-            )}
+            <AnimatePresence>
+              {expandedRowId === item.uniqueKey && (
+                <tr className={`${item.uniqueKey === expandedRowId ? 'table-body-focused' : ''}`}>
+                  <td className="collaps-viewer bg-hovered p-0" colSpan={13}>
+                    <motion.div
+                      key="content"
+                      initial={{ height: 0 }}
+                      animate={{ height: 'auto' }}
+                      exit={{ height: 0 }}
+                      transition={{ duration: 0.1 }}
+                      className="overflow-hidden"
+                    >
+                      <div className="p-4">
+                        <ExpandedMarketDetail market={item} />
+                      </div>
+                    </motion.div>
+                  </td>
+                </tr>
+              )}
+            </AnimatePresence>
           </React.Fragment>
         );
       })}
diff --git a/app/page.tsx b/app/page.tsx
index 8a16c956..8c985418 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,7 +3,7 @@ import HomePage from './home/HomePage';
 
 export const metadata = generateMetadata({
   title: 'Monarch',
-  description: 'Permission-less access to morpho blue protocol',
+  description: 'Customized lending with Morpho Blue',
   images: 'themes.png',
   pathname: '',
 });
diff --git a/app/positions/components/FromAndToMarkets.tsx b/app/positions/components/FromAndToMarkets.tsx
index 42982c15..a54a8f37 100644
--- a/app/positions/components/FromAndToMarkets.tsx
+++ b/app/positions/components/FromAndToMarkets.tsx
@@ -180,7 +180,8 @@ export function FromAndToMarkets({
                             variant="flat"
                             className="h-5 min-w-0 px-2 text-xs"
                             isDisabled={
-                              BigInt(marketPosition.supplyAssets) + BigInt(marketPosition.pendingDelta) <=
+                              BigInt(marketPosition.supplyAssets) +
+                                BigInt(marketPosition.pendingDelta) <=
                               0n
                             }
                             onClick={(e) => {
@@ -192,7 +193,7 @@ export function FromAndToMarkets({
                               if (remainingAmount > 0n) {
                                 onSelectMax?.(
                                   marketPosition.market.uniqueKey,
-                                  Number(remainingAmount)
+                                  Number(remainingAmount),
                                 );
                               }
                             }}
diff --git a/app/positions/components/PositionsContent.tsx b/app/positions/components/PositionsContent.tsx
index b89e3fce..d587003b 100644
--- a/app/positions/components/PositionsContent.tsx
+++ b/app/positions/components/PositionsContent.tsx
@@ -28,8 +28,8 @@ export default function Positions() {
     <div className="flex flex-col justify-between font-zen">
       <Header />
       <div className="container gap-8" style={{ padding: '0 5%' }}>
-        <div className="flex items-center justify-between pb-4">
-          <h1 className="flex items-center gap-2 py-4 font-zen text-2xl">Portfolio</h1>
+        <div className="flex flex-col items-center justify-between pb-4 sm:flex-row">
+          <h1 className="py-8 font-zen"> Portfolio </h1>
           <div className="flex gap-4">
             <Link href={`/history/${account}`} className="no-underline">
               <button
diff --git a/app/positions/components/PositionsSummaryTable.tsx b/app/positions/components/PositionsSummaryTable.tsx
index 55cdaf10..029910a9 100644
--- a/app/positions/components/PositionsSummaryTable.tsx
+++ b/app/positions/components/PositionsSummaryTable.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo, useState, useEffect } from 'react';
 import { Spinner } from '@nextui-org/react';
 import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
+import { motion, AnimatePresence } from 'framer-motion';
 import Image from 'next/image';
 import { GrRefresh } from 'react-icons/gr';
 import { toast } from 'react-toastify';
@@ -169,7 +170,7 @@ export function PositionsSummaryTable({
     <div className="space-y-4 overflow-x-auto">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <h2 className="text-xl font-semibold">Your Supply</h2>
+          <h2 className="text-xl">Your Supply</h2>
           {isRefetching && <Spinner size="sm" />}
         </div>
         <button
@@ -195,10 +196,10 @@ export function PositionsSummaryTable({
           </tr>
         </thead>
         <tbody className="table-body text-sm">
-          {processedPositions.map((position) => {
-            const rowKey = `${position.loanAssetAddress}-${position.chainId}`;
+          {processedPositions.map((groupedPosition) => {
+            const rowKey = `${groupedPosition.loanAssetAddress}-${groupedPosition.chainId}`;
             const isExpanded = expandedRows.has(rowKey);
-            const avgApy = position.totalWeightedApy / position.totalSupply;
+            const avgApy = groupedPosition.totalWeightedApy / groupedPosition.totalSupply;
 
             return (
               <React.Fragment key={rowKey}>
@@ -209,8 +210,8 @@ export function PositionsSummaryTable({
                   <td className="w-10">
                     <div className="flex items-center justify-center">
                       <Image
-                        src={getNetworkImg(position.chainId) ?? ''}
-                        alt={`Chain ${position.chainId}`}
+                        src={getNetworkImg(groupedPosition.chainId) ?? ''}
+                        alt={`Chain ${groupedPosition.chainId}`}
                         width={24}
                         height={24}
                       />
@@ -218,11 +219,13 @@ export function PositionsSummaryTable({
                   </td>
                   <td data-label="Size">
                     <div className="flex items-center justify-center gap-2">
-                      <span className="font-medium">{formatReadable(position.totalSupply)}</span>
-                      <span>{position.loanAsset}</span>
+                      <span className="font-medium">
+                        {formatReadable(groupedPosition.totalSupply)}
+                      </span>
+                      <span>{groupedPosition.loanAsset}</span>
                       <TokenIcon
-                        address={position.loanAssetAddress}
-                        chainId={position.chainId}
+                        address={groupedPosition.loanAssetAddress}
+                        chainId={groupedPosition.chainId}
                         width={16}
                         height={16}
                       />
@@ -233,12 +236,12 @@ export function PositionsSummaryTable({
                   </td>
                   <td data-label="Collateral Exposure">
                     <div className="flex items-center justify-center gap-1">
-                      {position.collaterals.length > 0 ? (
-                        position.collaterals.map((collateral, index) => (
+                      {groupedPosition.collaterals.length > 0 ? (
+                        groupedPosition.collaterals.map((collateral, index) => (
                           <TokenIcon
                             key={`${collateral.address}-${index}`}
                             address={collateral.address}
-                            chainId={position.chainId}
+                            chainId={groupedPosition.chainId}
                             width={20}
                             height={20}
                           />
@@ -251,15 +254,15 @@ export function PositionsSummaryTable({
                   <td data-label="Warnings" className="align-middle">
                     <div className="flex items-center justify-center gap-1">
                       <MarketAssetIndicator
-                        market={{ warningsWithDetail: position.allWarnings }}
+                        market={{ warningsWithDetail: groupedPosition.allWarnings }}
                         isBatched
                       />
                       <MarketOracleIndicator
-                        market={{ warningsWithDetail: position.allWarnings }}
+                        market={{ warningsWithDetail: groupedPosition.allWarnings }}
                         isBatched
                       />
                       <MarketDebtIndicator
-                        market={{ warningsWithDetail: position.allWarnings }}
+                        market={{ warningsWithDetail: groupedPosition.allWarnings }}
                         isBatched
                       />
                     </div>
@@ -270,7 +273,7 @@ export function PositionsSummaryTable({
                         type="button"
                         className="bg-hovered rounded-sm bg-opacity-50 p-2 text-xs duration-300 ease-in-out hover:bg-primary"
                         onClick={() => {
-                          setSelectedGroupedPosition(position);
+                          setSelectedGroupedPosition(groupedPosition);
                           setShowRebalanceModal(true);
                         }}
                       >
@@ -279,18 +282,28 @@ export function PositionsSummaryTable({
                     </div>
                   </td>
                 </tr>
-                {isExpanded && (
-                  <tr>
-                    <td colSpan={7} className="p-0">
-                      <SuppliedMarketsDetail
-                        groupedPosition={position}
-                        setShowSupplyModal={setShowSupplyModal}
-                        setShowWithdrawModal={setShowWithdrawModal}
-                        setSelectedPosition={setSelectedPosition}
-                      />
-                    </td>
-                  </tr>
-                )}
+                <AnimatePresence>
+                  {expandedRows.has(rowKey) && (
+                    <tr>
+                      <td colSpan={7} className="p-0">
+                        <motion.div
+                          initial={{ height: 0 }}
+                          animate={{ height: 'auto' }}
+                          exit={{ height: 0 }}
+                          transition={{ duration: 0.1 }}
+                          className="overflow-hidden"
+                        >
+                          <SuppliedMarketsDetail
+                            groupedPosition={groupedPosition}
+                            setShowWithdrawModal={setShowWithdrawModal}
+                            setShowSupplyModal={setShowSupplyModal}
+                            setSelectedPosition={setSelectedPosition}
+                          />
+                        </motion.div>
+                      </td>
+                    </tr>
+                  )}
+                </AnimatePresence>
               </React.Fragment>
             );
           })}
diff --git a/app/positions/components/RebalanceActionInput.tsx b/app/positions/components/RebalanceActionInput.tsx
index 05f646ca..aeb189c1 100644
--- a/app/positions/components/RebalanceActionInput.tsx
+++ b/app/positions/components/RebalanceActionInput.tsx
@@ -28,7 +28,7 @@ export function RebalanceActionInput({
   onAddAction,
 }: RebalanceActionInputProps) {
   return (
-    <div className="mb-4 flex items-center justify-between rounded-md border-1 border-dashed border-orange-300 p-4 light:bg-orange-100 light:bg-opacity-20 dark:border-orange-700">
+    <div className="mb-4 flex items-center justify-between rounded-md border-1 border-dashed border-primary p-4">
       <span className="mr-2">Rebalance</span>
       <input
         type="number"
@@ -59,7 +59,7 @@ export function RebalanceActionInput({
       </div>
       <Button
         onClick={onAddAction}
-        className="ml-4 rounded-sm bg-orange-500 p-2 px-4 font-zen text-white opacity-80 transition-all duration-200 ease-in-out hover:scale-105 hover:opacity-100 dark:bg-orange-600"
+        className="ml-4 rounded-sm bg-primary p-2 px-4 font-zen text-white opacity-80 transition-all duration-200 ease-in-out hover:scale-105 hover:opacity-100"
       >
         Add Action
       </Button>
diff --git a/app/positions/components/RebalanceModal.tsx b/app/positions/components/RebalanceModal.tsx
index c9b37795..808e3ce1 100644
--- a/app/positions/components/RebalanceModal.tsx
+++ b/app/positions/components/RebalanceModal.tsx
@@ -357,7 +357,7 @@ export function RebalanceModal({
               onPress={() => void handleExecuteRebalance()}
               isDisabled={isConfirming || rebalanceActions.length === 0}
               isLoading={isConfirming}
-              className="rounded-sm bg-orange-500 p-4 px-10 font-zen text-white opacity-80 transition-all duration-200 ease-in-out hover:scale-105 hover:opacity-100 disabled:opacity-50 dark:bg-orange-600"
+              className="rounded-sm bg-primary p-4 px-10 font-zen text-white opacity-80 transition-all duration-200 ease-in-out hover:scale-105 hover:opacity-100 disabled:opacity-50 dark:bg-primary"
             >
               {needSwitchChain ? 'Switch Network & Execute' : 'Execute Rebalance'}
             </Button>
diff --git a/app/positions/components/SuppliedMarketsDetail.tsx b/app/positions/components/SuppliedMarketsDetail.tsx
index d9fc917c..580a6271 100644
--- a/app/positions/components/SuppliedMarketsDetail.tsx
+++ b/app/positions/components/SuppliedMarketsDetail.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Tooltip } from '@nextui-org/tooltip';
+import { motion } from 'framer-motion';
 import Link from 'next/link';
 import { IoWarningOutline } from 'react-icons/io5';
 import OracleVendorBadge from '@/components/OracleVendorBadge';
@@ -57,164 +58,174 @@ export function SuppliedMarketsDetail({
   };
 
   return (
-    <div className="bg-surface bg-opacity-20 p-4">
-      <div className="mb-4 flex items-center justify-center">
-        <div className="my-4 w-1/2">
-          <h3 className="mb-2 text-base font-semibold">Collateral Exposure</h3>
-          <div className="flex h-3 w-full overflow-hidden rounded-full bg-gray-200">
-            {groupedPosition.processedCollaterals.map((collateral, colIndex) => (
-              <div
-                key={`${collateral.address}-${colIndex}`}
-                className="h-full opacity-70"
-                style={{
-                  width: `${collateral.percentage}%`,
-                  backgroundColor:
-                    collateral.symbol === 'Others'
-                      ? '#A0AEC0'
-                      : getCollateralColor(collateral.address),
-                }}
-                title={`${collateral.symbol}: ${collateral.percentage.toFixed(2)}%`}
-              />
-            ))}
-          </div>
-          <div className="mt-1 flex flex-wrap justify-center text-xs">
-            {groupedPosition.processedCollaterals.map((collateral, colIndex) => (
-              <span key={`${collateral.address}-${colIndex}`} className="mb-1 mr-2 opacity-70">
-                <span
+    <motion.div
+      initial={{ height: 0 }}
+      animate={{ height: 'auto' }}
+      exit={{ height: 0 }}
+      transition={{ duration: 0.1 }}
+      className="overflow-hidden"
+    >
+      <div className="bg-surface bg-opacity-20 p-4">
+        <div className="mb-4 flex items-center justify-center">
+          <div className="my-4 w-1/2">
+            <h3 className="mb-2 text-base font-semibold">Collateral Exposure</h3>
+            <div className="flex h-3 w-full overflow-hidden rounded-full bg-gray-200">
+              {groupedPosition.processedCollaterals.map((collateral, colIndex) => (
+                <div
+                  key={`${collateral.address}-${colIndex}`}
+                  className="h-full opacity-70"
                   style={{
-                    color:
+                    width: `${collateral.percentage}%`,
+                    backgroundColor:
                       collateral.symbol === 'Others'
                         ? '#A0AEC0'
                         : getCollateralColor(collateral.address),
                   }}
-                >
-                  ■
-                </span>{' '}
-                {collateral.symbol}: {formatReadable(collateral.percentage)}%
-              </span>
-            ))}
+                  title={`${collateral.symbol}: ${collateral.percentage.toFixed(2)}%`}
+                />
+              ))}
+            </div>
+            <div className="mt-1 flex flex-wrap justify-center text-xs">
+              {groupedPosition.processedCollaterals.map((collateral, colIndex) => (
+                <span key={`${collateral.address}-${colIndex}`} className="mb-1 mr-2 opacity-70">
+                  <span
+                    style={{
+                      color:
+                        collateral.symbol === 'Others'
+                          ? '#A0AEC0'
+                          : getCollateralColor(collateral.address),
+                    }}
+                  >
+                    ■
+                  </span>{' '}
+                  {collateral.symbol}: {formatReadable(collateral.percentage)}%
+                </span>
+              ))}
+            </div>
           </div>
         </div>
-      </div>
-      <table className="no-hover-effect w-full font-zen">
-        <thead className="table-header">
-          <tr>
-            <th>Market</th>
-            <th>Collateral</th>
-            <th>Oracle</th>
-            <th>LLTV</th>
-            <th>APY</th>
-            <th>Supplied</th>
-            <th>% of Portfolio</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody className="table-body text-xs">
-          {sortedMarkets.map((position) => {
-            const suppliedAmount = Number(
-              formatBalance(position.supplyAssets, position.market.loanAsset.decimals),
-            );
-            const percentageOfPortfolio =
-              totalSupply > 0 ? (suppliedAmount / totalSupply) * 100 : 0;
-            const warningColor = getWarningColor(position.market.warningsWithDetail);
+        <table className="no-hover-effect w-full font-zen">
+          <thead className="table-header">
+            <tr>
+              <th>Market</th>
+              <th>Collateral</th>
+              <th>Oracle</th>
+              <th>LLTV</th>
+              <th>APY</th>
+              <th>Supplied</th>
+              <th>% of Portfolio</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody className="table-body text-xs">
+            {sortedMarkets.map((position) => {
+              const suppliedAmount = Number(
+                formatBalance(position.supplyAssets, position.market.loanAsset.decimals),
+              );
+              const percentageOfPortfolio =
+                totalSupply > 0 ? (suppliedAmount / totalSupply) * 100 : 0;
+              const warningColor = getWarningColor(position.market.warningsWithDetail);
 
-            return (
-              <tr key={position.market.uniqueKey} className="gap-1">
-                <td data-label="Market" className="text-center">
-                  <div className="flex items-center justify-center">
-                    <div className="mr-1 w-4">
-                      {position.market.warningsWithDetail.length > 0 ? (
-                        <Tooltip
-                          content={<WarningTooltip warnings={position.market.warningsWithDetail} />}
-                          placement="top"
-                        >
-                          <div>
-                            <IoWarningOutline className={`h-4 w-4 ${warningColor}`} />
-                          </div>
-                        </Tooltip>
-                      ) : (
-                        <div className="h-4 w-4" />
-                      )}
+              return (
+                <tr key={position.market.uniqueKey} className="gap-1">
+                  <td data-label="Market" className="text-center">
+                    <div className="flex items-center justify-center">
+                      <div className="mr-1 w-4">
+                        {position.market.warningsWithDetail.length > 0 ? (
+                          <Tooltip
+                            content={
+                              <WarningTooltip warnings={position.market.warningsWithDetail} />
+                            }
+                            placement="top"
+                          >
+                            <div>
+                              <IoWarningOutline className={`h-4 w-4 ${warningColor}`} />
+                            </div>
+                          </Tooltip>
+                        ) : (
+                          <div className="h-4 w-4" />
+                        )}
+                      </div>
+                      {/* <Tooltip content="View on Explorer" placement="top"> */}
+                      <Link
+                        className="group flex items-center justify-center no-underline hover:underline"
+                        href={`/market/${position.market.morphoBlue.chain.id}/${position.market.uniqueKey}`}
+                      >
+                        {position.market.uniqueKey.slice(2, 8)}
+                      </Link>
+                      {/* </Tooltip> */}
                     </div>
-                    {/* <Tooltip content="View on Explorer" placement="top"> */}
-                    <Link
-                      className="group flex items-center justify-center no-underline hover:underline"
-                      href={`/market/${position.market.morphoBlue.chain.id}/${position.market.uniqueKey}`}
-                    >
-                      {position.market.uniqueKey.slice(2, 8)}
-                    </Link>
-                    {/* </Tooltip> */}
-                  </div>
-                </td>
-                <td data-label="Collateral" className="text-center">
-                  {position.market.collateralAsset ? (
-                    <div className="flex items-center justify-center gap-1">
-                      <TokenIcon
-                        address={position.market.collateralAsset.address}
-                        chainId={position.market.morphoBlue.chain.id}
-                        width={18}
-                        height={18}
-                      />
-                      {position.market.collateralAsset.symbol}
+                  </td>
+                  <td data-label="Collateral" className="text-center">
+                    {position.market.collateralAsset ? (
+                      <div className="flex items-center justify-center gap-1">
+                        <TokenIcon
+                          address={position.market.collateralAsset.address}
+                          chainId={position.market.morphoBlue.chain.id}
+                          width={18}
+                          height={18}
+                        />
+                        {position.market.collateralAsset.symbol}
+                      </div>
+                    ) : (
+                      'N/A'
+                    )}
+                  </td>
+                  <td data-label="Oracle" className="text-center">
+                    <div className="flex justify-center">
+                      <OracleVendorBadge oracleData={position.market.oracle.data} useTooltip />
                     </div>
-                  ) : (
-                    'N/A'
-                  )}
-                </td>
-                <td data-label="Oracle" className="text-center">
-                  <div className="flex justify-center">
-                    <OracleVendorBadge oracleData={position.market.oracle.data} useTooltip />
-                  </div>
-                </td>
-                <td data-label="LLTV" className="text-center">
-                  {formatBalance(position.market.lltv, 16)}%
-                </td>
-                <td data-label="APY" className="text-center">
-                  {formatReadable(position.market.dailyApys.netSupplyApy * 100)}%
-                </td>
-                <td data-label="Supplied" className="text-center">
-                  {formatReadable(suppliedAmount)} {position.market.loanAsset.symbol}
-                </td>
-                <td data-label="% of Portfolio" className="text-center">
-                  <div className="flex items-center">
-                    <div className="mr-2 h-2 w-full rounded-full bg-gray-200">
-                      <div
-                        className="h-full rounded-full bg-blue-500"
-                        style={{ width: `${percentageOfPortfolio}%` }}
-                      />
+                  </td>
+                  <td data-label="LLTV" className="text-center">
+                    {formatBalance(position.market.lltv, 16)}%
+                  </td>
+                  <td data-label="APY" className="text-center">
+                    {formatReadable(position.market.dailyApys.netSupplyApy * 100)}%
+                  </td>
+                  <td data-label="Supplied" className="text-center">
+                    {formatReadable(suppliedAmount)} {position.market.loanAsset.symbol}
+                  </td>
+                  <td data-label="% of Portfolio" className="text-center">
+                    <div className="flex items-center">
+                      <div className="mr-2 h-2 w-full rounded-full bg-gray-200">
+                        <div
+                          className="h-full rounded-full bg-blue-500"
+                          style={{ width: `${percentageOfPortfolio}%` }}
+                        />
+                      </div>
+                      <span className="whitespace-nowrap">
+                        {formatReadable(percentageOfPortfolio)}%
+                      </span>
                     </div>
-                    <span className="whitespace-nowrap">
-                      {formatReadable(percentageOfPortfolio)}%
-                    </span>
-                  </div>
-                </td>
-                <td data-label="Actions" className="flex justify-center gap-2 text-right">
-                  <button
-                    type="button"
-                    className="bg-hovered rounded-sm p-1 text-xs duration-300 ease-in-out hover:bg-orange-500"
-                    onClick={() => {
-                      setSelectedPosition(position);
-                      setShowWithdrawModal(true);
-                    }}
-                  >
-                    Withdraw
-                  </button>
-                  <button
-                    type="button"
-                    className="bg-hovered rounded-sm p-1 text-xs duration-300 ease-in-out hover:bg-orange-500"
-                    onClick={() => {
-                      setSelectedPosition(position);
-                      setShowSupplyModal(true);
-                    }}
-                  >
-                    Supply
-                  </button>
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    </div>
+                  </td>
+                  <td data-label="Actions" className="flex justify-center gap-2 text-right">
+                    <button
+                      type="button"
+                      className="bg-hovered rounded-sm p-1 text-xs duration-300 ease-in-out hover:bg-orange-500"
+                      onClick={() => {
+                        setSelectedPosition(position);
+                        setShowWithdrawModal(true);
+                      }}
+                    >
+                      Withdraw
+                    </button>
+                    <button
+                      type="button"
+                      className="bg-hovered rounded-sm p-1 text-xs duration-300 ease-in-out hover:bg-orange-500"
+                      onClick={() => {
+                        setSelectedPosition(position);
+                        setShowSupplyModal(true);
+                      }}
+                    >
+                      Supply
+                    </button>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </motion.div>
   );
 }
diff --git a/app/settings/faq/page.tsx b/app/settings/faq/page.tsx
new file mode 100644
index 00000000..bedae538
--- /dev/null
+++ b/app/settings/faq/page.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import Link from 'next/link';
+
+function FAQPage() {
+  const faqs = [
+    {
+      question: 'Where can I find the source code?',
+      answer: (
+        <span>
+          The source code is available on{' '}
+          <Link
+            href="https://github.com/antoncoding/monarch"
+            target="_blank"
+            className="text-blue-500 hover:underline"
+          >
+            GitHub
+          </Link>
+          .
+        </span>
+      ),
+    },
+    {
+      question: 'Where can I get help?',
+      answer: (
+        <span>
+          Join our{' '}
+          <Link
+            href="https://t.me/+4NvIQoQVXsA2ZmJl"
+            target="_blank"
+            className="text-blue-500 hover:underline"
+          >
+            Telegram chat
+          </Link>{' '}
+          for support and discussions.
+        </span>
+      ),
+    },
+  ];
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="mb-8 text-3xl font-bold">Frequently Asked Questions</h1>
+      <div className="space-y-6">
+        {faqs.map((faq, index) => (
+          <div key={index} className="bg-surface rounded-lg p-6">
+            <h3 className="mb-2 text-lg font-semibold">{faq.question}</h3>
+            <p className="text-secondary">{faq.answer}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default FAQPage;
diff --git a/src/components/common/PrimaryButton.tsx b/src/components/common/PrimaryButton.tsx
index eda456cd..0645c88e 100644
--- a/src/components/common/PrimaryButton.tsx
+++ b/src/components/common/PrimaryButton.tsx
@@ -19,7 +19,7 @@ export default function PrimaryButton({
         type="button"
         className={`${
           isSecondary ? 'bg-surface' : 'bg-monarch-orange'
-        } rounded-sm p-4 px-10 font-zen opacity-80 transition-all duration-200 ease-in-out hover:opacity-100 ${className} hover:scale-105`}
+        } rounded-sm p-4 px-10 font-zen opacity-90 transition-all duration-200 ease-in-out hover:opacity-100 ${className} hover:scale-105`}
       >
         {children}
       </button>
diff --git a/src/components/layout/header/AccountConnect.tsx b/src/components/layout/header/AccountConnect.tsx
index f4cdce15..d6ac5d93 100644
--- a/src/components/layout/header/AccountConnect.tsx
+++ b/src/components/layout/header/AccountConnect.tsx
@@ -1,7 +1,6 @@
 import { ConnectButton } from '@rainbow-me/rainbowkit';
 import '@rainbow-me/rainbowkit/styles.css';
 import { AccountDropdown } from './AccountDropdown';
-import { AccountInfoPanel } from './AccountInfoPanel';
 
 /**
  * AccountConnect
@@ -46,14 +45,9 @@ function AccountConnect() {
               }
 
               return (
-                <>
-                  <div className="flex flex-grow flex-col md:hidden">
-                    <AccountInfoPanel />
-                  </div>
-                  <div className="flex hidden md:block">
-                    <AccountDropdown />
-                  </div>
-                </>
+                <div className="block flex">
+                  <AccountDropdown />
+                </div>
               );
             })()}
           </div>
diff --git a/src/components/layout/header/AccountDropdown.tsx b/src/components/layout/header/AccountDropdown.tsx
index 8d955693..a03f952f 100644
--- a/src/components/layout/header/AccountDropdown.tsx
+++ b/src/components/layout/header/AccountDropdown.tsx
@@ -1,27 +1,42 @@
+import { useCallback, useState } from 'react';
+import { Name } from '@coinbase/onchainkit/identity';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { ExitIcon, ExternalLinkIcon } from '@radix-ui/react-icons';
 import { clsx } from 'clsx';
-import { useAccount } from 'wagmi';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { FiSettings } from 'react-icons/fi';
+import { useAccount, useDisconnect } from 'wagmi';
 import { Avatar } from '@/components/Avatar/Avatar';
-import { AccountInfoPanel } from './AccountInfoPanel';
+import { getSlicedAddress } from '@/utils/address';
+import { getExplorerURL } from '@/utils/external';
 
 const DropdownMenuContentStyle = {
   marginTop: '-22px',
 };
 
 export function AccountDropdown() {
-  const { address } = useAccount();
+  const { address, chainId } = useAccount();
+  const { disconnect } = useDisconnect();
+  const pathname = usePathname();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleDisconnectWallet = useCallback(() => {
+    disconnect();
+  }, [disconnect]);
+
+  if (!address) return null;
 
   return (
-    <DropdownMenu.Root>
+    <DropdownMenu.Root open={isOpen} onOpenChange={setIsOpen}>
       <DropdownMenu.Trigger asChild>
-        <div className="flex h-8 w-8 items-center justify-center">
-          {address && (
-            <button type="button" aria-label="Disconnect">
-              <Avatar address={address} />
-            </button>
-          )}
+        <div className="flex h-8 w-8 items-center justify-center transition-transform duration-200 hover:-translate-y-[2px]">
+          <button type="button" aria-label="Account menu">
+            <Avatar address={address} />
+          </button>
         </div>
       </DropdownMenu.Trigger>
+
       <DropdownMenu.Portal>
         <DropdownMenu.Content
           align="end"
@@ -29,10 +44,49 @@ export function AccountDropdown() {
           className={clsx(
             'h-42 inline-flex w-60 flex-col items-start justify-start',
             'bg-surface rounded bg-opacity-90 px-6 pb-2 pt-6 shadow backdrop-blur-2xl',
+            'animate-in fade-in slide-in-from-right duration-300',
           )}
           style={DropdownMenuContentStyle}
         >
-          <AccountInfoPanel />
+          <div className="mb-4 inline-flex items-center justify-start gap-2 text-sm">
+            <Avatar address={address} />
+            <div className="inline-flex flex-col items-start justify-center gap-1">
+              <div className="w-32 font-inter text-sm font-medium text-primary">
+                <Name address={address} />
+              </div>
+              <span className="w-32 font-inter text-xs font-medium text-zinc-400">
+                {getSlicedAddress(address)}
+              </span>
+            </div>
+            <Link href={getExplorerURL(address, chainId ?? 1)} target="_blank">
+              <ExternalLinkIcon className="relative h-4 w-4" />
+            </Link>
+          </div>
+
+          <hr className="h-px self-stretch border-transparent bg-opacity-20 text-primary" />
+          <Link
+            href="/settings"
+            className={clsx(
+              'my-4 inline-flex items-center justify-between self-stretch no-underline',
+              pathname === '/settings' && 'text-primary',
+            )}
+          >
+            <span className="w-32 text-left font-inter text-sm font-medium text-primary">
+              Settings
+            </span>
+            <FiSettings className="relative h-4 w-4" />
+          </Link>
+          <button
+            type="button"
+            aria-label="Disconnect"
+            className="my-4 inline-flex items-center justify-between self-stretch"
+            onClick={handleDisconnectWallet}
+          >
+            <span className="w-32 text-left font-inter text-sm font-medium text-primary">
+              Log out
+            </span>
+            <ExitIcon className="relative h-4 w-4" />
+          </button>
         </DropdownMenu.Content>
       </DropdownMenu.Portal>
     </DropdownMenu.Root>
diff --git a/src/components/layout/header/AccountInfoPanel.tsx b/src/components/layout/header/AccountInfoPanel.tsx
deleted file mode 100644
index f25f94d3..00000000
--- a/src/components/layout/header/AccountInfoPanel.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useCallback } from 'react';
-import { Name } from '@coinbase/onchainkit/identity';
-import { ExitIcon, ExternalLinkIcon } from '@radix-ui/react-icons';
-import { clsx } from 'clsx';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { FiSettings } from 'react-icons/fi';
-import { useAccount, useDisconnect } from 'wagmi';
-import { Avatar } from '@/components/Avatar/Avatar';
-import { getSlicedAddress } from '@/utils/address';
-import { getExplorerURL } from '@/utils/external';
-
-export function AccountInfoPanel() {
-  const { address, chainId } = useAccount();
-  const { disconnect } = useDisconnect();
-  const pathname = usePathname();
-
-  const handleDisconnectWallet = useCallback(() => {
-    disconnect();
-  }, [disconnect]);
-
-  if (!address) return null;
-
-  return (
-    <>
-      <div className="mb-4 inline-flex items-center justify-start gap-2 text-sm">
-        <Avatar address={address} />
-        <div className="inline-flex flex-col items-start justify-center gap-1">
-          <div className="w-32 font-inter text-sm font-medium text-primary">
-            <Name address={address} />
-          </div>
-          <span className="w-32 font-inter text-xs font-medium text-zinc-400">
-            {getSlicedAddress(address)}
-          </span>
-        </div>
-        <Link href={getExplorerURL(address, chainId ?? 1)} target="_blank">
-          <ExternalLinkIcon className="relative h-4 w-4" />
-        </Link>
-      </div>
-      <hr className="h-px self-stretch border-transparent bg-opacity-20 text-primary" />
-      <Link
-        href="/settings"
-        className={clsx(
-          'my-4 inline-flex items-center justify-between self-stretch no-underline',
-          pathname === '/settings' && 'text-primary',
-        )}
-      >
-        <span className="w-32 text-left font-inter text-sm font-medium text-primary">Settings</span>
-        <FiSettings className="relative h-4 w-4" />
-      </Link>
-      <button
-        type="button"
-        aria-label="Disconnect"
-        className="my-4 inline-flex items-center justify-between self-stretch"
-        onClick={handleDisconnectWallet}
-      >
-        <span className="w-32 text-left font-inter text-sm font-medium text-primary">Log out</span>
-        <ExitIcon className="relative h-4 w-4" />
-      </button>
-    </>
-  );
-}
diff --git a/src/components/layout/header/Navbar.tsx b/src/components/layout/header/Navbar.tsx
index c8e8983e..efb7c7c4 100644
--- a/src/components/layout/header/Navbar.tsx
+++ b/src/components/layout/header/Navbar.tsx
@@ -1,13 +1,11 @@
 'use client';
 
-import { useState } from 'react';
 import { clsx } from 'clsx';
 import Image from 'next/image';
 import NextLink from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useTheme } from 'next-themes';
 import { FaRegMoon, FaSun } from 'react-icons/fa';
-import { RiMenu3Line, RiCloseLine } from 'react-icons/ri';
 import { useAccount } from 'wagmi';
 import logo from '../../imgs/logo.png';
 import AccountConnect from './AccountConnect';
@@ -26,15 +24,16 @@ export function NavbarLink({
   matchKey?: string;
 }) {
   const pathname = usePathname();
-  const isActive = pathname.includes(matchKey ?? href);
+  const isActive = matchKey === '/' ? pathname === matchKey : pathname.includes(matchKey ?? href);
 
   return (
     <NextLink
       href={href}
       className={clsx(
-        'px-2 py-1 text-center text-base font-normal text-primary no-underline',
-        'relative after:absolute after:bottom-[-4px] after:left-0 after:h-[2px] after:w-full after:origin-bottom-right after:scale-x-0 after:bg-primary after:transition-transform after:duration-300 after:ease-out',
-        isActive && 'after:origin-bottom-left after:scale-x-100',
+        'px-2 py-1 text-center font-zen text-base font-normal text-primary no-underline',
+        'relative after:absolute after:bottom-[-4px] after:left-0 after:h-[2px] after:w-full after:bg-primary',
+        'transition-all duration-200 hover:-translate-y-[2px]',
+        isActive ? 'after:opacity-100' : 'after:opacity-0',
       )}
       target={target}
       aria-label={ariaLabel}
@@ -60,54 +59,29 @@ export function NavbarTitle() {
   );
 }
 
-function Navbar() {
+export function Navbar() {
   const { theme, setTheme } = useTheme();
   const { address } = useAccount();
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   return (
-    <nav
-      className={clsx(
-        'flex flex-1 flex-grow items-center justify-between',
-        'bg-surface rounded-[5px] p-4 shadow-sm backdrop-blur-2xl',
-      )}
-    >
+    <nav className="bg-surface flex h-full w-full items-center justify-between rounded px-4 font-zen">
       <NavbarTitle />
-      <div className="flex items-center gap-8">
-        {/* Desktop Navigation */}
-        <ul className="hidden items-center justify-end gap-4 text-opacity-80 md:flex">
-          <li className="flex">
-            <NavbarLink href={`/positions/${address ?? ''}`} matchKey="positions">
-              Dashboard
-            </NavbarLink>
-          </li>
-          <li className="flex">
-            <NavbarLink href="/markets" matchKey="markets">
-              Markets
-            </NavbarLink>
-          </li>
-          <li className="flex">
-            <NavbarLink href={`/rewards/${address ?? ''}`} matchKey="rewards">
-              Rewards
-            </NavbarLink>
-          </li>
-        </ul>
 
-        {/* Mobile Menu Button */}
-        <button
-          type="button"
-          className="flex items-center text-primary md:hidden"
-          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-          aria-label="Toggle mobile menu"
-        >
-          {isMobileMenuOpen ? <RiCloseLine size={24} /> : <RiMenu3Line size={24} />}
-        </button>
+      <div className="flex items-center gap-8">
+        <div className="flex items-center gap-2">
+          <NavbarLink href="/markets">Markets</NavbarLink>
+          <NavbarLink href={`/positions/${address ?? ''}`}>Portfolio</NavbarLink>
+          <NavbarLink href={`/rewards/${address ?? ''}`} matchKey="/rewards">
+            Rewards
+          </NavbarLink>
+          {/* <NavbarLink href="/settings/faq">FAQ</NavbarLink> */}
+        </div>
 
         <div className="flex items-center gap-4">
           <button
             type="button"
             onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-            className="hover:bg-surface-hover flex h-10 w-10 items-center justify-center rounded-full bg-transparent text-primary"
+            className="hover:bg-hover flex h-10 w-10 items-center justify-center rounded-full"
             aria-label="Toggle theme"
           >
             {theme === 'dark' ? <FaSun size={20} /> : <FaRegMoon size={20} />}
@@ -115,31 +89,7 @@ function Navbar() {
           <AccountConnect />
         </div>
       </div>
-
-      {/* Mobile Navigation Menu */}
-      {isMobileMenuOpen && (
-        <div className="bg-surface absolute left-0 right-0 top-[72px] z-50 p-4 shadow-lg md:hidden">
-          <ul className="flex flex-col gap-4">
-            <li>
-              <NavbarLink href={`/positions/${address ?? ''}`} matchKey="positions">
-                Dashboard
-              </NavbarLink>
-            </li>
-            <li>
-              <NavbarLink href="/markets" matchKey="markets">
-                Markets
-              </NavbarLink>
-            </li>
-            <li>
-              <NavbarLink href={`/rewards/${address ?? ''}`} matchKey="rewards">
-                Rewards
-              </NavbarLink>
-            </li>
-          </ul>
-        </div>
-      )}
     </nav>
   );
 }
-
 export default Navbar;
diff --git a/src/components/layout/header/NavbarMobile.tsx b/src/components/layout/header/NavbarMobile.tsx
index 98815428..caad3d16 100644
--- a/src/components/layout/header/NavbarMobile.tsx
+++ b/src/components/layout/header/NavbarMobile.tsx
@@ -14,13 +14,13 @@ export default function NavbarMobile() {
 
   const navbarClass = [
     'flex flex-1 flex-grow items-center justify-between',
-    'rounded-sm bg-main p-4 backdrop-blur-2xl',
+    'rounded bg-surface p-4 backdrop-blur-2xl',
     'mx-4',
   ].join(' ');
 
   if (isMobileMenuOpen) {
     return (
-      <nav className="sm:max-h-100 bg-main flex flex-col gap-4 rounded-sm p-2 backdrop-blur-2xl">
+      <nav className="sm:max-h-100 bg-surface flex flex-col gap-4 rounded p-2 backdrop-blur-2xl">
         <div className={navbarClass}>
           <div className="flex grow items-center justify-between gap-4">
             <NavbarTitle />
@@ -37,20 +37,22 @@ export default function NavbarMobile() {
         <div>
           <ul className="mx-2 flex flex-col gap-4">
             <li className="flex">
-              <NavbarLink href="/">
+              <NavbarLink href="/" matchKey="/">
                 <p className="text-base opacity-80 hover:opacity-100">Home</p>
               </NavbarLink>
             </li>
             <li className="flex">
-              <NavbarLink href="/markets">Markets</NavbarLink>
+              <NavbarLink href="/markets" matchKey="/markets">
+                <p className="text-base opacity-80 hover:opacity-100">Markets</p>
+              </NavbarLink>
             </li>
             <li className="flex">
-              <NavbarLink href={`/positions/${address ?? ''}`}>
+              <NavbarLink href={`/positions/${address ?? ''}`} matchKey="/positions">
                 <p className="text-base opacity-80 hover:opacity-100">Portfolio</p>
               </NavbarLink>
             </li>
             <li className="flex">
-              <NavbarLink href={`/rewards/${address ?? ''}`}>
+              <NavbarLink href={`/rewards/${address ?? ''}`} matchKey="/rewards">
                 <p className="text-base opacity-80 hover:opacity-100">Rewards</p>
               </NavbarLink>
             </li>