diff --git a/war/WEB-INF/View/Resources/add.jsp b/war/WEB-INF/View/Resources/add.jsp
index b07451b..5cd294a 100644
--- a/war/WEB-INF/View/Resources/add.jsp
+++ b/war/WEB-INF/View/Resources/add.jsp
@@ -1,3 +1,5 @@
+<%@ page import="model.User" %>
+<%@ page import="java.util.List" %>
 <%--
   Created by IntelliJ IDEA.
   User: Fernando
@@ -6,11 +8,152 @@
   To change this template use File | Settings | File Templates.
 --%>
 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
-<html>
-<head>
-    <title>Title</title>
+<% User user = (User) request.getAttribute("User"); %>
+<html lang="es">
+  <head>
+    <title>Add a Resource - Hotel Services</title>
+
+    <meta name="google-signin-client_id" content="746890482047-c734fgap3p3vb6bdoquufn60bsh2p8l9.apps.googleusercontent.com">
+
+    <script src="https://apis.google.com/js/platform.js" async defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
+    <link type="text/css" rel="stylesheet" href="../css/Diseno.css">
+    <link type="text/css" rel="stylesheet" href="../css/materialize.min.css">
+
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+
+    <style>
+        .postLink{
+            color: blue;
+            font-size: large;
+            cursor: pointer;
+            transition: color 250ms ease-in;
+        }
+        .postLink:hover{
+            color: green;
+            font-size: larger;
+        }
+        body{
+            margin: 0;
+            padding: 0;
+            background-color: white;
+            font-family: Roboto, serif;
+        }
+        .whiteLink{
+            color: white;
+        }
+        .whiteLink:hover{
+            color: white;
+        }
+    </style>
+
 </head>
 <body>
 
+<nav style="background-color: #67c9b3">
+    <div class="nav-wrapper">
+        <a class="whiteLink" href="../" style="padding: 0 0 0 20px; font-family: 'Product Sans', Roboto, serif; font-size: xx-large">Hotel Services</a>
+
+        <div class="right valign-wrapper" style="padding: 0 0 0 10px; cursor: pointer;" onclick="changeUserOptions()">
+            <%= user.getName()%>
+            <img src="<%=user.getImgUrl()%>" alt="" class="circle responsive-img" style="padding: 5px" width="50px">
+            <i class="material-icons right">arrow_drop_down</i>
+
+            <div id="userOptions" style="background-color: white; border:solid 2px #67c9b3; position: absolute; width: auto; display: none;">
+                <ul style="color: black">
+
+                    <li style="padding: 0 5px;">
+                        <a style="color: black" onclick="postRedirect('./users/view',{action:'closeSession'})">Cerrar Sesion</a>
+                    </li>
+
+                    <li id="cerrar" style="padding: 0 5px; cursor: pointer">
+                        <i class="small material-icons">arrow_drop_up</i>
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+        <ul id="nav-mobile" class="right">
+            <li class="active"><a class="whiteLink" href="">Users</a></li>
+            <li><a class="whiteLink" onclick="postRedirect('./roles')">Roles</a></li>
+            <li><a class="whiteLink" onclick="postRedirect('./access')">Access</a></li>
+            <li><a class="whiteLink" onclick="postRedirect('./resources')">Resources</a></li>
+        </ul>
+    </div>
+</nav>
+
+<div class="container">
+    <br />
+    <span style="font-size: xx-large; font-family: 'Product Sans',Roboto,serif">Add a Resource</span>
+    <br />
+    <br />
+
+    <form method="post" action="./add">
+        <input name="action" value="create" type="hidden">
+
+        Url of the Resource:<br />
+        <input name="url" placeholder="Url of the Role" required><br />
+        Status of the Resource:<br />
+        <select name="status" class="browser-default" required>
+            <option value="" disabled selected>Choose a status</option>
+            <option value="true">true</option>
+            <option value="false">false</option>
+        </select>
+        <br />
+
+        <button class="btn waves-effect waves-light" type="submit" name="action">Submit
+            <i class="material-icons right">send</i>
+        </button>
+
+    </form>
+    <hr />
+    <br />
+    <a href="../resources" class="waves-effect waves-light btn whiteLink"><i class="material-icons left">arrow_back</i>Go Back</a>
+
+
+</div>
+
+
+<script>
+    var sourceImg = document.getElementById("sourceImg");
+    function cambiarImg(input) {
+        sourceImg.src = input.value;
+    }
+</script>
+<script>
+    var userOptions = document.getElementById("userOptions");
+    var isUserOptionsEnable = true;
+    document.getElementById("cerrar").addEventListener("click", changeUserOptions());
+    function changeUserOptions() {
+        if (isUserOptionsEnable){
+            userOptions.style.display = "none";
+        } else {
+            userOptions.style.display = "block";
+        }
+        isUserOptionsEnable = !isUserOptionsEnable;
+    }
+</script>
+<script>
+    function postRedirect(url, postData){
+        var postForm = document.createElement("form");
+        postForm.action = url;
+        postForm.method = "POST";
+        postForm.style.display = "none";
+        for (var key in postData){
+            if (postData.hasOwnProperty(key)){
+                var input = document.createElement("input");
+                input.type = "hidden";
+                input.name = key;
+                input.value = postData[key];
+                postForm.appendChild(input);
+            }
+        }
+        document.body.appendChild(postForm);
+        postForm.submit();
+    }
+</script>
 </body>
+  
 </html>
