diff --git a/package.json b/package.json
index ed0485e..f9461cf 100644
--- a/package.json
+++ b/package.json
@@ -37,5 +37,10 @@
     "uuid": "^9.0.0",
     "vis-data": "^7.1.6",
     "vis-network": "^9.1.6"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.4.0"
   }
 }
diff --git a/pages/Center.js b/pages/Center.js
new file mode 100644
index 0000000..32282a9
--- /dev/null
+++ b/pages/Center.js
@@ -0,0 +1,164 @@
+import React from "react";
+import { Inter } from "next/font/google";
+import styles from "@/styles/Home.module.css";
+const inter = Inter({ subsets: ["latin"] });
+
+const Center = () => {
+  return (
+    <div className={inter.className}>
+      <div className={styles.testca}>
+        <div className={styles.data}>
+          <div className={styles.details1}>
+            <p>An Open Source Comprehensive Test Case Generator</p>
+          </div>
+
+          <div className={styles.author}>
+            <a
+              href="https://www.linkedin.com/in/ank1traj/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              By Ankit Raj
+            </a>
+          </div>
+        </div>
+
+        <div className={styles.imag}>
+          <div className="relative rounded-lg bg-slate-900 p-2  ">
+            <div className="relative flex text-center">
+              <div className="flex pl-3.5 pt-3">
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  className="-ml-0.5 mr-1.5 h-3 w-3 text-red-500/20"
+                >
+                  <circle r="12" cy="12" cx="12"></circle>
+                </svg>
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  className="-ml-0.75 mr-1.5 h-3 w-3 text-yellow-500/20"
+                >
+                  <circle r="12" cy="12" cx="12"></circle>
+                </svg>
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  className="-ml-0.75 mr-1.5 h-3 w-3 text-green-500/20"
+                >
+                  <circle r="12" cy="12" cx="12"></circle>
+                </svg>
+              </div>
+              <span className="absolute inset-x-0 top-2 text text-slate-500"></span>
+            </div>
+            <div className="mt-5 space-y-1.5 px-5 pb-10">
+              <p className="mt-4 font-mono text font-normal tracking-wide text-violet-400">
+                <span className="text-slate-500">&lt;</span>
+                <span className="text-pink-400">Card</span>
+                <span className="text-slate-500">&gt;</span>
+              </p>
+              <p className="ml-3 font-mono text font-normal tracking-wide text-violet-400">
+                <span className="text-slate-500">&lt;</span>
+                <span className="text-pink-400">Text</span>
+                <span className="text-slate-500">&gt;</span>
+                <span className="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10">
+                  <span className="relative text-blue-400">
+                    Testcase case generator
+                  </span>
+                </span>
+                <span className="text-slate-500">&lt;/</span>
+                <span className="text-pink-400">Text</span>
+                <span className="text-slate-500">&gt;</span>
+              </p>
+              <p className="ml-3 font-mono text font-normal leading-4 tracking-wide text-violet-400">
+                <span className="text-slate-500">&lt;</span>
+                <span className="text-pink-400">Event</span>
+                <span className="text-slate-500">&gt;</span>
+                <span className="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10">
+                  <span className="relative text-blue-400">Codepeak 2023</span>
+                </span>
+                <span className="text-slate-500">&lt;/</span>
+                <span className="text-pink-400">Event</span>
+                <span className="text-slate-500">&gt;</span>
+              </p>
+              <p className="ml-3 font-mono text font-normal tracking-wide text-violet-400">
+                <span className="text-slate-500">&lt;</span>
+                <span className="text-pink-400">Flex</span>
+                <span className="ml-2 text-violet-400">
+                  className<span className="text-slate-500">=</span>
+                  <span className="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10">
+                    <span className="relative text-blue-400">Owner</span>
+                  </span>
+                </span>
+                <span className="text-slate-500">&gt;</span>
+                <span className="relative text-blue-400">AnkitRaj</span>
+                <span className="text-slate-500">&lt;</span>
+                <span className="text-pink-400">Flex</span>&gt;
+              </p>
+              <p className="ml-6 font-mono text font-normal tracking-wide text-violet-400">
+                <span className="text-slate-500">&lt;</span>
+                <span className="text-pink-400">Text</span>
+                <span className="text-slate-500">&gt;</span>
+                <span className="text-slate-500">&lt;</span>
+                <span className="text-pink-400">Bold</span>
+                <span className="text-slate-500">&gt;</span>
+                <span className="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10">
+                  <span className="relative text-blue-400">32%</span>
+                </span>
+                <span className="text-slate-500">&lt;/</span>
+                <span className="text-pink-400">Bold</span>
+                <span className="text-slate-500">&gt;</span>
+                <span className="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10">
+                  <span className="relative text-blue-400">Open Sourced</span>
+                </span>
+                <span className="text-slate-500">&lt;/</span>
+                <span className="text-pink-400">Text</span>
+                <span className="text-slate-500">&gt;</span>
+              </p>
+              <p className="ml-6 font-mono text font-normal tracking-wide text-violet-400">
+                <span className="text-slate-500">&lt;</span>
+                <span className="text-pink-400">Text</span>
+                <span className="text-slate-500">&gt;</span>
+                <span className="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10">
+                  <span className="relative text-blue-400">$ 223,328</span>
+                </span>
+                <span className="text-slate-500">&lt;/</span>
+                <span className="text-pink-400">Text</span>
+                <span className="text-slate-500">&gt;</span>
+              </p>
+              <p className="ml-3 font-mono text font-normal tracking-wide text-violet-400">
+                <span className="text-slate-500">&lt;/</span>
+                <span className="text-pink-400">Flex</span>
+                <span className="text-slate-500">&gt;</span>
+              </p>
+              <p className="ml-3 font-mono text font-normal leading-4 tracking-wide text-violet-400">
+                <span className="text-slate-500">&lt;</span>
+                <span className="text-pink-400">ProgressBar</span>
+                <span className="ml-2 text-violet-400">
+                  value<span className="text-slate-500">=</span>
+                  <span className="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10">
+                    <span className="relative text-blue-400">{32}</span>
+                  </span>
+                </span>
+                <span className="ml-2 text-violet-400">
+                  className<span className="text-slate-500">=</span>
+                  <span className="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10">
+                    <span className="relative text-blue-400">mt-3</span>
+                  </span>
+                </span>
+                <span className="text-slate-500">/&gt;</span>
+              </p>
+              <p className="font-mono text font-normal tracking-wide text-violet-400">
+                <span className="text-slate-500">&lt;/</span>
+                <span className="text-pink-400">Card</span>
+                <span className="text-slate-500">&gt;</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Center;
diff --git a/pages/index.js b/pages/index.js
index 62c9979..1d7344c 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,7 +5,7 @@ import { Inter } from "next/font/google";
 import { Roboto } from "next/font/google";
 import styles from "@/styles/Home.module.css";
 import Link from "next/link";
-
+import Center from "./Center";
 import MenuIcon from "@mui/icons-material/Menu";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import HourglassEmptyIcon from "@mui/icons-material/HourglassEmpty";
@@ -181,18 +181,9 @@ export default function Home() {
             </Link>
           </div>
         </nav>
-        <div className={styles.description}>
-          <p>An Open Source Comprehensive Test Case Generator</p>
-          <div className={styles.author}>
-            <a
-              href="https://www.linkedin.com/in/ank1traj/"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              By Ankit Raj
-            </a>
-          </div>
-        </div>
+        <Center/>
+
+
         <div className={styles.center}>
           <div className={styles.thirteen}>
             <Image
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/styles/Home.module.css b/styles/Home.module.css
index 43c1e83..73e9034 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -8,6 +8,47 @@
   padding-top: 3rem;
   min-height: 100vh;
 }
+.testca{
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 50px;
+  margin-bottom: 300px;
+  padding: 50px 20px;
+}
+
+@media (max-width:700px) {
+
+  .testca{
+    display: flex;
+    flex-direction: column;
+  }
+  
+}
+.data{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  max-width: 50%;
+  font-size: 35px;
+
+}
+
+.author a{
+  font-size: 20px;
+}
+.imag{
+
+  max-width: 50%;
+  display: flex;
+  justify-content: center;
+
+
+}
+
+
 
 .nav {
   display: inherit;
@@ -191,7 +232,6 @@
   width: 190px;
   height: 150px;
   border-radius: var(--border-radius);
-  background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);
   margin-bottom: 10px;
 }
 .card2{
@@ -199,14 +239,12 @@
   height: 150px;
   background-color: #1a1a1a;
   padding: 1rem 1.2rem;
-
 }
 .card2:hover {
   transform: scale(0.98);
   border-radius: 20px;
  }
  .card:hover{
-  background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);
   box-shadow: 0px 0px 30px 1px rgba(0, 255, 117, 0.30);
  }
 .card2 span {
diff --git a/styles/globals.css b/styles/globals.css
index 54244c4..d848014 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,3 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
 :root {
   --max-width: 1100px;
   --border-radius: 12px;
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..a73bb7e
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+ 
+    // Or if using `src` directory:
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+