diff --git a/src/Web/Views/Shared/_Layout.cshtml b/src/Web/Views/Shared/_Layout.cshtml
index c6408ee..1a3e51e 100644
--- a/src/Web/Views/Shared/_Layout.cshtml
+++ b/src/Web/Views/Shared/_Layout.cshtml
@@ -7,6 +7,18 @@
     <environment names="Development">
         <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
         <link rel="stylesheet" href="~/css/app.css" />
+        <link rel="stylesheet" href="~/css/app.component.css" />
+        <link rel="stylesheet" href="~/css/shared/components/header/header.css" />
+        <link rel="stylesheet" href="~/css/shared/components/identity/identity.css" />
+        <link rel="stylesheet" href="~/css/shared/components/pager/pager.css" />
+        <link rel="stylesheet" href="~/css/basket/basket.component.css" />
+        <link rel="stylesheet" href="~/css/basket/basket-status/basket-status.component.css" />
+        <link rel="stylesheet" href="~/css/catalog/catalog.component.css" />
+        <link rel="stylesheet" href="~/css/orders/orders.component.css" />
+        <link rel="stylesheet" href="~/css/orders/orders-detail/orders-detail.component.css" />
+        <link rel="stylesheet" href="~/css/orders/orders-new/orders-new.component.css" />
+        <link rel="stylesheet" href="~/css/override.css" type="text/css" />
+        <link rel="stylesheet" href="~/css/site.min.css" type="text/css" />
     </environment>
     <environment names="Staging,Production">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
@@ -14,12 +26,6 @@
               asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
         <link rel="stylesheet" href="~/css/app.min.css" asp-append-version="true" />
     </environment>
-    <link rel="stylesheet" href="~/css/app.component.css" />
-    <link rel="stylesheet" href="~/css/basket/basket.component.css" />
-    <link rel="stylesheet" href="~/css/catalog/pager.css" />
-    <link rel="stylesheet" href="~/css/catalog/catalog.component.css" />
-    <link rel="stylesheet" href="~/css/basket/basket-status/basket-status.component.css" />
-    <link rel="stylesheet" href="~/css/orders/orders.component.css" />
 </head>
 <body>
     <header class="navbar navbar-light navbar-static-top">
diff --git a/src/Web/Views/Shared/_LoginPartial.cshtml b/src/Web/Views/Shared/_LoginPartial.cshtml
index 5385d36..fce87e4 100644
--- a/src/Web/Views/Shared/_LoginPartial.cshtml
+++ b/src/Web/Views/Shared/_LoginPartial.cshtml
@@ -4,7 +4,7 @@
         <div class="esh-identity">
             <form asp-area="" asp-controller="Account" asp-action="SignOut" method="post" id="logoutForm" class="navbar-right">
                 <section class="esh-identity-section">
-                    @*<div class="esh-identity-name">@User.FindFirst(x => x.Type == "preferred_username").Value</div>*@
+                    <div class="esh-identity-name">@Context.User.Identity.Name</div>
                     <img class="esh-identity-image" src="~/images/arrow-down.png">
                 </section>
                 <section class="esh-identity-drop">
@@ -12,13 +12,11 @@
                        asp-controller="Order"
                        asp-action="MyOrders">
                         <div class="esh-identity-name esh-identity-name--upper">My orders</div>
-                        <img class="esh-identity-image" src="~/images/my_orders.png">
                     </a>
                     <a class="esh-identity-item"
                        asp-controller="Manage"
                        asp-action="MyAccount">
                         <div class="esh-identity-name esh-identity-name--upper">My account</div>
-                        <img class="esh-identity-image" src="~/images/my_orders.png">
                     </a>
                     <a class="esh-identity-item"
                        href="javascript:document.getElementById('logoutForm').submit()">
