diff --git a/components/StakingIntroCards.tsx b/components/StakingIntroCards.tsx
new file mode 100644
index 00000000..5bd2873f
--- /dev/null
+++ b/components/StakingIntroCards.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { GrNodes } from "react-icons/gr";
+import { BetweenVerticalEnd } from "lucide-react";
+import Link from "next/link";
+
+const StakingIntroCards = () => {
+ const cards = [
+ {
+ icon: ,
+ title: "Validator Staking",
+ description:
+ "Learn about Tangle's Nominated Proof of Stake (NPoS) system for validator selection and rewards.",
+ link: "../restake/staking-intro",
+ },
+ {
+ icon: ,
+ title: "Liquid Staking",
+ description:
+ "Explore Tangle's liquid staking protocols for validator-specific staking operations and liquid staked tokens (LSTs).",
+ link: "../restake/lst-concepts",
+ },
+ {
+ icon: ,
+ title: "Restaking",
+ description:
+ "Discover Tangle's permissionless and asset-configurable restaking system for Blueprints and shared security.",
+ link: "../restake/restake-introduction",
+ },
+ ];
+
+ return (
+
+ {cards.map((card, index) => (
+
+
+
{card.icon}
+
{card.title}
+
{card.description}
+
+
+ ))}
+
+ );
+};
+
+export default StakingIntroCards;
diff --git a/pages/restake/images/restake-workflow.png b/pages/restake/images/restake-workflow.png
index 11e6e8d1..a208cf72 100644
Binary files a/pages/restake/images/restake-workflow.png and b/pages/restake/images/restake-workflow.png differ