diff --git a/README.md b/README.md
index 654a6a1..307e824 100644
--- a/README.md
+++ b/README.md
@@ -1,46 +1,34 @@
-`#php` `#server` `#master-in-software-development`
+`#php`  `#basics`  `#master-in-software-development`
 
-# PHP Server Environment <!-- omit in toc -->
-
-<p>
-  <img alt="Version" src="https://img.shields.io/badge/version-1.0-blue.svg?cacheSeconds=2592000" />
-</p>
+  
 
-> In this project you will learn how to explore the content of the variable $_SERVER which is injected to the running script, in it we can find information about the server environment and the client.
+# PHP Server Environment <!-- omit in toc -->
 
-## Index <!-- omit in toc -->
+> In this project I learned how to do a login page with authentication and a private page for logged users.
 
-- [Requirements](#requirements)
-- [Repository](#repository)
-- [Technologies used](#technologies-used)
-- [Project delivery](#project-delivery)
-- [Resources](#resources)
+All the exercises have been done using PHP as language and using Xampp as web server.
+  
+## What I've learned
 
-## Requirements
+  
 
-- Learn how to use the $_SERVER
-- Understand what a server-side language is and what it is used for
+- Learn how to do a basic login page with PHP.
 
-## Repository
+- What is a global variable.
 
-First of all you must fork this project into your GitHub account.
+- How to use the sessions in PHP.
 
-To create a fork on GitHub is as easy as clicking the “fork” button on the repository page.
+- How to store data that are entered by the user.
 
-<img src="https://docs.github.com/assets/cb-23088/images/help/repository/fork_button.png" alt="Fork on GitHub" width='450'>
+  
 
 ## Technologies used
 
-\* PHP
-
-## Project delivery
+  
 
-To deliver this project you must send a Pull Request as explained in the Students Handbook. Remember that the PR title must be with the format 
-- Solution: + NAME AND SURNAME or TEAM NAMES AND SURNAMES.
-- For example: "Solution: Josep Riera", "Solution: Josep Riera, Toni Suárez, Marta Vázquez"
+\* PHP
 
-## Resources
+\* CSS
 
-- [$_SERVER](https://www.php.net/manual/en/reserved.variables.server.php)
-- [PHP.ini](https://www.php.net/manual/es/configuration.file.php)
-- [PHP Superglobals](https://code.tutsplus.com/es/tutorials/php-superglobals-explained-with-cheatsheet--cms-36598)
+## Autor
+* **[David Moina](https://github.com/davidmoina)**
\ No newline at end of file
diff --git a/close_session.php b/close_session.php
new file mode 100644
index 0000000..b7dc70f
--- /dev/null
+++ b/close_session.php
@@ -0,0 +1,12 @@
+<?php
+    session_start();
+    session_destroy();
+
+    unset($_SESSION["username"]);
+    unset($_SESSION["user_password"]);
+
+    unset($_POST["username"]);
+    unset($_POST["user_password"]);
+
+    header("Location: index.php");
+?>
\ No newline at end of file
diff --git a/exercises/phpinfo.php b/exercises/phpinfo.php
new file mode 100644
index 0000000..640e4f2
--- /dev/null
+++ b/exercises/phpinfo.php
@@ -0,0 +1,3 @@
+<?php
+    phpinfo();
+?>
\ No newline at end of file
diff --git a/exercises/server_variables.php b/exercises/server_variables.php
new file mode 100644
index 0000000..599d9f8
--- /dev/null
+++ b/exercises/server_variables.php
@@ -0,0 +1,5 @@
+<?php
+    echo "<pre>";
+    print_r($_SERVER);
+    echo "</pre>";
+?>
\ No newline at end of file
diff --git a/exercises/session_variables.php b/exercises/session_variables.php
new file mode 100644
index 0000000..5be127d
--- /dev/null
+++ b/exercises/session_variables.php
@@ -0,0 +1,10 @@
+<?php
+    session_start();
+
+    $_SESSION['browser'] = $_SERVER['HTTP_USER_AGENT'];
+    $_SESSION['ip'] = $_SERVER['REMOTE_ADDR'];
+    $_SESSION['time'] = time();
+    echo '<pre>';
+    print_r($_SESSION);
+    echo '</pre>';
+?>
\ No newline at end of file
diff --git a/images/profile.jpg b/images/profile.jpg
new file mode 100644
index 0000000..6d14861
Binary files /dev/null and b/images/profile.jpg differ
diff --git a/images/profile2.jpg b/images/profile2.jpg
new file mode 100644
index 0000000..65b3635
Binary files /dev/null and b/images/profile2.jpg differ
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..af18074
--- /dev/null
+++ b/index.php
@@ -0,0 +1,52 @@
+<?php
+    session_start();
+
+    if(isset($_SESSION["username"]) && isset($_SESSION["user_password"])) {
+        header("Location: panel.php");
+    }
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://kit.fontawesome.com/8bbf7b9ae4.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="style.css">
+    <title>Login</title>
+</head>
+<body>
+    <main class="main">
+        <form class="form card" method="post" action="validate.php">
+            <div class="card_header">
+                <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M4 15h2v5h12V4H6v5H4V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6zm6-4V8l5 4-5 4v-3H2v-2h8z" fill="currentColor"></path>
+                </svg>
+                <h1 class="form_heading">Sign in</h1>
+            </div>
+            <div class="field">
+                <label for="username">Username</label>
+                <input id="username" placeholder="Username" type="text" name="username" class="input">
+            </div>
+
+            <div class="field">
+                <label for="password">Password</label>
+                <input id="password" placeholder="Password" type="password" name="user_password" class="input">
+            </div>
+            <div class="field field-button">
+                <button type="submit" class="button">Login</button>
+            </div>
+        </form>
+        <?php
+                if(isset($_GET["error"])) {
+                    if($_GET["error"] == "incorrect_data") {
+                        echo "<p class='error1'><i class='fa-solid fa-triangle-exclamation'></i> Username or password wrong.</p>";
+                    } else {
+                        echo "<p class='error1'><i class='fa-solid fa-triangle-exclamation'></i> Please login first</p>";
+                    }
+                }
+            ?>
+    </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/panel.php b/panel.php
new file mode 100644
index 0000000..609baea
--- /dev/null
+++ b/panel.php
@@ -0,0 +1,52 @@
+<?php
+    session_start();
+    if(!isset($_SESSION["username"]) && !isset($_SESSION["user_password"])) {
+        header("location: index.php?error=private_zone");
+    }
+
+    $username = $_SESSION["username"];
+
+    function image() {
+        if($_SESSION["username"] == "luis") {
+            echo "./images/profile2.jpg";
+            return;
+        }
+        echo "./images/profile.jpg";
+    }
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://kit.fontawesome.com/8bbf7b9ae4.js" crossorigin="anonymous"></script>
+    <title>Profile</title>
+</head>
+<body>
+    <header>
+        <h2 class="title">Profile</h2>
+        <a href="close_session.php"><button type="button">log out</button></a> 
+    </header>
+    <main>
+        <section class="container">
+            <div class="profile-box">
+                <img class="profile-pic" src=<?=image()?> width="200px" alt="profile img">
+                <h3><?=$username?></h3>
+                <p>Student at Assembler Institute</p>
+                <div class="social-media">
+                    <i class="fa-brands fa-instagram"></i>
+                    <i class="fa-brands fa-linkedin"></i>
+                    <i class="fa-brands fa-github"></i>
+                </div>
+                <button>Edit profile</button>
+                <div class="profile-bottom">
+                    <p>See more</p>
+                    <i class="fa-solid fa-arrow-down"></i>
+                </div>
+            </div>
+        </section>
+    </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..f27ff5d
--- /dev/null
+++ b/style.css
@@ -0,0 +1,218 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+
+:root {
+    --color-1: #1C315E;
+    --color-2: #227C70;
+    --color-3: #88A47C;
+    --color-4: #E6E2C3;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+}
+
+body {
+    background: var(--color-2)
+}
+
+.main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.card {
+    width: 250px;
+    height: 294px;
+    background: var(--color-4);
+    border: 1px solid white;
+    border-radius: 10px;
+}
+
+.form {
+    padding: 25px;
+}
+
+.card_header {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+}
+
+.card svg {
+    color: var(--color-1);
+    margin-bottom: 20px;
+    margin-right: 5px;
+}
+
+.form_heading {
+    padding-bottom: 20px;
+    font-size: 21px;
+    color: var(--color-1);
+}
+
+.field {
+    padding-bottom: 10px;
+}
+
+.input {
+    border-radius: 5px;
+    background-color: #e9e9f7;
+    padding: 5px;
+    width: 100%;
+    color: var(--color-1);
+    border: 1px solid var(--color-1)
+}
+
+.input:focus-visible {
+    outline: 1px solid #aeaed6;
+}
+
+.input::-webkit-input-placeholder {
+    color: #bcbcdf;
+}
+
+.input::-moz-placeholder {
+    color: #bcbcdf;
+}
+
+.input:-ms-input-placeholder {
+    color: #bcbcdf;
+}
+
+.input::-ms-input-placeholder {
+    color: #bcbcdf;
+}
+
+.input::placeholder {
+    color: #bcbcdf;
+}
+
+label {
+    color: var(--color-1);
+    font-size: 14px;
+    display: block;
+    padding-bottom: 4px;
+}
+
+.field-button {
+    text-align: center;
+}
+
+button {
+    background-color: var(--color-1);
+    margin-top: 10px;
+    font-size: 14px;
+    padding: 10px 20px;
+    height: auto;
+    font-weight: 500;
+    color: white;
+    border-radius: 20px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #5f5f9c;
+}
+
+.error1 {
+    color: rgb(247, 86, 86);
+    margin-top: 20px;
+    line-height: 15px;
+}
+
+/* panel styles */
+
+header {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    padding: 30px 0;
+}
+
+.title {
+    color: white;
+    font-size: 24px;
+}
+
+header a button {
+    background-color: var(--color-1);
+    color: white;
+    border: none;
+    outline: none;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
+    padding: 15px 30px;
+    border-radius: 30px;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.container {
+    width: 100%;
+    height: 80vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.profile-box {width: 450px;
+    text-align: center;
+    background-color: var(--color-3);
+    padding: 40px 90px;
+    border-radius: 20px;
+}
+.profile-pic {
+    width: 150px;
+    border-radius: 50%;
+    border: 6px solid white;
+    margin-top: 40px;
+}
+
+.profile-bottom {
+    background-color: white;
+    padding: 60px 0;
+    margin-right: -90px;
+    margin-left: -90px;
+    margin-bottom: -40px;
+    border-radius: 20px;
+    margin-top: -10px;
+}
+
+.profile-bottom i {
+    width: 15px;
+    margin-top: 15px;
+    cursor: pointer;
+}
+
+.profile-box button {
+    background-color: white;
+    color: grey;
+    border: none;
+    outline: none;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
+    padding: 15px 60px;
+    border-radius: 30px;
+    margin-bottom: -50px;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.profile-box h3 {
+    font-size: 22px;
+    margin-top: 20px;
+    font-weight: 500;
+}
+
+.social-media i{
+    font-size: 25px;
+    margin: 30px 5px;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/styles/panel.css b/styles/panel.css
new file mode 100644
index 0000000..bf7ee79
--- /dev/null
+++ b/styles/panel.css
@@ -0,0 +1,103 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+
+:root {
+    --color-1: #1C315E;
+    --color-2: #227C70;
+    --color-3: #88A47C;
+    --color-4: #E6E2C3;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+}
+
+body {
+    background-color: var(--color-2);
+}
+
+header {
+    display: flex;
+    justify-content: space-evenly;
+    padding: 30px 0;
+}
+
+.title {
+    color: white;
+}
+
+header a button {
+    background-color: var(--color-1);
+    color: white;
+    border: none;
+    outline: none;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
+    padding: 15px 30px;
+    border-radius: 30px;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.container {
+    width: 100%;
+    height: 80vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.profile-box {width: 450px;
+    text-align: center;
+    background-color: var(--color-3);
+    padding: 40px 90px;
+    border-radius: 20px;
+}
+.profile-pic {
+    width: 150px;
+    border-radius: 50%;
+    border: 6px solid white;
+    margin-top: 40px;
+}
+
+.profile-bottom {
+    background-color: white;
+    padding: 60px 0;
+    margin-right: -90px;
+    margin-left: -90px;
+    margin-bottom: -40px;
+    border-radius: 20px;
+    margin-top: -10px;
+}
+
+.profile-bottom i {
+    width: 15px;
+    margin-top: 15px;
+    cursor: pointer;
+}
+
+.profile-box button {
+    background-color: white;
+    color: grey;
+    border: none;
+    outline: none;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
+    padding: 15px 60px;
+    border-radius: 30px;
+    margin-bottom: -50px;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.profile-box h3 {
+    font-size: 22px;
+    margin-top: 20px;
+    font-weight: 500;
+}
+
+.social-media i{
+    font-size: 25px;
+    margin: 30px 5px;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/validate.php b/validate.php
new file mode 100644
index 0000000..ac8145d
--- /dev/null
+++ b/validate.php
@@ -0,0 +1,22 @@
+<?php
+    session_start();
+
+    $username = "david";
+    $password = "1234";
+
+    $username2 = "luis";
+    $password = "1234";
+
+    $userInp = $_POST['username'];
+    $passInp = $_POST['user_password'];
+
+    if(($username === $userInp || $username2 === $userInp) && $password === $passInp) {
+        session_start();
+        $_SESSION["username"] = $userInp;
+        $_SESSION["user_password"] = $passInp;
+        header("Location: panel.php");
+    } else {
+        header("Location: index.php?error=incorrect_data");
+    }
+?>
+