diff --git a/img/tiger0.png b/img/tiger0.png
new file mode 100644
index 0000000..c57af84
Binary files /dev/null and b/img/tiger0.png differ
diff --git a/img/tiglet.png b/img/tiglet.png
new file mode 100644
index 0000000..b87f9f3
Binary files /dev/null and b/img/tiglet.png differ
diff --git a/img/tiglet_small.png b/img/tiglet_small.png
new file mode 100644
index 0000000..1ed9e21
Binary files /dev/null and b/img/tiglet_small.png differ
diff --git a/index.html b/index.html
index bbf37cf..9dc807d 100644
--- a/index.html
+++ b/index.html
@@ -10,19 +10,25 @@
 </head>
 <body>
     <div>
-        <img src="">
+        <h1><span>Junior</span>-<span>BOY</span></h1>
+        <p>Age: <span>0</span></p>
+        <img src="./img/tiglet_small.png" style="width:200px;">
     </div>
     <div class="activ">
-        <article>
-            <p>Joy: <span>0</span></p>
-            <button>Play</button>
+        <article class="item">
+            <p>Joy: <span id="joyN">10</span></p>
+            <button onclick="play()">Play</button>
         </article>
-        <article>
-            <p>Food: <span>0</span></p>
-            <button>Feed</button>
+        <article class="item">
+            <p>Food: <span id="fooN">30</span></p>
+            <button onclick="feed()">Feed</button>
         </article>
-        <article>
-            <p>Health: <span>0</span></p>
+        <article class="item">
+            <p>Clean: <span id="cleN">50</span></p>
+            <button onclick="clearBoy()">Clean</button>
+        </article>
+        <article class="item">
+            <p>Health: <span id="heaN">100</span></p>
             <button>Heal</button>
         </article>
     </div>
diff --git a/main.js b/main.js
index e69de29..9d7fac0 100644
--- a/main.js
+++ b/main.js
@@ -0,0 +1,48 @@
+const Djoy = document.querySelector('#joyN');
+const Dfood = document.querySelector('#fooN');
+const Dclean = document.querySelector('#cleN');
+const Dhealth = document.querySelector('#heaN');
+
+let joy=10, hunger=30, clean=50, hp=100;
+
+function display(){
+    Djoy.innerHTML = joy;
+    Dfood.innerHTML = hunger;
+    Dclean.innerHTML = clean;
+    Dhealth.innerHTML = hp;
+}
+
+function play(){
+    if(joy<98){
+        joy += Math.floor(Math.random()*10);
+        clean -= Math.floor(Math.random()*5); 
+    }else{
+        clean -= Math.floor(Math.random()*5);
+    }
+    display();
+}
+
+function feed(){
+    if(hunger<150){
+        if(hunger<100){
+            hunger += Math.floor(Math.random()*15);
+            clean -= Math.floor(Math.random()*5); 
+    }else{
+            hunger += Math.floor(Math.random()*5);
+            clean -= Math.floor(Math.random()*5); 
+            hp -= Math.floor(Math.random()*14);
+        }
+    }else{
+        return;
+    }
+    display();
+}
+
+function clearBoy(){
+    console.log('sup');
+    if(clean<100){
+        clean += Math.floor(Math.random()*20);
+        joy -= Math.floor(Math.random()*11);
+    }
+    display();
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index e69de29..0ccfd77 100644
--- a/style.css
+++ b/style.css
@@ -0,0 +1,9 @@
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+body{
+    background: #333;
+    color: #fff;
+}
\ No newline at end of file
