diff --git a/core/module/theme/view/site/site.css b/core/module/theme/view/site/site.css
index 94be3bfa..3a9ba1db 100644
--- a/core/module/theme/view/site/site.css
+++ b/core/module/theme/view/site/site.css
@@ -29,4 +29,11 @@ textarea,
 .button.buttonGrey, 
 .button.buttonGrey:hover {
     color: rgba(33, 34, 35, 1);
+}
+
+div.preview {
+    border-radius: 2%;
+    -webkit-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.75);
+    -moz-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.75);
+    box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.75);
 }
\ No newline at end of file
diff --git a/core/module/theme/view/site/site.js.php b/core/module/theme/view/site/site.js.php
index 21c0daf9..a1f3ec6b 100755
--- a/core/module/theme/view/site/site.js.php
+++ b/core/module/theme/view/site/site.js.php
@@ -10,6 +10,37 @@
  * @link http://zwiicms.com/
  */
 
+ /*
+ * Chargement de l'aperçu
+ */
+$( document ).ready(function() {
+	
+
+	// Import des polices de caractères
+	var titleFont = $("#themeTitleFont").val();
+	var textFont = $("#themeTextFont").val();
+	var css = "@import url('https://fonts.googleapis.com/css?family=" + titleFont + "|" + textFont + "');";
+	var colors = core.colorVariants($("#themeButtonBackgroundColor").val());
+	
+	
+	css += "h1.preview,h3.preview{color:" + $("#themeTitleTextColor").val() + ";font-family:'" + titleFont.replace(/\+/g, " ") + "',sans-serif;font-weight:" + $("#themeTitleFontWeight").val() + ";text-transform:" + $("#themeTitleTextTransform").val() + "}";
+	css += "p.preview{color:" + $("#themeTextTextColor").val() + "}";
+	css += "div.preview{background-color:" + $("#themeSiteBackgroundColor").val() + ";}";
+
+	// Couleurs des liens
+	colors = core.colorVariants($("#themeLinkTextColor").val());
+	css += "a.preview{color:" + colors.normal + "}";
+	css += "a.preview:hover{color:" + colors.darken + "}";
+
+	// Paramètrage du DOM
+	$("#themePreview").remove();
+	$("<style>")
+		.attr("type", "text/css")
+		.attr("id", "themePreview")
+		.text(css)
+		.appendTo("head");
+});
+
 /**
  * Aperçu en direct
  */
