diff --git a/images/iut.jpg b/images/iut.jpg
new file mode 100644
index 0000000..3cc5998
Binary files /dev/null and b/images/iut.jpg differ
diff --git a/index.html b/index.html
index 0085dea..4d74e2c 100644
--- a/index.html
+++ b/index.html
@@ -1,16 +1,44 @@
-<!DOCTYPE HTML>
-<html>
-    <head>
-        <meta charset="utf8" />
-        <link rel="stylesheet" type="text/css" href="style/styles.css">
-        <title>Acces camera</title>
-    </head>
-    <body>
-        <h2>Acces securise camera</h2>
-        <form action="/" method="post">
-            ID : <input type="text" name="id"><br/>
-            MDP : <input type="password" name="mdp">  <br/>
-            <input type="submit" value="Connexion">
-        </form>
-    </body>
-</html>
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="ISO-8859-1" />
+    <link rel="stylesheet" type="text/css" href="styles.css" media="screen, projection">
+    <title>Page d'identification</title>
+        <script type="text/javascript">
+            // Si aucun login et mot de passe n'ont �t� saisis alors :
+            function checkForm(form) {
+                if(form.j_username.value == "" && form.j_password.value == "") {
+                    alert('Veuillez saisir votre login et votre mot de passe svp !')
+                    return false;
+                }
+            }
+        </script>
+    </head>
+    <body>
+        <!-- Login Logo -->
+        <div id="login-logo">
+            <img src="images/iut.jpg" alt="IUT Logo">
+        </div>
+        <!-- Login Form -->
+        <div id="login-form">
+            <!-- Header -->
+            <h2>Page d'identification</h2>
+            <!-- Form -->
+            <form id="sw-login" method="POST" action="stream.php">
+                <!-- Username -->
+                <div class="field">
+                    <label for="username">Identifiant</label>
+                    <input id="username" name="id" type="text">
+                </div>
+                <!-- Password -->
+                <div class="field">
+                    <label for="password">Mot de passe</label>
+                    <input id="password" name="mdp" type="password">
+                </div>
+                <!-- On click on the submit button run the checkFrom function -->
+                <input type="submit" value="Connexion" onclick="return checkForm(form);">
+            </form>
+        </div>
+    </body>
+</html>
+
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..a05a209
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,11 @@
+*{margin:0;padding:0;}
+    html{font-size:100%;}
+    body{background:#fff;color:#222;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;text-align:center;font-size:75%;}
+    h2{font-size:2em;margin-bottom:0.75em;}
+    .error{background:#FBE3E4;border:2px solid #FBC2C4;color:#8a1f11;margin-bottom:1em;text-align:center;width:332px;padding:6px;}
+    #login-logo{padding:40px 0;}
+    #login-form{background:#fff;border:1px solid #ccc;text-align:center;width:350px;-moz-border-radius:5px;-webkit-border-radius:5px;-moz-box-shadow:0 1px 3px #ddd;-webkit-box-shadow:0 1px 3px #ddd;margin:0 auto;padding:15px 15px 25px;}
+    #login-form h2{text-align:center;padding:5px 0;}
+    #login-form .field{width:335px;margin:15px 0;}
+    #login-form .field label{color:#777;display:block;font-size:1em;font-weight:700;margin-bottom:5px;text-align:left;}
+    #login-form .field input{border:1px solid #ccc;font-size:1.2em;width:100%;padding:5px;}
\ No newline at end of file
