diff --git a/app/controllers/summary.js b/app/controllers/summary.js
new file mode 100644
index 0000000..721a6ff
--- /dev/null
+++ b/app/controllers/summary.js
@@ -0,0 +1,31 @@
+import Controller from '@ember/controller';
+import { computed } from '@ember/object';
+
+export default Controller.extend({
+  queryParams: ['p', 'c', 'f', 'height', 'weight', 'age', 'sex', 'kcal'],
+
+  pcfByPercentages: computed('p', 'c', 'f', function() {
+    if (this.p > 0 || this.c > 0 || this.f > 0) {
+      let sum = parseInt(this.p) + parseInt(this.c) + parseInt(this.f);
+      return [
+        { name: 'Białko', percent: Math.round(this.p / sum * 100) },
+        { name: 'Weglowodany', percent: Math.round(this.c / sum * 100) },
+        { name: 'Tłuszcz', percent: Math.round(this.f / sum * 100) }
+      ];
+    }
+  }),
+
+  demand: computed('height', 'weight', 'age', 'sex', function() {
+    let ret = {};
+    if (this.sex === 'male') {
+      ret.kcal = 66 + 13.7 * this.weight + 5 * this.height - 6.76 * this.age; 
+    } else {
+      ret.kcal = 655 + 9.6 * this.weight + 1.8 * this.height - 4.7 * this.age;
+    }
+    ret.p = Math.round(ret.kcal * 0.2 / 4 * 100) / 100;
+    ret.c = Math.round(ret.kcal * 0.5 / 4 * 100) / 100;
+    ret.f = Math.round(ret.kcal * 0.3 / 9 * 100) / 100;
+
+    return ret;
+  })
+});
diff --git a/app/templates/scanner.hbs b/app/templates/scanner.hbs
new file mode 100644
index 0000000..d50e91e
--- /dev/null
+++ b/app/templates/scanner.hbs
@@ -0,0 +1,111 @@
+<Modals::NewProduct @onClickAddProduct={{this.addProduct}}/>
+<div class="flex mt-2 justify-center">
+  {{#ember-webcam
+    didSnap=(action "snap")
+    didError=(action "err")
+    as |camera|}}
+    <button 
+      type="button" 
+      class="ml-2 mt-2 text-sm bg-blue-500 hover:bg-blue-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline"
+      {{on "click" (fn this.registerCamera camera)}}
+    >
+      Rozpocznij skanowanie
+    </button>
+    <button 
+      type="button" 
+      class="text-sm bg-blue-500 hover:bg-blue-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline"
+      {{ on "click" (fn this.stop)}}
+    >
+      Zatrzymaj skanowanie
+    </button>
+  {{/ember-webcam}}
+</div>
+<div class="flex bg-gray-200">
+  <div class="flex-1/3 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
+    <img 
+      id="imageToProcess"
+      width=300
+      src={{this.dataUri}}
+      class="h-64"
+      alt="podgląd"
+    >
+    <canvas id="canvasPreview" width=300 height=300></canvas>
+    <canvas id="canvasOutput" width=300 height=300></canvas>
+  </div>
+  <div class="flex w-full bg-gray-400 px-4 py-2 m-2">
+    <div class="text-gray-900 w-full">
+      <div class="p-4 flex">
+        <h1 class="text-3xl">
+          Oblicz dla:
+        </h1>
+        <div class="mt-2 ml-2">
+          <input
+            class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
+            placeholder="wiek"
+            value={{this.personalData.age}}
+            oninput={{action (mut this.personalData.age) value="target.value"}}
+          ><label class="ml-2">&lt; 10; 100 &gt;</label><br>
+          <input  
+            class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
+            placeholder="waga"
+            value={{this.personalData.weight}}
+            oninput={{action (mut this.personalData.weight) value="target.value"}}
+          ><label class="ml-2">&lt; 40; 130 &gt;</label><br>
+          <input  
+            class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
+            placeholder="wzrost"
+            value={{this.personalData.height}}
+            oninput={{action (mut this.personalData.height) value="target.value"}}
+          ><label class="ml-2">&lt; 140; 230 &gt;</label><br>
+          <div class="relative">
+            <select class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2">
+              <option onclick={{action (mut this.personalData.sex)
+              value="target.value"}} value="male">Mężczyzna</option>
+              <option onclick={{action (mut this.personalData.sex)
+              value="target.value"}} value="female">Kobieta</option>
+            </select>
+          </div>
+        </div>  
+      </div>
+        <div class="px-3 py-4 flex justify-center">
+            <table class="w-full text-md bg-white shadow-md rounded mb-4">
+                <tbody>
+                    <tr class="border-b">
+                        <th class="text-left p-3 px-5">Nazwa</th>
+                        <th class="text-left p-3 px-5">Gramatura</th>
+                        <th></th>
+                    </tr>
+                    {{#each this.currentCalculation as |product|}}
+                      <tr class="border-b hover:bg-orange-100">
+                        <td class="p-3 px-5">{{product.name}}</td>
+                        <td class="p-3 px-5"> 
+                          <input  
+                            class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
+                            placeholder="gram"
+                            value={{product.quantity}}
+                            oninput={{action (mut product.quantity) value="target.value"}}
+                          >
+                        </td>
+                        <td class="p-3 px-5 flex justify-end">
+                          <button 
+                            type="button" 
+                            class="text-sm bg-red-500 hover:bg-red-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline"
+                            {{on "click" (fn this.onDelete product)}}
+                          >
+                            Usuń
+                          </button>
+                        </td>
+                      </tr>
+                    {{/each}}
+                </tbody>
+            </table>
+        </div>  
+        <button 
+          type="button" 
+          class="text-sm bg-blue-500 hover:bg-blue-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline"
+          {{on "click" (fn this.clickCalculate)}}>
+          Oblicz 
+        </button>
+    </div>
+  </div>
+</div>