diff --git a/components/Layout.tsx b/components/Layout.tsx
index b40f618..6e0ecf2 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -50,9 +50,8 @@ const Layout = ({ children, title = "This is the default title" }: Props) => {
 
             <a
               role="button"
-              className={`navbar-burger + ${
-                mobileMenuActive ? "is-active" : null
-              } `}
+              className={`navbar-burger + ${mobileMenuActive ? "is-active" : null
+                } `}
               aria-label="menu"
               onClick={handleMobileToggle}
             >
@@ -64,9 +63,8 @@ const Layout = ({ children, title = "This is the default title" }: Props) => {
 
           <div
             id="navbarDesktop"
-            className={`navbar-menu + ${
-              mobileMenuActive ? "is-active" : null
-            } `}
+            className={`navbar-menu + ${mobileMenuActive ? "is-active" : null
+              } `}
           >
             <div className="navbar-start">
               <a className="navbar-item" href="/">
@@ -96,7 +94,7 @@ const Layout = ({ children, title = "This is the default title" }: Props) => {
                   <a className="navbar-item">Calendar</a>
                   <hr className="navbar-divider" />
                   <a className="navbar-item">General Meetings</a>
-                  <a className="navbar-item">Conferences</a>
+                  <a className="navbar-item" href="conference">Conferences</a>
                 </div>
               </div>
 
diff --git a/pages/conference.tsx b/pages/conference.tsx
new file mode 100644
index 0000000..71e43b2
--- /dev/null
+++ b/pages/conference.tsx
@@ -0,0 +1,178 @@
+import React from 'react'
+import Layout from "../components/Layout";
+
+
+export const conference = () => {
+
+    const nationalConventionTitle = (top: string, middle: string, bottom: string) => {
+        return (
+            <div className="flex-boxes title-container">
+                <h2 className=" title1">{top}</h2>
+                <h1 className=" title2">{middle}</h1>
+                <h2 className=" title3">{bottom}</h2>
+            </div>
+        )
+    }
+
+    return (
+        <Layout title="National Conventions" >
+
+            {/* 2021 National Convention */}
+            <section className="national-convention-wrapper" >
+
+                {/* 2021 Title */}
+                {nationalConventionTitle("2021 SHPE", "National Convention", "November 10 - 14")}
+                <hr style={{ width: "80%", margin: "0 auto" }}></hr>
+
+                {/* 3 Boxes Section */}
+                <section className="boxes-container" >
+
+                    <div className="conference-radius flex-boxes gradient-background">
+
+                        <h1>Orlando, Florida</h1>
+                        <h2 className="small-line-height" style={{ fontWeight: "normal" }}> Orange County<br />Convention Center</h2>
+
+                    </div>
+
+                    <div className="conference-radius flex-boxes gradient-background">
+
+                        <figure className="large-iframe-container">
+                            <iframe className="responsive-iframe-content" src="https://player.vimeo.com/video/503633431?color=ff9933&title=0&portrait=0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen></iframe>
+                        </figure>
+                        <script src="https://player.vimeo.com/api/player.js"></script>
+
+                        <span className="small-line-height">
+                            <br />
+                            <a href="https://vimeo.com/503633431">Orange County Convention Center Tour</a>
+                        </span>
+
+                    </div>
+
+                    <div className="conference-radius flex-boxes gradient-background">
+
+                        <a href="https://www.shpe.org/2021" target="_blank">
+                            <h1>
+                                SHPE.ORG/2021
+                            </h1>
+                        </a>
+                        <a href="/newsletter" target="_blank">
+                            <button className="button is-primary" style={{ margin: "10px" }}>
+                                Get Sponsored
+                            </button>
+                        </a>
+                        <span className="small-line-height">We're currently not accepting <br /> sponsorship applications</span>
+
+                    </div>
+
+                </section>
+
+                {/* Benefits Section */}
+                <section className="boxes-container">
+                    <div className="flex-boxes" style={{ padding: 0, margin: 0 }}>
+
+                        <h1>Benefits of Attending</h1>
+                        <div className="paragraph-flex-container">
+
+                            <div className="paragraph">
+
+                                <p >
+                                    This year's SHPE national convention will be a 4-day convention in Orlando, Florida from November 10th to 14th! Why should you attend? Well, let's list out some of the benefits you'll get to experience:
+                                </p>
+
+                                <ul >
+                                    <li>Excellent networking opportunities</li>
+                                    <li>Beneficial career fair</li>
+                                    <li>Limitless job/internship opportunities </li>
+                                </ul>
+
+                            </div>
+
+
+                            <div className="paragraph">
+                                <ul >
+                                    <li>1,000+ interviews from 200+ world class companies &amp; universities </li>
+                                    <li>100+ hours of educational content for all fields of STEM</li>
+                                </ul>
+                                <br />
+                                <p >More info coming in August!</p>
+                                <br />
+
+                                <a href="/newsletter" target="_blank">
+                                    <button className="button is-primary" >
+                                        Newsletter Sign Up
+                                    </button>
+                                </a>
+
+                            </div>
+
+
+                        </div>
+                    </div>
+                </section>
+
+                {/* Sponsorship Section */}
+                <section className="boxes-container">
+                    <div className="flex-boxes" style={{ padding: 0 }}>
+
+                        <h1>Getting Sponsored</h1>
+                        <div className="paragraph-flex-container">
+
+                            <div className="paragraph">
+
+                                <p>
+                                    Attending the national convention can set you back a couple hundred dollars but if you apply to get sponsored and successfully recieve a sponsorship, SHPE UTD will cover most of the expenses!
+                                    Keep in mind that not every one that applies will be sponsored.
+                                </p>
+                                <br />
+                                <p>
+                                    We're currently not accepting sponsorship applications but make sure to sign up to our newsletter to be notified as soon as sponsorship applications and registration opens up.
+                                </p>
+
+                            </div>
+
+
+                            <div className="paragraph">
+
+                                <h2>Sponsorship Requirements</h2>
+                                <ul >
+                                    <li>Must be an active member of our chapter</li>
+                                    <li>Must be a SHPE National member (only $10/year for a membership)</li>
+                                    <li>Must attend all national preparation events hosted by our chapter if chosen to be sponsored</li>
+                                </ul>
+
+                            </div>
+
+                        </div>
+                    </div>
+                </section>
+
+                {/* Map */}
+                <figure className="small-iframe-container" >
+                    <iframe className="responsive-iframe-content" allowFullScreen src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7017.364915375989!2d-81.46907627503198!3d28.428836965051598!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88e77e463b79f35f%3A0x890f8122e661e214!2sOrange%20County%20Convention%20Center%20north%20concourse!5e0!3m2!1sen!2sus!4v1623904501409!5m2!1sen!2sus" loading="lazy"></iframe>
+                </figure>
+                <br />
+
+            </section>
+
+            {/* Separation Between the 2021 and 2020 sections  */}
+            <div className="set-bottom-border"></div>
+
+            {/* 2020 National Convention */}
+            <section className="national-convention-wrapper">
+
+                {/* 2020 Title */}
+                {nationalConventionTitle("2020 SHPE", "National Convention", "Highlights")}
+
+                {/* Video */}
+                <figure className="medium-iframe-container">
+                    <iframe className="responsive-iframe-content" src="https://youtube.com/embed/UE75ysOZEZ8" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
+                </figure>
+                <br />
+
+            </section>
+
+        </Layout >
+    )
+}
+
+export default conference;
diff --git a/theming/_conference.scss b/theming/_conference.scss
new file mode 100644
index 0000000..7153ec3
--- /dev/null
+++ b/theming/_conference.scss
@@ -0,0 +1,215 @@
+@use 'variables';
+
+/////////////////////////////////////////////
+// Conference Page Styles
+/////////////////////////////////////////////
+
+
+.national-convention-wrapper {
+  width: 85%;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.small-line-height {
+  line-height: 100%;
+}
+
+.set-bottom-border {
+  border-bottom: 10px solid whitesmoke;
+}
+
+
+.boxes-container {
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  min-width: fit-content;
+  line-height: 270%;
+  align-items: stretch;
+  flex-wrap: wrap;
+
+  @media only screen and (max-width: 700px) {
+      flex-direction: column;
+    }
+}
+
+
+.flex-boxes {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 30%;
+  width: fit-content;
+  margin: 2% 0;
+  padding: 1rem;
+  flex-wrap: wrap;
+  text-align: center;
+
+  /* For mobile phones: */
+  @media only screen and (max-width: 768px) {
+    width: 100%;
+    margin: 3% 0;
+  }
+
+  button {
+    align-self: center;
+  }
+
+  &.title-container {
+      padding: 0;
+  }
+}
+
+.flex-boxes h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #2160c4;
+  @media only screen and (max-width: 600px) {
+    font-size: 1.75rem;
+    line-height: 100%;
+  }
+}
+
+.flex-boxes h2 {
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: $SHPE-LIGHT-BLUE;
+  @media only screen and (max-width: 600px) {
+    font-size: 1.5rem;
+    line-height: 100%;
+  }
+}
+
+.conference-radius {
+  border-radius: 15px;
+}
+
+/////////////////////////////////////////////
+// Titles
+/////////////////////////////////////////////
+
+.title-container {
+    line-height: 35px;
+    width: 100%;
+
+    .title1 {
+        color: $SHPE-ORANGE;
+    }
+
+    .title2 {
+        font-size: 3rem;
+      
+        @media only screen and (max-width: 600px) {
+          font-size: 2rem;
+        }
+    }
+
+    .title1,
+    .title3 {
+        font-size: 2rem;
+
+        @media only screen and (max-width: 600px) {
+            font-size: 1.7rem;
+        }
+    }
+}
+
+
+/////////////////////////////////////////////
+// Text sections
+/////////////////////////////////////////////
+
+.paragraph-flex-container {
+  display: flex;
+  line-height: normal;
+  justify-content: space-between;
+
+  @media only screen and (max-width: 600px) {
+    flex-direction: column;
+    padding: 1%;
+
+  }
+
+  .paragraph { // Each div inside of a paragraph-flex-container is considered a paragraph
+        margin: 0 0.5rem;
+        width: 50%;
+        padding: 0.35rem;
+        text-align: left;
+    
+        @media only screen and (max-width: 600px) {
+            width: 100%;
+            margin: 0.5rem;
+
+        }
+
+        ul,
+        p {
+            font-size: 1.5rem;
+        }
+    
+        ul li {
+            list-style-type: disc;
+            text-indent: -5px;
+            margin: 8px 20px;
+            
+            &::marker {
+                color: $SHPE-ORANGE; 
+            }
+        }
+    }
+
+}
+
+
+/////////////////////////////////////////////
+// iframe items
+/////////////////////////////////////////////
+
+.large-iframe-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;      
+  padding-top: 56.25%; /* if you want 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) use 56.25% */
+}
+
+.medium-iframe-container {
+  position: relative;
+  overflow: hidden;
+  width: 80%;      
+  padding-top: 40%; /* if you want 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) use 56.25% */
+ 
+  @media only screen and (max-width: 768px) {
+    width: 100%;      
+    padding-top: 56.25%;
+  }
+
+}
+
+.small-iframe-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;      
+  padding-top: 18%; 
+ 
+  @media only screen and (max-width: 768px) {
+    padding-top: 32%;
+  }
+
+  @media only screen and (max-width: 426px) {
+    padding-top: 56.25%;
+  }
+}
+
+.responsive-iframe-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+}
+
diff --git a/theming/_variables.scss b/theming/_variables.scss
index 5469680..2c47591 100644
--- a/theming/_variables.scss
+++ b/theming/_variables.scss
@@ -255,6 +255,7 @@ div .officer:hover span .email {
   z-index: 1;
 }
 
+
 .react-pdf__Document {
   position: relative;
 
@@ -310,7 +311,3 @@ div .officer:hover span .email {
     }
   }
 }
-
-
-
-/////////////////////////////////////////////
\ No newline at end of file
diff --git a/theming/bulmaswatch.scss b/theming/bulmaswatch.scss
index 2a72c86..2b75347 100644
--- a/theming/bulmaswatch.scss
+++ b/theming/bulmaswatch.scss
@@ -1,4 +1,5 @@
 /*! bulmaswatch v0.8.1 | MIT License */
 @import "variables";
 @import "bulma";
-@import "overrides";
\ No newline at end of file
+@import "overrides";
+@import "conference";
\ No newline at end of file