diff --git a/components/register/Register.tsx b/components/register/Register.tsx
index 911f97f..c9ed0fa 100644
--- a/components/register/Register.tsx
+++ b/components/register/Register.tsx
@@ -1,144 +1,8 @@
-// "use client";
-// import React, { useRef, useState, useEffect } from "react";
-// import "./Register.css"; // Import CSS for styling
-
-// const Register: React.FC = () => {
-//   const videoRef = useRef<HTMLVideoElement>(null);
-//   const canvasRef = useRef<HTMLCanvasElement>(null);
-//   const [name, setName] = useState<string>("");
-//   const [error, setError] = useState<string>(""); // State for error message
-
-//   // Automatically open the camera when the component mounts
-//   useEffect(() => {
-//     const openCamera = async () => {
-//       try {
-//         const stream = await navigator.mediaDevices.getUserMedia({
-//           video: true,
-//         });
-//         if (videoRef.current) {
-//           videoRef.current.srcObject = stream;
-//         }
-//       } catch (err) {
-//         console.error("Error accessing the camera", err);
-//       }
-//     };
-
-//     openCamera();
-//   }, []);
-
-//   // Capture image from video stream
-//   const captureImage = () => {
-//     if (!name.trim()) {
-//       setError("Name is required"); // Set error message if name is empty
-//       return;
-//     }
-
-//     const video = videoRef.current;
-//     const canvas = canvasRef.current;
-
-//     if (video && canvas) {
-//       const context = canvas.getContext("2d");
-//       if (context) {
-//         // Draw the current frame from the video on the canvas
-//         context.drawImage(video, 0, 0, canvas.width, canvas.height);
-//         canvas.toBlob((blob) => {
-//           if (blob) {
-//             const file = new File([blob], "captured-image.png", {
-//               type: "image/png",
-//             });
-//             callApi(name, file);
-//           }
-//         }, "image/png");
-//       }
-//     }
-//   };
-
-//   // Call API with name and image file
-//   const callApi = async (name: string, file: File) => {
-//     const formData = new FormData();
-//     formData.append("name", name);
-//     formData.append("image", file);
-
-//     try {
-//       const startTime = performance.now();
-//       const response = await fetch(
-//         `${process.env.NEXT_PUBLIC_BASE_URL}/register`,
-//         {
-//           method: "POST",
-//           body: formData,
-//         }
-//       );
-
-//       // End measuring time
-//       const endTime = performance.now();
-//       const totalTime = (endTime - startTime) / 1000; // Convert milliseconds to seconds
-
-//       if (response.ok) {
-//         const data = await response.json();
-//         console.log("API call successful");
-//         alert(
-//           `Message: ${data.message}\nName: ${
-//             data?.name
-//           }\nTime taken: ${totalTime.toFixed(2)} seconds`
-//         ); // Show success message with time taken
-//         setError(""); // Clear error message on success
-//       } else {
-//         console.error("API call failed");
-//         setError("Failed to register. Please try again."); // Set error message on failure
-//       }
-//     } catch (error) {
-//       console.error("Error calling API", error);
-//       setError("An error occurred. Please try again."); // Set error message on exception
-//     }
-//   };
-
-//   return (
-//     <div className="container">
-//       <h1 className="title">Face Capture Form</h1>
-//       <form className="form">
-//         <div className="form-group">
-//           <label htmlFor="name" className="label">
-//             Name:
-//           </label>
-//           <input
-//             id="name"
-//             type="text"
-//             value={name}
-//             onChange={(e) => {
-//               setName(e.target.value);
-//               setError(""); // Clear error message when user starts typing
-//             }}
-//             className="input"
-//             placeholder="Enter your name"
-//             required
-//           />
-//           {error && !name.trim() && (
-//             <p className="error-message">{error}</p> // Display error message if name is empty
-//           )}
-//         </div>
-//         <div className="video-container">
-//           <video ref={videoRef} autoPlay playsInline className="video" />
-//         </div>
-//         <button type="button" onClick={captureImage} className="capture-button">
-//           Capture Image
-//         </button>
-//         <canvas
-//           ref={canvasRef}
-//           style={{ display: "none" }}
-//           width="640"
-//           height="480"
-//         />
-//       </form>
-//     </div>
-//   );
-// };
-
-// export default Register;
-
-
 "use client";
 import React, { useRef, useState, useEffect } from "react";
 import "./Register.css"; // Import CSS for styling
+import { toast } from "@/hooks/use-toast";
+import { Button } from "../ui/button";
 
 const Register: React.FC = () => {
   const videoRef = useRef<HTMLVideoElement>(null);
@@ -235,18 +99,19 @@ const Register: React.FC = () => {
 
       if (response.ok) {
         const data = await response.json();
-        console.log("API call successful");
-        alert(
-          `Message: ${data.message}\nName: ${data?.name}\nTime taken: ${totalTime.toFixed(2)} seconds`
-        ); // Show success message with time taken
-        setError(""); // Clear error message on success
+        console.log("API call successful", totalTime);
+        toast({
+          title: data.message,
+          description: `Name: ${data?.name} `,
+        });
+        setError("");
       } else {
         console.error("API call failed");
-        setError("Failed to register. Please try again."); // Set error message on failure
+        setError("Failed to register. Please try again.");
       }
     } catch (error) {
       console.error("Error calling API", error);
-      setError("An error occurred. Please try again."); // Set error message on exception
+      setError("An error occurred. Please try again.");
     }
   };
 
