diff --git a/Project/php/css/styles.css b/Project/php/css/styles.css
index 588a034..5a9b4c2 100755
--- a/Project/php/css/styles.css
+++ b/Project/php/css/styles.css
@@ -2767,7 +2767,6 @@ textarea.form-control-lg {
 .btn {
   --bs-btn-padding-x: 0.75rem;
   --bs-btn-padding-y: 0.375rem;
-  --bs-btn-font-family: ;
   --bs-btn-font-size: 1rem;
   --bs-btn-font-weight: 400;
   --bs-btn-line-height: 1.5;
@@ -2878,7 +2877,7 @@ textarea.form-control-lg {
 
 .btn-success {
   --bs-btn-color: #000;
-  --bs-btn-bg: #67c29c;
+  --bs-btn-bg: #008800;
   --bs-btn-border-color: #67c29c;
   --bs-btn-hover-color: #000;
   --bs-btn-hover-bg: #7ecbab;
@@ -2929,7 +2928,7 @@ textarea.form-control-lg {
 
 .btn-danger {
   --bs-btn-color: #fff;
-  --bs-btn-bg: #a16468;
+  --bs-btn-bg: #bb0000;
   --bs-btn-border-color: #a16468;
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: #895558;
diff --git a/Project/php/templates/addGroupForm.twig b/Project/php/templates/addGroupForm.twig
index 401a681..aaf3dec 100755
--- a/Project/php/templates/addGroupForm.twig
+++ b/Project/php/templates/addGroupForm.twig
@@ -1,6 +1,6 @@
 <form action="{{ base }}/admin/{{ userID }}/addGroup" method="POST">
-    <input name="num" type="text" placeholder="number" required>
-    <input name="year" type="text" placeholder="year" required>
-    <input name="sector" type="text" placeholder="sector" required>
-    <input type="submit" value="Add">
+    <input class="input-group-text d-inline" name="num" type="text" placeholder="number" required>
+    <input class="input-group-text d-inline" name="year" type="text" placeholder="year" required>
+    <input class="input-group-text d-inline" name="sector" type="text" placeholder="sector" required>
+    <input class="btn btn-success" type="submit" value="Add">
 </form>
\ No newline at end of file
diff --git a/Project/php/templates/groupContainer.twig b/Project/php/templates/groupContainer.twig
index 606c6dc..80c7729 100755
--- a/Project/php/templates/groupContainer.twig
+++ b/Project/php/templates/groupContainer.twig
@@ -1,58 +1,41 @@
-<table>
-    {% if groups is defined %}
-        {% for row in groups %}
-            {% if selectedGroup is defined and selectedGroup == row.id %}
-                <tr style="background-color:red;">
-            {% else %}
-                <tr>
-            {% endif %}
-            <td>ID</td>
-            <td>Num</td>
-            <td>Year</td>
-            <td>Sector</td>
-            </tr>
-            <tr>
-                <td>{{ row.id }}</td>
-                <td>{{ row.num }}</td>
-                <td>{{ row.year }}</td>
-                <td>{{ row.sector }}</td>
-
-                {% if actions is defined %}
-
-                    {% if 'showGroupDetails' in actions %}
-                        <td>
-                            <a href="{{base}}/admin/{{userID}}/showGroupDetails?selectedGroup={{ row.id }}">
-                                <input class="btn-black" type="button" value="Show"/>
-                            </a>
-                        </td>
-                    {% endif %}
-
-                    {% if 'removeGroup' in actions %}
-                        <td>
-                            <a href="{{base}}/admin/{{userID}}/removeGroup?selectedGroup={{ row.id }}">
-                                <input class="btn-black" type="button" value="Remove"/>
-                            </a>
-                        </td>
-                    {% endif %}
-
-                    {% if 'removeVocabFromGroup' in actions %}
-                        <td>
-                            <a href="{{base}}/teacher/{{userID}}/removeVocabFromGroup?vocabID={{ vocabID }}&selectedGroup={{ row.id }}">
-                                <input class="btn-black" type="button" value="Remove from group"/>
-                            </a>
-                        </td>
-                    {% endif %}
-
-                    {% if 'addVocabToGroup' in actions %}
-                        <td>
-                            <a href="{{base}}/teacher/{{userID}}/addVocabToGroup?vocabID={{ vocabID }}&selectedGroup={{ row.id }}">
-                                <input class="btn-black" type="button" value="Add to group"/>
-                            </a>
-                        </td>
-                    {% endif %}
-
-                {% endif %}
-            </tr>
-        {% endfor %}
-    {% endif %}
-</table>
\ No newline at end of file
+<div class="container mt-5">
+    <table class="table table-bordered thead-dark">
+        <thead>
+        <tr>
+            <th>ID</th>
+            <th>Num</th>
+            <th>Year</th>
+            <th>Sector</th>
+            <th>Actions</th>
+        </tr>
+        </thead>
+        <tbody>
+        {% if groups is defined %}
+            {% for row in groups %}
+                <tr {% if selectedGroup is defined and selectedGroup == row.id %}class="table-danger"{% endif %}>
+                    <td>{{ row.id }}</td>
+                    <td>{{ row.num }}</td>
+                    <td>{{ row.year }}</td>
+                    <td>{{ row.sector }}</td>
+                    <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>
+                            {% endif %}
+                            {% if 'removeGroup' in actions %}
+                                <a href="{{ base }}/admin/{{ userID }}/removeGroup?selectedGroup={{ row.id }}" class="btn btn-danger fs-6">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>
+                            {% endif %}
+                            {% if 'addVocabToGroup' in actions %}
+                                <a href="{{ base }}/teacher/{{ userID }}/addVocabToGroup?vocabID={{ vocabID }}&selectedGroup={{ row.id }}" class="btn btn-success">Add to group</a>
+                            {% endif %}
+                        {% endif %}
+                    </td>
+                </tr>
+            {% endfor %}
+        {% endif %}
+        </tbody>
+    </table>
+</div>
diff --git a/Project/php/templates/manageGroupView.html b/Project/php/templates/manageGroupView.html
index fda30a5..7dd548f 100755
--- a/Project/php/templates/manageGroupView.html
+++ b/Project/php/templates/manageGroupView.html
@@ -11,39 +11,34 @@
     <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
     <!-- Google fonts-->
     <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
+
     <link
             href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
             rel="stylesheet" />
     <!-- 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 class="groupList">
-        <h2>Group list</h2>
+    <div class="border my-2 py-2 border-5 border-secondary rounded-3 text-center">
+        <h1>Group list</h1>
         {% include 'groupContainer.twig' with {'actions' : ['showGroupDetails', 'removeGroup']} %}
-    </section>
-    <section class="users">
-        <h2>Users of the group</h2>
+    </div>
+    <div class="border my-2 py-2 border-5 border-secondary rounded-3 text-center">
+        <h1>Users of the group</h1>
         {% include 'userContainer.twig' with {'users' : users, 'action' : 'removeUserFromGroup'} %}
-    </section>
-    <section class="addGroupForm">
-        <h2>Add group</h2>
+    </div>
+        <div class="border my-2 py-2 border-5 border-secondary rounded-3 text-center">
+        <h1>Add group</h1>
         {% include 'addGroupForm.twig' %}
-    </section>
-    <section class="unassignedUsers">
+    </div>
+    <div class="border my-2 py-2 border-5 border-secondary rounded-3 text-center">
         <h1>Unassigned users</h1>
         {% include 'userContainer.twig' with {'users' : unassignedUsers, 'action' : 'addUserToGroup'} %}
-    </section>
+    </div>
 </div>
-<script src="{{base}}/js/scripts.js"></script>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/Project/php/templates/manageVocabListView.html b/Project/php/templates/manageVocabListView.html
index 3fa2584..a2fcf5f 100755
--- a/Project/php/templates/manageVocabListView.html
+++ b/Project/php/templates/manageVocabListView.html
@@ -18,10 +18,6 @@
     <link rel="icon" type="image/x-icon" href="{{base}}/assets/favicon.ico"/>
 </head>
 <style>
-    section {
-        border: 2px solid black;
-        margin: 10px 0;
-    }
 </style>
 <body>
 {% include 'navBar.twig' %}
diff --git a/Project/php/templates/userContainer.twig b/Project/php/templates/userContainer.twig
index d742f6e..1bd54a9 100755
--- a/Project/php/templates/userContainer.twig
+++ b/Project/php/templates/userContainer.twig
@@ -1,46 +1,46 @@
-<table>
-    <tr>
-        <td>ID</td>
-        <td>Nickname</td>
-        <td>Name</td>
-        <td>Surname</td>
-        <td>Mail</td>
-        <td>Group</td>
-        <td>Role</td>
-        <td>Extra Time</td>
-    </tr>
-    {% if users is defined %}
-        {% for row in users %}
-            <tr>
-                <td>{{row.id}}</td>
-                <td>{{row.nickname}}</td>
-                <td>{{row.name}}</td>
-                <td>{{row.surname}}</td>
-                <td>{{row.email}}</td>
-                <td>{{row.group}}</td>
-                <td>{{row.roles|join(', ')}}</td>
-                <td>{{row.extraTime? 'yes' : 'no' }}</td>
-
-                {% if action is defined %}
-
-                    {% if action == 'removeUserFromGroup' %}
-                    <td><a href="{{base}}/admin/{{ userID }}/removeUserFromGroup?userToRemove={{row.id}}&selectedGroup={{ selectedGroup }}">
-                            <input class="btn-black" type="button" value="Delete from group"/>
-                        </a></td>
-
-                    {% elseif action == 'addUserToGroup' %}
-                    <td><a href="{{base}}/admin/{{ userID }}/addUserToGroup?userToAdd={{row.id}}&groupID={{selectedGroup}}">
-                            <input class="btn-black" type="button" value="Add to group"/>
-                        </a></td>
-
-                    {% elseif action == 'removeUser' %}
-                    <td><a href="{{base}}/admin/{{ userID }}/removeUser?userToRemove={{row.id}}">
-                            <input class="btn-black" type="button" value="Delete"/>
-                        </a></td>
+<div class="container mt-5">
+    <table class="table table-bordered">
+        <thead>
+        <tr>
+            <th>ID</th>
+            <th>Nickname</th>
+            <th>Name</th>
+            <th>Surname</th>
+            <th>Mail</th>
+            <th>Group</th>
+            <th>Role</th>
+            <th>Extra Time</th>
+            {% if action is defined %}
+                <th>Action</th>
+            {% endif %}
+        </tr>
+        </thead>
+        <tbody>
+        {% if users is defined %}
+            {% for row in users %}
+                <tr>
+                    <td>{{ row.id }}</td>
+                    <td>{{ row.nickname }}</td>
+                    <td>{{ row.name }}</td>
+                    <td>{{ row.surname }}</td>
+                    <td>{{ row.email }}</td>
+                    <td>{{ row.group }}</td>
+                    <td>{{ row.roles|join(', ') }}</td>
+                    <td>{{ row.extraTime ? 'yes' : 'no' }}</td>
+                    {% if action is defined %}
+                        <td>
+                            {% if action == 'removeUserFromGroup' %}
+                                <a href="{{ base }}/admin/{{ userID }}/removeUserFromGroup?userToRemove={{ row.id }}&selectedGroup={{ selectedGroup }}" class="btn btn-danger">Delete from group</a>
+                            {% elseif action == 'addUserToGroup' %}
+                                <a href="{{ base }}/admin/{{ userID }}/addUserToGroup?userToAdd={{ row.id }}&groupID={{ selectedGroup }}" class="btn btn-success">Add to group</a>
+                            {% elseif action == 'removeUser' %}
+                                <a href="{{ base }}/admin/{{ userID }}/removeUser?userToRemove={{ row.id }}" class="btn btn-warning">Delete</a>
+                            {% endif %}
+                        </td>
                     {% endif %}
-
-                {% endif %}
-            </tr>
-        {% endfor %}
-    {% endif %}
-</table>
\ No newline at end of file
+                </tr>
+            {% endfor %}
+        {% endif %}
+        </tbody>
+    </table>
+</div>
diff --git a/Project/php/templates/usersView.html b/Project/php/templates/usersView.html
index bca4dc8..c3f01e4 100755
--- a/Project/php/templates/usersView.html
+++ b/Project/php/templates/usersView.html
@@ -13,18 +13,18 @@
     <div class="content">
         <section>
             <table>
-                <tr>
+                <tr class="d-flex justify-content-center">
                     <td><a href="{{base}}/admin/{{userID}}/showAllUsers">
-                        <input class="btn-black" type="button" value="Show all users"/>
+                        <input class="btn btn-info" type="button" value="Show all users"/>
                     </a></td>
                     <td><a href="{{base}}/admin/{{userID}}/showAllAdmins">
-                        <input class="btn-black" type="button" value="Show all admins"/>
+                        <input class="btn btn-info" type="button" value="Show all admins"/>
                     </a></td>
                     <td><a href="{{base}}/admin/{{userID}}/showAllTeachers">
-                        <input class="btn-black" type="button" value="Show all teachers"/>
+                        <input class="btn btn-info" type="button" value="Show all teachers"/>
                     </a></td>
                     <td><a href="{{base}}/admin/{{userID}}/showAllStudents">
-                        <input class="btn-black" type="button" value="Show all students"/>
+                        <input class="btn btn-info" type="button" value="Show all students"/>
                     </a></td>
                 </tr>
             </table>
diff --git a/Project/php/templates/vocabularyContainer.twig b/Project/php/templates/vocabularyContainer.twig
index 5a6918a..551329b 100755
--- a/Project/php/templates/vocabularyContainer.twig
+++ b/Project/php/templates/vocabularyContainer.twig
@@ -22,13 +22,13 @@
                     <td>
                         {% if 'getContent' in actions %}
                             <a href="{{base}}/teacher/{{userID}}/getContent?vocabID={{row.id}}">
-                                <input class="btn-black" type="button" value="show content" />
+                                <input class="btn btn-primary" type="button" value="show content" />
                             </a>
                         {% endif %}
 
                         {% if 'delById' in actions %}
                             <a id="delButton" href="{{base}}/teacher/{{userID}}/delById?vocabID={{ row.id }}">
-                                <input class="btn-black" type="button" value="delete from vocabulary" />
+                                <input class="btn btn-primary" type="button" value="delete from vocabulary" />
                             </a>
                         {% endif %}