diff --git a/public/css/kourend.css b/public/css/kourend.css
index 1c5ee2a..7402a55 100644
--- a/public/css/kourend.css
+++ b/public/css/kourend.css
@@ -25,6 +25,32 @@ form select[multiple]{
   min-height: 100px;
 }
 
+/* Material card styles */
+.card-1 {
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+}
+
+.card-1:hover {
+  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+}
+
+.card-2 {
+  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+}
+
+.card-3 {
+  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+}
+
+.card-4 {
+  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+}
+
+.card-5 {
+  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
+}
+
 .container{
   max-width: 1024px;
 }
diff --git a/templates/layout/header.tmpl b/templates/layout/header.tmpl
index dea1b4a..079c279 100644
--- a/templates/layout/header.tmpl
+++ b/templates/layout/header.tmpl
@@ -16,5 +16,5 @@
   {{ template "navbar" . }}
 
   <!-- main content -->
-  <div id="main-content" class="container">
+  <div id="main-content" class="container card-5">
 {{ end }}
diff --git a/templates/layout/navbar.tmpl b/templates/layout/navbar.tmpl
index dfb6f61..e2d4ca7 100644
--- a/templates/layout/navbar.tmpl
+++ b/templates/layout/navbar.tmpl
@@ -1,5 +1,5 @@
 {{ define "navbar" }}
-<nav id="main-nav">
+<nav id="main-nav" class="card-2">
   <div class="nav-left">
     <h4>BLT</h4>
     <ul>