diff --git a/package-lock.json b/package-lock.json
index 54e035e..ec14d51 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
         "bcrypt": "^5.1.1",
         "body-parser": "^1.20.2",
         "connect-mongo": "^5.1.0",
-        "dotenv": "^16.3.1",
+        "dotenv": "^16.4.5",
         "ejs": "^3.1.9",
         "expree": "^2.1.0",
         "express": "^4.18.2",
@@ -3701,14 +3701,15 @@
       }
     },
     "node_modules/dotenv": {
-      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
-      "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=12"
       },
       "funding": {
-        "url": "https://github.com/motdotla/dotenv?sponsor=1"
+        "url": "https://dotenvx.com"
       }
     },
     "node_modules/duplexify": {
diff --git a/package.json b/package.json
index 07fbb34..91ad0c8 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "bcrypt": "^5.1.1",
     "body-parser": "^1.20.2",
     "connect-mongo": "^5.1.0",
-    "dotenv": "^16.3.1",
+    "dotenv": "^16.4.5",
     "ejs": "^3.1.9",
     "expree": "^2.1.0",
     "express": "^4.18.2",
diff --git a/public/css/admin_css.css b/public/css/admin_css.css
index 4ad6d37..fe85553 100644
--- a/public/css/admin_css.css
+++ b/public/css/admin_css.css
@@ -1,12 +1,11 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
 
-body{
+body {
     font-family: 'Poppins', sans-serif;
     background: #ececec;
 }
 
 /* Dark Mode */
-
 .dark-mode {
     background-color: #121212;
     color: #e0e0e0;
@@ -46,45 +45,137 @@ body{
 }
 
 /*------------ Login container ------------*/
-
-.box-area{
+.box-area {
     width: 930px;
 }
 
 /*------------ Right box ------------*/
-
-.right-box{
+.right-box {
     padding: 40px 30px 40px 40px;
 }
 
 /*------------ Custom Placeholder ------------*/
-
-::placeholder{
+::placeholder {
     font-size: 16px;
 }
 
-.rounded-4{
+.rounded-4 {
     border-radius: 20px;
 }
-.rounded-5{
+.rounded-5 {
     border-radius: 30px;
 }
 
-
-/*------------ mobile------------*/
-
-@media only screen and (max-width: 768px){
-
-     .box-area{
+/*------------ Mobile------------*/
+@media only screen and (max-width: 768px) {
+    .box-area {
         margin: 0 10px;
-
-     }
-     .left-box{
+    }
+    .left-box {
         height: 100px;
         overflow: hidden;
-     }
-     .right-box{
+    }
+    .right-box {
         padding: 20px;
-     }
+    }
+}
 
-}
\ No newline at end of file
+/*------------ Contact Section ------------*/
+.contact-section {
+    padding: 20px;
+    background-color: #333; /* Dark background color */
+    color: #fff; /* White text color */
+}
+
+.contact-section-header {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.contact-section-header h2 {
+    font-size: 2rem;
+    margin-bottom: 10px;
+}
+
+.contact-section-header .text {
+    font-size: 1.5rem;
+    margin-bottom: 10px;
+}
+
+.contact-section-header p {
+    font-size: 1rem;
+}
+
+.contact-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+}
+
+.contact-container .left,
+.contact-container .right {
+    flex: 1;
+}
+
+.contact-container .left img {
+    width: 100%;
+    border-radius: 10px;
+}
+
+.contact-container .right {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.contact-container .right form {
+    width: 100%;
+}
+
+.contact-container .right .form-control,
+.contact-container .right .btn {
+    margin-bottom: 15px;
+    border-radius: 5px;
+}
+
+.contact-container .right .form-control {
+    padding: 10px;
+    font-size: 1rem;
+    border: 1px solid #ccc;
+    background-color: #444; /* Slightly lighter background */
+    color: #fff;
+}
+
+.contact-container .right .form-control::placeholder {
+    color: #ccc;
+}
+
+.contact-container .right .btn {
+    background-color: #28a745;
+    color: #fff;
+    font-size: 1rem;
+    padding: 10px;
+    border: none;
+}
+
+.contact-container .right .btn:hover {
+    background-color: #218838;
+}
+
+@media (max-width: 767.98px) {
+    .contact-container {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .contact-container .left,
+    .contact-container .right {
+        flex: none;
+        width: 100%;
+    }
+
+    .contact-container .right form {
+        width: 100%;
+    }
+}
diff --git a/views/index.ejs b/views/index.ejs
index 2b85ed2..03401c2 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -234,47 +234,46 @@
 
             </div>
 
-            <!-- CONTACT-SECTION -->
-            <section class="contact-section " id="contact">
-                <div class="contact-section-header">
-                    <h2 class="">Any Query</h2>
-                    <div class="text">Get in Touch</div>
-                    <p>Thank you for visiting to petari. Connect with me over socials.
-                        <br>
-                        Please wait for a while all major projects will be listed soon. Till then keep visiting.
-                        Connect with me over live chat!
-                    </p>
-                </div>
-                <div class="contact-container row">
-                    <div class="col-6 left ">
-                        <img src="img/food.jpg" alt="">
+<!-- CONTACT-SECTION -->
+<section class="contact-section" id="contact">
+    <div class="contact-section-header">
+        <h2>Any Query</h2>
+        <div class="text">Get in Touch</div>
+        <p>Thank you for visiting Petari. Connect with me over socials.
+            <br>
+            Please wait for a while all major projects will be listed soon. Till then keep visiting.
+            Connect with me over live chat!
+        </p>
+    </div>
+    <div class="contact-container row">
+        <div class="col-12 col-md-6 mb-3 mb-md-0 left">
+            <img src="img/food.jpg" alt="Food Image" class="img-fluid w-100">
+        </div>
+        <div class="col-12 col-md-6 right">
+            <form action="/" method="POST">
+                <div class="fields mb-3">
+                    <div class="field mb-2">
+                        <input type="text" name="Fname" class="form-control" placeholder="Name" required>
                     </div>
-                    <div class="col-6 right">
-                        <form action="/" method="POST">
-                            <div class=" fields">
-                                <div class="field name">
-                                    <input type="text" name="Fname" placeholder="Name" required>
-                                </div>
-                                <div class="field email">
-                                    <input type="email" name="Email" placeholder="Email" required>
-                                </div>
-                            </div>
-                            <div class="field">
-                                <input type="text" name="sub" placeholder="Subject" required>
-                            </div>
-                            <div class="field">
-                                <textarea cols="30" rows="7" name="sms" placeholder="Message.." required></textarea>
-                            </div>
-                            <div class="button-area">
-                                <button type="submit" id="home" class="btn btn-success">Send </button>
-                            </div>
-                        </form>
+                    <div class="field mb-2">
+                        <input type="email" name="Email" class="form-control" placeholder="Email" required>
                     </div>
                 </div>
-            </section>
-    </main>
+                <div class="field mb-2">
+                    <input type="text" name="sub" class="form-control" placeholder="Subject" required>
+                </div>
+                <div class="field mb-3">
+                    <textarea cols="30" rows="7" name="sms" class="form-control" placeholder="Message.." required></textarea>
+                </div>
+                <div class="button-area">
+                    <button type="submit" id="home" class="btn btn-success w-100">Send</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</section>
 
-    <!-- FOOTER SECTION -->
+<!-- FOOTER SECTION -->
     <footer class="footer py-5 footer-container">
         <div class="container">
             <div class="row">