diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..c198233
Binary files /dev/null and b/.DS_Store differ
diff --git a/about_popup.html b/about_popup.html
new file mode 100644
index 0000000..0a19cc9
--- /dev/null
+++ b/about_popup.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- popup windows for tiles -->
+<html>
+    <head>
+        <meta name="author" content="Uncommon Hacks">
+        <meta name="description" content="Popups for Uncommon Hacks">
+        <title>About</title>
+        <link rel="stylesheet" type="text/css" href="css/stylePopups.css">
+    </head>
+
+    <body>
+        <div class="container" id="blur">
+            <div class="content">
+                <h2> About </h2>
+                <img src="images/popups_background_d.JPG">
+                <a href="#" onclick="toggle()"> Open </a>
+            </div>
+        </div>
+        <div id="popup">
+            <h2>  About </h2>
+            <p> 
+                Welcome to Uncommon Hacks, the official hackathon
+                of the University of Chicago! Spend 24 hours working
+                on a project and meeting cool people in this
+                one-of-a-kind experience! In our 2024 edition of Hacks, 
+                we're excited to bring you the biggest event since the 
+                pandemic, including the overnight component that makes 
+                for a truly unforgettable experience.
+
+                Although Hacks will have prizes, we place more emphasis on
+                learning and collaboration than some kind of competitive
+                aspect. So, even if you've never coded before, please do
+                sign up! A successful Hacks team needs people with
+                different skill sets, and if you would like to learn how to
+                code, we'll have workshops to help you do so.
+            </p>
+            <a href="#" onclick="toggle()"> Close </a>
+        </div>
+        <script type="text/javascript">
+            function toggle(){
+                var blur = document.getElementById("blur");
+                blur.classList.toggle('active');
+                var popup = document.getElementById('popup');
+                popup.classList.toggle('active');
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/css/.DS_Store b/css/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/css/.DS_Store differ
diff --git a/css/stylePopups.css b/css/stylePopups.css
new file mode 100644
index 0000000..07e9fd9
--- /dev/null
+++ b/css/stylePopups.css
@@ -0,0 +1,86 @@
+/*fonts*/
+@font-face {
+    font-family: bern;
+    src: url(../fonts/bernhc.ttf);
+  }
+  
+  @font-face {
+    font-family: baskerville;
+    src: url(../fonts/BASKVILL.ttf);
+  }
+
+*
+{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+.container
+{
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: chocolate;
+    transition: 0.5s;
+    padding: 20px;
+}
+
+.container#blur.active
+{
+    filter: blur(20px);
+    pointer-events: none;
+    user-select: none;
+}
+
+.container .content
+{
+    position: relative;
+    max-width: 800px;
+}
+h2{
+    font-weight: 600;
+    margin-bottom: 10px;
+    color: #333;
+}
+.container .content img
+{
+    max-width: 100%;
+    display: block;
+}
+a
+{
+    position: relative;
+    padding: 5px 20px;
+    display: inline-block;
+    margin-top: 20px;
+    text-decoration: none;
+    color: #fff;
+    background: #111;
+}
+#popup
+{
+    position: fixed;
+    top: 40%;
+    Left: 50%;
+    transform: translate(-50%, -50%);
+    width: 600px;
+    padding: 50px;
+    box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
+    background: #fff;
+    visibility: hidden;
+    opacity: 0;
+    transition: 0.5s;
+}
+
+#popup.active
+{
+    top: 50%;
+    visibility: visible;
+    opacity: 1;
+    transition: 0.5s;
+}
\ No newline at end of file
diff --git a/css/styles.css b/css/styles.css
index 9536878..37306f8 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -207,4 +207,75 @@ p {
   .buttons * {
       font-size: 1.5vw;
   }
-}
\ No newline at end of file
+}
+
+/* Popup Styles */
+#popup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 600px;
+    padding: 50px;
+    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.30);
+    background: #fff;
+    visibility: hidden;
+    opacity: 0;
+    transition: 0.5s;
+}
+
+#popup.active {
+    top: 50%;
+    visibility: visible;
+    opacity: 1;
+    transition: 0.5s;
+}
+
+.container {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: chocolate;
+    transition: 0.5s;
+    padding: 20px;
+}
+
+.container#blur.active {
+    filter: blur(20px);
+    pointer-events: none;
+    user-select: none;
+}
+
+.container .content {
+    position: relative;
+    max-width: 800px;
+}
+
+.container .content img{
+    max-width: 100%;
+    display: block;
+}
+
+#popup h2 {
+    font-weight: 600;
+    margin-bottom: 10px;
+    color: #333;
+}
+
+a {
+    position: relative;
+    padding: 5px 20px;
+    display: inline-block;
+    margin-top: 20px;
+    text-decoration: none;
+    color: #fff;
+    background: #111;
+}
+
+#popup a {
+    color: #fff;
+    background: #111;
+}
diff --git a/images/popups_background_d.JPG b/images/popups_background_d.JPG
new file mode 100644
index 0000000..2978fb9
Binary files /dev/null and b/images/popups_background_d.JPG differ
diff --git a/images/popups_background_m.JPG b/images/popups_background_m.JPG
new file mode 100644
index 0000000..cb5523c
Binary files /dev/null and b/images/popups_background_m.JPG differ
diff --git a/index.html b/index.html
index e69c79e..77b4b37 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,49 @@
         <!-- <meta property="og:image" content="https://makes2023.uncommonhacks.com/images/Uncommon-Makes.png">
         <meta property="og:url" content="https://makes2023.uncommonhacks.com"> -->
         <meta property="og:type" content="website">
