diff --git a/src/tour-operator-updates/screens/TOUpdates.tsx b/src/tour-operator-updates/screens/TOUpdates.tsx
index 91c3457..0045f1e 100644
--- a/src/tour-operator-updates/screens/TOUpdates.tsx
+++ b/src/tour-operator-updates/screens/TOUpdates.tsx
@@ -1,43 +1,95 @@
-import {Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow} from "@mui/material";
-import {ConnectingAirports, Hotel} from "@mui/icons-material";
-import React from "react";
+import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+import { ConnectingAirports, Hotel } from "@mui/icons-material";
+import React, { useEffect, useState } from "react";
+
+type HotelUpdate = {
+    updateDateTime: string;
+    updateType: string;
+    hotelName: string;
+    roomName: string;
+    priceChange: number;
+    capacityChange: number;
+};
+
+type TransportUpdate = {
+    updateDateTime: string;
+    updateType: string;
+    departureRegionAndCountry: string;
+    arrivalRegionAndCountry: string;
+    transportTypeName: string;
+    priceChange: number;
+    capacityChange: number;
+};
 
 const TOUpdates = () => {
 
-    const transportChanges = [
-        {
-            date: new Date(),
-            locationFrom: {idLocation: '123', region: 'Gdańsk', country: 'Polska'},
-            locationTo: {idLocation: '345', region: 'Warszawa', country: 'Polska'},
-            type: 'BUS',
-            changes: {
-                capacityDiff: -20,
-                priceDiff: -48,
-            }
-        },
-        {
-            date: new Date(),
-            locationFrom: {idLocation: '124', region: 'Gdańsk', country: 'Polska'},
-            locationTo: {idLocation: '345', region: 'Durres', country: 'Albania'},
-            type: 'PLANE',
-            changes: {
-                capacityDiff: 34,
-                priceDiff: 125,
+    const [hotelUpdates, setHotelUpdates] = useState<HotelUpdate[]>([]);
+    const [transportUpdates, setTransportUpdates] = useState<TransportUpdate[]>([]);
+
+    useEffect(() => {
+        const hotelWs = new WebSocket(`ws://localhost:8082/data-generator/ws/hotel`);
+        const transportWs = new WebSocket(`ws://localhost:8082/data-generator/ws/transport`);
+
+        hotelWs.onmessage = (event) => {
+            console.log("Received hotel message: " + event.data);
+        
+            const messageType = event.data.split(':')[0];
+            const messageData = event.data.split(': ')[1];
+        
+            switch (messageType) {
+                case "SingleHotel":
+                    const hotelUpdate = JSON.parse(messageData);
+        
+                    // Convert the updateDateTime array to a Date object
+                    hotelUpdate.updateDateTime = new Date(
+                        hotelUpdate.updateDateTime[0],
+                        hotelUpdate.updateDateTime[1] - 1, // JavaScript months are 0-based
+                        hotelUpdate.updateDateTime[2],
+                        hotelUpdate.updateDateTime[3],
+                        hotelUpdate.updateDateTime[4]
+                    ).toISOString();
+        
+                    setHotelUpdates((prevUpdates) => [hotelUpdate, ...prevUpdates]);
+                    break;
+                default:
+                    console.log("Unexpected message type");
+                    break;
             }
-        },
-    ]
-
-    const hotelChanges = [
-        {
-            date: new Date(),
-            hotelName: 'Grand Fafa Blue',
-            roomName: 'Pokój 2 os.',
-            changes: {
-                guestCapacityDiff: 1,
-                priceDiff: 27,
+        };
+
+        transportWs.onmessage = (event) => {
+            console.log("Received transport message: " + event.data);
+
+            const messageType = event.data.split(':')[0];
+            const messageData = event.data.split(': ')[1];
+
+            switch (messageType) {
+                case "SingleTransport":
+                    const transportUpdate = JSON.parse(messageData);
+
+                    // Convert the updateDateTime array to a Date object
+                    transportUpdate.updateDateTime = new Date(
+                        transportUpdate.updateDateTime[0],
+                        transportUpdate.updateDateTime[1] - 1, // JavaScript months are 0-based
+                        transportUpdate.updateDateTime[2],
+                        transportUpdate.updateDateTime[3],
+                        transportUpdate.updateDateTime[4]
+                    ).toISOString();
+
+                    setTransportUpdates((prevUpdates) => [transportUpdate, ...prevUpdates]);
+                    break;
+                default:
+                    console.log("Unexpected message type");
+                    break;
             }
-        },
-    ]
+        };
+
+        return () => {
+            hotelWs.close();
+            transportWs.close();
+            console.log("WebSocket connection closed");
+        };
+    }, []);
 
     return (
         <div className='flex flex-col px-16 py-24'>
@@ -52,25 +104,33 @@ const TOUpdates = () => {
                         <Table>
                             <TableHead>
                                 <TableRow>
-                                    <TableCell className='border border-gray-300 p-2'>Data</TableCell>
+                                    <TableCell className='border border-gray-300 p-2'>Data zmiany</TableCell>
                                     <TableCell className='border border-gray-300 p-2'>Skąd</TableCell>
                                     <TableCell className='border border-gray-300 p-2'>Dokąd</TableCell>
                                     <TableCell className='border border-gray-300 p-2'>Typ transportu</TableCell>
+                                    <TableCell className='border border-gray-300 p-2'>Typ zmiany</TableCell>
                                     <TableCell className='border border-gray-300 p-2'>Zmiany</TableCell>
                                 </TableRow>
                             </TableHead>
                             <TableBody>
-                                {transportChanges.map((transport, index) => (
+                                {transportUpdates.map((transport, index) => (
                                     <TableRow key={index}>
-                                        <TableCell className='border border-gray-300 p-2'>{transport.date.toDateString()}</TableCell>
-                                        <TableCell className='border border-gray-300 p-2'>{transport.locationFrom.country}, {transport.locationFrom.region}</TableCell>
-                                        <TableCell className='border border-gray-300 p-2'>{transport.locationTo.country}, {transport.locationTo.region}</TableCell>
-                                        <TableCell className='border border-gray-300 p-2'>{transport.type === 'PLANE' ? 'Samolot' : 'Bus'}</TableCell>
+                                        <TableCell className='border border-gray-300 p-2'>{new Date(transport.updateDateTime).toLocaleString()}</TableCell>
+                                        <TableCell className='border border-gray-300 p-2'>{transport.departureRegionAndCountry}</TableCell>
+                                        <TableCell className='border border-gray-300 p-2'>{transport.arrivalRegionAndCountry}</TableCell>
+                                        <TableCell className='border border-gray-300 p-2'>{transport.transportTypeName}</TableCell>
+                                        <TableCell className='border border-gray-300 p-2'>{transport.updateType}</TableCell>
                                         <TableCell className='border border-gray-300 p-2'>
-                                            <div className='flex flex-col gap-1'>
-                                                <p>Cena: {transport.changes.priceDiff >= 0 ? '+' : ''}{transport.changes.priceDiff}</p>
-                                                <p>Miejsca: {transport.changes.capacityDiff >= 0 ? '+' : ''}{transport.changes.capacityDiff}</p>
-                                            </div>
+                                            {transport.updateType === 'CREATE' ? (
+                                                <div className='flex flex-col gap-1'>
+                                                    {}
+                                                </div>
+                                            ) : (
+                                                <div className='flex flex-col gap-1'>
+                                                    <p>Cena: {transport.priceChange > 0 ? '+' : ''}{transport.priceChange}</p>
+                                                    <p>Miejsca: {transport.capacityChange > 0 ? '+' : ''}{transport.capacityChange}</p>
+                                                </div>
+                                            )}
                                         </TableCell>
                                     </TableRow>
                                 ))}
@@ -79,9 +139,9 @@ const TOUpdates = () => {
                     </TableContainer>
                 </Paper>
 
-                <Paper elevation={2} style={{height: 'fit-content'}}>
+                <Paper elevation={2} style={{ height: 'fit-content' }}>
                     <div className='mt-4 mb-6 flex flex-row gap-2 items-center justify-center'>
-                        <Hotel style={{fontSize: 18}}/>
+                        <Hotel style={{ fontSize: 18 }} />
                         <h3 className='text-xl'>Aktualizacje hoteli</h3>
                     </div>
 
@@ -89,23 +149,31 @@ const TOUpdates = () => {
                         <Table>
                             <TableHead>
                                 <TableRow>
-                                    <TableCell className='border border-gray-300 p-2'>Data</TableCell>
+                                    <TableCell className='border border-gray-300 p-2'>Data zmiany</TableCell>
                                     <TableCell className='border border-gray-300 p-2'>Hotel</TableCell>
                                     <TableCell className='border border-gray-300 p-2'>Pokój</TableCell>
+                                    <TableCell className='border border-gray-300 p-2'>Typ zmiany</TableCell>
                                     <TableCell className='border border-gray-300 p-2'>Zmiany</TableCell>
                                 </TableRow>
                             </TableHead>
                             <TableBody>
-                                {hotelChanges.map((hotel, index) => (
+                                {hotelUpdates.map((hotel, index) => (
                                     <TableRow key={index}>
-                                        <TableCell className='border border-gray-300 p-2'>{hotel.date.toDateString()}</TableCell>
+                                        <TableCell className='border border-gray-300 p-2'>{new Date(hotel.updateDateTime).toLocaleString()}</TableCell>
                                         <TableCell className='border border-gray-300 p-2'>{hotel.hotelName}</TableCell>
                                         <TableCell className='border border-gray-300 p-2'>{hotel.roomName}</TableCell>
+                                        <TableCell className='border border-gray-300 p-2'>{hotel.updateType}</TableCell>
                                         <TableCell className='border border-gray-300 p-2'>
-                                            <div className='flex flex-col gap-1'>
-                                                <p>Cena: {hotel.changes.priceDiff >= 0 ? '+' : ''}{hotel.changes.priceDiff}</p>
-                                                <p>Miejsca: {hotel.changes.guestCapacityDiff >= 0 ? '+' : ''}{hotel.changes.guestCapacityDiff}</p>
-                                            </div>
+                                            {hotel.updateType === 'CREATE' ? (
+                                                <div className='flex flex-col gap-1'>
+                                                    {}
+                                                </div>
+                                            ) : (
+                                                <div className='flex flex-col gap-1'>
+                                                    <p>Cena: {hotel.priceChange > 0 ? '+' : ''}{hotel.priceChange}</p>
+                                                    <p>Miejsca: {hotel.capacityChange > 0 ? '+' : ''}{hotel.capacityChange}</p>
+                                                </div>
+                                            )}
                                         </TableCell>
                                     </TableRow>
                                 ))}