diff --git a/src/components/popular/index.tsx b/src/components/popular/index.tsx
new file mode 100644
index 0000000..d7020d9
--- /dev/null
+++ b/src/components/popular/index.tsx
@@ -0,0 +1,10 @@
+export function Popular() {
+  return (
+    <div id="middle" className="bg-gray-300 flex-[.8] rounded-xl flex flex-col max-h-[150px]">
+      <div id="middle-main" className="font-bold p-2 bg-white flex-1 rounded-xl  shadow-md">
+        <h2>Popular</h2>
+      </div>
+    </div>
+  )
+}
+