diff --git a/packages/app/src/pages/tv/[type].jsx b/packages/app/src/pages/tv/[type].jsx
index b8c26c1f..5fccecd7 100755
--- a/packages/app/src/pages/tv/[type].jsx
+++ b/packages/app/src/pages/tv/[type].jsx
@@ -16,7 +16,7 @@ export default class TVDashboard extends React.Component {
     primaryPanelRef = React.createRef()
 
     componentDidMount() {
-        app.eventBus.emit("style.compactMode", false)
+        app.cores.style.compactMode(false)
     }
 
     renderActiveTab() {
diff --git a/packages/app/src/pages/tv/components/controlPanel/index.jsx b/packages/app/src/pages/tv/components/controlPanel/index.jsx
index d1dbd192..9ab9529b 100755
--- a/packages/app/src/pages/tv/components/controlPanel/index.jsx
+++ b/packages/app/src/pages/tv/components/controlPanel/index.jsx
@@ -1,12 +1,49 @@
 import React from "react"
 import * as antd from "antd"
 
-import { Icons } from "components/Icons"
+import { Icons, createIconRender } from "components/Icons"
 
 import Livestream from "../../../../models/livestream"
 
 import "./index.less"
 
+const CategoryView = (props) => {
+    const category = props.category
+
+    const [categoryData, setCategoryData] = React.useState(null)
+
+    const loadData = async () => {
+        const categoryData = await Livestream.getCategories(category).catch((err) => {
+            console.error(err)
+
+            app.message.error("Failed to load category")
+
+            return null
+        })
+
+        setCategoryData(categoryData)
+    }
+
+    React.useEffect(() => {
+        if (props.category) {
+            loadData()
+        }
+    }, [props.category])
+
+    return <div className="category">
+        {
+            categoryData?.icon &&
+            <div className="icon">
+                {createIconRender(categoryData.icon)}
+            </div>
+        }
+
+        <div className="label">
+            {categoryData?.label ?? "No category"}
+        </div>
+    </div>
+}
+
 const StreamingKeyView = (props) => {
     const [streamingKeyVisibility, setStreamingKeyVisibility] = React.useState(false)
 
@@ -143,7 +180,7 @@ const StreamInfoEditor = (props) => {
             </span>
             <div className="value">
                 <LivestreamsCategoriesSelector
-                    defaultValue={streamInfo.category.key}
+                    defaultValue={streamInfo.category}
                     updateStreamInfo={updateStreamInfo}
                 />
             </div>
@@ -277,9 +314,7 @@ export default (props) => {
                     <span>
                         Category
                     </span>
-                    <h4>
-                        {streamInfo?.category?.label ?? "No category"}
-                    </h4>
+                    <CategoryView category={streamInfo?.category} />
                 </div>
             </div>
 
diff --git a/packages/app/src/pages/tv/components/explore/index.less b/packages/app/src/pages/tv/components/explore/index.less
index 6c27f523..b01d0532 100755
--- a/packages/app/src/pages/tv/components/explore/index.less
+++ b/packages/app/src/pages/tv/components/explore/index.less
@@ -42,7 +42,7 @@
 
             align-items: center;
 
-            background-color: var(--background-color-primary2);
+            background-color: var(--background-color-primary-2);
 
             border: 1px solid var(--border-color);