diff --git a/components/Footer.js b/components/Footer.js
index 87e67cb..6d5bd5f 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -2,13 +2,13 @@ import Link from 'next/link'
 
 export default function Footer() {
   return (
-    <footer className="bg-footer container-style flex flex-col pt-48 sm:pt-40 md:pt-96 pb-6">
+    <footer className="bg-footer container-style flex flex-col pt-48 sm:pt-40 md:pt-96 pb-6 ">
       <div className="">
-        <div className="">
+        <div className=" ">
           <div>
             <img src="/png/FooterLogo.png" className="w-min" />
           </div>
-          <div className="text-header-mobile-medium text-[#404040] mt-5">
+          <div className="text-header-mobile-medium text-[#404040] mt-5  ">
             Revolutionizing Transactions with Digital Receipts
           </div>
           <div className="">
diff --git a/pages/404.js b/pages/404.js
new file mode 100644
index 0000000..6ac9908
--- /dev/null
+++ b/pages/404.js
@@ -0,0 +1,28 @@
+import Link from 'next/link'
+
+const Custom404 = () => {
+  return (
+    <div className="">
+      <section className="page_404 ">
+        <div className="container ">
+          <div className="row">
+            <div className="col-sm-12">
+              <div className="col-sm-10 col-sm-offset-1 text-center">
+                <div className="four_zero_four_bg"></div>
+                <div className="contant_box_404">
+                  <h3 className="h2 text-lg font-bold mt-2">Look like you're lost</h3>
+                  <p className="mt-3">The page you are looking for is not available!</p>
+                  <Link href="/" className="link_404 rounded-xl ]">
+                    Go to Home
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export default Custom404
diff --git a/styles/globals.css b/styles/globals.css
index 47269a6..95dc71b 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -35,8 +35,8 @@
   @apply text-[#EBF4FF];
 }
 
-.text-footer{
-  @apply hover:text-[#0E72E8] 
+.text-footer {
+  @apply hover:text-[#0E72E8];
 }
 
 .text-main-primary {
@@ -420,3 +420,47 @@
     transform: translateY(0);
   }
 }
+
+/*======================
+    404 page
+=======================*/
+
+.page_404 {
+  padding: 40px 0;
+  background: #fff;
+  overflow: hidden;
+}
+
+.page_404 img {
+  width: 100%;
+}
+
+.four_zero_four_bg {
+  background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
+  height: 400px;
+  background-position: center;
+}
+
+.four_zero_four_bg h1 {
+  font-size: 80px;
+}
+
+.four_zero_four_bg h3 {
+  font-size: 80px;
+}
+
+.link_404 {
+  color: #fff !important;
+  padding: 10px 20px;
+  background: #0e72e8;
+  margin: 20px 0;
+  font-weight: 500;
+  display: inline-block;
+}
+.contant_box_404 {
+  margin-top: -50px;
+}
+
+.link_404:hover {
+  background-color: #00489e;
+}