Index: sources/client/src/components/admin/ParkingZoneSessions/SessionCard/index.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneSessions/SessionCard/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZoneSessions/SessionCard/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -1,128 +1,256 @@
+import { useState } from 'react';
+import moment from 'moment';
+
 import {
-  Wrapper,
-  SessionChildWrapper,
-  SessionChildTitle,
-  SeessionChildData,
-  InputAndCheckIconWrapper,
-  ParkingSpaceNumberInput,
-  CheckIcon,
-  DeleteButton,
-  ContinueButton,
+    Wrapper,
+    SessionChildWrapper,
+    SessionChildTitle,
+    SeessionChildData,
+    InputAndCheckIconWrapper,
+    ParkingSpaceNumberInput,
+    CheckIcon,
+    DeleteButton,
 } from './styles';
 
 import { sessionStatus } from '../../../../config/enums';
+import { dateFormatString } from '../../../../config/utilities';
 import { IconButton } from '@mui/material';
-import { useState } from 'react';
+import AbsoluteLoader from '../../../Loaders/AbsoluteLoader';
+import useDeleteSession from '../../../../hooks/useDeleteSession';
+
 
 const sessionCardColors = {
-  active: '#389e0d',
-  idle: '#ffa940',
-  over: '#cf1322',
-};
-
-const ActiveCard = ({ id, start, plate, status, parkingSpaceNumber }) => {
-  return (
-    <Wrapper style={{ backgroundColor: sessionCardColors.active }}>
-      <SessionChildWrapper>
-        <SessionChildTitle>Почеток</SessionChildTitle>
-        <SeessionChildData>{start}</SeessionChildData>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <SessionChildTitle>Број на место</SessionChildTitle>
-        <SeessionChildData>{parkingSpaceNumber}</SeessionChildData>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <SessionChildTitle>Регистрација</SessionChildTitle>
-        <SeessionChildData>{plate}</SeessionChildData>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <DeleteButton>ИЗБРИШИ</DeleteButton>
-      </SessionChildWrapper>
-    </Wrapper>
-  );
-};
-
-const IdleCard = ({ id, start, plate, status, parkingSpaceNumber }) => {
-  const [parkingSpace, setParkingSpace] = useState(parkingSpaceNumber ?? '');
-  return (
-    <Wrapper style={{ backgroundColor: sessionCardColors.idle }}>
-      <SessionChildWrapper>
-        <SessionChildTitle>Почеток</SessionChildTitle>
-        <SeessionChildData>{start}</SeessionChildData>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <SessionChildTitle>Број на место</SessionChildTitle>
-        <InputAndCheckIconWrapper>
-          <ParkingSpaceNumberInput
-            value={parkingSpace}
-            onChange={(event) => setParkingSpace(event.target.value)}
-          />
-          {parkingSpace !== '' ? (
-            <IconButton>
-              <CheckIcon />
-            </IconButton>
-          ) : null}
-        </InputAndCheckIconWrapper>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <SessionChildTitle>Регистрација</SessionChildTitle>
-        <SeessionChildData>{plate}</SeessionChildData>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <DeleteButton>ИЗБРИШИ</DeleteButton>
-      </SessionChildWrapper>
-    </Wrapper>
-  );
-};
-
-const OverCard = ({ id, start, end, plate, status, parkingSpaceNumber }) => {
-  return (
-    <Wrapper style={{ backgroundColor: sessionCardColors.over }}>
-      <SessionChildWrapper>
-        <SessionChildWrapper>
-          <SessionChildTitle>Почеток</SessionChildTitle>
-          <SeessionChildData>{start}</SeessionChildData>
-        </SessionChildWrapper>
-        <SessionChildWrapper>
-          <SessionChildTitle>Крај</SessionChildTitle>
-          <SeessionChildData>{end}</SeessionChildData>
-        </SessionChildWrapper>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <SessionChildTitle>Број на место</SessionChildTitle>
-        <SeessionChildData>{parkingSpaceNumber}</SeessionChildData>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <SessionChildTitle>Регистрација</SessionChildTitle>
-        <SeessionChildData>{plate}</SeessionChildData>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <DeleteButton>ИЗБРИШИ</DeleteButton>
-        <ContinueButton>ПРОДОЛЖИ</ContinueButton>
-      </SessionChildWrapper>
-    </Wrapper>
-  );
-};
-
-const SessionCard = (props) => {
-  switch (props.status) {
-    case sessionStatus.active:
-      return <ActiveCard {...props} />;
-    case sessionStatus.idle:
-      return <IdleCard {...props} />;
-    case sessionStatus.over:
-      return <OverCard {...props} />;
-    default:
-      return null;
-  }
+    active: '#389e0d',
+    idle: '#ffa940',
+    over: '#cf1322',
+};
+
+const ActiveCard = ({
+    pssId,
+    timeStart,
+    zone,
+    plate,
+    status,
+    parkingSpace,
+    onDeleteSession,
+}) => {
+    const { isLoading: isLoadingDeleteSession, deleteSession } =
+        useDeleteSession();
+    const formatedTimeStart = moment(timeStart).format(dateFormatString);
+    return (
+        <Wrapper style={{ backgroundColor: sessionCardColors.active }}>
+            <SessionChildWrapper>
+                <SessionChildTitle>Почеток</SessionChildTitle>
+                <SeessionChildData>{formatedTimeStart}</SeessionChildData>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                <SessionChildTitle>Број на место</SessionChildTitle>
+                <SeessionChildData>{parkingSpace.psName}</SeessionChildData>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                <SessionChildTitle>Регистрација</SessionChildTitle>
+                <SeessionChildData>{plate.plate}</SeessionChildData>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                {isLoadingDeleteSession ? (
+                    <div style={{ width: '104px', textAlign: 'center' }}>
+                        <AbsoluteLoader
+                            containerStyle={{
+                                width: '40px',
+                                height: '40px',
+                                display: 'inline-block',
+                            }}
+                        />
+                    </div>
+                ) : (
+                    <DeleteButton
+                        onClick={() => {
+                            console.log(`CLICKED DELETE BUTTON ${pssId}`);
+                            deleteSession({ pssId, onDeleteSession });
+                        }}
+                    >
+                        ИЗБРИШИ
+                    </DeleteButton>
+                )}
+            </SessionChildWrapper>
+        </Wrapper>
+    );
+};
+
+const IdleCard = ({
+    pssId,
+    timeStart,
+    zone,
+    plate,
+    status,
+    handleActivateSession,
+    isLoadingActivateSession,
+    onDeleteSession,
+}) => {
+    const { isLoading: isLoadingDeleteSession, deleteSession } =
+        useDeleteSession();
+    const [parkingSpaceName, setParkingSpaceName] = useState('');
+    const formatedTimeStart = moment(timeStart).format(dateFormatString);
+    return (
+        <Wrapper style={{ backgroundColor: sessionCardColors.idle }}>
+            <SessionChildWrapper>
+                <SessionChildTitle>Почеток</SessionChildTitle>
+                <SeessionChildData>{formatedTimeStart}</SeessionChildData>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                <SessionChildTitle>Број на место</SessionChildTitle>
+                <InputAndCheckIconWrapper>
+                    <ParkingSpaceNumberInput
+                        value={parkingSpaceName}
+                        onChange={(event) =>
+                            setParkingSpaceName(event.target.value.trim())
+                        }
+                    />
+                    {parkingSpaceName !== '' ? (
+                        <>
+                            {isLoadingActivateSession ? (
+                                <AbsoluteLoader
+                                    containerStyle={{
+                                        width: '2rem',
+                                        height: '2rem',
+                                        display: 'inline-block',
+                                    }}
+                                />
+                            ) : (
+                                <IconButton
+                                    onClick={() =>
+                                        handleActivateSession({
+                                            pssId,
+                                            parkingSpaceName,
+                                        })
+                                    }
+                                >
+                                    <CheckIcon />
+                                </IconButton>
+                            )}
+                        </>
+                    ) : null}
+                </InputAndCheckIconWrapper>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                <SessionChildTitle>Регистрација</SessionChildTitle>
+                <SeessionChildData>{plate.plate}</SeessionChildData>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                {isLoadingDeleteSession ? (
+                    <div style={{ width: '104px', textAlign: 'center' }}>
+                        <AbsoluteLoader
+                            containerStyle={{
+                                width: '40px',
+                                height: '40px',
+                                display: 'inline-block',
+                            }}
+                        />
+                    </div>
+                ) : (
+                    <DeleteButton
+                        onClick={() => {
+                            console.log(`CLICKED DELETE BUTTON ${pssId}`);
+                            deleteSession({ pssId, onDeleteSession });
+                        }}
+                    >
+                        ИЗБРИШИ
+                    </DeleteButton>
+                )}
+            </SessionChildWrapper>
+        </Wrapper>
+    );
+};
+
+const OverCard = ({
+    pssId,
+    timeStart,
+    timeEnd,
+    zone,
+    plate,
+    status,
+    parkingSpace,
+    onDeleteSession,
+}) => {
+    const { isLoading: isLoadingDeleteSession, deleteSession } =
+        useDeleteSession();
+    const formatedTimeStart = moment(timeStart).format(dateFormatString);
+    const formatedTimeEnd = moment(timeEnd).format(dateFormatString);
+    return (
+        <Wrapper style={{ backgroundColor: sessionCardColors.over }}>
+            <SessionChildWrapper>
+                <SessionChildWrapper style={{ margin: 0 }}>
+                    <SessionChildTitle>Почеток</SessionChildTitle>
+                    <SeessionChildData>{formatedTimeStart}</SeessionChildData>
+                </SessionChildWrapper>
+                <SessionChildWrapper style={{ marginTop: '5px' }}>
+                    <SessionChildTitle>Крај</SessionChildTitle>
+                    <SeessionChildData>{formatedTimeEnd}</SeessionChildData>
+                </SessionChildWrapper>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                <SessionChildTitle>Број на место</SessionChildTitle>
+                <SeessionChildData>{parkingSpace.psName}</SeessionChildData>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                <SessionChildTitle>Регистрација</SessionChildTitle>
+                <SeessionChildData>{plate.plate}</SeessionChildData>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                {isLoadingDeleteSession ? (
+                    <div style={{ width: '104px', textAlign: 'center' }}>
+                        <AbsoluteLoader
+                            containerStyle={{
+                                width: '40px',
+                                height: '40px',
+                                display: 'inline-block',
+                            }}
+                        />
+                    </div>
+                ) : (
+                    <DeleteButton
+                        onClick={() => {
+                            console.log(`CLICKED DELETE BUTTON ${pssId}`);
+                            deleteSession({ pssId, onDeleteSession });
+                        }}
+                    >
+                        ИЗБРИШИ
+                    </DeleteButton>
+                )}
+            </SessionChildWrapper>
+        </Wrapper>
+    );
+};
+
+const SessionCard = ({
+    handleActivateSession,
+    isLoadingActivateSession,
+    ...commponProps
+}) => {
+    switch (commponProps.status) {
+        case sessionStatus.active:
+            return <ActiveCard {...commponProps} />;
+        case sessionStatus.idle:
+            return (
+                <IdleCard
+                    {...commponProps}
+                    handleActivateSession={handleActivateSession}
+                    isLoadingActivateSession={isLoadingActivateSession}
+                />
+            );
+        case sessionStatus.over:
+            return <OverCard {...commponProps} />;
+        default:
+            return null;
+    }
 };
 
