diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..b242572e
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "githubPullRequests.ignoredPullRequestBranches": [
+        "main"
+    ]
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 717b18a3..e93165b1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,7 @@ import Navbar from './Components/Navbar';
 import Members from './Pages/Members';
 import Resources from './Pages/Resources';
 import WhyUs from './Pages/WhyUs';
+import Events from './Pages/Events';
 import PagesNotFound from './Pages/PagesNotFound';
 
 function App() {
@@ -19,6 +20,7 @@ function App() {
         <Route exact path='/members' element={< Members />}></Route>
         <Route exact path='/resources' element={< Resources />}></Route>
         <Route exact path='/why' element={< WhyUs />}></Route>
+        <Route exact path='/upev' element={< Events />}></Route>
         <Route path='*' element={<PagesNotFound />} />
         </Routes>
       </Router>
diff --git a/src/Components/Herosection.js b/src/Components/Herosection.js
index 1916a945..0f9a4e81 100644
--- a/src/Components/Herosection.js
+++ b/src/Components/Herosection.js
@@ -9,7 +9,6 @@ import slash from '../svg/slash.svg'
 function Herosection() {
   return (
     <div className='hero-container'>
-      
         <div className='svg-cont'>
         <img src={openB} alt='codeat' className='openB' ></img>
         <img src={codeat} alt='codeat' className='codeat'  />
diff --git a/src/Components/Navbar.js b/src/Components/Navbar.js
index 3c4ccd53..4d249077 100644
--- a/src/Components/Navbar.js
+++ b/src/Components/Navbar.js
@@ -10,7 +10,6 @@ function Navbar() {
     <nav className="navbar navbar-dark navbar-expand-md bg-dark text-capitalize fs-5 fw-normal custom-header">
       <div className='container-fluid'> 
         <div>
-          {/* <i className="fas fa-code" data-bss-hover-animate="tada" style={() => color: "var(--bs-red)"}></i> */}
           <Link className="navbar-brand" to='/'  style={styleNavbar}>Code@Amrita</Link>
           <button data-bs-toggle="collapse" className="navbar-toggler" data-bs-target="#navbar-collapse">
             <span className="visually-hidden" style={styleSpan}>Toggle navigation</span>
@@ -28,6 +27,9 @@ function Navbar() {
             <li className="nav-item">
             <Link className='nav-link' to='/why'>Why join us?</Link>
             </li>
+            <li className="nav-item">
+            <Link className='nav-link' to='/upev'>Upcoming Events!</Link>
+            </li>
           </ul>
           <ul className="navbar-nav ms-auto"></ul>
         </div>
diff --git a/src/Components/Upcoming.css b/src/Components/Upcoming.css
new file mode 100644
index 00000000..bb692038
--- /dev/null
+++ b/src/Components/Upcoming.css
@@ -0,0 +1,84 @@
+.bordercss {
+    box-sizing: border-box;
+}
+
+* {
+    box-sizing: inherit;
+}
+
+.columncss {
+    float: left;
+    width: 33.3%;
+    margin-bottom: 16px;
+    padding: 0 8px;
+}
+
+@media screen and (max-width: 650px) {
+    .columncss {
+        width: 100%;
+        display: block;
+    }
+}
+
+.cardcss {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    border-radius: 20px;
+    border-top: 3.9px solid;
+    border-bottom: 3.9px solid;
+    border-top-style: dashed;
+    border-bottom-style: dashed;
+}
+
+.containercss {
+    padding: 0 0px;
+    position: relative;
+}
+
+.containercss::after,
+.rowcss::after {
+    clear: both;
+}
+
+.buttoncss {
+    border: none;
+    outline: 0;
+    display: inline-block;
+    padding: 5px;
+    color: white;
+    background-color: #000;
+    text-align: center;
+    cursor: pointer;
+    width: 50%;
+}
+
+.buttoncss:hover {
+    background-color: rgb(22, 252, 252);
+}
+
+.imagecss {
+    display: block;
+    width: 90%;
+    height: 90%;
+    height: auto;
+}
+
+.overlaycss {
+    position: absolute;
+    bottom: 0;
+    background: rgb(0, 0, 0);
+    background: rgba(0, 0, 0, 0.5);
+    /* Black see-through */
+    color: #f1f1f1;
+    width: 100%;
+    transition: .5s ease;
+    opacity: 0;
+    color: white;
+    font-size: 20px;
+    padding: 0px;
+    text-align: center;
+}
+
+.containercss:hover .overlaycss {
+    opacity: 1;
+    border-radius: 20px;
+}
\ No newline at end of file
diff --git a/src/Components/Upcoming.js b/src/Components/Upcoming.js
new file mode 100644
index 00000000..4497bc48
--- /dev/null
+++ b/src/Components/Upcoming.js
@@ -0,0 +1,45 @@
+import React from 'react'
+import Footer from './Footer'
+import './Upcoming.css'
+import Upcomingcards from './Upcomingcards'
+
+function Upcoming() {
+  return (
+    <div className='cards'>
+
+      <h1>Upcoming Events</h1>
+        
+        <Upcomingcards src='https://cdn-images-1.medium.com/max/2600/1*UGT1Rh9xLww3JeIDR1F0RQ.png' 
+        head="Name"
+        des = "Participate now" link = 'https://www.hackerrank.com/'/>
+
+        <Upcomingcards src='https://cdn-images-1.medium.com/max/2600/1*UGT1Rh9xLww3JeIDR1F0RQ.png' 
+        head="Name"
+        des = "Participate now" link = 'https://www.hackerrank.com/'/>
+        <Upcomingcards src='https://cdn-images-1.medium.com/max/2600/1*UGT1Rh9xLww3JeIDR1F0RQ.png' 
+        head="Name"
+        des = "Participate now" link = 'https://www.hackerrank.com/'/>
+        <Upcomingcards src='https://cdn-images-1.medium.com/max/2600/1*UGT1Rh9xLww3JeIDR1F0RQ.png' 
+        head="Name"
+        des = "Participate now" link = 'https://www.hackerrank.com/'/>
+        <Upcomingcards src='https://cdn-images-1.medium.com/max/2600/1*UGT1Rh9xLww3JeIDR1F0RQ.png' 
+        head="Name"
+        des = "Participate now" link = 'https://www.hackerrank.com/'/>
+        <Upcomingcards src='https://cdn-images-1.medium.com/max/2600/1*UGT1Rh9xLww3JeIDR1F0RQ.png' 
+        head="Name"
+        des = "Participate now" link = 'https://www.hackerrank.com/'/>
+        <Upcomingcards src='https://cdn-images-1.medium.com/max/2600/1*UGT1Rh9xLww3JeIDR1F0RQ.png' 
+        head="Name"
+        des = "Participate now" link = 'https://www.hackerrank.com/'/>
+        <Upcomingcards src='https://cdn-images-1.medium.com/max/2600/1*UGT1Rh9xLww3JeIDR1F0RQ.png' 
+        head="Name"
+        des = "Participate now" link = 'https://www.hackerrank.com/'/>
+        <Upcomingcards src='https://cdn-images-1.medium.com/max/2600/1*UGT1Rh9xLww3JeIDR1F0RQ.png' 
+        head="Name"
+        des = "Participate now" link = 'https://www.hackerrank.com/'/>
+      <Footer />
+    </div>
+  )
+}
+
+export default Upcoming
\ No newline at end of file
diff --git a/src/Components/Upcomingcards.js b/src/Components/Upcomingcards.js
new file mode 100644
index 00000000..c89a06a7
--- /dev/null
+++ b/src/Components/Upcomingcards.js
@@ -0,0 +1,25 @@
+import React from 'react'
+
+function Upcomingcards(props) {
+  return (
+    <div>
+        <div class = "bordercss">
+            <div class="rowcss">
+                <div class="columncss">
+                    <div class="cardcss">
+                        <img src={props.src} class="imagecss" />
+                        <div class="containercss">
+                            <div class="overlaycss">
+                                <h4>{props.head}</h4>
+                                <p>{props.des}</p>
+                                <p><a href={props.link} target='_blank'><button class="buttoncss">Participate</button></a></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+  )
+}
+export default Upcomingcards
\ No newline at end of file
diff --git a/src/Pages/Events.js b/src/Pages/Events.js
new file mode 100644
index 00000000..3fef1a6e
--- /dev/null
+++ b/src/Pages/Events.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import Herosection from '../Components/Herosection'
+import Upcoming from '../Components/Upcoming'
+
+function Events() {
+  return (
+    <div>
+        <Herosection />
+        <Upcoming />
+    </div>
+  )
+}
+
+export default Events
\ No newline at end of file