diff --git a/apps/mesh-cloud/public/logo-sidan/sidan.png b/apps/mesh-cloud/public/logo-sidan/sidan.png
new file mode 100644
index 0000000..2c45690
Binary files /dev/null and b/apps/mesh-cloud/public/logo-sidan/sidan.png differ
diff --git a/apps/mesh-cloud/src/components/layouts/header/index.tsx b/apps/mesh-cloud/src/components/layouts/header/index.tsx
index d0f9fd9..7ce92ef 100644
--- a/apps/mesh-cloud/src/components/layouts/header/index.tsx
+++ b/apps/mesh-cloud/src/components/layouts/header/index.tsx
@@ -1,11 +1,16 @@
+import { Logo, SidanLogo } from "@/components/layouts/logo";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
+import { MessagePopup } from "@/components/ui/popup";
 import { useValidateStaking } from "@/hooks/useValidateStaking";
 import { CardanoWallet } from "@meshsdk/react";
 import { CheckCircledIcon, CrossCircledIcon } from "@radix-ui/react-icons";
+import { useState } from "react";
 import Nav from "./nav";
 
 export default function Header() {
+  const [popup, setPopup] = useState<"" | "staking" | "drep">("");
+
   const {
     rewardAddress,
     isStaked,
@@ -17,6 +22,39 @@ export default function Header() {
   return (
     <header className="sticky top-0 z-50 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
       <Nav />
+      {popup == "staking" && (
+        <MessagePopup
+          title={"Please delegate your stake to SIDAN Lab pool to continue"}
+          onAction1={() => {
+            stakeToPool();
+            setPopup("");
+          }}
+          action1Text={"Stake"}
+          action1Icon={<SidanLogo size={28} />}
+          onClose={() => setPopup("")}
+        />
+      )}
+
+      {popup == "drep" && (
+        <MessagePopup
+          title={
+            "Please delegate your votes to MeshJS or SIDAN Lab DRep to continue"
+          }
+          onAction1={() => {
+            delegateDRep("mesh");
+            setPopup("");
+          }}
+          action1Text={"Mesh"}
+          action1Icon={<Logo fill={"black"} size={28} />}
+          onAction2={() => {
+            delegateDRep("sidan");
+            setPopup("");
+          }}
+          action2Text={"SIDAN"}
+          action2Icon={<SidanLogo size={28} />}
+          onClose={() => setPopup("")}
+        />
+      )}
       <div className="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
         <form className="ml-auto flex-1 sm:flex-initial">
           <div className="relative flex items-center gap-4">
@@ -31,13 +69,13 @@ export default function Header() {
               <>
                 {isStaked ? (
                   <Label className="flex items-center gap-2">
-                    <CheckCircledIcon className="h-6 w-6" />
+                    {isStaked && <SidanLogo size={24} />}
                     <p>Staked</p>
                   </Label>
                 ) : (
                   <Button
                     type="button"
-                    onClick={stakeToPool}
+                    onClick={() => setPopup("staking")}
                     variant={"ghost"}
                     className="flex items-center gap-2"
                   >
@@ -48,13 +86,17 @@ export default function Header() {
 
                 {isDRepDelegated ? (
                   <Label className="flex items-center gap-2">
-                    <CheckCircledIcon className="h-6 w-6" />
+                    {isDRepDelegated == "mesh" ? (
+                      <Logo fill={"black"} size={24} />
+                    ) : (
+                      <SidanLogo size={24} />
+                    )}
                     Delegated
                   </Label>
                 ) : (
                   <Button
                     type="button"
-                    onClick={delegateDRep}
+                    onClick={() => setPopup("drep")}
                     variant={"ghost"}
                     className="flex items-center gap-2"
                   >
diff --git a/apps/mesh-cloud/src/components/layouts/header/nav.tsx b/apps/mesh-cloud/src/components/layouts/header/nav.tsx
index a1ec113..3aeffbf 100644
--- a/apps/mesh-cloud/src/components/layouts/header/nav.tsx
+++ b/apps/mesh-cloud/src/components/layouts/header/nav.tsx
@@ -1,3 +1,4 @@
+import { Logo } from "@/components/layouts/logo";
 import { NAV } from "@/data/nav";
 import Link from "next/link";
 
@@ -24,19 +25,6 @@ export default function Nav() {
   );
 }
 
-function Logo() {
-  return (
-    <svg
-      className="h-10 w-10"
-      enableBackground="new 0 0 300 200"
-      viewBox="0 0 300 200"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="white"
-    >
-      <path d="m289 127-45-60-45-60c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-37 49.3c-2 2.7-6 2.7-8 0l-37-49.3c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-45 60-45 60c-1.3 1.8-1.3 4.2 0 6l45 60c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l45-60c1.3-1.8 1.3-4.2 0-6zm-90-103.3 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-90 0 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-53 152.6-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0z" />
-    </svg>
-  );
-}
 // if selected
 {
   /* <Link
diff --git a/apps/mesh-cloud/src/components/layouts/logo.tsx b/apps/mesh-cloud/src/components/layouts/logo.tsx
new file mode 100644
index 0000000..fcf1a51
--- /dev/null
+++ b/apps/mesh-cloud/src/components/layouts/logo.tsx
@@ -0,0 +1,31 @@
+export function Logo({
+  fill = "white",
+  size = 40,
+}: {
+  fill?: string;
+  size?: number;
+}) {
+  return (
+    <svg
+      enableBackground="new 0 0 300 200"
+      viewBox="0 0 300 200"
+      xmlns="http://www.w3.org/2000/svg"
+      fill={fill}
+      width={size}
+      height={size}
+    >
+      <path d="m289 127-45-60-45-60c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-37 49.3c-2 2.7-6 2.7-8 0l-37-49.3c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-45 60-45 60c-1.3 1.8-1.3 4.2 0 6l45 60c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l45-60c1.3-1.8 1.3-4.2 0-6zm-90-103.3 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-90 0 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-53 152.6-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0z" />
+    </svg>
+  );
+}
+
+export function SidanLogo({ size = 40 }: { size?: number }) {
+  return (
+    <img
+      src="/logo-sidan/sidan.png"
+      alt="Sidan Logo"
+      width={size}
+      height={size}
+    />
+  );
+}
diff --git a/apps/mesh-cloud/src/components/ui/overlay.tsx b/apps/mesh-cloud/src/components/ui/overlay.tsx
new file mode 100644
index 0000000..5f3cc72
--- /dev/null
+++ b/apps/mesh-cloud/src/components/ui/overlay.tsx
@@ -0,0 +1,33 @@
+import { cn } from "@/lib/utils";
+import * as React from "react";
+
+export const Overlay = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "fixed left-0 top-0 z-[50] flex h-screen w-screen items-center justify-center bg-transparent backdrop-blur-sm",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+));
+
+export interface OverlayInteractiveProps {
+  onClick?: () => void;
+}
+
+export const OverlayInteractive = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, onClick }, ref) => (
+  <div
+    ref={ref}
+    onClick={onClick}
+    className={cn("absolute left-0 top-0 z-[-1] h-full w-full", className)}
+  />
+));
diff --git a/apps/mesh-cloud/src/components/ui/popup.tsx b/apps/mesh-cloud/src/components/ui/popup.tsx
new file mode 100644
index 0000000..17a810f
--- /dev/null
+++ b/apps/mesh-cloud/src/components/ui/popup.tsx
@@ -0,0 +1,66 @@
+import { Logo } from "@/components/layouts/logo";
+import { Button } from "@/components/ui/button";
+import { Overlay, OverlayInteractive } from "@/components/ui/overlay";
+import { Cross1Icon } from "@radix-ui/react-icons";
+
+export interface MessagePopupProps {
+  title: string;
+  content?: string;
+  onClose: () => void;
+  onAction1?: () => void;
+  action1Icon?: React.ReactNode;
+  action1Text?: string;
+  onAction2?: () => void;
+  action2Icon?: React.ReactNode;
+  action2Text?: string;
+}
+
+export const MessagePopup = ({
+  title,
+  content,
+  onClose,
+  onAction1,
+  action1Icon,
+  action1Text = "Confirm",
+  onAction2,
+  action2Icon,
+  action2Text,
+}: MessagePopupProps) => {
+  if (!onAction1) {
+    onAction1 = () => onClose();
+  }
+
+  return (
+    <Overlay>
+      <OverlayInteractive />
+      <div className="text-navigation-1 border-gradient-primary relative flex flex-col gap-8 rounded-sm border-[2px] bg-accent px-12 py-6">
+        <div className="flex w-full items-center justify-between gap-2">
+          <Logo />
+
+          <button className="btn h-6 w-6" onClick={onClose}>
+            <Cross1Icon width={24} height={24} />
+          </button>
+        </div>
+
+        <div className="flex flex-col gap-6">
+          <div className="text-title-1 text-center">{title}</div>
+          <div className="text-body-2 text-center">{content}</div>
+        </div>
+        <div className="flex justify-center gap-4">
+          {onAction1 && action1Text && (
+            <Button onClick={onAction1} className="flex gap-1">
+              {action1Icon}
+              {action1Text}
+            </Button>
+          )}
+          {onAction2 && action2Text && (
+            <Button onClick={onAction2} className="flex gap-1">
+              {action2Icon}
+              {action2Text}
+            </Button>
+          )}
+        </div>
+      </div>
+    </Overlay>
+  );
+};
diff --git a/apps/mesh-cloud/src/hooks/useValidateStaking.ts b/apps/mesh-cloud/src/hooks/useValidateStaking.ts
index 2912500..ff9bfc4 100644
--- a/apps/mesh-cloud/src/hooks/useValidateStaking.ts
+++ b/apps/mesh-cloud/src/hooks/useValidateStaking.ts
@@ -11,8 +11,11 @@ import { useWallet } from "@meshsdk/react";
 import { useCallback, useEffect, useState } from "react";
 
 const blockfrostApiKey = process.env.NEXT_PUBLIC_BLOCKFROST_API_KEY_PREPROD!;
-const meshPoolId = process.env.NEXT_PUBLIC_MESH_POOL_ID!;
-const meshDRepId = process.env.NEXT_PUBLIC_MESH_DREP_ID!; // (Leon, 10/08/2024) - Use CIP-105 DRep ID for backward compatibility, as current Mesh csl does not support CIP-129 yet
+const sidanPoolId = process.env.NEXT_PUBLIC_SIDAN_POOL_ID!;
+const meshDRepId = process.env.NEXT_PUBLIC_MESH_DREP_ID!;
+const sidanDRepId = process.env.NEXT_PUBLIC_SIDAN_DREP_ID!;
+
+type DRepOption = "mesh" | "sidan";
 
 export const useValidateStaking = () => {
   const blockchainProvider = new BlockfrostProvider(blockfrostApiKey);
@@ -26,7 +29,7 @@ export const useValidateStaking = () => {
 
   const [isRegistered, setIsRegistered] = useState<boolean>(false);
   const [isStaked, setIsStaked] = useState<boolean>(false);
-  const [isDRepDelegated, setIsDRepDelegated] = useState<boolean>(false);
+  const [isDRepDelegated, setIsDRepDelegated] = useState<DRepOption | "">("");
 
   const checkAddressInfo = async (stakeAddress: string) => {
     const info = await blockchainProvider.get(`/accounts/${stakeAddress}`);
@@ -35,12 +38,18 @@ export const useValidateStaking = () => {
 
     setIsRegistered(active);
 
-    if (active && pool_id && pool_id == meshPoolId) {
+    if (active && pool_id && pool_id == sidanPoolId) {
       setIsStaked(true);
     }
 
-    if (drep_id && drep_id == meshDRepId) {
-      setIsDRepDelegated(true);
+    if (drep_id) {
+      if (drep_id == sidanDRepId) {
+        setIsDRepDelegated("sidan");
+      }
+
+      if (drep_id == meshDRepId) {
+        setIsDRepDelegated("mesh");
+      }
     }
   };
 
@@ -61,7 +70,7 @@ export const useValidateStaking = () => {
         tx.registerStake(rewardAddress);
       }
 
-      tx.delegateStake(rewardAddress, meshPoolId);
+      tx.delegateStake(rewardAddress, sidanPoolId);
 
       const unsignedTx = await tx.build();
       const signedTx = await wallet.signTx(unsignedTx);
@@ -76,56 +85,59 @@ export const useValidateStaking = () => {
       setErrorMessage(`Error staking to pool.`);
       console.log(error);
     }
-  }, [rewardAddress, wallet, isRegistered, meshPoolId]);
+  }, [rewardAddress, wallet, isRegistered, sidanPoolId]);
 
-  const delegateDRep = useCallback(async () => {
-    if (!rewardAddress) {
-      setErrorMessage("Connect your wallet first before delegating to DRep");
-      return;
-    }
-    if (!wallet) {
-      setErrorMessage("Wallet not connected");
-      return;
-    }
+  const delegateDRep = useCallback(
+    async (drep: DRepOption = "sidan") => {
+      if (!rewardAddress) {
+        setErrorMessage("Connect your wallet first before delegating to DRep");
+        return;
+      }
+      if (!wallet) {
+        setErrorMessage("Wallet not connected");
+        return;
+      }
 
-    const utxos = await wallet.getUtxos();
+      const utxos = await wallet.getUtxos();
 
-    const changeAddress = await wallet.getChangeAddress();
+      const changeAddress = await wallet.getChangeAddress();
 
-    const assetMap = new Map<Unit, Quantity>();
-    assetMap.set("lovelace", "5000000");
-    const selectedUtxos = keepRelevant(assetMap, utxos);
+      const assetMap = new Map<Unit, Quantity>();
+      assetMap.set("lovelace", "5000000");
+      const selectedUtxos = keepRelevant(assetMap, utxos);
 
-    const txBuilder = new MeshTxBuilder();
+      const txBuilder = new MeshTxBuilder();
 
-    for (const utxo of selectedUtxos) {
-      txBuilder.txIn(
-        utxo.input.txHash,
-        utxo.input.outputIndex,
-        utxo.output.amount,
-        utxo.output.address,
-      );
-    }
+      for (const utxo of selectedUtxos) {
+        txBuilder.txIn(
+          utxo.input.txHash,
+          utxo.input.outputIndex,
+          utxo.output.amount,
+          utxo.output.address,
+        );
+      }
 
-    txBuilder
-      .voteDelegationCertificate(
-        {
-          dRepId: meshDRepId,
-        },
-        rewardAddress,
-      )
-      .changeAddress(changeAddress);
-
-    const unsignedTx = await txBuilder.complete();
-    const signedTx = await wallet.signTx(unsignedTx);
-    const txHash = await wallet.submitTx(signedTx);
-    console.log("DelegateDRep success: ", txHash);
-
-    if (txHash) {
-      setErrorMessage(null);
-      setIsDRepDelegated(true);
-    }
-  }, [rewardAddress, wallet]);
+      txBuilder
+        .voteDelegationCertificate(
+          {
+            dRepId: drep == "mesh" ? meshDRepId : sidanDRepId,
+          },
+          rewardAddress,
+        )
+        .changeAddress(changeAddress);
+
+      const unsignedTx = await txBuilder.complete();
+      const signedTx = await wallet.signTx(unsignedTx);
+      const txHash = await wallet.submitTx(signedTx);
+      console.log("DelegateDRep success: ", txHash);
+
+      if (txHash) {
+        setErrorMessage(null);
+        setIsDRepDelegated(drep);
+      }
+    },
+    [rewardAddress, wallet],
+  );
 
   useEffect(() => {
     if (walletInfo.name) {