diff --git a/src/components/AppBar.js b/src/components/AppBar.js
index 37d1d66..e11a072 100644
--- a/src/components/AppBar.js
+++ b/src/components/AppBar.js
@@ -57,7 +57,7 @@ const AppBar = ({ config }) => {
 
   return (
     <>
-      <MuiAppBar position="fixed" elevation={0}>
+      <MuiAppBar position="fixed" elevation={0} color="primary">
         <Toolbar>
           <Link classes={{ root: classes.logoLink }} href="/">
             <div className={classes.logo}>
diff --git a/src/components/Json.js b/src/components/Json.js
index 0830470..49147ee 100644
--- a/src/components/Json.js
+++ b/src/components/Json.js
@@ -14,9 +14,18 @@ const useStyles = makeStyles(() => ({
     flex: 1,
   },
 }));
+const useTreeStyles = makeStyles(
+  (theme) => ({
+    colorPrimary: {
+      color: theme.palette.secondary.main,
+    },
+  }),
+  { name: "MuiTypography" },
+);
 
 const Json = ({ data }) => {
   const classes = useStyles();
+  useTreeStyles();
 
   return (
     <JsonTreeView
diff --git a/src/theme.js b/src/theme.js
index 56a5993..fdf33ea 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -63,6 +63,9 @@ export const createTheme = (theme) =>
             primary: {
               main: "#0000F4",
             },
+            secondary: {
+              main: "#A2A2FF",
+            },
             background: {
               default: "#18181A",
               secondary: "#18181A",