diff --git a/web/src/app/[cat]/InteractionClient.tsx b/web/src/app/[cat]/InteractionClient.tsx
index 448656a0..f6015012 100644
--- a/web/src/app/[cat]/InteractionClient.tsx
+++ b/web/src/app/[cat]/InteractionClient.tsx
@@ -1,12 +1,18 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import { Info } from "lucide-react";
+import { Info, Coins, Settings, ArrowUpRight, ArrowDownRight, Lock, Unlock } from "lucide-react";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { getPublicClient } from "@wagmi/core";
 import { config } from "@/utils/config";
 import { useSearchParams } from "next/navigation";
 import { CONTRIBUTION_ACCOUNTING_TOKEN_ABI } from "@/contractsABI/ContributionAccountingTokenABI";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { useAccount, useWriteContract, useWaitForTransactionReceipt } from "wagmi";
+import { parseEther } from "viem";
 
 // Define supported chain IDs
 type SupportedChainId = 1 | 137 | 534351 | 5115 | 61 | 2001;
@@ -22,9 +28,16 @@ interface TokenDetailsState {
 }
 
 export default function InteractionClient() {
+  const { address } = useAccount();
   const searchParams = useSearchParams();
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [mintAmount, setMintAmount] = useState("");
+  const [newMaxSupply, setNewMaxSupply] = useState("");
+  const [newThresholdSupply, setNewThresholdSupply] = useState("");
+  const [newMaxExpansionRate, setNewMaxExpansionRate] = useState("");
+  const [transferAmount, setTransferAmount] = useState("");
+  const [transferTo, setTransferTo] = useState("");
 
   const [tokenAddress, setTokenAddress] = useState<`0x${string}`>("0x0");
   const [chainId, setChainId] = useState<SupportedChainId | null>(null);
@@ -130,7 +143,38 @@ export default function InteractionClient() {
     }
   }, [tokenAddress, chainId]);
 
