diff --git a/frontend/src/assets/logoLinked1.png b/frontend/src/assets/logoLinked1.png
new file mode 100755
index 0000000..523192d
Binary files /dev/null and b/frontend/src/assets/logoLinked1.png differ
diff --git a/frontend/src/assets/logoLinkedCorpTxt.png b/frontend/src/assets/logoLinkedCorpTxt.png
new file mode 100755
index 0000000..0872d32
Binary files /dev/null and b/frontend/src/assets/logoLinkedCorpTxt.png differ
diff --git a/frontend/src/assets/logoLinkedCorpTxtBlack.png b/frontend/src/assets/logoLinkedCorpTxtBlack.png
new file mode 100755
index 0000000..fd48f19
Binary files /dev/null and b/frontend/src/assets/logoLinkedCorpTxtBlack.png differ
diff --git a/frontend/src/components/NavigationView.jsx b/frontend/src/components/NavigationView.jsx
index 6c8b058..adba93a 100644
--- a/frontend/src/components/NavigationView.jsx
+++ b/frontend/src/components/NavigationView.jsx
@@ -1,6 +1,9 @@
 import { NavLink } from 'react-router-dom';
 import { LayoutDashboard, FolderKanban, Building2, Settings } from 'lucide-react';
 import { useUi } from '../context/ui-context.jsx';
+import logoDark from '../assets/logoLinkedCorpTxt.png';
+import logoLight from '../assets/logoLinkedCorpTxtBlack.png';
+import logoIcon from '../assets/logoLinked1.png';
 
 const ITEMS = [
   { to: '/', icon: LayoutDashboard, labelKey: 'nav_dashboard', end: true },
@@ -10,12 +13,16 @@ const ITEMS = [
 ];
 
 export function NavigationView({ mode }) {
-  const { t } = useUi();
+  const { t, theme } = useUi();
+  const compact = mode === 'compact';
   return (
     <nav className={`nav-view ${mode}`}>
       <div className="nav-header">
-        <div className="nav-logo">LC</div>
-        {mode !== 'compact' && <div className="nav-title">{t('appName')}</div>}
+        {compact ? (
+          <img src={logoIcon} alt={t('appName')} className="nav-logo-icon" />
+        ) : (
+          <img src={theme === 'light' ? logoLight : logoDark} alt={t('appName')} className="nav-logo-full" />
+        )}
       </div>
       <div className="nav-items">
         {ITEMS.map((item) => (
diff --git a/frontend/src/pages/Login/LoginPage.jsx b/frontend/src/pages/Login/LoginPage.jsx
index ac0e7b5..d90cad7 100644
--- a/frontend/src/pages/Login/LoginPage.jsx
+++ b/frontend/src/pages/Login/LoginPage.jsx
@@ -5,10 +5,12 @@ import { useAuth } from '../../context/auth-context.jsx';
 import { useUi } from '../../context/ui-context.jsx';
 import { Field } from '../../components/Field.jsx';
 import { Button } from '../../components/Button.jsx';
+import logoDark from '../../assets/logoLinkedCorpTxt.png';
+import logoLight from '../../assets/logoLinkedCorpTxtBlack.png';
 
 export default function LoginPage() {
   const { login } = useAuth();
-  const { t } = useUi();
+  const { t, theme } = useUi();
   const navigate = useNavigate();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
@@ -33,9 +35,9 @@ export default function LoginPage() {
     <div className="login-shell">
       <form className="login-card" onSubmit={handleSubmit}>
         <div className="login-logo">
-          <div className="nav-logo">LC</div>
-          <div className="login-title">{t('login_title')}</div>
+          <img src={theme === 'light' ? logoLight : logoDark} alt={t('appName')} className="login-logo-img" />
         </div>
+        <div className="login-title">{t('login_title')}</div>
         {error && <div className="login-error">{error}</div>}
         <Field label={t('login_email')}>
           <input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required autoFocus />
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css
index eec02f5..446231c 100644
--- a/frontend/src/styles/app.css
+++ b/frontend/src/styles/app.css
@@ -52,13 +52,8 @@ button { font-family: inherit; }
   padding: 14px 12px; border-bottom: 1px solid rgb(var(--line));
   min-height: 56px;
 }
-.nav-logo {
-  width: 28px; height: 28px; border-radius: var(--r-sm);
-  background: rgb(var(--accent)); color: #fff;
-  display: flex; align-items: center; justify-content: center;
-  font-weight: 700; font-size: .8rem; flex: none;
-}
-.nav-title { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; }
+.nav-logo-icon { width: 28px; height: 28px; flex: none; object-fit: contain; }
+.nav-logo-full { height: 26px; width: auto; max-width: 100%; object-fit: contain; }
 .nav-items { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
 .nav-item {
   display: flex; align-items: center; gap: 12px;
@@ -258,8 +253,9 @@ table.list-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
 /* --- Login --- */
 .login-shell { height: 100vh; display: flex; align-items: center; justify-content: center; background: rgb(var(--canvas)); }
 .login-card { width: 340px; max-width: 92vw; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--r-lg); padding: 28px; }
-.login-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
-.login-title { font-size: 1.1rem; font-weight: 700; }
+.login-logo { display: flex; align-items: center; margin-bottom: 16px; }
+.login-logo-img { height: 40px; width: auto; }
+.login-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 16px; }
 .login-error { color: rgb(var(--danger)); font-size: .78rem; margin-bottom: 10px; }
 
 /* --- DetailPopup (ver DetailPopup.jsx) ---