diff --git a/bower.json b/bower.json
index 24436bd..7156e64 100644
--- a/bower.json
+++ b/bower.json
@@ -10,7 +10,7 @@
     "angular-aria": "~1.4.2",
     "restangular": "~1.5.1",
     "angular-ui-router": "~0.2.15",
-    "bootstrap-sass": "~3.3.5",
+    "bootstrap-sass": "~3.3.6",
     "angular-bootstrap": "~0.13.4",
     "malarkey": "yuanqing/malarkey#~1.3.1",
     "angular-toastr": "~1.5.0",
@@ -18,7 +18,8 @@
     "animate.css": "~3.4.0",
     "angular": "~1.4.2",
     "font-awesome": "fontawesome#~4.5.0",
-    "ngstorage": "~0.3.10"
+    "ngstorage": "~0.3.10",
+    "bootswatch": "~3.3.6+1"
   },
   "devDependencies": {
     "angular-mocks": "~1.4.2"
diff --git a/src/app/components/navbar/navbar.html b/src/app/components/navbar/navbar.html
index 9d66e98..baaf2c2 100644
--- a/src/app/components/navbar/navbar.html
+++ b/src/app/components/navbar/navbar.html
@@ -1,12 +1,18 @@
 <nav class="navbar navbar-static-top navbar-inverse">
   <div class="container-fluid">
     <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
+        <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" ng-href="/">
         <span class="noosfero-logo"><img src="assets/images/logo-noosfero.png"></span> Noosfero
       </a>
     </div>
 
-    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6">
+    <div class="collapse navbar-collapse" id="navbar-collapse">
       <ul class="nav navbar-nav">
         <li class="active"><a ng-href="#">Home</a></li>
       </ul>
diff --git a/src/app/components/noosfero-blocks/block.scss b/src/app/components/noosfero-blocks/block.scss
index 562bbab..f6df6ba 100644
--- a/src/app/components/noosfero-blocks/block.scss
+++ b/src/app/components/noosfero-blocks/block.scss
@@ -1,8 +1,7 @@
 .block {
   .panel-title {
-    font-size: 14px;
+    font-size: 15px;
     font-weight: bold;
-    color: rgb(30, 57, 72);
   }
   .panel-heading {
     background-color: transparent;
diff --git a/src/app/index.scss b/src/app/index.scss
index d9f038f..28904ec 100644
--- a/src/app/index.scss
+++ b/src/app/index.scss
@@ -2,12 +2,18 @@
  *  If you want to override some bootstrap variables, you have to change values here.
  *  The list of variables are listed here bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss
  */
-$navbar-inverse-link-color: #5AADBB;
 $icon-font-path: "../../bower_components/bootstrap-sass/assets/fonts/bootstrap/";
 
 $fa-font-path: "../../bower_components/font-awesome/fonts";
 @import "../../bower_components/font-awesome/scss/font-awesome.scss";
 
+$navbar-height: 50px;
+$brand-success: #039BE5;
+$link-color: #007EBB;
+$body-bg: #f5f8fa;
+$page-header-border-color: #eee;
+@import "../../bower_components/bootswatch/flatly/_variables.scss";
+
 /**
  *  Do not remove the comments below. It's the markers used by wiredep to inject
  *  sass dependencies when defined in the bower.json of your dependencies
@@ -35,13 +41,11 @@ $fa-font-path: "../../bower_components/font-awesome/fonts";
   width: 20.83%;
 }
 
-body {
-  background-color: #f5f8fa;
-}
-
 /**
  *  Do not remove the comments below. It's the markers used by gulp-inject to inject
  *  all your sass files automatically
  */
 // injector
 // endinjector
+
+@import "../../bower_components/bootswatch/flatly/_bootswatch.scss";
--
libgit2 0.21.2