diff --git a/public/icons/LogoutIcon.tsx b/public/icons/LogoutIcon.tsx
new file mode 100644
index 0000000..361a805
--- /dev/null
+++ b/public/icons/LogoutIcon.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+const LogoutIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    width="28"
+    height="28"
+    viewBox="0 0 111 77"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <g clipPath="url(#clip0_853_175)">
+      <g>
+        <path
+          d="M95.7996 53.05C93.2796 53.05 91.3096 55.12 91.3096 57.76C91.3096 60.4 93.2896 62.47 95.7996 62.47H106.04C108.56 62.47 110.53 60.4 110.53 57.76V19.13C110.53 16.49 108.55 14.42 106.04 14.42H95.7996C93.2796 14.42 91.3096 16.49 91.3096 19.13C91.3096 21.77 93.2896 23.84 95.7996 23.84H101.55V53.05H95.7996Z"
+          fill="currentColor"
+        />
+      </g>
+      <g>
+        <path
+          d="M85.21 35.32L49.1 1.3C47.26 -0.440005 44.4 -0.440005 42.56 1.3C40.72 3.04 40.72 5.73 42.56 7.46L70.84 34.1H4.61C2.03 34.1 0 36.01 0 38.44C0 40.87 2.03 42.78 4.61 42.78H70.84L42.56 69.42C40.72 71.16 40.72 73.85 42.56 75.58C43.48 76.45 44.68 76.88 45.78 76.88C46.88 76.88 48.18 76.45 49 75.58L85.11 41.56C85.94 40.78 86.49 39.65 86.49 38.52C86.49 37.39 86.03 36.26 85.11 35.48L85.2 35.31L85.21 35.32Z"
+          fill="currentColor"
+        />
+      </g>
+    </g>
+  </svg>
+);
+
+export default LogoutIcon;
\ No newline at end of file
diff --git a/src/app/components/ProfileCard.tsx b/src/app/components/ProfileCard.tsx
index a82916c..18eb281 100644
--- a/src/app/components/ProfileCard.tsx
+++ b/src/app/components/ProfileCard.tsx
@@ -1,13 +1,26 @@
 import React from "react";
+import LogoutIcon from "../../../public/icons/LogoutIcon";
 
 interface ProfileCardProps {
   hasUiogMembership: boolean;
   hasDnsMembership: boolean;
 }
 
