diff --git a/Gallery.html b/Gallery.html
new file mode 100644
index 0000000..3626a4e
--- /dev/null
+++ b/Gallery.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" href="StyleSheets/ExampleStructure.css">
+</head>
+<body class="debug">
+<div class="NavBarWrapper HFlexBox SpaceBetween">
+    <div class="NavBarSection HFlexBox AlignLeft">
+        <img alt="" class="NavIcon" src="/Assets/Icons/palmtree.svg" style="">
+        <p class="Title">ExampleTitle</p>
+    </div>
+    <div class="NavBarSection HFlexBox AlignRight">
+        <div class="HamburgerWrapper HFlexBox">
+            <div  id="HamburgerNavContent" class="HamburgerNavMenu">
+                <button  tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='Cart.html';"><img alt="" class="NavIcon" src="/Assets/Icons/shopping-cart-line.svg" style="">My Cart</button>
+                <button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='';"><img alt="" class="NavIcon" src="/Assets/Icons/gallery.svg" style="">Gallery</button>
+                <button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='';"><img alt="" class="NavIcon" src="/Assets/Icons/about.svg" style="">About Us</button>
+            </div>
+            <button id="HamburgerNav" class="Hamburger VFlexBox Center" onclick="ExpandHamburgerMenu();">
+                <span class="HamburgerSlab First"></span>
+                <span class="HamburgerSlab Middle"></span>
+                <span class="HamburgerSlab Last"></span>
+            </button>
+        </div>
+    </div>
+</div>
+
+<div class="VFlexBox Center hidden ImageFullscreenContainer" onclick="CloseImageFullscreen()" id="ImageFocusContainer" style="background-color: rgba(0,0,0,0.35); z-index: 9999; position: fixed; top:0; left:0; width: 100vw; height: 100vh;">
+    <button class="archivo-black-regular" onclick="CloseImageFullscreen()" style="font-size: 2rem; color:red; background-color: white; width: 3rem; height: 3rem; position: fixed; left:2rem; top: 2rem; cursor: pointer; border-radius: 1rem;">X</button>
+    <div class="Image" id="FullscreenImageFocus" style="width: 85vw; height: 90vh; background-image: url('Assets/Images/ImageOne.png'); filter: drop-shadow(white 1vh 0vh 0) drop-shadow(white -1vh 0vh 0) drop-shadow(white 0 1vh 0vh ) drop-shadow(white 0 -1vh 0); background-size: contain; background-repeat: no-repeat; background-position: center;"></div>
+</div>
+<div class="VFlexBox ContentContainer Center" style="margin-top: 10vh; border-bottom: none;">
+    <p class="BookingWidgetTitle archivo-black-regular" style="margin-left: 0;padding-left: 0; align-self: center; font-size: 3rem;">Gallery</p>
+    <div class="HFlexBox FlexWrap Center">
+        <button tabindex="0" onclick="FocusImage('Assets/Images/ImageFour.jpg');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageFour.jpg'); background-repeat: no-repeat; background-size: cover;"></button>
+        <button tabindex="0" onclick="FocusImage('Assets/Images/ImageOne.png');" class="GalleryImageGridContainer" style="background-image: url('Assets/Images/ImageOne.png'); background-repeat: no-repeat; background-size: cover;"></button>
+        <button tabindex="0" onclick="FocusImage('Assets/Images/ImageTwo.png');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageTwo.png'); background-repeat: no-repeat; background-size: cover;"></button>
+        <button tabindex="0" onclick="FocusImage('Assets/Images/ImageThree.gif');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageThree.gif'); background-repeat: no-repeat; background-size: cover;"></button>
+        <button tabindex="0" onclick="FocusImage('Assets/Images/ImageFour.jpg');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageFour.jpg'); background-repeat: no-repeat; background-size: cover;"></button>
+        <button tabindex="0" onclick="FocusImage('Assets/Images/ImageOne.png');" class="GalleryImageGridContainer" style="background-image: url('Assets/Images/ImageOne.png'); background-repeat: no-repeat; background-size: cover;"></button>
+        <button tabindex="0" onclick="FocusImage('Assets/Images/ImageTwo.png');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageTwo.png'); background-repeat: no-repeat; background-size: cover;"></button>
+        <button tabindex="0" onclick="FocusImage('Assets/Images/ImageThree.gif');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageThree.gif'); background-repeat: no-repeat; background-size: cover;"></button>
+        <button tabindex="0" onclick="FocusImage('Assets/Images/ImageFour.jpg');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageFour.jpg'); background-repeat: no-repeat; background-size: cover;"></button>
+        <button tabindex="0" onclick="FocusImage('Assets/Images/ImageOne.png');" class="GalleryImageGridContainer" style="background-image: url('Assets/Images/ImageOne.png'); background-repeat: no-repeat; background-size: cover;"></button>
+        <button tabindex="0" onclick="FocusImage('Assets/Images/ImageTwo.png');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageTwo.png'); background-repeat: no-repeat; background-size: cover;"></button>
+        <button tabindex="0" onclick="FocusImage('Assets/Images/ImageThree.gif');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageThree.gif'); background-repeat: no-repeat; background-size: cover;"></button>
+        <button tabindex="0" onclick="FocusImage('Assets/Images/ImageFour.jpg');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageFour.jpg'); background-repeat: no-repeat; background-size: cover;"></button>
+        <button tabindex="0" onclick="FocusImage('Assets/Images/ImageOne.png');" class="GalleryImageGridContainer" style="background-image: url('Assets/Images/ImageOne.png'); background-repeat: no-repeat; background-size: cover;"></button>
+        <button tabindex="0" onclick="FocusImage('Assets/Images/ImageTwo.png');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageTwo.png'); background-repeat: no-repeat; background-size: cover;"></button>
+        <button tabindex="0" onclick="FocusImage('Assets/Images/ImageThree.gif');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageThree.gif'); background-repeat: no-repeat; background-size: cover;"></button>
+        <button tabindex="0" onclick="FocusImage('Assets/Images/ImageFour.jpg');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageFour.jpg'); background-repeat: no-repeat; background-size: cover;"></button>
+        <button tabindex="0" onclick="FocusImage('Assets/Images/ImageOne.png');" class="GalleryImageGridContainer" style="background-image: url('Assets/Images/ImageOne.png'); background-repeat: no-repeat; background-size: cover;"></button>
+        <button tabindex="0" onclick="FocusImage('Assets/Images/ImageTwo.png');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageTwo.png'); background-repeat: no-repeat; background-size: cover;"></button>
+        <button tabindex="0" onclick="FocusImage('Assets/Images/ImageThree.gif');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageThree.gif'); background-repeat: no-repeat; background-size: cover;"></button>
+    </div>
+</div>
+<script>
+    function CloseImageFullscreen(){
+        let Container = document.getElementById("ImageFocusContainer");
+        while(Container.classList.contains("hidden")){Container.classList.remove("hidden");}
+        Container.classList.add("hidden");
+    }
+    function FocusImage(url){
+        let Container = document.getElementById("ImageFocusContainer");
+        while(Container.classList.contains("hidden")){Container.classList.remove("hidden");}
+        let Image = document.getElementById("FullscreenImageFocus");
+        Image.style.backgroundImage = "url('"+url+"')";
+    }
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/StyleSheets/ExampleStructure.css b/StyleSheets/ExampleStructure.css
index 2ac9709..fa1a6dc 100644
--- a/StyleSheets/ExampleStructure.css
+++ b/StyleSheets/ExampleStructure.css
@@ -12,6 +12,12 @@
     border:none;
     background-color: transparent;
 }
+.hidden{
+    display: none !important;
+}
+.FlexWrap{
+    flex-wrap: wrap;
+}
 body{
     max-width: 100vw;
     overflow-x:hidden;
@@ -231,3 +237,33 @@ body{
         align-content: center;
     }
 }
+
+/*Gallery Stuff*/
+.GalleryImageGridContainer:hover{
+    filter: drop-shadow(#28947f -1.5vh 1.5vh);
+    cursor: pointer;
+    transform: translate(0.25vh,-0.25vh) scale(1.01);
+}
+.GalleryImageGridContainer.Wide{
+    width:18rem;
+    height: 14rem;
+}
+.GalleryImageGridContainer{
+    margin: 1vh;
+    width: 14rem;
+    height: 14rem;
+    transition: 0.25s;
+}
+
+@media only screen and (max-aspect-ratio: 12/9) {
+    .GalleryImageGridContainer.Wide{
+        width:8rem !important;
+        height: 6rem !important;
+    }
+    .GalleryImageGridContainer{
+        margin: 1rem;
+        width: 6rem !important;
+        height: 6rem !important;
+        transition: 0.25s;
+    }
+}
\ No newline at end of file
