diff --git a/public/css/home.css b/public/css/home.css
index b66be18..6dbce94 100644
--- a/public/css/home.css
+++ b/public/css/home.css
@@ -29,6 +29,10 @@
   background-color: #1a1a2e;
 }
 
+body {
+  background-color: #1a1a2e;
+}
+
 header {
   display: flex;
   justify-content: flex-end;
@@ -37,7 +41,6 @@ header {
   padding-left: 8%;
   background-color: #1a1a2e;
   padding-top: 20px;
-
 }
 
 .logo {
@@ -88,16 +91,15 @@ header {
 
 .cta:hover {
   transform: scale(1.2);
-   background-color: #1a1a2e;
+  background-color: #1a1a2e;
   color: aquamarine;
 }
 
 #close-id {
-padding: 0px;
-margin-right: 32px;
-font-size: 43px;
-margin-top: 5px;
-
+  padding: 0px;
+  margin-right: 32px;
+  font-size: 43px;
+  margin-top: 5px;
 }
 
 #home {
@@ -122,7 +124,7 @@ margin-top: 5px;
 .top {
   background-color: #1a1a2e;
   display: flex;
-  height: 643px;
+  height: max-content;
 }
 
 .text h2 {
@@ -134,7 +136,7 @@ margin-top: 5px;
   font-family: "Sofia-Pro-Medium";
   font-size: 20px;
   color: #cfe8f6;
-  padding-top: 15px;
+  padding-top: 10px;
 }
 .text a {
   font-family: "Sofia-Pro-Medium";
@@ -148,34 +150,33 @@ margin-top: 5px;
   padding-top: 150px;
   padding-left: 10%;
   margin-right: auto;
-  max-width: 700px;
+  max-width: 600px;
 }
 
 #install-hypr div {
   width: 300px;
   height: 60px;
   background-color: aquamarine;
-  margin-top: 30px;
+  margin-top: 40px;
   transition: all 0.5s ease;
   border-radius: 0.2rem;
 }
 
-
 #install-hypr div p {
   text-align: center;
   color: #1a1a2e;
   background-color: aquamarine;
-  padding-top: 1.25rem;
+  padding-top: 1rem;
   padding-bottom: 1rem;
   font-size: 22px;
   border-radius: 0.2rem;
-  border:solid aquamarine;
+  border: solid aquamarine;
   transition: all 0.5s ease;
 }
 
 #install-hypr div p:hover {
   background-color: #1a1a2e;
-  color: aquamarine
+  color: aquamarine;
 }
 
 #install-hypr {
@@ -190,10 +191,11 @@ margin-top: 5px;
   margin-top: 100px;
   margin-right: 6%;
   margin-left: 40px;
-  width: 650px;
+  width: 640px;
   height: max-content;
   align-items: center;
   justify-content: center;
+  padding-bottom: 5%;
 }
 
 #slide-content {
@@ -336,10 +338,11 @@ margin-top: 5px;
 }
 
 #ani-text a div {
-   color: #1a1a2e;
+  color: #1a1a2e;
   font-family: "Sofia-Pro-Medium";
+  font-size: 16px;
   padding: 20px;
-  margin: 0px 20%;
+  margin: 0px 17%;
   margin-top: 40px;
   border-radius: 0.2rem;
   border: solid aquamarine;
@@ -350,7 +353,7 @@ margin-top: 5px;
 
 #ani-text a div:hover {
   transform: scale(1.2);
-    background-color: #1a1a2e;
+  background-color: #1a1a2e;
   color: aquamarine;
 }
 
@@ -400,7 +403,7 @@ margin-top: 5px;
 
 #til-text a div:hover {
   transform: scale(1.2);
-    background-color: #1a1a2e;
+  background-color: #1a1a2e;
   color: aquamarine;
 }
 
@@ -441,7 +444,7 @@ margin-top: 5px;
   padding: 20px;
   margin: 0px 20%;
   margin-top: 40px;
-    border: solid aquamarine;
+  border: solid aquamarine;
   border-radius: 0.2rem;
   background-color: aquamarine;
   text-align: center;
@@ -450,9 +453,8 @@ margin-top: 5px;
 
 #con-text a div:hover {
   transform: scale(1.2);
-    background-color: #1a1a2e;
+  background-color: #1a1a2e;
   color: aquamarine;
-  
 }
 
 #con-text p a {
@@ -467,8 +469,6 @@ margin-top: 5px;
   color: #5865f2 !important;
 }
 
