diff --git a/src/App.jsx b/src/App.jsx
index dce8c04..76347ae 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -37,25 +37,25 @@ function App() {
 
   return (
     <>
-    <div className="bg-gradient-to-r from-blue-50 to-blue-100 h-screen p-3 flex flex-col justify-center items-center">
+    <div className="bg-gradient-to-r from-gray-900 via-gray-800 to-black h-screen p-6 flex flex-col justify-center items-center text-white">
     <div className=' flex flex-col items-center overflow-y-auto  w-full overflow-x-hidden'>
       <form
         onSubmit={generateAnswer}
-        className="w-full md:w-2/3 lg:w-1/2 xl:w-1/3 text-center rounded-lg shadow-lg bg-white py-6 px-4 transition-all duration-500 transform hover:scale-105"
+        className="w-full md:w-2/3 lg:w-1/2 xl:w-1/3 text-center rounded-lg shadow-2xl bg-gray-900 py-8 px-6 transition-all duration-500 transform hover:scale-105"
       >
         <a href="https://github.com/codeaashu/Helpmate-AI" target="_blank" rel="noopener noreferrer">
-          <h1 className="text-4xl font-bold text-blue-500 mb-4 animate-bounce">Helpmate AI</h1>
+          <h1 className="text-4xl font-bold text-blue-400 mb-4 animate-bounce">Helpmate AI</h1>
         </a>
         <textarea
           required
-          className="border border-gray-300 rounded w-full my-2 min-h-fit p-3 transition-all duration-300 focus:border-blue-400 focus:shadow-lg"
+          className="border border-gray-700 bg-gray-800 text-white rounded-lg w-full my-3 min-h-fit p-4 transition-all duration-300 focus:border-blue-500 focus:shadow-lg focus:bg-gray-700"
           value={question}
           onChange={(e) => setQuestion(e.target.value)}
           placeholder="Take help with your AI mate!"
         ></textarea>
         <button
           type="submit"
-          className={`bg-blue-500 text-white p-3 rounded-md hover:bg-blue-600 transition-all duration-300 ${
+          className={`bg-blue-600 text-white py-3 px-6 rounded-md shadow-md hover:bg-blue-700 transition-all duration-300 ${
             generatingAnswer ? 'opacity-50 cursor-not-allowed' : ''
           }`}
           disabled={generatingAnswer}
@@ -63,7 +63,7 @@ function App() {
           Generate answer
         </button>
       </form>
-      <div className="w-full md:w-2/3 lg:w-1/3 xl:w-1/3 text-center rounded-lg bg-white my-4 shadow-lg transition-all duration-500 transform hover:scale-105">
+      <div className="w-full md:w-2/3 lg:w-1/3 xl:w-1/3 text-center rounded-lg bg-gray-900 my-6 shadow-2xl transition-all duration-500 transform hover:scale-105">
       <ReactMarkdown className="p-4">{answer}</ReactMarkdown>
       </div>
     </div>