diff --git a/deadlock-plugins/deadlock-extension/src/view/gettingStartedView.ts b/deadlock-plugins/deadlock-extension/src/view/gettingStartedView.ts
index 578eb1e28ab565605890100ea586f37ceda0113a..113a197bba0dccba35227fdc9fe49b22bc7fab87 100644
--- a/deadlock-plugins/deadlock-extension/src/view/gettingStartedView.ts
+++ b/deadlock-plugins/deadlock-extension/src/view/gettingStartedView.ts
@@ -30,10 +30,18 @@ export default class GettingStartedView extends WebviewBase {
 
 	renderHtmlBody() {
 		const hadMissionWorkdir = this.extensionStore.getMissionWorkdir() !== undefined;
+		const isAlreadyConnected = false;
 
 		return `
 			<h1>Getting Started</h1>
 			<div class="deadlock-getting-started-card-container">
+
+				${this.renderCardHtml(
+					'Connexion à Deadlock',
+					"Tu as besoin d'être connecté à Deadlock pour continuer.",
+					{ name: 'Se connecter', onClickFunctionName: 'openAuthenticationPageAction' },
+					isAlreadyConnected,
+				)}
 				${this.renderCardHtml(
 					'Dossier contenant tes exercices',
 					'Choisis le dossier qui contiendra tous les exercices Deadlock que tu lanceras maintenant et plus tard.',
@@ -54,6 +62,7 @@ export default class GettingStartedView extends WebviewBase {
 		description: string,
 		button: { name: string; onClickFunctionName: string },
 		isChecked: boolean,
+		callbackArgs?: string,
 	) {
 		return `
 				<div class="deadlock-getting-started-card">
@@ -65,7 +74,7 @@ export default class GettingStartedView extends WebviewBase {
 						<div class="card-description">
 							${description}
 						</div>
-						<vscode-button onclick="${button.onClickFunctionName}()">${button.name}</vscode-button>
+						<vscode-button onclick="${button.onClickFunctionName}(${callbackArgs})">${button.name}</vscode-button>
 					</div>
 				</div>