diff --git a/_includes/header.html b/_includes/header.html
index 09536055..f298fbc7 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -4,8 +4,8 @@
         <div class="intro-text">
             <div class="intro-lead-in">Event Management App Tailored to</div>
             <div class="intro-heading">Free Software Conferences</div>
+            <a href="http://demo.osem.io" class="btn btn-xl">Try It</a>
             <a href="https://github.com/openSUSE/osem/archive/master.zip" class="btn btn-xl">Download</a>
         </div>
     </div>
 </header>
-
diff --git a/_includes/navigation.html b/_includes/navigation.html
index 75a6e2c6..33e00583 100644
--- a/_includes/navigation.html
+++ b/_includes/navigation.html
@@ -9,8 +9,9 @@
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
-            <a class="navbar-brand page-scroll hidden-xs hidden-sm" href="#page-top">{{site.title}}</a>
-            <a class="navbar-brand page-scroll visible-xs visible-sm" href="#page-top">OSEM</a>
+            <a class="navbar-brand page-scroll" href="#page-top">
+              <img src="img/logo.png" class="osem-logo" alt="OSEM Logo">
+            </a>
         </div>
         <!-- Collect the nav links, forms, and other content for toggling -->
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
diff --git a/css/osem.css b/css/osem.css
index d94a4f36..b746667b 100644
--- a/css/osem.css
+++ b/css/osem.css
@@ -1,3 +1,25 @@
+.osem-logo {
+  height: 30px;
+}
+
+.osem-logo-shrink {
+  height: 30px;
+}
+
+@media(min-width:767px) {
+  .osem-logo {
+    height: 60px;
+    margin-left: 25px;
+  }
+}
+
+@media(min-width:1023px) {
+  .osem-logo {
+    height: 120px;
+    margin-left: 25px;
+  }
+}
+
 section.post:nth-of-type(1) {
   margin-top: 160px;
 }
@@ -80,4 +102,4 @@ section#comments {
     letter-spacing: 0.01rem;
     line-height: 1.5;
   }
-}
\ No newline at end of file
+}
diff --git a/img/logo.png b/img/logo.png
new file mode 100644
index 00000000..39613d5f
Binary files /dev/null and b/img/logo.png differ
diff --git a/js/cbpAnimatedHeader.js b/js/cbpAnimatedHeader.js
index 7c3bbc17..187c41fa 100644
--- a/js/cbpAnimatedHeader.js
+++ b/js/cbpAnimatedHeader.js
@@ -4,7 +4,7 @@
  *
  * Licensed under the MIT license.
  * http://www.opensource.org/licenses/mit-license.php
- * 
+ *
  * Copyright 2013, Codrops
  * http://www.codrops.com
  */
@@ -12,6 +12,7 @@ var cbpAnimatedHeader = (function() {
 
 	var docElem = document.documentElement,
 		header = document.querySelector( '.navbar-fixed-top' ),
+		logo = document.querySelector( '.osem-logo' ),
 		didScroll = false,
 		changeHeaderOn = 300;
 
@@ -28,9 +29,13 @@ var cbpAnimatedHeader = (function() {
 		var sy = scrollY();
 		if ( sy >= changeHeaderOn ) {
 			classie.add( header, 'navbar-shrink' );
+			classie.add( logo, 'osem-logo-shrink' );
+			classie.remove( logo, 'osem-logo' );
 		}
 		else {
 			classie.remove( header, 'navbar-shrink' );
+			classie.add( logo, 'osem-logo' );
+			classie.remove( logo, 'osem-logo-shrink' );
 		}
 		didScroll = false;
 	}
@@ -41,4 +46,4 @@ var cbpAnimatedHeader = (function() {
 
 	init();
 
-})();
\ No newline at end of file
+})();