diff --git a/css/style.css b/css/style.css
index 3918af0..ec472cc 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2393,11 +2393,75 @@ button:active {
   justify-content: center;
   gap: 20px;
 }
-
+/* used for removing the google translate bar */
 .VIpgJd-ZVi9od-ORHb-OEVmcd{
   display: none; 
 }
-
+/* used for removing the google translate reloading */
 .VIpgJd-ZVi9od-aZ2wEe-wOHMyf{
   display: none;
 }
+
+/* Account Not Available Modal Styles */
+.account-not-available-modal {
+  display: none; 
+  position: fixed; 
+  z-index: 100; 
+  padding-top: 100px; 
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%; 
+  overflow: auto; 
+  background-color: rgba(0, 0, 0, 0.8); 
+}
+
+.account-not-available-modal-content {
+  background: linear-gradient(to right, #d4fcff, #c8f7dc);
+
+  color: #ffffff;
+  margin: auto;
+  padding: 30px;
+  border-radius: 15px;
+  width: 80%;
+  max-width: 600px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
+  text-align: center;
+  animation: fadeIn 0.5s;
+}
+
+.account-not-available-modal .close {
+  color: #ffffff;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.account-not-available-modal .close:hover,
+.account-not-available-modal .close:focus {
+  color: #bdc3c7;
+  text-decoration: none;
+}
+
+.account-not-available-modal h2 {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+.account-not-available-modal p {
+  font-size: 18px;
+  line-height: 1.6;
+  margin: 20px 0;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
diff --git a/index.html b/index.html
index 508f1d2..028fcca 100644
--- a/index.html
+++ b/index.html
@@ -441,6 +441,16 @@ <h2><strong class="nameAbout">Features</strong></h2>
       <img src="assets/images/learn/Linear_02.jpg" alt="Linear Mode Example 2" style="width:180px; height: 180px;">
     </div>
   </div> -->
+  <!-- Account Not Available Modal -->
+<div id="accountNotAvailableModal" class="account-not-available-modal">
+  <div class="account-not-available-modal-content">
+    <span class="close" id="closeAccountNotAvailableModal">&times;</span>
+    <h2>Account Not Available</h2>
+    <p>We apologize for the inconvenience, but our social media accounts are currently unavailable. We are working diligently to bring them online as soon as possible.</p>
+    <p>In the meantime, if you have any questions or need assistance, please feel free to reach out to us through our website's feedback form. We appreciate your understanding and patience during this time.</p>
+    <p>Thank you for your continued support! </p>      
+  </div>
+</div>
   <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
   <script src="js/background.js"></script>
   <script src="js/script.js"></script>
@@ -453,4 +463,4 @@ <h2><strong class="nameAbout">Features</strong></h2>
     src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/js/script.js b/js/script.js
index 6f7edde..73c2867 100644
--- a/js/script.js
+++ b/js/script.js
@@ -918,3 +918,32 @@ function changeToGif6() {
 function changeToStatic6() {
     document.getElementById('image6').src = '../assets/images/features/Linear_02.jpg';
 }
+
+// Get the modal
+var accountNotAvailableModal = document.getElementById("accountNotAvailableModal");
+
+// Get the <span> element that closes the modal
+var closeAccountNotAvailableModal = document.getElementById("closeAccountNotAvailableModal");
+
+// Get all social media links
+var socialLinks = document.querySelectorAll(".socialIcons a");
+
+// When the user clicks on <span> (x), close the modal
+closeAccountNotAvailableModal.onclick = function() {
+  accountNotAvailableModal.style.display = "none";
+}
+
+// When the user clicks anywhere outside of the modal, close it
+window.onclick = function(event) {
+  if (event.target == accountNotAvailableModal) {
+    accountNotAvailableModal.style.display = "none";
+  }
+}
+
+// When the user clicks on a social media link, show the modal
+socialLinks.forEach(function(link) {
+  link.onclick = function(event) {
+    event.preventDefault();
+    accountNotAvailableModal.style.display = "block";
+  }
+});