diff --git a/css/general.css b/css/general.css
index 84f28f1..f80ada1 100644
--- a/css/general.css
+++ b/css/general.css
@@ -1654,6 +1654,22 @@ section {
   background-color: rgb(105, 94, 139);
 }
 
+.logistics-border {
+  border: 1px solid rgb(147, 29, 141);
+}
+.hacking-border {
+  border: 1px solid rgb(53, 53, 199);
+}
+.food-border {
+  border: 1px solid #03833b;
+}
+.workshop-border {
+  border: 1px solid rgb(109, 40, 194);
+}
+.game-border {
+  border: 1px solid rgb(105, 94, 139);
+}
+
 
 #map-article {
   margin: 20px auto 0;
diff --git a/index.html b/index.html
index 543079e..de28bee 100644
--- a/index.html
+++ b/index.html
@@ -358,7 +358,7 @@
                 </div>
             </div>
             <div id="modal-overlay">
-                <div class="modal" id="check-in">
+                <div class="modal logistics-border" id="check-in">
                     <button class="button-close-modal">x</button>
                     <div class="modal-header logistics">
                         <h2>Check In</h2>
@@ -369,7 +369,7 @@
                         <p>Try to arrive by 10:15am so we can get you your lanyard, merch, and table!</p>
                     </div>
                 </div>
-                <div class="modal" id="opening-ceremony">
+                <div class="modal logistics-border" id="opening-ceremony">
                     <button class="button-close-modal">x</button>
                     <div class="modal-header logistics">
                         <h2>Opening Ceremony</h2>
@@ -384,7 +384,7 @@
                         </ul>
                     </div>
                 </div>
-                <div class="modal" id="hacking-starts">
+                <div class="modal hacking-border" id="hacking-starts">
                     <button class="button-close-modal">x</button>
                     <div class="modal-header hacking">
                         <h2>Hacking starts</h2>
@@ -403,7 +403,7 @@
                             </div>
                     </div>
                 </div>
-                <div class="modal" id="lunch">
+                <div class="modal food-border" id="lunch">
                     <button class="button-close-modal">x</button>
                     <div class="modal-header food">
                         <h2>Lunch</h2>
@@ -414,7 +414,7 @@
                         <p class="timeline-description">Food options TBA!</p>
                     </div>
                 </div>
-                <div class="modal" id="workshop1">
+                <div class="modal workshop-border" id="workshop1">
                     <button class="button-close-modal">x</button>
                     <div class="modal-header workshop">
                         <h2>Web Dev Workshop</h2>
@@ -425,7 +425,7 @@
                         <p class="timeline-description">More details coming!</p>
                     </div>
                 </div>
-                <div class="modal" id="workshop2">
+                <div class="modal workshop-border" id="workshop2">
                     <button class="button-close-modal">x</button>
                     <div class="modal-header workshop">
                         <h2>[REDACTED] Workshop</h2>
@@ -436,7 +436,7 @@
                         <p class="timeline-description">Hmm what's this? A secret workshop?</p>
                     </div>
                 </div>
-                <div class="modal" id="activity1">
+                <div class="modal game-border" id="activity1">
                     <button class="button-close-modal">x</button>
                     <div class="modal-header game">
                         <h2>Kahoot</h2>
@@ -447,7 +447,7 @@
                         <p class="timeline-description">More details coming!</p>
                     </div>
                 </div>
-                <div class="modal" id="hacking-ends">
+                <div class="modal hacking-border" id="hacking-ends">
                     <button class="button-close-modal">x</button>
                     <div class="modal-header hacking">
                         <h2>Hacking ends</h2>
@@ -465,7 +465,7 @@
                             </div>
                     </div>
                 </div>
-                <div class="modal" id="project-presentations">
+                <div class="modal logistics-border" id="project-presentations">
                     <button class="button-close-modal">x</button>
                     <div class="modal-header logistics">
                         <h2>Project Presentations</h2>
@@ -485,7 +485,7 @@
                             </div>
                     </div>
                 </div>
-                <div class="modal" id="judging">
+                <div class="modal logistics-border" id="judging">
                     <button class="button-close-modal">x</button>
                     <div class="modal-header logistics">
                         <h2>Judging</h2>
@@ -496,7 +496,7 @@
                         <p>More details coming!</p>
                     </div>
                 </div>
-                <div class="modal" id="awards-ceremony">
+                <div class="modal logistics-border" id="awards-ceremony">
                     <button class="button-close-modal">x</button>
                     <div class="modal-header logistics">
                         <h2>Awards Ceremony</h2>