diff --git a/src/core/ui/components/AddonCard.tsx b/src/core/ui/components/AddonCard.tsx
index a58445d..b2947e8 100644
--- a/src/core/ui/components/AddonCard.tsx
+++ b/src/core/ui/components/AddonCard.tsx
@@ -44,7 +44,7 @@ const useStyles = createStyles({
   },
   headerLabel: {
     ...TextStyleSheet["heading-md/semibold"],
-    color: semanticColors.TEXT_NORMAL,
+    color: semanticColors.HEADER_PRIMARY,
   },
   headerSubtitle: {
     ...TextStyleSheet["text-md/semibold"],
diff --git a/src/core/ui/reporter/components/ErrorBoundaryScreen.tsx b/src/core/ui/reporter/components/ErrorBoundaryScreen.tsx
index 9e290b0..f3a1495 100644
--- a/src/core/ui/reporter/components/ErrorBoundaryScreen.tsx
+++ b/src/core/ui/reporter/components/ErrorBoundaryScreen.tsx
@@ -19,6 +19,7 @@ import {
   TableSwitchRow,
   Stack,
 } from "@metro/common/components";
+import { semanticColors } from "@ui/color";
 import { ScrollView, View } from "react-native";
 
 import ErrorComponentStackCard from "./ErrorComponentStackCard";
@@ -74,7 +75,7 @@ export default function ErrorBoundaryScreen(props: {
           <Text
             variant="heading-md/extrabold"
             style={{
-              color: tokens.colors.TEXT_NORMAL,
+              color: semanticColors.HEADER_PRIMARY,
               marginBottom: 8,
               textAlign: "center",
             }}
diff --git a/src/core/ui/reporter/components/ErrorCard.tsx b/src/core/ui/reporter/components/ErrorCard.tsx
index 82c5c0c..8a275e8 100644
--- a/src/core/ui/reporter/components/ErrorCard.tsx
+++ b/src/core/ui/reporter/components/ErrorCard.tsx
@@ -1,44 +1,73 @@
 import { Strings } from "@core/i18n";
 import { Codeblock } from "@lib/ui/components";
 import { showSheet } from "@lib/ui/sheets";
-import { Button, Card, Stack, Text, TwinButtons } from "@metro/common/components";
+import {
+  Button,
+  Card,
+  Stack,
+  Text,
+  TwinButtons,
+} from "@metro/common/components";
+import { semanticColors } from "@ui/color";
 import { ReactNode } from "react";
-
+import { View } from "react-native";
 import ErrorDetailsActionSheet from "./ErrorDetailsActionSheet";
 
-export const INDEX_BUNDLE_FILE: string = window.HermesInternal.getFunctionLocation(window.__r).fileName;
+export const INDEX_BUNDLE_FILE: string =
+  window.HermesInternal.getFunctionLocation(window.__r).fileName;
 
 interface ErrorCardProps {
-    error: unknown;
-    header?: string | ReactNode;
-    onRetryRender?: () => void;
+  error: unknown;
+  header?: string | ReactNode;
+  onRetryRender?: () => void;
 }
 
 export default function ErrorCard(props: ErrorCardProps) {
-    return <Card>
-        <Stack>
-            {props.header && typeof props.header !== "string"
-                ? props.header
-                : <Text variant="heading-lg/bold">{props.header ?? Strings.UH_OH}</Text>
-            }
-            <Codeblock selectable={true}>{String(props.error)}</Codeblock>
-            <TwinButtons>
-                {props.onRetryRender && <Button
-                    variant="destructive"
-                    // icon={findAssetId("RetryIcon")}
-                    text={Strings.RETRY_RENDER}
-                    onPress={props.onRetryRender}
-                />}
-                {props.error instanceof Error ? <Button
-                    text={"Details"}
-                    // icon={findAssetId("CircleInformationIcon-primary")}
-                    onPress={() => showSheet(
-                        "BunnyErrorDetailsActionSheet",
-                        ErrorDetailsActionSheet,
-                        { error: props.error as Error }
-                    )}
-                /> : null}
-            </TwinButtons>
-        </Stack>
-    </Card>;
+  return (
+    <Card>
+      <Stack>
+        {props.header && typeof props.header !== "string" ? (
+          props.header
+        ) : (
+          <Text variant="heading-lg/bold">{props.header ?? Strings.UH_OH}</Text>
+        )}
+        <View
+          style={{
+            backgroundColor: semanticColors.BACKGROUND_SECONDARY,
+            borderRadius: 8,
+            borderWidth: 1,
+            borderColor: semanticColors.BACKGROUND_TERTIARY,
+            padding: 12,
+          }}
+        >
+          <Text style={{ color: semanticColors.TEXT_MUTED }}>
+            {String(props.error)}
+          </Text>
+        </View>
+        <TwinButtons>
+          {props.onRetryRender && (
+            <Button
+              variant="destructive"
+              // icon={findAssetId("RetryIcon")}
+              text={Strings.RETRY_RENDER}
+              onPress={props.onRetryRender}
+            />
+          )}
+          {props.error instanceof Error ? (
+            <Button
+              text={"Details"}
+              // icon={findAssetId("CircleInformationIcon-primary")}
+              onPress={() =>
+                showSheet(
+                  "BunnyErrorDetailsActionSheet",
+                  ErrorDetailsActionSheet,
+                  { error: props.error as Error },
+                )
+              }
+            />
+          ) : null}
+        </TwinButtons>
+      </Stack>
+    </Card>
+  );
 }
diff --git a/src/core/ui/settings/pages/Developer/AssetBrowser.tsx b/src/core/ui/settings/pages/Developer/AssetBrowser.tsx
index 63f5ed6..639dcb5 100644
--- a/src/core/ui/settings/pages/Developer/AssetBrowser.tsx
+++ b/src/core/ui/settings/pages/Developer/AssetBrowser.tsx
@@ -27,8 +27,10 @@ export default function AssetBrowser() {
         >
           <Text
             variant="text-sm/medium"
-            color="text-danger"
-            style={{ marginBottom: 16 }}
+            style={{
+              marginBottom: 16,
+              color: "var(--text-muted)",
+            }}
           >
             Some assets types cannot be displayed and will be marked in red.
           </Text>
diff --git a/src/core/ui/settings/pages/Plugins/sheets/PluginInfoActionSheet.tsx b/src/core/ui/settings/pages/Plugins/sheets/PluginInfoActionSheet.tsx
index 5445d81..3a0e39a 100644
--- a/src/core/ui/settings/pages/Plugins/sheets/PluginInfoActionSheet.tsx
+++ b/src/core/ui/settings/pages/Plugins/sheets/PluginInfoActionSheet.tsx
@@ -16,6 +16,7 @@ import { showToast } from "@ui/toasts";
 import { showConfirmationAlert } from "@core/vendetta/alerts";
 import { VdPluginManager } from "@core/vendetta/plugins";
 import { purgeStorage as purgeVdStorage } from "@core/vendetta/storage";
+import { semanticColors } from "@ui/color";
 
 import { PluginInfoActionSheetProps } from "./common";
 import TitleComponent from "./TitleComponent";
@@ -233,8 +234,10 @@ export default function PluginInfoActionSheet({
         <Card>
           <Text
             variant="text-md/semibold"
-            color="text-primary"
-            style={{ marginBottom: 4 }}
+            style={{
+              marginBottom: 4,
+              color: semanticColors.HEADER_PRIMARY,
+            }}
           >
             Description
           </Text>
diff --git a/src/core/ui/settings/pages/Themes/sheets/ThemeInfoActionSheet.tsx b/src/core/ui/settings/pages/Themes/sheets/ThemeInfoActionSheet.tsx
index 8278ef3..4307476 100644
--- a/src/core/ui/settings/pages/Themes/sheets/ThemeInfoActionSheet.tsx
+++ b/src/core/ui/settings/pages/Themes/sheets/ThemeInfoActionSheet.tsx
@@ -14,6 +14,7 @@ import {
   VdThemeInfo,
 } from "@lib/addons/themes";
 import { formatString, Strings } from "@core/i18n";
+import { semanticColors } from "@ui/color";
 
 interface ThemeInfoActionSheetProps {
   theme: VdThemeInfo;
@@ -191,8 +192,10 @@ export default function ThemeInfoActionSheet({
         <Card>
           <Text
             variant="text-md/semibold"
-            color="text-primary"
-            style={{ marginBottom: 4 }}
+            style={{
+              marginBottom: 4,
+              color: semanticColors.HEADER_PRIMARY,
+            }}
           >
             Description
           </Text>