diff --git a/form.html b/form.html
new file mode 100644
index 0000000..9e8797e
--- /dev/null
+++ b/form.html
@@ -0,0 +1,21 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>icoder - Heaver for Programmers</title>
+    <link rel="stylesheet" href="/styles/form.css">
+</head>
+<body>
+    <form class="form">
+        <h2>CONTACT US</h2>
+        <p type="Name:"><input placeholder="Write your name here.."></input></p>
+        <p type="Email:"><input placeholder="Let us know how to contact you back.."></input></p>
+        <p type="Message:"><input placeholder="Tell Us about Yourself.."></input></p>
+        <button>Send Message</button>
+        <div>
+          <span class="fa fa-phone"></span>GDSC
+          <span class="fa fa-envelope-o"></span> dscjiit128@gmail.com
+      </form>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index dcf8182..2d014b3 100644
--- a/index.html
+++ b/index.html
@@ -51,7 +51,7 @@
                 <li><a href ="/about.html"><p>About GDSC</p></a></li>
                 <li><a href="/chapter.html"><p>Chapters</p></a></li>
                 <li><a href="/events.html"><p>Upcoming Events</p></a></li>
-                <li><a href="/contact.html"><p>Contact Us</p></a></li>
+                <li><a href="/form.html"><p>Contact Us</p></a></li>
             </ul>
         </nav>
     </div>
diff --git a/styles/form.css b/styles/form.css
new file mode 100644
index 0000000..896f83e
--- /dev/null
+++ b/styles/form.css
@@ -0,0 +1,77 @@
+body {
+  background: #59abe3;
+  margin: 0;
+}
+.form {
+  width: 340px;
+  height: 440px;
+  background: #e6e6e6;
+  border-radius: 8px;
+  box-shadow: 0 0 40px -10px #000;
+  margin: calc(50vh - 220px) auto;
+  padding: 20px 30px;
+  max-width: calc(100vw - 40px);
+  box-sizing: border-box;
+  font-family: "Montserrat", sans-serif;
+  position: relative;
+}
+h2 {
+  margin: 10px 0;
+  padding-bottom: 10px;
+  width: 180px;
+  color: #78788c;
+  border-bottom: 3px solid #78788c;
+}
+input {
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  background: none;
+  outline: none;
+  resize: none;
+  border: 0;
+  font-family: "Montserrat", sans-serif;
+  transition: all 0.3s;
+  border-bottom: 2px solid #bebed2;
+}
+input:focus {
+  border-bottom: 2px solid #78788c;
+}
+p:before {
+  content: attr(type);
+  display: block;
+  margin: 28px 0 0;
+  font-size: 14px;
+  color: #5a5a5a;
+}
+button {
+  float: right;
+  padding: 8px 12px;
+  margin: 8px 0 0;
+  font-family: "Montserrat", sans-serif;
+  border: 2px solid #78788c;
+  background: 0;
+  color: #5a5a6e;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+button:hover {
+  background: #78788c;
+  color: #fff;
+}
+div {
+  content: "Hi";
+  position: absolute;
+  bottom: -15px;
+  right: -20px;
+  background: #50505a;
+  color: #fff;
+  width: 320px;
+  padding: 16px 4px 16px 0;
+  border-radius: 6px;
+  font-size: 13px;
+  box-shadow: 10px 10px 40px -14px #000;
+}
+span {
+  margin: 0 5px 0 15px;
+}
