diff --git a/assets/christmas_theme/config.js b/assets/christmas_theme/config.js
index 3db6aae..504aa3d 100644
--- a/assets/christmas_theme/config.js
+++ b/assets/christmas_theme/config.js
@@ -25,7 +25,8 @@ const particleConfig = {
     delay: 0,
     fullScreen: {
       enable: true,
-      zIndex: -1,
+      zIndex: 1,
+
     },
     detectRetina: false,
     duration: 0,
diff --git a/components/AnimatedScrollButton/index.module.css b/components/AnimatedScrollButton/index.module.css
index dafcfa0..4914012 100644
--- a/components/AnimatedScrollButton/index.module.css
+++ b/components/AnimatedScrollButton/index.module.css
@@ -12,8 +12,11 @@
 }
 
 .mouse:hover {
-  @apply border-blue;
-  box-shadow: 0px 0px 14px 1px rgb(36 172 255);
+  /*  @apply border-blue;
+   box-shadow: 0px 0px 14px 1px rgb(36 172 255); */
+  /* For Christmas theme */
+  @apply border-golden;
+  box-shadow: 0px 0px 14px 1px #ffed79;
 }
 
 .cursor {
@@ -27,7 +30,9 @@
 }
 
 .mouse:hover .cursor {
-  @apply bg-blue;
+  /* @apply bg-blue; */
+  /* For Christmas Theme */
+  @apply bg-golden;
   animation: none;
 }
 
diff --git a/components/StyledText/Glitter.module.css b/components/StyledText/Glitter.module.css
index ef2fa97..ea2c430 100644
--- a/components/StyledText/Glitter.module.css
+++ b/components/StyledText/Glitter.module.css
@@ -15,7 +15,9 @@
   position: absolute;
   bottom: 0;
   left: 0;
