diff --git a/src/app/app.component.html b/src/app/app.component.html
index 5b890e2..4e747af 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,13 @@
-<div class="container mt-4">
+<div class="container">
+  <h1>Bienvenue sur Course Management</h1>
+  <nav>
+    <ul>
+      <li><a routerLink="/cours">Liste des cours</a></li>
+      <li><a routerLink="/groups">Liste des groupes</a></li>
+      <li><a routerLink="/users">Liste des utilisateurs</a></li>
+      <li><a routerLink="/cours/create">Ajouter un cours</a></li>
+      <li><a routerLink="/groups/create">Créer un groupe</a></li>
+    </ul>
+  </nav>
   <router-outlet></router-outlet>
 </div>
\ No newline at end of file
diff --git a/src/app/components/cours/cours-list/cours-list.component.html b/src/app/components/cours/cours-list/cours-list.component.html
index 3a5a020..18b2b7a 100644
--- a/src/app/components/cours/cours-list/cours-list.component.html
+++ b/src/app/components/cours/cours-list/cours-list.component.html
@@ -1,5 +1,5 @@
 <h2>Liste des cours</h2>
-<a routerLink="/cours/new">Ajouter un cours</a>
+<a routerLink="/cours/create">Ajouter un cours</a>
 <ul>
     <li *ngFor="let cours of coursList">
         <a [routerLink]="['/cours', cours.id]">{{ cours.name }}</a>
diff --git a/src/styles.css b/src/styles.css
index 7e7239a..d844d90 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,4 +1,103 @@
-/* You can add global styles to this file, and also import other style files */
+/* Reset and base styles */
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: 'Segoe UI', Roboto, "Helvetica Neue", Arial, sans-serif;
+  background: #f7f8fa;
+  color: #222;
+}
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+a {
+  color: #1976d2;
+  text-decoration: none;
+  transition: color 0.2s;
+}
+a:hover {
+  color: #0d47a1;
+  text-decoration: underline;
+}
+
+h1, h2, h3, h4 {
+  font-weight: 600;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+h1 { font-size: 2.2em; }
+h2 { font-size: 1.7em; }
+h3 { font-size: 1.3em; }
+h4 { font-size: 1.1em; }
+
+ul, ol {
+  padding-left: 1.5em;
+}
+
+button, input[type="submit"], input[type="button"] {
+  background: #1976d2;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 0.5em 1.2em;
+  font-size: 1em;
+  cursor: pointer;
+  margin: 0.2em 0.2em 0.2em 0;
+  transition: background 0.2s;
+}
+button:hover, input[type="submit"]:hover, input[type="button"]:hover {
+  background: #1565c0;
+}
+
+input, textarea, select {
+  font-size: 1em;
+  padding: 0.4em 0.6em;
+  border: 1px solid #bdbdbd;
+  border-radius: 4px;
+  margin-bottom: 0.8em;
+  outline: none;
+  transition: border 0.2s;
+  background: #fff;
+}
+input:focus, textarea:focus, select:focus {
+  border-color: #1976d2;
+}
+
+form {
+  background: #fff;
+  padding: 2em 2em 1em 2em;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
+  max-width: 500px;
+  margin: 2em auto;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.3em;
+  font-weight: 500;
+}
+
+ul {
+  list-style: disc inside;
+  margin-bottom: 1em;
+}
+
+.container {
+  max-width: 900px;
+  margin: 2em auto;
+  padding: 1em;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+}
+
+@media (max-width: 600px) {
+  form, .container {
+    padding: 1em;
+    margin: 1em;
+  }
+  h1, h2, h3, h4 {
+    margin-top: 1em;
+    margin-bottom: 0.5em;
+  }
+}