diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css
index 3856dbb..53a4a4e 100644
--- a/htdocs/assets/style.css
+++ b/htdocs/assets/style.css
@@ -619,6 +619,34 @@ video {
   top: 4.7rem;
 }
 
+.left-4 {
+  left: 1rem;
+}
+
+.top-\[-10\] {
+  top: -10;
+}
+
+.top-2 {
+  top: 0.5rem;
+}
+
+.-top-2 {
+  top: -0.5rem;
+}
+
+.-top-1 {
+  top: -0.25rem;
+}
+
+.-top-3 {
+  top: -0.75rem;
+}
+
+.-top-\[0\.60rem\] {
+  top: -0.60rem;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -706,6 +734,11 @@ video {
   margin-bottom: 0.30rem;
 }
 
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -866,6 +899,14 @@ video {
   margin-top: 30vh;
 }
 
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
 .flex {
   display: flex;
 }
@@ -1027,12 +1068,8 @@ video {
   width: 100vw;
 }
 
-.w-\[40\%\] {
-  width: 40%;
-}
-
-.w-\[230px\] {
-  width: 230px;
+.w-\[30\%\] {
+  width: 30%;
 }
 
 .rotate-\[15deg\] {
@@ -1171,14 +1208,14 @@ video {
   border-width: 3px;
 }
 
-.border-\[5px\] {
-  border-width: 5px;
-}
-
 .border-\[4px\] {
   border-width: 4px;
 }
 
+.border-\[5px\] {
+  border-width: 5px;
+}
+
 .border-b-\[2px\] {
   border-bottom-width: 2px;
 }
@@ -1195,14 +1232,14 @@ video {
   border-top-width: 3px;
 }
 
-.border-t-\[5px\] {
-  border-top-width: 5px;
-}
-
 .border-t-\[4px\] {
   border-top-width: 4px;
 }
 
+.border-t-\[5px\] {
+  border-top-width: 5px;
+}
+
 .border-\[rgba\(255\2c _255\2c _255\2c _0\.15\)\] {
   border-color: rgba(255, 255, 255, 0.15);
 }
@@ -1245,11 +1282,6 @@ video {
   border-top-color: rgb(56 189 248 / var(--tw-border-opacity));
 }
 
-.border-b-accent_primary {
-  --tw-border-opacity: 1;
-  border-bottom-color: rgb(56 189 248 / var(--tw-border-opacity));
-}
-
 .border-b-accent_secondary_transparent {
   border-bottom-color: rgba(255, 255, 255, 0.30);
 }
@@ -1316,6 +1348,10 @@ video {
   padding: 0.30rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1505,6 +1541,10 @@ video {
   color: rgb(30 41 59 / var(--tw-text-opacity));
 }
 
+.text-accent_secondary_transparent {
+  color: rgba(255, 255, 255, 0.30);
+}
+
 .caret-accent_primary {
   caret-color: #38BDF8;
 }
@@ -1578,10 +1618,6 @@ video {
   outline-offset: 2px;
 }
 
-.outline-accent_primary {
-  outline-color: #38BDF8;
-}
-
 .blur-2xl {
   --tw-blur: blur(40px);
   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);
@@ -1645,6 +1681,16 @@ video {
   margin-bottom: 0.75rem;
 }
 
+.invalid\:border-\[\#ff1c49\]:invalid {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 28 73 / var(--tw-border-opacity));
+}
+
+.invalid\:border-\[\#ff8099\]:invalid {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 128 153 / var(--tw-border-opacity));
+}
+
 .hover\:scale-125:hover {
   --tw-scale-x: 1.25;
   --tw-scale-y: 1.25;
@@ -1715,6 +1761,15 @@ video {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.focus\:border-accent_primary:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(56 189 248 / var(--tw-border-opacity));
+}
+
+.focus\:border-accent_primary_transparent:focus {
+  border-color: rgba(56, 189, 248, 0.30);
+}
+
 .group:hover .group-hover\:block {
   display: block;
 }
@@ -1731,6 +1786,21 @@ video {
   width: 100%;
 }
 
+.group:focus .group-focus\:text-accent_primary {
+  --tw-text-opacity: 1;
+  color: rgb(56 189 248 / var(--tw-text-opacity));
+}
+
+.peer:invalid ~ .peer-invalid\:text-\[\#ff1c49\] {
+  --tw-text-opacity: 1;
+  color: rgb(255 28 73 / var(--tw-text-opacity));
+}
+
+.peer:focus ~ .peer-focus\:text-accent_primary {
+  --tw-text-opacity: 1;
+  color: rgb(56 189 248 / var(--tw-text-opacity));
+}
+
 @media (min-width: 768px) {
   .md\:block {
     display: block;
@@ -1896,6 +1966,10 @@ video {
     margin-top: 0.5rem;
   }
 
+  .lg\:mt-5 {
+    margin-top: 1.25rem;
+  }
+
   .lg\:mt-\[2\.5rem\] {
     margin-top: 2.5rem;
   }
@@ -1908,10 +1982,6 @@ video {
     margin-top: 7rem;
   }
 
-  .lg\:mt-5 {
-    margin-top: 1.25rem;
-  }
-
   .lg\:block {
     display: block;
   }
@@ -2034,11 +2104,6 @@ video {
     line-height: 1.75rem;
   }
 
-  .lg\:blur-2xl {
-    --tw-blur: blur(40px);
-    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);
-  }
-
   .lg\:blur-lg {
     --tw-blur: blur(16px);
     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);
diff --git a/htdocs/contact.php b/htdocs/contact.php
index e94eb54..065afa9 100644
--- a/htdocs/contact.php
+++ b/htdocs/contact.php
@@ -36,6 +36,31 @@ require 'core/query_functions.php';
                 <div class="absolute bg-accent_primary w-[70px] h-[70px] rounded-full shadow-[0px_0px_120px_20px] shadow-accent_primary_transparent blur-2xl mr-0 mb-[2rem] lg:mb-0 lg:mr-[12.5rem] lg:mt-[3.5rem]"></div>
             </div>
         </div>
+        <div class="contactsection w-full flex justify-between items-start mt-32 mb-72 lg:mb-32 px-2 lg:px-0">
+            <div class="leftsec">
+
+            </div>
+            <div class="rightsec w-full lg:w-[40%]">
+                <form class="contactform w-full flex flex-col justify-center bg-bg_secondary rounded-lg p-5" action="">
+                    <p class="self-start text-lg mb-4"><i class="fa-solid fa-bell text-accent_primary"></i>&nbsp; Contact Form</p>
+                    <div class="nameinputcont w-full relative my-4">
+                        <input type="text" class="peer w-full p-2 border-[2px] bg-bg_secondary border-accent_secondary_transparent rounded outline-none focus:border-accent_primary">
+                        <span class="absolute text-sm -top-[0.60rem] left-4 px-3 bg-bg_secondary peer-focus:text-accent_primary">Your Full Name</span>
+                    </div>
+                    <div class="emailinputcont w-full relative my-4">
+                        <input type="email" class="peer w-full p-2 border-[2px] bg-bg_secondary border-accent_secondary_transparent rounded outline-none focus:border-accent_primary invalid:border-[#ff1c49]">
+                        <span class="absolute text-sm -top-[0.60rem] left-4 px-3 bg-bg_secondary peer-focus:text-accent_primary peer-invalid:text-[#ff1c49]">Your Email</span>
+                    </div>
+                    <div class="messagetextcont w-full relative my-4">
+                        <textarea type="text" rows="5" class="peer w-full p-2 border-[2px] bg-bg_secondary border-accent_secondary_transparent rounded outline-none focus:border-accent_primary"></textarea>
+                        <span class="absolute text-sm -top-[0.60rem] left-4 px-3 bg-bg_secondary peer-focus:text-accent_primary">Message</span>
+                    </div>
+                    <div class="contactsubmit w-full">
+                        <button type="submit" class="bg-accent_primary rounded-full py-2 px-6 text-bg_primary font-bold hover:shadow-lg hover:shadow-accent_secondary_transparent hover:bg-accent_secondary hover:rounded-lg transition transform duration-500">SEND <i class="fa-regular fa-paper-plane ml-2"></i></button>
+                    </div>
+                </form>
+            </div>
+        </div>
     </div>
     <?php require 'assets/_footer.php';?>
     <script type="text/javascript" src="assets/js/preloader-config.js"></script>