diff --git a/pet/static/pet/css/mail_subscription.css b/pet/static/pet/css/mail_subscription.css
new file mode 100644
index 0000000..bbed77f
--- /dev/null
+++ b/pet/static/pet/css/mail_subscription.css
@@ -0,0 +1,16 @@
+.section-subscribe {
+  padding: 5em 0;
+}
+.form-control {
+  outline: none;
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
+  height: 50px;
+}
+.form-control:focus{
+  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
+  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.2) !important;
+}
+.form-control:focus, .form-control:active {
+  outline: none;
+}
\ No newline at end of file
diff --git a/pet/templates/pet/mail_subscription.html b/pet/templates/pet/mail_subscription.html
new file mode 100644
index 0000000..2cdcf7c
--- /dev/null
+++ b/pet/templates/pet/mail_subscription.html
@@ -0,0 +1,30 @@
+<section class="section-subscribe bg-light">
+  <div class="container">
+    <div class="row justify-content-center align-items-center">
+      <div class="col md-12 mb-4">
+        <h1 class="heading">
+          Get news &amp; updates
+        </h1>
+      </div>
+      <div class="col-md-12">
+        <form action="" method="POST">
+          <div class="row">
+            <div class="col-md-4 mb-4">
+              <input type="text" class="form-control" placeholder="Your Name here">
+            </div>
+
+            <div class="col-md-4 mb-4">
+              <input type="email" class="form-control" placeholder="Your email here">
+            </div>
+
+            <div class="col-md-4 mb-4">
+              <input type="submit" class="btn btn-secondary w-100" value="Subscribe">
+            </div>
+
+          </div>
+        </form>
+      </div>
+
+    </div>
+  </div>
+</section>
\ No newline at end of file