diff --git a/ivatar/ivataraccount/models.py b/ivatar/ivataraccount/models.py
index 910e5c3..6a06fb2 100644
--- a/ivatar/ivataraccount/models.py
+++ b/ivatar/ivataraccount/models.py
@@ -63,7 +63,7 @@ class UserPreference(models.Model):
     '''
     THEMES = (
         ('default', 'Default theme'),
-        # ('clime', 'climes theme'), # Not yet available
+        ('clime', 'climes theme'),
         ('falko', 'falkos theme'),
     )
 
diff --git a/ivatar/static/css/clime.css b/ivatar/static/css/clime.css
new file mode 100644
index 0000000..6352e96
--- /dev/null
+++ b/ivatar/static/css/clime.css
@@ -0,0 +1,131 @@
+body {
+  background-image: url("../img/pattern.jpg");
+  margin: 0;
+}
+
+h1, h2, h3 {
+  font-weight: bold;
+}
+
+h1 {
+  color: #8c8c11;
+}
+
+#contribute-button a {
+  background-color: #938411;
+}
+
+#outer {
+  background-color: #AB9F58;
+}
+
+#account a {
+  color: white;
+}
+
+#site-name {
+  color: #fff;
+}
+
+#site-branding {
+  color: #fff;
+  margin-right: 20%;
+}
+
+.error, .errorlist li {
+  border-radius: 0px;
+}
+
+#page {
+  background-color: #7e3700cc;
+  padding: 10px 18px;
+  margin: 12px;
+}
+
+#header, #footer {
+  color: #fff;
+}
+
+a {
+  color: #F9711F;
+  font-weight: bold;
+}
+
+#header {
+  padding: 5px;
+  margin-bottom: 10px;
+}
+
+#footer {
+  font-size: small;
+  padding: 5px;
+  min-height: 40px;
+  margin-top: 30px;
+  position: relative;
+}
+
+#account {
+  float: right;
+  font-size: 18px;
+  font-weight: bold;
+  padding: 2px;
+  margin-bottom: 10px;
+}
+
+#content {
+  background-color: #fff;
+  padding: 25px;
+  border-radius: 0px;
+  clear: both;
+}
+
+#content a {
+  color: #938411;
+}
+
+ul li {
+  list-style-type: none;
+}
+
+.horizontal-list li {
+  display: inline;
+  float: left;
+  margin: 0 15px 15px 0;
+}
+
+.centered li {
+  text-align: center;
+  vertical-align: middle;
+}
+
+.fas, .fab {
+  color: #dbc40d;
+}
+
+.btn {
+  border-radius: 0px;
+}
+
+.navbar {
+    padding: 0px;
+}
+
+.bg-light {
+    background-color: transparent !important;
+}
+
+.nav-link {
+    color: #eee !important;
+}
+
+.nav-link:hover {
+    color: #fff !important;
+}
+
+.form-control {
+    border-radius: 0px;
+}
+
+.dropdown-menu {
+    border-radius: 0px;
+}
diff --git a/ivatar/static/css/ivatar.css b/ivatar/static/css/ivatar.css
index e3d4ff3..7a7de3a 100644
--- a/ivatar/static/css/ivatar.css
+++ b/ivatar/static/css/ivatar.css
@@ -2,7 +2,7 @@
 
 body {
   background-color: #FFE7B9;
-  margin: 0;
+  margin: 10px;
 }
 
 #site-name {
@@ -58,11 +58,6 @@ a {
   font-weight: bold;
 }
 
-#header {
-  height: 90px;
-  padding: 8px 8px 16px 8px;
-}
-
 #footer {
   font-size: small;
   padding: 16px 8px 8px 8px;
diff --git a/ivatar/static/img/pattern.jpg b/ivatar/static/img/pattern.jpg
new file mode 100644
index 0000000..892e0c5
Binary files /dev/null and b/ivatar/static/img/pattern.jpg differ
diff --git a/templates/base.html b/templates/base.html
index a44ba01..3683ba5 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -9,7 +9,8 @@
 {% endblock bootstrap4_extra_head %}
 
 {% spaceless %}{% block bootstrap4_content %}
-<div id="header">
+<div id="page">
+  <div id="header">
   {% block topbar_base %}
       <nav class="navbar navbar-expand-lg navbar-light bg-light">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
@@ -17,20 +18,20 @@
           </button>
           {% block topbar %}
               {% block site_brand %}
-                <div id="logo">
-                  <a class="navbar-brand d-none d-lg-block" href="/">
-                    <img src="{% static 'img/logo.png' %}" width="60" height="60" class="d-inline-block align-top" alt="{% trans 'Home' %}">
-                  </a>
-                </div>
-                <span class="d-none d-lg-block">
-                  <div id="site-branding">
-                    <span id="site-name">
-                      i<span class="bolder">vatar</span>
-                    </span>
-                    <br/>
-                    freeing the web one face at a time
+                  <div id="logo">
+                    <a class="navbar-brand d-none d-lg-block" href="/">
+                      <img src="{% static 'img/logo.png' %}" width="60" height="60" class="d-inline-block align-top" alt="{% trans 'Home' %}">
+                    </a>
                   </div>
-                </span>
+                  <span class="d-none d-lg-block">
+                    <div id="site-branding">
+                      <span id="site-name">
+                        i<span class="bolder">vatar</span>
+                      </span>
+                      <br/>
+                      freeing the web one face at a time
+                    </div>
+                  </span>
               {% endblock %}
               {% block nav %}
                 <div class="collapse navbar-collapse" id="navbarNavDropdown">
@@ -67,15 +68,18 @@
           {% endblock %}
       </nav>
   {% endblock %}
-{% autoescape off %}{% bootstrap_messages %}{% endautoescape %}
-
-<div id="outer">
-  <div id="content">
-    {% block content %}{% endblock content %}
   </div>
-</div>
 
-{% block footer %}{% include 'footer.html' %}{% endblock footer %}
+  {% autoescape off %}{% bootstrap_messages %}{% endautoescape %}
+
+  <div id="outer">
+    <div id="content">
+      {% block content %}{% endblock content %}
+    </div>
+  </div>
+
+  {% block footer %}{% include 'footer.html' %}{% endblock footer %}
+</div>
 
 {% endblock %}{% endspaceless %}