@@ -36,14 +67,18 @@ $("input, select").on("change", function() {
 	colors = core.colorVariants($("#themeLinkTextColor").val());
 	//css += "a{color:" + colors.normal + "}";
 	//css += "a:hover{color:" + colors.darken + "}";
+	css += "a.preview{color:" + colors.normal + "}";
+	css += "a.preview:hover{color:" + colors.darken + "}";
 	// Couleur, polices, épaisseur et capitalisation de caractères des titres
 	//css += "h1,h2,h3,h4,h5,h6{color:" + $("#themeTitleTextColor").val() + ";font-family:'" + titleFont.replace(/\+/g, " ") + "',sans-serif;font-weight:" + $("#themeTitleFontWeight").val() + ";text-transform:" + $("#themeTitleTextTransform").val() + "}";
+	css += "h1.preview,h3.preview{color:" + $("#themeTitleTextColor").val() + ";font-family:'" + titleFont.replace(/\+/g, " ") + "',sans-serif;font-weight:" + $("#themeTitleFontWeight").val() + ";text-transform:" + $("#themeTitleTextTransform").val() + "}";
 	// Police de caractères
 	css += "body{font-family:'" + textFont.replace(/\+/g, " ") + "',sans-serif}";
 	// Taille du texte
 	css += "body,.row > div{font-size:" + $("#themeTextFontSize").val() + "}";
 	// Couleur du texte
 	//css += "body,.block h4,input[type='email'],input[type='text'],input[type='password'],.inputFile,select,textarea,.inputFile,.button.buttonGrey,.button.buttonGrey:hover{color:" + $("#themeTextTextColor").val() + "}";
+	css += "p.preview{color:" + $("#themeTextTextColor").val() + "}";
 	// Largeur du site
 	css += ".container{max-width:" + $("#themeSiteWidth").val() + "}";
 	if ($("#themeSiteWidth").val() === "100%") {
@@ -55,6 +90,7 @@ $("input, select").on("change", function() {
 	// Couleur du site, arrondi sur les coins du site et ombre sur les bords du site
 	//css += "#site{background-color:" + $("#themeSiteBackgroundColor").val() + ";border-radius:" + $("#themeSiteRadius").val() + ";box-shadow:" + $("#themeSiteShadow").val() + " #212223}";
 	css += "#site{border-radius:" + $("#themeSiteRadius").val() + ";box-shadow:" + $("#themeSiteShadow").val() + " #212223}";
+	css += "div.preview{background-color:" + $("#themeSiteBackgroundColor").val() + ";}";
 	// Ajout du css au DOM
 	$("#themePreview").remove();
 	$("<style>")
diff --git a/core/module/theme/view/site/site.php b/core/module/theme/view/site/site.php
index ea2d1bd3..9fb47d8c 100755
--- a/core/module/theme/view/site/site.php
+++ b/core/module/theme/view/site/site.php
@@ -17,47 +17,67 @@
 			<div class="block">
 				<h4>Couleurs</h4>
 				<div class="row">
-					<div class="col4">
-						<?php echo template::text('themeSiteBackgroundColor', [
-							'class' => 'colorPicker',
-							'help' => 'Le curseur horizontal règle le niveau de transparence.',							
-							'label' => 'Fond',
-							'value' => $this->getData(['theme', 'site', 'backgroundColor'])
-						]); ?>
+					<div class="col8">
+						<div class="row">
+							<div class="col6">
+								<?php echo template::text('themeSiteBackgroundColor', [
+									'class' => 'colorPicker',
+									'help' => 'Le curseur horizontal règle le niveau de transparence.',							
+									'label' => 'Fond',
+									'value' => $this->getData(['theme', 'site', 'backgroundColor'])
+								]); ?>
+							</div>
+							<div class="col6">
+								<?php echo template::text('themeTextTextColor', [
+									'class' => 'colorPicker',
+									'help' => 'Le curseur horizontal règle le niveau de transparence.',							
+									'label' => 'Texte',
+									'value' => $this->getData(['theme', 'text', 'textColor'])
+								]); ?>
+							</div>
+						</div>
+						<div class="row">
+							<div class="col6">
+								<?php echo template::text('themeTitleTextColor', [
+									'class' => 'colorPicker',
+									'help' => 'Le curseur horizontal règle le niveau de transparence.',							
+									'label' => 'Titres',
+									'value' => $this->getData(['theme', 'title', 'textColor'])
+								]); ?>
+							</div>							
+							<div class="col6">
+								<?php echo template::text('themeLinkTextColor', [
+									'class' => 'colorPicker',
+									'help' => 'Le curseur horizontal règle le niveau de transparence.',							
+									'label' => 'Liens',
+									'value' => $this->getData(['theme', 'link', 'textColor'])
+								]); ?>
+							</div>					
+						</div>
+						<div class="col6 offset3">
+							<?php echo template::text('themeButtonBackgroundColor', [
+								'class' => 'colorPicker',
+								'help' => 'Le curseur horizontal règle le niveau de transparence.',							
+								'label' => 'Boutons',
+								'value' => $this->getData(['theme', 'button', 'backgroundColor'])
+							]); ?>
+						</div>
 					</div>
-					<div class="col4">
-						<?php echo template::text('themeTextTextColor', [
-							'class' => 'colorPicker',
-							'help' => 'Le curseur horizontal règle le niveau de transparence.',							
-							'label' => 'Texte',
-							'value' => $this->getData(['theme', 'text', 'textColor'])
-						]); ?>
-					</div>
-					<div class="col4">
-						<?php echo template::text('themeLinkTextColor', [
-							'class' => 'colorPicker',
-							'help' => 'Le curseur horizontal règle le niveau de transparence.',							
-							'label' => 'Liens',
-							'value' => $this->getData(['theme', 'link', 'textColor'])
-						]); ?>
-					</div>					
-				</div>
-				<div class="row">
-					<div class="col4">
-						<?php echo template::text('themeTitleTextColor', [
-							'class' => 'colorPicker',
-							'help' => 'Le curseur horizontal règle le niveau de transparence.',							
-							'label' => 'Titres',
-							'value' => $this->getData(['theme', 'title', 'textColor'])
-						]); ?>
-					</div>
-					<div class="col4 offset4">
-						<?php echo template::text('themeButtonBackgroundColor', [
-							'class' => 'colorPicker',
-							'help' => 'Le curseur horizontal règle le niveau de transparence.',							
-							'label' => 'Boutons',
-							'value' => $this->getData(['theme', 'button', 'backgroundColor'])
-						]); ?>
+					<div class="col4 preview">
+						<h1 class="preview">Aperçu</h1>
+						<div class="row">
+							<div class="col8">
+								<h3 class="preview">Titre 3 </h3>
+								<p class="preview">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+							</div>
+							<div class="col4">
+								<p><a href="#" class="preview">Hyperlien</a></p>
+								<?php echo template::button('themeSiteTest', [
+									'class' => 'buttonPreview',						
+									'value' => 'Test'
+								]); ?>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>