diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..7d710ef
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,58 @@
+# Node modules
+node_modules/
+
+# Logs
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Environment variables
+.env
+
+# Build output
+dist/
+build/
+public/
+
+# Cache
+.cache/
+.npm/
+.vscode/
+.DS_Store
+
+# Optional npm cache directory
+.npm/
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+node_repl_history
+
+# Testing
+coverage/
+
+# Production
+*.env.*
+
+# Editor directories and files
+.idea/
+*.sublime-workspace
+*.sublime-project
+.vscode/
+*.code-workspace
+
+# Dependency directories
+frontend/node_modules/
+backend/node_modules/
+
+# MacOS
+.DS_Store
+
+# Linux
+*~
+
+# Windows
+Thumbs.db
diff --git a/backend/server.js b/backend/server.js
index 65bdd72..ff28368 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -1,55 +1,727 @@
-const express = require('express');
-const cors = require('cors');
-const fs = require('fs');
-const { parse } = require('csv-parse');
-const natural = require('natural');
+const express = require("express");
+const cors = require("cors");
 
 const app = express();
 app.use(cors());
 app.use(express.json());
 
-const tokenizer = new natural.WordTokenizer();
-const stemmer = natural.PorterStemmer;
-const dataset = [];
-
-// Load and process the dataset
-fs.createReadStream('../data.csv') 
-  .pipe(parse({ columns: true }))
-  .on('data', (row) => {
-    const question = row.question.trim();
-    const answer = row.answer.trim();
-    dataset.push({
-      question: question,
-      answer: answer,
-      stemmedQuestion: tokenizer.tokenize(question.toLowerCase()).map(word => stemmer.stem(word))
-    });
-  })
-  .on('end', () => {
-    console.log('Dataset loaded successfully');
-  });
+const categories = {
+  programming: new Set([
+    "programming",
+    "coding",
+    "development",
+    "software",
+    "code",
+  ]),
+  javascript: new Set([
+    "javascript",
+    "js",
+    "node.js",
+    "nodejs",
+    "node",
+    "javascript programming",
+    "learn javascript",
+    "javascript tutorial",
+  ]),
+  react: new Set([
+    "react",
+    "react.js",
+    "reactjs",
+    "react js",
+    "react native",
+    "react framework",
+    "learn react",
+    "react tutorial",
+    "react development",
+  ]),
+  python: new Set([
+    "python",
+    "python programming",
+    "learn python",
+    "python tutorial",
+    "python development",
+    "python coding",
+  ]),
+  webdev: new Set([
+    "web development",
+    "web dev",
+    "website",
+    "web design",
+    "frontend",
+    "backend",
+    "full stack",
+    "fullstack",
+  ]),
+  shopping: new Set([
+    "shopping",
+    "shop",
+    "buy",
+    "purchase",
+    "store",
+    "online shopping",
+  ]),
+  clothing: new Set([
+    "clothing",
+    "clothes",
+    "apparel",
+    "fashion",
+    "wear",
+    "dress",
+    "garments",
+  ]),
+  furniture: new Set([
+    "furniture",
+    "sofa",
+    "chair",
+    "table",
+    "bed",
+    "couch",
+    "furnishings",
+    "home decor",
+  ]),
+  electronics: new Set([
+    "electronics",
+    "gadgets",
+    "devices",
+    "smartphones",
+    "laptops",
+    "computers",
+    "tablets",
+  ]),
+  greetings: new Set([
+    "hello",
+    "hi",
+    "hey",
+    "greetings",
+    "good morning",
+    "good afternoon",
+    "good evening",
+  ]),
+  farewell: new Set(["bye", "goodbye", "see you", "farewell", "good night"]),
+  gratitude: new Set(["thanks", "thank you", "appreciate it", "grateful"]),
+  help: new Set([
+    "help",
+    "assist",
+    "support",
+    "guidance",
+    "what can you do",
+    "capabilities",
+  ]),
+};
+
+class Dataset {
+  constructor() {
+    this.entries = [];
+    this.categoryMap = new Map();
+    this.initializeDefaultResponses();
+    this.initializeChatPatterns();
+    this.initializeDataset();
+  }
+
+  initializeDefaultResponses() {
+    this.defaultResponses = {
+      react: {
+        answer:
+          "https://reactjs.org - Official React documentation and tutorials for learning React development.",
+        confidence: 0.9,
+        category: "react",
+      },
+      javascript: {
+        answer:
+          "https://developer.mozilla.org/en-US/docs/Web/JavaScript - Comprehensive JavaScript documentation and tutorials.",
+        confidence: 0.9,
+        category: "javascript",
+      },
+      python: {
+        answer:
+          "https://python.org - Official Python website with documentation, tutorials, and resources.",
+        confidence: 0.9,
+        category: "python",
+      },
+      webdev: {
+        answer:
+          "https://developer.mozilla.org - Comprehensive web development documentation and tutorials.",
+        confidence: 0.9,
+        category: "webdev",
+      },
+      programming: {
+        answer:
+          "https://freecodecamp.org - Free coding tutorials and certification courses.",
+        confidence: 0.8,
+        category: "programming",
+      },
+      shopping: {
+        answer:
+          "https://amazon.com - World's largest online shopping platform.",
+        confidence: 0.8,
+        category: "shopping",
+      },
+      clothing: {
+        answer:
+          "https://myntra.com - Premier fashion and clothing shopping destination.",
+        confidence: 0.8,
+        category: "clothing",
+      },
+      furniture: {
+        answer:
+          "https://ikea.com - Affordable furniture and home decor solutions.",
+        confidence: 0.8,
+        category: "furniture",
+      },
+      electronics: {
+        answer: "https://bestbuy.com - Great deals on electronics and gadgets.",
+        confidence: 0.8,
+        category: "electronics",
+      },
+      // Chatbot responses
+      greetings: {
+        answer: "Hello! How can I assist you today?",
+        confidence: 0.9,
+        category: "greetings",
+      },
+      farewell: {
+        answer: "Goodbye! Have a great day!",
+        confidence: 0.9,
+        category: "farewell",
+      },
+      gratitude: {
+        answer: "You're welcome! Let me know if you need anything else.",
+        confidence: 0.9,
+        category: "gratitude",
+      },
+      help: {
+        answer:
+          "I can help you with: \n- Programming and development questions\n- Web development resources\n- Shopping recommendations\n- General questions and guidance\nJust ask me anything!",
+        confidence: 0.9,
+        category: "help",
+      },
+    };
+  }
+
+  initializeChatPatterns() {
+    this.chatPatterns = [
+      {
+        pattern:
+          /how (can|do) I (learn|start with) (javascript|python|react|web development)/i,
+        handler: (matches) => {
+          const topic = matches[3].toLowerCase();
+          return (
+            this.defaultResponses[topic] || {
+              answer: `To learn ${topic}, I recommend starting with online tutorials and documentation. Would you like a specific resource recommendation?`,
+              confidence: 0.8,
+              category: "programming",
+            }
+          );
+        },
+      },
+      {
+        pattern:
+          /what('s| is) (the best|your recommended) (way|resource|platform) (for|to) (learn|study) (javascript|python|react|web development)/i,
+        handler: (matches) => {
+          const topic = matches[6].toLowerCase();
+          return (
+            this.defaultResponses[topic] || {
+              answer: `For learning ${topic}, I recommend checking official documentation and tutorials. Would you like a specific resource?`,
+              confidence: 0.8,
+              category: "programming",
+            }
+          );
+        },
+      },
+      {
+        pattern:
+          /where (can|should) I (buy|find|shop for) (clothes|clothing|fashion|apparel)/i,
+        handler: () => this.defaultResponses["clothing"],
+      },
+      {
+        pattern:
+          /where (can|should) I (buy|find|shop for) (furniture|home decor|furnishings)/i,
+        handler: () => this.defaultResponses["furniture"],
+      },
+      {
+        pattern:
+          /where (can|should) I (buy|find|shop for) (electronics|gadgets|devices)/i,
+        handler: () => this.defaultResponses["electronics"],
+      },
+    ];
+  }
+
+  initializeDataset() {
+    this.addEntry(
+      "What is the best way to learn JavaScript?",
+      "https://developer.mozilla.org/en-US/docs/Web/JavaScript - Comprehensive JavaScript documentation and tutorials.",
+      "javascript",
+    );
+    this.addEntry(
+      "How do I start with React?",
+      "https://reactjs.org - Official React documentation and tutorials for learning React development.",
+      "react",
+    );
+    this.addEntry(
+      "What are some good resources for learning Python?",
+      "https://python.org - Official Python website with documentation, tutorials, and resources.",
+      "python",
+    );
+    this.addEntry(
+      "Where can I find good web development tutorials?",
+      "https://developer.mozilla.org - Comprehensive web development documentation and tutorials.",
+      "webdev",
+    );
+    this.addEntry(
+      "What is the best online shopping platform?",
+      "https://amazon.com - World's largest online shopping platform.",
+      "shopping",
+    );
+    this.addEntry(
+      "Where can I buy fashionable clothing?",
+      "https://myntra.com - Premier fashion and clothing shopping destination.",
+      "clothing",
+    );
+    this.addEntry(
+      "Where can I buy affordable furniture?",
+      "https://ikea.com - Affordable furniture and home decor solutions.",
+      "furniture",
+    );
+    this.addEntry(
+      "Where can I find great deals on electronics?",
+      "https://bestbuy.com - Great deals on electronics and gadgets.",
+      "electronics",
+    );
+    this.addEntry("Hello!", "Hello! How can I assist you today?", "greetings");
+    this.addEntry("Goodbye!", "Goodbye! Have a great day!", "farewell");
+    this.addEntry(
+      "Thanks!",
+      "You're welcome! Let me know if you need anything else.",
+      "gratitude",
+    );
+    this.addEntry(
+      "What can you do?",
+      "I can help you with: \n- Programming and development questions\n- Web development resources\n- Shopping recommendations\n- General questions and guidance\nJust ask me anything!",
+      "help",
+    );
+    this.addEntry(
+      "What is the best resource for learning Node.js?",
+      "https://nodejs.dev - Official Node.js documentation and tutorials.",
+      "javascript",
+    );
+    this.addEntry(
+      "How can I improve my Python skills?",
+      "I recommend practicing with projects and using resources like https://realpython.com.",
+      "python",
+    );
+    this.addEntry(
+      "What are some good frameworks for web development?",
+      "Some popular frameworks include React, Angular, and Vue.js.",
+      "webdev",
+    );
+    this.addEntry(
+      "Where can I buy a new smartphone?",
+      "Check out https://amazon.com for the latest smartphones.",
+      "electronics",
+    );
+    this.addEntry(
+      "Can you recommend any online courses for web development?",
+      "I suggest checking out platforms like Udemy, Coursera, or freeCodeCamp.",
+      "webdev",
+    );
+    this.addEntry(
+      "Where can I find stylish home decor?",
+      "You can explore stylish options at https://ikea.com or https://wayfair.com.",
+      "furniture",
+    );
+    this.addEntry(
+      "What is a good way to learn full-stack development?",
+      "Consider taking a full-stack course on platforms like Codecademy or Coursera.",
+      "webdev",
+    );
+    this.addEntry(
+      "How do I start a career in software development?",
+      "Begin by learning programming languages like JavaScript or Python and building projects.",
+      "programming",
+    );
+    this.addEntry(
+      "What are some tips for online shopping?",
+      "Always compare prices, read reviews, and look for discount codes!",
+      "shopping",
+    );
+    this.addEntry(
+      "How can I improve my JavaScript skills?",
+      "Practice coding challenges on platforms like Codewars or LeetCode to enhance your JavaScript skills.",
+      "javascript",
+    );
+    this.addEntry(
+      "What is React used for?",
+      "React is used for building user interfaces, especially for single-page applications.",
+      "react",
+    );
+    this.addEntry(
+      "Can you recommend a Python tutorial for beginners?",
+      "Check out Codecademy's Python course for a great beginner-friendly tutorial.",
+      "python",
+    );
+    this.addEntry(
+      "What's the best way to learn web development?",
+      "Start with HTML, CSS, and JavaScript, then move on to frameworks like React or backend technologies.",
+      "webdev",
+    );
+    this.addEntry(
+      "Where can I buy the latest smartphone?",
+      "You can find the latest smartphones on websites like Amazon or Best Buy.",
+      "electronics",
+    );
+    this.addEntry(
+      "What are the top online courses for programming?",
+      "Consider platforms like Udemy, Coursera, or edX for top programming courses.",
+      "programming",
+    );
+    this.addEntry(
+      "How do I create a responsive website?",
+      "Use CSS frameworks like Bootstrap or Tailwind CSS to create responsive websites easily.",
+      "webdev",
+    );
+    this.addEntry(
+      "Where can I buy kitchen furniture?",
+      "You can explore IKEA or Wayfair for kitchen furniture options.",
+      "furniture",
+    );
+    this.addEntry(
+      "What is the difference between React and Angular?",
+      "React is a library for building UI, while Angular is a full-fledged framework.",
+      "react",
+    );
+    this.addEntry(
+      "How to get started with Node.js?",
+      "Visit the official Node.js website for installation and basic tutorials.",
+      "javascript",
+    );
+    this.addEntry(
+      "Can you suggest a good book for learning Python?",
+      "I recommend 'Automate the Boring Stuff with Python' by Al Sweigart.",
+      "python",
+    );
+    this.addEntry(
+      "What are the benefits of using TypeScript?",
+      "TypeScript provides static typing, which helps catch errors early in the development process.",
+      "javascript",
+    );
+    this.addEntry(
+      "How can I shop for eco-friendly products?",
+      "Look for brands that focus on sustainability and eco-friendly practices on platforms like Amazon or Etsy.",
+      "shopping",
+    );
+    this.addEntry(
+      "What is the best furniture for small spaces?",
+      "Consider multi-functional furniture like sofa beds or nesting tables.",
+      "furniture",
+    );
+    this.addEntry(
+      "Where can I find coding bootcamps?",
+      "Check websites like Course Report or SwitchUp for coding bootcamp reviews and comparisons.",
+      "programming",
+    );
+    this.addEntry(
+      "What are some must-know CSS tricks?",
+      "Learn about Flexbox and CSS Grid to create responsive layouts effortlessly.",
+      "webdev",
+    );
+    this.addEntry(
+      "How do I start an online store?",
+      "Use platforms like Shopify or WooCommerce to set up your online store quickly.",
+      "shopping",
+    );
+    this.addEntry(
+      "Where can I find affordable clothing?",
+      "Websites like ASOS or Uniqlo often have great deals on clothing.",
+      "clothing",
+    );
+    this.addEntry(
+      "What programming languages should I learn in 2024?",
+      "JavaScript, Python, and Go are among the top languages to learn in 2024.",
+      "programming",
+    );
+    this.addEntry(
+      "What are some common JavaScript frameworks?",
+      "Common frameworks include Angular, Vue.js, and React.",
+      "javascript",
+    );
+    this.addEntry(
+      "Can you explain the concept of closures in JavaScript?",
+      "Closures are functions that remember their outer variables and can access them even when the outer function has finished executing.",
+      "javascript",
+    );
+    this.addEntry(
+      "What is the purpose of version control?",
+      "Version control systems like Git help you manage changes to code over time, making collaboration easier.",
+      "programming",
+    );
+    this.addEntry(
+      "Where can I buy sports equipment?",
+      "Check out stores like Dick's Sporting Goods or Academy Sports + Outdoors for sports equipment.",
+      "electronics",
+    );
+    this.addEntry(
+      "What is the latest trend in web development?",
+      "Single-page applications (SPAs) and Progressive Web Apps (PWAs) are trending in web development.",
+      "webdev",
+    );
+    this.addEntry(
+      "What should I consider when buying a laptop?",
+      "Look for specifications like RAM, processor speed, battery life, and your intended usage.",
+      "electronics",
+    );
+    this.addEntry(
+      "How to improve my problem-solving skills in coding?",
+      "Practice coding problems on platforms like HackerRank or LeetCode to enhance your problem-solving skills.",
+      "programming",
+    );
+    this.addEntry(
+      "Where can I find DIY home decor ideas?",
+      "Pinterest is a great resource for finding creative DIY home decor ideas.",
+      "furniture",
+    );
+    this.addEntry(
+      "What is Agile methodology?",
+      "Agile is a project management methodology that promotes iterative development and collaboration.",
+      "programming",
+    );
+    this.addEntry(
+      "How do I host my website?",
+      "Use hosting services like Bluehost or DigitalOcean to host your website.",
+      "webdev",
+    );
+    this.addEntry(
+      "Where can I shop for children's clothing?",
+      "You can find children's clothing on websites like Gap Kids or OshKosh B'gosh.",
+      "clothing",
+    );
+    this.addEntry(
+      "What is the best way to learn SQL?",
+      "Online courses on platforms like Coursera or freeCodeCamp are great for learning SQL.",
+      "programming",
+    );
+    this.addEntry(
+      "How to start a blog?",
+      "Choose a platform like WordPress or Medium and start writing about topics you’re passionate about.",
+      "webdev",
+    );
+    this.addEntry(
+      "Can you recommend a resource for learning React hooks?",
+      "Check out the official React documentation for a comprehensive guide on hooks.",
+      "react",
+    );
+    this.addEntry(
+      "What are the best online stores for electronics?",
+      "Best Buy, Newegg, and Amazon are among the best for electronics.",
+      "electronics",
+    );
+    this.addEntry(
+      "How can I get better at Java programming?",
+      "Practice by building small projects and participating in coding challenges on platforms like HackerRank.",
+      "java",
+    );
+    this.addEntry(
+      "Where can I buy garden furniture?",
+      "Look for garden furniture at stores like Home Depot or Lowe's.",
+      "furniture",
+    );
+    this.addEntry(
+      "What is the best language for web development?",
+      "JavaScript is the most widely used language for web development.",
+      "webdev",
+    );
+    this.addEntry(
+      "How to create a successful eCommerce website?",
+      "Focus on user experience, SEO, and reliable payment systems for success.",
+      "shopping",
+    );
+    this.addEntry(
+      "Where can I buy organic food online?",
+      "You can find organic food on websites like Thrive Market or Amazon Fresh.",
+      "shopping",
+    );
+    this.addEntry(
+      "What is the purpose of APIs?",
+      "APIs allow different software applications to communicate with each other.",
+      "programming",
+    );
+    this.addEntry(
+      "How do I learn about cloud computing?",
+      "Consider taking introductory courses on platforms like Coursera or Udemy.",
+      "programming",
+    );
+    this.addEntry(
+      "What is the best resource for learning about machine learning?",
+      "Check out Andrew Ng's machine learning course on Coursera.",
+      "python",
+    );
+    this.addEntry(
+      "How can I save money while shopping online?",
+      "Use coupon websites or cashback apps to save money on online purchases.",
+      "shopping",
+    );
+    this.addEntry(
+      "What are the basics of digital marketing?",
+      "Learn about SEO, content marketing, social media, and email marketing as basics.",
+      "marketing",
+    );
+    this.addEntry(
+      "Where can I find great deals on furniture?",
+      "Check out sites like Wayfair or Overstock for deals on furniture.",
+      "furniture",
+    );
+  }
 
-function findBestResponse(input) {
-  const inputStems = tokenizer.tokenize(input.toLowerCase()).map(word => stemmer.stem(word));
-  let bestMatch = null;
-  let highestScore = -1;
+  addEntry(question, answer, category) {
+    const entry = {
+      question: question.toLowerCase().trim(),
+      answer: answer.trim(),
+      category: category,
+      keywords: this.extractKeywords(question),
+    };
 
-  dataset.forEach((item) => {
-    const commonStems = inputStems.filter(stem => item.stemmedQuestion.includes(stem));
-    const score = commonStems.length / Math.max(inputStems.length, item.stemmedQuestion.length);
+    this.entries.push(entry);
 
-    if (score > highestScore) {
-      highestScore = score;
-      bestMatch = item;
+    if (category) {
+      if (!this.categoryMap.has(category)) {
+        this.categoryMap.set(category, []);
+      }
+      this.categoryMap.get(category).push(entry);
+    }
+  }
+
+  extractKeywords(text) {
+    return text
+      .toLowerCase()
+      .replace(/[^\w\s]/g, " ")
+      .split(/\s+/)
+      .filter((word) => word.length > 2);
+  }
+
+  detectCategory(text) {
+    text = text.toLowerCase();
+    const words = this.extractKeywords(text);
+
+    // Check exact matches first
+    for (const [category, terms] of Object.entries(categories)) {
+      if (terms.has(text)) {
+        return category;
+      }
+    }
+
+    // Check partial matches
+    for (const [category, terms] of Object.entries(categories)) {
+      for (const term of terms) {
+        for (const word of words) {
+          if (term.includes(word) || word.includes(term)) {
+            return category;
+          }
+        }
+      }
+    }
+
+    return null;
+  }
+
+  checkPatternMatch(input) {
+    for (const { pattern, handler } of this.chatPatterns) {
+      const matches = input.match(pattern);
+      if (matches) {
+        return handler(matches);
+      }
+    }
+    return null;
+  }
+
+  findBestMatch(input) {
+    input = input.toLowerCase().trim();
+
+    // Check pattern matches first
+    const patternMatch = this.checkPatternMatch(input);
+    if (patternMatch) {
+      return patternMatch;
     }
-  });
 
-  return bestMatch ? bestMatch.answer : "I'm sorry, I don't have an answer for that.";
+    const inputWords = this.extractKeywords(input);
+    const category = this.detectCategory(input);
+
+    if (category) {
+      // Try to find specific match within category
+      const categoryEntries = this.categoryMap.get(category) || [];
+      let bestMatch = null;
+      let highestScore = 0;
+
+      for (const entry of categoryEntries) {
+        const score = this.calculateSimilarity(inputWords, entry.keywords);
+        if (score > highestScore) {
+          highestScore = score;
+          bestMatch = entry;
+        }
+      }
+
+      // Return best match or default category response
+      if (bestMatch && highestScore > 0.3) {
+        return {
+          answer: bestMatch.answer,
+          confidence: highestScore,
+          category: category,
+        };
+      }
+
+      return this.defaultResponses[category] || this.getGeneralResponse();
+    }
+
+    return this.findGeneralMatch(inputWords);
+  }
+
+  calculateSimilarity(inputWords, entryWords) {
+    const intersection = inputWords.filter((word) => entryWords.includes(word));
+    return intersection.length / Math.max(inputWords.length, entryWords.length);
+  }
+
+  findGeneralMatch(inputWords) {
+    let bestMatch = null;
+    let highestScore = 0;
+
+    for (const entry of this.entries) {
+      const score = this.calculateSimilarity(inputWords, entry.keywords);
+      if (score > highestScore) {
+        highestScore = score;
+        bestMatch = entry;
+      }
+    }
+
+    if (bestMatch && highestScore > 0.3) {
+      return {
+        answer: bestMatch.answer,
+        confidence: highestScore,
+        category: bestMatch.category,
+      };
+    }
+
+    return this.getGeneralResponse();
+  }
+
+  getGeneralResponse() {
+    return {
+      answer:
+        "I'm not sure I understand. Could you please rephrase your question? I can help with programming, web development, shopping, or general inquiries.",
+      confidence: 0,
+      category: null,
+    };
+  }
 }
 
-app.post('/api/chat', (req, res) => {
+const dataset = new Dataset();
+
+app.post("/api/chat", (req, res) => {
   const { message } = req.body;
-  const response = findBestResponse(message);
-  res.json({ response });
+  const result = dataset.findBestMatch(message);
+
+  res.json({
+    response: result.answer,
+    confidence: result.confidence.toFixed(2),
+    category: result.category,
+  });
 });
 
 const PORT = process.env.PORT || 3001;
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
index 964a299..4502ec7 100644
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -1,38 +1,38 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import react from 'eslint-plugin-react'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
+import js from "@eslint/js";
+import globals from "globals";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
 
 export default [
   {
-    files: ['**/*.{js,jsx}'],
-    ignores: ['dist'],
+    files: ["**/*.{js,jsx}"],
+    ignores: ["dist"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
       parserOptions: {
-        ecmaVersion: 'latest',
+        ecmaVersion: "latest",
         ecmaFeatures: { jsx: true },
-        sourceType: 'module',
+        sourceType: "module",
       },
     },
-    settings: { react: { version: '18.3' } },
+    settings: { react: { version: "18.3" } },
     plugins: {
       react,
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...js.configs.recommended.rules,
       ...react.configs.recommended.rules,
-      ...react.configs['jsx-runtime'].rules,
+      ...react.configs["jsx-runtime"].rules,
       ...reactHooks.configs.recommended.rules,
-      'react/jsx-no-target-blank': 'off',
-      'react-refresh/only-export-components': [
-        'warn',
+      "react/jsx-no-target-blank": "off",
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
     },
   },
-]
+];
diff --git a/frontend/index.html b/frontend/index.html
index 7b5d620..f312bcf 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,8 +3,14 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link href="https://fonts.googleapis.com/css2?family=Matemasie&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Matemasie&display=swap" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css2?family=Matemasie&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Matemasie&display=swap"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
   </head>
diff --git a/frontend/postcss.config.cjs b/frontend/postcss.config.cjs
index ac14efc..116848f 100644
--- a/frontend/postcss.config.cjs
+++ b/frontend/postcss.config.cjs
@@ -1,6 +1,3 @@
 module.exports = {
-  plugins: [
-    require('tailwindcss'),
-    require('autoprefixer'),
-  ],
-}
\ No newline at end of file
+  plugins: [require("tailwindcss"), require("autoprefixer")],
+};
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 0426391..ac16814 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -4,14 +4,14 @@ import Hero from "./components/Hero";
 import Chatbot from "./components/Chatbot";
 
 const App = () => {
-    return (
-        <Router>
-            <Routes>
-                <Route path="/" element={<Hero />} />
-                <Route path="/chatbot" element={<Chatbot />} />
-            </Routes>
-        </Router>
-    );
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<Hero />} />
+        <Route path="/chatbot" element={<Chatbot />} />
+      </Routes>
+    </Router>
+  );
 };
-  
-  export default App;
\ No newline at end of file
+
+export default App;
diff --git a/frontend/src/components/Chatbot.jsx b/frontend/src/components/Chatbot.jsx
index 2502e8f..bbec3a5 100644
--- a/frontend/src/components/Chatbot.jsx
+++ b/frontend/src/components/Chatbot.jsx
@@ -1,14 +1,14 @@
-import React, { useState, useEffect, useRef } from 'react';
-import axios from 'axios';
+import React, { useState, useEffect, useRef } from "react";
+import axios from "axios";
 
 function Chatbot() {
   const [messages, setMessages] = useState([]);
-  const [input, setInput] = useState('');
+  const [input, setInput] = useState("");
   const messagesEndRef = useRef(null);
 
   useEffect(() => {
     if (messagesEndRef.current) {
-      messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
+      messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
     }
   }, [messages]);
 
@@ -18,17 +18,19 @@ function Chatbot() {
 
     const userMessage = { text: input, user: true };
     setMessages([...messages, userMessage]);
-    setInput('');
+    setInput("");
 
     try {
-      const response = await axios.post('http://localhost:3001/api/chat', { message: input });
+      const response = await axios.post("http://localhost:3001/api/chat", {
+        message: input,
+      });
       const responseText = response.data.response;
 
       const parsedMessage = parseLinks(responseText);
       const botMessage = { text: parsedMessage, user: false };
       setMessages((prevMessages) => [...prevMessages, botMessage]);
     } catch (error) {
-      console.error('Error:', error);
+      console.error("Error:", error);
     }
   };
 
@@ -41,12 +43,19 @@ function Chatbot() {
 
   const parseLinks = (text) => {
     const dataset = [
-      { QUERY: "How to learn Python?", WEBSITE: "https://python.org - Offers documentation, tutorials, and resources for learning Python programming." },
+      {
+        QUERY: "How to learn Python?",
+        WEBSITE:
+          "https://python.org - Offers documentation, tutorials, and resources for learning Python programming.",
+      },
     ];
 
     dataset.forEach((item) => {
-      const regex = new RegExp(item.QUERY, 'gi');
-      text = text.replace(regex, `<a href="${item.WEBSITE.split(' ')[0]}" target="_blank" rel="noopener noreferrer">${item.QUERY}</a>`);
+      const regex = new RegExp(item.QUERY, "gi");
+      text = text.replace(
+        regex,
+        `<a href="${item.WEBSITE.split(" ")[0]}" target="_blank" rel="noopener noreferrer">${item.QUERY}</a>`,
+      );
     });
 
     text = makeUrlClickable(text);
@@ -60,64 +69,92 @@ function Chatbot() {
 
   return (
     <div>
-        <div className="flex justify-center items-center h-screen p-4 bg-primary">
-          <div className="w-full lg:w-2/3 bg-secondary border border-gray-300 rounded-lg p-4 flex flex-col h-full">
-            <p className='text-lg text-center text-gray-500 mb-10'>Nova</p>
-            <div className="flex-1 overflow-y-auto space-y-2 hide-scrollbar"
-              style={{
-                overflowY: 'scroll',
-                scrollbarWidth: 'none',
-                msOverflowStyle: 'none'
-              }}>
-              <div className="flex flex-col">
-                {messages.map((message, index) => (
-                  <div key={index} className={`max-w-xs mb-2 ${message.user ? 'self-end' : 'self-start'}`}>
-                    {!message.user && (
-                      <div className="text-xs text-green-600 mb-1">Nova</div>
-                    )}
-                    <div
-                      className={`p-2 ${message.user
-                        ? 'bg-gray-200 text-black pl-3 pr-3 rounded-bl-lg rounded-t-lg'
-                        : 'border border-gray-200 rounded-lg hover:border-gray-400'
-                        }`}
-                      dangerouslySetInnerHTML={{ __html: message.text }}
-                    />
-                  </div>
-                ))}
-                <div ref={messagesEndRef} />
-              </div>
+      <div className="flex justify-center items-center h-screen p-4 bg-gradient-to-r from-[#bfdbfe] to-[#a5f3fc]">
+        <div className="w-full lg:w-2/3 bg-secondary border border-gray-300 rounded-lg p-4 flex flex-col h-full">
+          <p className="text-lg text-center text-gray-500 mb-10">Nova</p>
+          <div
+            className="flex-1 overflow-y-auto space-y-2 hide-scrollbar"
+            style={{
+              overflowY: "scroll",
+              scrollbarWidth: "none",
+              msOverflowStyle: "none",
+            }}
+          >
+            <div className="flex flex-col">
+              {messages.map((message, index) => (
+                <div
+                  key={index}
+                  className={`max-w-xs mb-2 ${message.user ? "self-end" : "self-start"}`}
+                >
+                  {!message.user && (
+                    <div className="text-xs text-green-600 mb-1">Nova</div>
+                  )}
+                  <div
+                    className={`p-2 ${
+                      message.user
+                        ? "bg-gray-200 text-black pl-3 pr-3 rounded-bl-lg rounded-t-lg"
+                        : "border border-gray-200 rounded-lg hover:border-gray-400"
+                    }`}
+                    dangerouslySetInnerHTML={{ __html: message.text }}
+                  />
+                </div>
+              ))}
+              <div ref={messagesEndRef} />
             </div>
-            <form onSubmit={sendMessage} className="flex mt-4">
-              <div className="relative flex-1">
-                <input
-                  type="text"
-                  value={input}
-                  onChange={(e) => setInput(e.target.value)}
-                  placeholder="Ask NovaAI"
-                  className="w-full pr-28 py-4 px-2 bg-secondary border border-black text-black rounded-md "
-                  autoFocus
-                />
-                <div className="absolute inset-y-0 right-0 flex items-center space-x-2 pr-2">
-                  <button
-                    type="submit"
-                    className="bg-black text-white px-3 py-1 border border-black rounded-lg hover:bg-gray-800 hover:border-black"
+          </div>
+          <form onSubmit={sendMessage} className="flex mt-4">
+            <div className="relative flex-1">
+              <input
+                type="text"
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                placeholder="Hi, How can i help you?"
+                className="w-full pr-28 py-4 px-2 bg-secondary border border-black text-black rounded-md "
+                autoFocus
+              />
+              <div className="absolute inset-y-0 right-0 flex items-center space-x-2 pr-2">
+                <button
+                  type="submit"
+                  className="flex items-center bg-blue-900 text-white px-4 py-2 border border-transparent rounded-lg shadow-lg hover:bg-blue-700 transition duration-200 ease-in-out"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-5 w-5 mr-2"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
                   >
-                    Suggest
-                  </button>
-                  <button
-                    type="button"
-                    onClick={clearMessages}
-                    className="bg-white text-black px-3 py-1 border border-black rounded-lg hover:bg-red-600"
+                    <path d="M2.5 10a7.5 7.5 0 1115 0 7.5 7.5 0 01-15 0z" />
+                    <path d="M11 9a1 1 0 00-1 1v5a1 1 0 002 0v-5a1 1 0 00-1-1z" />
+                    <path d="M9 10a1 1 0 00-1 1v5a1 1 0 002 0v-5a1 1 0 00-1-1z" />
+                  </svg>
+                  Suggest
+                </button>
+                <button
+                  type="button"
+                  onClick={clearMessages}
+                  className="flex items-center bg-gray-200 text-black px-4 py-2 border border-transparent rounded-lg shadow-lg hover:bg-red-600 transition duration-200 ease-in-out"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-5 w-5 mr-2"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
                   >
-                    Clear
-                  </button>
-                </div>
+                    <path
+                      fillRule="evenodd"
+                      d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H4zm0 2h12v8H4V6z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                  Clear
+                </button>
               </div>
-            </form>
-          </div>
+            </div>
+          </form>
         </div>
+      </div>
     </div>
   );
 }
 
-export default Chatbot;
\ No newline at end of file
+export default Chatbot;
diff --git a/frontend/src/components/Hero.jsx b/frontend/src/components/Hero.jsx
index 831b134..c5e8fde 100644
--- a/frontend/src/components/Hero.jsx
+++ b/frontend/src/components/Hero.jsx
@@ -2,22 +2,28 @@ import React from "react";
 import { Link } from "react-router-dom";
 
 const Hero = () => {
-    return (
-        <div className="w-screen h-screen bg-primary flex flex-col justify-center items-center text-center px-4">
-            <h1 className="font-text text-4xl font-bold text-white absolute top-4 left-8">nova</h1>
-            <div className="max-w-4xl">
-                <h1 className="text-white text-4xl md:text-6xl font-bold mb-6">
-                    Unlock the Web's Hidden Gems
-                </h1>
-                <p className="text-white text-lg md:text-xl mb-8">
-                    Our AI-powered recommendation system helps you discover the best websites tailored to your specific tasks and interests.
-                </p>
-                <Link to="/chatbot" className="bg-white text-primary font-semibold py-3 px-6 rounded-full hover:bg-gray-300 transition">
-                    Get Started
-                </Link>
-            </div>
-        </div>
-    );
+  return (
+    <div className="w-screen h-screen bg-primary flex flex-col justify-center items-center text-center px-4">
+      <h1 className="font-text text-4xl font-bold text-white absolute top-4 left-8">
+        nova
+      </h1>
+      <div className="max-w-4xl">
+        <h1 className="text-white text-4xl md:text-6xl font-bold mb-6">
+          Ask. Discover. Master.
+        </h1>
+        <p className="text-white text-lg md:text-xl mb-8">
+          Our AI-powered recommendation system helps you discover the best
+          websites tailored to your specific tasks and interests.
+        </p>
+        <Link
+          to="/chatbot"
+          className="bg-white text-primary font-semibold py-3 px-6 rounded-xl hover:bg-gray-300 transition"
+        >
+          Get Started
+        </Link>
+      </div>
+    </div>
+  );
 };
 
 export default Hero;
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 89f91e5..e51b9ef 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
 
-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById("root")).render(
   <StrictMode>
     <App />
   </StrictMode>,
-)
+);
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 944a3b0..fbc20be 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,21 +1,18 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,jsx,ts,tsx}",
-  ],
+  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
     extend: {
-      colors :{
-        primary : '#0C0C0C',
-        secondary:'#F5F5F5',
-        1:'#FEFBF6',
+      colors: {
+        primary: "#0C0C0C",
+        secondary: "#F5F5F5",
+        1: "#FEFBF6",
       },
       fontFamily: {
-        hero: ['Matemasie', 'sans-serif'],
-        text:['Libre Baskerville', 'serif'],
+        hero: ["Matemasie", "sans-serif"],
+        text: ["Libre Baskerville", "serif"],
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 5a33944..9cc50ea 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+});