diff --git a/src/index.css b/src/index.css
index b5c42c9..330a0bc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,18 +1,26 @@
-/* Minimal styling for layout and cards */
-:root{--max-width:900px;--card-bg:#fff;--muted:#6b7280}
+/* Updated styling for three-column rounded feed */
+:root{--max-width:1100px;--card-bg:#fff;--muted:#6b7280}
 *{box-sizing:border-box}
-body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;line-height:1.4;margin:0;background:#f3f4f6;color:#111}
-.app main{padding:1rem}
+body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;line-height:1.4;margin:0;background:linear-gradient(135deg,#f7f6ff 0%,#f0fbff 100%);color:#111;padding:24px}
+.feed-shell{min-height:100vh;padding:20px}
 .container{max-width:var(--max-width);margin:0 auto}
-.card{background:var(--card-bg);border:1px solid #e5e7eb;border-radius:8px;padding:12px;margin-bottom:12px}
-.flex{display:flex}
-.center{display:flex;align-items:center;justify-content:center}
-.tag{background:#eef2ff;color:#1e40af;padding:4px 8px;border-radius:999px;font-size:12px;margin-right:6px}
+.main-card{background:var(--card-bg);border-radius:20px;padding:18px;box-shadow:0 10px 30px rgba(16,24,40,0.08);border:1px solid rgba(0,0,0,0.04)}
+.left-nav{width:200px}
+.left-nav .logo{background:#111;color:#fff;padding:10px;border-radius:10px;font-weight:700;text-align:center}
+.left-nav ul{list-style:none;padding:12px 0;margin:0}
+.left-nav .nav-item{padding:10px 12px;border-radius:8px;margin-bottom:6px;cursor:pointer;color:#0f172a}
+.left-nav .nav-item.active{background:#eef2ff;color:#1e40af}
+.right-column{width:260px}
+.card{background:var(--card-bg);border:1px solid #eaeef2;border-radius:12px;padding:12px;margin-bottom:12px}
+.post-card{border-radius:14px;padding:14px}
+.post-thumbs .thumb{width:120px;height:84px;background:linear-gradient(180deg,#f8fafc,#eef2ff);border-radius:10px}
+.avatar{width:56px;height:56px;border-radius:999px;background:#e6f0ff;color:#1e40af;display:flex;align-items:center;justify-content:center;font-weight:600}
+.tag{background:#eef2ff;color:#1e40af;padding:6px 10px;border-radius:999px;font-size:12px;margin-right:6px}
 .button{background:#2563eb;color:#fff;border:none;padding:8px 12px;border-radius:6px;cursor:pointer}
 .small{font-size:13px;color:var(--muted)}
 .sidebar{width:300px}
-.nav{background:#fff;border-bottom:1px solid #e5e7eb;padding:10px}
-.nav a{margin-right:12px;color:#111;text-decoration:none}
 .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center}
-.modal{background:#fff;border-radius:8px;padding:16px;width:min(600px,95%)}
+.modal{background:#fff;border-radius:8px;padding:16px;width:min(900px,95%)}
 .textarea{width:100%;min-height:100px;padding:8px;border:1px solid #e5e7eb;border-radius:6px}
+.create-input{display:flex;flex-direction:column}
+.rec{width:64px;height:64px;border-radius:12px;background:#f8fafc;display:flex;align-items:center;justify-content:center}
diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx
index d7b28c6..dff9fa5 100644
--- a/src/routes/Home.tsx
+++ b/src/routes/Home.tsx
@@ -9,16 +9,66 @@ const Home: React.FC = () => {
   const suggestions = users.filter((u) => u.id !== currentUserId).slice(0, 3)
 
   return (
-    <div className="container" style={{display:'flex',gap:16}}>
-      <div style={{flex:1}}>
-        <Feed />
+    <div className="feed-shell">
+      <div className="container main-card" style={{display:'flex',gap:20,alignItems:'flex-start'}}>
+        <nav className="left-nav">
+          <div className="logo">RE</div>
+          <ul>
+            <li className="nav-item active">Home</li>
+            <li className="nav-item">Messages</li>
+            <li className="nav-item">Forums</li>
+            <li className="nav-item">Media</li>
+            <li className="nav-item">Settings</li>
+          </ul>
+        </nav>
+
+        <main className="main-column" style={{flex:1,maxWidth:680}}>
+          <header style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:12}}>
+            <h2>Feeds</h2>
+            <div className="small">Recent · Friends · Popular</div>
+          </header>
+
+          <Feed />
+
+          <div className="create-input card" style={{marginTop:12}}>
+            <input placeholder="Share something..." style={{width:'100%',border:'none',outline:'none'}} />
+            <div style={{display:'flex',justifyContent:'flex-end',marginTop:8}}>
+              <button className="button">Send</button>
+            </div>
+          </div>
+        </main>
+
+        <aside className="right-column">
+          <section className="card">
+            <h4>Stories</h4>
+            <div style={{display:'flex',gap:8,marginTop:8}}>
+              {suggestions.map((u)=>(
+                <div key={u.id} style={{textAlign:'center'}}>
+                  <div className="avatar">{u.name[0]}</div>
+                  <div className="small">{u.name.split(' ')[0]}</div>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <section className="card" style={{marginTop:12}}>
+            <h4>Suggestions</h4>
+            {suggestions.map((u)=>(
+              <UserCard key={u.id} user={u} />
+            ))}
+          </section>
+
+          <section className="card" style={{marginTop:12}}>
+            <h4>Recommendations</h4>
+            <div style={{display:'flex',gap:8,marginTop:8}}>
+              <div className="rec">X</div>
+              <div className="rec">Y</div>
+              <div className="rec">Z</div>
+            </div>
+          </section>
+        </aside>
+
       </div>
-      <aside className="sidebar">
-        <h3>Suggested Researchers</h3>
-        {suggestions.map((u) => (
-          <UserCard key={u.id} user={u} />
-        ))}
-      </aside>
     </div>
   )
 }