diff --git a/event.html b/event.html
new file mode 100644
index 0000000..e53f7c0
--- /dev/null
+++ b/event.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="description" content="Glory Carriers Ministry Int'l is a  global ministry designed to bring men into the light of God's Glory, untill all eyes can see Christ revealed.">
+        <meta name="keywords" content="glory carriers, embassy of glory, GCMI,">
+        <meta name="author" content="gcmi">
+        <meta property="og:title" content="Glory Carriers Ministry Int'l">
+        <meta property="og:description" content="Glory Carriers Ministry Int'l is a  global ministry designed to bring men into the light of God's Glory, untill all eyes can see Christ revealed.">
+        <meta property="og:image" content="">
+        <meta property="og:url" content="">
+
+        <!--twitter social share-->
+        <meta name="twitter:card" content="summary_large_image">
+        <meta name="twitter:title" content="Glory Carriers Ministry Int'l" id="twitterTitle">
+        <meta name="twitter:description" content="Glory Carriers Ministry Int'l is a  global ministry designed to bring men into the light of God's Glory, untill all eyes can see Christ revealed." id="twitterDescription">
+        <meta name="twitter:image" content="static/img/logo.png" id="twitterImage">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        
+        <title>GCMI | Event</title>
+
+        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>    
+    </head>
+    <body>
+         <!--============PRELOADER==============-->
+         <div id="preloader">
+            <div class="container">
+                <div class="ring"></div>
+                <div class="ring"></div>
+                <div class="ring"></div>
+                <div class="loading">
+                    <img width="80" src="static/img/g_logo.png" alt="GCMI G_logo">
+                </div>
+            </div>
+        </div>
+        <!--============PRELOADER END==============-->
+
+        <!--============ROOT SECTION==============-->
+        <section id="root" class="show-hidden">
+            <!--=========HEADER BEGIN===========-->
+            <nav id="header" class="navbar navbar-expand-md navbar-dark  fixed-top mediumnavigation nav-down" aria-label="Fourth navbar example">
+                
+            </nav>
+            <!--=========HEADER END===========-->
+            
+            <!--=========MAIN BEGIN===========-->
+            <main>
+                <section class="mt-5 mb-0">
+                    <div class="row align-items-center">
+                        <div style="background-color: var(--bg-body);" class="col-sm-6 py-5 ps-5">
+                            <div class="">
+                                <img class="" width="100%" src="static/img/event.jfif" alt="about page">
+                            </div>
+                        </div>
+
+                        <div style="background-color: var(--white);" class="col-sm-6 py-5 justify-content-center text-center align-items-center order-first order-sm-last">
+                            <div class="container px-4">
+                                <h2 style="color: var(--bg-midnight-blue);" class="ft-upper fw-bold fs-1 text-sm-start text-center">About the Event</h2>
+                                <p style="color: var(--bg-body);" class="text-center text-sm-start">
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
+                                </p> 
+                            </div>                           
+                        </div>                        
+                    </div>
+                </section>
+
+
+            </main>
+            <!--=========MAIN END===========-->
+
+            <!--=========FOOTER BEGIN===========-->
+
+            <footer id="footer" class="pt-5 pb-0 m-0">
+                
+            </footer>
+            <!--=========FOOTER END===========-->
+        </section>
+        <!--============ROOT SECTION END==============-->
+
+        <!--========JavaScript================ -->
+        <script>
+            window.addEventListener('load', ()=>{
+              setInterval(()=>{
+                document.querySelector("#preloader").classList.add('hidden-item')
+				document.querySelector("#root").classList.remove('show-hidden')
+              }, 3000)
+
+              /*document.querySelector('#screen-mode').addEventListener('click', ()=> {
+                document.querySelector('body').classList.toggle('body-dark')
+              })*/
+            })
+        </script>
+
+		<script type="module" src="static/js/app.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
+		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
+        <!--========JavaScript END================ -->
+    </body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 7d2485b..78271ca 100644
--- a/index.html
+++ b/index.html
@@ -126,7 +126,7 @@ <h2 class="text-color-blue ft-upper text-md-end text-center">Event</h2>
                                 <p>
                                     Welcome to the Glory Carriers Ministry Int'l Website repository! This repository contains all the code and resources for building and maintaining the official website of Glory Carriers Ministry Int'l.
                                 </p>
-                                <a href="">
+                                <a href="event.html">
                                     see details
                                 </a>
                                 
diff --git a/static/js/components/Footer.js b/static/js/components/Footer.js
index 0028c29..4c6bdb3 100644
--- a/static/js/components/Footer.js
+++ b/static/js/components/Footer.js
@@ -56,7 +56,7 @@ function Footer(){
                         Connect
                     </div>
                     <ul class="ft-upper fw-normal fs-5">
-                        <li><a href="">Event</a></li>
+                        <li><a href="event.html">Event</a></li>
                         <li><a href="">Join a Department Us</a></li>
                         <li><a href="">Testimonies</a></li>
                     </ul>
diff --git a/static/js/components/Header.js b/static/js/components/Header.js
index 77342c8..7bea957 100644
--- a/static/js/components/Header.js
+++ b/static/js/components/Header.js
@@ -17,7 +17,7 @@ function Header(){
                         <a class="nav-link" href="#">About Us</a>
                     </li> 
                     <li class="nav-item">
-                        <a class="nav-link" href="#">Event</a>
+                        <a class="nav-link" href="event.html">Event</a>
                     </li> 
                     <li class="nav-item">
                         <a class="nav-link" href="#">Giving</a>
