diff --git a/src/components/monitor.tsx b/src/components/monitor.tsx
index 2a64622..2cc7739 100644
--- a/src/components/monitor.tsx
+++ b/src/components/monitor.tsx
@@ -12,7 +12,7 @@ export const Monitor = () => {
 			<img
 				src={monitorImage}
 				alt=""
-				className="relative z-30 hidden w-full md:absolute md:-top-24 md:right-12 md:block md:h-auto md:w-auto"
+				className="relative z-30 hidden w-full md:absolute md:-top-24 md:right-12 md:block md:h-auto md:w-auto md:animate-float"
 			/>
 		</>
 	);
diff --git a/src/index.css b/src/index.css
index cd8d097..bc19ad5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,6 @@
 @import 'tailwindcss';
 
+/* stylelint-disable-next-line */
 @theme {
   --font-montserrat: 'Montserrat', sans-serif;
 
@@ -15,6 +16,8 @@
   --color-aidevs-white: #F6F6FF;
 
   --color-accent: #EE196E;
+
+  --animate-float: float 3s ease-in-out infinite;
 }
 
 html,
@@ -27,7 +30,7 @@ body {
   background-color: var(--color-black);
 }
 
-/* Floating animation for charity badge */
+/* Floating animation for monitor and charity badge */
 @keyframes float {
   0%, 100% {
     transform: translateY(0px);