Merge branch 'feature/solving_add_blocker_problem_fe' of Neca/HRCenter into FE_dev

src/AppRoutes.js

 
 import {
   ADS_PAGE,
-  AD_DETAILS_PAGE,
   FORGOT_PASSWORD_PAGE,
   FORGOT_PASSWORD_CONFIRMATION_PAGE,
   NOT_FOUND_PAGE,
   STATS_PAGE,
   REGISTER_PAGE,
   CREATE_AD_PAGE,
+  JOB_DETAILS_PAGE,
 } from "./constants/pages";
 
 import LoginPage from "./pages/LoginPage/LoginPageMUI";
       <Route exact path={REGISTER_PAGE} component={RegisterPage} />
       <Route path={RESET_PASSWORD_PAGE} component={ResetPasswordPage} />
       <PrivateRoute exact path={ADS_PAGE} component={AdsPage} />
-      <PrivateRoute exact path={AD_DETAILS_PAGE} component={AdDetailsPage} />
+      <PrivateRoute exact path={JOB_DETAILS_PAGE} component={AdDetailsPage} />
       <PrivateRoute exact path={USER_DETAILS_PAGE} component={UserDetails} />
       <PrivateRoute exact path={USERS_PAGE} component={UsersPage} />
       <PrivateRoute exact path={CANDIDATES_PAGE} component={CandidatesPage} />

src/__tests__/UITests/adDetailsCandidateCardUI.test.js

 
   it("Should load ad details candidate card component", () => {
     render(cont);
-    expect(screen.getByTestId("ad-details-candidate")).toBeDefined();
+    expect(screen.getByTestId("job-details-candidate")).toBeDefined();
   });
 
   it("Should navigate on candidates page when button clicked", async () => {
     render(cont);
     waitFor(() => {
-      fireEvent.click(screen.getByTestId("ad-details-candidate-title-link"));
+      fireEvent.click(screen.getByTestId("job-details-candidate-title-link"));
       expect(props.history.push).toHaveBeenCalledWith("/candidates/1");
     });
   });

src/__tests__/UITests/adDetailsPageUI.test.js

 
   it("Should render AdDetailsPage", () => {
     render(cont);
-    expect(screen.getByTestId("ad-details-page")).toBeDefined();
+    expect(screen.getByTestId("job-details-page")).toBeDefined();
   });
 
   it("Should render modal when click archive ad button", () => {
     const { container } = render(cont);
 
-    fireEvent.click(container.getElementsByClassName("archive-ad-button")[0]);
+    fireEvent.click(container.getElementsByClassName("archive-job-button")[0]);
 
     expect(screen.getByTestId("alert-container")).toBeDefined();
   });
     const { container } = render(cont);
 
     waitFor(() => {
-      fireEvent.click(container.getElementsByClassName("archive-ad-button")[0]);
+      fireEvent.click(container.getElementsByClassName("archive-job-button")[0]);
 
       fireEvent.click(container.getElementsByClassName("dialog-btn")[1]);
 
-      waitFor(() => expect(props.history.push).toHaveBeenCalledWith('/ads'));
+      waitFor(() => expect(props.history.push).toHaveBeenCalledWith('/jobs'));
     });
   });
 
   it("Should render apply for ad button", () => {
     const { container } = render(cont);
     expect(
-      container.getElementsByClassName("apply-for-ad-button")[0]
+      container.getElementsByClassName("apply-for-job-button")[0]
     ).toBeDefined();
   });
 
   it("Should render apply for ad modal after click button", () => {
     const { container } = render(cont);
 
-    fireEvent.click(container.getElementsByClassName("apply-for-ad-button")[0]);
+    fireEvent.click(container.getElementsByClassName("apply-for-job-button")[0]);
 
     const a = screen.getByTestId("custom-modal-test-id");
 
   it("Should render go back button", () => {
     const { container } = render(cont);
     expect(
-      container.getElementsByClassName("ad-details-buttons-link")[0]
+      container.getElementsByClassName("job-details-buttons-link")[0]
     ).toBeDefined();
   });
 
     const { container } = render(cont);
 
     fireEvent.click(
-      container.getElementsByClassName("ad-details-buttons-link")[0]
+      container.getElementsByClassName("job-details-buttons-link")[0]
     );
 
-    const arg = { pathname: "/ads" };
+    const arg = { pathname: "/jobs" };
 
     waitFor(() => expect(props.history.push).toHaveBeenCalledWith(arg));
   });

src/__tests__/UITests/adsCandidatesPageUI.test.js

   it("Should render", () => {
     const { container } = render(cont);
     expect(
-      container.getElementsByClassName("ads-candidates-container")[0]
+      container.getElementsByClassName("jobs-candidates-container")[0]
     ).toBeDefined();
   });
 
   it("Number of sliders should be equal to length of our adsCandidates array", () => {
     const { container } = render(cont);
-    expect(container.getElementsByClassName("ads-candidates").length).toBe(
+    expect(container.getElementsByClassName("jobs-candidates").length).toBe(
       mockState.candidates.adsCandidates.length
     );
   });
     const { container } = render(cont);
     expect(
       container
-        .getElementsByClassName("ads-candidates")[0]
+        .getElementsByClassName("jobs-candidates")[0]
         .getElementsByClassName("slick-slide").length
     ).toBe(mockState.candidates.adsCandidates[0].applicants.length);
   });
   it("Number of arrows (left and right) should be 1 because there is more than 4 candidates which applied for ad", () => {
     const { container } = render(cont);
     expect(
-      container.getElementsByClassName("active-ads-ads-arrows").length
+      container.getElementsByClassName("active-jobs-jobs-arrows").length
     ).toBe(1);
   });
 
     const { container } = render(cont);
     fireEvent.click(
       container
-        .getElementsByClassName("active-ads-ads-arrows")[0]
+        .getElementsByClassName("active-jobs-jobs-arrows")[0]
         .getElementsByTagName("button")[1]
     );
 
     await waitFor(() =>
       expect(
         container
-          .getElementsByClassName("ads-candidates")[0]
+          .getElementsByClassName("jobs-candidates")[0]
           .getElementsByClassName("slick-active")[0]
           .getElementsByClassName("candidate-card-container")[0]
           .getElementsByClassName("candidate-card-applicant-name")[0]

src/__tests__/UITests/adsPageUI.test.js

 
   it("Should render ads", () => {
     render(cont);
-    expect(screen.getByTestId("ads-page")).toBeDefined();
+    expect(screen.getByTestId("jobs-page")).toBeDefined();
   });
 
   it("Should be rendered button which is used for showing input responsible for searching by name", () => {
     const { container } = render(cont);
-    expect(container.getElementsByClassName("ads-page-btn")[0]).toBeDefined();
+    expect(container.getElementsByClassName("jobs-page-btn")[0]).toBeDefined();
   });
 
   it("Should be rendered button for toggling filters modal", () => {
     const { container } = render(cont);
-    expect(container.getElementsByClassName("ads-page-btn")[1]).toBeDefined();
+    expect(container.getElementsByClassName("jobs-page-btn")[1]).toBeDefined();
   });
 
   it("Should be rendered button for adding new ad", () => {
     const { container } = render(cont);
-    expect(container.getElementsByClassName("ads-page-btn")[2]).toBeDefined();
+    expect(container.getElementsByClassName("jobs-page-btn")[2]).toBeDefined();
   });
 
   it("Should render CreateAdPage when click Add Ad button", () => {
     const { container } = render(cont);
-    fireEvent.click(container.getElementsByClassName("ads-page-btn")[2]);
+    fireEvent.click(container.getElementsByClassName("jobs-page-btn")[2]);
 
     expect(props.history.push).toHaveBeenCalledWith("/create-ad");
   });
   it("Input for searching by title should not be shown when component is initialy rendered", () => {
     const { container } = render(cont);
     expect(
-      container.getElementsByClassName("ads-page-search-by-title")[0].style
+      container.getElementsByClassName("jobs-page-search-by-title")[0].style
         .visibility
     ).toBe("hidden");
   });
 
   it("Should be rendered ad cards", () => {
     const { container } = render(cont);
-    expect(container.getElementsByClassName("ad-card").length).toBeGreaterThan(
+    expect(container.getElementsByClassName("job-card").length).toBeGreaterThan(
       0
     );
   });
 
   it("Should be rendered archive ad cards", () => {
     const { container } = render(cont);
-    expect(container.getElementsByClassName("archive-ad").length).toBe(0);
+    expect(container.getElementsByClassName("archive-job").length).toBe(0);
   });
 
   it("Should render filter drawer after click filter button", () => {
     const { container } = render(cont);
 
     fireEvent.click(container.getElementsByClassName("fltr-btn")[0]);
-    expect(screen.getByTestId("ad-filters-drawer")).toBeDefined();
+    expect(screen.getByTestId("job-filters-drawer")).toBeDefined();
   });
 
   it("Should render arrow buttons for active ads slider", () => {
     const { container } = render(cont);
     expect(
-      container.getElementsByClassName("active-ads-ads-arrows")
+      container.getElementsByClassName("active-jobs-jobs-arrows")
     ).toBeDefined();
   });
 
   it("Should render arrow buttons for archived ads slider", () => {
     const { container } = render(cont);
     expect(
-      container.getElementsByClassName("archived-ads-ads-arrows")
+      container.getElementsByClassName("archived-jobs-jobs-arrows")
     ).toBeDefined();
   });
 
       fireEvent.click(container.getElementsByClassName("fltr-btn")[0]);
 
       fireEvent.click(
-        container.getElementsByClassName("ad-filters-checkbox")[0]
+        container.getElementsByClassName("job-filters-checkbox")[0]
       );
 
-      fireEvent.click(container.getByTestId("ad-filters-submit")[0]);
+      fireEvent.click(container.getByTestId("job-filters-submit")[0]);
 
       expect(
-        container.getElementsByClassName("ad-card").length
+        container.getElementsByClassName("job-card").length
       ).toBeGreaterThan(0);
     });
   });
     const { container } = render(cont);
     waitFor(() =>
       expect(
-        container.getElementsByClassName("ad-card").length
+        container.getElementsByClassName("job-card").length
       ).toBeGreaterThan(0)
     );
   });
 
   it("Should navigate to ad details when click on ad card", async () => {
     const { container } = render(cont);
-    fireEvent.click(container.getElementsByClassName("ad-card")[0]);
+    fireEvent.click(container.getElementsByClassName("job-card")[0]);
 
-    expect(props.history.push).toHaveBeenCalledWith("/ads/1");
+    expect(props.history.push).toHaveBeenCalledWith("/jobs/1");
   });
 });

