diff --git a/static/fontenay-sous-bois-2018/_custom.scss b/static/fontenay-sous-bois-2018/_custom.scss
new file mode 100644
index 00000000..4aa5282e
--- /dev/null
+++ b/static/fontenay-sous-bois-2018/_custom.scss
@@ -0,0 +1,516 @@
+@import '../includes/font-barlow';
+
+$dashboard_items: (profil, demandes, famille, paiements, porte-doc, abonnements);
+
+#nav-skip a {
+	color: white;
+}
+
+div#header-wrapper {
+	background: $primary-color;
+	height: 80px;
+	#logo-ville {
+		position: absolute;
+		left: 4rem;
+		top: 0px;
+		z-index: 10;
+		@media screen and (max-width: $mobile-limit) {
+			left: 0;
+			max-width: 100%;
+			overflow: hidden;
+		}
+	}
+	h1 {
+		text-indent: -10000px;
+	}
+	#toplinks {
+		box-shadow: none;
+		background: transparent;
+		top: 1rem;
+		text-transform: uppercase;
+		font-size: 18px;
+		a {
+			color: white;
+			.connected-user {
+				font-weight: bold;
+				&::before {
+					content: "Bonjour ";
+					font-weight: normal;
+				}
+			}
+		}
+	}
+}
+
+div#nav-wrapper {
+	position: absolute;
+	top: 5.5rem;
+	right: 0rem;
+	width: 500px;
+	@media screen and (max-width: $mobile-limit) {
+		width: auto;
+		max-width: 100%;
+	}
+	z-index: 1000;
+	button {
+		position: absolute;
+		right: 4rem;
+		@media screen and (max-width: $mobile-limit) {
+			top: 1rem;
+			right: 2.5rem;
+		}
+		border-radius: 10px;
+		.icon-bar {
+			z-index: 10;
+		}
+		&::before {
+			transition: all 250ms ease-in-out 0ms;
+			height: 4rem;
+			width: 4rem;
+			background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20230%20230%22%20transform%3D%22rotate%280%29%22%3E%3Cg%20style%3D%22opacity%3A%201%22%3E%3Cpolygon%20stroke%3D%22%23000%22%20fill%3D%22%23000%22%20stroke-width%3D%2270%22%20stroke-linejoin%3D%22round%22%20points%3D%2277%2C180.9%20153%2C180.9%20191.1%2C115%20153%2C49.1%2077%2C49.1%2038.9%2C115%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+			background-size: 100%;
+			left: -0.7rem;
+			position: absolute;
+			top: -0.7rem;
+			content: '';
+			-ms-transform: rotate(-45deg);
+			transform: rotate(-45deg);
+			z-index: 1;
+		}
+		&::after {
+			transition: all 250ms ease-in-out 0ms;
+			height: 5rem;
+			width: 5rem;
+			background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20230%20230%22%20transform%3D%22rotate%280%29%22%3E%3Cg%20style%3D%22opacity%3A%200.5%22%3E%3Cpolygon%20stroke%3D%22%23373737%22%20fill%3D%22%23373737%22%20stroke-width%3D%2270%22%20stroke-linejoin%3D%22round%22%20points%3D%2277%2C180.9%20153%2C180.9%20191.1%2C115%20153%2C49.1%2077%2C49.1%2038.9%2C115%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+			background-size: 100%;
+			left: -1.2rem;
+			position: absolute;
+			top: -1.2rem;
+			content: '';
+			position: absolute;
+			-ms-transform: rotate(-45deg);
+			transform: rotate(-45deg);
+			z-index: 0;
+		}
+	}
+	#nav > ul {
+		border-top: none;
+		position: relative;
+		top: $nav-menu-side;
+		a {
+			color: white;
+		}
+	}
+}
+
+#content {
+	margin-top: 2rem;
+}
+
+div#a-la-une {
+	div {
+		position: relative;
+		text-align: center;
+		&::before {
+			content: "";
+			height: 1px;
+			width: 100%;
+			background: $primary-color;
+			display: block;
+			position: relative;
+			top: 24px;
+		}
+	}
+	h1 {
+		margin: 0;
+		color: #373737;
+		font-weight: 400;
+		font-size: 2.5rem;
+		text-transform: uppercase;
+		background: white;
+		position: relative;
+		display: inline-block;
+		padding: 0 1rem;
+	}
+}
+
+div#a-la-une-texte {
+	position: relative;
+	height: 403px;
+	@media screen and (max-width: $mobile-limit) {
+		height: auto;
+	}
+	> div {
+		padding-left: 550px;
+		padding-right: 150px;
+		padding-top: 140px;
+		text-align: center;
+		@media screen and (max-width: $mobile-limit) {
+			padding: 0 0 1rem 0;
+			background: $primary-color;
+			border-radius: 10px;
+		}
+	}
+	img {
+		position: absolute;
+		top: 0;
+		left: 0;
+		border-radius: 10px;
+		max-width: 100%;
+		@media screen and (max-width: $mobile-limit) {
+			display: none;
+		}
+	}
+	h2, p {
+		position: relative;
+		z-index: 100;
+		color: white;
+	}
+	p:last-child {
+		position: static;
+		z-index: 0;
+	}
+	&::after {
+		content: '';
+		height: 320px;
+		width: 320px;
+		background-size: 100%;
+		background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20230%20230%22%20transform%3D%22rotate%280%29%22%3E%3Cg%20style%3D%22opacity%3A%201%22%3E%3Cpolygon%20stroke%3D%22%23da3838%22%20fill%3D%22%23da3838%22%20stroke-width%3D%2270%22%20stroke-linejoin%3D%22round%22%20points%3D%2277%2C180.9%20153%2C180.9%20191.1%2C115%20153%2C49.1%2077%2C49.1%2038.9%2C115%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+		-ms-transform: rotate(-45deg);
+		transform: rotate(-45deg);
+		z-index: 1;
+		position: absolute;
+		right: 90px;
+		bottom: 0;
+		@media screen and (max-width: $mobile-limit) {
+			display: none;
+		}
+	}
+}
+
+#columns {
+	h1 {
+		color: $primary-color;
+		font-size: 2rem;
+		margin: 0 0.5rem;
+		@media screen and (max-width: $mobile-limit) {
+			text-align: center;
+		}
+	}
+}
+
+div#sidebar {
+	h1 {
+		color: $primary-color;
+		font-size: 2.5rem;
+		margin: 0 0.5rem;
+		line-height: 100%;
+	}
+}
+
+.gru-content #sidebar div.cell {
+	margin-right: 40px;
+	@media screen and (max-width: $mobile-limit) {
+		margin-right: 0rem;
+	}
+}
+
+#content div.trackingcodeinputcell {
+	background: url(img/trackingcode.png) 2rem 1rem no-repeat;
+	border: 1px solid #c6c6c6;
+	border-radius: 10px;
+	padding: 1rem 3rem 1rem 160px;
+	@media screen and (max-width: $mobile-limit) {
+		background-position: top center;
+		padding: 80px 0 0 0;
+		h2 {
+			text-align: center;
+		}
+	}
+	form {
+		margin-left: 0;
+		display: -ms-flexbox;
+		display: flex;
+		-ms-flex-wrap: wrap;
+		flex-wrap: wrap;
+		p {
+			width: 100%;
+		}
+		input {
+			-ms-flex: 1;
+			flex: 1;
+			margin-right: 2rem;
+			@media screen and (max-width: $mobile-limit) {
+				margin-right: 0;
+			}
+		}
+		@media screen and (max-width: $mobile-limit) {
+			margin: 0 1rem 1rem 1rem;
+			button {
+				margin-right: 0;
+			}
+		}
+	}
+}
+
+button {
+	font-weight: bold;
+	text-transform: uppercase;
+}
+
+div#content {
+	div#rub_service div.category ul,
+	div#services > ul > li > ul,
+	div#account-management ul,
+	div.links-list ul,
+	div.menucell ul,
+	div.wcsformcell,
+	div.notificationscell ul,
+	div.categoriescell ul,
+	div.wcsformsofcategorycell ul,
+	div.wcscurrentdraftscell ul,
+	div.wcscurrentformscell ul {
+		a {
+			color: #888;
+			padding: 0.5rem 0.5rem;
+		}
+		li:hover a,
+		li.selected a {
+			color: $primary-color;
+			border-bottom: 1px solid $primary-color;
+		}
+	}
+}
+
+#columns {
+	div.textcell {
+		h1, h2, h3, h4, p, ul {
+			margin-left: 0;
+		}
+	}
+}
+
+#columns {
+	div.wcsformsofcategorycell {
+		h2 {
+			background: transparent center left no-repeat;
+			height: 80px;
+			margin: 0;
+			display: -ms-flexbox;
+			display: flex;
+			-ms-flex-direction: column;
+			flex-direction: column;
+			-ms-justify-content: center;
+			justify-content: center;
+			padding-left: 80px;
+			text-align: left;
+		}
+		@media screen and (max-width: $mobile-limit) {
+			text-align: center;
+		}
+	}
+}
+
+div#gauche {
+	float: none;
+	width: auto;
+	& + div#rub_service {
+		float: none;
+	}
+	div#side {
+		border: 1px solid #c6c6c6;
+		border-radius: 10px;
+		text-align: center;
+		div#tracking-code {
+			background: transparent url(img/trackingcode.png) 2rem 1rem no-repeat;
+			padding: 1rem 3rem 1rem 130px;
+			@media screen and (max-width: $mobile-limit) {
+				background-position: top left;
+				padding: 0 1rem 1rem 80px;
+			}
+			display: inline-block;
+			margin: 0 auto;
+			text-align: left;
+			h3 {
+				padding-bottom: 0;
+			}
+			a {
+				padding-top: 0;
+				padding-left: 0.5rem;
+				color: $primary-color;
+			}
+		}
+	}
+	div#steps {
+		margin-top: 1rem;
+		&::before {
+			content: "";
+			height: 1px;
+			width: 80%;
+			margin-left: 10%;
+			background: $primary-color;
+			display: block;
+			position: relative;
+			top: 70px;
+		}
+		ol {
+			display: -ms-flexbox;
+			display: flex;
+			-ms-justify-content: space-evenly;
+			justify-content: space-evenly;
+		}
+		li {
+			position: relative;
+			z-index: 10;
+			text-align: center;
+			width: 15ex;
+			border-bottom: 0;
+			background: url(img/step-g.png) top center no-repeat;
+			@media screen and (max-width: $mobile-limit) {
+				background: none;
+				width: 2ex;
+				text-align: center;
+				padding-right: 0;
+			}
+			span.marker {
+				padding: 1.5rem 0;
+				color: white;
+				@media screen and (max-width: $mobile-limit) {
+					padding: 0;
+					display: inline-block;
+					width: 100%;
+				}
+			}
+			span.label {
+				display: inline-block;
+				padding-top: 0.5rem;
+				@media screen and (max-width: $mobile-limit) {
+					display: none;
+				}
+			}
+			&.current {
+				background-image: url(img/step-r.png);
+				span.label {
+					color: $primary-color;
+					font-weight: normal;
+				}
+				@media screen and (max-width: $mobile-limit) {
+					background: none;
+					span.marker {
+						background: $primary-color;
+					}
+				}
+			}
+		}
+	}
+}
+
+div#rub_service {
+	float: none;
+	width: 80%;
+	margin-left: 10%;
+}
+
+
+div#rub_service {
+	h2 {
+		text-align: left;
+		font-size: 200%;
+		text-transform: none;
+	}
+	form div.buttons {
+		display: -ms-flexbox;
+		display: flex;
+		-ms-justify-content: space-between;
+		justify-content: space-between;
+		button {
+			margin-right: 0;
+		}
+		.submit-button {
+			-ms-order: 2;
+			order: 2;
+		}
+		.cancel-button button {
+			background: white;
+			border: 1px solid #ccc;
+			color: #666;
+			box-shadow: none;
+			font-weight: normal;
+		}
+		.savedraft-button {
+			display: none;
+		}
+	}
+	form#wf-actions div.buttons {
+		display: block;
+	}
+
+	div.text-check-before-submit, ul#evolutions, div.gru-content
+	#disclose-dataview, div#receipt-intro {
+		margin-left: 0.5rem;
+	}
+
+	div.section {
+		h2 {
+			font-size: 180%;
+			color: $primary-color;
+		}
+	}
+
+	ul#evolutions span.status {
+		font-weight: normal;
+		text-transform: uppercase;
+	}
+
+	ul#evolutions li {
+		background: url(img/step-g.png) 5px 15px no-repeat;
+		background-size: 50px;
+		span {
+			background: none !important;
+			box-shadow: none;
+			border: none;
+			&::before {
+				content: none;
+			}
+		}
+		&::after {
+			content: none;
+		}
+	}
+}
+
+div.back-home-button {
+	text-align: center;
+	a {
+		text-transform: uppercase;
+		border: 1px solid #ccc;
+		color: #666;
+		padding: 0.5rem 1rem;
+	}
+}
+
+#dashboard-menu {
+	li {
+		background: transparent left center no-repeat;
+		padding-left: 50px;
+		margin-bottom: 4px;
+	}
+	@each $dashboard_item in $dashboard_items {
+		li.menu-#{$dashboard_item} {
+			background-image: url(img/#{$dashboard_item}.png);
+		}
+	}
+}
+
+body.has-picture nav::after {
+	top: 0;
+}
+
+div#rub_service div.dataview, div#rub_service dl#evolutions, div#rub_service form {
+	padding: 1ex 0;
+}
+
+div.dataview span.label {
+	font-weight: normal;
+	color: #666;
+}
diff --git a/static/fontenay-sous-bois-2018/_vars.scss b/static/fontenay-sous-bois-2018/_vars.scss
new file mode 100644
index 00000000..94df4389
--- /dev/null
+++ b/static/fontenay-sous-bois-2018/_vars.scss
@@ -0,0 +1,29 @@
+$primary-color: #da3838;
+$font-size: 20px;
+$font-family: "Barlow Condensed", sans-serif;
+$link-color: $primary-color;
+
+$width: 1200px;
+$nav-mobile-limit: 50000px;
+$nav-button-background: #343434;
+$nav-mobile-menu-background: #373737;
+$nav-item-hover-background: $primary-color;
+$nav-border-color: transparent;
+
+$cell-border: none;
+$cell-entry-border-color: transparent;
+$cell-entry-hover-background: transparent;
+$cell-title-cover-border: false;
+
+$title-background: transparent;
+$title-transform: uppercase;
+$title-font-size: 28px;
+$title-color: #2f2f2f;
+$title-weight: bold;
+$title-padding: 0.7rem 0rem;
+
+$form-style: light;
+$button-background: $primary-color;
+$button-color: white;
+
+$footer-background: $primary-color;
diff --git a/static/fontenay-sous-bois-2018/img/abonnements.png b/static/fontenay-sous-bois-2018/img/abonnements.png
new file mode 100644
index 00000000..3826c6d3
Binary files /dev/null and b/static/fontenay-sous-bois-2018/img/abonnements.png differ
diff --git a/static/fontenay-sous-bois-2018/img/demandes.png b/static/fontenay-sous-bois-2018/img/demandes.png
new file mode 100644
index 00000000..85ac46e8
Binary files /dev/null and b/static/fontenay-sous-bois-2018/img/demandes.png differ
diff --git a/static/fontenay-sous-bois-2018/img/famille.png b/static/fontenay-sous-bois-2018/img/famille.png
new file mode 100644
index 00000000..c8f8a6d7
Binary files /dev/null and b/static/fontenay-sous-bois-2018/img/famille.png differ
diff --git a/static/fontenay-sous-bois-2018/img/logo-fontenay.png b/static/fontenay-sous-bois-2018/img/logo-fontenay.png
new file mode 100644
index 00000000..6e15a6ae
Binary files /dev/null and b/static/fontenay-sous-bois-2018/img/logo-fontenay.png differ
diff --git a/static/fontenay-sous-bois-2018/img/paiements.png b/static/fontenay-sous-bois-2018/img/paiements.png
new file mode 100644
index 00000000..c9616c51
Binary files /dev/null and b/static/fontenay-sous-bois-2018/img/paiements.png differ
diff --git a/static/fontenay-sous-bois-2018/img/porte-doc.png b/static/fontenay-sous-bois-2018/img/porte-doc.png
new file mode 100644
index 00000000..0b61acd6
Binary files /dev/null and b/static/fontenay-sous-bois-2018/img/porte-doc.png differ
diff --git a/static/fontenay-sous-bois-2018/img/profil.png b/static/fontenay-sous-bois-2018/img/profil.png
new file mode 100644
index 00000000..02fe56e5
Binary files /dev/null and b/static/fontenay-sous-bois-2018/img/profil.png differ
diff --git a/static/fontenay-sous-bois-2018/img/step-g.png b/static/fontenay-sous-bois-2018/img/step-g.png
new file mode 100644
index 00000000..87d96571
Binary files /dev/null and b/static/fontenay-sous-bois-2018/img/step-g.png differ
diff --git a/static/fontenay-sous-bois-2018/img/step-r.png b/static/fontenay-sous-bois-2018/img/step-r.png
new file mode 100644
index 00000000..ac841c96
Binary files /dev/null and b/static/fontenay-sous-bois-2018/img/step-r.png differ
diff --git a/static/fontenay-sous-bois-2018/img/trackingcode.png b/static/fontenay-sous-bois-2018/img/trackingcode.png
new file mode 100644
index 00000000..14e98b20
Binary files /dev/null and b/static/fontenay-sous-bois-2018/img/trackingcode.png differ
diff --git a/static/fontenay-sous-bois-2018/style.scss b/static/fontenay-sous-bois-2018/style.scss
new file mode 100644
index 00000000..1fd447de
--- /dev/null
+++ b/static/fontenay-sous-bois-2018/style.scss
@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';
diff --git a/templates/variants/fontenay-sous-bois-2018/combo/wcs/forms_of_category.html b/templates/variants/fontenay-sous-bois-2018/combo/wcs/forms_of_category.html
new file mode 100644
index 00000000..efeb3928
--- /dev/null
+++ b/templates/variants/fontenay-sous-bois-2018/combo/wcs/forms_of_category.html
@@ -0,0 +1,39 @@
+{% load assets i18n static %}
+{% block cell-content %}
+<div class="wcs-forms-of-category-{{slug}}">
+<picture>
+<img src="{% asset_url "wcs:category:picture:eservices:"|add:slug %}" alt="">
+</picture>
+<h2 style="background-image: url({% asset_url "wcs:category:logo:eservices:"|add:slug size="65x65" %})"><span>{{ title }}</span></h2>
+{% if description %}
+<div class="intro">
+{{ description|safe }}
+</div>
+{% endif %}
+<ul>
+{% for form in forms %}
+<li class="{% if form.authentication_required %}required-authentication{% endif %}
+           {% for context in form.required_authentication_contexts %}required-{{context}}-authentication {% endfor %}
+           {% for keyword in form.keywords %}keyword-{{keyword|slugify}}{% endfor %}
+           {% if form.redirection %}is-redirection{% endif %}"
+  ><a href="{{ form.url }}tryauth">{{ form.title }}</a>
+  {% if form.description %}<div class="description">{{ form.description|safe }}</div>{% endif %}
+  </li>
+{% endfor %}
+
+{% if more_forms %}
+<li class="more-items"><a>+</a></li>
+{% for form in more_forms %}
+<li style="display: none" class="additional-form {% if form.authentication_required %}required-authentication{% endif %}
+           {% for context in form.required_authentication_contexts %}required-{{context}}-authentication {% endfor %}
+           {% for keyword in form.keywords %}keyword-{{keyword|slugify}}{% endfor %}
+           {% if form.redirection %}is-redirection{% endif %}"
+  ><a href="{{ form.url }}tryauth">{{ form.title }}</a>
+  {% if form.description %}<div class="description">{{ form.description|safe }}</div>{% endif %}
+  </li>
+{% endfor %}
+{% endif %}
+
+</ul>
+</div>
+{% endblock %}
diff --git a/templates/variants/fontenay-sous-bois-2018/theme.html b/templates/variants/fontenay-sous-bois-2018/theme.html
new file mode 100644
index 00000000..14a0ce7b
--- /dev/null
+++ b/templates/variants/fontenay-sous-bois-2018/theme.html
@@ -0,0 +1,8 @@
+{% extends "../../theme.html" %}
+{% load static %}
+
+{% block header-pre %}
+<div id="header-pre"><div>
+<a id="logo-ville" href="{{portal_url}}"><img width="369" height="78" src="{{ site_base }}{% static 'fontenay-sous-bois-2018/img/logo-fontenay.png' %}" alt="fontenay-sous-bois.fr"/></a>
+</div></div>
+{% endblock %}
diff --git a/themes.json b/themes.json
index 24ca4fcd..c01f6aab 100644
--- a/themes.json
+++ b/themes.json
@@ -188,6 +188,14 @@
      "theme_color": "#5ba1e1"
    }
   },
+  {"id": "fontenay-sous-bois-2018",
+   "label": "Fontenay-sous-Bois 2018",
+   "variables": {
+     "css_variant": "fontenay-sous-bois-2018",
+     "no_extra_js": true,
+     "theme_color": "#da3838"
+   }
+  },
   {"id": "greville-hague",
    "label": "Gréville-Hague",
    "variables": {