-
-
 footer {
   font-family: "Sofia-Pro-Light";
   display: flex;
@@ -520,8 +520,7 @@ footer a:hover {
   margin-bottom: 10px;
 }
 
-
-@media only screen and (max-width: 1100px) {
+@media only screen and (max-width: 1140px) {
   .nav__links,
   .cta {
     display: none;
@@ -643,7 +642,6 @@ footer a:hover {
   footer {
     /* display: block; */
   }
-
 }
 
 @media only screen and (max-width: 648px) {
@@ -660,16 +658,16 @@ footer a:hover {
     height: auto;
   }
   #install-hypr div {
-  width: 220px;
-  height: 40px;
-}
-#install-hypr div p {
-  font-size: 20px;
-}
-.text {
-  padding-top: 20%;
-  padding-bottom: 25%;
-}
+    width: 220px;
+    height: 40px;
+  }
+  #install-hypr div p {
+    font-size: 20px;
+  }
+  .text {
+    padding-top: 20%;
+    padding-bottom: 25%;
+  }
   #slide {
     width: 384px;
     height: auto;
@@ -711,8 +709,7 @@ footer a:hover {
   }
   .mob-menu {
     display: flex;
-    margin-bottom: 10px;
-    
+    margin-bottom: 8px;
   }
   .get-started a div {
     margin-left: 0px;
@@ -729,38 +726,267 @@ footer a:hover {
     margin-left: 20%;
   }
 
-#home {
-  border-bottom: #cee7f5 solid 3px;
+  #home {
+    border-bottom: #cee7f5 solid 3px;
+  }
+  #close-id {
+    margin-right: 7px;
+  }
+  footer {
+    display: block;
+  }
+  .footer-text {
+    max-width: none;
+  }
+  .footer-icons {
+    display: flex;
+    width: fit-content;
+    height: 60px;
+    margin-left: auto;
+    margin-top: 30px;
+    margin-right: auto;
+  }
+  .bi.bi-github {
+    margin-right: 30px;
+  }
+  .footer-icons a svg {
+    width: 30px;
+    height: 30px;
+    margin-right: 0;
+  }
+  #licence {
+    margin-top: 15px;
+    margin-bottom: 10px;
+    line-height: 1.5;
+    font-size: 14px;
+  }
 }
-#close-id {
-  margin-right: 7px;
+@media only screen and (min-width: 1860px) {
+  #ani-text {
+    margin-left: auto;
+    max-width: 500px;
+    margin-top: 50px;
+  }
+  #til-text {
+    margin-right: auto;
+    max-width: 500px;
+    margin-top: 50px;
+  }
+  #con-text {
+    margin-left: auto;
+    max-width: 500px;
+    margin-top: 50px;
+  }
+  #ani-vid video {
+    width: 755px;
+  }
+
+  #til-vid video {
+    width: 755px;
+  }
+
+  #con-vid video {
+    width: 755px;
+  }
 }
-footer {
-  display: block;
+@media only screen and (min-width: 2200px) {
+  #ani-text {
+    margin-left: auto;
+    max-width: 700px;
+    margin-top: 80px;
+  }
+  #ani-text h1 {
+    font-size: 54px;
+  }
+  #ani-text p {
+    font-size: 26px;
+  }
+  #ani-text a div {
+    scale: 1.2;
+  }
+  #til-text {
+    margin-right: auto;
+    max-width: 700px;
+    margin-top: 80px;
+    margin-left: 3%;
+  }
+  #til-text h1 {
+    font-size: 54px;
+  }
+  #til-text p {
+    font-size: 26px;
+  }
+  #til-text a div {
+    scale: 1.2;
+  }
+  #con-text {
+    margin-left: auto;
+    max-width: 700px;
+    margin-top: 80px;
+  }
+  #con-text h1 {
+    font-size: 54px;
+  }
+  #con-text p {
+    font-size: 26px;
+  }
+  #con-text a div {
+    scale: 1.2;
+  }
+
+  .animation {
+    height: max-content;
+  }
+  #ani-vid video {
+    width: 80%;
+    height: auto;
+    padding-bottom: 100px;
+  }
+  .tiling {
+    height: max-content;
+  }
+  #til-vid video {
+    width: 80%;
+    height: auto;
+    padding-bottom: 100px;
+    margin-left: 25%;
+  }
+  .configure {
+    height: max-content;
+  }
+  #con-vid video {
+    width: 80%;
+    height: auto;
+    padding-bottom: 100px;
+  }
+  .top {
+    height: max-content;
+  }
+  .swiper-slide img {
+    width: 960px;
+    height: auto;
+  }
+  #slide-content {
+    width: 960px;
+    height: auto;
+  }
+  #slide {
+    width: max-content;
+    padding-bottom: 5%;
+  }
+  .text p {
+    font-size: 26px;
+    padding-top: 10px;
+  }
+  .text h2 {
+    font-size: 68px;
+  }
+  #install-hypr div {
+    scale: 1.2;
+    margin-left: 5%;
+    margin-top: 45px;
+  }
+  .text {
+    margin-top: 1%;
+    max-width: 800px;
+  }
+  #features-text {
+    font-size: 82px;
+    padding-bottom: 80px;
+  }
+  .footer-text * {
+    font-size: 16px;
+  }
+  #devs {
+    max-width: 800px;
+  }
 }
