diff --git a/data/events.json b/data/events.json
new file mode 100644
index 0000000..f2073e8
--- /dev/null
+++ b/data/events.json
@@ -0,0 +1,16 @@
+[
+  {
+    "name": "HTML CSS GO!",
+    "techStack": null,
+    "domain": "Software Development",
+    "projectImage": "./events/HTMLCSSGO.png",
+    "projectDescription": "Are you looking to quench your thirst for knowledge and competition ? Brace yourselves because here is a golden opportunity to showcase your skills in HTML CSS GO ! - a web development competition (CSS battle) open to SSN and SNU."
+  },
+  {
+    "name": "PICKLE RICKLE",
+    "techStack": null,
+    "domain": "Competitive Programming",
+    "projectImage": "./events/PICKLE RICKLE.jpeg",
+    "projectDescription": "We are thrilled and delighted to unveil our first-ever nationwide event in collaboration with the well renowned platform, GeeksforGeeks.Yes, you read that right!A national level programming contest - 'PICKLE RICKLE' open to all colleges is being organised by the Coding Club of SSNCE."
+  }
+]
diff --git a/pages/Components/Navbar.js b/pages/Components/Navbar.js
index 2dd6c33..6bdf17e 100644
--- a/pages/Components/Navbar.js
+++ b/pages/Components/Navbar.js
@@ -75,6 +75,15 @@ function NavBar(props) {
             >
               <Nav.Item className={styles.nav_item}>Meets</Nav.Item>
             </Link>
+            <Link
+              href="/events"
+              onClick={() => {
+                setExpanded(false);
+              }}
+              passHref
+            >
+              <Nav.Item className={styles.nav_item}>Events</Nav.Item>
+            </Link>
             <Link href="/projects" passHref>
               <Nav.Item className={styles.nav_item}>Projects</Nav.Item>
             </Link>
diff --git a/pages/events.js b/pages/events.js
new file mode 100644
index 0000000..7f7dfd3
--- /dev/null
+++ b/pages/events.js
@@ -0,0 +1,338 @@
+import React, { useEffect, useState } from "react";
+
+import "bootstrap/dist/css/bootstrap.min.css";
+
+const LightboxContext = React.createContext();
+const { Provider, Consumer } = LightboxContext;
+
+class MyProvider extends React.Component {
+  state = {
+    isOpen: false,
+    isActive: false,
+    isLoading: false,
+    activeImageId: null,
+    setActiveImageId: (id) => this.setActiveImageId(id),
+    toggleActive: () => this.toggleActive(),
+    hideLightbox: () => this.hideLightbox(),
+    showPrevImage: () => this.showPrevImage(),
+    showNextImage: () => this.showNextImage(),
+    data: [
+      {
+        id: 0,
+        small: 'https://images.unsplash.com/photo-1510412094233-53186308173b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=af8eae835a4287e33f92411138ffc0f9&auto=format&fit=crop&w=1950&q=80?auto=compress&fit=crop&w=224&q=40',
+        dataFull: 'https://images.unsplash.com/photo-1510412094233-53186308173b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=af8eae835a4287e33f92411138ffc0f9'
+      },
+      {
+        id: 1,
+        small: 'https://images.unsplash.com/photo-1516161786189-4c01a74daa94?ixlib=rb-0.3.5&s=5720ace14b95cf35d11b4b1e7231e1f6?auto=compress&fit=crop&w=224&q=40',
+        dataFull: 'https://images.unsplash.com/photo-1516161786189-4c01a74daa94?ixlib=rb-0.3.5&s=5720ace14b95cf35d11b4b1e7231e1f6' 
+      },
+      {
+        id: 2,
+        small: 'https://images.unsplash.com/photo-1422065254131-0959ca26ded4?ixlib=rb-0.3.5&s=e13052f68effa67a8de344863c5b9997?auto=compress&fit=crop&w=224&q=40',
+        dataFull: 'https://images.unsplash.com/photo-1422065254131-0959ca26ded4?ixlib=rb-0.3.5&s=e13052f68effa67a8de344863c5b9997'
+      },
+      {
+        id: 3,
+        small: 'https://images.unsplash.com/photo-1486666188991-b5be4844c800?ixlib=rb-0.3.5&s=24024135f79e7e1157dd40d1819d066e?auto=compress&fit=crop&w=224&q=40',
+        dataFull: 'https://images.unsplash.com/photo-1486666188991-b5be4844c800?ixlib=rb-0.3.5&s=24024135f79e7e1157dd40d1819d066e' 
+      },
+      {
+        id: 4,
+        small: 'https://images.unsplash.com/photo-1508844958472-0762647aebac?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=870693ca86035205c5161ee55421347c?auto=compress&fit=crop&w=224&q=40', 
+        dataFull: 'https://images.unsplash.com/photo-1508844958472-0762647aebac?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=870693ca86035205c5161ee55421347c'
+      },
+      {
+        id: 5,
+        small: 'https://images.unsplash.com/photo-1473789810014-375ed569d0ed?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=41fd11c0f441d3bee2e6225054604dc9?auto=compress&fit=crop&w=224&q=40', 
+        dataFull: 'https://images.unsplash.com/photo-1473789810014-375ed569d0ed?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=41fd11c0f441d3bee2e6225054604dc9'
+      }, 
+    ]
+  };
+
+  setActiveImageId = (id) => {
+    if (id === null) {
+      this.setState({
+        activeImageId: null,
+        isOpen: false,
+        isActive: false
+      })
+    } 
+    else {
+      this.setState({
+        activeImageId: id,
+        isOpen: true,
+        isLoading: true,
+      });
+    }
+  }
+
+  toggleActive = () => {
+    this.setState({
+      isLoading: false,
+      isActive: true,
+    });
+  }
+
+  hideLightbox = () => {
+    this.setState({
+      isOpen: false,
+      isLoading: false,
+      isActive: false,
+    });
+  }
+  
+  showPrevImage = () => {
+    if (this.state.activeImageId + 1 >= 0) {
+      this.setState(prevState => ({
+        isLoading: true,
+        isActive: false,
+        activeImageId: prevState.activeImageId - 1
+      }));
+    }
+  }
+  
+  showNextImage = () => {
+    if (this.state.activeImageId + 1 < this.state.data.length) {
+      this.setState(prevState => ({
+        isLoading: true,
+        isActive: false,
+        activeImageId: prevState.activeImageId + 1
+      }));
+    }
+  }
+  
+  render() {
+    return (
+      <Provider value={this.state}>
+        {this.props.children}
+      </Provider>
+    )
+  }
+}
+
+// applications classnames
+const classes = {
+  lightbox: 'lightbox',
+  wrapper: 'lightbox__wrapper',
+  content: 'lightbox__content',
+  contentImage: 'lightbox__content__image',
+  display: 'lightbox__display',
+  displayImage: 'lightbox__display__image',
+  loading: 'lightbox--loading',
+  active: 'lightbox--active',
+  loader: 'lightbox__loader',
+  prev: 'lightbox__previous',
+  next: 'lightbox__next'
+};
+
+class LightboxWrapper extends React.Component {
+  render() {
+    return (
+      <div className={classes.wrapper}>
+        <LightboxContent />
+        <Consumer>
+          {(context) => (
+            <Lightbox values={context}/>
+          )}
+        </Consumer>
+      </div>
+    );
+  }
+}
+
+class LightboxContent extends React.Component {
+  renderContentImages = (context) => {
+    return context.data.map(data => (
+      <LightboxContentImage 
+        key={data.small} 
+        src={data.small} 
+        imageId={data.id} 
+      />
+    ));
+  }
+ 
+  render() {
+    return (
+      <Consumer>
+        {(context) => (
+           <div className={classes.content}>
+            {this.renderContentImages(context)}
+          </div>
+        )}
+      </Consumer>
+    );
+  }
+} 
+
+class LightboxContentImage extends React.Component {
+  handleClick = (context, id) => {
+    return () => {
+      context.setActiveImageId(id);
+    }
+  }
+  render() {
+    return (
+      <Consumer>
+        {(context) => (
+          <div className={classes.contentImage} onClick={this.handleClick(context, this.props.imageId)}>
+            <img src={this.props.src} alt=""/>
+          </div>
+        )}
+      </Consumer>
+    );
+  }
+}
+
+class Lightbox extends React.Component {
+  componentDidMount() {
+    this.lightbox.addEventListener('click', ({ target }) => {
+      if (target === this.lightbox && (this.props.values.isActive || this.props.values.isLoading)) {
+        this.props.values.hideLightbox();
+      }
+    });
+  }
+
+  render() {
+    const { isActive, isLoading, isOpen, activeImageId } = this.props.values;
+    const activeClass = isActive ? classes.active : '';
+    const loadingClass = isLoading ? classes.loading : '';
+ 
+    return (
+      <div className={`${classes.lightbox} ${activeClass} ${loadingClass}`} ref={(ref) => this.lightbox = ref}>
+        {isLoading && !isActive ? <Loader /> : null}
+        <Consumer>
+          {(context) => (
+            <React.Fragment>
+              <NavButton classname={classes.prev} handleNextImage={context.showPrevImage}>
+                <span>&lt;</span>
+              </NavButton>
+              <LightboxDisplayImage 
+                imageLoaded={context.toggleActive}
+                values={context}
+              />
+              <NavButton classname={classes.next} handleNextImage={context.showNextImage}>
+                <span>&gt;</span>
+              </NavButton>
+            </React.Fragment>
+          )}
+        </Consumer>
+      </div>
+    )
+  }
+}
+
+class LightboxDisplayImage extends React.Component {
+  state = {
+    currentImage: null,
+    cachedImages: {},
+  };
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.values === this.props.values) {
+      return;
+    }
+    else {
+      const { activeImageId } = nextProps.values;
+      const isInCache = this.checkCache(activeImageId);
+
+      if (isInCache) {
+        this.setState((prevState) => ({ currentImage: prevState.cachedImages[activeImageId] }));
+      }
+      else {
+        const imgSrc = nextProps.values.data[activeImageId].dataFull;
+        this.setState((prevState) => {
+          const updatedCache = Object.assign({}, prevState.cachedImages, {[activeImageId]: imgSrc});
+          return { 
+            cachedImages: updatedCache,
+            currentImage: imgSrc
+          }
+        });
+      }
+    }
+  }
+
+  handleOnLoad = () => {
+    this.props.imageLoaded();
+  }
+    
+  checkCache = (index) => {
+    const { cachedImages } = this.state;
+    if (!cachedImages.hasOwnProperty(index)) {
+      return false;
+    }
+    return true;
+  }
+
+  render() {
+    return (
+      <div className={classes.display}>
+        {!this.state.currentImage ? 
+          null 
+        : (
+          <Image src={this.state.currentImage} classname={classes.displayImage} onLoad={this.handleOnLoad} />
+        )}
+      </div>
+    )
+  }
+}
+
+const Loader = () => (
+  <div className={classes.loader}>
+    <div></div>
+  </div>
+);
+
+const Image = ({ src, classname, onLoad, alt = '' }) => {
+  return (
+    <img src={src} className={classname} alt={alt} onLoad={onLoad} />
+  );
+};
+
+const NavButton = ({ classname, handleNextImage, children }) => (
+  <button className={classname} onClick={handleNextImage}>
+    {children}
+  </button>
+);
+
+class ErrorBoundary extends React.Component {
+  state = {
+    hasError: false,
+  }
+  
+  componentDidCatch(error, info) {
+    console.log(error, info);
+    this.setState(state => ({ hasError: true }));
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <p>Sorry, something went wrong. Please check the console</p>
+      );
+    } else {
+      return (
+        <div>{this.props.children}</div>
+      );
+    }
+  } 
+}
+
+class App extends React.Component {
+  render() {
+    return (
+      <MyProvider>
+        <ErrorBoundary>
+          <LightboxWrapper /> 
+        </ErrorBoundary>
+      </MyProvider>
+    );
+  }
+}
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('app')
+);
+
+export default ProjectsPage;
diff --git a/public/events/HTMLCSSGO.png b/public/events/HTMLCSSGO.png
new file mode 100644
index 0000000..7945a3a
Binary files /dev/null and b/public/events/HTMLCSSGO.png differ
diff --git a/public/events/PICKLE RICKLE.jpeg b/public/events/PICKLE RICKLE.jpeg
new file mode 100644
index 0000000..b23cca1
Binary files /dev/null and b/public/events/PICKLE RICKLE.jpeg differ
diff --git a/styles/events.module.css b/styles/events.module.css
new file mode 100644
index 0000000..b8d4dd4
--- /dev/null
+++ b/styles/events.module.css
@@ -0,0 +1,178 @@
+@import url("https://fonts.googleapis.com/css?family=Ubuntu");
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  font-family: "Lato", sans-serif;
+  font-size: 16px;
+  line-height: 1.4;
+  background-image: linear-gradient(to top, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+}
+
+a {
+  text-decoration: none;
+}
+
+.lightbox__content {
+  margin: 2em auto;
+  max-width: 480px;
+  display: flex;
+  flex-flow: row wrap;
+}
+@media all and (min-width: 840px) {
+  .lightbox__content {
+    max-width: 740px;
+  }
+}
+.lightbox__content img {
+  margin: 0.5em;
+  border-radius: 4px;
+  box-shadow: 0 4px 7px rgba(55, 55, 55, 0.4);
+  cursor: pointer;
+}
+
+.lightbox {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 10px;
+  background: rgba(0, 0, 0, 0.85);
+  opacity: 0;
+  visibility: hidden;
+  z-index: -1;
+  transition: z-index 0s 0.3s, opacity 0.3s, visibility 0s 0.3s;
+}
+@media all and (min-width: 768px) {
+  .lightbox {
+    padding: 0 35px;
+  }
+}
+.lightbox.lightbox--loading, .lightbox.lightbox--active {
+  z-index: 10;
+  opacity: 1;
+  visibility: visible;
+  transition: z-index 0s 0s, opacity 0.3s, visibility 0s 0s;
+}
+.lightbox__display {
+  min-width: 80px;
+  min-height: 80px;
+  background: #fff;
+  border: 4px solid #fff;
+  border-radius: 4px;
+  opacity: 0;
+  transform: translateY(60px);
+  transition: opacity 0s, transform 0s ease-out;
+}
+.lightbox__display__image {
+  min-width: 100px;
+  min-height: 100px;
+  max-height: calc(100vh - 90px);
+}
+.lightbox--active .lightbox__display {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 0.4s, transform 0.3s ease-out;
+}
+.lightbox--first .lightbox__display {
+  transform: translateX(40px);
+  transition: transform 0.15s ease-out;
+}
+.lightbox--last .lightbox__display {
+  transform: translateX(-40px);
+  transition: transform 0.15s ease-out;
+}
+.lightbox__previous, .lightbox__next {
+  width: 44px;
+  height: 44px;
+  position: absolute;
+  top: calc(50% - 22px);
+  padding: 0 0 10px;
+  font-size: 34px;
+  line-height: 45px;
+  background: #fe665c;
+  border: 0;
+  border-radius: 50%;
+  color: #fff;
+  outline: none;
+  cursor: pointer;
+  transition: 0.3s ease-out;
+}
+.lightbox__previous:hover, .lightbox__next:hover {
+  opacity: 1;
+}
+.lightbox--loading .lightbox__previous, .lightbox--loading .lightbox__next {
+  display: none;
+}
+.lightbox__previous {
+  left: 8px;
+}
+.lightbox__next {
+  right: 8px;
+}
+.lightbox__loader {
+  display: none;
+  position: absolute;
+  top: calc(50% - 40px);
+  left: calc(50% - 40px);
+  height: 80px;
+  width: 80px;
+  border-radius: 80px;
+  border-bottom: #fafafa 3px solid;
+  border-top: transparent 3px solid;
+  border-left: #fafafa 3px solid;
+  border-right: transparent 3px solid;
+  box-sizing: border-box;
+  animation: spin 1s infinite ease-in-out;
+}
+.lightbox__loader > div {
+  border-radius: 70px;
+  border-bottom: #fafafa 3px solid;
+  border-top: transparent 3px solid;
+  border-left: transparent 3px solid;
+  border-right: #fafafa 3px solid;
+  width: 60px;
+  height: 60px;
+  margin: 7px;
+  animation-fill-mode: both;
+  animation: reverse 0.5s infinite linear;
+}
+.lightbox--loading .lightbox__loader {
+  display: block;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes reverse {
+  0% {
+    transform: rotate(359deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
\ No newline at end of file