diff --git a/frontend/js/main.js b/frontend/js/main.js
index 4aae68b..42eb6d4 100644
--- a/frontend/js/main.js
+++ b/frontend/js/main.js
@@ -108,6 +108,59 @@ class Field{
 
         return params;
     }
+	
+	setIsShelf(isShelf){
+		this.isShelf = isShelf;
+	}
+	
+	getIsShelf(){
+		return this.isShelf;
+	}
+	
+	setIsOccupiedByAgent(isOccupiedByAgent){
+		this.isOccupiedByAgent = isOccupiedByAgent;
+	}
+}
+
+class Shelf{
+	constructor(x, y){
+        this.xField = x;
+        this.yField = y;
+		this.havePlace = true;
+		this.box1 = 0;
+		this.box2 = 0;
+		this.box3 = 0;
+    }
+	
+	getParams(){
+        let params = {};
+
+        xField = this.xField;
+        yField = this.yField;
+		havePlace = this.havePlace;
+		box1 = this.box1;
+		box2 = this.box2;
+		box3 = this.box3;
+        params = {xField, yField, havePlace, box1, box2, box3}
+
+        return params;
+    }
+	
+	setbox1(box1){
+		this.box1 = box1;
+	}
+	
+	setbox2(box1){
+		this.box2 = box1;
+	}
+	
+	setbox3(box1){
+		this.box3 = box1;
+	}
+	
+	setHavePlace(havePlace){
+		this.havePlace = havePlace;
+	}
 }
 
 //funckcje
@@ -126,17 +179,58 @@ function createBoard(rangeX, rangeY){
     return board
 }
 
+function createShelf(board){
+	//pierwszy poziom
+	board[2][2].setIsShelf(true);
+	board[3][2].setIsShelf(true);
+	
+	board[2][4].setIsShelf(true);
+	board[3][4].setIsShelf(true);
+	
+	board[2][6].setIsShelf(true);
+	board[3][6].setIsShelf(true);
+	
+	board[2][8].setIsShelf(true);
+	board[3][8].setIsShelf(true);
+	
+	//drugi poziom
+	board[5][2].setIsShelf(true);
+	board[5][3].setIsShelf(true);
+	
+	board[5][7].setIsShelf(true);
+	board[5][8].setIsShelf(true);
+	
+	//trzeci poziom
+	board[7][2].setIsShelf(true);
+	board[8][2].setIsShelf(true);
+	
+	board[7][4].setIsShelf(true);
+	board[8][4].setIsShelf(true);
+	
+	board[7][6].setIsShelf(true);
+	board[8][6].setIsShelf(true);
+	
+	board[7][8].setIsShelf(true);
+	board[8][8].setIsShelf(true);
+	return board
+}
+
 function showBoard(board){
     for(let y = board.length - 1; y >= 0 ; y--){
         document.getElementById("board").innerHTML += "<div class='row' id='row-" + y + "'> </div>";
 
         for(let x = 0; x < board[y].length; x++){
-            document.getElementById("row-" + y).innerHTML += "<div class='field' id=" + x + "-" + y + "> </div>"
+			if(board[y][x].getIsShelf())
+				document.getElementById("row-" + y).innerHTML += "<div class='regal2' id=" + x + "-" + y + "> </div>"
+			else
+				document.getElementById("row-" + y).innerHTML += "<div class='field' id=" + x + "-" + y + "> </div>"
         }
     }
 }
 
 let board = createBoard(10,10);
+board = createShelf(board);
+
 let agent = new Agent(0,0, 'Right');
 
 function start(){
diff --git a/frontend/styles.css b/frontend/styles.css
index 0fbed01..68a91c8 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -48,6 +48,25 @@ body {
     align-items: center;
 }
 
+.regal2{
+	height: 70px;
+    width: 70px;
+    background-color: #000080;
+    background-image: none;
+    background-size: cover;
+    border-color: black;
+    border-width: 1px;
+    border-style: solid;
+    color: gray;
+    font-size: 30px;
+    font-weight: 500;
+    font-family: Arial, Helvetica, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+	
+}
+
 .regal{
     height: 50px;
     width: 50px;