diff --git a/src/components/profile/DataTables/UserProgressTable.js b/src/components/profile/DataTables/UserProgressTable.js
index f9f0622..0ae5b68 100644
--- a/src/components/profile/DataTables/UserProgressTable.js
+++ b/src/components/profile/DataTables/UserProgressTable.js
@@ -164,7 +164,7 @@ const UserProgressTable = ({ session, ndk }) => {
             emptyMessage="No Courses or Milestones completed"
             value={prepareProgressData()}
             header={header}
-            className="m-2 max-lap:m-0"
+            className="mt-2 mx-2 max-lap:mx-0"
             style={{ width: "100%", borderRadius: "8px", border: "1px solid #333", boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.1)" }}
             pt={{
                 wrapper: {
diff --git a/src/components/profile/DataTables/UserPurchaseTable.js b/src/components/profile/DataTables/UserPurchaseTable.js
index f4fb7ed..01fc23f 100644
--- a/src/components/profile/DataTables/UserPurchaseTable.js
+++ b/src/components/profile/DataTables/UserPurchaseTable.js
@@ -53,7 +53,7 @@ const UserPurchaseTable = ({ session, windowWidth }) => {
                 emptyMessage="No purchases"
                 value={session.user?.purchased}
                 header={purchasesHeader}
-                className="m-2 max-lap:m-0 max-lap:mt-2"
+                className="mt-2 mx-2 max-lap:mx-0"
                 style={{ width: "100%", borderRadius: "8px", border: "1px solid #333", boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.1)" }}
                 pt={{
                     wrapper: {
diff --git a/src/components/profile/DataTables/UserRelaysTable.js b/src/components/profile/DataTables/UserRelaysTable.js
index 802b266..bff22ec 100644
--- a/src/components/profile/DataTables/UserRelaysTable.js
+++ b/src/components/profile/DataTables/UserRelaysTable.js
@@ -122,7 +122,7 @@ const UserRelaysTable = ({ ndk, userRelays, setUserRelays, reInitializeNDK }) =>
     };
 
     return (
-        <div className="bg-gray-800 rounded-lg border border-gray-700">
+        <div className="bg-gray-800 rounded-lg border border-gray-700 w-full">
             <DataTable
                 value={userRelays}
                 className="border-none"
diff --git a/src/components/profile/UserSettings.js b/src/components/profile/UserSettings.js
index 14d6aea..dea0d09 100644
--- a/src/components/profile/UserSettings.js
+++ b/src/components/profile/UserSettings.js
@@ -30,7 +30,7 @@ const UserSettings = () => {
                         {user && <UserAccountLinking session={session} />}
                     </div>
 
-                    <div className="w-[78%] flex flex-col justify-center mx-auto max-lap:w-full ml-2 max-lap:ml-0">
+                    <div className="w-[78%] flex flex-col justify-center mx-2 max-lap:mx-0 max-lap:w-full">
                         <UserRelaysTable 
                             ndk={ndk}
                             userRelays={userRelays}
diff --git a/src/components/profile/progress/UserProgress.js b/src/components/profile/progress/UserProgress.js
index 9591769..1916695 100644
--- a/src/components/profile/progress/UserProgress.js
+++ b/src/components/profile/progress/UserProgress.js
@@ -189,7 +189,7 @@ const UserProgress = () => {
     };
 
     return (
-        <div className="bg-gray-800 rounded-lg p-4 pb-0 m-2 w-full border border-gray-700 shadow-md max-lap:mx-0">
+        <div className="bg-gray-800 rounded-lg p-4 pb-0 m-2 mb-0 w-full border border-gray-700 shadow-md max-lap:mx-0">
             <div className="flex flex-row justify-between items-center">
                 <h1 className="text-3xl font-bold text-white mb-2">Dev Journey</h1>
                 <MoreInfo 
diff --git a/src/components/profile/subscription/UserSubscription.js b/src/components/profile/subscription/UserSubscription.js
index d82cef5..d243698 100644
--- a/src/components/profile/subscription/UserSubscription.js
+++ b/src/components/profile/subscription/UserSubscription.js
@@ -115,7 +115,7 @@ const UserSubscription = () => {
                 </div>
 
                 {/* Right Column - 78% */}
-                <div className="w-[78%] flex flex-col justify-center mx-auto max-lap:w-full">
+                <div className="w-[78%] flex flex-col justify-center mx-2 max-lap:mx-0 max-lap:w-full">
                     {!subscribed && (
                         <Card 
                             title="Subscribe to PlebDevs" 
@@ -135,7 +135,7 @@ const UserSubscription = () => {
                                     <div className="mb-2">
                                         <p className="text-gray-400">Subscribe now and elevate your development journey!</p>
                                     </div>
-                                    <div className="flex flex-col gap-4 mb-2">
+                                    <div className="flex flex-col gap-4 mb-1">
                                         <div className="flex items-center">
                                             <i className="pi pi-book text-2xl text-primary mr-2 text-blue-400"></i>
                                             <span>Access ALL current and future PlebDevs content</span>