diff --git a/assets/css/style.scss b/assets/css/style.scss
index 608698f8..0c429cf9 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -1,15 +1,22 @@
 ---
 ---
-
+{
 @import "jekyll-theme-minimal";
 @import url("https://fonts.googleapis.com/css?family=Muli&display=swap'");
 @import url("https://fonts.googleapis.com/css?family=Lato:700|Muli&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=Poppins:wght@300;400;500;600&display=swap');
 
-body{
-  font-family : "Muli", sans-serif;
-}
+
+body { font-family: 'Poppins', sans-serif; }
 
 h1 {
   font-family: 'Lato', sans-serif;
   font-weight: bold;
 }
+
+.footer {
+  background-color: rgb(128, 128, 128);
+  height: 100px;
+}
+
+}
\ No newline at end of file
diff --git a/screenshots/water-pie chart.jpeg b/screenshots/water-pie chart.jpeg
new file mode 100644
index 00000000..4ea0aec5
Binary files /dev/null and b/screenshots/water-pie chart.jpeg differ
diff --git a/src/home.html b/src/home.html
index edc1ce8f..4a1eca7e 100644
--- a/src/home.html
+++ b/src/home.html
@@ -18,6 +18,8 @@
       href="https://fonts.googleapis.com/css?family=Montserrat"
       rel="stylesheet"
     />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
+    />
     <title>Water Level Monitoring System - IoT Project</title>
     <style>
       body {
@@ -49,7 +51,21 @@
         text-align: center;
         font-weight: 800;
       }
+      .social-icons a {
+    color: #333; /* Change color as needed */
+    text-decoration: none;
+    margin-right: 10px; /* Adjust spacing between icons */
+    font-size: 24px; /* Adjust icon size */
+}
+.social-icons{
+  text-align: center;
+}
+
+.social-icons a:hover {
+    color: #007bff; /* Change color on hover */
+}
     </style>
+
   </head>
 
   <body>
@@ -120,6 +136,12 @@ <h1>Safe Zone</h1>
         <center><strong>Made by Vinit Shahdeo</strong></center>
       </p>
     </div>
+    <div class="social-icons">
+      <a href="https://web.facebook.com/?_rdc=1&_rdr"><i class="fab fa-facebook-f"></i></a>
+      <a href="https://twitter.com/?logout=1706987630666"><i class="fab fa-twitter"></i></a>
+      <a href="https://www.instagram.com/?hl=en"><i class="fab fa-instagram"></i></a>
+      <!-- Add more social media icons as needed -->
+  </div>
 
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
     <script type="text/javascript" src="lib/createWaterBall-jquery.js"></script>
@@ -206,5 +228,6 @@ <h1>Safe Zone</h1>
       });
     </script>
     <!-- @author: Vinit Shahdeo -->
+    
   </body>
 </html>
