From e13904089e7760038cba213c5a7a83378cc3a223 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sun, 1 Mar 2026 09:09:53 +0000
Subject: [PATCH] Published your App

Replit-Commit-Author: Deployment
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 46f7bc93-07c1-48fc-a413-9b05c81bab1a
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/ls5p9ni
Replit-Commit-Deployment-Build-Id: 88e04301-4973-463b-9812-522f76c73f04
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/home.tsx | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 318c4a5..0ca005b 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -308,7 +308,7 @@ function TopStoriesList({ articles }: { articles: Article[] }) {
     <div className="bg-card rounded-lg border border-card-border p-3 h-full flex flex-col" data-testid="sidebar-top-stories">
       <h3 className="font-bold text-card-foreground text-xs mb-2 flex items-center gap-2">
         <span className="w-1 h-3.5 bg-primary rounded-full" />
-        Top-Storys
+        Musiknachrichten
       </h3>
       <div className="space-y-0">
         {articles.slice(0, 10).map((article) => (
@@ -560,15 +560,21 @@ export default function Home() {
       <Header />
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 space-y-4">
 
-        <FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} />
-
-        {widePickedArticles.length > 0 && (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-            {widePickedArticles.map((a) => (
-              <WideCard key={`wide-top-${a.id}`} article={a} focalPoints={focalPoints} />
-            ))}
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
+          <div className="lg:col-span-3 space-y-4">
+            <FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} />
+            {widePickedArticles.length > 0 && (
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                {widePickedArticles.map((a) => (
+                  <WideCard key={`wide-top-${a.id}`} article={a} focalPoints={focalPoints} />
+                ))}
+              </div>
+            )}
           </div>
-        )}
+          <div className="lg:col-span-1">
+            {popular && popular.length > 0 && <TopStoriesList articles={popular} />}
+          </div>
+        </div>
 
         {gridRows.map((row, ri) => (
           <div key={ri} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">