Index: sources/client/src/components/admin/ParkingZoneSessions/SessionCard/styles.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneSessions/SessionCard/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZoneSessions/SessionCard/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -2,4 +2,5 @@
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import Button from '@mui/material/Button';
+import { mobile_max_width } from '../../../../config/utilities';
 
 export const Wrapper = styled.div`
@@ -15,4 +16,10 @@
   font-size: 1rem;
   box-shadow: 0 10px 5px -2px ${(props) => props.theme.palette.background.shadow};
+
+  @media (max-width: ${mobile_max_width}px) {
+    height: 350px;
+    border-radius: 100px;
+    flex-direction: column;
+  }
 `;
 
@@ -20,4 +27,11 @@
   display: flex;
   flex-direction: column;
+
+  @media (max-width: ${mobile_max_width}px) {
+    margin-top: 15px;
+    :last-of-type {
+      margin-top: 30px;
+    }
+  }
 `;
 
@@ -38,5 +52,6 @@
   position: relative;
 
-  button {
+  button,
+  > div {
     padding: 0;
     position: absolute;
@@ -69,16 +84,2 @@
   }
 `;
-
-export const ContinueButton = styled(Button).attrs((props) => ({
-  variant: 'contained',
-  size: 'small',
-  sx: {
-    backgroundColor: `${props.theme.palette.primary.main}`,
-  },
-}))`
-  margin-top: 20px;
-
-  :hover {
-    background-color: ${(props) => props.theme.palette.primary.dark};
-  }
-`;
Index: sources/client/src/components/admin/ParkingZoneSessions/index.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneSessions/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZoneSessions/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -1,3 +1,3 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import {
   Wrapper,
@@ -9,11 +9,56 @@
   StatsKey,
   StatsValue,
+  SearchField,
+  SearchIcon,
 } from './styles';
 import SessionCard from './SessionCard';
 import { sessionStatus } from '../../../config/enums';
