diff --git a/src/App.jsx b/src/App.jsx
index 2ac121b..439fd48 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -537,7 +537,11 @@ export default function App() {
                 createdAt: new Date().getTime(),
             });
 
-            const shareUrl = `${window.location.origin}${window.location.pathname}?shared=${docRef.id}`;
+            // Força o uso do domínio oficial se estiver em localhost (para os links de partilha funcionarem)
+            const baseUrl = (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')
+                ? 'https://mycloset.epvc.pt'
+                : window.location.origin;
+            const shareUrl = `${baseUrl}${window.location.pathname}?shared=${docRef.id}`;
             await navigator.clipboard.writeText(shareUrl);
             setCopiedLookId(look.id);
             setTimeout(() => setCopiedLookId(null), 3000);
@@ -1210,9 +1214,17 @@ export default function App() {
 
                                 <div className="lg:col-span-2 space-y-10">
                                     {(() => {
-                                        const filteredBySectionLooks = looks.filter(look => 
-                                            activeSectionFilter === 'all' || (look.sections && look.sections.includes(activeSectionFilter))
-                                        );
+                                        const filteredBySectionLooks = looks.filter(look => {
+                                            const matchesSection = activeSectionFilter === 'all' || (look.sections && look.sections.includes(activeSectionFilter));
+                                            let matchesColor = true;
+                                            if (colorFilter) {
+                                                matchesColor = look.items.some(id => {
+                                                    const item = clothes.find(c => c.id === id);
+                                                    return item && item.color && item.color.includes(colorFilter);
+                                                });
+                                            }
+                                            return matchesSection && matchesColor;
+                                        });
 
                                         const availableLooks = filteredBySectionLooks.filter(look =>
                                             look.items.every(id => {
@@ -1279,6 +1291,18 @@ export default function App() {
                                                             </p>
                                                         </div>
                                                     )}
+                                                    {look.sections && look.sections.length > 0 && (
+                                                        <div className="flex items-center gap-1 mt-4 overflow-x-auto custom-scrollbar no-scrollbar">
+                                                            {look.sections.map(secId => {
+                                                                const sec = sections.find(s => s.id === secId);
+                                                                return sec ? (
+                                                                    <span key={sec.id} className="text-[10px] font-bold px-2 py-0.5 rounded-md bg-gray-100 dark:bg-gray-800 text-gray-500 whitespace-nowrap">
+                                                                        {sec.emoji} {sec.name}
+                                                                    </span>
+                                                                ) : null;
+                                                            })}
+                                                        </div>
+                                                    )}
                                                 </Card>
                                             );
                                         };
@@ -1287,9 +1311,22 @@ export default function App() {
                                             <>
                                                 {/* Looks disponíveis */}
                                                 <div className="space-y-6">
-                                                    <div className="flex items-center gap-3 px-2">
-                                                        <div className="w-2.5 h-2.5 rounded-full bg-green-500"></div>
-                                                        <h3 className="text-2xl font-black tracking-tighter text-inherit">{t('lookHistory')} <span className="text-sm font-bold opacity-40">— {t('availableLooks')} ({availableLooks.length})</span></h3>
+                                                    <div className="flex items-center justify-between px-2 flex-wrap gap-4">
+                                                        <div className="flex items-center gap-3">
+                                                            <div className="w-2.5 h-2.5 rounded-full bg-green-500"></div>
+                                                            <h3 className="text-2xl font-black tracking-tighter text-inherit">{t('lookHistory')} <span className="text-sm font-bold opacity-40">— {t('availableLooks')} ({availableLooks.length})</span></h3>
+                                                        </div>
+                                                        <div className="flex items-center gap-2">
+                                                            <Filter size={16} className="text-gray-400" />
+                                                            <select
+                                                                value={colorFilter}
+                                                                onChange={(e) => setColorFilter(e.target.value)}
+                                                                className={`p-2 rounded-xl border-none outline-none focus:ring-2 focus:ring-primary-500 font-bold text-xs ${darkMode ? 'bg-gray-800 text-white' : 'bg-gray-100'}`}
+                                                            >
+                                                                <option value="">{t('all') || 'Todas as cores'}</option>
+                                                                {['Vermelho', 'Azul', 'Amarelo', 'Verde', 'Laranja', 'Roxo', 'Branco', 'Preto', 'Cinzento', 'Bege'].map(c => <option key={c} value={c}>{c}</option>)}
+                                                            </select>
+                                                        </div>
                                                     </div>
                                                     {availableLooks.length > 0 ? (
                                                         <div className="grid grid-cols-1 md:grid-cols-2 gap-8">