diff --git a/src/components/FormWorkCreated/FormWorkCreated.jsx b/src/components/FormWorkCreated/FormWorkCreated.jsx
index a0b2a55..7b0975a 100644
--- a/src/components/FormWorkCreated/FormWorkCreated.jsx
+++ b/src/components/FormWorkCreated/FormWorkCreated.jsx
@@ -1,50 +1,51 @@
-import React, { isValidElement } from "react";
-import { NavLink, useNavigate, Link } from "react-router-dom";
+import axios from "axios";
+import { NavLink, useNavigate } from "react-router-dom";
 import { useState, useEffect, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import validation from "../Validations/Validations";
-import { postJobs, getTypes, editPost } from "../../toolkit/ActionsworkPublications";
+import {
+  postJobs,
+  getTypes,
+  editPost,
+} from "../../toolkit/ActionsworkPublications";
 import { getDetailWork } from "../../toolkit/thunks";
 import { useLocalStorage } from "../UseLocalStorage/UseLocalStorage";
 import { getUser } from "../../toolkit/Users/usersHandler";
-
-// Toast
-import { ToastContainer, toast } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
-
-import axios from "axios";
-
-// Components
+import {
+  Button,
+  Card,
+  Input,
+  Option,
+  Select,
+  Textarea,
+  Typography,
+} from "@material-tailwind/react";
+import { ArrowLeftIcon } from "@heroicons/react/24/outline";
+import { toast } from "sonner";
 import Footer from "../Footer/Footer";
 import Nav from "../PanelUser/Nav";
-import { setId } from "@material-tailwind/react/components/Tabs/TabsContext";
-import Loader from "../Loader/Loader";
-
-//_______________________________________
 
 const WorkPerTime = ["/Hora", "/Fijo"];
 const maxSiseMB = 3 * 1024 * 1024; // Tamaño de 3mb para las fotos
 
-
 export default function FormCreateWork() {
-
   const { id } = useParams();
   const dispatch = useDispatch();
-  const dispatch2 = useDispatch();
   const navigate = useNavigate();
-  const ability = useSelector((state) => state.formwork.allWorkTypes)
+  const ability = useSelector((state) => state.formwork.allWorkTypes);
   const [selectedPaymentOption, setSelectedPaymentOption] = useState("");
   const [fileSelected, setFileSelected] = useState(false); //Soluciona el filed seleccionado
+  const [selectKey, setSelectKey] = useState(0);
+  const [selectKey1, setSelectKey1] = useState(1);
   const fileInputRef = useRef(null);
-  const params = useParams()
   const TodosLostrabajos = useSelector((state) => state.work.work);
-  const { userCredentials } = useSelector(state => state.users);
-  const trabajoFiltrado = TodosLostrabajos.find(trabajo => trabajo._id === id); // Usa find en lugar de filter para obtener un solo objeto
-  const { detail } = useSelector(state => state.work)
+  const { userCredentials } = useSelector((state) => state.users);
+  const trabajoFiltrado = TodosLostrabajos.find(
+    (trabajo) => trabajo._id === id
+  ); // Usa find en lugar de filter para obtener un solo objeto
   let numericPrice;
 
-
   const [workdata, setWorkData] = useState({
     title: "",
     description: "",
@@ -54,15 +55,6 @@ export default function FormCreateWork() {
     price: "",
   });
 
-  const [workdata2, setWorkData2] = useState({
-    title: "",
-    description: "",
-    address: "",
-    ability: [],
-    image: "",
-    price: "",
-  });
-
   const [errors, setErrors] = useState({
     title: "",
     description: "",
@@ -70,19 +62,15 @@ export default function FormCreateWork() {
     ability: [],
     image: "",
     price: "",
-
-  })
-
-
+  });
 
   useEffect(() => {
     dispatch(getTypes());
     if (userCredentials && userCredentials.uid === id) {
-      dispatch(getDetailWork(id))
+      dispatch(getDetailWork(id));
       dispatch(getUser(id));
-
     }
-  }, [dispatch, id, userCredentials])
+  }, [dispatch, id, userCredentials]);
 
   function handleChange(event) {
     const { name, value } = event.target;
@@ -92,35 +80,53 @@ export default function FormCreateWork() {
       [name]: value,
     });
 