@@ -37,10 +35,11 @@
 }
 else
 {
-    <section class="col-lg-1 col-lg-offset-3 col-md-3 col-xs-6">
+    <section class="col-lg-4 col-md-5 col-xs-12">
         <div class="esh-identity">
             <section class="esh-identity-section">
                 <div class="esh-identity-item">
+
                     <a asp-area="" asp-controller="Account" asp-action="SignIn" class="esh-identity-name esh-identity-name--upper">
                         Login
                     </a>
diff --git a/src/Web/wwwroot/css/shared/components/header/header.css b/src/Web/wwwroot/css/shared/components/header/header.css
new file mode 100644
index 0000000..1d2add9
--- /dev/null
+++ b/src/Web/wwwroot/css/shared/components/header/header.css
@@ -0,0 +1,18 @@
+﻿.esh-header {
+  background-color: #00A69C;
+  height: 4rem;
+}
+
+.esh-header-back {
+  color: rgba(255, 255, 255, 0.5);
+  line-height: 4rem;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition: color 0.35s;
+}
+
+.esh-header-back:hover {
+  color: #FFFFFF;
+  transition: color 0.35s;
+}
+
diff --git a/src/Web/wwwroot/css/shared/components/header/header.min.css b/src/Web/wwwroot/css/shared/components/header/header.min.css
new file mode 100644
index 0000000..6d6217d
--- /dev/null
+++ b/src/Web/wwwroot/css/shared/components/header/header.min.css
@@ -0,0 +1 @@
+﻿.esh-header{background-color:#00a69c;height:4rem;}.esh-header-back{color:rgba(255,255,255,.5);line-height:4rem;text-decoration:none;text-transform:uppercase;transition:color .35s;}.esh-header-back:hover{color:#fff;transition:color .35s;}
\ No newline at end of file
diff --git a/src/Web/wwwroot/css/shared/components/header/header.scss b/src/Web/wwwroot/css/shared/components/header/header.scss
new file mode 100644
index 0000000..98d455c
--- /dev/null
+++ b/src/Web/wwwroot/css/shared/components/header/header.scss
@@ -0,0 +1,21 @@
+@import '../../../variables';
+
+.esh-header {
+    $header-height: 4rem;
+
+    background-color: $color-brand;
+    height: $header-height;
+
+    &-back {
+        color: rgba($color-foreground-brighter, .5);
+        line-height: $header-height;
+        text-decoration: none;
+        text-transform: uppercase;
+        transition: color $animation-speed-default;
+
+        &:hover {
+            color: $color-foreground-brighter;
+            transition: color $animation-speed-default;
+        }
+    }
+}
diff --git a/src/Web/wwwroot/css/shared/components/identity/identity.css b/src/Web/wwwroot/css/shared/components/identity/identity.css
new file mode 100644
index 0000000..cd38600
--- /dev/null
+++ b/src/Web/wwwroot/css/shared/components/identity/identity.css
@@ -0,0 +1,57 @@
+﻿.esh-identity {
+  line-height: 3rem;
+  position: relative;
+  text-align: right;
+}
+
+.esh-identity-section {
+  display: inline-block;
+  width: 100%;
+}
+
+.esh-identity-name {
+  display: inline-block;
+}
+
+.esh-identity-name--upper {
+  text-transform: uppercase;
+}
+
+@media screen and (max-width: 768px) {
+  .esh-identity-name {
+    font-size: 0.85rem;
+  }
+}
+
+.esh-identity-image {
+  display: inline-block;
+}
+
+.esh-identity-drop {
+  background: #FFFFFF;
+  height: 10px;
+  width: 10rem;
+  overflow: hidden;
+  padding: .5rem;
+  position: absolute;
+  right: 0;
+  top: 2.5rem;
+  transition: height 0.35s;
+}
+
+.esh-identity:hover .esh-identity-drop {
+  border: 1px solid #EEEEEE;
+  height: 10rem;
+  transition: height 0.35s;
+}
+
+.esh-identity-item {
+  cursor: pointer;
+  transition: color 0.35s;
+}
+
+.esh-identity-item:hover {
+  color: #75b918;
+  transition: color 0.35s;
+}
+
diff --git a/src/Web/wwwroot/css/shared/components/identity/identity.min.css b/src/Web/wwwroot/css/shared/components/identity/identity.min.css
new file mode 100644
index 0000000..778140c
--- /dev/null
+++ b/src/Web/wwwroot/css/shared/components/identity/identity.min.css
@@ -0,0 +1 @@
+﻿.esh-identity{line-height:3rem;position:relative;text-align:right;}.esh-identity-section{display:inline-block;width:100%;}.esh-identity-name{display:inline-block;}.esh-identity-name--upper{text-transform:uppercase;}@media screen and (max-width:768px){.esh-identity-name{font-size:.85rem;}}.esh-identity-image{display:inline-block;}.esh-identity-drop{background:#fff;height:10px;width:10rem;overflow:hidden;padding:.5rem;position:absolute;right:0;top:2.5rem;transition:height .35s;}.esh-identity:hover .esh-identity-drop{border:1px solid #eee;height:10rem;transition:height .35s;}.esh-identity-item{cursor:pointer;transition:color .35s;}.esh-identity-item:hover{color:#75b918;transition:color .35s;}
\ No newline at end of file
diff --git a/src/Web/wwwroot/css/shared/components/identity/identity.scss b/src/Web/wwwroot/css/shared/components/identity/identity.scss
new file mode 100644
index 0000000..b9fd5c6
--- /dev/null
+++ b/src/Web/wwwroot/css/shared/components/identity/identity.scss
@@ -0,0 +1,56 @@
+@import '../../../variables';
+
+.esh-identity {
+    line-height: 3rem;
+    position: relative;
+    text-align: right;
+
+    &-section {
+        display: inline-block;
+        width: 100%;
+    }
+
+    &-name {
+        display: inline-block;
+
+        &--upper {
+            text-transform: uppercase;
+        }
+
+        @media screen and (max-width: $media-screen-s) {
+            font-size: $font-size-s;
+        }
+    }
+
+    &-image {
+        display: inline-block;
+    }
+
+    &-drop {
+        background: $color-background-brighter;
+        height: 10px;
+        width: 10rem;
+        overflow: hidden;
+        padding: .5rem;
+        position: absolute;
+        right: 0;
+        top: 2.5rem;
+        transition: height $animation-speed-default;
+    }
+
+    &:hover &-drop {
+        border: $border-light solid $color-foreground-bright;
+        height: 10rem;
+        transition: height $animation-speed-default;
+    }
+
+    &-item {
+        cursor: pointer;
+        transition: color $animation-speed-default;
+
+        &:hover {
+            color: $color-secondary-dark;
+            transition: color $animation-speed-default;
+        }
+    }
+}
diff --git a/src/Web/wwwroot/css/shared/components/pager/pager.css b/src/Web/wwwroot/css/shared/components/pager/pager.css
new file mode 100644
index 0000000..9ca8550
--- /dev/null
+++ b/src/Web/wwwroot/css/shared/components/pager/pager.css
@@ -0,0 +1,35 @@
+﻿.esh-pager-wrapper {
+  padding-top: 1rem;
+  text-align: center;
+}
+
+.esh-pager-item {
+  margin: 0 5vw;
+}
+
+.esh-pager-item.is-disabled {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.esh-pager-item--navigable {
+  cursor: pointer;
+  display: inline-block;
+}
+
+.esh-pager-item--navigable:hover {
+  color: #83D01B;
+}
+
+@media screen and (max-width: 1280px) {
+  .esh-pager-item {
+    font-size: 0.85rem;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .esh-pager-item {
+    margin: 0 2.5vw;
+  }
+}
+
diff --git a/src/Web/wwwroot/css/shared/components/pager/pager.min.css b/src/Web/wwwroot/css/shared/components/pager/pager.min.css
new file mode 100644
index 0000000..79a734e
--- /dev/null
+++ b/src/Web/wwwroot/css/shared/components/pager/pager.min.css
@@ -0,0 +1 @@
+﻿.esh-pager-wrapper{padding-top:1rem;text-align:center;}.esh-pager-item{margin:0 5vw;}.esh-pager-item.is-disabled{opacity:0;pointer-events:none;}.esh-pager-item--navigable{cursor:pointer;display:inline-block;}.esh-pager-item--navigable:hover{color:#83d01b;}@media screen and (max-width:1280px){.esh-pager-item{font-size:.85rem;}}@media screen and (max-width:1024px){.esh-pager-item{margin:0 2.5vw;}}
\ No newline at end of file
diff --git a/src/Web/wwwroot/css/shared/components/pager/pager.scss b/src/Web/wwwroot/css/shared/components/pager/pager.scss
new file mode 100644
index 0000000..078256c
--- /dev/null
+++ b/src/Web/wwwroot/css/shared/components/pager/pager.scss
@@ -0,0 +1,36 @@
+@import '../../../variables';
+
+.esh-pager {
+
+    &-wrapper {
+        padding-top: 1rem;
+        text-align: center;
+    }
+
+    &-item {
+        $margin: 5vw;
+        margin: 0 $margin;
+
+        &.is-disabled {
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        &--navigable {
+            cursor: pointer;
+            display: inline-block;
+
+            &:hover {
+                color: $color-secondary;
+            }
+        }
+
+        @media screen and (max-width: $media-screen-l) {
+            font-size: $font-size-s;
+        }
+
+        @media screen and (max-width: $media-screen-m) {
+            margin: 0 $margin / 2;
+        }
+    }
+}
