diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
index dcf2320..8a7977b 100644
Binary files a/public/android-chrome-192x192.png and b/public/android-chrome-192x192.png differ
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
index c6e3e1a..98cc4d6 100644
Binary files a/public/android-chrome-512x512.png and b/public/android-chrome-512x512.png differ
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
index 173c1b9..7ed2240 100644
Binary files a/public/apple-touch-icon.png and b/public/apple-touch-icon.png differ
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
new file mode 100644
index 0000000..d9ba047
Binary files /dev/null and b/public/favicon-16x16.png differ
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
new file mode 100644
index 0000000..ca5a166
Binary files /dev/null and b/public/favicon-32x32.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
index 1ccc051..8e5cfb5 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
index cbca4d4..f02618e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -45,74 +45,20 @@
     />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Neumorphism CSS shadow generator</title>
+    <script
+      defer
+      data-domain="neumorphism.io"
+      src="https://plausible.io/js/script.outbound-links.js"
+    ></script>
   </head>
 
   <body>
     <div class="mb-16 title">
       <h1 class="main-heading">Neumorphism.io</h1>
-      <h2 class="text-base opacity-60">Experiment and generate CSS code</h2>
+      <h2 class="text-base opacity-60">Generate CSS code for your project</h2>
     </div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!-- <div>
