diff --git a/src/api/wrenClient.ts b/src/api/wrenClient.ts
index 66b88a2..c9cb243 100644
--- a/src/api/wrenClient.ts
+++ b/src/api/wrenClient.ts
@@ -138,13 +138,24 @@ export async function getPortfolios(): Promise<Portfolio[]> {
 
       // Convert from snake_case to camelCase for projects
       const projects = portfolio.projects?.map(project => {
+        // Ensure cost_per_ton is properly mapped
+        const projectPricePerTon = project.cost_per_ton !== undefined && project.cost_per_ton !== null
+          ? (typeof project.cost_per_ton === 'number' ? project.cost_per_ton : parseFloat(project.cost_per_ton))
+          : pricePerTon;
+          
+        // Ensure percentage is properly captured
+        const projectPercentage = project.percentage !== undefined && project.percentage !== null
+          ? (typeof project.percentage === 'number' ? project.percentage : parseFloat(project.percentage))
+          : undefined;
+
         return {
           id: project.id || `project-${Math.random().toString(36).substring(2, 9)}`,
           name: project.name,
           description: project.description || '',
           shortDescription: project.short_description || project.description || '',
           imageUrl: project.image_url, // Map from snake_case API response
-          pricePerTon: project.cost_per_ton || pricePerTon,
+          pricePerTon: projectPricePerTon,
+          percentage: projectPercentage, // Include percentage field
           location: project.location || 'Global',
           type: project.type || 'Nature Based',
           verificationStandard: project.verification_standard || 'Gold Standard',
diff --git a/src/components/OffsetOrder.tsx b/src/components/OffsetOrder.tsx
index 365d351..5a0e466 100644
--- a/src/components/OffsetOrder.tsx
+++ b/src/components/OffsetOrder.tsx
@@ -309,9 +309,16 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
                 {portfolio.projects.map((project) => (
                   <div key={project.id} className="bg-gray-50 rounded-lg p-4 hover:shadow-md transition-shadow">
-                    <div className="flex items-center space-x-2 mb-3">
-                      <ProjectTypeIcon project={project} />
-                      <h4 className="font-semibold text-gray-900">{project.name}</h4>
+                    <div className="flex items-center justify-between mb-3">
+                      <div className="flex items-center space-x-2">
+                        <ProjectTypeIcon project={project} />
+                        <h4 className="font-semibold text-gray-900">{project.name}</h4>
+                      </div>
+                      {project.percentage && (
+                        <span className="text-sm text-gray-600 font-medium">
+                          {(project.percentage * 100).toFixed(1)}%
+                        </span>
+                      )}
                     </div>
                     {project.imageUrl && (
                       <div className="relative h-32 mb-3 rounded-lg overflow-hidden">
@@ -325,7 +332,13 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
                     <p className="text-sm text-gray-600 mb-3">
                       {project.shortDescription || project.description}
                     </p>
-                    <div className="space-y-1 text-sm">
+                    <div className="space-y-1 text-sm mt-3">
+                      <div className="flex justify-between">
+                        <span className="text-gray-500">Price per ton:</span>
+                        <span className="text-gray-900 font-medium">
+                          ${project.pricePerTon.toFixed(2)}
+                        </span>
+                      </div>
                       {project.location && (
                         <div className="flex justify-between">
                           <span className="text-gray-500">Location:</span>
diff --git a/src/types.ts b/src/types.ts
index f990bff..f1ed375 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -54,6 +54,7 @@ export interface OffsetProject {
   shortDescription: string;
   imageUrl: string;
   pricePerTon: number;
+  percentage?: number;  // Added percentage field for project's contribution to portfolio
   location: string;
   type: string;
   verificationStandard: string;
@@ -75,4 +76,4 @@ export interface OffsetOrder {
   dryRun: boolean;
 }
 
-export type CalculatorType = 'trip' | 'annual';
\ No newline at end of file
+export type CalculatorType = 'trip' | 'annual';