src/App.tsx

@@ -38,7 +38,7 @@ export function App() {
           <Popular />
           {/* Bottom Section __________*/}
 
-          <div id="bottom" className="flex-1 rounded-xl flex flex-row gap-4 ">
+          <div id="bottom" className="flex-1 rounded-xl flex flex-row gap-4 min-h-0">
             <LocalRadio />
             <RecommendedRadio />
           </div>

src/components/local_radio/index.tsx

@@ -1,7 +1,90 @@
 export function LocalRadio() {
   return (
-    <div id="bottom-l" className="font-bold p-2 bg-white flex-1 rounded-xl shadow-md">
+    <div id="bottom-l" className="flex flex-col min-h-0 overflow-y-hidden font-bold p-2 bg-white flex-1 rounded-xl shadow-md gap-2">
-      <h2>Local Radio</h2>
+      <h2 >Local Radio</h2>
+
+      <div className="flex flex-col gap-4 overflow-y-scroll h-full">
+        {dummyData.map(x => (
+          <div className="flex flex-row min-w-[100px] gap-2 items-center">
+            <img src={x.image} width={50} className="rounded-xl" />
+            <h3 className="text-xl text-gray-500">{x.title}</h3>
+          </div>
+        ))}
+      </div>
     </div>
   )
 }
+
+const dummyData = [
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  }
+]
+

src/components/music_player/index.tsx

@@ -1,6 +1,6 @@
 export function MusicPlayer() {
   return (
-    <div className="flex justify-between p-2 bg-gray-300 flex-[0.5] rounded-xl max-h-[100px] gap-2 items-center">
+    <div className="flex justify-between p-2 bg-gray-300 flex-[0.5] rounded-xl max-h-[100px] gap-2 items-center pb-5">
       <div className="flex gap-2 items-center flex-[0.5]">
         <img
           width={50}

src/components/recommended_radio/index.tsx

@@ -1,7 +1,65 @@
 export function RecommendedRadio() {
   return (
-    <div id="bottom-r" className="font-bold p-2 bg-white flex-1 rounded-xl  shadow-md">
+    <div id="bottom-r" className="flex-col flex font-bold p-2 bg-white flex-1 rounded-xl  shadow-md gap-2">
       <h2>Recommended For You</h2>
+
+      <div className="flex flex-col gap-4 overflow-y-scroll h-full">
+        {dummyData.map(x => (
+          <div className="flex flex-row min-w-[100px] items-center gap-2">
+            <img src={x.image} width={50} className="rounded-xl" />
+            <h3 className="text-xl text-gray-500">{x.title}</h3>
+          </div>
+        ))}
+      </div>
     </div>
   )
 }
+
+const dummyData = [
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+]
+