diff --git a/Project/php/assets/img/user-avatar.png b/Project/php/assets/img/user-avatar.png
new file mode 100755
index 0000000..37d5c16
Binary files /dev/null and b/Project/php/assets/img/user-avatar.png differ
diff --git a/Project/php/templates/addVocabList.html b/Project/php/templates/addVocabList.html
index 7e096be..c83366c 100755
--- a/Project/php/templates/addVocabList.html
+++ b/Project/php/templates/addVocabList.html
@@ -19,27 +19,25 @@
 </head>
 {% include 'navBar.twig' %}
 <div class="content">
-    <section>
-        <h1>Add words</h1>
+        <h1 class="text-center">Add words</h1>
         {% if userID is defined %}
-        <form action="{{base}}/teacher/{{userID}}/addVocabList" method="POST">
-            <table>
+        <form action="{{base}}/teacher/{{userID}}/addVocabList" method="POST" class="w-100">
+            <table class="w-100 d-flex flex-column align-items-center">
                 <tr>
                     <td colspan="2">
-                        <input type="text" name="listName" placeholder="list name" required>
+                        <input class="input-group-text w-100" type="text" name="listName" placeholder="list name" required>
                     </td>
                 </tr>
                 {% for i in 0..20 %}
                 <tr>
-                    <td><input type="text" name="frenchWord{{i}}" placeholder="french word"></td>
-                    <td><input type="text" name="englishWord{{i}}" placeholder="english word"></td>
+                    <td><input class="input-group-text" type="text" name="frenchWord{{i}}" placeholder="french word"></td>
+                    <td><input class="input-group-text" type="text" name="englishWord{{i}}" placeholder="english word"></td>
                 </tr>
                 {% endfor %}
-                <tr><td colspan="2"><input type="submit" value="Add"></td></tr>
+                <tr class="d-flex justify-content-center"><td colspan="2"><input class="btn btn-primary" type="submit" value="Add"></td></tr>
             </table>
         </form>
         {% endif %}
-    </section>
 </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/Project/php/templates/groupContainer.twig b/Project/php/templates/groupContainer.twig
index 80c7729..962336a 100755
--- a/Project/php/templates/groupContainer.twig
+++ b/Project/php/templates/groupContainer.twig
@@ -1,5 +1,5 @@
 <div class="container mt-5">
-    <table class="table table-bordered thead-dark">
+    <table class="table table-bordered">
         <thead>
         <tr>
             <th>ID</th>
@@ -12,7 +12,7 @@
         <tbody>
         {% if groups is defined %}
             {% for row in groups %}
-                <tr {% if selectedGroup is defined and selectedGroup == row.id %}class="table-danger"{% endif %}>
+                <tr {% if selectedGroup is defined and selectedGroup == row.id %}class="table-info"{% endif %}>
                     <td>{{ row.id }}</td>
                     <td>{{ row.num }}</td>
                     <td>{{ row.year }}</td>
@@ -20,13 +20,13 @@
                     <td>
                         {% if actions is defined %}
                             {% if 'showGroupDetails' in actions %}
-                                <a href="{{ base }}/admin/{{ userID }}/showGroupDetails?selectedGroup={{ row.id }}" class="btn btn-primary fs-6">Show</a>
+                                <a href="{{ base }}/admin/{{ userID }}/showGroupDetails?selectedGroup={{ row.id }}" class="btn btn-primary">Show</a>
                             {% endif %}
                             {% if 'removeGroup' in actions %}
-                                <a href="{{ base }}/admin/{{ userID }}/removeGroup?selectedGroup={{ row.id }}" class="btn btn-danger fs-6">Remove</a>
+                                <a href="{{ base }}/admin/{{ userID }}/removeGroup?selectedGroup={{ row.id }}" class="btn btn-danger">Remove</a>
                             {% endif %}
                             {% if 'removeVocabFromGroup' in actions %}
-                                <a href="{{ base }}/teacher/{{ userID }}/removeVocabFromGroup?vocabID={{ vocabID }}&selectedGroup={{ row.id }}" class="btn btn-warning fs-6">Remove from group</a>
+                                <a href="{{ base }}/teacher/{{ userID }}/removeVocabFromGroup?vocabID={{ vocabID }}&selectedGroup={{ row.id }}" class="btn btn-danger">Remove from group</a>
                             {% endif %}
                             {% if 'addVocabToGroup' in actions %}
                                 <a href="{{ base }}/teacher/{{ userID }}/addVocabToGroup?vocabID={{ vocabID }}&selectedGroup={{ row.id }}" class="btn btn-success">Add to group</a>
