diff --git a/app/Http/Controllers/GalleryController.php b/app/Http/Controllers/GalleryController.php
index 003c17a..4d9472c 100644
--- a/app/Http/Controllers/GalleryController.php
+++ b/app/Http/Controllers/GalleryController.php
@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Song;
 use Illuminate\Http\Request;
 use Inertia\Inertia;
 
@@ -9,6 +10,8 @@ class GalleryController extends Controller
 {
     public function index()
     {
-        return Inertia::render('Gallery');
+        return Inertia::render('Gallery', [
+         'songs' => Song::all(),
+        ]);
     }
 }
diff --git a/resources/js/Pages/Gallery.tsx b/resources/js/Pages/Gallery.tsx
index 561a5f2..8dc9d05 100644
--- a/resources/js/Pages/Gallery.tsx
+++ b/resources/js/Pages/Gallery.tsx
@@ -4,31 +4,10 @@ import PrimaryButton from '@/Components/PrimaryButton';
 import Reproductor from '@/Components/Reproductor';
 import SecondaryButton from '@/Components/SecondaryButton';
 import Authenticated from '@/Layouts/AuthenticatedLayout';
+import { Cancion } from '@/types/types';
 import { useState } from 'react';
 
-export default function Gallery() {
-  const songs = [
-    {
-      id: 1,
-      title: 'Song 1',
-      artist: 'Artist 1',
-      coverArt:
-        'https://duckduckgo.com/?q=Metallica%20American%20heavy%20metal%20band&ia=images&iax=images',
-    },
-    {
-      id: 2,
-      title: 'Song 2',
-      artist: 'Artist 2',
-      coverArt: '/images/song2.jpg',
-    },
-    {
-      id: 3,
-      title: 'Song 3',
-      artist: 'Artist 3',
-      coverArt: '/images/song3.jpg',
-    },
-  ];
-
+export default function Gallery({ songs }: { songs: Cancion[] }) {
   const [progress, setProgress] = useState(0);
   const [isPlaying, setIsPlaying] = useState(false);
   const [cancionSeleccionada, setCancion] = useState({ title: '' });
@@ -40,16 +19,16 @@ export default function Gallery() {
         </h2>
       }
     >
-      <div className="py-12">
+      <div className="p-2">
         <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
-          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          <div className="grid max-h-[calc(100vh-250px)] grid-cols-1 gap-6 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3">
             {songs.map((song) => (
               <div
                 key={song.id}
                 className="overflow-hidden rounded-lg bg-white shadow-lg dark:bg-gray-800"
               >
                 <img
-                  src={song.coverArt}
+                  src={song.cover}
                   alt={song.title}
                   className="h-48 w-full object-cover"
                 />
@@ -75,6 +54,7 @@ export default function Gallery() {
         </div>
         <Reproductor />
       </div>
+      c
     </Authenticated>
   );
 }
diff --git a/resources/js/Pages/Songs/Index.tsx b/resources/js/Pages/Songs/Index.tsx
index 71648ab..4aa4212 100644
--- a/resources/js/Pages/Songs/Index.tsx
+++ b/resources/js/Pages/Songs/Index.tsx
@@ -80,8 +80,8 @@ export default function Index({ songs }: { songs: Cancion[] }) {
             <kbd className="rounded-md border bg-teal-950">k</kbd>
           </p>
         ) : (
-          <div className="flex justify-center overflow-x-auto">
-            <table className="table-auto">
+          <div className="mx-4 flex w-full justify-center overflow-x-scroll">
+            <table className="mx-auto mt-2 table w-full">
               <thead>
                 <tr className="border-b bg-gray-50 text-center text-sm font-semibold uppercase tracking-wider text-gray-700 dark:bg-gray-700 dark:text-gray-400">
                   <th className="px-6 py-3">Nombre</th>