-.footer-text {
-  max-width: none;
-}
-.footer-icons {
-  display: flex;
-  width: fit-content;
-  height: 60px;
-  margin-left: auto;
-  margin-top: 30px;
-  margin-right: auto;
-}
-.bi.bi-github {
-  margin-right: 30px;
-}
-.footer-icons a svg {
-  width: 30px;
-  height: 30px;
-  margin-right: 0;
-}
-#licence {
-  margin-top: 15px;
-  margin-bottom: 10px;
-  line-height: 1.5;
-  font-size: 14px;
+
+@media only screen and (min-width: 3000px) {
+  #ani-text {
+    margin-top: 5%;
+    margin-right: auto;
+  }
+  #ani-text h1 {
+    font-size: 72px;
+  }
+  #ani-text p {
+    font-size: 32px;
+  }
+  #ani-text a div {
+    scale: 1.3;
+  }
+
+  #til-text {
+    margin-top: 5%;
+    margin-left: auto;
+  }
+  #til-text h1 {
+    font-size: 72px;
+  }
+  #til-text p {
+    font-size: 32px;
+  }
+  #til-text a div {
+    scale: 1.3;
+  }
+  #con-text {
+    margin-top: 5%;
+    margin-right: auto;
+  }
+  #con-text h1 {
+    font-size: 72px;
+  }
+  #con-text p {
+    font-size: 32px;
+  }
+  #con-text a div {
+    scale: 1.3;
+  }
+  .swiper-slide img {
+    width: 1377px;
+  }
+  #slide-content {
+    width: 1377px;
+  }
+  .text {
+    max-width: 1000px;
+    margin-top: 5%;
+  }
+  .text p {
+    font-size: 32px;
+  }
+  .text h2 {
+    font-size: 82px;
+  }
+  #install-hypr div {
+    scale: 1.3;
+    margin-left: 5%;
+  }
+  #features-text {
+    font-size: 96px;
+  }
+  .nav__links a,
+  .cta {
+    font-size: 28px;
+  }
+  .logo img {
+    width: 240px;
+    height: auto;
+    padding-right: 10px;
+  }
+  .footer-text * {
+    font-size: 20px;
+  }
+  #devs {
+    max-width: 1000px;
+  }
+  .text {
+    max-width: 1000px !important;
+  }
 }
+@media only screen and (min-width: 1700px) {
+  .text {
+    max-width: 800px;
+  }
 }
diff --git a/public/imgs/wall_4K.png b/public/imgs/wall_4K.png
new file mode 100644
index 0000000..f835a97
Binary files /dev/null and b/public/imgs/wall_4K.png differ
diff --git a/public/imgs/what-is-hyprland.png b/public/imgs/what-is-hyprland.png
deleted file mode 100644
index 6e57f2b..0000000
Binary files a/public/imgs/what-is-hyprland.png and /dev/null differ
diff --git a/public/imgs/what-is-hyprland2.png b/public/imgs/what-is-hyprland2.png
deleted file mode 100644
index 0b089b7..0000000
Binary files a/public/imgs/what-is-hyprland2.png and /dev/null differ
diff --git a/public/imgs/what-is-wayland.png b/public/imgs/what-is-wayland.png
deleted file mode 100644
index 2a145ab..0000000
Binary files a/public/imgs/what-is-wayland.png and /dev/null differ
diff --git a/views/404.ejs b/views/404.ejs
index a800bde..92ad271 100644
--- a/views/404.ejs
+++ b/views/404.ejs
@@ -8,6 +8,7 @@
   <link rel="shortcut icon" href="ico/favicon.ico" type="image/x-icon" />
   <link rel="stylesheet" href="css/home.css" />
   <link rel="stylesheet" href="css/404.css" />
+  <meta name="darkreader-lock">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
   <title>Oops ...</title>
 </head>
diff --git a/views/home.ejs b/views/home.ejs
index adc9da2..dd22fa1 100644
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="ico/favicon.ico" type="image/ico" />
+    <meta name="darkreader-lock" />
     <link
       rel="icon"
       href="ico/favicon-32x32.png"
@@ -33,6 +34,7 @@
     />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://www.hyprland.org/" />
+    <meta property="og:image" content="imgs/wall_4k.png" />
     <meta
       name="twitter:card"
       content="Hyprland is a dynamic tiling wayland compositor that offers unique features like smooth animations, dynamic tiling and rounded corners. Learn more by visiting this site!"
@@ -41,6 +43,7 @@
       name="twitter:title"
       content="Hyprland - A wayland compositor that doesn't sacrifice on its looks!"
     />
