diff --git a/dist/custom.css b/dist/custom.css
index 97a2f54..cdbfee8 100644
--- a/dist/custom.css
+++ b/dist/custom.css
@@ -1,4 +1,16 @@
 /*Google Places autocomplete*/
 .pac-container {
 	z-index: 99999;
-}
\ No newline at end of file
+}
+
+.inl-bl { display: inline-block;  }.colorpicker-2x .colorpicker-saturation { width: 200px; height: 200px; } .colorpicker-2x .colorpicker-hue, .colorpicker-2x .colorpicker-alpha { width: 30px; height: 200px; } .colorpicker-2x .colorpicker-color, .colorpicker-2x .colorpicker-color div { height: 30px; } 
+
+.small-box {
+    width: 8em; height: 6em; border: 2px solid; text-align: center; position: relative; margin: 1em; float:left; background-color: white;
+}
+
+.small-box.on {background-color: #cccccc;}
+.small-box1 {font-family: Arial;} 
+.small-box2 {font-family: Tahoma;}
+.small-box3 {font-family: 'Comic Sans MS';}   
+#cp9 {background-color: pink;}
diff --git a/dist/custom.js b/dist/custom.js
index 4d51c36..9831e5a 100644
--- a/dist/custom.js
+++ b/dist/custom.js
@@ -47,4 +47,21 @@ $('.js-delete-button-confirmation-trigger').click(function () {
 
 	$('.js-delete-button-confirmation').attr('hidden', true);
 	$('.js-delete-button-trigger').attr('hidden', false);
-});
\ No newline at end of file
+});
+
+$(function() { $('#cp9').colorpicker({ customClass: 'colorpicker-2x', sliders: { saturation: { maxLeft: 200, maxTop: 200 }, hue: { maxTop: 200 }, alpha: { maxTop: 200 } } });  });
+
+$(function() {$('#cp9').colorpicker().on(
+			'changeColor',
+			function() {
+				$('#cp9').css('background-color',
+						$(this).colorpicker('getValue', '#ffffff'));
+			});
+ });
+
+$( function() {
+  $('.small-box').click( function() {
+      $('.small-box').removeClass('on')
+      $(this).toggleClass('on');
+} )
+}); 
diff --git a/src/assets/js/.Rhistory b/src/assets/js/.Rhistory
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/backend/websettings.ejs b/src/views/backend/websettings.ejs
new file mode 100644
index 0000000..497c6b8
--- /dev/null
+++ b/src/views/backend/websettings.ejs
@@ -0,0 +1,55 @@
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.3/css/bootstrap-colorpicker.min.css" rel="stylesheet">
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.3/js/bootstrap-colorpicker.min.js"></script>  
+<div class="boxes__container">
+	<div class="card boxes__item">
+		<div class="card-header">
+			<h3>
+				Nastavení barevného schématu
+			</h3>
+		</div>
+		<div class="card-body colored">
+            <input id="cp9" type="text" class="form-control" value="pink" />    
+		</div>
+	</div>
+
+	<div class="card boxes__item">
+		<div class="card-header">
+			<h3>
+				Nastavení sady fontů
+			</h3>
+		</div>
+		<div class="card-body">
+            <div class="small-box small-box1 on"><a href="#"><h1>Abc</h1> <p> Arial </p></a></div>
+            <div class="small-box small-box2"><a href="#"><h1>Abc</h1> <p> Tahoma </p></a></div>
+            <div class="small-box small-box3"><a href="#"><h1>Abc</h1> <p> Comic Sans </p></a></div>
+		</div>
+	</div>
+
+<div class="card boxes__item">
+		<div class="card-header">
+			<h3>
+				Nastavení hesla k přístupu na web
+			</h3>
+		</div>
+		<div class="card-body">
+
+            Pokud chcete, můžete zpřístupnit vaše stránky jen po zadání hesla.
+<form>
+  <div class="form-group">
+    <label for="pwd">Zadejte heslo:</label>
+    <input type="password" class="form-control" id="pwd">
+  </div>     
+
+  <div class="form-group">
+    <label for="pwd2">Zadejte znovu heslo:</label>
+    <input type="password" class="form-control" id="pwd2">
+  </div> 
+  <button type="cancel" class="btn btn-default">Storno</button>
+  <button type="submit" class="btn btn-default">Uložit</button>
+</form>     
+
+		</div>
+	</div>
+
+</div>
diff --git a/src/views/partials/editor/modals/mainInfo.ejs b/src/views/partials/editor/modals/mainInfo.ejs
index 66ed610..f8819a8 100644
--- a/src/views/partials/editor/modals/mainInfo.ejs
+++ b/src/views/partials/editor/modals/mainInfo.ejs
@@ -15,7 +15,7 @@
 			<div class="modal-body">
 
 
-				<% include "../../weddingInfo.ejs" %>
+				<% include ../../weddingInfo.ejs %>
 
 
 			</div>
@@ -28,4 +28,4 @@
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/views/partials/sidebar.ejs b/src/views/partials/sidebar.ejs
index 1c4cd10..0716aab 100644
--- a/src/views/partials/sidebar.ejs
+++ b/src/views/partials/sidebar.ejs
@@ -42,9 +42,9 @@
 				<span>Program</span></a>
 		</li>
 		<li class="nav-item">
-			<a class="nav-link" href="javascript:void(0);">
+			<a class="nav-link" href="/websettings">
 				<span class="fa nav-link__icon fa-gears"></span>
 				<span>Nastavení webu</span></a>
 		</li>
 	</ul>
-</nav>
\ No newline at end of file
+</nav>