diff --git a/client/dockerfile b/client/dockerfile
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/App.vue b/client/src/App.vue
index 505315b..da96f5d 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -2,9 +2,7 @@
   <div id="app">
     <div id="nav">
       <b-navbar variant="faded" type="light">
-        <b-navbar-brand href="#">AppName</b-navbar-brand>
-        <router-link to="/">Home</router-link>|
-        <router-link to="/ping">About</router-link>
+        <b-navbar-brand href="#">CalcMilvert</b-navbar-brand>
       </b-navbar>
     </div>
     <router-view />
@@ -30,6 +28,6 @@
 }
 
 #nav a.router-link-exact-active {
-  color: #42b983;
+  color: #5cb38b;
 }
 </style>
diff --git a/client/src/components/Books.vue b/client/src/components/Books.vue
deleted file mode 100644
index c291b47..0000000
--- a/client/src/components/Books.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-  <div class="container">
-    <div class="col-sm-10">
-      <h1>Calculate</h1>
-      <hr />
-      <br />
-      <div class="form">
-      <div class="summary text-red" v-if="$v.form.$error">
-        Enter number!
-      </div>
-      <br />
-      <form @submit.prevent="submit">
-      <b-form-input v-model="form.number1"
-                    placeholder="Enter first number" type="number"
-                    :class="{ 'hasError': $v.form.number1.$error }"
-                    @input="$v.form.number1.$touch()"
-                    :state="!$v.form.number1.$error && null"
-                    ></b-form-input>
-      <br />
-      <b-form-input v-model="form.number2"
-                    placeholder="Enter second number"
-                    :class="{ 'hasError': $v.form.number1.$error }"
-                    type="number"
-                    @input="$v.form.number2.$touch()"
-                    :state="!$v.form.number2.$error && null"
-                    ></b-form-input>
-
-      <br />
-      <br />
-      <b-button type="submit"
-              class="btn btn-sm"
-              @click="onSubmitCalc"
-              >Calculate</b-button>
-      <br />
-      </form>
-      <br />
-      <br />
-      <br />
-      </div>
-      <div class="mt-2" v-if="show">{{ form.number1 }} + {{ form.number2 }} = {{ text }} </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from 'axios';
-import { required } from 'vuelidate/lib/validators';
-
-export default {
-  data() {
-    return {
-      form: {
-        number1: '',
-        number2: '',
-      },
-      text: '',
-      show: false,
-    };
-  },
-  methods: {
-    getCalc(payload) {
-      const path = 'http://localhost:5000/calc';
-      axios.post(path, payload)
-        .then((res) => {
-          this.text = res.data.text;
-          this.show = true;
-        })
-        .catch((error) => {
-          // eslint-disable-next-line
-          console.error(error);
-        });
-    },
-    onSubmitCalc(evt) {
-      evt.preventDefault();
-      this.$v.form.$touch();
-      if (this.$v.form.$error) return;
-      const payload = {
-        number1: this.form.number1,
-        number2: this.form.number2,
-      };
-      this.getCalc(payload);
-    },
-  },
-  validations: {
-    form: {
-      number1: { required },
-      number2: { required },
-    },
-  },
-};
-</script>
diff --git a/client/src/components/Calc.vue b/client/src/components/Calc.vue
new file mode 100644
index 0000000..ac5e449
--- /dev/null
+++ b/client/src/components/Calc.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class='container'>
+    <div class='col-sm-10'>
+      <h1>Måltidsenheter</h1>
+      <hr />
+      <div class='form'>
+        <div class='summary text-red' v-if='$v.form.$error'>
+          Enter number!
+        </div>
+        <br />
+        <form @submit.prevent='submit'>
+          <b-row>
+            <b-col>
+              <label for='form.number1'>Ange ditt totala inslunintag</label>
+              <b-form-input
+                id='form.number1'
+                v-model='form.number1'
+                number
+                placeholder='Enter first number'
+                type='number'
+                :class='{ hasError: $v.form.number1.$error }'
+                @input='$v.form.number1.$touch()'
+                :state='!$v.form.number1.$error && null'
+              ></b-form-input>
+            </b-col>
+            <b-col>
+              <label for='form.number2'>Ange måltidens kolhydrater</label>
+              <b-form-input
+                id='form.number2'
+                v-model='form.number2'
+                number
+                placeholder='Enter second number'
+                :class='{ hasError: $v.form.number1.$error }'
+                type='number'
+                @input='$v.form.number2.$touch()'
+                :state='!$v.form.number2.$error && null'
+              ></b-form-input>
+            </b-col>
+          </b-row>
+          <br />
+          <br />
+          <b-form-checkbox id='morning_checkbox' v-model='form.morning' name='morning_checkbox'>
+            Är det morgon?
+          </b-form-checkbox>
+          <br />
+          <br />
+          <b-button type='submit' class='btn btn-sm' @click='onSubmitCalc'>Calculate</b-button>
+          <br />
+        </form>
+      </div>
+      <div class='mt-2' v-if='show'>Du borde ta ca {{ text }} enheter</div>
+    </div>
+    <br />
+    <br />
+    <div class='col-sm-10'>
+      <h1>Korrigeringsenheter</h1>
+      <hr />
+      <br />
+      <div class='form_corr'>
+        <div class='summary text-red' v-if='$v.form_corr.$error'>
+          Enter number!
+        </div>
+        <br />
+        <form @submit.prevent='submit'>
+          <b-row>
+            <b-col>
+          <label for='form_corr.current'>Nuvarande</label>
+          <b-form-input
+            id='form_corr.current'
+            v-model='form_corr.current'
+            number
+            placeholder='Enter first number'
+            type='number'
+            :class='{ hasError: $v.form_corr.current.$error }'
+            @input='$v.form_corr.current.$touch()'
+            :state='!$v.form_corr.current.$error && null'>
+            </b-form-input>
+            </b-col>
+          <b-col>
+          <label for='form_corr.wanted'>Ange måltidens kolhydrater</label>
+          <b-form-input
+            id='form_corr.wanted'
+            v-model='form_corr.wanted'
+            number
+            placeholder='Enter second number'
+            :class='{ hasError: $v.form_corr.wanted.$error }'
+            type='number'
+            @input='$v.form_corr.wanted.$touch()'
+            :state='!$v.form_corr.wanted.$error && null'
+          ></b-form-input>
+          </b-col>
+          </b-row>
+          <br />
+          <br />
+          <b-button type='submit' class='btn btn-sm' @click='onSubmitCorr'>Calculate</b-button>
+          <br />
+        </form>
+        <br />
+      </div>
+      <div class='mt-2' v-if='show_current'>Du borde ta ca {{ text_current }} enheter</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { required } from 'vuelidate/lib/validators';
+
+export default {
+  data() {
+    return {
+      form: {
+        number1: 62,
+        number2: 0,
+        morning: false,
+      },
+      form_corr: {
+        current: '',
+        wanted: '',
+      },
+      text: '',
+      text_current: '',
+      show: false,
+      show_current: false,
+    };
+  },
+  methods: {
+    onSubmitCalc(evt) {
+      evt.preventDefault();
+      this.$v.form.$touch();
+      if (this.$v.form_corr.$error) return;
+      if (this.form.morning) {
+        this.text = this.form.number1 + this.form.number2;
+        this.show = true;
+      } else {
+        this.text = this.form.number1 - this.form.number2;
+        this.show = true;
+      }
+    },
+    onSubmitCorr(evt) {
+      evt.preventDefault();
+      this.$v.form_corr.$touch();
+      if (this.$v.form.$error) return;
+      this.text_current = this.form_corr.current - this.form_corr.wanted;
+      this.show_current = true;
+    },
+  },
+  validations: {
+    form: {
+      number1: { required },
+      number2: { required },
+    },
+    form_corr: {
+      current: { required },
+      wanted: { required },
+    },
+  },
+};
+</script>
diff --git a/client/src/components/HelloWorld.vue b/client/src/components/HelloWorld.vue
deleted file mode 100644
index aa3ab72..0000000
--- a/client/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String,
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/client/src/components/Ping.vue b/client/src/components/Ping.vue
deleted file mode 100644
index 5f073b7..0000000
--- a/client/src/components/Ping.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div class="container">
-    <button type="button" class="btn btn-primary">{{ msg }}</button>
-  </div>
-</template>
-
-<script>
-import axios from 'axios';
-
-export default {
-  name: 'Ping',
-  data() {
-    return {
-      msg: '',
-    };
-  },
-  methods: {
-    getMessage() {
-      const path = 'http://localhost:5000/ping';
-      axios.get(path)
-        .then((res) => {
-          this.msg = res.data;
-        })
-        .catch((error) => {
-          // eslint-disable-next-line
-          console.error(error);
-        });
-    },
-  },
-  created() {
-    this.getMessage();
-  },
-};
-</script>
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 184bf00..e3a59cb 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import Ping from '../components/Ping.vue';
-import Books from '../components/Books.vue';
+// eslint-disable-next-line import/no-unresolved
+import Calc from '../components/Calc.vue';
 
 Vue.use(VueRouter);
 
