diff --git a/src/core/commands/debug.ts b/src/core/commands/debug.ts
index b35f9d2..46fc31a 100644
--- a/src/core/commands/debug.ts
+++ b/src/core/commands/debug.ts
@@ -18,16 +18,20 @@ export default () =>
       },
     ],
     execute([ephemeral], ctx) {
-      const info = getDebugInfo();
-      const content = [
-        "**ShiggyCord Debug Info**",
-        `> ShiggyCord: ${info.bunny.version} (${info.bunny.loader.name} ${info.bunny.loader.version})`,
-        `> Discord: ${info.discord.version} (${info.discord.build})`,
-        `> React: ${info.react.version} (RN ${info.react.nativeVersion})`,
-        `> Hermes: ${info.hermes.version} (bcv${info.hermes.bytecodeVersion})`,
-        `> System: ${info.os.name} ${info.os.version} ${info.os.sdk ? `(SDK ${info.os.sdk})` : ""}`.trimEnd(),
-        `> Device: ${info.device.model}`,
-      ].join("\n");
+        const info = getDebugInfo();
+
+        if(info.device.codename === undefined) { info.device.codename = ""}
+        else{ info.device.codename = "(" + info.device.codename + ")" }
+
+        const content = [
+            "**ShiggyCord Debug Info**",
+            `> ShiggyCord: ${info.bunny.version} (${info.bunny.loader.name} ${info.bunny.loader.version})`,
+            `> Discord: ${info.discord.version} (${info.discord.build})`,
+            `> React: ${info.react.version} (RN ${info.react.nativeVersion})`,
+            `> Hermes: ${info.hermes.version} (bcv${info.hermes.bytecodeVersion})`,
+            `> System: ${info.os.name} ${info.os.version} ${info.os.sdk ? `(SDK ${info.os.sdk})` : ""}`.trimEnd(),
+            `> Device: ${info.device.model} ${info.device.codename}`,
+        ].join("\n");
 
         if (ephemeral?.value) {
             messageUtil.sendBotMessage(ctx.channel.id, content);
diff --git a/src/core/ui/components/AddonCard.tsx b/src/core/ui/components/AddonCard.tsx
index fcce763..73a789b 100644
--- a/src/core/ui/components/AddonCard.tsx
+++ b/src/core/ui/components/AddonCard.tsx
@@ -23,52 +23,54 @@ const { showSimpleActionSheet } = lazyDestructure(() =>
 
 // TODO: These styles work weirdly. Low DPI Has cramped text. Fix?
 const useStyles = createStyles({
-  card: {
-    backgroundColor: semanticColors?.CARD_SECONDARY_BG,
-    borderRadius: 12,
-    overflow: "hidden",
-  },
-  header: {
-    padding: 0,
-  },
-  headerLeading: {
-    flexDirection: "column",
-    justifyContent: "center",
-    flexShrink: 1,
-    scale: 1.2,
-  },
-  headerTrailing: {
-    display: "flex",
-    flexDirection: "row",
-    gap: 15,
-    alignItems: "center",
-  },
-  headerLabel: {
-    ...TextStyleSheet["heading-md/semibold"],
-    color: semanticColors.MOBILE_TEXT_HEADING_PRIMARY,
-  },
-  headerSubtitle: {
-    ...TextStyleSheet["text-md/semibold"],
-    color: semanticColors.TEXT_MUTED,
-  },
-  descriptionLabel: {
-    ...TextStyleSheet["text-md/semibold"],
-    color: semanticColors.TEXT_NORMAL,
-  },
-  actions: {
-    flexDirection: "row-reverse",
-    alignItems: "center",
-    gap: 5,
-  },
-  iconStyle: {
-    tintColor: semanticColors.INTERACTIVE_ICON_DEFAULT,
-    opacity: 0.2,
-    height: 64,
-    width: 64,
-    left: void 0,
-    right: "30%",
-    top: "-10%",
-  },
+    card: {
+        backgroundColor: semanticColors?.CARD_SECONDARY_BG,
+        borderRadius: 12,
+        overflow: "hidden"
+    },
+    header: {
+        padding: 0,
+    },
+    headerLeading: {
+        flex: 1,
+        flexDirection: "column",
+        justifyContent: "center",
+        scale: 1.2
+    },
+    headerTrailing: {
+        display: "flex",
+        flexDirection: "row",
+        gap: 15,
+        alignItems: "center"
+    },
+    headerLabel: {
+        ...TextStyleSheet["heading-lg/semibold"],
+    },
+    headerLabelCompact: {
+        ...TextStyleSheet["text-md/semibold"],
+    },
+    headerSubtitle: {
+        ...TextStyleSheet["text-sm/semibold"],
+        color: semanticColors.TEXT_MUTED,
+    },
+    descriptionLabel: {
+        ...TextStyleSheet["text-md/semibold"],
+        color: "text-strong",
+    },
+    actions: {
+        flexDirection: "row-reverse",
+        alignItems: "center",
+        gap: 5
+    },
+    iconStyle: {
+        tintColor: semanticColors.LOGO_PRIMARY,
+        opacity: 0.2,
+        height: 64,
+        width: 64,
+        left: void 0,
+        right: "30%",
+        top: "-10%"
+    }
 });
 
 interface Action {