diff --git a/README.md b/README.md
index aea2270..6f55a8a 100644
--- a/README.md
+++ b/README.md
@@ -15,8 +15,8 @@
 
 <h2 align="center">Showcase:</h2>
 <p align="center">
-  <img src="https://raw.githubusercontent.com/Ahwxorg/binternet/main/misc/binternet-1.png" width="350">
-  <img src="https://raw.githubusercontent.com/Ahwxorg/binternet/main/misc/binternet-2.png" width="350">
+  <img src="https://raw.githubusercontent.com/Ahwxorg/binternet/main/static/img/binternet-1.png" width="350">
+  <img src="https://raw.githubusercontent.com/Ahwxorg/binternet/main/static/img/binternet-2.png" width="350">
 </p>
 
 
diff --git a/donate.php b/donate.php
new file mode 100644
index 0000000..96208cc
--- /dev/null
+++ b/donate.php
@@ -0,0 +1,51 @@
+<?php
+    require "misc/header.php";
+
+?>
+
+    <title>LibreY - Donate</title>
+    </head>
+    <body>
+    <div class="donate-container">
+        <h2>
+          Donate Me
+        </h2>
+
+        <div class="qr-box">
+          <div class="inner-wrap">
+            <h3>Monero [XMR]</h3>
+              <p>
+                4ArntPzKpu32s4z2XqYhyaY1eUeUBKtCzJqEqxWtF5mCi5vR6sdhh32Hd2fk9FjeUxYDtaaUexUqoRNxrgfrtuXs4XpgMNJ
+              </p>
+          </div>
+          <img
+            src="/static/img/xmr-ahwx.png"
+            height="160"
+            width="160"
+            alt="xmr qr code (ahwx)"
+          />
+        </div>
+          
+        <div class="flex-row">
+          <a href="https://ko-fi.com/Ahwxorg" target="_blank"
+            ><img
+              src="/static/img/kofi.png"
+              alt="kifi img"
+              height="50"
+              width="auto"
+          /></a>
+
+          <a href="https://www.buymeacoffee.com/ahwx" target="_blank">
+            <img
+              src="/static/img/buy-me-a-coffee.png"
+              height="50"
+              width="auto"
+              alt="buy-me-a-coffee img"
+          /></a>
+        </div>
+      </div>
+    </div>
+
+        
+
+<?php require "misc/footer.php"; ?>
diff --git a/misc/footer.php b/misc/footer.php
index c3b0b88..878f02d 100644
--- a/misc/footer.php
+++ b/misc/footer.php
@@ -1,7 +1,6 @@
 <footer>
-  <a href="./" target="_blank">Binternet</a>
-  <a href="https://github.com/Ahwxorg/binternet/" target="_blank">Source</a>
-  <a href="https://ahwx.org/donate.php" target="_blank">Donate</a>
+  <a href="https://github.com/Ahwxorg/binternet/" target="_blank">Source code</a>
+  <a href="./donate.php" target="_blank">Donate</a>
   <a href="https://github.com/Ahwxorg/binternet#legal-notice" target="_blank">Legal notice</a>
 
 <?php
