diff --git a/frontend/index.html b/frontend/index.html
index 99f583a..d8146f5 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>DeguApp</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 741ac86..4f3d02b 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -24,6 +24,17 @@ import { RouterLink, RouterView } from 'vue-router'
 
   <main class="content">
     <RouterView />
+    <button type="button" class="btn" @click="showModal">
+      Open Modal!
+    </button>
+    <Modal
+      v-show="isModalVisible"
+      @close="closeModal"
+    >
+      <template #header>
+        <h1>Tohle Je Muj Header</h1>
+      </template>
+    </Modal>
   </main>
 
   <!-- <footer>
@@ -32,4 +43,27 @@ import { RouterLink, RouterView } from 'vue-router'
   </footer> -->
 </template>
 
+<script>
+  import Modal from './components/Modal.vue';
+  export default {
+    name: 'App',
+    components: {
+      Modal,
+    },
+    data() {
+      return {
+        isModalVisible: false,
+      };
+    },
+    methods: {
+      showModal() {
+        this.isModalVisible = true;
+      },
+      closeModal() {
+        this.isModalVisible = false;
+      }
+    }
+  };
+</script>
+
 <style scoped></style>
diff --git a/frontend/src/assets/_vars.scss b/frontend/src/assets/_vars.scss
deleted file mode 100644
index 3f0b170..0000000
--- a/frontend/src/assets/_vars.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-:root {
-    --clr1: #0f0f0f;
-    --clr2: #3f3f3f;
-    --clr3: #232D3F;
-    --clr4: #23455b;
-    --clr5: #223440;
-    --clr6: #ffffff;    
-}
\ No newline at end of file
diff --git a/frontend/src/assets/main.scss b/frontend/src/assets/main.scss
new file mode 100644
index 0000000..47ed66d
--- /dev/null
+++ b/frontend/src/assets/main.scss
@@ -0,0 +1,2 @@
+@import 'vars';
+@import 'nav';
\ No newline at end of file
diff --git a/frontend/src/assets/vars.scss b/frontend/src/assets/vars.scss
new file mode 100644
index 0000000..43f79da
--- /dev/null
+++ b/frontend/src/assets/vars.scss
@@ -0,0 +1,10 @@
+$clr-1: orange;
+$clr1: #0f0f0f;
+$clr2: #3f3f3f;
+$clr3: #232D3F;
+$clr4: #23455b;
+$clr5: #223440;
+$clr6: #ffffff;
+
+body {
+}
\ No newline at end of file
diff --git a/frontend/src/components/Modal.vue b/frontend/src/components/Modal.vue
new file mode 100644
index 0000000..450365e
--- /dev/null
+++ b/frontend/src/components/Modal.vue
@@ -0,0 +1,114 @@
+<template>
+    <div class="modal-backdrop">
+        <div class="modal">
+            <header class="modal-header">
+              <slot name="header">
+                This is the default title!
+              </slot>
+              <button
+                type="button"
+                class="btn-close"
+                @click="close"
+              >
+                x
+              </button>
+            </header>
+
+            <section class="modal-body">
+              <slot name="body">
+                This is the default body!
+              </slot>
+             </section>
+
+            <footer class="modal-footer">
+              <slot name="footer">
+                This is the default footer!
+              </slot>
+              <button
+                type="button"
+                class="btn-green"
+                @click="close"
+              >
+                Close Modal
+              </button>
+            </footer>
+        </div>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: 'ModalComponent',
+    methods: {
+      close() {
+        this.$emit('close');
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import "@/assets/vars";
+  .modal-backdrop {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .modal {
+    background: $clr-1;
+    box-shadow: 2px 2px 20px 1px;
+    overflow-x: auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .modal-header,
+  .modal-footer {
+    padding: 15px;
+    display: flex;
+  }
+
+  .modal-header {
+    position: relative;
+    border-bottom: 1px solid #eeeeee;
+    color: #4AAE9B;
+    justify-content: space-between;
+  }
+
+  .modal-footer {
+    border-top: 1px solid #eeeeee;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+
+  .modal-body {
+    position: relative;
+    padding: 20px 10px;
+  }
+
+  .btn-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    border: none;
+    font-size: 20px;
+    padding: 10px;
+    cursor: pointer;
+    font-weight: bold;
+    color: #4AAE9B;
+    background: transparent;
+  }
+
+  .btn-green {
+    color: white;
+    background: #4AAE9B;
+    border: 1px solid #4AAE9B;
+    border-radius: 2px;
+  }
+</style>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 670e5df..6954872 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,6 +1,4 @@
-import './assets/_general.scss'
-import './assets/_vars.scss'
-import './assets/nav.scss'
+import './assets/main.scss'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 3bd35c8..57923fb 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -12,9 +12,6 @@ const router = createRouter({
     {
       path: '/about',
       name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
       component: () => import('../views/AboutView.vue')
     },
     {