@@ -275,15 +140,20 @@ const Register: React.FC = () => {
           )}
         </div>
 
-        <div className="video-container">
-          <video ref={videoRef} autoPlay playsInline className="video" />
-          <button
+        <div className="mb-5">
+          <video
+            ref={videoRef}
+            autoPlay
+            playsInline
+            className="w-full max-w-[500px] rounded-lg shadow-md scale-x-[-1]"
+          />
+          <Button
             type="button"
             onClick={captureImage}
             className="capture-button"
           >
             Capture Image
-          </button>
+          </Button>
         </div>
         <div>Or</div>
 
diff --git a/components/search/Search.css b/components/search/Search.css
index 59d0871..b899780 100644
--- a/components/search/Search.css
+++ b/components/search/Search.css
@@ -43,6 +43,6 @@
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
-.upload-container{
+.upload-container {
   margin-top: 12px;
 }
diff --git a/components/search/Search.tsx b/components/search/Search.tsx
index afe0f5a..0ea7027 100644
--- a/components/search/Search.tsx
+++ b/components/search/Search.tsx
@@ -1,105 +1,7 @@
-// import React, { useRef, useEffect } from "react";
-// import "./Search.css"; // Import CSS for styling
-
-// const Search: React.FC = () => {
-//   const videoRef = useRef<HTMLVideoElement>(null);
-//   const canvasRef = useRef<HTMLCanvasElement>(null);
-
-//   // Automatically open the camera when the component mounts
-//   useEffect(() => {
-//     const openCamera = async () => {
-//       try {
-//         const stream = await navigator.mediaDevices.getUserMedia({
-//           video: true,
-//         });
-//         if (videoRef.current) {
-//           videoRef.current.srcObject = stream;
-//         }
-//       } catch (err) {
-//         console.error("Error accessing the camera", err);
-//       }
-//     };
-
-//     openCamera();
-//   }, []);
-
-//   // Capture image from video stream
-//   const captureImage = () => {
-//     const video = videoRef.current;
-//     const canvas = canvasRef.current;
-
-//     if (video && canvas) {
-//       const context = canvas.getContext("2d");
-//       if (context) {
-//         context.drawImage(video, 0, 0, canvas.width, canvas.height);
-//         canvas.toBlob((blob) => {
-//           if (blob) {
-//             const file = new File([blob], "captured-image.png", {
-//               type: "image/png",
-//             });
-//             callApi(file);
-//           }
-//         }, "image/png");
-//       }
-//     }
-//   };
-
-//   // Call API with the captured image file
-//   const callApi = async (file: File) => {
-//     const formData = new FormData();
-//     formData.append("image", file); // Append the file to the form data
-
-//     try {
-//       const startTime = performance.now();
-//       const response = await fetch(
-//         `${process.env.NEXT_PUBLIC_BASE_URL}/search`,
-//         {
-//           method: "POST",
-//           body: formData, // Send the form data
-//         }
-//       );
-//       // End measuring time
-//       const endTime = performance.now();
-//       const totalTime = (endTime - startTime) / 1000;
-//       if (response.ok) {
-//         const data = await response.json();
-//         console.log("API call successful", data);
-//         alert(
-//           `Search result: ${data.message}\nName: ${
-//             data?.name
-//           }\nTime taken: ${totalTime.toFixed(2)} seconds`
-//         );
-//       } else {
-//         console.error("API call failed");
-//       }
-//     } catch (error) {
-//       console.error("Error calling API", error);
-//     }
-//   };
-
-//   return (
-//     <div className="search-container">
-//       <h2>Search</h2>
-//       <div className="video-container">
-//         <video ref={videoRef} autoPlay playsInline className="video" />
-//       </div>
-//       <button type="button" onClick={captureImage} className="capture-button">
-//         Capture Image
-//       </button>
-//       <canvas
-//         ref={canvasRef}
-//         style={{ display: "none" }}
-//         width="640"
-//         height="480"
-//       />
-//     </div>
-//   );
-// };
-
-// export default Search;
-
 import React, { useRef, useEffect } from "react";
 import "./Search.css"; // Import CSS for styling
+import { Button } from "../ui/button";
+import { toast } from "@/hooks/use-toast";
 
 const Search: React.FC = () => {
   const videoRef = useRef<HTMLVideoElement>(null);
@@ -169,11 +71,12 @@ const Search: React.FC = () => {
       if (response.ok) {
         const data = await response.json();
         console.log("API call successful", data);
-        alert(
-          `Search result: ${data.message}\nName: ${
-            data?.name
-          }\nTime taken: ${totalTime.toFixed(2)} seconds`
-        );
+        toast({
+          title: data.message,
+          description: `Name: ${data?.name}\n\nTime taken: ${totalTime.toFixed(
+            2
+          )} seconds`,
+        });
       } else {
         console.error("API call failed");
       }
@@ -188,9 +91,9 @@ const Search: React.FC = () => {
       <div className="video-container">
         <video ref={videoRef} autoPlay playsInline className="video" />
       </div>
-      <button type="button" onClick={captureImage} className="capture-button">
+      <Button type="button" onClick={captureImage} className="capture-button">
         Capture Image
-      </button>
+      </Button>
       <div>Or</div>
       <div className="upload-container">
         <label htmlFor="upload" className="upload-label">