diff --git a/src/components/DualSection/DualSection.scss b/src/components/DualSection/DualSection.scss
index 6c526901..375536f2 100644
--- a/src/components/DualSection/DualSection.scss
+++ b/src/components/DualSection/DualSection.scss
@@ -27,8 +27,13 @@
   }
 }
 
-
 .one_sec {
+  color: $primary;
+  &-background{
+    background-size: cover;
+    background-repeat: no-repeat;
+    padding: 1em 0 0 0;
+  }
   display: flex;
   flex-direction: row;
   justify-content: space-around;
@@ -36,13 +41,8 @@
   gap: 3em;
   padding: 3em 0;
   button {
-    background: $light-grey;
-    color: white;
-    font-weight: 500;
-    border-radius: 3px;
-    border: none;
-    padding: 0.3em;
-    a{
+    @include primaryBtn;
+    a {
       color: inherit;
     }
   }
@@ -51,30 +51,35 @@
     display: block;
   }
 
-  &-title{
+  &-title {
     flex-basis: 45%;
-    h3{
-      font-weight: 400;
+    h3 {
+      font-weight: 700;
+      font-size: 36px;
+      line-height: 40px;
+    }
+    &-body{
+      font-weight: 400 !important;
     }
   }
 
-  &-img{
+  &-img {
     flex-basis: 55%;
-    img{
+    img {
       width: 100%;
-      padding: 0 0 0 3em;
+      padding: 0;
     }
   }
 
   @media screen and (max-width: $breakpoint-xl) {
     flex-direction: column-reverse;
-    &-img{
+    &-img {
       flex-basis: 100%;
     }
-    &-title{
+    &-title {
       padding: 0 10vw;
       flex-basis: 100%;
     }
   }
-
 }
+
diff --git a/src/components/DualSection/OneSection.js b/src/components/DualSection/OneSection.js
index d0b5141e..91ebfbbb 100644
--- a/src/components/DualSection/OneSection.js
+++ b/src/components/DualSection/OneSection.js
@@ -1,25 +1,43 @@
 import React from "react"
+import { useTheme } from "../../context/themeContext"
 
 const OneSection = ({ data: { id, strapi_component, dualSectionPart } }) => {
-  const { title, button, description, image } = dualSectionPart
-    ? dualSectionPart[0]
-    : {}
+  const { theme } = useTheme()
+  const {
+    title,
+    button,
+    description,
+    image,
+    backgroundImage,
+    backgroundImageDark,
+  } = dualSectionPart ? dualSectionPart[0] : {}
 
   return (
-    <div className="one_sec container" id={strapi_component + "-" + id}>
-      <div className="one_sec-title">
-        <h1>{title}</h1>
-        <p>{description}</p>
-        {button && (
-          <button>
-            <a href={button.url} target="_blank" rel="noreferrer">
-              {button.content}
-            </a>
-          </button>
-        )}
-      </div>
-      <div className="one_sec-img">
-        <img src={image?.url} alt="one_sec" />
+    <div
+      className="one_sec-background"
+      style={{
+        backgroundImage: `url(${
+          theme === "dark" && backgroundImageDark?.url
+            ? backgroundImageDark?.url
+            : backgroundImage?.url
+        })`,
+      }}
+    >
+      <div className="one_sec container" id={strapi_component + "-" + id}>
+        <div className="one_sec-title">
+          <h3>{title}</h3>
+          <h3 className="one_sec-title-body">{description}</h3>
+          {button && (
+            <button>
+              <a href={button.url} target="_blank" rel="noreferrer">
+                {button.content}
+              </a>
+            </button>
+          )}
+        </div>
+        <div className="one_sec-img">
+          <img src={image?.url} alt="one_sec" />
+        </div>
       </div>
     </div>
   )
diff --git a/src/context/themeContext.js b/src/context/themeContext.js
index 98749c8f..55fee4e7 100644
--- a/src/context/themeContext.js
+++ b/src/context/themeContext.js
@@ -6,11 +6,13 @@ const themes = {
     "--nav-footer-container": "#2a2c2e",
     "--blog-card-container": "#f5f5f5",
     "--primary": "#000000",
+    "--primary-invert": "#ffffff",
     "--primary-hover": "#000000",
     "--primary-container": "#ffffff",
     "--title-jobs": "#5682c6",
     "--jobs-hover": "#f0f0f0",
 
+    "--secondary": "#3f6be8",
     "--secondary-container": "#25cad3",
     "--border-bottom": "#cdcdcd",
   },
@@ -19,12 +21,14 @@ const themes = {
     "--blog-card-container": "#383838",
 
     "--primary": "#ffffff",
+    "--primary-invert": "#000000",
     "--primary-hover": "#000000",
     "--primary-container": "#292929",
     "--border-bottom": "#565656",
     "--title-jobs": "#1ecad3",
     "--jobs-hover": "#8383833b",
 
+    "--secondary": "#67f293",
     "--secondary-container": "#191919",
   },
 }
diff --git a/src/images/moon-solid.svg b/src/images/moon-solid.svg
index f12006da..e687fb82 100644
--- a/src/images/moon-solid.svg
+++ b/src/images/moon-solid.svg
@@ -1 +1 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="moon" class="svg-inline--fa fa-moon fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#1F1D37" d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg>
\ No newline at end of file
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="moon" class="svg-inline--fa fa-moon fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg>
\ No newline at end of file
diff --git a/src/styles/global.scss b/src/styles/global.scss
index d8ce36fc..498a3fc4 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -9,6 +9,7 @@ $nav-footer-container: var(--nav-footer-container);
 $blog-card-container: var(--blog-card-container);
 
 $primary: var(--primary);
+$primary-invert: var(--primary-invert);
 $primary-hover: var(--primary-hover);
 $primary-container: var(--primary-container);
 
@@ -18,6 +19,8 @@ $border-bottom: var(--border-bottom);
 $title-jobs: var(--title-jobs);
 $jobs-hover: var(--jobs-hover);
 
+
+
 main {
   background-color: $primary-container !important;
 }
@@ -51,7 +54,6 @@ $grey-light: #f5f5f5;
 //new colors
 $grey: #545468;
 $light-grey: #c4c4c4;
-$primary: #3f6be8;
 $alt: #67f293;
 $blackBit: #242424;
 
@@ -67,18 +69,14 @@ $extra-large: 45px;
   padding: 5px 15px;
   font-weight: 500;
   border: none;
-  background-color: $primary;
-  color: white;
+  background-color: $secondary;
+  color: $primary-invert;
   border-radius: 5px;
+  transition: filter 200ms ease-in;
   &:hover {
-    background-color: #b2c4f6;
-    color: #3c6ed0;
+    filter: brightness(135%);
     box-shadow: 0px 3px 10px rgba(138, 254, 113, 0.5);
   }
-  &:active {
-    background-color: #2a50bc;
-    color: white;
-  }
   @media screen and (min-width: $breakpoint-lg) {
     padding: 8px 30px;
   }