diff --git a/components/Input/Input.js b/components/Input/Input.js
index ddb8a06..d0ae383 100644
--- a/components/Input/Input.js
+++ b/components/Input/Input.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 const Input = (
-    { htmlFor, spanLabel, id, type, name, placeholder, onChange, value }
+    { htmlFor, spanLabel, id, type, name, placeholder, onChange, value, onBlur }
 ) => (
     <label className="subs-form__labels" htmlFor={htmlFor}>
         <span>{spanLabel}</span>
@@ -12,6 +12,8 @@ const Input = (
             placeholder={placeholder}
             onChange={onChange}
             value={value}
+            onBlur={onBlur}
+            required
         />
     </label>
 )
diff --git a/components/forms/subscribe-form.js b/components/forms/subscribe-form.js
deleted file mode 100644
index bedc5c7..0000000
--- a/components/forms/subscribe-form.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import { SUBSCRIBE_ACTION } from '../../constants/path';
-
-const SubscribeForm = () => (
-    <form className="subs-form__form" action={SUBSCRIBE_ACTION} method="POST" acceptCharset="utf-8">
-        <div className="subs-form__inner">
-            <p className="subs-form__text">
-                be the first to read the freshest tech stories from <a className="subs-form__link"
-                    href="http://hackernoon.com/">hackernoon.com</a>
-						by subscribing to <a className="subs-form__link" href="https://www.techbrief.hackernoon.com/">the tech
-							brief</a>:
-						an indiscriminate daily digest from our RSS feed for your reading pleasure and professional
-						development.
-					</p>
-
-            <p className="subs-form__text">
-                oh! and if you let us know which of our editorial streams most floats your boat,
-                we'll also send you the occasional curated letter from one of the humans on
-                our team of editors - all of whom are far too busy
-                publishing stories to spam you in any way, we promise.
-					</p>
-        </div>
-
-        <div className="subs-form__inputs">
-            <label className="subs-form__labels" htmlFor="email">
-                <span>Email Address</span>
-                <input type="email" name="email" id="email" placeholder="your email" />
-            </label>
-
-            <label className="subs-form__labels" htmlFor="name">
-                <span>First Name</span>
-                <input type="text" name="name" id="name" placeholder="your first name" />
-            </label>
-        </div>
-
-        <div className="subs-form__checkboxes">
-            <p>how can hacker noon improve your inbox?</p>
-
-            <label className="subs-form__check-label">
-                <input type="checkbox" name="gdpr" id="gdpr" />
-                <span className="subs-form__checkbox"></span>
-                <span className="subs-form__checkbox-text">I concent to receive promotional emails about your products and services
-						</span>
-            </label>
-
-            <label className="subs-form__check-label">
-                <input type="checkbox" name="bruh" id="featured" />
-                <span className="subs-form__checkbox"></span>
-                <span className="subs-form__checkbox-text">gimme the techbrief</span>
-            </label>
-
-            <label className="subs-form__check-label">
-                <input type="checkbox" name="bruh" id="blockchain&cryptocurrency" />
-                <span className="subs-form__checkbox"></span>
-                <span className="subs-form__checkbox-text">do you even blockchain/crypto bruh</span>
-            </label>
-
-            <label className="subs-form__check-label">
-                <input type="checkbox" name="cleancode" id="programming" />
-                <span className="subs-form__checkbox"></span>
-                <span className="subs-form__checkbox-text">I like clean code and I cannot lie</span>
-            </label>
-
-            <label className="subs-form__check-label">
-                <input type="checkbox" name="stories" id="startups&feature&technology" />
-                <span className="subs-form__checkbox"></span>
-                <span className="subs-form__checkbox-text">send me stories about startups and the future of
-							everything</span>
-            </label>
-        </div>
-
-        <div style={{ display: 'none' }}>
-            <label htmlFor="hp">HP</label><br />
-            <input type="text" name="hp" id="hp" />
-        </div>
-        <input type="hidden" name="list" value="OMTKMVEF3BfWHMve4EY8925g" />
-        <input type="hidden" name="subform" value="yes" />
-
-        <button className="subs-form__btn" type="submit" name="submit" id="submit">Get great stories by email</button>
-    </form>
-)
-
-export default SubscribeForm;
\ No newline at end of file
diff --git a/components/formik-forms/subscribe.js b/components/forms/subscribe.js
similarity index 77%
rename from components/formik-forms/subscribe.js
rename to components/forms/subscribe.js
index 5ecd92e..753f872 100644
--- a/components/formik-forms/subscribe.js
+++ b/components/forms/subscribe.js
@@ -3,13 +3,24 @@ import { useFormik } from 'formik';
 import { SUBSCRIBE_ACTION } from '../../constants/path';
 import Input from '../Input';
 import Checkbox from '../Checkbox';
+import * as Yup from 'yup';
 
 const SubscribeForm = () => {
     const formik = useFormik({
         initialValues: {
             email: '',
             name: ''
-        }
+        },
+        validationSchema: Yup.object({
+            email: Yup.string()
+                .min(5, 'Too Short!')
+                .email('Invalid email address!')
+                .required('Email is required!'),
+            name: Yup.string()
+                .min(2, 'Too Short!')
+                .max(50, 'Too Long!')
+                .required('Name is required!'),
+        }),
     });
     return (
         <div className="subs-form">
@@ -28,14 +39,14 @@ const SubscribeForm = () => {
 							brief</a>:
 						an indiscriminate daily digest from our RSS feed for your reading pleasure and professional
 						development.
-					</p>
+					    </p>
 
                         <p className="subs-form__text">
                             oh! and if you let us know which of our editorial streams most floats your boat,
                             we'll also send you the occasional curated letter from one of the humans on
                             our team of editors - all of whom are far too busy
                             publishing stories to spam you in any way, we promise.
-					</p>
+					    </p>
                     </div>
 
                     <div className="subs-form__inputs">
@@ -47,8 +58,12 @@ const SubscribeForm = () => {
                             htmlFor="email"
                             spanLabel="Email Address"
                             value={formik.values.email}
+                            onBlur={formik.handleBlur}
                             onChange={formik.handleChange}
                         />
+                        {formik.touched.email && formik.errors.email ? (
+                            <div className="error-msg" style={{ marginBottom: '10px' }}>{formik.errors.email}</div>
+                        ) : null}
 
                         <Input
                             id="name"
@@ -58,8 +73,12 @@ const SubscribeForm = () => {
                             htmlFor="name"
                             spanLabel="First Name"
                             value={formik.values.name}
+                            onBlur={formik.handleBlur}
                             onChange={formik.handleChange}
                         />
+                        {formik.touched.name && formik.errors.name ? (
+                            <div className="error-msg">{formik.errors.name}</div>
+                        ) : null}
                     </div>
 
                     <div className="subs-form__checkboxes">
@@ -103,7 +122,13 @@ const SubscribeForm = () => {
                     <input type="hidden" name="list" value="OMTKMVEF3BfWHMve4EY8925g" />
                     <input type="hidden" name="subform" value="yes" />
 
-                    <button className="subs-form__btn" type="submit" name="submit" id="submit">Get great stories by email</button>
+                    <button
+                        id="submit"
+                        type="submit"
+                        name="submit"
+                        className="subs-form__btn"
+                        disabled={formik.errors.name || formik.errors.email}
+                    >Get great stories by email</button>
                 </form>
             </div>
         </div >
diff --git a/components/forms/unsubscribe-form.js b/components/forms/unsubscribe-form.js
deleted file mode 100644
index 08027db..0000000
--- a/components/forms/unsubscribe-form.js
+++ /dev/null
@@ -1,20 +0,0 @@
-
-const UnsubscribeForm = () => (
-    <form className="subs-form__form">
-        <div className="subs-form__inner">
-            <p className="subs-form__text left strong">Unsubscribe</p>
-            <p className="subs-form__text left">
-                We're sorry to see you go! Enter your email address to unsubscribe from this list.
-			</p>
-        </div>
-        <div className="subs-form__inputs">
-            <label className="subs-form__labels" htmlFor="email">
-                <span>Email Address</span>
-                <input type="email" name="email" id="email" placeholder="your email" />
-            </label>
-        </div>
-        <button className="subs-form__btn unsubscribe" type="submit">Unsubscribe</button>
-    </form>
-)
-
-export default UnsubscribeForm;
\ No newline at end of file
diff --git a/components/formik-forms/unsubscribe.js b/components/forms/unsubscribe.js
similarity index 75%
rename from components/formik-forms/unsubscribe.js
rename to components/forms/unsubscribe.js
index dd90c95..7ae0ff4 100644
--- a/components/formik-forms/unsubscribe.js
+++ b/components/forms/unsubscribe.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useFormik } from 'formik';
+import * as Yup from 'yup';
 import Input from '../Input';
 
 const UnsubscribeForm = () => {
@@ -7,8 +8,14 @@ const UnsubscribeForm = () => {
         initialValues: {
             email: ''
         },
+        validationSchema: Yup.object({
+            email: Yup.string()
+                .min(5, 'Too Short!')
+                .email('Invalid email address!')
+                .required('Email is required!')
+        }),
         onSubmit: values => {
-            console.log(values);
+            alert(JSON.stringify(values, null, 2));
         }
     });
     return (
@@ -35,8 +42,12 @@ const UnsubscribeForm = () => {
                         htmlFor="email"
                         spanLabel="Email Address"
                         value={formik.values.email}
+                        onBlur={formik.handleBlur}
                         onChange={formik.handleChange}
                     />
+                    {formik.touched.email && formik.errors.email ? (
+                        <div className="error-msg">{formik.errors.email}</div>
+                    ) : null}
                 </div>
                 <button className="subs-form__btn unsubscribe" type="submit">Unsubscribe</button>
             </form>
diff --git a/components/subscribe/index.js b/components/subscribe/index.js
deleted file mode 100644
index 0979c88..0000000
--- a/components/subscribe/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Subscribe from './subscribe';
-
-export default Subscribe;
\ No newline at end of file
diff --git a/components/subscribe/subscribe.js b/components/subscribe/subscribe.js
deleted file mode 100644
index 8b36a24..0000000
--- a/components/subscribe/subscribe.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import SubscribeForm from '../forms/subscribe-form'
-
-const Subscribe = () => (
-    <div className="subs-form">
-        <div className="subs-form__wrapper">
-            <div className="subs-form__logo">
-                <a href="https://hackernoon.com">
-                    <img src="images/hackernoon.png" alt="Hackernoon logo" />
-                </a>
-            </div>
-            <SubscribeForm />
-        </div>
-    </div>
-)
-
-export default Subscribe;
\ No newline at end of file
diff --git a/components/unsubscribe/index.js b/components/unsubscribe/index.js
deleted file mode 100644
index 296433e..0000000
--- a/components/unsubscribe/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Unsubscribe from './unsubscribe';
-
-export default Unsubscribe;
\ No newline at end of file
diff --git a/components/unsubscribe/unsubscribe.js b/components/unsubscribe/unsubscribe.js
deleted file mode 100644
index 4ee627d..0000000
--- a/components/unsubscribe/unsubscribe.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import UnsubscribeForm from '../forms/unsubscribe-form';
-
-const Unsubscribe = () => (
-    <div className="subs-form">
-        <div className="subs-form__wrapper">
-            <div className="subs-form__logo">
-                <img src="images/hackernoon.png" alt="" />
-            </div>
-            <UnsubscribeForm />
-        </div>
-    </div>
-)
-
-export default Unsubscribe;
\ No newline at end of file
diff --git a/package.json b/package.json
index e856b8c..7fdc7d0 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
 		"formik": "^2.2.6",
 		"next": "10.0.8",
 		"react": "17.0.1",
-		"react-dom": "17.0.1"
+		"react-dom": "17.0.1",
+		"yup": "^0.32.9"
 	}
 }
diff --git a/pages/index.js b/pages/index.js
index b695b48..c467e9d 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -21,10 +21,6 @@ export default function Home() {
                 <Link href='/subscribe'>Subscribe page</Link>
                 <br />
                 <Link href='/unsubscribe'>Unsubscribe page</Link>
-                <br />
-                <Link href='/subscribe-formik'>Subscribe page(formik)</Link>
-                <br />
-                <Link href='/unsubscribe-formik'>Unsubscribe page(formik)</Link>
             </div>
         </>
     )
diff --git a/pages/subscribe-formik/index.js b/pages/subscribe-formik/index.js
deleted file mode 100644
index 5bcc47b..0000000
--- a/pages/subscribe-formik/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import SubscribeForm from '../../components/formik-forms/subscribe';
-
-const form = () => <SubscribeForm />
-
-export default form;
\ No newline at end of file
diff --git a/pages/subscribe/index.js b/pages/subscribe/index.js
index 00b17f5..1ab24bd 100644
--- a/pages/subscribe/index.js
+++ b/pages/subscribe/index.js
@@ -1,5 +1,5 @@
-import Subscribe from '../../components/subscribe';
+import SubscribeForm from '../../components/forms/subscribe';
 
-const subscribe = () => <Subscribe />
+const form = () => <SubscribeForm />
 
-export default subscribe;
\ No newline at end of file
+export default form;
\ No newline at end of file
diff --git a/pages/unsubscribe-formik/index.js b/pages/unsubscribe-formik/index.js
deleted file mode 100644
index 5cb2bbd..0000000
--- a/pages/unsubscribe-formik/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import UnsubscribeForm from '../../components/formik-forms/unsubscribe';
-
-const unsubscribe = () => <UnsubscribeForm />
-
-export default unsubscribe;
\ No newline at end of file
diff --git a/pages/unsubscribe/index.js b/pages/unsubscribe/index.js
index 3955704..8cd2579 100644
--- a/pages/unsubscribe/index.js
+++ b/pages/unsubscribe/index.js
@@ -1,5 +1,5 @@
-import Unubscribe from '../../components/unsubscribe';
+import UnsubscribeForm from '../../components/forms/unsubscribe';
 
-const unsubscribe = () => <Unubscribe />
+const unsubscribe = () => <UnsubscribeForm />
 
 export default unsubscribe;
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index 1cc4c60..4bb5f83 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -274,6 +274,11 @@ a {
 	}
 }
 
+.error-msg {
+    margin-top: -15px;
+    color: red;
+}
+
 @media only screen and (max-width: 375px) {
 	.subs-form__inputs {
 		margin-top: 10px;