diff --git a/src/components/DonationCallout.astro b/src/components/DonationCallout.astro
index e8f7d30..fb64a35 100644
--- a/src/components/DonationCallout.astro
+++ b/src/components/DonationCallout.astro
@@ -8,13 +8,11 @@ const { text } = Astro.props;
 ---
 
 <div class="donation-callout">
-  <div class="donation-text">
-    <img class="heart" src="/img/animated/green-heart.webp" alt="Green Heart" />
-    <p>
-      {text}
-    </p>
-  </div>
-  <button
-    ><a href="https://ko-fi.com/vaporvee" target="_blank">Donate</a></button
-  >
+  <img class="heart" src="/img/animated/green-heart.webp" alt="Green Heart" />
+  <p>
+    {text}<br />
+    <button
+      ><a href="https://ko-fi.com/vaporvee" target="_blank">Donate</a></button
+    >
+  </p>
 </div>
diff --git a/src/layouts/DocsLayout.astro b/src/layouts/DocsLayout.astro
index 87306f4..1d41326 100644
--- a/src/layouts/DocsLayout.astro
+++ b/src/layouts/DocsLayout.astro
@@ -44,7 +44,7 @@ const docs = unsortedDocs.sort((a) =>
         })
       }
       <DonationCallout
-        text="These projects require a lot of time and effort. If you would like to support this project, consider making a donation of whatever it is worth to you!"
+        text="These projects require a lot of time and effort. If you make money using this project, consider consider donating of whatever it's worth to you!"
       />
     </div>
   </div>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 9de40dd..8654eca 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -30,7 +30,6 @@ import { ViewTransitions } from "astro:transitions";
   </head>
   <body>
     <Navbar />
-
     <main>
       <slot />
     </main>
diff --git a/src/styles/donation_callout.scss b/src/styles/donation_callout.scss
index b05af4f..767a6b8 100644
--- a/src/styles/donation_callout.scss
+++ b/src/styles/donation_callout.scss
@@ -1,26 +1,25 @@
 .donation-callout {
   position: sticky;
-  text-align: center;
-  .donation-text {
-    display: flex;
-    text-align: center;
     .heart {
-      width: 50px;
-      height: 50px;
-      margin-top: 30px;
-      margin-right: 20px;
-      align-self: left;
+      margin-right: 10px;
+      margin-top: 10px;
+      width: 5vh;
+      height: 5vh;
+      max-width: 50px;
+      max-height: 50px;
     }
-  }
+  display: flex;
   border-radius: 10px;
   margin-block: 50px;
   background-color: #7c7c7c1f;
   border: 1px solid lighten(#7c7c7c1f, 12%);
-  padding: 20px;
+  padding: 16px;
   font-size: 16px;
   button {
+    align-self: self-end;
     margin: 0;
-    margin-left: 70px;
+    margin-top: 16px;
+    min-width: 150px;
     a[target="_blank"]::after {
       background-color: white;
     }
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 43bd162..1f6a1a2 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -39,7 +39,7 @@ main {
   border: 1px solid lighten($highlight-primary, 12%);
   box-shadow: 0px 4px 4px 0px #00000040;
   padding: 2vw;
-  width: 60vw;
+  width: 65vw;
 
   margin-bottom: 11vh;
 }
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 7cf689c..5ca48a9 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -6,7 +6,7 @@
   display: flex;
   justify-content: space-evenly;
   margin-top: 3vh;
-  width: 25vw;
+  width: 18vw;
   a {
     color: white;
     text-decoration: none;