-  // Rest of the component remains the same...
+  // Contract write hooks
+  const { writeContract: mint, data: mintData } = useWriteContract();
+
+  const { writeContract: reduceMaxSupply, data: reduceMaxSupplyData } = useWriteContract();
+
+  const { writeContract: reduceThresholdSupply, data: reduceThresholdSupplyData } = useWriteContract();
+
+  const { writeContract: reduceMaxExpansionRate, data: reduceMaxExpansionRateData } = useWriteContract();
+
+  const { writeContract: disableTransferRestriction, data: disableTransferRestrictionData } = useWriteContract();
+
+  // Transaction hooks
+  const { isLoading: isMinting } = useWaitForTransactionReceipt({
+    hash: mintData,
+  });
+
+  const { isLoading: isReducingMaxSupply } = useWaitForTransactionReceipt({
+    hash: reduceMaxSupplyData,
+  });
+
+  const { isLoading: isReducingThresholdSupply } = useWaitForTransactionReceipt({
+    hash: reduceThresholdSupplyData,
+  });
+
+  const { isLoading: isReducingMaxExpansionRate } = useWaitForTransactionReceipt({
+    hash: reduceMaxExpansionRateData,
+  });
+
+  const { isLoading: isDisablingTransferRestriction } = useWaitForTransactionReceipt({
+    hash: disableTransferRestrictionData,
+  });
+
   if (isLoading) {
     return (
       <div className="w-full h-screen flex items-center justify-center bg-gray-50 dark:bg-black">
@@ -150,73 +194,213 @@ export default function InteractionClient() {
   }
 
   return (
-    <div className="w-full pt-14">
-      <Card className="w-full mt-8 mx-8">
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-xl font-bold">
-            <div className="flex items-center space-x-2">
-              <Info className="h-6 w-6 text-gray-500 dark:text-gray-400" />
-              <span>Token Information</span>
-            </div>
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="space-y-4">
-              <div className="bg-white dark:bg-[#141414] border border-gray-200 dark:border-gray-800 rounded-md p-4">
-                <div className="text-sm text-gray-600 dark:text-gray-400 font-semibold">
-                  Token Name
-                </div>
-                <div className="text-lg text-gray-900 dark:text-white">
-                  {tokenDetails.tokenName}
+    <div className="min-h-screen bg-gradient-to-b">
+      <div className="max-w-7xl mx-auto space-y-8">
+        {/* Header Section */}
+        <div className="text-center mb-12">
+          <h1 className="text-3xl text-gray-600 dark:text-gray-400">
+            {tokenDetails.tokenSymbol} Token Management
+          </h1>
+        </div>
+
+        {/* Token Overview Card */}
+        <Card className="bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm border-2 border-gray-200 dark:border-gray-800 shadow-xl">
+          <CardHeader className="border-b border-gray-200 dark:border-gray-800">
+            <CardTitle className="flex items-center gap-2 text-2xl">
+              <Info className="h-6 w-6 text-blue-500" />
+              Token Overview
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="pt-6">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
+                <div className="flex items-center gap-2 mb-2">
+                  <Coins className="h-5 w-5 text-green-500" />
+                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Max Supply</h3>
                 </div>
+                <p className="text-3xl font-bold text-gray-900 dark:text-white">
+                  {tokenDetails.maxSupply}
+                </p>
               </div>
-              <div className="bg-white dark:bg-[#141414] border border-gray-200 dark:border-gray-800 rounded-md p-4">
-                <div className="text-sm text-gray-600 dark:text-gray-400 font-semibold">
-                  Token Symbol
-                </div>
-                <div className="text-lg text-gray-900 dark:text-white">
-                  {tokenDetails.tokenSymbol}
+              <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
+                <div className="flex items-center gap-2 mb-2">
+                  <ArrowUpRight className="h-5 w-5 text-blue-500" />
+                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Threshold Supply</h3>
                 </div>
+                <p className="text-3xl font-bold text-gray-900 dark:text-white">
+                  {tokenDetails.thresholdSupply}
+                </p>
               </div>
-              <div className="bg-white dark:bg-[#141414] border border-gray-200 dark:border-gray-800 rounded-md p-4">
-                <div className="text-sm text-gray-600 dark:text-gray-400 font-semibold">
-                  Max Supply
-                </div>
-                <div className="text-lg text-gray-900 dark:text-white">
-                  {tokenDetails.maxSupply}
+              <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
+                <div className="flex items-center gap-2 mb-2">
+                  <ArrowDownRight className="h-5 w-5 text-purple-500" />
+                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Max Expansion Rate</h3>
                 </div>
+                <p className="text-3xl font-bold text-gray-900 dark:text-white">
+                  {tokenDetails.maxExpansionRate}%
+                </p>
+              </div>
+            </div>
+            <div className="mt-6 bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
+              <div className="flex items-center gap-2 mb-2">
+                <Info className="h-5 w-5 text-gray-500" />
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Contract Address</h3>
+              </div>
+              <p className="text-sm font-mono text-gray-600 dark:text-gray-400 break-all">
+                {tokenDetails.transactionHash}
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Mint Tokens Card */}
+        <Card className="bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm border-2 border-gray-200 dark:border-gray-800 shadow-xl">
+          <CardHeader className="border-b border-gray-200 dark:border-gray-800">
+            <CardTitle className="flex items-center gap-2 text-2xl">
+              <Coins className="h-6 w-6 text-green-500" />
+              Mint Tokens
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="pt-6">
+            <div className="max-w-md mx-auto space-y-6">
+              <div className="space-y-2">
+                <Label htmlFor="mintAmount" className="text-lg">Amount to Mint</Label>
+                <Input
+                  id="mintAmount"
+                  type="number"
+                  placeholder="Enter amount"
+                  value={mintAmount}
+                  onChange={(e) => setMintAmount(e.target.value)}
+                  className="h-12 text-lg"
+                />
               </div>
+              <Button
+                onClick={() => mint({
+                  abi: CONTRIBUTION_ACCOUNTING_TOKEN_ABI,
+                  address: tokenAddress,
+                  functionName: "mint",
+                  args: [address, parseEther(mintAmount)]
+                })}
+                disabled={!mintAmount || isMinting}
+                className="w-full h-12 text-lg"
+              >
+                {isMinting ? "Minting..." : "Mint Tokens"}
+              </Button>
             </div>
-            <div className="space-y-4">
-              <div className="bg-white dark:bg-[#141414] border border-gray-200 dark:border-gray-800 rounded-md p-4">
-                <div className="text-sm text-gray-600 dark:text-gray-400 font-semibold">
-                  Threshold Supply
+          </CardContent>
+        </Card>
+
+        {/* Admin Functions Card */}
+        <Card className="bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm border-2 border-gray-200 dark:border-gray-800 shadow-xl">
+          <CardHeader className="border-b border-gray-200 dark:border-gray-800">
+            <CardTitle className="flex items-center gap-2 text-2xl">
+              <Settings className="h-6 w-6 text-blue-500" />
+              Admin Functions
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="pt-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="newMaxSupply" className="text-lg">New Max Supply</Label>
+                  <Input
+                    id="newMaxSupply"
+                    type="number"
+                    placeholder="Enter new max supply"
+                    value={newMaxSupply}
+                    onChange={(e) => setNewMaxSupply(e.target.value)}
+                    className="h-12 text-lg"
+                  />
+                  <Button
+                    onClick={() => reduceMaxSupply({
+                      abi: CONTRIBUTION_ACCOUNTING_TOKEN_ABI,
+                      address: tokenAddress,
+                      functionName: "reduceMaxSupply",
+                      args: [parseEther(newMaxSupply)]
+                    })}
+                    disabled={!newMaxSupply || isReducingMaxSupply}
+                    className="w-full h-12 text-lg"
+                  >
+                    {isReducingMaxSupply ? "Updating..." : "Update Max Supply"}
+                  </Button>
                 </div>
-                <div className="text-lg text-gray-900 dark:text-white">
-                  {tokenDetails.thresholdSupply}
+
+                <div className="space-y-2">
+                  <Label htmlFor="newThresholdSupply" className="text-lg">New Threshold Supply</Label>
+                  <Input
+                    id="newThresholdSupply"
+                    type="number"
+                    placeholder="Enter new threshold supply"
+                    value={newThresholdSupply}
+                    onChange={(e) => setNewThresholdSupply(e.target.value)}
+                    className="h-12 text-lg"
+                  />
+                  <Button
+                    onClick={() => reduceThresholdSupply({
+                      abi: CONTRIBUTION_ACCOUNTING_TOKEN_ABI,
+                      address: tokenAddress,
+                      functionName: "reduceThresholdSupply",
+                      args: [parseEther(newThresholdSupply)]
+                    })}
+                    disabled={!newThresholdSupply || isReducingThresholdSupply}
+                    className="w-full h-12 text-lg"
+                  >
+                    {isReducingThresholdSupply ? "Updating..." : "Update Threshold Supply"}
+                  </Button>
                 </div>
               </div>
-              <div className="bg-white dark:bg-[#141414] border border-gray-200 dark:border-gray-800 rounded-md p-4">
-                <div className="text-sm text-gray-600 dark:text-gray-400 font-semibold">
-                  Max Expansion Rate
+
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="newMaxExpansionRate" className="text-lg">New Max Expansion Rate (%)</Label>
+                  <Input
+                    id="newMaxExpansionRate"
+                    type="number"
+                    placeholder="Enter new max expansion rate"
+                    value={newMaxExpansionRate}
+                    onChange={(e) => setNewMaxExpansionRate(e.target.value)}
+                    className="h-12 text-lg"
+                  />
+                  <Button
+                    onClick={() => reduceMaxExpansionRate({
+                      abi: CONTRIBUTION_ACCOUNTING_TOKEN_ABI,
+                      address: tokenAddress,
+                      functionName: "reduceMaxExpansionRate",
+                      args: [Number(newMaxExpansionRate) * 100]
+                    })}
+                    disabled={!newMaxExpansionRate || isReducingMaxExpansionRate}
+                    className="w-full h-12 text-lg"
+                  >
+                    {isReducingMaxExpansionRate ? "Updating..." : "Update Max Expansion Rate"}
+                  </Button>
                 </div>
-                <div className="text-lg text-gray-900 dark:text-white">
-                  {tokenDetails.maxExpansionRate}%
+
+                <div className="space-y-2">
+                  <Label className="text-lg">Transfer Restriction</Label>
+                  <Button
+                    onClick={() => disableTransferRestriction({
+                      abi: CONTRIBUTION_ACCOUNTING_TOKEN_ABI,
+                      address: tokenAddress,
+                      functionName: "disableTransferRestriction"
+                    })}
+                    disabled={isDisablingTransferRestriction}
+                    className="w-full h-12 text-lg"
+                  >
+                    {isDisablingTransferRestriction ? (
+                      "Disabling..."
+                    ) : (
+                      <div className="flex items-center gap-2">
+                        <Unlock className="h-5 w-5" />
+                        Disable Transfer Restriction
+                      </div>
+                    )}
+                  </Button>
                 </div>
               </div>
             </div>
-          </div>
-          <div className="mt-4 bg-white dark:bg-[#141414] border border-gray-200 dark:border-gray-800 rounded-md p-4">
-            <div className="text-sm text-gray-600 dark:text-gray-400 font-semibold">
-              Transaction Hash
-            </div>
-            <div className="text-sm text-gray-900 dark:text-white font-mono break-all">
-              {tokenDetails.transactionHash}
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+          </CardContent>
+        </Card>
+      </div>
     </div>
   );
 }