diff --git a/index.html b/index.html
index e98d65a..53f163d 100644
--- a/index.html
+++ b/index.html
@@ -5,17 +5,133 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Kitty Rescue</title>
     <link rel="stylesheet" href="styles.css"/>
-</head>
-<body>
-<main>
-    <h1>Streetcat Rescue</h1>
-    <div>
-        <img id="cat" src="https://placekitten.com/64/64" alt="kitten"/>
-    </div>
-    <div id="cat-counter">Cat Clicks: 0</div>
-    <input class="happy" type="text" name="amount" id="amount" placeholder="Any amount helps!"/>
-    <button class="happy" id="btn">We appreciate your donation!</button>
-</main>
-<script src="script.js"></script>
-</body>
+    <style>
+      body {
+        background: #28debd;
+        font-family: sans-serif;
+        color: #daae6d;
+        display: grid;
+        place-items: center;
+      }
+      main {
+        width: 35vw;
+        background: #005678;
+        padding: 5px;
+        text-align: center;
+      }
+      button {
+        background: #585a91;
+        padding: 8px 20px;
+        margin: 20px;
+        rotate: -5deg;
+        transition: all 0.3s;
+      }
+      .happy {
+        color: #f31414;
+        border-color: lightpink;
+        border-radius: 3px;
+        margin-top: 10px;
+      }
+      input {
+        margin: 10px;
+      }
+
+      div {
+        padding: 15px;
+        background: #dcccdc;
+        display: grid;
+        place-items: center;
+      }
+      img:hover {
+        rotate: -10deg;
+      }
+
+      main:hover button {
+        rotate: 5deg;
+      }
+      section {background: rgb(22, 41, 161); height:150px; width:100%; text-align:center;}
+      
+      #imgsize {width: 300px; height: 200px;}
+      
+      .bow_wow {color: white; border-color:antiquewhite; }   
+     
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Streetcat Rescue</h1>
+      <div>
+        <img id="cat" src="https://placekitten.com/64/64" alt="kitten" />
+      </div>
+      <input
+        class="happy"
+        type="text"
+        name="amount"
+        id="amount"
+        placeholder="Any amount helps!"
+      />
+      <button class="happy" id="btn">We appreciate your donation!</button>
+    </main>
+    <br><br>
+    <section>
+      <h1> Streetdog Rescue </h1>
+      <div>
+        <img id="imgsize" src="https://upload.wikimedia.org/wikipedia/commons/0/01/Street_dog_in_pune01.jpg" alt="street dog">
+      </div>
+      <input type="text" name="amountDog" id="amountDog" placeholder="&#128021;">
+      <button class="bow_wow" id="btntwo">bow-wow</button>
+    </section>
+
+    <script>
+      const button = document.getElementById('btn');
+      const input = document.getElementById('amount');
+      const cat = document.getElementById('cat');
+      const buttonDog = document.getElementById('btntwo');
+      const inputDog = document.getElementById('amountDog');
+
+      function handleDonation() {
+        const amount = input.value;
+
+        if (amount == 0) {
+          alert('Thanks for nothing, the cats are all sad :(');
+          document.body.style.background = 'red';
+        } else {
+          alert(`Thanks for the donation of $ ${amount}!`);
+        }
+      }
+
+      function catClick() {
+        document.body.style.background = 'pink';
+      }
+
+      function handleDonationdog() {
+        const amountDog = inputDog.value;
+
+        if (amountDog ==0) {
+          alert('Woof Woof');
+
+          document.querySelector('section').style.background = 'black';
+        } else {
+          alert(`Thanks for the donation of $ ${amountDog}!`);
+        }
+      }
+      
+      btntwo.addEventListener('click', handleDonationdog);
+      btn.addEventListener('click', handleDonation);
+      cat.addEventListener('click', catClick);
+      // catClick();
+    </script>
+    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    <main>
+      <h1>Streetcat Rescue</h1>
+      <div>
+          <img id="cat" src="https://placekitten.com/64/64" alt="kitten"/>
+      </div>
+      <div id="cat-counter">Cat Clicks: 0</div>
+      <input class="happy" type="text" name="amount" id="amount" placeholder="Any amount helps!"/>
+      <button class="happy" id="btn">We appreciate your donation!</button>
+  </main>
+  <script src="script.js"></script>
+  </body>
+
 </html>
