diff --git a/dashboard_ex/index.html b/dashboard_ex/index.html
index f5e2d68..3b608bc 100644
--- a/dashboard_ex/index.html
+++ b/dashboard_ex/index.html
@@ -30,13 +30,13 @@
 		.header {
 			background-color: #5C666F;
 			grid-column: 1 / -1;
-			box-shadow: 0 2px 2px 0 rgb(50,50,50, 0.15);
+			box-shadow: 0 2px 2px 0 rgba(50,50,50, 0.15);
 		}
 
 		.menu {
 			background-color: #01B48F;
 			grid-column: 1 / 3;
-			box-shadow: 0 10px 10px 0 rgb(50,50,50, 0.50);
+			box-shadow: 0 10px 10px 0 rgba(50,50,50, 0.50);
 		}
 
 		.menu > a {
diff --git a/vue_grid/.idea/codeStyles/codeStyleConfig.xml b/vue_grid/.idea/codeStyles/codeStyleConfig.xml
new file mode 100644
index 0000000..a55e7a1
--- /dev/null
+++ b/vue_grid/.idea/codeStyles/codeStyleConfig.xml
@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>
\ No newline at end of file
diff --git a/vue_grid/frontend/src/components/Login.vue b/vue_grid/frontend/src/components/Login.vue
new file mode 100644
index 0000000..8e53936
--- /dev/null
+++ b/vue_grid/frontend/src/components/Login.vue
@@ -0,0 +1,22 @@
+<template>
+  <form action="">
+    <input type="text">
+    <input type="password">
+  </form>
+</template>
+
+<script>
+export default {
+  name: "Login",
+  data () {
+    return {
+      user_name: '',
+      password: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/vue_grid/frontend/src/components/Ping.vue b/vue_grid/frontend/src/components/Ping.vue
new file mode 100644
index 0000000..e2fedf8
--- /dev/null
+++ b/vue_grid/frontend/src/components/Ping.vue
@@ -0,0 +1,18 @@
+<template>
+  <h1>{{ msg }}</h1>
+</template>
+
+<script>
+export default {
+  name: 'Ping',
+  data () {
+    return {
+      msg: 'Pong'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>