diff --git a/src/App.jsx b/src/App.jsx
index 22103b2..c07d4a7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,15 +5,15 @@ import SentimentHistory from './components/SentimentHistory';
 
 function App() {
   return (
-    <div className="flex h-screen bg-gray-50">
+    <div className="flex flex-col md:flex-row min-h-screen bg-gray-50">
       {/* Sidebar */}
-      <aside className="w-56 bg-white shadow-md py-6 px-5">
+      <aside className="w-full md:w-56 bg-white shadow-md py-6 px-5">
         <h1 className="text-2xl font-bold text-amber-700 mb-4">Reddit Meter</h1>
         <p className="text-sm text-gray-600">Track Reddit's mood in real time.</p>
       </aside>
 
       {/* Main Content */}
-      <main className="flex-1 px-8 py-8 overflow-y-auto space-y-12">
+      <main className="flex-1 px-4 md:px-8 py-4 md:py-8 overflow-y-auto space-y-12">
         <section>
           <CurrentSentimentSummary />
         </section>