diff --git a/fluxRSS/templates/CSS/myStyle.css b/fluxRSS/templates/CSS/myStyle.css
new file mode 100755
index 0000000..77c071d
--- /dev/null
+++ b/fluxRSS/templates/CSS/myStyle.css
@@ -0,0 +1,29 @@
+@charset "UTF-8";
+.myBody{
+    background-color: rgba(255,187,248,0.50);
+}
+.centreCa{
+    display: flex;
+    justify-content: center;
+}
+.imgArticle{
+    width: 15em;
+    margin: 1em;
+}
+.enTitre{
+    font-size: large;
+}
+.entete{
+    font-size: xxx-large;
+}
+.caseInfo{
+    background-color: rgba(255,185,251,0.61);
+}
+.dnconnect{
+    padding: 2em;
+    display: flex;
+    justify-content: right;
+}
+.margOp{
+    margin: 1em;
+}
\ No newline at end of file
diff --git a/fluxRSS/templates/CSS/style.css b/fluxRSS/templates/CSS/style.css
deleted file mode 100755
index 69491c4..0000000
--- a/fluxRSS/templates/CSS/style.css
+++ /dev/null
@@ -1,5 +0,0 @@
-@charset "UTF-8";
-.centreCa{
-    display: flex;
-    justify-content: center;
-}
\ No newline at end of file
diff --git a/fluxRSS/templates/Connection.html b/fluxRSS/templates/Connection.html
index aa0b681..09592ac 100755
--- a/fluxRSS/templates/Connection.html
+++ b/fluxRSS/templates/Connection.html
@@ -3,11 +3,13 @@
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <!--Boostrap-->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
-
-  <title>Login</title>
+  <!--CSS-->
+  <link rel="stylesheet" href="/~rorossetto/Php_RSS/fluxRSS/templates/CSS/myStyle.css" >
+  <title class="enTitre">Login</title>
 </head>
-<body>
+<body class="myBody">
 
 <div align="center">
   {% if dVue is defined %}
@@ -19,33 +21,33 @@
   {% endif %}
   {% endif %}
 
-  <h1>Login</h1>
+  <h1 class="d-flex justify-content-center entete margOp">Login</h1>
   <form method="POST" class="form-floating" name="myform" id="myform">
     <table>
       <tr>
         <td>Nom</td>
         <td>
-          <input name="username"   id="username" type="text" size="20" />
+          <input class="margOp" name="username"   id="username" type="text" size="20" />
         </td>
       </tr>
       <tr>
         <td>Password</td>
         <td>
 
-          <input type="password" id="password" name="password" required>
+          <input class="margOp" type="password" id="password" name="password" required>
         </td>
       </tr>
     </table>
     <table>
       <tr>
-        <td><input type="submit" value="Envoyer" /></td>
-        <td><input type="reset" value="Rétablir" /></td>
+        <td><input class="margOp" type="submit" value="Envoyer" /></td>
+        <td><input class="margOp" type="reset" value="Rétablir" /></td>
       </tr>
     </table>
     <!-- action !!!!!!!!!! -->
     <input type="hidden" name="action" value="connection" />
   </form>
-  <a href="/~mapoint2/SAE/Php_RSS/fluxRSS/user/" class="modal-content">Not a member? Go to Articles</a>
+  <a href="/~rorossetto/Php_RSS/fluxRSS/user/" class="modal-content">Not a member? Go to Articles</a>
 </div>
 </body>
 </html>
diff --git a/fluxRSS/templates/listArticle.html b/fluxRSS/templates/listArticle.html
index 61b39c1..3ec0c95 100755
--- a/fluxRSS/templates/listArticle.html
+++ b/fluxRSS/templates/listArticle.html
@@ -5,27 +5,26 @@
     <!-- Bootstrap -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <!-- CSS -->
-    <link rel="stylesheet" href="CSS/style.css" >
+    <link rel="stylesheet" href="/~rorossetto/Php_RSS/fluxRSS/templates/CSS/myStyle.css" >
     <title>All Articles</title>
 </head>
-<body class="bg-body-secondary">
+<body class="myBody">
 
 <div>
-    <div>
-        <h2 class="centreCa">Actualités</h2>
-    </div>
-
     {% if not isAdmin %}
-    <a href="/~mapoint2/SAE/Php_RSS/fluxRSS/admin/connection"  class="btn" >Connect</a>
+    <a href="/~rorossetto/Php_RSS/fluxRSS/admin/connection"  class="btn dnconnect" >Connect</a>
     {% else %}
-    <a href="/~mapoint2/SAE/Php_RSS/fluxRSS/user/deconnection" class="modal-content">Déconnection</a>
+    <a href="/~rorossetto/Php_RSS/fluxRSS/user/deconnection" class="modal-content">Déconnection</a>
     {% endif %}
+    <div>
+        <h1 class="d-flex justify-content-center entete">Actualités</h1>
+    </div>
 </div>
 {% for article in dVue.data %}
-<p>
-    {{article.dateStr()}}
-    <img class="img-thumbnail"  src="{{ article.getMediaContent }}"/>
-    <a class="modal-content" href="{{ article.getLink() }}" target="_blank">{{ article.getTitle() }}</a>
+<p class="caseInfo">
+    {{article.dateStr()}}<br>
+    <img class="img-thumbnail imgArticle"  src="{{ article.getMediaContent }}"/>
+    <a class="modal-content enTitre" href="{{ article.getLink() }}" target="_blank">{{ article.getTitle() }}</a>
     {{ article.getDescription() }}
 </p>
 {% endfor %}
