diff --git a/sass/components/_bevy-instance.scss b/sass/components/_bevy-instance.scss
index 5450e9ed54..f009ac04ba 100644
--- a/sass/components/_bevy-instance.scss
+++ b/sass/components/_bevy-instance.scss
@@ -72,4 +72,8 @@
     border-radius: $border-radius;
     background: var(--bevy-instance-canvas-color);
   }
+
+  &__canvas:fullscreen {
+    border-radius: 0;
+  }
 }
diff --git a/sass/components/_example.scss b/sass/components/_example.scss
index 8b454406a3..7c34bb2419 100644
--- a/sass/components/_example.scss
+++ b/sass/components/_example.scss
@@ -6,15 +6,15 @@
     gap: 8px;
     margin: 16px 0 16px;
     align-items: baseline;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 2fr 35px auto;
     grid-template-areas:
-      "title title"
-      "back  github";
+      "title title title"
+      "back fullscreen github";
 
     @media #{$bp-tablet-portrait-up} {
       margin: 32px 0 16px;
-      grid-template-areas: "back title github";
-      grid-template-columns: 150px 1fr 150px;
+      grid-template-areas: "back title fullscreen github";
+      grid-template-columns: 150px 1fr 35px 150px;
     }
   }
 
@@ -26,6 +26,7 @@
   }
 
   &__back,
+  &__fullscreen,
   &__github {
     font-size: 1rem;
 
@@ -42,6 +43,12 @@
     grid-area: back;
   }
 
+  &__fullscreen {
+    grid-area: fullscreen;
+    text-align: center;
+    font-size: x-large;
+  }
+
   &__github {
     grid-area: github;
     text-align: right;
diff --git a/sass/components/_icon.scss b/sass/components/_icon.scss
index a1be364d98..fbad43d520 100644
--- a/sass/components/_icon.scss
+++ b/sass/components/_icon.scss
@@ -21,18 +21,19 @@
     ("github", 24),
     ("pencil", 19),
     ("times", 16),
+    ("fullscreen", 24),
   );
 
-@each $icon in $icons {
-  // Icons always must have 24px height
-  // This is just for icon height consistency
-  $ratio: math.div(nth($icon, 2), 24);
+  @each $icon in $icons {
+    // Icons always must have 24px height
+    // This is just for icon height consistency
+    $ratio: math.div(nth($icon, 2), 24);
 
-  &--#{nth($icon, 1)} {
-    height: var(--icon-height);
-    width: calc(var(--icon-height) * #{$ratio});
-    -webkit-mask-image: url("/assets/icon-#{nth($icon, 1)}.svg");
-    mask-image: url("/assets/icon-#{nth($icon, 1)}.svg");
+    &--#{nth($icon, 1)} {
+      height: var(--icon-height);
+      width: calc(var(--icon-height) * #{$ratio});
+      -webkit-mask-image: url("/assets/icon-#{nth($icon, 1)}.svg");
+      mask-image: url("/assets/icon-#{nth($icon, 1)}.svg");
+    }
   }
 }
-}
diff --git a/static/assets/icon-fullscreen.svg b/static/assets/icon-fullscreen.svg
new file mode 100644
index 0000000000..549da5726c
--- /dev/null
+++ b/static/assets/icon-fullscreen.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50"><defs></defs><g>
+<rect fill="#fefefe" fill-opacity="0" x="0" y="0" width="50" height="50"/>
+<g>
+	<g transform="matrix(1,0,0,1,25,25)">
+		<g transform="matrix(1,0,0,1,-25,-25)">
+			<path d="M1.75,1.7500000000102318 C1.75,1.7500000000102318 18,18 18,18" fill="none" stroke="#000000" stroke-width="3.5"/>
+		</g>
+		<g transform="matrix(1,0,0,1,-25,-25)">
+			<path d="M0,15 C0,15 0,0 0,0 C0,0 15,0.000000000000000918485099360515 15,0.000000000000000918485099360515" transform="matrix(1,0,0,1,1.75,1.75)" fill="none" stroke="#000000" stroke-width="3.5" stroke-miterlimit="2"/>
+		</g>
+	</g>
+	<g transform="matrix(1,0,0,1,25,25)">
+		<g transform="matrix(0,-1,1,0,-25,25)">
+			<path d="M1.75,1.7500000000102318 C1.75,1.7500000000102318 18,18 18,18" fill="none" stroke="#000000" stroke-width="3.5"/>
+		</g>
+		<g transform="matrix(0,-1,1,0,-25,25)">
+			<path d="M0,15 C0,15 0,0 0,0 C0,0 15,0.000000000000000918485099360515 15,0.000000000000000918485099360515" transform="matrix(1,0,0,1,1.75,1.75)" fill="none" stroke="#000000" stroke-width="3.5" stroke-miterlimit="2"/>
+		</g>
+	</g>
+	<g transform="matrix(1,0,0,1,25,25)">
+		<g transform="matrix(0,1,-1,0,25,-25)">
+			<path d="M1.75,1.7500000000102318 C1.75,1.7500000000102318 18,18 18,18" fill="none" stroke="#000000" stroke-width="3.5"/>
+		</g>
+		<g transform="matrix(0,1,-1,0,25,-25)">
+			<path d="M0,15 C0,15 0,0 0,0 C0,0 15,0.000000000000000918485099360515 15,0.000000000000000918485099360515" transform="matrix(1,0,0,1,1.75,1.75)" fill="none" stroke="#000000" stroke-width="3.5" stroke-miterlimit="2"/>
+		</g>
+	</g>
+	<g transform="matrix(1,0,0,1,25,25)">
+		<g transform="matrix(-1,0,0,-1,25,25)">
+			<path d="M1.75,1.7500000000102318 C1.75,1.7500000000102318 18,18 18,18" fill="none" stroke="#000000" stroke-width="3.5"/>
+		</g>
+		<g transform="matrix(-1,0,0,-1,25,25)">
+			<path d="M0,15 C0,15 0,0 0,0 C0,0 15,0.000000000000000918485099360515 15,0.000000000000000918485099360515" transform="matrix(1,0,0,1,1.75,1.75)" fill="none" stroke="#000000" stroke-width="3.5" stroke-miterlimit="2"/>
+		</g>
+	</g>
+</g></g></svg>
\ No newline at end of file
diff --git a/templates/layouts/example.html b/templates/layouts/example.html
index 2c1ac59f2e..e12a4d6f45 100644
--- a/templates/layouts/example.html
+++ b/templates/layouts/example.html
@@ -6,9 +6,10 @@
       {% set parent_idx = total_ancestors - 1 %}
       {% set category = get_section(path=page.ancestors | nth(n=parent_idx)) %}
       <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
