diff --git a/app/Http/Controllers/OrganiserViewController.php b/app/Http/Controllers/OrganiserViewController.php
index 19499b25..eb5293a6 100644
--- a/app/Http/Controllers/OrganiserViewController.php
+++ b/app/Http/Controllers/OrganiserViewController.php
@@ -5,6 +5,7 @@ namespace App\Http\Controllers;
 use App\Models\Organiser;
 use Carbon\Carbon;
 use Auth;
+use Illuminate\Http\Request;
 
 class OrganiserViewController extends Controller
 {
@@ -17,7 +18,7 @@ class OrganiserViewController extends Controller
      * @param bool $preview
      * @return \Illuminate\Contracts\View\View
      */
-    public function showOrganiserHome($organiser_id, $slug = '', $preview = false)
+    public function showOrganiserHome(Request $request, $organiser_id, $slug = '', $preview = false)
     {
         $organiser = Organiser::findOrFail($organiser_id);
 
@@ -25,6 +26,18 @@ class OrganiserViewController extends Controller
             abort(404);
         }
 
+        /*
+         * If we are previewing styles from the backend we set them here.
+         */
+        if($request->get('preview_styles') && Auth::check()) {
+            $query_string = rawurldecode($request->get('preview_styles'));
+            parse_str($query_string, $preview_styles);
+
+            $organiser->page_bg_color = $preview_styles['page_bg_color'];
+            $organiser->page_header_bg_color = $preview_styles['page_header_bg_color'];
+            $organiser->page_text_color = $preview_styles['page_text_color'];
+        }
+
         $upcoming_events = $organiser->events()->where('end_date', '>=', Carbon::now())->get();
         $past_events = $organiser->events()->where('end_date', '<', Carbon::now())->get();
 
@@ -33,7 +46,7 @@ class OrganiserViewController extends Controller
             'tickets'           => $organiser->events()->orderBy('created_at', 'desc')->get(),
             'is_embedded'       => 0,
             'upcoming_events'   => $upcoming_events,
-            'past_events'       => $past_events
+            'past_events'       => $past_events,
         ];
 
         return view('Public.ViewOrganiser.OrganiserPage', $data);
diff --git a/resources/views/ManageOrganiser/Customize.blade.php b/resources/views/ManageOrganiser/Customize.blade.php
index adbdceee..5afa7d36 100644
--- a/resources/views/ManageOrganiser/Customize.blade.php
+++ b/resources/views/ManageOrganiser/Customize.blade.php
@@ -24,11 +24,8 @@
             $('.colorpicker').minicolors({
                  changeDelay: 500,
                  change: function() {
-                    $('#OrganiserPageDesign input').on('change', function (e) {
-                        var replaced = replaceUrlParam('{{route('showOrganiserHome', ['organiser_id'=>$organiser->id])}}', 'preview_styles', $('#OrganiserPageDesign form').serialize());
+                        var replaced = replaceUrlParam('{{route('showOrganiserHome', ['organiser_id'=>$organiser->id])}}', 'preview_styles', encodeURIComponent($('#OrganiserPageDesign form').serialize()));
                         document.getElementById('previewIframe').src = replaced;
-                        e.preventDefault();
-                    });
                 }
             });