diff --git a/jirs-client/dev/feedback.png b/jirs-client/dev/feedback.png
new file mode 100644
index 00000000..dbaf66eb
Binary files /dev/null and b/jirs-client/dev/feedback.png differ
diff --git a/jirs-client/js/css/aside.css b/jirs-client/js/css/aside.css
new file mode 100644
index 00000000..9ef9609d
--- /dev/null
+++ b/jirs-client/js/css/aside.css
@@ -0,0 +1,106 @@
+aside#navbar-left {
+    z-index: var(--navLeft);
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow-x: hidden;
+    height: 100vh;
+    width: var(--appNavBarLeftWidth);
+    background: var(--backgroundDarkPrimary);
+    transition: all 0.1s;
+    transform: translateZ(0);
+}
+
+aside#navbar-left:hover {
+    width: 200px;
+    box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.6);
+}
+
+aside#navbar-left > .logoLink {
+    display: block;
+    position: relative;
+    left: 0;
+    margin: 20px 0 10px;
+    transition: left 0.1s;
+}
+
+aside#navbar-left > .logoLink > .styledLogo {
+    display: inline-block;
+    margin-left: 8px;
+    padding: 10px;
+    cursor: pointer;
+    user-select: none;
+}
+
+aside#navbar-left .item {
+    position: relative;
+    width: 100%;
+    height: 42px;
+    line-height: 42px;
+    padding-left: 64px;
+    color: #deebff;
+    transition: color 0.1s;
+    cursor: pointer;
+    user-select: none;
+}
+
+aside#navbar-left .item:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+aside#navbar-left .item > .styledIcon {
+    position: absolute;
+    left: 18px;
+}
+
+aside#navbar-left > .item > .styledIcon.search {
+    font-size: 22px;
+    color: #DEEBFE;
+}
+
+aside#navbar-left > .item > .styledIcon.plus {
+    font-size: 27px;
+    color: #DEEBFE;
+}
+
+aside#navbar-left .item > .styledIcon.help {
+    font-size: 27px;
+    color: #DEEBFE;
+}
+
+aside#navbar-left .item > .itemText {
+    position: relative;
+    right: 12px;
+    visibility: hidden;
+    opacity: 0;
+    text-transform: uppercase;
+    transition: all 0.1s;
+    font-family: var(--font-bold);
+    font-size: 12px;
+    transition-property: right, visibility, opacity;
+}
+
+aside#navbar-left > .bottom {
+    position: absolute;
+    bottom: 20px;
+    left: 0;
+    width: 100%;
+}
+
+aside#navbar-left > .bottom > .aboutTooltip {}
+
+aside#navbar-left:hover .item > .itemText {
+    right: 0;
+    visibility: visible;
+    opacity: 1;
+}
+
+aside#navbar-left .styledTooltip {
+    z-index: calc(var(--modal) + 1);
+    position: fixed;
+    width: 300px;
+    border-radius: 3px;
+    background: #fff;
+    transform: translateZ(0);
+    box-shadow: rgba(9, 30, 66, 0.25) 0 4px 8px -2px, rgba(9, 30, 66, 0.31) 0 0 1px;
+}
diff --git a/jirs-client/js/css/variables.css b/jirs-client/js/css/variables.css
index a60d8ccb..9cd1577e 100644
--- a/jirs-client/js/css/variables.css
+++ b/jirs-client/js/css/variables.css
@@ -46,9 +46,9 @@
 }
 
 :root /* sizes */ {
-    --appNavBarLeftWidth: 64;
-    --secondarySideBarWidth: 230;
-    --minViewportWidth: 1000;
+    --appNavBarLeftWidth: 64px;
+    --secondarySideBarWidth: 230px;
+    --minViewportWidth: 1000px;
 }
 
 :root /* z-index */ {
diff --git a/jirs-client/js/styles.css b/jirs-client/js/styles.css
index c0e9cc43..c5cf28e6 100644
--- a/jirs-client/js/styles.css
+++ b/jirs-client/js/styles.css
@@ -3,6 +3,7 @@
 @import "css/variables.css";
 @import "css/global.css";
 @import "css/sidebar.css";
+@import "css/aside.css";
 @import "css/icon.css";
 @import "css/shared.css";
 @import "css/app.css";
diff --git a/jirs-client/src/shared.rs b/jirs-client/src/shared.rs
index 313f4824..24581b1d 100644
--- a/jirs-client/src/shared.rs
+++ b/jirs-client/src/shared.rs
@@ -7,22 +7,58 @@ use jirs_data::FullProjectResponse;
 use crate::model::{Icon, Model, Page};
 use crate::Msg;
 
+pub fn navbar_left(model: &Model) -> Node<Msg> {
+    let mut logo_svg = Node::from_html(include_str!("../static/logo.svg"));
+
+    aside![
+        id!["navbar-left"],
+        a![
+            attrs![At::Class => "logoLink", At::Href => "/"],
+            div![attrs![At::Class => "styledLogo"], logo_svg]
+        ],
+        navbar_left_item(model, "Search issues", Icon::Search),
+        navbar_left_item(model, "Create Issue", Icon::Plus),
+        div![
+            attrs![At::Class => "bottom"],
+            about_tooltip(model, navbar_left_item(model, "About", Icon::Help))
+        ]
+    ]
+}
+
+fn navbar_left_item(_model: &Model, text: &str, logo: Icon) -> Node<Msg> {
+    div![
+        attrs![At::Class => "item"],
+        i![attrs![At::Class => format!("styledIcon {}", logo)]],
+        span![attrs![At::Class => "itemText"], text]
+    ]
+}
+
+pub fn about_tooltip(_model: &Model, children: Node<Msg>) -> Node<Msg> {
+    div![attrs![At::Class => "aboutTooltip"], children]
+}
+
+pub fn styled_tooltip() -> Node<Msg> {
+    div![attrs![At::Class => "styledTooltip"]]
+}
+
 pub fn sidebar(model: &Model) -> Node<Msg> {
+    let project_icon = Node::from_html(include_str!("../static/project-avatar.svg"));
     let project_info = match model.project.as_ref() {
         Some(project) => li![
             id!["projectInfo"],
+            project_icon,
             div![
-                attrs![At::Class => ".projectTexts";],
-                div![attrs![At::Class => ".projectName";], project.name],
-                div![attrs![At::Class => ".projectCategory";], project.category]
+                attrs![At::Class => "projectTexts";],
+                div![attrs![At::Class => "projectName";], project.name],
+                div![attrs![At::Class => "projectCategory";], project.category]
             ],
         ],
         _ => li![
             id!["projectInfo"],
             div![
-                attrs![At::Class => ".projectTexts";],
-                div![attrs![At::Class => ".projectName";], ""],
-                div![attrs![At::Class => ".projectCategory";], ""]
+                attrs![At::Class => "projectTexts";],
+                div![attrs![At::Class => "projectName";], ""],
+                div![attrs![At::Class => "projectCategory";], ""]
             ],
         ],
     };
@@ -71,7 +107,12 @@ pub fn divider() -> Node<Msg> {
 }
 
 pub fn inner_layout(model: &Model, children: Node<Msg>) -> Node<Msg> {
-    article![id!["inner-layout"], sidebar(model), children,]
+    article![
+        id!["inner-layout"],
+        navbar_left(model),
+        sidebar(model),
+        children,
+    ]
 }
 
 pub fn host_client(host_url: String, path: &str) -> Result<Request, String> {
diff --git a/jirs-client/static/logo.svg b/jirs-client/static/logo.svg
new file mode 100644
index 00000000..b6646d0e
--- /dev/null
+++ b/jirs-client/static/logo.svg
@@ -0,0 +1,45 @@
+<svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        viewBox="0 0 75.76 75.76"
+        width="28"
+>
+    <defs>
+        <linearGradient
+                id="linear-gradient"
+                x1="34.64"
+                y1="15.35"
+                x2="19"
+                y2="30.99"
+                gradientUnits="userSpaceOnUse"
+        >
+            <stop offset="0.18" stop-color="rgba(0, 82, 204, 0.2)"/>
+            <stop offset="1" stop-color="#DEEBFE"/>
+        </linearGradient>
+        <linearGradient
+                id="linear-gradient-2"
+                x1="38.78"
+                y1="60.28"
+                x2="54.39"
+                y2="44.67"
+                xlink:href="#linear-gradient"
+        />
+    </defs>
+    <title>Jira Software-blue</title>
+    <g id="Layer_2" data-name="Layer 2">
+        <g id="Blue">
+            <path
+                    style="fill: #DEEBFE;"
+            d="M72.4,35.76,39.8,3.16,36.64,0h0L12.1,24.54h0L.88,35.76A3,3,0,0,0,.88,40L23.3,62.42,36.64,75.76,61.18,51.22l.38-.38L72.4,40A3,3,0,0,0,72.4,35.76ZM36.64,49.08l-11.2-11.2,11.2-11.2,11.2,11.2Z"
+            />
+            <path
+                    style="fill: url(#linear-gradient)"
+            d="M36.64,26.68A18.86,18.86,0,0,1,36.56.09L12.05,24.59,25.39,37.93,36.64,26.68Z"
+            />
+            <path
+                    style="fill: url(#linear-gradient-2)"
+                    d="M47.87,37.85,36.64,49.08a18.86,18.86,0,0,1,0,26.68h0L61.21,51.19Z"
+            />
+        </g>
+    </g>
+</svg>
diff --git a/jirs-client/static/project-avatar.svg b/jirs-client/static/project-avatar.svg
new file mode 100644
index 00000000..6263be5e
--- /dev/null
+++ b/jirs-client/static/project-avatar.svg
@@ -0,0 +1,95 @@
+<svg
+        viewBox="0 0 128 128"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        width="40"
+        height="40"
+>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="128" height="128" fill="#FF5630" />
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="project_avatar_settings">
+            <g>
+                <rect id="path-1" x="0" y="0" width="128" height="128" fill="#FF5630" />
+                <g id="Settings" fill-rule="nonzero">
+                    <g transform="translate(20.000000, 17.000000)">
+                        <path
+                                d="M74.578,84.289 L72.42,84.289 C70.625,84.289 69.157,82.821 69.157,81.026 L69.157,16.537 C69.157,14.742 70.625,13.274 72.42,13.274 L74.578,13.274 C76.373,13.274 77.841,14.742 77.841,16.537 L77.841,81.026 C77.842,82.82 76.373,84.289 74.578,84.289 Z"
+                                id="Shape"
+                                fill="#2A5083"
+                        />
+                        <path
+                                d="M14.252,84.289 L12.094,84.289 C10.299,84.289 8.831,82.821 8.831,81.026 L8.831,16.537 C8.831,14.742 10.299,13.274 12.094,13.274 L14.252,13.274 C16.047,13.274 17.515,14.742 17.515,16.537 L17.515,81.026 C17.515,82.82 16.047,84.289 14.252,84.289 Z"
+                                id="Shape"
+                                fill="#2A5083"
+                        />
+                        <rect
+                                id="Rectangle-path"
+                                fill="#153A56"
+                                x="8.83"
+                                y="51.311"
+                                width="8.685"
+                                height="7.763"
+                        />
+                        <path
+                                d="M13.173,53.776 L13.173,53.776 C6.342,53.776 0.753,48.187 0.753,41.356 L0.753,41.356 C0.753,34.525 6.342,28.936 13.173,28.936 L13.173,28.936 C20.004,28.936 25.593,34.525 25.593,41.356 L25.593,41.356 C25.593,48.187 20.004,53.776 13.173,53.776 Z"
+                                id="Shape"
+                                fill="#FFFFFF"
+                        />
+                        <path
+                                d="M18.021,43.881 L8.324,43.881 C7.453,43.881 6.741,43.169 6.741,42.298 L6.741,41.25 C6.741,40.379 7.453,39.667 8.324,39.667 L18.021,39.667 C18.892,39.667 19.604,40.379 19.604,41.25 L19.604,42.297 C19.605,43.168 18.892,43.881 18.021,43.881 Z"
+                                id="Shape"
+                                fill="#2A5083"
+                                opacity="0.2"
+                        />
+                        <rect
+                                id="Rectangle-path"
+                                fill="#153A56"
+                                x="69.157"
+                                y="68.307"
+                                width="8.685"
+                                height="7.763"
+                        />
+                        <path
+                                d="M73.499,70.773 L73.499,70.773 C66.668,70.773 61.079,65.184 61.079,58.353 L61.079,58.353 C61.079,51.522 66.668,45.933 73.499,45.933 L73.499,45.933 C80.33,45.933 85.919,51.522 85.919,58.353 L85.919,58.353 C85.919,65.183 80.33,70.773 73.499,70.773 Z"
+                                id="Shape"
+                                fill="#FFFFFF"
+                        />
+                        <path
+                                d="M78.348,60.877 L68.651,60.877 C67.78,60.877 67.068,60.165 67.068,59.294 L67.068,58.247 C67.068,57.376 67.781,56.664 68.651,56.664 L78.348,56.664 C79.219,56.664 79.931,57.377 79.931,58.247 L79.931,59.294 C79.931,60.165 79.219,60.877 78.348,60.877 Z"
+                                id="Shape"
+                                fill="#2A5083"
+                                opacity="0.2"
+                        />
+                        <path
+                                d="M44.415,84.289 L42.257,84.289 C40.462,84.289 38.994,82.821 38.994,81.026 L38.994,16.537 C38.994,14.742 40.462,13.274 42.257,13.274 L44.415,13.274 C46.21,13.274 47.678,14.742 47.678,16.537 L47.678,81.026 C47.678,82.82 46.21,84.289 44.415,84.289 Z"
+                                id="Shape"
+                                fill="#2A5083"
+                        />
+                        <rect
+                                id="Rectangle-path"
+                                fill="#153A56"
+                                x="38.974"
+                                y="23.055"
+                                width="8.685"
+                                height="7.763"
+                        />
+                        <path
+                                d="M43.316,25.521 L43.316,25.521 C36.485,25.521 30.896,19.932 30.896,13.101 L30.896,13.101 C30.896,6.27 36.485,0.681 43.316,0.681 L43.316,0.681 C50.147,0.681 55.736,6.27 55.736,13.101 L55.736,13.101 C55.736,19.932 50.147,25.521 43.316,25.521 Z"
+                                id="Shape"
+                                fill="#FFFFFF"
+                        />
+                        <path
+                                d="M48.165,15.626 L38.468,15.626 C37.597,15.626 36.885,14.914 36.885,14.043 L36.885,12.996 C36.885,12.125 37.597,11.413 38.468,11.413 L48.165,11.413 C49.036,11.413 49.748,12.125 49.748,12.996 L49.748,14.043 C49.748,14.913 49.036,15.626 48.165,15.626 Z"
+                                id="Shape"
+                                fill="#2A5083"
+                                opacity="0.2"
+                        />
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>