diff --git a/.gitignore b/.gitignore
index 666371a..287988c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,5 @@
 db.sqlite3
-
+.sass-cache/
 
 ##############################################
 # GitHub default .gitignore for Python below #
diff --git a/mainsite/static/config.rb b/mainsite/static/config.rb
new file mode 100644
index 0000000..826a372
--- /dev/null
+++ b/mainsite/static/config.rb
@@ -0,0 +1,25 @@
+require 'compass/import-once/activate'
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
diff --git a/mainsite/static/css/plain-site.css b/mainsite/static/css/plain-site.css
deleted file mode 100644
index dd9295a..0000000
--- a/mainsite/static/css/plain-site.css
+++ /dev/null
@@ -1,33 +0,0 @@
-body {
-    background-color: #eba367;
-    margin-top: 50px;
-}
-
-@media (min-height: 480px) {
-    body {
-        margin-top: 150px;
-    }
-}
-
-#main {
-    text-align: center;
-}
-
-.login-btn {
-    padding: 20px;
-    border-radius: 15px;
-    background-color: white;
-    border: 3px solid #9c0635;
-    color: black;
-    font-size: 24px;
-    width: 200px;
-    height: 100px;
-    margin: 30px;
-}
-
-#content-area {
-    background-color: white;
-    width: 500px;
-    padding: 50px;
-    margin: auto;
-}
diff --git a/mainsite/static/css/screen.css b/mainsite/static/css/screen.css
new file mode 100644
index 0000000..265f494
--- /dev/null
+++ b/mainsite/static/css/screen.css
@@ -0,0 +1,210 @@
+/* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
+@import url("https://fonts.googleapis.com/css?family=Bitter:400,700|Source+Sans+Pro:400,700");
+/* line 5, ../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+
+/* line 22, ../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+html {
+  line-height: 1;
+}
+
+/* line 24, ../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+ol, ul {
+  list-style: none;
+}
+
+/* line 26, ../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* line 28, ../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle;
+}
+
+/* line 30, ../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+q, blockquote {
+  quotes: none;
+}
+/* line 103, ../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+q:before, q:after, blockquote:before, blockquote:after {
+  content: "";
+  content: none;
+}
+
+/* line 32, ../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+a img {
+  border: none;
+}
+
+/* line 116, ../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
+  display: block;
+}
+
+/* line 11, ../sass/screen.scss */
+*, *:after, *:before {
+  box-sizing: border-box;
+}
+
+/* line 15, ../sass/screen.scss */
+body, html {
+  background: #660022;
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  font-family: "Source Sans Pro", sans-serif;
+  font-size: 18px;
+  line-height: 1.45;
+}
+
+/* line 26, ../sass/screen.scss */
+body.plain #main {
+  max-width: 500px;
+  position: absolute;
+  text-align: center;
+  top: 50%;
+  left: 50%;
+  transform: translateY(-50%) translateX(-50%);
+  background: #fff7cc;
+  padding: 25px;
+}
+
+/* line 38, ../sass/screen.scss */
+h1, h2, h3, h4 {
+  font-family: "Bitter", serif;
+}
+
+/* line 42, ../sass/screen.scss */
+h2 {
+  font-size: 1.8em;
+  text-align: center;
+}
+
+/* line 47, ../sass/screen.scss */
+strong, b {
+  font-weight: bold;
+}
+
+/* line 51, ../sass/screen.scss */
+i, em {
+  font-style: italic;
+}
+
+/* line 55, ../sass/screen.scss */
+a {
+  color: #990033;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+/* line 61, ../sass/screen.scss */
+.container, header {
+  background: #fff;
+  margin: 0 auto;
+  max-width: 800px;
+}
+
+/* line 67, ../sass/screen.scss */
+header {
+  text-align: center;
+  border-bottom: 2px solid #000;
+  position: relative;
+  padding-bottom: 40px;
+}
+/* line 73, ../sass/screen.scss */
+header:after {
+  content: " ";
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+  left: 0;
+  bottom: 25px;
+  border-bottom: 2px solid #000;
+}
+
+/* line 84, ../sass/screen.scss */
+.container {
+  display: table;
+  display: flex;
+  padding: 15px;
+  width: 100%;
+}
+
+/* line 91, ../sass/screen.scss */
+.sidebar {
+  width: 210px;
+}
+/* line 94, ../sass/screen.scss */
+.sidebar ul.nav li {
+  display: block;
+  font-weight: normal;
+  margin: 5px 0;
+}
+/* line 98, ../sass/screen.scss */
+.sidebar ul.nav li a {
+  background: #fff7cc;
+  padding: 10px 0;
+  display: block;
+  text-align: center;
+  background: linear-gradient(to bottom, rgba(255, 247, 204, 0) 60%, #fff7cc 60%) no-repeat;
+}
+
+/* line 109, ../sass/screen.scss */
+.main {
+  flex-grow: 1;
+  padding: 20px;
+  width: 100%;
+}
+/* line 114, ../sass/screen.scss */
+.main .last-publication {
+  display: block;
+  max-width: 300px;
+  margin: 15px auto;
+  text-align: center;
+  font-size: 1.5em;
+  background: #ffe766;
+  padding: 30px;
+}
+
+/* line 125, ../sass/screen.scss */
+.publication-list {
+  margin: 10px 5px;
+  margin-left: 30px;
+}
+/* line 128, ../sass/screen.scss */
+.publication-list td {
+  padding: 3px 5px;
+}
+/* line 131, ../sass/screen.scss */
+.publication-list .publication-date {
+  text-align: right;
+  font-weight: light;
+  font-size: 0.8em;
+}
diff --git a/mainsite/static/css/site-base.css b/mainsite/static/css/site-base.css
index 06ebd02..1551d83 100644
--- a/mainsite/static/css/site-base.css
+++ b/mainsite/static/css/site-base.css
@@ -1,11 +1,12 @@
+/* line 1, ../sass/site-base.scss */
 html, body, .full-height {
-    height: 100%;
+  height: 100%;
 }
 
 /*
  * Global add-ons
  */
-
+/* line 9, ../sass/site-base.scss */
 .sub-header {
   padding-bottom: 10px;
 }
@@ -14,49 +15,64 @@ html, body, .full-height {
  * Top navigation
  * Hide default border to remove 1px line.
  */
+/* line 17, ../sass/site-base.scss */
 .navbar-fixed-top {
   border: 0;
 }
 
+/* line 21, ../sass/site-base.scss */
 .navbar {
   background-color: #eba367;
 }
 
+/* line 25, ../sass/site-base.scss */
 .navbar-brand {
-    padding: 20px;
+  padding: 20px;
 }
 
 @media (max-width: 225px) {
-    body {
-        padding-top: 50px;
-    }
-    .navbar-brand {
-        height: 50px;
-    }
+  /* line 30, ../sass/site-base.scss */
+  body {
+    padding-top: 50px;
+  }
+
+  /* line 33, ../sass/site-base.scss */
+  .navbar-brand {
+    height: 50px;
+  }
 }
 @media (max-width: 355px) {
-    body {
-        padding-top: 75px;
-    }
-    .navbar-brand {
-        height: 75px;
-    }
+  /* line 38, ../sass/site-base.scss */
+  body {
+    padding-top: 75px;
+  }
+
+  /* line 41, ../sass/site-base.scss */
+  .navbar-brand {
+    height: 75px;
+  }
 }
 @media (max-width: 475px) {
-    body {
-        padding-top: 93px;
-    }
-    .navbar-brand {
-        height: 93px;
-    }
+  /* line 46, ../sass/site-base.scss */
+  body {
+    padding-top: 93px;
+  }
+
+  /* line 49, ../sass/site-base.scss */
+  .navbar-brand {
+    height: 93px;
+  }
 }
 @media (min-width: 475px) {
-    body {
-        padding-top: 125px;
-    }
-    .navbar-brand {
-        height: 125px;
-    }
+  /* line 54, ../sass/site-base.scss */
+  body {
+    padding-top: 125px;
+  }
+
+  /* line 57, ../sass/site-base.scss */
+  .navbar-brand {
+    height: 125px;
+  }
 }
 /*
 body {
@@ -68,22 +84,26 @@ body {
     padding: 20px;
 }
 */
-
-.navbar >li >a {
-    padding-top: 30px;
-    padding-bottom: 20px;
+/* line 72, ../sass/site-base.scss */
+.navbar > li > a {
+  padding-top: 30px;
+  padding-bottom: 20px;
 }
 
+/* line 77, ../sass/site-base.scss */
 .navbar-toggle {
-    padding: 10px;
-    margin: 25px 15px 25px 0;
+  padding: 10px;
+  margin: 25px 15px 25px 0;
 }
 
 /* Hide for mobile, show later */
+/* line 83, ../sass/site-base.scss */
 .sidebar {
   display: none;
 }
+
 @media (min-width: 768px) {
+  /* line 87, ../sass/site-base.scss */
   .sidebar {
     position: fixed;
     top: 125px;
@@ -93,18 +113,21 @@ body {
     display: block;
     padding: 20px;
     overflow-x: hidden;
-    overflow-y: visible; /* Scrollable contents if viewport is shorter than content. */
+    overflow-y: visible;
+    /* Scrollable contents if viewport is shorter than content. */
     background-color: #eba367;
   }
 }
-
 /* Sidebar navigation */
+/* line 102, ../sass/site-base.scss */
 .nav-sidebar {
   font-size: 1.2em;
   margin-right: -20px;
   margin-bottom: 20px;
   margin-left: -20px;
 }
+
+/* line 108, ../sass/site-base.scss */
 .nav-sidebar > li > a {
   padding-right: 20px;
   padding-left: 20px;
@@ -115,6 +138,8 @@ body {
   border-bottom-right-radius: 8px;
   margin-right: 5px;
 }
+
+/* line 118, ../sass/site-base.scss */
 .nav-sidebar > .active > a,
 .nav-sidebar > .active > a:hover,
 .nav-sidebar > .active > a:focus {
@@ -122,57 +147,68 @@ body {
   /*background-color: #AD2624; */
 }
 
+/* line 125, ../sass/site-base.scss */
 .nav > li > a:hover {
   color: #eba367;
   background-color: #AD2624;
 }
+
 /*
  * Main content
  */
-
+/* line 133, ../sass/site-base.scss */
 .main-row {
   background-color: #eba367;
 }
 
+/* line 137, ../sass/site-base.scss */
 .main {
   padding: 40px;
   background-color: white;
 }
 
 @media (min-width: 768px) {
+  /* line 143, ../sass/site-base.scss */
   .main {
     border-top-left-radius: 50px;
     padding-left: 60px;
     padding-right: 40px;
   }
 }
+/* line 149, ../sass/site-base.scss */
 .main .page-header {
   margin-top: 0;
 }
 
+/* line 153, ../sass/site-base.scss */
 .page-title {
   text-align: center;
   margin-bottom: 20px;
 }
 
+/* line 158, ../sass/site-base.scss */
 .intro-text {
   margin-bottom: 20px;
 }
 
+/* line 162, ../sass/site-base.scss */
 .publication-list {
   margin-left: 20px;
 }
 
-.publication-entry>td {
+/* line 166, ../sass/site-base.scss */
+.publication-entry > td {
   padding-bottom: 7px;
 }
 
+/* line 170, ../sass/site-base.scss */
 .publication-date {
   padding-right: 20px;
   color: #505050;
   font-style: italic;
 }
 
+/* line 176, ../sass/site-base.scss */
 .last-publication {
   font-size: 2em;
   text-align: center;
diff --git a/mainsite/static/sass/_colors.scss b/mainsite/static/sass/_colors.scss
new file mode 100644
index 0000000..4b71d60
--- /dev/null
+++ b/mainsite/static/sass/_colors.scss
@@ -0,0 +1,4 @@
+$fond: #990033;
+$cadreclair: #fff7cc;
+$eau: #38669a;
+$orange: #f08f00;
diff --git a/mainsite/static/sass/_colors.scss~ b/mainsite/static/sass/_colors.scss~
new file mode 100644
index 0000000..e69de29
diff --git a/mainsite/static/sass/screen.scss b/mainsite/static/sass/screen.scss
new file mode 100644
index 0000000..5e7c3e4
--- /dev/null
+++ b/mainsite/static/sass/screen.scss
@@ -0,0 +1,136 @@
+/* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
+
+@import "compass/reset";
+@import "_colors.scss";
+
+@import url('https://fonts.googleapis.com/css?family=Bitter:400,700|Source+Sans+Pro:400,700');
+
+*, *:after, *:before {
+    box-sizing: border-box;
+}
+
+body, html {
+    background: darken($fond, 10%);
+    padding: 0;
+    margin: 0;
+    height: 100%;
+    font-family: "Source Sans Pro", sans-serif;
+    font-size: 18px;
+    line-height: 1.45;
+}
+
+body.plain {
+    #main {
+        max-width: 500px;
+        position: absolute;
+        text-align: center;
+        top: 50%;
+        left: 50%;
+        transform:translateY(-50%) translateX(-50%);
+        background: $cadreclair;
+        padding: 25px;
+    }
+}
+
+h1, h2, h3, h4 {
+    font-family: "Bitter", serif;
+}
+
+h2 {
+    font-size: 1.8em;
+    text-align: center;
+}
+
+strong, b {
+    font-weight: bold;
+}
+
+i, em {
+    font-style: italic;
+}
+
+a {
+    color: $fond;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+.container, header {
+    background: #fff;
+    margin: 0 auto;
+    max-width: 800px;
+}
+
+header {
+    text-align: center;
+    border-bottom: 2px solid #000;
+    position: relative;
+    padding-bottom: 40px;
+    
+    &:after {
+        content: " ";
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+        left: 0;
+        bottom: 25px;
+        border-bottom: 2px solid #000;
+    }
+}
+
+.container {
+    display: table;
+    display: flex;
+    padding: 15px;
+    width: 100%;
+}
+
+.sidebar {
+    width: 210px;
+
+    ul.nav li {
+        display: block;
+        font-weight: normal;
+        margin: 5px 0;
+        a {
+            background: $cadreclair;
+            padding: 10px 0;
+            display: block;
+            text-align: center;
+            background: linear-gradient(to bottom, rgba($cadreclair, 0) 60%, $cadreclair 60%) no-repeat
+        }
+    }
+}
+
+
+.main {
+    flex-grow: 1;
+    padding: 20px;
+    width: 100%;
+
+    .last-publication {
+        display: block;
+        max-width: 300px;
+        margin: 15px auto;
+        text-align: center;
+        font-size: 1.5em;
+        background: darken($cadreclair, 20%);
+        padding: 30px;
+    }
+}
+
+.publication-list {
+    margin: 10px 5px;
+    margin-left: 30px;
+    td {
+        padding: 3px 5px;
+    }
+    .publication-date {
+        text-align: right;
+        font-weight: light;
+        font-size: 0.8em;
+    }
+}
diff --git a/mainsite/static/sass/screen.scss~ b/mainsite/static/sass/screen.scss~
new file mode 100644
index 0000000..523c975
--- /dev/null
+++ b/mainsite/static/sass/screen.scss~
@@ -0,0 +1,25 @@
+/* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
+
+@import "compass/reset";
+@import "_colors.scss";
+
+body, html {
+    background: $fond;
+    padding: 0;
+    margin: 0;
+}
+
+.container {
+    background: #fff;
+    margin: 0 auto;
+    max-width: 700px;
+}
+
+
+header {
+    background: #fff;
+    
+}
diff --git a/mainsite/static/sass/site-base.scss b/mainsite/static/sass/site-base.scss
new file mode 100644
index 0000000..06ebd02
--- /dev/null
+++ b/mainsite/static/sass/site-base.scss
@@ -0,0 +1,181 @@
+html, body, .full-height {
+    height: 100%;
+}
+
+/*
+ * Global add-ons
+ */
+
+.sub-header {
+  padding-bottom: 10px;
+}
+
+/*
+ * Top navigation
+ * Hide default border to remove 1px line.
+ */
+.navbar-fixed-top {
+  border: 0;
+}
+
+.navbar {
+  background-color: #eba367;
+}
+
+.navbar-brand {
+    padding: 20px;
+}
+
+@media (max-width: 225px) {
+    body {
+        padding-top: 50px;
+    }
+    .navbar-brand {
+        height: 50px;
+    }
+}
+@media (max-width: 355px) {
+    body {
+        padding-top: 75px;
+    }
+    .navbar-brand {
+        height: 75px;
+    }
+}
+@media (max-width: 475px) {
+    body {
+        padding-top: 93px;
+    }
+    .navbar-brand {
+        height: 93px;
+    }
+}
+@media (min-width: 475px) {
+    body {
+        padding-top: 125px;
+    }
+    .navbar-brand {
+        height: 125px;
+    }
+}
+/*
+body {
+  padding-top: 125px;
+}
+
+.navbar-brand {
+    height: 125px;
+    padding: 20px;
+}
+*/
+
+.navbar >li >a {
+    padding-top: 30px;
+    padding-bottom: 20px;
+}
+
+.navbar-toggle {
+    padding: 10px;
+    margin: 25px 15px 25px 0;
+}
+
+/* Hide for mobile, show later */
+.sidebar {
+  display: none;
+}
+@media (min-width: 768px) {
+  .sidebar {
+    position: fixed;
+    top: 125px;
+    bottom: 0;
+    left: 0;
+    z-index: 1000;
+    display: block;
+    padding: 20px;
+    overflow-x: hidden;
+    overflow-y: visible; /* Scrollable contents if viewport is shorter than content. */
+    background-color: #eba367;
+  }
+}
+
+/* Sidebar navigation */
+.nav-sidebar {
+  font-size: 1.2em;
+  margin-right: -20px;
+  margin-bottom: 20px;
+  margin-left: -20px;
+}
+.nav-sidebar > li > a {
+  padding-right: 20px;
+  padding-left: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  color: #9c0635;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  margin-right: 5px;
+}
+.nav-sidebar > .active > a,
+.nav-sidebar > .active > a:hover,
+.nav-sidebar > .active > a:focus {
+  color: #FDF6E3;
+  /*background-color: #AD2624; */
+}
+
+.nav > li > a:hover {
+  color: #eba367;
+  background-color: #AD2624;
+}
+/*
+ * Main content
+ */
+
+.main-row {
+  background-color: #eba367;
+}
+
+.main {
+  padding: 40px;
+  background-color: white;
+}
+
+@media (min-width: 768px) {
+  .main {
+    border-top-left-radius: 50px;
+    padding-left: 60px;
+    padding-right: 40px;
+  }
+}
+.main .page-header {
+  margin-top: 0;
+}
+
+.page-title {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.intro-text {
+  margin-bottom: 20px;
+}
+
+.publication-list {
+  margin-left: 20px;
+}
+
+.publication-entry>td {
+  padding-bottom: 7px;
+}
+
+.publication-date {
+  padding-right: 20px;
+  color: #505050;
+  font-style: italic;
+}
+
+.last-publication {
+  font-size: 2em;
+  text-align: center;
+  padding: 30px;
+  font-weight: bold;
+}
diff --git a/mainsite/templates/base.html b/mainsite/templates/base.html
index 4840437..2ab0a7d 100644
--- a/mainsite/templates/base.html
+++ b/mainsite/templates/base.html
@@ -1,3 +1,5 @@
+{% load staticfiles %}
+
 <!DOCTYPE html>
 <html lang="fr">
   <head>
@@ -6,33 +8,23 @@
     <meta name="keywords" lang="fr" content="COF,BOcal,ENS,AEENS">
     <title>Le BOcal</title>
 
-    <link rel="stylesheet"
-          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
-          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
-          crossorigin="anonymous">
-		<link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
-    <link rel="stylesheet" href="/static/css/site-base.css">
+	<link rel="stylesheet" href="{% static "font-awesome/css/font-awesome.min.css" %}">
+    <link rel="stylesheet" href="{% static "css/screen.css" %}">
   </head>
 
   <body>
-    {% include "navbar.html" %}
-    <div class="container-fluid full-height">
-      <div class="row main-row full-height">
-        {% include "sidebar.html" %}
+      <header>
+          {% include "navbar.html" %}
+      </header>
+      
+      <div class="container">
+          {% include "sidebar.html" %}
 
-
-        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 full-height main">
-          {% block content %}
-          {% endblock content %}
-        </div>
+          <div class="main">
+              {% block content %}
+              {% endblock content %}
+          </div>
       </div>
-    </div> <!-- END MAIN DIV -->
-
-    <!-- BOOTSTRAP: to update, visit
-      https://getbootstrap.com/docs/4.0/getting-started/introduction/
-    -->
-		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
-		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+    
   </body>
 </html>
diff --git a/mainsite/templates/navbar.html b/mainsite/templates/navbar.html
index 57eb5d0..036ba64 100644
--- a/mainsite/templates/navbar.html
+++ b/mainsite/templates/navbar.html
@@ -1,37 +1,17 @@
-<nav class="navbar navbar-inverse navbar-fixed-top">
-  <div class="container-fluid">
+{% load staticfiles %}
+<nav class="navbar">
     <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar" aria-expanded="false" aria-controls="sidebar">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-      <a class="navbar-brand" href="/">
-        <img src="/static/img/logo.png"
-             srcset="/static/img/logo.100w.png 100w,
-                     /static/img/logo.175w.png 175w,
-                     /static/img/logo.250w.png 250w,
-                     /static/img/logo.369w.png 369w"
-             sizes="(max-width: 225px) 100px,
-                    (max-width: 355px) 175px,
-                    (max-width: 475px) 250px,
-                    370px"
-             alt="Le BOcal" />
-      </a>
+        <a class="navbar-brand" href="{% url "homepage" %}">
+            <img src="{% static "img/logo.png" %}"
+                 srcset="{% static "img/logo.100w.png" %} 100w,
+                         {% static "img/logo.175w.png" %} 175w,
+                         {% static "img/logo.250w.png" %} 250w,
+                         {% static "img/logo.369w.png" %} 369w"
+                 sizes="(max-width: 225px) 100px,
+                        (max-width: 355px) 175px,
+                        (max-width: 475px) 250px,
+                        370px"
+                 alt="Le BOcal" />
+        </a>
     </div>
-    <!--
-    <div id="navbar" class="navbar-collapse collapse">
-      <ul class="nav navbar-nav navbar-right">
-        <li><a href="#">Dashboard</a></li>
-        <li><a href="#">Settings</a></li>
-        <li><a href="#">Profile</a></li>
-        <li><a href="#">Help</a></li>
-      </ul>
-      <form class="navbar-form navbar-right">
-        <input type="text" class="form-control" placeholder="Search...">
-      </form>
-    </div>
-    -->
-  </div>
 </nav>
diff --git a/mainsite/templates/plain_base.html b/mainsite/templates/plain_base.html
index 735971b..7efd6a7 100644
--- a/mainsite/templates/plain_base.html
+++ b/mainsite/templates/plain_base.html
@@ -1,3 +1,5 @@
+{% load staticfiles %}
+
 <!DOCTYPE html>
 <html lang="fr">
   <head>
@@ -6,9 +8,9 @@
     <meta name="keywords" lang="fr" content="COF,BOcal,ENS,AEENS">
     <title>Le BOcal</title>
 
-    <link rel="stylesheet" href="/static/css/plain-site.css">
+    <link rel="stylesheet" href="{% static "css/screen.css" %}">
   </head>
-  <body>
+  <body class="plain">
     <div id="main">
       {% block content %}
       {% endblock content %}