Index: jobvista-frontend/src/views/profiles/JobSeekerEditProfile.css
===================================================================
--- jobvista-frontend/src/views/profiles/JobSeekerEditProfile.css	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
+++ jobvista-frontend/src/views/profiles/JobSeekerEditProfile.css	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -0,0 +1,22 @@
+.profile-pic {
+    position: absolute;
+    border-radius: 100px;
+    border: 5px solid rgb(243, 242, 241);
+    bottom: -110px;
+    left: 70px;
+    object-fit: contain;
+}
+
+/*.floating-wrap {*/
+/*    position: relative;*/
+/*}*/
+
+/*.floating-wrap h5 {*/
+/*    z-index: 100;*/
+/*    position: absolute;*/
+/*    top: -25px;*/
+/*    left: 20px;*/
+/*    padding: 5px 10px;*/
+/*    background: white;*/
+/*    border-radius: 10px;*/
+/*}*/
Index: jobvista-frontend/src/views/profiles/JobSeekerEditProfile.js
===================================================================
--- jobvista-frontend/src/views/profiles/JobSeekerEditProfile.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
+++ jobvista-frontend/src/views/profiles/JobSeekerEditProfile.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -0,0 +1,252 @@
+import React, {useEffect, useState} from "react";
+
+import "../shared_css/Modal.css"
+
+import 'react-responsive-modal/styles.css';
+import "./JobSeekerEditProfile.css"
+
+//Validation
+import * as yup from "yup";
+import {yupResolver} from "@hookform/resolvers/yup";
+import {Controller, useForm} from "react-hook-form";
+
+import {useDispatch, useSelector} from "react-redux";
+import {JobSeekerActions} from "../../redux/actions/JobSeekerActions";
+import {notifyProfileEdit, notifyProfilePicChange} from "../../utils/toastUtils";
+
+
+export const JobSeekerEditProfile = (props) => {
+
+    const dispatch = useDispatch();
+    const auth = useSelector(state => state.auth.currentUser)
+
+    const [seekerDetails, setSeekerDetails] = useState(null);
+
+    const [profilePicFile, setProfilePicFile] = useState(null);
+
+    let profilePicState = useSelector(state => state.images.profilePictures);
+
+    const [profilePicPreview, setProfilePicPreview] = useState(null);
+    const [profilePicView, setProfilePicView] = useState(null);
+
+
+    useEffect(() => {
+        if(auth) {
+            dispatch(JobSeekerActions.fetchJobSeekerEditDetailsById(auth.id, (success, response) => {
+                if(success) {
+                    setSeekerDetails(response.data);
+                    console.log(response.data)
+                }
+            }))
+        }
+    }, [auth])
+
+    useEffect(() => {
+        if (auth.id) {
+            if(!profilePicState[auth.id]) {
+                dispatch(JobSeekerActions.downloadProfilePic(auth.id, (success, response) => {
+                    if (success) {
+                        setProfilePicView(response)
+                        //setDispatched(true)
+                    }
+                }))
+                //console.log("LOGO FETCH")
+            } else {
+                setProfilePicView(profilePicState[auth.id])
+                //console.log("LOGO STATE")
+            }
+
+        }
+
+    }, [auth])
+    const schema = yup.object().shape({
+        email: yup.string().required("Please enter your email"),
+        firstName: yup.string().required("Please enter your first name"),
+        lastName: yup.string().required("Please enter your last name"),
+        phoneNumber: yup.string().required("Please enter your phone number"),
+
+    })
+
+
+
+    const {register, handleSubmit, formState: {errors}} = useForm({
+        resolver: yupResolver(schema),
+    });
+
+    const editJobSeekerDetails = async (values) => {
+        try {
+            dispatch(JobSeekerActions.editJobSeekerDetailsById(
+                {
+                    email: values.email,
+                    firstName: values.firstName,
+                    lastName: values.lastName,
+                    phoneNumber: values.phoneNumber,
+
+
+                }, auth.id, (success, response) => {
+                    if (success) {
+                        // console.log("Recruiter details edited")
+                        notifyProfileEdit()
+                        setSeekerDetails(response.data)
+                    }
+                }
+            ))
+        } catch (err) {
+            console.error(err)
+        }
+    }
+
+    const handleButtonClick = () => {
+        document.getElementById('logo-upload-input').click();
+    };
+    const handleLogoChange = (event) => {
+        const file = event.target.files[0];
+        if (file && (file.type === 'image/png' || file.type === 'image/jpeg')) {
+            setProfilePicFile(file)
+            setProfilePicPreview(URL.createObjectURL(file));
+        }
+        event.target.value = null;
+    };
+    const handleLogoUpload = async () => {
+        try {
+            const formData = new FormData();
+            formData.append("jobSeekerId", auth.id);
+            formData.append("profilePicFile", profilePicFile);
+
+            dispatch(JobSeekerActions.submitProfilePic(formData, (success, response) => {
+                if (success) {
+                    // window.location.reload(); // MAYBE REMOVE
+                    // console.log("Logo uploaded successfully")
+                    notifyProfilePicChange()
+                    setProfilePicPreview(null)
+                    setProfilePicView(URL.createObjectURL(profilePicFile))
+
+                }
+            }))
+
+        } catch (error) {
+            console.error(error)
+        }
+    }
+
+    const handleCancelUpload = () => {
+        setProfilePicFile(null)
+        setProfilePicPreview(null)
+    }
+
+
+    return (<div className="custom-container no-additional-margin">
+
+        {profilePicPreview && (
+            <div className="confirmation-bar">
+                <div className="confirmation-bar-buttons">
+                    <button className="cancel-changes" onClick={handleCancelUpload}>Cancel</button>
+                    <button className="save-changes" onClick={handleLogoUpload}>Save changes</button>
+
+                </div>
+            </div>
+        )}
+        <div className="photo-box">
+            <div>
+                <img
+                    src="/images/mountains.png"
+                    className="company-banner"
+                    alt="Company Banner"
+                />
+                {profilePicPreview ? <>
+                    <img
+                        src={profilePicPreview}
+                        className="profile-pic"
+                        alt=""
+                        width={200} height={200}
+                    />
+                </> : <>
+                    <img
+                        // loading gif
+                        src={profilePicView}
+                        className="profile-pic"
+                        alt=""
+                        width={200} height={200}
+                    />
+                </>}
+
+            </div>
+
+            <div className="info-tab">
+                {seekerDetails &&  <h3>{seekerDetails.firstName + " " + seekerDetails.lastName}</h3>}
+                {/*<p>Active job listings: <span>{activeJobListingsCount}</span></p>*/}
+            </div>
+
+            <div className="edit-buttons">
+
+                <input
+                    type="file"
+                    id="logo-upload-input"
+                    accept="image/png, image/jpeg"
+                    onChange={handleLogoChange}
+                    style={{display: 'none'}}
+                />
+                <button onClick={handleButtonClick}>
+                    <i className="fa-solid fa-camera"></i> Change profile picture
+                </button>
+                <button><i className="fa-solid fa-panorama"></i> Change cover photo</button>
+            </div>
+
+        </div>
+
+
+
+        {seekerDetails &&
+            <>
+                <div className="floating-wrap">
+                    <h5>Personal details</h5>
+                    <form onSubmit={handleSubmit(editJobSeekerDetails)}>
+                        <div className="row">
+                            <div className="col-md-12">
+
+
+                                <div className="form-floating mb-3">
+                                    <input type="text" className="form-control" defaultValue={seekerDetails.email}  {...register("email")}
+                                           placeholder="David"/>
+                                    <label htmlFor="floatingFirstName">Email address</label>
+                                    <p className="error-message">{errors.email?.message}</p>
+                                </div>
+
+                                <div className="form-floating mb-3">
+                                    <input type="text" className="form-control" defaultValue={seekerDetails.firstName}  {...register("firstName")}
+                                           placeholder="David"/>
+                                    <label htmlFor="floatingFirstName">First name</label>
+                                    <p className="error-message">{errors.firstName?.message}</p>
+                                </div>
+
+                                <div className="form-floating mb-3">
+                                    <input type="text" className="form-control" defaultValue={seekerDetails.lastName} {...register("lastName")}
+                                           placeholder="David"/>
+                                    <label htmlFor="floatingFirstName">Last name</label>
+                                    <p className="error-message">{errors.lastName?.message}</p>
+                                </div>
+
+
+                                <div className="form-floating mb-3">
+                                    <input type="text" className="form-control" defaultValue={seekerDetails.phoneNumber}  {...register("phoneNumber")}
+                                           placeholder="David"/>
+                                    <label htmlFor="floatingFirstName">Phone number</label>
+                                    <p className="error-message">{errors.phoneNumber?.message}</p>
+                                </div>
+
+
+                            </div>
+                        </div>
+
+                        <div className="d-flex justify-content-end">
+                            <button className="blue-submit-button" type="submit"> Save changes</button>
+                        </div>
+
+                    </form>
+                </div>
+            </>
+        }
+
+
+    </div>)
+}
Index: jobvista-frontend/src/views/profiles/RecruiterEditProfile.js
===================================================================
--- jobvista-frontend/src/views/profiles/RecruiterEditProfile.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
+++ jobvista-frontend/src/views/profiles/RecruiterEditProfile.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -0,0 +1,251 @@
+import {useDispatch, useSelector} from "react-redux";
+import React, {useEffect, useState} from "react";
+import {RecruiterActions} from "../../redux/actions/recruiterActions";
+import * as yup from "yup";
+import {useForm} from "react-hook-form";
+import {yupResolver} from "@hookform/resolvers/yup";
+
+// Toast notification
+import 'react-toastify/dist/ReactToastify.css';
+import { toast, ToastContainer } from 'react-toastify';
+import {notifyLogoChange, notifyProfileEdit} from "../../utils/toastUtils";
+export const RecruiterEditProfile = () => {
+
+    const dispatch = useDispatch();
+    const auth = useSelector(state => (state.auth.currentUser))
+
+    const [recruiterDetails, setRecruiterDetails] = useState(null);
+
+    let logosState = useSelector(state => state.images.logos)
+    const [logoDispatched, setLogoDispatched] = useState(false)
+    const [logoFile, setLogoFile] = useState(null);
+    const [logoPreview, setLogoPreview] = useState(null);
+    const [logoView, setLogoView] = useState(null);
+
+
+    useEffect(() => {
+        if (auth) {
+            dispatch(RecruiterActions.fetchRecruiterEditDetailsById(auth.id, (success, response) => {
+                if (success) {
+                    setRecruiterDetails(response.data)
+                }
+            }))
+        }
+    }, [auth]);
+
+    useEffect(() => {
+        if (auth.id) {
+            if (!logoDispatched && !logosState[auth.id]) {
+                dispatch(RecruiterActions.downloadLogo(auth.id, (success, response) => {
+                    if (success) {
+                        setLogoView(response)
+                        setLogoDispatched(true)
+                    }
+                }))
+                console.log("LOGO GET")
+            } else {
+                setLogoView(logosState[auth.id])
+                console.log("LOGO STATE")
+            }
+        }
+
+    }, [auth])
+
+    const schema = yup.object().shape({
+        email: yup.string().required("Please enter your email"),
+        companyName: yup.string().required("Please enter your company name"),
+        companyDescription: yup.string(),
+        contactEmail: yup.string().required("Please enter your contact email"),
+        contactPhoneNumber: yup.string().required("Please enter your contact phone number"),
+        receptionist: yup.string(),
+    })
+
+    const {register, handleSubmit, control, formState: {errors}} = useForm({
+        resolver: yupResolver(schema),
+    });
+
+
+    const editRecruiterDetails = async (values) => {
+        try {
+            dispatch(RecruiterActions.editRecruiterDetailsById(
+                {
+                    email: values.email,
+                    companyName: values.companyName,
+                    companyDescription: values.companyDescription,
+                    contactEmail: values.contactEmail,
+                    contactPhoneNumber: values.contactPhoneNumber,
+                    receptionist: values.receptionist,
+
+                }, auth.id, (success, response) => {
+                    if (success) {
+                        console.log("Recruiter details edited")
+                        notifyProfileEdit()
+                        //window.location.reload();
+                    }
+                }
+            ))
+        } catch (err) {
+            console.error(err)
+        }
+    }
+
+    const handleButtonClick = () => {
+        document.getElementById('logo-upload-input').click();
+    };
+    const handleLogoChange = (event) => {
+        const file = event.target.files[0];
+        if (file && (file.type === 'image/png' || file.type === 'image/jpeg')) {
+            setLogoFile(file);
+            setLogoPreview(URL.createObjectURL(file));
+        }
+        event.target.value = null;
+    };
+
+    const handleLogoUpload = async () => {
+        try {
+            const formData = new FormData();
+            formData.append("recruiterId", auth.id);
+            formData.append("logoFile", logoFile);
+
+            dispatch(RecruiterActions.submitLogo(formData, (success, response) => {
+                if (success) {
+                    //console.log("Logo uploaded successfully")
+                    notifyLogoChange()
+                    setLogoPreview(null)
+                    setLogoView(URL.createObjectURL(logoFile))
+                }
+            }))
+
+        } catch (error) {
+            console.error(error)
+        }
+    }
+
+    const handleCancelUpload = () => {
+        setLogoFile(null)
+        setLogoPreview(null)
+        console.log(logoPreview)
+    }
+
+    return (<div className="my-workspace">
+            {logoPreview && (
+                <div className="confirmation-bar">
+                    <div className="confirmation-bar-buttons">
+                        <button className="cancel-changes" onClick={handleCancelUpload}>Cancel</button>
+                        <button className="save-changes" onClick={handleLogoUpload}>Save changes</button>
+
+                    </div>
+                </div>
+            )}
+
+            <div className="custom-container no-additional-margin">
+                <div className="photo-box">
+                    <div>
+                        <img
+                            src="/images/default-company-banner.jpg"
+                            className="company-banner"
+                            alt="Company Banner"
+                        />
+                        {logoPreview ? <>
+                            <img
+                                src={logoPreview}
+                                className="company-logo"
+                                alt=""
+                                width={200} height={200}
+                            />
+                        </> : <>
+                            <img
+                                // loading gif
+                                src={logoView}
+                                className="company-logo"
+                                alt=""
+                                width={200} height={200}
+                            />
+                        </>}
+                    </div>
+
+                    <div className="info-tab">
+                        <h3>{recruiterDetails && recruiterDetails.companyName}</h3>
+                    </div>
+
+                    <div className="edit-buttons">
+                        <input
+                            type="file"
+                            id="logo-upload-input"
+                            accept="image/png, image/jpeg"
+                            onChange={handleLogoChange}
+                            style={{display: 'none'}}
+                        />
+                        <button onClick={handleButtonClick}>
+                            <i className="fa-solid fa-camera"></i> Change logo
+                        </button>
+                        <button><i className="fa-solid fa-panorama"></i> Change cover photo</button>
+                    </div>
+
+                </div>
+
+
+                {/*<i className="fa-solid fa-circle-exclamation">*/}
+                {recruiterDetails && (
+                    <div className="floating-wrap">
+                        <h5>Company details</h5>
+                        <form onSubmit={handleSubmit(editRecruiterDetails)}>
+                            <div className="row">
+                                <div className="col-md-6">
+                                    <div className="form-floating mb-3">
+                                        <input type="text" className="form-control" defaultValue={recruiterDetails.email} {...register("email")}
+                                               placeholder="David"/>
+                                        <label htmlFor="floatingFirstName">Email address</label>
+                                        <p className="error-message">{errors.email?.message}</p>
+                                    </div>
+
+                                    <div className="form-floating mb-3">
+                                        <input type="text" className="form-control" defaultValue={recruiterDetails.contactEmail} {...register("contactEmail")}
+                                               placeholder="David"/>
+                                        <label htmlFor="floatingFirstName">Contact email address</label>
+                                        <p className="error-message">{errors.contactEmail?.message}</p>
+                                    </div>
+
+
+                                    <div className="form-floating mb-3">
+                                        <input type="text" className="form-control" defaultValue={recruiterDetails.contactPhoneNumber} {...register("contactPhoneNumber")}
+                                               placeholder="David"/>
+                                        <label htmlFor="floatingFirstName">Contact phone number</label>
+                                        <p className="error-message">{errors.contactPhoneNumber?.message}</p>
+                                    </div>
+
+                                    <div className="form-floating mb-3">
+                                        <input type="text" className="form-control" defaultValue={recruiterDetails.receptionist} {...register("receptionist")}
+                                               placeholder="David"/>
+                                        <label htmlFor="floatingFirstName">Receptionist</label>
+                                        <p className="error-message">{errors.receptionist?.message}</p>
+                                    </div>
+                                </div>
+                                <div className="col-md-6">
+                                    <div className="form-floating mb-3">
+                                        <input type="text" className="form-control" defaultValue={recruiterDetails.companyName} {...register("companyName")}
+                                               placeholder="David"/>
+                                        <label htmlFor="floatingCompanyName">Company name</label>
+                                        <p className="error-message">{errors.companyName?.message}</p>
+                                    </div>
+
+                                    <div className="form-floating mb-3">
+                                <textarea placeholder="Company description" defaultValue={recruiterDetails.companyDescription} className="form-control custom-text-area"
+                                          name="" id="" cols="30" rows="9" {...register("companyDescription")}></textarea>
+                                        <label htmlFor="floatingCompanyName">Company description</label>
+                                    </div>
+
+                                </div>
+                            </div>
+                            <div className="d-flex justify-content-end">
+                                <button className="blue-submit-button" type="submit">Save changes</button>
+                            </div>
+                        </form>
+                    </div>
+                )}
+                {/*<div className="line-separator"></div>*/}
+            </div>
+        </div>
+
+    )
+}
Index: jobvista-frontend/src/views/profiles/RecruiterProfile.js
===================================================================
--- jobvista-frontend/src/views/profiles/RecruiterProfile.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
+++ jobvista-frontend/src/views/profiles/RecruiterProfile.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -0,0 +1,193 @@
+import "../job_advertisements/JobAdvertisements.css"
+import {useDispatch, useSelector} from "react-redux";
+import {useEffect, useState} from "react";
+import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
+import {formatRelativeTime, sortElementsBy} from "../../utils/utils";
+import {Link} from "react-router-dom";
+import JobType from "../../enumerations/JobType";
+import {RecruiterActions} from "../../redux/actions/recruiterActions";
+
+import {useParams} from "react-router";
+
+
+export const RecruiterProfile = () => {
+
+    const dispatch = useDispatch();
+    const {id} = useParams();
+    const auth = useSelector(state => (state.auth.currentUser))
+
+    const [jobAdvertisementsByRecruiter, setJobAdvertisementsByRecruiter] = useState([]);
+    const [recruiterDetails, setRecruiterDetails] = useState(null);
+
+    let logosState = useSelector(state => state.images.logos)
+    const [logoDispatched, setLogoDispatched] = useState(false)
+    const [logoView, setLogoView] = useState(null);
+
+    const [activeJobListingsCount, setActiveJobListingsCount] = useState(0);
+
+
+    useEffect(() => {
+
+        JobAdvertisementActions.fetchRecruiterDetailsById(id, (success, response) => {
+            if (success) {
+                setRecruiterDetails(response.data)
+            }
+        })
+
+    }, []);
+
+    useEffect(() => {
+        if (id) {
+            if (!logoDispatched && !logosState[id]) {
+                dispatch(RecruiterActions.downloadLogo(id, (success, response) => {
+                    if (success) {
+                        setLogoView(response)
+                        setLogoDispatched(true)
+                    }
+                }))
+            } else {
+                setLogoView(logosState[id])
+            }
+        }
+
+    }, [auth])
+
+    useEffect(() => {
+
+        dispatch(JobAdvertisementActions.fetchJobAdvertisementsByRecruiterProfile(id, (success, response) => {
+            if (success && response.data.length > 0) {
+                setJobAdvertisementsByRecruiter(sortElementsBy(response.data, "postedOn"))
+                setActiveJobListingsCount(countActiveJobListings(response.data));
+            }
+        }))
+    }, [])
+
+
+    function countActiveJobListings(jobAds) {
+        if (jobAds.length > 0) {
+            const activeJobListings = jobAds.filter(job => job.active)
+            return activeJobListings.length;
+        }
+        return 0;
+    }
+
+
+    return (<div className="my-workspace">
+            <div className="custom-container no-additional-margin">
+                <div className="photo-box">
+                    <div>
+                        <img
+                            src="/images/default-company-banner.jpg"
+                            className="company-banner"
+                            alt="Company Banner"
+                        />
+                        <img
+                            // loading gif
+                            src={logoView}
+                            className="company-logo"
+                            alt=""
+                            width={200} height={200}
+                        />
+
+                    </div>
+
+                    <div className="info-tab">
+                        <h3>{recruiterDetails && recruiterDetails.companyName}</h3>
+                        <p>Active job listings: <span>{activeJobListingsCount}</span></p>
+                    </div>
+                </div>
+
+                {recruiterDetails &&
+                    <>
+                        <div className="details-wrap-profile">
+                            <h4>About the company</h4>
+                            <p>{recruiterDetails.companyDescription ?
+                                recruiterDetails.companyDescription : "There is no info about this company yet."
+                            }</p>
+                            <p>
+                                <span> <i
+                                    className="fa-solid fa-envelope"></i> {recruiterDetails.contactEmail}</span> • <span>
+                                <i className="fa-solid fa-phone"></i> {recruiterDetails.contactPhoneNumber}</span>
+                                {recruiterDetails.receptionist && <span> • <i
+                                    className="fa-solid fa-user-tie"></i> {recruiterDetails.receptionist}</span>}
+                            </p>
+                        </div>
+                    </>
+                }
+
+                {/*<div className="line-separator"></div>*/}
+
+                {/*<div className="head-dashboard-box">*/}
+                {/*    <div className="row">*/}
+                {/*        <div className="col-md-12 filter-container">*/}
+                {/*            <div className="search-container">*/}
+                {/*                <i className="fa-solid fa-magnifying-glass search-icon"></i>*/}
+                {/*                <input*/}
+                {/*                    className="search-input"*/}
+                {/*                    type="text"*/}
+                {/*                    placeholder="Search job advertisement by title..."*/}
+                {/*                    value={searchTerm}*/}
+                {/*                    onChange={event => setSearchTerm(event.target.value)}*/}
+                {/*                />*/}
+                {/*            </div>*/}
+                {/*            <div className="sort-section item">*/}
+                {/*                <Select*/}
+                {/*                    defaultValue={{value: "all", label: "All industries"}}*/}
+                {/*                    value={selectedIndustry.value}*/}
+                {/*                    onChange={option => setSelectedIndustry(option.value)}*/}
+                {/*                    options={industryOptionsFilter}*/}
+                {/*                    className="sort-range sort"*/}
+                {/*                />*/}
+                {/*            </div>*/}
+                {/*            <div className="sort-section item">*/}
+                {/*                <Select*/}
+                {/*                    defaultValue={{value: "newest", label: "Date (Newest First)"}}*/}
+                {/*                    value={selectedSortOrder.value}*/}
+                {/*                    onChange={option => setSelectedSortOrder(option.value)}*/}
+                {/*                    options={sortOptions}*/}
+                {/*                    className="sort-range sort"*/}
+                {/*                />*/}
+                {/*            </div>*/}
+                {/*            <button onClick={filterJobAdvertisements} className="btn-open-modal">Find jobs</button>*/}
+                {/*        </div>*/}
+                {/*    </div>*/}
+                {/*</div>*/}
+                <div className="row row-cols-1 row-cols-md-4 g-4">
+
+                    {jobAdvertisementsByRecruiter && jobAdvertisementsByRecruiter.map((jobAd, index) => (
+                        <div key={index} className="col">
+                            <div className="custom-card hub-card">
+                                <div className="card-head">
+                                    <span className="hourly-salary"><b>${jobAd.startingSalary}/hr</b></span>
+                                    <span
+                                        className="job-type"> {jobAd.jobType === JobType.JOB ? "Job" : "Internship"}</span>
+                                    {!jobAd.active && <span className="expired">Expired</span>}
+                                </div>
+                                <div className="card-body">
+                                    <h5 className="card-title">{jobAd.title}</h5>
+                                    <span>{jobAd.industry} • <span style={{
+                                        color: "black", fontWeight: "bold"
+                                    }}>{formatRelativeTime(jobAd.postedOn)}</span></span>
+                                    <div className="card-info">
+                                        <span><i className="fa-solid fa-building"
+                                                 style={{color: "#000000"}}></i> Company: <span style={{
+                                            color: "black", fontWeight: "bold"
+                                        }}>{jobAd.recruiterName}</span></span> <br/>
+                                    </div>
+
+                                </div>
+                                <div className="card-foot">
+                                    <Link to={`/job-advertisements/${jobAd.id}`} className="card-button">Read
+                                        more</Link>
+                                </div>
+                            </div>
+                        </div>))}
+
+                </div>
+
+
+            </div>
+        </div>
+
+    )
+}
