diff --git a/app/courses/page.js b/app/courses/page.js
index f756fa6..dba620d 100644
--- a/app/courses/page.js
+++ b/app/courses/page.js
@@ -23,11 +23,11 @@ export default function Courses() {
         <h1>Courses</h1>
       </div>
       <main>
-        <section className="lg:m-28 md:m-14 sm:m-8">
-          <div>courses filter</div>
+        <section className="lg:mx-28 md:mx-14 sm:mx-8 lg:my-12 md:my-8 sm:my-4">
+  
 
           <div className=" grid gap-4 md:grid-cols-2 sm:grid-cols-1">
-            {courses.map(({ date, gradient, title, description, route }) => {
+            {courses.map(({ date, gradient, edition, title, description, route }) => {
               return (
                 <div
                   key={title}
@@ -41,7 +41,7 @@ export default function Courses() {
                           <div>{date}</div>
                         </div>
                         <div className="year_tag">
-                          <div> Primera edición</div>
+                          <div> {edition}</div>
                         </div>
                         </div>
                         <div className="course_route">
diff --git a/app/projects/page.js b/app/projects/page.js
index 92fb660..34b38e0 100644
--- a/app/projects/page.js
+++ b/app/projects/page.js
@@ -46,7 +46,7 @@ export default function Projects() {
 			                );
 			        	})}
 			        </section> */}
-        <section>
+        <section className="lg:mx-28 md:mx-14 sm:mx-8 lg:my-12 md:my-8 sm:my-4">
           <ProjectCard />
         </section>
       </main>
diff --git a/app/sass/partials/_courses.sass b/app/sass/partials/_courses.sass
index 89fb4da..b99b129 100644
--- a/app/sass/partials/_courses.sass
+++ b/app/sass/partials/_courses.sass
@@ -30,7 +30,7 @@ $windowWidth: 100vw
         .year_tag 
             display: flex
             div
-                background-color: rgb(0, 0, 0,0.4)
+                background-color: rgb(0, 0, 0,0.3)
                 display: flex
                 align-items: center
                 padding: 1px 8px 
@@ -38,8 +38,14 @@ $windowWidth: 100vw
                 border-radius: 4px
         .course_route
             border: 1px solid white
-            border-radius: 4px
+            border-radius: 24px
             padding: 0.2rem 0.8rem 0.6rem 0.8rem
+            transition: 200ms ease-in-out
+            &:hover
+                background: white
+                transition: 200ms ease-in-out
+                @apply text-blue-950
+
             a 
                 display: flex
             svg
@@ -49,12 +55,13 @@ $windowWidth: 100vw
                 font-size: 1rem
                 margin-left: 0.6rem
 
+
 @media (min-width: 770px)
     .course
         display: flex
         color: white
         font-weight: 400
-        height: $windowHeight  /2.25
+        height: $windowHeight  /2.5
         overflow: hidden    
         .card_container_top
             height: 32px
@@ -85,32 +92,32 @@ $windowWidth: 100vw
                 transition: ease-in-out 300ms
                 opacity: 0
                 display: none
-                transform: translateY(64%)
+           
                 margin-bottom: 0.6em
                 small
                     margin-top:0
                     display: block
-                    font-size: 0.85em
+                    font-size: 1.1rem
                     line-height: 1.4em
                     font-weight: 400
-                    max-height:80px
+                    max-height:160px
                     
                     
                 
         &:hover 
             .course_text_block
-                transform: translateY(0%)
+               
                 transition: ease-in-out 300ms
                 .course_description
                     position: relative
                     transition: ease-in-out 300ms
                     opacity: 1
-                    transform: translateY(0%)
+                  
                     max-height: $windowHeight/5
                     display: -webkit-box
                     small 
                         display: -webkit-box
-                        -webkit-line-clamp: 4
+                        -webkit-line-clamp: 6
                         -webkit-box-orient: vertical
                         overflow: hidden
                         text-overflow: ellipsis
@@ -144,7 +151,16 @@ $windowWidth: 100vw
         background: linear-gradient(to top, rgba(83,64,255,0.9) 0%, rgba(83,64,255,0.9) 30%, rgba(196,141,116,0.9) 100%), url($bg-img)
         background-size: contain
         background-position: center
-   
+
+.bg-yellow-gradient
+    background: linear-gradient(225deg,  rgba(255,127,0,0.8748686974789917)0%, rgba(192,112,168,0.8860731792717087) 100%), url($bg-img) 
+    background-size: contain
+    background-position: center 
+    &:hover 
+        background: linear-gradient(180deg, rgba(255,127,0,0.8748686974789917) 0%,rgba(133,90,186,0.930891106442577) 70%), url($bg-img)
+        background-size: contain
+        background-position: center
+
 .course_main 
     position: relative
     width: 100%
diff --git a/app/sass/partials/_projects.sass b/app/sass/partials/_projects.sass
index cf86781..fc9616d 100644
--- a/app/sass/partials/_projects.sass
+++ b/app/sass/partials/_projects.sass
@@ -4,11 +4,12 @@
 .project_cards
     .filter_options
         display: flex
-        
         button
             border-radius: 4px
             border-color: none
     .project_card
+        @apply bg-ca_blue-200
+        border-radius: 8px
         .year_and_cta
             display: flex
             .date
diff --git a/components/projectCard.js b/components/projectCard.js
index 6521350..d8f8e56 100644
--- a/components/projectCard.js
+++ b/components/projectCard.js
@@ -18,16 +18,18 @@ export default function projectCards(props) {
     }
   };
   return (
-    <div className="project_cards">
-      <div className="filter_options">
+    <div>
+    <div className="filter_options flex">
         <button onClick={() => handleCategoryChange("all")}>All</button>
         <button onClick={() => handleCategoryChange("ind")}>Projects - individual</button>
         <button onClick={() => handleCategoryChange("erg")}>Educational Research Group (GIE/ERG)</button>
         <button onClick={() => handleCategoryChange("other")}>Other</button>
       </div>
+    <div className="project_cards md:grid md:grid-cols-2 md:gap-4">
+      
       {projectCards.map(
         ({ date, route, title, subtitle, tags, category }, index) => (
-          <div key={index} className="project_card">
+          <div key={index} className="project_card mb-4 p-4 md:p-6">
             <div className="year_and_cta">
               <div className="date">{date}</div>
               <a href={route}>details</a>
@@ -41,5 +43,6 @@ export default function projectCards(props) {
         )
       )}
     </div>
+    </div>
   );
 }
diff --git a/constants/courses.js b/constants/courses.js
index a606bc8..08c2f08 100644
--- a/constants/courses.js
+++ b/constants/courses.js
@@ -1,6 +1,7 @@
 export const mycourses = [	
 	{	"date": "2023",
 		"logo": "/assets/img/courses/fondo-cursos.png",
+		"edition": "2º edición",
 		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=356",
 		"title": "Bases de Datos Relacionales y No Relacionales: conceptos, diseño y aplicación a entornos web",
 		"description": "Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas.",
@@ -9,6 +10,7 @@ export const mycourses = [
     {
 		"date": "2023",
 		"logo": "/assets/img/courses/fondo-cursos.png",
+		"edition": "2º edición",
 		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=378",
 		"title": "Desarrollo de aplicaciones con React y React Native",
 		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas.",
@@ -17,30 +19,34 @@ export const mycourses = [
     {
 		"date": "2023",
 		"logo": "/assets/img/courses/fondo-cursos.png",
+		"edition": "3º edición",
 		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=361",
 		"title": "Desarrollo de un Proyecto Fullstack con JavaScript",
 		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ",
-	    "gradient": "bg-blue-gradient",
+	    "gradient": "bg-purple-gradient",
 	},
     {
 		"date": "2021",
 		"logo": "/assets/img/courses/fondo-cursos.png",
+		"edition": "3º edición",
 		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=194",
 		"title": "Desarrollo Backend con Node.js, Express y BBDDs",
 		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ",
-		"gradient": "bg-purple-gradient",
+		"gradient": "bg-yellow-gradient",
 	},
 	{
 		"date": "2021",
 		"logo": "/assets/img/courses/fondo-cursos.png",
+		"edition": "11º edición",
 		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=256",
 		"title": "Desarrollo Frontend con HTML, CSS y JavaScript",
 		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ",
-		"gradient": "bg-blue-gradient",
+		"gradient": "bg-yellow-gradient",
 	},
 	{
 		"date": "2021",
 		"logo": "/assets/img/courses/fondo-cursos-png",
+		"edition": "4º edición",
 		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=267",
 		"title": "Gestión de proyectos software con Git y GitHub",
 		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ",
@@ -49,6 +55,7 @@ export const mycourses = [
     {
 		"date": "2021",
 		"logo": "/assets/img/courses/fondo-cursos.png",
+		"edition": "5º edición",
 		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=264",
 		"title": "Siete habilidades clave en la era digital",
 		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ",
@@ -57,6 +64,7 @@ export const mycourses = [
     {
 		"date": "2018",
 		"logo": "/assets/img/courses/fondo-cursos-png",
+		"edition": "2º edición",
 		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=51",
 		"title": "Introducción a LINUX como entorno de desarrollo de sistemas software",
 		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ",