diff --git a/front/components/Calculator/CalculatorForm.vue b/front/components/Calculator/CalculatorForm.vue
new file mode 100644
index 0000000..27c38a4
--- /dev/null
+++ b/front/components/Calculator/CalculatorForm.vue
@@ -0,0 +1,95 @@
+<template>
+    <div>
+        <h3 style="margin-bottom: 10px">Składniki</h3>
+        <Form ref="ingredients" :model="ingredients">
+            <FormItem
+                    v-for="(item, index) in ingredients.items"
+                    :key="index"
+                    label="Składnik"
+                    :prop="'items.' + index + '.value'">
+                <Row style="display: flex; justify-items: center">
+                    <AutoComplete
+                            v-model="item.name"
+                            @on-select="appendIngredient(item, $event)"
+                            @on-search="handleSearch"
+                            placeholder="Nazwa składnika">
+                        <Option v-for="sugg in suggestions" :value="sugg.name" :key="sugg.id">{{ sugg.name }}
+                        </Option>
+                    </AutoComplete>
+                    <InputNumber class="input" v-model="item.weight"
+                                 :min="1"
+                                 :formatter="value => `${value} g`"
+                                 :parser="value => value.replace(' g', '')"
+                                 style="margin-left: 3px; width: 20%"/>
+                    <Button @click="handleRemoveIngredient(index)" style="margin-left: 3px">Usuń</Button>
+                </Row>
+            </FormItem>
+            <FormItem>
+                <Row>
+                    <Button type="dashed" long @click="handleAddIngredient" icon="md-add">Dodaj składnik
+                    </Button>
+                </Row>
+            </FormItem>
+        </Form>
+        <Button type="primary">Oblicz</Button>
+        <Button type="error" @click="resetForm">Resetuj</Button>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "CalculatorForm",
+        data() {
+            return {
+                active: false,
+                modal_loading: false,
+                suggestions: [],
+                ingredients_idx: 1,
+                ingredients: {
+                    items: []
+                }
+            };
+        },
+        methods: {
+            resetForm() {
+                this.modal_loading = false;
+                this.$refs.ingredients.resetFields();
+                this.ingredients_idx = 1;
+                this.ingredients = {
+                    items: []
+                };
+                this.suggestions = []
+            },
+            handleAddIngredient() {
+                this.ingredients_idx++;
+                this.ingredients.items.push({
+                    value: '',
+                    index: this.ingredients_idx
+                });
+            },
+            appendIngredient(item, val, instance) {
+                item.id = this.suggestions.find(obj => obj.name === val).id
+            },
+            handleRemoveIngredient(index) {
+                this.ingredients.items.splice(index, 1);
+            },
+            handleSearch(value) {
+                this.$axios.get('/product', {
+                    params: {
+                        limit: 5,
+                        search: value
+                    }
+                })
+                    .then((res) => {
+                        this.suggestions = res.data.data.products.data
+                    })
+            }
+        }
+    };
+</script>
+
+<style scoped>
+    .input {
+        width: 15%;
+    }
+</style>
diff --git a/front/components/Layout/ClearBowlHeader.vue b/front/components/Layout/ClearBowlHeader.vue
index 2a2b27e..d1159ea 100644
--- a/front/components/Layout/ClearBowlHeader.vue
+++ b/front/components/Layout/ClearBowlHeader.vue
@@ -90,12 +90,6 @@
         margin-left: 5px;
     }
 
-    /*.layout-nav {*/
-    /*    width: 320px;*/
-    /*    margin: 0 auto;*/
-    /*    margin-right: 20px;*/
-    /*}*/
-
     .ivu-menu-dark.ivu-menu-horizontal .ivu-menu-item, .ivu-menu-dark.ivu-menu-horizontal .ivu-menu-submenu {
         color: black;
     }
diff --git a/front/pages/calculator.vue b/front/pages/calculator.vue
new file mode 100644
index 0000000..0259e65
--- /dev/null
+++ b/front/pages/calculator.vue
@@ -0,0 +1,18 @@
+<template>
+    <CalculatorForm style="width: 50%"/>
+</template>
+
+<script>
+    import CalculatorForm from "../components/Calculator/CalculatorForm";
+
+    export default {
+        name: "calculator",
+        components: {
+            CalculatorForm
+        },
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/front/pages/index.vue b/front/pages/index.vue
index f5d4eae..1cb004b 100644
--- a/front/pages/index.vue
+++ b/front/pages/index.vue
@@ -12,12 +12,14 @@
                 </NuxtLink>
             </Col>
             <Col span="6">
-                <Card class="cb-menu">
-                    <Icon type="ios-calculator" size="100" color="white"/>
-                    <div style="text-align:center">
-                        <h3>Kalkulator</h3>
-                    </div>
-                </Card>
+                <NuxtLink to="/calculator">
+                    <Card class="cb-menu">
+                        <Icon type="ios-calculator" size="100" color="white"/>
+                        <div style="text-align:center">
+                            <h3>Kalkulator</h3>
+                        </div>
+                    </Card>
+                </NuxtLink>
             </Col>
             <Col span="6">
                 <Card class="cb-menu">