diff --git a/web-frontend/public/index.html b/web-frontend/public/index.html
index 35ff8ce69..b56bc16eb 100755
--- a/web-frontend/public/index.html
+++ b/web-frontend/public/index.html
@@ -18,6 +18,39 @@
             <p>
                 Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra urna. Praesent lobortis feugiat erat, nec volutpat nulla tincidunt vel. In hac habitasse platea dictumst. Aenean fringilla lacus nunc, non pharetra mauris pulvinar lacinia. Aenean ut sem lacinia, sagittis quam sed, pellentesque orci. Aenean non consequat mi. Nunc laoreet ligula a nunc eleifend, nec accumsan felis euismod.
             </p>
+            <form style="margin-bottom: 20px;">
+                <div class="control">
+                    <label class="control-label">Small text field</label>
+                    <div class="control-elements">
+                        <input type="text" class="input" />
+                    </div>
+                </div>
+                <div class="control">
+                    <label class="control-label">Small with error</label>
+                    <div class="control-elements">
+                        <input type="text" class="input input-error" />
+                        <div class="error">Please do something different</div>
+                    </div>
+                </div>
+                <div class="control">
+                    <label class="control-label">Small text field</label>
+                    <div class="control-elements">
+                        <input type="text" class="input" placeholder="Voer hier iets in" />
+                    </div>
+                </div>
+                <div class="control">
+                    <label class="control-label">Large text field</label>
+                    <div class="control-elements">
+                        <input type="text" class="input input-large" placeholder="Voer hier iets in" />
+                    </div>
+                </div>
+                <div class="control">
+                    <label class="control-label">Large password field</label>
+                    <div class="control-elements">
+                        <input type="password" class="input input-large" placeholder="Please enter your password" />
+                    </div>
+                </div>
+            </form>
             <div style="margin-bottom: 20px;">
                 <div class="alert alert-has-icon">
                     <div class="alert-icon">
diff --git a/web-frontend/src/scss/components/_form.scss b/web-frontend/src/scss/components/_form.scss
new file mode 100644
index 000000000..8675bc710
--- /dev/null
+++ b/web-frontend/src/scss/components/_form.scss
@@ -0,0 +1,40 @@
+.control {
+  margin-bottom: 20px;
+}
+
+.control-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 700;
+  margin-bottom: 16px;
+}
+
+.control-elements {
+
+}
+
+.input {
+  display: block;
+  width: 100%;
+  border: 1px solid $color-neutral-400;
+  border-radius: 3px;
+  padding: 8px 12px;
+
+  &:active,
+  &:focus {
+    border-color: $color-primary-500;
+  }
+
+  &.input-large {
+    padding: 12px 12px;
+  }
+
+  &.input-error {
+    border-color: $color-error-500;
+  }
+}
+
+.error {
+  margin-top: 6px;
+  color: $color-error-500;
+}
diff --git a/web-frontend/src/scss/default.scss b/web-frontend/src/scss/default.scss
index 0392452ad..c618b52ff 100755
--- a/web-frontend/src/scss/default.scss
+++ b/web-frontend/src/scss/default.scss
@@ -8,3 +8,4 @@
 
 @import "components/button";
 @import "components/alert";
+@import "components/form";