diff --git a/public/assets/img/token/bloodline.png b/public/assets/img/token/bloodline.png
new file mode 100644
index 0000000..ab60436
Binary files /dev/null and b/public/assets/img/token/bloodline.png differ
diff --git a/src/components/StakeMenu.vue b/src/components/StakeMenu.vue
new file mode 100644
index 0000000..454f31a
--- /dev/null
+++ b/src/components/StakeMenu.vue
@@ -0,0 +1,91 @@
+<template>
+	<div>
+		<token-input v-model="tokenNumber">
+			<template v-slot:message>
+				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(25)">25%</div>
+				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(50)">50%</div>
+				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(75)">75%</div>
+				<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(100)">100%</div>
+			</template>
+		</token-input>
+		<div class="input-balance">Balance: {{ walletStore.memeToken.balanceOf }}</div>
+		<div class="btn btn-immortal stake-button" @click="stakeBloodline" v-if="props.stake">Stake</div>
+		<div class="btn btn-immortal stake-button" @click="unstakeBloodline" v-else>Unstake</div>
+		<div class="btn btn-immortal black cancel-button" @click="emit('close')">Cancel</div>
+	</div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+import TokenInput from "./TokenInput.vue";
+import { useWalletStoreV2 } from "@/stores/walletV2";
+import { useRewardLockerStore } from "@/stores/rewardlocker";
+import { useTokenStore } from "@/stores/tokens";
+import { createPermitObject, getSignatureRSV } from "@/helper/blockchain.js";
+
+import { signTypedData } from "@wagmi/core";
+
+const walletStore = useWalletStoreV2();
+const rewardLockerStore = useRewardLockerStore();
+const tokenStore = useTokenStore();
+
+const props = defineProps({
+	stake: Boolean,
+});
+
+const emit = defineEmits(["close"]);
+
+const tokenNumber = ref(null);
+async function addTokensPercent(value) {
+	let amount;
+	if (props.stake) {
+		amount = (walletStore.memeToken.balanceOf * value) / 100;
+	} else {
+		amount = (walletStore.memeToken.staked * value) / 100;
+	}
+	tokenNumber.value = amount;
+}
+
+async function unstakeBloodline() {
+	alert("todo");
+}
+
+async function stakeBloodline() {
+	const fromAddress = walletStore.address;
+	const spender = rewardLockerStore.config.contractAddress;
+	const deadline = Date.now() + 20 * 60;
+	const decimals = tokenStore.getToken(walletStore.memeToken.contractAddress).decimals;
+	const value = (tokenNumber.value * Math.pow(10, decimals)).toString();
+	const nonce = await tokenStore.memeToken.contract.read.nonces([fromAddress]);
+	console.log("nonce", nonce);
+	const { types, message, domain, primaryType } = createPermitObject(fromAddress, spender, nonce, deadline, value);
+
+	const signature = await signTypedData({
+		domain: domain,
+		message: message,
+		primaryType: primaryType,
+		types: types,
+	});
+
+	const { r, s, v } = getSignatureRSV(signature);
+
+	var resultStake = await rewardLockerStore.contract.write.stakeToBeSecured([value, deadline, v, r, s]);
+
+	console.log("resultStake", resultStake);
+}
+</script>
+
+<style lang="sass">
+.btn
+    &.btn-immortal
+        &.cancel-button
+            font-size: 14px
+            text-align: center
+        &.stake-button
+            font-size: 18px
+            text-align: center
+.input-balance
+    margin: 8px 0
+    color: var(--grey, #858585)
+</style>
diff --git a/src/components/TokenInput.vue b/src/components/TokenInput.vue
new file mode 100644
index 0000000..f3d2937
--- /dev/null
+++ b/src/components/TokenInput.vue
@@ -0,0 +1,53 @@
+<template>
+	<div class="token-input">
+		<div class="sarcrifice-from-input">
+			<input
+				@input="emit('update:modelValue', $event.target.value)"
+				v-model="props.modelValue"
+				:placeholder="0"
+			/>
+			<token-logo img="/assets/img/token/bloodline.png" :alt="'test'"></token-logo>
+		</div>
+		<div class="value-adder">
+			<slot class="value-adder" name="message"></slot>
+		</div>
+	</div>
+</template>
+
+<script setup>
+const props = defineProps({
+	modelValue: Number,
+});
+
+const emit = defineEmits(["update:modelValue"]);
+</script>
+
+<style lang="sass">
+.sarcrifice-from-input
+    display: flex
+    margin-bottom: 8px
+    // height: 60px
+    input
+        width: 100%
+        height: 45px
+        font-size: 24px
+        border-radius: 16px
+        padding: 0 16px
+        @media (min-width: 992px)
+            font-size: 32px
+            height: auto
+.value-adder
+    display: flex
+    gap: 8px
+    .stake-adder-step
+        padding: 4px 16px
+        color: var(--black)
+        font-size: 14px
+        border-width: 1px
+        border-color: transparent
+        border-style: solid
+        &:hover,&:active, &:focus
+            color: var(--white)
+            border-color: var(--white)
+            background-color: var(--black)
+</style>
diff --git a/src/components/TokenLogo.vue b/src/components/TokenLogo.vue
new file mode 100644
index 0000000..667781d
--- /dev/null
+++ b/src/components/TokenLogo.vue
@@ -0,0 +1,24 @@
+<template>
+	<div class="token-logo">
+		<img :src="props.img" :alt="props.alt" />
+	</div>
+</template>
+
+<script setup>
+const props = defineProps({
+	img: String,
+	alt: Number,
+});
+</script>
+
+<style lang="sass">
+.token-logo
+    img
+        width: 45px
+        height: 45px
+        border-radius: 50%
+        pointer-events: none
+        @media (min-width: 992px)
+            height: 83px
+            width: auto
+</style>
diff --git a/src/helper/blockchain.js b/src/helper/blockchain.js
new file mode 100644
index 0000000..c35f940
--- /dev/null
+++ b/src/helper/blockchain.js
@@ -0,0 +1,72 @@
+import { useTokenStore } from "@/stores/tokens";
+
+export function createPermitObject(fromAddress, spender, nonce, deadline, value) {
+    const tokenStore = useTokenStore();
+
+    const message = {
+		owner: fromAddress,
+		spender: spender,
+		nonce: nonce,
+		deadline: deadline,
+		value: value,
+    };
+    
+    const domainType = [
+		{ name: "name", type: "string" },
+		{ name: "version", type: "string" },
+		{ name: "chainId", type: "uint256" },
+		{ name: "verifyingContract", type: "address" },
+    ];
+    
+
+    const primaryType = "Permit";
+
+    const types =  {
+        EIP712Domain: domainType,
+        Permit: [
+            {
+                name: "owner",
+                type: "address",
+            },
+            {
+                name: "spender",
+                type: "address",
+            },
+            {
+                name: "value",
+                type: "uint256",
+            },
+            {
+                name: "nonce",
+                type: "uint256",
+            },
+            {
+                name: "deadline",
+                type: "uint256",
+            },
+        ],
+    }
+    
+    const domain = {
+		name: "Bloodline",
+		version: "1",
+		chainId: 5,
+		verifyingContract: tokenStore.memeToken.contractAddress,
+	};
+    
+    return {
+            types,
+			message,
+			domain,
+            primaryType,
+		};
+}
+
+export function getSignatureRSV(sig) {
+	// splits the signature to r, s, and v values.
+	// const pureSig = sig.replace("0x", "");
+	const r = sig.slice(0, 66);
+	const s = "0x" + sig.slice(66, 130);
+	const v = Number("0x" + sig.slice(130, 132));
+	return { v, r, s };
+};