+
+        <script type="text/javascript">
+            document.addEventListener("DOMContentLoaded", function(){
+                function openPopup(sectionId){
+                    var blur = document.getElementById(sectionId + "-blur");
+                    blur.classList.add('active');
+
+                    var popup = document.getElementById(sectionId + '-popup');
+                    popup.classList.add('active');
+                }
+
+                function closePopup(sectionId){
+                    var blur = document.getElementById(sectionId + "-blur");
+                    blur.classList.remove('active');
+                    
+                    var popup = document.getElementById(sectionId + '-popup');
+                    popup.classList.remove('active');
+                }
+
+
+                // Add click event listeners for each section
+                var sectionIds = ['speakers', 'sponsors', 'faq', 
+                    'team', 'register', 'judging', 'schedule', 'about'];
+
+                sectionIds.forEach(function(sectionId) {
+                    var block = document.getElementById(sectionId);
+                    block.addEventListener('click', function() {
+                        openPopup(sectionId);
+                    });
+                });
+
+                // Add click event listeners for close buttons inside popups 
+                sectionIds.forEach(function(sectionId) {
+                    var closeButton = document.getElementById(sectionId + '-close');
+                    closeButton.addEventListener('click', function() {
+                        closePopup(sectionId);
+                    });
+                });
+            });
+
+        </script>
     </head>
+
     <body>
         <div class="scrollableElement">
             <img id="backgroundImage" src="images/hacks_background.png">
@@ -34,51 +76,133 @@
                 <button type="button" class="btn btn-info btn-lg email xtra-btn" onclick="location.href='mailto:celery@uncommonhacks.com?Subject=Uncommon Makes 2023 Inquiry';">contact</button>
                 <button type="button" class="btn btn-info btn-lg email xtra-btn" onclick="location.href='https://uncommonhacks.com/';">main site</button> -->
                 </div>
+
                <div id="introduction">
                 <h1>Uncommon</h1>
                 <h1>Hacks</h1>
                </div>
+
                <div id="date-time">
                 <body>March 23-24</body>
                 <br/>
                 <body>Polsky Exchange</body>
                </div>
-               <div id="speakers">
+
+               <div id="speakers-blur" class="container">
+                    <div class="content">
+                        <h2>speakers</h2>
+                        <a href="#" id="speakers-close">Close</a> 
+                    </div>
+                </div>
+                
+               <div id="speakers-popup">
                 <h2>speakers</h2>
+                <p>content</p>
+               </div>
+
+               <div id="sponsors-blur" class="container">
+                    <div class="content">
+                        <h2>sponsors</h2>
+                        <a href="#" id="sponsors-close">Close</a>
+                    </div>
                </div>
-               <div id="sponsors">
+
+               <div id="sponsors-popup">
                 <h2>sponsors</h2>
+                <p>content</p>
                </div>
-               <div id="contact">
+
+               <div id="contact-blur" class="container">
+                <div class="content">
+                    <h2>contact</h2>
+                    <a href="#" id="contact-close">Close</a>
+                </div>
+                </div>
+
+               <div id="contact-popup">
                 <h3>contact/socials</h3>
                </div>
-               <div id="faq">
+
+               <div id="faq-blur" class="container">
+                <div class="content">
+                    <h2>faq</h2>
+                    <a href="#" id="faq-close">Close</a>
+                </div>
+                </div>
+
+               <div id="faq-popup">
                 <h2>faq</h2>
                </div>
-               <div id="team">
+
+               <div id="team-blur" class="container">
+                <div class="content">
+                    <h2>team</h2>
+                    <a href="#" id="team-close">Close</a>
+                </div>
+                </div>
+
+               <div id="team-popup">
                 <h2>team</h2>
                </div>