-const membershipPerks = [
-  {
-    title: "UIOG",
+const membershipStatuses = {
+  Combined: {
+    title: "Combined",
+    description: "You have both memberships, and can enjoy all privileges.",
+    blurb: "Your added Combined perks:",
+    missingPerks: [
+      "access to UiO Gaming Association Room",
+      "access to Gangfest Events (2x / year)",
+    ],
+    gradient: "bg-success-bg",
+    image: "/images/p_both.png",
+    tag: "Combined",
+  },
+  UIOG: {
+    title: "UiO Gaming",
     description:
       "You are missing a DNS Standard membership. You can purchase one below.",
     blurb: "You will gain Combined perks:",
@@ -15,130 +28,104 @@ const membershipPerks = [
       "access to UiO Gaming Association Room",
       "access to Gangfest Events (2x / year)",
     ],
+    gradient: "bg-mixed",
+    image: "/images/uiog.png",
+    tag: "UiO Gaming",
   },
-  {
-    title: "DNS",
+  DNS: {
+    title: "DNS Standard",
     description:
       "You are missing a UiO Gaming membership. You can purchase one below.",
+    blurb: "",
     missingPerks: [],
+    gradient: "bg-mixed",
+    image: "/images/neuf.png",
+    tag: "DNS Standard",
   },
-  {
-    title: "Combined",
-    description: "You have both memberships, and can enjoy all privileges.",
-    blurb: "Your added Combined perks:",
-    missingPerks: [],
-  },
-  {
+  None: {
     title: "None",
     description:
       "You are missing both memberships. You can purchase them below.",
+    blurb: "",
     missingPerks: [],
+    gradient: "bg-failure-bg",
+    image: "/images/p_none.png",
+    tag: "Free",
   },
-];
+};
 
 const ProfileCard: React.FC<ProfileCardProps> = ({
   hasUiogMembership,
   hasDnsMembership,
 }) => {
-  let membershipStatus;
-  if (hasUiogMembership && hasDnsMembership) {
-    membershipStatus = membershipPerks[2]; // Combined
-  } else if (hasUiogMembership) {
-    membershipStatus = membershipPerks[0]; // UIOG
-  } else if (hasDnsMembership) {
-    membershipStatus = membershipPerks[1]; // DNS
-  } else {
-    membershipStatus = membershipPerks[3]; // None
-  }
+  const statusKey = hasUiogMembership
+    ? hasDnsMembership
+      ? "Combined"
+      : "UIOG"
+    : hasDnsMembership
+    ? "DNS"
+    : "None";
 
-  let gradientBottom;
-  let imagePath;
-  let tag;
-
-  if (membershipStatus.title === "Combined") {
-    gradientBottom = "bg-success-bg";
-    imagePath = "/images/p_both.png";
-    tag = "Combined";
-  } else if (membershipStatus.title === "None") {
-    gradientBottom = "bg-failure-bg";
-    imagePath = "/images/p_none.png";
-    tag = "Free";
-  } else {
-    gradientBottom = "bg-mixed";
-
-    if (membershipStatus.title === "UIOG") {
-      imagePath = "/images/p_uiog.png";
-      tag = "UiO Gaming";
-    }
-
-    if (membershipStatus.title === "DNS") {
-      imagePath = "/images/p_neuf.png";
-      tag = "DNS Standard";
-    }
-  }
+  const membershipStatus = membershipStatuses[statusKey];
 
   return (
     <div
-      className={`p-6 rounded-lg shadow-md text-white bg-gradient-to-b from-primary ${gradientBottom} transition-all duration-500p-7 m-5 gap-10 h-full`}
+      className={`flex flex-1 flex-col gap-5 p-6 rounded-lg shadow-md text-white bg-gradient-to-b from-primary ${membershipStatus.gradient} transition-all duration-500 m-5 h-full`}
     >
       {/* Top Row */}
       <div className="flex justify-between items-start mb-4">
         {/* User Icon and Name */}
         <div className="flex items-start gap-4">
-          <div className="w-14 h-14 rounded-md">
+          <div className="w-20 h-20 rounded-md">
             <img
-              src={imagePath}
+              src={membershipStatus.image}
               alt="User Icon"
               className="w-full h-full rounded-md"
             />
           </div>
-          <div>
+          <div className="flex flex-col">
             <p className="pb">wailern</p>
-            <p className="text-sm">{tag}</p>
+            <p className="opacity-50">{membershipStatus.tag}</p>
           </div>
         </div>
 
         {/* Log Out Button */}
-        <button className="bg-overlay-bright px-4 py-2 rounded-lg outline outline-outline2 outline-2">
-          <p className="text-outline2">Log Out →</p>
+        <button className="flex flex-row bg-overlay-bright px-3 py-1 rounded-md outline outline-outline2 outline-2 items-center gap-3">
+          <p className="ph text-outline2">Log Out</p>
+          <LogoutIcon className="w-8 ml-2 text-outline2" />
         </button>
       </div>
 
       {/* Membership Status */}
-      <div className="space-y-2">
-        <div
-          className={`p-4 rounded-lg flex justify-between items-center ${
-            hasUiogMembership ? "bg-success" : "bg-failure"
-          }`}
-        >
-          <p>{hasUiogMembership ? "✅ UiO Gaming" : "❌ UiO Gaming"}</p>
-          <div>🎮</div>
-        </div>
-        <div
-          className={`p-4 rounded-lg flex justify-between items-center ${
-            hasDnsMembership ? "bg-success" : "bg-failure"
-          }`}
-        >
-          <p className="">
-            {hasDnsMembership ? "✅ DNS Standard" : "❌ DNS Standard"}
-          </p>
-          <div>🐟</div>
-        </div>
-      </div>
+      {["UIOG", "DNS"].map((key) => {
+        const isActive = key === "UIOG" ? hasUiogMembership : hasDnsMembership;
+        const displayName = key === "UIOG" ? "UiO Gaming" : "DNS Standard";
+        return (
+          <div
+            key={key}
+            className={`p-4 py-6 rounded-lg flex justify-between items-center ${
+              isActive ? "bg-success" : "bg-failure"
+            }`}
+          >
+            <p>{isActive ? `✅ ${displayName}` : `❌ ${displayName}`}</p>
+            <div>{key === "UIOG" ? "🎮" : "🐟"}</div>
+          </div>
+        );
+      })}
 
       {/* Description */}
-      <div className="mt-4 space-y-4">
-        <p>{membershipStatus.description}</p>
-        <div>
-          <p className="pb">{membershipStatus.blurb}</p>
-          {membershipStatus.missingPerks.length > 0 && (
-            <ul className="list-disc list-inside mt-2 text-sm space-y-2">
-              {membershipStatus.missingPerks.map((perk, index) => (
-                <p key={index}>+ {perk}</p>
-              ))}
-            </ul>
-          )}
-        </div>
+      <div className="mt-2 space-y-5">
+        <p className="ps">{membershipStatus.description}</p>
+        {membershipStatus.blurb && (
+          <div className="flex flex-col gap-0.5">
+            <p className="psh">{membershipStatus.blurb}</p>
+            {membershipStatus.missingPerks.map((perk, index) => (
+              <p className="ps" key={index}>
+                + {perk}
+              </p>
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/app/globals.css b/src/app/globals.css
index 51ab0bb..95f56f9 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -52,7 +52,7 @@ h2 {
 p {
   font-family: var(--font-nunito);
   font-weight: 400;
-  font-size: 1.25rem;
+  font-size: 1.45rem;
   color: white;
 }
 
@@ -60,12 +60,17 @@ p {
   font-weight: 800;
 }
 
+.ph {
+  font-weight: 600;
+  font-size: 1.25rem;
+}
+
 .po {
   color: var(--outline);
 }
 
 .pd {
-  font-size: 1.5rem;
+  font-size: 1.45rem;
   color: var(--foreground);
 }
 
@@ -74,6 +79,15 @@ p {
   color: var(--foreground)
 }
 
+.ps {
+  font-size: 1.25rem;
+}
+
+.psh {
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
 .header {
   font-weight: 800;
   font-size: 2.5rem;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index e917e98..c489b34 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -9,18 +9,18 @@ const config: Config = {
   theme: {
     extend: {
       colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-        primary: "var(--primary)",
-        overlay: "var(--overlay)",
+        'background': "var(--background)",
+        'foreground': "var(--foreground)",
+        'primary': "var(--primary)",
+        'overlay': "var(--overlay)",
         'overlay-bright': "var(--overlay-bright)",
-        outline: "var(--outline)",
-        outline2: "var(--outline2)",
+        'outline': "var(--outline)",
+        'outline2': "var(--outline2)",
         'success-bg': "var(--success-bg)",
-        success: "var(--success)",
+        'success': "var(--success)",
         'failure-bg': "var(--failure-bg)",
-        failure: "var(--failure)",
-        mixed: "var(--mixed)",
+        'failure': "var(--failure)",
+        'mixed': "var(--mixed)",
       },
     },
     borderRadius: {