diff --git a/css/events.css b/css/events.css
index 847a652..dcbbe67 100644
--- a/css/events.css
+++ b/css/events.css
@@ -3,11 +3,11 @@ html {
   }
   
   .body{
-      background-color: #cfe5cc;
+      background-color: #000000;
   }
   
   .header{
-      background-color: #f15a42;
+      background-color: #4B006E;
       position: fixed;
       box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.6);
       z-index: 10;
@@ -36,8 +36,8 @@ html {
   }
   
   .nav-options ul > li a:hover {
-      background-color: #fac92C;
-      color: #f15a42;
+      background-color: #02CCFE;
+      color: #4B006E;
   }
   
   button.hamburger{
@@ -50,13 +50,13 @@ html {
     top: 0;
     left: 0;
     display: block;
-    background:rgb(250,201,44,0.8);
+    background:rgb(2,204,254,0.75);
     z-index:2;
   }
   
   #text{
     font-size: 50px;
-    color:white; 
+    color:rgb(0, 0, 0); 
     z-index: 100;
     padding-bottom: 50px;  
   }
@@ -71,7 +71,7 @@ html {
       padding: 2vw;
       outline: none!important;
       font-size: 3vh;
-      background-color: transparent;
+      background-color: #2b2b2b;
       border: none;
       cursor: pointer;
       color: #ffffff;
@@ -115,21 +115,23 @@ html {
       align-items: center;
       font-family: 'Alatsi', sans-serif;
       font-weight: 100;
-      background-color: #ffffff;
+      background-color: #1b1b1b;
   }
   
   .about heading {
       font-family: 'Alatsi', sans-serif;
       padding-bottom: 10px;
-      color: #1b4793;
-      border-bottom: 5px solid #f15a42; 
+      color: #1b1b1b;
+      background-color: #1b1b1b;
+      border-bottom: 5px solid #ffffff; 
       font-size: 35px;
   }
   
   .about parabody {
       font-family: 'Raleway', sans-serif;
       font-size: 20px;
-      color: #1b4793;
+      color: #ffffff;
+      background-color: #1b1b1b;
       text-align: justify;
   }
   
@@ -151,7 +153,7 @@ html {
   }
   
   hr {
-      color: #ffffff;
+      color: #000000;
       opacity: 0.6;
       display: block;
       margin-top: 2em;
@@ -170,17 +172,14 @@ html {
   }
   
   .card{
-      border-color: transparent;
-      background-color: transparent;
+      border-color: #000000;
+      background-color: #1b1b1b;
+      color: #ffffff;
+      border-radius: 20px;
+        
   }
   
-  .card-body{
-      font-family: 'Raleway', sans-serif;
-      font-family: 'Raleway', sans-serif;
-	  font-size: 17px;
-	  color: #1b4793;
-	  text-align: justify;
-  }
+  
   
   .card-body name{
       text-align: center;
@@ -223,11 +222,11 @@ html {
   }
   
   .carousel {
-      background-color: transparent;
+      background-color: #000000;
   }
   
   .activities{
-      background-color: #cfe5cc;
+      background-color: #000000;
       padding-bottom: 20px;
   }
   
@@ -346,7 +345,7 @@ html {
   }
   
   .main-header {
-      
+      background-color: #000000;
   }
   
   
@@ -499,7 +498,7 @@ html {
   .base{
     height:400px;
     width:300px;
-    background:#d33;
+    background:#4B006E ;
     position:relative;
     margin-top:100px;
     margin: auto;
@@ -514,7 +513,7 @@ html {
     left:50%;
     margin-left:-35px;
     top: -40px;
-    background: #d33;
+    background: #4B006E;
   }
   
   .base1 {
@@ -526,19 +525,19 @@ html {
   }
   
   .base2 {
-      background:#f15a42;
+      background:#4B006E;
   }
   
   .circle2 {
-      background:#f15a42;
+      background:#4B006E;
   }
   
   .base3 {
-      background:#fac92C;
+      background:#02CCFE;
   }
   
   .circle3 {
-      background:#fac92C;
+      background:#02CCFE;
   }
 
 
@@ -552,26 +551,34 @@ html {
 
 
   .button {
-    background: white;
+    background: #1b1b1b;
 	border: none;
-	color: #1b4793;
+	color: #ffffff;
 	padding: 15px 32px;
 	text-align: center;
+    border-radius: 50px;
+    margin: 4px 2px;
 	text-decoration: none;
 	display: inline-block;
     font-size: 30px;
     font-family: 'Alatsi', sans-serif;
 	cursor: pointer;
-	width:48%;
+	width:40%;
   }
 
   .button:hover{
-    border-bottom: 5px solid #f15a42;
+    border-bottom: 5px solid #000000;
+    background: rgb(0, 0, 0);
   }
 
 
   .card:hover{
-		background: lightcyan;
+		background: rgb(0, 0, 0);
+        border-color: #02CCFE;
+        color: #ffffff;
+        transition: 0.3s;
+        
       }
+
   
   
\ No newline at end of file
diff --git a/html/events.html b/html/events.html
index 6cd86f6..32ce36c 100644
--- a/html/events.html
+++ b/html/events.html
@@ -56,6 +56,7 @@
 		gtag('config', 'UA-156009380-1');
 	</script>
 </head>
+<body style="background-color: black;">
 <div class="header container-fluid" id="header">
 	<div class="row" style="margin-right: 35px; ">
 		<div class="col-1 logo">
@@ -90,7 +91,7 @@
 	</div>
 	<a href="https://github.com/acm-w-nitk" class="github-corner" aria-label="View source on GitHub"><svg width="65"
 			height="65" viewBox="0 0 250 250"
-			style="fill:#fff; color:#f15a42; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
+			style="fill:rgb(0, 0, 0); color:#f15a42; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
 			<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
 			<path
 				d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
@@ -149,11 +150,11 @@
 	</div>
 </div>
 <br>
-<div align="center">
-	<button class="button" onclick="newevents()" id="newevents">Upcoming Events</button>
+<div align="center" style="background-color: #000000;">
+	<button class="button" onclick="newevents()" id="newevents" >Upcoming Events</button>
 	<button class="button" onclick="oldevents()" id="oldevents">Past Events</button>
 </div>
-<div id="app"></div>
+<div id="app" style="background-color: black;"></div>
 <script src="../js/events.js"></script>
 <link rel="stylesheet" href="../css/events.css">
 </body>
\ No newline at end of file
diff --git a/js/events.js b/js/events.js
index a0f02b8..453872e 100644
--- a/js/events.js
+++ b/js/events.js
@@ -31,21 +31,25 @@ const neweventsData = [
 ];
 
 
-function EventTemplate(events) {
+function EventTemplateOut(events) {
   return `
-  <div class="card col-md-4 col-sm-12> 
+  <button class="card col-md-3 col-sm-16> 
   <div class="card">
   <div style="text-align:center">
   <img src="${events.photo}" alt="Card image cap" class="img-fluid">
-  <div class="card-body">
-    <h5 class="card-title" style="text-align:center";><strong>${events.name}</strong></h5>
-    <p class="card-text">${events.desc}</p>
-  </div>
-  </div>
+  <h5 class="card-title" style="text-align:center";><strong>${events.name}</strong></h5>
+  <div class="card--hover">
+  
+  <p class="card-text">${events.desc}</p>
   </div>
+  </div> 
+  </button>
   `;
 
 }
+
+
+
 document.getElementById("oldevents").click();
 function oldevents() {
   i = 0;
@@ -53,10 +57,11 @@ function oldevents() {
   document.getElementById("app").innerHTML = `<br>
 <div class= "container">
 <div class = "row">
-  ${oldeventsData.map(EventTemplate).join("")} </div>
+  ${oldeventsData.map(EventTemplateOut).join("")}
+   </div>
 `;
-  document.getElementById("newevents").style.borderBottom = "5px solid #ffffff";
-  document.getElementById("oldevents").style.borderBottom = "5px solid #f15a42";
+  document.getElementById("newevents").style.border = "5px solid #1b1b1b";
+  document.getElementById("oldevents").style.border = "5px solid #02CCFE";
 }
 
 function newevents() {
@@ -65,9 +70,8 @@ function newevents() {
   document.getElementById("app").innerHTML = ` <br>
 <div class= "container">
 <div class="row">
-
   ${neweventsData.map(EventTemplate).join("")} </div></div></div></div></div>
 `;
-  document.getElementById("oldevents").style.borderBottom = "5px solid #ffffff";
-  document.getElementById("newevents").style.borderBottom = "5px solid #f15a42";
+  document.getElementById("oldevents").style.border = "5px solid #1b1b1b";
+  document.getElementById("newevents").style.border = "5px solid #02CCFE";
 }