diff --git a/lib/Dither.dart b/lib/Dither.dart
index ce0032c..940c068 100644
--- a/lib/Dither.dart
+++ b/lib/Dither.dart
@@ -1,6 +1,24 @@
 import 'dart:html';
 import 'dart:typed_data';
 
+class Pixed {
+  static PixelArray greyscale(PixelArray image) {
+    PixelArray pxArr = new PixelArray.fromPixelArray(image);
+
+    for (var y = 0; y < pxArr.getHeight(); y++) {
+      for (var x = 0; x < pxArr.getWidth(); x++) {
+        var px = pxArr.getPixel(x, y);
+        int average = ((px.r+px.g+px.b) / 3).round();
+        px.r = average;
+        px.g = average;
+        px.b = average;
+      }
+    }
+
+    return pxArr;
+  }
+}
+
 class Pixel {
   int x;
   int y;
diff --git a/web/main.dart b/web/main.dart
index 7e712d9..ef830c7 100644
--- a/web/main.dart
+++ b/web/main.dart
@@ -20,6 +20,10 @@ void imgLoaded(Event e) {
   print("image loaded");
   input.context2D.drawImage(inputImg, 0, 0);
 
+  PixelArray px = new PixelArray.fromImageData(getImageData(input), 712);
+  px = Pixed.greyscale(px);
+
+  output.context2D.putImageData(px.toImageData(), 0, 0);
 }
 
 ImageData getImageData(CanvasElement canvas) {
diff --git a/web/styles.css b/web/styles.css
index 6a88d3b..b8742bc 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -6,11 +6,11 @@ html, body {
   margin: 0;
   padding: 0;
   font-family: 'Roboto', sans-serif;
-  background: gainsboro;
+  background: black;
 }
 
 canvas {
-  padding: 00px;
+  padding: 0px;
   text-align: center;
 }