-      <script
-        async
-        type="text/javascript"
-        src="//cdn.carbonads.com/carbon.js?serve=CEAIKK3Y&placement=neumorphismio"
-        id="_carbonads_js"
-      ></script>
-    </div> -->
-    <footer>
-      <!-- <div class="social">
-        <a
-          href="https://uiverse.io"
-          target="_blank"
-          rel="noopener"
-          class="link uiverse"
-          onclick="getOutboundLink('https://uiverse.io'); return true;"
-        >
-          Check out <b>uiverse.io</b> for more cool CSS!
-        </a>
-      </div> -->
-      <!-- <div class="tags">
-        <a
-          target="_blank"
-          onclick="getOutboundLink('https://uiverse.io/buttons'); return true;"
-          href="https://uiverse.io/buttons"
-          >CSS buttons</a
-        >
-        <a
-          target="_blank"
-          onclick="getOutboundLink('https://uiverse.io/checkboxes'); return true;"
-          href="https://uiverse.io/checkboxes"
-          >CSS checkboxes</a
-        >
-        <a
-          target="_blank"
-          onclick="getOutboundLink('https://uiverse.io/switches'); return true;"
-          href="https://uiverse.io/switches"
-          >CSS toggle switches</a
-        >
-        <a
-          target="_blank"
-          onclick="getOutboundLink('https://uiverse.io/cards'); return true;"
-          href="https://uiverse.io/cards"
-          >CSS cards</a
-        >
-        <a
-          target="_blank"
-          onclick="getOutboundLink('https://uiverse.io/loaders'); return true;"
-          href="https://uiverse.io/loaders"
-          >CSS loaders</a
-        >
-        <a
-          target="_blank"
-          onclick="getOutboundLink('https://uiverse.io/inputs'); return true;"
-          href="https://uiverse.io/inputs"
-          >CSS inputs</a
-        >
-      </div> -->
-    </footer>
     <div class="links"></div>
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
index 02f5888..0b30ebf 100644
--- a/src/App.js
+++ b/src/App.js
@@ -48,7 +48,7 @@ const App = () => {
         <div className="container max-w-screen-lg px-6 mx-auto mt-24">
           <section className="mb-24 text-left">
             <h2 className="mb-4 text-3xl font-bold">What is Neumorphism?</h2>
-            <p className="text-lg leading-relaxed">
+            <p className="text-lg leading-relaxed opacity-80">
               Neumorphism, also known as soft UI, is a visual design trend that combines elements of
               skeuomorphism and flat design. It creates a soft, extruded plastic look by using
               subtle contrasting shadows to create the illusion of depth. This style mimics physical
@@ -56,6 +56,26 @@ const App = () => {
               monochromatic color schemes with low contrast shadows and highlights.
             </p>
           </section>
+          <section className="mb-24 text-left">
+            <h2 className="relative z-10 mb-2 text-4xl font-bold">More Tools</h2>
+            <p className="pl-0.5 mb-8 text-lg leading-relaxed opacity-80">
+              Free frontend resources to help you build your next project.
+            </p>
+            <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
+              <ProjectCard
+                title="Uiverse.io"
+                description="The largest library of Open-Source UI elements. Explore a vast collection of beautiful UI elements, including buttons, checkboxes, cards, and more."
+                link="https://uiverse.io"
+                image="https://imagedelivery.net/KMb5EadhEKC1gAE0LkjL1g/c802e23e-4d13-44ef-a2fe-46c467571900/public"
+              />
+              <ProjectCard
+                title="Cssbuttons.io"
+                description="Collection of 100+ beautiful, customizable buttons for your next project. Get the code you need to enhance your web projects with stylish, functional buttons."
+                link="https://cssbuttons.io"
+                image="https://imagedelivery.net/KMb5EadhEKC1gAE0LkjL1g/cb814b9d-45f8-46f5-3108-91e511990200/public"
+              />
+            </div>
+          </section>
         </div>
         <Footer />
       </div>
@@ -63,9 +83,44 @@ const App = () => {
   )
 }
 
+export const ProjectCard = ({ title, description, image, link }) => {
+  return (
+    <div className="flex flex-col p-6 soft-shadow rounded-3xl">
+      <div className="">
+        <img src={image} alt={title} className="object-cover rounded-xl" />
+      </div>
+      <div className="flex flex-col items-start flex-1 mt-6 text-left">
+        <a
+          href={link}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block mb-2 text-2xl font-bold hover:underline"
+        >
+          {title}
+        </a>
+        <p className="flex-1 text-base leading-relaxed opacity-80">{description}</p>
+        <a
+          href={link}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-2 mt-6 px-6 py-3 bg-[color:var(--textColor)] text-[color:var(--baseColor)] font-semibold rounded-md hover:opacity-90 transition-opacity"
+        >
+          Visit {title.replace('.io', '')}{' '}
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" className="w-4 h-4">
+            <path
+              fill="currentColor"
+              d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"
+            />
+          </svg>
+        </a>
+      </div>
+    </div>
+  )
+}
+
 const GitHubStarButton = ({ githubStars }) => {
   return (
-    <button className="fixed items-center justify-center hidden h-10 px-4 py-2 text-sm font-medium transition-all duration-200 ease-in-out bg-gray-900 rounded-md md:inline-flex top-6 right-6 whitespace-nowrap ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group hover:bg-gray-950 hover:ring-2 hover:ring-offset-2 hover:ring-gray-900">
+    <button className="fixed z-50 items-center justify-center hidden h-10 px-4 py-2 text-sm font-medium transition-all duration-200 ease-in-out bg-gray-900 rounded-md md:inline-flex top-6 right-6 whitespace-nowrap ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group hover:bg-gray-950 hover:ring-2 hover:ring-offset-2 hover:ring-gray-900">
       <svg
         className="w-5 h-6 mr-2 text-white"
         strokeLinejoin="round"
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 8d356e7..e58c199 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -53,7 +53,7 @@ const navigation = {
 
 export default function Footer() {
   return (
-    <footer aria-labelledby="footer-heading" className="bg-[#e0e0e0]">
+    <footer aria-labelledby="footer-heading" className="text-[var(--textColor)]">
       <h2 id="footer-heading" className="sr-only">
         Footer
       </h2>
@@ -61,7 +61,7 @@ export default function Footer() {
         <div className="xl:grid xl:grid-cols-3 xl:gap-8">
           <div className="space-y-8">
             <img src="/apple-touch-icon.png" alt="icon" className="w-10 h-10" />
-            <p className="text-sm leading-6 text-gray-500">
+            <p className="text-sm leading-6 opacity-70">
               Neumorphism.io - Generate neumorphic designs
             </p>
             <div className="flex space-x-6">
@@ -70,7 +70,7 @@ export default function Footer() {
                   key={item.name}
                   href={item.href}
                   target="_blank"
-                  className="text-gray-400 hover:text-gray-500"
+                  className="opacity-60 hover:opacity-70"
                   rel="noreferrer"
                 >
                   <span className="sr-only">{item.name}</span>
@@ -85,14 +85,14 @@ export default function Footer() {
             </div>
             <div className="grid grid-cols-2 gap-8">
               <div>
-                <h3 className="text-sm font-semibold leading-6 text-slate-950">Resources</h3>
+                <h3 className="text-sm font-semibold leading-6 opacity-90">Resources</h3>
                 <ul className="mt-6 space-y-4">
                   {navigation.resources.map(item => (
                     <li key={item.name}>
                       <a
                         href={item.href}
                         target="_blank"
-                        className="text-sm leading-6 text-gray-500 hover:text-slate-950"
+                        className="text-sm leading-6 opacity-70 hover:opacity-80"
                         rel="noreferrer"
                       >
                         {item.name}
@@ -102,14 +102,14 @@ export default function Footer() {
                 </ul>
               </div>
               <div className="md:mt-0">
-                <h3 className="text-sm font-semibold leading-6 text-slate-950">Other Elements</h3>
+                <h3 className="text-sm font-semibold leading-6 opacity-90">Other Elements</h3>
                 <ul className="mt-6 space-y-4">
                   {navigation.elements.map(item => (
                     <li key={item.name}>
                       <a
                         href={item.href}
                         target="_blank"
-                        className="text-sm leading-6 text-gray-500 hover:text-slate-950"
+                        className="text-sm leading-6 opacity-70 hover:opacity-80"
                         rel="noreferrer"
                       >
                         {item.name}
@@ -122,7 +122,7 @@ export default function Footer() {
           </div>
         </div>
         <div className="pt-8 mt-16 border-t border-gray-900/10 sm:mt-20 lg:mt-24">
-          <p className="text-xs leading-5 text-gray-500">
+          <p className="text-xs leading-5 opacity-70">
             &copy; {new Date().getFullYear()} Adam Giebl, All rights reserved.
           </p>
         </div>
diff --git a/src/components/UiverseElements.js b/src/components/UiverseElements.js
index a06458d..fa600bd 100644
--- a/src/components/UiverseElements.js
+++ b/src/components/UiverseElements.js
@@ -6,7 +6,7 @@ const UiverseElements = () => {
 
   const fetchUiverseElements = useCallback(async () => {
     try {
-      const response = await fetch('http://localhost:3000/resource/neumorphism-elements')
+      const response = await fetch('https://uiverse.io/resource/neumorphism-elements')
       if (!response.ok) {
         setElements([])
         return
