diff --git a/Front-End/next.config.mjs b/Front-End/next.config.mjs
index 095c420..cc678bb 100644
--- a/Front-End/next.config.mjs
+++ b/Front-End/next.config.mjs
@@ -5,6 +5,9 @@ const pkg = require('./package.json');
 
 const withNextIntl = createNextIntlPlugin();
 
+const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080';
+const apiUrlObj = new URL(apiUrl);
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'standalone',
@@ -19,9 +22,9 @@ const nextConfig = {
         hostname: 'www.gravatar.com',
       },
       {
-        protocol: 'http',
-        hostname: 'localhost',
-        port: '8080',
+        protocol: apiUrlObj.protocol.replace(':', ''),
+        hostname: apiUrlObj.hostname,
+        ...(apiUrlObj.port ? { port: apiUrlObj.port } : {}),
       },
     ],
   },
diff --git a/Front-End/src/components/ProfileSelector.js b/Front-End/src/components/ProfileSelector.js
index 761368a..25fde35 100644
--- a/Front-End/src/components/ProfileSelector.js
+++ b/Front-End/src/components/ProfileSelector.js
@@ -128,22 +128,20 @@ const ProfileSelector = ({ onRoleChange, className = '' }) => {
             </div>
             <div className="flex-1 min-w-0">
               <div
-                className="font-bold text-left truncate max-w-full text-sm"
+                className="font-semibold text-base text-gray-900 text-left truncate max-w-full"
                 title={user?.email}
               >
                 {user?.email}
               </div>
               <div
-                className="text-sm text-gray-500 text-left truncate max-w-full"
-                title={`${getRightStr(selectedEstablishment?.role_type) || ''}${selectedEstablishment?.name ? ', ' + selectedEstablishment.name : ''}`}
+                className="font-semibold text-base text-emerald-700 text-left truncate max-w-full"
+                title={selectedEstablishment?.name || ''}
               >
-                {selectedEstablishment?.name
-                  ? `${selectedEstablishment.name}`
-                  : ''}
+                {selectedEstablishment?.name || ''}
               </div>
               <div
-                className="italic text-sm text-gray-500 text-left truncate max-w-full"
-                title={`${getRightStr(selectedEstablishment?.role_type) || ''}${selectedEstablishment?.name ? ', ' + selectedEstablishment.name : ''}`}
+                className="italic text-sm text-emerald-600 text-left truncate max-w-full"
+                title={getRightStr(selectedEstablishment?.role_type) || ''}
               >
                 {getRightStr(selectedEstablishment?.role_type) || ''}
               </div>
@@ -167,12 +165,17 @@ const ProfileSelector = ({ onRoleChange, className = '' }) => {
                 ...establishments.map((establishment) => ({
                   type: 'item',
                   label: (
-                    <div className="text-left">
-                      <div className="font-bold">
-                        {getRightStr(establishment.role_type)}
-                      </div>
-                      <div className="text-sm text-gray-500">
-                        {establishment.name}
+                    <div className="flex items-center text-left">
+                      <Image
+                        src={establishment.logo ? `${BASE_URL}${establishment.logo}` : getGravatarUrl(user?.email)}
+                        alt="Profile"
+                        className="w-8 h-8 rounded-full object-cover shadow-md mr-3"
+                        width={32}
+                        height={32}
+                      />
+                      <div>
+                        <div className="font-bold ext-sm text-gray-500">{establishment.name}</div>
+                        <div className="italic text-sm text-gray-500">{getRightStr(establishment.role_type)}</div>
                       </div>
                     </div>
                   ),