this are my changes to get a more good looking UI for this automation…

frontend/src/App.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/src/App.js

@@ -31,7 +31,6 @@ function App() {
       const response = await axios.get(
         `${URL}/results?search_text=${searchText}`
       );
-
       const data = response.data;
       setPriceHistory(data);
       setShowPriceHistory(true);
@@ -67,16 +66,21 @@ function App() {
   };
 
   return (
-    <div className="main">
-      <h1>Product Search Tool</h1>
-      <form onSubmit={handleNewSearchTextSubmit}>
-        <label>Search for a new item:</label>
-        <input
-          type="text"
-          value={newSearchText}
-          onChange={handleNewSearchTextChange}
-        />
-        <button type="submit">Start Scraper</button>
+    <div className="main" style={styles.mainContainer}>
+      <h1 style={styles.title}>Product Search Tool</h1>
+      <form onSubmit={handleNewSearchTextSubmit} style={styles.form}>
+        <label style={styles.label}>Search for a new item:</label>
+        <div style={styles.flexContainer}>
+          <input
+            type="text"
+            value={newSearchText}
+            onChange={handleNewSearchTextChange}
+            style={styles.input}
+          />
+          <button type="submit" style={styles.button}>
+            Start Scraper
+          </button>
+        </div>
       </form>
       <SearchTextList
         searchTexts={searchTexts}
@@ -93,4 +97,61 @@ function App() {
   );
 }
 
+const styles = {
+  mainContainer: {
+    fontFamily: "'Arial', sans-serif",
+    margin: "20px",
+    padding: "20px",
+    backgroundColor: "#f9f9f9",
+    borderRadius: "10px",
+    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+  },
+  title: {
+    fontSize: "2rem",
+    background: "linear-gradient(90deg, rgba(255,0,150,1) 0%, rgba(0,204,255,1) 100%)",
+    color: "transparent",
+    backgroundClip: "text",
+    WebkitBackgroundClip: "text",
+    marginBottom: "20px",
+    textAlign: "center",
+  },
+  form: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  flexContainer: {
+    display: "flex",
+    justifyContent: "flex-start",
+    gap: "10px",
+  },
+  input: {
+    padding: "10px",
+    width: "250px",
+    height: "20px", // Ensures the input has a height of 40px
+    marginBottom: "15px",
+    border: "1px solid #ccc",
+    borderRadius: "5px",
+    outline: "none",
+    fontSize: "1rem",
+    transition: "border-color 0.3s ease",
+  },
+  button: {
+    padding: "10px 16px", // Makes button height the same as input
+    height: "40px", // Ensures the button has a height of 40px
+    backgroundColor: "#007bff",
+    color: "#fff",
+    border: "none",
+    borderRadius: "5px",
+    cursor: "pointer",
+    transition: "background-color 0.3s ease, transform 0.2s ease",
+    fontSize: "1rem",
+  },
+  label: {
+    marginBottom: "10px",
+    fontSize: "1rem",
+    color: "#555",
+  },
+};
+
 export default App;

frontend/src/components/Modal.jsx

@@ -1,24 +1,86 @@
-import React from 'react';
-import Modal from 'react-modal';
+import React, { useState } from "react";
+import ModalComponent from './Modal';
+import ProductDetailsPage from "./ProductDetailsPage";
 
-const customModalStyles = {
-  content: {
-    width: '90%', // Adjust the width as needed
-    margin: 'auto',
-  },
-};
+function PriceHistoryTable({ priceHistory, onClose }) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [currentProduct, setCurrentProduct] = useState({});
+
+  const openModal = (product) => {
+    setCurrentProduct(product);
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const getPriceData = (product) => {
+    return product.priceHistory[0];
+  };
+
+  const getPriceChange = (product) => {
+    if (product.priceHistory.length < 2) return 0;
+    const currentPrice = product.priceHistory[0].price;
+    const lastPrice = product.priceHistory[1].price;
+    const change = 100 - (currentPrice / lastPrice) * 100;
+    return Math.round(change * 100) / 100;
+  };
 
-const ModalComponent = ({ isOpen, closeModal, content }) => {
   return (
-    <Modal
-      isOpen={isOpen}
-      onRequestClose={closeModal}
-      contentLabel="Modal"
-      style={ customModalStyles}
-    >
-      {content}
-    </Modal>
+    <div>
+      <h2 className="text-xl font-semibold mb-4">Price History</h2>
+      <table className="w-full border-collapse mt-5">
+        <thead>
+          <tr>
+            <th className="bg-gray-100 p-3 text-left font-semibold border-b-2 border-gray-300">Updated At</th>
+            <th className="bg-gray-100 p-3 text-left font-semibold border-b-2 border-gray-300">Name</th>
+            <th className="bg-gray-100 p-3 text-left font-semibold border-b-2 border-gray-300">Price</th>
+            <th className="bg-gray-100 p-3 text-left font-semibold border-b-2 border-gray-300">Price Change</th>
+          </tr>
+        </thead>
+        <tbody>
+          {priceHistory.map((product) => {
+            const priceData = getPriceData(product);
+            const change = getPriceChange(product);
+
+            return (
+              <tr
+                key={product.url}
+                className="transition-all duration-300 hover:bg-gray-100"
+              >
+                <td className="p-3 text-left border-b border-gray-300">{priceData.date}</td>
+                <td className="p-3 text-left border-b border-gray-300">
+                  <a 
+                    onClick={() => openModal(product)} 
+                    className="text-blue-500 cursor-pointer hover:text-blue-700"
+                  >
+                    {product.name}
+                  </a>
+                </td>
+                <td className="p-3 text-left border-b border-gray-300">${priceData.price}</td>
+                <td className={`p-3 text-left border-b border-gray-300 ${change >= 0 ? 'text-red-600 font-bold' : 'text-green-600 font-bold'}`}>
+                  {change >= 0 && "+"}
+                  {change}%
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      <button
+        onClick={onClose}
+        className="px-6 py-2 bg-blue-600 text-white rounded-md mt-6 cursor-pointer hover:bg-blue-700"
+      >
+        Close
+      </button>
+      <ModalComponent
+        isOpen={isModalOpen}
+        closeModal={closeModal}
+        content={<ProductDetailsPage product={currentProduct} />}
+      />
+    </div>
   );
-};
+}
 
-export default ModalComponent;
+export default PriceHistoryTable;

frontend/src/components/PriceHistoryTable.jsx

@@ -4,10 +4,10 @@ import ProductDetailsPage from "./ProductDetailsPage";
 
 function PriceHistoryTable({ priceHistory, onClose }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [currentProduct, setCurrentProduct] = useState({})
+  const [currentProduct, setCurrentProduct] = useState({});
 
   const openModal = (product) => {
-    setCurrentProduct(product)
+    setCurrentProduct(product);
     setIsModalOpen(true);
   };
 
@@ -27,16 +27,50 @@ function PriceHistoryTable({ priceHistory, onClose }) {
     return Math.round(change * 100) / 100;
   };
 
+  // Inline styling for table, rows, and cells
+  const tableStyles = {
+    width: '100%',
+    borderCollapse: 'collapse',
+    marginTop: '20px',
+  };
+
+  const thStyles = {
+    backgroundColor: '#f4f4f4',
+    padding: '10px 15px',
+    textAlign: 'left',
+    fontWeight: 'bold',
+    borderBottom: '2px solid #ddd',
+  };
+
+  const tdStyles = {
+    padding: '10px 15px',
+    textAlign: 'left',
+    borderBottom: '1px solid #ddd',
+  };
+
+  const rowStyles = {
+    transition: 'background-color 0.3s ease',
+  };
+
+  const hoverRowStyles = {
+    backgroundColor: '#f1f1f1',
+  };
+
+  const priceChangeStyles = (change) => ({
+    color: change > 0 ? 'red' : 'green',
+    fontWeight: 'bold',
+  });
+
   return (
     <div>
       <h2>Price History</h2>
-      <table>
+      <table style={tableStyles}>
         <thead>
-          <tr className="row">
-            <th>Updated At</th>
-            <th>Name</th>
-            <th>Price</th>
-            <th>Price Change</th>
+          <tr style={rowStyles}>
+            <th style={thStyles}>Updated At</th>
+            <th style={thStyles}>Name</th>
+            <th style={thStyles}>Price</th>
+            <th style={thStyles}>Price Change</th>
           </tr>
         </thead>
         <tbody>
@@ -45,20 +79,42 @@ function PriceHistoryTable({ priceHistory, onClose }) {
             const change = getPriceChange(product);
 
             return (
-              <tr key={product.url} className="row">
-                <td>{priceData.date}</td>
-                <td ><a onClick={() => openModal(product)}>{product.name}</a></td>
-                <td>${priceData.price}</td>
-                <td style={change > 0 ? { color: "red" } : { color: "green" }}>
-                  {change >= 0 && "+" }
+              <tr
+                key={product.url}
+                style={rowStyles}
+                onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#f1f1f1')}
+                onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = '')}
+              >
+                <td style={tdStyles}>{priceData.date}</td>
+                <td style={tdStyles}>
+                  <a onClick={() => openModal(product)} style={{ color: '#007BFF', cursor: 'pointer' }}>
+                    {product.name}
+                  </a>
+                </td>
+                <td style={tdStyles}>${priceData.price}</td>
+                <td style={{ ...tdStyles, ...priceChangeStyles(change) }}>
+                  {change >= 0 && "+"}
                   {change}%
                 </td>
               </tr>
             );
           })}
         </tbody>
       </table>
-      <button onClick={onClose}>Close</button>
+      <button
+        onClick={onClose}
+        style={{
+          padding: '10px 20px',
+          backgroundColor: '#007BFF',
+          color: '#fff',
+          border: 'none',
+          borderRadius: '4px',
+          cursor: 'pointer',
+          marginTop: '20px',
+        }}
+      >
+        Close
+      </button>
       <ModalComponent
         isOpen={isModalOpen}
         closeModal={closeModal}