diff --git a/apps/marginfi-v2-ui/src/components/desktop/Points/PointsCheckingUser.tsx b/apps/marginfi-v2-ui/src/components/desktop/Points/PointsCheckingUser.tsx
index aca30f0962..9a97da8117 100644
--- a/apps/marginfi-v2-ui/src/components/desktop/Points/PointsCheckingUser.tsx
+++ b/apps/marginfi-v2-ui/src/components/desktop/Points/PointsCheckingUser.tsx
@@ -5,7 +5,7 @@ interface PointsCheckingUserProps {}
 
 export const PointsCheckingUser: FC<PointsCheckingUserProps> = ({}) => {
   return (
-    <Card className="w-2/3 bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
+    <Card className="max-w-[800px] mx-auto w-full bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
       <CardContent>
         <div className="w-full flex flex-col justify-evenly items-center p-2 text-base text-white font-aeonik font-[400] rounded-xl text-center">
           <div>
diff --git a/apps/marginfi-v2-ui/src/components/desktop/Points/PointsConnectWallet.tsx b/apps/marginfi-v2-ui/src/components/desktop/Points/PointsConnectWallet.tsx
index 0ed8b4afb5..cef8667ee3 100644
--- a/apps/marginfi-v2-ui/src/components/desktop/Points/PointsConnectWallet.tsx
+++ b/apps/marginfi-v2-ui/src/components/desktop/Points/PointsConnectWallet.tsx
@@ -7,7 +7,7 @@ interface PointsConnectWalletProps {}
 
 export const PointsConnectWallet: FC<PointsConnectWalletProps> = ({}) => {
   return (
-    <Card className="w-2/3 bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
+    <Card className="max-w-[800px] mx-auto w-full bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
       <CardContent>
         <div className="w-full flex flex-col justify-evenly items-center p-2 text-base text-white font-aeonik font-[400] rounded-xl text-center">
           <div>
diff --git a/apps/marginfi-v2-ui/src/components/desktop/Points/PointsLeaderBoard.tsx b/apps/marginfi-v2-ui/src/components/desktop/Points/PointsLeaderBoard.tsx
index 3d6ecd7d56..248b446672 100644
--- a/apps/marginfi-v2-ui/src/components/desktop/Points/PointsLeaderBoard.tsx
+++ b/apps/marginfi-v2-ui/src/components/desktop/Points/PointsLeaderBoard.tsx
@@ -6,7 +6,7 @@ import { LeaderboardRow } from "@mrgnlabs/marginfi-v2-ui-state";
 
 interface PointsLeaderBoardProps {
   leaderboardData: LeaderboardRow[];
-  currentUserId: string;
+  currentUserId?: string;
 }
 
 export const PointsLeaderBoard: FC<PointsLeaderBoardProps> = ({ leaderboardData, currentUserId }) => {
diff --git a/apps/marginfi-v2-ui/src/components/desktop/Points/PointsOverview.tsx b/apps/marginfi-v2-ui/src/components/desktop/Points/PointsOverview.tsx
index 350fee3bd1..760f0e4e4e 100644
--- a/apps/marginfi-v2-ui/src/components/desktop/Points/PointsOverview.tsx
+++ b/apps/marginfi-v2-ui/src/components/desktop/Points/PointsOverview.tsx
@@ -1,26 +1,20 @@
+import React, { FC } from "react";
 import Image from "next/image";
-import { MarginfiAccountWrapper } from "@mrgnlabs/marginfi-client-v2";
-import { Card, CardContent, Skeleton, TableCell, TableRow, Typography } from "@mui/material";
-import React, { FC, useCallback, useMemo, useState } from "react";
-import { toast } from "react-toastify";
-import {
-  groupedNumberFormatter,
-  uiToNative,
-  usdFormatter,
-  numeralFormatter,
-  groupedNumberFormatterDyn,
-} from "@mrgnlabs/mrgn-common";
+import { Card, CardContent, Skeleton, Typography } from "@mui/material";
+
+import { numeralFormatter, groupedNumberFormatterDyn } from "@mrgnlabs/mrgn-common";
+import { UserPointsData } from "@mrgnlabs/marginfi-v2-ui-state";
+
 import { MrgnTooltip } from "~/components/common/MrgnTooltip";
-import { AccountSummary, UserPointsData } from "@mrgnlabs/marginfi-v2-ui-state";
 
-interface PointsLeaderBoardProps {
+interface PointsOverviewProps {
   userPointsData: UserPointsData;
 }
 
-export const PointsOverview: FC<PointsLeaderBoardProps> = ({ userPointsData }) => {
+export const PointsOverview: FC<PointsOverviewProps> = ({ userPointsData }) => {
   return (
     <>
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5 w-2/3">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5 max-w-[800px] mx-auto w-full">
         <Card className="bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
           <CardContent>
             <Typography color="#868E95" className="font-aeonik font-[300] text-base flex gap-1" gutterBottom>
@@ -65,7 +59,7 @@ export const PointsOverview: FC<PointsLeaderBoardProps> = ({ userPointsData }) =
           </CardContent>
         </Card>
       </div>
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-5 w-2/3">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-5 max-w-[800px] mx-auto w-full">
         <Card className="bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
           <CardContent>
             <Typography color="#868E95" className="font-aeonik font-[300] text-base flex gap-1" gutterBottom>
diff --git a/apps/marginfi-v2-ui/src/components/desktop/Points/PointsSignIn.tsx b/apps/marginfi-v2-ui/src/components/desktop/Points/PointsSignIn.tsx
index 517a06b7e4..1dfff3eed7 100644
--- a/apps/marginfi-v2-ui/src/components/desktop/Points/PointsSignIn.tsx
+++ b/apps/marginfi-v2-ui/src/components/desktop/Points/PointsSignIn.tsx
@@ -30,7 +30,7 @@ export const PointsSignIn: FC<PointsSignInProps> = ({}) => {
   }, [connection, useAuthTx, walletContextState]);
 
   return (
-    <Card className="w-2/3 bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
+    <Card className="max-w-[800px] mx-auto w-full bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
       <CardContent>
         <div className="w-full flex flex-col justify-evenly items-center p-2 text-base text-white font-aeonik font-[400] rounded-xl text-center">
           <div>
diff --git a/apps/marginfi-v2-ui/src/components/desktop/Points/PointsSignUp.tsx b/apps/marginfi-v2-ui/src/components/desktop/Points/PointsSignUp.tsx
index a9559a003e..5f92292d4b 100644
--- a/apps/marginfi-v2-ui/src/components/desktop/Points/PointsSignUp.tsx
+++ b/apps/marginfi-v2-ui/src/components/desktop/Points/PointsSignUp.tsx
@@ -46,7 +46,7 @@ export const PointsSignUp: FC<PointsSignUpProps> = ({ referralCode }) => {
   }, [connection, finalReferralCode, useAuthTx, walletContextState]);
 
   return (
-    <Card className="w-2/3 bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
+    <Card className="max-w-[800px] mx-auto w-full bg-[#131619] h-full h-24 rounded-xl" elevation={0}>
       <CardContent>
         <div className="w-full flex flex-col justify-evenly items-center p-2 text-base text-white font-aeonik font-[400] rounded-xl text-center">
           <div>
diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileAccountSummary/MobileAccountSummary.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileAccountSummary/MobileAccountSummary.tsx
index a7ab7fac41..c092a55e19 100644
--- a/apps/marginfi-v2-ui/src/components/mobile/MobileAccountSummary/MobileAccountSummary.tsx
+++ b/apps/marginfi-v2-ui/src/components/mobile/MobileAccountSummary/MobileAccountSummary.tsx
@@ -2,21 +2,13 @@ import React, { FC } from "react";
 import dynamic from "next/dynamic";
 
 import { useMrgnlendStore } from "~/store";
-import { useWalletContext } from "~/hooks/useWalletContext";
-import { UserStats } from "~/components/common/AccountSummary";
 
 const GlobalStats = dynamic(async () => (await import("~/components/common/AccountSummary/GlobalStats")).GlobalStats, {
   ssr: false,
 });
 
 const AccountSummary: FC = () => {
-  const [isStoreInitialized, accountSummary, protocolStats, selectedAccount] = useMrgnlendStore((state) => [
-    state.initialized,
-    state.accountSummary,
-    state.protocolStats,
-    state.selectedAccount,
-  ]);
-  const { connected } = useWalletContext();
+  const [protocolStats] = useMrgnlendStore((state) => [state.protocolStats]);
 
   return (
     <div className="flex flex-col w-full justify-between items-left gap-4">
@@ -29,7 +21,7 @@ const AccountSummary: FC = () => {
             borrows={protocolStats.borrows}
             deposits={protocolStats.deposits}
           />
-        </div>{" "}
+        </div>
       </div>
 
       {/* <div className="flex-1">
diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCard.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCard.tsx
index 764c638a55..427034ee53 100644
--- a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCard.tsx
+++ b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCard.tsx
@@ -21,7 +21,7 @@ export const AssetCard: FC<{
   isInLendingMode: boolean;
   isConnected: boolean;
   marginfiAccount: MarginfiAccountWrapper | null;
-  inputRefs: React.MutableRefObject<Record<string, HTMLInputElement | null>>;
+  inputRefs?: React.MutableRefObject<Record<string, HTMLInputElement | null>>;
 }> = ({ bank, nativeSolBalance, isInLendingMode, marginfiAccount, inputRefs }) => {
   const { rateAP, assetWeight, isBankFilled, isBankHigh, bankCap } = useAssetItemData({ bank, isInLendingMode });
   const [mfiClient, fetchMrgnlendState] = useMrgnlendStore((state) => [state.marginfiClient, state.fetchMrgnlendState]);
diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardActions.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardActions.tsx
index 2d6be3e2a0..f40a6d6126 100644
--- a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardActions.tsx
+++ b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardActions.tsx
@@ -8,10 +8,10 @@ import { useWalletContext } from "~/hooks/useWalletContext";
 
 export const AssetCardActions: FC<{
   bank: ExtendedBankInfo;
-  inputRefs: React.MutableRefObject<Record<string, HTMLInputElement | null>>;
   isBankFilled: boolean;
   isInLendingMode: boolean;
   currentAction: ActionType | "Connect";
+  inputRefs?: React.MutableRefObject<Record<string, HTMLInputElement | null>>;
   onCloseBalance: () => void;
   onBorrowOrLend: (amount: number) => void;
 }> = ({ bank, inputRefs, isBankFilled, currentAction, onCloseBalance, onBorrowOrLend }) => {
diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/MobileAssetsList.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/MobileAssetsList.tsx
index 40a7b35cd9..8402c4e554 100644
--- a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/MobileAssetsList.tsx
+++ b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/MobileAssetsList.tsx
@@ -20,11 +20,6 @@ export const MobileAssetsList: FC = () => {
     state.nativeSolBalance,
     state.selectedAccount,
   ]);
-  const [lendZoomLevel, showBadges, setShowBadges] = useUserProfileStore((state) => [
-    state.lendZoomLevel,
-    state.showBadges,
-    state.setShowBadges,
-  ]);
   const inputRefs = useRef<Record<string, HTMLInputElement | null>>({});
   const [isInLendingMode, setIsInLendingMode] = useState(true);
 
diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileNavbar/MobileNavbar.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileNavbar/MobileNavbar.tsx
index f2b3d9da95..4f66c07862 100644
--- a/apps/marginfi-v2-ui/src/components/mobile/MobileNavbar/MobileNavbar.tsx
+++ b/apps/marginfi-v2-ui/src/components/mobile/MobileNavbar/MobileNavbar.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect } from "react";
 import Link from "next/link";
 import Image from "next/image";
-import AirdropZone from "./AirdropZone";
+
 import { useUserProfileStore } from "~/store";
 import { useRouter } from "next/router";
 import { useFirebaseAccount } from "~/hooks/useFirebaseAccount";
@@ -40,11 +40,11 @@ const MobileNavbar: FC = () => {
             swap
           </Link>
           <Link
-            href={"/bridge"}
-            className={`${router.pathname === "/bridge" ? "hover-underline-static" : "hover-underline-animation"}`}
+            href={"/portfolio"}
+            className={`${router.pathname === "/portfolio" ? "hover-underline-static" : "hover-underline-animation"}`}
           >
             <Image className="m-auto" src="/pie_chart.svg" alt="wallet icon" width={18.9} height={18.9} />
-            bridge
+            portfolio
           </Link>
 
           {/* <Link
diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/MobilePortfolioOverview.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/MobilePortfolioOverview.tsx
index 4987bc4d38..8675a17c0d 100644
--- a/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/MobilePortfolioOverview.tsx
+++ b/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/MobilePortfolioOverview.tsx
@@ -1,56 +1,23 @@
-import { FC, useEffect, useMemo } from "react";
-import Link from "next/link";
-import Image from "next/image";
-import { useMrgnlendStore, useUserProfileStore } from "~/store";
-import { useRouter } from "next/router";
-import { useFirebaseAccount } from "~/hooks/useFirebaseAccount";
-import { useWalletContext } from "~/hooks/useWalletContext";
+import React, { FC, useMemo } from "react";
+import { Typography } from "@mui/material";
 
-import { MarginRequirementType, MarginfiAccountWrapper } from "@mrgnlabs/marginfi-client-v2";
-import { AccountSummary, UserPointsData } from "@mrgnlabs/marginfi-v2-ui-state";
+import { MarginRequirementType } from "@mrgnlabs/marginfi-client-v2";
 import { usdFormatterDyn, usdFormatter, groupedNumberFormatterDyn } from "@mrgnlabs/mrgn-common";
+
+import { useMrgnlendStore, useUserProfileStore } from "~/store";
+
 import { SemiCircleProgress } from "./SemiCircleProgress";
-import { useConnection, useWallet } from "@solana/wallet-adapter-react";
-import { Typography } from "@mui/material";
 
-// @todo implement second pretty navbar row
 export const MobilePortfolioOverview: FC = () => {
-  const [
-    marginfiClient,
-    fetchMrgnlendState,
-    selectedAccount,
-    accountSummary,
-    extendedBankInfos,
-    nativeSolBalance,
-    protocolStats,
-  ] = useMrgnlendStore((state) => [
-    state.marginfiClient,
-    state.fetchMrgnlendState,
-    state.selectedAccount,
-    state.accountSummary,
-    state.extendedBankInfos,
-    state.nativeSolBalance,
-    state.protocolStats,
-  ]);
-  const { wallet } = useWallet();
-  const connection = useConnection();
-
-  useEffect(() => {
-    fetchMrgnlendState();
-    const id = setInterval(() => fetchMrgnlendState().catch(console.error), 30_000);
-    return () => clearInterval(id);
-  }, [wallet]); // eslint-disable-line react-hooks/exhaustive-deps
-  // ^ crucial to omit both `connection` and `fetchMrgnlendState` from the dependency array
-  // TODO: fix...
+  const [selectedAccount, accountSummary] = useMrgnlendStore((state) => [state.selectedAccount, state.accountSummary]);
 
   const [userPointsData, currentFirebaseUser] = useUserProfileStore((state) => [
     state.userPointsData,
     state.currentFirebaseUser,
   ]);
 
-  console.log({ selectedAccount });
-
   const healthFactor = useMemo(() => {
+    console.log({ selectedAccount });
     if (selectedAccount) {
       const { assets, liabilities } = selectedAccount.computeHealthComponents(MarginRequirementType.Maintenance);
       return assets.isZero() ? 100 : assets.minus(liabilities).dividedBy(assets).toNumber() * 100;
@@ -60,10 +27,10 @@ export const MobilePortfolioOverview: FC = () => {
   }, [selectedAccount]);
 
   return (
-    <div className="bg-[#171C1F] rounded-xl p-6 flex flex-col gap-[10px] h-full w-full">
+    <div className="max-w-[800px] mx-auto w-full bg-[#131619] rounded-xl p-6 flex flex-col gap-[10px] h-full">
       <div className="font-aeonik font-normal flex items-center text-2xl text-white pb-2">Your overview</div>
       <div className="text-center mx-auto">
-        <div className={`text-sm font-normal text-[#868E95] pb-4px`}>Health factor</div>
+        <div className={`text-sm font-normal text-[#868E95] pb-[4px]`}>Health factor</div>
         <SemiCircleProgress amount={healthFactor ?? 0} />
       </div>
       <div className="flex flex-row pt-[10px] flex-wrap gap-[10px]">
diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/SemiCircleProgress.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/SemiCircleProgress.tsx
index c167ed3264..9e7a1e57f4 100644
--- a/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/SemiCircleProgress.tsx
+++ b/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/SemiCircleProgress.tsx
@@ -1,7 +1,8 @@
+import React, { useEffect, useRef, useState } from "react";
 import { keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
+
 import { percentFormatter } from "@mrgnlabs/mrgn-common";
-import React, { useEffect, useRef, useState } from "react";
 
 type Props = {
   amount: number;
@@ -55,7 +56,7 @@ export const SemiCircleProgress = ({ amount }: Props) => {
       width: "180px",
       height: "90px",
       borderRadius: "90px",
-      backgroundColor: "#171C1F",
+      backgroundColor: "#131619",
       top: "10px",
       marginLeft: "auto",
       marginRight: "auto",
@@ -84,7 +85,7 @@ export const SemiCircleProgress = ({ amount }: Props) => {
 
     ".rotatingCircleWrap": {
       position: "absolute",
-      backgroundColor: "#171C1F",
+      backgroundColor: "#131619",
       left: "0px",
       width: "200px",
       height: "100px",
@@ -92,7 +93,6 @@ export const SemiCircleProgress = ({ amount }: Props) => {
     },
 
     ".rotatingCircle": {
-      // position: "absolute",
       overflow: "hidden",
       top: "0px",
       left: "0px",
diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/index.ts b/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/index.ts
new file mode 100644
index 0000000000..f872bac67d
--- /dev/null
+++ b/apps/marginfi-v2-ui/src/components/mobile/MobilePortfolioOverview/index.ts
@@ -0,0 +1 @@
+export * from "./MobilePortfolioOverview";
diff --git a/apps/marginfi-v2-ui/src/pages/_app.tsx b/apps/marginfi-v2-ui/src/pages/_app.tsx
index 30be73c899..c4c67bc8fb 100644
--- a/apps/marginfi-v2-ui/src/pages/_app.tsx
+++ b/apps/marginfi-v2-ui/src/pages/_app.tsx
@@ -77,8 +77,10 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
             <Footer />
           </Desktop>
           <Mobile>
-            <div className="absolute top-[33px] right-[40px]">
-              <WalletButton />
+            <div className="relative w-full ">
+              <div className="absolute top-[33px] right-[40px]">
+                <WalletButton />
+              </div>
             </div>
             <MobileNavbar />
             <div className="w-full flex flex-col justify-center items-center pt-[24px]">
diff --git a/apps/marginfi-v2-ui/src/pages/index.tsx b/apps/marginfi-v2-ui/src/pages/index.tsx
index ca27378855..bd371a2b33 100644
--- a/apps/marginfi-v2-ui/src/pages/index.tsx
+++ b/apps/marginfi-v2-ui/src/pages/index.tsx
@@ -1,13 +1,15 @@
-import React, { FC, useEffect } from "react";
-import { Banner } from "~/components/desktop/Banner";
-import { PageHeader } from "~/components/desktop/PageHeader";
-import { useWalletContext } from "~/hooks/useWalletContext";
+import React, { useEffect } from "react";
+import dynamic from "next/dynamic";
+import { useConnection } from "@solana/wallet-adapter-react";
+
 import { shortenAddress } from "@mrgnlabs/mrgn-common";
+
 import config from "~/config/marginfi";
-import { useMrgnlendStore } from "../store";
-import dynamic from "next/dynamic";
+import { useMrgnlendStore } from "~/store";
+import { useWalletContext } from "~/hooks/useWalletContext";
+import { Banner } from "~/components/desktop/Banner";
+import { PageHeader } from "~/components/desktop/PageHeader";
 import { OverlaySpinner } from "~/components/desktop/OverlaySpinner";
-import { useConnection } from "@solana/wallet-adapter-react";
 import { Desktop, Mobile } from "~/mediaQueries";
 
 const DesktopAccountSummary = () => {
@@ -123,7 +125,7 @@ const Home = () => {
 
       <Mobile>
         <PageHeader />
-        <div className="flex flex-col h-full justify-start content-start pt-[16px] w-4/5 max-w-7xl gap-4">
+        <div className="flex flex-col h-full justify-start content-start pt-[16px] w-4/5 max-w-7xl gap-4 mb-20">
           <MobileAccountSummary />
           <MobileAssetsList />
         </div>
diff --git a/apps/marginfi-v2-ui/src/pages/portfolio.tsx b/apps/marginfi-v2-ui/src/pages/portfolio.tsx
index 4b9101efd6..d50ccc39e3 100644
--- a/apps/marginfi-v2-ui/src/pages/portfolio.tsx
+++ b/apps/marginfi-v2-ui/src/pages/portfolio.tsx
@@ -1,35 +1,45 @@
-import { useEffect } from "react";
-import { PageHeaderSwap } from "~/components/desktop/PageHeader";
-import { useWalletContext } from "~/hooks/useWalletContext";
-import { MobilePortfolioOverview } from "~/components/mobile/MobilePortfolioOverview/MobilePortfolioOverview";
+import { useEffect, useMemo } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import FileCopyIcon from "@mui/icons-material/FileCopy";
 import { useConnection } from "@solana/wallet-adapter-react";
-import { useMrgnlendStore } from "~/store";
+
+import { useMrgnlendStore, useUserProfileStore } from "~/store";
 import config from "~/config/marginfi";
+import { useWalletContext } from "~/hooks/useWalletContext";
+import { PageHeader } from "~/components/desktop/PageHeader";
 import { MobileAccountSummary } from "~/components/mobile/MobileAccountSummary";
+import { MobilePortfolioOverview } from "~/components/mobile/MobilePortfolioOverview";
+import {
+  PointsOverview,
+  PointsSignIn,
+  PointsSignUp,
+  PointsCheckingUser,
+  PointsConnectWallet,
+} from "~/components/desktop/Points";
+import { AssetCard } from "~/components/mobile/MobileAssetsList/AssetCard";
+import { Button, Skeleton } from "@mui/material";
 
 const PortfolioPage = () => {
-  const { walletAddress, wallet, isOverride } = useWalletContext();
+  const { connected, wallet, isOverride } = useWalletContext();
+  const { query: routerQuery } = useRouter();
   const { connection } = useConnection();
-  const [
-    fetchMrgnlendState,
-    setIsRefreshingStore,
-    marginfiAccountCount,
-    selectedAccount,
-    userDataFetched,
-    resetUserData,
-  ] = useMrgnlendStore((state) => [
-    state.fetchMrgnlendState,
-    state.setIsRefreshingStore,
-    state.marginfiAccountCount,
-    state.selectedAccount,
-    state.userDataFetched,
-    state.resetUserData,
+  const [isStoreInitialized, sortedBanks, nativeSolBalance, selectedAccount, fetchMrgnlendState, setIsRefreshingStore] =
+    useMrgnlendStore((state) => [
+      state.initialized,
+      state.extendedBankInfos,
+      state.nativeSolBalance,
+      state.selectedAccount,
+      state.fetchMrgnlendState,
+      state.setIsRefreshingStore,
+    ]);
+  const [currentFirebaseUser, hasUser, userPointsData] = useUserProfileStore((state) => [
+    state.currentFirebaseUser,
+    state.hasUser,
+    state.userPointsData,
   ]);
 
-  const [isStoreInitialized, isRefreshingStore] = useMrgnlendStore((state) => [
-    state.initialized,
-    state.isRefreshingStore,
-  ]);
+  const referralCode = useMemo(() => routerQuery.referralCode as string | undefined, [routerQuery.referralCode]);
 
   useEffect(() => {
     setIsRefreshingStore(true);
@@ -45,10 +55,128 @@ const PortfolioPage = () => {
 
   return (
     <>
-      <PageHeaderSwap />
-      <div className="flex flex-col h-full justify-start content-start pt-[16px] w-4/5 max-w-7xl gap-7">
+      <PageHeader text={"Portfolio"} />
+      <div className="flex flex-col h-full justify-start content-start pt-[16px] w-4/5 max-w-7xl gap-7 mb-20">
         <MobileAccountSummary />
         <MobilePortfolioOverview />
+        {!connected ? (
+          <PointsConnectWallet />
+        ) : currentFirebaseUser ? (
+          <PointsOverview userPointsData={userPointsData} />
+        ) : hasUser === null ? (
+          <PointsCheckingUser />
+        ) : hasUser ? (
+          <PointsSignIn />
+        ) : (
+          <PointsSignUp referralCode={referralCode} />
+        )}
+        <div className="flex flex-wrap justify-center items-center gap-5">
+          <Button
+            className="normal-case text-lg font-aeonik w-[92%] min-h-[60px] rounded-[45px] whitespace-nowrap min-w-[260px] max-w-[260px]"
+            style={{
+              backgroundColor: "rgb(227, 227, 227)",
+              border: "none",
+              color: "black",
+              zIndex: 10,
+            }}
+            component="a"
+            href="https://medium.com/marginfi/introducing-mrgn-points-949e18f31a8c"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            How do points work?
+          </Button>
+          {currentFirebaseUser && (
+            <Button
+              className={`normal-case text-lg font-aeonik w-[92%] min-h-[60px] rounded-[45px] gap-2 whitespace-nowrap min-w-[260px] max-w-[260px]`}
+              style={{
+                backgroundImage: userPointsData.isCustomReferralLink
+                  ? "radial-gradient(ellipse at center, #fff 0%, #fff 10%, #DCE85D 60%, #DCE85D 100%)"
+                  : "none",
+                backgroundColor: userPointsData.isCustomReferralLink ? "transparent" : "rgb(227, 227, 227)",
+
+                border: "none",
+                color: "black",
+                zIndex: 10,
+              }}
+              onClick={() => {
+                if (userPointsData.referralLink) {
+                  navigator.clipboard.writeText(userPointsData.referralLink);
+                }
+              }}
+            >
+              {`${
+                userPointsData.isCustomReferralLink
+                  ? userPointsData.referralLink?.replace("https://", "")
+                  : "Copy referral link"
+              }`}
+              <FileCopyIcon />
+            </Button>
+          )}
+        </div>
+        <div className="text-center text-[#868E95] text-xs flex justify-center gap-1">
+          <div>We reserve the right to update point calculations at any time.</div>
+          <div>
+            <Link href="/terms/points" style={{ textDecoration: "underline" }}>
+              Terms.
+            </Link>
+          </div>
+        </div>
+        <div className="col-span-full">
+          <div className="font-aeonik font-normal flex items-center text-2xl text-white pb-2">Lending positions</div>
+          <div className="flex flew-row flex-wrap gap-4">
+            {sortedBanks
+              .filter((b) => b.isActive)
+              .map((bank, i) =>
+                isStoreInitialized ? (
+                  <AssetCard
+                    key={bank.meta.tokenSymbol}
+                    nativeSolBalance={nativeSolBalance}
+                    bank={bank}
+                    isInLendingMode={false}
+                    isConnected={connected}
+                    marginfiAccount={selectedAccount}
+                  />
+                ) : (
+                  <Skeleton
+                    key={bank.meta.tokenSymbol}
+                    sx={{ bgcolor: "grey.900" }}
+                    variant="rounded"
+                    width={390}
+                    height={215}
+                  />
+                )
+              )}
+          </div>
+        </div>
+
+        <div className="col-span-full">
+          <div className="font-aeonik font-normal flex items-center text-2xl text-white pb-2">Borrowing positions</div>
+          <div className="flex flew-row flex-wrap gap-4">
+            {sortedBanks
+              .filter((b) => b.isActive)
+              .map((bank, i) =>
+                isStoreInitialized ? (
+                  <AssetCard
+                    key={bank.meta.tokenSymbol}
+                    nativeSolBalance={nativeSolBalance}
+                    bank={bank}
+                    isInLendingMode={true}
+                    isConnected={connected}
+                    marginfiAccount={selectedAccount}
+                  />
+                ) : (
+                  <Skeleton
+                    key={bank.meta.tokenSymbol}
+                    sx={{ bgcolor: "grey.900" }}
+                    variant="rounded"
+                    width={390}
+                    height={215}
+                  />
+                )
+              )}
+          </div>
+        </div>
       </div>
     </>
   );