-      <a class="example__back" href="{% block examples_url %}{% endblock examples_url %}"><i class="icon icon--chevron-left"></i> Back to examples</a>
-      <a class="example__github"
-          href="https://github.com/bevyengine/bevy/blob/latest/{{ page.extra.github_code_path }}">
+      <a class="example__back" href="{% block examples_url %}{% endblock examples_url %}"><i
+          class="icon icon--chevron-left"></i> Back to examples</a>
+      <a id="fullscreen-button" class="example__fullscreen"><i class="icon icon--fullscreen"></i></a>
+      <a class="example__github" href="https://github.com/bevyengine/bevy/blob/latest/{{ page.extra.github_code_path }}">
         <i class="icon icon--github"></i> View in GitHub
       </a>
     </div>
@@ -30,9 +31,9 @@ <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
       </aside>
     </div>
     {% if page.content %}
-      <div class="example__explanation media-content">
-        {{ page.content | safe }}
-      </div>
+    <div class="example__explanation media-content">
+      {{ page.content | safe }}
+    </div>
     {% endif %}
     <div class="example__code-tabs tabs">
       {% set filename = page.extra.code_path | split(pat="/") | last %}
@@ -45,17 +46,17 @@ <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
           {{ code_md | markdown(inline=true) | safe }}
         </div>
       </div>
-      
+
       {% for shader in page.extra.shader_code_paths %}
-        <input class="tabs__radio" tabindex="1" name="tabs" type="radio" id="tab{{ loop.index }}">
-        <label class="tabs__label" for="tab{{ loop.index }}"><code>{{ shader }}</code></label>
-        <div class="tabs__panel" tabindex="1">
-          <div class="example__code media-content">
-            {% set code = load_data(path="static/assets/examples/" ~ shader) %}
-            {% set code_md = "```wgsl" ~ newline ~ code ~ "```" %}
-            {{ code_md | markdown(inline=true) | safe }}
-          </div>
+      <input class="tabs__radio" tabindex="1" name="tabs" type="radio" id="tab{{ loop.index }}">
+      <label class="tabs__label" for="tab{{ loop.index }}"><code>{{ shader }}</code></label>
+      <div class="tabs__panel" tabindex="1">
+        <div class="example__code media-content">
+          {% set code = load_data(path="static/assets/examples/" ~ shader) %}
+          {% set code_md = "```wgsl" ~ newline ~ code ~ "```" %}
+          {{ code_md | markdown(inline=true) | safe }}
         </div>
+      </div>
       {% endfor %}
     </div>
   </div>
@@ -134,5 +135,6 @@ <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
         throw error;
       }
     });
+    document.getElementById("fullscreen-button").addEventListener("click", () => canvasEl.requestFullscreen());
   </script>
 {% endblock content %}