diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c67a2eb..79da725 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,6 +17,7 @@
         "eslint-config-next": "13.4.19",
         "framer-motion": "^11.2.13",
         "next": "13.4.12",
+        "next-emoji-rain": "^1.0.2",
         "postcss": "8.4.29",
         "react": "18.2.0",
         "react-dom": "18.2.0",
@@ -3540,6 +3541,17 @@
         }
       }
     },
+    "node_modules/next-emoji-rain": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/next-emoji-rain/-/next-emoji-rain-1.0.2.tgz",
+      "integrity": "sha512-O17hSWxtexkjzLeaTyrNlSm7BC0iO5JGRe3WBoan8qRepVz9AfPDli2EQ4BXFQx1fvR3e3S35ShyFD31FjEMLg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.14",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 1da8df9..a697947 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,6 +22,7 @@
     "eslint-config-next": "13.4.19",
     "framer-motion": "^11.2.13",
     "next": "13.4.12",
+    "next-emoji-rain": "^1.0.2",
     "postcss": "8.4.29",
     "react": "18.2.0",
     "react-dom": "18.2.0",
diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
index c14313e..b5de74a 100644
--- a/frontend/src/pages/_app.tsx
+++ b/frontend/src/pages/_app.tsx
@@ -1,5 +1,6 @@
 import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
+import 'next-emoji-rain/dist/index.css';
 
 export default function App({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />;
diff --git a/frontend/src/pages/sponsors.tsx b/frontend/src/pages/sponsors.tsx
index b22271c..01eb342 100644
--- a/frontend/src/pages/sponsors.tsx
+++ b/frontend/src/pages/sponsors.tsx
@@ -2,6 +2,7 @@ import Layout from '@/components/Layout';
 import { useState } from 'react';
 import { diamondLinks, goldLinks, silverLinks, sponsorInfo } from '@/../public/data/sponsorInfos';
 import SponsorModal from '@/components/Sponsors/SponsorModal';
+import { EmojiRain } from 'next-emoji-rain';
 
 export default function SponsorsPage() {
   const logostyle =
@@ -15,10 +16,30 @@ export default function SponsorsPage() {
     setShowModal(true);
   };
 
+  const handleRainClick = (type: string) => {
+    const rainElement = document.getElementById(`${type}Rain`);
+
+    if (!rainElement) return;
+
+    rainElement.classList.toggle('opacity-0', false);
+    setTimeout(() => {
+      rainElement.classList.toggle('opacity-0', true);
+    }, 4000);
+  };
+
   return (
     <Layout>
+      <div id="diamondRain" className="opacity-0">
+        <EmojiRain emoji="💎" />
+      </div>
+      <div id="goldRain" className="opacity-0">
+        <EmojiRain emoji="🪙" />
+      </div>
+      <div id="silverRain" className="opacity-0">
+        <EmojiRain emoji="🪩" />
+      </div>
       <section className="py-8">
-        <h2 className="text-4xl font-black text-center font-bold">DIAMOND SPONSORS</h2>
+        <h2 className="text-4xl font-black text-center font-bold" onClick={() => handleRainClick('diamond')}>DIAMOND SPONSORS</h2>
         <div>
           <div className="w-100 flex flex-col gap-16">
             {showModal && (
@@ -38,7 +59,7 @@ export default function SponsorsPage() {
             </div>
           </div>
         </div>
-        <h2 className="text-4xl font-black text-center font-bold">GOLD SPONSORS</h2>
+        <h2 className="text-4xl font-black text-center font-bold" onClick={() => handleRainClick('gold')}>GOLD SPONSORS</h2>
         <div>
           <div className="flex flex-wrap rounded-[1rem] px-14 py-10 mb-14 gap-16 justify-evenly rounded border-2 border-[#595F6D] my-10">
             {goldLinks.map((item, index) => {
@@ -50,7 +71,7 @@ export default function SponsorsPage() {
             })}
           </div>
         </div>
-        <h2 className="text-4xl font-black text-center font-bold">SILVER SPONSORS</h2>
+        <h2 className="text-4xl font-black text-center font-bold" onClick={() => handleRainClick('silver')}>SILVER SPONSORS</h2>
         <div>
           <div className="flex flex-wrap rounded-[1rem] px-14 py-10 mb-14 gap-16 justify-evenly rounded border-2 border-[#595F6D] mt-10">
             {silverLinks.map((item, index) => {
diff --git a/frontend/src/typing/types.d.ts b/frontend/src/typing/types.d.ts
new file mode 100644
index 0000000..2d26ccc
--- /dev/null
+++ b/frontend/src/typing/types.d.ts
@@ -0,0 +1 @@
+declare module 'next-emoji-rain';
\ No newline at end of file