diff --git a/src/core/ui/components/AddonCard.tsx b/src/core/ui/components/AddonCard.tsx
index 96aa21a..e369090 100644
--- a/src/core/ui/components/AddonCard.tsx
+++ b/src/core/ui/components/AddonCard.tsx
@@ -60,7 +60,7 @@ const useStyles = createStyles({
     gap: 5,
   },
   iconStyle: {
-    tintColor: semanticColors.LOGO_PRIMARY,
+    tintColor: semanticColors.INTERACTIVE_ICON_DEFAULT,
     opacity: 0.2,
     height: 64,
     width: 64,
diff --git a/src/core/ui/settings/pages/Fonts/FontCard.tsx b/src/core/ui/settings/pages/Fonts/FontCard.tsx
index 478fd7a..339b90d 100644
--- a/src/core/ui/settings/pages/Fonts/FontCard.tsx
+++ b/src/core/ui/settings/pages/Fonts/FontCard.tsx
@@ -5,63 +5,114 @@ import { useProxy } from "@core/vendetta/storage";
 import { FontDefinition, fonts, selectFont } from "@lib/addons/fonts";
 import { findAssetId } from "@lib/api/assets";
 import { BundleUpdaterManager } from "@lib/api/native/modules";
-import { NavigationNative } from "@metro/common";
-import { Button, Card, IconButton, Text } from "@metro/common/components";
+import { lazyDestructure } from "@lib/utils/lazy";
+import { findByProps } from "@metro";
+import { NavigationNative, tokens } from "@metro/common";
+import { Button, Card, IconButton, Stack, Text } from "@metro/common/components";
+import * as Skia from "@shopify/react-native-skia";
+import { TextStyleSheet } from "@ui/styles";
+import { useMemo } from "react";
 import { View } from "react-native";
 
 import FontEditor from "./FontEditor";
 
-export default function FontCard({ item: font }: CardWrapper<FontDefinition>) {
-  useProxy(fonts);
+const { useToken } = lazyDestructure(() => findByProps("useToken"));
 
-  const navigation = NavigationNative.useNavigation();
-  const selected = fonts.__selected === font.name;
+function FontPreview({ font }: { font: FontDefinition; }) {
+    const TEXT_DEFAULT = useToken(tokens.colors.TEXT_DEFAULT);
+    const { fontFamily: fontFamilyList, fontSize } = TextStyleSheet["text-md/medium"];
+    const fontFamily = fontFamilyList!.split(/,/g)[0];
 
-  return (
-    <Card style={{ padding: 18, borderRadius: 16, backgroundColor: "#23272a" }}>
-      <View
-        style={{
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "space-between",
-        }}
-      >
-        <View style={{ flex: 1 }}>
-          <Text variant="heading-lg/bold">{font.name}</Text>
+    const typeface = Skia.useFont(font.main[fontFamily])?.getTypeface();
+
+    const paragraph = useMemo(() => {
+        if (!typeface) return null;
+
+        const fMgr = SkiaApi.TypefaceFontProvider.Make();
+        fMgr.registerFont(typeface, fontFamily);
+
+
+        return SkiaApi.ParagraphBuilder.Make({}, fMgr)
+            .pushStyle({
+                color: SkiaApi.Color(TEXT_DEFAULT),
+                fontFamilies: [fontFamily],
+                fontSize,
+            })
+            .addText("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")
+            .pop()
+            .build();
+    }, [typeface]);
+
+    return (
+        // This does not work, actually :woeis:
+        <View style={{ height: 64 }}>
+            {typeface
+                ? <Skia.Canvas style={{ height: 64 }}>
+                    <Skia.Paragraph paragraph={paragraph} x={0} y={0} width={300} />
+                </Skia.Canvas>
+                : <View style={{ justifyContent: "center", alignItems: "center" }}>
+                    <Text color="text-muted" variant="heading-lg/semibold">
+                        Loading...
+                    </Text>
+                </View>}
         </View>
-
-        <View style={{ flexDirection: "row", alignItems: "center" }}>
-          <Button
-            size="sm"
-            variant={selected ? "secondary" : "primary"}
-            text={selected ? "Unapply" : "Apply"}
-            style={{ minWidth: 80, marginRight: 8 }}
-            onPress={async () => {
-              await selectFont(selected ? null : font.name);
-              showConfirmationAlert({
-                title: Strings.HOLD_UP,
-                content: "Reload Discord to apply changes?",
-                confirmText: Strings.RELOAD,
-                cancelText: Strings.CANCEL,
-                confirmColor: "red",
-                onConfirm: BundleUpdaterManager.reload,
-              });
-            }}
-          />
-          <IconButton
-            onPress={() => {
-              navigation.push("BUNNY_CUSTOM_PAGE", {
-                title: "Edit Font",
-                render: () => <FontEditor name={font.name} />,
-              });
-            }}
-            size="sm"
-            variant="secondary"
-            disabled={selected}
-            icon={findAssetId("WrenchIcon")}
-          />
-        </View>
-      </View>
-    </Card>
-  );
+    );
 }
+
+export default function FontCard({ item: font }: CardWrapper<FontDefinition>) {
+    useProxy(fonts);
+
+    const navigation = NavigationNative.useNavigation();
+    const selected = fonts.__selected === font.name;
+
+    return (
+        <Card>
+            <Stack spacing={16}>
+                <View style={{ flexDirection: "row", alignItems: "center" }}>
+                    <View>
+                        <Text variant="heading-lg/semibold">
+                            {font.name}
+                        </Text>
+                        {/* TODO: Text wrapping doesn't work well */}
+                        {/* <Text color="text-muted" variant="text-sm/semibold">
+                            {font.description}
+                        </Text> */}
+                    </View>
+                    <View style={{ marginLeft: "auto" }}>
+                        <Stack spacing={12} direction="horizontal">
+                            <IconButton
+                                onPress={() => {
+                                    navigation.push("BUNNY_CUSTOM_PAGE", {
+                                        title: "Edit Font",
+                                        render: () => <FontEditor name={font.name} />
+                                    });
+                                }}
+                                size="sm"
+                                variant="secondary"
+                                disabled={selected}
+                                icon={findAssetId("WrenchIcon")}
+                            />
+                            <Button
+                                size="sm"
+                                variant={selected ? "secondary" : "primary"}
+                                text={selected ? "Unapply" : "Apply"}
+                                onPress={async () => {
+                                    await selectFont(selected ? null : font.name);
+                                    showConfirmationAlert({
+                                        title: Strings.HOLD_UP,
+                                        content: "Reload Discord to apply changes?",
+                                        confirmText: Strings.RELOAD,
+                                        cancelText: Strings.CANCEL,
+                                        confirmColor: "red",
+                                        onConfirm: BundleUpdaterManager.reload
+                                    });
+                                }}
+                            />
+                        </Stack>
+                    </View>
+                </View>
+                <FontPreview font={font} />
+            </Stack>
+        </Card>
+    );
+}
\ No newline at end of file
diff --git a/src/core/ui/settings/pages/Fonts/FontEditor.tsx b/src/core/ui/settings/pages/Fonts/FontEditor.tsx
index 40ac61b..072e3f9 100644
--- a/src/core/ui/settings/pages/Fonts/FontEditor.tsx
+++ b/src/core/ui/settings/pages/Fonts/FontEditor.tsx
@@ -332,7 +332,7 @@ export default function FontEditor(props: {
 
                     return <TableRow
                         label={name}
-                        subLabel={error ? <Text variant='text-xs/medium' color='text-danger'>{error.message}</Text> : url}
+                        subLabel={error ? <Text variant='text-xs/medium' color='text-feedback-critical'>{error.message}</Text> : url}
                         trailing={<Stack spacing={8} direction="horizontal">
                             <IconButton
                                 size="sm"
diff --git a/src/core/ui/settings/pages/Plugins/sheets/PluginInfoActionSheet.tsx b/src/core/ui/settings/pages/Plugins/sheets/PluginInfoActionSheet.tsx
index d82d238..4422f72 100644
--- a/src/core/ui/settings/pages/Plugins/sheets/PluginInfoActionSheet.tsx
+++ b/src/core/ui/settings/pages/Plugins/sheets/PluginInfoActionSheet.tsx
@@ -236,7 +236,7 @@ export default function PluginInfoActionSheet({
             variant="text-md/semibold"
             style={{
               marginBottom: 4,
-              color: semanticColors.MOBILE_TEXT_HEADING_PRIMARY,
+              color: "text-strong",
             }}
           >
             Description
diff --git a/src/lib/ui/components/Codeblock.tsx b/src/lib/ui/components/Codeblock.tsx
index 7b37a9a..8a5502a 100644
--- a/src/lib/ui/components/Codeblock.tsx
+++ b/src/lib/ui/components/Codeblock.tsx
@@ -4,34 +4,56 @@ import { createStyles } from "@ui/styles";
 import { Platform, Text, TextInput } from "react-native";
 
 export interface CodeblockProps {
-    selectable?: boolean;
-    style?: import("react-native").TextStyle;
-    children?: string;
+  selectable?: boolean;
+  style?: import("react-native").TextStyle;
+  children?: string;
 }
 
 const useStyles = createStyles({
-    codeBlock: {
-        fontFamily: constants.Fonts.CODE_NORMAL,
-        fontSize: 12,
-        textAlignVertical: "center",
-        backgroundColor: semanticColors.BACKGROUND_SECONDARY,
-        color: semanticColors.TEXT_NORMAL,
-        borderWidth: 1,
-        borderRadius: 12,
-        borderColor: semanticColors.BACKGROUND_TERTIARY,
-        padding: 10,
-    },
+  codeBlock: {
+    fontFamily: constants.Fonts.CODE_NORMAL,
+    fontSize: 12,
+    textAlignVertical: "center",
+    backgroundColor: semanticColors.CARD_BACKGROUND_DEFAULT,
+    color: semanticColors.TEXT_DEFAULT,
+    borderWidth: 1,
+    borderRadius: 12,
+    borderColor: semanticColors.BORDER_SUBTLE,
+    padding: 10,
+  },
 });
 
 // iOS doesn't support the selectable property on RN.Text...
-const InputBasedCodeblock = ({ style, children }: CodeblockProps) => <TextInput editable={false} multiline style={[useStyles().codeBlock, style && style]} value={children} />;
-const TextBasedCodeblock = ({ selectable, style, children }: CodeblockProps) => <Text selectable={selectable} style={[useStyles().codeBlock, style && style]}>{children}</Text>;
+const InputBasedCodeblock = ({ style, children }: CodeblockProps) => (
+  <TextInput
+    editable={false}
+    multiline
+    style={[useStyles().codeBlock, style && style]}
+    value={children}
+  />
+);
+const TextBasedCodeblock = ({
+  selectable,
+  style,
+  children,
+}: CodeblockProps) => (
+  <Text selectable={selectable} style={[useStyles().codeBlock, style && style]}>
+    {children}
+  </Text>
+);
 
-export default function Codeblock({ selectable, style, children }: CodeblockProps) {
-    if (!selectable) return <TextBasedCodeblock style={style} children={children} />;
+export default function Codeblock({
+  selectable,
+  style,
+  children,
+}: CodeblockProps) {
+  if (!selectable)
+    return <TextBasedCodeblock style={style} children={children} />;
 
-    return Platform.select({
-        ios: <InputBasedCodeblock style={style} children={children} />,
-        default: <TextBasedCodeblock style={style} children={children} selectable />,
-    });
+  return Platform.select({
+    ios: <InputBasedCodeblock style={style} children={children} />,
+    default: (
+      <TextBasedCodeblock style={style} children={children} selectable />
+    ),
+  });
 }