-    setErrors(validation({
-      ...workdata,
-      [name]: value,
-    }));
-
+    setErrors(
+      validation({
+        ...workdata,
+        [name]: value,
+      })
+    );
   }
 
-  function handleSelect(event) {
-    const typeworkSelect = event.target.value;
+  const handleClick = () => {
+    navigate("/home");
+  };
+
+  function handleSelect(value) {
+    const typeworkSelect = value;
     if (!workdata.ability.includes(typeworkSelect)) {
       setWorkData({
         ...workdata,
-        ability: [...workdata.ability, typeworkSelect]
-      })
+        ability: [...workdata.ability, typeworkSelect],
+      });
     }
   }
 
+  const handleSelectPrice = (value) => {
+    setSelectedPaymentOption(value);
+  };
+
   function handleSubmit(event) {
     event.preventDefault();
     const putUser = async () => {
-      const resultPut = await axios.put(`https://skillhub-back-production.up.railway.app/user/${id}`, {
-        cantidadPost: filterCantidadPost[0] + 1
-      })
-    }
+      const resultPut = await axios.put(
+        `https://skillhub-back-production.up.railway.app/user/${id}`,
+        {
+          cantidadPost: filterCantidadPost[0] + 1,
+        }
+      );
+    };
     putUser();
     let updatedWorkData;
 
     const validateFields = () => {
-      if (!workdata.title || !workdata.description || !workdata.price || !workdata.image || !workdata.address) {
+      if (
+        !workdata.title ||
+        !workdata.description ||
+        !workdata.price ||
+        !workdata.image ||
+        !workdata.address
+      ) {
         toast.error("Completa los datos para continuar");
         return false;
       } else if (!selectedPaymentOption) {
@@ -138,10 +144,15 @@ export default function FormCreateWork() {
       } else if (workdata.description.length > 200) {
         toast.error("La descripción debe tener máximo 200 caracteres");
         return false;
-      } else if (errors.image === "El tamaño de la imagen debe ser inferior a 3MB") {
+      } else if (
+        errors.image === "El tamaño de la imagen debe ser inferior a 3MB"
+      ) {
         toast.error("El peso de la imagen debe ser de máximo 3MB");
         return false;
-      } else if (errors.title === "Prohibido" || errors.description === "Prohibido") {
+      } else if (
+        errors.title === "Prohibido" ||
+        errors.description === "Prohibido"
+      ) {
         toast.error("No está permitido escribir este tipo de servicios");
         return false;
       }
@@ -149,14 +160,12 @@ export default function FormCreateWork() {
     };
 
     if (trabajoFiltrado) {
-      
       numericPrice = parseInt(workdata.price, 10); // Parsear a número
       if (validateFields()) {
         const userConfirmation = window.confirm("¿Editar trabajo?");
         if (userConfirmation) {
           // Concatenar la opción de pago al precio
           const finalPrice = `${numericPrice} ${selectedPaymentOption}`;
-          
 
           updatedWorkData = {
             ...workdata,
@@ -174,7 +183,9 @@ export default function FormCreateWork() {
       }
     } else {
       if (validateFields()) {
-        const userConfirmation = window.confirm("ADVERTENCIA! No podrás modificar el título después.");
+        const userConfirmation = window.confirm(
+          "ADVERTENCIA! No podrás modificar el título después."
+        );
         if (userConfirmation) {
           // Concatenar la opción de pago al precio
           const finalPrice = `${workdata.price} ${selectedPaymentOption}`;
@@ -194,14 +205,12 @@ export default function FormCreateWork() {
       }
     }
   }
-  
 
   //LocalStorage values
-  const [textDesciption, setTextDesciption] = useLocalStorage('text', (''))
-  const [textTitle, setTextTitle] = useLocalStorage('tex1', ' ')
-  const [priceValue, setPriceValue] = useLocalStorage("text2", '')
-  const [directionValue, setDirectionValue] = useLocalStorage("tex3", ' ')
-
+  const [textDesciption, setTextDesciption] = useLocalStorage("text", "");
+  const [textTitle, setTextTitle] = useLocalStorage("tex1", " ");
+  const [priceValue, setPriceValue] = useLocalStorage("text2", "");
+  const [directionValue, setDirectionValue] = useLocalStorage("tex3", " ");
 
   const handleReset = () => {
     setTextTitle("");
@@ -209,12 +218,13 @@ export default function FormCreateWork() {
     setDirectionValue("");
     setPriceValue("");
     setFileSelected(false);
+    setSelectKey((prevKey) => prevKey + 1);
+    setSelectKey1((prevKey) => prevKey + 10);
 
     if (fileInputRef.current) {
       fileInputRef.current.value = "";
     }
 
-
     setWorkData({
       title: "",
       description: "",
@@ -237,24 +247,25 @@ export default function FormCreateWork() {
     }
   }, []);
 
-
-  const [selectWorkType, setSelectWorkType] = useState("");
-
   //Para poder seleccionar y borrar las categorias seleccionadas
   const tiposSelected = workdata.ability.map((cat) => (
     <div key={cat}>
       <span>{cat}</span>
       <button
         onClick={() => handleDelete(cat)}
-        className="p-0.5 ml-1 bg-gray-800 text-white rounded-md w-6 h-6 border-2 border-slate-600 hover:bg-gray-700 hover:shadow-sm transition text-xs flex items-center justify-center"       > x </button>
+        className="p-0.5 ml-1 bg-gray-800 text-white rounded-md w-6 h-6 border-2 border-slate-600 hover:bg-gray-700 hover:shadow-sm transition text-xs flex items-center justify-center"
+      >
+        {" "}
+        x{" "}
+      </button>
     </div>
   ));
 
   function handleDelete(cat) {
     setWorkData({
       ...workdata,
-      ability: workdata.ability.filter(typ => typ !== cat)
-    })
+      ability: workdata.ability.filter((typ) => typ !== cat),
+    });
   }
 
   //Subir imagenes a cloudinary
@@ -262,26 +273,31 @@ export default function FormCreateWork() {
   async function uploadImage(files) {
     const selectedFile = files[0];
 
-
     if (selectedFile) {
       if (selectedFile.size < maxSiseMB) {
         setErrors({
           ...errors,
-          image: ""
+          image: "",
         });
         const imageFormData = new FormData();
         imageFormData.append("file", files[0]);
         imageFormData.append("upload_preset", "PostWorks");
         try {
-          const response = await axios.post("https://api.cloudinary.com/v1_1/dvr9giaia/upload", imageFormData);
+          const response = await axios.post(
+            "https://api.cloudinary.com/v1_1/dvr9giaia/upload",
+            imageFormData
+          );
           const data = response.data.secure_url;
 
           // Actualizar el estado de manera inmutable
-          setWorkData(prevData => ({
+          setWorkData((prevData) => ({
             ...prevData,
-            image: data
+            image: data,
           }));
-          console.log("Esta es la nueva info de setWorkData en img", workdata.image);
+          console.log(
+            "Esta es la nueva info de setWorkData en img",
+            workdata.image
+          );
         } catch (error) {
           console.log("Error en el componente UploadImage en cludinary", error);
         }
@@ -289,29 +305,32 @@ export default function FormCreateWork() {
       } else {
         setErrors({
           ...errors,
-          image: "El tamaño de la imagen debe ser inferior a 3MB"
+          image: "El tamaño de la imagen debe ser inferior a 3MB",
         });
       }
     }
   }
 
-
- // Previsualización de la imagen
- let previewImage = workdata.image ? (
-  <span style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center" }}>
-    <span>Imagen Seleccionada</span>
-    <br />
-    <img
-      src={workdata.image}
-      alt="nature image"
-      style={{ maxWidth: "200px", height: "200px", margin: "auto" }}
-      className="h-96 w-full rounded-lg object-cover object-center shadow-xl shadow-blue-gray-900/50"
-
-    />
-  </span>
-) : null;
-
-
+  // Previsualización de la imagen
+  let previewImage = workdata.image ? (
+    <span
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        textAlign: "center",
+      }}
+    >
+      <span>Imagen Seleccionada</span>
+      <br />
+      <img
+        src={workdata.image}
+        alt="nature image"
+        style={{ maxWidth: "200px", height: "200px", margin: "auto" }}
+        className="h-96 w-full rounded-lg object-cover object-center shadow-xl shadow-blue-gray-900/50"
+      />
+    </span>
+  ) : null;
 
   //Editar tarea
 
@@ -325,262 +344,328 @@ export default function FormCreateWork() {
         image: trabajoFiltrado.image,
         price: trabajoFiltrado.price,
       });
-
     }
   }, [trabajoFiltrado, id]);
-  
-
-const [usuario, setUsuario] = useState([])
-
-useEffect(() => {
-   const getUser = async () => {
-     const response = await axios(`https://skillhub-back-production.up.railway.app/user/`)
-     setUsuario(response.data.filter((element) => element.uid === id))
-     
-     
-   }
-   getUser();
- }, [id])
- 
-
- const filterUser = () => {
-  if (usuario.filter((element) => element.uid === id).map(({ pay }) => pay)[0] === undefined) {
-   return 'No hay suscripción';
-  } else if(!usuario.filter((element) => element.uid === id).map(({ pay }) => pay.subscription)){
-   return 'No hay suscripción';
-  } else if (usuario.filter((element) => element.uid === id).some(({ pay }) => pay.subscription === true)) {
-   return usuario.filter((element) => element.uid === id).map(({ pay }) => pay.plan)[0];
-  } else {
-   return 'No hay suscripción';
-  }
+
+  const [usuario, setUsuario] = useState([]);
+
+  useEffect(() => {
+    const getUser = async () => {
+      const response = await axios(
+        `https://skillhub-back-production.up.railway.app/user/`
+      );
+      setUsuario(response.data.filter((element) => element.uid === id));
+    };
+    getUser();
+  }, [id]);
+
+  const filterUser = () => {
+    if (
+      usuario
+        .filter((element) => element.uid === id)
+        .map(({ pay }) => pay)[0] === undefined
+    ) {
+      return "No hay suscripción";
+    } else if (
+      !usuario
+        .filter((element) => element.uid === id)
+        .map(({ pay }) => pay.subscription)
+    ) {
+      return "No hay suscripción";
+    } else if (
+      usuario
+        .filter((element) => element.uid === id)
+        .some(({ pay }) => pay.subscription === true)
+    ) {
+      return usuario
+        .filter((element) => element.uid === id)
+        .map(({ pay }) => pay.plan)[0];
+    } else {
+      return "No hay suscripción";
+    }
   };
 
-  const filterCantidadPost = usuario.filter((element) => element.uid === id).map(({cantidadPost}) => cantidadPost)
-  const filterCantidadPost2 = usuario.filter((element) => element.uid === id).map(({cantidadPost}) => cantidadPost)[0]
-  
+  const filterCantidadPost = usuario
+    .filter((element) => element.uid === id)
+    .map(({ cantidadPost }) => cantidadPost);
+  const filterCantidadPost2 = usuario
+    .filter((element) => element.uid === id)
+    .map(({ cantidadPost }) => cantidadPost)[0];
 
   const findValidacion = () => {
-   if(filterUser() === 'No hay suscripción') {
-     return 'No se encontro suscripcion activa'
-   }
-   else if (filterUser() === "Plan BRONCE" && filterCantidadPost2 === 2) {
-      return 'cumplio la cantidad'
-   } else if (filterUser() === "Plan ORO" && filterCantidadPost2 === 15) {
-    return 'cumplio la cantidad' 
-    }  else {
-      return 'Suscripción activa'
-   }
-  
-  
-}
-const resultValidacion = findValidacion();
-
+    if (filterUser() === "No hay suscripción") {
+      return "No se encontro suscripcion activa";
+    } else if (filterUser() === "Plan BRONCE" && filterCantidadPost2 === 2) {
+      return "cumplio la cantidad";
+    } else if (filterUser() === "Plan ORO" && filterCantidadPost2 === 15) {
+      return "cumplio la cantidad";
+    } else {
+      return "Suscripción activa";
+    }
+  };
+  const resultValidacion = findValidacion();
 
   return (
-   ( <div>
-    {  userCredentials  && (usuario.length===1 ?resultValidacion === 'Suscripción activa':userCredentials)? 
-
-      <div className="flex flex-col items-center justify-center">
-        <Nav />
-        <div className="relative mt-5">
-          <button
-            onClick={() => navigate(`/user-panel/${id}/home`)}
-            className="absolute right-32 px-4 py-1 bg-gray-700 rounded-md hover:cursor-pointer hover:bg-gray-600 transition-all"
-            >
-            {"<<"}
-          </button>
-        </div>
-           
-
-        <form onSubmit={(event) => handleSubmit(event)}
-          className="flex flex-col justify-center items-center bg-blue-800 bg-opacity-20 p-6 rounded-lg shadow-neutral-900 shadow-lg mb-5" >
-          { trabajoFiltrado ? (
-            <h1 className="text-3xl text-center text-white mb-7 mt-6">
-              Editar
-            </h1>
-
-          ) : <h1 className="text-3xl text-center text-black mb-7 mt-6">
-            ¡Postula tu trabajo!
-          </h1>
-          }
-
-          <div className="flex flex-col">
-            <label htmlFor="title" className="pl-2 mb-1 text-lg">
-              Titulo
-            </label>
-            <input
-              type="text"
-              name="title"
-              value={trabajoFiltrado ? workdata.title : textTitle}
-              placeholder="Que trabajo necesitas"
-              onChange={(event) => {
-                const newValue = event.target.value;
-                handleChange(event);
-                setTextTitle(newValue)
-              }}
-              readOnly = {trabajoFiltrado}
-              className="bg-neutral-900 opacity-50 p-1.5 mb-2 rounded-md w-80 text-neutral-100 text-center outline-none"
-            />
-            {errors.title && <p className="text-red-500">{errors.title}</p>}
-
-
-            <label htmlFor="description" className="pl-2 mb-1 text-lg">
-              Descripción
-            </label>
-            <textarea
-              value={trabajoFiltrado ? workdata.description : textDesciption}
-              name="description"
-              placeholder="Necesito persona con capacidad de..."
-              onChange={(event) => {
-                const newValue = event.target.value;
-                handleChange(event);
-                setTextDesciption(newValue);
-              }}
-              className="bg-neutral-900 opacity-50 p-1.5 mb-2 rounded-md w-80 text-neutral-100 text-center outline-none"
-            ></textarea>
-            {errors.description && <p className="text-red-500">{errors.description}</p>}
-
-
-
-            <label className="pl-2 mb-1 text-lg">
-                Precio:
-              </label>
-              <input
-                type="text"
-                placeholder="$20"
-                name="price"
-                value={
-                  trabajoFiltrado ? workdata.price.split(" ")[0] : priceValue
-                }
-                onChange={(event) => {
-                  const newValue = event.target.value;
-                  handleChange(event);
-                  setPriceValue(newValue)
-                }}
-                className="bg-neutral-900 opacity-50 p-1.5 mb-2 rounded-md w-80 text-neutral-100 text-center outline-none"
-              />
-
-            <label htmlFor="payment" className="pl-2 mb-1 text-lg">
-              Pago
-            </label>
-            <select
-              className="bg-neutral-900 opacity-50 p-1.5 mb-2 rounded-md w-80 text-neutral-100 text-center outline-none"
-              onChange={(event) => setSelectedPaymentOption(event.target.value)}
-              value={selectedPaymentOption}
-            >
-              <option value="">Selecciona una opción de pago</option>
-              {WorkPerTime.map((work, index) => (
-                <option key={index} value={work}>
-                  {work}
-                </option>
-              ))}
-            </select>
-
-            <label htmlFor="ability" className="pl-2 mb-1 text-lg">
-              Categoria
-            </label>
-            <select onChange={(event) => handleSelect(event)}
-              className="bg-neutral-900 opacity-50 p-1.5 mb-2 rounded-md w-80 text-neutral-100 text-center outline-none"
-            >
-              <option value=""> Selecciona una categoría: </option>
-              {
-                ability.map((typ, index) => (
-                  <option
-                    key={index}
-                    value={typ.category}
-                    disabled={workdata.category && workdata.ability.includes(ability.category)}
-                  >
-                    {typ.category}
-                  </option>
-                ))}
-            </select>
-            {tiposSelected.length > 0 && (
-              <div>
-                <span>Categorias seleccionadas:</span>
-                {tiposSelected}
-                {workdata.ability.length > 3 && <p style={{ color: "red" }}>¡No puedes seleccionar más de 3 categorías!</p>}
+    <div>
+      {userCredentials &&
+      (usuario.length === 1
+        ? resultValidacion === "Suscripción activa"
+        : userCredentials) ? (
+        <div className="flex flex-col items-center justify-center">
+          <Nav />
+
+          <div className="my-7">
+            <Card shadow={false} className="bg-[#f8fafc] px-4 py-2 w-96">
+              <div className="">
+                <Button onClick={handleClick} className="flex w-full mb-4">
+                  <ArrowLeftIcon strokeWidth={2} className="h-4 w-4" />
+                </Button>
               </div>
-            )}
-
-
-            <br />
-
-            <label htmlFor="address" className="pl-2 mb-1 text-lg">
-              Dirección:
-            </label>
-            <input
-              type="text"
-              name="address"
-              placeholder="Para servicios físicos"
-              value={trabajoFiltrado ? workdata.address : directionValue}
-              onChange={(event) => {
-                const newValue = event.target.value;
-                handleChange(event);
-                setDirectionValue(newValue)
-              }}
-              className="bg-neutral-900 opacity-50 p-1.5 mb-2 rounded-md w-80 text-neutral-100 text-center outline-none"
-            />
-
-            <label htmlFor="image" className="pl-2 mb-1 text-lg">
-              Imagen:
-            </label>
-            <input
-              type="file"
-              name="image"
-              onChange={(event) => {
-                handleChange(event);
-                uploadImage(event.target.files)
-              }}
-              className="bg-neutral-900 opacity-50 p-1.5 mb-2 rounded-md w-80 text-neutral-100 text-center outline-none"
-              ref={fileInputRef}
-            />
-            {fileSelected && <p>Archivo seleccionado</p>}
-
-
-            {previewImage}
-            {errors.image && (
-              <span style={{ color: "red" }}>{errors.image}</span>
-            )}
-
+              <form
+                onSubmit={(event) => handleSubmit(event)}
+                className="mt-4 mb-4"
+              >
+                {trabajoFiltrado ? (
+                  <Typography
+                    variant="h4"
+                    className="text-3xl text-center text-white mb-7 mt-6"
+                  >
+                    Editar
+                  </Typography>
+                ) : (
+                  <Typography variant="h4" className="mb-2">
+                    ¡Postula tu trabajo!
+                  </Typography>
+                )}
+
+                <div className="mb-4 flex flex-col gap-4">
+                  {/* Title */}
+                  <Input
+                    type="text"
+                    size="lg"
+                    label="Qué trabajo necesitas?"
+                    color="gray"
+                    name="title"
+                    value={trabajoFiltrado ? workdata.title : textTitle}
+                    onChange={(event) => {
+                      const newValue = event.target.value;
+                      handleChange(event);
+                      setTextTitle(newValue);
+                    }}
+                    readOnly={trabajoFiltrado}
+                  />
+                  {errors.title && (
+                    <span className="text-center text-sm text-red-500">
+                      {errors.title}
+                    </span>
+                  )}
+
+                  <Textarea
+                    id="description"
+                    name="description"
+                    value={
+                      trabajoFiltrado ? workdata.description : textDesciption
+                    }
+                    rows={6}
+                    color="gray"
+                    variant="static"
+                    placeholder="Necesito persona con capacidad de..."
+                    onChange={(event) => {
+                      const newValue = event.target.value;
+                      handleChange(event);
+                      setTextDesciption(newValue);
+                    }}
+                    className="p-3 text-[12px] leading-loose font-sans font-normal placeholder:text-blue-gray-500 rounded-md"
+                  />
+                  {errors.description && (
+                    <span className="text-center text-sm text-red-500">
+                      {errors.description}
+                    </span>
+                  )}
+
+                  <Input
+                    type="text"
+                    size="lg"
+                    label="Precio"
+                    color="gray"
+                    name="price"
+                    value={
+                      trabajoFiltrado
+                        ? workdata.price.split(" ")[0]
+                        : priceValue
+                    }
+                    onChange={(event) => {
+                      const newValue = event.target.value;
+                      handleChange(event);
+                      setPriceValue(newValue);
+                    }}
+                  />
+
+                  <Select
+                    label="Tipo de pago"
+                    key={selectKey}
+                    size="lg"
+                    onChange={(value) => handleSelectPrice(value)}
+                  >
+                    {WorkPerTime.map((work, index) => (
+                      <Option
+                        key={index}
+                        value={work}
+                        className="text-gray-800 hover:bg-gray-300 transition duration-150"
+                      >
+                        {work}
+                      </Option>
+                    ))}
+                  </Select>
+
+                  <Select
+                    label="Categorias"
+                    key={selectKey1}
+                    size="lg"
+                    onChange={(value) => handleSelect(value)}
+                  >
+                    {ability.map((typ, index) => (
+                      <Option
+                        key={index}
+                        value={typ.category}
+                        disabled={
+                          workdata.category &&
+                          workdata.ability.includes(ability.category)
+                        }
+                        className="text-gray-800 hover:bg-gray-300 transition duration-150"
+                      >
+                        {typ.category}
+                      </Option>
+                    ))}
+                  </Select>
+                  {tiposSelected.length > 0 && (
+                    <div className="px-1">
+                      <Typography variant="h6" className="mb-2">
+                        Categorias seleccionadas:
+                      </Typography>
+                      <div className="flex flex-col gap-2">
+                        <Typography
+                          variant="small"
+                          className="flex flex-wrap justify-around gap-2 px-4"
+                        >
+                          {tiposSelected}
+                        </Typography>
+                        {workdata.ability.length > 3 && (
+                          <span className="text-center text-sm text-red-500">
+                            ¡No puedes seleccionar más de 3 categorías!
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                  <Input
+                    type="text"
+                    size="lg"
+                    label="Dirección"
+                    color="gray"
+                    name="address"
+                    value={trabajoFiltrado ? workdata.address : directionValue}
+                    onChange={(event) => {
+                      const newValue = event.target.value;
+                      handleChange(event);
+                      setDirectionValue(newValue);
+                    }}
+                  />
+
+                  <Typography variant="h6" className="px-1">
+                    Imagen:
+                  </Typography>
+                  <input
+                    type="file"
+                    name="image"
+                    onChange={(event) => {
+                      handleChange(event);
+                      uploadImage(event.target.files);
+                    }}
+                    className="bg-neutral-800 text-black rounded-sm hover:bg-sky-700"
+                    ref={fileInputRef}
+                  />
+                  {previewImage}
+                  {errors.image && (
+                    <span className="text-center text-sm text-red-500">
+                      {errors.image}
+                    </span>
+                  )}
+                </div>
+                {trabajoFiltrado ? (
+                  <button className="w-full mt-4 bg-[#242121] rounded-md py-3 text-white text-xs hover:shadow-md hover:shadow-blue-gray-500 transition-all font-semibold">
+                    Editar Trabajo
+                  </button>
+                ) : (
+                  <button className="w-full mt-4 bg-[#242121] rounded-md py-3 text-white text-xs hover:shadow-md hover:shadow-blue-gray-500 transition-all font-semibold">
+                    Publicar Trabajo
+                  </button>
+                )}
+                <button
+                  type="button"
+                  onClick={handleReset}
+                  className="w-full mt-2 bg-gray-500 rounded-md py-3 text-white text-xs hover:shadow-md hover:shadow-blue-gray-500 transition-all font-semibold"
+                >
+                  Reset
+                </button>
+              </form>
+            </Card>
           </div>
-          {trabajoFiltrado ? (
-            <button className="p-2 mt-8 bg-blue-800 text-white rounded-md w-48 border-2 border-slate-600 hover:bg-sky-700 hover:shadow-md transition">
-              Editar Trabajo
-            </button>
-
-          ) : <button className="p-2 mt-8 bg-blue-800 text-white rounded-md w-48 border-2 border-slate-600 hover:bg-sky-700 hover:shadow-md transition">
-            Publicar Trabajo
-          </button>}
-          <button
-            type="button"
-            onClick={handleReset}
-            className="p-2 my-3 bg-gray-800 text-white rounded-md w-48 border-2 border-slate-600 hover:bg-gray-700 hover:shadow-md transition"
+        </div>
+      ) : (
+        <div
+          className="flex justify-center items-center"
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            minHeight: "70vh",
+            backgroundColor: "white",
+            color: "black",
+          }}
+        >
+          <p
+            className="title"
+            style={{
+              fontSize: "24px",
+              fontWeight: "bold",
+              marginBottom: "20px",
+              width: "50%",
+              textAlign: "center",
+            }}
           >
-            Reset
-          </button>
-        </form>
-      </div>
-      
-      : (
-        <div className="flex justify-center items-center" style={{ display: "flex", flexDirection: "column", alignItems: "center", minHeight: "70vh", backgroundColor: "white", color: "black"}}>
-              <p className="title" style={{ fontSize: "24px", fontWeight: "bold", marginBottom: "20px", width: "50%", textAlign: "center"}}>
-               No existe suscripcion activa y/o cumplió con el limite permitido de publicaciones. Por favor, accede a un plan para  disfrutar de nuestros beneficios.
+            No existe suscripcion activa y/o cumplió con el limite permitido de
+            publicaciones. Por favor, accede a un plan para disfrutar de
+            nuestros beneficios.
           </p>
-          <p className="title" style={{ fontSize: "18px", fontWeight: "bold", marginBottom: "20px", width: "50%", textAlign: "center"}}>¡Esperamos contar con usted!</p>
-    
-    
+          <p
+            className="title"
+            style={{
+              fontSize: "18px",
+              fontWeight: "bold",
+              marginBottom: "20px",
+              width: "50%",
+              textAlign: "center",
+            }}
+          >
+            ¡Esperamos contar con usted!
+          </p>
+
           <div className="flex justify-between w-1/2">
-          <NavLink to={`/user-panel/${usuario[0].uid}/home`}>
-          <button className="p-2 mt-8 bg-blue-800 text-white rounded-md w-48 border-2 border-slate-600 hover:bg-sky-700 hover:shadow-md transition">Ir al inicio</button>
-          </NavLink>
-          <NavLink to={`/user-panel/${usuario[0].uid}/memberShip`}>
-            <button className="p-2 mt-8 bg-blue-800 text-white rounded-md w-48 border-2 border-slate-600 hover:bg-sky-700 hover:shadow-md transition">Suscripción</button> 
-          </NavLink>
-            </div>
-            </div>
-          )}
+            <NavLink to={`/user-panel/${usuario[0].uid}/home`}>
+              <button className="p-2 mt-8 bg-blue-800 text-white rounded-md w-48 border-2 border-slate-600 hover:bg-sky-700 hover:shadow-md transition">
+                Ir al inicio
+              </button>
+            </NavLink>
+            <NavLink to={`/user-panel/${usuario[0].uid}/memberShip`}>
+              <button className="p-2 mt-8 bg-blue-800 text-white rounded-md w-48 border-2 border-slate-600 hover:bg-sky-700 hover:shadow-md transition">
+                Suscripción
+              </button>
+            </NavLink>
+          </div>
+        </div>
+      )}
       <Footer />
-      <ToastContainer />
-    </div>)
+    </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/tailwind.config.js b/src/tailwind.config.js
deleted file mode 100644
index 20812b1..0000000
--- a/src/tailwind.config.js
+++ /dev/null
@@ -1,23 +0,0 @@
-{import('tailwindcss').Config} 
-export default {
-    purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
-    darkMode: 'class',
-    theme: {
-      extend: {
-        colors: {
-          'dark_purple': '#4700D8',
-          'light_purple': '#AF88FF',
-        },
-        stroke: {
-          'dark_purple': '#4700D8',
-          'light_purple': '#AF88FF',
-        },
-      },
-    },
-    variants: {
-      extend: {
-        stroke: ['dark'],
-      },
-    },
-    plugins: [],
-  };
\ No newline at end of file