src/__tests__/UITests/applyForAdFirstStageUI.test.js

 
   it("Should render firstName input", () => {
     render(cont);
-    expect(screen.getByTestId("apply-for-ad-modal-first-name-input")).toBeDefined();
+    expect(screen.getByTestId("apply-for-job-modal-first-name-input")).toBeDefined();
   });
 
   it("Should change firstName on changing input", async () => {
     render(cont);
     fireEvent.change(
-      screen.getByTestId("apply-for-ad-modal-first-name-input"),
+      screen.getByTestId("apply-for-job-modal-first-name-input"),
       { target: { value: "Ermin" } }
     );
 
 
   it("Should change last on changing input", async () => {
     render(cont);
-    fireEvent.change(screen.getByTestId("apply-for-ad-modal-last-name-input"), {
+    fireEvent.change(screen.getByTestId("apply-for-job-modal-last-name-input"), {
       target: { value: "Bronja" },
     });
 
   it("Should select male gender", async () => {
     const { container } = render(cont);
     fireEvent.click(
-      container.getElementsByClassName("apply-for-ad-modal-gender-input")[0]
+      container.getElementsByClassName("apply-for-job-modal-gender-input")[0]
     );
 
     waitFor(() => expect(props.setGender).toHaveBeenCalled());
   it("Should select female gender", async () => {
     const { container } = render(cont);
     fireEvent.click(
-      container.getElementsByClassName("apply-for-ad-modal-gender-input")[1]
+      container.getElementsByClassName("apply-for-job-modal-gender-input")[1]
     );
 
     waitFor(() => expect(props.setGender).toHaveBeenCalled());
 
   it("Should change date of birth", async () => {
     render(cont);
-    fireEvent.change(screen.getByTestId("apply-for-ad-modal-date-of-birth"), {
+    fireEvent.change(screen.getByTestId("apply-for-job-modal-date-of-birth"), {
       target: { value: "1998-05-05" },
     });
 
 
   it("Should change phone number", async () => {
     render(cont);
-    fireEvent.change(screen.getByTestId("apply-for-ad-modal-phone-number"), { target: { value: "0000000000" } });
+    fireEvent.change(screen.getByTestId("apply-for-job-modal-phone-number"), { target: { value: "0000000000" } });
 
     waitFor(() => expect(props.setPhoneNumber).toHaveBeenCalled());
   });
 
   it("Should click go forward button", async () => {
     render(cont);
-    fireEvent.click(screen.getByTestId("apply-for-ad-modal-go-forward-button"));
+    fireEvent.click(screen.getByTestId("apply-for-job-modal-go-forward-button"));
 
     waitFor(() => expect(props.onIncreaseStage).toHaveBeenCalled());
   });

src/__tests__/UITests/applyForAdFourthStageUI.test.js

 
   it("Should render apply for ad fourth stage modal", () => {
     render(cont);
-    expect(screen.getByTestId("apply-for-ad-modal-fourth-stage")).toBeDefined();
+    expect(screen.getByTestId("apply-for-job-modal-fourth-stage")).toBeDefined();
   });
 
   it("Should change pdfFile", async () => {
     render(cont);
     fireEvent.change(
-      screen.getByTestId("apply-for-ad-modal-fourth-stage-pdf-input"),
+      screen.getByTestId("apply-for-job-modal-fourth-stage-pdf-input"),
       { target: { files: [file] } }
     );
 
   it("Should change coverLetter", async () => {
     render(cont);
     fireEvent.change(
-      screen.getByTestId("apply-for-ad-modal-fourth-stage-cover-letter-input"),
+      screen.getByTestId("apply-for-job-modal-fourth-stage-cover-letter-input"),
       { target: { value: "Cover Letter" } }
     );
 
   it("Should go back on click button", async () => {
     render(cont);
     fireEvent.click(
-      screen.getByTestId("apply-for-ad-modal-fourth-stage-go-back-button")
+      screen.getByTestId("apply-for-job-modal-fourth-stage-go-back-button")
     );
 
     waitFor(() => expect(props.onDecreaseStage).toHaveBeenCalled());
   it("Should finish stages on click button", async () => {
     render(cont);
     fireEvent.click(
-      screen.getByTestId("apply-for-ad-modal-fourth-stage-go-forward-button")
+      screen.getByTestId("apply-for-job-modal-fourth-stage-go-forward-button")
     );
 
     waitFor(() => expect(props.onFinishedFourStages).toHaveBeenCalled());

src/__tests__/UITests/applyForAdSecondStageUI.test.js

 
   it("Should render apply for ad second stage", () => {
     render(cont);
-    expect(screen.getByTestId("apply-for-ad-second-stage")).toBeDefined();
+    expect(screen.getByTestId("apply-for-job-second-stage")).toBeDefined();
   });
 
   it("Should change professional qualification input", () => {
     render(cont);
     fireEvent.change(
       screen.getByTestId(
-        "apply-for-ad-second-stage-professional-qualification"
+        "apply-for-job-second-stage-professional-qualification"
       ),
       {
         target: { value: "Faculty" },
     const { container } = render(cont);
 
     expect(
-      container.getElementsByClassName("apply-for-ad-second-stage-checkbox")[0]
+      container.getElementsByClassName("apply-for-job-second-stage-checkbox")[0]
     ).toBeDefined();
   });
 
     const { container } = render(cont);
 
     expect(
-      container.getElementsByClassName("apply-for-ad-second-stage-checkbox")[1]
+      container.getElementsByClassName("apply-for-job-second-stage-checkbox")[1]
     ).toBeDefined();
   });
 
     const { container } = render(cont);
 
     expect(
-      container.getElementsByClassName("apply-for-ad-second-stage-checkbox")[2]
+      container.getElementsByClassName("apply-for-job-second-stage-checkbox")[2]
     ).toBeDefined();
   });
 
     render(cont);
 
     fireEvent.change(
-      screen.getByTestId("apply-for-ad-second-stage-experience-input"),
+      screen.getByTestId("apply-for-job-second-stage-experience-input"),
       { target: { value: 2 } }
     );
 
     const { container } = render(cont);
 
     fireEvent.click(
-      container.getElementsByClassName("apply-for-ad-second-stage-checkbox")[0]
+      container.getElementsByClassName("apply-for-job-second-stage-checkbox")[0]
     );
 
     waitFor(() => expect(props.technologies[0]).toBe(true));

src/__tests__/UITests/applyForAdThirdStageUI.test.js

   it("Should change linkedin input", async () => {
     render(cont);
     fireEvent.change(
-      screen.getByTestId("apply-for-ad-modal-third-stage-linkedin-input"),
+      screen.getByTestId("apply-for-job-modal-third-stage-linkedin-input"),
       { target: { value: "https://linkedin" } }
     );
 
     render(cont);
 
     expect(
-      screen.getByTestId("apply-for-ad-modal-third-stage-linkedin-input")
+      screen.getByTestId("apply-for-job-modal-third-stage-linkedin-input")
     ).toBeDefined();
   });
 
   it("Should change github input", async () => {
     render(cont);
     fireEvent.change(
-      screen.getByTestId("apply-for-ad-modal-third-stage-github-input"),
+      screen.getByTestId("apply-for-job-modal-third-stage-github-input"),
       { target: { value: "https://github" } }
     );
 
   it("Should change bitbucket input", async () => {
     render(cont);
     fireEvent.change(
-      screen.getByTestId("apply-for-ad-modal-third-stage-bitbucket-input"),
+      screen.getByTestId("apply-for-job-modal-third-stage-bitbucket-input"),
       { target: { value: "https://bitbucket" } }
     );
 
   it("Should change email input", async () => {
     render(cont);
     fireEvent.change(
-      screen.getByTestId("apply-for-ad-modal-third-stage-email-input"),
+      screen.getByTestId("apply-for-job-modal-third-stage-email-input"),
       { target: { value: "ermin.bronja@dilig.net" } }
     );
 
   it("Should go back when button clicked", async () => {
     render(cont);
     fireEvent.click(
-      screen.getByTestId("apply-for-ad-modal-third-stage-go-back-button")
+      screen.getByTestId("apply-for-job-modal-third-stage-go-back-button")
     );
 
     waitFor(() => expect(props.onDecreaseStage).toHaveBeenCalled());
   it("Should go forward when button clicked", async () => {
     render(cont);
     fireEvent.click(
-      screen.getByTestId("apply-for-ad-modal-third-stage-go-forward-button")
+      screen.getByTestId("apply-for-job-modal-third-stage-go-forward-button")
     );
 
     waitFor(() => expect(props.onIncreaseStage).toHaveBeenCalled());

src/__tests__/UITests/candidateDetailsPageUI.test.js

   it("Should render page with all candidates", () => {
     const { container } = render(cont);
     fireEvent.click(
-      container.getElementsByClassName("applicant-ads-back-button")[0]
+      container.getElementsByClassName("applicant-jobs-back-button")[0]
     );
     const arg = { pathname: "/candidates" };
     expect(props.history.push).toHaveBeenCalledWith(arg);

src/__tests__/UITests/createAdPageUI.test.js

 
   it("Should render create ad page", () => {
     render(cont);
-    expect(screen.getByTestId("create-ad-page")).toBeDefined();
+    expect(screen.getByTestId("create-job-page")).toBeDefined();
   });
 
   it("Should render go back button", () => {
     const { container } = render(cont);
     expect(
-      container.getElementsByClassName("create-ad-buttons-back")[0]
+      container.getElementsByClassName("create-job-buttons-back")[0]
     ).toBeDefined();
   });
 
   it("Should render go forward button", () => {
     const { container } = render(cont);
     expect(
-      container.getElementsByClassName("create-ad-buttons-forward")[0]
+      container.getElementsByClassName("create-job-buttons-forward")[0]
     ).toBeDefined();
   });
 
   it("Should render create ad first step form", () => {
     render(cont);
-    expect(screen.getByTestId("create-ad-first-step-form")).toBeDefined();
+    expect(screen.getByTestId("create-job-first-step-form")).toBeDefined();
   });
 
   it("Should render sercond step form", () => {
     const { container } = render(cont);
     const formControls = container.getElementsByClassName(
-      "create-ad-form-control-first-step-input"
+      "create-job-form-control-first-step-input"
     );
 
     fireEvent.change(formControls[0], { target: { value: ".NET DEVELOPER" } });
     fireEvent.change(formControls[1], { target: { value: "2020-05-24" } });
 
     fireEvent.click(
-      container.getElementsByClassName("create-ad-buttons-forward")[0]
+      container.getElementsByClassName("create-job-buttons-forward")[0]
     );
 
-    fireEvent.click(container.getElementsByClassName("create-ad-second-step-checkbox")[0])
+    fireEvent.click(container.getElementsByClassName("create-job-second-step-checkbox")[0])
 
     fireEvent.click(
-      container.getElementsByClassName("create-ad-buttons-forward")[0]
+      container.getElementsByClassName("create-job-buttons-forward")[0]
     );
 
     expect(screen.getByTestId("create-ad-third-step-form")).toBeDefined();

src/__tests__/UITests/patternDetailsPageUI.test.js

     const { container } = render(cont);
     waitFor(() => {
       expect(
-        container.getElementsByClassName("ad-details-buttons-link")[0]
+        container.getElementsByClassName("job-details-buttons-link")[0]
       ).toBeDefined();
     });
   });

src/__tests__/UITests/patternsPageUI.test.js

 
   it("Should render add pattern button", () => {
     const { container } = render(cont);
-    expect(container.getElementsByClassName("add-ad-btn")[0]).toBeDefined();
+    expect(container.getElementsByClassName("add-job-btn")[0]).toBeDefined();
   });
 
   it("Should render add pattern modal", () => {

src/__tests__/UITests/statsAdComponentUI.test.js

 
   it("Should render", () => {
     const { container } = render(cont);
-    expect(container.getElementsByClassName("stats-ad")[0]).toBeDefined();
+    expect(container.getElementsByClassName("stats-job")[0]).toBeDefined();
   });
 
   it("Should render title", () => {
     const { container } = render(cont);
     expect(
-      container.getElementsByClassName("archive-ad-title")[0]
+      container.getElementsByClassName("archive-job-title")[0]
     ).toBeDefined();
   });
 
   it("Should render date", () => {
     const { container } = render(cont);
     expect(
-      container.getElementsByClassName("archive-ad-date")[0]
+      container.getElementsByClassName("archive-job-date")[0]
     ).toBeDefined();
   });
 
     const { container } = render(cont);
     expect(
       container
-        .getElementsByClassName("archive-ad-experience")[0]
+        .getElementsByClassName("archive-job-experience")[0]
         .getElementsByTagName("p")[0].textContent
     ).toBe("1+ common.experience");
   });

src/__tests__/UITests/statsPageUI.test.js

 
   it("Should render ads because there is more than 0 ads", () => {
     const { container } = render(cont);
-    expect(container.getElementsByClassName("archived-ads")[0]).toBeDefined();
+    expect(container.getElementsByClassName("archived-jobs")[0]).toBeDefined();
   });
 
   it("Should render only one right arrow and that depends on screen size", () => {
 
   it("Should render all ads in slider", () => {
     const { container } = render(cont);
-    expect(container.getElementsByClassName("stats-ad").length).toBe(
+    expect(container.getElementsByClassName("stats-job").length).toBe(
       mockState.stats.ads.length
     );
   });
         container
           .getElementsByClassName("slick-list")[0]
           .getElementsByClassName("slick-active")[4]
-          .getElementsByClassName("archive-ad-title")[0].textContent
+          .getElementsByClassName("archive-job-title")[0].textContent
       ).toBe("React")
     );
   });

src/assets/styles/components/_candidatePage.scss

   color: #226cb0;
 }
 
-.applicant-ads-container {
+.applicant-jobs-container {
   margin-top: 36px;
 }
 
-.applicant-ads-container > p {
+.applicant-jobs-container > p {
   font-family: "Source Sans Pro";
   font-weight: 600;
   font-size: 24px;
   color: #272727;
 }
 
-.applicant-ads-sub-container {
+.applicant-jobs-sub-container {
   margin-top: 18px;
   display: flex;
   margin-left: -20px;
   text-decoration: none;
 }
 
-.applicant-ads-back-button {
+.applicant-jobs-back-button {
   margin-right: 36px;
   font-family: "Source Sans Pro";
   font-weight: 400;
   color: #272727;
 }
 
-.applicant-ads-container-2 {
+.applicant-jobs-container-2 {
   display: flex;
   align-items: center;
   margin-top: 18px;
     justify-content: initial;
   }
 
-  .applicant-ads-container-2 {
+  .applicant-jobs-container-2 {
     flex-direction: column-reverse;
     align-items: flex-start;
   }
     padding-left: 0 !important;
   }
 
-  .applicant-ads-back-button {
+  .applicant-jobs-back-button {
     font-size: 14px;
     line-height: 18px;
     margin-right: 0;
     letter-spacing: 0.04em;
   }
 
-  .active-ads-ads-arrows {
+  .active-jobs-jobs-arrows {
     margin-left: -0.75rem;
   }
 
-  .applicant-ads-buttons-container{
+  .applicant-jobs-buttons-container{
     margin-left: 36px;
   }
 }

src/assets/styles/components/_candidatesPage.scss

   background-color: #226cb0;
 }
 
-.ads-candidates-container {
+.jobs-candidates-container {
   max-height: 837px;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
-.ads-candidates-slider {
+.jobs-candidates-slider {
   display: flex;
   margin-top: 31px;
 }
 
-.ads-candidates-slider .slick-track {
+.jobs-candidates-slider .slick-track {
   margin: 0 !important;
 }
 
-.ads-candidates-slider .slick-slider {
+.jobs-candidates-slider .slick-slider {
   width: 100% !important;
 }
 
-.ads-candidates-top-container {
+.jobs-candidates-top-container {
   display: flex;
   align-items: center;
   margin-left: 72px;
 }
 
-.ads-candidates-title {
+.jobs-candidates-title {
   font-family: Source Sans Pro;
   font-size: 24px;
   font-weight: 600;
   margin-left: 18px;
 }
 
-.ads-candidates-numberOfApplicants {
+.jobs-candidates-numberOfApplicants {
   font-family: Source Sans Pro;
   font-size: 16px;
   font-weight: 600;
   margin-left: 5px;
 }
 
-.ads-candidates-image {
+.jobs-candidates-image {
   width: 49px;
   height: 39px;
 }
   margin-left: 42px;
 }
 
-.ads-search-field-responsive {
+.jobs-search-field-responsive {
   min-width: 350px;
   border: 1px solid #226cb0;
   border-radius: 10px;
   }
 }
 
-.ads-search-field-responsive::placeholder {
+.jobs-search-field-responsive::placeholder {
   font-size: 1rem;
   color: #9d9d9d;
   font-style: italic;
 }
 
-.ads-search-field {
+.jobs-search-field {
   min-width: 700px !important;
   border: 1px solid #226cb0;
   border-radius: 10px;
   z-index: 1000;
 }
 
-.ads-search-field::placeholder {
+.jobs-search-field::placeholder {
   font-size: 1rem;
   color: #9d9d9d;
   font-style: italic;
 }
 
 @media only screen and (max-width: 600px) {
-  .ads-candidates-title {
+  .jobs-candidates-title {
     font-size: 18px;
     margin-left: 10px;
   }
-  .ads-candidates-image {
+  .jobs-candidates-image {
     width: 40px;
     height: 30px;
   }
-  .ads-candidates-numberOfApplicants {
+  .jobs-candidates-numberOfApplicants {
     font-size: 14px;
   }
 }
 
 @media only screen and (max-width: 361px) {
-  .ads-candidates-slider {
+  .jobs-candidates-slider {
     flex-direction: column-reverse;
   }
 
     margin-left: 36px;
   }
 
-  .ads-candidates-top-container {
+  .jobs-candidates-top-container {
     margin-left: 36px;
   }
 

src/assets/styles/components/_statistics.scss

     padding: 20px 36px !important;
   }
 }
-.ad-count {
+.job-count {
   display: flex;
   flex-direction: row;
   justify-content: center;
   order: 0;
   flex-grow: 0;
 }
-.stat-ads {
+.stat-jobs {
   margin-bottom: 0 !important;
   padding-bottom: 0 !important;
 }

src/components/Ads/Ad.js

   const { t } = useTranslation();
 
   return (
-    <div className={`ad-card ${className}`} onClick={onShowAdDetails}>
-      <div className="ad-card-date">
+    <div className={`job-card ${className}`} onClick={onShowAdDetails}>
+      <div className="job-card-date">
         <p>
           {new Date(createdAt).toLocaleDateString()} -{" "}
           {new Date(expiredAt).toLocaleDateString()}
         </p>
       </div>
 
-      <div className="ad-card-title">
+      <div className="job-card-title">
         <h3>{title}</h3>
       </div>
 
-      <div className="ad-card-logo">
+      <div className="job-card-logo">
         <img src={selectLogo(title)} alt="logo-react" />
       </div>
 
-      <div className="ad-card-experience">
+      <div className="job-card-experience">
         <p>
           {minimumExperience}+ {t("common.experience")}
         </p>
       </div>
 
       {!matches && (
-        <div className="ad-card-buttons">
+        <div className="job-card-buttons">
           <button>LinkedIn</button>
           <button>Facebook</button>
           <button disabled>Instagram</button>
         </div>
       )}
       {matches && (
-        <div className="ad-card-buttons">
-          <button className="ad-card-buttons-button">
+        <div className="job-card-buttons">
+          <button className="job-card-buttons-button">
             <img src={linkedin} />
           </button>
-          <button className="ad-card-buttons-button">
+          <button className="job-card-buttons-button">
             <img src={facebook} />
           </button>
-          <button disabled className="ad-card-buttons-button">
+          <button disabled className="job-card-buttons-button">
             <img src={instagram} />
           </button>
         </div>

src/components/Ads/AdDetailsCandidateCard.js

   const { t } = useTranslation();
   return (
     <div
-      data-testid="ad-details-candidate"
-      className={`ad-details-candidate ${className}`}
+      data-testid="job-details-candidate"
+      className={`job-details-candidate ${className}`}
     >
-      <div className="ad-details-candidate-date">
+      <div className="job-details-candidate-date">
         <p>{new Date().toLocaleDateString()}</p>
       </div>
-      <div className="ad-details-candidate-title">
+      <div className="job-details-candidate-title">
         <h3
-          data-testid="ad-details-candidate-title-link"
+          data-testid="job-details-candidate-title-link"
           onClick={() =>
             history.push(CANDIDATES_DETAILS_PAGE.replace(":id", id))
           }
           {firstName} {lastName}
         </h3>
       </div>
-      <div className="ad-details-candidate-experience">
+      <div className="job-details-candidate-experience">
         {experience > 0 ? (
           <p>
             {experience}+ {t("common.experience")}
           <p>{t("common.noExperience")}</p>
         )}
       </div>
-      <div className="ad-details-candidate-buttons">
+      <div className="job-details-candidate-buttons">
         <button>React</button>
         <button>.NET</button>
         <button>Angular</button>
       </div>
-      <div className="ad-details-candidate-cv">
+      <div className="job-details-candidate-cv">
         <a href="#">{cv}</a>
       </div>
     </div>

src/components/Ads/AdFilters.js

       onKeyDown={handleClose}
     >
       <div data-testid="ad-filters-drawer">
-        <div className="ad-filters-header-container">
-          <div className="ad-filters-header">
+        <div className="job-filters-header-container">
+          <div className="job-filters-header">
             <img src={filterIcon} alt="filter_icon" />
             <h3>{t("filters.filters")}</h3>
             <p>
               <sub>| {t("ads.ads")}</sub>
             </p>
           </div>
-          <div className="ad-filters-header-close" onClick={handleClose}>
+          <div className="job-filters-header-close" onClick={handleClose}>
             <img src={x} alt="x" />
           </div>
         </div>
-        <div className="ad-filters-experience">
-          <div className="ad-filters-sub-title">
+        <div className="job-filters-experience">
+          <div className="job-filters-sub-title">
             <p>{t("filters.experience")}</p>
           </div>
-          <div className="ad-filters-experience-slider">
+          <div className="job-filters-experience-slider">
             <Slider
               getAriaLabel={() => "Temperature range"}
               value={sliderValue}
             />
           </div>
         </div>
-        <div className="ad-filters-technologies">
-          <div className="ad-filters-sub-title">
+        <div className="job-filters-technologies">
+          <div className="job-filters-sub-title">
             <p>{t("filters.tecnologies")}</p>
           </div>
-          <div className="ad-filters-technologies-checkboxes">
+          <div className="job-filters-technologies-checkboxes">
             <FormGroup>
               {technologies?.map((technology, index) => (
                 <FormControlLabel
                       onChange={handleCheckboxes}
                       value={technology.name}
                       checked={technology.isChecked}
-                      className="ad-filters-checkbox"
+                      className="job-filters-checkbox"
                     />
                   }
                   label={technology.name}
             </FormGroup>
           </div>
         </div>
-        <div className="ad-filters-technologies">
-          <div className="ad-filters-sub-title">
+        <div className="job-filters-technologies">
+          <div className="job-filters-sub-title">
             <p>{t("filters.employmentType")}</p>
           </div>
-          <div className="ad-filters-employment-type">
+          <div className="job-filters-employment-type">
             <button
               className={`c-btn ${
                 employmentType === "Intership"
             </button>
           </div>
         </div>
-        <div className="ad-filters-technologies">
-          <div className="ad-filters-sub-title">
+        <div className="job-filters-technologies">
+          <div className="job-filters-sub-title">
             <p>{t("filters.workHour")}</p>
           </div>
-          <div className="ad-filters-employment-type">
+          <div className="job-filters-employment-type">
             <button
               className={`c-btn  ${
                 workHour === "PartTime"
             </button>
           </div>
         </div>
-        <div className="ad-filters-search">
+        <div className="job-filters-search">
           <button
             onClick={onSubmitFilters}
             className="c-btn c-btn--primary"
-            data-testid="ad-filters-submit"
+            data-testid="job-filters-submit"
           >
             {t("filters.search")}
           </button>

src/components/Ads/ApplyForAd.js

   };
 
   return (
-    <CustomModal open={open} onCloseModal={onCloseModal} classes="apply-for-ad">
-      <div className="apply-for-ad-header">
-        <div className="apply-for-ad-header-left">
-          <div className="apply-for-ad-header-left-image">
+    <CustomModal open={open} onCloseModal={onCloseModal} classes="apply-for-job">
+      <div className="apply-for-job-header">
+        <div className="apply-for-job-header-left">
+          <div className="apply-for-job-header-left-image">
             <img src={briefcaseIcon} alt="plus" />
           </div>
-          <div className="apply-for-ad-header-left-image-title">
+          <div className="apply-for-job-header-left-image-title">
             <p>{t("ads.signUp")}</p>
           </div>
-          <div className="apply-for-ad-header-left-image-title-sub">
+          <div className="apply-for-job-header-left-image-title-sub">
             <sub> | {title}</sub>
           </div>
         </div>
-        <div className="apply-for-ad-header-right">
+        <div className="apply-for-job-header-right">
           <button onClick={onCloseModal}>
             <img src={xIcon} alt="x" />
           </button>

src/components/Ads/ApplyForAdFirstStage.js

 
   return (
     <div>
-      <div className="apply-for-ad-modal-form-control">
+      <div className="apply-for-job-modal-form-control">
         <label>{t("common.name")}</label>
         <input
           type="text"
           placeholder="ex. Petar"
           value={firstName}
-          data-testid="apply-for-ad-modal-first-name-input"
+          data-testid="apply-for-job-modal-first-name-input"
           onChange={(e) => setFirstName(e.target.value)}
         />
       </div>
-      <div className="apply-for-ad-modal-form-control">
+      <div className="apply-for-job-modal-form-control">
         <label>{t("common.lastName")}</label>
         <input
           type="text"
           placeholder="ex. Petrovic"
           value={lastName}
-          data-testid="apply-for-ad-modal-last-name-input"
+          data-testid="apply-for-job-modal-last-name-input"
           onChange={(e) => setLastName(e.target.value)}
         />
       </div>
-      <div className="apply-for-ad-modal-form-control">
+      <div className="apply-for-job-modal-form-control">
         <label>{t("common.gender")}</label>
         <div style={{ display: "flex" }}>
           <div style={{ display: "flex" }}>
               type="radio"
               name="gender"
               value="Muski"
-              className="apply-for-ad-modal-gender-input"
+              className="apply-for-job-modal-gender-input"
               checked={gender === "Muski"}
               onChange={(e) => setGender(e.target.value)}
             />
               type="radio"
               name="gender"
               value="Zenski"
-              className="apply-for-ad-modal-gender-input"
+              className="apply-for-job-modal-gender-input"
               checked={gender === "Zenski"}
               onChange={(e) => setGender(e.target.value)}
             />
           </div>
         </div>
       </div>
-      <div className="apply-for-ad-modal-form-control">
+      <div className="apply-for-job-modal-form-control">
         <label>{t("common.dateOfBirth")}</label>
         <input
           type="date"
           placeholder="ex. Datum rodjenja"
-          data-testid="apply-for-ad-modal-date-of-birth"
+          data-testid="apply-for-job-modal-date-of-birth"
           value={dateOfBirth}
           onChange={(e) => setDateOfBirth(e.target.value)}
         />
       </div>
-      <div className="apply-for-ad-modal-form-control">
+      <div className="apply-for-job-modal-form-control">
         <label>{t("common.phoneNumber")}</label>
         <input
           type="text"
           placeholder="ex. +381/60/000/0000"
-          data-testid="apply-for-ad-modal-phone-number"
+          data-testid="apply-for-job-modal-phone-number"
           value={phoneNumber}
           onChange={(e) => setPhoneNumber(e.target.value)}
         />
       </div>
-      <div className="apply-for-ad-buttons">
+      <div className="apply-for-job-buttons">
         <button disabled>{t("common.back")}</button>
         <button
           disabled={disabled}
-          data-testid="apply-for-ad-modal-go-forward-button"
+          data-testid="apply-for-job-modal-go-forward-button"
           onClick={() => onIncreaseStage()}
         >
           {t("common.continue")}

src/components/Ads/ApplyForAdFourthStage.js

   };
 
   return (
-    <div data-testid="apply-for-ad-modal-fourth-stage">
-      <div className="apply-for-ad-modal-form-control">
+    <div data-testid="apply-for-job-modal-fourth-stage">
+      <div className="apply-for-job-modal-form-control">
         <label>CV</label>
         <div
           className="uploadCV-input"
                     id="upload-file"
                     style={{ display: "none", zIndex: -1 }}
                     value={pdfFile}
-                    data-testid="apply-for-ad-modal-fourth-stage-pdf-input"
+                    data-testid="apply-for-job-modal-fourth-stage-pdf-input"
                     onChange={(e) => {
                       console.log("Ovde smo");
                       setPdfFile(e.target.files[0]);
           </div>
         </div>
       </div>
-      <div className="apply-for-ad-modal-form-control">
+      <div className="apply-for-job-modal-form-control">
         <label>{t("ads.coverLetter")}</label>
         <textarea
           value={coverLetter}
           onChange={(e) => setCoverLetter(e.target.value)}
-          data-testid="apply-for-ad-modal-fourth-stage-cover-letter-input"
+          data-testid="apply-for-job-modal-fourth-stage-cover-letter-input"
           placeholder="ex. Kao student Elektronskog fakulteta u Nišu..."
           rows={5}
         ></textarea>
       </div>
-      <div className="apply-for-ad-buttons">
+      <div className="apply-for-job-buttons">
         <button
           onClick={onDecreaseStage}
-          data-testid="apply-for-ad-modal-fourth-stage-go-back-button"
+          data-testid="apply-for-job-modal-fourth-stage-go-back-button"
         >
           {t("common.back")}
         </button>
         <button
           disabled={disabled}
-          data-testid="apply-for-ad-modal-fourth-stage-go-forward-button"
+          data-testid="apply-for-job-modal-fourth-stage-go-forward-button"
           onClick={onFinishedFourStages}
         >
           {t("ads.signUp")}

src/components/Ads/ApplyForAdSecondStage.js

   };
 
   return (
-    <div data-testid="apply-for-ad-second-stage">
-      <div className="apply-for-ad-header-title">
+    <div data-testid="apply-for-job-second-stage">
+      <div className="apply-for-job-header-title">
         <p>{t("ads.professionalQualification")}</p>
       </div>
-      <div className="apply-for-ad-modal-form-control">
+      <div className="apply-for-job-modal-form-control">
         <input
           type="text"
           placeholder="ex. Elektrotehnicki fakultet"
           onChange={(e) => setProfessionalQualification(e.target.value)}
         />
       </div>
-      <div className="apply-for-ad-header-title">
+      <div className="apply-for-job-header-title">
         <p>{t("ads.technologies")}</p>
       </div>
-      <div className="apply-for-ad-header-sub">
-        <div className="apply-for-ad-header-sub-group">
+      <div className="apply-for-job-header-sub">
+        <div className="apply-for-job-header-sub-group">
           <label>Back-End</label>
-          <div className="apply-for-ad-header-sub-group-checkboxes">
+          <div className="apply-for-job-header-sub-group-checkboxes">
             {technologies
               .filter((x) => x.technologyType === "Backend")
               .map((x) => (
                   key={x.technologyId}
                   control={
                     <Checkbox
-                      className="apply-for-ad-second-stage-checkbox"
+                      className="apply-for-job-second-stage-checkbox"
                       value={x.name}
                       checked={x.isChecked}
                       onChange={handleCheckboxes.bind(this, x.technologyId)}
               ))}
           </div>
         </div>
-        <div className="apply-for-ad-header-sub-group">
+        <div className="apply-for-job-header-sub-group">
           <label>Front-End</label>
-          <div className="apply-for-ad-header-sub-group-checkboxes">
+          <div className="apply-for-job-header-sub-group-checkboxes">
             {technologies
               .filter((x) => x.technologyType === "Frontend")
               .map((x) => (
                   key={x.technologyId}
                   control={
                     <Checkbox
-                      className="apply-for-ad-second-stage-checkbox"
+                      className="apply-for-job-second-stage-checkbox"
                       value={x.name}
                       checked={x.isChecked}
                       onChange={handleCheckboxes.bind(this, x.technologyId)}
               ))}
           </div>
         </div>
-        <div className="apply-for-ad-header-sub-group">
+        <div className="apply-for-job-header-sub-group">
           <label>{t("ads.others")}</label>
-          <div className="apply-for-ad-header-sub-group-checkboxes">
+          <div className="apply-for-job-header-sub-group-checkboxes">
             {technologies
               .filter((x) => x.technologyType === "Other")
               .map((x) => (
                   key={x.technologyId}
                   control={
                     <Checkbox
-                      className="apply-for-ad-second-stage-checkbox"
+                      className="apply-for-job-second-stage-checkbox"
                       value={x.name}
                       checked={x.isChecked}
                       onChange={handleCheckboxes.bind(this, x.technologyId)}
           </div>
         </div>
       </div>
-      <div className="apply-for-ad-modal-form-control">
+      <div className="apply-for-job-modal-form-control">
         <label>{t("filters.experience")}</label>
         <input
           type="number"
           onChange={(e) => setExperience(e.target.value)}
         />
       </div>
-      <div className="apply-for-ad-buttons">
+      <div className="apply-for-job-buttons">
         <button onClick={onDecreaseStage}>{t("common.back")}</button>
         <button onClick={onIncreaseStage} disabled={disabled}>
           {t("common.continue")}

src/components/Ads/ApplyForAdThirdStage.js

 
   return (
     <div>
-      <div className="apply-for-ad-header-title">
+      <div className="apply-for-job-header-title">
         <p>{t("common.socialNetwork")}</p>
       </div>
-      <div className="apply-for-ad-modal-form-control">
+      <div className="apply-for-job-modal-form-control">
         <label>LinkedIn</label>
         <input
           type="text"
           placeholder="ex. https://www.linkedin.com/in/petar-petrovic"
         />
       </div>
-      <div className="apply-for-ad-modal-form-control">
+      <div className="apply-for-job-modal-form-control">
         <label>GitHub</label>
         <input
           type="text"
           placeholder="ex. https://www.github.com/petarpetrovic"
         />
       </div>
-      <div className="apply-for-ad-modal-form-control">
+      <div className="apply-for-job-modal-form-control">
         <label>BitBucket</label>
         <input
           type="text"
           placeholder="ex. https://developer.atlassian.com/user/petarapetrovic"
         />
       </div>
-      <div className="apply-for-ad-modal-form-control">
+      <div className="apply-for-job-modal-form-control">
         <label>Email</label>
         <input
           type="email"
           placeholder="ex. petar.petrovic@dilig.net"
         />
       </div>
-      <div className="apply-for-ad-buttons">
+      <div className="apply-for-job-buttons">
         <button
           onClick={onDecreaseStage}
           data-testid="apply-for-ad-modal-third-stage-go-back-button"

src/components/Ads/ArchiveAd.js → src/components/Ads/ArchiveJob.js

 import { selectLogo } from "../../util/helpers/technologiesLogos";
 import { useTranslation } from "react-i18next";
 
-const ArchiveAd = ({
+const ArchiveJob = ({
   className,
   title,
   minimumExperience,
 }) => {
   const { t } = useTranslation();
   return (
-    <div className={`archive-ad ${className}`} onClick={onShowAdDetails}>
-      <div className="archive-ad-date">
+    <div className={`archive-job ${className}`} onClick={onShowAdDetails}>
+      <div className="archive-job-date">
         <p>
           {new Date(createdAt).toLocaleDateString()} -{" "}
           {new Date(expiredAt).toLocaleDateString()}
         </p>
       </div>
-      <div className="archive-ad-title">
+      <div className="archive-job-title">
         <h3>{title}</h3>
       </div>
-      <div className="archive-ad-image">
+      <div className="archive-job-image">
         <img src={selectLogo(title)} alt=".net icon" />
       </div>
-      <div className="archive-ad-experience">
+      <div className="archive-job-experience">
         {minimumExperience > 0 ? (
           <p>
             {minimumExperience}+ {t("common.experience")}
   );
 };
 
-ArchiveAd.propTypes = {
+ArchiveJob.propTypes = {
   id: PropTypes.number,
   title: PropTypes.string,
   minimumExperience: PropTypes.number,
   className: PropTypes.any,
 };
 
-export default ArchiveAd;
+export default ArchiveJob;

src/components/Ads/StatsAd.js

 }) => {
   const {t} = useTranslation()
   return (
-    <div className={`archive-ad stats-ad ${className}`} onClick={onShowAdDetails}>
-        <div className="ad-count">
+    <div className={`archive-job stats-job ${className}`} onClick={onShowAdDetails}>
+        <div className="job-count">
             {count} {t("ads.registered")}
         </div>
-      <div className="archive-ad-date">
+      <div className="archive-job-date">
         <p>
           {new Date(createdAt).toLocaleDateString()} -{" "}
           {new Date(expiredAt).toLocaleDateString()}
         </p>
       </div>
-      <div className="archive-ad-title">
+      <div className="archive-job-title">
         <h3>{title}</h3>
       </div>
-      <div className="archive-ad-image">
+      <div className="archive-job-image">
         <img src={selectLogo(title)} alt=".net icon" />
       </div>
-      <div className="archive-ad-experience">
+      <div className="archive-job-experience">
         {minimumExperience > 0 ? (
           <p>{minimumExperience}+ {t("common.experience")}</p>
         ) : (

src/components/Button/FilterButton.js

   return (
     <IconButton
       className={
-        "c-btn--primary-outlined ads-page-btn fltr-btn c-btn userPageBtn ml-20px no-padding custom-filter-button"
+        "c-btn--primary-outlined jobs-page-btn fltr-btn c-btn userPageBtn ml-20px no-padding custom-filter-button"
       }
       onClick={onShowFilters}
     >

src/components/Candidates/CandidateFilters.js

       onKeyDown={handleClose}
     >
       <div>
-        <div className="ad-filters-header-container">
-          <div className="ad-filters-header">
+        <div className="job-filters-header-container">
+          <div className="job-filters-header">
             <img src={filterIcon} alt="filter_icon" />
             <h3>{t("filters.filters")}</h3>
             <p>
               <sub>| {t("candidates.candidates")}</sub>
             </p>
           </div>
-          <div className="ad-filters-header-close" onClick={handleClose}>
+          <div className="job-filters-header-close" onClick={handleClose}>
             <img src={x} alt="x" />
           </div>
         </div>
-        <div className="ad-filters-experience">
-          <div className="ad-filters-sub-title">
+        <div className="job-filters-experience">
+          <div className="job-filters-sub-title">
             <p>{t("filters.experience")}</p>
           </div>
-          <div className="ad-filters-experience-slider">
+          <div className="job-filters-experience-slider">
             <Slider
               getAriaLabel={() => "Temperature range"}
               value={sliderValue}
             />
           </div>
         </div>
-        <div className="ad-filters-technologies">
-          <div className="ad-filters-sub-title">
+        <div className="job-filters-technologies">
+          <div className="job-filters-sub-title">
             <p>{t("filters.technologies")}</p>
           </div>
-          <div className="ad-filters-technologies-checkboxes">
+          <div className="job-filters-technologies-checkboxes">
             <FormGroup>
               {technologies.map((technology, index) => (
                 <FormControlLabel
                     <Checkbox
                       checked={technology.isChecked}
                       name={technology.name}
-                      className="ad-filters-technologies-checkboxes-checkbox"
+                      className="job-filters-technologies-checkboxes-checkbox"
                       onChange={handleTechologiesChange}
                     />
                   }
             </FormGroup>
           </div>
         </div>
-        <div className="ad-filters-technologies">
-          <div className="ad-filters-sub-title">
+        <div className="job-filters-technologies">
+          <div className="job-filters-sub-title">
             <p>{t("filters.employmentType")}</p>
           </div>
-          <div className="ad-filters-employment-type">
+          <div className="job-filters-employment-type">
             {typesOfEmployments.map((type, index) => (
               <button
                 key={index}
             ))}
           </div>
         </div>
-        <div className="ad-filters-technologies" style={{ marginTop: "35px" }}>
-          <div className="ad-filters-sub-title">
+        <div className="job-filters-technologies" style={{ marginTop: "35px" }}>
+          <div className="job-filters-sub-title">
             <p>{t("filters.dateOfApplication")}</p>
             <div className="filter-date-container">
               <p>{t("common.from")}</p>
             </div>
           </div>
         </div>
-        <div className="ad-filters-search" style={{ marginTop: "45px" }}>
+        <div className="job-filters-search" style={{ marginTop: "45px" }}>
           <button
             className="c-btn c-btn--primary"
             onClick={fiterItems}

src/components/MUI/NavbarComponent.js

 
 const NavbarComponent = () => {
   const navItems = [
-    "ads",
+    "jobs",
     "selectionFlow",
     "candidates",
     "schedule",

src/components/Selection/ApplicantSelection.js

           <p>{date && date !== "" && formatDate(new Date(date))}</p>
         </div>
 
-        <div className="ad-card-title">
+        <div className="job-card-title">
           <h3>{levelName}</h3>
         </div>
 
 
         <div className="active-process-card-link">
           {status === "Odrađen" && (
-            <Link className="ad-details-buttons-link" to={"/candidates/" + id}>
+            <Link className="job-details-buttons-link" to={"/candidates/" + id}>
               {t("selection.report")}
             </Link>
           )}
           {link && status !== "Odrađen" && (
-            <a href={link} className="ad-details-buttons-link">
+            <a href={link} className="job-details-buttons-link">
               {t("selection.link")}
             </a>
           )}

src/components/Selection/SelectionFilter.js

       onKeyDown={handleClose}
     >
       <div>
-        <div className="ad-filters-header-container">
-          <div className="ad-filters-header">
+        <div className="job-filters-header-container">
+          <div className="job-filters-header">
             <img src={filterIcon} alt="filter_icon" />
             <h3>{t("filters.filters")}</h3>
             <p>
               <sub>| {t("selection.title")}</sub>
             </p>
           </div>
-          <div className="ad-filters-header-close" onClick={handleClose}>
+          <div className="job-filters-header-close" onClick={handleClose}>
             <img src={x} alt="x" />
           </div>
         </div>
-        <div className="ad-filters-technologies">
-          <div className="ad-filters-sub-title">
+        <div className="job-filters-technologies">
+          <div className="job-filters-sub-title">
             <p>Status</p>
           </div>
-          <div className="ad-filters-technologies-checkboxes">
+          <div className="job-filters-technologies-checkboxes">
             <FormGroup>
               {statuses?.map((technology, index) => (
                 <FormControlLabel
             </FormGroup>
           </div>
         </div>
-        <div className="ad-filters-technologies">
-          {/* <div className="ad-filters-sub-title">
+        <div className="job-filters-technologies">
+          {/* <div className="job-filters-sub-title">
             <p>Datum isteka oglasa</p>
           </div>
           <input
             value={expiredAt}
             onChange={(e) => setExpiredAt(e.target.value)}
           /> */}
-          <div className="ad-filters-sub-title">
+          <div className="job-filters-sub-title">
             <p>{t("selection.filterDate")}</p>
           </div>
-          <div className="add-ad-modal-stage-sub-card">
+          <div className="add-job-modal-stage-sub-card">
             <label>{t("common.from")}</label>
             <input
               type="date"
               onChange={(e) => setStartAt(e.target.value)}
             />
           </div>
-          <div className="add-ad-modal-stage-sub-card">
+          <div className="add-job-modal-stage-sub-card">
             <label>{t("common.to")}</label>
             <input
               type="date"
             />
           </div>
         </div>
-        <div className="ad-filters-search">
+        <div className="job-filters-search">
           <button onClick={onSubmitFilters} className="c-btn c-btn--primary">
           {t("common.search")}
           </button>

src/constants/pages.js

 export const BASE_PAGE = '/';
 export const FORGOT_PASSWORD_PAGE = '/forgot-password';
 export const HOME_PAGE = '/home';
-export const ADS_PAGE = '/ads';
-export const AD_DETAILS_PAGE = '/ads/:id';
+export const ADS_PAGE = '/jobs';
+export const JOB_DETAILS_PAGE = '/jobs/:id';
 export const ERROR_PAGE = '/error-page';
 export const NOT_FOUND_PAGE = '/not-found';
 export const USERS_PAGE = '/users';
 export const SCHEDULE_PAGE = '/schedule'
 export const STATS_PAGE = '/statistics';
 export const REGISTER_PAGE = '/register';
-export const CREATE_AD_PAGE = '/create-ad';
+export const CREATE_AD_PAGE = '/create-job';

src/i18n/resources/en.js

   },
   nav: {
     navigation: "Navigation",
-    ads: "Ads",
+    jobs: "Ads",
     selectionFlow: "Selection flow",
     candidates: "Candidates",
     planer: "Planer",

src/pages/AdsPage/AdDetailsPage.js

     <>
       {!ad && <p>Radi</p>}
       {ad && (
-        <div data-testid="ad-details-page">
+        <div data-testid="job-details-page">
           <ApplyForAd
             open={applyForAdOpenModal}
             title={ad.title}
             adId={id}
             onCloseModal={handleCloseApplyForAdModal}
           />
-          <div className="ad-details">
+          <div className="job-details">
             {matches && (
-              <div className="ad-details-tech-logo-date">
+              <div className="job-details-tech-logo-date">
                 <p>
                   <span>{t("ads.adDetailsExpiredAt")}: </span>
                   {new Date(ad.expiredAt).toLocaleDateString()}
                 </p>
               </div>
             )}
-            <div className="ad-details-tech-logo">
-              <div className="ad-details-tech-logo-title">
-                <div className="ad-details-tech-logo-title-img">
+            <div className="job-details-tech-logo">
+              <div className="job-details-tech-logo-title">
+                <div className="job-details-tech-logo-title-img">
                   <img src={selectLogo(ad.title)} alt="asp-net-icon" />
                 </div>
-                <div className="ad-details-tech-logo-title-title">
+                <div className="job-details-tech-logo-title-title">
                   <h1>{ad.title}</h1>
                 </div>
-                <div className="ad-details-tech-logo-title-sub">
+                <div className="job-details-tech-logo-title-sub">
                   <sub>
                     | {ad.totalApplicants} {t("ads.registered")}
                   </sub>
               {!(new Date(ad.expiredAt) < new Date()) && (
                 <IconButton
                   onClick={() => setShowArchiveAdDialog(true)}
-                  className={`c-btn--primary-outlined editEnableBtn c-btn userPageBtn archive-ad-button
+                  className={`c-btn--primary-outlined editEnableBtn c-btn userPageBtn archive-job-button
               }`}
                 >
                   {!matches && "Arhiviraj"}
               }}
               onConfirm={() => archiveAdHandler()}
             />
-            <div className="ad-details-content">
-              <div className="ad-details-content-experience">
+            <div className="job-details-content">
+              <div className="job-details-content-experience">
                 <p>
                   {ad.minimumExperience}+ {t("ads.adDetailsExperience")}
                 </p>
               </div>
-              <div className="ad-details-content-work-time">
+              <div className="job-details-content-work-time">
                 <button>{t("filters.work")}</button>
                 <button>{t("filters.fullTime")}</button>
               </div>
-              <div className="ad-details-content-content">
-                <div className="ad-details-content-conten-description">
+              <div className="job-details-content-content">
+                <div className="job-details-content-conten-description">
                   <p>{t("ads.adDetailsDescription")}</p>
                 </div>
-                <div className="ad-details-content-conten-description">
+                <div className="job-details-content-conten-description">
                   <h3>{t("ads.adDetailsKeyResponsibilities")}</h3>
                   {parse(ad.keyResponsibilities)}
                 </div>
-                <div className="ad-details-content-conten-description">
+                <div className="job-details-content-conten-description">
                   <h3>{t("ads.adDetailsRequirements")}</h3>
                   {parse(ad.requirements)}
                 </div>
-                <div className="ad-details-content-conten-description">
+                <div className="job-details-content-conten-description">
                   <h3>{t("ads.adDetailsOffer")}</h3>
                   {parse(ad.offer)}
                 </div>
               </div>
             </div>
             {ad.applicants && ad.applicants.length > 0 && (
-              <div className="ad-details-applicants">
-                <div className="ad-details-applicants-header">
+              <div className="job-details-applicants">
+                <div className="job-details-applicants-header">
                   <h2>{t("ads.archiveAdsCandidates")}</h2>
                 </div>
-                <div className="ad-details-applicants-applicants">
+                <div className="job-details-applicants-applicants">
                   {!matches && (
-                    <div className="ad-details-applicants-applicants-a">
-                      <div className="ad-details-applicants-applicants-arrows">
+                    <div className="job-details-applicants-applicants-a">
+                      <div className="job-details-applicants-applicants-arrows">
                         <button onClick={archiveAdsArrowLeftHandler}>
                           <img src={arrow_left} alt="arrow-left" />
                         </button>
                       </div>
                     </div>
                   )}
-                  <div className="ad-details-applicants-applicants-applicant">
+                  <div className="job-details-applicants-applicants-applicant">
                     <Slider
                       ref={archiveAdsSliderRef}
                       {...settings}
                   </div>
                 </div>
                 {matches && (
-                  <div className="active-ads-ads-arrows">
+                  <div className="active-jobs-jobs-arrows">
                     <button onClick={archiveAdsArrowLeftHandler}>
                       <img src={arrow_left} alt="arrow-left" />
                     </button>
                 )}
               </div>
             )}
-            <div className="ad-details-actions">
+            <div className="job-details-actions">
               {!matches && (
-                <div className="ad-details-expired-at">
-                  <div className="ad-details-tech-logo-date">
+                <div className="job-details-expired-at">
+                  <div className="job-details-tech-logo-date">
                     <p>
                       <span>{t("ads.adDetailsExpiredAt")}: </span>
                       {new Date(ad.expiredAt).toLocaleDateString()}
                   </div>
                 </div>
               )}
-              <div className="ad-details-buttons">
+              <div className="job-details-buttons">
                 <button
-                  className="ad-details-buttons-link"
+                  className="job-details-buttons-link"
                   onClick={() => history.push({ pathname: ADS_PAGE })}
                 >
                   {t("ads.backToAds")}
 
                 {!(new Date(ad.expiredAt) < new Date()) && (
                   <IconButton
-                    className="c-btn c-btn--primary add-ad-btn apply-for-ad-button"
+                    className="c-btn c-btn--primary add-job-btn apply-for-job-button"
                     onClick={() => setApplyForAdOpenModal(true)}
                   >
                     {t("ads.signUp").toUpperCase()}

src/pages/AdsPage/AdsPage.js

 import React, { useState, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import Ad from "../../components/Ads/Ad";
-import ArchiveAd from "../../components/Ads/ArchiveAd";
 import IconButton from "../../components/IconButton/IconButton";
 import arrow_left from "../../assets/images/arrow_left.png";
 import arrow_right from "../../assets/images/arrow_right.png";
 } from "../../store/actions/ads/adsAction";
 import { useSelector } from "react-redux";
 import { selectAds } from "../../store/selectors/adsSelectors";
-import { AD_DETAILS_PAGE, CREATE_AD_PAGE } from "../../constants/pages";
+import { JOB_DETAILS_PAGE, CREATE_AD_PAGE } from "../../constants/pages";
 import FilterButton from "../../components/Button/FilterButton";
 import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import Fade from "@mui/material/Fade";
 import { FETCH_ADS_LOADING } from "../../store/actions/ads/adsActionConstants";
 import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
+import ArchiveJob from '../../components/Ads/ArchiveJob'
 
 const AdsPage = ({ history }) => {
   const theme = useTheme();
   const [tmp, setTmp] = useState(null);
   const ads = useSelector(selectAds);
   const technologies = useSelector(selectTechnologies);
-  const archiveAds = useSelector(selectArchiveAds);
+  const archiveJobs = useSelector(selectArchiveAds);
   const activeAdsSliderRef = useRef();
-  const archiveAdsSliderRef = useRef();
+  const archiveJobsSliderRef = useRef();
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const { search } = useLocation();
     dispatch(setArchiveAdsReq());
   }, []);
 
-  var slider1 = document.querySelector(".active-ads-ads-ad .slick-track");
-  var slider2 = document.querySelector(".archived-ads-ads-ad .slick-track");
+  var slider1 = document.querySelector(".active-jobs-jobs-job .slick-track");
+  var slider2 = document.querySelector(".archived-jobs-jobs-job .slick-track");
 
   useEffect(() => {
     if (slider1 && slider2) {
   };
 
   const archiveAdsArrowLeftHandler = () => {
-    archiveAdsSliderRef.current.slickPrev();
+    archiveJobsSliderRef.current.slickPrev();
   };
 
   const archiveAdsArrowRightHandler = () => {
-    archiveAdsSliderRef.current.slickNext();
+    archiveJobsSliderRef.current.slickNext();
   };
 
   // const deleteFiltersHandler = () => {
     return ads;
   };
 
-  const getDummyArchiveAds = (len) => {
+  const getDummyArchiveJobs = (len) => {
     const ads = [];
 
     for (let i = 0; i < 5 - len + 1; i++) {
-      ads.push(<ArchiveAd key={i} className="hiddenAd" />);
+      ads.push(<ArchiveJob key={i} className="hiddenAd" />);
     }
 
     return ads;
         placeholder="Pretrazi..."
         value={searchInput}
         onChange={(e) => setSearchInput(e.target.value)}
-        className="ads-search-field"
+        className="jobs-search-field"
         onClick={stopPropagation}
         style={{ zIndex: 1000 }}
       />
         placeholder="Pretrazi..."
         value={searchInput}
         onChange={(e) => setSearchInput(e.target.value)}
-        className="ads-search-field-responsive smaller"
+        className="jobs-search-field-responsive smaller"
         onClick={stopPropagation}
         style={{ zIndex: 1000 }}
       />
       </div>
     </div>
   ) : (
-    <div data-testid="ads-page">
+    <div data-testid="jobs-page">
       <div className="l-t-rectangle"></div>
       <div className="r-b-rectangle"></div>
       {/* <AdFilters /> */}
             <Fade
               in={isSearchFieldVisible}
               timeout={500}
-              className="ads-page-search-by-title"
+              className="jobs-page-search-by-title"
             >
               {inputNormal}
             </Fade>
           </>
         )}
       </div>
-      <div className="ads" onClick={() => handleChangeVisibility(false)}>
+      <div className="jobs" onClick={() => handleChangeVisibility(false)}>
         {ads && ads.length > 0 && (
-          <div className="active-ads">
-            <div className="active-ads-header">
+          <div className="active-jobs">
+            <div className="active-jobs-header">
               <h1>{t("ads.activeAds")}</h1>
-              <div className="active-ads-header-buttons">
+              <div className="active-jobs-header-buttons">
                 <IconButton
                   className={
                     "c-btn--primary-outlined c-btn ads-page-btn userPageBtn ml-20px no-padding"
                 <FilterButton onShowFilters={handleToggleFiltersDrawer} />
               </div>
             </div>
-            <div className="active-ads-ads">
-              <div className="active-ads-ads-a">
+            <div className="active-jobs-jobs">
+              <div className="active-jobs-jobs-a">
                 {!matches && (
-                  <div className="active-ads-ads-arrows">
+                  <div className="active-jobs-jobs-arrows">
                     <button onClick={activeAdsArrowLeftHandler}>
                       <img src={arrow_left} alt="arrow-left" />
                     </button>
                   </div>
                 )}
               </div>
-              <div className="active-ads-ads-ad">
+              <div className="active-jobs-jobs-job">
                 <Slider
                   {...settings}
                   slidesToShow={3}
                     .map((ad, index) => (
                       <Ad
                         onShowAdDetails={() =>
-                          history.push(AD_DETAILS_PAGE.replace(":id", ad.id))
+                          history.push(JOB_DETAILS_PAGE.replace(":id", ad.id))
                         }
                         key={index}
                         title={ad.title}
           </div>
         )}
         {ads && ads.length > 0 && matches && (
-          <div className="active-ads-ads-arrows">
+          <div className="active-jobs-jobs-arrows">
             <button onClick={activeAdsArrowLeftHandler}>
               <img src={arrow_left} alt="arrow-left" />
             </button>
           </div>
         )}
         {(!ads || ads.length === 0) && (
-          <div className="active-ads-ads-no-ads">
-            <div className="active-ads-ads-no-ads-filters">
+          <div className="active-jobs-jobs-no-jobs">
+            <div className="active-jobs-jobs-no-jobs-filters">
               <FilterButton onShowFilters={handleToggleFiltersDrawer} />
             </div>
             <img src={noActiveAds} alt="noActiveAds" />
             <h1>{t("ads.thereIsNoAds")}</h1>
             <p>{t("ads.addAd")}</p>
-            <div className="add-ad add-ad-no-ads">
+            <div className="add-job add-job-no-jobs">
               <IconButton
-                className="c-btn ads-page-btn c-btn--primary add-ad-btn"
+                className="c-btn jobs-page-btn c-btn--primary add-job-btn"
                 onClick={() => history.push(CREATE_AD_PAGE)}
               >
                 {t("ads.adNewAd")}
             </div>
           </div>
         )}
-        {archiveAds && archiveAds.length > 0 && (
-          <div className="archived-ads">
-            <div className="archived-ads-header">
+        {archiveJobs && archiveJobs.length > 0 && (
+          <div className="archived-jobs">
+            <div className="archived-jobs-header">
               <h2>{t("ads.archiveAds")}</h2>
             </div>
-            <div className="archived-ads-ads">
+            <div className="archived-jobs-jobs">
               {!matches && (
-                <div className="archived-ads-ads-a">
-                  <div className="archived-ads-ads-arrows">
+                <div className="archived-jobs-jobs-a">
+                  <div className="archived-jobs-jobs-arrows">
                     <button onClick={archiveAdsArrowLeftHandler}>
                       <img src={arrow_left} alt="arrow-left" />
                     </button>
-                    {archiveAds.length > 5 && (
+                    {archiveJobs.length > 5 && (
                       <button onClick={archiveAdsArrowRightHandler}>
                         <img src={arrow_right} alt="arrow-right" />
                       </button>
                   </div>
                 </div>
               )}
-              <div className="archived-ads-ads-ad">
+              <div className="archived-jobs-jobs-job">
                 <Slider
-                  ref={archiveAdsSliderRef}
+                  ref={archiveJobsSliderRef}
                   {...settings}
                   slidesToShow={5}
                   slidesToScroll={5}
                   style={{ width: "100%" }}
                 >
-                  {archiveAds
+                  {archiveJobs
                     .filter((ad) =>
                       ad.title.toLowerCase().includes(searchInput.toLowerCase())
                     )
                     .map((ad, index) => (
-                      <ArchiveAd
+                      <ArchiveJob
                         key={index}
                         title={ad.title}
                         minimumExperience={ad.minimumExperience}
                         createdAt={ad.createdAt}
                         expiredAt={ad.expiredAt}
                         onShowAdDetails={() =>
-                          history.push(AD_DETAILS_PAGE.replace(":id", ad.id))
+                          history.push(JOB_DETAILS_PAGE.replace(":id", ad.id))
                         }
                       />
                     ))}
-                  {archiveAds.length <= 5 &&
-                    getDummyArchiveAds(archiveAds.length)}
+                  {archiveJobs.length <= 5 &&
+                    getDummyArchiveJobs(archiveJobs.length)}
                 </Slider>
               </div>
             </div>
             {matches && (
-              <div className="active-ads-ads-arrows">
+              <div className="active-jobs-jobs-arrows">
                 <button onClick={archiveAdsArrowLeftHandler}>
                   <img src={arrow_left} alt="arrow-left" />
                 </button>
-                {archiveAds.length > 5 && (
+                {archiveJobs.length > 5 && (
                   <button onClick={archiveAdsArrowRightHandler}>
                     <img src={arrow_right} alt="arrow-right" />
                   </button>
               </div>
             )}
 
-            <div className="archive-ads-no-active-ads"></div>
+            <div className="archive-jobs-no-active-jobs"></div>
           </div>
         )}
       </div>
 
       {ads && ads.length > 0 && (
-        <div className="add-ad">
+        <div className="add-job">
           <IconButton
-            className="c-btn ads-page-btn c-btn--primary add-ad-btn"
+            className="c-btn ads-page-btn c-btn--primary add-job-btn"
             onClick={createAd}
           >
             + {t("ads.ad")}

src/pages/AdsPage/CreateAdFirstStep.js

   };
 
   return (
-    <div data-testid="create-ad-first-step-form">
-      <div className="create-ad-form-control">
+    <div data-testid="create-job-first-step-form">
+      <div className="create-job-form-control">
         <label>{t("common.title")}</label>
         <input
           type="text"
-          className="create-ad-form-control-first-step-input"
+          className="create-job-form-control-first-step-input"
           onChange={(e) => setTitle(e.target.value)}
           value={title}
           placeholder="ex. Medior React Developer"
         />
       </div>
-      <div className="create-ad-form-control">
+      <div className="create-job-form-control">
         <label>{t("filters.employmentType")}</label>
-        <div className="create-ad-form-control-buttons">
+        <div className="create-job-form-control-buttons">
           <button
             className={`c-btn  ${
               employmentType === "Work"
           </button>
         </div>
       </div>
-      <div className="create-ad-form-control">
+      <div className="create-job-form-control">
         <label>{t("filters.workHour")}</label>
-        <div className="create-ad-form-control-buttons">
+        <div className="create-job-form-control-buttons">
           <button
             className={`c-btn  ${
               workHour === "PartTime"
           </button>
         </div>
       </div>
-      <div className="create-ad-form-control">
+      <div className="create-job-form-control">
         <label>{t("ads.expirationDate")}</label>
         <input
           type="date"
-          className="create-ad-form-control-first-step-input"
+          className="create-job-form-control-first-step-input"
           onChange={(e) => setExpiredAt(e.target.value)}
           value={expiredAt}
         />

src/pages/AdsPage/CreateAdPage.js

   };
 
   return (
-    <div className="create-ad-page" data-testid="create-ad-page">
-      <div className="create-ad-page-content">
-        <div className="create-ad-page-content-header">
+    <div className="create-job-page" data-testid="create-job-page">
+      <div className="create-job-page-content">
+        <div className="create-job-page-content-header">
           <img
             src={plusIcon}
             alt="plus"
             <sub> | {t("ads.ad")}</sub>
           </h2>
         </div>
-        <div className="create-ad-steps">
+        <div className="create-job-steps">
           {stage === 1 && (
             <CreateAdFirstStep
               title={title}
           )}
           {stage === 3 && <CreateAdThirdStep childRef={childRef} />}
         </div>
-        <div className="create-ad-buttons" style={{ marginBottom: "2rem" }}>
+        <div className="create-job-buttons" style={{ marginBottom: "2rem" }}>
           <button
-            className="create-ad-buttons-back"
+            className="create-job-buttons-back"
             disabled={stage === 1}
             onClick={backClickHandler}
           >
             {t("common.back")}
           </button>
           <button
-            className="create-ad-buttons-forward"
+            className="create-job-buttons-forward"
             onClick={forwardClickHandler}
           >
             {t("common.continue")}

src/pages/AdsPage/CreateAdSecondStep.js

   };
 
   return (
-    <div data-testid="create-ad-second-step-form">
-      <div className="create-ad-form-control">
+    <div data-testid="create-job-second-step-form">
+      <div className="create-job-form-control">
         <label>{t("filters.advancedTechnologies")}</label>
       </div>
-      <div className="add-ad-modal-stage-sub-card">
-        <div className="add-ad-modal-stage-sub-card-checkboxes-group">
+      <div className="add-job-modal-stage-sub-card">
+        <div className="add-job-modal-stage-sub-card-checkboxes-group">
           <label>Front-End</label>
-          <div className="add-ad-modal-stage-sub-card-checkboxes">
+          <div className="add-job-modal-stage-sub-card-checkboxes">
             {technologies
               .filter((x) => x.technologyType === "Frontend")
               .map((x) => (
                       value={x.name}
                       checked={x.isChecked}
                       onChange={handleCheckboxes.bind(this, x.technologyId)}
-                      className="create-ad-second-step-checkbox"
+                      className="create-job-second-step-checkbox"
                     />
                   }
                   label={x.name}
           </div>
         </div>
 
-        <div className="add-ad-modal-stage-sub-card-checkboxes-group">
+        <div className="add-job-modal-stage-sub-card-checkboxes-group">
           <label>Back-End</label>
-          <div className="add-ad-modal-stage-sub-card-checkboxes">
+          <div className="add-job-modal-stage-sub-card-checkboxes">
             {technologies
               .filter((x) => x.technologyType === "Backend")
               .map((x) => (
                       value={x.name}
                       checked={x.isChecked}
                       onChange={handleCheckboxes.bind(this, x.technologyId)}
-                      className="create-ad-second-step-checkbox"
+                      className="create-job-second-step-checkbox"
                     />
                   }
                   label={x.name}
           </div>
         </div>
 
-        <div className="add-ad-modal-stage-sub-card-checkboxes-group">
+        <div className="add-job-modal-stage-sub-card-checkboxes-group">
           <label>{t("ads.others")}</label>
-          <div className="add-ad-modal-stage-sub-card-checkboxes">
+          <div className="add-job-modal-stage-sub-card-checkboxes">
             {technologies
               .filter((x) => x.technologyType === "Other")
               .map((x) => (
                       value={x.name}
                       checked={x.isChecked}
                       onChange={handleCheckboxes.bind(this, x.technologyId)}
-                      className="create-ad-second-step-checkbox"
+                      className="create-job-second-step-checkbox"
                     />
                   }
                   label={x.name}
           </div>
         </div>
       </div>
-      <div className="create-ad-form-control">
+      <div className="create-job-form-control">
         <label>{t("filters.experience")}</label>
         <input
           type="number"

src/pages/AdsPage/CreateAdThirdStep.js

   }
 
   return (
-    <div data-testid="create-ad-third-step-form">
-      <div className="create-ad-form-control">
+    <div data-testid="create-job-third-step-form">
+      <div className="create-job-form-control">
         <label>{t("ads.duties")}</label>
         <Editor
           onInit={(evt, editor) =>
           style={{ height: "1rem !important" }}
         />
       </div>
-      <div className="create-ad-form-control">
+      <div className="create-job-form-control">
         <label>{t("ads.conditions")}</label>
         <Editor
           onInit={(evt, editor) => (editorRequirementsRef.current = editor)}
           style={{ height: "1rem !important" }}
         />
       </div>
-      <div className="create-ad-form-control">
+      <div className="create-job-form-control">
         <label>{t("ads.offer")}</label>
         <Editor
           onInit={(evt, editor) => (editorOfferRef.current = editor)}

src/pages/CandidatesPage/AdsCandidatesPage.js

   };
 
   return (
-    <div className="ads-candidates-container top-cnd">
+    <div className="jobs-candidates-container top-cnd">
       {adsCandidates.map((adCandidates, index) => (
-        <div className="ads-candidates" key={index}>
-          <div className="ads-candidates-top-container">
-            <img src={adImage} className="ads-candidates-image" />
-            <p className="ads-candidates-title">{adCandidates.title}</p>
-            <p className="ads-candidates-numberOfApplicants">
+        <div className="jobs-candidates" key={index}>
+          <div className="jobs-candidates-top-container">
+            <img src={adImage} className="jobs-candidates-image" />
+            <p className="jobs-candidates-title">{adCandidates.title}</p>
+            <p className="jobs-candidates-numberOfApplicants">
               | {adCandidates.nubmerOfApplicants} {t("ads.registered")}
             </p>
           </div>
-          <div className="ads-candidates-slider">
+          <div className="jobs-candidates-slider">
             {filterByName(adCandidates).length > 4 && (
               <div
-                className="active-ads-ads-arrows"
+                className="active-jobs-jobs-arrows"
                 style={matches ? { marginLeft: 36 } : { marginLeft: 0 }}
               >
                 <button onClick={() => activeAdsArrowLeftHandler(index)}>

src/pages/CandidatesPage/CandidateDetailsPage.js

           </div>
         </div>
       </div>
-      <div className="applicant-ads-container">
+      <div className="applicant-jobs-container">
         <p style={{ marginLeft: matches ? 36 : 144 }}>
           {t("candidates.allApplications")}
         </p>
-        <div className="applicant-ads-container-2">
+        <div className="applicant-jobs-container-2">
           <div
             style={{
               marginLeft: matches ? 36 : candidate.ads.length < 5 ? 108 : 72,
               ? candidate.ads.length > 1
               : candidate.ads.length > 5) && (
               <div
-                className="active-ads-ads-arrows"
+                className="active-jobs-jobs-arrows"
                 data-testid="candidate-ad-responsive-arrows"
               >
                 <button onClick={activeAdsArrowLeftHandler}>
           </Slider>
         </div>
       </div>
-      <div className="applicant-ads-buttons-container">
+      <div className="applicant-jobs-buttons-container">
         <p
           to="/candidates"
-          className="applicant-ads-back-button"
+          className="applicant-jobs-back-button"
           onClick={goToPageWithAllCandidates}
         >
           {t("candidates.backToCandidates")}

src/pages/PatternsPage/PatternDetailsPage.js

 
             <div className="pattern-details-card-buttons">
               <button
-                className="ad-details-buttons-link"
-                data-testid="ad-details-buttons-link"
+                className="job-details-buttons-link"
+                data-testid="job-details-buttons-link"
                 onClick={() => history.push(PATTERNS_PAGE)}
               >
                 {t("ads.backToAds")}
               </button>
               <IconButton
                 disabled={emails && emails.length === 0}
-                className="c-btn c-btn--primary add-ad-btn"
+                className="c-btn c-btn--primary add-job-btn"
                 data-testid="pattern-details-send-email"
                 onClick={scheduleAppointmentHandler}
               >

src/pages/PatternsPage/PatternsPage.js

         </div>
         <div className="patterns-button">
           <IconButton
-            className="c-btn c-btn--primary add-ad-btn add-pattern-btn"
+            className="c-btn c-btn--primary add-job-btn add-pattern-btn"
             onClick={() => setOpenAddPatternModal(true)}
           >
             {t("patterns.addPattern")}

src/pages/SelectionProcessPage/SelectionProcessOfApplicantPage.js

       <div className="l-t-rectangle"></div>
       <div className="r-b-rectangle"></div>
       {/* <AdFilters /> */}
-      <div data-testid="appl-sel" className="ads">
+      <div data-testid="appl-sel" className="jobs">
         {processes && processes.length > 0 && (
-          <div className="active-ads">
-            <div className="active-ads-header">
+          <div className="active-jobs">
+            <div className="active-jobs-header">
               <h1>
                 {t("selection.title")}
                 <span className="level-header-spliter">|</span>
               </h1>
             </div>
 
-            <div className="active-ads-ads">
-              <div className="active-ads-ads-a">
+            <div className="active-jobs-jobs">
+              <div className="active-jobs-jobs-a">
                 {!matches && (
-                  <div className="active-ads-ads-arrows">
+                  <div className="active-jobs-jobs-arrows">
                     <button onClick={activeAdsArrowLeftHandler}>
                       <img src={arrow_left} alt="arrow-left" />
                     </button>
                   </div>
                 )}
               </div>
-              <div className="active-ads-ads-ad">
+              <div className="active-jobs-jobs-job">
                 <Slider
                   {...settings}
                   slidesToShow={4}
           </div>
         )}
         {matches && (
-          <div className="active-ads-ads-arrows">
+          <div className="active-jobs-jobs-arrows">
             <button onClick={activeAdsArrowLeftHandler}>
               <img src={arrow_left} alt="arrow-left" />
             </button>
           </p>
         </div>
       </div>
-      <div className="add-ad">
+      <div className="add-job">
         <Link className="ad-details-buttons-link" to="/selectionFlow">
           {t("candidates.backToCandidates")}
         </Link>

src/pages/StatsPage/StatsPage.js

 import arrow_left from "../../assets/images/arrow_left.png";
 import arrow_right from "../../assets/images/arrow_right.png";
 import Slider from "react-slick";
-import { AD_DETAILS_PAGE } from "../../constants/pages";
+import { JOB_DETAILS_PAGE } from "../../constants/pages";
 import StatsAd from "../../components/Ads/StatsAd";
 import { useDispatch } from "react-redux";
 import { useSelector } from "react-redux";
       <div className="stats-section">
         <h2 className="section-header">{t("stats.registered")}</h2>
       </div>
-      <div className="ads stat-ads">
+      <div className="jobs stat-jobs">
         {stats.ads && stats.ads.length > 0 && (
-          <div className="archived-ads">
-            {/* <div className="archived-ads-header">
+          <div className="archived-jobs">
+            {/* <div className="archived-jobs-header">
               <h2>{t("ads.archiveAds")}</h2>
             </div> */}
-            <div className="archived-ads-ads">
+            <div className="archived-jobs-jobs">
               {!matches && (
-                <div className="archived-ads-ads-a">
-                  <div className="archived-ads-ads-arrows">
+                <div className="archived-jobs-jobs-a">
+                  <div className="archived-jobs-jobs-arrows">
                     <button onClick={arrowLeftHandler} data-testid="left-arrow">
                       <img src={arrow_left} alt="arrow-left" />
                     </button>
                   </div>
                 </div>
               )}
-              <div className="archived-ads-ads-ad">
+              <div className="archived-jobs-jobs-job">
                 <Slider
                   ref={sliderRef}
                   {...settings}
                       createdAt={ad.createdAt}
                       expiredAt={ad.expiredAt}
                       onShowAdDetails={() =>
-                        history.push(AD_DETAILS_PAGE.replace(":id", ad.id))
+                        history.push(JOB_DETAILS_PAGE.replace(":id", ad.id))
                       }
                     />
                   ))}
               </div>
             </div>
             {matches && (
-              <div className="active-ads-ads-arrows">
+              <div className="active-jobs-jobs-arrows">
                 <button onClick={arrowLeftHandler} data-testid="left-arrow">
                   <img src={arrow_left} alt="arrow-left" />
                 </button>

src/pages/UsersPage/UsersPage.js

             <Fade
               in={isSearchFieldVisible}
               timeout={500}
-              className="ads-page-search-by-title"
+              className="jobs-page-search-by-title"
             >
               {inputNormal}
             </Fade>

src/request/apiEndpoints.js

     initProcess: base + "/applicants/selection-init",
   },
   ads: {
-    allAds: base + "/ads",
-    createAd: base + "/ads",
-    allFilteredAds: base + "/ads/filtered",
-    allArchiveAds: base + "/ads/archive",
-    adDetails: base + "/ads/details",
-    archiveActiveAd: base + "/ads/archive-active-ad/:id",
+    allAds: base + "/jobs",
+    createAd: base + "/jobs",
+    allFilteredAds: base + "/jobs/filtered",
+    allArchiveAds: base + "/jobs/archive",
+    adDetails: base + "/jobs/details",
+    archiveActiveAd: base + "/jobs/archive-active-job/:id",
   },
   technologies: {
     allTechnologies: base + "/technologies",