diff --git a/curriculumsearch/img/FondoRoshka.jpg b/curriculumsearch/img/FondoRoshka.jpg
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/curriculumsearch/img/FondoRoshka.jpg
diff --git a/curriculumsearch/src/main/java/com/roshka/controller/PostulanteController.java b/curriculumsearch/src/main/java/com/roshka/controller/PostulanteController.java
index 5ca25d4..485f12d 100644
--- a/curriculumsearch/src/main/java/com/roshka/controller/PostulanteController.java
+++ b/curriculumsearch/src/main/java/com/roshka/controller/PostulanteController.java
@@ -214,7 +214,7 @@ public class PostulanteController {
         Postulante p = post.findById(postulanteId).orElse(null);
         model.addAttribute("postulante",p);
         model.addAttribute("estadoP", EstadoPostulante.values());
-        return "detallepostulante";
+        return "detallepostulante2";
 
     }
     @PostMapping({"/postulante/{postulanteId}"})
diff --git a/curriculumsearch/src/main/resources/static/main.js b/curriculumsearch/src/main/resources/static/main.js
index 808eef0..81c57ef 100644
--- a/curriculumsearch/src/main/resources/static/main.js
+++ b/curriculumsearch/src/main/resources/static/main.js
@@ -158,8 +158,9 @@ function agregarFieldTecnologia(){
         if(tecn==null) continue;
         content1 += `
         <li id="tecn-${index}">        
-            ${tecn.tecnologia.nombre} 
+            ${tecn.tecnologia.nombre}         
             <button type="button" onclick="eliminarTecnologia(event)">Eliminar</button>
+            <br>
         </li>
         
         `
@@ -528,4 +529,58 @@ function eliminarReferencia(event) {
 
 
 
-
+/*--------------------------------------------------------------------------------------------------------- */
+$(function(){
+    $("#wizard").steps({
+    headerTag: "h4",
+    bodyTag: "section",
+    transitionEffect: "fade",
+    enableAllSteps: true,
+    transitionEffectSpeed: 500,
+    onStepChanging: function (event, currentIndex, newIndex) {
+    if ( newIndex === 1 ) {
+    $('.steps ul').addClass('step-2');
+    } else {
+    $('.steps ul').removeClass('step-2');
+    }
+    if ( newIndex === 2 ) {
+    $('.steps ul').addClass('step-3');
+    } else {
+    $('.steps ul').removeClass('step-3');
+    }
+    
+    if ( newIndex === 3 ) {
+    $('.steps ul').addClass('step-4');
+    $('.actions ul').addClass('step-last');
+    } else {
+    $('.steps ul').removeClass('step-4');
+    $('.actions ul').removeClass('step-last');
+    }
+    return true;
+    },
+    labels: {
+    finish: "Order again",
+    next: "Next",
+    previous: "Previous"
+    }
+    });
+    // Custom Steps Jquery Steps
+    $('.wizard > .steps li a').click(function(){
+    $(this).parent().addClass('checked');
+    $(this).parent().prevAll().addClass('checked');
+    $(this).parent().nextAll().removeClass('checked');
+    });
+    // Custom Button Jquery Steps
+    $('.forward').click(function(){
+    $("#wizard").steps('next');
+    })
+    $('.backward').click(function(){
+    $("#wizard").steps('previous');
+    })
+    // Checkbox
+    $('.checkbox-circle label').click(function(){
+    $('.checkbox-circle label').removeClass('active');
+    $(this).addClass('active');
+    })
+    })
+/*--------------------------------------------------------------------------------------------------------- */
\ No newline at end of file
diff --git a/curriculumsearch/src/main/webapp/css/cargoStyle.css b/curriculumsearch/src/main/webapp/css/cargoStyle.css
new file mode 100644
index 0000000..02aca46
--- /dev/null
+++ b/curriculumsearch/src/main/webapp/css/cargoStyle.css
@@ -0,0 +1,10 @@
+body{
+    background-image:url(/img/fondoBlanco.jpg);
+    background-size:cover;
+    background-repeat:no-repeat;
+    height:100vh;width:100vw; 
+}
+label {
+    display: inline-block;
+    width: 100px;
+}
\ No newline at end of file
diff --git a/curriculumsearch/src/main/webapp/css/detallePostulantestyle.css b/curriculumsearch/src/main/webapp/css/detallePostulantestyle.css
new file mode 100644
index 0000000..f124595
--- /dev/null
+++ b/curriculumsearch/src/main/webapp/css/detallePostulantestyle.css
@@ -0,0 +1,44 @@
+:root {
+    --nord0: #2e3440;
+    --nord1: #3b4252;
+    --nord2: #434c5e;
+    --nord3: #4c566a;
+    --nord4: #d8dee9;
+    --nord5: #e5e9f0;
+    --nord6: #eceff4;
+    --nord7: #8fbcbb;
+    --nord8: #88c0d0;
+    --nord9: #81a1c1;
+    --nord10: #5e81ac;
+    --nord11: #bf616a;
+    --nord12: #d08770;
+    --nord13: #ebcb8b;
+    --nord14: #a3be8c;
+    --nord15: #b48ead;
+}
+*{outline: 1px #bf616a;}
+body{
+    color: #3b4252;
+    margin: auto;
+}
+header,section{
+    width: 960px;
+    margin: 0 auto;
+}
+ul{
+    list-style-type: none;
+}
+header{
+    background-image:url(/img/fondoHeader.png);
+    display: flex;
+    color: #2e3440;
+}
+section{
+    background-image:url(/img/fondoBlanco.jpg);
+    
+    display: flex;
+    
+}
+article{
+    width: 60%;
+}
\ No newline at end of file
diff --git a/curriculumsearch/src/main/webapp/css/formPostulanteStyle.css b/curriculumsearch/src/main/webapp/css/formPostulanteStyle.css
new file mode 100644
index 0000000..25dad7d
--- /dev/null
+++ b/curriculumsearch/src/main/webapp/css/formPostulanteStyle.css
@@ -0,0 +1,199 @@
+body {
+    /* background-color: #506BEE; */
+    background-image:url(/img/fondo.png);
+    /*background-size:cover;*/
+    background-repeat:repeat;
+    height:100vh;width:100vw;  
+    align-items:"middle";
+    
+}
+#head{text-align:center}
+ form{/*max-width:300px;
+    width:90%;position:relative;
+    left:50%;
+    top:10%;padding:40px;
+    border-radius:4px;
+    transform:translate(-50%,10%);*/
+   
+    box-shadow:3px 3px 4px rgba(175, 209, 20, 0.2)} 
+.card {
+    border: none
+}
+li {
+    padding: 0;
+    display: inline-block; 
+    width: 80px; 
+    text-align: center; 
+    letter-spacing:normal; 
+    vertical-align: middle;
+    line-height: 1.1;
+}
+button {
+ 
+    border: none;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+}
+
+.image {
+    position: relative
+}
+
+.image span {
+    background-color: #506BEE;
+    color: #fff;
+    padding: 6px;
+    height: 30px;
+    width: 30px;
+    border-radius: 50%;
+    font-size: 13px;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: -0px;
+    right: 0px
+}
+
+.user-details h4 {
+    color: #506BEE
+}
+
+.ratings {
+    font-size: 30px;
+    font-weight: 600;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    color: #f9b43a
+}
+
+.user-details span {
+    text-align: left
+}
+
+.inputs label {
+    display: flex;
+    margin-left: 3px;
+    font-weight: 500;
+    font-size: 13px;
+    margin-bottom: 4px
+}
+
+.inputs input {
+    font-size: 14px;
+    height: 40px;
+    border: 2px solid #ced4da
+}
+
+.inputs input:focus {
+    box-shadow: none;
+    border: 2px solid #506BEE
+}
+
+.about-inputs label {
+    display: flex;
+    margin-left: 3px;
+    font-weight: 500;
+    font-size: 13px;
+    margin-bottom: 4px
+}
+
+.about-inputs textarea {
+    font-size: 14px;
+    height: 100px;
+    border: 2px solid #ced4da;
+    resize: none
+}
+
+.about-inputs textarea:focus {
+    box-shadow: none
+}
+
+.btn {
+    font-weight: 600
+}
+
+.btn:focus {
+    box-shadow: none
+}
+
+select {
+    display: block;
+    width: 100%;
+    border: 1px solid #ddd;
+    border-radius: 20px;
+    height: 40px;
+    padding: 5px 10px
+}
+
+select:focus {
+    outline: none
+}
+
+.add-experience:hover {
+    background: #506BEE;
+    color: #fff;
+    cursor: pointer;
+    border: solid 1px #506BEE
+}
+
+.content-select select{
+	appearance: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+}
+.content-select{
+	max-width: 250px;
+	position: relative;
+}
+ 
+.content-select select{
+	display: inline-block;
+	width: 100%;
+	cursor: pointer;
+  	padding: 7px 10px;
+  	height: 42px;
+  	outline: 0; 
+  	border: 0;
+	border-radius: 0;
+	background: #f0f0f0;
+	color: #7b7b7b;
+	font-size: 1em;
+	color: #999;
+	font-family: 
+	'Quicksand', sans-serif;
+	border:2px solid rgba(0,0,0,0.2);
+    border-radius: 12px;
+    position: relative;
+    transition: all 0.25s ease;
+}
+ 
+.content-select select:hover{
+	background: #B1E8CD;
+}
+ 
+/* 
+Creamos la fecha que aparece a la izquierda del select.
+Realmente este elemento es un cuadrado que sólo tienen
+dos bordes con color y que giramos con transform: rotate(-45deg);
+*/
+.content-select i{
+	position: absolute;
+	right: 20px;
+	top: calc(50% - 13px);
+	width: 16px;
+	height: 16px;
+	display: block;
+	border-left:4px solid #2AC176;
+	border-bottom:4px solid #2AC176;
+	transform: rotate(-45deg); /* Giramos el cuadrado */
+	transition: all 0.25s ease;
+}
+ 
+.content-select:hover i{
+	margin-top: 3px;
+}
\ No newline at end of file
diff --git a/curriculumsearch/src/main/webapp/css/indexStyle.css b/curriculumsearch/src/main/webapp/css/indexStyle.css
new file mode 100644
index 0000000..6f1e132
--- /dev/null
+++ b/curriculumsearch/src/main/webapp/css/indexStyle.css
@@ -0,0 +1,8 @@
+body{
+    background-image:url(/img/fondoIndex.jpg);
+    background-size:cover;
+    background-repeat:no-repeat;
+    height:100vh;width:100vw;  
+    position: absolute;
+    -webkit-text-size-adjust: 100%;
+}
\ No newline at end of file
diff --git a/curriculumsearch/src/main/webapp/css/style.css b/curriculumsearch/src/main/webapp/css/style.css
new file mode 100644
index 0000000..990bcac
--- /dev/null
+++ b/curriculumsearch/src/main/webapp/css/style.css
@@ -0,0 +1,40 @@
+*{
+    margin: 0px;
+    padding: 0px;
+}
+body{
+    background-image:url(/img/FondoRoshka.jpg);
+    background-size:cover;
+    background-repeat:no-repeat;
+    overflow: hidden;
+    height:100%;width:100%; 
+    align-items:"middle";
+    position: absolute;
+}
+#form{max-width:333px;
+    width:90%;position:relative;
+    left:50%;
+    top:10%;padding:40px;
+    border-radius:4px;
+    transform:translate(-50%,10%);
+    color:#fff;
+    box-shadow:3px 3px 4px rgba(0,0,0,.2)}
+#head{text-align:center}
+#image{margin:auto;width:50%;
+    padding:10px;max-height:175px;
+    max-width:175px}
+/*#linkas{display:block;
+    text-align:center;
+    font-size:12px;
+    opacity:.9;
+    text-decoration:none}
+#butonas{background:#70b2d0;
+    outline:0;
+    text-shadow:initial}
+#formum,#formum2{background:0 0;
+    border:none;
+    border-bottom:1px solid #434a52;
+    border-radius:0;
+    box-shadow:none;
+    outline:0;
+    color:inherit} */
\ No newline at end of file
diff --git a/curriculumsearch/src/main/webapp/img/FondoRoshka.jpg b/curriculumsearch/src/main/webapp/img/FondoRoshka.jpg
new file mode 100644
index 0000000..503216a
Binary files /dev/null and b/curriculumsearch/src/main/webapp/img/FondoRoshka.jpg differ
diff --git a/curriculumsearch/src/main/webapp/img/LogoRoshka.jpg b/curriculumsearch/src/main/webapp/img/LogoRoshka.jpg
new file mode 100644
index 0000000..ecd4d8c
Binary files /dev/null and b/curriculumsearch/src/main/webapp/img/LogoRoshka.jpg differ
diff --git a/curriculumsearch/src/main/webapp/img/fondo.png b/curriculumsearch/src/main/webapp/img/fondo.png
new file mode 100644
index 0000000..85953d1
Binary files /dev/null and b/curriculumsearch/src/main/webapp/img/fondo.png differ
diff --git a/curriculumsearch/src/main/webapp/img/fondoBlanco.jpg b/curriculumsearch/src/main/webapp/img/fondoBlanco.jpg
new file mode 100644
index 0000000..b5f6863
Binary files /dev/null and b/curriculumsearch/src/main/webapp/img/fondoBlanco.jpg differ
diff --git a/curriculumsearch/src/main/webapp/img/fondoHeader.png b/curriculumsearch/src/main/webapp/img/fondoHeader.png
new file mode 100644
index 0000000..c5f0258
Binary files /dev/null and b/curriculumsearch/src/main/webapp/img/fondoHeader.png differ
diff --git a/curriculumsearch/src/main/webapp/img/fondoIndex.jpg b/curriculumsearch/src/main/webapp/img/fondoIndex.jpg
new file mode 100644
index 0000000..90327ac
Binary files /dev/null and b/curriculumsearch/src/main/webapp/img/fondoIndex.jpg differ
diff --git a/curriculumsearch/src/main/webapp/jsp/cargo-form.jsp b/curriculumsearch/src/main/webapp/jsp/cargo-form.jsp
index ca2da8d..d7c924e 100644
--- a/curriculumsearch/src/main/webapp/jsp/cargo-form.jsp
+++ b/curriculumsearch/src/main/webapp/jsp/cargo-form.jsp
@@ -8,6 +8,7 @@ contentType="text/html;charset=UTF-8" language="java" %>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Cargo</title>
+    <link href="../css/cargoStyle.css" rel="stylesheet" type="text/css"/>
     <link
       href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
       rel="stylesheet"
@@ -25,7 +26,7 @@ contentType="text/html;charset=UTF-8" language="java" %>
     <jsp:include page="alerts.jsp" />
     <div class="container-xxl my-md-4 bd-layout">
         <h2>Agregar Cargo</h2>
-        <div class="p-3 mb-2 bg-light text-dark border border-light">
+        <div class="p-3 mb-2">
             <form:form
             action="/cargo/${cargo.id == null ? '' : cargo.id}"
             method="post"
diff --git a/curriculumsearch/src/main/webapp/jsp/cargos.jsp b/curriculumsearch/src/main/webapp/jsp/cargos.jsp
index acda338..bdfaec3 100644
--- a/curriculumsearch/src/main/webapp/jsp/cargos.jsp
+++ b/curriculumsearch/src/main/webapp/jsp/cargos.jsp
@@ -8,6 +8,7 @@ contentType="text/html;charset=UTF-8" language="java" %>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Cargo</title>
+    <link href="../css/cargoStyle.css" rel="stylesheet" type="text/css"/>
     <link
       href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
       rel="stylesheet"
diff --git a/curriculumsearch/src/main/webapp/jsp/convocatoria-form.jsp b/curriculumsearch/src/main/webapp/jsp/convocatoria-form.jsp
index 6653ffd..bdc52a3 100644
--- a/curriculumsearch/src/main/webapp/jsp/convocatoria-form.jsp
+++ b/curriculumsearch/src/main/webapp/jsp/convocatoria-form.jsp
@@ -9,6 +9,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Convocatoria</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link href="../css/cargoStyle.css" rel="stylesheet" type="text/css"/>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
 </head>
 <body>
@@ -16,7 +17,7 @@
     <jsp:include page="alerts.jsp"/>
     <div class="container-xxl my-md-4 bd-layout">
     <h2>Agregar Convocatoria</h2>
-    <div class="p-3 mb-2 bg-light text-dark border border-light ">
+    <div class="p-3 mb-2 " style="background-color: transparent;">
         <form:form action="/convocatoria/${convocatoria.id == null ? '' : convocatoria.id}" method="post" modelAttribute="convocatoria">
             <div class="mb-3 col-3">
                 <form:label path="fechaInicioS" class="form-label">Fecha inicial</form:label>
diff --git a/curriculumsearch/src/main/webapp/jsp/convocatorias.jsp b/curriculumsearch/src/main/webapp/jsp/convocatorias.jsp
index cdec6d8..1e49265 100644
--- a/curriculumsearch/src/main/webapp/jsp/convocatorias.jsp
+++ b/curriculumsearch/src/main/webapp/jsp/convocatorias.jsp
@@ -9,6 +9,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Cargo</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link href="../css/cargoStyle.css" rel="stylesheet" type="text/css"/>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
 </head>
 <body >
diff --git a/curriculumsearch/src/main/webapp/jsp/detallepostulante.jsp b/curriculumsearch/src/main/webapp/jsp/detallepostulante.jsp
index 3eeaffc..c7c5387 100644
--- a/curriculumsearch/src/main/webapp/jsp/detallepostulante.jsp
+++ b/curriculumsearch/src/main/webapp/jsp/detallepostulante.jsp
@@ -19,12 +19,11 @@
         <h2 style="text-align: center;">DETALLE POSTULANTE</h2>
         <div style="padding: 10px;margin: 3px;border: 1px solid black;">
        
-            <br><label>INFORMACION GENERAL</label><br>     
+            <br><b><i><label>INFORMACION GENERAL</label></i></b><br>     
             <label>Id: ${postulante.id}</label><br>
             <label>Nombre: ${postulante.nombre}</label><br>
             <label>Apellido ${postulante.apellido}</label><br>
-            <label>Tipo de documento: ${postulante.tipoDocumento}</label><br>
-            <label>Cedula: ${postulante.nroDocument}</label><br>
+            <label>${postulante.tipoDocumento}: ${postulante.nroDocument} </label><br>
             <label>Correo: ${postulante.correo}</label><br>
             <label>Departamento: ${postulante.getCiudad().getDepartamento().getNombre()}</label><br>
             <label>Ciudad: ${postulante.getCiudad().getNombre()}</label><br>
@@ -38,13 +37,13 @@
             <label>Disponibilidad: ${postulante.disponibilidad}</label><br>
             <label>Estado del Postulante: ${postulante.estadoPostulante.getEstado()}</label><br>
             <label>Comentario RRHH: ${postulante.getComentarioRRHH()}</label><br>   
-            <br><label>TECNOLOGIAS</label><br>
+            <br><b><i><label>TECNOLOGIAS</label></b></i><br>
             <c:forEach items="${postulante.tecnologias}" var="detalle_tecnologia">
                 <label>Tecnologias: ${detalle_tecnologia.getTecnologia().getNombre()} -</label>
                 <label>Nivel de Tecnologia: ${detalle_tecnologia.getNivel()}</label><br>
             </c:forEach>
 
-            <br><label>EXPERIENCIAS</label><br>
+            <br><b><i><label>EXPERIENCIAS</label></b></i><br>
            
             <c:forEach items="${postulante.experiencias}" var="detalle_experiencia">
                 <label>Institucion: ${detalle_experiencia.getInstitucion()}</label><br>
@@ -56,7 +55,7 @@
                 <label>Motivo de salida: ${detalle_experiencia.getMotivoSalida()}</label><br>
             </c:forEach>
 
-            <br><label>ESTUDIOS</label><br>
+            <br><b><i><label>ESTUDIOS</label></b></i><br>
 
             <c:forEach items="${postulante.estudios}" var="detalle_estudios">
                 <label>Institucion: ${detalle_estudios.getInstitucion().getNombre()}</label><br>
@@ -68,7 +67,7 @@
                 <label>Estado: ${detalle_estudios.getEstado()}</label><br>
             </c:forEach>
 
-            <br><label>REFERENCIA PERSONAL</label><br>
+            <br><b><i><label>REFERENCIA PERSONAL</label></b></i><br>
 
             <c:forEach items="${postulante.referencias}" var="detalle_referencias">
                 <label>Nombre: ${detalle_referencias.getNombre()}</label>
@@ -76,7 +75,7 @@
                 <label>Telefono: ${detalle_referencias.getTelefono()}</label><br>
             </c:forEach>
            
-            <br><label>CARGOS AL CUAL POSTULA</label><br>
+            <br><b><i><label>CARGOS AL CUAL POSTULA</label></b></i><br>
 
             <c:forEach items="${postulante.postulaciones}" var="convocatoria">
                 <label>Nombre: ${convocatoria.getCargo().getNombre()}</label><br>
@@ -85,7 +84,7 @@
 
         </div>     
         <div style="padding:10px ;margin: 5px;border: 3px solid black;">
-            <h2>Cambiar Estado del Postulante y Comentario de RRHH</h2>
+            <b><i><h2>Cambiar Estado del Postulante y Comentario de RRHH</h2></b></i>
             <form:form class="needs-validation" method="post" modelAttribute="postulante">
                 <form:label path="estadoPostulante" class="form-label">Estado</form:label>
                 <div class="inputs">
diff --git a/curriculumsearch/src/main/webapp/jsp/detallepostulante2.jsp b/curriculumsearch/src/main/webapp/jsp/detallepostulante2.jsp
new file mode 100644
index 0000000..953a278
--- /dev/null
+++ b/curriculumsearch/src/main/webapp/jsp/detallepostulante2.jsp
@@ -0,0 +1,164 @@
+
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
+<!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">
+    <title>Curriculum vitae</title>
+    <link href="../css/detallePostulantestyle.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+</head>
+<body class="container">
+    <header>
+        <div>
+            <br>
+            <h2>&nbsp;&nbsp;&nbsp;&nbsp; ${postulante.nombre} ${postulante.apellido}</h2>    
+            <h3>&nbsp;&nbsp;&nbsp;&nbsp; ${postulante.tipoDocumento}: ${postulante.nroDocument}</h3>
+            <h3>&nbsp;&nbsp;&nbsp;&nbsp; Correo: ${postulante.correo}</h3>
+            <br>
+        </div>
+    </header>
+    <section>
+        <article>
+            <br>
+            <h2>&nbsp;&nbsp;Informacion Personal</h2>
+            <ul>
+                <li>
+                    Direccion: ${postulante.getCiudad().getDepartamento().getNombre()},${postulante.getCiudad().getNombre()}
+                </li>
+                <li>
+                    Telefono: ${postulante.telefono}
+                </li>
+                <li>
+                    Fecha de nacimiento: ${postulante.fechaNacimiento}
+                </li>
+                <li>
+                    Nivel de ingles:&nbsp;&nbsp;<progress value="${postulante.nivelIngles}" max="5"> 
+                </li>
+                <li>
+                    Estado civil: ${postulante.estadoCivil}
+                </li>
+                <li>
+                    Nacionalidad: ${postulante.nacionalidad}
+                </li>
+                <li>
+                    Disponibilidad: ${postulante.disponibilidad}
+                </li>
+                <li>
+                    Resumen: ${postulante.resumen}
+                </li>
+            </ul>
+            <br>
+            <h2>&nbsp;&nbsp;TECNOLOGIAS</h2>
+            <ul>
+                <c:forEach items="${postulante.tecnologias}" var="detalle_tecnologia">
+                    <label>Tecnologias: ${detalle_tecnologia.getTecnologia().getNombre()} &nbsp;&nbsp;<progress value="${detalle_tecnologia.getNivel()}" max="5"></progress></label><br>
+                </c:forEach>
+            </ul>
+            <br>
+            <h2>&nbsp;&nbsp;Cargo al que Postula</h2>
+            <ul>
+                <c:forEach items="${postulante.postulaciones}" var="convocatoria">
+                    <li>Nombre: ${convocatoria.getCargo().getNombre()}</li><br>
+                </c:forEach>
+            </ul>
+            <br>
+            <h2>&nbsp;&nbsp;Estado RRHH</h2>
+            <ul>
+                <li>Estado del Postulante: ${postulante.estadoPostulante.getEstado()}</li>
+                <li>Comentario RRHH: ${postulante.getComentarioRRHH()}</li>
+                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">Cambiar</button>
+                  
+            </ul>
+        </article>
+        <aside>
+            <br>
+            <h2>Informacion Academica</h2>
+            <ul>
+                <c:forEach items="${postulante.estudios}" var="detalle_estudios">
+                    <label>Institucion: ${detalle_estudios.getInstitucion().getNombre()}</label><br>
+                    <label>Tipo de estudio: ${detalle_estudios.getTipoDeEstudio()}</label><br>  
+                    <label>Tema de estudio: ${detalle_estudios.getTemaDeEstudio()}</label><br>     
+                    <label>Fecha Inicio: ${detalle_estudios.getFechaDesde()}</label><br>
+                    <label>Fecha Fin: ${detalle_estudios.getFechaHasta()}</label><br>
+                    <label>Estado: ${detalle_estudios.getEstado()}</label><br>
+                    <br><br>
+                </c:forEach>
+            </ul>
+            <br>
+            <h2>EXPERIENCIAS</h2>
+            <ul>
+                <c:forEach items="${postulante.experiencias}" var="detalle_experiencia">
+                    <label>Institucion: ${detalle_experiencia.getInstitucion()}</label><br>
+                    <label>Fecha Inicio: ${detalle_experiencia.getFechaDesde()}</label><br>
+                    <label>Fecha Fin: ${detalle_experiencia.getFechaHasta()}</label><br>
+                    <label>Referencia: ${detalle_experiencia.getNombreReferencia()}</label><br>
+                    <label>Telefono de la referencia: ${detalle_experiencia.getTelefonoReferencia()}</label><br>
+                    <label>Cargo: ${detalle_experiencia.getCargo()}</label><br>
+                    <label>Motivo de salida: ${detalle_experiencia.getMotivoSalida()}</label><br>
+                    </c:forEach>
+            </ul>
+            <br> 
+            <h2>Referencias</h2>
+            <ul>
+                <c:forEach items="${postulante.referencias}" var="detalle_referencias">
+                    <label>Nombre: ${detalle_referencias.getNombre()}</label><br>
+                    <label>Relacion: ${detalle_referencias.getRelacion()}</label><br>
+                    <label>Telefono: ${detalle_referencias.getTelefono()}</label><br>
+                </c:forEach>
+            </ul>   
+        </aside>
+        
+    </section>
+    <!-- Modal -->
+    <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+            <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>
+            </div>
+            <div class="modal-body">
+                <form:form class="needs-validation" method="post" modelAttribute="postulante">
+                    <form:label path="estadoPostulante" class="form-label">Estado</form:label>
+                    <div class="inputs">
+                        <form:select class="form-select" path="estadoPostulante" aria-label="Default select example">
+                            <c:forEach items="${estadoP}" var="estadoPostulante">
+                                        <c:choose>
+                                            <c:when test="${estadoPostulante.getEstado()=='Nuevo' }">
+                                            </c:when>
+                                            <c:otherwise>
+                                                <form:option value="${estadoPostulante}">${estadoPostulante.getEstado()}</form:option>
+                                            </c:otherwise>
+                                        </c:choose>    
+                            </c:forEach>
+                        </form:select>
+                    </div>
+                    <div class="inputs">
+                        <form:label path="comentarioRRHH" class="form-label">ComentarioRRHH</form:label>
+                        <form:textarea  class="form-control" path="comentarioRRHH" id="comentarioRRHH"></form:textarea>
+                    </div>
+                    <input type="submit" value="Guardar"/>
+                </form:form> 
+            </div>
+            <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+        </div>
+    </div>  
+      
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+    
+</body>
+  
+</html>
\ No newline at end of file
diff --git a/curriculumsearch/src/main/webapp/jsp/index.jsp b/curriculumsearch/src/main/webapp/jsp/index.jsp
index 6112019..4f0e442 100644
--- a/curriculumsearch/src/main/webapp/jsp/index.jsp
+++ b/curriculumsearch/src/main/webapp/jsp/index.jsp
@@ -9,6 +9,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <title>Document</title>
+    <link href="../css/indexStyle.css" rel="stylesheet" type="text/css"/>
+    
 </head>
 <body>
     <jsp:include page="header.jsp"/>
diff --git a/curriculumsearch/src/main/webapp/jsp/login.jsp b/curriculumsearch/src/main/webapp/jsp/login.jsp
index b426f3e..0f3f1ca 100644
--- a/curriculumsearch/src/main/webapp/jsp/login.jsp
+++ b/curriculumsearch/src/main/webapp/jsp/login.jsp
@@ -8,21 +8,22 @@
     <title>Login</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <link href="https://getbootstrap.com/docs/4.0/examples/signin/signin.css" rel="stylesheet" crossorigin="anonymous">
-
+    <link href="../css/style.css" rel="stylesheet" type="text/css"/>
 </head>
 <body>
 <jsp:include page="alerts.jsp"/>
-<section class="vh-100" style="background-color: #508bfc;">
+<!-- <section class="vh-100" style="background-color: #508bfc;"> -->
     <div class="container py-5 h-100">
-        <div class="row d-flex justify-content-center align-items-center h-100">
+        <div class="row d-flex justify-content-center align-items-center h-10">
             <div class="col-12 col-md-8 col-lg-6 col-xl-5">
                 <div class="card shadow-2-strong" style="border-radius: 1rem;">
                     <div class="card-body p-5 text-center">
 
-
-
                         <form:form method="post" action="/login">
                             <h3 class="mb-5">Ingresar</h3>
+                            <div align="center">
+                                <img src="../img/LogoRoshka.jpg" class="rounded img-fluid" id="image" style="width:auto;height:auto;" alt=""/>
+                            </div>
                             <div class="form-outline mb-4">
                                 <input type="email" id="typeEmailX-2" class="form-control form-control-lg" name="email" placeholder="example@example.com"/>
                                 <label class="form-label" for="typeEmailX-2">Email</label>
@@ -51,6 +52,7 @@
     </div>
 </section>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>
 
diff --git a/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp b/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp
index 649ba5d..369c003 100644
--- a/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp
+++ b/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp
@@ -10,123 +10,8 @@
 
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <title>Hello, world!</title>
-
-    
-    <style type="text/css" media="screen">
-          body {
-                  background-color: #506BEE
-              }
-
-              .card {
-                  border: none
-              }
-
-              .image {
-                  position: relative
-              }
-
-              .image span {
-                  background-color: #506BEE;
-                  color: #fff;
-                  padding: 6px;
-                  height: 30px;
-                  width: 30px;
-                  border-radius: 50%;
-                  font-size: 13px;
-                  position: absolute;
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                  top: -0px;
-                  right: 0px
-              }
-
-              .user-details h4 {
-                  color: #506BEE
-              }
-
-              .ratings {
-                  font-size: 30px;
-                  font-weight: 600;
-                  display: flex;
-                  justify-content: left;
-                  align-items: center;
-                  color: #f9b43a
-              }
-
-              .user-details span {
-                  text-align: left
-              }
-
-              .inputs label {
-                  display: flex;
-                  margin-left: 3px;
-                  font-weight: 500;
-                  font-size: 13px;
-                  margin-bottom: 4px
-              }
-
-              .inputs input {
-                  font-size: 14px;
-                  height: 40px;
-                  border: 2px solid #ced4da
-              }
-
-              .inputs input:focus {
-                  box-shadow: none;
-                  border: 2px solid #506BEE
-              }
-
-              .about-inputs label {
-                  display: flex;
-                  margin-left: 3px;
-                  font-weight: 500;
-                  font-size: 13px;
-                  margin-bottom: 4px
-              }
-
-              .about-inputs textarea {
-                  font-size: 14px;
-                  height: 100px;
-                  border: 2px solid #ced4da;
-                  resize: none
-              }
-
-              .about-inputs textarea:focus {
-                  box-shadow: none
-              }
-
-              .btn {
-                  font-weight: 600
-              }
-
-              .btn:focus {
-                  box-shadow: none
-              }
-
-              select {
-                  display: block;
-                  width: 100%;
-                  border: 1px solid #ddd;
-                  border-radius: 10px;
-                  height: 40px;
-                  padding: 5px 10px
-              }
-
-              select:focus {
-                  outline: none
-              }
-
-              .add-experience:hover {
-                  background: #506BEE;
-                  color: #fff;
-                  cursor: pointer;
-                  border: solid 1px #506BEE
-              }
-    </style>
-
-
+    <title>Curriculum</title>
+    <link href="../css/formPostulanteStyle.css" rel="stylesheet" type="text/css"/>
   </head>
 
   <body class="container">
@@ -232,8 +117,8 @@
                                   </div>
                               
                         
-                                  <div class="inputs col-md-6"> <label for="nivelIngles" class="form-label"> Nivel de ingles</label> 
-                                    <select name="nivelIngles" id="nivelIngles" class="bg-light">
+                                  <div class="inputs mb-3 col-md-4"> <label for="nivelIngles" class="form-label"> Nivel de ingles</label> 
+                                    <select name="nivelIngles" id="nivelIngles" class="content-select">
                                     <option value="1" selected>Ingles muy basico</option>
                                     <option value="2" >Comprendo algunas cosas y puedo leer con la ayuda del traductor</option>
                                     <option value="3" >Puedo leer tranquilamente</option>
@@ -242,41 +127,41 @@
                                     </select> 
                                   </div>
                                 
-                                  <div class="inputs mb-3 col-md-6"> 
+                                  <div class="inputs mb-3 col-md-4"> 
                                     <label for="disponibilidad" class="form-label"> Disponibilidad</label> 
-                                    <select name="disponibilidad" id="disponibilidad" class="bg-light">
+                                    <select name="disponibilidad" id="disponibilidad" class="content-select">
                                       <c:forEach items="${disponibilidades}" var="disponibilidad">
                                         <option value="${disponibilidad.getCode()}">${disponibilidad.getDescripcion()}</option>
                                       </c:forEach>
                                     
                                   </select> </div>
                                 
-                                  <div class="inputs mb-3 col-md-6"> 
+                                  <div class="inputs mb-3 col-md-4"> 
                                     <label for="estadoCivil" class="form-label"> Estado Civil</label> 
-                                    <select name="estadoCivil" id="estadoCivil" class="bg-light">
+                                    <select name="estadoCivil" id="estadoCivil" class="content-select">
                                       <c:forEach items="${estadosCiviles}" var="estadoCivil">
                                         <option value="${estadoCivil.getDescripcion()}">${estadoCivil.getDescripcion()}</option>
                                       </c:forEach>
                                     
                         
                                   </select> </div>
-                                  <div class="inputs p-3 py-5">
-                                    <div class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#cargoForm"><i class="fa fa-plus"></i>&nbsp;Cargo al que postulas</span></div><br>   
+                                  <div >
+                                    <div  class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#cargoForm"><i  class="fa fa-plus"></i>&nbsp;Cargo al que postulas</span></div><br>   
                                   </div>
 
                                   <div class="mt-3 gap-2 d-flex justify-content-between" id="cargos">
                                   </div>
 
-                                  <div class="inputs p-3 py-5">
-                                    <div class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#experienciaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Experiencia</span></div><br>   
+                                  <div >
+                                    <div style="color:blue" class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#experienciaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Experiencia</span></div><br>   
                                   </div>
 
                                   <div class="mt-3 gap-2 d-flex justify-content-between" id="experiencias">
                                   </div>
                                     
                                
-                                  <div class="inputs p-3 py-5">
-                                   <div class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#estudioForm"><i class="fa fa-plus"></i>&nbsp;Agregar Estudio</span></div><br>   
+                                  <div >
+                                   <div style="color:blue" class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#estudioForm"><i class="fa fa-plus"></i>&nbsp;Agregar Estudio</span></div><br>   
                                   </div>
                                  
                                   <div class="mt-3 gap-2 d-flex justify-content-between" id="estudios">
@@ -284,16 +169,16 @@
                             
                                
                                
-                                <div class="inputs p-3 py-5">
-                                  <div class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#tecnologiaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Tecnologia</span></div><br>   
+                                <div >
+                                  <div style="color:blue" class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#tecnologiaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Tecnologia</span></div><br>   
                                 </div>
                                 
                                 
                                 <div class="mt-3 gap-2 d-flex justify-content-between" id="tecnologias"> 
                                 </div>
 
-                                <div class="inputs p-3 py-5">
-                                  <div class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#referenciaForm"><i class="fa fa-plus"></i>&nbsp;Referencias Personales</span></div><br>   
+                                <div >
+                                  <div style="color:blue" class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#referenciaForm"><i class="fa fa-plus"></i>&nbsp;Referencias Personales</span></div><br>   
                                 </div>
                                 <div class="mt-3 gap-2 d-flex justify-content-between" id="referencia"> 
                                 </div>
diff --git a/curriculumsearch/src/main/webapp/jsp/postulantes.jsp b/curriculumsearch/src/main/webapp/jsp/postulantes.jsp
index bbbedb1..81c5e5f 100644
--- a/curriculumsearch/src/main/webapp/jsp/postulantes.jsp
+++ b/curriculumsearch/src/main/webapp/jsp/postulantes.jsp
@@ -8,6 +8,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link href="../css/cargoStyle.css" rel="stylesheet" type="text/css"/>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
     <title>Lista de postulantes</title>
 </head>
@@ -51,6 +52,7 @@
             </c:forEach>
           </select>
           <br>
+          <br>
           <label for="lvlEng">Nivel de Ingles</label>
           <select name="lvlEng" id="lvlEng">
             <option value="">Seleccione una opcion</option>
diff --git a/curriculumsearch/src/main/webapp/jsp/tecnologia-form.jsp b/curriculumsearch/src/main/webapp/jsp/tecnologia-form.jsp
index 0470123..5d1974e 100644
--- a/curriculumsearch/src/main/webapp/jsp/tecnologia-form.jsp
+++ b/curriculumsearch/src/main/webapp/jsp/tecnologia-form.jsp
@@ -13,7 +13,7 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
     <title>Agregar Tecnologia</title>
-
+    <link href="../css/cargoStyle.css" rel="stylesheet" type="text/css"/>
 
 </head>
 <body>
@@ -21,7 +21,7 @@
     <jsp:include page="alerts.jsp"/>
     <div class="container-xxl my-md-4 bd-layout">
         <h2>Agregar Tecnologia</h2>
-        <div class="p-3 mb-2 bg-light text-dark border border-light">
+        <div class="p-3 mb-2 ">
 
             <form:form action="/tecnologia/${tecnologia.id == null ? '' : tecnologia.id}"  method="post" modelAttribute="tecnologia" class="row row-cols-lg-auto g-3 align-items-center">
             <div class="col-12">
diff --git a/curriculumsearch/src/main/webapp/jsp/tecnologias.jsp b/curriculumsearch/src/main/webapp/jsp/tecnologias.jsp
index b0f6899..22465fd 100644
--- a/curriculumsearch/src/main/webapp/jsp/tecnologias.jsp
+++ b/curriculumsearch/src/main/webapp/jsp/tecnologias.jsp
@@ -9,6 +9,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Tecnologia</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link href="../css/cargoStyle.css" rel="stylesheet" type="text/css"/>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
 </head>
 <body>
diff --git a/curriculumsearch/webapp/css/styles.min.css b/curriculumsearch/webapp/css/styles.min.css
new file mode 100644
index 0000000..8e40205
--- /dev/null
+++ b/curriculumsearch/webapp/css/styles.min.css
@@ -0,0 +1,32 @@
+body{
+    background-image:url(/img/FondoRoshka.jpg?h=4dba38685316d6e65f6e24d740c4c6b5);
+    background-size:cover;
+    background-repeat:no-repeat;
+    height:auto;width:auto}
+/* #form{max-width:333px;
+    width:90%;position:relative;
+    left:50%;
+    top:10%;padding:40px;
+    border-radius:4px;
+    transform:translate(-50%,10%);
+    color:#fff;
+    box-shadow:3px 3px 4px rgba(0,0,0,.2)}
+#head{text-align:center}
+#image{margin:auto;width:50%;
+    padding:10px;max-height:175px;
+    max-width:175px}
+#linkas{display:block;
+    text-align:center;
+    font-size:12px;
+    opacity:.9;
+    text-decoration:none}
+#butonas{background:#70b2d0;
+    outline:0;
+    text-shadow:initial}
+#formum,#formum2{background:0 0;
+    border:none;
+    border-bottom:1px solid #434a52;
+    border-radius:0;
+    box-shadow:none;
+    outline:0;
+    color:inherit} */
\ No newline at end of file