diff --git a/app/page.tsx b/app/page.tsx
index 64bca0d..00bede8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -209,12 +209,12 @@ export default function Home() {
                       </button>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent align="end" className="w-56">
-                      <DropdownMenuItem asChild>
+                      <DropdownMenuItem asChild className="md:hidden">
                         <a href="/contact" className="cursor-pointer">
                           Contact
                         </a>
                       </DropdownMenuItem>
-                      <DropdownMenuItem asChild>
+                      <DropdownMenuItem asChild className="md:hidden">
                         <a
                           href="#pricing"
                           onClick={(e) => {
@@ -232,12 +232,12 @@ export default function Home() {
                           Pricing
                         </a>
                       </DropdownMenuItem>
-                      <DropdownMenuItem asChild>
+                      <DropdownMenuItem asChild className="md:hidden">
                         <a href="/upload" className="cursor-pointer">
                           Upload File
                         </a>
                       </DropdownMenuItem>
-                      <div className="border-t border-gray-200 my-1" />
+                      <div className="border-t border-gray-200 my-1 md:hidden" />
                       <DropdownMenuItem asChild>
                         <a href="/subscriptions" className="cursor-pointer">
                           My Subscriptions
@@ -357,13 +357,14 @@ export default function Home() {
       )}
 
       {/* Main Content */}
-      <div className="flex items-center justify-center min-h-screen">
+      <div className="flex items-center justify-center min-h-screen -mt-4 md:mt-0">
         <div
-          className="w-[90%] md:w-[90%] h-auto md:h-[600px] rounded-2xl flex flex-col md:flex-row justify-between items-start relative"
+          className="w-[90%] md:w-[90%] h-auto md:h-[600px] rounded-2xl flex flex-col md:flex-row justify-between items-start relative mt-2 md:mt-5"
           style={{
             backgroundColor: "#FF580F",
-            margin: "20px",
-            marginTop: "5px",
+            marginLeft: "20px",
+            marginRight: "20px",
+            marginBottom: "20px",
           }}
         >
           <div className="px-4 md:ml-8 mt-8 md:mt-16 w-full md:w-auto pb-8 md:pb-0">
@@ -425,7 +426,7 @@ export default function Home() {
         userSubscription &&
         userSubscription.status === "ACTIVE" && (
           <div className="flex justify-center mt-8">
-            <div className="bg-green-50 border-2 border-green-500 rounded-lg p-6 max-w-2xl">
+            <div className="bg-green-50 border-2 border-green-500 rounded-lg p-6 max-w-2xl mx-5 md:mx-0">
               <div className="flex items-center justify-between">
                 <div>
                   <p className="text-green-800 font-semibold text-lg mb-1">
@@ -448,20 +449,23 @@ export default function Home() {
         )}
 
       {/* Pricing Section */}
-      <div id="pricing" className="flex justify-center mt-16 mb-16">
+      <div
+        id="pricing"
+        className="flex justify-center mt-8 sm:mt-16 mb-16 sm:mb-16 pb-20 sm:pb-16"
+      >
         <div className="w-[90%]">
-          <h2 className="text-4xl font-bold text-center mb-12 text-gray-800">
+          <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-center mb-8 sm:mb-12 text-gray-800">
             Available Plans
           </h2>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
             {/* Basic Plan */}
-            <div className="bg-white border-2 border-gray-200 rounded-xl p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer">
+            <div className="bg-white border-2 border-gray-200 rounded-xl p-6 sm:p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer">
               <div className="text-2xl font-bold text-orange-500 mb-2">
                 Basic
               </div>
-              <div className="text-4xl font-bold text-orange-500 mb-8">
+              <div className="text-3xl sm:text-4xl font-bold text-orange-500 mb-6 sm:mb-8">
                 €9.99{" "}
-                <span className="text-lg font-normal text-gray-500">
+                <span className="text-base sm:text-lg font-normal text-gray-500">
                   /month
                 </span>
               </div>
@@ -471,7 +475,7 @@ export default function Home() {
                   loading ||
                   (userSubscription && userSubscription.status === "ACTIVE")
                 }
-                className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+                className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-4 sm:mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed text-sm sm:text-base"
               >
                 {loading
                   ? "Processing..."
@@ -479,7 +483,7 @@ export default function Home() {
                   ? "Current Plan"
                   : "Choose Basic"}
               </button>
-              <ul className="text-left space-y-3">
+              <ul className="text-left space-y-2 sm:space-y-3 text-sm sm:text-base">
                 <li className="flex items-center">
                   <span className="text-green-500 font-bold mr-3">✓</span>
                   250 GB storage
@@ -504,13 +508,13 @@ export default function Home() {
             </div>
 
             {/* Standard Plan */}
-            <div className="bg-white border-2 border-gray-200 rounded-xl p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer">
+            <div className="bg-white border-2 border-gray-200 rounded-xl p-6 sm:p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer">
               <div className="text-2xl font-bold text-orange-500 mb-2">
                 Standard
               </div>
-              <div className="text-4xl font-bold text-orange-500 mb-8">
+              <div className="text-3xl sm:text-4xl font-bold text-orange-500 mb-6 sm:mb-8">
                 €19.99{" "}
-                <span className="text-lg font-normal text-gray-500">
+                <span className="text-base sm:text-lg font-normal text-gray-500">
                   /month
                 </span>
               </div>
@@ -520,7 +524,7 @@ export default function Home() {
                   loading ||
                   (userSubscription && userSubscription.status === "ACTIVE")
                 }
-                className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+                className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-4 sm:mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed text-sm sm:text-base"
               >
                 {loading
                   ? "Processing..."
@@ -528,7 +532,7 @@ export default function Home() {
                   ? "Current Plan"
                   : "Choose Standard"}
               </button>
-              <ul className="text-left space-y-3">
+              <ul className="text-left space-y-2 sm:space-y-3 text-sm sm:text-base">
                 <li className="flex items-center">
                   <span className="text-green-500 font-bold mr-3">✓</span>
                   500 GB storage
@@ -561,13 +565,13 @@ export default function Home() {
             </div>
 
             {/* Premium Plan */}
-            <div className="bg-white border-2 border-gray-200 rounded-xl p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer">
+            <div className="bg-white border-2 border-gray-200 rounded-xl p-6 sm:p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer">
               <div className="text-2xl font-bold text-orange-500 mb-2">
                 Premium
               </div>
-              <div className="text-4xl font-bold text-orange-500 mb-8">
+              <div className="text-3xl sm:text-4xl font-bold text-orange-500 mb-6 sm:mb-8">
                 €39.99{" "}
-                <span className="text-lg font-normal text-gray-500">
+                <span className="text-base sm:text-lg font-normal text-gray-500">
                   /month
                 </span>
               </div>
@@ -577,7 +581,7 @@ export default function Home() {
                   loading ||
                   (userSubscription && userSubscription.status === "ACTIVE")
                 }
-                className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+                className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-4 sm:mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed text-sm sm:text-base"
               >
                 {loading
                   ? "Processing..."
@@ -585,7 +589,7 @@ export default function Home() {
                   ? "Current Plan"
                   : "Choose Premium"}
               </button>
-              <ul className="text-left space-y-3">
+              <ul className="text-left space-y-2 sm:space-y-3 text-sm sm:text-base">
                 <li className="flex items-center">
                   <span className="text-green-500 font-bold mr-3">✓</span>1 TB
                   storage
diff --git a/app/renders/page.tsx b/app/renders/page.tsx
index 60503ed..2d6f3e6 100644
--- a/app/renders/page.tsx
+++ b/app/renders/page.tsx
@@ -52,7 +52,7 @@ export default function RendersPage() {
       const res = await fetch(
         `/api/renders/in?page=${pageNum}&pageSize=${pageSize}`,
         {
-          headers: { "user-id": user?.id },
+          headers: { "user-id": user?.id || "" },
         }
       );
       const data = await res.json();
@@ -102,12 +102,14 @@ export default function RendersPage() {
   const canNext = page < totalPages;
 
   return (
-    <div className="min-h-screen bg-gray-50 py-12">
-      <div className="max-w-5xl mx-auto px-4">
-        <h1 className="text-4xl font-bold text-gray-900 mb-8">My Renders</h1>
+    <div className="min-h-screen bg-gray-50 py-6 sm:py-12">
+      <div className="max-w-5xl mx-auto px-4 sm:px-6">
+        <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 mb-6 sm:mb-8">
+          My Renders
+        </h1>
 
-        <section className="mb-12">
-          <h2 className="text-2xl font-bold text-orange-600 mb-4">
+        <section className="mb-8 sm:mb-12">
+          <h2 className="text-xl sm:text-2xl font-bold text-orange-600 mb-4">
             Uploaded Files
           </h2>
           {loading ? (
@@ -116,62 +118,104 @@ export default function RendersPage() {
             <div className="text-gray-500">No files uploaded yet.</div>
           ) : (
             <>
-              <table className="w-full bg-white rounded-lg shadow-md">
-                <thead>
-                  <tr className="bg-orange-50">
-                    <th className="p-3 text-left font-semibold">Filename</th>
-                    <th className="p-3 text-left font-semibold">Status</th>
-                    <th className="p-3 text-left font-semibold">Uploaded At</th>
-                    <th className="p-3 text-left font-semibold">Download</th>
-                    <th className="p-3 text-left font-semibold">Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {files.map((f) => (
-                    <tr key={f.id} className="border-t">
-                      <td className="p-3">{f.original_name}</td>
-                      <td className="p-3 capitalize">
-                        <span
-                          className={`px-2 py-1 rounded-full text-xs font-bold ${
-                            f.upload_status === "COMPLETE"
-                              ? "bg-green-100 text-green-800"
-                              : "bg-gray-200 text-gray-600"
-                          }`}
-                        >
-                          {f.upload_status}
-                        </span>
-                      </td>
-                      <td className="p-3">
-                        {new Date(f.created_at).toLocaleString()}
-                      </td>
-                      <td className="p-3">
-                        <a
-                          href={
-                            f.file_path
-                              ? `/uploads/${f.file_path.split("/").pop()}`
-                              : "#"
-                          }
-                          className="underline text-blue-700"
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          download={f.original_name}
-                        >
+              <div className="overflow-x-auto -mx-4 sm:mx-0">
+                <div className="inline-block min-w-full align-middle">
+                  <table className="min-w-full bg-white rounded-lg shadow-md">
+                    <thead>
+                      <tr className="bg-orange-50">
+                        <th className="p-2 sm:p-3 text-left font-semibold text-xs sm:text-sm">
+                          Filename
+                        </th>
+                        <th className="p-2 sm:p-3 text-left font-semibold text-xs sm:text-sm">
+                          Status
+                        </th>
+                        <th className="p-2 sm:p-3 text-left font-semibold text-xs sm:text-sm hidden sm:table-cell">
+                          Uploaded At
+                        </th>
+                        <th className="p-2 sm:p-3 text-left font-semibold text-xs sm:text-sm">
                           Download
-                        </a>
-                      </td>
-                      <td className="p-3">
-                        <button
-                          className="px-3 py-1 text-sm rounded-md bg-red-500 text-white hover:bg-red-600 disabled:bg-red-300"
-                          disabled={deletingId === f.id}
-                          onClick={() => handleDelete(f.id)}
-                        >
-                          {deletingId === f.id ? "Deleting..." : "Delete"}
-                        </button>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
+                        </th>
+                        <th className="p-2 sm:p-3 text-left font-semibold text-xs sm:text-sm">
+                          Actions
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {files.map((f) => (
+                        <tr key={f.id} className="border-t">
+                          <td className="p-2 sm:p-3 text-xs sm:text-sm break-words max-w-[120px] sm:max-w-none">
+                            {f.original_name}
+                          </td>
+                          <td className="p-2 sm:p-3 capitalize">
+                            {/* Mobile: Green checkmark */}
+                            {f.upload_status === "COMPLETE" && (
+                              <span className="sm:hidden text-green-500 text-xl">
+                                ✓
+                              </span>
+                            )}
+                            {f.upload_status !== "COMPLETE" && (
+                              <span className="sm:hidden text-gray-400 text-xl">
+                                ○
+                              </span>
+                            )}
+                            {/* Desktop: Text badge */}
+                            <span
+                              className={`hidden sm:inline-block px-2 py-1 rounded-full text-xs font-bold ${
+                                f.upload_status === "COMPLETE"
+                                  ? "bg-green-100 text-green-800"
+                                  : "bg-gray-200 text-gray-600"
+                              }`}
+                            >
+                              {f.upload_status}
+                            </span>
+                          </td>
+                          <td className="p-2 sm:p-3 text-xs sm:text-sm hidden sm:table-cell">
+                            {new Date(f.created_at).toLocaleString()}
+                          </td>
+                          <td className="p-2 sm:p-3">
+                            <a
+                              href={
+                                f.file_path
+                                  ? `/uploads/${f.file_path.split("/").pop()}`
+                                  : "#"
+                              }
+                              className="underline text-blue-700 text-xs sm:text-sm"
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              download={f.original_name}
+                            >
+                              Download
+                            </a>
+                          </td>
+                          <td className="p-2 sm:p-3">
+                            {/* Mobile: Red X icon - circular */}
+                            <button
+                              className="sm:hidden w-6 h-6 rounded-full bg-red-500 text-white hover:bg-red-600 disabled:bg-red-300 disabled:opacity-50 flex items-center justify-center"
+                              disabled={deletingId === f.id}
+                              onClick={() => handleDelete(f.id)}
+                              aria-label="Delete"
+                            >
+                              {deletingId === f.id ? (
+                                <span className="text-xs">...</span>
+                              ) : (
+                                <span className="text-sm font-bold">×</span>
+                              )}
+                            </button>
+                            {/* Desktop: Text button */}
+                            <button
+                              className="hidden sm:inline-block px-3 py-1 text-sm rounded-md bg-red-500 text-white hover:bg-red-600 disabled:bg-red-300"
+                              disabled={deletingId === f.id}
+                              onClick={() => handleDelete(f.id)}
+                            >
+                              {deletingId === f.id ? "Deleting..." : "Delete"}
+                            </button>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
               <div className="mt-4 flex justify-center">
                 <Pagination>
                   <PaginationContent>
@@ -225,10 +269,10 @@ export default function RendersPage() {
         </section>
 
         <section>
-          <h2 className="text-2xl font-bold text-gray-600 mb-4">
+          <h2 className="text-xl sm:text-2xl font-bold text-gray-600 mb-4">
             Rendered Files (outputs)
           </h2>
-          <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center text-gray-400">
+          <div className="border-2 border-dashed border-gray-300 rounded-lg p-4 sm:p-8 text-center text-gray-400 text-sm sm:text-base">
             Placeholder: Your rendered products will appear here in the future!
           </div>
         </section>
diff --git a/app/subscriptions/page.tsx b/app/subscriptions/page.tsx
index ded4b6c..b587b25 100644
--- a/app/subscriptions/page.tsx
+++ b/app/subscriptions/page.tsx
@@ -141,21 +141,21 @@ export default function SubscriptionsPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50 py-12">
+    <div className="min-h-screen bg-gray-50 py-6 sm:py-12 pb-20 sm:pb-12">
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Header */}
-        <div className="mb-8">
-          <h1 className="text-4xl font-bold text-gray-900 mb-2">
+        <div className="mb-6 sm:mb-8">
+          <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 mb-2">
             My Subscriptions
           </h1>
-          <p className="text-gray-600">
+          <p className="text-sm sm:text-base text-gray-600">
             Manage your subscription and billing information
           </p>
         </div>
 
         {!subscription ? (
           // No subscription
-          <div className="bg-white rounded-lg shadow-lg p-8 text-center">
+          <div className="bg-white rounded-lg shadow-lg p-6 sm:p-8 text-center">
             <div className="mb-6">
               <div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                 <span className="text-3xl">📦</span>
@@ -177,15 +177,17 @@ export default function SubscriptionsPage() {
           </div>
         ) : (
           // Active subscription
-          <div className="space-y-6">
+          <div className="space-y-4 sm:space-y-6">
             {/* Subscription Card */}
-            <div className="bg-white rounded-lg shadow-lg p-8 border-2 border-gray-200">
-              <div className="flex justify-between items-start mb-6">
+            <div className="bg-white rounded-lg shadow-lg p-6 sm:p-8 border-2 border-gray-200">
+              <div className="flex justify-between items-start mb-4 sm:mb-6">
                 <div>
-                  <h2 className="text-2xl font-bold text-gray-900 mb-2">
+                  <h2 className="text-xl sm:text-2xl font-bold text-gray-900 mb-2">
                     {getTierDisplayName(subscription.tier)} Plan
                   </h2>
-                  <p className="text-gray-600">Current subscription details</p>
+                  <p className="text-sm sm:text-base text-gray-600">
+                    Current subscription details
+                  </p>
                 </div>
                 <div className="text-right">
                   <span
@@ -201,7 +203,7 @@ export default function SubscriptionsPage() {
               </div>
 
               {/* Subscription Details */}
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-4 sm:mb-6">
                 <div>
                   <p className="text-sm text-gray-500 mb-1">Plan</p>
                   <p className="text-lg font-semibold text-gray-900">
@@ -223,7 +225,12 @@ export default function SubscriptionsPage() {
                 <div>
                   <p className="text-sm text-gray-500 mb-1">Current Usage</p>
                   <p className="text-lg font-semibold text-gray-900">
-                    {parseFloat(subscription.current_usage_gb).toFixed(2)} GB
+                    {typeof subscription.current_usage_gb === "number"
+                      ? subscription.current_usage_gb.toFixed(2)
+                      : parseFloat(
+                          String(subscription.current_usage_gb)
+                        ).toFixed(2)}{" "}
+                    GB
                   </p>
                 </div>
               </div>
@@ -258,17 +265,17 @@ export default function SubscriptionsPage() {
             </div>
 
             {/* Upgrade/Downgrade Options */}
-            <div className="bg-white rounded-lg shadow-lg p-6">
-              <h3 className="text-xl font-bold text-gray-900 mb-4">
+            <div className="bg-white rounded-lg shadow-lg p-6 mb-4 sm:mb-0">
+              <h3 className="text-lg sm:text-xl font-bold text-gray-900 mb-3 sm:mb-4">
                 Change Plan
               </h3>
-              <p className="text-gray-600 mb-4">
+              <p className="text-sm sm:text-base text-gray-600 mb-4">
                 Looking to upgrade or downgrade? Cancel your current
                 subscription and choose a new plan.
               </p>
               <Button
                 onClick={() => router.push("/")}
-                className="bg-orange-500 hover:bg-orange-600 text-white font-medium px-6 py-3 rounded-md"
+                className="bg-orange-500 hover:bg-orange-600 text-white font-medium px-6 py-3 rounded-md w-full sm:w-auto"
               >
                 Browse All Plans
               </Button>