@@ -11,13 +11,8 @@ export default new VueRouter({
   routes: [
     {
       path: '/',
-      name: 'Books',
-      component: Books,
-    },
-    {
-      path: '/ping',
-      name: 'Ping',
-      component: Ping,
+      name: 'Calc',
+      component: Calc,
     },
   ],
 });
diff --git a/client/tests/unit/calc.spec.js b/client/tests/unit/calc.spec.js
new file mode 100644
index 0000000..f814de8
--- /dev/null
+++ b/client/tests/unit/calc.spec.js
@@ -0,0 +1,24 @@
+import { shallowMount } from '@vue/test-utils';
+import Calc from '@/components/Calc.vue';
+
+let url = '';
+let data = '';
+
+const mockHttp = {
+  get: (_url, _data) => {
+    return new Promise((resolve) => {
+      url = _url;
+      data = _data;
+      resolve();
+    });
+  }
+};
+
+describe('Books', () => {
+  const wrapper = shallowMount(Calc);
+  it('Calc is a component', () => {
+    // expect(wrapper.isVueInstance()).toBeTruthy()
+    wrapper.setData({ number1: 1});
+
+  });
+});
diff --git a/client/tests/unit/helloworld.spec.js b/client/tests/unit/helloworld.spec.js
deleted file mode 100644
index 6fa693d..0000000
--- a/client/tests/unit/helloworld.spec.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import HelloWorld from '@/components/HelloWorld.vue';
-
-describe('HelloWorld.vue', () => {
-  it('renders props.msg when passed', () => {
-    const msg = 'new message';
-    const wrapper = shallowMount(HelloWorld, {
-      propsData: { msg },
-    });
-    expect(wrapper.text()).toMatch(msg);
-  });
-});