diff --git a/curriculumsearch/src/main/webapp/jsp/cargos.jsp b/curriculumsearch/src/main/webapp/jsp/cargos.jsp
index dad22a0..cfa6c05 100644
--- a/curriculumsearch/src/main/webapp/jsp/cargos.jsp
+++ b/curriculumsearch/src/main/webapp/jsp/cargos.jsp
@@ -20,40 +20,45 @@ contentType="text/html;charset=UTF-8" language="java" %>
             </form>
             <a href="/cargo">Agregar Nuevo Cargo</a>
           </div>
-          <div>
-            <table class="table">
-              <thead>
-                <tr>
-                  <th scope="col">#</th>
-                  <th scope="col">Cargo</th>
-                </tr>
-              </thead>
-              <tbody>
-                <c:forEach items="${cargos}" var="cargo" varStatus="sta">
+          <div class="card text-dark bg-light mt-3">
+        
+            <div class="card-body">
+              <div class="table-responsive">
+              <table class="table">
+                <thead>
                   <tr>
-                    <th scope="row">${sta.index+1}</th>
-                    <td>${cargo.getNombre()}</td>
-                    <td>
-                      <a href="/convocatorias?cargoId=${cargo.id}"
-                        >Ver Convocatorias</a
-                      >
-                    </td>
-                    <td><a href="/cargo/${cargo.id}">Editar cargo</a></td>
+                    <th scope="col">#</th>
+                    <th scope="col">Cargo</th>
                   </tr>
-                </c:forEach>
-              </tbody>
-            </table>
+                </thead>
+                <tbody>
+                  <c:forEach items="${cargos}" var="cargo" varStatus="sta">
+                    <tr>
+                      <th scope="row">${sta.index+1}</th>
+                      <td>${cargo.getNombre()}</td>
+                      <td>
+                        <a href="/convocatorias?cargoId=${cargo.id}"
+                          >Ver Convocatorias</a
+                        >
+                      </td>
+                      <td><a href="/cargo/${cargo.id}">Editar cargo</a></td>
+                    </tr>
+                  </c:forEach>
+                </tbody>
+              </table>
+              </div>
+            </div>
           </div>
-        </div>
-        <div class="card-footer">
-          <div>
-            <nav aria-label="Page navigation example">
-              <ul class="pagination">
-                <c:forEach begin="1" end="${pages}" var="nro">
-                  <li class="page-item ${(param.nroPagina == null and nro == 1)  or param.nroPagina == nro-1 ? 'active' : ''}"><a class="page-link" href="javascript:buscarPagina(${nro})">${nro}</a></li>
-                </c:forEach>
-              </ul>
-            </nav>
+          <div class="card-footer">
+            <div>
+              <nav aria-label="Page navigation example">
+                <ul class="pagination">
+                  <c:forEach begin="1" end="${pages}" var="nro">
+                    <li class="page-item ${(param.nroPagina == null and nro == 1)  or param.nroPagina == nro-1 ? 'active' : ''}"><a class="page-link" href="javascript:buscarPagina(${nro})">${nro}</a></li>
+                  </c:forEach>
+                </ul>
+              </nav>
+            </div>
           </div>
         </div>
       </div>  
diff --git a/curriculumsearch/src/main/webapp/jsp/convocatorias.jsp b/curriculumsearch/src/main/webapp/jsp/convocatorias.jsp
index f1effb4..73dc1ae 100644
--- a/curriculumsearch/src/main/webapp/jsp/convocatorias.jsp
+++ b/curriculumsearch/src/main/webapp/jsp/convocatorias.jsp
@@ -27,9 +27,12 @@
                 <input type="submit" value="Buscar">
             </form>
         </div>
-        <div>
-            <a href="/convocatoria">Agregar Nueva Convocatoria</a>
-            <table class="table">
+        <a href="/convocatoria">Agregar Nueva Convocatoria</a>
+        <div class="card text-dark bg-light mt-3">
+        
+            <div class="card-body">
+              <div class="table-responsive">
+                <table class="table">
                 <thead>
                   <tr>
                     <th scope="col">#</th>
@@ -56,8 +59,9 @@
                   
                  
                 </tbody>
-              </table>
-             
+                </table>
+             </div>
+            </div>
         </div>
     </layout:put>
     <layout:put block="scripts" type="APPEND">
diff --git a/curriculumsearch/src/main/webapp/jsp/tecnologias.jsp b/curriculumsearch/src/main/webapp/jsp/tecnologias.jsp
index 11a0930..4577271 100644
--- a/curriculumsearch/src/main/webapp/jsp/tecnologias.jsp
+++ b/curriculumsearch/src/main/webapp/jsp/tecnologias.jsp
@@ -15,41 +15,47 @@
             </form>
             <a href="/tecnologia">Agregar Nueva Tecnologia</a>
         </div>
-        <div>
-            <table class="table">
-                <thead>
-                  <tr>
-                    <th scope="col">#</th>
-                    <th scope="col">Tecnologia</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  
-                    <c:forEach items="${tecnologias}" var="tecnologia" varStatus="sta">
-                        <tr>
-                            <th scope="row">${sta.index+1}</th>
-                            <td>${tecnologia.getNombre()}</td>
-                           
-                            <td><a href="/tecnologia/${tecnologia.id}">Editar tecnologia</a></td>
-                        </tr>
-                    </c:forEach>
+        <div class="card text-dark bg-light mt-3">
+        
+          <div class="card-body">
+            <div class="table-responsive">
+              <table class="table">
+                  <thead>
+                    <tr>
+                      <th scope="col">#</th>
+                      <th scope="col">Tecnologia</th>
+                      <th scope="col"></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    
+                      <c:forEach items="${tecnologias}" var="tecnologia" varStatus="sta">
+                          <tr>
+                              <th scope="row">${sta.index+1}</th>
+                              <td>${tecnologia.getNombre()}</td>
+                            
+                              <td><a href="/tecnologia/${tecnologia.id}"><i class="bi bi-pencil-fill"></i></a></td>
+                          </tr>
+                      </c:forEach>
+                      
                     
                   
-                 
-                </tbody>
+                  </tbody>
               </table>
-        </div>
-        <div class="card-footer">
-            <div>
-              <nav aria-label="Page navigation example">
-                <ul class="pagination">
-                  <c:forEach begin="1" end="${pages}" var="nro">
-                    <li class="page-item ${(param.nroPagina == null and nro == 1)  or param.nroPagina == nro-1 ? 'active' : ''}"><a class="page-link" href="javascript:buscarPagina(${nro})">${nro}</a></li>
-                  </c:forEach>
-                </ul>
-              </nav>
             </div>
           </div>
+          <div class="card-footer">
+              <div>
+                <nav aria-label="Page navigation example">
+                  <ul class="pagination">
+                    <c:forEach begin="1" end="${pages}" var="nro">
+                      <li class="page-item ${(param.nroPagina == null and nro == 1)  or param.nroPagina == nro-1 ? 'active' : ''}"><a class="page-link" href="javascript:buscarPagina(${nro})">${nro}</a></li>
+                    </c:forEach>
+                  </ul>
+                </nav>
+              </div>
+            </div>
+        </div>
         </div>