diff --git a/junior/app/components/login-information.gjs b/junior/app/components/login-information.gjs
deleted file mode 100644
index ddde6068b3a..00000000000
--- a/junior/app/components/login-information.gjs
+++ /dev/null
@@ -1,30 +0,0 @@
-import Component from "@glimmer/component";
-import { t } from 'ember-intl';
-import PixButton from "@1024pix/pix-ui/components/pix-button";
-import { action } from "@ember/object";
-import { service} from "@ember/service";
-
-export default class LoginInformation extends Component {
-  @service router;
-  @service currentLearner;
-
-  @action
-  disconnect() {
-    this.router.transitionTo(this.currentLearner.learner.schoolUrl);
-  }
-
-<template>
-    <div class="login-container">
-      {{log this.args.learner}}
-      {{log this.currentLearner}}
-      <p>
-        {{t "components.login-information.connected-user"}}
-        <strong>{{this.args.learner.firstName}}</strong>
-      </p>
-      <PixButton @variant="tertiary" @iconBefore="logout" @triggerAction={{this.disconnect}}  >
-        {{t "components.login-information.button-label"}}
-
-      </PixButton>
-    </div>
-  </template>
-}
diff --git a/junior/app/components/login.gjs b/junior/app/components/login.gjs
new file mode 100644
index 00000000000..e2fecc7ed25
--- /dev/null
+++ b/junior/app/components/login.gjs
@@ -0,0 +1,32 @@
+import PixButton from '@1024pix/pix-ui/components/pix-button';
+import PixIcon from '@1024pix/pix-ui/components/pix-icon';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { t } from 'ember-intl';
+
+export default class Login extends Component {
+  @service router;
+  @service currentLearner;
+
+  get currentUserDisplayName() {
+    return this.currentLearner.learner.displayName;
+  }
+
+  @action
+  disconnect() {
+    this.router.transitionTo(this.currentLearner.learner.schoolUrl);
+  }
+
+  <template>
+    <div class="login">
+      <div class="login__informations">
+        <p>{{this.currentUserDisplayName}}</p>
+        <PixButton @variant="tertiary" @iconBefore="logout" @triggerAction={{this.disconnect}}>
+          {{t "components.login.logout-button"}}
+        </PixButton>
+      </div>
+      <PixIcon class="login__icon" @name="userCircle" />
+    </div>
+  </template>
+}
diff --git a/junior/app/controllers/school/students.js b/junior/app/controllers/school/students.js
index f0860047ecd..1d0a321753c 100644
--- a/junior/app/controllers/school/students.js
+++ b/junior/app/controllers/school/students.js
@@ -14,6 +14,7 @@ export default class Students extends Controller {
   identifyUser(learner) {
     this.currentLearner.setLearner({
       id: learner.id,
+      displayName: learner.displayName,
       schoolUrl: this.model.schoolUrl,
     });
     styleToolkit.backgroundBlob.reset();
diff --git a/junior/app/routes/school/students.js b/junior/app/routes/school/students.js
index cd0564993a6..835c13c86b0 100644
--- a/junior/app/routes/school/students.js
+++ b/junior/app/routes/school/students.js
@@ -13,7 +13,6 @@ export default class StudentsRoute extends Route {
     const division = params.division;
     if (division) {
       const divisionLearners = school.organizationLearners.filter((learner) => learner.division === division);
-      console.log(divisionLearners);
       return {
         division,
         organizationLearners: divisionLearners,
diff --git a/junior/app/styles/app.scss b/junior/app/styles/app.scss
index a8ce7e1ec32..cdbe0cbf2b3 100644
--- a/junior/app/styles/app.scss
+++ b/junior/app/styles/app.scss
@@ -22,6 +22,7 @@
 @import 'components/bubble';
 @import 'components/footer';
 @import 'components/issue';
+@import 'components/login';
 @import 'components/oralization-button';
 @import 'components/robot-dialog';
 
diff --git a/junior/app/styles/components/login.scss b/junior/app/styles/components/login.scss
new file mode 100644
index 00000000000..7e455dd93fb
--- /dev/null
+++ b/junior/app/styles/components/login.scss
@@ -0,0 +1,30 @@
+.login {
+  align-items: center;
+  display: flex;
+  gap: var(--pix-spacing-3x);
+  font-weight: var(--font-medium);
+
+  &__informations {
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+
+    button {
+      padding: 0;
+    }
+
+    p {
+      font-weight: var(--pix-font-bold);
+      white-space: nowrap;
+    }
+  }
+
+  &__icon {
+    background-color: var(--pix-primary-300);
+    border-radius: 50%;
+    fill: var(--pix-neutral-0);
+    padding: var(--pix-spacing-1x);
+    height: 40px;
+    width: 40px;
+  }
+}
diff --git a/junior/app/styles/pages/identified/missions/list.scss b/junior/app/styles/pages/identified/missions/list.scss
index 5da7aa2468b..aa32c2a2c0e 100644
--- a/junior/app/styles/pages/identified/missions/list.scss
+++ b/junior/app/styles/pages/identified/missions/list.scss
@@ -38,4 +38,5 @@
 .header_container {
   display: flex;
   justify-content: space-between;
+  align-items: flex-start;
 }
diff --git a/junior/app/templates/identified/missions/list.hbs b/junior/app/templates/identified/missions/list.hbs
index 66a95765ad6..5a90e7f3896 100644
--- a/junior/app/templates/identified/missions/list.hbs
+++ b/junior/app/templates/identified/missions/list.hbs
@@ -12,7 +12,7 @@
       />
     </RobotDialog>
 
-    <LoginInformation @learner={{this.model.organizationLearner}} />
+    <Login />
   </div>
   <div class="cards">
     {{#each this.orderedMissionList as |mission|}}
diff --git a/junior/translations/fr.json b/junior/translations/fr.json
index 6ccbcbfe87c..5b6983503d2 100644
--- a/junior/translations/fr.json
+++ b/junior/translations/fr.json
@@ -12,9 +12,8 @@
       "play": "J'écoute",
       "stop": "Stop"
     },
-    "login-information": {
-      "connected-user" : "Elève connecté : ",
-      "button-label": "Déconnection"
+    "login": {
+      "logout-button": "Se déconnecter"
     }
   },
   "navigation": {