diff --git a/assets/imgs/ball.png b/assets/imgs/ball.png
new file mode 100644
index 0000000..f955a06
Binary files /dev/null and b/assets/imgs/ball.png differ
diff --git a/assets/imgs/bar.png b/assets/imgs/bar.png
new file mode 100644
index 0000000..04f6ddc
Binary files /dev/null and b/assets/imgs/bar.png differ
diff --git a/assets/imgs/breakout_sprites.png b/assets/imgs/breakout_sprites.png
new file mode 100644
index 0000000..befac47
Binary files /dev/null and b/assets/imgs/breakout_sprites.png differ
diff --git a/Ball.js b/assets/js/Ball.js
similarity index 82%
rename from Ball.js
rename to assets/js/Ball.js
index 6df6b35..54fc114 100644
--- a/Ball.js
+++ b/assets/js/Ball.js
@@ -1,6 +1,6 @@
 class Ball {
     constructor() {
-        this.size = 10;
+        this.size = 20;
 
 
         this.moving = false;
@@ -16,6 +16,8 @@ class Ball {
         this.angleBL = this.g2r(180);
         this.angleTL = this.g2r(270);
 
+        this.img = resources.get('ball');
+
     }
 
     start() {
@@ -24,8 +26,8 @@ class Ball {
 
     update(ctx, x, y) {
         this.limits ??= {
-            l: this.size,
-            t: this.size,
+            l: 0,
+            t: 0,
             r: ctx.canvas.width - this.size,
             b: ctx.canvas.height
         };
@@ -38,6 +40,7 @@ class Ball {
     }
 
     draw(ctx) {
+        /*
         ctx.beginPath();
         ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI, false);
         ctx.fillStyle = this.color;
@@ -45,8 +48,20 @@ class Ball {
         ctx.lineWidth = 1;
         ctx.strokeStyle = '#003300';
         ctx.stroke();
+*/
+//        ctx.drawImage(this.img,0,0,this.img.width,this.img.height,this.x,this.y,20,20);
+        this.drawImage(ctx, this.img, this.x, this.y, this.size,this.size, this.angle);
     }
 
+    drawImage(ctx, image, x, y, w,h, rotation){
+        ctx.save();
+        ctx.translate(x+w/2, y+h/2);
+        ctx.rotate(rotation);
+        ctx.translate(-x-w/2, -y-h/2);
+        ctx.drawImage(image, x, y, w, h);
+        ctx.restore();        
+    }     
+
     move(x, y) {
         if (this.moving) {
             this.x += this.speed * Math.cos(this.angle);
@@ -60,8 +75,9 @@ class Ball {
 
             this.collideWalls(this.limits.l, this.limits.t, this.limits.r, this.limits.b);
         } else {
-            this.x = x;
-            this.y = y - this.size - 1;
+            this.x = x - 10;
+//            this.y = y - this.size - 1;
+            this.y = y - 20;
         }
         return true;
     }
@@ -132,7 +148,7 @@ class Ball {
                 this.bounceB(r);
                 return true;
             }
-            if ((this.y - this.size) <= y1 && (this.y - this.size) > y0) {
+            if (this.y <= y1 && this.y > y0) {
                 this.bounceT(r);
                 return true;
             }
@@ -143,7 +159,7 @@ class Ball {
                 this.bounceR(r);
                 return true;
             }
-            if ((this.x - this.size) <= x1 && (this.x - this.size) > x0) {
+            if (this.x <= x1 && this.x > x0) {
                 this.bounceL(r);
                 return true;
             }
diff --git a/Bar.js b/assets/js/Bar.js
similarity index 91%
rename from Bar.js
rename to assets/js/Bar.js
index 894ba03..5304bd9 100644
--- a/Bar.js
+++ b/assets/js/Bar.js
@@ -9,6 +9,7 @@ class Bar {
         this._speed = 0;    // Current Speed and direction
 
         this.xLimit = (ctx.canvas.width - this.w);
+        this.img = resources.get('bar');
         this.reset();
     }
 
@@ -49,8 +50,11 @@ class Bar {
     draw() {
         if (this.y != this._y) this.y--;
         if (this.y < this.ctx.canvas.height) {
+            /*
             this.ctx.fillStyle = 'black';
             this.ctx.fillRect(this.x, this.y, this.w, this.h);
+            */
+            this.ctx.drawImage(this.img,this.x,this.y);
         }
     }
 }
diff --git a/Board.js b/assets/js/Board.js
similarity index 100%
rename from Board.js
rename to assets/js/Board.js
diff --git a/Bricks.js b/assets/js/Bricks.js
similarity index 100%
rename from Bricks.js
rename to assets/js/Bricks.js
diff --git a/GameIntro.js b/assets/js/GameIntro.js
similarity index 100%
rename from GameIntro.js
rename to assets/js/GameIntro.js
diff --git a/GameOver.js b/assets/js/GameOver.js
similarity index 100%
rename from GameOver.js
rename to assets/js/GameOver.js
diff --git a/GamePlay.js b/assets/js/GamePlay.js
similarity index 100%
rename from GamePlay.js
rename to assets/js/GamePlay.js
diff --git a/Keyboard.js b/assets/js/Keyboard.js
similarity index 100%
rename from Keyboard.js
rename to assets/js/Keyboard.js
diff --git a/Levels.js b/assets/js/Levels.js
similarity index 100%
rename from Levels.js
rename to assets/js/Levels.js
diff --git a/Lives.js b/assets/js/Lives.js
similarity index 100%
rename from Lives.js
rename to assets/js/Lives.js
diff --git a/assets/js/Resources.js b/assets/js/Resources.js
new file mode 100644
index 0000000..1e45302
--- /dev/null
+++ b/assets/js/Resources.js
@@ -0,0 +1,26 @@
+class Resources {
+    constructor() {
+        this.total = 0;
+        this.loading = 0;
+        this.resources = {};
+
+        this.load('ball');
+        this.load('bar');
+    }
+
+
+    load(res) {
+        let _this = this;
+        this.total++;
+        this.loading++;
+        this.resources[res] = new Image();
+        this.resources[res].onload = function () {
+            _this.loading--;
+        }
+        this.resources[res].src = 'assets/imgs/' + res + '.png';
+    }
+
+    get(res) {
+        return this.resources[res];
+    }
+};
\ No newline at end of file
diff --git a/Score.js b/assets/js/Score.js
similarity index 100%
rename from Score.js
rename to assets/js/Score.js
diff --git a/index.js b/assets/js/index.js
similarity index 96%
rename from index.js
rename to assets/js/index.js
index 5199fa9..e0494f3 100644
--- a/index.js
+++ b/assets/js/index.js
@@ -5,6 +5,9 @@
 document.addEventListener('DOMContentLoaded', init);
 
 
+let resources = new Resources();
+
+
 function init() {
     let ctx, canvas = document.createElement("canvas");
     canvas.width = 360; // window.innerWidth
diff --git a/index.html b/index.html
index 81d8050..6de0193 100644
--- a/index.html
+++ b/index.html
@@ -9,24 +9,28 @@
             justify-content: center;
             display: flex;
         }
-        canvas { border:1px solid black; }
+
+        canvas {
+            border: 1px solid black;
+        }
     </style>
-<!-- ------------------------------------------ -->
-    <script src="Keyboard.js"></script>
-    <script src="Board.js"></script>
-<!-- ------------------------------------------ -->
-    <script src="GameIntro.js"></script>
-<!-- ------------------------------------------ -->
-    <script src="GameOver.js"></script>
-    <script src="Bricks.js"></script>
-    <script src="Levels.js"></script>
-    <script src="Score.js"></script>
-    <script src="Lives.js"></script>
-    <script src="Bar.js"></script>
-    <script src="Ball.js"></script>
-    <script src="GamePlay.js"></script>
-<!-- ------------------------------------------ -->
-    <script src="index.js"></script>
+    <!-- ------------------------------------------ -->
+    <script src="assets/js/Resources.js"></script>
+    <script src="assets/js/Keyboard.js"></script>
+    <script src="assets/js/Board.js"></script>
+    <!-- ------------------------------------------ -->
+    <script src="assets/js/GameIntro.js"></script>
+    <!-- ------------------------------------------ -->
+    <script src="assets/js/GameOver.js"></script>
+    <script src="assets/js/Bricks.js"></script>
+    <script src="assets/js/Levels.js"></script>
+    <script src="assets/js/Score.js"></script>
+    <script src="assets/js/Lives.js"></script>
+    <script src="assets/js/Bar.js"></script>
+    <script src="assets/js/Ball.js"></script>
+    <script src="assets/js/GamePlay.js"></script>
+    <!-- ------------------------------------------ -->
+    <script src="assets/js/index.js"></script>
 </head>
 
 <body>