diff --git a/src/main/java/controller/RootLayoutController.java b/src/main/java/controller/RootLayoutController.java
index 992247bec9b6a8d4bfd63155931290e42f497c22..24074c78a4e5fd6ba411c9db9c0918b9e4f8e2ee 100644
--- a/src/main/java/controller/RootLayoutController.java
+++ b/src/main/java/controller/RootLayoutController.java
@@ -1,20 +1,22 @@
 package controller;
 
 import javafx.fxml.FXML;
-import javafx.scene.layout.GridPane;
 import main.MainApp;
+import view.GridTileCanvas;
 
 public class RootLayoutController {
   @FXML
-  GridPane gridPane;
+  public GridTileCanvas gridTilePane;
+
   private MainApp mainApp;
 
   /**
    * Is called by the main application to give a reference back to itself.
    *
-   * @param mainApp
+   * @param mainApp the main app
    */
   public void setMainApp(MainApp mainApp) {
     this.mainApp = mainApp;
   }
+
 }
diff --git a/src/main/java/main/MainApp.java b/src/main/java/main/MainApp.java
index 07282eb4db8873aff1a84c0610945fb9ad79b417..0cd077e1838d413543c693ef5214749785d8ec6b 100644
--- a/src/main/java/main/MainApp.java
+++ b/src/main/java/main/MainApp.java
@@ -7,6 +7,9 @@ import javafx.scene.Scene;
 
 import javafx.scene.layout.BorderPane;
 import javafx.stage.Stage;
+import model.TileGrid;
+import model.Tile;
+import model.TileGame;
 
 import java.io.IOException;
 
