diff --git a/css/sections/welcome.css b/css/sections/welcome.css
index 5b7b90a..3ed2c4c 100644
--- a/css/sections/welcome.css
+++ b/css/sections/welcome.css
@@ -1,7 +1,7 @@
 #welcome {
   margin-top: var(--nav-height);
   padding: 0;
-  background: url("/media/images/welcome-background-1080p.jpg") center;
+  background: url("/media/images/welcome-background-1080p.webp") center;
   background-size: cover;
   height: calc(100vh - var(--nav-height));
   display: flex;
@@ -17,12 +17,19 @@
 }
 
 #welcome h1 {
-  margin-right: 20%;
-  padding: 2rem;
+  margin: 1rem 20% 1rem 1rem;
+  border: solid 0.25rem #5791FF;
+  border-radius: 50px;
+  padding: 0.5rem 1.25rem;
+  background-color: black;
 }
 
 #welcome h4 {
   margin: 0 0 0 20%;
+  border: solid 0.25rem #5791FF;
+  border-radius: 50px;
+  padding: 0.5rem 1.25rem;
+  background-color: black;
 }
 
 #scroll-down {
@@ -37,18 +44,20 @@
 }
 
 @media only screen and (max-width: 1280px) {
-  #welcome .container {
-      background: url("/media/images/welcome-background-720p.jpg") center;
+  #welcome {
+      background: url("/media/images/welcome-background-720p.webp") center;
+      background-size: cover;
   }
   #welcome h4 {
       margin: 2rem;
   }
   #welcome h1 {
-      margin: 0;
+      margin: 1rem;
   }
 }
 @media only screen and (max-width: 500px) {
-  #welcome .container {
-      background: url("/media/images/welcome-background-mobile.jpg") center;
+  #welcome {
+      background: url("/media/images/welcome-background-mobile.webp") center;
+      background-size: cover;
   }
 }
\ No newline at end of file
diff --git a/css/utils/base.css b/css/utils/base.css
index 2670599..b9a8b85 100644
--- a/css/utils/base.css
+++ b/css/utils/base.css
@@ -113,13 +113,18 @@ section {
     padding: 5rem 0 5rem 0;
 }
 
-
 /* CUSTOM */
 
 span {
     color: var(--text-color-2);
 }
 
+h1 .q {
+    height: 3rem;
+    width: 3rem;
+    margin: 0 0.1rem;
+}
+
 .link {
     text-decoration: underline;
     color: var(--text-color-2);
diff --git a/media/images/Q.png b/media/images/Q.png
new file mode 100644
index 0000000..9cfbf62
Binary files /dev/null and b/media/images/Q.png differ
diff --git a/media/images/down.png b/media/images/down.png
index 9de6b35..01620fb 100644
Binary files a/media/images/down.png and b/media/images/down.png differ
diff --git a/media/images/welcome-background-1080p.webp b/media/images/welcome-background-1080p.webp
new file mode 100644
index 0000000..d558fc7
Binary files /dev/null and b/media/images/welcome-background-1080p.webp differ
diff --git a/media/images/welcome-background-720p.webp b/media/images/welcome-background-720p.webp
new file mode 100644
index 0000000..771817e
Binary files /dev/null and b/media/images/welcome-background-720p.webp differ
diff --git a/media/images/welcome-background-mobile.webp b/media/images/welcome-background-mobile.webp
new file mode 100644
index 0000000..bf9f682
Binary files /dev/null and b/media/images/welcome-background-mobile.webp differ
diff --git a/pages/en/index.html b/pages/en/index.html
index 8aca152..63c3870 100644
--- a/pages/en/index.html
+++ b/pages/en/index.html
@@ -41,10 +41,11 @@
   </header>
   <section id="welcome">
     <h1>
-      The Tele<span>Q</span>om Project
+      <!-- The Tele<span>Q</span>om Project -->
+      Tele<img class="q" src="/media/images/Q.png">om Project
     </h1>
     <h4>
-      Telecommunications with <span>Québec</span>'s Values
+      Telecommunications with <span>Québec</span>'s values
     </h4>
     <a href="#about" id="scroll-down">
       <img src="/media/images/down.png" alt="Icone defilement">
diff --git a/pages/fr/index.html b/pages/fr/index.html
index d331aa7..78670ef 100644
--- a/pages/fr/index.html
+++ b/pages/fr/index.html
@@ -41,7 +41,7 @@
   </header>
   <section id="welcome">
     <h1 class="welcome-title">
-      Le Projet Tele<span>Q</span>om
+      Projet Tele<span>Q</span>om
     </h1>
     <h4 class="welcome-text">
       La Télécommunication aux Valeurs <span>Québécoises</span>