diff --git a/custom_overlay.css b/custom_overlay.css
new file mode 100644
index 0000000..0074f3e
--- /dev/null
+++ b/custom_overlay.css
@@ -0,0 +1,14 @@
+/*
+===============================================================================
+ This file may contain extra CSS rules loaded on all apps page (*if* the app
+ nginx's conf does include the appropriate snippet) for the small YunoHost
+ button in bottom-right corner + portal overlay.
+
+ The yunohost button corresponds to : #ynh-overlay-switch
+ The yunohost portal overlay / iframe corresponds to : #ynh-overlay
+
+ BE CAREFUL that you should *not* add too-general rules that apply to
+ non-yunohost elements (for instance all 'a' or 'p' elements...) as it will
+ likely break app's rendering
+===============================================================================
+*/
diff --git a/custom_portal.css b/custom_portal.css
new file mode 100644
index 0000000..101dfd0
--- /dev/null
+++ b/custom_portal.css
@@ -0,0 +1,229 @@
+/*
+===============================================================================
+ This file contain extra CSS rules to customize the YunoHost user portal and
+ can be used to customize app tiles, buttons, etc...
+===============================================================================
+*/
+
+.ynh-user-portal {
+	background: #141709;
+	display: flex;
+	flex-flow: column nowrap;
+	justify-content: center;
+	align-items: center;
+}
+
+.content { 
+	padding: 0%;
+	width: 21em;
+}
+
+.logged .content {
+	display: flex;
+	flex-flow: row wrap;
+	align-items: start;
+	justify-content: center;
+}
+
+.user {
+	background: url("./forest.png");
+	background-repeat: no-repeat;
+	padding-top: 175px;
+	width: 412px;
+	flex: 0 1 auto;
+	display: flex;
+	flex-flow: column-reverse nowrap;
+	margin: 2%;
+	margin-left: 4%;
+}
+
+.user-menu, .user-container {
+	background-color: #525c2e;
+	max-width: 21em;
+	margin-left: 38px;
+}
+
+.apps {
+	width: 50%;
+	flex: 1 1 auto;
+	margin: 4%;
+}
+
+.footer { flex: 1 1 auto; margin: 4%; }
+
+/* Select only non-logged in view */
+:not(.logged) > .ynh-logo{
+    background-image: url("./forest.png");
+    width: 412px;
+    height: 175px;
+    opacity: 1;
+    flex: 0 0 auto;
+    margin-top: 0;
+}
+
+.ynh-wrapper.login { margin: 0; width: 100%;}
+
+.login-form .form-group { 
+	margin:0; 
+	border: 0.4em solid #525c2e;
+	border-top: none;
+}
+.login-form .btn { margin-top: 0.4em; }
+
+.classic-btn { background: #525c2e; }
+.classic-btn:hover { background: #708a00; }
+
+.messages { margin: 0 auto; width: 100%; }
+.messages.info { background: #525c2e;}
+
+/*
+.login-form {
+    max-width: 21em;
+    margin: 0;
+    display: flex;
+    flex-flow: column wrap;
+    align-items: stretch;
+}
+.login-form label::before { background: #f0f1f5; }
+
+.content { padding: 1em; }
+*/
+
+.bluebg {
+    background: #3498DB!important;
+}
+.bluebg:hover:after,
+.bluebg:focus:after,
+.bluebg:hover:before,
+.bluebg:focus:before {
+    background: #16527A!important;
+}
+
+.purplebg {
+    background: #9B59B6!important;
+}
+.purplebg:hover:after,
+.purplebg:focus:after,
+.purplebg:hover:before,
+.purplebg:focus:before {
+    background: #532C64!important;
+}
+
+.redbg {
+    background: #E74C3C!important;
+}
+.redbg:hover:after,
+.redbg:focus:after,
+.redbg:hover:before,
+.redbg:focus:before {
+    background: #921E12!important;
+}
+
+.orangebg {
+    background: #F39C12!important;
+}
+.orangebg:hover:after,
+.orangebg:focus:after,
+.orangebg:hover:before,
+.orangebg:focus:before {
+    background: #7F5006!important;
+}
+
+.greenbg {
+    background: #2ECC71!important;
+}
+.greenbg:hover:after,
+.greenbg:focus:after,
+.greenbg:hover:before,
+.greenbg:focus:before {
+    background: #176437!important;
+}
+
+.darkbluebg {
+    background: #34495E!important;
+}
+.darkbluebg:hover:after,
+.darkbluebg:focus:after,
+.darkbluebg:hover:before,
+.darkbluebg:focus:before {
+    background: #07090C!important;
+}
+
+.lightbluebg {
+    background: #6A93D4!important;
+}
+.lightbluebg:hover:after,
+.lightbluebg:focus:after,
+.lightbluebg:hover:before,
+.lightbluebg:focus:before {
+    background: #2B5394!important;
+}
+
+.yellowbg {
+    background: #F1C40F!important;
+}
+.yellowbg:hover:after,
+.yellowbg:focus:after,
+.yellowbg:hover:before,
+.yellowbg:focus:before {
+    background: #796307!important;
+}
+
+
+.lightpinkbg {
+    background: #F76F87!important;
+}
+.lightpinkbg:hover:after,
+.lightpinkbg:focus:after,
+.lightpinkbg:hover:before,
+.lightpinkbg:focus:before {
+    background: #DA0C31!important;
+}
+
+/* Following colors are not used yet */
+.pinkbg {
+    background: #D66D92!important;
+}
+.pinkbg:hover:after,
+.pinkbg:focus:after,
+.pinkbg:hover:before,
+.pinkbg:focus:before {
+    background: #992B52!important;
+}
+
+.turquoisebg {
+    background: #1ABC9C!important;
+}
+.turquoisebg:hover:after,
+.turquoisebg:focus:after,
+.turquoisebg:hover:before,
+.turquoisebg:focus:before {
+    background: #0B4C3F!important;
+}
+.lightyellow {
+    background: #FFC973!important;
+}
+.lightyellow:hover:after,
+.lightyellow:focus:after,
+.lightyellow:hover:before,
+.lightyellow:focus:before {
+    background: #F39500!important;
+}
+.lightgreen {
+    background: #B5F36D!important;
+}
+.lightgreen:hover:after,
+.lightgreen:focus:after,
+.lightgreen:hover:before,
+.lightgreen:focus:before {
+    background: #77CF11!important;
+}
+.purpledarkbg {
+    background: #8E44AD!important;
+}
+.purpledarkbg:hover:after,
+.purpledarkbg:focus:after,
+.purpledarkbg:hover:before,
+.purpledarkbg:focus:before {
+    background: #432051!important;
+}
diff --git a/custom_portal.js b/custom_portal.js
new file mode 100644
index 0000000..7849e7c
--- /dev/null
+++ b/custom_portal.js
@@ -0,0 +1,40 @@
+/*
+===============================================================================
+ This JS file may be used to customize the YunoHost user portal *and* also
+ will be loaded in all app pages if the app nginx's conf does include the
+ appropriate snippet.
+
+ You can monkeypatch init_portal (loading of the user portal) and
+ init_portal_button_and_overlay (loading of the button and overlay...) to do
+ custom stuff
+===============================================================================
+*/
+
+var app_tile_colors = ['redbg','purpledarkbg','darkbluebg','orangebg','greenbg', 'yellowbg','lightpinkbg','pinkbg','turquoisebg','lightbluebg', 'bluebg'];
+
+function set_app_tile_style(el)
+{
+    // Select a color value from the App label
+    randomColorNumber = parseInt(el.textContent, 36) % app_tile_colors.length;
+    // Add color class.
+    el.classList.add(app_tile_colors[randomColorNumber]);
+}
+
+// Monkeypatch init_portal to customize the app tile style
+init_portal_original = init_portal;
+init_portal = function()
+{
+    init_portal_original();
+    Array.each(document.getElementsByClassName("app-tile"), set_app_tile_style);
+}
+
+/*
+ * Monkey patching example to do custom stuff when loading inside an app
+ *
+init_portal_button_and_overlay_original = init_portal_button_and_overlay;
+init_portal_button_and_overlay = function()
+{
+    init_portal_button_and_overlay_original();
+    // Custom stuff to do when loading inside an app
+}
+*/
diff --git a/forest.png b/forest.png
new file mode 100644
index 0000000..a9924e9
Binary files /dev/null and b/forest.png differ