diff --git a/package-lock.json b/package-lock.json
index d69fe4a..f6834cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,9 @@
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "tailwindcss": "^3.3.3"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
diff --git a/package.json b/package.json
index 97b5d58..3ff8e32 100644
--- a/package.json
+++ b/package.json
@@ -34,5 +34,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.3.3"
   }
 }
diff --git a/src/App.js b/src/App.js
index 3784575..5f72364 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,10 @@
-import logo from './logo.svg';
 import './App.css';
+import QrFrontend from './components/QrFrontend';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div >
+      <QrFrontend/>
     </div>
   );
 }
diff --git a/src/components/QrFrontend.js b/src/components/QrFrontend.js
new file mode 100644
index 0000000..05e4867
--- /dev/null
+++ b/src/components/QrFrontend.js
@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+
+const QrFrontend = () => {
+  const [showText, setShowText] = useState(false);
+  const [qrImage, setQrImage] = useState('');
+  const [inputText, setInputText] = useState('');
+
+  const generateQR = async () => {
+    try {
+      const response = await fetch('http://143.110.177.177:5000/', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ inputtext: inputText }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setQrImage(data.qr_image);
+        setShowText(true);
+      } else {
+        console.error('Failed to generate QR code');
+      }
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+
+  return (
+    <>
+      <div className='p-4 md:p-6 flex flex-col gap-2 justify-center items-center'>
+        <h1 className='text-xl md:text-2xl mt-2'>QR Code Generator 🔥</h1>
+        <h2 className='text-sm font-medium md:font-normal md:text-xl mt-2'>
+          Insert a link below to generate a QR Code
+        </h2>
+      </div>
+      <form
+        className='p-4 md:p-6 flex flex-col md:flex-row justify-center items-center gap-2'
+        onSubmit={(e) => {
+          e.preventDefault();
+          generateQR();
+        }}
+      >
+        <input
+          type='text'
+          name='link'
+          className='text-white bg-black px-2 py-1 w-full md:w-2/6 h-9'
+          value={inputText}
+          onChange={(e) => setInputText(e.target.value)}
+        />
+        <button
+          type='submit'
+          className='text-white bg-blue-600 border-none px-2 py-1 cursor-pointer rounded-md md:ml-2'
+          style={{ backgroundColor: 'rgb(41, 64, 121)' }}
+        >
+          Generate QR
+        </button>
+      </form>
+      <div className='p-4 md:p-6 flex flex-col justify-center items-center'>
+        {showText && (
+          <>
+            <img src={qrImage} alt='QR Code' />
+            <p className='text-sm md:text-lg'>
+              Here is the QR code we generated for you 🚀
+            </p>
+          </>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default QrFrontend;
diff --git a/src/index.css b/src/index.css
index ec2585e..3ec2e08 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,3 +11,6 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..c0958ec
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+