diff --git a/src/components/NonProfit.astro b/src/components/NonProfit.astro
index 7f47a40..a4c222e 100644
--- a/src/components/NonProfit.astro
+++ b/src/components/NonProfit.astro
@@ -34,6 +34,7 @@ const { name, description, image, startColor, endColor, url } = Astro.props;
     position: relative;
     overflow: hidden;
     border-radius: 12px;
+    padding-top: 120px;
 
     .bg {
       position: absolute;
@@ -55,7 +56,6 @@ const { name, description, image, startColor, endColor, url } = Astro.props;
 
     a {
       width: 100%;
-      padding-top: 160px;
       padding: 32px;
       display: flex;
       flex-direction: column;
diff --git a/src/components/NonProfits.astro b/src/components/NonProfits.astro
index cabf41d..5c546e3 100644
--- a/src/components/NonProfits.astro
+++ b/src/components/NonProfits.astro
@@ -1,10 +1,13 @@
 ---
 import NonProfit from './NonProfit.astro';
+import { Image } from 'astro:assets';
+import sparkles from '../graphics/shapes_sparkle_2.svg';
+import clouds from '../graphics/clouds_star_twirl_2.svg';
 ---
 
 <div class="container">
-  <img src="/shapes_sparkle_2.svg" class="sparkles" alt="" />
-  <img src="/clouds_star_twirl_2.svg" class="clouds" alt="" />
+  <Image src={sparkles} class="sparkles" alt="" />
+  <Image src={clouds} class="clouds" alt="" />
   <section class="lead">
     <h4 id="nonprofits">NON-PROFITS</h4>
     <h3>
@@ -122,7 +125,7 @@ import NonProfit from './NonProfit.astro';
     display: none;
     position: absolute;
     top: 72px;
-    right: 0;
+    right: -60px;
     height: 120px;
     @media (min-width: breakpoints.$laptop) {
       display: block;