diff --git a/__mocks__/bounty.ts b/__mocks__/bounty.ts
new file mode 100644
index 00000000..782d9535
--- /dev/null
+++ b/__mocks__/bounty.ts
@@ -0,0 +1,11 @@
+export const mockTrailer = {
+    summary: "trailer summary",
+    description: "trailer descriptio",
+    video: "trailer video",
+    duration: 4,
+    info: {
+      items: ["item 1", "item 2"],
+      title: "info title",
+    },
+  };
+  
\ No newline at end of file
diff --git a/__mocks__/course.ts b/__mocks__/course.ts
new file mode 100644
index 00000000..d0d41f8f
--- /dev/null
+++ b/__mocks__/course.ts
@@ -0,0 +1,134 @@
+import { Course, Format, LearningModule, Material } from "@/types/course";
+import { mockTrailer } from "./bounty";
+
+
+export const Introduction = {
+  text: "course intro",
+};
+
+export const mockCertificateData = {
+  narrative: "course certificate",
+  icon: "certificate icon",
+};
+
+export const Rubric = {
+  id: "id",
+  ref: "rubric references",
+  created_at: "Wednesday",
+  updated_at: "Thursday",
+  challenge: "Challenge",
+  text: "Challenge text",
+  type: "challenge type",
+  order: 89,
+  points: 90,
+  timestamp: 73,
+  typeSlug: "slug",
+};
+
+export const mockRatingCriteria = {
+  name: "rating criteria",
+  order: 4,
+  rubric: [Rubric],
+  maxPoints: 78,
+};
+
+enum MaterialType {
+  ADDITIONAL = "ADDITIONAL",
+  MARKDOWN = "MARKDOWN",
+  TEXT = "TEXT",
+  ARTICLE = "ARTICLE",
+  "EMBEDDED-VIDEO" = "EMBEDDED-VIDEO",
+}
+export const mockMaterial: Material = {
+  duration: 3,
+  subtitle: "material subtitle",
+  link: "material link",
+  description: "material description",
+  title: "material title",
+  type: MaterialType.ADDITIONAL,
+  list: [{ link: "Link 1" }],
+};
+
+export const InteractiveModule = {
+  ref: "interactive module ref",
+  title: "interactive module title",
+  text: "interative text",
+  closing: {
+    text: "closing",
+    title: "title",
+  },
+  items: [
+    {
+      text: "text",
+      title: "title",
+      options: {
+        text: "text",
+        isCorrect: true,
+      },
+      question: {
+        title: "question title",
+        answers: ["answer 1", "answer 2"],
+        correct: 2,
+      },
+    },
+  ],
+};
+
+export const mockLearningModule: LearningModule = {
+  id: "learningModule id",
+  ref: "learning module reference",
+  created_at: new Date("2022-05-01T12:00:00Z"),
+  updated_at: new Date("2022-05-01T12:00:00Z"),
+  duration: 4,
+  description: "learning module description",
+  objectives: ["objective 1, objective 2"],
+  title: "learning module title",
+  community: "learning module community",
+  materials: [mockMaterial],
+  timestamp: 3,
+  order: 4,
+  course: "Learning module course",
+  interactiveModules: [InteractiveModule],
+};
+
+export const mockCourse: Course = {
+  id: "course",
+  ref: "course ref",
+  created_at: new Date("2022-05-01T12:00:00Z"),
+  updated_at: new Date("2022-05-01T12:00:00Z"),
+  duration: 3,
+  summary: "Course description",
+  level: 3,
+  name: "course name",
+  description: "Course description",
+  objectives: ["course description", "course objectives"],
+  locale: "English",
+  community: "community",
+  slug: "course description slug",
+  introduction: Introduction,
+  active: true,
+  certificateIcon: "certificate",
+  certificateData: mockCertificateData,
+  timestamp: 0,
+  learningModules: [mockLearningModule],
+  trailer: mockTrailer,
+  disclaimer: "Course",
+  items: ["item 1", "item 2"],
+  faq: [
+    {
+      description: "faq description",
+      title: "faq title",
+    },
+  ],
+  prerequisite: {
+    items: ["item 1", "item 2"],
+    hint: "prerequisite hint",
+  },
+  translations: []
+};
+
+export const mockFormat: Format = {
+  githubLink: true,
+  text: true,
+  disclaimer: true,
+};
\ No newline at end of file
diff --git a/__mocks__/provider/ReduxProvider.tsx b/__mocks__/provider/ReduxProvider.tsx
new file mode 100644
index 00000000..c8d0b610
--- /dev/null
+++ b/__mocks__/provider/ReduxProvider.tsx
@@ -0,0 +1,11 @@
+import { wrapper } from "@/store";
+import { ReactNode } from "react";
+import { Provider } from "react-redux";
+
+const ReduxProvider = ({ children }: { children: ReactNode }) => {
+  const { store } = wrapper.useWrappedStore(children);
+
+  return <Provider store={store}>{children}</Provider>;
+};
+
+export default ReduxProvider;
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/CommunityNavigation.test.tsx b/__tests__/components/sections/courses/CommunityNavigation.test.tsx
new file mode 100644
index 00000000..827bb8e8
--- /dev/null
+++ b/__tests__/components/sections/courses/CommunityNavigation.test.tsx
@@ -0,0 +1,43 @@
+import "@testing-library/jest-dom";
+import CommunityNavigation from "@/components/sections/courses/CommunityNavigation";
+import { render, screen } from "@testing-library/react";
+import ChevronRightIcon from "@/icons/chevron-right.svg";
+import ReduxProvider from "../../../../__mocks__/provider/ReduxProvider";
+import Link from "next/link";
+
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    isFallback: false,
+  }),
+}));
+
+
+const RenderCommunityNavigation = () => {
+  render(
+    <ReduxProvider>
+      <CommunityNavigation />
+    </ReduxProvider>
+  );
+  return screen.getByTestId("communityNavigationShow");
+}
+
+describe("CommunityNavigation", () => {
+  it("should render the Learning Modules", () => {
+    const communityNavigation = RenderCommunityNavigation();
+    expect(communityNavigation).toBeInTheDocument();
+  });
+});
+
+it("should render the Chevron Right Icon", () => {
+  render( <ChevronRightIcon /> );
+  const communityNavigationChevIcon = screen.getByTestId("communityNavId");
+  expect(communityNavigationChevIcon).toBeInTheDocument();
+});
+
+it("should render the Link", () => {
+  render( <Link href={""} >link</Link> );
+  const communityNavigationLink = screen.getByTestId("communityNavLink");
+  expect(communityNavigationLink).toBeInTheDocument();
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/MobileNav.test.tsx b/__tests__/components/sections/courses/MobileNav.test.tsx
new file mode 100644
index 00000000..2876a487
--- /dev/null
+++ b/__tests__/components/sections/courses/MobileNav.test.tsx
@@ -0,0 +1,42 @@
+import "@testing-library/jest-dom";
+import MobileNav from "@/components/sections/courses/MobileNav";
+import { render, screen } from "@testing-library/react";
+import ReduxProvider from "../../../../__mocks__/provider/ReduxProvider";
+import ChevronBottomIcon from "@/icons/chevron-bottom.svg";
+import Navigation from "@/components/sections/courses/Navigation";
+
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    isFallback: false,
+  }),
+}));
+
+const RenderMobileNav = () => {
+  render(
+    <ReduxProvider>
+      <MobileNav />
+    </ReduxProvider>
+  );
+  return screen.getByTestId("mobile-nav-show");
+}
+
+describe("MobileNav", () => {
+  it("should render the Mobile Nav", () => {
+    const mobileNav = RenderMobileNav();
+    expect(mobileNav).toBeInTheDocument();
+  });
+});
+
+it("should render the Chevron Bottom Icon Component", () => {
+  render( <ChevronBottomIcon /> );
+  const mobileNavChevIcon = screen.getByTestId("mobileNavChevIconId");
+  expect(mobileNavChevIcon).toBeInTheDocument();
+});
+
+it("should render the Component", () => {
+  render( <Navigation /> );
+  const mobileNavNav = screen.getByTestId("navId");
+  expect(mobileNavNav).toBeInTheDocument();
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/Navigation.test.tsx b/__tests__/components/sections/courses/Navigation.test.tsx
new file mode 100644
index 00000000..3223f409
--- /dev/null
+++ b/__tests__/components/sections/courses/Navigation.test.tsx
@@ -0,0 +1,12 @@
+import "@testing-library/jest-dom";
+import Navigation from "@/components/sections/courses/Navigation";
+import { render, screen } from "@testing-library/react";
+
+
+describe("LearningModules", () => {
+  it("should render the Navidation component", () => {
+    render( <Navigation />);
+    const navigation = screen.getByTestId("navigation-show");
+    expect(navigation).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/Overview/Challenge.test.tsx b/__tests__/components/sections/courses/Overview/Challenge.test.tsx
new file mode 100644
index 00000000..27c89e12
--- /dev/null
+++ b/__tests__/components/sections/courses/Overview/Challenge.test.tsx
@@ -0,0 +1,30 @@
+import "@testing-library/jest-dom";
+import Challenge from "@/components/sections/courses/overview/Challenge";
+import { render, screen } from "@testing-library/react";
+import { mockCourse } from "../../../../../__mocks__/course";
+
+
+
+describe("Challenge", () => {
+  it("should render the Challenge", () => {
+    render(<Challenge />);
+    const challenge = screen.getByTestId("challengeDescriptionId");;
+    expect(challenge).toBeInTheDocument();
+  });
+
+  it("should show content", () => {
+    const challengeDescription = screen.getByTestId("challengeDescription");
+    expect(challengeDescription).toBeInTheDocument();
+  });
+
+  it("should show text content", () => {
+    const challengeText = screen.getByTestId("challengeDescription");
+    expect(challengeText).toBeInTheDocument();
+    expect(challengeText).toBe( mockCourse.challenge?.description);
+  });
+
+
+
+});
+
+
diff --git a/__tests__/components/sections/courses/Overview/Description.test.tsx b/__tests__/components/sections/courses/Overview/Description.test.tsx
new file mode 100644
index 00000000..64d2d905
--- /dev/null
+++ b/__tests__/components/sections/courses/Overview/Description.test.tsx
@@ -0,0 +1,11 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import Description from "@/components/sections/courses/overview/Description";
+
+
+it("should render the Description", () => {
+  render( <Description />);
+  const description = screen.getByTestId("descriptionId");;
+  expect(description).toBeInTheDocument();
+});
+
diff --git a/__tests__/components/sections/courses/Overview/Disclaimer.test.tsx b/__tests__/components/sections/courses/Overview/Disclaimer.test.tsx
new file mode 100644
index 00000000..5d65e171
--- /dev/null
+++ b/__tests__/components/sections/courses/Overview/Disclaimer.test.tsx
@@ -0,0 +1,15 @@
+import "@testing-library/jest-dom";
+import Disclaimer from "@/components/sections/courses/overview/Disclaimer";
+import { render, screen } from "@testing-library/react";
+
+
+  it("should render the Disclaimer", () => {
+    render(  <Disclaimer />);
+    const disclaimerComponent = screen.getByTestId("disclaimerId");;
+    expect(disclaimerComponent).toBeInTheDocument();
+  });
+
+  it("should show disclaimer HTML", () => {
+    const courseDisclaimer = screen.getByTestId("disclaimerSpanId");
+    expect(courseDisclaimer).toBeInTheDocument();
+  });
diff --git a/__tests__/components/sections/courses/Overview/LearningModules.test.tsx b/__tests__/components/sections/courses/Overview/LearningModules.test.tsx
new file mode 100644
index 00000000..e7343719
--- /dev/null
+++ b/__tests__/components/sections/courses/Overview/LearningModules.test.tsx
@@ -0,0 +1,30 @@
+import "@testing-library/jest-dom";
+import LearningModules from "@/components/sections/courses/overview/LearningModules";
+import LearningModulesCard from "@/components/cards/Learning";
+import { render, screen } from "@testing-library/react";
+import { mockCourse } from "../../../../../__mocks__/course";
+import { LearningModule } from "@/types/course";
+
+interface LearningModuleProps {
+  key: number;
+  learningModule: LearningModule[];
+}
+
+const RenderLearningModule = (props?: LearningModuleProps) => {
+  render(<LearningModulesCard {...props} key={1} learningModule={[mockCourse.learningModules]}/>);
+  return screen.getByTestId("learningModulesCardId");
+};
+
+describe("LearningModules", () => {
+  it("should render the Learning Modules", () => {
+    render(<LearningModules />);
+    const learningModules = screen.getByTestId("learningModulesId");
+    expect(learningModules).toBeInTheDocument();
+    expect(learningModules).toHaveTextContent("0");
+  });
+  
+  it("should show Learning Modules List", () => {
+      const learningModulesCard = RenderLearningModule();
+      expect(learningModulesCard).toBeInTheDocument();
+  });
+});
diff --git a/__tests__/components/sections/courses/Overview/Objectives.test.tsx b/__tests__/components/sections/courses/Overview/Objectives.test.tsx
new file mode 100644
index 00000000..f68b33cf
--- /dev/null
+++ b/__tests__/components/sections/courses/Overview/Objectives.test.tsx
@@ -0,0 +1,30 @@
+import "@testing-library/jest-dom";
+import Objectives from "@/components/sections/courses/overview/Objectives";
+import ObjectiveList from "@/components/sections/courses/overview/Objectives";
+import { render, screen } from "@testing-library/react";
+import { mockCourse } from "../../../../../__mocks__/course";
+
+interface ObjectiveListProps {
+  objectives: [];
+}
+
+
+const RenderObjectiveList = (props?: ObjectiveListProps) => {
+  render(<ObjectiveList {...props} objectives={mockCourse.objectives}/>);
+  return screen.getByTestId("objectivesListShow");
+};
+
+
+describe("Objectives", () => {
+
+  it("should render the Objectives", () => {
+    render(<Objectives/>)
+    const objectives = screen.getByTestId("objectivesShow");
+    expect(objectives).toBeInTheDocument();
+  });
+
+  it("should show Objective List", () => {
+    const objectivesList = RenderObjectiveList();
+    expect(objectivesList).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/Overview/Prerequisite.test.tsx b/__tests__/components/sections/courses/Overview/Prerequisite.test.tsx
new file mode 100644
index 00000000..67cfa43e
--- /dev/null
+++ b/__tests__/components/sections/courses/Overview/Prerequisite.test.tsx
@@ -0,0 +1,37 @@
+import "@testing-library/jest-dom";
+import Prerequisite from "@/components/sections/courses/overview/Prerequisite";
+import { render, screen } from "@testing-library/react";
+import { mockCourse } from "../../../../../__mocks__/course";
+import ObjectiveList from "@/components/list/Objectives";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    isFallback: false,
+  }),
+}));
+
+interface ObjectiveListProps {
+  objectives: [];
+}
+
+
+const RenderObjectiveList = (props?: ObjectiveListProps) => {
+  render(<ObjectiveList {...props} objectives={mockCourse.prerequisite.items}/>);
+  return screen.getByTestId("objectivesListShow");
+};
+
+describe("Prerequisite", () => {
+  it("should render the Prerequisite", () => {
+    render( <Prerequisite />)
+    const prerequisite =  screen.getByTestId("prerequisiteId");
+    expect(prerequisite).toBeInTheDocument();
+  });
+
+  it("should render the ObjectiveList", () => {
+    const objectiveList =  RenderObjectiveList();
+    expect(objectiveList).toBeInTheDocument();
+  });
+ 
+
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/Overview/Rewards.test.tsx b/__tests__/components/sections/courses/Overview/Rewards.test.tsx
new file mode 100644
index 00000000..afdf88c7
--- /dev/null
+++ b/__tests__/components/sections/courses/Overview/Rewards.test.tsx
@@ -0,0 +1,40 @@
+
+import "@testing-library/jest-dom";
+import Rewards from "@/components/sections/courses/overview/Rewards";
+import { render, screen } from "@testing-library/react";
+import Reward from "@/components/sections/courses/overview/Rewards";
+import { mockCourse } from "../../../../../__mocks__/course";
+import { RewardType } from "@/components/cards/Bounty";
+
+
+interface RewardProps {
+  reward: RewardType, 
+  i: number;
+}
+
+
+const rewardList = (props?: RewardProps) => {
+  mockCourse.challenge?.rewards.forEach(reward => <Reward {...props} key={2} reward={reward} size="medium" category="category"/>)
+}
+
+
+const RewardComponnent = () => {
+  render({rewardList});
+  return screen.getByTestId("rewardId");
+};
+
+ 
+
+describe("Rewards", () => {
+  it("should render the Rewards component", () => {
+    render( <Rewards />)
+    const rewards = screen.getByTestId("rewardsId");
+    expect(rewards).toBeInTheDocument();
+  });
+
+  it("should render the Reward component", () => {
+    const reward = RewardComponnent();
+    expect(reward).toBeInTheDocument();
+  });
+
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/Overview/Trailer.test.tsx b/__tests__/components/sections/courses/Overview/Trailer.test.tsx
new file mode 100644
index 00000000..4cc8f940
--- /dev/null
+++ b/__tests__/components/sections/courses/Overview/Trailer.test.tsx
@@ -0,0 +1,63 @@
+
+import "@testing-library/jest-dom";
+import Trailer from "@/components/sections/courses/overview/Trailer";
+import { render, screen } from "@testing-library/react";
+import { mockCourse } from "../../../../../__mocks__/course";
+import ObjectiveList from "@/components/sections/courses/overview/Trailer";
+import Video from "@/components/sections/courses/overview/Trailer";
+import Duration from "@/components/sections/courses/overview/Trailer";
+
+
+
+interface ObjectiveListProps {
+  objectives: [];
+}
+
+const objectiveList = (props?: ObjectiveListProps) => {
+  return  <ObjectiveList {...props} objectives={mockCourse.trailer?.info?.items}/>
+}
+
+
+const RenderObjectiveList = () => {
+  render({objectiveList});
+  return screen.getByTestId("objectivesListShow");
+};
+
+
+describe("Trailer", () => {
+  it("should render the Trailer", () => {
+    render(<Trailer />)
+    const trailer = screen.getByTestId("trailerId");
+    expect(trailer).toBeInTheDocument();
+  });
+
+  it("should render the Video", () => {
+    render(<Video />)
+    const trailerVideo = screen.getByTestId("trailerVideoId");
+    expect(trailerVideo).toBeInTheDocument();
+  });
+
+  it("should render the Duration", () => {
+    render(<Duration />)
+    const trailerDuration = screen.getByTestId("trailerDurationId");
+    expect(trailerDuration).toBeInTheDocument();
+  });
+
+  it("should render the Video Summary", () => {
+    const trailerVideoSummary = screen.getByTestId("trailerVideoSummary");
+    expect(trailerVideoSummary).toBeInTheDocument();
+    expect(trailerVideoSummary).toBe(mockCourse.trailer.description);
+  });
+
+  it("should render the Objective List", () => {
+    const objectiveList = RenderObjectiveList();
+    expect(objectiveList).toBeInTheDocument();
+  });
+
+  it("should render course trailer description", () => {
+    const trailerText = screen.getByTestId("trailerTextId");
+    expect(trailerText).toBeInTheDocument();
+    expect(trailerText).toBe(mockCourse.trailer.description);
+  });
+
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/Overview/index.test.tsx b/__tests__/components/sections/courses/Overview/index.test.tsx
new file mode 100644
index 00000000..0c662127
--- /dev/null
+++ b/__tests__/components/sections/courses/Overview/index.test.tsx
@@ -0,0 +1,91 @@
+import "@testing-library/jest-dom";
+import AllComponents from "@/components/sections/courses/overview/index";
+import RewardsSection from "@/components/sections/courses/overview/index";
+import ObjectivesSection from "@/components/sections/courses/overview/index";
+import PrerequisiteSection from "@/components/sections/courses/overview/index";
+import DisclaimerSection from "@/components/sections/courses/overview/index";
+import TrailerSection from "@/components/sections/courses/overview/index";
+import LearningModulesSection from "@/components/sections/courses/overview/index";
+import ChallengeSection from "@/components/sections/courses/overview/index";
+import PageNavigation from "@/components/sections/courses/overview/index";
+import Header from "@/components/sections/courses/overview/index";
+
+import { mockCourse } from "../../../../../__mocks__/course";
+
+import { render, screen } from "@testing-library/react";
+
+
+interface HeaderProps {
+  title: "string";
+  description: "string";
+}
+
+const RenderHeader = (props?: HeaderProps) => {
+  render(<Header {...props} title={[mockCourse.name]} description={[mockCourse.description]}/>);
+  return screen.getByTestId("headerId");
+};
+
+
+describe("All Components", () => {
+
+  it("should render the Disclaimer", () => {
+    render( <AllComponents />);
+    const disclaimerComponent = screen.getByTestId("disclaimerId");
+    expect(disclaimerComponent).toBeInTheDocument();
+  });
+
+
+  it("should render Header with title and description", () => {
+    const headerContent = RenderHeader();
+    expect(headerContent).toBeInTheDocument();
+  });
+
+  it("should render RewardsSection in the index component", () => {
+    render( <RewardsSection />);
+    const rewardsSection = screen.getByTestId("rewardsSectionId");
+    expect(rewardsSection).toBeInTheDocument();
+  });
+
+
+  it("should render ObjectivesSection in the index component", () => {
+    render( <ObjectivesSection />);
+    const objectivesSection = screen.getByTestId("objectivesSectionId");
+    expect(objectivesSection).toBeInTheDocument();
+  });
+
+  it("should render PrerequisiteSection in the index component", () => {
+    render( <PrerequisiteSection />);
+    const prerequisiteSection = screen.getByTestId("prerequisiteSectionId");
+    expect(prerequisiteSection).toBeInTheDocument();
+  });
+
+  it("should render DisclaimerSection in the index component", () => {
+    render( <DisclaimerSection />);
+    const disclaimerSection = screen.getByTestId("disclaimerSectionId");
+    expect(disclaimerSection).toBeInTheDocument();
+  });
+
+  it("should render TrailerSection in the index component", () => {
+    render( <TrailerSection />);
+    const trailerSection = screen.getByTestId("trailerSectionId");
+    expect(trailerSection).toBeInTheDocument();
+  });
+
+  it("should render LearningModulesSection in the index component", () => {
+    render( <LearningModulesSection />);
+    const learningModulesSection = screen.getByTestId("");
+    expect(learningModulesSection ).toBeInTheDocument();
+  });
+
+  it("should render ChallengeSection in the index component", () => {
+    render( <ChallengeSection />);
+    const challengeSection = screen.getByTestId("challengeSectionId");
+    expect(challengeSection).toBeInTheDocument();
+  });
+
+  it("should render PageNavigation in the index component", () => {
+    render( <PageNavigation />);
+    const pageNavigation = screen.getByTestId("pageNavigationId");
+    expect(pageNavigation).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/__tests__/components/sections/courses/PageNavigation.test.tsx b/__tests__/components/sections/courses/PageNavigation.test.tsx
new file mode 100644
index 00000000..5b6f2e62
--- /dev/null
+++ b/__tests__/components/sections/courses/PageNavigation.test.tsx
@@ -0,0 +1,84 @@
+import "@testing-library/jest-dom";
+import PageNavigation from "@/components/sections/courses/PageNavigation";
+import { screen } from "@testing-library/react";
+import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
+import ArrowButton from "@/components/ui/button/Arrow";
+import Link from "next/link";
+
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    isFallback: false,
+    events: {
+      on: jest.fn(),
+      off: jest.fn(),
+      emit: jest.fn(),
+    },
+  }),
+}));
+
+
+const arrowButtonProps = {
+  customStyle: {},
+  minWidthClass: "",
+  className: "",
+  children: "Arrow button",
+
+};
+
+
+const linkPrev = "/"
+
+const linkNext = "/"
+
+const RenderArrowButton = (props = arrowButtonProps) => {
+  const { customStyle, minWidthClass, className } =
+    props;
+
+  renderWithRedux(
+    <ArrowButton
+      customStyle={customStyle}
+      minWidthClass={minWidthClass}
+      className={className}
+  
+    >
+      {props.children}
+    </ArrowButton>
+  );
+
+  return screen.getByText(arrowButtonProps.children);
+};
+
+describe("PageNavigation", () => {
+
+  it("Should render the arrow button", () => {
+    const arrowButton = RenderArrowButton();
+    expect(arrowButton).toBeInTheDocument();
+  });
+  
+  it("should render the Page Navigation", () => {
+    renderWithRedux( <PageNavigation /> );
+    const pageNavigation = screen.getByTestId("pageNavId");
+    expect(pageNavigation).toBeInTheDocument();
+  });
+
+
+  it("should render page nav link with previous link", () => {
+    renderWithRedux(<Link href={linkNext}/>);
+    const pageNavLink = screen.getByTestId("pageNavLinkId");
+    expect(pageNavLink).toBeInTheDocument();
+    expect(pageNavLink).toHaveAttribute("href", "/");
+  });
+
+
+  it("should render page nav link with next link", () => {
+    renderWithRedux(<Link href={linkPrev}/>);
+    const pageNavLink = screen.getByTestId("pageNavLinkId");
+    expect(pageNavLink).toBeInTheDocument();
+    expect(pageNavLink).toHaveAttribute("href", "/");
+  });
+
+
+
+
+});
diff --git a/__tests__/components/sections/courses/Wrapper.test.tsx b/__tests__/components/sections/courses/Wrapper.test.tsx
new file mode 100644
index 00000000..8669d618
--- /dev/null
+++ b/__tests__/components/sections/courses/Wrapper.test.tsx
@@ -0,0 +1,46 @@
+import "@testing-library/jest-dom";
+import Wrapper from "@/components/sections/courses/Wrapper";
+import Navigation from "@/components/sections/courses/Navigation";
+import MobileNav from "@/components/sections/courses/MobileNav";
+import CommunityNavigation from "@/components/sections/courses/CommunityNavigation";
+import { render, screen } from "@testing-library/react";
+
+
+describe("Wrapper", () => {
+
+  it("should render the Wrapper", () => {
+    // eslint-disable-next-line react/no-children-prop
+    render( <Wrapper children={undefined} />);
+    const wrapper = screen.getByTestId("wrapperId");
+    expect(wrapper).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("wrapperSectionId")).toBeInTheDocument();
+  });
+
+
+  it("Should render Navigation component", () => {
+    render(<Navigation />);
+    const navigation = screen.getByTestId("NavId");
+    expect(navigation).toBeInTheDocument();
+  });
+
+
+  it("Should render Navigation component", () => {
+    render(<MobileNav />);
+    const inputElement = screen.getByPlaceholderText("showTopBorder");
+    expect(inputElement).toBeInTheDocument();    
+    const mobileNav = screen.getByText("MobileNavId");
+    expect(mobileNav).toBeInTheDocument();
+  });
+
+
+  it("Should render Navigation component", () => {
+    render(<CommunityNavigation />);
+    const inputElement = screen.getByPlaceholderText("paths");
+    expect(inputElement).toBeInTheDocument();
+    const communityNav = screen.getByTestId("communityNavId");
+    expect(communityNav).toBeInTheDocument();
+  });
+
+});
+
+
diff --git a/src/components/sections/courses/CommunityNavigation.tsx b/src/components/sections/courses/CommunityNavigation.tsx
index 357c1218..3870d408 100644
--- a/src/components/sections/courses/CommunityNavigation.tsx
+++ b/src/components/sections/courses/CommunityNavigation.tsx
@@ -15,15 +15,15 @@ export default function CommunityNavigation({ paths }: { paths?: string[] }): Re
   const path = useMemo(() => (community ? `/communities/${community.slug}` : ""), [community]);
 
   return community ? (
-    <div>
+    <div data-testid="communityNavigationShow">
       <div className="relative flex items-center py-4 pt-4 text-sm border-b-2 md:pt-7 lg:border-0">
-        <div className="leading-none text-gray-500">
+        <div className="leading-none text-gray-500" data-testid="communityNavLink">
           <Link href={path}>{community.name}</Link>
         </div>
         {paths?.map((path, index) => (
           <Fragment key={`path-${index}`}>
             <div className="px-0.5">
-              <ChevronRightIcon viewBox="0 0 20 20" className="w-3 h-3" />
+              <ChevronRightIcon viewBox="0 0 20 20" className="w-3 h-3" data-testid="communityNavId"/>
             </div>
             <div className="font-medium leading-none">{path}</div>
           </Fragment>
@@ -34,3 +34,5 @@ export default function CommunityNavigation({ paths }: { paths?: string[] }): Re
     <></>
   );
 }
+
+
diff --git a/src/components/sections/courses/PageNavigation.tsx b/src/components/sections/courses/PageNavigation.tsx
index d95c049d..f26eff28 100644
--- a/src/components/sections/courses/PageNavigation.tsx
+++ b/src/components/sections/courses/PageNavigation.tsx
@@ -106,16 +106,16 @@ export default function PageNavigation(): ReactElement {
   if (show)
     return (
       <Section>
-        <div className={classNames("text-center justify-center space-x-10 pt-3", { flex: prevUrl, "w-full sm:flex": !prevUrl })}>
+        <div data-testid="pageNavId" className={classNames("text-center justify-center space-x-10 pt-3", { flex: prevUrl, "w-full sm:flex": !prevUrl })}>
           {prevUrl && (
-            <Link href={prevUrl}>
+            <Link href={prevUrl} data-testId="pageNavLinkId">
               <ArrowButton customStyle={buttonStyle} direction="left" minWidthClass="null">
                 {t("nav.page.prev")}
               </ArrowButton>
             </Link>
           )}
           {nextUrl && (
-            <Link href={nextUrl}>
+            <Link href={nextUrl} data-testId="pageNavLinkId">
               <ArrowButton
                 className={classNames({
                   "text-.5xl py-4.5 pl-6 pr-5.5": !prevUrl,
diff --git a/src/components/sections/courses/Wrapper.tsx b/src/components/sections/courses/Wrapper.tsx
index 7953dd94..afd0934c 100644
--- a/src/components/sections/courses/Wrapper.tsx
+++ b/src/components/sections/courses/Wrapper.tsx
@@ -26,15 +26,15 @@ interface WrapperProps {
  */
 export default function Wrapper({ children, paths }: WrapperProps): ReactElement {
   return (
-    <Section type="default">
+    <Section type="default" data-testid="wrapperId">
       <div className="h-auto lg:flex">
-        <div className="sticky top-0 self-start hidden w-1/4 py-3 lg:block pr-9 lg:py-14">
+        <div className="sticky top-0 self-start hidden w-1/4 py-3 lg:block pr-9 lg:py-14" data-testid="NavId">
           <Navigation />
         </div>
-        <div className="w-full pt-6 lg:hidden">
+        <div className="w-full pt-6 lg:hidden" data-testid="MobileNavId">
           <MobileNav showTopBorder />
         </div>
-        <div className="w-full lg:w-3/4">
+        <div className="w-full lg:w-3/4"  data-testid="communityNavId">
           <CommunityNavigation paths={paths} />
           {children}
         </div>
diff --git a/src/components/sections/courses/overview/Challenge.tsx b/src/components/sections/courses/overview/Challenge.tsx
index d9a3ee44..8a513b77 100644
--- a/src/components/sections/courses/overview/Challenge.tsx
+++ b/src/components/sections/courses/overview/Challenge.tsx
@@ -15,8 +15,8 @@ export default function Challenge(): ReactElement {
 
   const { t } = useTranslation();
   return course && course.challenge ? (
-    <Section title={t("communities.overview.challenge")}>
-      <span className="block mt-3 text-base font-normal md:text-lg">{course.challenge.description}</span>
+    <Section data-testid="challengeDescriptionId" title={t("communities.overview.challenge")}>
+      <span data-testid="challengeDescription" className="block mt-3 text-base font-normal md:text-lg">{course.challenge.description}</span>
     </Section>
   ) : (
     <></>
diff --git a/src/components/sections/courses/overview/Description.tsx b/src/components/sections/courses/overview/Description.tsx
index 751dcb1c..5cd63519 100644
--- a/src/components/sections/courses/overview/Description.tsx
+++ b/src/components/sections/courses/overview/Description.tsx
@@ -16,7 +16,7 @@ export default function Description(): ReactElement {
   const course = useSelector((state) => state.courses.current);
 
   return course ? (
-    <div className="px-0 py-2 pb-8 mb-0 text-lg leading-snug border-b-2 pt-9 md:hidden tracking-onepercent md:border-b-0">
+    <div data-testid="descriptionId" className="px-0 py-2 pb-8 mb-0 text-lg leading-snug border-b-2 pt-9 md:hidden tracking-onepercent md:border-b-0">
       {htmlTagsCleanup(course.description || course.summary || "")}
     </div>
   ) : (
diff --git a/src/components/sections/courses/overview/Disclaimer.tsx b/src/components/sections/courses/overview/Disclaimer.tsx
index e712dfbd..8b772048 100644
--- a/src/components/sections/courses/overview/Disclaimer.tsx
+++ b/src/components/sections/courses/overview/Disclaimer.tsx
@@ -18,10 +18,10 @@ export default function Disclaimer(): ReactElement {
 
   if (course && !course.disclaimer) return <></>;
   return (
-    <Section className="!pb-12 !pt-0">
+    <Section data-testid="disclaimerId" className="!pb-12 !pt-0">
       <Hint>
         <strong>{t("communities.overview.info.disclaimer.title")}: </strong>
-        <span dangerouslySetInnerHTML={{ __html: course?.disclaimer as string }} />
+        <span data-testid="disclaimerSpanId" dangerouslySetInnerHTML={{ __html: course?.disclaimer as string }} />
       </Hint>
     </Section>
   );
diff --git a/src/components/sections/courses/overview/LearningModules.tsx b/src/components/sections/courses/overview/LearningModules.tsx
index 19d51446..bdbbf532 100644
--- a/src/components/sections/courses/overview/LearningModules.tsx
+++ b/src/components/sections/courses/overview/LearningModules.tsx
@@ -18,7 +18,7 @@ export default function LearningModules(): ReactElement {
   return (
     <>
       {course ? (
-        <Section>
+        <Section data-testid="learningModulesId">
           <div className="grid flex-wrap grid-cols-1 gap-5 sm:grid-cols-2">
             <div className="flex flex-col w-full mt-0 mr-4 md:pt-4">
               <h4 className="font-medium inline-block text-.5xl">{t("communities.overview.learning-modules")}</h4>
@@ -26,7 +26,7 @@ export default function LearningModules(): ReactElement {
             </div>
             {course.learningModules &&
               course.learningModules.map((learningModule, index) => {
-                return <LearningModuleCard key={`module-${index}`} learningModule={learningModule} />;
+                return <LearningModuleCard data-testid="learningModulesCardId" key={`module-${index}`} learningModule={learningModule} />;
               })}
           </div>
         </Section>
diff --git a/src/components/sections/courses/overview/Objectives.tsx b/src/components/sections/courses/overview/Objectives.tsx
index e1404600..ab310099 100644
--- a/src/components/sections/courses/overview/Objectives.tsx
+++ b/src/components/sections/courses/overview/Objectives.tsx
@@ -17,8 +17,8 @@ export default function Objectives(): ReactElement {
   const course = useSelector((state) => state.courses.current);
 
   return course ? (
-    <Section title={t("communities.overview.objective.title")} subtitle={t("communities.overview.objective.subtitle")}>
-      <ObjectiveList objectives={course.objectives} />
+    <Section data-testid="objectivesShow" title={t("communities.overview.objective.title")} subtitle={t("communities.overview.objective.subtitle")}>
+      <ObjectiveList data-testid="objectiveListShow" objectives={course.objectives} />
     </Section>
   ) : (
     <></>
diff --git a/src/components/sections/courses/overview/Prerequisite.tsx b/src/components/sections/courses/overview/Prerequisite.tsx
index 198c0ca5..84d418fc 100644
--- a/src/components/sections/courses/overview/Prerequisite.tsx
+++ b/src/components/sections/courses/overview/Prerequisite.tsx
@@ -18,9 +18,9 @@ export default function Prerequisite(): ReactElement {
 
   if (course && !course.prerequisite) return <></>;
   return (
-    <Section title={t("communities.overview.info.prerequisite.title")} subtitle={t("communities.overview.info.prerequisite.subtitle")}>
+    <Section data-testid="prerequisiteId" title={t("communities.overview.info.prerequisite.title")} subtitle={t("communities.overview.info.prerequisite.subtitle")}>
       <div className="mb-5">
-        <ObjectiveList objectives={course?.prerequisite.items} />
+        <ObjectiveList data-testid="objectivesListShow" objectives={course?.prerequisite.items} />
       </div>
       {course?.prerequisite.hint && (
         <Hint>
diff --git a/src/components/sections/courses/overview/Rewards.tsx b/src/components/sections/courses/overview/Rewards.tsx
index 1254ce80..18ddfe6f 100644
--- a/src/components/sections/courses/overview/Rewards.tsx
+++ b/src/components/sections/courses/overview/Rewards.tsx
@@ -19,10 +19,10 @@ export default function Rewards(): ReactElement {
   return (
     <>
       {course && course.challenge ? (
-        <Section title={t("communities.overview.reward.title")} subtitle={t("communities.overview.reward.subtitle")}>
+        <Section data-testid="rewardsId" title={t("communities.overview.reward.title")} subtitle={t("communities.overview.reward.subtitle")}>
           <div className="grid grid-cols-2 pt-4 lg:grid-cols-3">
             {course.challenge.rewards.map((reward: RewardType, i: number) => {
-              return <Reward key={`reward-${i}`} reward={reward} size="medium" category={reward.type.toLowerCase()} />;
+              return <Reward data-testid="rewardId" key={`reward-${i}`} reward={reward} size="medium" category={reward.type.toLowerCase()} />;
             })}
           </div>
         </Section>
diff --git a/src/components/sections/courses/overview/Trailer.tsx b/src/components/sections/courses/overview/Trailer.tsx
index 39bd1484..35602902 100644
--- a/src/components/sections/courses/overview/Trailer.tsx
+++ b/src/components/sections/courses/overview/Trailer.tsx
@@ -20,13 +20,13 @@ export default function Trailer(): ReactElement {
   return (
     <>
       {course && course.trailer && course.trailer.video ? (
-        <Section title={t("communities.overview.trailer")}>
-          <Duration text={t("communities.overview.trailer.video")} value={course.trailer.duration} />
-          <div className="block text-lg mt-3 mb-4.5">{course.trailer.summary}</div>
-          <Video className="-mx-0 md:w-full md:mx-auto" url={course.trailer.video} />
+        <Section data-testid="trailerId" title={t("communities.overview.trailer")}>
+          <Duration data-testid="trailerDurationId" text={t("communities.overview.trailer.video")} value={course.trailer.duration} />
+          <div data-testid="trailerVideoSummary" className="block text-lg mt-3 mb-4.5">{course.trailer.summary}</div>
+          <Video data-testid="trailerVideoId" className="-mx-0 md:w-full md:mx-auto" url={course.trailer.video} />
 
           {course.trailer.description && (
-            <div
+            <div data-testid="trailerTextId"
               dangerouslySetInnerHTML={{
                 __html: course.trailer.description,
               }}
diff --git a/src/components/sections/courses/overview/index.tsx b/src/components/sections/courses/overview/index.tsx
index 5a5a71cc..d2e9f3f1 100644
--- a/src/components/sections/courses/overview/index.tsx
+++ b/src/components/sections/courses/overview/index.tsx
@@ -23,15 +23,15 @@ export default function Overview(): ReactElement {
   if (!course) return <></>;
   return (
     <div className="flex flex-col divide-y divide-solid divide-gray-200 lg:py-5 text-gray-700">
-      <Header title={course.name} description={course.description} />
-      <RewardsSection />
-      <ObjectivesSection />
-      <PrerequisiteSection />
-      <DisclaimerSection />
-      <TrailerSection />
-      <LearningModulesSection />
-      <ChallengeSection />
-      <PageNavigation />
+      <Header data-testid="headerId" title={course.name} description={course.description} />
+      <RewardsSection data-testid=""/>
+      <ObjectivesSection data-testid=""/>
+      <PrerequisiteSection data-testid=""/>
+      <DisclaimerSection data-testid="disclaimerSectionId"/>
+      <TrailerSection data-testid="trailerSectionId"/>
+      <LearningModulesSection data-testid="learningModulesSection" />
+      <ChallengeSection data-testid="challengeSectionId"/>
+      <PageNavigation data-testid="pageNavigationId"/>
     </div>
   );
 }