<script language="JavaScript">
<!--
function _AN_global_var_init(){
	_AN_this_url = "/prx/000/";
	_AN_base_scheme = "https";
	_AN_base_host = "https://github.com";
	_AN_base_path = "https://github.com/victorlucss/Intricately-Challenge/compare/";
	_AN_encode_urls = 0;
	_AN_mpo = 1;
	_AN_md = 0;
	_AN_rel_urls = 1;
	_AN_nav_switch = 0;
	_AN_nav_allowurl = 1;
	_AN_nav_override = 0;
	_AN_has_iframe = 0;
	_AN_dbg_flags = null;
	_AN_nav_use_aaa = 1;
	_AN_expires_pass = 0;
	_AN_wrap_evthandlers = 0;
	_AN_rewrite_param_exact = 0;
	_AN_obj_params = {};
} 
_AN_global_var_init();
//-->
</script>
<script language="JavaScript" src="/prx/001/http/localh/an_util.js"></script>
<script language="JavaScript" src="/prx/001/http/localh/NSLib.js"></script>

diff --git a/src/components/Input.vue b/src/components/Input.vue
index 7a5c08d..c28e938 100644
--- a/src/components/Input.vue
+++ b/src/components/Input.vue
@@ -15,7 +15,6 @@
 
     data() {
       return {
-        inputValue: this.value || '',
         minValue: parseInt(this.min),
         maxValue: parseInt(this.max),
         error: {
@@ -25,16 +24,18 @@
       }
     },
 
-    watch: {
-      value(val){
-        if(this.type !== 'currency'){
-          this.inputValue = value;
-        }else this.inputValue = parseInt(value)
-      },
+    computed: {
+      inputValue: {
+        get(){
+          return this.value || '';
+        },
 
-      inputValue(val){
-        this.validate();
-      },
+        set(val){
+          this.validate();
+          console.log('oie')
+          this.$emit('input', val);
+        }
+      }
     },
 
     methods: {
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
new file mode 100644
index 0000000..9b6f9d5
--- /dev/null
+++ b/src/components/Modal.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="modal" v-if="opened">
+    <div class="modal-overlay"></div>
+    <div class="modal-container">
+      <div class="title">
+        <h2>{{title}}</h2>
+
+        <div class="close" @click="close()"></div>
+      </div>
+
+      <div class="modal-content">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>

+  export default {
+    props: ['title', 'active'],
+
+    data(){
+      return {
+        opened: this.active
+      }
+    },
+
+    watch: {
+      active(val){
+        this.opened = val;
+      }
+    },
+
+    methods: {
+      close(){
+        this.$emit('close')
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/src/components/index.js b/src/components/index.js
index 3ca94a4..4c7bfcc 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -5,6 +5,7 @@ import SidenavLink from './SidenavLink.vue'
 import Card from './Card.vue';
 import Graphic from './Graphic.vue';
 import Input from './Input.vue';
+import Modal from './Modal.vue';
 
 export const NavbarIntricately = Navbar;
 export const FooterIntricately = Footer;
@@ -12,4 +13,5 @@ export const SidenavIntricately = Sidenav;
 export const SidenavLinkIntricately = SidenavLink;
 export const CardIntricately = Card;
 export const GraphicIntricately = Graphic;
-export const InputIntricately = Input;
\ No newline at end of file
+export const InputIntricately = Input;
+export const ModalIntricately = Modal;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index f7242a7..b574598 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,7 +3,7 @@ import router from 'Router'
 import App from './App.vue'
 import 'Styles/intricately.scss';
 import store from './store';
-import { NavbarIntricately, FooterIntricately, SidenavIntricately, SidenavLinkIntricately, CardIntricately, GraphicIntricately, InputIntricately } from './components';
+import { NavbarIntricately, FooterIntricately, SidenavIntricately, SidenavLinkIntricately, CardIntricately, GraphicIntricately, InputIntricately, ModalIntricately } from './components';
 
 Vue.component('navbar-intricately', NavbarIntricately);
 Vue.component('footer-intricately', FooterIntricately);
@@ -12,6 +12,7 @@ Vue.component('sidenavlink-intricately', SidenavLinkIntricately);
 Vue.component('card-intricately', CardIntricately);
 Vue.component('graphic-intricately', GraphicIntricately);
 Vue.component('input-intricately', InputIntricately);
+Vue.component('modal-intricately', ModalIntricately);
 
 new Vue({
   render: createElement => createElement(App),
diff --git a/src/pages/CompanyData.vue b/src/pages/CompanyData.vue
index 3d696c6..2d32433 100644
--- a/src/pages/CompanyData.vue
+++ b/src/pages/CompanyData.vue
@@ -1,21 +1,38 @@
 <template>
-  <card-intricately id="companyData">
-    <div class="wrapper">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique pretium cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec quis est eu dui consequat aliquam.
-      
-      <input-intricately type="text" required="true" label="Company name" placeholder="e.g. Your company name" />
-      <input-intricately type="currency" min="150" required="true" label="Company spend" placeholder="e.g. $150,000" />
-      <input-intricately type="currency" min="150" max="330" required="true" label="Company spend ability" placeholder="e.g. $150,000 - $330,000" />
-      <input-intricately type="textarea" required="true" label="Notes" placeholder="e.g. Good Tech Company" fullwidth="true" @click.native="openModal()" />
-    </div>
-  </card-intricately>
+  <div>
+    <modal-intricately title="Additional notes" :active="modalOpened" @close="closeModal()">
+      <input-intricately type="textarea" v-model="notes" required="true" placeholder="e.g. Good Tech Company" fullwidth="true" />
+    </modal-intricately>
+
+    <card-intricately id="companyData">
+      <div class="wrapper">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique pretium cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec quis est eu dui consequat aliquam.
+
+        <input-intricately type="text" required="true" label="Company name" placeholder="e.g. Your company name" />
+        <input-intricately type="currency" min="150" required="true" label="Company spend" placeholder="e.g. $150,000" />
+        <input-intricately type="currency" min="150" max="330" required="true" label="Company spend ability" placeholder="e.g. $150,000 - $330,000" />
+        <input-intricately type="textarea" v-model="notes" required="true" label="Notes" placeholder="e.g. Good Tech Company" fullwidth="true" @click.native="openModal()" />
+      </div>
+    </card-intricately>
+  </div>
 </template>
 
 <script>
</script>
   export default {
+    data(){
+      return {
+        modalOpened: false,
+        notes: '',
+      }
+    },
+
     methods: {
       openModal(){
-        console.log("oie")
+        this.modalOpened = true;
+      },
+
+      closeModal(){
+        this.modalOpened = false;
       }
     }
     
diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss
index dd04eaa..fcefbfd 100644
--- a/src/styles/_colors.scss
+++ b/src/styles/_colors.scss
@@ -12,4 +12,5 @@ $gainsboro: #d4d9e3;
 $dimgray: #585858;
 $lightgray: #c7c8d0;
 $lightbluegray: #ced2e0;
-$lightred: #DCC2C2;
\ No newline at end of file
+$lightred: #DCC2C2;
+$overlayblack: rgba(0,0,0,0.3);
\ No newline at end of file
diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index 633805e..9330ae6 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -3,4 +3,5 @@
 @import './sidenav.component.scss';
 @import './card.component.scss';
 @import './graphic.component.scss';
-@import './input.component.scss';
\ No newline at end of file
+@import './input.component.scss';
+@import './modal.component.scss';
\ No newline at end of file
diff --git a/src/styles/modal.component.scss b/src/styles/modal.component.scss
new file mode 100644
index 0000000..68aeed0
--- /dev/null
+++ b/src/styles/modal.component.scss
@@ -0,0 +1,80 @@
+@import './colors.scss';
+@import './variables.scss';
+
+@mixin close-icon-bar($color, $rotate) {
+  content: '';
+  position: absolute;
+  width: 2px;
+  height: 100%;
+  left: 10px;
+  transform: rotate($rotate);
+  border-radius: $defaultradius;
+  background: $color;
+}
+
+.modal {
+  .modal-overlay {
+    background: $overlayblack;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 888;
+    width: 100%;
+    height: 100%;
+  }
+
+  .modal-container {
+    background: $white;
+    border-radius: $defaultradius;
+    padding: 20px;
+    position: fixed;
+    z-index: 999;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    min-width: 40%;
+    box-shadow: 0 4px 5px 0 ($overlayblack + 30);
+
+    .title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      h2 {
+        text-transform: uppercase;
+        color: $darkgray;
+      }
+
+      .close {
+        position: relative;
+        width: 15px;
+        height: 15px;
+        
+        cursor: pointer;
+
+        &:before {
+          @include close-icon-bar($lavender, 45deg);
+        }
+
+        &:after {
+          @include close-icon-bar($lavender, -45deg);
+        }
+
+        &:hover {
+          &:before {
+            @include close-icon-bar($lavender - 20, 45deg);
+          }
+  
+          &:after {
+            @include close-icon-bar($lavender - 20, -45deg);
+          }
+        }
+
+      }
+    }
+
+    .modal-content {
+      
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/tests/index.js b/src/tests/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/tests/modal.test.js b/src/tests/modal.test.js
new file mode 100644
index 0000000..e69de29
