diff --git a/src/components/config/NameValueRow.tsx b/src/components/config/NameValueRow.tsx
index b46b64e..43d88d5 100644
--- a/src/components/config/NameValueRow.tsx
+++ b/src/components/config/NameValueRow.tsx
@@ -14,7 +14,7 @@ export const NameValueRow: React.FC<NameValueRowProps> = ({
   return (
     <div className="flex flex-row w-full items-baseline text-sm">
       <div className="grow shrink-0 text-gray-500">{name}</div>
-      <div className={`text-xs uppercase shrink text-${valueColor} text-right`}>
+      <div className={`text-xs shrink text-${valueColor} text-right`}>
         {value}
       </div>
     </div>
diff --git a/src/components/playground/Playground.tsx b/src/components/playground/Playground.tsx
index 0c3089f..4e6f2cb 100644
--- a/src/components/playground/Playground.tsx
+++ b/src/components/playground/Playground.tsx
@@ -262,7 +262,7 @@ export default function Playground({
                 roomState === ConnectionState.Connecting ? (
                   <LoadingSVG diameter={16} strokeWidth={2} />
                 ) : (
-                  roomState
+                  roomState.toUpperCase()
                 )
               }
               valueColor={
@@ -275,11 +275,11 @@ export default function Playground({
               name="Agent connected"
               value={
                 isAgentConnected ? (
-                  "true"
+                  "TRUE"
                 ) : roomState === ConnectionState.Connected ? (
                   <LoadingSVG diameter={12} strokeWidth={2} />
                 ) : (
-                  "false"
+                  "FALSE"
                 )
               }
               valueColor={