diff --git a/donorfront/src/App.js b/donorfront/src/App.js
index 46aebad..e8671db 100644
--- a/donorfront/src/App.js
+++ b/donorfront/src/App.js
@@ -1,31 +1,43 @@
 import React, { useState, useEffect } from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import Navigation from './Navigation';
 import BeneficiaryList from './BeneficiaryList';
+import BeneficiaryDetails from './BeneficiaryDetails';
 import DonationForm from './DonationForm';
 import UtilizationList from './UtilizationList';
 import AdminPanel from './AdminPanel';
-import { useWeb3 } from '../hooks/useWeb3';
-// import { getContractInstance } from '../utils/contractHelpers';
+import UserDashboard from './UserDashboard';
+import { Web3Provider } from '../contexts/Web3Context';
+import { UserProvider } from '../contexts/UserContext';
 
 const App = () => {
   const [userRole, setUserRole] = useState(null);
-  const [beneficiaries, setBeneficiaries] = useState([]);
-  const [donations, setDonations] = useState([]);
-  const [utilizations, setUtilizations] = useState([]);
-  const { account, web3 } = useWeb3();
 
   useEffect(() => {
-    // TODO: Fetch user role, beneficiaries, donations, and utilizations from the smart contract
+    // TODO: Fetch user role from the smart contract
   }, []);
 
   return (
-    <div className="app">
-      <h1>Charity Smart Contract UI</h1>
-      <BeneficiaryList beneficiaries={beneficiaries} />
-      <DonationForm beneficiaries={beneficiaries} />
-      <UtilizationList utilizations={utilizations} />
-      {userRole === 'ROLE_ADMIN' && <AdminPanel />}
-    </div>
+    <Web3Provider>
+      <UserProvider>
+        <Router>
+          <div className="min-h-screen bg-gray-50 text-gray-900">
+            <Navigation userRole={userRole} />
+            <main className="container mx-auto px-4 py-8">
+              <Switch>
+                <Route exact path="/" component={BeneficiaryList} />
+                <Route path="/beneficiary/:id" component={BeneficiaryDetails} />
+                <Route path="/donate/:id" component={DonationForm} />
+                <Route path="/utilization/:id" component={UtilizationList} />
+                {userRole === 'admin' && <Route path="/admin" component={AdminPanel} />}
+                <Route path="/dashboard" component={UserDashboard} />
+              </Switch>
+            </main>
+          </div>
+        </Router>
+      </UserProvider>
+    </Web3Provider>
   );
 };
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/donorfront/src/UserDashboard.js b/donorfront/src/UserDashboard.js
new file mode 100644
index 0000000..e69de29
diff --git a/donorfront/src/components/AdminPanel.js b/donorfront/src/components/AdminPanel.js
index e38956d..08b5d93 100644
--- a/donorfront/src/components/AdminPanel.js
+++ b/donorfront/src/components/AdminPanel.js
@@ -1,81 +1,107 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { useWeb3 } from '../hooks/useWeb3';
+import { getBeneficiaries, registerBeneficiary, approveUtilization } from '../utils/contractHelpers';
 
 const AdminPanel = () => {
-  const [beneficiaryName, setBeneficiaryName] = useState('');
-  const [beneficiaryDescription, setBeneficiaryDescription] = useState('');
-  const [beneficiaryTargetAmount, setBeneficiaryTargetAmount] = useState('');
-  const [utilizationBeneficiaryId, setUtilizationBeneficiaryId] = useState('');
-  const [utilizationDescription, setUtilizationDescription] = useState('');
-  const [utilizationAmount, setUtilizationAmount] = useState('');
+  const [beneficiaries, setBeneficiaries] = useState([]);
+  const [newBeneficiary, setNewBeneficiary] = useState({ name: '', description: '', targetAmount: '' });
+  const [utilizationRequests, setUtilizationRequests] = useState([]);
+  const { contract, address } = useWeb3();
 
-  const handleRegisterBeneficiary = (e) => {
-    e.preventDefault();
-    // TODO: Call the register-beneficiary function from the smart contract
-    console.log('Register beneficiary:', { beneficiaryName, beneficiaryDescription, beneficiaryTargetAmount });
+  useEffect(() => {
+    fetchBeneficiaries();
+    fetchUtilizationRequests();
+  }, [contract]);
+
+  const fetchBeneficiaries = async () => {
+    if (contract) {
+      const beneficiaryList = await getBeneficiaries(contract);
+      setBeneficiaries(beneficiaryList);
+    }
+  };
+
+  const fetchUtilizationRequests = async () => {
+    // TODO: Implement fetching utilization requests from the contract
   };
 
-  const handleAddUtilization = (e) => {
+  const handleRegisterBeneficiary = async (e) => {
     e.preventDefault();
-    // TODO: Call the add-utilization function from the smart contract
-    console.log('Add utilization:', { utilizationBeneficiaryId, utilizationDescription, utilizationAmount });
+    try {
+      await registerBeneficiary(contract, address, newBeneficiary.name, newBeneficiary.description, newBeneficiary.targetAmount);
+      setNewBeneficiary({ name: '', description: '', targetAmount: '' });
+      fetchBeneficiaries();
+    } catch (error) {
+      console.error('Error registering beneficiary:', error);
+    }
+  };
+
+  const handleApproveUtilization = async (beneficiaryId, milestoneId) => {
+    try {
+      await approveUtilization(contract, address, beneficiaryId, milestoneId);
+      fetchUtilizationRequests();
+    } catch (error) {
+      console.error('Error approving utilization:', error);
+    }
   };
 
   return (
-    <div className="admin-panel">
-      <h2>Admin Panel</h2>
-      <form onSubmit={handleRegisterBeneficiary}>
-        <h3>Register Beneficiary</h3>
-        <input
-          type="text"
-          value={beneficiaryName}
-          onChange={(e) => setBeneficiaryName(e.target.value)}
-          placeholder="Name"
-          required
-        />
-        <input
-          type="text"
-          value={beneficiaryDescription}
-          onChange={(e) => setBeneficiaryDescription(e.target.value)}
-          placeholder="Description"
-          required
-        />
-        <input
-          type="number"
-          value={beneficiaryTargetAmount}
-          onChange={(e) => setBeneficiaryTargetAmount(e.target.value)}
-          placeholder="Target Amount"
-          required
-        />
-        <button type="submit">Register Beneficiary</button>
-      </form>
+    <div className="space-y-8">
+      <h1 className="text-3xl font-bold text-blue-800">Admin Panel</h1>
+      
+      <div className="bg-white shadow-md rounded-lg p-6">
+        <h2 className="text-2xl font-semibold mb-4 text-blue-700">Register New Beneficiary</h2>
+        <form onSubmit={handleRegisterBeneficiary} className="space-y-4">
+          <input
+            type="text"
+            placeholder="Beneficiary Name"
+            value={newBeneficiary.name}
+            onChange={(e) => setNewBeneficiary({...newBeneficiary, name: e.target.value})}
+            className="w-full p-2 border border-gray-300 rounded"
+            required
+          />
+          <textarea
+            placeholder="Description"
+            value={newBeneficiary.description}
+            onChange={(e) => setNewBeneficiary({...newBeneficiary, description: e.target.value})}
+            className="w-full p-2 border border-gray-300 rounded"
+            required
+          ></textarea>
+          <input
+            type="number"
+            placeholder="Target Amount"
+            value={newBeneficiary.targetAmount}
+            onChange={(e) => setNewBeneficiary({...newBeneficiary, targetAmount: e.target.value})}
+            className="w-full p-2 border border-gray-300 rounded"
+            required
+          />
+          <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors">
+            Register Beneficiary
+          </button>
+        </form>
+      </div>
 
-      <form onSubmit={handleAddUtilization}>
-        <h3>Add Utilization</h3>
-        <input
-          type="number"
-          value={utilizationBeneficiaryId}
-          onChange={(e) => setUtilizationBeneficiaryId(e.target.value)}
-          placeholder="Beneficiary ID"
-          required
-        />
-        <input
-          type="text"
-          value={utilizationDescription}
-          onChange={(e) => setUtilizationDescription(e.target.value)}
-          placeholder="Description"
-          required
-        />
-        <input
-          type="number"
-          value={utilizationAmount}
-          onChange={(e) => setUtilizationAmount(e.target.value)}
-          placeholder="Amount"
-          required
-        />
-        <button type="submit">Add Utilization</button>
-      </form>
+      <div className="bg-white shadow-md rounded-lg p-6">
+        <h2 className="text-2xl font-semibold mb-4 text-blue-700">Utilization Requests</h2>
+        {utilizationRequests.length === 0 ? (
+          <p>No pending utilization requests.</p>
+        ) : (
+          <ul className="space-y-4">
+            {utilizationRequests.map((request) => (
+              <li key={request.id} className="flex justify-between items-center">
+                <span>{request.description} - {request.amount} STX</span>
+                <button
+                  onClick={() => handleApproveUtilization(request.beneficiaryId, request.milestoneId)}
+                  className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition-colors"
+                >
+                  Approve
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
     </div>
   );
 };
 
-export default AdminPanel;
+export default AdminPanel;
\ No newline at end of file
diff --git a/donorfront/src/components/BeneficiaryDetails.js b/donorfront/src/components/BeneficiaryDetails.js
new file mode 100644
index 0000000..e69de29
diff --git a/donorfront/src/components/BeneficiaryList.js b/donorfront/src/components/BeneficiaryList.js
index fd257d1..8297de8 100644
--- a/donorfront/src/components/BeneficiaryList.js
+++ b/donorfront/src/components/BeneficiaryList.js
@@ -1,23 +1,57 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { useWeb3 } from '../hooks/useWeb3';
+import { getBeneficiaries } from '../utils/contractHelpers';
+
+const BeneficiaryList = () => {
+  const [beneficiaries, setBeneficiaries] = useState([]);
+  const { contract } = useWeb3();
+
+  useEffect(() => {
+    const fetchBeneficiaries = async () => {
+      if (contract) {
+        const beneficiaryList = await getBeneficiaries(contract);
+        setBeneficiaries(beneficiaryList);
+      }
+    };
+
+    fetchBeneficiaries();
+  }, [contract]);
 
-const BeneficiaryList = ({ beneficiaries }) => {
   return (
-    <div className="beneficiary-list">
-      <h2>Beneficiaries</h2>
-      <ul>
+    <div className="space-y-8">
+      <h1 className="text-3xl font-bold text-blue-800">Beneficiaries</h1>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
         {beneficiaries.map((beneficiary) => (
-          <li key={beneficiary.id}>
-            <h3>{beneficiary.name}</h3>
-            <p>{beneficiary.description}</p>
-            <p>Target Amount: {beneficiary.targetAmount}</p>
-            <p>Received Amount: {beneficiary.receivedAmount}</p>
-            <p>Status: {beneficiary.status}</p>
-          </li>
+          <div key={beneficiary.id} className="bg-white shadow-md rounded-lg overflow-hidden transition-shadow hover:shadow-lg">
+            <div className="p-6">
+              <h2 className="text-xl font-semibold mb-2 text-blue-700">{beneficiary.name}</h2>
+              <p className="text-gray-600 mb-4">{beneficiary.description}</p>
+              <div className="flex justify-between items-center">
+                <span className="text-blue-600 font-semibold">
+                  {beneficiary.receivedAmount} / {beneficiary.targetAmount} STX
+                </span>
+                <Link
+                  to={`/beneficiary/${beneficiary.id}`}
+                  className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors"
+                >
+                  View Details
+                </Link>
+              </div>
+            </div>
+            <div className="bg-blue-100 px-6 py-4">
+              <div className="w-full bg-blue-200 rounded-full h-2.5">
+                <div 
+                  className="bg-blue-600 h-2.5 rounded-full" 
+                  style={{ width: `${(beneficiary.receivedAmount / beneficiary.targetAmount) * 100}%` }}
+                ></div>
+              </div>
+            </div>
+          </div>
         ))}
-      </ul>
+      </div>
     </div>
   );
 };
 
-export default BeneficiaryList;
-  
\ No newline at end of file
+export default BeneficiaryList;
\ No newline at end of file
diff --git a/donorfront/src/components/DonationForm.js b/donorfront/src/components/DonationForm.js
index 226e001..5f8f925 100644
--- a/donorfront/src/components/DonationForm.js
+++ b/donorfront/src/components/DonationForm.js
@@ -1,42 +1,60 @@
 import React, { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useWeb3 } from '../hooks/useWeb3';
+import { donate } from '../utils/contractHelpers';
 
-const DonationForm = ({ beneficiaries }) => {
-  const [selectedBeneficiary, setSelectedBeneficiary] = useState('');
+const DonationForm = () => {
+  const { id } = useParams();
   const [amount, setAmount] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const { contract, address } = useWeb3();
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
-    // TODO: Call the donate function from the smart contract
-    console.log('Donation submitted:', { beneficiaryId: selectedBeneficiary, amount });
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      await donate(contract, address, id, amount);
+      // TODO: Show success message and update UI
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   return (
-    <div className="donation-form">
-      <h2>Make a Donation</h2>
-      <form onSubmit={handleSubmit}>
-        <select
-          value={selectedBeneficiary}
-          onChange={(e) => setSelectedBeneficiary(e.target.value)}
-          required
+    <div className="max-w-md mx-auto bg-white shadow-md rounded-lg overflow-hidden">
+      <div className="bg-blue-600 text-white py-4 px-6">
+        <h2 className="text-2xl font-bold">Make a Donation</h2>
+      </div>
+      <form onSubmit={handleSubmit} className="p-6 space-y-6">
+        <div>
+          <label htmlFor="amount" className="block text-sm font-medium text-gray-700 mb-1">
+            Amount (STX)
+          </label>
+          <input
+            type="number"
+            id="amount"
+            value={amount}
+            onChange={(e) => setAmount(e.target.value)}
+            className="w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-blue-500 focus:border-blue-500"
+            required
+          />
+        </div>
+        {error && <p className="text-red-600 text-sm">{error}</p>}
+        <button
+          type="submit"
+          className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+          disabled={isLoading}
         >
-          <option value="">Select a beneficiary</option>
-          {beneficiaries.map((beneficiary) => (
-            <option key={beneficiary.id} value={beneficiary.id}>
-              {beneficiary.name}
-            </option>
-          ))}
-        </select>
-        <input
-          type="number"
-          value={amount}
-          onChange={(e) => setAmount(e.target.value)}
-          placeholder="Amount"
-          required
-        />
-        <button type="submit">Donate</button>
+          {isLoading ? 'Processing...' : 'Donate'}
+        </button>
       </form>
     </div>
   );
 };
 
-export default DonationForm;
+export default DonationForm;
\ No newline at end of file
diff --git a/donorfront/src/components/Navigation.js b/donorfront/src/components/Navigation.js
new file mode 100644
index 0000000..ff0e22c
--- /dev/null
+++ b/donorfront/src/components/Navigation.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Navigation = ({ userRole }) => {
+  return (
+    <nav className="bg-blue-600 text-white shadow-lg">
+      <div className="container mx-auto px-4">
+        <div className="flex justify-between items-center py-4">
+          <Link to="/" className="text-2xl font-bold text-white hover:text-blue-200 transition-colors">Charity DApp</Link>
+          <ul className="flex space-x-6">
+            <li><Link to="/" className="hover:text-blue-200 transition-colors">Home</Link></li>
+            <li><Link to="/dashboard" className="hover:text-blue-200 transition-colors">Dashboard</Link></li>
+            {userRole === 'admin' && (
+              <li><Link to="/admin" className="hover:text-blue-200 transition-colors">Admin</Link></li>
+            )}
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navigation;
\ No newline at end of file
diff --git a/donorfront/src/components/Statistics.js b/donorfront/src/components/Statistics.js
new file mode 100644
index 0000000..386fa56
--- /dev/null
+++ b/donorfront/src/components/Statistics.js
@@ -0,0 +1,43 @@
+import React from 'react';
+
+const StatCard = ({ title, value, icon }) => (
+  <div className="bg-white rounded-lg shadow-md p-6 flex items-center">
+    <div className="rounded-full bg-blue-100 p-3 mr-4">
+      {icon}
+    </div>
+    <div>
+      <h3 className="text-lg font-semibold text-gray-700">{title}</h3>
+      <p className="text-2xl font-bold text-blue-600">{value}</p>
+    </div>
+  </div>
+);
+
+const Statistics = ({ totalDonations, totalBeneficiaries, totalAmount }) => {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+      <StatCard
+        title="Total Donations"
+        value={totalDonations}
+        icon={<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>}
+      />
+      <StatCard
+        title="Total Beneficiaries"
+        value={totalBeneficiaries}
+        icon={<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+        </svg>}
+      />
+      <StatCard
+        title="Total Amount Raised"
+        value={`${totalAmount} STX`}
+        icon={<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>}
+      />
+    </div>
+  );
+};
+
+export default Statistics;
\ No newline at end of file
diff --git a/donorfront/src/components/UserDashboard.js b/donorfront/src/components/UserDashboard.js
new file mode 100644
index 0000000..336917d
--- /dev/null
+++ b/donorfront/src/components/UserDashboard.js
@@ -0,0 +1,48 @@
+import React, { useState, useEffect } from 'react';
+import { useWeb3 } from '../hooks/useWeb3';
+import { getUserDonations } from '../utils/contractHelpers';
+
+const UserDashboard = () => {
+  const [donations, setDonations] = useState([]);
+  const [totalDonated, setTotalDonated] = useState(0);
+  const { contract, address } = useWeb3();
+
+  useEffect(() => {
+    fetchUserDonations();
+  }, [contract, address]);
+
+  const fetchUserDonations = async () => {
+    if (contract && address) {
+      const userDonations = await getUserDonations(contract, address);
+      setDonations(userDonations);
+      setTotalDonated(userDonations.reduce((sum, donation) => sum + donation.amount, 0));
+    }
+  };
+
+  return (
+    <div className="space-y-8">
+      <h1 className="text-3xl font-bold text-blue-800">User Dashboard</h1>
+      
+      <div className="bg-white shadow-md rounded-lg p-6">
+        <h2 className="text-2xl font-semibold mb-4 text-blue-700">Your Donations</h2>
+        <p className="text-xl mb-4">Total Donated: <span className="font-bold text-blue-600">{totalDonated} STX</span></p>
+        
+        {donations.length === 0 ? (
+          <p>You haven't made any donations yet.</p>
+        ) : (
+          <ul className="space-y-4">
+            {donations.map((donation, index) => (
+              <li key={index} className="border-b pb-4">
+                <p className="font-semibold">{donation.beneficiaryName}</p>
+                <p className="text-gray-600">Amount: {donation.amount} STX</p>
+                <p className="text-gray-600">Date: {new Date(donation.timestamp * 1000).toLocaleDateString()}</p>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default UserDashboard;
\ No newline at end of file
diff --git a/donorfront/src/components/UtilizationList.js b/donorfront/src/components/UtilizationList.js
index a6ddfaf..bd27ea9 100644
--- a/donorfront/src/components/UtilizationList.js
+++ b/donorfront/src/components/UtilizationList.js
@@ -19,4 +19,4 @@ const UtilizationList = ({ utilizations }) => {
   );
 };
 
-export default UtilizationList;
+export default UtilizationList;
\ No newline at end of file
diff --git a/donorfront/src/components/common/Button.js b/donorfront/src/components/common/Button.js
new file mode 100644
index 0000000..e69de29
diff --git a/donorfront/src/components/common/Input.js b/donorfront/src/components/common/Input.js
new file mode 100644
index 0000000..e69de29
diff --git a/donorfront/src/components/common/LoadingSpinner.js b/donorfront/src/components/common/LoadingSpinner.js
new file mode 100644
index 0000000..e69de29
diff --git a/donorfront/src/components/common/Modal.js b/donorfront/src/components/common/Modal.js
new file mode 100644
index 0000000..e69de29
diff --git a/donorfront/src/config.js b/donorfront/src/config.js
new file mode 100644
index 0000000..e69de29
diff --git a/donorfront/src/contexts/UserContext.js b/donorfront/src/contexts/UserContext.js
new file mode 100644
index 0000000..e69de29
diff --git a/donorfront/src/contexts/Web3Context.js b/donorfront/src/contexts/Web3Context.js
new file mode 100644
index 0000000..e69de29
diff --git a/donorfront/src/contracts/CharityContract.js b/donorfront/src/contracts/CharityContract.js
new file mode 100644
index 0000000..e69de29
diff --git a/donorfront/src/hooks/useAuth.js b/donorfront/src/hooks/useAuth.js
new file mode 100644
index 0000000..22c6e15
--- /dev/null
+++ b/donorfront/src/hooks/useAuth.js
@@ -0,0 +1,41 @@
+import { useState, useEffect, useContext } from 'react';
+import { Web3Context } from '../contexts/Web3Context';
+import { UserContext } from '../contexts/UserContext';
+import { getContractInstance } from '../utils/contractHelpers';
+
+export const useAuth = () => {
+  const { web3, account } = useContext(Web3Context);
+  const { user, setUser } = useContext(UserContext);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [isAdmin, setIsAdmin] = useState(false);
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      if (web3 && account) {
+        const contract = getContractInstance(web3);
+        const roleData = await contract.methods.roles(account).call();
+        
+        setIsAuthenticated(true);
+        setIsAdmin(roleData.role === '1'); // Assuming ROLE_ADMIN is represented by '1'
+        setUser({ address: account, role: roleData.role });
+      } else {
+        setIsAuthenticated(false);
+        setIsAdmin(false);
+        setUser(null);
+      }
+    };
+
+    checkAuth();
+  }, [web3, account, setUser]);
+
+  const logout = () => {
+    // Implement logout logic here
+    setIsAuthenticated(false);
+    setIsAdmin(false);
+    setUser(null);
+  };
+
+  return { user, isAuthenticated, isAdmin, logout };
+};
+
+export default useAuth;
\ No newline at end of file
diff --git a/donorfront/src/hooks/useSmartContract.js b/donorfront/src/hooks/useSmartContract.js
new file mode 100644
index 0000000..e69de29
diff --git a/donorfront/src/hooks/useWeb3.js b/donorfront/src/hooks/useWeb3.js
new file mode 100644
index 0000000..e69de29
diff --git a/donorfront/src/styles/components/AdminPanel.css b/donorfront/src/styles/components/AdminPanel.css
new file mode 100644
index 0000000..e69de29
diff --git a/donorfront/src/styles/components/BeneficiaryDetails.css b/donorfront/src/styles/components/BeneficiaryDetails.css
new file mode 100644
index 0000000..e69de29
diff --git a/donorfront/src/styles/components/BeneficiaryList.css b/donorfront/src/styles/components/BeneficiaryList.css
new file mode 100644
index 0000000..e69de29
diff --git a/donorfront/src/styles/components/DonationForm.css b/donorfront/src/styles/components/DonationForm.css
new file mode 100644
index 0000000..e69de29
diff --git a/donorfront/src/styles/components/Navigation.css b/donorfront/src/styles/components/Navigation.css
new file mode 100644
index 0000000..e69de29
diff --git a/donorfront/src/styles/components/UserDashboard.css b/donorfront/src/styles/components/UserDashboard.css
new file mode 100644
index 0000000..e69de29
diff --git a/donorfront/src/styles/components/UtilizationList.css b/donorfront/src/styles/components/UtilizationList.css
new file mode 100644
index 0000000..e69de29
diff --git a/donorfront/src/styles/global.css b/donorfront/src/styles/global.css
new file mode 100644
index 0000000..e69de29
diff --git a/donorfront/src/utils/contractHelpers.js b/donorfront/src/utils/contractHelpers.js
new file mode 100644
index 0000000..0308445
--- /dev/null
+++ b/donorfront/src/utils/contractHelpers.js
@@ -0,0 +1,73 @@
+import { openContractCall } from '@stacks/connect';
+import { uintCV, stringUtf8CV } from '@stacks/transactions';
+
+export const getBeneficiaries = async (contract) => {
+  // This is a placeholder. In a real app, you'd need to implement pagination
+  // and fetch beneficiaries from the contract storage
+  const beneficiaryCount = await contract.getBeneficiaryCount();
+  const beneficiaries = [];
+  for (let i = 1; i <= beneficiaryCount; i++) {
+    const beneficiary = await contract.getBeneficiary(i);
+    beneficiaries.push(beneficiary);
+  }
+  return beneficiaries;
+};
+
+export const registerBeneficiary = async (contract, address, name, description, targetAmount) => {
+  const functionArgs = [
+    stringUtf8CV(name),
+    stringUtf8CV(description),
+    uintCV(targetAmount)
+  ];
+
+  const options = {
+    contractAddress: contract.address,
+    contractName: contract.name,
+    functionName: 'register-beneficiary',
+    functionArgs,
+    senderAddress: address,
+    network: contract.network,
+  };
+
+  return openContractCall(options);
+};
+
+export const donate = async (contract, address, beneficiaryId, amount) => {
+  const functionArgs = [
+    uintCV(beneficiaryId),
+    uintCV(amount)
+  ];
+
+  const options = {
+    contractAddress: contract.address,
+    contractName: contract.name,
+    functionName: 'donate',
+    functionArgs,
+    senderAddress: address,
+    network: contract.network,
+  };
+
+  return openContractCall(options);
+};
+
+export const approveUtilization = async (contract, address, beneficiaryId, milestoneId) => {
+  const functionArgs = [
+    uintCV(beneficiaryId),
+    uintCV(milestoneId)
+  ];
+
+  const options = {
+    contractAddress: contract.address,
+    contractName: contract.name,
+    functionName: 'approve-utilization',
+    functionArgs,
+    senderAddress: address,
+    network: contract.network,
+  };
+
+  return openContractCall(options);
+};
+
+export const getUserDonations = async (contract, address) => {
+  return [];
+};
\ No newline at end of file
diff --git a/donorfront/src/utils/formatters.js b/donorfront/src/utils/formatters.js
new file mode 100644
index 0000000..e69de29
diff --git a/donorfront/src/utils/validators.js b/donorfront/src/utils/validators.js
new file mode 100644
index 0000000..e69de29