-  background: linear-gradient(to right, transparent, #24acff);
+  /* background: linear-gradient(to right, transparent, #24acff); */
+  /* below background-color is for christmas theme */
+  background: linear-gradient(to right, transparent, rgb(255, 237, 121));
   height: 3px;
   width: 100%;
   animation: animate 2s linear infinite;
diff --git a/components/associations/association.module.css b/components/associations/association.module.css
index e7c9dc1..1af5a72 100644
--- a/components/associations/association.module.css
+++ b/components/associations/association.module.css
@@ -30,7 +30,9 @@
   height: 130%;
   width: 130%;
   border-radius: 50%;
-  background: linear-gradient(90deg, #00ccff, #98e8fc);
+  /* background: linear-gradient(90deg, #00ccff, #98e8fc); */
+  /* For Christmas Theme */
+  background: linear-gradient(90deg, #ffa776, #ffed79);
   opacity: 0.25;
 }
 
diff --git a/components/button/Button.module.css b/components/button/Button.module.css
index b6d72ee..0172dc5 100644
--- a/components/button/Button.module.css
+++ b/components/button/Button.module.css
@@ -13,14 +13,22 @@
   width: 0;
   height: 0;
   border-radius: 50%;
-  background: rgb(51, 121, 238);
-  background: radial-gradient(circle, rgba(51, 121, 238, 1) 0%, rgba(36, 172, 255, 1) 100%);
+  /* For Christmas Theme */
+  background: #ffed79;
+  background: radial-gradient(circle, #ffa776 0%, #ffed79, 100%);
+  /* background: rgb(51, 121, 238);
+  background: radial-gradient(circle, rgba(51, 121, 238, 1) 0%, rgba(36, 172, 255, 1) 100%); */
   transition: width 0.5s, height 0.5s;
 }
 
 .rippleButton:hover {
   border-color: transparent;
 }
+/* Below span tag styling is For christmas Theme */
+.rippleButton:hover > span {
+  transition: 150ms;
+  @apply text-primary;
+}
 
 .rippleButton:hover::before {
   height: 400px;
diff --git a/components/event/event.module.css b/components/event/event.module.css
index 5112c6b..607b2b8 100644
--- a/components/event/event.module.css
+++ b/components/event/event.module.css
@@ -16,7 +16,9 @@
   transition: transform ease 250ms;
   border-radius: 0.5rem;
   overflow: hidden;
-  box-shadow: 0 0 5px 1px hsl(203, 100%, 57%);
+  /* box-shadow: 0 0 5px 1px hsl(203, 100%, 57%); */
+  /* For Christmas Theme */
+  box-shadow: 0 0 5px 1px #FFED79;
 }
 
 .card:hover {
@@ -67,7 +69,9 @@
     top: 100%;
     height: 3px;
     width: calc(100% + 2.5rem);
-    background: hsl(203, 100%, 57%);
+    /* For Christmas Theme */
+    background: #FFED79;
+    /* background: hsl(203, 100%, 57%); */
     transform: scaleX(0);
     transition: transform 200ms ease;
     transform-origin: left;
@@ -87,7 +91,9 @@
   display: inline-block;
   text-decoration: none;
   color: black;
-  background: hsl(203, 100%, 57%);
+  /* For Christmas Theme */
+  background: #FFED79;
+  /* background: hsl(203, 100%, 57%); */
   padding: 0.5em 1.25em;
   border-radius: 0.25rem;
 }
diff --git a/components/navbar/Hamburger.module.css b/components/navbar/Hamburger.module.css
index 293427a..0a2ad3b 100644
--- a/components/navbar/Hamburger.module.css
+++ b/components/navbar/Hamburger.module.css
@@ -42,7 +42,9 @@
 }
 
 .navLink:hover {
-  @apply text-blue;
+  /* @apply text-blue; */
+  /* For Christmas Theme */
+  @apply text-golden;
 }
 
 .navLink:hover::after {
diff --git a/components/navbar/Navbar.js b/components/navbar/Navbar.js
index ebd9ddb..1751469 100644
--- a/components/navbar/Navbar.js
+++ b/components/navbar/Navbar.js
@@ -95,7 +95,9 @@ function Navbar() {
         >
           <Button
             style={{ border: 'none' }}
-            className="bg-primary-light text-primary hover:text-primary-light"
+            // className="bg-primary-light text-primary hover:text-primary-light"
+            /* For christams Theme */
+            className="bg-primary-light text-primary"
           >
             <span style={SpanStyle}>Join Us</span>
           </Button>
diff --git a/components/navbar/Navbar.module.css b/components/navbar/Navbar.module.css
index 5b3abd8..083e910 100644
--- a/components/navbar/Navbar.module.css
+++ b/components/navbar/Navbar.module.css
@@ -27,7 +27,10 @@
   width: fit-content;
 }
 .navbarList > .navLink:hover {
-  @apply text-blue font-medium;
+  /* @apply text-blue font-medium; */
+  
+  /* For christmas theme */
+  @apply text-golden font-medium;
 }
 
 .humburgerMenu {
diff --git a/components/navbar/Sidebar.js b/components/navbar/Sidebar.js
index 2942276..1b7f824 100644
--- a/components/navbar/Sidebar.js
+++ b/components/navbar/Sidebar.js
@@ -4,7 +4,7 @@ import { CgClose } from 'react-icons/cg';
 import Image from 'next/image';
 import Link from 'next/link';
 import styles from './Hamburger.module.css';
-import Logo from '../../assets/hncc-logo.png';
+import Logo from '../../assets/christmas_theme/christmas-theme-logo.png';
 import Button from '../button/Button';
 
 const SpanStyle = {
@@ -113,7 +113,8 @@ function Sidebar({ isMounted, unmount }) {
         >
           <Button
             style={{ border: 'none' }}
-            className="bg-primary-light text-primary hover:text-primary-light xs:!py-3"
+            /*             className="bg-primary-light text-primary hover:text-primary-light xs:!py-3" */
+            className="bg-primary-light text-primary xs:!py-3"
           >
             <span style={SpanStyle}>Join Us</span>
           </Button>
diff --git a/components/screen/Screen.js b/components/screen/Screen.js
index 2ff767d..7d52f93 100644
--- a/components/screen/Screen.js
+++ b/components/screen/Screen.js
@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import ParticleBackground from '../../assets/christmas_theme/ParticlesBg';
 import Footer from '../footer/Footer';
 import Navbar from '../navbar/Navbar';
 import SocialsBar from '../socialsbar/SocialsBar';
@@ -21,6 +22,7 @@ function Screen({ children }) {
   return (
     <main id="overlayScreen" className="h-full relative">
       <div className="cursor" />
+      <ParticleBackground />
       <Navbar />
       <SocialsBar />
       {children}
diff --git a/components/socialsbar/SocialsBar.module.css b/components/socialsbar/SocialsBar.module.css
index 4eff55f..9a57df4 100644
--- a/components/socialsbar/SocialsBar.module.css
+++ b/components/socialsbar/SocialsBar.module.css
@@ -12,5 +12,7 @@
 }
 .socialsBarIcons:hover {
   @apply text-blue-light;
-  fill: rgb(56, 200, 236) !important;
+  /* fill: rgb(56, 200, 236) !important; */
+  /* For christmas theme */
+  fill: rgb(255, 237, 121) !important;
 }
diff --git a/components/sponsors/sponsors.module.css b/components/sponsors/sponsors.module.css
index 1e77142..07fcd59 100644
--- a/components/sponsors/sponsors.module.css
+++ b/components/sponsors/sponsors.module.css
@@ -27,7 +27,9 @@
   height: 160%;
   min-height: calc(100% + 50px);
   width: 50%;
-  background: linear-gradient(#00ccff, #98e8fc);
+  /* background: linear-gradient(#00ccff, #98e8fc); */
+  /* Below is for christmas theme */
+  background: linear-gradient(rgb(255, 237, 121), rgb(253, 244, 186));
   animation: animate 4s linear infinite;
   opacity: 0.25;
   transition: all 400ms ease-in-out;
diff --git a/components/teams/Team.module.css b/components/teams/Team.module.css
index 0166811..d6572c5 100644
--- a/components/teams/Team.module.css
+++ b/components/teams/Team.module.css
@@ -1,12 +1,20 @@
 .card {
   @apply p-4 relative flex flex-col justify-center items-center overflow-hidden rounded-2xl;
   min-height: 350px;
-  background: rgb(0, 204, 255);
+  /* background: rgb(0, 204, 255); */
+  /* For christmas theme */
+  background: rgb(255, 237, 121);
+  /* For Christmas theme */
   background: linear-gradient(
+    45deg,
+    rgba(255, 237, 121, 0.44861694677871145) 0%,
+    rgba(253, 244, 186, 0.4) 100%
+  );
+  /* background: linear-gradient(
     45deg,
     rgba(0, 204, 255, 0.44861694677871145) 0%,
     rgba(152, 232, 252, 0.4) 100%
-  );
+  ); */
   transition: all 300ms ease-in-out;
 }
 
@@ -22,7 +30,9 @@
 .card::before {
   @apply absolute w-32;
   content: '';
-  background: linear-gradient(#00ccff, #98e8fc);
+  /* background: linear-gradient(#00ccff, #98e8fc); */
+  /* For christmas theme */
+  background: linear-gradient(#ffed79, #ffa776);
   animation: animate 4s linear infinite;
   height: 140%;
   opacity: 0;
@@ -44,7 +54,9 @@
 }
 
 .socials > a:hover > svg {
-  fill: #51bcff;
+  /* fill: #51bcff; */
+  /* For Christmas theme */
+  fill: rgb(255, 237, 121);
 }
 
 .postHead {
diff --git a/components/video/Video.module.css b/components/video/Video.module.css
index 4bc155e..5331a05 100644
--- a/components/video/Video.module.css
+++ b/components/video/Video.module.css
@@ -2,6 +2,17 @@
   @apply relative;
   height: 90vh;
   @apply sm:h-auto;
+  /* Below styling is for christmas theme */
+  background: url('../../assets/christmas_theme/background3.png');
+  background-size: cover;
+}
+
+.GRADIENT {
+  background-image: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 1),
+    rgba(255, 255, 255, 0) 90%
+  );
 }
 
 .designVideoContainer {
@@ -10,6 +21,10 @@
   transition: all 400ms ease-in-out;
   height: 100%;
   overflow: hidden;
+  /* Below styling is for christmas theme */
+  background: linear-gradient(90.28deg, #ffed79 1.18%, #ffa776 98.69%);
+  background-clip: text;
+  color: transparent;
 }
 
 .designVideoContainer > video {
diff --git a/pages/contact.js b/pages/contact.js
index 5908534..c57ecbe 100644
--- a/pages/contact.js
+++ b/pages/contact.js
@@ -99,7 +99,9 @@ function ContactUs() {
               <button type="submit" className="mt-16 flex rounded-full">
                 <Button
                   style={{ border: 'none' }}
-                  className="bg-primary-light text-primary hover:text-primary-light"
+                  /* For Christmas Theme */
+                  className="bg-primary-light text-primary"
+                  // className="bg-primary-light text-primary hover:text-primary-light"
                 >
                   <span
                     style={{
diff --git a/styles/global.css b/styles/global.css
index 9301f27..ab7de92 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -108,7 +108,9 @@ a {
 }
 
 .cursor {
-  background: rgb(51, 121, 238);
+  /* background: rgb(51, 121, 238); */
+  /* For christmas theme */
+  background: rgb(255, 237, 121);
   transform: translate(-50%, -50%);
   @apply h-[10px] w-[10px] fixed top-0 left-0 z-[9999999] pointer-events-none rounded-2xl;
   transition: all 0.15s ease;