diff --git a/app.tpl b/app.tpl
index 9afcd77..30c5596 100644
--- a/app.tpl
+++ b/app.tpl
@@ -1,6 +1,5 @@
 {{define "main"}}
-<main class='fade-in-2'>
-<div id="app"></div>
+<main id="app" class='fade-in-2'>
 </main>
 <script type="module" src="/assets/app.js" ></script>
 {{end}}
diff --git a/assets/image/icon/cog.svg b/assets/image/icon/cog.svg
new file mode 100644
index 0000000..20f2225
--- /dev/null
+++ b/assets/image/icon/cog.svg
@@ -0,0 +1,4 @@
+<svg width="15px" height="15px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.944 0.5L5.858 0.936707L5.52901 2.53467C5.00301 2.73554 4.526 3.02037 4.095 3.35815L2.487 2.8205L2.05501 2.68658L1.83101 3.07233L0.723999 4.9231L0.5 5.3089L0.828003 5.5957L2.07201 6.65399C2.02701 6.93081 1.96901 7.20461 1.96901 7.49542C1.96901 7.78623 2.02701 8.0601 2.07201 8.33691L0.828003 9.3952L0.5 9.68201L0.723999 10.0677L1.83101 11.9186L2.05501 12.3053L2.487 12.1704L4.095 11.6328C4.526 11.9705 5.00301 12.2553 5.52901 12.4562L5.858 14.0541L5.944 14.4909H9.05501L9.142 14.0541L9.47 12.4562C9.996 12.2553 10.473 11.9705 10.904 11.6328L12.512 12.1704L12.944 12.3053L13.169 11.9186L14.275 10.0677L14.5 9.68201L14.171 9.3952L12.927 8.33691C12.973 8.0601 13.03 7.78623 13.03 7.49542C13.03 7.20461 12.973 6.93081 12.927 6.65399L14.171 5.5957L14.5 5.3089L14.275 4.9231L13.169 3.07233L12.944 2.68658L12.512 2.8205L10.904 3.35815C10.473 3.02037 9.996 2.73554 9.47 2.53467L9.142 0.936707L9.05501 0.5H5.944Z" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.49963 7.49542C9.49963 8.5987 8.60363 9.49414 7.49963 9.49414C6.39563 9.49414 5.49963 8.5987 5.49963 7.49542C5.49963 6.39214 6.39563 5.49677 7.49963 5.49677C8.60363 5.49677 9.49963 6.39214 9.49963 7.49542Z" stroke="black" stroke-linecap="square" stroke-linejoin="round"/>
+</svg>
diff --git a/assets/image/icon/door-closed-fill.svg b/assets/image/icon/door-closed-fill.svg
new file mode 100644
index 0000000..1d2a036
--- /dev/null
+++ b/assets/image/icon/door-closed-fill.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-door-closed-fill" viewBox="0 0 16 16">
+  <path d="M12 1a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2a1 1 0 0 1 1-1h8zm-2 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
+</svg>
\ No newline at end of file
diff --git a/assets/image/icon/door-closed.svg b/assets/image/icon/door-closed.svg
new file mode 100644
index 0000000..3eab448
--- /dev/null
+++ b/assets/image/icon/door-closed.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-door-closed" viewBox="0 0 16 16">
+  <path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"/>
+  <path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/>
+</svg>
\ No newline at end of file
diff --git a/assets/image/icon/grid-fill.svg b/assets/image/icon/grid-fill.svg
new file mode 100644
index 0000000..202265f
--- /dev/null
+++ b/assets/image/icon/grid-fill.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grid-fill" viewBox="0 0 16 16">
+  <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
+</svg>
\ No newline at end of file
diff --git a/assets/image/icon/house-fill.svg b/assets/image/icon/house-fill.svg
new file mode 100644
index 0000000..e782589
--- /dev/null
+++ b/assets/image/icon/house-fill.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
+  <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
+</svg>
\ No newline at end of file
diff --git a/assets/image/icon/house.svg b/assets/image/icon/house.svg
new file mode 100644
index 0000000..7baa23d
--- /dev/null
+++ b/assets/image/icon/house.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
+  <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
+</svg>
\ No newline at end of file
diff --git a/assets/image/icon/journal-check.svg b/assets/image/icon/journal-check.svg
new file mode 100644
index 0000000..41b97e9
--- /dev/null
+++ b/assets/image/icon/journal-check.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-check" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M10.854 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 8.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
+  <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
+  <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
+</svg>
\ No newline at end of file
diff --git a/assets/image/icon/journal-plus.svg b/assets/image/icon/journal-plus.svg
new file mode 100644
index 0000000..fa6d702
--- /dev/null
+++ b/assets/image/icon/journal-plus.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-plus" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 5.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V10a.5.5 0 0 1-1 0V8.5H6a.5.5 0 0 1 0-1h1.5V6a.5.5 0 0 1 .5-.5z"/>
+  <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
+  <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
+</svg>
\ No newline at end of file
diff --git a/assets/image/icon/journals.svg b/assets/image/icon/journals.svg
new file mode 100644
index 0000000..03f6dad
--- /dev/null
+++ b/assets/image/icon/journals.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journals" viewBox="0 0 16 16">
+  <path d="M5 0h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2 2 2 0 0 1-2 2H3a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1H1a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v9a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1H3a2 2 0 0 1 2-2z"/>
+  <path d="M1 6v-.5a.5.5 0 0 1 1 0V6h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V9h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 2.5v.5H.5a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1H2v-.5a.5.5 0 0 0-1 0z"/>
+</svg>
\ No newline at end of file
diff --git a/assets/image/icon/plus-square-fill.svg b/assets/image/icon/plus-square-fill.svg
new file mode 100644
index 0000000..0d5e15c
--- /dev/null
+++ b/assets/image/icon/plus-square-fill.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square-fill" viewBox="0 0 16 16">
+  <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z"/>
+</svg>
\ No newline at end of file
diff --git a/assets/image/icon/plus.svg b/assets/image/icon/plus.svg
new file mode 100644
index 0000000..5b088c0
--- /dev/null
+++ b/assets/image/icon/plus.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
+  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
+</svg>
\ No newline at end of file
diff --git a/assets/image/mintberry.jpg b/assets/image/mintberry.jpg
new file mode 100644
index 0000000..299e85c
Binary files /dev/null and b/assets/image/mintberry.jpg differ
diff --git a/assets/main.css b/assets/main.css
index 5ec6a2f..2296579 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -1,3 +1,51 @@
+body {
+	margin: 0;
+}
+
 main {
-	background: blue;
+	/* background: blue; */
+}
+
+main .panel {
+	height: 100%;
+	position: absolute;
+}
+
+menu.sidebar {
+	height: calc(100% - 50px);
+	position: relative;
+	margin: 0;
+	padding: 25px 10px;
+	background: #F7F9FA;
+	list-style: none;
+	font-size: 18px;
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+
+menu.sidebar li {
+	color: #4C555E;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	margin: 5px 0;
+}
+
+/* The user avatar */
+menu.sidebar img {
+	width: 50px;
+	height: 50px;
+	margin: 0 auto;
+	border-radius: 50%;
+}
+
+menu.sidebar li:hover {
+	color: #1D262E;
+	cursor: pointer;
+}
+
+menu.sidebar svg {
+	height: 24px;
+	width: 24px;
 }
diff --git a/components/App.vue b/components/App.vue
deleted file mode 100644
index 3bce6e7..0000000
--- a/components/App.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-<div>hello world</div>
-</template>
-
-<script>
-</script>
diff --git a/components/app.vue b/components/app.vue
new file mode 100644
index 0000000..d300780
--- /dev/null
+++ b/components/app.vue
@@ -0,0 +1,33 @@
+<template>
+<div class="panel">
+
+<side-bar :role="user.status">
+</side-bar>
+
+<div v-if="loading">
+</div>
+
+<div v-else-if="!loading"></div>
+
+</div>
+</template>
+
+<script>
+import SideBar from "./sidebar.vue"
+
+const user = {
+ 	firstName: "test",
+	lastName: "user",
+	id: 12,
+	status: 1,
+ }
+
+export default {
+	components: {SideBar},
+	data() {
+		return {
+			loading: true, user: user
+		}
+	}
+}
+</script>
diff --git a/components/home.vue b/components/home.vue
new file mode 100644
index 0000000..6beff51
--- /dev/null
+++ b/components/home.vue
@@ -0,0 +1,2 @@
+<template>
+</template>
diff --git a/components/sidebar.vue b/components/sidebar.vue
new file mode 100644
index 0000000..1cbbb74
--- /dev/null
+++ b/components/sidebar.vue
@@ -0,0 +1,82 @@
+<template>
+<menu class="sidebar">
+<img
+src="/assets/image/mintberry.jpg">
+
+<li>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+fill="currentColor" class="bi bi-house" viewBox="0 0 16 16"> <path
+fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0
+.5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2
+13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/> <path
+fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0
+1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
+</svg>
+<span>Home</span>
+</li>
+
+<li>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+fill="currentColor" class="bi bi-journal-plus" viewBox="0 0 16 16"> <path
+fill-rule="evenodd" d="M8 5.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V10a.5.5
+0 0 1-1 0V8.5H6a.5.5 0 0 1 0-1h1.5V6a.5.5 0 0 1 .5-.5z"/> <path d="M3 0h10a2 2 0
+0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0
+1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/> <path d="M1
+5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1
+1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0
+0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/> </svg>
+<span>New</span>
+</li>
+
+<li>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+fill="currentColor" class="bi bi-journals" viewBox="0 0 16 16"> <path d="M5
+0h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2 2 2 0 0 1-2 2H3a2 2 0 0 1-2-2h1a1 1 0 0 0 1
+1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1H1a2 2 0 0 1 2-2h8a2 2 0 0 1 2
+2v9a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1H3a2 2 0 0 1 2-2z"/> <path
+d="M1 6v-.5a.5.5 0 0 1 1 0V6h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5
+0 0 1 1 0V9h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 2.5v.5H.5a.5.5 0 0 0 0
+1h2a.5.5 0 0 0 0-1H2v-.5a.5.5 0 0 0-1 0z"/> </svg>
+<span>Estimates</span>
+</li>
+
+<li>
+<svg width="15px" height="15px" viewBox="0 0 15 15" fill="none"
+xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd"
+clip-rule="evenodd" d="M5.944 0.5L5.858 0.936707L5.52901 2.53467C5.00301 2.73554
+4.526 3.02037 4.095 3.35815L2.487 2.8205L2.05501 2.68658L1.83101
+3.07233L0.723999 4.9231L0.5 5.3089L0.828003 5.5957L2.07201 6.65399C2.02701
+6.93081 1.96901 7.20461 1.96901 7.49542C1.96901 7.78623 2.02701 8.0601 2.07201
+8.33691L0.828003 9.3952L0.5 9.68201L0.723999 10.0677L1.83101 11.9186L2.05501
+12.3053L2.487 12.1704L4.095 11.6328C4.526 11.9705 5.00301 12.2553 5.52901
+12.4562L5.858 14.0541L5.944 14.4909H9.05501L9.142 14.0541L9.47 12.4562C9.996
+12.2553 10.473 11.9705 10.904 11.6328L12.512 12.1704L12.944 12.3053L13.169
+11.9186L14.275 10.0677L14.5 9.68201L14.171 9.3952L12.927 8.33691C12.973 8.0601
+13.03 7.78623 13.03 7.49542C13.03 7.20461 12.973 6.93081 12.927 6.65399L14.171
+5.5957L14.5 5.3089L14.275 4.9231L13.169 3.07233L12.944 2.68658L12.512
+2.8205L10.904 3.35815C10.473 3.02037 9.996 2.73554 9.47 2.53467L9.142
+0.936707L9.05501 0.5H5.944Z" stroke="currentColor" stroke-linecap="square"
+stroke-linejoin="round"/> <path fill-rule="evenodd" clip-rule="evenodd"
+d="M9.49963 7.49542C9.49963 8.5987 8.60363 9.49414 7.49963 9.49414C6.39563
+9.49414 5.49963 8.5987 5.49963 7.49542C5.49963 6.39214 6.39563 5.49677 7.49963
+5.49677C8.60363 5.49677 9.49963 6.39214 9.49963 7.49542Z" stroke="currentColor"
+stroke-linecap="square" stroke-linejoin="round"/> </svg>
+<span>Settings</span>
+</li>
+
+<li>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-door-closed" viewBox="0 0 16 16">
+  <path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"/>
+  <path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/>
+</svg>
+<span>Sign out</span>
+</li>
+
+</menu>
+</template>
+
+<script>
+export default {
+	props: ['role'],
+}
+</script>
diff --git a/main.js b/main.js
index 68b4a26..24adc3c 100644
--- a/main.js
+++ b/main.js
@@ -1,5 +1,5 @@
 import {createApp} from "vue"
-import App from "./components/App.vue"
+import App from "./components/app.vue"
 import "./assets/main.css"
 
 createApp(App).mount("#app")