diff --git a/ToolBox/User Manual for Toolbox Web Application.docx b/ToolBox/User Manual for Toolbox Web Application.docx
new file mode 100644
index 0000000..871ed1f
Binary files /dev/null and b/ToolBox/User Manual for Toolbox Web Application.docx differ
diff --git a/ToolBox/__pycache__/app.cpython-311.pyc b/ToolBox/__pycache__/app.cpython-311.pyc
new file mode 100644
index 0000000..dea7da0
Binary files /dev/null and b/ToolBox/__pycache__/app.cpython-311.pyc differ
diff --git a/ToolBox/__pycache__/test_app.cpython-311.pyc b/ToolBox/__pycache__/test_app.cpython-311.pyc
new file mode 100644
index 0000000..4ceeddd
Binary files /dev/null and b/ToolBox/__pycache__/test_app.cpython-311.pyc differ
diff --git a/ToolBox/__pycache__/test_integration.cpython-311.pyc b/ToolBox/__pycache__/test_integration.cpython-311.pyc
new file mode 100644
index 0000000..cf29810
Binary files /dev/null and b/ToolBox/__pycache__/test_integration.cpython-311.pyc differ
diff --git a/ToolBox/app.py b/ToolBox/app.py
new file mode 100644
index 0000000..3ac320c
--- /dev/null
+++ b/ToolBox/app.py
@@ -0,0 +1,407 @@
+from flask import Flask, render_template, request, redirect, url_for, flash, session
+from flask_mysqldb import MySQL
+from flask_bcrypt import Bcrypt
+
+app = Flask(__name__)
+app.secret_key = 'eH6BjKbFtJg4yP0Q1rWXu89Zc2aVs7Y3sLhNopkD'
+
+# MySQL configurations
+app.config['MYSQL_HOST'] = 'localhost'
+app.config['MYSQL_USER'] = 'root'
+app.config['MYSQL_PASSWORD'] = ''
+app.config['MYSQL_DB'] = 'toolbox'
+
+mysql = MySQL(app)
+bcrypt = Bcrypt(app)
+
+# Pagination configuration
+PER_PAGE = 12
+
+@app.route('/')
+def home():
+    cur = mysql.connection.cursor()
+
+
+    cur.execute("SELECT image_url FROM carousel")
+    carousel_images = cur.fetchall()
+
+
+    cur.execute("SELECT id, title, discount, price, image_url FROM tools")
+    tools = cur.fetchall()
+
+
+    cur.execute("SELECT image_url FROM offers")
+    offers = cur.fetchall()
+
+
+    cur.execute("SELECT id, name FROM categories")
+    categories = cur.fetchall()
+
+
+    cur.execute("SELECT id, name FROM brands")
+    brands = cur.fetchall()
+
+    cur.close()
+
+
+    user_name = session.get('user_name')
+
+
+    return render_template('Homepage.html', carousel_images=carousel_images, tools=tools, offers=offers,
+                           categories=categories, brands=brands, user_name=user_name)
+@app.route('/search')
+def search():
+    query = request.args.get('query')
+    cur = mysql.connection.cursor()
+    search_query = f"%{query}%"
+    cur.execute("SELECT id, title, discount, price, image_url FROM tools WHERE title LIKE %s", (search_query,))
+    tools = cur.fetchall()
+
+    # Fetch categories and brands for navbar
+    cur.execute("SELECT id, name FROM categories")
+    categories = cur.fetchall()
+    cur.execute("SELECT id, name FROM brands")
+    brands = cur.fetchall()
+
+    cur.close()
+    return render_template('list.html', tools=tools, categories=categories, brands=brands)
+
+@app.route('/category/<int:category_id>')
+def list_by_category(category_id):
+
+    page = int(request.args.get('page', 1))
+
+
+    start_index = (page - 1) * PER_PAGE
+
+    cur = mysql.connection.cursor()
+
+
+    cur.execute("SELECT id, title, discount, price, image_url FROM tools WHERE category_id = %s LIMIT %s, %s",
+                (category_id, start_index, PER_PAGE))
+    tools = cur.fetchall()
+
+
+    cur.execute("SELECT COUNT(*) FROM tools WHERE category_id = %s", (category_id,))
+    total_tools = cur.fetchone()[0]
+
+
+    total_pages = (total_tools + PER_PAGE - 1) // PER_PAGE
+
+
+    cur.execute("SELECT id, name FROM categories")
+    categories = cur.fetchall()
+    cur.execute("SELECT id, name FROM brands")
+    brands = cur.fetchall()
+
+    cur.close()
+
+    return render_template('list.html', tools=tools, categories=categories, brands=brands, page=page,
+                           total_pages=total_pages)
+
+@app.route('/brand/<int:brand_id>')
+def list_by_brand(brand_id):
+
+    page = int(request.args.get('page', 1))
+
+
+    start_index = (page - 1) * PER_PAGE
+
+    cur = mysql.connection.cursor()
+
+
+    cur.execute("SELECT id, title, discount, price, image_url FROM tools WHERE brand_id = %s LIMIT %s, %s",
+                (brand_id, start_index, PER_PAGE))
+    tools = cur.fetchall()
+
+
+    cur.execute("SELECT COUNT(*) FROM tools WHERE brand_id = %s", (brand_id,))
+    total_tools = cur.fetchone()[0]
+
+
+    total_pages = (total_tools + PER_PAGE - 1) // PER_PAGE
+
+
+    cur.execute("SELECT id, name FROM categories")
+    categories = cur.fetchall()
+    cur.execute("SELECT id, name FROM brands")
+    brands = cur.fetchall()
+
+    cur.close()
+
+    return render_template('list.html', tools=tools, categories=categories, brands=brands, page=page,
+                           total_pages=total_pages)
+
+@app.route('/item/<int:item_id>', methods=['GET', 'POST'])
+def item_details(item_id):
+    if request.method == 'POST':
+
+        review_name = request.form['review_name']
+        rating = request.form['rating']
+        review_text = request.form['review_text']
+
+        cur = mysql.connection.cursor()
+        cur.execute("INSERT INTO reviews (tool_id, r_name, rating, review_text) VALUES (%s, %s, %s, %s)",
+                    (item_id, review_name, rating, review_text))
+        mysql.connection.commit()
+        cur.close()
+
+        flash('Review added successfully!', 'success')
+        return redirect(url_for('item_details', item_id=item_id))
+
+
+    cur = mysql.connection.cursor()
+    cur.execute("SELECT id, title, discount, price, image_url, rating, description FROM tools WHERE id = %s",
+                (item_id,))
+    tool = cur.fetchone()
+
+
+    cur.execute("SELECT r_name, rating, review_text FROM reviews WHERE tool_id = %s", (item_id,))
+    reviews = cur.fetchall()
+
+
+    cur.execute("SELECT id, name FROM categories")
+    categories = cur.fetchall()
+    cur.execute("SELECT id, name FROM brands")
+    brands = cur.fetchall()
+
+    cur.close()
+
+    return render_template('item_details.html', tool=tool, reviews=reviews, categories=categories, brands=brands)
+
+@app.route('/services')
+def services():
+    cur = mysql.connection.cursor()
+    cur.execute("SELECT id,name, description, icon FROM services")
+    services = cur.fetchall()
+    cur.close()
+    return render_template('Services.html', services=services)
+
+@app.route('/service_booking/<service_id>', methods=['GET', 'POST'])
+def service_booking(service_id):
+    if request.method == 'POST':
+
+        name = request.form['name']
+        email = request.form['email']
+        phone_number = request.form['phone']
+        address = request.form['address']
+        problem_description = request.form['problem']
+        appointment_date = request.form['appointment-date']
+        appointment_time = request.form['appointment-time']
+
+        cur = mysql.connection.cursor()
+        cur.execute(
+            "INSERT INTO bookings (user_id, service_id, name, email_id, address, phone_number, problem_description, appointment_date, appointment_time) "
+            "VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s)",
+            (None, service_id, name, email, address, phone_number, problem_description, appointment_date,
+             appointment_time))
+        mysql.connection.commit()
+        cur.close()
+
+        flash('Appointment booked successfully!', 'success')
+        return redirect(url_for('services'))
+
+
+    cur = mysql.connection.cursor()
+    cur.execute("SELECT name FROM services WHERE id = %s", (service_id,))
+    service = cur.fetchone()
+    cur.close()
+    service_name = service[0]
+
+    return render_template('Service_booking.html', service=service_name)
+
+@app.route('/rent')
+def rent():
+    cur = mysql.connection.cursor()
+
+
+    category_id = request.args.get('category')
+    brand_id = request.args.get('brand')
+    rating = request.args.get('rating')
+    min_price = request.args.get('min_price')
+    max_price = request.args.get('max_price')
+    page = request.args.get('page', 1, type=int)
+    per_page = 12
+
+
+    query = "SELECT * FROM rental_tools WHERE 1=1"
+    params = []
+
+
+    if category_id:
+        query += " AND category_id = %s"
+        params.append(category_id)
+    if brand_id:
+        query += " AND brand_id = %s"
+        params.append(brand_id)
+    if rating:
+        query += " AND rating >= %s"
+        params.append(rating)
+    if min_price:
+        query += " AND price >= %s"
+        params.append(min_price)
+    if max_price:
+        query += " AND price <= %s"
+        params.append(max_price)
+
+
+    cur.execute(query, params)
+    total_items = len(cur.fetchall())
+
+
+    query += " LIMIT %s OFFSET %s"
+    params.extend([per_page, (page - 1) * per_page])
+
+    cur.execute(query, params)
+    rental_tools = cur.fetchall()
+
+
+    cur.execute("SELECT id, name FROM categories")
+    categories = cur.fetchall()
+
+    cur.execute("SELECT id, name FROM brands")
+    brands = cur.fetchall()
+
+    cur.close()
+
+
+    total_pages = (total_items + per_page - 1) // per_page
+
+    return render_template('rent.html', rental_tools=rental_tools, categories=categories, brands=brands, page=page,
+                           total_pages=total_pages)
+@app.route('/rent_details/<int:rtool_id>', methods=['GET', 'POST'])
+def rent_details(rtool_id):
+    if request.method == 'POST':
+
+        review_name = request.form['review_name']
+        rating = request.form['rating']
+        review_text = request.form['review_text']
+
+        cur = mysql.connection.cursor()
+        cur.execute("INSERT INTO r_reviews (rtool_id, r_name, rating, review_text) VALUES (%s, %s, %s, %s)",
+                    (rtool_id, review_name, rating, review_text))
+        mysql.connection.commit()
+        cur.close()
+
+        flash('Review added successfully!', 'success')
+        return redirect(url_for('rent_details', rtool_id=rtool_id))
+
+
+    cur = mysql.connection.cursor()
+    cur.execute("SELECT id, title, discount, price, image_url, rating, description FROM rental_tools WHERE id = %s",
+                (rtool_id,))
+    rental_tool = cur.fetchone()
+
+
+    cur.execute("SELECT r_name, rating, review_text FROM r_reviews WHERE rtool_id = %s", (rtool_id,))
+    reviews = cur.fetchall()
+
+
+    cur.execute("SELECT id, name FROM categories")
+    categories = cur.fetchall()
+    cur.execute("SELECT id, name FROM brands")
+    brands = cur.fetchall()
+
+    cur.close()
+
+    return render_template('rental_booking.html', rental_tool=rental_tool, reviews=reviews, categories=categories, brands=brands)
+@app.route('/book_rental/<int:rtool_id>', methods=['POST'])
+def book_rental(rtool_id):
+    name = request.form['name']
+    email = request.form['email']
+    phone_number = request.form['phone_number']
+    address = request.form['address']
+    rental_date = request.form['rental_date']
+    return_date = request.form['return_date']
+
+    cur = mysql.connection.cursor()
+    cur.execute(
+        "INSERT INTO rentals (tool_id, user_id, name, email, phone_number, address, rental_date, return_date) "
+        "VALUES (%s, NULL, %s, %s, %s, %s, %s, %s)",
+        (rtool_id, name, email, phone_number, address, rental_date, return_date)
+    )
+    mysql.connection.commit()
+    cur.close()
+
+    flash('Booking successful!', 'success')
+    return redirect(url_for('rent_details', rtool_id=rtool_id))
+
+@app.route('/cart')
+def cart():
+    user_id = session.get('user_id')
+    if not user_id:
+        flash('Please log in to view your cart.', 'danger')
+        return redirect(url_for('login'))
+
+    cur = mysql.connection.cursor()
+
+
+    cur.execute("SELECT * FROM rentals WHERE user_id = %s", (user_id,))
+    rentals = cur.fetchall()
+
+
+    cur.execute("SELECT * FROM bookings WHERE user_id = %s", (user_id,))
+    service_bookings = cur.fetchall()
+
+
+    cur.execute("SELECT * FROM purchases WHERE user_id = %s", (user_id,))
+    purchases = cur.fetchall()
+
+    cur.close()
+
+    return render_template('cart.html', rentals=rentals, service_bookings=service_bookings, purchases=purchases)
+
+
+@app.route('/register', methods=['GET', 'POST'])
+def register():
+    if request.method == 'POST':
+        name = request.form['name']
+        email_id = request.form['email']
+        dob = request.form['dob']
+        address = request.form['address']
+        phone_number = request.form['phno']
+        password = request.form['password']
+        confirm_password = request.form['confirmPassword']
+
+        if password != confirm_password:
+            flash('Passwords do not match', 'danger')
+            return redirect(url_for('register'))
+
+        hashed_password = bcrypt.generate_password_hash(password).decode('utf-8')
+        cur = mysql.connection.cursor()
+        cur.execute(
+            "INSERT INTO users (name, email_id, dob, address, phone_number, password) VALUES (%s, %s, %s, %s, %s, %s)",
+            (name, email_id, dob, address, phone_number, hashed_password))
+        mysql.connection.commit()
+        cur.close()
+        flash('You have successfully registered!', 'success')
+        return redirect(url_for('login'))
+
+    return render_template('Registration.html')
+@app.route('/login', methods=['GET', 'POST'])
+def login():
+    if request.method == 'POST':
+        email = request.form['email']
+        password = request.form['password']
+        cur = mysql.connection.cursor()
+        cur.execute("SELECT user_id, name, password FROM users WHERE email_id = %s", (email,))
+        user = cur.fetchone()
+        cur.close()
+        # Check if the user exists and if the password is correct
+        if user and bcrypt.check_password_hash(user[2], password):
+            session['user_id'] = user[0]
+            session['user_name'] = user[1]
+            flash('Login successful!', 'success')
+            return redirect(url_for('home'))
+        else:
+            flash('Invalid email or password', 'danger')
+
+    return render_template('Login.html')
+@app.route('/logout')
+def logout():
+    session.clear()
+    flash('You have been logged out.', 'success')
+    return redirect(url_for('home'))
+
+if __name__ == '__main__':
+    app.run()
diff --git a/ToolBox/app2.py b/ToolBox/app2.py
new file mode 100644
index 0000000..0708833
--- /dev/null
+++ b/ToolBox/app2.py
@@ -0,0 +1,97 @@
+from flask import Flask, render_template, request, redirect, url_for, flash
+from flask_mysqldb import MySQL
+from flask_bcrypt import Bcrypt
+
+app = Flask(__name__)
+app.secret_key = 'eH6BjKbFtJg4yP0Q1rWXu89Zc2aVs7Y3sLhNopkD'
+
+# MySQL configurations
+app.config['MYSQL_HOST'] = 'localhost'
+app.config['MYSQL_USER'] = 'root'
+app.config['MYSQL_PASSWORD'] = ''
+app.config['MYSQL_DB'] = 'toolbox'
+
+mysql = MySQL(app)
+bcrypt = Bcrypt(app)
+
+@app.route('/')
+def admin_dashboard():
+    cur = mysql.connection.cursor()
+    cur.execute("SELECT id, name FROM brands")
+    brands = cur.fetchall()
+    cur.execute("SELECT id, name FROM categories")
+    categories = cur.fetchall()
+    cur.execute("SELECT id, image_url FROM carousel")
+    carousel = cur.fetchall()
+    cur.execute("SELECT id, image_url FROM offers")
+    offers = cur.fetchall()
+
+    cur.close()
+    return render_template('admin.html', brands=brands, categories=categories,carousel=carousel, offers=offers)
+
+
+
+
+@app.route('/admin/carousel/add', methods=['GET', 'POST'])
+def add_carousel():
+    cur = mysql.connection.cursor()
+
+    if request.method == 'POST':
+        image_url = request.form['image_url']
+        category_id = request.form['category_id']
+        brand_id = request.form['brand_id']
+
+        cur.execute(
+            "INSERT INTO carousel (image_url, category_id, brand_id) VALUES (%s, %s, %s)",
+            (image_url, category_id, brand_id)
+        )
+        mysql.connection.commit()
+        cur.close()
+
+        flash('Carousel item added successfully!', 'success')
+        return redirect(url_for('admin_dashboard'))
+
+    # Fetch categories and brands for dropdowns
+    cur.execute("SELECT id, name FROM categories")
+    categories = cur.fetchall()
+    cur.execute("SELECT id, name FROM brands")
+    brands = cur.fetchall()
+    cur.close()
+
+    return render_template('Admin_add.html', categories=categories, brands=brands)
+
+@app.route('/admin/carousel/delete/<int:carousel_id>', methods=['POST'])
+def delete_carousel(carousel_id):
+    cur = mysql.connection.cursor()
+    cur.execute("DELETE FROM carousel WHERE id = %s", (carousel_id,))
+    mysql.connection.commit()
+    cur.close()
+
+    flash('Carousel item deleted successfully!', 'success')
+    return redirect(url_for('admin_dashboard'))
+
+
+@app.route('/admin/offer', methods=['POST'])
+def add_offer():
+    image_url = request.form['offer_image']
+    category_id = request.form['category_id']
+    brand_id = request.form['brand_id']
+    cur = mysql.connection.cursor()
+    cur.execute("INSERT INTO offers (image_url, category_id, brand_id) VALUES (%s, %s, %s)", (image_url, category_id, brand_id))
+    mysql.connection.commit()
+    cur.close()
+    flash('Offer added successfully!', 'success')
+    return redirect(url_for('admin_dashboard'))
+
+@app.route('/admin/offer/delete/<int:id>', methods=['POST'])
+def delete_offer(id):
+    cur = mysql.connection.cursor()
+    cur.execute("DELETE FROM offers WHERE id = %s", (id,))
+    mysql.connection.commit()
+    cur.close()
+    flash('Offer deleted successfully!', 'success')
+    return redirect(url_for('admin_dashboard'))
+
+
+if __name__ == '__main__':
+    app.run(debug=True)
diff --git a/ToolBox/databases/toolbox.sql b/ToolBox/databases/toolbox.sql
new file mode 100644
index 0000000..ea68501
--- /dev/null
+++ b/ToolBox/databases/toolbox.sql
@@ -0,0 +1,650 @@
+-- phpMyAdmin SQL Dump
+-- version 5.2.1
+-- https://www.phpmyadmin.net/
+--
+-- Host: 127.0.0.1
+-- Generation Time: Aug 01, 2024 at 02:05 PM
+-- Server version: 10.4.28-MariaDB
+-- PHP Version: 8.2.4
+
+SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
+START TRANSACTION;
+SET time_zone = "+00:00";
+
+
+/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
+/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
+/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
+/*!40101 SET NAMES utf8mb4 */;
+
+--
+-- Database: `toolbox`
+--
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `bookings`
+--
+
+CREATE TABLE `bookings` (
+  `id` int(11) NOT NULL,
+  `user_id` int(11) DEFAULT NULL,
+  `service_id` int(11) DEFAULT NULL,
+  `name` varchar(255) NOT NULL,
+  `email_id` varchar(255) NOT NULL,
+  `address` text DEFAULT NULL,
+  `phone_number` varchar(20) DEFAULT NULL,
+  `problem_description` text DEFAULT NULL,
+  `appointment_date` date DEFAULT NULL,
+  `appointment_time` time DEFAULT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `brands`
+--
+
+CREATE TABLE `brands` (
+  `id` int(11) NOT NULL,
+  `name` varchar(255) NOT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+--
+-- Dumping data for table `brands`
+--
+
+INSERT INTO `brands` (`id`, `name`) VALUES
+(1, 'Bosch'),
+(2, 'DeWalt'),
+(3, 'Stanley'),
+(4, 'Makita'),
+(5, 'Milwaukee');
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `carousel`
+--
+
+CREATE TABLE `carousel` (
+  `id` int(11) NOT NULL,
+  `image_url` varchar(255) DEFAULT NULL,
+  `category_id` int(11) DEFAULT NULL,
+  `brand_id` int(11) DEFAULT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+--
+-- Dumping data for table `carousel`
+--
+
+INSERT INTO `carousel` (`id`, `image_url`, `category_id`, `brand_id`) VALUES
+(1, 'https://i0.wp.com/toolguyd.com/blog/wp-content/uploads/2023/11/Home-Depot-Free-Dewalt-Cordless-Power-Tool-Offers-for-Holiday-2023.jpg?resize=600%2C437&ssl=1', 2, 2),
+(2, 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1fnMBNOGVrpIBRsumdFYZ-CNPXNH0gVzMFg&s', 2, NULL),
+(3, 'https://www.cbspowertools.com/Files/102358/Img/21/tooloffers-cat-cbs.jpg', 2, NULL);
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `categories`
+--
+
+CREATE TABLE `categories` (
+  `id` int(11) NOT NULL,
+  `name` varchar(255) NOT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+--
+-- Dumping data for table `categories`
+--
+
+INSERT INTO `categories` (`id`, `name`) VALUES
+(1, 'Hand Tools'),
+(2, 'Power Tools'),
+(3, 'Safety Equipment'),
+(4, 'Gardening Tools');
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `offers`
+--
+
+CREATE TABLE `offers` (
+  `id` int(11) NOT NULL,
+  `image_url` varchar(255) DEFAULT NULL,
+  `category_id` int(11) DEFAULT NULL,
+  `brand_id` int(11) DEFAULT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+--
+-- Dumping data for table `offers`
+--
+
+INSERT INTO `offers` (`id`, `image_url`, `category_id`, `brand_id`) VALUES
+(1, 'https://i.shgcdn.com/6ea1f1a7-d6da-4f5c-8ef2-6d814e5fbaeb/-/format/auto/-/preview/3000x3000/-/quality/lighter/', 2, 5),
+(2, 'https://images.prismic.io/tradetools/ZoHyQR5LeNNTwqTQ_makita600x400-8-.png?auto=format,compress', 1, 4);
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `professionals`
+--
+
+CREATE TABLE `professionals` (
+  `id` int(11) NOT NULL,
+  `name` varchar(255) NOT NULL,
+  `expertise` varchar(255) NOT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `purchases`
+--
+
+CREATE TABLE `purchases` (
+  `id` int(11) NOT NULL,
+  `user_id` int(11) NOT NULL,
+  `tool_id` int(11) NOT NULL,
+  `purchase_date` datetime DEFAULT current_timestamp()
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `rentals`
+--
+
+CREATE TABLE `rentals` (
+  `id` int(11) NOT NULL,
+  `tool_id` int(11) DEFAULT NULL,
+  `user_id` int(11) DEFAULT NULL,
+  `name` varchar(255) NOT NULL,
+  `email` varchar(255) NOT NULL,
+  `phone_number` varchar(255) NOT NULL,
+  `address` text NOT NULL,
+  `rental_date` date NOT NULL,
+  `return_date` date NOT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `rental_tools`
+--
+
+CREATE TABLE `rental_tools` (
+  `id` int(11) NOT NULL,
+  `title` varchar(255) NOT NULL,
+  `discount` decimal(5,2) DEFAULT NULL,
+  `price` decimal(10,2) NOT NULL,
+  `image_url` varchar(255) DEFAULT NULL,
+  `category_id` int(11) DEFAULT NULL,
+  `brand_id` int(11) DEFAULT NULL,
+  `rating` decimal(3,2) NOT NULL,
+  `description` text NOT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+--
+-- Dumping data for table `rental_tools`
+--
+
+INSERT INTO `rental_tools` (`id`, `title`, `discount`, `price`, `image_url`, `category_id`, `brand_id`, `rating`, `description`) VALUES
+(1, 'STANLEY Hammer, Curved, Fiberglass, 16-Oz', 3.00, 20.59, 'https://m.media-amazon.com/images/I/511F4+sVF6L._AC_UF894,1000_QL80_.jpg', 1, 3, 0.00, 'This STANLEY® Curved Claw Hammer has a lightweight design with a long handle for improved performance and less user fatigue. The handle has a fibreglass core that adds strength and helps to reduce vibrations. The polished smooth face has a tempered rim to reduce incidences of chipping'),
+(2, 'DEWALT Atomic 20V MAX* Cordless Drill, 1/2-Inch, Tool Only', 10.00, 129.99, 'https://m.media-amazon.com/images/I/51XzwAey9vL._AC_UF894,1000_QL80_.jpg', 2, 2, 0.00, ''),
+(3, 'Makita B-36170 Ratchet Screwdriver & Bit Set (47 piece)', 5.00, 20.99, 'https://cdn11.bigcommerce.com/s-320izp4p6a/images/stencil/1280x1280/products/65149/182911/B-36170-1__11184.1698966685.jpg?c=1', 1, 4, 0.00, ''),
+(4, 'Bosch Safety Goggles', 2.00, 9.99, 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-d66S59gRW1Zi92vQWsqWii-yhJOpBvcvRQ&s', 3, 1, 0.00, ''),
+(5, 'Milwaukee M18F2LM53 18V 530mm Self-Propelled Lawn Mower Bare Unit', 25.00, 699.99, 'https://www.imagedelivery.space/ffx/products/m/milwaukee_m18f2lm53v6.jpg?fm=webp', 4, 5, 0.00, '');
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `reviews`
+--
+
+CREATE TABLE `reviews` (
+  `id` int(11) NOT NULL,
+  `tool_id` int(11) DEFAULT NULL,
+  `r_name` varchar(50) NOT NULL,
+  `rating` decimal(3,2) NOT NULL DEFAULT 0.00,
+  `review_text` text DEFAULT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+--
+-- Dumping data for table `reviews`
+--
+
+INSERT INTO `reviews` (`id`, `tool_id`, `r_name`, `rating`, `review_text`) VALUES
+(5, 1, 'adi', 2.00, 'good');
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `r_reviews`
+--
+
+CREATE TABLE `r_reviews` (
+  `id` int(11) NOT NULL,
+  `rtool_id` int(11) DEFAULT NULL,
+  `r_name` varchar(255) DEFAULT NULL,
+  `review_text` varchar(255) DEFAULT NULL,
+  `rating` decimal(3,2) DEFAULT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+--
+-- Dumping data for table `r_reviews`
+--
+
+INSERT INTO `r_reviews` (`id`, `rtool_id`, `r_name`, `review_text`, `rating`) VALUES
+(1, 1, 'adi', 'Good', 4.00),
+(2, 1, 'rohan', 'great product', 5.00);
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `services`
+--
+
+CREATE TABLE `services` (
+  `id` int(11) NOT NULL,
+  `name` varchar(255) NOT NULL,
+  `description` text DEFAULT NULL,
+  `icon` varchar(255) DEFAULT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+--
+-- Dumping data for table `services`
+--
+
+INSERT INTO `services` (`id`, `name`, `description`, `icon`) VALUES
+(1, 'Cleaning Services', 'Professional cleaning services for your home or office.', 'bi bi-bucket-fill'),
+(2, 'Pest Control Services', 'Effective pest control solutions to keep your space pest-free.', 'bi bi-bug-fill'),
+(3, 'Plumbing Repair and Services', 'Comprehensive plumbing repair and maintenance services.', 'bi bi-tools'),
+(4, 'Electrical Repair and Services', 'Expert electrical repair and maintenance services.', 'bi bi-lightning-charge-fill'),
+(5, 'Carpentry Repair and Services', 'Quality carpentry repair and custom furniture services.', 'bi bi-hammer'),
+(6, 'Air Conditioner Repair and Services', 'Reliable air conditioner repair and maintenance services.', 'bi bi-snow'),
+(7, 'Refrigerator Repair and Services', 'Professional refrigerator repair and maintenance services.', 'bi bi-snow2'),
+(8, 'Washing Machine Repair and Services', 'Expert washing machine repair and maintenance services.', 'bi bi-bucket'),
+(9, 'Microwave Repair and Services', 'Reliable microwave repair and maintenance services.', 'bi bi-dash-square'),
+(10, 'Water Purifier Repair and Services', 'Quality water purifier repair and maintenance services.', 'bi bi-droplet'),
+(11, 'Geyser Repair and Services', 'Expert geyser repair and maintenance services.', 'bi bi-thermometer'),
+(12, 'Painting Services', 'Professional painting services for your home or office.', 'bi bi-brush'),
+(13, 'Disinfection Services', 'Thorough disinfection services to keep your space hygienic.', 'bi bi-shield-fill-check'),
+(14, 'Home Repairs', 'General home repair services to fix any issue around your house.', 'bi bi-tools');
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `service_requests`
+--
+
+CREATE TABLE `service_requests` (
+  `id` int(11) NOT NULL,
+  `professional_id` int(11) DEFAULT NULL,
+  `booking_id` int(11) DEFAULT NULL,
+  `details` text DEFAULT NULL,
+  `status` enum('Pending','Accepted','Rejected') DEFAULT 'Pending'
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `tools`
+--
+
+CREATE TABLE `tools` (
+  `id` int(11) NOT NULL,
+  `title` varchar(255) NOT NULL,
+  `discount` decimal(5,2) DEFAULT NULL,
+  `price` decimal(10,2) NOT NULL,
+  `image_url` varchar(255) DEFAULT NULL,
+  `category_id` int(11) DEFAULT NULL,
+  `brand_id` int(11) DEFAULT NULL,
+  `rating` decimal(3,2) DEFAULT 0.00,
+  `description` text DEFAULT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+--
+-- Dumping data for table `tools`
+--
+
+INSERT INTO `tools` (`id`, `title`, `discount`, `price`, `image_url`, `category_id`, `brand_id`, `rating`, `description`) VALUES
+(1, 'STANLEY Hammer, Curved, Fiberglass, 16-Oz', 3.00, 20.59, 'https://m.media-amazon.com/images/I/511F4+sVF6L._AC_UF894,1000_QL80_.jpg', 1, 3, 0.00, 'This STANLEY® Curved Claw Hammer has a lightweight design with a long handle for improved performance and less user fatigue. The handle has a fibreglass core that adds strength and helps to reduce vibrations. The polished smooth face has a tempered rim to reduce incidences of chipping'),
+(2, 'DEWALT Atomic 20V MAX* Cordless Drill, 1/2-Inch, Tool Only', 10.00, 129.99, 'https://m.media-amazon.com/images/I/51XzwAey9vL._AC_UF894,1000_QL80_.jpg', 2, 2, 0.00, NULL),
+(3, 'Makita B-36170 Ratchet Screwdriver & Bit Set (47 piece)', 5.00, 20.99, 'https://cdn11.bigcommerce.com/s-320izp4p6a/images/stencil/1280x1280/products/65149/182911/B-36170-1__11184.1698966685.jpg?c=1', 1, 4, 0.00, NULL),
+(4, 'Bosch Safety Goggles', 2.00, 9.99, 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-d66S59gRW1Zi92vQWsqWii-yhJOpBvcvRQ&s', 3, 1, 0.00, NULL),
+(5, ' Milwaukee M18F2LM53 18V 530mm Self-Propelled Lawn Mower Bare Unit ', 25.00, 699.99, 'https://www.imagedelivery.space/ffx/products/m/milwaukee_m18f2lm53v6.jpg?fm=webp', 4, 5, 0.00, NULL);
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `users`
+--
+
+CREATE TABLE `users` (
+  `user_id` int(11) NOT NULL,
+  `name` varchar(100) NOT NULL,
+  `email_id` varchar(100) NOT NULL,
+  `dob` date NOT NULL,
+  `address` varchar(255) NOT NULL,
+  `phone_number` varchar(15) NOT NULL,
+  `password` varchar(255) NOT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+--
+-- Dumping data for table `users`
+--
+
+INSERT INTO `users` (`user_id`, `name`, `email_id`, `dob`, `address`, `phone_number`, `password`) VALUES
+(4, 'Adithyan G', 'adithyan28g@gmail.com', '1999-01-27', 'BGA-15B-04, Bishop Gate, Tower St', '25448542', '$2b$12$JguTkeKOnFDtio.u.judkeqMClWJdtMjDqfdtpXoijvgFCs5ZPAz6'),
+(11, 'Test User', 'testuser@example.com', '1990-01-01', '123 Test St', '1234567890', '$2b$12$kDcdyiH6AkkRTiFMpIyQJOKE8wyOlGfvmydLb3ee7D36TmkcXL/Ae');
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `vendors`
+--
+
+CREATE TABLE `vendors` (
+  `id` int(11) NOT NULL,
+  `name` varchar(255) NOT NULL,
+  `description` text DEFAULT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+--
+-- Indexes for dumped tables
+--
+
+--
+-- Indexes for table `bookings`
+--
+ALTER TABLE `bookings`
+  ADD PRIMARY KEY (`id`),
+  ADD KEY `user_id` (`user_id`),
+  ADD KEY `service_id` (`service_id`);
+
+--
+-- Indexes for table `brands`
+--
+ALTER TABLE `brands`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- Indexes for table `carousel`
+--
+ALTER TABLE `carousel`
+  ADD PRIMARY KEY (`id`),
+  ADD KEY `category_id` (`category_id`),
+  ADD KEY `brand_id` (`brand_id`);
+
+--
+-- Indexes for table `categories`
+--
+ALTER TABLE `categories`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- Indexes for table `offers`
+--
+ALTER TABLE `offers`
+  ADD PRIMARY KEY (`id`),
+  ADD KEY `category_id` (`category_id`),
+  ADD KEY `brand_id` (`brand_id`);
+
+--
+-- Indexes for table `professionals`
+--
+ALTER TABLE `professionals`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- Indexes for table `purchases`
+--
+ALTER TABLE `purchases`
+  ADD PRIMARY KEY (`id`),
+  ADD KEY `user_id` (`user_id`),
+  ADD KEY `tool_id` (`tool_id`);
+
+--
+-- Indexes for table `rentals`
+--
+ALTER TABLE `rentals`
+  ADD PRIMARY KEY (`id`),
+  ADD KEY `tool_id` (`tool_id`),
+  ADD KEY `user_id` (`user_id`);
+
+--
+-- Indexes for table `rental_tools`
+--
+ALTER TABLE `rental_tools`
+  ADD PRIMARY KEY (`id`),
+  ADD KEY `category_id` (`category_id`),
+  ADD KEY `brand_id` (`brand_id`);
+
+--
+-- Indexes for table `reviews`
+--
+ALTER TABLE `reviews`
+  ADD PRIMARY KEY (`id`),
+  ADD KEY `tool_id` (`tool_id`);
+
+--
+-- Indexes for table `r_reviews`
+--
+ALTER TABLE `r_reviews`
+  ADD PRIMARY KEY (`id`),
+  ADD KEY `rtool_id` (`rtool_id`);
+
+--
+-- Indexes for table `services`
+--
+ALTER TABLE `services`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- Indexes for table `service_requests`
+--
+ALTER TABLE `service_requests`
+  ADD PRIMARY KEY (`id`),
+  ADD KEY `professional_id` (`professional_id`),
+  ADD KEY `booking_id` (`booking_id`);
+
+--
+-- Indexes for table `tools`
+--
+ALTER TABLE `tools`
+  ADD PRIMARY KEY (`id`),
+  ADD KEY `category_id` (`category_id`),
+  ADD KEY `brand_id` (`brand_id`);
+
+--
+-- Indexes for table `users`
+--
+ALTER TABLE `users`
+  ADD PRIMARY KEY (`user_id`),
+  ADD UNIQUE KEY `email_id` (`email_id`);
+
+--
+-- Indexes for table `vendors`
+--
+ALTER TABLE `vendors`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- AUTO_INCREMENT for dumped tables
+--
+
+--
+-- AUTO_INCREMENT for table `bookings`
+--
+ALTER TABLE `bookings`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
+
+--
+-- AUTO_INCREMENT for table `brands`
+--
+ALTER TABLE `brands`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
+
+--
+-- AUTO_INCREMENT for table `carousel`
+--
+ALTER TABLE `carousel`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=8;
+
+--
+-- AUTO_INCREMENT for table `categories`
+--
+ALTER TABLE `categories`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
+
+--
+-- AUTO_INCREMENT for table `offers`
+--
+ALTER TABLE `offers`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
+
+--
+-- AUTO_INCREMENT for table `professionals`
+--
+ALTER TABLE `professionals`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
+
+--
+-- AUTO_INCREMENT for table `purchases`
+--
+ALTER TABLE `purchases`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
+
+--
+-- AUTO_INCREMENT for table `rentals`
+--
+ALTER TABLE `rentals`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
+
+--
+-- AUTO_INCREMENT for table `rental_tools`
+--
+ALTER TABLE `rental_tools`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=8;
+
+--
+-- AUTO_INCREMENT for table `reviews`
+--
+ALTER TABLE `reviews`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
+
+--
+-- AUTO_INCREMENT for table `r_reviews`
+--
+ALTER TABLE `r_reviews`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
+
+--
+-- AUTO_INCREMENT for table `services`
+--
+ALTER TABLE `services`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=17;
+
+--
+-- AUTO_INCREMENT for table `service_requests`
+--
+ALTER TABLE `service_requests`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
+
+--
+-- AUTO_INCREMENT for table `tools`
+--
+ALTER TABLE `tools`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
+
+--
+-- AUTO_INCREMENT for table `users`
+--
+ALTER TABLE `users`
+  MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12;
+
+--
+-- AUTO_INCREMENT for table `vendors`
+--
+ALTER TABLE `vendors`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
+
+--
+-- Constraints for dumped tables
+--
+
+--
+-- Constraints for table `bookings`
+--
+ALTER TABLE `bookings`
+  ADD CONSTRAINT `bookings_ibfk_1` FOREIGN KEY (`user_id`) REFERENCES `users` (`user_id`),
+  ADD CONSTRAINT `bookings_ibfk_2` FOREIGN KEY (`service_id`) REFERENCES `services` (`id`);
+
+--
+-- Constraints for table `carousel`
+--
+ALTER TABLE `carousel`
+  ADD CONSTRAINT `carousel_ibfk_1` FOREIGN KEY (`category_id`) REFERENCES `categories` (`id`),
+  ADD CONSTRAINT `carousel_ibfk_2` FOREIGN KEY (`brand_id`) REFERENCES `brands` (`id`);
+
+--
+-- Constraints for table `offers`
+--
+ALTER TABLE `offers`
+  ADD CONSTRAINT `offers_ibfk_1` FOREIGN KEY (`category_id`) REFERENCES `categories` (`id`),
+  ADD CONSTRAINT `offers_ibfk_2` FOREIGN KEY (`brand_id`) REFERENCES `brands` (`id`);
+
+--
+-- Constraints for table `purchases`
+--
+ALTER TABLE `purchases`
+  ADD CONSTRAINT `purchases_ibfk_1` FOREIGN KEY (`user_id`) REFERENCES `users` (`user_id`),
+  ADD CONSTRAINT `purchases_ibfk_2` FOREIGN KEY (`tool_id`) REFERENCES `tools` (`id`);
+
+--
+-- Constraints for table `rentals`
+--
+ALTER TABLE `rentals`
+  ADD CONSTRAINT `rentals_ibfk_1` FOREIGN KEY (`tool_id`) REFERENCES `tools` (`id`),
+  ADD CONSTRAINT `rentals_ibfk_2` FOREIGN KEY (`user_id`) REFERENCES `users` (`user_id`);
+
+--
+-- Constraints for table `rental_tools`
+--
+ALTER TABLE `rental_tools`
+  ADD CONSTRAINT `rental_tools_ibfk_1` FOREIGN KEY (`category_id`) REFERENCES `categories` (`id`),
+  ADD CONSTRAINT `rental_tools_ibfk_2` FOREIGN KEY (`brand_id`) REFERENCES `brands` (`id`);
+
+--
+-- Constraints for table `reviews`
+--
+ALTER TABLE `reviews`
+  ADD CONSTRAINT `reviews_ibfk_1` FOREIGN KEY (`tool_id`) REFERENCES `tools` (`id`);
+
+--
+-- Constraints for table `r_reviews`
+--
+ALTER TABLE `r_reviews`
+  ADD CONSTRAINT `r_reviews_ibfk_1` FOREIGN KEY (`rtool_id`) REFERENCES `rental_tools` (`id`);
+
+--
+-- Constraints for table `service_requests`
+--
+ALTER TABLE `service_requests`
+  ADD CONSTRAINT `service_requests_ibfk_1` FOREIGN KEY (`professional_id`) REFERENCES `professionals` (`id`),
+  ADD CONSTRAINT `service_requests_ibfk_2` FOREIGN KEY (`booking_id`) REFERENCES `bookings` (`id`);
+
+--
+-- Constraints for table `tools`
+--
+ALTER TABLE `tools`
+  ADD CONSTRAINT `tools_ibfk_1` FOREIGN KEY (`category_id`) REFERENCES `categories` (`id`),
+  ADD CONSTRAINT `tools_ibfk_2` FOREIGN KEY (`brand_id`) REFERENCES `brands` (`id`);
+COMMIT;
+
+/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
+/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
+/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
diff --git a/ToolBox/static/Homepage.css b/ToolBox/static/Homepage.css
new file mode 100644
index 0000000..710d9df
--- /dev/null
+++ b/ToolBox/static/Homepage.css
@@ -0,0 +1,158 @@
+body {
+    background-color: #282C35;
+    color: white;
+}
+
+.navbar-brand {
+    font-weight: bold;
+    color: white !important;
+}
+
+.nav-item {
+    margin-left: 40px;
+}
+
+.navbar-nav .nav-item .nav-link {
+    padding: 8px 10px;
+    color: white;
+    transition: color 0.3s;
+}
+
+.navbar-nav .nav-item .nav-link:hover {
+    color: #28a745;
+}
+
+.navbar-nav .nav-item .nav-link i {
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+    transition: color 0.3s;
+}
+
+.navbar-nav .nav-item .nav-link:hover i {
+    color: #28a745;
+}
+
+.navbar-nav .nav-item .dropdown-menu {
+    margin: 0;
+}
+
+.navbar .form-control {
+    width: 300px;
+
+}
+
+.navbar .form-control + .btn {
+    margin-left: 5px;
+}
+
+.navbar {
+    background-color: black;
+    height: 80px;
+}
+
+.navbar .nav-link i {
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+}
+
+.nav-item.dropdown:hover .dropdown-menu {
+    display: block;
+}
+
+.dropdown-menu {
+    margin-top: 0;
+}
+.navbar-nav .dropdown-menu .dropdown-item {
+    color: white;
+    padding: 10px 20px;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.navbar-nav .dropdown-menu .dropdown-item:hover {
+    background-color: #28a745;
+    color: white;
+    text-decoration: none;
+}
+
+.navbar .dropdown-menu {
+    background-color: #282C35;
+    border: 1px solid #444;
+}
+.nav-link.logged-in {
+            color: green !important;
+            }
+
+.carousel {
+    margin-top: 15px;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.carousel-item {
+    height: 400px;
+}
+
+.carousel-control-prev,
+.carousel-control-next {
+    top: 50%;
+    transform: translateY(-50%);
+    filter: invert(100%);
+}
+
+.card-img-top {
+    height: 250px;
+}
+
+.card-img {
+    height: 450px;
+    width: 700px;
+}
+
+.card {
+    margin: 20px;
+    background-color: #282C35;
+    height: 550px;
+}
+
+.card-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+}
+
+.card-title {
+    color: white;
+    margin-bottom: auto;
+}
+.discount {
+    display: inline-block;
+    margin-bottom: -5px;
+    padding: 5px 10px;
+    max-width: 140px;
+    background-color: #007bff;
+    color: white;
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 5px;
+    text-transform: uppercase;
+}
+
+.price {
+    margin-top: 5px;
+}
+
+
+.breadcrumb{
+ background-color:transparent;
+ }
+
+ table {
+            color: white;
+        }
+        th, td {
+            border: 1px solid #ffffff;
+        }
+
diff --git a/ToolBox/static/Item_Details.css b/ToolBox/static/Item_Details.css
new file mode 100644
index 0000000..999e624
--- /dev/null
+++ b/ToolBox/static/Item_Details.css
@@ -0,0 +1,145 @@
+body {
+    background-color: #282C35;
+    color: white;
+}
+
+.navbar-brand {
+    font-weight: bold;
+    color: white !important;
+}
+
+.nav-item {
+    margin-left: 40px;
+}
+
+.navbar-nav .nav-item .nav-link {
+    padding: 8px 10px;
+    color: white;
+    transition: color 0.3s;
+}
+
+.navbar-nav .nav-item .nav-link:hover {
+    color: #28a745;
+}
+
+.navbar-nav .nav-item .nav-link i {
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+    transition: color 0.3s;
+}
+
+.navbar-nav .nav-item .nav-link:hover i {
+    color: #28a745;
+}
+
+.navbar-nav .nav-item .dropdown-menu {
+    margin: 0;
+}
+
+.navbar .form-control {
+    width: 300px;
+
+}
+
+.navbar .form-control + .btn {
+    margin-left: 5px;
+}
+
+.navbar {
+    background-color: black;
+    height: 80px;
+}
+
+.navbar .nav-link i {
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+}
+
+.nav-item.dropdown:hover .dropdown-menu {
+    display: block;
+}
+
+.dropdown-menu {
+    margin-top: 0;
+}
+.navbar-nav .dropdown-menu .dropdown-item {
+    color: white;
+    padding: 10px 20px;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.navbar-nav .dropdown-menu .dropdown-item:hover {
+    background-color: #28a745;
+    color: white;
+    text-decoration: none;
+}
+
+.navbar .dropdown-menu {
+    background-color: #282C35;
+    border: 1px solid #444;
+}
+
+
+.card-img-top {
+    height: 250px;
+}
+
+.card-img {
+    height: 450px;
+    width: 700px;
+}
+
+.card {
+    margin: 20px;
+    background-color: #282C35;
+    height: 550px;
+}
+
+.card-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+}
+
+.card-title {
+    color: white;
+    margin-bottom: auto;
+}
+.discount {
+    display: inline-block;
+    margin-bottom: -5px;
+    padding: 5px 10px;
+    max-width: 140px;
+    background-color: #007bff;
+    color: white;
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 5px;
+    text-transform: uppercase;
+}
+
+.price {
+    margin-top: 5px;
+}
+
+ .stars {
+            display: inline-block;
+            font-size: 24px;
+            cursor: pointer;
+        }
+
+        .stars .star {
+            color: #ccc;
+        }
+
+        .stars .star.rated {
+            color: #ffcc00;
+        }
+ .breadcrumb{
+ background-color:transparent;
+ }
+
+
diff --git a/ToolBox/static/List.css b/ToolBox/static/List.css
new file mode 100644
index 0000000..7036c8b
--- /dev/null
+++ b/ToolBox/static/List.css
@@ -0,0 +1,268 @@
+body {
+    background-color: #282C35;
+    color: white;
+}
+
+.navbar-brand {
+    font-weight: bold;
+    color: white !important;
+}
+
+.nav-item {
+    margin-left: 40px;
+}
+
+.navbar-nav .nav-item .nav-link {
+    padding: 8px 10px;
+    color: white;
+    transition: color 0.3s;
+}
+
+.navbar-nav .nav-item .nav-link:hover {
+    color: #28a745;
+}
+
+.navbar-nav .nav-item .nav-link i {
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+    transition: color 0.3s;
+}
+
+.navbar-nav .nav-item .nav-link:hover i {
+    color: #28a745;
+}
+
+.navbar-nav .nav-item .dropdown-menu {
+    margin: 0;
+}
+
+.navbar .form-control {
+    width: 300px;
+
+}
+
+.navbar .form-control + .btn {
+    margin-left: 5px;
+}
+
+.navbar {
+    background-color: black;
+    height: 80px;
+}
+
+.navbar .nav-link i {
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+}
+
+.nav-item.dropdown:hover .dropdown-menu {
+    display: block;
+}
+
+.dropdown-menu {
+    margin-top: 0;
+}
+.navbar-nav .dropdown-menu .dropdown-item {
+    color: white;
+    padding: 10px 20px;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.navbar-nav .dropdown-menu .dropdown-item:hover {
+    background-color: #28a745;
+    color: white;
+    text-decoration: none;
+}
+
+.navbar .dropdown-menu {
+    background-color: #282C35;
+    border: 1px solid #444;
+}
+
+
+.card-img-top {
+    height: 250px;
+}
+
+.card-img {
+    height: 450px;
+    width: 700px;
+}
+
+.card {
+
+    margin: 20px;
+    background-color: #282C35;
+    height: 550px;
+}
+
+.card-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+}
+
+.card-title {
+    color: white;
+    margin-bottom: auto;
+}
+.discount {
+    display: inline-block;
+    margin-bottom: -5px;
+    padding: 5px 10px;
+    max-width: 140px;
+    background-color: #007bff;
+    color: white;
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 5px;
+    text-transform: uppercase;
+}
+
+.price {
+    margin-top: 5px;
+}
+
+
+
+
+body {
+    background-color: #282C35;
+    color: white;
+}
+
+.navbar-brand {
+    font-weight: bold;
+    color: white !important;
+}
+
+.nav-item {
+    margin-left: 40px;
+}
+
+.navbar-nav .nav-item .nav-link {
+    padding: 8px 10px;
+    color: white;
+    transition: color 0.3s;
+}
+
+.navbar-nav .nav-item .nav-link:hover {
+    color: #28a745;
+}
+
+.navbar-nav .nav-item .nav-link i {
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+    transition: color 0.3s;
+}
+
+.navbar-nav .nav-item .nav-link:hover i {
+    color: #28a745;
+}
+
+.navbar-nav .nav-item .dropdown-menu {
+    margin: 0;
+}
+
+.navbar .form-control {
+    width: 300px;
+
+}
+
+.navbar .form-control + .btn {
+    margin-left: 5px;
+}
+
+.navbar {
+    background-color: black;
+    height: 80px;
+}
+
+.navbar .nav-link i {
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+}
+
+.nav-item.dropdown:hover .dropdown-menu {
+    display: block;
+}
+
+.dropdown-menu {
+    margin-top: 0;
+}
+.navbar-nav .dropdown-menu .dropdown-item {
+    color: white;
+    padding: 10px 20px;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.navbar-nav .dropdown-menu .dropdown-item:hover {
+    background-color: #28a745;
+    color: white;
+    text-decoration: none;
+}
+
+.navbar .dropdown-menu {
+    background-color: #282C35;
+    border: 1px solid #444;
+}
+
+
+.card-img-top {
+    height: 250px;
+}
+
+.card-img {
+    height: 450px;
+    width: 700px;
+}
+
+.card {
+
+    margin: 20px;
+    background-color: #282C35;
+    height: 550px;
+}
+
+.card-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+}
+
+.card-title {
+    color: white;
+    margin-bottom: auto;
+}
+.discount {
+    display: inline-block;
+    margin-bottom: -5px;
+    padding: 5px 10px;
+    max-width: 140px;
+    background-color: #007bff;
+    color: white;
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 5px;
+    text-transform: uppercase;
+}
+
+.price {
+    margin-top: 5px;
+}
+
+.col
+{
+margin-right:60px;
+}
+
+
+.breadcrumb{
+background-color: transparent;
+}
\ No newline at end of file
diff --git a/ToolBox/static/Login.css b/ToolBox/static/Login.css
new file mode 100644
index 0000000..98a89a8
--- /dev/null
+++ b/ToolBox/static/Login.css
@@ -0,0 +1,182 @@
+body {
+  margin: 0;
+  padding: 0;
+  background-color:#282C35;
+
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  color: white;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+body {
+    background-color: #282C35;
+    color: white;
+}
+
+
+
+.form-inline {
+    display: flex;
+    align-items: center;
+}
+
+.form-control {
+ 
+    background-color: transparent;
+    color: white;
+    border-radius: 20px;
+    border: 1px solid white;
+    padding: 5px 10px;
+   margin-top:19px;
+}
+
+.form-control::placeholder {
+    color: white;
+}
+
+.form-control:focus {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: white;
+    outline: none;
+    border-color: rgba(255, 255, 255, 0.5);
+}
+
+
+.input-group-append {
+    margin-left: -40px;
+}
+
+.btn {
+    color: white;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+}
+
+.btn:hover {
+    opacity: 0.8;
+}
+.transparent-box {
+  background-color: rgba(0, 0, 0, 0.8);
+  padding: 30px;
+  border-radius: 10px;
+  max-width: 400px;
+  width: 100%;
+}
+
+
+.form-control {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: white;
+  border: none;
+  border-radius: 5px;
+  padding: 10px;
+  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
+  margin-bottom: 20px;
+}
+
+
+.form-control:focus {
+  background-color: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+
+.form-control::placeholder {
+  color: white;
+}
+
+
+.form-control:focus,
+.form-control:not(:placeholder-shown) {
+  color: white;
+}
+
+
+.btn-primary {
+  background-color: black;
+  border-color: black;
+}
+
+
+.btn-primary:hover {
+  background-color: #282C35;
+  border-color: #282C35;
+}
+
+
+.btn-below-message {
+  background-color: black;
+  border-color: black;
+    margin-top: auto;
+}
+
+.btn-below-message:hover {
+  background-color: #282C35;
+  border-color: #282C35;
+
+}
+
+
+.btn-block {
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}
+.header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 20px;
+  color: #282C35;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.logo {
+  margin: 0;
+  padding: 0;
+}
+
+.blue {
+  color: blue;
+}
+.gradient-text {
+  background:linear-gradient(147deg, #000000 0%, #04619f 74%);
+
+  
+
+
+
+}
+
+
+.navbar-brand {
+  font-weight: bold;
+  color: white;
+}
+
+
+.navbar {
+  background-color:Black; 
+  height: 80px;
+}
+
+.navbar .nav-link i {
+  font-size: 20px; 
+  font-weight: bold; 
+}
+.nav-item.dropdown:hover .dropdown-menu {
+  display: block;
+}
+.dropdown-menu {
+  margin-top: 0; 
+}
\ No newline at end of file
diff --git a/ToolBox/static/Registration.css b/ToolBox/static/Registration.css
new file mode 100644
index 0000000..eabe343
--- /dev/null
+++ b/ToolBox/static/Registration.css
@@ -0,0 +1,120 @@
+body {
+  margin: 0; /* Remove default body margin */
+  padding: 0; /* Remove default body padding */
+  background-color: #282C35; /* Fallback color in case the background image doesn't load */
+ /* Replace 'background-image.jpg' with the path to your desired image */
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  color: white; /* Text color for better contrast with the background image */
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 105vh;
+  
+}
+.transparent-box {
+  background-color: rgba(0, 0, 0, 0.8); /* Darker transparent box */
+  padding: 30px;
+  border-radius: 10px;
+  width: 500px; 
+}
+
+
+.input-group-append {
+    margin-left: -40px;
+}
+
+.btn {
+    color: white;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+}
+
+.btn:hover {
+    opacity: 0.8;
+}
+
+/* Adjust the textbox styles */
+.form-control {
+  background-color: rgba(255, 255, 255, 0.1); /* Lighter black for the text box */
+  color: white; /* Text color */
+  border: none; /* Remove border */
+  border-radius: 5px; /* Add border-radius */
+  padding: 10px; /* Add padding */
+  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Add shadow */
+}
+
+/* Change text box color when clicked */
+.form-control:focus {
+  background-color: rgba(255, 255, 255, 0.2); /* Lighter black when clicked */
+  border-color: rgba(255, 255, 255, 0.2); /* Matching border color */
+}
+
+/* Placeholder color */
+.form-control::placeholder {
+  color: white; /* White placeholder color */
+}
+
+/* Change the color of text entered by the user */
+.form-control:focus,
+.form-control:not(:placeholder-shown) {
+  color: white; /* White text color */
+}
+
+
+
+/* Change the button color to black */
+.btn-primary {
+  background-color: black;
+  border-color: black;
+}
+
+/* Change button hover color */
+.btn-primary:hover {
+  background-color: #282C35;
+  border-color: #282C35; /* Matching border color */
+}
+
+
+.form-check-input:checked {
+  background-color: black;
+}
+.header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 20px;
+  color: #282C35;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.navbar-brand {
+  font-weight: bold;
+  color: white;
+}
+
+
+.navbar {
+  background-color:Black; 
+  height: 80px;
+}
+
+.navbar .nav-link i {
+  font-size: 20px; 
+  font-weight: bold; 
+}
+.nav-item.dropdown:hover .dropdown-menu {
+  display: block;
+}
+.dropdown-menu {
+  margin-top: 0; 
+}
+
+
+
diff --git a/ToolBox/static/Service_booking.css b/ToolBox/static/Service_booking.css
new file mode 100644
index 0000000..47e114b
--- /dev/null
+++ b/ToolBox/static/Service_booking.css
@@ -0,0 +1,112 @@
+body {
+    background-color: #282C35;
+    color: white;
+}
+
+.navbar-brand {
+    font-weight: bold;
+    color: white !important;
+}
+
+.nav-item {
+    margin-left: 40px;
+}
+
+.navbar-nav .nav-item .nav-link {
+    padding: 8px 10px;
+    color: white;
+    transition: color 0.3s;
+}
+
+.navbar-nav .nav-item .nav-link:hover {
+    color: #28a745;
+}
+
+.navbar-nav .nav-item .nav-link i {
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+    transition: color 0.3s;
+}
+
+.navbar-nav .nav-item .nav-link:hover i {
+    color: #28a745;
+}
+
+.navbar-nav .nav-item .dropdown-menu {
+    margin: 0;
+}
+
+.navbar .form-control {
+    width: 300px;
+
+}
+
+.navbar .form-control + .btn {
+    margin-left: 5px;
+}
+
+.navbar {
+    background-color: black;
+    height: 80px;
+}
+
+.navbar .nav-link i {
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+}
+
+.nav-item.dropdown:hover .dropdown-menu {
+    display: block;
+}
+
+.dropdown-menu {
+    margin-top: 0;
+}
+.navbar-nav .dropdown-menu .dropdown-item {
+    color: white;
+    padding: 10px 20px;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.navbar-nav .dropdown-menu .dropdown-item:hover {
+    background-color: #28a745;
+    color: white;
+    text-decoration: none;
+}
+
+.navbar .dropdown-menu {
+    background-color: #282C35;
+    border: 1px solid #444;
+}
+
+
+        .book-body {
+            max-width: 500px;
+            margin-top: 30px;
+            margin-bottom: 30px;
+            background-color:transparent;
+            padding: 30px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+        .form-group{
+            padding-left: 30px;
+            margin: 20px;
+        }
+        .form-control{
+            width: 350px;
+        }
+        .form-group label {
+            font-weight: bold;
+        }
+        .book-btn{
+
+            width: 250px;
+            margin-left: 85px;
+            
+        }
+
+   .breadcrumb{
+ background-color:transparent;
\ No newline at end of file
diff --git a/ToolBox/static/Services.css b/ToolBox/static/Services.css
new file mode 100644
index 0000000..660d13a
--- /dev/null
+++ b/ToolBox/static/Services.css
@@ -0,0 +1,139 @@
+body {
+    background-color: #282C35;
+    color: white;
+}
+
+.navbar-brand {
+    font-weight: bold;
+    color: white !important;
+}
+
+.nav-item {
+    margin-left: 40px;
+}
+
+.navbar-nav .nav-item .nav-link {
+    padding: 8px 10px;
+    color: white;
+    transition: color 0.3s;
+}
+
+.navbar-nav .nav-item .nav-link:hover {
+    color: #28a745;
+}
+
+.navbar-nav .nav-item .nav-link i {
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+    transition: color 0.3s;
+}
+
+.navbar-nav .nav-item .nav-link:hover i {
+    color: #28a745;
+}
+
+.navbar-nav .nav-item .dropdown-menu {
+    margin: 0;
+}
+
+.navbar .form-control {
+    width: 300px;
+
+}
+
+.navbar .form-control + .btn {
+    margin-left: 5px;
+}
+
+.navbar {
+    background-color: black;
+    height: 80px;
+}
+
+.navbar .nav-link i {
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+}
+
+.nav-item.dropdown:hover .dropdown-menu {
+    display: block;
+}
+
+.dropdown-menu {
+    margin-top: 0;
+}
+.navbar-nav .dropdown-menu .dropdown-item {
+    color: white;
+    padding: 10px 20px;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.navbar-nav .dropdown-menu .dropdown-item:hover {
+    background-color: #28a745;
+    color: white;
+    text-decoration: none;
+}
+
+.navbar .dropdown-menu {
+    background-color: #282C35;
+    border: 1px solid #444;
+}
+
+
+
+
+
+
+
+
+
+
+.card {
+            position: relative;
+            overflow: hidden;
+            border: 1px solid #ddd;
+            border-radius: 0.5rem;
+            transition: box-shadow 0.3s ease;
+            background-color:transparent;
+        }
+
+        .card:hover {
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        }
+
+        .card-body {
+            position: relative;
+            z-index: 1;
+            text-align: center;
+            color:white;
+        }
+
+        .description {
+            display: none;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+
+            text-align: center;
+            padding: 1rem;
+            box-sizing: border-box;
+            transition: opacity 0.3s ease;
+            opacity: 0;
+        }
+
+        .card:hover .description {
+            display: block;
+            opacity: 1;
+        }
+
+        .card-icon {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+
+       }
+       .breadcrumb{
+ background-color:transparent;
\ No newline at end of file
diff --git a/ToolBox/static/admin.css b/ToolBox/static/admin.css
new file mode 100644
index 0000000..3b32aeb
--- /dev/null
+++ b/ToolBox/static/admin.css
@@ -0,0 +1,8 @@
+  body {
+            background-color: #282C35;
+            color: #ffffff;
+        }
+        .card {
+            background-color: #343a40;
+        }
+       
\ No newline at end of file
diff --git a/ToolBox/static/cart.css b/ToolBox/static/cart.css
new file mode 100644
index 0000000..9ecf647
--- /dev/null
+++ b/ToolBox/static/cart.css
@@ -0,0 +1,71 @@
+body {
+    background-color: #282C35;
+    color: white;
+}
+.breadcrumb{
+ background-color:transparent;
+ }
+
+ table {
+            color: white;
+        }
+        th, td {
+            border: 1px solid #ffffff;
+        }
+        .navbar-brand {
+    font-weight: bold;
+    color: white !important;
+}
+
+.nav-item {
+    margin-left: 40px;
+}
+
+.navbar-nav .nav-item .nav-link {
+    padding: 8px 10px;
+    color: white;
+    transition: color 0.3s;
+}
+
+.navbar-nav .nav-item .nav-link:hover {
+    color: #28a745;
+}
+
+.navbar-nav .nav-item .nav-link i {
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+    transition: color 0.3s;
+}
+
+.navbar-nav .nav-item .nav-link:hover i {
+    color: #28a745;
+}
+
+.navbar-nav .nav-item .dropdown-menu {
+    margin: 0;
+}
+
+.navbar .form-control {
+    width: 300px;
+
+}
+
+.navbar .form-control + .btn {
+    margin-left: 5px;
+}
+
+.navbar {
+    background-color: black;
+    height: 80px;
+}
+   th, td {
+            color: white;
+            border: 1px solid #ffffff;
+        }
+        th {
+            background-color: #495057;
+        }
+        tr:nth-child(even) {
+            background-color: #495057;
+        }
\ No newline at end of file
diff --git a/ToolBox/static/rent.css b/ToolBox/static/rent.css
new file mode 100644
index 0000000..0be77ff
--- /dev/null
+++ b/ToolBox/static/rent.css
@@ -0,0 +1,271 @@
+body {
+    background-color: #282C35;
+    color: white;
+}
+
+.navbar-brand {
+    font-weight: bold;
+    color: white !important;
+}
+
+.nav-item {
+    margin-left: 40px;
+}
+
+.navbar-nav .nav-item .nav-link {
+    padding: 8px 10px;
+    color: white;
+    transition: color 0.3s;
+}
+
+.navbar-nav .nav-item .nav-link:hover {
+    color: #28a745;
+}
+
+.navbar-nav .nav-item .nav-link i {
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+    transition: color 0.3s;
+}
+
+.navbar-nav .nav-item .nav-link:hover i {
+    color: #28a745;
+}
+
+.navbar-nav .nav-item .dropdown-menu {
+    margin: 0;
+}
+
+.navbar .form-control {
+    width: 300px;
+
+}
+
+.navbar .form-control + .btn {
+    margin-left: 5px;
+}
+
+.navbar {
+    background-color: black;
+    height: 80px;
+}
+
+.navbar .nav-link i {
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+}
+
+.nav-item.dropdown:hover .dropdown-menu {
+    display: block;
+}
+
+.dropdown-menu {
+    margin-top: 0;
+}
+.navbar-nav .dropdown-menu .dropdown-item {
+    color: white;
+    padding: 10px 20px;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.navbar-nav .dropdown-menu .dropdown-item:hover {
+    background-color: #28a745;
+    color: white;
+    text-decoration: none;
+}
+
+.navbar .dropdown-menu {
+    background-color: #282C35;
+    border: 1px solid #444;
+}
+
+
+.card-img-top {
+    height: 250px;
+}
+
+.card-img {
+    height: 450px;
+    width: 700px;
+}
+
+.card {
+
+    margin: 20px;
+    background-color: #282C35;
+    height: 550px;
+}
+
+.card-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+}
+
+.card-title {
+    color: white;
+    margin-bottom: auto;
+}
+.discount {
+    display: inline-block;
+    margin-bottom: -5px;
+    padding: 5px 10px;
+    max-width: 140px;
+    background-color: #007bff;
+    color: white;
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 5px;
+    text-transform: uppercase;
+}
+
+.price {
+    margin-top: 5px;
+}
+
+
+
+
+body {
+    background-color: #282C35;
+    color: white;
+}
+
+.navbar-brand {
+    font-weight: bold;
+    color: white !important;
+}
+
+.nav-item {
+    margin-left: 40px;
+}
+
+.navbar-nav .nav-item .nav-link {
+    padding: 8px 10px;
+    color: white;
+    transition: color 0.3s;
+}
+
+.navbar-nav .nav-item .nav-link:hover {
+    color: #28a745;
+}
+
+.navbar-nav .nav-item .nav-link i {
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+    transition: color 0.3s;
+}
+
+.navbar-nav .nav-item .nav-link:hover i {
+    color: #28a745;
+}
+
+.navbar-nav .nav-item .dropdown-menu {
+    margin: 0;
+}
+
+.navbar .form-control {
+    width: 300px;
+
+}
+
+.navbar .form-control + .btn {
+    margin-left: 5px;
+}
+
+.navbar {
+    background-color: black;
+    height: 80px;
+}
+
+.navbar .nav-link i {
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+}
+
+.nav-item.dropdown:hover .dropdown-menu {
+    display: block;
+}
+
+.dropdown-menu {
+    margin-top: 0;
+}
+.navbar-nav .dropdown-menu .dropdown-item {
+    color: white;
+    padding: 10px 20px;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.navbar-nav .dropdown-menu .dropdown-item:hover {
+    background-color: #28a745;
+    color: white;
+    text-decoration: none;
+}
+
+.navbar .dropdown-menu {
+    background-color: #282C35;
+    border: 1px solid #444;
+}
+
+
+.card-img-top {
+    height: 250px;
+}
+
+.card-img {
+    height: 450px;
+    width: 700px;
+}
+
+.card {
+
+    margin: 20px;
+    background-color: #282C35;
+    height: 550px;
+}
+
+.card-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+}
+
+.card-title {
+    color: white;
+    margin-bottom: auto;
+}
+.discount {
+    display: inline-block;
+    margin-bottom: -5px;
+    padding: 5px 10px;
+    max-width: 140px;
+    background-color: #007bff;
+    color: white;
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 5px;
+    text-transform: uppercase;
+}
+
+.price {
+    margin-top: 5px;
+}
+
+.col
+{
+margin-right:60px;
+}
+
+
+
+
+
+.breadcrumb{
+background-color: transparent;
+}
\ No newline at end of file
diff --git a/ToolBox/static/rent_booking.css b/ToolBox/static/rent_booking.css
new file mode 100644
index 0000000..31daa99
--- /dev/null
+++ b/ToolBox/static/rent_booking.css
@@ -0,0 +1,157 @@
+body {
+    background-color: #282C35;
+    color: white;
+}
+
+.navbar-brand {
+    font-weight: bold;
+    color: white !important;
+}
+
+.nav-item {
+    margin-left: 40px;
+}
+
+.navbar-nav .nav-item .nav-link {
+    padding: 8px 10px;
+    color: white;
+    transition: color 0.3s;
+}
+
+.navbar-nav .nav-item .nav-link:hover {
+    color: #28a745;
+}
+
+.navbar-nav .nav-item .nav-link i {
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+    transition: color 0.3s;
+}
+
+.navbar-nav .nav-item .nav-link:hover i {
+    color: #28a745;
+}
+
+.navbar-nav .nav-item .dropdown-menu {
+    margin: 0;
+}
+
+.navbar .form-control {
+    width: 300px;
+
+}
+
+.navbar .form-control + .btn {
+    margin-left: 5px;
+}
+
+.navbar {
+    background-color: black;
+    height: 80px;
+}
+
+.navbar .nav-link i {
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+}
+
+.nav-item.dropdown:hover .dropdown-menu {
+    display: block;
+}
+
+.dropdown-menu {
+    margin-top: 0;
+}
+.navbar-nav .dropdown-menu .dropdown-item {
+    color: white;
+    padding: 10px 20px;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.navbar-nav .dropdown-menu .dropdown-item:hover {
+    background-color: #28a745;
+    color: white;
+    text-decoration: none;
+}
+
+.navbar .dropdown-menu {
+    background-color: #282C35;
+    border: 1px solid #444;
+}
+
+
+.card-img-top {
+    height: 250px;
+}
+
+.card-img {
+    height: 450px;
+    width: 700px;
+}
+
+.card {
+    margin: 20px;
+    background-color: #282C35;
+    height: 550px;
+}
+
+.card-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+}
+
+.card-title {
+    color: white;
+    margin-bottom: auto;
+}
+.discount {
+    display: inline-block;
+    margin-bottom: -5px;
+    padding: 5px 10px;
+    max-width: 140px;
+    background-color: #007bff;
+    color: white;
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 5px;
+    text-transform: uppercase;
+}
+
+.price {
+    margin-top: 5px;
+     margin-bottom: 20px;
+}
+
+ .stars {
+    display: flex;
+    direction: row;
+    font-size: 25px;
+}
+
+.star {
+    cursor: pointer;
+    color: #ccc;
+}
+
+.star.selected {
+    color: #ffc107;
+}
+
+ .breadcrumb{
+ background-color:transparent;
+ }
+ .modal-content {
+            background-color: #282C35;
+            color: #FFFFFF;
+        }
+        .modal-header {
+            border-bottom: 1px solid #444;
+        }
+        .modal-footer {
+            border-top: 1px solid #444;
+        }
+
diff --git a/ToolBox/templates/Admin.html b/ToolBox/templates/Admin.html
new file mode 100644
index 0000000..7c18669
--- /dev/null
+++ b/ToolBox/templates/Admin.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Admin Dashboard</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="/static/admin.css">
+
+</head>
+<body>
+    <div class="container mt-5">
+        <h1>Admin Dashboard</h1>
+
+        <!-- Carousel Section -->
+        <div class="mb-4">
+            <h2>Carousel Items</h2>
+            <a href="{{ url_for('add_carousel') }}" class="btn btn-outline-success mb-3">Add Carousel Item</a>
+            <div class="row">
+                {% for item in carousel %}
+                <div class="col-md-4 mb-3">
+                    <div class="card">
+                        <img src="{{ item[1] }}" class="card-img-top" alt="Carousel Image">
+                        <div class="card-body">
+                            <form action="{{ url_for('delete_carousel', carousel_id=item[0]) }}" method="POST" style="display: inline;">
+                                <button type="submit" class="btn btn-danger">Delete</button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+
+        <!-- Offers Section -->
+        <div>
+            <h2>Offers</h2>
+            <a href="{{ url_for('add_carousel') }}" class="btn btn-outline-success mb-3">Add Offer</a>
+            <div class="row">
+                {% for offer in offers %}
+                <div class="col-md-4 mb-3">
+                    <div class="card">
+                        <img src="{{ offer[1] }}" class="card-img-top" alt="Offer Image">
+                        <div class="card-body">
+                            <form action="{{ url_for('delete_offer', id=offer[0]) }}" method="POST" style="display: inline;">
+                                <button type="submit" class="btn btn-danger">Delete</button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
diff --git a/ToolBox/templates/Admin_add.html b/ToolBox/templates/Admin_add.html
new file mode 100644
index 0000000..987d86e
--- /dev/null
+++ b/ToolBox/templates/Admin_add.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Add Carousel Item / Offer</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+     <link rel="stylesheet" href="/static/admin.css">
+
+</head>
+<body>
+    <div class="container mt-5">
+        <h1>Add Carousel Item</h1>
+        <form method="POST" action="{{ url_for('add_carousel') }}">
+            <div class="form-group">
+                <label for="image_url">Image URL</label>
+                <input type="text" class="form-control" id="image_url" name="image_url" required>
+            </div>
+            <div class="form-group">
+                <label for="category_id">Category</label>
+                <select class="form-control" id="category_id" name="category_id" required>
+                    <option value="">Select Category</option>
+                    {% for category in categories %}
+                    <option value="{{ category[0] }}">{{ category[1] }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="brand_id">Brand</label>
+                <select class="form-control" id="brand_id" name="brand_id" required>
+                    <option value="">Select Brand</option>
+                    {% for brand in brands %}
+                    <option value="{{ brand[0] }}">{{ brand[1] }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <button type="submit" class="btn btn-outline-success">Add Carousel Item</button>
+        </form>
+
+        <hr class="my-5">
+
+        <h1>Add Offer</h1>
+        <form method="POST" action="{{ url_for('add_offer') }}">
+            <div class="form-group">
+                <label for="offer_image">Offer Image URL</label>
+                <input type="text" class="form-control" id="offer_image" name="offer_image" required>
+            </div>
+            <div class="form-group">
+                <label for="category_id">Category</label>
+                <select class="form-control" id="category_id" name="category_id" required>
+                    <option value="">Select Category</option>
+                    {% for category in categories %}
+                    <option value="{{ category[0] }}">{{ category[1] }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="brand_id">Brand</label>
+                <select class="form-control" id="brand_id" name="brand_id" required>
+                    <option value="">Select Brand</option>
+                    {% for brand in brands %}
+                    <option value="{{ brand[0] }}">{{ brand[1] }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <button type="submit" class="btn btn-outline-success">Add Offer</button>
+        </form>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
diff --git a/ToolBox/templates/Homepage.html b/ToolBox/templates/Homepage.html
new file mode 100644
index 0000000..8ae3f33
--- /dev/null
+++ b/ToolBox/templates/Homepage.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ToolBox | Home</title>
+
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="/static/Homepage.css">
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg navbar-light ">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="#">ToolBox</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNavDropdown">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+
+       <li class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle" href="#" id="categoryDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+        Categories
+    </a>
+    <ul class="dropdown-menu" aria-labelledby="categoryDropdown">
+        {% for category in categories %}
+        <li><a class="dropdown-item" href="{{ url_for('list_by_category', category_id=category[0]) }}">{{ category[1] }}</a></li>
+        {% endfor %}
+    </ul>
+</li>
+
+<li class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle" href="#" id="brandDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+        Brands
+    </a>
+    <ul class="dropdown-menu" aria-labelledby="brandDropdown">
+        {% for brand in brands %}
+        <li><a class="dropdown-item" href="{{ url_for('list_by_brand', brand_id=brand[0]) }}">{{ brand[1] }}</a></li>
+        {% endfor %}
+    </ul>
+</li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{{ url_for('rent') }}">Rent</a>
+                    </li>
+                    <li class="nav-item">
+                       <a class="nav-link" href="{{ url_for('services') }}">Services</a>
+
+                    </li>
+                </ul>
+                <form class="d-flex" action="{{ url_for('search') }}" method="GET">
+    <input class="form-control me-2" type="search" name="query" placeholder="Search" aria-label="Search">
+    <button class="btn btn-outline-success" type="submit">Search</button>
+                </form>
+                  <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+<li class="nav-item">
+    {% if user_name %}
+        <a class="nav-link text-success" href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ user_name }}">
+            <i class="bi bi-person text-success"></i>
+        </a>
+    {% else %}
+        <a class="nav-link" href="{{ url_for('login') }}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Login/Signup">
+            <i class="bi bi-person"></i>
+        </a>
+    {% endif %}
+</li>
+
+                   <li class="nav-item">
+    <a class="nav-link" href="{{ url_for('cart') }}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Cart"><i class="bi bi-tools"></i></a>
+</li>
+
+                    <li class="nav-item">
+                        <a class="nav-link" href="#"><u>About Us</u></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#"><u>Contact Us</u></a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <!--Navbar End-->
+
+
+        <div class="container-fluid">
+        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+         <ol class="carousel-indicators">
+    {% for idx in range(carousel_images|length) %}
+        <li data-target="#carouselExampleIndicators" data-slide-to="{{ idx }}" class="{% if idx == 0 %}active{% endif %}"></li>
+    {% endfor %}
+</ol>
+<div class="carousel-inner">
+    {% for idx in range(carousel_images|length) %}
+        <div class="carousel-item {% if idx == 0 %}active{% endif %}">
+            <img src="{{ carousel_images[idx][0] }}" class="d-block w-100" alt="...">
+        </div>
+    {% endfor %}
+</div>
+
+
+            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                <span class="sr-only">Previous</span>
+            </a>
+            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                <span class="sr-only">Next</span>
+            </a>
+        </div>
+    </div>
+
+    <!--Carousel End-->
+
+    <div class="row row-cols-4">
+        {% for tool in tools %}
+            <div class="col">
+                <div class="card" style="width: 20rem;">
+                    <img src="{{ tool[4] }}" class="card-img-top" alt="...">
+                    <div class="card-body">
+                        <h5 class="card-title"> <a href="{{ url_for('item_details', item_id=tool[0]) }}">{{ tool[1] }}</a></h5>
+                        <span class="discount">{{ tool[2] }} % off</span>
+                        <h5 class="card-title price">£ {{ tool[3] }}</h5>
+                        <a href="#" class="btn btn-outline-success">Add to Basket</a>
+                    </div>
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+    <!--Items 1 end-->
+
+    <div class="row row-cols-2">
+        {% for offer in offers %}
+            <div class="col">
+                <div class="card" style="width: 700px;">
+                    <img src="{{ offer[0] }}" class="card-img" alt="...">
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+    <!--Items 2 end-->
+
+    <footer class="bg-dark text-center text-white">
+        <div class="container p-4 pb-0">
+            <section class="mb-4">
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-facebook"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-twitter-x"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-google"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-instagram"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-linkedin"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-github"></i></a>
+            </section>
+        </div>
+
+        <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
+            © 2023 Copyright:
+            <a class="text-white" href="#">toolbox.com</a>
+        </div>
+    </footer>
+
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+</body>
+</html>
diff --git a/ToolBox/templates/Item_details.html b/ToolBox/templates/Item_details.html
new file mode 100644
index 0000000..89cd642
--- /dev/null
+++ b/ToolBox/templates/Item_details.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ToolBox | Item Details</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="/static/Item_Details.css">
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg navbar-light">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="{{ url_for('home') }}">ToolBox</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNavDropdown">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="categoryDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            Categories
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="categoryDropdown">
+                            {% for category in categories %}
+                            <li><a class="dropdown-item" href="{{ url_for('list_by_category', category_id=category[0]) }}">{{ category[1] }}</a></li>
+                            {% endfor %}
+                        </ul>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="brandDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            Brands
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="brandDropdown">
+                            {% for brand in brands %}
+                            <li><a class="dropdown-item" href="{{ url_for('list_by_brand', brand_id=brand[0]) }}">{{ brand[1] }}</a></li>
+                            {% endfor %}
+                        </ul>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Rent</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{{ url_for('services') }}">Services</a>
+                    </li>
+                </ul>
+                <form class="d-flex" action="{{ url_for('search') }}" method="GET">
+                    <input class="form-control me-2" type="search" name="query" placeholder="Search" aria-label="Search">
+                    <button class="btn btn-outline-success" type="submit">Search</button>
+                </form>
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Login/Signup"><i class="bi bi-person"></i></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Cart"><i class="bi bi-tools"></i></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#"><u>About Us</u></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#"><u>Contact Us</u></a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <nav aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item"><a href="{{ url_for('home') }}">Home</a></li>
+    <li class="breadcrumb-item"><a href="#">List</a></li>
+    <li class="breadcrumb-item active" aria-current="page">Details</li>
+  </ol>
+</nav>
+
+    <div class="container mt-5">
+        <div class="row">
+            <!-- Overview Section -->
+            <div class="col-md-6">
+                <img src="{{ tool[4] }}" class="img-fluid card-img-top" alt="Tool Image">
+            </div>
+            <div class="col-md-6">
+                <h1>{{ tool[1] }}</h1>
+                <p class="text-muted">Rating: {{ tool[5] }}/5</p>
+                <p class="discount">{{ tool[2] }}% off</p>
+                <h2 class="card-title price">£ {{ tool[3] }}</h2>
+                <button class="btn btn-outline-success">Add to Basket</button>
+            </div>
+        </div>
+
+        <hr class="my-5">
+
+        <!-- Specifications Section -->
+        <div class="row">
+            <div class="col-12">
+                <h2>Specifications</h2>
+                <p>{{ tool[6] }}</p>
+            </div>
+        </div>
+
+        <hr class="my-5">
+
+        <!-- Customer Reviews Section -->
+       <!-- Customer Reviews Section -->
+<div class="row">
+    <div class="col-12">
+        <h2>Customer Reviews</h2>
+        <!-- Existing reviews -->
+        {% for review in reviews %}
+        <div class="review">
+            <h4>{{ review[0] }}</h4>
+           <p class="text-muted">Rating: {{ review[1] }}/5</p>
+            <p>{{ review[2] }}</p>
+        </div>
+        {% endfor %}
+
+        <!-- Form to add a new review -->
+        <hr>
+        <form method="POST" action="{{ url_for('item_details', item_id=tool[0]) }}" id="reviewForm">
+            <div class="mb-3">
+                <label for="review_name" class="form-label">Your Name</label>
+                <input type="text" class="form-control" id="review_name" name="review_name" required>
+            </div>
+            <div class="mb-3">
+                <label for="rating" class="form-label">Rating</label>
+                <input type="hidden" id="rating" name="rating" required>
+                <!-- Star rating display -->
+                <div class="stars" data-rating="0">
+                    <span class="star" data-value="1">&#9733;</span>
+                    <span class="star" data-value="2">&#9733;</span>
+                    <span class="star" data-value="3">&#9733;</span>
+                    <span class="star" data-value="4">&#9733;</span>
+                    <span class="star" data-value="5">&#9733;</span>
+                </div>
+            </div>
+            <div class="mb-3">
+                <label for="review_text" class="form-label">Review</label>
+                <textarea class="form-control" id="review_text" name="review_text" rows="3" required></textarea>
+            </div>
+            <button type="submit" class="btn btn-outline-success">Submit Review</button>
+        </form>
+    </div>
+</div>
+
+    </div>
+
+    <footer class="bg-dark text-center text-white mt-5">
+        <div class="container p-4 pb-0">
+            <section class="mb-4">
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-facebook"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-twitter-x"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-google"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-instagram"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-linkedin"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-github"></i></a>
+            </section>
+        </div>
+
+        <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
+            © 2023 Copyright:
+            <a class="text-white" href="#">toolbox.com</a>
+        </div>
+    </footer>
+
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const stars = document.querySelectorAll('.stars');
+        stars.forEach(star => {
+            const rating = parseInt(star.dataset.rating);
+            const starIcons = star.querySelectorAll('.star');
+
+            starIcons.forEach((starIcon, index) => {
+                starIcon.addEventListener('click', function() {
+                    const value = parseInt(starIcon.dataset.value);
+                    star.dataset.rating = value;
+                    updateStarRating(star, value);
+                });
+            });
+
+            // Initialize star rating display
+            updateStarRating(star, rating);
+        });
+
+        function updateStarRating(star, rating) {
+            const starIcons = star.querySelectorAll('.star');
+            starIcons.forEach(starIcon => {
+                const value = parseInt(starIcon.dataset.value);
+                starIcon.classList.toggle('rated', value <= rating);
+            });
+
+            // Update hidden input value
+            document.getElementById('rating').value = rating;
+        }
+    });
+</script>
+</body>
+</html>
diff --git a/ToolBox/templates/List.html b/ToolBox/templates/List.html
new file mode 100644
index 0000000..fac59c3
--- /dev/null
+++ b/ToolBox/templates/List.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ToolBox | List</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="/static/List.css">
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg navbar-light ">
+        <div class="container-fluid">
+           <a class="navbar-brand" href="{{ url_for('home') }}">ToolBox</a>
+
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNavDropdown">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="categoryDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            Categories
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="categoryDropdown">
+                            {% for category in categories %}
+                            <li><a class="dropdown-item" href="{{ url_for('list_by_category', category_id=category[0]) }}">{{ category[1] }}</a></li>
+                            {% endfor %}
+                        </ul>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="brandDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            Brands
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="brandDropdown">
+                            {% for brand in brands %}
+                            <li><a class="dropdown-item" href="{{ url_for('list_by_brand', brand_id=brand[0]) }}">{{ brand[1] }}</a></li>
+                            {% endfor %}
+                        </ul>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Rent</a>
+                    </li>
+                    <li class="nav-item">
+                         <a class="nav-link" href="{{ url_for('services') }}">Services</a>
+                    </li>
+                </ul>
+                <form class="d-flex" action="{{ url_for('search') }}" method="GET">
+                    <input class="form-control me-2" type="search" name="query" placeholder="Search" aria-label="Search">
+                    <button class="btn btn-outline-success" type="submit">Search</button>
+                </form>
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Login/Signup"><i class="bi bi-person"></i></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Cart"><i class="bi bi-tools"></i></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#"><u>About Us</u></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#"><u>Contact Us</u></a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <nav aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item"><a href="{{ url_for('home') }}">Home</a></li>
+    <li class="breadcrumb-item active" aria-current="page">List</li>
+  </ol>
+</nav>
+
+   <div class="container">
+    <div class="row row-cols-4">
+        {% for tool in tools %}
+            <div class="col mb-4">
+                <div class="card" style="width: 20rem;">
+                    <a href="{{ url_for('item_details', item_id=tool[0]) }}">
+                        <img src="{{ tool[4] }}" class="card-img-top" alt="...">
+                    </a>
+                    <div class="card-body">
+                        <h5 class="card-title">
+                            <a href="{{ url_for('item_details', item_id=tool[0]) }}">{{ tool[1] }}</a>
+                        </h5>
+                        <span class="discount">{{ tool[2] }} % off</span>
+                        <h5 class="card-title price">£ {{ tool[3] }}</h5>
+                        <a href="{{ url_for('item_details', item_id=tool[0]) }}" class="btn btn-outline-success">View Details</a>
+                    </div>
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+
+    <!-- Pagination -->
+    <nav aria-label="Page navigation example">
+        <ul class="pagination justify-content-center">
+            {% if page > 1 %}
+                <li class="page-item">
+                    <a class="page-link" href="{{ url_for('list', page=1) }}">First</a>
+                </li>
+                <li class="page-item">
+                    <a class="page-link" href="{{ url_for('list', page=page-1) }}">Previous</a>
+                </li>
+            {% endif %}
+
+            {% for num in range(1, total_pages + 1) %}
+                {% if num == page %}
+                    <li class="page-item active" aria-current="page">
+                        <span class="page-link">{{ num }}</span>
+                    </li>
+                {% else %}
+                    <li class="page-item">
+                        <a class="page-link" href="{{ url_for('list', page=num) }}">{{ num }}</a>
+                    </li>
+                {% endif %}
+            {% endfor %}
+
+            {% if page < total_pages %}
+                <li class="page-item">
+                    <a class="page-link" href="{{ url_for('list', page=page+1) }}">Next</a>
+                </li>
+                <li class="page-item">
+                    <a class="page-link" href="{{ url_for('list', page=total_pages) }}">Last</a>
+                </li>
+            {% endif %}
+        </ul>
+    </nav>
+</div>
+
+
+    <footer class="bg-dark text-center text-white">
+        <div class="container p-4 pb-0">
+            <section class="mb-4">
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-facebook"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-twitter-x"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-google"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-instagram"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-linkedin"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-github"></i></a>
+            </section>
+        </div>
+
+        <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
+            © 2023 Copyright:
+            <a class="text-white" href="#">toolbox.com</a>
+        </div>
+    </footer>
+
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+</body>
+</html>
diff --git a/ToolBox/templates/Login.html b/ToolBox/templates/Login.html
new file mode 100644
index 0000000..8315ea9
--- /dev/null
+++ b/ToolBox/templates/Login.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ToolBox | Login</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <link rel="stylesheet" href="/static/Login.css">
+</head>
+<body>
+  <nav class="navbar navbar-expand-lg navbar-light">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#">ToolBox</a>
+    </div>
+  </nav>
+  <div class="container">
+    <div class="transparent-box">
+      <h2 class="text-center text-white mb-4">Login</h2>
+      <p class="text-center text-white mb-4">Please Enter Your Login Details</p>
+      <form id="loginForm" action="/login" method="POST">
+        <div class="form-group">
+          <input type="email" class="form-control mb-3" placeholder="Email" name="email" required>
+        </div>
+        <div class="form-group">
+          <input type="password" class="form-control mb-2" placeholder="Password" name="password" required>
+        </div>
+        <div class="text-center mb-3">
+          <a href="#" class="text-white">Forgot password?</a>
+        </div>
+        <button type="submit" class="btn btn-primary btn-block mb-2">Login</button>
+      </form>
+      <p class="text-center text-white mb-3">Don't have an account yet? <a href="/register" class="text-white">Register Account</a>.</p>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/ToolBox/templates/Professional.html b/ToolBox/templates/Professional.html
new file mode 100644
index 0000000..45ac3ae
--- /dev/null
+++ b/ToolBox/templates/Professional.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Professional Dashboard</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css" rel="stylesheet">
+    <style>
+        .container { margin-top: 20px; }
+        .card { margin-bottom: 20px; }
+        .modal-body input, .modal-body textarea { margin-bottom: 15px; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Professional Dashboard</h1>
+
+        <!-- Service Requests Management -->
+        <div class="card">
+            <div class="card-header">Service Requests</div>
+            <div class="card-body">
+                <!-- Table/List of Service Requests -->
+            </div>
+        </div>
+
+        <!-- Service Request Modal -->
+        <div class="modal fade" id="serviceRequestModal" tabindex="-1" role="dialog" aria-labelledby="serviceRequestModalLabel" aria-hidden="true">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="serviceRequestModalLabel">Accept Service Request</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div class="modal-body">
+                        <!-- Service Request Form -->
+                        <form method="POST" action="/professional/accept_request">
+                            <input type="hidden" id="request_id" name="request_id">
+                            <div class="form-group">
+                                <label for="request_details">Request Details</label>
+                                <textarea class="form-control" id="request_details" name="request_details" disabled></textarea>
+                            </div>
+                            <button type="submit" class="btn btn-primary">Accept Request</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
diff --git a/ToolBox/templates/Registration.html b/ToolBox/templates/Registration.html
new file mode 100644
index 0000000..963174a
--- /dev/null
+++ b/ToolBox/templates/Registration.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ToolBox|Registration</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <link rel="stylesheet" href="/static/Registration.css">
+</head>
+<body>
+  <nav class="navbar navbar-expand-lg navbar-light ">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="#">ToolBox</a>
+       
+    </div>
+</nav>
+  <div class="container">
+
+    <div class="transparent-box">
+      <h2 class="text-center mb-4">Register</h2>
+      <p class="text-center">Hello Customer, Enter your details here.</p>
+      <form id="registrationForm" action="/register" method="POST">
+    <div class="form-group">
+        <input type="text" class="form-control mb-3" placeholder="Name" name="name" required>
+    </div>
+    <div class="form-group">
+        <input type="email" class="form-control mb-3" placeholder="Email" name="email" required>
+    </div>
+   
+    <div class="form-group">
+        <input type="date" class="form-control mb-3" placeholder="Date of Birth" name="dob" required>
+    </div>
+    <div class="form-group">
+      <input type="text" class="form-control mb-3" placeholder="Address" name="address" required>
+  </div>
+  <div class="form-group">
+    <input type="text" class="form-control mb-3" placeholder="Phone Number" name="phno" required>
+</div>
+    <div class="form-group">
+        <input type="password" class="form-control mb-3" id="password" placeholder="Password" name="password" required>
+    </div>
+    <div class="form-group">
+        <input type="password" class="form-control mb-3" id="confirmPassword" placeholder="Confirm Password" name="confirmPassword" required>
+    </div>
+    <div class="form-group form-check mb-3">
+        <input type="checkbox" class="form-check-input" id="termsCheckbox" required>
+        <label class="form-check-label" for="termsCheckbox">I agree to the terms and conditions</label>
+    </div>
+   <p > <button type="submit" class="btn btn-primary btn-block">Register</button>  or   Have an Account? <a href="/login" class="text-white">Login</a></p>
+</form>
+
+    </div>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
+  <script>
+
+document.addEventListener("DOMContentLoaded", function() {
+  const form = document.getElementById("registrationForm");
+  const passwordField = document.getElementById("password");
+  const confirmPasswordField = document.getElementById("confirmPassword");
+  const errorMessage = document.createElement("div");
+  
+  errorMessage.className = "text-danger";
+
+  form.addEventListener("submit", function(event) {
+    if (passwordField.value !== confirmPasswordField.value) {
+      event.preventDefault(); 
+      if (!document.querySelector(".text-danger")) {
+        errorMessage.textContent = "Passwords do not match";
+        confirmPasswordField.parentNode.appendChild(errorMessage);
+      }
+    }
+  });
+  passwordField.addEventListener("input", function() {
+    errorMessage.textContent = "";
+  });
+
+  confirmPasswordField.addEventListener("input", function() {
+    errorMessage.textContent = "";
+  });
+});
+  </script>
+
+</body>
+</html>
diff --git a/ToolBox/templates/Service_booking.html b/ToolBox/templates/Service_booking.html
new file mode 100644
index 0000000..04c70a8
--- /dev/null
+++ b/ToolBox/templates/Service_booking.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ToolBox | Book Appointment</title>
+
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="/static/service_booking.css">
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg navbar-light">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="{{ url_for('home') }}">ToolBox</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNavDropdown">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="categoryDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            Categories
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="categoryDropdown">
+                            {% for category in categories %}
+                            <li><a class="dropdown-item" href="{{ url_for('list_by_category', category_id=category[0]) }}">{{ category[1] }}</a></li>
+                            {% endfor %}
+                        </ul>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="brandDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            Brands
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="brandDropdown">
+                            {% for brand in brands %}
+                            <li><a class="dropdown-item" href="{{ url_for('list_by_brand', brand_id=brand[0]) }}">{{ brand[1] }}</a></li>
+                            {% endfor %}
+                        </ul>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Rent</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Services</a>
+                    </li>
+                </ul>
+                <form class="d-flex" action="{{ url_for('search') }}" method="GET">
+                    <input class="form-control me-2" type="search" name="query" placeholder="Search" aria-label="Search">
+                    <button class="btn btn-outline-success" type="submit">Search</button>
+                </form>
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Login/Signup"><i class="bi bi-person"></i></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Cart"><i class="bi bi-tools"></i></a>
+                    </li>
+
+                    <li class="nav-item">
+                        <a class="nav-link" href="#"><u><b>Register as a professional</b></u></a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <nav aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item"><a href="{{ url_for('home') }}">Home</a></li>
+    <li class="breadcrumb-item"><a href="{{ url_for('services') }}">Services</a></li>
+    <li class="breadcrumb-item active" aria-current="page">Booking</li>
+  </ol>
+</nav>
+
+    <div class="container book-body mt-4">
+        <h2 class="text-center">Book an Appointment for {{ service }}</h2>
+        <form method="POST">
+            <div class="form-group">
+                <label for="name">Name</label>
+                <input type="text" class="form-control" id="name" name="name" placeholder="Enter your name" required>
+            </div>
+            <div class="form-group">
+                <label for="email">Email</label>
+                <input type="email" class="form-control" id="email" name="email" placeholder="Enter your email" required>
+            </div>
+            <div class="form-group">
+                <label for="phone">Phone Number</label>
+                <input type="tel" class="form-control" id="phone" name="phone" placeholder="Enter your phone number" required>
+            </div>
+            <div class="form-group">
+                <label for="address">Address</label>
+                <input type="text" class="form-control" id="address" name="address" placeholder="Enter your address" required>
+            </div>
+            <div class="form-group">
+                <label for="problem">Problem Description</label>
+                <textarea class="form-control" id="problem" name="problem" rows="3" placeholder="Describe your problem" required></textarea>
+            </div>
+            <div class="form-group">
+                <label for="appointment-date">Appointment Date</label>
+                <input type="date" class="form-control" id="appointment-date" name="appointment-date" required>
+            </div>
+            <div class="form-group">
+                <label for="appointment-time">Appointment Time</label>
+                <input type="time" class="form-control" id="appointment-time" name="appointment-time" required>
+            </div>
+            <button type="submit" class="btn book-btn btn-outline-success">Book Appointment</button>
+        </form>
+    </div>
+
+    <footer class="bg-dark text-center text-white mt-4">
+        <div class="container p-4 pb-0">
+            <section class="mb-4">
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-facebook"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-twitter"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-google"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-instagram"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-linkedin"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-github"></i></a>
+            </section>
+        </div>
+
+        <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
+            © 2023 Copyright:
+            <a class="text-white" href="#">toolbox.com</a>
+        </div>
+    </footer>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+</body>
+</html>
diff --git a/ToolBox/templates/Services.html b/ToolBox/templates/Services.html
new file mode 100644
index 0000000..3396d56
--- /dev/null
+++ b/ToolBox/templates/Services.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ToolBox | Services</title>
+
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="/static/Services.css">
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg navbar-light">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="{{ url_for('home') }}">ToolBox</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNavDropdown">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="categoryDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            Categories
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="categoryDropdown">
+                            {% for category in categories %}
+                            <li><a class="dropdown-item" href="{{ url_for('list_by_category', category_id=category[0]) }}">{{ category[1] }}</a></li>
+                            {% endfor %}
+                        </ul>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="brandDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            Brands
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="brandDropdown">
+                            {% for brand in brands %}
+                            <li><a class="dropdown-item" href="{{ url_for('list_by_brand', brand_id=brand[0]) }}">{{ brand[1] }}</a></li>
+                            {% endfor %}
+                        </ul>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Rent</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Services</a>
+                    </li>
+                </ul>
+                <form class="d-flex" action="{{ url_for('search') }}" method="GET">
+                    <input class="form-control me-2" type="search" name="query" placeholder="Search" aria-label="Search">
+                    <button class="btn btn-outline-success" type="submit">Search</button>
+                </form>
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Login/Signup"><i class="bi bi-person"></i></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Cart"><i class="bi bi-tools"></i></a>
+                    </li>
+
+                    <li class="nav-item">
+                        <a class="nav-link" href="#"><u><b>Register as a professional</b></u></a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="{{ url_for('home') }}">Home</a></li>
+            <li class="breadcrumb-item active" aria-current="page">Services</li>
+        </ol>
+    </nav>
+
+ <div class="row">
+    {% for service in services %}
+    <div class="col-md-4 mb-4">
+        <a href="{{ url_for('service_booking', service_id=service[0]) }}" >
+            <div class="card">
+                <div class="card-body">
+                    <i class="bi {{ service[3] }} card-icon"></i>
+                    <h5 class="card-title">{{ service[1] }}</h5>
+                    <div class="description">
+                        <p class="card-text">{{ service[2] }}</p>
+                    </div>
+                </div>
+            </div>
+        </a>
+    </div>
+    {% endfor %}
+</div>
+
+        </div>
+    </div>
+
+    <footer class="bg-dark text-center text-white mt-4">
+        <div class="container p-4 pb-0">
+            <section class="mb-4">
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-facebook"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-twitter"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-google"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-instagram"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-linkedin"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-github"></i></a>
+            </section>
+        </div>
+
+        <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
+            © 2023 Copyright:
+            <a class="text-white" href="#">toolbox.com</a>
+        </div>
+    </footer>
+
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+</body>
+</html>
diff --git a/ToolBox/templates/Vendor.html b/ToolBox/templates/Vendor.html
new file mode 100644
index 0000000..c7b14df
--- /dev/null
+++ b/ToolBox/templates/Vendor.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vendor Dashboard</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css" rel="stylesheet">
+    <style>
+        .container { margin-top: 20px; }
+        .card { margin-bottom: 20px; }
+        .modal-body input, .modal-body textarea { margin-bottom: 15px; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Vendor Dashboard</h1>
+
+        <!-- Item Management -->
+        <div class="card">
+            <div class="card-header">Manage Items</div>
+            <div class="card-body">
+                <!-- Table/List of Items -->
+                <button class="btn btn-primary" data-toggle="modal" data-target="#itemModal">Add Item</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Item Modal -->
+    <div class="modal fade" id="itemModal" tabindex="-1" role="dialog" aria-labelledby="itemModalLabel" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="itemModalLabel">Add/Edit Item</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <!-- Item Form -->
+                    <form method="POST" action="/vendor/item">
+                        <div class="form-group">
+                            <label for="item_name">Name</label>
+                            <input type="text" class="form-control" id="item_name" name="item_name" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="item_description">Description</label>
+                            <textarea class="form-control" id="item_description" name="item_description" required></textarea>
+                        </div>
+                        <div class="form-group">
+                            <label for="item_price">Price</label>
+                            <input type="number" class="form-control" id="item_price" name="item_price" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="item_image">Image URL</label>
+                            <input type="text" class="form-control" id="item_image" name="item_image" required>
+                        </div>
+                        <button type="submit" class="btn btn-primary">Save</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
diff --git a/ToolBox/templates/cart.html b/ToolBox/templates/cart.html
new file mode 100644
index 0000000..f6e9d68
--- /dev/null
+++ b/ToolBox/templates/cart.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Your Cart | ToolBox</title>
+     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="/static/cart.css">
+<body>
+    <nav class="navbar navbar-expand-lg navbar-light">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="#">ToolBox</a>
+            <a class="nav-link" href="{{ url_for('logout') }}">Logout</a>
+        </div>
+    </nav>
+    <nav aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item"><a href="{{ url_for('home') }}">Home</a></li>
+    <li class="breadcrumb-item active" aria-current="page">cart</li>
+  </ol>
+</nav>
+
+    <div class="container mt-5">
+
+
+        <h3>Rental History</h3>
+        {% if rentals %}
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th>Tool ID</th>
+                        <th>Name</th>
+                        <th>Rental Date</th>
+                        <th>Return Date</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for rental in rentals %}
+                        <tr>
+                            <td>{{ rental[1] }}</td>
+                            <td>{{ rental[3] }}</td>
+                            <td>{{ rental[7] }}</td>
+                            <td>{{ rental[8] }}</td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        {% else %}
+            <p>No rental history found.</p>
+        {% endif %}
+
+        <h3>Service Bookings</h3>
+        {% if service_bookings %}
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th>Service ID</th>
+                        <th>Name</th>
+                        <th>Appointment Date</th>
+                        <th>Appointment Time</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for booking in service_bookings %}
+                        <tr>
+                            <td>{{ booking[1] }}</td>
+                            <td>{{ booking[3] }}</td>
+                            <td>{{ booking[8] }}</td>
+                            <td>{{ booking[9] }}</td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        {% else %}
+            <p>No service bookings found.</p>
+        {% endif %}
+
+        <h3>Purchase History</h3>
+        {% if purchases %}
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th>Purchase ID</th>
+                        <th>Tool ID</th>
+                        <th>Purchase Date</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for purchase in purchases %}
+                        <tr>
+                            <td>{{ purchase[0] }}</td>
+                            <td>{{ purchase[1] }}</td>
+                            <td>{{ purchase[3] }}</td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        {% else %}
+            <p>No purchase history found.</p>
+        {% endif %}
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.3/js/bootstrap.min.js"></script>
+</body>
+</html>
diff --git a/ToolBox/templates/rent.html b/ToolBox/templates/rent.html
new file mode 100644
index 0000000..789cf13
--- /dev/null
+++ b/ToolBox/templates/rent.html
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ToolBox | Rent</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="/static/rent.css">
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg navbar-light">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="{{ url_for('home') }}">ToolBox</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNavDropdown">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="categoryDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            Categories
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="categoryDropdown">
+                            {% for category in categories %}
+                            <li><a class="dropdown-item" href="{{ url_for('list_by_category', category_id=category[0]) }}">{{ category[1] }}</a></li>
+                            {% endfor %}
+                        </ul>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="brandDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            Brands
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="brandDropdown">
+                            {% for brand in brands %}
+                            <li><a class="dropdown-item" href="{{ url_for('list_by_brand', brand_id=brand[0]) }}">{{ brand[1] }}</a></li>
+                            {% endfor %}
+                        </ul>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{{ url_for('rent') }}">Rent</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{{ url_for('services') }}">Services</a>
+                    </li>
+                </ul>
+                <form class="d-flex" action="{{ url_for('search') }}" method="GET">
+                    <input class="form-control me-2" type="search" name="query" placeholder="Search" aria-label="Search">
+                    <button class="btn btn-outline-success" type="submit">Search</button>
+                </form>
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Login/Signup"><i class="bi bi-person"></i></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Cart"><i class="bi bi-tools"></i></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#"><u>About Us</u></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#"><u>Contact Us</u></a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="{{ url_for('home') }}">Home</a></li>
+            <li class="breadcrumb-item active" aria-current="page">Rent</li>
+        </ol>
+    </nav>
+
+    <div class="container">
+        <!-- Filter Form -->
+        <form method="GET" action="{{ url_for('rent') }}">
+            <div class="row mb-4">
+                <div class="col-md-3">
+                    <select class="form-control" name="category">
+                        <option value="">Select Category</option>
+                        {% for category in categories %}
+                        <option value="{{ category[0] }}" {% if request.args.get('category') == category[0] %}selected{% endif %}>{{ category[1] }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <div class="col-md-3">
+                    <select class="form-control" name="brand">
+                        <option value="">Select Brand</option>
+                        {% for brand in brands %}
+                        <option value="{{ brand[0] }}" {% if request.args.get('brand') == brand[0] %}selected{% endif %}>{{ brand[1] }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <div class="col-md-3">
+                    <input type="number" class="form-control" name="min_price" placeholder="Min Price" value="{{ request.args.get('min_price') }}">
+                </div>
+                <div class="col-md-3">
+                    <input type="number" class="form-control" name="max_price" placeholder="Max Price" value="{{ request.args.get('max_price') }}">
+                </div>
+            </div>
+            <div class="row mb-4">
+                <div class="col-md-3">
+                    <select class="form-control" name="rating">
+                        <option value="">Select Rating</option>
+                        <option value="1" {% if request.args.get('rating') == "1" %}selected{% endif %}>1+ stars</option>
+                        <option value="2" {% if request.args.get('rating') == "2" %}selected{% endif %}>2+ stars</option>
+                        <option value="3" {% if request.args.get('rating') == "3" %}selected{% endif %}>3+ stars</option>
+                        <option value="4" {% if request.args.get('rating') == "4" %}selected{% endif %}>4+ stars</option>
+                        <option value="5" {% if request.args.get('rating') == "5" %}selected{% endif %}>5 stars</option>
+                    </select>
+                </div>
+                <div class="col-md-3">
+                    <button type="submit" class="btn btn-outline-success">Filter</button>
+                </div>
+            </div>
+        </form>
+
+        <div class="row row-cols-4">
+            {% for rental_tool in rental_tools %}
+            <div class="col mb-4">
+                <div class="card" style="width: 20rem;">
+                    <a href="{{ url_for('rent_details', rtool_id=rental_tool[0]) }}">
+                        <img src="{{ rental_tool[4] }}" class="card-img-top" alt="Tool image">
+                    </a>
+                    <div class="card-body">
+                        <h5 class="card-title">
+                            <a href="{{ url_for('rent_details', rtool_id=rental_tool[0]) }}">{{ rental_tool[1] }}</a>
+                        </h5>
+                        <span class="discount">{{ rental_tool[2] }}% off</span>
+                        <h5 class="card-title price">£{{ rental_tool[3] }} per day</h5>
+                        <a href="{{ url_for('rent_details', rtool_id=rental_tool[0]) }}" class="btn btn-outline-success">Rent Now</a>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+
+        <!-- Pagination -->
+        <nav aria-label="Page navigation">
+            <ul class="pagination justify-content-center">
+                {% if page > 1 %}
+                <li class="page-item">
+                    <a class="page-link" href="?page={{ page-1 }}" aria-label="Previous">
+                        <span aria-hidden="true">&laquo;</span>
+                    </a>
+                </li>
+                {% endif %}
+                {% for p in range(1, total_pages + 1) %}
+                <li class="page-item {% if p == page %}active{% endif %}"><a class="page-link" href="?page={{ p }}">{{ p }}</a></li>
+                {% endfor %}
+                {% if page < total_pages %}
+                <li class="page-item">
+                    <a class="page-link" href="?page={{ page+1 }}" aria-label="Next">
+                        <span aria-hidden="true">&raquo;</span>
+                    </a>
+                </li>
+                {% endif %}
+            </ul>
+        </nav>
+    </div>
+
+    <footer class="bg-dark text-center text-white">
+        <div class="container p-4 pb-0">
+            <section class="mb-4">
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-facebook"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-twitter"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-google"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-instagram"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-linkedin"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-github"></i></a>
+            </section>
+        </div>
+
+        <div class="text-center p-3">
+            &copy; 2023 ToolBox. All rights reserved.
+        </div>
+    </footer>
+
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+</body>
+</html>
diff --git a/ToolBox/templates/rental_booking.html b/ToolBox/templates/rental_booking.html
new file mode 100644
index 0000000..0523042
--- /dev/null
+++ b/ToolBox/templates/rental_booking.html
@@ -0,0 +1,220 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ToolBox | Rent Details</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="/static/rent_booking.css">
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg navbar-light">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="{{ url_for('home') }}">ToolBox</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNavDropdown">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="categoryDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            Categories
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="categoryDropdown">
+                            {% for category in categories %}
+                            <li><a class="dropdown-item" href="{{ url_for('list_by_category', category_id=category[0]) }}">{{ category[1] }}</a></li>
+                            {% endfor %}
+                        </ul>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="brandDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            Brands
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="brandDropdown">
+                            {% for brand in brands %}
+                            <li><a class="dropdown-item" href="{{ url_for('list_by_brand', brand_id=brand[0]) }}">{{ brand[1] }}</a></li>
+                            {% endfor %}
+                        </ul>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{{ url_for('rent') }}">Rent</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{{ url_for('services') }}">Services</a>
+                    </li>
+                </ul>
+                <form class="d-flex" action="{{ url_for('search') }}" method="GET">
+                    <input class="form-control me-2" type="search" name="query" placeholder="Search" aria-label="Search">
+                    <button class="btn btn-outline-success" type="submit">Search</button>
+                </form>
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Login/Signup"><i class="bi bi-person"></i></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Cart"><i class="bi bi-tools"></i></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#"><u>About Us</u></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#"><u>Contact Us</u></a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="{{ url_for('home') }}">Home</a></li>
+            <li class="breadcrumb-item"><a href="{{ url_for('rent') }}">Rent</a></li>
+            <li class="breadcrumb-item active" aria-current="page">Details</li>
+        </ol>
+    </nav>
+
+    <div class="container mt-5">
+        <div class="row">
+            <div class="col-md-6">
+                <img src="{{ rental_tool[4] }}" class="img-fluid card-img-top" alt="Tool Image">
+            </div>
+            <div class="col-md-6">
+                <h1>{{ rental_tool[1] }}</h1>
+                <p class="text-muted">Rating: {{ rental_tool[5] }}/5</p>
+                <p class="discount">{{ rental_tool[2] }}% off</p>
+                <h2 class="card-title price">£ {{ rental_tool[3] }} per day</h2>
+                 <button class="btn btn-outline-success" data-toggle="modal" data-target="#bookingModal">Rent Now</button>
+            </div>
+        </div>
+
+        <hr class="my-5">
+
+        <div class="row">
+            <div class="col-12">
+                <h2>Specifications</h2>
+                <p>{{ rental_tool[6] }}</p>
+            </div>
+        </div>
+
+        <hr class="my-5">
+
+        <div class="row">
+            <div class="col-12">
+                <h2>Customer Reviews</h2>
+                {% for review in reviews %}
+                <div class="review">
+                    <h4>{{ review[0] }}</h4>
+                    <p class="text-muted">Rating: {{ review[1] }}/5</p>
+                    <p>{{ review[2] }}</p>
+                </div>
+                {% endfor %}
+                <hr>
+                <form method="POST" action="{{ url_for('rent_details', rtool_id=rental_tool[0]) }}" id="reviewForm">
+                    <div class="mb-3">
+                        <label for="review_name" class="form-label">Your Name</label>
+                        <input type="text" class="form-control" id="review_name" name="review_name" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="rating" class="form-label">Rating</label>
+                        <input type="hidden" id="rating" name="rating" required>
+                        <div class="stars" data-rating="0">
+                            <span class="star" data-value="1">&#9733;</span>
+                            <span class="star" data-value="2">&#9733;</span>
+                            <span class="star" data-value="3">&#9733;</span>
+                            <span class="star" data-value="4">&#9733;</span>
+                            <span class="star" data-value="5">&#9733;</span>
+                        </div>
+                    </div>
+                    <div class="mb-3">
+                        <label for="review_text" class="form-label">Review</label>
+                        <textarea class="form-control" id="review_text" name="review_text" rows="3" required></textarea>
+                    </div>
+                    <button type="submit" class="btn btn-outline-success">Submit Review</button>
+                </form>
+            </div>
+        </div>
+    </div>
+
+
+      <div class="modal fade" id="bookingModal" tabindex="-1" role="dialog" aria-labelledby="bookingModalLabel" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="bookingModalLabel">Book Tool</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <form method="POST" action="{{ url_for('book_rental', rtool_id=rental_tool[0]) }}">
+                        <div class="form-group">
+                            <label for="name">Name</label>
+                            <input type="text" class="form-control" id="name" name="name" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="email">Email</label>
+                            <input type="email" class="form-control" id="email" name="email" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="phone">Phone Number</label>
+                            <input type="text" class="form-control" id="phone" name="phone_number" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="address">Address</label>
+                            <input type="text" class="form-control" id="address" name="address" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="rental_date">Rental Date</label>
+                            <input type="date" class="form-control" id="rental_date" name="rental_date" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="return_date">Return Date</label>
+                            <input type="date" class="form-control" id="return_date" name="return_date" required>
+                        </div>
+                        <button type="submit" class="btn btn-outline-success">Rent</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <footer class="bg-dark text-center text-white mt-5">
+        <div class="container p-4 pb-0">
+            <section class="mb-4">
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-facebook"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-twitter"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-google"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-instagram"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-linkedin"></i></a>
+                <a class="btn btn-outline-light btn-floating m-2" href="#!" role="button"><i class="bi bi-github"></i></a>
+            </section>
+            <section class="mb-4">
+                <p>ToolBox - A One-Stop Shop for All Your Tool Needs.</p>
+            </section>
+        </div>
+        <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
+            © 2024 ToolBox
+        </div>
+    </footer>
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const starIcons = document.querySelectorAll('.stars .star');
+            const ratingInput = document.getElementById('rating');
+
+            starIcons.forEach((icon, index) => {
+                icon.addEventListener('click', () => {
+                    const rating = parseInt(icon.dataset.value);
+                    ratingInput.value = rating;
+                    starIcons.forEach(star => star.classList.remove('selected'));
+                    for (let i = 0; i < rating; i++) {
+                        starIcons[i].classList.add('selected');
+                    }
+                });
+            });
+        });
+    </script>
+</body>
+</html>