+    <meta name="twitter:image" content="imgs/wall_4k" />
     <meta
       name="description"
       content="Hyprland is a dynamic tiling wayland compositor that offers unique features like smooth animations, dynamic tiling and rounded corners. Learn more by visiting this site!"
diff --git a/views/rices.ejs b/views/rices.ejs
index f2657f8..f746e27 100644
--- a/views/rices.ejs
+++ b/views/rices.ejs
@@ -6,8 +6,21 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" href="ico/favicon.ico" type="image/ico" />
-    <link rel="icon" href="ico/favicon-32x32.png" size="32x32" type="image/png" />
-    <link rel="icon" href="ico/favicon-32x32.png" size="16x16" type="image/png" />
+    <meta name="darkreader-lock">
+    <meta property="og:image" content="imgs/wall_4k.png">
+    <meta name="twitter:image" content="imgs/wall_4k">
+    <link
+      rel="icon"
+      href="ico/favicon-32x32.png"
+      size="32x32"
+      type="image/png"
+    />
+    <link
+      rel="icon"
+      href="ico/favicon-32x32.png"
+      size="16x16"
+      type="image/png"
+    />
     <link rel="stylesheet" href="css/home.css" />
     <link rel="stylesheet" href="css/rices.css" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
@@ -19,15 +32,14 @@
         <a class="logo" href="https://hyprland.org"><img src="imgs/hyprland.png" alt="logo"></a>
         <nav>
             <ul class="nav__links">
-                <li>
-                    <a class="nav-link" data-value="Home" href="https://www.hyprland.org/">Hyprland</a>
-                </li>
-                <li><a class="nav-link" data-value="Get Started"
-                        href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get Started</a></li>
-                <li><a class="nav-link" data-value="Wiki" href="https://wiki.hyprland.org/">Wiki</a></li>
-                <li><a class="nav-link" data-value="FAQ" href="https://wiki.hyprland.org/FAQ/">FAQ</a></li>
-
-            </ul>
+          <li>
+            <a class="nav-link" data-value="Home" href="https://www.hyprland.org/">Hyprland</a>
+          </li>
+          <li><a class="nav-link" data-value="Get Started" href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get Started</a></li>
+          <li><a class="nav-link" data-value="Wiki" href="https://wiki.hyprland.org/">Wiki</a></li>
+          <li><a class="nav-link"data-value="FAQ" href="https://wiki.hyprland.org/FAQ/">FAQ</a></li>
+          
+        </ul>
         </nav>
         <a class="cta" href="https://github.com/hyprwm/Hyprland" target="_blank" rel="noopener">Github</a>
         <p class="mob-menu">&equiv;</p>
@@ -46,7 +58,7 @@
             <li class="win-text">#1: Flafy<br><br><img src="imgs/ricingcomp1/flafy.png"></li>
             <li class="win-text">#2: (<i>ex aequo</i>) flick0<br><br><img src="imgs/ricingcomp1/flicko.png"></li>
             <li class="win-text">#2: (<i>ex aequo</i>) amadeus<br><br><img src="imgs/ricingcomp1/amadeus.png"></li>
-            <li class="win-text">#3: (<i>ex aequo</i>) Lyasm<br><br><img src="imgs/ricingcomp1/lyasm.png"></li>
+            <li class="win-text">#3: (<i>ex aequo</i>) Lyasm<br><br><img src="imgs/ricingcomp1/Lyasm.png"></li>
             <li class="win-text">#3: (<i>ex aequo</i>) lauroro<br><br><img src="imgs/ricingcomp1/lauroro.jpg"></li>
         </ul>
     </div>
@@ -99,9 +111,9 @@
         <a id="close-id" class="close">&times;</a>
         <div class="overlay__content">
             <a href="https://www.hyprland.org/">Hyprland</a>
-            <a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get Started</a>
-            <a href="https://wiki.hyprland.org">Wiki</a>
-            <a href="https://wiki.hyprland.org/FAQ/">FAQ</a>
+        <a  href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get Started</a>
+        <a href="https://wiki.hyprland.org">Wiki</a>
+        <a href="https://wiki.hyprland.org/FAQ/">FAQ</a>
         </div>
     </div>
     <script type="text/javascript" src="js/mobile.js"></script>
diff --git a/views/temp_404.ejs b/views/temp_404.ejs
index 2bef929..3d22918 100644
--- a/views/temp_404.ejs
+++ b/views/temp_404.ejs
@@ -7,6 +7,7 @@
   <link rel="shortcut icon" href="ico/favicon.ico" type="image/x-icon" />
   <link rel="stylesheet" href="css/404.css" />
   <link rel="stylesheet" href="css/home.css" />
+  <meta name="darkreader-lock">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
   <title>Oopsy...</title>
 </head>