diff --git a/src/App.css b/src/App.css
index 6f43860..d85ffcd 100644
--- a/src/App.css
+++ b/src/App.css
@@ -7,12 +7,12 @@
   justify-content: center;
   align-items: center;
   width: 100vw;
-  height: 100vh;
+  height: 93vh;
 }
 
 .Auth-form {
-  width: 420px;
-  box-shadow: rgb(0 0 0 / 16%) 1px 1px 10px;
+  width: 350px;
+  box-shadow: rgb(0 113 159 / 16%) 1px 1px 10px;
   padding-top: 30px;
   padding-bottom: 20px;
   border-radius: 8px;
diff --git a/src/App.tsx b/src/App.tsx
index 296ea83..8e36088 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,7 +2,7 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import './App.css'
 import { Login } from './Components/Login/Login'
-import { RptViajesPendientes } from './Components/Reportes/RptViajesPendientes'
+import { OpViajes } from './Components/Operaciones/OpViajes'
 import { Home } from './Components/Home/Home'
 import { useEffect } from 'react'
 import { useSelector } from 'react-redux'
@@ -39,11 +39,8 @@ function App() {
           <Route path='/' element={<Home />}></Route>
           <Route path='login' element={<Login />}></Route>
           <Route path='logout' element={<Logout />}></Route>
-          {/* <Route element={<ProtectedRoute auth={UserLogued} />}>
-            <Route path='RptViajesPendientes' element={<RptViajesPendientes />} />
-          </Route> */}
           <Route element={<ProtectedRoute />}>
-            <Route path='RptViajesPendientes' element={<RptViajesPendientes />} />
+            <Route path='OpViajes' element={<OpViajes />} />
             <Route path='CatClientes' element={<CatClientes />} />
             <Route path='CatProveedores' element={<CatProveedores />} />
             <Route path='CatTipoUnidades' element={<CatTipoUnidades />} />
diff --git a/src/Components/Catalogos/CatClientes.tsx b/src/Components/Catalogos/CatClientes.tsx
index b8604a2..78b53db 100644
--- a/src/Components/Catalogos/CatClientes.tsx
+++ b/src/Components/Catalogos/CatClientes.tsx
@@ -103,10 +103,6 @@ export const CatClientes: FC<IProps> = (props) => {
     setShowCatClientesDialog(false)
   }
 
-  const filtraReporte = (e: any) => {
-    setSearch(e.target.value)
-  }
-
   return (
     <div>
       <Row>
@@ -123,7 +119,7 @@ export const CatClientes: FC<IProps> = (props) => {
                     size='sm'
                     placeholder='Search...'
                     onChange={(e) => {
-                      filtraReporte(e)
+                      setSearch(e.target.value)
                     }}
                   />
                 </Col>
diff --git a/src/Components/Catalogos/CatRutas.tsx b/src/Components/Catalogos/CatRutas.tsx
index d693ada..4147718 100644
--- a/src/Components/Catalogos/CatRutas.tsx
+++ b/src/Components/Catalogos/CatRutas.tsx
@@ -27,6 +27,7 @@ export const CatRutas: FC<IProps> = (props) => {
   const [IDServicio, setIDServicio] = useState(0)
   const [Precio, setPrecio] = useState(0)
   const [Costo, setCosto] = useState(0)
+  const [Search, setSearch] = useState('')
   const [CatRutas, setCatRutas] = useState<DTOCatRutas[]>([])
   const columnsConcepts = [
     {
@@ -359,13 +360,23 @@ export const CatRutas: FC<IProps> = (props) => {
                   </Form.Control>
                 </Col>
               </Row>
-              <Row>
+              <Row style={{ paddingTop: '20px' }}>
                 <Col>
                   <Button variant='warning' onClick={() => clearForm()}>
                     Nuevo
                   </Button>
                 </Col>
-                <Col xs={10}>&nbsp;</Col>
+                <Col xs={10}>
+                  {' '}
+                  <Form.Control
+                    type='text'
+                    size='sm'
+                    placeholder='Search...'
+                    onChange={(e) => {
+                      setSearch(e.target.value)
+                    }}
+                  />
+                </Col>
                 <Col>
                   <Button variant='primary' onClick={() => saveInfo()}>
                     Guardar
@@ -384,7 +395,16 @@ export const CatRutas: FC<IProps> = (props) => {
                     pagination
                     highlightOnHover
                     columns={columnsConcepts}
-                    data={CatRutas}
+                    data={CatRutas.filter(function (row: DTOCatRutas) {
+                      return (
+                        row.sCliente.toLowerCase().includes(Search.toLowerCase()) ||
+                        row.sProveedor.toLowerCase().includes(Search.toLowerCase()) ||
+                        row.sServicio.toLowerCase().includes(Search.toLowerCase()) ||
+                        row.sOrigen.toLowerCase().includes(Search.toLowerCase()) ||
+                        row.sDestino.toLowerCase().includes(Search.toLowerCase()) ||
+                        row.sTipoUnidad.toLowerCase().includes(Search.toLowerCase())
+                      )
+                    })}
                     pointerOnHover
                   />
                 </Col>
diff --git a/src/Components/Home/Home.tsx b/src/Components/Home/Home.tsx
index b8d87dc..a8c6536 100644
--- a/src/Components/Home/Home.tsx
+++ b/src/Components/Home/Home.tsx
@@ -15,6 +15,7 @@ import { populateCatUbicaciones } from '../../store/features/Catalogos/CatUbicac
 import { populateCatServicios } from '../../store/features/Catalogos/CatServiciosSlice'
 import { populateUserProfile } from '../../store/features/Auth/UserProfileSlice'
 import { populateMenuItems } from '../../store/features/Auth/MenuItemsSlice'
+import Leyend from '../../images/leyend.png'
 
 interface IProps {}
 
@@ -74,7 +75,9 @@ export const Home: FC<IProps> = (props) => {
 
   return (
     <div>
-      <h1>This is the Alpha Omega Logistics landing page</h1>
+      <div className='centerV'>
+        <img src={Leyend} alt='' />
+      </div>
       <Outlet />
     </div>
   )
diff --git a/src/Components/Login/Login.tsx b/src/Components/Login/Login.tsx
index e66d22e..1fa4ffa 100644
--- a/src/Components/Login/Login.tsx
+++ b/src/Components/Login/Login.tsx
@@ -3,19 +3,37 @@ import { useNavigate } from 'react-router-dom'
 import IAuth from '../../Interfaces/Auth/IAuth'
 import DSAuth from '../../Services/Auth/Auth.Services'
 import { useDispatch, useSelector } from 'react-redux'
-import { populateMenuItems } from '../../store/features/Auth/MenuItemsSlice'
+import DSCatClientes from '../../Services/Catalogos/CatClientes.Services'
+import DSCatProveedores from '../../Services/Catalogos/CatProveedores.Services'
+import DSCatTipoUnidades from '../../Services/Catalogos/CatTipoUnidades.Services'
+import DSCatUbicaciones from '../../Services/Catalogos/CatUbicaciones.Services'
+import DSCatServicios from '../../Services/Catalogos/CatServicios.Service'
+import { populateCatClientes } from '../../store/features/Catalogos/CatClientesSlice'
+import { populateCatProveedores } from '../../store/features/Catalogos/CatProveedoresSlice'
+import { populateCatTipoUnidades } from '../../store/features/Catalogos/CatTipoUnidadesSlice'
+import { populateCatUbicaciones } from '../../store/features/Catalogos/CatUbicacionesSlice'
+import { populateCatServicios } from '../../store/features/Catalogos/CatServiciosSlice'
 import { populateUserProfile } from '../../store/features/Auth/UserProfileSlice'
+import { populateMenuItems } from '../../store/features/Auth/MenuItemsSlice'
+import { RootState } from '../../store/store'
+import Leyend from '../../images/leyend.png'
+import jwt_decode from 'jwt-decode'
+import IjwtStructure from '../../Interfaces/Auth/IjwtStructure'
 
 interface IProps {}
 
 export const Login: FC<IProps> = (props) => {
   const navigate = useNavigate()
   const dispatch = useDispatch()
+  const UserLogued = useSelector((state: RootState) => state.UserProfile.UserProfile.logueado)
   const [Usuario, setUsuario] = useState('')
   const [Contrasena, setContrasena] = useState('')
   const [token, setToken] = useState<string>(
     (window.localStorage.getItem('token') ? window.localStorage.getItem('token') : '')!
   )
+  const [menuStr, setMenuStr] = useState<string>(
+    (window.localStorage.getItem('menu') ? window.localStorage.getItem('menu') : '')!
+  )
 
   const Login = () => {
     const data: IAuth = {
@@ -27,8 +45,10 @@ export const Login: FC<IProps> = (props) => {
         localStorage.setItem('token', response.data.token)
         localStorage.setItem('menu', JSON.stringify(response.data.menu))
         setToken(response.data.token)
+        localStorage.setItem('tokenInfo', JSON.stringify(jwt_decode(response.data.token)))
         dispatch(populateMenuItems(response.data.menu))
         dispatch(populateUserProfile(response.data.token))
+        loadCatalogs()
         navigate('/', { replace: true })
       })
       .catch((e: Error) => {
@@ -36,14 +56,59 @@ export const Login: FC<IProps> = (props) => {
       })
   }
 
+  const loadCatalogs = () => {
+    DSCatClientes.Get()
+      .then((response) => {
+        dispatch(populateCatClientes(response.data))
+      })
+      .catch((e: Error) => {})
+    DSCatProveedores.Get()
+      .then((response) => {
+        dispatch(populateCatProveedores(response.data))
+      })
+      .catch((e: Error) => {})
+    DSCatTipoUnidades.Get()
+      .then((response) => {
+        dispatch(populateCatTipoUnidades(response.data))
+      })
+      .catch((e: Error) => {})
+    DSCatUbicaciones.Get()
+      .then((response) => {
+        dispatch(populateCatUbicaciones(response.data))
+      })
+      .catch((e: Error) => {})
+    DSCatServicios.Get()
+      .then((response) => {
+        dispatch(populateCatServicios(response.data))
+      })
+      .catch((e: Error) => {})
+  }
+
+  const validateToken = () => {
+    DSAuth.Validate()
+      .then((response) => {
+        dispatch(populateMenuItems(JSON.parse(menuStr)))
+        dispatch(populateUserProfile(token))
+        loadCatalogs()
+        navigate('/', { replace: true })
+      })
+      .catch((e: Error) => {})
+  }
+
+  useEffect(() => {
+    if (!UserLogued) validateToken()
+  }, [token])
+
   return (
     <div>
       <div className='Auth-form-container'>
         <form className='Auth-form'>
           <div className='Auth-form-content'>
-            <h3 className='Auth-form-title'>AOL</h3>
+            <h3 className='Auth-form-title'>
+              <img src={Leyend} alt='' height='50' />
+            </h3>
             <div className='form-group mt-3'>
-              <label>Usuario</label>
+              <label style={{ color: '#00719F', paddingLeft: '5px' }}>Usuario</label>
               <input
                 type='email'
                 className='form-control mt-1'
@@ -54,7 +119,7 @@ export const Login: FC<IProps> = (props) => {
               />
             </div>
             <div className='form-group mt-3'>
-              <label>Contraseña</label>
+              <label style={{ color: '#00719F' }}>Contraseña</label>
               <input
                 type='password'
                 className='form-control mt-1'
@@ -67,7 +132,8 @@ export const Login: FC<IProps> = (props) => {
             <div className='d-grid gap-2 mt-3'>
               <button
                 type='button'
-                className='btn btn-primary'
+                className='btn'
+                style={{ backgroundColor: '#00719F', color: '#FFFFFF' }}
                 onClick={() => {
                   Login()
                 }}
diff --git a/src/Components/Navbar/Navbar.tsx b/src/Components/Navbar/Navbar.tsx
index a1b3641..13ea168 100644
--- a/src/Components/Navbar/Navbar.tsx
+++ b/src/Components/Navbar/Navbar.tsx
@@ -3,6 +3,7 @@ import { useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
 import IMenu from '../../Interfaces/Auth/IMenu'
 import { RootState } from '../../store/store'
+import Logo from '../../images/logo.png'
 
 interface Isubmenu {
   menu: IMenu[]
@@ -33,7 +34,9 @@ function AOLNavbar() {
   return (
     <Navbar bg='light'>
       <Container>
-        <Navbar.Brand href='#home'>AOL</Navbar.Brand>
+        <Navbar.Brand to='/' as={Link}>
+          <img src={Logo} alt='' height='30' />
+        </Navbar.Brand>
         <Navbar.Toggle />
         <Navbar.Collapse id='basic-navbar-nav'>
           <Nav className='me-auto'>
diff --git a/src/Components/Operaciones/OpViajes.tsx b/src/Components/Operaciones/OpViajes.tsx
new file mode 100644
index 0000000..941fe34
--- /dev/null
+++ b/src/Components/Operaciones/OpViajes.tsx
@@ -0,0 +1,524 @@
+import React, { FC, useEffect, useState } from 'react'
+import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap'
+import DataTable from 'react-data-table-component'
+import { IconContext } from 'react-icons'
+import { BsFillPencilFill, BsPatchPlusFill, BsPlusSquareFill } from 'react-icons/bs'
+import { useSelector } from 'react-redux'
+import { setOriginalNode } from 'typescript'
+import DTOOpViajes from '../../DTOs/Operaciones/DTOViajes'
+import DSOpViajes from '../../Services/Operaciones/OpViajes.Services'
+import { RootState } from '../../store/store'
+
+interface IProps {}
+
+export const OpViajes: FC<IProps> = (props) => {
+  const Info = JSON.parse(localStorage.getItem('tokenInfo') || '[]')
+  const UserID = Info.UserId
+  const CatClientes = useSelector((state: RootState) => state.CatClientes.CatClientes)
+  const CatProveedores = useSelector((state: RootState) => state.CatProveedores.CatProveedores)
+  const CatTipoUnidades = useSelector((state: RootState) => state.CatTipoUnidades.CatTipoUnidades)
+  const CatUbicaciones = useSelector((state: RootState) => state.CatUbicaciones.CatUbicaciones)
+  const CatServicios = useSelector((state: RootState) => state.CatServicios.CatServicios)
+  const [OpViajes, setOpViajes] = useState<DTOOpViajes[]>([])
+  const [showTripDialog, setShowTripDialog] = useState(false)
+  const [NoCaja, setNoCaja] = useState('')
+  const [IDViaje, setIDViaje] = useState(0)
+  const [IDCliente, setIDCliente] = useState(0)
+  const [IDProveedor, setIDProveedor] = useState(0)
+  const [IDServicio, setIDServicio] = useState(0)
+  const [IDTipoUnidad, setIDTipoUnidad] = useState(0)
+  const [IDOrigen, setIDOrigen] = useState(0)
+  const [IDDestino, setIDDestino] = useState(0)
+  const [RefAA, setRefAA] = useState('')
+  const [PickUpNumber, setPickUpNumber] = useState('')
+  const [Hazmat, setHazmat] = useState(0)
+  const [Search, setSearch] = useState('')
+  const dataConcepts = [
+    {
+      name: 'id',
+      width: '70px',
+      selector: (row: DTOOpViajes) => row.id,
+      sortable: true,
+    },
+    {
+      name: 'Cliente',
+      width: '250px',
+      selector: (row: DTOOpViajes) => row.sCliente,
+      sortable: true,
+    },
+    {
+      name: 'Servicio',
+      width: '150px',
+      selector: (row: DTOOpViajes) => row.sServicio,
+      sortable: true,
+    },
+    {
+      name: 'Proveedor',
+      width: '250px',
+      selector: (row: DTOOpViajes) => row.sProveedor,
+      sortable: true,
+    },
+    {
+      name: 'Origen',
+      width: '150px',
+      selector: (row: DTOOpViajes) => row.sOrigen,
+      sortable: true,
+    },
+    {
+      name: 'Destino',
+      width: '150px',
+      selector: (row: DTOOpViajes) => row.sDestino,
+      sortable: true,
+    },
+    {
+      name: 'Tipo Unidad',
+      width: '150px',
+      selector: (row: DTOOpViajes) => row.sTipoUnidad,
+      sortable: true,
+    },
+    {
+      name: 'NoCaja',
+      width: '150px',
+      selector: (row: DTOOpViajes) => row.noCaja,
+      sortable: true,
+    },
+    {
+      name: 'Hazmat',
+      width: '90px',
+      selector: (row: DTOOpViajes) => (row.hazmat === 1 ? 'Si' : 'No'),
+      sortable: true,
+    },
+    {
+      name: 'Ref A.A.',
+      width: '110px',
+      selector: (row: DTOOpViajes) => row.refAgenciaAduanal,
+      sortable: true,
+    },
+    {
+      name: 'PickUp No',
+      width: '110px',
+      selector: (row: DTOOpViajes) => row.pickUpNumber,
+      sortable: true,
+    },
+    {
+      name: 'Editar',
+      width: '80px',
+      cell: (row: DTOOpViajes) => (
+        <div
+          style={{ textAlign: 'center', cursor: 'pointer' }}
+          onClick={() => {
+            showInfo(row)
+          }}
+        >
+          <IconContext.Provider value={{ color: 'blue', size: '21px' }}>
+            <BsFillPencilFill />
+          </IconContext.Provider>
+        </div>
+      ),
+      sortable: true,
+    },
+  ]
+
+  const showInfo = (row: DTOOpViajes) => {
+    setIDViaje(row.id)
+    setRefAA(row.refAgenciaAduanal)
+    setIDCliente(row.cliente)
+    setIDServicio(row.servicio)
+    setIDProveedor(row.proveedor)
+    setIDTipoUnidad(row.tipoUnidad)
+    setNoCaja(row.noCaja)
+    setIDOrigen(row.origen)
+    setIDDestino(row.destino)
+    setHazmat(row.hazmat)
+    setPickUpNumber(row.pickUpNumber)
+    setShowTripDialog(true)
+  }
+
+  const newTrip = () => {
+    setIDViaje(0)
+    setRefAA('')
+    setIDCliente(0)
+    setIDServicio(0)
+    setIDProveedor(0)
+    setIDTipoUnidad(0)
+    setNoCaja('')
+    setIDOrigen(0)
+    setIDDestino(0)
+    setHazmat(0)
+    setPickUpNumber('')
+    setShowTripDialog(true)
+  }
+
+  const saveInfo = () => {
+    const data: DTOOpViajes = {
+      id: IDViaje,
+      fAlta: '',
+      usuario: UserID,
+      fCruce: '',
+      refAgenciaAduanal: RefAA,
+      cliente: IDCliente,
+      sCliente: '',
+      proveedor: IDProveedor,
+      sProveedor: '',
+      tipoUnidad: IDTipoUnidad,
+      sTipoUnidad: '',
+      servicio: IDServicio,
+      sServicio: '',
+      origen: IDOrigen,
+      sOrigen: '',
+      destino: IDDestino,
+      sDestino: '',
+      hazmat: Hazmat,
+      noCaja: NoCaja,
+      pickUpNumber: PickUpNumber,
+    }
+    DSOpViajes.Append(data)
+      .then((response) => {
+        loadTrips()
+      })
+      .catch((e: Error) => {})
+  }
+
+  useEffect(() => {
+    loadTrips()
+  }, [])
+
+  /*   useEffect(() => {
+    console.log(UserID)
+  }, [UserID]) */
+
+  const loadTrips = () => {
+    DSOpViajes.Get()
+      .then((response) => {
+        setOpViajes(response.data)
+      })
+      .catch((e: Error) => {})
+  }
+
+  return (
+    <div>
+      <Card>
+        <Card.Title style={{ textAlign: 'left' }}>
+          <Alert variant='primary'>
+            <Row>
+              <Col xs={2} style={{ textAlign: 'right' }}>
+                AOL : Monitor de viajes
+              </Col>
+              <Col xs={1} style={{ textAlign: 'left', cursor: 'pointer' }}>
+                <div
+                  onClick={() => {
+                    newTrip()
+                  }}
+                  title='De un click aqui para crear un nuevo viaje'
+                >
+                  <IconContext.Provider value={{ color: 'green', size: '28px' }}>
+                    <BsPlusSquareFill />
+                  </IconContext.Provider>
+                </div>
+              </Col>
+              <Col xs={9}></Col>
+            </Row>
+          </Alert>
+        </Card.Title>
+      </Card>
+      <Row>
+        <Col xs={12}>&nbsp;</Col>
+      </Row>
+      <Row>
+        <Col xs={12}>
+          <Form.Control
+            type='text'
+            size='sm'
+            placeholder='Search...'
+            onChange={(e) => {
+              setSearch(e.target.value)
+            }}
+          />
+        </Col>
+      </Row>
+      <Card>
+        <Card.Body>
+          <DataTable
+            noHeader
+            defaultSortFieldId={'id'}
+            defaultSortAsc={true}
+            striped={true}
+            dense={true}
+            paginationPerPage={10}
+            pagination
+            highlightOnHover
+            columns={dataConcepts}
+            data={OpViajes.filter(function (row: DTOOpViajes) {
+              return (
+                row.sCliente.toLowerCase().includes(Search.toLowerCase()) ||
+                row.sProveedor.toLowerCase().includes(Search.toLowerCase()) ||
+                row.sOrigen.toLowerCase().includes(Search.toLowerCase()) ||
+                row.sDestino.toLowerCase().includes(Search.toLowerCase()) ||
+                row.sServicio.toLowerCase().includes(Search.toLowerCase()) ||
+                row.sTipoUnidad.toLowerCase().includes(Search.toLowerCase()) ||
+                row.noCaja.toLowerCase().includes(Search.toLowerCase()) ||
+                row.refAgenciaAduanal.toLowerCase().includes(Search.toLowerCase()) ||
+                row.pickUpNumber.toLowerCase().includes(Search.toLowerCase())
+              )
+            })}
+          />
+        </Card.Body>
+      </Card>
+      <Modal
+        show={showTripDialog}
+        onHide={() => {
+          setShowTripDialog(false)
+        }}
+      >
+        <Modal.Header closeButton></Modal.Header>
+        <Modal.Body>
+          <Row>
+            <Col xs={12} style={{ textAlign: 'center', fontSize: '23px', fontWeight: 'bold', fontFamily: 'Arial' }}>
+              <Alert variant='primary'>Informacion del viaje</Alert>
+            </Col>
+          </Row>
+          <Row>
+            <Col xs={3} className='dialogLabel'>
+              No viaje
+            </Col>
+            <Col xs={2}>
+              <Form.Control type='text' id='IDCliente' value={IDCliente} disabled size='sm' />
+            </Col>
+            <Col className='dialogLabel' xs={2}>
+              Ref AA
+            </Col>
+            <Col>
+              <Form.Control
+                type='text'
+                id='RefAA'
+                value={RefAA}
+                size='sm'
+                onChange={(e) => {
+                  setRefAA(e.target.value)
+                }}
+              />
+            </Col>
+          </Row>
+          <Row style={{ paddingTop: '10px' }}>
+            <Col xs={3} className='dialogLabel'>
+              Cliente
+            </Col>
+            <Col xs={9}>
+              <Form.Control
+                as='select'
+                onChange={(e) => {
+                  setIDCliente(parseInt(e.target.value))
+                }}
+                value={IDCliente}
+                className='form-select form-select-sm'
+              >
+                <option value='0'>-SELECCIONE-</option>
+                {CatClientes
+                  ? CatClientes.map((c) => {
+                      return (
+                        <option key={c.id} value={c.id}>
+                          {c.cliente}
+                        </option>
+                      )
+                    })
+                  : null}
+              </Form.Control>
+            </Col>
+          </Row>
+          <Row style={{ paddingTop: '10px' }}>
+            <Col xs={3} className='dialogLabel'>
+              Servicio
+            </Col>
+            <Col xs={9}>
+              <Form.Control
+                as='select'
+                onChange={(e) => {
+                  setIDServicio(parseInt(e.target.value))
+                }}
+                value={IDServicio}
+                className='form-select form-select-sm'
+              >
+                <option value='0'>-SELECCIONE-</option>
+                {CatServicios
+                  ? CatServicios.map((c) => {
+                      return (
+                        <option key={c.id} value={c.id}>
+                          {c.servicio}
+                        </option>
+                      )
+                    })
+                  : null}
+              </Form.Control>
+            </Col>
+          </Row>
+          <Row style={{ paddingTop: '10px' }}>
+            <Col xs={3} className='dialogLabel'>
+              Tipo Unidad
+            </Col>
+            <Col xs={4}>
+              <Form.Control
+                as='select'
+                onChange={(e) => {
+                  setIDTipoUnidad(parseInt(e.target.value))
+                }}
+                value={IDTipoUnidad}
+                className='form-select form-select-sm'
+              >
+                <option value='0'>-SELECCIONE-</option>
+                {CatTipoUnidades
+                  ? CatTipoUnidades.map((c) => {
+                      return (
+                        <option key={c.id} value={c.id}>
+                          {c.tipoUnidad}
+                        </option>
+                      )
+                    })
+                  : null}
+              </Form.Control>
+            </Col>
+            <Col xs={1}>Caja</Col>
+            <Col xs={4}>
+              <Form.Control
+                type='text'
+                id='NoCaja'
+                value={NoCaja}
+                size='sm'
+                onChange={(e) => {
+                  setNoCaja(e.target.value)
+                }}
+              />
+            </Col>
+          </Row>
+          <Row style={{ paddingTop: '10px' }}>
+            <Col xs={3} className='dialogLabel'>
+              Proveedor
+            </Col>
+            <Col xs={9}>
+              <Form.Control
+                as='select'
+                onChange={(e) => {
+                  setIDProveedor(parseInt(e.target.value))
+                }}
+                value={IDProveedor}
+                className='form-select form-select-sm'
+              >
+                <option value='0'>-SELECCIONE-</option>
+                {CatProveedores
+                  ? CatProveedores.map((c) => {
+                      return (
+                        <option key={c.id} value={c.id}>
+                          {c.proveedor}
+                        </option>
+                      )
+                    })
+                  : null}
+              </Form.Control>
+            </Col>
+          </Row>
+          <Row style={{ paddingTop: '10px' }}>
+            <Col xs={3} className='dialogLabel'>
+              Origen
+            </Col>
+            <Col xs={9}>
+              <Form.Control
+                as='select'
+                onChange={(e) => {
+                  setIDOrigen(parseInt(e.target.value))
+                }}
+                value={IDOrigen}
+                className='form-select form-select-sm'
+              >
+                <option value='0'>-SELECCIONE-</option>
+                {CatUbicaciones
+                  ? CatUbicaciones.map((c) => {
+                      if (c.clasificacion === 1) {
+                        return (
+                          <option key={c.id} value={c.id}>
+                            {c.ubicacion}
+                          </option>
+                        )
+                      }
+                    })
+                  : null}
+              </Form.Control>
+            </Col>
+          </Row>
+          <Row style={{ paddingTop: '10px' }}>
+            <Col xs={3} className='dialogLabel'>
+              Destino
+            </Col>
+            <Col xs={9}>
+              <Form.Control
+                as='select'
+                onChange={(e) => {
+                  setIDDestino(parseInt(e.target.value))
+                }}
+                value={IDDestino}
+                className='form-select form-select-sm'
+              >
+                <option value='0'>-SELECCIONE-</option>
+                {CatUbicaciones
+                  ? CatUbicaciones.map((c) => {
+                      if (c.clasificacion === 2) {
+                        return (
+                          <option key={c.id} value={c.id}>
+                            {c.ubicacion}
+                          </option>
+                        )
+                      }
+                    })
+                  : null}
+              </Form.Control>
+            </Col>
+          </Row>
+          <Row style={{ paddingTop: '10px' }}>
+            <Col className='dialogLabel' xs={3}>
+              HAZMAT
+            </Col>
+            <Col sx={3}>
+              <Form.Control
+                as='select'
+                onChange={(e) => {
+                  setHazmat(parseInt(e.target.value))
+                }}
+                value={Hazmat}
+                className='form-select form-select-sm'
+              >
+                <option value='0'>No</option>
+                <option value='1'>Si</option>
+              </Form.Control>
+            </Col>
+            <Col className='dialogLabel'>Pickup no</Col>
+            <Col xs={4}>
+              <Form.Control
+                type='text'
+                id='PickUpNumber'
+                value={PickUpNumber}
+                size='sm'
+                onChange={(e) => {
+                  setPickUpNumber(e.target.value)
+                }}
+              />
+            </Col>
+          </Row>
+        </Modal.Body>
+        <Modal.Footer>
+          <Row>
+            <Col xs={2}></Col>
+            <Col xs={3}>&nbsp;</Col>
+            <Col xs={3}>
+              <Button
+                variant='primary'
+                onClick={() => {
+                  saveInfo()
+                }}
+              >
+                Guarda
+              </Button>
+            </Col>
+          </Row>
+        </Modal.Footer>
+      </Modal>
+    </div>
+  )
+}
diff --git a/src/Components/Reportes/RptViajesPendientes.tsx b/src/Components/Reportes/RptViajesPendientes.tsx
deleted file mode 100644
index 1335fde..0000000
--- a/src/Components/Reportes/RptViajesPendientes.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { FC } from 'react'
-
-interface IProps {}
-
-export const RptViajesPendientes: FC<IProps> = (props) => {
-  return <div>RptViajesPendientes</div>
-}
diff --git a/src/DTOs/Operaciones/DTOViajes.ts b/src/DTOs/Operaciones/DTOViajes.ts
new file mode 100644
index 0000000..f7cc419
--- /dev/null
+++ b/src/DTOs/Operaciones/DTOViajes.ts
@@ -0,0 +1,22 @@
+export default interface DTOOpViajes {
+    id: number, 
+    fAlta: string,
+    usuario: number, 
+    fCruce: string,
+    refAgenciaAduanal: string,
+    cliente: number, 
+    sCliente: string,
+    proveedor: number,
+    sProveedor: string, 
+    hazmat: number, 
+    tipoUnidad: number,
+    sTipoUnidad: string, 
+    noCaja: string,
+    pickUpNumber: string,
+    origen: number, 
+    sOrigen: string,
+    destino: number 
+    sDestino: string,
+    servicio: number,
+    sServicio: string
+}
\ No newline at end of file
diff --git a/src/Services/Catalogos/CatClientes.Services.ts b/src/Services/Catalogos/CatClientes.Services.ts
index 509a929..8e2ed22 100644
--- a/src/Services/Catalogos/CatClientes.Services.ts
+++ b/src/Services/Catalogos/CatClientes.Services.ts
@@ -10,7 +10,7 @@ class CatClientesDataService {
     return http.post<ICatClientes>(`Catalogos/CatClientes/Append`,data);
   }
   Delete(id: number) {
-    return http.delete<IRespuesta>(`/Catalogos/CatClientes/Delete/${id}`);
+    return http.delete<IRespuesta>(`Catalogos/CatClientes/Delete/${id}`);
   }
 }
 export default new CatClientesDataService();
\ No newline at end of file
diff --git a/src/Services/Catalogos/CatProveedores.Services.ts b/src/Services/Catalogos/CatProveedores.Services.ts
index 53b0c90..f9d8bec 100644
--- a/src/Services/Catalogos/CatProveedores.Services.ts
+++ b/src/Services/Catalogos/CatProveedores.Services.ts
@@ -10,7 +10,7 @@ class CatProveedoresDataService {
     return http.post<ICatProveedores>(`Catalogos/CatProveedores/Append`,data);
   }
   Delete(id: number) {
-    return http.delete<IRespuesta>(`/Catalogos/CatProveedores/Delete/${id}`);
+    return http.delete<IRespuesta>(`Catalogos/CatProveedores/Delete/${id}`);
   }
 }
 export default new CatProveedoresDataService();
\ No newline at end of file
diff --git a/src/Services/Catalogos/CatServicios.Service.ts b/src/Services/Catalogos/CatServicios.Service.ts
index b1260c8..dcdcd0b 100644
--- a/src/Services/Catalogos/CatServicios.Service.ts
+++ b/src/Services/Catalogos/CatServicios.Service.ts
@@ -10,7 +10,7 @@ class CatServiciosDataService {
     return http.post<ICatServicios>(`Catalogos/CatServicios/Append`,data);
   }
   Delete(id: number) {
-    return http.delete<IRespuesta>(`/Catalogos/CatServicios/Delete/${id}`);
+    return http.delete<IRespuesta>(`Catalogos/CatServicios/Delete/${id}`);
   }
 }
 export default new CatServiciosDataService();
\ No newline at end of file
diff --git a/src/Services/Operaciones/OpViajes.Services.ts b/src/Services/Operaciones/OpViajes.Services.ts
new file mode 100644
index 0000000..55090c2
--- /dev/null
+++ b/src/Services/Operaciones/OpViajes.Services.ts
@@ -0,0 +1,16 @@
+import http from "../../Services/Auth/config/http-common";
+import DTOViajes from "../../DTOs/Operaciones/DTOViajes";
+import IRespuesta from "../../Interfaces/Respuestas/IRespuesta";
+
+class OpViajesDataService {
+  Get() {
+    return http.get<DTOViajes[]>("Operaciones/OpViajes/Get");
+  }
+  Append(data: DTOViajes) {
+    return http.post<DTOViajes>(`Operaciones/OpViajes/Append`,data);
+  }
+  Delete(id: number) {
+    return http.delete<IRespuesta>(`Operaciones/OpViajes/Delete/${id}`);
+  }
+}
+export default new OpViajesDataService();
\ No newline at end of file
diff --git a/src/images/leyend.png b/src/images/leyend.png
new file mode 100644
index 0000000..97589b3
Binary files /dev/null and b/src/images/leyend.png differ
diff --git a/src/images/logo.png b/src/images/logo.png
new file mode 100644
index 0000000..da34187
Binary files /dev/null and b/src/images/logo.png differ
diff --git a/src/index.css b/src/index.css
index ec2585e..71a3e47 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,9 +5,21 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgb(234, 240, 241));
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.dialogLabel {
+  font-family: Verdana, Geneva, Tahoma, sans-serif
+}
+
+.centerV {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 700px;
+}