diff --git a/src/components/FeaturedBlogs/FeaturedBlogs.js b/src/components/FeaturedBlogs/FeaturedBlogs.js
index f5788f07..4232a113 100644
--- a/src/components/FeaturedBlogs/FeaturedBlogs.js
+++ b/src/components/FeaturedBlogs/FeaturedBlogs.js
@@ -5,7 +5,7 @@ import BlogArticle from "../BlogPage/BlogArticle/BlogArticle"
 
 const FeaturedBlogs = ({ data }) => {
   return (
-    <div className="contaner featured" id={data.strapi_component + "-" + data.id}>
+    <div className="container featured" id={data.strapi_component + "-" + data.id}>
       <h2>{data.title}</h2>
       <h6 className="px-5">{data.subtitle}</h6>
 
diff --git a/src/components/FeaturedBlogs/featuredBlogs.scss b/src/components/FeaturedBlogs/featuredBlogs.scss
index 3987ac9f..5d6c03f2 100644
--- a/src/components/FeaturedBlogs/featuredBlogs.scss
+++ b/src/components/FeaturedBlogs/featuredBlogs.scss
@@ -1,11 +1,13 @@
 @import "../../styles/global.scss";
 
 .featured {
-    color: $primary;
+  color: $primary;
   h2 {
+    margin-top: 2em;
     flex-grow: 1;
     text-align: center;
     font-weight: 700;
+    text-transform: uppercase;
   }
   h6 {
     text-align: center;
@@ -14,12 +16,42 @@
   }
 
   &-blogs {
+    img {
+      object-fit: cover;
+    }
+
     display: flex;
     flex-direction: row;
     justify-content: center;
     & > * {
       flex-basis: 33%;
     }
+
+    .article {
+      &__container {
+        margin: 0.5em;
+        background-color: #efefef;
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        border-radius: 8px;
+        padding: 1em;
+        h6 {
+          text-align: left;
+          font-weight: 700;
+          font-size: 18px !important;
+
+        }
+      }
+      &__link{
+        button{
+          background: none;
+          color: $secondary;
+          text-decoration: underline;
+          padding: 0;
+          margin: 0 0 1em 0;
+        }
+      }
+    }
+
     @media screen and (max-width: $breakpoint-lg) {
       flex-direction: column;
     }
diff --git a/src/components/expandGrid/expandGrid.scss b/src/components/expandGrid/expandGrid.scss
index 662c1abf..046c4558 100644
--- a/src/components/expandGrid/expandGrid.scss
+++ b/src/components/expandGrid/expandGrid.scss
@@ -53,7 +53,7 @@
     flex: 0 1 calc(calc(100% / 3) - 10px);
   }
 
-  @media screen and (max-width: 890px) {
+  @media screen and (max-width: $breakpoint-md) {
     flex: 0 1 100%;
   }
 
@@ -68,7 +68,7 @@
   flex-direction: row;
   height: 100%;
   position: relative;
-  @media screen and (max-width: $breakpoint-xl) {
+  @media screen and (max-width: $breakpoint-md) {
     flex-direction: column;
     align-items: unset;
   }
@@ -93,7 +93,7 @@
     margin-right: 0;
     min-width: 33%;
     max-width: 33%;
-    @media screen and (max-width: $breakpoint-xl) {
+    @media screen and (max-width: $breakpoint-md) {
       min-width: 100%;
       max-width: 100%;
       height: 400px;
@@ -135,7 +135,7 @@
   transition: opacity 200ms ease;
   opacity: 1;
   color: black;
-  width: 300px;
+  width: 90%;
   p {
     padding: 0;
     margin: 0;
diff --git a/src/context/themeContext.js b/src/context/themeContext.js
index 7d1b846f..a8db6678 100644
--- a/src/context/themeContext.js
+++ b/src/context/themeContext.js
@@ -11,7 +11,6 @@ const themes = {
     "--primary-container": "#faf8f8",
     "--title-jobs": "#5682c6",
     "--jobs-hover": "#f0f0f0",
-
     "--secondary": "#3f6be8",
     "--secondary-container": "#25cad3",
     "--border-bottom": "#cdcdcd",