diff --git a/Project/php/templates/manageVocabListView.html b/Project/php/templates/manageVocabListView.html
index a2fcf5f..1371bb7 100755
--- a/Project/php/templates/manageVocabListView.html
+++ b/Project/php/templates/manageVocabListView.html
@@ -17,23 +17,24 @@
     <link href="{{base}}/css/styles.css" rel="stylesheet" />
     <link rel="icon" type="image/x-icon" href="{{base}}/assets/favicon.ico"/>
 </head>
-<style>
-</style>
 <body>
 {% include 'navBar.twig' %}
 <div class="content">
-    <section class="VocabularyList">
+    <div class="border my-2 py-2 border-5 border-secondary rounded-3 text-center">
         <h2>My lists</h2>
         {% include 'vocabularyContainer.twig' with {'actions' : ['affAllVocab', 'delById', 'getContent' ], 'vocabularies' : vocabularies, 'vocabID' : vocabID, 'content' : content } %}
-    </section>
-    <section>
+    </div>
+    <div class="d-flex justify-content-center">
+        <a href="{{base}}/teacher/{{userID}}/showVocabListForm" class="btn btn-primary">Add a new list</a>
+    </div>
+    <div class="border my-2 py-2 border-5 border-secondary rounded-3 text-center">
         <h2>Content</h2>
         {% if content is defined %}
-        <table>
-            <tr>
-                <td>French word</td>
-                <td>English word</td>
-            </tr>
+        <table class="table table-bordered">
+            <thead>
+                <th>French word</th>
+                <th>English word</th>
+            </thead>
             {% for trad in content %}
             <tr>
                 <td>{{trad.word1}}</td>
@@ -42,24 +43,20 @@
             {% endfor %}
         </table>
         {% endif %}
-    </section>
-    <section>
+    </div>
+    <div class="border my-2 py-2 border-5 border-secondary rounded-3 text-center">
         <h2>Groups with vocab</h2>
         {% if vocabID is defined %}
         {% include 'groupContainer.twig' with {'actions' : 'removeVocabFromGroup', groups : groupsVocab } %}
         {% endif %}
-    </section>
+    </div>
 
-    <section>
+    <div class="border my-2 py-2 border-5 border-secondary rounded-3 text-center">
         <h2>Groups without vocab</h2>
         {% if groupsNoVocab is defined and vocabID is defined %}
         {% include 'groupContainer.twig' with {'actions' : 'addVocabToGroup', groups : groupsNoVocab } %}
         {% endif %}
-    </section>
-    </section>
-        <a href="{{base}}/teacher/{{userID}}/showVocabListForm">
-            <input class="btn-black" type="button" value="add a list" />
-        </a>
+    </div>
 </div>
 </body>
 </html>
diff --git a/Project/php/templates/modifyPasswordForm.twig b/Project/php/templates/modifyPasswordForm.twig
index bfcb089..c2ed904 100755
--- a/Project/php/templates/modifyPasswordForm.twig
+++ b/Project/php/templates/modifyPasswordForm.twig
@@ -1,6 +1,6 @@
 <form action="{{base}}/{{ userRole[0] }}/{{userID}}/modifyPassword" method="POST">
-    <input type="text" name="currentPassword" placeholder="current password" required>
-    <input type="text" name="newPassword" placeholder="new password" required>
-    <input type="text" name="confirmNewPassword" placeholder="confirm new password" required>
-    <input type="submit" value="Modify your password">
+    <input class="input-group-text d-inline" type="text" name="currentPassword" placeholder="current password" required>
+    <input class="input-group-text d-inline" type="text" name="newPassword" placeholder="new password" required>
+    <input class="input-group-text d-inline" type="text" name="confirmNewPassword" placeholder="confirm new password" required>
+    <input class="btn btn-danger" type="submit" value="Modify your password">
 </form>
\ No newline at end of file
diff --git a/Project/php/templates/myAccountView.html b/Project/php/templates/myAccountView.html
index d21e341..708f4cf 100755
--- a/Project/php/templates/myAccountView.html
+++ b/Project/php/templates/myAccountView.html
@@ -17,26 +17,20 @@
     <!-- Core theme CSS (includes Bootstrap)-->
     <link href="{{base}}/css/styles.css" rel="stylesheet" />
 </head>
-<style>
-    section {
-        border: 2px solid black;
-        margin: 10px 0;
-    }
-</style>
 <body>
 {% include 'navBar.twig' %}
 <div class="content">
-    <section>
-    <h1>My account</h1>
+    <div class="border my-2 py-2 border-5 border-secondary rounded-3">
+    <h1 class="text-center">My account</h1>
     {% if user is defined %}
         <table>
-            <tr><td>Image : </td><td>{{user.image}}</td></tr>
+            <tr><td colspan="2"><img class="logo" src="{{base}}/assets/img/user-avatar.png"></td></tr>
             <tr><td>ID : </td><td>{{user.id}}</td></tr>
             <tr><td>Nickname : </td><td>{{user.nickname}}</td>
                 <td>
                     <form action="{{base}}/{{ userRole[0] }}/{{userID}}/modifyNickname" method="POST">
-                        <input name="newNickname" type="text" placeholder="new nickname" required>
-                        <input type="submit" value="Modify your nickname">
+                        <input class="input-group-text d-inline" name="newNickname" type="text" placeholder="new nickname" required>
+                        <input class="btn btn-info" type="submit" value="Modify your nickname">
                     </form>
                 </td>
             </tr>
@@ -51,11 +45,11 @@
             <tr><td>Group : </td><td>{{user.group}}</td></tr>
             <tr><td>Extra Time : </td><td>{{user.extraTime? 'yes' : 'no'}}</td></tr>
         </table>
-    </section>
-    <section>
+    </div>
+    <div class="border my-2 py-2 border-5 border-secondary rounded-3 text-center">
         <h2> Modify password</h2>
             {% include 'modifyPasswordForm.twig' %}
-    </section>
+    </div>
     {% endif %}
 </div>
 </body>
diff --git a/Project/php/templates/usersView.html b/Project/php/templates/usersView.html
index c3f01e4..f22a317 100755
--- a/Project/php/templates/usersView.html
+++ b/Project/php/templates/usersView.html
@@ -11,9 +11,9 @@
     {% include 'navBar.twig' %}
     {% if users is defined %}
     <div class="content">
-        <section>
-            <table>
-                <tr class="d-flex justify-content-center">
+        <section class="w-100">
+            <table class="w-100">
+                <tr class="d-flex flex-fill justify-content-around">
                     <td><a href="{{base}}/admin/{{userID}}/showAllUsers">
                         <input class="btn btn-info" type="button" value="Show all users"/>
                     </a></td>
diff --git a/Project/php/templates/vocabList.html b/Project/php/templates/vocabList.html
index 56df273..de13dc2 100755
--- a/Project/php/templates/vocabList.html
+++ b/Project/php/templates/vocabList.html
@@ -28,8 +28,8 @@
 {% include 'navBar.twig' %}
 {% if vocabularies is defined %}
 <div class="content">
-    <section>
-        <table>
+    <div class="border my-2 py-2 border-5 border-secondary rounded-3 text-center">
+        <table class="table table-bordered">
             {% for row in vocabularies %}
                 <tr>
                     <td>
@@ -41,7 +41,7 @@
                 </tr>
             {% endfor %}
         </table>
-    </section>
+    </div>
 </div>
 {% endif %}
 </body>
diff --git a/Project/php/templates/vocabularyContainer.twig b/Project/php/templates/vocabularyContainer.twig
index 551329b..1b926c2 100755
--- a/Project/php/templates/vocabularyContainer.twig
+++ b/Project/php/templates/vocabularyContainer.twig
@@ -1,35 +1,24 @@
-<table>
-    <tr>
-        <td>ID</td>
-        <td>Name</td>
-        <td>Image</td>
-        <td>Author</td>
-    </tr>
+<table class="table table-bordered">
+    <thead>
+        <th>ID</th>
+        <th>Name</th>
+        <th>Actions</th>
+    </thead>
 
     {% if vocabularies is defined %}
         {% for row in vocabularies %}
-            {% if vocabID is defined and vocabID == row.id %}
-                <tr style="background-color:red;">
-            {% else %}
-                <tr>
-            {% endif %}
+                <tr {% if vocabID is defined and vocabID == row.id %} class="table-info" {% endif %}>
                 <td>{{ row.id }}</td>
                 <td>{{ row.name }}</td>
-                <td>{{ row.image }}</td>
-                <td>{{ row.author }}</td>
 
-                {% if actions is defined%}
+                {% if actions is defined %}
                     <td>
                         {% if 'getContent' in actions %}
-                            <a href="{{base}}/teacher/{{userID}}/getContent?vocabID={{row.id}}">
-                                <input class="btn btn-primary" type="button" value="show content" />
-                            </a>
+                            <a href="{{base}}/teacher/{{userID}}/getContent?vocabID={{row.id}}" class="btn btn-primary">Get content</a>
                         {% endif %}
 
                         {% if 'delById' in actions %}
-                            <a id="delButton" href="{{base}}/teacher/{{userID}}/delById?vocabID={{ row.id }}">
-                                <input class="btn btn-primary" type="button" value="delete from vocabulary" />
-                            </a>
+                            <a id="delButton" href="{{base}}/teacher/{{userID}}/delById?vocabID={{ row.id }}" class="btn btn-danger">Remove</a>
                         {% endif %}
 
             {% endif %}