diff --git a/web/pages/components/statistic.tsx b/web/pages/components/statistic.tsx
index a2fc48ceb..45cca053e 100644
--- a/web/pages/components/statistic.tsx
+++ b/web/pages/components/statistic.tsx
@@ -6,7 +6,7 @@ interface ItemProps {
   value: string,
   prefix: JSX.Element,
   color: string,
-  progress: boolean,
+  progress?: boolean,
 };
 
 export default function StatisticItem(props: ItemProps) {
@@ -41,8 +41,8 @@ function ProgressView({title, value, prefix, color}) {
   )
 }
 
-function StatisticView({title, value, prefix}) {
-  const valueStyle = { color: "#334", fontSize: "1.8rem" };
+function StatisticView({title, value, prefix, color}) {
+  const valueStyle = { fontSize: "1.8rem" };
 
   return (
     <Statistic
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
index edba03a42..bd9e2d124 100644
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -122,11 +122,13 @@ export default function Stats() {
           title="Outbound Video Stream"
           value={`${setting.videoBitrate} kbps ${setting.framerate} fps`}
           prefix={null}
+          color="#334"
         />
         <StatisticItem
           title="Outbound Audio Stream"
           value={audioSetting}
           prefix={null}
+          color="#334"
         />
       </Row>
     );
@@ -147,16 +149,19 @@ export default function Stats() {
           )}`}
           value={formatDistanceToNow(new Date(broadcaster.time))}
           prefix={<ClockCircleOutlined />}
+          color="#334"
         />
         <StatisticItem
           title="Viewers"
           value={viewerCount}
           prefix={<UserOutlined />}
+          color="#334"
         />
         <StatisticItem
           title="Peak viewer count"
           value={sessionMaxViewerCount}
           prefix={<UserOutlined />}
+          color="#334"
         />
       </Row>
 
@@ -165,16 +170,19 @@ export default function Stats() {
           title="Input"
           value={formatIPAddress(remoteAddr)}
           prefix={null}
+          color="#334"
         />
         <StatisticItem
           title="Inbound Video Stream"
           value={streamVideoDetailString}
           prefix={null}
+          color="#334"
         />
         <StatisticItem
           title="Inbound Audio Stream"
           value={streamAudioDetailString}
           prefix={null}
+          color="#334"
         />
       </Row>
 
@@ -185,11 +193,13 @@ export default function Stats() {
           title="Stream key"
           value={config.streamKey}
           prefix={null}
+          color="#334"
         />
         <StatisticItem
           title="Directory registration enabled"
           value={config.yp.enabled.toString()}
           prefix={null}
+          color="#334"
         />
       </Row>
 
diff --git a/web/pages/viewer-info.tsx b/web/pages/viewer-info.tsx
index 04977adf3..5595eacac 100644
--- a/web/pages/viewer-info.tsx
+++ b/web/pages/viewer-info.tsx
@@ -109,16 +109,19 @@ export default function ViewersOverTime() {
           title="Current viewers"
           value={viewerCount.toString()}
           prefix={<UserOutlined />}
+          color="#334"
         />
         <StatisticItem
           title="Peak viewers this session"
           value={sessionPeakViewerCount.toString()}
           prefix={<UserOutlined />}
+          color="#334"
         />
         <StatisticItem
           title="Peak viewers overall"
           value={overallPeakViewerCount.toString()}
           prefix={<UserOutlined />}
+          color="#334"
         />
       </Row>
       <div className="chart-container">