diff --git a/frontend/Agent.jpg b/frontend/Agent.jpg
new file mode 100644
index 0000000..6f2e344
Binary files /dev/null and b/frontend/Agent.jpg differ
diff --git a/frontend/index.html b/frontend/index.html
index 3389408..e51cf90 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,7 +4,7 @@
         <meta charset="UTF-8">
         <title>Inteligentny wózek</title>
         <link type="text/css" rel="stylesheet" href="styles.css">
-        <script type="module" src="script.js">
+        <script type="text/javascript" src="script.js">
         </script>
     </head>
 
@@ -12,7 +12,7 @@
         <div class="container">
             <div class="plansza">
                 <div class="row" id="row-0">
-                    <div class="pole" id="0-0">  </div>
+                    <div class="pole" id="0-0"> </div>
                     <div class="pole" id="0-1"> </div>
                     <div class="pole" id="0-2"> </div>
                     <div class="pole" id="0-3"> </div>
diff --git a/frontend/script.js b/frontend/script.js
index 59de2ab..061c18e 100644
--- a/frontend/script.js
+++ b/frontend/script.js
@@ -1,13 +1,77 @@
-import Agent from '../objects/Agent.js';
+//Klasy
+class Agent {
+	constructor(x, y){
+		this.xField = x;
+		this.yField = y;
+	}
+	
+	getid(){
+        return this.xField + "-" + this.yField;
+    }
+}
 
+class Field {
+    constructor(x, y, isEmpty) {
+        this.xField = x;
+        this.yField = y;
+        this.isFieldEmpty = isEmpty;
+    }
+    getCoordinates(){
+        return this.xField + this.yField;
+    }
+
+    getStatus(){
+        return this.isFieldEmpty;
+    }
+}
+
+class Product {
+    constructor(name, type, farcing, price) {
+        this.name = name;
+        this.type = type;
+        this.farcing = farcing;
+        this.price = price
+    }
+}
+
+class Rack{
+    constructor(noOfShelf, typOfProduct) {
+        this.noOfShelf = noOfShelf;
+    }
+
+    addShelf(){
+        this.noOfShelf = this.noOfShelf + 1;
+    }
+
+    isEmpty(){
+        if (this.noOfShelf === 0){
+            return true;
+        }else {
+            return false;
+        }
+    }
+}
+
+class Shelf {
+    constructor(number) {
+        this.number = number;
+    }
+}
+
+
+//Objekty i zmienne
 var regaly = ['1-1', '1-3', '1-4', '1-6', '1-7', '1-9', '2-1', '2-9', '3-3', '3-4', '3-6', '3-7', '4-1', '4-9', '5-1', '5-3', '5-4', '5-6', '5-7', '5-9']
+const agent = new Agent(3, 0);
 
+//Funkcja uruchamiająca prace calego scriptu 
 function start(){
     ponumerujPola();
     pokolorujRegaly();
-	umiescAgenta();
+    umiescAgenta();
+    droga();
 }
 
+//Funkcja kolorujaca miejsca na planszy gdzie znajduja sie regaly
 function pokolorujRegaly(){
     let x;
     for(x = 0; x < regaly.length; x++){
@@ -15,6 +79,7 @@ function pokolorujRegaly(){
     }
 }
 
+//Funkcja wyswietlajaca id pol
 function ponumerujPola(){
     let x,y
     for(x = 0; x < 7; x++){
@@ -25,9 +90,37 @@ function ponumerujPola(){
     }
 }
 
+//Funckja wyswietlajaca agenta gdy ten zmieni polozenie
 function umiescAgenta() {
-    const agent = new Agent(3, 0);
-	id = agent.getid();
-    document.getElementById(id).className = 'regal';
+    document.getElementById(id).style.backgroundImage = "none";
+    id = agent.getid();
+    document.getElementById(id).style.backgroundImage = "url('Agent.jpg')";
 }
 
+//Funkcja zmieniajaca polozenie agenta o 1 pole
+function przemieszczenie(side, time){
+    setTimeout(function(){
+        if(side == "left")
+            agent.yField--;
+        if(side == "right")
+            agent.yField++;
+        if(side == "up")
+            agent.xField--;
+        if(side == "down")
+            agent.xField++;
+        umiescAgenta();
+    }, time);
+}
+
+//Funkcja ktora ustala droge agenta do przebycia
+function droga() {
+    przemieszczenie("right", 1000);
+    przemieszczenie("right", 2000);
+    przemieszczenie("up", 3000);
+    przemieszczenie("right", 4000);
+    przemieszczenie("right", 5000);
+    przemieszczenie("right", 6000);
+    przemieszczenie("right", 7000);
+    przemieszczenie("right", 8000);
+    przemieszczenie("right", 9000);
+}
diff --git a/frontend/styles.css b/frontend/styles.css
index a88e52e..877c58c 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -28,6 +28,8 @@
     height: 100px;
     width: 100px;
     background-color: lightyellow;
+    background-image: none;
+    background-size: cover;
     border-color: black;
     border-width: 1px;
     border-style: solid;
@@ -54,4 +56,4 @@
     display: flex;
     justify-content: center;
     align-items: center;
-}
\ No newline at end of file
+}
diff --git a/objects/Agent.js b/objects/Agent.js
deleted file mode 100644
index eb4cbf2..0000000
--- a/objects/Agent.js
+++ /dev/null
@@ -1,12 +0,0 @@
-class Agent {
-	constructor(x, y){
-		this.xField = x;
-		this.yField = y;
-	}
-	
-	getid(){
-        return this.xField + "-" + this.yField;
-    }
-}
-
-export default Agent;
\ No newline at end of file