diff --git a/packages/app/src/components/HashtagTrendings/index.jsx b/packages/app/src/components/HashtagTrendings/index.jsx
index 8e52aab1..6d22f9f2 100755
--- a/packages/app/src/components/HashtagTrendings/index.jsx
+++ b/packages/app/src/components/HashtagTrendings/index.jsx
@@ -1,10 +1,29 @@
 import React from "react"
+import { Icons } from "components/Icons"
 
 import "./index.less"
 
-// TODO: Implement this component
-export default (props) => {
-    return <div className="hashtagTrendings">
+const TrendingItem = (props) => {
+    return <div
+        key={props.index}
+        className="trendingItem"
+    >
 
     </div>
+}
+
+// TODO: Implement this component
+export default (props) => {
+    const [trendings, setTrendings] = React.useState([])
+
+    return <div className="hashtagTrendings">
+        {
+            trendings.map((trending, index) => {
+                return <TrendingItem
+                    index={index}
+                    data={trending}
+                />
+            })
+        }
+    </div>
 }
\ No newline at end of file
diff --git a/packages/app/src/components/HashtagTrendings/index.less b/packages/app/src/components/HashtagTrendings/index.less
index 4e3537e6..940480d6 100755
--- a/packages/app/src/components/HashtagTrendings/index.less
+++ b/packages/app/src/components/HashtagTrendings/index.less
@@ -1,3 +1,19 @@
 .hashtagTrendings {
     display: flex;
+    flex-direction: column;
+
+    color: var(--text-color);
+
+    .empty {
+        display: flex;
+        flex-direction: column;
+
+        align-items: center;
+        justify-content: center;
+
+        width: 100%;
+        height: 100%;
+
+        font-size: 1rem;
+    }
 }
\ No newline at end of file