diff --git a/css/style.css b/css/style.css
index 64e46b8..d5723b0 100644
--- a/css/style.css
+++ b/css/style.css
@@ -54,3 +54,17 @@ a {
 
 textarea {
   overflow: auto; }
+
+/* -------------------------------------------------
+    Page styles
+   ------------------------------------------------- */
+html {
+  font-family: Tahoma, sans-serif;
+  font-size: 13px; }
+
+.contents {
+  width: 960px;
+  margin: 0 auto;
+  padding: 1px 0; }
+  .contents article {
+    margin: 60px 0 30px; }
diff --git a/dist/css/datepicker.css b/dist/css/datepicker.css
index e69de29..600f749 100644
--- a/dist/css/datepicker.css
+++ b/dist/css/datepicker.css
@@ -0,0 +1,17 @@
+/* -------------------------------------------------
+    Datepicker
+   ------------------------------------------------- */
+.datepicker {
+  border: 1px solid #dddddd;
+  width: 224px; }
+
+.datepicker--days--names {
+  display: flex; }
+
+.datepicker--days--name {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  text-align: center; }
diff --git a/dist/js/datepicker.js b/dist/js/datepicker.js
index 537b3d2..fcda346 100644
--- a/dist/js/datepicker.js
+++ b/dist/js/datepicker.js
@@ -140,15 +140,17 @@ Datepicker.Cell = function () {
             this.$cells = $('.datepicker--days--cells', this.$el);
         },
 
-        _getDayNamesHtml: function (firstDay, curDay, html, circle) {
+        _getDayNamesHtml: function (firstDay, curDay, html, i) {
             curDay = curDay != undefined ? curDay : firstDay;
             html = html ? html : '';
-            if (curDay == firstDay && circle) return html;
-            if (curDay == 7) return this._getDayNamesHtml(firstDay, 0, html, true);
+            i = i != undefined ? i : 0;
 
-            html += '<div class="datepicker--days--name">' + this.d.loc.days[curDay] + '</div>';
+            if (i > 7) return html;
+            if (curDay == 7) return this._getDayNamesHtml(firstDay, 0, html, ++i);
 
-            return this._getDayNamesHtml(firstDay, ++curDay, html, circle);
+            html += '<div class="datepicker--days--name' + (i >= 5 ? " -weekend-" : "") + '">' + this.d.loc.days[curDay] + '</div>';
+
+            return this._getDayNamesHtml(firstDay, ++curDay, html, ++i);
         },
 
         _renderDays: function () {
diff --git a/index.html b/index.html
index fce917f..a06a865 100644
--- a/index.html
+++ b/index.html
@@ -8,9 +8,11 @@
         <script type="text/javascript" src="vendor/jquery/dist/jquery.min.js"></script>
     </head>
     <body>
-        <div class="calendar"></div>
-
-
+        <div class="contents">
+            <article>
+                <div class="calendar"></div>
+            </article>
+        </div>
         <script type="text/javascript" src="dist/js/datepicker.js"></script>
         <script type="text/javascript">
             $('.calendar').datepicker();
diff --git a/js/datepicker/body.js b/js/datepicker/body.js
index 16a0365..3cef4e7 100644
--- a/js/datepicker/body.js
+++ b/js/datepicker/body.js
@@ -28,15 +28,17 @@
             this.$cells = $('.datepicker--days--cells', this.$el);
         },
 
-        _getDayNamesHtml: function (firstDay, curDay, html, circle) {
+        _getDayNamesHtml: function (firstDay, curDay, html, i) {
             curDay = curDay != undefined ? curDay : firstDay;
             html = html ? html : '';
-            if (curDay == firstDay && circle) return html;
-            if (curDay == 7) return this._getDayNamesHtml(firstDay, 0, html, true);
+            i = i != undefined ? i : 0;
 
-            html += '<div class="datepicker--days--name">' + this.d.loc.days[curDay] + '</div>';
+            if (i > 7) return html;
+            if (curDay == 7) return this._getDayNamesHtml(firstDay, 0, html, ++i);
 
-            return this._getDayNamesHtml(firstDay, ++curDay, html, circle);
+            html += '<div class="datepicker--days--name' + (i >= 5 ? " -weekend-" : "") + '">' + this.d.loc.days[curDay] + '</div>';
+
+            return this._getDayNamesHtml(firstDay, ++curDay, html, ++i);
         },
 
         _renderDays: function () {
diff --git a/sass/_page.scss b/sass/_page.scss
index e69de29..7c96067 100644
--- a/sass/_page.scss
+++ b/sass/_page.scss
@@ -0,0 +1,19 @@
+/* -------------------------------------------------
+    Page styles
+   ------------------------------------------------- */
+
+html {
+  font-family: Tahoma, sans-serif;
+  font-size: 13px;
+}
+
+.contents {
+  width: 960px;
+  margin: 0 auto;
+  padding: 1px 0;
+
+  article {
+    margin: 60px 0 30px;
+  }
+}
+
diff --git a/sass/datepicker/_datepicker.scss b/sass/datepicker/_datepicker.scss
index e69de29..e2a474c 100644
--- a/sass/datepicker/_datepicker.scss
+++ b/sass/datepicker/_datepicker.scss
@@ -0,0 +1,31 @@
+@import "datepicker-config";
+
+/* -------------------------------------------------
+    Datepicker
+   ------------------------------------------------- */
+
+.datepicker {
+  border: 1px solid #dddddd;
+  width: $width;
+}
+
+//  Days
+// -------------------------------------------------
+
+.datepicker--days {}
+
+
+//  Day names
+// -------------------------
+
+.datepicker--days--names {
+  display: flex;
+}
+.datepicker--days--name {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $cellSize;
+  height: $cellSize;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/sass/datepicker/datepicker-config.scss b/sass/datepicker/datepicker-config.scss
new file mode 100644
index 0000000..b7e1fc2
--- /dev/null
+++ b/sass/datepicker/datepicker-config.scss
@@ -0,0 +1,3 @@
+$cellSize: 32px;
+$width: 7 * $cellSize;
+