@@ -14,9 +17,14 @@ public class MainApp extends Application {
   private Stage primaryStage;
   private BorderPane rootLayout;
 
+  private TileGame tileGame = new TileGame();
+
+  public MainApp() {
+  }
+
   public void start(Stage primaryStage) {
     this.primaryStage = primaryStage;
-    this.primaryStage.setTitle("AddressApp");
+    this.primaryStage.setTitle("Wang tiles");
     initRootLayout();
   }
 
diff --git a/src/main/java/model/CardinalDirection.java b/src/main/java/model/CardinalDirection.java
index 10ae434d082de4a010b005aa19415006e3d1b1ed..519fe530066a757530f14b556a37a193b1a98e00 100644
--- a/src/main/java/model/CardinalDirection.java
+++ b/src/main/java/model/CardinalDirection.java
@@ -1,5 +1,24 @@
 package model;
+import view.PointType;
 
 public enum CardinalDirection {
-  NORTH, EAST, SOUTH, WEST;
+  NORTH(PointType.NORTH_WEST_CORNER, PointType.NORTH_EAST_CORNER),
+  EAST(PointType.NORTH_EAST_CORNER, PointType.SOUTH_EAST_CORNER),
+  SOUTH(PointType.SOUTH_EAST_CORNER, PointType.SOUTH_WEST_CORNER),
+  WEST(PointType.NORTH_WEST_CORNER, PointType.SOUTH_WEST_CORNER);
+
+  private final PointType firstPoint;
+  private final PointType secondPoint;
+
+  CardinalDirection(PointType firstPoint, PointType secondPoint) {
+    this.firstPoint = firstPoint;
+    this.secondPoint = secondPoint;
+  }
+  public PointType getFirstPoint() {
+    return firstPoint;
+  }
+
+  public PointType getSecondPoint() {
+    return secondPoint;
+  }
 }
diff --git a/src/main/java/model/Grid.java b/src/main/java/model/Grid.java
deleted file mode 100644
index 0705e69a00901f90e949269741ee99d5c1909a09..0000000000000000000000000000000000000000
--- a/src/main/java/model/Grid.java
+++ /dev/null
@@ -1,50 +0,0 @@
-package model;
-
-import java.util.Iterator;
-
-public class Grid<T> implements Iterable<T> {
-  private final int numberOfRows;
-  private final int numberOfColumns;
-  private final T[][] squares;
-
-  /**
-   * Creates a new {@code Grid} instance given the number of rows and columns.
-   *
-   * @param numberOfRows    the number of rows
-   * @param numberOfColumns the number of columns
-   * @throws IllegalArgumentException if {@code numberOfRows} or {@code numberOfColumns} are
-   *                                  less than or equal to 0
-   */
-  public Grid(int numberOfRows, int numberOfColumns) {
-    this.numberOfRows = numberOfRows;
-    this.numberOfColumns = numberOfColumns;
-    this.squares = allocateMatrix();
-  }
-
-  private T[][] allocateMatrix() {
-    return (T[][]) new Object[getNumberOfRows()][getNumberOfColumns()];
-  }
-
-
-  /**
-   * Returns an iterator over elements of type {@code T}.
-   *
-   * @return an Iterator.
-   */
-  @Override
-  public Iterator<T> iterator() {
-    return new GridIterator<>(this);
-  }
-
-  public T getSquare(int rowIndex, int columnIndex) {
-    return squares[rowIndex][columnIndex];
-  }
-
-  public int getNumberOfRows() {
-    return numberOfRows;
-  }
-
-  public int getNumberOfColumns() {
-    return numberOfColumns;
-  }
-}
diff --git a/src/main/java/model/GridIterator.java b/src/main/java/model/GridIterator.java
index 6fd55106d66a01be6dc8e3897c8f1438b09764cb..ac9ecb53037ba681e9442082d5b4d7b9979fc19c 100644
--- a/src/main/java/model/GridIterator.java
+++ b/src/main/java/model/GridIterator.java
@@ -2,12 +2,12 @@ package model;
 
 import java.util.Iterator;
 
-public class GridIterator<T> implements Iterator<T> {
+public class GridIterator implements Iterator<Tile> {
   private int rowIndex;
   private int columnIndex;
-  private final Grid<T> grid;
+  private final TileGrid grid;
 
-  GridIterator(Grid grid) {
+  GridIterator(TileGrid grid) {
     this.rowIndex = 0;
     this.columnIndex = 0;
     this.grid = grid;
@@ -19,8 +19,8 @@ public class GridIterator<T> implements Iterator<T> {
   }
 
   @Override
-  public T next() {
-    final T result = grid.getSquare(rowIndex, columnIndex);
+  public Tile next() {
+    final Tile result = grid.getTile(rowIndex, columnIndex);
     columnIndex = (columnIndex +1) % grid.getNumberOfColumns();
     if(columnIndex == 0){
       rowIndex++;
diff --git a/src/main/java/model/RandomTileGenerator.java b/src/main/java/model/RandomTileGenerator.java
new file mode 100644
index 0000000000000000000000000000000000000000..318f658d54ba03984641988496da9bf49a0ade3f
--- /dev/null
+++ b/src/main/java/model/RandomTileGenerator.java
@@ -0,0 +1,28 @@
+package model;
+
+import javafx.scene.paint.Color;
+
+import java.util.List;
+import java.util.Random;
+
+public class RandomTileGenerator {
+  private final List<Color> colors;
+  private final Random randomGenerator;
+
+  public RandomTileGenerator(List<Color> colors, Random randomGenerator) {
+    this.colors = colors;
+    this.randomGenerator = randomGenerator;
+  }
+
+  private Color randomColor(){
+    return colors.get(randomGenerator.nextInt(colors.size()));
+  }
+
+  public Tile nextTile(){
+    Color[] colorsOfTile = new Color[4];
+    for(int index = 0; index < 4; index++)
+      colorsOfTile[index] = randomColor();
+    return new Tile(colorsOfTile);
+  }
+
+}
diff --git a/src/main/java/model/TileGame.java b/src/main/java/model/TileGame.java
new file mode 100644
index 0000000000000000000000000000000000000000..68aeb8a30f93a33482c7b23c19cc02e78da35b46
--- /dev/null
+++ b/src/main/java/model/TileGame.java
@@ -0,0 +1,22 @@
+package model;
+
+import javafx.scene.paint.Color;
+
+import java.util.List;
+import java.util.Random;
+
+public class TileGame {
+  private final TileGrid tileGrid;
+
+  public TileGame(TileGrid tileGrid) {
+    this.tileGrid = tileGrid;
+    tileGrid.fillWithRandomTiles(List.of(Color.BLUE, Color.WHITE, Color.BLACK, Color.RED), new Random());
+  }
+  public TileGame() {
+    this(new TileGrid(10, 10));
+  }
+
+  public TileGrid getTileGrid() {
+    return tileGrid;
+  }
+}
diff --git a/src/main/java/model/TileGrid.java b/src/main/java/model/TileGrid.java
new file mode 100644
index 0000000000000000000000000000000000000000..f8da2aac26796d890407a5a6f01b5cd0eac2821f
--- /dev/null
+++ b/src/main/java/model/TileGrid.java
@@ -0,0 +1,62 @@
+package model;
+
+import javafx.scene.paint.Color;
+
+import java.util.Iterator;
+import java.util.List;
+import java.util.Random;
+
+public class TileGrid implements Iterable<Tile> {
+  private final int numberOfRows;
+  private final int numberOfColumns;
+  private final Tile[][] tiles;
+
+  /**
+   * Creates a new {@code Grid} instance given the number of rows and columns.
+   *
+   * @param numberOfRows    the number of rows
+   * @param numberOfColumns the number of columns
+   * @throws IllegalArgumentException if {@code numberOfRows} or {@code numberOfColumns} are
+   *                                  less than or equal to 0
+   */
+  public TileGrid(int numberOfRows, int numberOfColumns) {
+    this.numberOfRows = numberOfRows;
+    this.numberOfColumns = numberOfColumns;
+    this.tiles = allocateMatrix();
+  }
+
+  private Tile[][] allocateMatrix() {
+    return new Tile[getNumberOfRows()][getNumberOfColumns()];
+  }
+
+
+  /**
+   * Returns an iterator over elements of type {@code T}.
+   *
+   * @return an Iterator.
+   */
+  @Override
+  public Iterator<Tile> iterator() {
+    return new GridIterator(this);
+  }
+
+  public Tile getTile(int rowIndex, int columnIndex) {
+    return tiles[rowIndex][columnIndex];
+  }
+
+  public int getNumberOfRows() {
+    return numberOfRows;
+  }
+
+  public int getNumberOfColumns() {
+    return numberOfColumns;
+  }
+
+  public void fillWithRandomTiles(List<Color> colors, Random randomGenerator){
+    RandomTileGenerator randomTileGenerator = new RandomTileGenerator(colors, randomGenerator);
+    for(int row = 0; row < numberOfRows; row++)
+      for(int column = 0; column < numberOfColumns; column++){
+        tiles[row][column] = randomTileGenerator.nextTile();
+      }
+  }
+}
diff --git a/src/main/java/view/GridTileCanvas.java b/src/main/java/view/GridTileCanvas.java
new file mode 100644
index 0000000000000000000000000000000000000000..5b8785c313d977334d70cdb0da302179786801ef
--- /dev/null
+++ b/src/main/java/view/GridTileCanvas.java
@@ -0,0 +1,59 @@
+package view;
+
+import javafx.scene.canvas.Canvas;
+import javafx.scene.canvas.GraphicsContext;
+import javafx.scene.paint.Color;
+import model.CardinalDirection;
+import model.Tile;
+import model.TileGrid;
+import java.util.List;
+import java.util.Random;
+
+public class GridTileCanvas extends Canvas {
+  private static final double TILE_WIDTH = 50;
+  private static final double TILE_HEIGHT = 50;
+  private static final int NUMBER_OF_ROWS = 20;
+  private static final int NUMBER_OF_COLUMNS = 20;
+
+  public GridTileCanvas() {
+    this.setWidth(TILE_WIDTH * NUMBER_OF_COLUMNS);
+    this.setHeight(TILE_HEIGHT * NUMBER_OF_ROWS);
+    TileGrid tileGrid = new TileGrid(NUMBER_OF_ROWS, NUMBER_OF_COLUMNS);
+    tileGrid.fillWithRandomTiles(List.of(Color.BLUE, Color.GREEN, Color.BLACK, Color.RED), new Random());
+    drawGridTile(tileGrid);
+  }
+
+  public void drawGridTile(TileGrid tileGrid){
+    for(int row = 0; row < tileGrid.getNumberOfRows(); row++)
+      for(int column = 0; column < tileGrid.getNumberOfColumns(); column++){
+        drawTile(tileGrid.getTile(row, column), column, row);
+      }
+  }
+
+  public void drawTile(Tile tile, int row, int column){
+    for(CardinalDirection cardinalDirection: CardinalDirection.values()){
+      drawTriangle(column, row, cardinalDirection, tile.getColor(cardinalDirection));
+    }
+  }
+
+  private double getXPosition(int column, PointType pointType){
+    return (column + pointType.getXPosition()) * TILE_WIDTH;
+  }
+  private double getYPosition(int row, PointType pointType){
+    return (row + pointType.getYPosition()) * TILE_HEIGHT;
+  }
+
+  private void drawTriangle(int row, int column, CardinalDirection cardinalDirection, Color color){
+    double xFirstPoint = getXPosition(column, cardinalDirection.getFirstPoint());
+    double yFirstPoint = getYPosition(row, cardinalDirection.getFirstPoint());
+    double xSecondPoint = getXPosition(column, cardinalDirection.getSecondPoint());
+    double ySecondPoint = getYPosition(row, cardinalDirection.getSecondPoint());
+    double xCenter = getXPosition(column, PointType.CENTER);
+    double yCenter = getYPosition(row, PointType.CENTER);
+    GraphicsContext graphicsContext = getGraphicsContext2D();
+    graphicsContext.setFill(color);
+    graphicsContext.fillPolygon(new double[]{xFirstPoint, xSecondPoint, xCenter},
+            new double[]{yFirstPoint, ySecondPoint, yCenter}, 3);
+  }
+
+}
diff --git a/src/main/java/view/PointType.java b/src/main/java/view/PointType.java
new file mode 100644
index 0000000000000000000000000000000000000000..234fb3aba55db5b567d5c33ce78df5a90085284b
--- /dev/null
+++ b/src/main/java/view/PointType.java
@@ -0,0 +1,24 @@
+package view;
+
+public enum PointType {
+  NORTH_WEST_CORNER(0,0),
+  NORTH_EAST_CORNER(1,0),
+  SOUTH_WEST_CORNER(0,1),
+  SOUTH_EAST_CORNER(1,1),
+  CENTER(0.5,0.5);
+  private final double xPosition;
+  private final double yPosition;
+
+  PointType(double xPosition, double yPosition) {
+    this.xPosition = xPosition;
+    this.yPosition = yPosition;
+  }
+
+  public double getXPosition() {
+    return xPosition;
+  }
+
+  public double getYPosition() {
+    return yPosition;
+  }
+}
diff --git a/src/main/resources/view/RootLayout.fxml b/src/main/resources/view/RootLayout.fxml
index 8ac5b6f88511c192d4cfb132efa95c3771ae86fb..71be9b96a6e21c2d69af8f3bd66a83fb13a1b3d5 100644
--- a/src/main/resources/view/RootLayout.fxml
+++ b/src/main/resources/view/RootLayout.fxml
@@ -3,17 +3,16 @@
 <?import javafx.scene.layout.*?>
 
 
-<BorderPane prefHeight="620.0"
-            prefWidth="620.0"
+<?import view.GridTileCanvas?>
+<BorderPane prefHeight="900.0"
+            prefWidth="900.0"
             stylesheets="@DarkTheme.css"
             xmlns="http://javafx.com/javafx"
             xmlns:fx="http://javafx.com/fxml"
             fx:controller="controller.RootLayoutController">
-    <top>
-        <GridPane xmlns="http://javafx.com/javafx"
-            xmlns:fx="http://javafx.com/fxml"
-                  fx:id="gridPane"
-            prefHeight="600.0" prefWidth="600.0">
-        </GridPane>
-    </top>
+        <GridTileCanvas xmlns="http://javafx.com/javafx"
+                        xmlns:fx="http://javafx.com/fxml"
+                        fx:id="gridTilePane"
+                        height="1000.0" width="1000.0">
+        </GridTileCanvas>
 </BorderPane>
\ No newline at end of file