diff --git a/client/src/styles/main.styl b/client/src/styles/main.styl
index d9fed49..496396d 100644
--- a/client/src/styles/main.styl
+++ b/client/src/styles/main.styl
@@ -1,7 +1,122 @@
-#section-title, #section-form
- margin 0 auto
- width 980px
+@font-face
+ font-family 'Josefin Sans'
+ font-style normal
+ font-weight 400
+ src local('Josefin Sans'), local('JosefinSans'), url("http://themes.googleusercontent.com/static/fonts/josefinsans/v3/xgzbb53t8j-Mo-vYa23n5qRDOzjiPcYnFooOUGCOsRk.woff") format('woff')
+
+@font-face
+ font-family 'Lato'
+ font-style normal
+ font-weight 100
+ src local('Lato Hairline'), local('Lato-Hairline'), url("http://themes.googleusercontent.com/static/fonts/lato/v6/Kom15zUm24dIPfIRiNogNuvvDin1pK8aKteLpeZ5c0A.woff") format('woff')
+
+html
+ height 100%
+
+body
+ background #36b0e3
+ background-image url("../img/cloud.svg"), linear-gradient(to right, #36b0e3 10%, #0071b3 100%)
+ background-repeat no-repeat
+ background-position bottom
+ background-attachment fixed
+ background-size 100%
+ font-family 'Lato'
+ font-weight 100
+ letter-spacing 0.7pt
+ margin 0
+
+ul
+ padding 0
+ margin 0
+
+li
+ list-style none
+
+icon
+ height 50px
+ width 50px
+ font-size 40px
+ overflow hidden
+ &:before
+ margin 5px
+
+.wrapper
+ margin 100px auto
+ width 500px
text-align center
-#form-table
- display inline-block
\ No newline at end of file
+.button
+ cursor pointer
+
+#title
+ color #fff
+ font 400 60pt/40pt 'Josefin Sans'
+ letter-spacing 5pt
+ text-shadow 2px 2px 2px rgba(0,0,0,0.2)
+
+#main-form
+ border-radius 5px
+ overflow hidden
+ box-shadow 0 0 20px rgba(0,0,0,0.3)
+ .card-list-item
+ min-height 200px
+ background #f2f2f2
+ .control-item
+ padding 8px 50px
+ font-size 25px
+ text-align right
+ color #fff
+ position relative
+ transition all 0.3s ease
+ icon
+ position absolute
+ right 0
+ top 0
+ &.add
+ background #00beff
+ &:hover
+ background #1ac4ff
+ &.start
+ background #2cca2c
+ &:hover
+ background #3cd53c
+ &.button
+ &:hover
+ text-shadow 0 0 10px rgba(255,255,255,0.5)
+
+.card-item
+ height 50px
+ overflow hidden
+ background #fff
+ position relative
+ color #555
+ text-align left
+ font-size 20px
+ border-bottom solid 1px #eee
+ .input
+ margin-right 50px
+ input
+ border 0
+ width 50%
+ height 50px
+ padding 0
+ float left
+ text-align right
+ font 100 25px 'Lato'
+ letter-spacing 1pt
+ outline none
+ color #555
+ .control
+ background #fff
+ position absolute
+ white-space nowrap
+ right 0
+ top 0
+ bottom 0
+ .message
+ margin-top -8px
+ .shown, .hidden
+ display inline-block
+
+.fail
+ color #dc1d25
diff --git a/client/static/font/cena.eot b/client/static/font/cena.eot
new file mode 100644
index 0000000..4c53ad4
Binary files /dev/null and b/client/static/font/cena.eot differ
diff --git a/client/static/font/cena.svg b/client/static/font/cena.svg
new file mode 100644
index 0000000..b3d935c
--- /dev/null
+++ b/client/static/font/cena.svg
@@ -0,0 +1,55 @@
+
+
+
+
diff --git a/client/static/font/cena.ttf b/client/static/font/cena.ttf
new file mode 100644
index 0000000..cfb61bd
Binary files /dev/null and b/client/static/font/cena.ttf differ
diff --git a/client/static/font/cena.woff b/client/static/font/cena.woff
new file mode 100644
index 0000000..ca2efe3
Binary files /dev/null and b/client/static/font/cena.woff differ
diff --git a/client/static/img/cloud.svg b/client/static/img/cloud.svg
new file mode 100755
index 0000000..e6c39b6
--- /dev/null
+++ b/client/static/img/cloud.svg
@@ -0,0 +1,791 @@
+
+
+
+
diff --git a/client/static/styles/cena-icon.css b/client/static/styles/cena-icon.css
new file mode 100644
index 0000000..3b4a963
--- /dev/null
+++ b/client/static/styles/cena-icon.css
@@ -0,0 +1,89 @@
+/*
+ Icon Font: Cena
+*/
+
+@font-face {
+ font-family: "Cena";
+ src: url("../font/cena.eot");
+ src: url("../font/cena.eot?#iefix") format("embedded-opentype"),
+ url("../font/cena.woff") format("woff"),
+ url("../font/cena.ttf") format("truetype"),
+ url("../font/cena.svg#cena") format("svg");
+ font-weight: normal;
+ font-style: normal;
+}
+
+.icon-spin:before {
+ -webkit-animation: spin 2s infinite linear;
+ -moz-animation: spin 2s infinite linear;
+ -o-animation: spin 2s infinite linear;
+ animation: spin 2s infinite linear;
+}
+
+@-moz-keyframes spin {
+ 0% {
+ -moz-transform: rotate(0deg);
+ }
+ 100% {
+ -moz-transform: rotate(359deg);
+ }
+}
+@-webkit-keyframes spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(359deg);
+ }
+}
+@-o-keyframes spin {
+ 0% {
+ -o-transform: rotate(0deg);
+ }
+ 100% {
+ -o-transform: rotate(359deg);
+ }
+}
+@-ms-keyframes spin {
+ 0% {
+ -ms-transform: rotate(0deg);
+ }
+ 100% {
+ -ms-transform: rotate(359deg);
+ }
+}
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(359deg);
+ }
+}
+
+[data-icon]:before { content: attr(data-icon); }
+
+[data-icon]:before,
+.icon-add:before,
+.icon-cross:before,
+.icon-loading:before,
+.icon-remove:before,
+.icon-tick:before,
+.icon-waiting:before {
+ font-family: "Cena";
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ text-decoration: inherit;
+}
+
+.icon-add:before { content: "\f100"; }
+.icon-cross:before { content: "\f101"; }
+.icon-loading:before { content: "\f102"; }
+.icon-remove:before { content: "\f103"; }
+.icon-tick:before { content: "\f104"; }
+.icon-waiting:before { content: "\f105"; }
diff --git a/client/views/index.jade b/client/views/index.jade
index f2b367b..fed1472 100644
--- a/client/views/index.jade
+++ b/client/views/index.jade
@@ -1,29 +1,33 @@
extends layouts/default
block body
- section#section-title
- h1 Cena
- a.btn-add(href='#') Add
- |
- a.btn-start(href='#') Start
- section#section-form
- script#tmpl-card(type='text/x-underscore')
-
- |
-
- |
-
-
- |
-
- Delete
- |
-
- table#form-table
- tbody
- tr.table-header
- th.cln-no Card Number
- th.cln-psw Password
- th.cln-ctrl
+ .wrapper
+ h1#title Cena
+ ul#main-form
+ li.control-item.button.add
+ span Add a new line
+ icon.icon-add
+ li.card-list-item
+ ul#card-list
+ li.card-item
+ .input
+ input(placeholder='Number')
+ input(type='password', placeholder='Password')
+ .control
+ icon.button.icon-remove
+ li.card-item
+ .input
+ input(placeholder='Number')
+ input(type='password', placeholder='Password')
+ .control.message
+ .shown
+ icon.fail.icon-cross
+ .hidden
+ span.message.fail Wrong Password
+ icon.button.icon-remove
+ li.control-item.button.start
+ span Start
+ icon.icon-tick
+
block scripts
script(src='scripts/main.js')
\ No newline at end of file
diff --git a/client/views/layouts/default.jade b/client/views/layouts/default.jade
index fe263b1..5e84bfb 100644
--- a/client/views/layouts/default.jade
+++ b/client/views/layouts/default.jade
@@ -5,6 +5,7 @@ html
title Cena
meta(name='viewport', content='width=device-width, initial-scale=1.0')
link(rel="icon", type="image/x-icon", href="favicon.ico")
+ link(rel='stylesheet', href='styles/cena-icon.css')
link(rel='stylesheet', href='styles/main.css')
body
block body