diff --git a/Html-Files/Css-Files/style.css b/Html-Files/Css-Files/style.css
new file mode 100644
index 00000000..a856acd5
--- /dev/null
+++ b/Html-Files/Css-Files/style.css
@@ -0,0 +1,384 @@
+
+  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
+
+/* Default (Light) Mode */
+:root {
+    --background-color: #ffffff; /* Light background color */
+    --text-color: #333333; /* Dark text color */
+    --card-background: rgba(128, 128, 128, 0.204); /* Card background color */
+  }
+  
+  /* Dark Mode */
+  body.dark-mode {
+    --background-color: #333333; /* Dark background color */
+    --text-color: #ffffff; /* Light text color */
+    --card-background: rgba(0, 0, 0, 0.24); /* Dark card background color */
+  }
+  body {
+    background-color: var(--background-color);
+    color: var(--text-color);
+  }
+  .head {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 12px;
+    margin: 12px auto;
+}
+
+
+.card-body{
+    padding: 1rem;
+}
+
+.card-title{
+    color: rgb(248, 65, 14);
+    letter-spacing: 1px;
+    font-size: 16px;
+    font-weight: bold;
+    font-family: 'Poppins', sans-serif;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;  
+    max-height: 80px; /* 4 lines at 20px per line */
+    white-space: normal;
+    overflow: hidden;
+
+
+}
+.card-text{
+    max-height: 100px; /* 4 lines at 20px per line */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  letter-spacing: 1px;
+  font-family: 'Poppins', sans-serif;
+  white-space: normal;
+  font-size: 13px;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;  
+}
+
+
+.card-author{
+    font-weight: bold;
+    font-family: 'Poppins', sans-serif;
+    letter-spacing: 1px;
+    padding-top: 12px;
+    font-size: 12px;
+}
+.card-date{
+    font-family: 'Poppins', sans-serif;
+    letter-spacing: 1px;
+    font-size: 10px;
+}
+
+#newsBox {
+    display: flex;
+    justify-content: center;
+align-items: center;
+    gap: 2rem;
+    flex-wrap: wrap;
+
+}
+
+.newsCard {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--card-background);
+    height: 450px;
+    width: 360px;
+    border-radius: 9px;
+    overflow: hidden;
+    box-sizing: border-box;
+}
+.thumnail{
+    width: 100%;
+    height: 100%;
+}
+
+.imageWrapper{
+    width: 100%;
+    height: 180px;
+    object-fit: cover;
+}
+
+#img {
+    height: 406px;
+    width: 721px;
+}
+
+.line {
+    width: 30vw;
+    border: 1px solid black;
+    margin: 7px;
+    background-color: black;
+    height: 4px;
+    border-radius: 24px;
+}
+
+footer {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+}
+
+.mySpin {
+    margin: 50px auto;
+    display: block;
+    height: 10vh;
+    ;
+    width: 10vh;
+    ;
+    visibility: visible;
+}
+
+.card-header{
+    border: none;
+}
+
+/* Media Quries */
+
+@media only screen and (min-width:844px) and (max-width:1142px){
+   
+    .newsCard {
+        display: flex;
+        flex-direction: column;
+        background-color: rgba(128, 128, 128, 0.204);
+        height: 380px;
+        width: 250px;
+        border-radius: 9px;
+        overflow: hidden;
+        box-sizing: border-box;
+    }
+    .card-title{
+        color: rgb(248, 65, 14);
+        letter-spacing: 1px;
+        font-size: 14px;
+        font-weight: bold;
+        font-family: 'Poppins', sans-serif;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;  
+        max-height: 80px; /* 4 lines at 20px per line */
+        white-space: normal;
+        overflow: hidden;
+    
+    
+    }
+    .card-author{
+        font-weight: bold;
+        font-family: 'Poppins', sans-serif;
+        letter-spacing: 1px;
+        padding-top: 12px;
+        font-size: 8px;
+    }
+    .card-text{
+        max-height: 100px; /* 4 lines at 20px per line */
+      overflow: hidden;
+      text-overflow: ellipsis;
+      letter-spacing: 1px;
+      font-family: 'Poppins', sans-serif;
+      white-space: normal;
+      font-size: 11px;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;  
+    }
+    .imageWrapper{
+        width: 100%;
+        height: 150px;
+        object-fit: cover;
+    }
+    .card-body{
+        padding: 0.5rem;
+    }
+    
+}
+label {
+    width:50px;
+    height:25px;
+    position: relative;
+    display: block;
+    background: #fffdf3;
+    border-radius: 50px;
+    box-shadow: inset 0px 5px 15px rgba(0,0,0,0.4), inset 0px -5px 15px rgba(255,255,255,0.4);
+    cursor: pointer;
+  }
+  label:after {
+    content: "";
+    width:23px;
+    height: 23px;
+    position: absolute;
+    top:1px;
+    left:1px;
+    background: linear-gradient(180deg,#ffcc89,#d8860b);
+    border-radius: 50px;
+    box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
+  }
+  input {
+    width: 0;
+    height: 0;
+    visibility: hidden;
+  }
+  input:checked + label {
+    background: #242424;
+  }
+  input:checked + label:after {
+    left: 49px; 
+    transform: translateX(-100%); 
+    background: linear-gradient(180deg, #777, #3a3a3a);
+}
+  label, label:after {
+    transition: 0.3s
+  }
+  label:active:after{ 
+     width: 30px;
+  }
+  label svg {
+    position: absolute;
+    width: 20px;
+    top: 4.5px;
+    left:2px;
+    z-index: 100;
+  }
+  label svg.sun {
+    opacity: 1;
+    transition: 0.3s;
+  }
+  label svg.moon {
+    opacity: 0.5;
+    left:28px;
+    transition: 0.3s;
+  }
+  input:checked + label svg.sun {
+    opacity: 0.2;
+  }
+  input:checked + label svg.moon {
+     opacity: 1;
+  }
+  .form-switch{
+    padding-left: 0;
+  }
+  .form-check{
+    padding-left: 0;
+  }
+@media only screen and (min-width:492px) and (max-width:842px){
+
+      
+    .newsCard {
+        display: flex;
+        flex-direction: column;
+        background-color: rgba(128, 128, 128, 0.204);
+        height: 360px;
+        width: 230px;
+        border-radius: 9px;
+        overflow: hidden;
+        box-sizing: border-box;
+    }
+    .imageWrapper{
+        width: 100%;
+        height: 130px;
+        object-fit: cover;
+    }
+    .card-title{
+        color: rgb(248, 65, 14);
+        letter-spacing: 1px;
+        font-size: 13px;
+        font-weight: bold;
+        font-family: 'Poppins', sans-serif;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;  
+        max-height: 80px; /* 4 lines at 20px per line */
+        white-space: normal;
+        overflow: hidden;
+    
+    
+    }
+    .card-text{
+        max-height: 100px; /* 4 lines at 20px per line */
+      overflow: hidden;
+      text-overflow: ellipsis;
+      letter-spacing: 1px;
+      font-family: 'Poppins', sans-serif;
+      white-space: normal;
+      font-size: 10px;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;  
+    }
+    .card-author{
+        font-weight: bold;
+        font-family: 'Poppins', sans-serif;
+        letter-spacing: 1px;
+        padding-top: 12px;
+        font-size: 8px;
+    }
+}
+@media (prefers-color-scheme: dark) {
+    body {
+      background-color: var(--background-color);
+      color: var(--text-color);
+    }
+    /* Add dark mode specific styles here */
+}  
+@media only screen and (min-width:400px) and (max-width:490px){
+
+      
+    .newsCard {
+        display: flex;
+        flex-direction: column;
+        background-color: rgba(128, 128, 128, 0.204);
+        height: 360px;
+        width: 80%;
+        border-radius: 9px;
+        overflow: hidden;
+        box-sizing: border-box;
+    }
+    .imageWrapper{
+        width: 100%;
+        height: 130px;
+        object-fit: cover;
+    }
+    .card-title{
+        color: rgb(248, 65, 14);
+        letter-spacing: 1px;
+        font-size: 13px;
+        font-weight: bold;
+        font-family: 'Poppins', sans-serif;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;  
+        max-height: 80px; /* 4 lines at 20px per line */
+        white-space: normal;
+        overflow: hidden;
+    
+    
+    }
+    .card-text{
+        max-height: 100px; /* 4 lines at 20px per line */
+      overflow: hidden;
+      text-overflow: ellipsis;
+      letter-spacing: 1px;
+      font-family: 'Poppins', sans-serif;
+      white-space: normal;
+      font-size: 10px;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;  
+    }
+    .card-author{
+        font-weight: bold;
+        font-family: 'Poppins', sans-serif;
+        letter-spacing: 1px;
+        padding-top: 12px;
+        font-size: 8px;
+    }
+}
diff --git a/Html-Files/Css-Files/styles.css b/Html-Files/Css-Files/styles.css
new file mode 100644
index 00000000..df2680be
--- /dev/null
+++ b/Html-Files/Css-Files/styles.css
@@ -0,0 +1,340 @@
+/* @import url('http://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap'); */
+
+*
+{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins',sans-serif;
+}
+
+section
+{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background-color: #095a55;
+
+}
+section::before
+{
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 50%;
+    height: 100%;
+    background: #fff38e;
+}
+
+.container
+{
+    position: relative;
+    min-width: 1100px;
+    min-height: 550px;
+    display: flex;
+    z-index: 1000;
+    /* border-radius: 22px; */
+    /* background-color: #fff; */
+
+}
+
+.container .contactInfo
+{
+    position: absolute;
+    top: 40px;
+    width: 350px;
+    height: calc(100% - 80px);
+    background: #095a55;
+    z-index: 1;
+    padding: 40px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    justify-content: space-between;
+    box-shadow: 0 20px 25px rgba(0,0,0,0.15); 
+    border-radius: 22px;
+}
+
+.container .contactInfo h2
+{
+    color: #fff;
+    font-size:24px;
+    font-weight: 500;
+}
+
+.container .contactInfo ul.info 
+{
+   position: relative;
+   margin: 20px 0; 
+}
+
+.container .contactInfo ul.info li
+{
+   position: relative;
+   list-style: none;
+   display: flex;
+   margin: 20px 0;
+   cursor: pointer;
+   align-items: flex-start;
+}
+
+.container .contactInfo ul.info li span:nth-child(1)
+{
+    width: 30px;
+    min-width: 30px;
+}
+
+/* for gmail */
+.container .contactInfo ul.info li span a
+{
+    color: #fff;
+    text-decoration: none;
+    width: 30px;
+    min-width: 30px;
+    
+}
+
+.container .contactInfo ul.info li span:nth-child(1) img
+{
+    max-width: 100%;
+    filter: invert(1);
+}
+
+.container .contactInfo ul.info li span:nth-child(2)
+{
+    color: #fff;
+    margin-left: 10px;
+    font-weight: 300;
+}
+
+.container .contactInfo ul.sci
+{
+    position: relative;
+    display: flex;
+}
+
+.container .contactInfo ul.sci li
+{
+   list-style: none;  
+   margin-right: 15px;
+}
+
+.container .contactInfo ul.sci li a
+{
+   text-decoration: none;
+}
+
+.container .contactInfo ul.sci li a img
+{
+   filter: invert(1);
+}
+
+.container .contactForm
+{
+    position: absolute;
+    padding: 70px 50px;
+    padding-left: 250px;
+    margin-left: 150px;
+    width: calc(100% - 150px);
+    height: 100%;
+    background: #fff; 
+    box-shadow: 0 50px 50px rgba(0,0,0,0.25);
+    border-radius: 22px;
+}
+
+.container .contactForm h2
+{
+    color: #0f3959;
+    font-size: 24px;
+    font-weight: 500;
+}
+
+.container .contactForm .formBox
+{
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding-top: 30px;
+}
+
+.container .contactForm .formBox .inputBox
+{
+    position: relative;
+    margin-bottom: 35px;
+}
+
+.container .contactForm .formBox .inputBox.w50
+{
+    width: 47%;
+}
+
+.container .contactForm .formBox .inputBox.w100
+{
+    width: 100%;
+}
+
+.container .contactForm .formBox .inputBox input,
+.container .contactForm .formBox .inputBox textarea 
+{
+    width: 100%;
+    resize: none;
+    padding: 5px 0;
+    font-size: 18px;
+    font-weight: 300;
+    color: #333;
+    border: none;
+    outline: none;
+    border-bottom: 1px solid #777;
+}
+
+.container .contactForm .formBox .inputBox textarea 
+{
+    height: 120px;
+}
+
+.container .contactForm .formBox .inputBox span 
+{
+    position: absolute;
+    left: 0;
+    padding: 5px 0;
+    pointer-events: none;
+    font-size: 18px;
+    font-weight: 300;
+    transition: 0.3s;
+}
+
+.container .contactForm .formBox .inputBox input:focus ~ span,
+.container .contactForm .formBox .inputBox input:valid ~ span,
+.container .contactForm .formBox .inputBox textarea:focus ~ span, 
+.container .contactForm .formBox .inputBox textarea:valid ~ span
+{
+    transform: translateY(-20px);
+    font-size:  12px;
+    font-weight: 400;
+    letter-spacing: 1px;
+    color: #095a55;
+    font-weight: 500;
+} 
+
+/* Css for the submit button */
+.container .contactForm .formBox .inputBox input[type="submit"]         
+{
+    position: relative;
+    cursor: pointer;
+    background: #095a55;
+    border-radius: 20px;
+    color: #fff;
+    border: none;
+    max-width: 150px;
+    padding: 12px;
+
+}
+
+.container .contactForm .formBox .inputBox input[type="submit"]:hover{
+    background: #0d9480;
+}
+
+/* make the form responsive */
+@media (max-width: 1200px)
+{
+    .container
+    {
+        width: 90%;
+        min-width: auto;
+        margin: 20px;
+        box-shadow: 0 20px 50px rgba(0,0,0,0.2);
+    }
+
+    .container .contactInfo
+    {
+        top: 0;
+        height: 550px;
+        position: relative;
+        box-shadow: none;
+        border-radius: 0px;
+    }
+
+    .container .contactForm
+    {
+        position: relative;
+        width: calc(100% - 350px);
+        padding-left: 0;
+        margin-left: 0;
+        padding: 40px;
+        height: 550px;
+        box-shadow: none;
+        border-radius: 0px;
+    }
+}
+
+@media (max-width: 991px)
+{
+    section
+    {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 100vh;
+        background: #fff38e;
+    }
+
+    section::before
+    {
+        display: none;
+    }
+
+    .container
+    {
+        display: flex;
+        flex-direction: column-reverse;
+    }
+
+    .container .contactForm
+    {
+        width: 100%;
+        height: auto;
+        border-radius: 0px;
+    }
+
+    .container .contactInfo
+    {
+        width: 100%;
+        height: auto;
+        flex-direction: row;
+        border-radius: 0px;
+    }
+    .container .contactInfo ul.sci
+    {
+       position: relative;
+       display: flex;
+       justify-content: center;
+       align-items: center;
+    }
+}
+
+@media (max-width: 600px)
+{
+    .container .contactForm
+    {
+        padding: 25px;
+    }
+
+    .container .contactInfo{
+        padding: 25px;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .container .contactInfo ul.sci
+    {
+        margin-top: 40px;
+    }
+
+    .container .contactForm .formBox .inputBox.w50
+    {
+        width: 100%;
+    }
+}
diff --git a/Html-Files/app.js b/Html-Files/app.js
new file mode 100644
index 00000000..d96b5160
--- /dev/null
+++ b/Html-Files/app.js
@@ -0,0 +1,85 @@
+const darkModeToggle = document.getElementById("darkModeToggle");
+const body = document.body;
+
+// Function to toggle dark mode based on user preference
+function toggleDarkMode() {
+  if (darkModeToggle.checked) {
+    body.classList.add("dark-mode");
+  } else {
+    body.classList.remove("dark-mode");
+  }
+}
+
+// Event listener for dark mode toggle button
+darkModeToggle.addEventListener("change", toggleDarkMode);
+
+// Function to check and set initial dark mode state based on user preferences
+function setInitialDarkMode() {
+  const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+  if (prefersDarkMode) {
+    body.classList.add("dark-mode");
+    darkModeToggle.checked = true;
+  }
+}
+
+// Call the function to set initial dark mode state
+//setInitialDarkMode();
+
+// Create XMLHttpRequest Object
+const xhr = new XMLHttpRequest();
+
+function sendCategory(index) {
+  getNews(newsCategory[index]);
+}
+getNews("all");
+
+function getNews(newsCategoryName) {
+  xhr.open(
+    "GET",
+    `hhttps://newsapi.org/s/india-health-news-api`,
+    true
+  );
+
+  xhr.getResponseHeader("Content-type", "application/json");
+
+  xhr.onload = function () {
+    if (this.status === 200) {
+      let json = JSON.parse(this.responseText);
+      let data = json.data;
+
+      let newsHTML = "";
+
+      function showSpinner() {
+        spinner.style.visibility = "hidden";
+        newsBox.style.visibility = "visible";
+      }
+
+      xhr.onprogress = showSpinner;
+
+      for (key in data) {
+        let news = `<div class="newsCard">
+        <div class="imageWrapper">
+        <img src="${data[key].imageUrl}"
+        class="thumnail" alt="Image">
+            </div>
+            <div class="card-body">
+            <div class="card-date">${data[key].date}</div>
+                      <h5 class="card-title">${data[key].title}</h5>
+                                <h5 class="card-author">Author: ${data[key].author}</h5>
+                                <p class="card-text">${data[key].content}</p>
+                                <a target="_blank" href="${data[key].readMoreUrl}" class="btn btn-primary">Read more..</a>
+                            </div>
+                           
+                        </div>`;
+        newsHTML += news;
+      }
+
+      newsBox.innerHTML = newsHTML;
+    } else {
+      console.log("Some Error Occurred");
+    }
+  };
+
+  xhr.send();
+}
diff --git a/Html-Files/contact.html b/Html-Files/contact.html
new file mode 100644
index 00000000..f776071d
--- /dev/null
+++ b/Html-Files/contact.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html>
+    <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title> Contact Us</title>
+    <link rel="shortcut icon" type="image/jpg" href="images/news2.png"/>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap');
+    </style>
+    <link rel="stylesheet" href="Css-Files/styles.css">
+    </head>
+    <body>
+        <section>
+            <div class="container">
+                <div class="contactInfo"> 
+                    <div>
+                        <h2>Contact Info</h2>
+                        <ul class="info">
+                            
+                            <li>
+                                <span><img src="images/location.png"></span>
+                                <span>IGDTUW, Delhi</span>
+                                </span>
+                            </li>
+                            <li>
+                                <span><img src="images/mail.png"></span>
+                                <!-- <span>nassosanagn@gmail.com</span> -->
+                                <span><a href = "mailto: nassosanagn@gmail.com">rapidoc@mail.com</a></span>
+                            </li>
+                            <li>
+                                <span><img src="images/call.png"></span>
+                                <span>+91 1234567890</span>
+                            </li>
+
+                        </ul>
+                    </div>
+                    <ul class="sci">
+                        <li><a href="https://www.facebook.com"><img src="images/1.png"></a></li>
+                        <li><a href="https://www.instagram.com"><img src="images/3.png"></a></li>
+                        <li><a href="https://twitter.com"><img src="images/2.png"></a></li>
+                        <li><a href="https://www.linkedin.com"><img src="images/5.png"></a></li>
+                        
+                    </ul>
+                </div>
+                
+                    <div class="contactForm">
+                        <h2>RapiDoc Query</h2>
+                        <div class="formBox">
+                        <div class="inputBox w50">
+                            <input type="text" name="" required>
+                            <span>First Name</span>
+                        </div>
+                        <div class="inputBox w50">
+                            <input type="text" required>
+                            <span>Last Name</span>
+                        </div>
+                        <div class="inputBox w50">
+                            <input type="email" required>
+                            <span>Email Address</span>
+                        </div>
+                        <div class="inputBox w50">
+                            <input type="text" required>
+                            <span>Mobile Number</span>
+                        </div>
+                        <div class="inputBox w100">
+                            <textarea required></textarea>
+                            <span>Write your message here...</span>
+                        </div>
+                        <div class="inputBox w100">
+                            <input type="submit" value="Send">
+                        </div>
+                        
+                    </div>
+                </div>
+                    
+                    
+             
+        </section>
+    </body>
+</html>
\ No newline at end of file
diff --git a/Html-Files/images/1.png b/Html-Files/images/1.png
new file mode 100644
index 00000000..3b9c70b9
Binary files /dev/null and b/Html-Files/images/1.png differ
diff --git a/Html-Files/images/2.png b/Html-Files/images/2.png
new file mode 100644
index 00000000..0316ccb2
Binary files /dev/null and b/Html-Files/images/2.png differ
diff --git a/Html-Files/images/3.png b/Html-Files/images/3.png
new file mode 100644
index 00000000..a756f4bc
Binary files /dev/null and b/Html-Files/images/3.png differ
diff --git a/Html-Files/images/4.png b/Html-Files/images/4.png
new file mode 100644
index 00000000..608f2ddf
Binary files /dev/null and b/Html-Files/images/4.png differ
diff --git a/Html-Files/images/5.png b/Html-Files/images/5.png
new file mode 100644
index 00000000..eeeb8e78
Binary files /dev/null and b/Html-Files/images/5.png differ
diff --git a/Html-Files/images/call.png b/Html-Files/images/call.png
new file mode 100644
index 00000000..4ba95610
Binary files /dev/null and b/Html-Files/images/call.png differ
diff --git a/Html-Files/images/location.png b/Html-Files/images/location.png
new file mode 100644
index 00000000..f8b7d49f
Binary files /dev/null and b/Html-Files/images/location.png differ
diff --git a/Html-Files/images/mail.png b/Html-Files/images/mail.png
new file mode 100644
index 00000000..12df99c2
Binary files /dev/null and b/Html-Files/images/mail.png differ
diff --git a/Html-Files/images/news2.png b/Html-Files/images/news2.png
new file mode 100644
index 00000000..2d5abdc1
Binary files /dev/null and b/Html-Files/images/news2.png differ
diff --git a/Html-Files/img/favicon.png b/Html-Files/img/favicon.png
new file mode 100644
index 00000000..0d99a3f3
Binary files /dev/null and b/Html-Files/img/favicon.png differ
diff --git a/Html-Files/news.html b/Html-Files/news.html
new file mode 100644
index 00000000..741a2052
--- /dev/null
+++ b/Html-Files/news.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>News RapiDoc</title>
+  <!-- favicon -->
+  <link rel="icon" type="image/png" href="img/favicon.png" sizes="32x32" />
+  <!-- Bootsratp CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
+
+  <!-- Local CSS -->
+  <link rel="stylesheet" href="Css-Files/style.css" />
+</head>
+
+<body>
+  <!-- This is Bootsratp Nav bar -->
+  <nav id="navbar">
+    <nav class="navbar navbar-dark navbar-expand-lg bg-dark">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="">Home</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+              <div class="form-check form-switch">
+                <input type="checkbox" id="darkModeToggle">
+                <label class="form-check-label" for="darkModeToggle">
+                  <svg class="moon"  xmlns="http://www.w3.org/2000/svg"
+                  width="16" height="16"
+                    viewBox="0 0 512 512">
+                    <path fill="#fff"
+                      d="M268.279,496c-67.574,0-130.978-26.191-178.534-73.745S16,311.293,16,243.718A252.252,252.252,0,0,1,154.183,18.676a24.44,24.44,0,0,1,34.46,28.958,220.12,220.12,0,0,0,54.8,220.923A218.746,218.746,0,0,0,399.085,333.2h0a220.2,220.2,0,0,0,65.277-9.846,24.439,24.439,0,0,1,28.959,34.461A252.256,252.256,0,0,1,268.279,496ZM153.31,55.781A219.3,219.3,0,0,0,48,243.718C48,365.181,146.816,464,268.279,464a219.3,219.3,0,0,0,187.938-105.31,252.912,252.912,0,0,1-57.13,6.513h0a250.539,250.539,0,0,1-178.268-74.016,252.147,252.147,0,0,1-67.509-235.4Z"
+                      class="ci-primary"></path>
+                  </svg>
+                  <svg class="sun"  xmlns="http://www.w3.org/2000/svg" width="16"
+                    height="16" fill="currentColor" class="bi bi-sun" viewBox="0 0 16 16">
+                    <path
+                      d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
+                      fill="#fff9e5"></path>
+                  </svg>
+                </label>
+        </div>
+      </div>
+    </nav>
+  </nav>
+  <!-- This is basic header of website -->
+  <div class="head container">
+    <h3>
+      Top News <span class="badge text-bg-secondary">by RapiDoc</span>
+    </h3>
+    <span class="line"></span>
+  </div>
+  <!-- This is div where all the News are Fetched from API -->
+  <div id="newsBox"></div>
+  <div id="spinner" class="mySpin spinner-border text-warning"></div>
+  <!-- This is Basic Dark Fotter -->
+  <footer id="sticky-footer" class="flex-shrink-0 py-2 bg-dark text-white-50">
+    <div class="container text-center">
+      <small>Copyright &copy;2024 &nbsp; RapiDoc</small>
+    </div>
+  </footer>
+
+  <!-- Bootsratp js -->
+  <script src="app.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"
+    integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
+    crossorigin="anonymous"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/images/location.png b/images/location.png
new file mode 100644
index 00000000..e69de29b
diff --git a/index.html b/index.html
index 86d01b6e..14d20419 100644
--- a/index.html
+++ b/index.html
@@ -72,10 +72,12 @@ <h1 class="logo me-auto"><a href="index.html">RapiDoc</a></h1>
         <ul>
           <li><a class="nav-link scrollto active" href="#home"><i class="fa-solid fa-house"></i> Home</a></li>
           <li><a class="nav-link scrollto" href="#about"><i class="fa-solid fa-circle-info"></i> About</a></li>
+          <li><a class="nav-link scrollto active" href="Html-Files/news.html"><i class="fa-solid fa-house"></i> News</a></li>
           <li><a class="nav-link scrollto" href="#services"><i class="fa-solid fa-wrench"></i> Services</a></li>
           <li><a class="nav-link scrollto" href="#patient-portal"><i class="fa-solid fa-bed-pulse"></i> Patient Portal</a></li>
           <li><a class="nav-link scrollto" href="#doctors"><i class="fa-solid fa-user-doctor"></i> Doctors</a></li>
-          <li><a class="nav-link scrollto" href="#contact"><i class="fa-solid fa-phone"></i> Contact</a></li>
+          <li><a class="nav-link scrollto" href="Html-Files/contact.html"><i class="fa-solid fa-phone"></i> Contact</a></li>
+          <li><a class="nav-link scrollto active" href="Html-Files/news.html"><i class="fa-solid fa-house"></i> News</a></li>
           
           <li><a class="nav-link" href="#feedback"><i class="fa-solid fa-comment"></i> Feedback</a></li>
         </ul>
@@ -642,7 +644,7 @@ <h4>Links</h4>
               <li><i class="bx bx-chevron-right"></i> <a href="#about">About us</a></li>
               <li><i class="bx bx-chevron-right"></i> <a href="#services">Services</a></li>
               <li><i class="bx bx-chevron-right"></i> <a href="#doctor">Doctors</a></li>
-              <li><i class="bx bx-chevron-right"></i> <a href="#contact">Contact</a></li>
+              <li><i class="bx bx-chevron-right"></i> <a href="Html-Files/contact.html">Contact</a></li>
             </ul>
           </div>