diff --git a/css/main.css b/css/main.css
index 7ba232d..8d4d65d 100755
--- a/css/main.css
+++ b/css/main.css
@@ -1649,77 +1649,165 @@ button::-moz-focus-inner, input::-moz-focus-inner {
 /* ------------------------------------------------------------------- 
  * ## mobile menu toggle 
  * ------------------------------------------------------------------- */
-.header-menu-toggle {
+.header-controls {
     position: fixed;
-    right: 38px;
     top: 24px;
-    height: 42px;
+    right: 38px;
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    z-index: 650;
+}
+
+.header-theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     width: 42px;
-    line-height: 42px;
+    height: 42px;
+    padding: 0;
+    border-radius: 50%;
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    color: #00163D;
+    cursor: pointer;
+    font-size: 1.6rem;
+    line-height: 1;
+    -webkit-transition: color 0.3s ease;
+    transition: color 0.3s ease;
+    -webkit-appearance: none;
+    appearance: none;
+    -webkit-tap-highlight-color: transparent;
+    background-clip: padding-box;
+}
+
+.header-theme-toggle:hover { color: #ff904d; }
+/* Remove any visual shadow/outline produced by the UA or other generic rules when clicked or focused by mouse. */
+.header-theme-toggle:focus:not(:focus-visible),
+.header-theme-toggle:active,
+.header-theme-toggle:focus {
+    outline: none !important;
+    box-shadow: none !important;
+    background: transparent !important;
+}
+.header-theme-toggle:focus-visible {
+    /* keep a minimal indicator for keyboard users only (subtle, inside the icon) */
+    box-shadow: inset 0 0 0 2px rgba(255,144,77,0.12);
+}
+
+.header-theme-toggle i {
+    font-size: 1.6rem;
+}
+
+.dark .header-theme-toggle {
+    color: #e2e8f0;
+}
+
+.dark .header-theme-toggle:hover,
+.dark .header-theme-toggle:focus,
+.dark .header-theme-toggle:active {
+    color: #f97316;
+    outline: none;
+    box-shadow: none;
+}
+
+.dark .header-theme-toggle:focus-visible {
+    color: #f97316;
+    outline: none;
+    box-shadow: none;
+}
+
+.header-menu-toggle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    height: 42px;
+    padding: 0 4px 0 0;
     font-family: 'Inconsolata', monospace;
     font-size: 1.6rem;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: .3rem;
     color: #00163D;
-    -webkit-transition: all 0.5s ease-in-out;
-    transition: all 0.5s ease-in-out;
+    cursor: pointer;
+    -webkit-transition: color 0.5s ease-in-out;
+    transition: color 0.5s ease-in-out;
 }
 
 .header-menu-toggle.opaque {
-    background-color: #ffffff
-    ;
+    background-color: #ffffff;
 }
 
 .header-menu-toggle.opaque .header-menu-text {
-    background-color: #ffffff    ;
+    background-color: #ffffff;
+}
+
+/* When dark theme is active, don't show the opaque white chip — keep it transparent/dark */
+.dark .header-menu-toggle.opaque {
+    background-color: transparent; /* subtle translucent so it doesn't pop as white */
+}
+.dark .header-menu-toggle.opaque .header-menu-text {
+    background-color: transparent;
+    color: #e2e8f0; /* keep text readable in dark */
 }
 
-.header-menu-toggle:hover, .header-menu-toggle:focus {
+.header-menu-toggle:hover,
+.header-menu-toggle:focus {
     color: #00163D;
 }
 
 .header-menu-text {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: -70px;
-    width: 70px;
-    padding-left: 12px;
+    display: inline-block;
+    padding-left: 0;
+    line-height: 42px; /* vertically center the Menu text with the toggle icon */
 }
 
 .header-menu-icon {
+    position: relative;
     display: block;
     width: 22px;
     height: 2px;
-    margin-top: -1px;
-    position: absolute;
-    left: 10px;
-    top: 50%;
-    right: auto;
-    bottom: auto;
+    margin-top: 0;
     background-color: #121212;
-    -webkit-transition: all 0.5s ease-in-out;
-    transition: all 0.5s ease-in-out;
+    -webkit-transition: background-color 0.5s ease-in-out;
+    transition: background-color 0.5s ease-in-out;
 }
 
-.header-menu-icon::before, .header-menu-icon::after {
+.header-menu-icon::before,
+.header-menu-icon::after {
     content: '';
     width: 100%;
     height: 100%;
     background-color: inherit;
     position: absolute;
     left: 0;
-    -webkit-transition: all 0.5s ease-in-out;
-    transition: all 0.5s ease-in-out;
+    -webkit-transition: background-color 0.5s ease-in-out;
+    transition: background-color 0.5s ease-in-out;
 }
 
 .header-menu-icon::before {
-    top: -9px;
+    top: -6px;
 }
 
 .header-menu-icon::after {
-    bottom: -9px;
+    top: 6px;
+}
+
+.dark .header-menu-toggle {
+    color: #e2e8f0;
+}
+
+.dark .header-menu-toggle:hover,
+.dark .header-menu-toggle:focus {
+    color: #f97316;
+}
+
+.dark .header-menu-icon,
+.dark .header-menu-icon::before,
+.dark .header-menu-icon::after {
+    background-color: #e2e8f0;
 }
 
 
@@ -1734,8 +1822,19 @@ button::-moz-focus-inner, input::-moz-focus-inner {
     .header-logo {
         left: 30px;
     }
+    .header-controls {
+        top: 20px;
+        right: 20px;
+        gap: 12px;
+    }
+    .header-theme-toggle {
+        width: 38px;
+        height: 38px;
+        font-size: 1.4rem;
+    }
     .header-menu-toggle {
-        right: 25px;
+        height: 38px;
+        font-size: 1.4rem;
     }
 }
 
@@ -1922,6 +2021,31 @@ button::-moz-focus-inner, input::-moz-focus-inner {
     -webkit-transform: translate3d(0, -50%, 0);
     -ms-transform: translate3d(0, -50%, 0);
     transform: translate3d(0, -50%, 0);
+    background: transparent !important;
+}
+
+/* added: force transparent background and size for the new transparent PNG
+   - width chosen to match current visual area used by the old bunny (adjust if needed)
+   - max-width keeps it responsive; media queries scale it down on smaller viewports */
+.bunny img {
+    display: block;
+    width: 420px;        /* target width to match original bunny area — change if you measure a different exact size */
+    max-width: 60vw;
+    height: auto;
+    background: transparent !important;
+    -webkit-backface-visibility: hidden;
+}
+
+/* responsive steps — tweak the numbers if you want exact parity with the old image at each breakpoint */
+@media only screen and (max-width: 1500px) {
+    .bunny img { width: 360px; }
+}
+
+@media only screen and (max-width: 1000px) {
+    .bunny img { width: 280px; }
+}
+@media only screen and (max-width: 600px) {
+    .bunny img { width: 200px; }
 }
 
 /* ------------------------------------------------------------------- 
@@ -1990,6 +2114,10 @@ button::-moz-focus-inner, input::-moz-focus-inner {
     transform-origin: 100% 50%;
 }
 
+.dark .home-social span {
+    color: #f4f7ff;
+}
+
 .home-social li:hover span {
     opacity: 1;
     visibility: visible;
@@ -2683,7 +2811,7 @@ html.no-csstransitions .home-content__main {
     opacity: 0;
     visibility: hidden;
     -webkit-transform: translate3d(0, -100%, 0);
-    -ms-transform: translate3d(0, -100%, 0);
+       -ms-transform: translate3d(0, -100%, 0);
     transform: translate3d(0, -100%, 0);
 }
 
@@ -3415,331 +3543,9 @@ html.no-csstransitions .home-content__main {
 }
 
 .go-top a:hover, .go-top a:focus {
-    color: #FFFFFF;
-}
-
-
-.input-group {
-  display: flex;
-  flex-direction: row;
-}
-
-.impress_area {
-  /*background-image: url(../img/banner/dot-background.svg);*/
-  /*background-size: cover;*/
-  margin-bottom: -100px;
-  margin-top: -10px;
-  padding-top: 80px;
-  /* background-image:url('https://raw.githubusercontent.com/keploy/website/f37829d39b80993698f1fb019d369440c96f72d6/img/banner/dot-background.svg') ; */
-  background-image:url('../images/dot-background.png') ;
-  image-resolution: 300dpi;
-}
-.impress_area .impress_inner {
-  text-align: center;
-  max-width: 780px;
-  margin: auto;
-}
-.impress_area .impress_inner h2 {
-  color: #6f0a0d;
-  font-size: 36px;
-  -webkit-font-smoothing: antialiased;
-  font-family: 'Lato', sans-serif;
-  font-weight: bold;
-}
-.impress_area .impress_inner p {
-  color: #6f0a0d;
-  margin-bottom: 35px;
-}
-.impress_area .impress_inner .primary_btn {
-  border: double 2px #ff904d;
-  background: #ffffff;
-  width: auto;
-  font-size: 15px;
-  box-shadow: -14.142px 14.142px 20px 0px rgba(0, 0, 0, 0.1);
-}
-.impress_area .impress_inner .primary_btn:hover {
-  color: #ffffff;
-  background: #ff904d;
-}
-.impress_area .impress_inner .primary_btn:hover:after {
-  border-image: -webkit-linear-gradient(0deg, #fff, #fff);
-  border-image: -moz-linear-gradient(0deg, #fff, #fff);
-  border-image: -o-linear-gradient(0deg, #fff, #fff);
-  border-image: linear-gradient(0deg, #fff, #fff);
-}
-
-.impress_area .input-group input {
-  height: 40px;
-  background: #fff;
-  border-radius: 10px 0px 0px 10px;
-  width: 50%;
-  border: double 2px #E35134;
-  padding: 0px 15px;
-  font-size: 14px;
-  -webkit-font-smoothing: antialiased;
-  font-family: "TT Norms Pro", sans-serif;
-  color: #6f0a0d;
-  outline: none;
-  box-shadow: none;
-}
-
-.justify-content-center {
-  -ms-flex-pack: center !important;
-  justify-content: center !important;
-}
-
-.impress_area .input-group input.placeholder {
-  font-size: 14px;
-  font-family: "Roboto", sans-serif;
-  font-weight: normal;
-  color: #cccccc;
-}
-.impress_area .input-group input::-webkit-input-placeholder {
-  font-size: 14px;
-  font-family: "Roboto", sans-serif;
-  font-weight: normal;
-  color: #cccccc;
-}
-.impress_area .input-group .sub-btn {
-  border-radius: 0;
-  border-top-right-radius: 10px;
-  border-bottom-right-radius: 10px;
-  background-image: linear-gradient(to right, #E35134 0%, #e27762 100%),
-    radial-gradient(circle at top left, #E35134, #e27762);
-  background-image: -webkit-linear-gradient(to right, #E35134 0%, #e27762 100%),
-    -webkit-radial-gradient(circle at top left, #E35134, #e27762);
-  background-image: -moz-linear-gradient(to right, #E35134 0%, #e27762 100%),
-    -moz-radial-gradient(circle at top left, #E35134, #e27762);
-  background-image: -ms-linear-gradient(to right, #E35134 0%, #e27762 100%),
-    -ms-radial-gradient(circle at top left, #E35134, #e27762);
-  background-image: -o-linear-gradient(to right, #E35134 0%, #e27762 100%),
-    -o-radial-gradient(circle at top left, #E35134, #e27762);
-  outline: none !important;
-  box-shadow: none !important;
-  padding: 0px;
-  width: 42px;
-  height: 40px;
-  cursor: pointer;
-  color: #ffffff;
-}
-
-/* End Impress Area css
-============================================================================================ */
-/*---------------------------------------------------- */
-
-/* ===================================================================
- * # footer
- *
- * ------------------------------------------------------------------- */
-/* Footer Area css
-  ============================================================================================ */
-.footer_area .f_title {
-  margin-bottom: 20px;
-}
-
-.footer-bottom {
-  text-align: center;
-}
-
-.footer-bottom .footer-social {
-  text-align: center;
-  margin-top: 15px;
-}
-
-/* End End Footer Area css
-  ============================================================================================ */
-
-/* Footer Area css
-============================================================================================ */
-.footer_area {
-  background-image: url('../images/dot-background.png');
-  background-size: cover;
-  padding-top: 120px;
-  padding-bottom: 120px;
-}
-
-.f_title {
-  margin-bottom: 35px;
-}
-.f_title h3 {
-  color: #6f0a0d;
-  font-size: 20px;
-  font-weight: bold;
-  -webkit-font-smoothing: antialiased;
-  font-family: 'Lato', sans-serif;
-  margin-bottom: 0px;
-}
-
-.ab_widget p {
-  font-size: 15px;
-  line-height: 24px;
-  -webkit-font-smoothing: antialiased;
-  font-family: 'Inconsolata', monospace;
-  color: #6f0a0d;
-  font-weight: 500;
-  margin-bottom: 30px;
-  margin-left: -10px;
-}
-.ab_widget p a {
-  color: #8252fa;
-}
-.ab_widget p + p {
-  margin-bottom: 0px;
-}
-
-.news_widget p {
-  font-size: 14px;
-  line-height: 24px;
-  font-family: "Roboto", sans-serif;
-  color: #6f0a0d;
-  font-weight: 500;
-  margin-bottom: 15px;
+    color: #ffffff;
 }
 
-.news_widget .input-group {
-  position: relative;
-  width: 25rem;
-}
-.news_widget .input {
-  border: double 2px #E35134;
-}
-.news_widget .input-group input {
-  height: 50px;
-  background: #fff;
-  border-radius: 50px;
-  width: 100%;
-  /* border: none; */
-  padding: 0px 15px;
-  font-size: 14px;
-  font-family: "Roboto", sans-serif;
-  color: #cccccc;
-  outline: none;
-  box-shadow: none;
-}
-.news_widget .input-group .input.placeholder {
-  font-size: 14px;
-  font-family: "Roboto", sans-serif;
-  font-weight: normal;
-  color: #cccccc;
-}
-
-.news_widget .input-group .input::-webkit-input-placeholder {
-  font-size: 14px;
-  font-family: "Roboto", sans-serif;
-  font-weight: normal;
-  color: #cccccc;
-}
-.news_widget .input-group .sub-btn {
-  position: absolute;
-  right: 4px;
-  top: 2px;
-  border-radius: 50px;
-  outline: none !important;
-  box-shadow: none !important;
-  padding: 0px;
-  width: 46px;
-  height: 46px;
-  cursor: pointer;
-  color: #fff;
-}
-
-.social_widget p {
-  font-size: 14px;
-  line-height: 24px;
-  -webkit-font-smoothing: antialiased;
-  font-family: "TT Norms Pro", sans-serif;
-  color: #6f0a0d;
-  font-weight: 500;
-  margin-bottom: 10px;
-}
-.social_widget .list li {
-  display: inline-block;
-}
-.social_widget .list li a {
-  color: #E35134;
-  font-size: 20px;
-  -webkit-transition: all 0.4s ease 0s;
-  -moz-transition: all 0.4s ease 0s;
-  -o-transition: all 0.4s ease 0s;
-  transition: all 0.4s ease 0s;
-}
-.social_widget .list li:last-child {
-  margin-right: 0px;
-}
-.social_widget .list li:hover a {
-  color: #fa9e53;
-}
-
-.copy_right_text {
-  text-align: center;
-  margin-top: 60px;
-}
-.copy_right_text p a {
-  color: #fa9e53;
-}
-
-.submit-btn {
-  background-image: linear-gradient(to right, #E35134 0%, #e27762 100%),
-    radial-gradient(circle at top left, #E35134, #e27762);
-  background-image: -webkit-linear-gradient(to right, #E35134 0%, #e27762 100%),
-    -webkit-radial-gradient(circle at top left, #E35134, #e27762);
-  background-image: -moz-linear-gradient(to right, #E35134 0%, #e27762 100%),
-    -moz-radial-gradient(circle at top left, #E35134, #e27762);
-  background-image: -ms-linear-gradient(to right, #E35134 0%, #e27762 100%),
-    -ms-radial-gradient(circle at top left, #E35134, #e27762);
-  background-image: -o-linear-gradient(to right, #E35134 0%, #e27762 100%),
-    -o-radial-gradient(circle at top left, #E35134, #e27762);
-
-  line-height: 1.5;
-  width: auto;
-}
-
-
-
-
-
-/* End Footer Area css
-============================================================================================ */
-/*---------------------------------------------------- */
-
-/* ------------------------------------------------------------------- 
- * ## go to top
- * ------------------------------------------------------------------- */
-.go-top {
-  position: fixed;
-  bottom: 30px;
-  right: 30px;
-  z-index: 600;
-  display: none;
-}
-
-.go-top a,
-.go-top a:visited {
-  text-decoration: none;
-  border: 0 none;
-  display: block;
-  height: 60px;
-  width: 60px;
-  line-height: 60px;
-  text-align: center;
-  background: #6f0a0d;
-  color: rgba(255, 255, 255, 0.5);
-  text-align: center;
-  text-transform: uppercase;
-  -webkit-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
-}
-
-.go-top a i,
-.go-top a:visited i {
-  font-size: 18px;
-  line-height: inherit;
-}
-
-.go-top a:hover,
-.go-top a:focus {
-  color: #ffffff;
-}
 
 /* ------------------------------------------------------------------- 
  * responsive:
@@ -4043,4 +3849,128 @@ html.no-csstransitions .home-content__main {
 .criteria-list {
     /* margin-top: 20px; */
     margin-bottom: 40px;
+}
+
+/* -------------------------------------------------------------------
+ * Footer tweaks for theme compatibility and layout
+ * - consistent heading size & spacing across footer columns
+ * - align columns from the top
+ * - style newsletter input/button to match site palette and show arrow
+ * - make social icons horizontal
+ * - keep rules intentionally scoped to footer_area
+ * ------------------------------------------------------------------- */
+/* Make the footer columns align from the top and wrap on small screens */
+.footer_area .row.footer_inner {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    padding-top: 2.8rem; /* add comfortable top breathing space */
+}
+
+/* Standardize footer section headings (Copyright, Newsletter, Find us on) */
+.footer_area .f_title h3 {
+    margin: 20px 0 1rem 0; /* remove large global top margin for uniform alignment */
+    font-size: 2.4rem;  /* match global h3 size used elsewhere */
+    font-weight: 700;
+    font-family: 'Lato', sans-serif;
+}
+
+/* Copyright block paragraph: match size with other footer paragraphs */
+.footer_area .f_widget.ab_widget p {
+    margin: 0; /* keep tight with heading like other sections */
+    color: inherit; /* inherit current theme color */
+    font-size: 2rem; /* match base body size used site-wide */
+}
+
+.footer_area .news_widget .input-group {
+    position: relative;
+    display: block; /* override flex utility classes */
+    max-width: 25rem;
+    width: 100%;
+    margin: 0 auto;
+}
+.footer_area .news_widget .input-group input[type="email"] {
+    width: 100%;
+    min-height: 42px;
+    padding: 0.8rem 1.2rem;
+    padding-right: 4.2rem; /* leave space for circular button */
+    border-radius: 9999px; /* pill */
+    border: 1px solid rgba(0,22,61,0.20); /* visible in light theme */
+    background: rgba(0,22,61,0.06); /* subtle tinted bg for light theme */
+    color: #00163D; /* dark text for light theme */
+    font-size: 1.4rem;
+}
+.footer_area .news_widget .input-group input[type="email"]::placeholder{
+    color: rgba(0,22,61,0.55); /* readable in light theme */
+}
+.footer_area .news_widget .input-group .submit-btn {
+    width: 44px;
+    height: 44px;
+    padding: 0; /* circular button */
+    border-radius: 9999px; /* circle */
+    border: none;
+    background: #ff904d; /* primary accent */
+    color: #00163D; /* dark icon on accent */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 33%;
+    right: 0.6rem;
+    transform: translateY(-50%);
+}
+.footer_area .news_widget .input-group .submit-btn i,
+.footer_area .news_widget .input-group .submit-btn span {
+    color: inherit;
+    font-size: 1.4rem;
+}
+
+.footer_area .social_widget .list {
+    display: flex;
+    gap: 0.8rem;
+    padding: 0;
+    margin: 0;
+    align-items: center;
+}
+.footer_area .social_widget .list li {
+    display: inline-block;
+    margin: 0;
+}
+.footer_area .social_widget .list li a {
+    color: inherit;
+    font-size: 1.6rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Dark mode tweaks: keep contrast for inputs/buttons */
+.dark .footer_area .news_widget .input-group input[type="email"] {
+    background: rgba(255,255,255,0.06);
+    border-color: rgba(255,255,255,0.18);
+    color: #e5e7eb;
+}
+.dark .footer_area .news_widget .input-group input[type="email"]::placeholder {
+    color: rgba(229,231,235,0.6);
+}
+.dark .footer_area .news_widget .input-group .submit-btn {
+    background: #ff904d;
+    color: #00163D;
+}
+
+/* small screens: stack input & button for usability */
+@media only screen and (max-width: 420px) {
+    .footer_area .news_widget .input-group {
+        display: flex !important;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0.6rem;
+        max-width: 100%;
+    }
+    .footer_area .news_widget .input-group .submit-btn {
+        position: static;
+        transform: none;
+        width: 100%;
+        height: 44px;
+    }
 }
\ No newline at end of file
diff --git a/css/tailwind.css b/css/tailwind.css
new file mode 100644
index 0000000..f767bfc
--- /dev/null
+++ b/css/tailwind.css
@@ -0,0 +1,112 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Dark mode overrides - scoped to body and specific elements */
+.dark body {
+  background-color: #0b1220 !important;
+  color: #e5e7eb !important;
+}
+
+/* Dark mode for sections and major containers */
+.dark .s-home,
+.dark .s-about,
+.dark .s-services,
+.dark .s-contact {
+  background-color: #0b1220 !important;
+  color: #e5e7eb !important;
+}
+
+.dark .s-header {
+  background-color: rgba(11, 18, 32, 0.95) !important;
+}
+
+/* Override inline dark text colors for readability in dark mode */
+.dark [style*="color: #00163D"],
+.dark [style*="color:#00163D"],
+.dark [style*="color: #121212"],
+.dark [style*="color:#121212"],
+.dark [style*="color: #000000"],
+.dark [style*="color:#000000"] {
+  color: #e5e7eb !important;
+}
+
+/* Headings in dark mode */
+.dark h1,
+.dark h2,
+.dark h3,
+.dark h4,
+.dark h5,
+.dark h6 {
+  color: #e5e7eb !important;
+}
+
+/* Paragraphs without specific classes */
+.dark p {
+  color: #d1d5db !important;
+}
+
+/* Make sure links are visible in dark mode */
+.dark a:not(.btn) {
+  color: #93c5fd !important;
+}
+
+.dark a:not(.btn):hover {
+  color: #bfdbfe !important;
+}
+
+/* Buttons in dark mode */
+.dark .btn--stroke {
+  background: transparent !important;
+  border-color: #e5e7eb !important;
+  color: #e5e7eb !important;
+}
+
+.dark .btn--stroke:hover {
+  background-color: #e5e7eb !important;
+  color: #0b1220 !important;
+}
+
+/* Keep hero overlay adjusted for dark mode */
+.dark .overlay {
+  background: rgba(0, 0, 0, 0.85) !important;
+}
+
+/* Footer in dark mode */
+.dark .footer_area {
+  background-color: #050a14 !important;
+  color: #e5e7eb !important;
+}
+
+/* Custom footer tweaks (kept here so they survive Tailwind builds)
+   - Structure, newsletter styling, horizontal social icons */
+@layer components {
+  .footer_area .f_widget.ab_widget .f_title h3 { margin: 0 0 0.25rem 0; font-size: 2rem; }
+  .footer_area .f_widget.ab_widget p { margin: 0; color: rgba(255,255,255,0.8); font-size: 1.2rem; }
+
+  .footer_area .news_widget .input-group { position: relative; display: block; max-width: 28rem; width: 100%; margin: 0 auto; }
+  .footer_area .news_widget .input-group input[type="email"] {
+    width: 100%; min-height: 42px; padding: 0.8rem 1.2rem; padding-right: 4.2rem; border-radius: 9999px; border: 1px solid rgba(0,22,61,0.20);
+    background: rgba(0,22,61,0.06); color: #00163D; font-size: 1.4rem;
+  }
+  .footer_area .news_widget .input-group input[type="email"]::placeholder { color: rgba(0,22,61,0.55); }
+  .footer_area .news_widget .input-group .submit-btn {
+    width: 44px; height: 44px; padding: 0; border-radius: 9999px; border: none; background: #ff904d; color: #00163D;
+    display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 50%; right: 0.6rem; transform: translateY(-50%);
+  }
+  .footer_area .news_widget .input-group .submit-btn i,
+  .footer_area .news_widget .input-group .submit-btn span { color: inherit; font-size: 1.4rem; }
+
+  .footer_area .social_widget .list { display: flex; gap: 0.8rem; padding: 0; margin: 0; align-items: center; }
+  .footer_area .social_widget .list li { display: inline-block; margin: 0; }
+  .footer_area .social_widget .list li a { color: inherit; font-size: 1.6rem; display: inline-flex; align-items: center; justify-content: center; }
+
+  .dark .footer_area .news_widget .input-group input[type="email"] { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: #e5e7eb; }
+  .dark .footer_area .news_widget .input-group input[type="email"]::placeholder { color: rgba(229,231,235,0.6); }
+  .dark .footer_area .news_widget .input-group .submit-btn { background: #ff904d; color: #00163D; }
+
+  @media (max-width: 420px) {
+    .footer_area .news_widget .input-group { display: flex !important; flex-direction: column; align-items: stretch; gap: 0.6rem; max-width: 100%; }
+    .footer_area .news_widget .input-group .submit-btn { position: static; transform: none; width: 100%; height: 44px; }
+  }
+}
\ No newline at end of file
diff --git a/css/tw.css b/css/tw.css
new file mode 100644
index 0000000..5c68d49
--- /dev/null
+++ b/css/tw.css
@@ -0,0 +1,247 @@
+.container {
+  width: 100%;
+}
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+.visible {
+  visibility: visible;
+}
+.static {
+  position: static;
+}
+.fixed {
+  position: fixed;
+}
+.absolute {
+  position: absolute;
+}
+.relative {
+  position: relative;
+}
+.sticky {
+  position: sticky;
+}
+.m-1 {
+  margin: 0.25rem;
+}
+.mt-10 {
+  margin-top: 2.5rem;
+}
+.block {
+  display: block;
+}
+.inline-block {
+  display: inline-block;
+}
+.inline {
+  display: inline;
+}
+.flex {
+  display: flex;
+}
+.inline-flex {
+  display: inline-flex;
+}
+.table {
+  display: table;
+}
+.grid {
+  display: grid;
+}
+.contents {
+  display: contents;
+}
+.hidden {
+  display: none;
+}
+.h-1 {
+  height: 0.25rem;
+}
+.flex-shrink {
+  flex-shrink: 1;
+}
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.resize {
+  resize: both;
+}
+.flex-row {
+  flex-direction: row;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.items-center {
+  align-items: center;
+}
+.gap-2 {
+  gap: 0.5rem;
+}
+.rounded {
+  border-radius: 0.25rem;
+}
+.border {
+  border-width: 1px;
+}
+.border-transparent {
+  border-color: transparent;
+}
+.bg-transparent {
+  background-color: transparent;
+}
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+.text-center {
+  text-align: center;
+}
+.text-slate-700 {
+  --tw-text-opacity: 1;
+  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
+}
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+/* Dark mode overrides - scoped to body and specific elements */
+.dark body {
+  background-color: #0b1220 !important;
+  color: #e5e7eb !important;
+}
+
+/* Dark mode for sections and major containers */
+.dark .s-home,
+.dark .s-about,
+.dark .s-services,
+.dark .s-contact {
+  background-color: #0b1220 !important;
+  color: #e5e7eb !important;
+}
+
+.dark .s-header {
+  background-color: rgba(11, 18, 32, 0.95) !important;
+}
+
+/* Override inline dark text colors for readability in dark mode */
+.dark [style*="color: #00163D"],
+.dark [style*="color:#00163D"],
+.dark [style*="color: #121212"],
+.dark [style*="color:#121212"],
+.dark [style*="color: #000000"],
+.dark [style*="color:#000000"] {
+  color: #e5e7eb !important;
+}
+
+/* Headings in dark mode */
+.dark h1,
+.dark h2,
+.dark h3,
+.dark h4,
+.dark h5,
+.dark h6 {
+  color: #e5e7eb !important;
+}
+
+/* Paragraphs without specific classes */
+.dark p {
+  color: #d1d5db !important;
+}
+
+/* Make sure links are visible in dark mode */
+.dark a:not(.btn) {
+  color: #93c5fd !important;
+}
+
+.dark a:not(.btn):hover {
+  color: #bfdbfe !important;
+}
+
+/* Buttons in dark mode */
+.dark .btn--stroke {
+  background: transparent !important;
+  border-color: #e5e7eb !important;
+  color: #e5e7eb !important;
+}
+
+.dark .btn--stroke:hover {
+  background-color: #e5e7eb !important;
+  color: #0b1220 !important;
+}
+
+/* Keep hero overlay adjusted for dark mode */
+.dark .overlay {
+  background: rgba(0, 0, 0, 0.85) !important;
+}
+
+/* Footer in dark mode */
+.dark .footer_area {
+  background-color: #050a14 !important;
+  color: #e5e7eb !important;
+}
+.hover\:border-slate-300:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
+}
+.dark\:inline:is(.dark *) {
+  display: inline;
+}
+.dark\:hidden:is(.dark *) {
+  display: none;
+}
+.dark\:text-slate-200:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
+}
+.dark\:hover\:border-slate-600:hover:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
+}
\ No newline at end of file
diff --git a/images/bunnytransparent.png b/images/bunnytransparent.png
new file mode 100644
index 0000000..0e66e10
Binary files /dev/null and b/images/bunnytransparent.png differ
diff --git a/index.html b/index.html
index 9d7394a..0d19b45 100755
--- a/index.html
+++ b/index.html
@@ -27,8 +27,22 @@
           rel="stylesheet"
           href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
         />
-        <link rel="stylesheet" href="css/main.css">
+        <!-- Load legacy styles first, then Tailwind utilities to avoid layout overrides -->
+  <link rel="stylesheet" href="css/main.css?v=dlm2">
+  <link rel="stylesheet" href="css/tw.css?v=dlm2">
         <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
+        
+        <script>
+  (function () {
+    try {
+      var stored = localStorage.getItem('theme');
+      // Default to light unless user explicitly chose dark
+      var theme = stored ? stored : 'light';
+      if (theme === 'dark') document.documentElement.classList.add('dark');
+      else document.documentElement.classList.remove('dark');
+    } catch (e) {}
+  })();
+</script>
         <!-- script
           ================================================== -->
         <script src="js/modernizr.js"></script>
@@ -215,10 +229,21 @@ <h3>Navigation</h3>
               </ul>
             </div>
           </nav>
-          <a class="header-menu-toggle" href="#0">
-          <span class="header-menu-text">Menu</span>
-          <span class="header-menu-icon"></span>
-          </a>
+          <div class="header-controls">
+            <button id="theme-toggle"
+                    class="header-theme-toggle"
+                    type="button"
+                    aria-label="Toggle theme"
+                    aria-pressed="false">
+              <i class="fa-solid fa-moon hidden dark:inline"></i>
+              <i class="fa-solid fa-sun inline dark:hidden"></i>
+              <span class="sr-only">Toggle dark mode</span>
+            </button>
+            <a class="header-menu-toggle" href="#0">
+              <span class="header-menu-text">Menu</span>
+              <span class="header-menu-icon"></span>
+            </a>
+          </div>
         </header>
         <!-- end s-header -->
         <!-- home
@@ -252,7 +277,7 @@ <h3> An Open-Source Prorgam for Students, Professionals, and Freelancers</h3>
 
 
           <div class="bunny">
-            <img src="images/bunny.png" alt="Bugs Bunny">
+            <img src="images/bunnytransparent.png" alt="Bunny (transparent)" />
           </div>
 
           <!-- end home-content -->
@@ -793,7 +818,7 @@ <h2 class="mb-30">Sign-up for the newsletter!</h2>
               <div class="col-lg-5 col-sm-6">
                 <aside class="f_widget ab_widget">
                   <div class="f_title">
-                    <h3 style="margin-left: -10px;">Copyright © 2025  Keploy Inc.</h3>
+                    <h3>Copyright © 2025  Keploy Inc.</h3>
                   </div>
                   <p style="font-family:'Inconsolata', monospace;">Developers experience for e2e testing. Toolkit that creates test-cases and data mocks from API calls, DB queries, etc.</p>
                 </aside>
@@ -808,7 +833,7 @@ <h3>Newsletter</h3>
                     <form id="newsletter-1" target="" action="" method="post" class="subscribe_form relative">
                       <div class="input-group d-flex flex-row justify-content-center">
                         <input name="email" class="input" placeholder="Enter email address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email Address '" required="" type="email">
-                        <button class="btn sub-btn submit-btn" style="border:1px; right:0px;"><span class="lnr lnr-arrow-right"></span></button>
+                        <button class="btn sub-btn submit-btn" style="border:1px; right:0px;"><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></button>
                       </div>
                       <div class="mt-10 info"></div>
                     </form>
@@ -825,7 +850,8 @@ <h3>Find us on</h3>
                   <ul class="list" style="margin-left:0">
                     <li><a href="https://keploy.slack.com/"><i class="fa-brands fa-slack"></i></a></li>
                     <li><a href="https://twitter.com/Keployio"><i class="fa-brands fa-x-twitter"></i></a></li>
-                    <li><a href="https://www.youtube.com/channel/UC6OTg7F4o0WkmNtSoob34lg"><i class="fa-brands fa-youtube"></i></a></li>
+                    <li><a href="https://www.youtube.com/channel/UC6OTg7F4o0WkmNtSoob34lg"><i class="fa-brands fa-youtube"></i></a>
+                    </li>
                     <li><a href="https://www.linkedin.com/company/keploy/"><i class="fa-brands fa-linkedin"></i></a></li>
                     <li><a href="https://keploy.hashnode.dev"><i class="fa-brands fa-hashnode"></i></a></li>
                   </ul>
@@ -888,6 +914,7 @@ <h3>Find us on</h3>
         <script src="js/jquery-3.2.1.min.js"></script>
         <script src="js/plugins.js"></script>
         <script src="js/main.js"></script>
+  <script src="js/theme-toggle.js?v=dlm2"></script>
         <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
         <script>
           // function modalClose(){
diff --git a/js/theme-toggle.js b/js/theme-toggle.js
new file mode 100644
index 0000000..0a22091
--- /dev/null
+++ b/js/theme-toggle.js
@@ -0,0 +1,40 @@
+(function () {
+  var root = document.documentElement;
+  var btn = document.getElementById('theme-toggle');
+
+  function setTheme(theme) {
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    try { localStorage.setItem('theme', theme); } catch (e) {}
+    if (btn) btn.setAttribute('aria-pressed', theme === 'dark' ? 'true' : 'false');
+  }
+
+  function toggleTheme() {
+    var isDark = root.classList.contains('dark');
+    setTheme(isDark ? 'light' : 'dark');
+  }
+
+  // Initialize UI state from current class/localStorage
+  (function init() {
+    var stored = null;
+    try { stored = localStorage.getItem('theme'); } catch (e) {}
+    if (stored === 'dark' || stored === 'light') {
+      setTheme(stored);
+    } else {
+      setTheme(root.classList.contains('dark') ? 'dark' : 'light');
+    }
+  })();
+
+  if (btn) {
+    btn.addEventListener('click', toggleTheme);
+    btn.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        toggleTheme();
+      }
+    });
+  }
+})();
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..159b215
--- /dev/null
+++ b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "keploy-contribution",
+  "version": "1.0.0",
+  "description": "<p align=\"center\">   <img align=\"center\" src=\"https://docs.keploy.io/img/keploy-logo-dark.svg?s=200&v=4\" height=\"40%\" width=\"40%\"  alt=\"keploy logo\"/> </p>",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build:tw": "npx postcss css/tailwind.css -o css/tw.css",
+    "dev:tw": "npx postcss css/tailwind.css -o css/tw.css --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "tailwindcss": "^3.4.18"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..12a703d
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/styles.html b/styles.html
index d490b30..7cddc78 100755
--- a/styles.html
+++ b/styles.html
@@ -22,7 +22,22 @@
     ================================================== -->
     <link rel="stylesheet" href="css/base.css">
     <link rel="stylesheet" href="css/vendor.css">
-    <link rel="stylesheet" href="css/main.css">
+    <!-- font-awesome (icons used by the toggle and social links) -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"/>
+    <!-- Load legacy styles first, then Tailwind utilities to avoid layout overrides -->
+    <link rel="stylesheet" href="css/main.css?v=dlm2">
+    <link rel="stylesheet" href="css/tw.css?v=dlm2">
+        <script>
+            (function () {
+                try {
+                    var stored = localStorage.getItem('theme');
+                    // Default to light unless user explicitly chose dark
+                    var theme = stored ? stored : 'light';
+                    if (theme === 'dark') document.documentElement.classList.add('dark');
+                    else document.documentElement.classList.remove('dark');
+                } catch (e) {}
+            })();
+        </script>
 
     <style type="text/css" media="screen">
         .s-styles { 
@@ -76,8 +91,19 @@ <h3>Navigation</h3>
     
                 <ul class="header-nav__social">
                     <li>
-                        <a href="#0"><i class="fa fa-facebook"></i></a>
+                        <button id="theme-toggle"
+                                class="inline-flex items-center gap-2 px-3 py-2 rounded border border-transparent hover:border-slate-300 dark:hover:border-slate-600 bg-transparent text-slate-700 dark:text-slate-200"
+                                type="button"
+                                aria-label="Toggle theme"
+                                aria-pressed="false">
+                          <i class="fa-solid fa-moon hidden dark:inline"></i>
+                          <i class="fa-solid fa-sun inline dark:hidden"></i>
+                          <span class="sr-only">Toggle dark mode</span>
+                        </button>
                     </li>
+                     <li>
+                         <a href="#0"><i class="fa fa-facebook"></i></a>
+                     </li>
                     <li>
                         <a href="#0"><i class="fa fa-twitter"></i></a>
                     </li>
@@ -769,7 +795,7 @@ <h4>Get Notified</h4>
     <script src="js/jquery-3.2.1.min.js"></script>
     <script src="js/plugins.js"></script>
     <script src="js/main.js"></script>
-
+    <script src="js/theme-toggle.js?v=dlm2"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..c615a69
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,21 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  content: [
+    "./index.html",
+    "./styles.html",
+    "./js/**/*.js"
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // Keploy brand helpers
+        keploy: {
+          navy: "#00163D",
+          orange: "#F89559",
+        }
+      }
+    },
+  },
+  plugins: [],
+};
\ No newline at end of file