diff --git a/src/App.jsx b/src/App.jsx
index db73cf7..6775246 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -36,7 +36,7 @@ export default function App() {
     const [searchTerm, setSearchTerm] = useState('');
     const [imageUrlDraft, setImageUrlDraft] = useState('');
     const [itemColors, setItemColors] = useState([]);
-    const [sidebarOpen, setSidebarOpen] = useState(true);
+    const [sidebarOpen, setSidebarOpen] = useState(window.innerWidth > 768);
     const [authMode, setAuthMode] = useState('login');
     const [authError, setAuthError] = useState('');
     const [showForgotPasswordModal, setShowForgotPasswordModal] = useState(false);
@@ -245,6 +245,19 @@ export default function App() {
         setItemSections(editingItem?.sections || []);
     }, [editingItem]);
 
+    // Lidar com redimensionamento de ecrã para o sidebar
+    useEffect(() => {
+        const handleResize = () => {
+            if (window.innerWidth < 768) {
+                setSidebarOpen(false);
+            } else {
+                setSidebarOpen(true);
+            }
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
     useEffect(() => {
         setLookSections(editingLook?.sections || []);
     }, [editingLook]);
@@ -1325,7 +1338,10 @@ export default function App() {
                         ].map(item => (
                             <button
                                 key={item.id}
-                                onClick={() => setView(item.id)}
+                                onClick={() => {
+                                    setView(item.id);
+                                    if (window.innerWidth < 768) setSidebarOpen(false);
+                                }}
                                 className={`w-full flex items-center gap-4 px-6 py-4 rounded-2xl transition-all font-black text-[11px] uppercase tracking-widest ${view === item.id ? 'bg-primary-600 text-white shadow-2xl shadow-primary-600/30 scale-105' : 'opacity-40 hover:opacity-100 hover:bg-primary-500/5'}`}
                             >
                                 <item.icon size={20} />
@@ -1363,16 +1379,24 @@ export default function App() {
                 </div>
             </aside>
 
+            {/* Sidebar Overlay for Mobile */}
+            {sidebarOpen && (
+                <div 
+                    className="fixed inset-0 bg-black/50 z-[90] md:hidden backdrop-blur-sm"
+                    onClick={() => setSidebarOpen(false)}
+                />
+            )}
+
             {/* Área Principal */}
             <main className="flex-1 flex flex-col h-screen overflow-hidden">
 
                 {/* Header Superior */}
-                <header className={`h-24 shrink-0 flex items-center justify-between px-8 md:px-12 transition-all border-b border-inherit ${darkMode ? 'bg-gray-950/50' : 'bg-white/50'} backdrop-blur-xl`}>
-                    <div className="flex items-center gap-6">
-                        <button onClick={() => setSidebarOpen(!sidebarOpen)} className={`p-3 rounded-2xl transition-all border ${darkMode ? 'bg-gray-800 border-gray-700' : 'bg-gray-50 border-gray-200'}`}>
-                            {sidebarOpen ? <PanelLeftClose size={24} /> : <PanelLeftOpen size={24} />}
+                <header className={`h-20 md:h-24 shrink-0 flex items-center justify-between px-4 md:px-12 transition-all border-b border-inherit ${darkMode ? 'bg-gray-950/50' : 'bg-white/50'} backdrop-blur-xl`}>
+                    <div className="flex items-center gap-3 md:gap-6">
+                        <button onClick={() => setSidebarOpen(!sidebarOpen)} className={`p-2 md:p-3 rounded-xl md:rounded-2xl transition-all border ${darkMode ? 'bg-gray-800 border-gray-700' : 'bg-gray-50 border-gray-200'}`}>
+                            {sidebarOpen ? <PanelLeftClose size={20} className="md:w-6 md:h-6" /> : <PanelLeftOpen size={20} className="md:w-6 md:h-6" />}
                         </button>
-                        <h2 className="text-3xl font-black tracking-tighter">
+                        <h2 className="text-xl md:text-3xl font-black tracking-tighter truncate max-w-[150px] md:max-w-none">
                             {view === 'dashboard' && t('overview')}
                             {view === 'closet' && t('myCloset')}
                             {view === 'wishlist' && (t('wishlist') || 'Carrinho')}
@@ -1385,28 +1409,28 @@ export default function App() {
                         </h2>
                     </div>
 
-                    <div className="flex items-center gap-4">
-                        <button onClick={() => setShowDailyOutfitModal(true)} className="p-3 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-2xl hover:scale-105 active:scale-95 transition-all">
-                            <Sparkles size={20} />
+                    <div className="flex items-center gap-2 md:gap-4">
+                        <button onClick={() => setShowDailyOutfitModal(true)} className="p-2 md:p-3 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-xl md:rounded-2xl hover:scale-105 active:scale-95 transition-all">
+                            <Sparkles size={20} className="w-5 h-5 md:w-6 md:h-6" />
                         </button>
-                        <div className="flex bg-gray-100 dark:bg-gray-800 p-1.5 rounded-2xl">
-                            <button onClick={() => handleDarkModeToggle(false)} className={`p-2 rounded-xl ${!darkMode ? 'bg-white shadow-md text-primary-600' : 'text-gray-500'}`}><Sun size={18} /></button>
-                            <button onClick={() => handleDarkModeToggle(true)} className={`p-2 rounded-xl ${darkMode ? 'bg-gray-900 shadow-md text-primary-400' : 'text-gray-500'}`}><Moon size={18} /></button>
+                        <div className="hidden sm:flex bg-gray-100 dark:bg-gray-800 p-1.5 rounded-xl md:rounded-2xl">
+                            <button onClick={() => handleDarkModeToggle(false)} className={`p-1.5 md:p-2 rounded-lg md:rounded-xl ${!darkMode ? 'bg-white shadow-md text-primary-600' : 'text-gray-500'}`}><Sun size={16} className="md:w-[18px] md:h-[18px]" /></button>
+                            <button onClick={() => handleDarkModeToggle(true)} className={`p-1.5 md:p-2 rounded-lg md:rounded-xl ${darkMode ? 'bg-gray-900 shadow-md text-primary-400' : 'text-gray-500'}`}><Moon size={16} className="md:w-[18px] md:h-[18px]" /></button>
                         </div>
-                        <button onClick={() => setShowNotificationsModal(true)} className="relative p-4 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-2xl hover:scale-105 active:scale-95 transition-all">
-                            <Bell size={24} />
+                        <button onClick={() => setShowNotificationsModal(true)} className="relative p-2 md:p-4 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-xl md:rounded-2xl hover:scale-105 active:scale-95 transition-all">
+                            <Bell size={20} className="w-5 h-5 md:w-6 md:h-6" />
                             {notifications.filter(n => !n.read).length > 0 && (
-                                <span className="absolute top-2 right-2 w-3 h-3 bg-red-500 rounded-full border-2 border-white dark:border-gray-800"></span>
+                                <span className="absolute top-1 md:top-2 right-1 md:right-2 w-2.5 h-2.5 md:w-3 md:h-3 bg-red-500 rounded-full border-2 border-white dark:border-gray-800"></span>
                             )}
                         </button>
-                        <button onClick={() => { setEditingItem(null); setImageUrlDraft(''); setView('add'); setEditingLook(null); setSelectedForLook([]); }} className="p-4 bg-primary-600 text-white rounded-2xl shadow-xl shadow-primary-600/30 hover:scale-105 active:scale-95 transition-all">
-                            <Plus size={24} />
+                        <button onClick={() => { setEditingItem(null); setImageUrlDraft(''); setView('add'); setEditingLook(null); setSelectedForLook([]); }} className="p-2 md:p-4 bg-primary-600 text-white rounded-xl md:rounded-2xl shadow-xl shadow-primary-600/30 hover:scale-105 active:scale-95 transition-all">
+                            <Plus size={20} className="w-5 h-5 md:w-6 md:h-6" />
                         </button>
                     </div>
                 </header>
 
                 {/* Conteúdo Dinâmico */}
-                <div className="flex-1 overflow-y-auto p-8 md:p-12 space-y-12">
+                <div className="flex-1 overflow-y-auto p-4 md:p-12 space-y-8 md:space-y-12">
 
                     {/* DASHBOARD */}
                     {view === 'dashboard' && (