diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
index 4e619fd..c3f6b16 100644
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -251,7 +251,7 @@ export function DashboardPage() {
                   <Volume2 className="h-5 w-5 text-white" />
                 </div>
                 <h2 className={`text-xl font-semibold bg-gradient-to-r ${colors.sounds.textGradient} bg-clip-text text-transparent`}>
-                  Played Sounds
+                  Sounds
                 </h2>
               </div>
 
@@ -262,8 +262,8 @@ export function DashboardPage() {
                       key={sound.id}
                       className={`flex items-center justify-between p-3 bg-gradient-to-r ${colors.sounds.itemBg} border ${colors.sounds.itemBorder} rounded-lg ${colors.sounds.itemHover} transition-colors`}
                     >
-                      <div className="flex items-center space-x-3">
-                        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white ${
+                      <div className="flex items-center space-x-3 min-w-0 flex-1">
+                        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white shrink-0 ${
                           index === 0 ? 'bg-gradient-to-br from-yellow-400 to-yellow-500' :
                           index === 1 ? 'bg-gradient-to-br from-gray-400 to-gray-500' :
                           index === 2 ? 'bg-gradient-to-br from-orange-400 to-orange-500' :
@@ -271,9 +271,9 @@ export function DashboardPage() {
                         }`}>
                           {index + 1}
                         </div>
-                        <div>
-                          <div className="font-medium">{sound.name}</div>
-                          <div className="text-sm text-muted-foreground">
+                        <div className="min-w-0 flex-1">
+                          <div className="font-medium truncate">{sound.name}</div>
+                          <div className="text-sm text-muted-foreground truncate">
                             {sound.filename}
                           </div>
                         </div>
@@ -301,7 +301,7 @@ export function DashboardPage() {
                   <Music className="h-5 w-5 text-white" />
                 </div>
                 <h2 className={`text-xl font-semibold bg-gradient-to-r ${colors.tracks.textGradient} bg-clip-text text-transparent`}>
-                  Played Tracks
+                  Tracks
                 </h2>
               </div>
 
@@ -312,8 +312,8 @@ export function DashboardPage() {
                       key={track.id}
                       className={`flex items-center justify-between p-3 bg-gradient-to-r ${colors.tracks.itemBg} border ${colors.tracks.itemBorder} rounded-lg ${colors.tracks.itemHover} transition-colors`}
                     >
-                      <div className="flex items-center space-x-3">
-                        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white ${
+                      <div className="flex items-center space-x-3 min-w-0 flex-1">
+                        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white shrink-0 ${
                           index === 0 ? 'bg-gradient-to-br from-yellow-400 to-yellow-500' :
                           index === 1 ? 'bg-gradient-to-br from-gray-400 to-gray-500' :
                           index === 2 ? 'bg-gradient-to-br from-orange-400 to-orange-500' :
@@ -321,9 +321,9 @@ export function DashboardPage() {
                         }`}>
                           {index + 1}
                         </div>
-                        <div>
-                          <div className="font-medium">{track.name}</div>
-                          <div className="text-sm text-muted-foreground">
+                        <div className="min-w-0 flex-1">
+                          <div className="font-medium truncate">{track.name}</div>
+                          <div className="text-sm text-muted-foreground truncate">
                             {track.filename}
                           </div>
                         </div>
@@ -351,7 +351,7 @@ export function DashboardPage() {
                   <Users className="h-5 w-5 text-white" />
                 </div>
                 <h2 className={`text-xl font-semibold bg-gradient-to-r ${colors.playlists.textGradient} bg-clip-text text-transparent`}>
-                  Top Users
+                  Users
                 </h2>
               </div>
 
@@ -362,8 +362,8 @@ export function DashboardPage() {
                       key={user.id}
                       className={`flex items-center justify-between p-3 bg-gradient-to-r ${colors.playlists.itemBg} border ${colors.playlists.itemBorder} rounded-lg ${colors.playlists.itemHover} transition-colors`}
                     >
-                      <div className="flex items-center space-x-3">
-                        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white ${
+                      <div className="flex items-center space-x-3 min-w-0 flex-1">
+                        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white shrink-0 ${
                           index === 0 ? 'bg-gradient-to-br from-yellow-400 to-yellow-500' :
                           index === 1 ? 'bg-gradient-to-br from-gray-400 to-gray-500' :
                           index === 2 ? 'bg-gradient-to-br from-orange-400 to-orange-500' :
@@ -371,17 +371,17 @@ export function DashboardPage() {
                         }`}>
                           {index + 1}
                         </div>
-                        <div className="flex items-center space-x-2">
+                        <div className="flex items-center space-x-2 min-w-0 flex-1">
                           {user.picture && (
                             <img
                               src={user.picture}
                               alt={user.name}
-                              className="w-8 h-8 rounded-full border-2 border-white shadow-sm"
+                              className="w-8 h-8 rounded-full border-2 border-white shadow-sm shrink-0"
                             />
                           )}
-                          <div>
-                            <div className="font-medium">{user.name}</div>
-                            <div className="text-sm text-muted-foreground">
+                          <div className="min-w-0 flex-1">
+                            <div className="font-medium truncate">{user.name}</div>
+                            <div className="text-sm text-muted-foreground truncate">
                               {user.email}
                             </div>
                           </div>
diff --git a/src/pages/SoundboardPage.tsx b/src/pages/SoundboardPage.tsx
index 5fc898a..29ac87e 100644
--- a/src/pages/SoundboardPage.tsx
+++ b/src/pages/SoundboardPage.tsx
@@ -269,7 +269,7 @@ export function SoundboardPage() {
         </div>
       </div>
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5">
         {filteredSounds.map((sound, idx) => (
           <SoundCard
             key={sound.id}