diff --git a/dashboard/src/components/dashboard/TypeformDashboard.jsx b/dashboard/src/components/dashboard/TypeformDashboard.jsx
index 9cec777..993223a 100644
--- a/dashboard/src/components/dashboard/TypeformDashboard.jsx
+++ b/dashboard/src/components/dashboard/TypeformDashboard.jsx
@@ -46,7 +46,7 @@ const FORM_NAMES = {
 
 // Loading skeleton components
 const SkeletonChart = () => (
-  <div className="h-[300px] w-full bg-card rounded-lg p-6">
+  <div className="h-[300px] w-full bg-white dark:bg-gray-900/60 backdrop-blur-sm rounded-lg p-6">
     <div className="h-full relative">
       {[...Array(5)].map((_, i) => (
         <div
@@ -219,166 +219,6 @@ const WinbackFeed = ({ responses }) => (
   />
 );
 
-const renderProductRelevanceBar = (metrics) => (
-  <Card>
-    <CardHeader>
-      <div className="flex items-baseline justify-between">
-        <CardTitle className="text-lg font-semibold">Were the suggested products in this email relevant to you?</CardTitle>
-        <div className="flex flex-col items-end">
-          <span className="text-2xl font-bold text-green-600">
-            {metrics.productRelevance.yesPercentage}% Positive
-          </span>
-        </div>
-      </div>
-    </CardHeader>
-    <CardContent>
-      <div className="h-[100px]">
-        <ResponsiveContainer width="100%" height="100%">
-          <BarChart
-            data={[{ 
-              yes: metrics.productRelevance.yesCount,
-              no: metrics.productRelevance.noCount,
-              total: metrics.productRelevance.yesCount + metrics.productRelevance.noCount
-            }]}
-            layout="vertical"
-            stackOffset="expand"
-            margin={{ top: 0, right: 0, left: -20, bottom: 0 }}
-          >
-            <XAxis type="number" hide domain={[0, 1]} />
-            <YAxis type="category" hide />
-            <Tooltip
-              cursor={false}
-              content={({ payload }) => {
-                if (payload && payload.length) {
-                  const yesCount = payload[0].payload.yes;
-                  const noCount = payload[0].payload.no;
-                  const total = yesCount + noCount;
-                  const yesPercent = Math.round((yesCount / total) * 100);
-                  const noPercent = Math.round((noCount / total) * 100);
-                  return (
-                    <Card className="p-3 shadow-lg bg-white dark:bg-gray-800 border-none">
-                      <CardContent className="p-0 space-y-2">
-                        <div className="space-y-1">
-                          <div className="flex justify-between items-center text-sm">
-                            <span className="text-emerald-500 font-medium">Yes:</span>
-                            <span className="ml-4">{yesCount} ({yesPercent}%)</span>
-                          </div>
-                          <div className="flex justify-between items-center text-sm">
-                            <span className="text-red-500 font-medium">No:</span>
-                            <span className="ml-4">{noCount} ({noPercent}%)</span>
-                          </div>
-                        </div>
-                      </CardContent>
-                    </Card>
-                  );
-                }
-                return null;
-              }}
-            />
-            <Bar dataKey="yes" stackId="stack" fill="#10b981" radius={[4, 4, 0, 0]}>
-              <text
-                x="50%"
-                y="50%"
-                textAnchor="middle"
-                fill="#fff"
-                fontSize={14}
-                fontWeight="bold"
-              >
-                {metrics.productRelevance.yesPercentage}%
-              </text>
-            </Bar>
-            <Bar dataKey="no" stackId="stack" fill="#ef4444" radius={[0, 0, 4, 4]} />
-          </BarChart>
-        </ResponsiveContainer>
-      </div>
-      <div className="flex justify-between mt-2 text-md font-semibold mx-1 text-muted-foreground">
-        <div>Yes: {metrics.productRelevance.yesCount}</div>
-        <div>No: {metrics.productRelevance.noCount}</div>
-      </div>
-    </CardContent>
-  </Card>
-);
-
-const renderLikelihoodChart = (metrics, responses) => {
-  const likelihoodCounts = [1, 2, 3, 4, 5].map(rating => ({
-    rating: rating.toString(),
-    count: responses.items
-      .filter(r => r.answers?.find(a => a.type === 'number')?.number === rating)
-      .length
-  }));
-
-  return (
-    <Card>
-      <CardHeader>
-        <div className="flex items-baseline justify-between">
-          <CardTitle className="text-lg font-semibold">How likely are you to place another order with us?</CardTitle>
-          <span className={`text-2xl font-bold ${
-            metrics.winback.averageRating <= 1 ? "text-red-700" :
-            metrics.winback.averageRating <= 2 ? "text-orange-700" :
-            metrics.winback.averageRating <= 3 ? "text-yellow-700" :
-            metrics.winback.averageRating <= 4 ? "text-lime-700" :
-            "text-green-700"
-          }`}>
-            {metrics.winback.averageRating}
-            <span className="text-base font-normal text-muted-foreground">/5 avg</span>
-          </span>
-        </div>
-      </CardHeader>
-      <CardContent>
-        <div className="h-[200px]">
-          <ResponsiveContainer width="100%" height="100%">
-            <BarChart 
-              data={likelihoodCounts}
-              margin={{ top: 0, right: 0, left: -20, bottom: 0 }}
-            >
-              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-              <XAxis
-                dataKey="rating"
-                tickFormatter={(value) => {
-                  return value === "1" ? "Not at all likely" : value === "5" ? "Extremely likely" : "";
-                }}
-                textAnchor="middle"
-                interval={0}
-                height={50}
-              />
-              <YAxis />
-              <Tooltip
-                content={({ payload }) => {
-                  if (payload && payload.length) {
-                    const { rating, count } = payload[0].payload;
-                    return (
-                      <div className="bg-white dark:bg-gray-800 p-2 rounded-md shadow-md border">
-                        <div className="text-sm font-medium">
-                        {rating} Rating: {count}  responses
-                        </div>
-                      </div>
-                    );
-                  }
-                  return null;
-                }}
-              />
-              <Bar dataKey="count">
-                {likelihoodCounts.map((_, index) => (
-                  <Cell 
-                    key={`cell-${index}`}
-                    fill={
-                      index === 0 ? "#ef4444" : // red
-                      index === 1 ? "#f97316" : // orange  
-                      index === 2 ? "#eab308" : // yellow
-                      index === 3 ? "#84cc16" : // lime
-                      "#10b981" // green
-                    }
-                  />
-                ))}
-              </Bar>
-            </BarChart>
-          </ResponsiveContainer>
-        </div>
-      </CardContent>
-    </Card>
-  );
-};
-
 const TypeformDashboard = () => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -487,18 +327,55 @@ const TypeformDashboard = () => {
 
   const metrics = loading ? null : calculateMetrics();
 
+  // Find the newest response across both forms
+  const getNewestResponse = () => {
+    if (!formData.form1.responses?.items?.length && !formData.form2.responses?.items?.length) return null;
+    
+    const form1Latest = formData.form1.responses?.items[0]?.submitted_at;
+    const form2Latest = formData.form2.responses?.items[0]?.submitted_at;
+    
+    if (!form1Latest) return form2Latest;
+    if (!form2Latest) return form1Latest;
+    
+    return new Date(form1Latest) > new Date(form2Latest) ? form1Latest : form2Latest;
+  };
+
+  const newestResponse = getNewestResponse();
+
   if (error) {
     return (
-      <Alert variant="destructive">
-        <AlertCircle className="h-4 w-4" />
-        <AlertTitle>Error</AlertTitle>
-        <AlertDescription>{error}</AlertDescription>
-      </Alert>
+      <Card className="h-full bg-white dark:bg-gray-900/60 backdrop-blur-sm">
+        <CardContent className="p-4">
+          <div className="p-4 m-6 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/10 rounded-lg border border-red-200 dark:border-red-900/20">
+            {error}
+          </div>
+        </CardContent>
+      </Card>
     );
   }
 
+  // Calculate likelihood counts for the chart
+  const likelihoodCounts = !loading && formData.form2.responses ? [1, 2, 3, 4, 5].map(rating => ({
+    rating: rating.toString(),
+    count: formData.form2.responses.items
+      .filter(r => r.answers?.find(a => a.type === 'number')?.number === rating)
+      .length
+  })) : [];
+
   return (
-    <Card>
+    <Card className="bg-white dark:bg-gray-900/60 backdrop-blur-sm">
+      <CardHeader className="p-6 pb-0">
+        <div className="space-y-1">
+          <CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+            Customer Surveys
+          </CardTitle>
+          {newestResponse && (
+            <p className="text-sm text-muted-foreground">
+              Newest response: {format(new Date(newestResponse), "MMM d, h:mm a")}
+            </p>
+          )}
+        </div>
+      </CardHeader>
       <CardContent className="space-y-6">
         {loading ? (
           <div className="space-y-6">
@@ -508,41 +385,195 @@ const TypeformDashboard = () => {
         ) : (
           <>
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
-              {renderProductRelevanceBar(metrics)}
-              {renderLikelihoodChart(metrics, formData.form2.responses)}
-            </div>
+             
 
-            <div className="grid grid-cols-2 xl:grid-cols-12 gap-6">
-            <div className="col-span-4">
-                <Card>
-                  <CardHeader>
-                  <CardTitle className="text-lg font-semibold">Reasons for Not Ordering</CardTitle>
+              <Card className="bg-white dark:bg-gray-900/60 backdrop-blur-sm">
+                <CardHeader>
+                  <div className="flex items-baseline justify-between">
+                    <CardTitle className="text-lg font-semibold text-gray-900 dark:text-gray-100">How likely are you to place another order with us?</CardTitle>
+                    <span className={`text-2xl font-bold ${
+                      metrics.winback.averageRating <= 1 ? "text-red-600 dark:text-red-500" :
+                      metrics.winback.averageRating <= 2 ? "text-orange-600 dark:text-orange-500" :
+                      metrics.winback.averageRating <= 3 ? "text-yellow-600 dark:text-yellow-500" :
+                      metrics.winback.averageRating <= 4 ? "text-lime-600 dark:text-lime-500" :
+                      "text-green-600 dark:text-green-500"
+                    }`}>
+                      {metrics.winback.averageRating}
+                      <span className="text-base font-normal text-muted-foreground">/5 avg</span>
+                    </span>
+                  </div>
                 </CardHeader>
                 <CardContent>
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead>Reason</TableHead>
-                        <TableHead className="text-right">Count</TableHead>
-                        <TableHead className="text-right w-[80px]">%</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {metrics.winback.reasons.map((reason, index) => (
-                        <TableRow key={index}>
-                          <TableCell className="font-medium">{reason.reason}</TableCell>
-                          <TableCell className="text-right">{reason.count}</TableCell>
-                          <TableCell className="text-right">{reason.percentage}%</TableCell>
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
+                  <div className="h-[200px]">
+                    <ResponsiveContainer width="100%" height="100%">
+                      <BarChart 
+                        data={likelihoodCounts}
+                        margin={{ top: 0, right: 0, left: -20, bottom: 0 }}
+                      >
+                        <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+                        <XAxis
+                          dataKey="rating"
+                          tickFormatter={(value) => {
+                            return value === "1" ? "Not at all likely" : value === "5" ? "Extremely likely" : "";
+                          }}
+                          textAnchor="middle"
+                          interval={0}
+                          height={50}
+                          className="text-muted-foreground"
+                        />
+                        <YAxis className="text-muted-foreground" />
+                        <Tooltip
+                          content={({ payload }) => {
+                            if (payload && payload.length) {
+                              const { rating, count } = payload[0].payload;
+                              return (
+                                <Card className="p-3 shadow-lg bg-white dark:bg-gray-900/60 backdrop-blur-sm border-none">
+                                  <CardContent className="p-0">
+                                    <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                                      {rating} Rating: {count} responses
+                                    </div>
+                                  </CardContent>
+                                </Card>
+                              );
+                            }
+                            return null;
+                          }}
+                        />
+                        <Bar dataKey="count">
+                          {likelihoodCounts.map((_, index) => (
+                            <Cell 
+                              key={`cell-${index}`}
+                              fill={
+                                index === 0 ? "#ef4444" : // red
+                                index === 1 ? "#f97316" : // orange  
+                                index === 2 ? "#eab308" : // yellow
+                                index === 3 ? "#84cc16" : // lime
+                                "#10b981" // green
+                              }
+                            />
+                          ))}
+                        </Bar>
+                      </BarChart>
+                    </ResponsiveContainer>
+                  </div>
+                </CardContent>
+              </Card>
+              <Card className="bg-white dark:bg-gray-900/60 backdrop-blur-sm">
+                <CardHeader>
+                  <div className="flex items-baseline justify-between">
+                    <CardTitle className="text-lg font-semibold text-gray-900 dark:text-gray-100">Were the suggested products in this email relevant to you?</CardTitle>
+                    <div className="flex flex-col items-end">
+                      <span className="text-2xl font-bold text-green-600 dark:text-green-500">
+                        {metrics.productRelevance.yesPercentage}% Positive
+                      </span>
+                    </div>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="h-[100px]">
+                    <ResponsiveContainer width="100%" height="100%">
+                      <BarChart
+                        data={[{ 
+                          yes: metrics.productRelevance.yesCount,
+                          no: metrics.productRelevance.noCount,
+                          total: metrics.productRelevance.yesCount + metrics.productRelevance.noCount
+                        }]}
+                        layout="vertical"
+                        stackOffset="expand"
+                        margin={{ top: 0, right: 0, left: -20, bottom: 0 }}
+                      >
+                        <XAxis type="number" hide domain={[0, 1]} />
+                        <YAxis type="category" hide />
+                        <Tooltip
+                          cursor={false}
+                          content={({ payload }) => {
+                            if (payload && payload.length) {
+                              const yesCount = payload[0].payload.yes;
+                              const noCount = payload[0].payload.no;
+                              const total = yesCount + noCount;
+                              const yesPercent = Math.round((yesCount / total) * 100);
+                              const noPercent = Math.round((noCount / total) * 100);
+                              return (
+                                <Card className="p-3 shadow-lg bg-white dark:bg-gray-900/60 backdrop-blur-sm border-none">
+                                  <CardContent className="p-0 space-y-2">
+                                    <div className="space-y-1">
+                                      <div className="flex justify-between items-center text-sm">
+                                        <span className="text-emerald-500 font-medium">Yes:</span>
+                                        <span className="ml-4 text-muted-foreground">{yesCount} ({yesPercent}%)</span>
+                                      </div>
+                                      <div className="flex justify-between items-center text-sm">
+                                        <span className="text-red-500 font-medium">No:</span>
+                                        <span className="ml-4 text-muted-foreground">{noCount} ({noPercent}%)</span>
+                                      </div>
+                                    </div>
+                                  </CardContent>
+                                </Card>
+                              );
+                            }
+                            return null;
+                          }}
+                        />
+                        <Bar dataKey="yes" stackId="stack" fill="#10b981" radius={[4, 4, 0, 0]}>
+                          <text
+                            x="50%"
+                            y="50%"
+                            textAnchor="middle"
+                            fill="#fff"
+                            fontSize={14}
+                            fontWeight="bold"
+                          >
+                            {metrics.productRelevance.yesPercentage}%
+                          </text>
+                        </Bar>
+                        <Bar dataKey="no" stackId="stack" fill="#ef4444" radius={[0, 0, 4, 4]} />
+                      </BarChart>
+                    </ResponsiveContainer>
+                  </div>
+                  <div className="flex justify-between mt-2 text-md font-semibold mx-1 text-muted-foreground">
+                    <div>Yes: {metrics.productRelevance.yesCount}</div>
+                    <div>No: {metrics.productRelevance.noCount}</div>
+                  </div>
                 </CardContent>
               </Card>
             </div>
-              <div className="col-span-4 lg:col-span-1 xl:col-span-4"><ProductRelevanceFeed responses={formData.form1.responses} /></div>
-              <div className="col-span-4 lg:col-span-1 xl:col-span-4"><WinbackFeed responses={formData.form2.responses} /></div>
-             
+
+            <div className="grid grid-cols-2 xl:grid-cols-12 gap-6">
+              <div className="col-span-4">
+                <Card className="bg-white dark:bg-gray-900/60 backdrop-blur-sm">
+                  <CardHeader>
+                    <CardTitle className="text-lg font-semibold text-gray-900 dark:text-gray-100">Reasons for Not Ordering</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="overflow-y-auto max-h-[400px] scrollbar-thin scrollbar-thumb-gray-200 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-300 dark:hover:scrollbar-thumb-gray-600">
+                      <Table>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead className="font-medium text-gray-900 dark:text-gray-100">Reason</TableHead>
+                            <TableHead className="text-right font-medium text-gray-900 dark:text-gray-100">Count</TableHead>
+                            <TableHead className="text-right w-[80px] font-medium text-gray-900 dark:text-gray-100">%</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {metrics.winback.reasons.map((reason, index) => (
+                            <TableRow key={index} className="hover:bg-muted/50 transition-colors">
+                              <TableCell className="font-medium text-gray-900 dark:text-gray-100">{reason.reason}</TableCell>
+                              <TableCell className="text-right text-muted-foreground">{reason.count}</TableCell>
+                              <TableCell className="text-right text-muted-foreground">{reason.percentage}%</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+         
+              <div className="col-span-4 lg:col-span-1 xl:col-span-4">
+                <WinbackFeed responses={formData.form2.responses} />
+              </div>
+              <div className="col-span-4 lg:col-span-1 xl:col-span-4">
+                <ProductRelevanceFeed responses={formData.form1.responses} />
+              </div>
             </div>
           </>
         )}