diff --git a/public/nav/navbar/Navbar.jsx b/public/nav/navbar/Navbar.jsx
index 457ccde..327c3d6 100644
--- a/public/nav/navbar/Navbar.jsx
+++ b/public/nav/navbar/Navbar.jsx
@@ -42,8 +42,8 @@ class Navbar extends React.Component {
 
   render() {
     return (
-      <section className="o-navbar__section is-stuck">
-        <nav className="o-navbar">
+      <section className="o-navbar is-stuck">
+        <nav className="o-navbar__nav">
 
           <a href="/" className="o-navbar__logo-container">
             <img
diff --git a/public/page/home/Homepage.jsx b/public/page/home/Homepage.jsx
index 7f952d5..2a912e5 100644
--- a/public/page/home/Homepage.jsx
+++ b/public/page/home/Homepage.jsx
@@ -33,7 +33,7 @@ class Homepage extends React.Component {
   render() {
     return (
       <Page style="home-page">
-        <VideoSection full>
+        <VideoSection full mp4={ require('./../../videos/about/programming/programming.mp4') }>
           Test
         </VideoSection>
       </Page>
diff --git a/public/section/Section.jsx b/public/section/Section.jsx
index c05ad76..8a2b025 100644
--- a/public/section/Section.jsx
+++ b/public/section/Section.jsx
@@ -30,7 +30,11 @@ class Section extends React.Component {
 
   render() {
     return (
-      <section className={"c-section" + (this.props.full?" c-section--full":"") }>
+      <section className={
+          "c-section" +
+          (this.props.full?" c-section--full":"") +
+          (this.props.className ? " "+this.props.className : "")
+      }>
         { this.props.children }
       </section>
     );
diff --git a/public/section/video/VideoSection.jsx b/public/section/video/VideoSection.jsx
index 6fafbdc..f90be92 100644
--- a/public/section/video/VideoSection.jsx
+++ b/public/section/video/VideoSection.jsx
@@ -23,6 +23,7 @@
 
 import React from 'react';
 import Section from './../Section';
+import Video from './../../video/Video';
 
 class VideoSection extends React.Component {
   constructor(props) {
@@ -31,10 +32,11 @@ class VideoSection extends React.Component {
 
   render() {
     return (
-      <Section full={this.props.full}>
-        <video className="c-video-section">
-
-        </video>
+      <Section full={this.props.full} className="c-video-section">
+        <Video
+          className="c-video-section__video"
+          sources={ this.props.sources ? this.props.sources : this.props }
+        />
 
         { this.props.children }
       </Section>
diff --git a/public/styles/components/_video-section.scss b/public/styles/components/_video-section.scss
index 039f3a5..47a7fdb 100644
--- a/public/styles/components/_video-section.scss
+++ b/public/styles/components/_video-section.scss
@@ -8,4 +8,15 @@
  *    1.0.0 - 2018/05/03
  */
 .c-video-section {
+  position: relative;
+
+  &__video {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    object-position: center;
+  }
 }
diff --git a/public/styles/index.scss b/public/styles/index.scss
index 35452a8..c73fd10 100644
--- a/public/styles/index.scss
+++ b/public/styles/index.scss
@@ -28,6 +28,7 @@
 @import './settings/colors.scss';
 @import './settings/responsive.scss';
 @import './settings/typography.scss';
+@import './settings/z.scss';
 
 //Tools
 @import './tools/flex.scss';
diff --git a/public/styles/objects/_navbar.scss b/public/styles/objects/_navbar.scss
index 0a37dba..3850d62 100644
--- a/public/styles/objects/_navbar.scss
+++ b/public/styles/objects/_navbar.scss
@@ -5,6 +5,7 @@
  *  Dependencies:
  *    styles/settings/colors.scss
  *    styles/settings/typography.scss
+ *    styles/settings/z.scss
  *    styles/tools/flex.scss
  *    styles/tool/list.scss
  *
@@ -14,21 +15,21 @@
 $o-navbar--link-thickness: 5px;
 
 .o-navbar {
-  @extend %t-flexbox;
-  @include t-align-items(stretch);
-  background: $s-color--navbar;
-  color: white;
+  z-index: $s-z--navbar;
+
+  &.is-stuck {
+    position: fixed;
+    width: 100%;
+    top: 0;
+    left: 0;
+  }
 
 
-  &__section {
-    border: 1px solid blue;
-
-    &.is-stuck {
-      position: fixed;
-      width: 100%;
-      top: 0;
-      left: 0;
-    }
+  &__nav {
+    @extend %t-flexbox;
+    @include t-align-items(stretch);
+    background: $s-color--navbar;
+    color: white;
   }
 
   //Logo
@@ -80,14 +81,12 @@ $o-navbar--link-thickness: 5px;
 
 
   @include t-media-query($s-xsmall-up) {
+    padding: 1em;
+
     &__logo-container {
       text-align: left;
     }
 
-    &__section {
-      padding: 1em;
-    }
-
     &__logo {
       width: 10em;
     }
@@ -98,9 +97,7 @@ $o-navbar--link-thickness: 5px;
   }
 
   @include t-media-query($s-small-up) {
-    &__section {
-      padding: 3em;
-    }
+    padding: 3em;
 
     &__logo {
       width: 12em;
diff --git a/public/styles/settings/z.scss b/public/styles/settings/z.scss
new file mode 100644
index 0000000..2d58f14
--- /dev/null
+++ b/public/styles/settings/z.scss
@@ -0,0 +1,9 @@
+/*
+ *  Z
+ *    Provides Z-Index tracking, for use throughout the theme.
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/07
+ */
+
+$s-z--navbar: 10;   //Navbar
diff --git a/public/video/Video.jsx b/public/video/Video.jsx
new file mode 100644
index 0000000..ceec3da
--- /dev/null
+++ b/public/video/Video.jsx
@@ -0,0 +1,59 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+
+const VALID_SOURCES = [
+  "mp4",
+  "webm",
+  "ogg"
+]
+
+class Video extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    //TODO: Add image fallback support.
+    let sources = [];
+    let sourceProps = this.props.sources ? this.props.sources : this.props;
+
+    for(let i = 0; i < VALID_SOURCES.length; i++) {
+      let s = VALID_SOURCES[i];
+      if(!sourceProps[s]) continue;
+      sources.push(<source type={"video/"+s} src={sourceProps[s]} key={s} />);
+    }
+
+    let clazz = "o-video";
+    if(this.props.className) clazz += " " + this.props.className;
+
+    return (
+      <video className={clazz}>
+        { sources }
+      </video>
+    );
+  }
+}
+
+export default Video;
diff --git a/public/videos/about/programming/programming.mp4 b/public/videos/about/programming/programming.mp4
new file mode 100644
index 0000000..051fbbf
Binary files /dev/null and b/public/videos/about/programming/programming.mp4 differ
diff --git a/public/videos/about/programming/programming.png b/public/videos/about/programming/programming.png
new file mode 100644
index 0000000..fbef694
Binary files /dev/null and b/public/videos/about/programming/programming.png differ
diff --git a/public/videos/about/programming/programming.webm b/public/videos/about/programming/programming.webm
new file mode 100644
index 0000000..070e296
Binary files /dev/null and b/public/videos/about/programming/programming.webm differ