-import { sessionsData } from './mockData';
+import useGetSessions from '../../../hooks/useGetSessions';
+import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
+
+import useActivateSession from '../../../hooks/useActivateSession';
+
+const sortSessions = (a, b) => {
+  // first - yellow/idle, second - red/finished, third - green/active
+  switch (a.status) {
+    case sessionStatus.active:
+      switch (b.status) {
+        case sessionStatus.active:
+          return -1;
+        case sessionStatus.over:
+        case sessionStatus.idle:
+          return 1;
+        default:
+          return 1;
+      }
+    case sessionStatus.over:
+      switch (b.status) {
+        case sessionStatus.active:
+        case sessionStatus.over:
+          return -1;
+        case sessionStatus.idle:
+          return 1;
+        default:
+          return 1;
+      }
+    case sessionStatus.idle:
+      switch (b.status) {
+        case sessionStatus.active:
+        case sessionStatus.over:
+        case sessionStatus.idle:
+          return -1;
+        default:
+          return 1;
+      }
+    default:
+      return -1;
+  }
+};
 
 const ParkingZoneSessions = ({ zone }) => {
-  const [sessions, setSession] = useState(sessionsData);
+  const { isLoading: isLoadingActivateSession, activateSession } =
+    useActivateSession();
+  const { data: sessions, isLoading: isLoadingSessions, setData: setSessions } = useGetSessions(zone.pzId); 
+  const [search, setSearch] = useState('');
   const [stats, setStats] = useState({
     activeSessions: 0,
@@ -21,4 +66,5 @@
     overSessions: 0,
   });
+
   const setSessionsStats = () => {
     let aS = 0;
@@ -26,17 +72,17 @@
     let oS = 0;
     sessions.forEach((s) => {
-      switch (s.status) {
-        case sessionStatus.active:
-          aS += 1;
-          break;
-        case sessionStatus.idle:
-          iS += 1;
-          break;
-        case sessionStatus.over:
-          oS += 1;
-          break;
-        default:
-          break;
-      }
+        switch (s.status) {
+            case sessionStatus.active:
+                aS += 1;
+                break;
+            case sessionStatus.idle:
+                iS += 1;
+                break;
+            case sessionStatus.over:
+                oS += 1;
+                break;
+            default:
+                break;
+        }
     });
     setStats({
@@ -47,4 +93,24 @@
   };
 
+  const onActivateSession = ({ updatedSession  }) => {
+    const updatedSessions = sessions.filter(
+        (s) => s.pssId !== updatedSession.pssId
+    );
+    setSessions([...updatedSessions, updatedSession]);  
+  };
+
+  const handleActivateSession = ({ pssId, parkingSpaceName }) => {
+    activateSession({ pssId, parkingSpaceName, onActivateSession });
+  };
+
+  const onDeleteSession = ({ pssId }) => {
+    setSessions((prevState) => prevState.filter((s) => s.pssId !== pssId));
+  };
+
+  const freeParkingSpaces = useMemo(() => {
+    if(!zone) return 0;
+    return zone.parkingSpaces.length - stats.activeSessions
+  }, [zone?.parkingSpaces, stats])
+
   useEffect(() => {
     setSessionsStats();
@@ -52,46 +118,84 @@
 
   return (
-    <Wrapper>
-      <Title>ОТВОРЕНИ ПАРКИНГ СЕСИИ</Title>
-      <StatsWrapper>
-        <Stats>
-          {/* PARKING SPACES STATS*/}
-          <KeyValueWrapper>
-            <StatsKey>Вкупно паркинг места:</StatsKey>
-            <StatsValue>{zone.parkingSpaces}</StatsValue>
-          </KeyValueWrapper>
-          <KeyValueWrapper>
-            <StatsKey>Слободни паркинг места:</StatsKey>
-            <StatsValue>
-              {zone.parkingSpaces - zone.takenParkingSpaces}
-            </StatsValue>
-          </KeyValueWrapper>
-          <KeyValueWrapper>
-            <StatsKey>Зафатени паркинг места:</StatsKey>
-            <StatsValue>{zone.takenParkingSpaces}</StatsValue>
-          </KeyValueWrapper>
-        </Stats>
-        {/* SESSIONS STATS*/}
-        <Stats>
-          <KeyValueWrapper>
-            <StatsKey>Активни паркинг сесии:</StatsKey>
-            <StatsValue>{stats.activeSessions}</StatsValue>
-          </KeyValueWrapper>
-          <KeyValueWrapper>
-            <StatsKey>Завршени паркинг сесии:</StatsKey>
-            <StatsValue>{stats.overSessions}</StatsValue>
-          </KeyValueWrapper>
-          <KeyValueWrapper>
-            <StatsKey>Неактивни паркинг сесии:</StatsKey>
-            <StatsValue>{stats.idleSessions}</StatsValue>
-          </KeyValueWrapper>
-        </Stats>
-      </StatsWrapper>
-      <SessionsWrapper>
-        {sessions.map((session) => (
-          <SessionCard key={session.id} {...session} />
-        ))}
-      </SessionsWrapper>
-    </Wrapper>
+      <Wrapper>
+          <Title>ОТВОРЕНИ ПАРКИНГ СЕСИИ</Title>
+          <StatsWrapper>
+              <Stats>
+                  {/* PARKING SPACES STATS*/}
+                  <KeyValueWrapper>
+                      <StatsKey>Вкупно паркинг места:</StatsKey>
+                      <StatsValue>{zone.parkingSpaces.length}</StatsValue>
+                  </KeyValueWrapper>
+                  <KeyValueWrapper>
+                      <StatsKey>Слободни паркинг места:</StatsKey>
+                      <StatsValue>{freeParkingSpaces}</StatsValue>
+                  </KeyValueWrapper>
+                  <KeyValueWrapper>
+                      <StatsKey>Зафатени паркинг места:</StatsKey>
+                      <StatsValue>
+                          {zone.parkingSpaces.length - freeParkingSpaces}
+                      </StatsValue>
+                  </KeyValueWrapper>
+              </Stats>
+              {/* SESSIONS STATS*/}
+              <Stats>
+                  <KeyValueWrapper>
+                      <StatsKey>Активни паркинг сесии:</StatsKey>
+                      <StatsValue>{stats.activeSessions}</StatsValue>
+                  </KeyValueWrapper>
+                  <KeyValueWrapper>
+                      <StatsKey>Завршени паркинг сесии:</StatsKey>
+                      <StatsValue>{stats.overSessions}</StatsValue>
+                  </KeyValueWrapper>
+                  <KeyValueWrapper>
+                      <StatsKey>Неактивни паркинг сесии:</StatsKey>
+                      <StatsValue>{stats.idleSessions}</StatsValue>
+                  </KeyValueWrapper>
+              </Stats>
+          </StatsWrapper>
+          <SearchField
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              InputProps={{
+                  startAdornment: <SearchIcon />,
+              }}
+          />
+          <SessionsWrapper>
+              {isLoadingSessions ? (
+                  <AbsoluteLoader
+                      containerStyle={{
+                          width: '150px',
+                          height: '150px',
+                          margin: 'auto',
+                          marginTop: '50px',
+                      }}
+                  />
+              ) : (
+                  <>
+                      {sessions
+                          .filter((session) =>
+                              session.plate.plate
+                                  .concat(
+                                      ` ${session.parkingSpace?.psName ?? ''}`
+                                  )
+                                  .toLowerCase()
+                                  .includes(search.trim().toLowerCase())
+                          )
+                          .sort(sortSessions)
+                          .map((session) => (
+                              <SessionCard
+                                  key={session.pssId}
+                                  {...session}
+                                  handleActivateSession={handleActivateSession}
+                                  isLoadingActivateSession={
+                                      isLoadingActivateSession
+                                  }
+                                  onDeleteSession={onDeleteSession}
+                              />
+                          ))}
+                  </>
+              )}
+          </SessionsWrapper>
+      </Wrapper>
   );
 };
Index: sources/client/src/components/admin/ParkingZoneSessions/mockData.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneSessions/mockData.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZoneSessions/mockData.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -5,4 +5,5 @@
     id: 1,
     start: moment().format('hh:mm - DD.MM.yyyy'),
+    zone: 'Zona 1',
     plate: 'SK-8190-AV',
     status: 'active',
@@ -12,4 +13,5 @@
     id: 2,
     start: moment().format('hh:mm - DD.MM.yyyy'),
+    zone: 'Zona 2',
     plate: 'ST-9312-OK',
     status: 'idle',
@@ -20,4 +22,5 @@
     start: moment().format('hh:mm - DD.MM.yyyy'),
     end: moment().format('hh:mm - DD.MM.yyyy'),
+    zone: 'Zona 1',
     plate: 'SK-6511-OS',
     status: 'over',
Index: sources/client/src/components/admin/ParkingZoneSessions/styles.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneSessions/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZoneSessions/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -1,4 +1,8 @@
 import styled from 'styled-components';
 import { Typography } from '@mui/material';
+import TextField from '@mui/material/TextField';
+import SIcon from '@mui/icons-material/Search';
+
+import { mobile_max_width } from '../../../config/utilities';
 
 export const Wrapper = styled.div`
@@ -6,7 +10,8 @@
   flex-direction: column;
   align-items: center;
-  margin: 0;
-  padding: 30px 175px 0 175px;
+  padding: 30px 12% 0 12%;
   width: 100%;
+  max-width: 1440px;
+  margin: auto;
   height: 100%;
 `;
@@ -20,4 +25,5 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  text-align: center;
 `;
 
@@ -28,4 +34,8 @@
   justify-content: space-between;
   margin: 30px 0 10px 0;
+
+  @media (max-width: ${mobile_max_width}px) {
+    flex-direction: column;
+  }
 `;
 
@@ -33,4 +43,5 @@
   display: flex;
   flex-direction: column;
+  align-items: center;
 `;
 
@@ -38,5 +49,5 @@
   display: flex;
   flex-direction: row;
-  width: 220px;
+  width: 280px;
   justify-content: space-between;
 `;
@@ -47,4 +58,5 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  font-size: 1.2rem;
 `;
 
@@ -52,5 +64,5 @@
   margin: 0;
   font-weight: 600;
-  font-size: 1.2rem;
+  font-size: 1.4rem;
   background: -webkit-linear-gradient(#333333, #4cc5a3);
   -webkit-background-clip: text;
@@ -58,12 +70,44 @@
 `;
 
+export const SearchField = styled(TextField).attrs({
+  width: '150px',
+  sx: {
+    marginTop: '10px',
+    marginBottom: '20px',
+  },
+})`
+  border: 1px solid ${(props) => props.theme.palette.primary.main};
+  border-radius: 5px;
+  fieldset {
+    border: 0;
+  }
+  input {
+    font-size: 1.1rem;
+    font-weight: 500;
+    padding: 15px 10px;
+    color: ${(props) => props.theme.palette.primary.main};
+  }
+`;
+
+export const SearchIcon = styled(SIcon).attrs((props) => ({
+  sx: {
+    fontSize: '2rem',
+    color: `rgba(0,173,124, 0.4)`, // primary.main in rgb with opacity 0.4
+  },
+}))``;
+
 export const SessionsWrapper = styled.div`
-  height: 45vh;
+  height: auto;
+  min-height: 240px;
+  max-height: 380px;
   width: 100%;
   overflow: auto;
-  padding-top: 20px;
-
   > div:not(div:first-of-type) {
     margin-top: 24px;
   }
+
+  @media (max-width: ${mobile_max_width}px) {
+    max-height: 75vh;
+    padding-bottom: 10px;
+  }
 `;
