diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 9b25a07..c2082f1 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -25,6 +25,7 @@ $light: #fff;
 
 @import 'bulma/bulma';
 
+@import "checkmark-icon";
 @import './demo';
 
 .is-font-logo {
@@ -35,6 +36,10 @@ $light: #fff;
   height: 100%;
 }
 
+.is-vcentered {
+  height: 100vh;
+}
+
 .content {
   padding: 30px 60px 50px;
 
@@ -43,8 +48,6 @@ $light: #fff;
   }
 }
 
-
-
 body {
   min-height: 100vh;
 }
@@ -59,10 +62,11 @@ body {
 }
 
 .table-wrapper {
+  overflow: auto;
+  overflow-y: scroll;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 }
 
-
 /* 
 Colours 
 #FFFFFF - White
@@ -302,3 +306,16 @@ Footer
 #footer a {
     color: #FFFFFF !important;
 }
+.submission-table tbody {
+  font-size: 0.75em;
+}
+
+.inline-svg svg {
+  display: inline
+}
+
+.svg-icon {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
diff --git a/app/assets/stylesheets/checkmark-icon.css.scss b/app/assets/stylesheets/checkmark-icon.css.scss
new file mode 100644
index 0000000..78e2612
--- /dev/null
+++ b/app/assets/stylesheets/checkmark-icon.css.scss
@@ -0,0 +1,89 @@
+@-webkit-keyframes checkmark {
+  0% {
+    stroke-dashoffset: 100px
+  }
+
+  100% {
+    stroke-dashoffset: 200px
+  }
+}
+
+@-ms-keyframes checkmark {
+  0% {
+    stroke-dashoffset: 100px
+  }
+
+  100% {
+    stroke-dashoffset: 200px
+  }
+}
+
+@keyframes checkmark {
+  0% {
+    stroke-dashoffset: 100px
+  }
+
+  100% {
+    stroke-dashoffset: 0px
+  }
+}
+
+@-webkit-keyframes checkmark-circle {
+  0% {
+    stroke-dashoffset: 480px
+  }
+
+  100% {
+    stroke-dashoffset: 960px;
+
+  }
+}
+
+@-ms-keyframes checkmark-circle {
+  0% {
+    stroke-dashoffset: 240px
+  }
+
+  100% {
+    stroke-dashoffset: 480px
+  }
+}
+
+@keyframes checkmark-circle {
+  0% {
+    stroke-dashoffset: 480px
+  }
+
+  100% {
+    stroke-dashoffset: 960px
+  }
+}
+
+@keyframes colored-circle {
+  0% {
+    opacity: 0
+  }
+
+  100% {
+    opacity: 100
+  }
+}
+
+.svg-icon-checkmark svg polyline {
+  -webkit-animation: checkmark 0.30s ease-in-out 0.9s backwards;
+  animation: checkmark 0.30s ease-in-out 0.9s backwards
+}
+
+.svg-icon-checkmark svg g {
+  stroke: $success;
+}
+.svg-icon-checkmark svg circle {
+  -webkit-animation: checkmark-circle 0.8s ease-in-out backwards;
+  animation: checkmark-circle 0.8s ease-in-out backwards;
+}
+
+.svg-icon-checkmark svg circle#colored {
+  -webkit-animation: colored-circle 0.8s ease-in-out 0.9s backwards;
+  animation: colored-circle 0.8s ease-in-out 0.9s backwards;
+  fill: $success;
+}
diff --git a/app/controllers/forms_controller.rb b/app/controllers/forms_controller.rb
index 4b0ac01..22b7850 100644
--- a/app/controllers/forms_controller.rb
+++ b/app/controllers/forms_controller.rb
@@ -2,6 +2,7 @@ require 'google/apis/sheets_v4'
 require 'google/api_client/client_secrets'
 class FormsController < ApplicationController
   before_action :require_login, except: [:form]
+  layout 'submission', only: [:form]
 
   def new
     @form = current_user.forms.build
@@ -39,6 +40,7 @@ class FormsController < ApplicationController
   end
 
   def form
+    
     @form = Form.find_by!(token: params[:id])
   end
 
diff --git a/app/controllers/submissions_controller.rb b/app/controllers/submissions_controller.rb
index 9d801af..262ac9b 100644
--- a/app/controllers/submissions_controller.rb
+++ b/app/controllers/submissions_controller.rb
@@ -2,6 +2,7 @@ require 'google/apis/sheets_v4'
 class SubmissionsController < ApplicationController
   skip_before_action :verify_authenticity_token
   wrap_parameters false
+  layout 'submission', only: [:create]
 
   def create
     @form = Form.find_by!(token: params[:form_id])
diff --git a/app/views/forms/show.html.erb b/app/views/forms/show.html.erb
index 7c103b4..7c44119 100644
--- a/app/views/forms/show.html.erb
+++ b/app/views/forms/show.html.erb
@@ -27,7 +27,7 @@
   </div>
 
   <div class="box table-wrapper">
-    <table class="table is-fullwidth is-striped is-hoverable">
+    <table class="submission-table table is-fullwidth is-striped is-hoverable">
       <thead>
         <tr>
           <% @form.spreadsheet_headers.each do |value| %>
diff --git a/app/views/layouts/submission.html.erb b/app/views/layouts/submission.html.erb
new file mode 100644
index 0000000..e56263a
--- /dev/null
+++ b/app/views/layouts/submission.html.erb
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Tinyform</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+</head>
+
+<body>
+
+  <main>
+    <%= yield %>
+  </main>
+</body>
+
+</html>
diff --git a/app/views/submissions/create.html.erb b/app/views/submissions/create.html.erb
index 3b2a45f..7021320 100644
--- a/app/views/submissions/create.html.erb
+++ b/app/views/submissions/create.html.erb
@@ -1 +1,24 @@
-Thanks
+ <div class="container">
+   <div class="columns is-vcentered">
+     <div class="column has-text-centered is-half is-offset-one-quarter">
+           <div class="svg-icon svg-icon-checkmark inline-svg">
+             <svg xmlns="http://www.w3.org/2000/svg" width="154px" height="154px">
+               <g fill="none" stroke-width="2">
+                 <circle cx="77" cy="77" r="72" style="stroke-dasharray:480px, 480px; stroke-dashoffset: 960px;">
+                 </circle>
+                 <circle id="colored" cx="77" cy="77" r="72"
+                   style="stroke-dasharray:480px, 480px; stroke-dashoffset: 960px;"></circle>
+                 <polyline class="st0" stroke="#fff" stroke-width="10" points="43.5,77.8 63.7,97.9 112.2,49.4 "
+                   style="stroke-dasharray:100px, 100px; stroke-dashoffset: 200px;" />
+               </g>
+             </svg>
+           </div>
+       <h1 class="title">Thank You!</h1>
+       <p class="subtitle is-5">We received your submission.</p>
+       <p>
+        <button onclick="window.history.back()" class="button is-success">Back to previous page</button>
+       <p>
+
+     </div>
+   </div>
+ </div>
\ No newline at end of file