-               <div id="register">
+
+               <div id="register-blur" class="container">
+                <div class="content">
+                    <h2>register</h2>
+                    <a href="#" id="register-close">Close</a>
+                </div>
+                </div>
+
+               <div id="register-popup">
                 <h2>register</h2>
                </div>
+
+               <div id="judging-blur" class="container">
+                <div class="content">
+                    <h2>judging</h2>
+                    <a href="#" id="judging-close">Close</a>
+                </div>
+                </div>
+
                <div id="judging">
                 <h2>judging</h2>
                </div>
-               <div id="schedule">
+
+               <div id="schedule-blur" class="container">
+                <div class="content">
+                    <h2>schedule</h2>
+                    <a href="#" id="schedule-close">Close</a>
+                </div>
+                </div>
+
+               <div id="schedule-popup">
                 <h2>schedule</h2>
                </div>
+
+               <div id="about-blur" class="container">
+                <div class="content">
+                    <h2>about</h2>
+                    <a href="#" id="about-close">Close</a>
+                </div>
+                </div>
+
                <div id="about">
                 <h2>about</h2>
-               </div>
+                </div>
 
             </div>
-        </div>
 
+            <script type="text/javascript">
+                document.getElementById('speakers-close').addEventListener('click', function() {
+                    closePopup('speakers');
+                });
+            </script>
+        </div>
 
         <script src="js/script.js"></script>
         <!-- External javascript -->
         <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+    
     </body>
 </html>
\ No newline at end of file
diff --git a/popups/about_popup.html b/popups/about_popup.html
new file mode 100644
index 0000000..6f4bd0b
--- /dev/null
+++ b/popups/about_popup.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- popup windows for tiles -->
+<html>
+    <head>
+        <meta name="author" content="Uncommon Hacks">
+        <meta name="description" content="Popups for Uncommon Hacks">
+        <title>About</title>
+        <link rel="stylesheet" type="text/css" href="css/stylePopups.css">
+    </head>
+
+    <body>
+        <div class="container" id="blur">
+            <div class="content">
+                <h2> About </h2>
+                <img src="images/hacks_background.png">
+                <a href="#" onclick="toggle()"> Open </a>
+            </div>
+        </div>
+        <div id="popup">
+            <h2>  About </h2>
+            <p> 
+                Welcome to Uncommon Hacks, the official hackathon
+                of the University of Chicago! Spend 24 hours working
+                on a project and meeting cool people in this
+                one-of-a-kind experience! In our 2024 edition of Hacks, 
+                we're excited to bring you the biggest event since the 
+                pandemic, including the overnight component that makes 
+                for a truly unforgettable experience.
+
+                Although Hacks will have prizes, we place more emphasis on
+                learning and collaboration than some kind of competitive
+                aspect. So, even if you've never coded before, please do
+                sign up! A successful Hacks team needs people with
+                different skill sets, and if you would like to learn how to
+                code, we'll have workshops to help you do so.
+            </p>
+            <a href="#" onclick="toggle()"> Close </a>
+        </div>
+        <script type="text/javascript">
+            function toggle(){
+                var blur = document.getElementById("blur");
+                blur.classList.toggle('active');
+                var popup = document.getElementById('popup');
+                popup.classList.toggle('active');
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/stylePopups.css b/stylePopups.css
new file mode 100644
index 0000000..887af60
--- /dev/null
+++ b/stylePopups.css
@@ -0,0 +1,76 @@
+*
+
+{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+.container
+{
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #fff173;
+    transition: 0.5s;
+    padding: 20px;
+}
+
+.container#blur.active
+{
+    filter: blur(20px);
+    pointer-events: none;
+    user-select: none;
+}
+
+.container .content
+{
+    position: relative;
+    max-width: 800px;
+}
+h2{
+    font-weight: 600;
+    margin-bottom: 10px;
+    color: #333;
+}
+.container .content img
+{
+    max-width: 100%;
+    display: block;
+}
+a
+{
+    position: relative;
+    padding: 5px 20px;
+    display: inline-block;
+    margin-top: 20px;
+    text-decoration: none;
+    color: #fff;
+    background: #111;
+}
+#popup
+{
+    position: fixed;
+    top: 40%;
+    Left: 50%;
+    transform: translate(-50%, -50%);
+    width: 600px;
+    padding: 50px;
+    box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
+    background: #fff;
+    visibility: hidden;
+    opacity: 0;
+    transition: 0.5s;
+}
+
+#popup.active
+{
+    top: 50%;
+    visibility: visible;
+    opacity: 1;
+    transition: 0.5s;
+}
\ No newline at end of file
