diff --git a/packages/app/src/pages/home/components/livestreams/index.jsx b/packages/app/src/pages/home/components/livestreams/index.jsx
index 8721deb6..7691ee4d 100644
--- a/packages/app/src/pages/home/components/livestreams/index.jsx
+++ b/packages/app/src/pages/home/components/livestreams/index.jsx
@@ -9,7 +9,7 @@ import Livestream from "../../../../models/livestream"
 import "./index.less"
 
 const LivestreamItem = (props) => {
-    const { livestream } = props
+    const { livestream = {} } = props
 
     const handleOnClick = async () => {
         if (typeof props.onClick !== "function") {
@@ -22,13 +22,19 @@ const LivestreamItem = (props) => {
 
     return <div className="livestream_item" onClick={handleOnClick}>
         <div className="livestream_thumbnail">
-            <img src={livestream.thumbnail ?? "/assets/new_file.png"} />
+            <img src={livestream.info?.thumbnail ?? "/assets/new_file.png"} />
         </div>
         <div className="livestream_info">
             <UserPreview username={livestream.username} />
 
+            <div className="livestream_title">
+                <h1>{livestream.info?.title}</h1>
+            </div>
             <div className="livestream_description">
-                {livestream.description ?? "No description"}
+                <h2>{livestream.info?.description ?? "No description"}</h2>
+            </div>
+            <div className="livestream_category">
+                {livestream.info?.catagory ?? "No category"}
             </div>
         </div>
     </div>
diff --git a/packages/app/src/pages/home/components/livestreams/index.less b/packages/app/src/pages/home/components/livestreams/index.less
index 18d67fd1..6c27f523 100644
--- a/packages/app/src/pages/home/components/livestreams/index.less
+++ b/packages/app/src/pages/home/components/livestreams/index.less
@@ -40,6 +40,8 @@
             display: flex;
             flex-direction: row;
 
+            align-items: center;
+
             background-color: var(--background-color-primary2);
 
             border: 1px solid var(--border-color);
@@ -68,21 +70,49 @@
             }
 
             .livestream_info {
+                position: relative;
+
+                width: 100%;
+
                 margin-left: 20px;
                 font-size: 1rem;
-                color: var(--text-color);
 
                 padding: 10px 0;
 
+                color: var(--text-color);
+
                 .userPreview {
                     font-size: 1.5rem;
                 }
 
-                .livestream_description {
-                    margin-top: 20px;
-                    font-size: 1.5rem;
+                h1,
+                h2 {
+                    margin: 0;
+                    height: fit-content;
                     color: var(--text-color);
                 }
+
+                .livestream_title {
+                    margin-top: 10px;
+                    font-size: 1.5rem;
+                    height: fit-content;
+                    font-family: "Space Grotesk", sans-serif;
+                }
+
+                .livestream_description {
+                    font-size: 0.6rem;
+                    font-weight: 400;
+                    height: fit-content;
+                }
+
+                .livestream_category {
+                    position: absolute;
+
+                    top: 0;
+                    right: 0;
+
+                    padding: 10px;
+                }
             }
         }
     }