diff --git a/public/css/game.css b/public/css/game.css
index e8f4e34..b336f1c 100644
--- a/public/css/game.css
+++ b/public/css/game.css
@@ -1,4 +1,8 @@
 #game {
     height: 100%;
+    width: 100%;
     grid-column-start: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
\ No newline at end of file
diff --git a/public/img/background.jpg b/public/img/background.jpg
new file mode 100644
index 0000000..50362e3
Binary files /dev/null and b/public/img/background.jpg differ
diff --git a/public/img/sprite.jpg b/public/img/sprite.jpg
new file mode 100644
index 0000000..2e8254d
Binary files /dev/null and b/public/img/sprite.jpg differ
diff --git a/public/js/game.js b/public/js/game.js
index 3ecefd4..6aeef5a 100644
--- a/public/js/game.js
+++ b/public/js/game.js
@@ -1,22 +1,121 @@
+let game = document.getElementById('game');
+
+let size;
+if (game.offsetWidth > game.offsetHeight) {
+    size = game.offsetHeight;
+} else {
+    size = game.offsetWidth;
+}
+
 const app = new PIXI.Application({
     autoResize: true,
     resolution: devicePixelRatio,
-    backgroundColor: 0x0073db
+    width: size,
+    height: size
 });
+
+let img = new PIXI.Sprite.from("/img/background.jpg");
+img.width = size;
+img.height = size;
+app.stage.addChild(img);
+
+
 document.getElementById('game').appendChild(app.view);
 
 
 // -------------------------------------- code --------------------------------------
+function Sprite(x, y) {
+    this.x = x;
+    this.y = y;
+}
 
+let sprite_size = Math.floor(size / 11);
+let sprites = {
+    0: new Sprite(sprite_size, sprite_size),
+    1: new Sprite(sprite_size * 3, sprite_size),
+    2: new Sprite(sprite_size * 5, sprite_size),
+    3: new Sprite(sprite_size * 7, sprite_size),
+    4: new Sprite(sprite_size * 9, sprite_size),
+
+    5: new Sprite(sprite_size, sprite_size * 3),
+    6: new Sprite(sprite_size * 9, sprite_size * 3),
+
+    7: new Sprite(sprite_size, sprite_size * 5),
+    8: new Sprite(sprite_size * 9, sprite_size * 5),
+
+    9: new Sprite(sprite_size, sprite_size * 7),
+    10: new Sprite(sprite_size * 9, sprite_size * 7),
+
+    11: new Sprite(sprite_size, sprite_size * 9),
+    12: new Sprite(sprite_size * 3, sprite_size * 9),
+    13: new Sprite(sprite_size * 5, sprite_size * 9),
+    14: new Sprite(sprite_size * 7, sprite_size * 9),
+    15: new Sprite(sprite_size * 9, sprite_size * 9),
+}
+
+for (let i = 0; i < 16; i++) {
+    const sprite = PIXI.Sprite.from('/img/sprite.jpg');
+
+    sprite.x = sprites[i].x - sprite_size * 0.2;
+    sprite.y = sprites[i].y - sprite_size * 0.2;
+    sprite.width = sprite_size * 1.5;
+    sprite.height = sprite_size * 1.5;
+
+    app.stage.addChild(sprite);
+}
+
+const graphics = new PIXI.Graphics();
+graphics.lineStyle(10, 0x862323, 1);
+graphics.drawRect(sprite_size * 9 - sprite_size * 0.2, sprite_size * 9 - sprite_size * 0.2, sprite_size * 1.5, sprite_size * 1.5);
+app.stage.addChild(graphics);
+
+graphics.lineStyle(0);
+graphics.beginFill(0xffffff, 1);
+graphics.drawCircle(sprite_size * 3 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * 9 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size/4);
+graphics.endFill();
+
+graphics.lineStyle(0);
+graphics.beginFill(0xffffff, 1);
+graphics.drawCircle(sprite_size * 5 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * 9 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size/4);
+graphics.endFill();
+
+graphics.lineStyle(0);
+graphics.beginFill(0xffffff, 1);
+graphics.drawCircle(sprite_size * 7 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * 9 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size/4);
+graphics.endFill();
+
+generate_card("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.");
+
+
+function generate_card(s) {
+    let start_x = size / 2 - 110;
+    let start_y = size / 2 - 150;
+    graphics.lineStyle(5, 0x000000, 1);
+    graphics.beginFill(0x650A5A);
+    graphics.drawRoundedRect(start_x, start_y, 220, 300, 10);
+    graphics.endFill();
+
+    const style = new PIXI.TextStyle({
+        fontFamily: 'Arial',
+        fontSize: 15,
+        wordWrap: true,
+        wordWrapWidth: 200,
+    });
+    const basicText = new PIXI.Text(s, style);
+    basicText.x = start_x + 10;
+    basicText.y = start_y + 10;
+
+    app.stage.addChild(basicText);
+}
 // ------------------------------------ end code ------------------------------------
 
 
-// Resize (Do Not modify)
-window.addEventListener('resize', resize);
-
-function resize() {
-    let game = document.getElementById('game');
-    app.renderer.resize(game.offsetWidth, game.offsetHeight);
-}
-
-resize();
\ No newline at end of file
+// Resize
+// window.addEventListener('resize', resize);
+//
+// function resize() {
+//     let game = document.getElementById('game');
+//     app.renderer.resize(game.offsetWidth, game.offsetHeight);
+// }
+//
+// resize();
\ No newline at end of file