diff --git a/misc/style-dark.css b/misc/style-dark.css
index ba9ffe1..193a422 100644
--- a/misc/style-dark.css
+++ b/misc/style-dark.css
@@ -1,11 +1,14 @@
 :root {
-  --inputColor: black;
   --accent-color:#12e8b9;
   --fg-color: white;
+  --border-color: rgb(97, 97, 97);
+  --main: #2a2b2b;
+  --main-second: #1f2120;
+  
 }
 
 body {
-  background-color: #2a2b2b;
+  background-color: var(--main);
   color: var(--fg-color);
   font-family: verdana, arial, sans-serif;
   overflow-x: hidden;
@@ -14,14 +17,13 @@ body {
   font-size: 16px;
 }
 
-
-
-
-
 input:focus {
-  border: 1px solid rgb(97, 97, 97);
+  border: 1px solid var(--border-color);
 }
 
+.accent{
+  color: var(--accent-color);
+}
 
 .centered {
   position: absolute;
@@ -35,10 +37,6 @@ input:focus {
   display: none;
 }
 
-span {
-  color: #f218ee;
-}
-
 #bodyHeader {
   margin: 0;
 }
@@ -71,8 +69,7 @@ footer {
   justify-content: center;
   width: 100vw;
   padding: 10px;
-  color: white;
-  background-color: #1f2120;
+  background-color: var(--main-second);
   position: fixed;
   bottom: 0;
 }
@@ -111,8 +108,8 @@ input {
   width: 500px;
   outline: none;
   color: white;
-  background-color: #1f2120;
-  border: 1px solid #1f2120;
+  background-color: var(--main-second);
+  border: 1px solid var(--main-second);
   border-radius: 10px 0px 0px 10px;
   padding: 15px;
   font-size: inherit;
@@ -121,9 +118,7 @@ input {
 
 button {
   padding: 15px;
-  background: #1f2120;
-  border: 1px solid #1f2120;
-  color: black;
+  color: var(--main-second);
   background-color: var(--accent-color);
   border: 0;
   border-radius: 0px 10px 10px 0px;
@@ -132,20 +127,104 @@ button {
   font-weight: bold;
 }
 
-/* button:hover{
-  background-color: var(--accent-color);
-  color:white;
-} */
+/* search css start */
 
-img {
-  max-width: 25vw;
-  max-height: 25vw;
-  height: auto;
-  width: auto;
-  border-radius: 10px;
-  box-shadow: 5px 5px 5px black;
+.search-container{
+  display: flex;
+  align-items: center;
+  margin: 20px 20px 40px 20px;
 }
 
+.search-container h1{
+  margin: 0;
+}
+
+.search-container input{
+  border-radius: 10px;
+  margin-left: 100px;
+}
+
+.img-result img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+
+.img-container{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  grid-gap: 10px;
+  margin-bottom: 50px;
+  margin-left: 20px;
+  margin-right: 20px;
+
+}
+
+.img-result {
+  flex-grow: 1;
+  height: 12rem;
+}
+
+/* search css end */
+
+
+
+/* donate css start */
+
+.donate-container {
+  width: 700px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 100px;
+}
+
+.flexbox-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+}
+
+.inner-wrap {
+  width: 500px;
+  padding: 20px;
+}
+
+.qr-box {
+  background-color: var(--main-second);
+  border: 1px solid var(--border-color);
+  border-radius: 10px 0px 0px 10px;
+  width: 100%;
+
+  display: flex;
+  word-wrap: break-word;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flex-row {
+  width: 700px;
+  height: auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  margin: 25px 0;
+}
+
+hr.small-line {
+  border: 2px solid var(--fg-color);
+  height: 0px;
+  width: 100px;
+  margin: 30px;
+  border-radius: 2px;
+}
+
+/* donate css end */
+
+
 
 @media only screen and (max-width: 750px) {
 
@@ -164,7 +243,66 @@ img {
 
   .centered {
     width: 95%;
-}
+  }
 
+  .search-container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .search-container input {
+    width: 95%;
+    margin-top: 20px;
+    margin-left: 0;
+  }
+
+
+  /* dontate css start*/
+
+  .donate-container {
+    margin-bottom: 100px;
+    width: 95%;
+    text-align: center;
+  }
+
+  .qr-box {
+    display: flex;
+    flex-direction: column;
+    word-wrap: break-word;
+    align-items: center;
+    justify-content: space-between;
+    word-wrap: break-word;
+    height: auto;
+  }
+
+  .qr-box {
+    border-radius: 10px;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .inner-wrap {
+    width: 80%;
+    text-align: center;
+  }
+
+  .qr-box img {
+    width: 40%;
+    height: auto;
+    padding: 20px;
+  }
+
+  .flex-row {
+    flex-direction: column;
+    gap: 5px;
+    width: 0;
+  }
+
+  .flex-row a img {
+    width: 220px;
+    height: auto;
+  }
+  /* donate css end */
 
 }
\ No newline at end of file
diff --git a/search.php b/search.php
index 36dcc09..76a99af 100644
--- a/search.php
+++ b/search.php
@@ -6,9 +6,9 @@
 ?> - Binternet</title>
 </head>
     <body>
-        <form class="searchContainer" method="get" autocomplete="off">
-            <h1><a class="no-decoration" href="./"><span>B</span>inter<span>n</span>et</a></h1>
-            <input type="text" name="q"
+        <form class="search-container" method="get" autocomplete="off">
+            <h1><a class="no-decoration accent" href="./">Binternet</a></h1>
+            <input type="text" name="q" placeholder="Search Image"
                 <?php
                     $query_encoded = urlencode($query);
 
@@ -21,7 +21,8 @@
                     echo "value=\"$query\"";
                 ?>
             >
-</form>
+            <!-- <div></div> -->
+        </form>
 
 <?php
 
@@ -35,19 +36,20 @@ $search = function($query) use($baseurl)
     $json = file_get_contents($url);
     $data = json_decode($json);
     $images = array();
-    foreach ($data->{"resource_response"}->{"data"}->{"results"} as $result)
-    {
-        $image = $result->{"images"}->{"orig"};
-        $url = $image->{"url"};
-        array_push($images, $url);
-        echo "<a href='/image_proxy.php?url=", $url, "'>";
-        echo "<img src='/image_proxy.php?url=", $url, "'></a>";
-    }
-    return $images;
+    echo "<div class=img-container>";
+        foreach ($data->{"resource_response"}->{"data"}->{"results"} as $result)
+        {
+            $image = $result->{"images"}->{"orig"};
+            $url = $image->{"url"};
+            array_push($images, $url);
+            echo "<a class=img-result href='/image_proxy.php?url=", $url, "'>";
+            echo "<img src='/image_proxy.php?url=", $url, "'></a>";
+        }
+        return $images;
+    echo "</div>";
 };
 
 $images = $search("$query");
-echo "<br><br><br><br>";
 
 include "misc/footer.php";
 
diff --git a/static/img/binternet-1.png b/static/img/binternet-1.png
new file mode 100644
index 0000000..6f0fa16
Binary files /dev/null and b/static/img/binternet-1.png differ
diff --git a/static/img/binternet-2.png b/static/img/binternet-2.png
new file mode 100644
index 0000000..cebaa0c
Binary files /dev/null and b/static/img/binternet-2.png differ
diff --git a/static/img/buy-me-a-coffee.png b/static/img/buy-me-a-coffee.png
new file mode 100644
index 0000000..5366115
Binary files /dev/null and b/static/img/buy-me-a-coffee.png differ
diff --git a/static/img/kofi.png b/static/img/kofi.png
new file mode 100644
index 0000000..067bf52
Binary files /dev/null and b/static/img/kofi.png differ
diff --git a/static/img/xmr-ahwx.png b/static/img/xmr-ahwx.png
new file mode 100644
index 0000000..fa0c79d
Binary files /dev/null and b/static/img/xmr-ahwx.png differ
