diff --git a/components/Smart/ApplyNowBtn/ApplyNowBtn.scss b/components/Smart/ApplyNowBtn/ApplyNowBtn.scss
new file mode 100644
index 00000000..1f4d50cd
--- /dev/null
+++ b/components/Smart/ApplyNowBtn/ApplyNowBtn.scss
@@ -0,0 +1,12 @@
+.apply-btn {
+  font-family: 'lato';
+  color: white !important;
+  font-size: 14px;
+  height: 48px;
+}
+
+@media only screen and (max-width: 550px) {
+  .apply-btn {
+    height: 40px;
+  }
+}
diff --git a/components/Smart/ApplyNowBtn/ApplyNowBtn.tsx b/components/Smart/ApplyNowBtn/ApplyNowBtn.tsx
new file mode 100644
index 00000000..38c70471
--- /dev/null
+++ b/components/Smart/ApplyNowBtn/ApplyNowBtn.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { Box, Button } from '@mui/material'
+import SendOutlinedIcon from '@mui/icons-material/SendOutlined'
+import Link from 'next/link'
+
+interface ApplyNowBtnInterface {
+  text?: string
+  url?: string
+}
+
+const ApplyNowBtn: React.FC<ApplyNowBtnInterface> = ({ text, url }) => {
+  return (
+    <Box>
+      <Button
+        fullWidth
+        variant="contained"
+        endIcon={<SendOutlinedIcon />}
+        className="apply-btn"
+      >
+        <Link className="btn-text-color" href={url} target="_blank">
+          {text}
+        </Link>
+      </Button>
+    </Box>
+  )
+}
+
+export default ApplyNowBtn
diff --git a/data/data.ts b/data/data.ts
index 953a1885..0bfcb65a 100644
--- a/data/data.ts
+++ b/data/data.ts
@@ -37,6 +37,10 @@ export const pages = [
     path: '/team',
     text: 'Meet the team',
   },
+  {
+    path: '/jobs',
+    text: 'Jobs',
+  },
 ]
 if (FEATURES.blogs) {
   pages.push({
@@ -267,6 +271,10 @@ export const footerData = {
         text: 'Services',
         path: '/services',
       },
+      {
+        path: '/jobs',
+        text: 'Jobs',
+      },
       {
         text: 'News & Blogs',
         path: '/blogs',
@@ -309,3 +317,16 @@ export const productsList = {
   heading:
     'Our aim is to build secure and reliable products and fulfill our clients requirements.',
 }
+
+/**********            Home Page Jobs Data          ********* */
+export const jobsData = {
+  jobsPageTitle: 'Jobs',
+  jobsPageHeader: 'Careers at Prixite 🚀',
+  jobPageHeader: 'Full time - Remote',
+  jobsHeading: 'Our Jobs',
+  aboutRole: 'About the Role',
+  description: 'Description',
+  jobDataNotFound: 'No Jobs available currently',
+  positionClose: 'This position is closed.',
+  pageNotFound: '404 | This Page could not be found',
+}
diff --git a/pages/jobs/[jobDetail].tsx b/pages/jobs/[jobDetail].tsx
new file mode 100644
index 00000000..92126d21
--- /dev/null
+++ b/pages/jobs/[jobDetail].tsx
@@ -0,0 +1,267 @@
+import React from 'react'
+import { Container, Box, Typography, Button } from '@mui/material'
+import Head from 'next/head'
+import { jobsData } from '../../data/data'
+import { JobProps, ResultProps, ResProps, Jobs } from '../../types/interfaces'
+import Image from 'next/image'
+import SendOutlinedIcon from '@mui/icons-material/SendOutlined'
+import Link from 'next/link'
+
+export const getStaticPaths = async () => {
+  const url = `${process.env.NEXT_PUBLIC_ERP_BASEPATH}/api/resource/Job%20Opening?fields=[%22*%22]`
+  const res = await fetch(url)
+  const result: ResProps = await res.json()
+
+  const paths = result.data.map((job: Jobs) => {
+    return {
+      params: {
+        jobDetail: job.name,
+      },
+    }
+  })
+  return {
+    paths,
+    fallback: true,
+  }
+}
+
+export const getStaticProps = async (context: JobProps) => {
+  const name = context.params?.jobDetail
+  const url = `${process.env.NEXT_PUBLIC_ERP_BASEPATH}/api/resource/Job%20Opening?fields=["*"]&filters=[["Job%20Opening","name","=","${name}"]]`
+  const res = await fetch(url)
+  const result = await res.json()
+
+  return {
+    props: {
+      result,
+    },
+  }
+}
+
+const JobDetail = ({ result }: ResultProps) => {
+  const job_url = `${process.env.NEXT_PUBLIC_ERP_BASEPATH}/job_application/new?job_title=${result?.data[0]?.name}`
+  const { description, jobPageHeader, aboutRole, positionClose, pageNotFound } =
+    jobsData
+  return (
+    <>
+      <Head>
+        <title>{result?.data[0]?.job_title}</title>
+        <meta name="prixite" content="Prixte" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      {result?.data[0] ? (
+        <Container maxWidth="xl" className="page-header">
+          <Box className="header">
+            <Box className="heading">
+              <Typography className="heading-text">
+                {result?.data[0]?.job_title} 🚀
+              </Typography>
+            </Box>
+            <Box>
+              {result?.data[0]?.publish === 0 ? (
+                <></>
+              ) : (
+                <>
+                  {result?.data[0]?.status === 'Open' ? (
+                    <Button
+                      fullWidth
+                      variant="contained"
+                      endIcon={<SendOutlinedIcon />}
+                      className="apply-btn"
+                    >
+                      <Link
+                        className="btn-text-color"
+                        href={job_url}
+                        target="_blank"
+                      >
+                        {'Apply Now'}
+                      </Link>
+                    </Button>
+                  ) : (
+                    <></>
+                  )}
+                </>
+              )}
+            </Box>
+          </Box>
+
+          {result?.data[0]?.publish === 1 ? (
+            <Box className="page-content">
+              <Container disableGutters maxWidth="xl">
+                <div className="post-body">
+                  <Container className="circle-container" maxWidth="xl">
+                    <Box className="circle-image">
+                      <Image
+                        width={80}
+                        height={80}
+                        src={'/images/jobs/circle.png'}
+                        alt="circle-image"
+                      />
+                    </Box>
+                    <Box className="circle-card">
+                      <Typography className=" job-title">
+                        {aboutRole.slice(0, 0)}
+                        <span style={{ color: 'var(--primary-green)' }}>
+                          {aboutRole.slice(0, 9)}
+                        </span>
+                        {aboutRole.slice(9, 15)}
+                      </Typography>
+                    </Box>
+                  </Container>
+
+                  <Box className="job-container">
+                    <Box className="job-role-container">
+                      <Box className="job-image-container">
+                        <Image
+                          width={48}
+                          height={48}
+                          src={'/images/jobs/company.png'}
+                          alt="company-image"
+                        />
+                      </Box>
+                      <Box className="job-info">
+                        <Typography className="content-text">
+                          Company
+                        </Typography>
+                        <Typography className="job-text">
+                          {result?.data[0]?.company}
+                        </Typography>
+                      </Box>
+                    </Box>
+
+                    <Box className="job-role-container">
+                      <Box className="job-image-container">
+                        <Image
+                          width={48}
+                          height={48}
+                          src={'/images/jobs/status.png'}
+                          alt="status-image"
+                        />
+                      </Box>
+                      <Box className="job-info">
+                        <Typography className="content-text">Status</Typography>
+                        {result?.data[0]?.status === 'Open' ? (
+                          <Typography className="job-text">
+                            {result?.data[0]?.status}
+                          </Typography>
+                        ) : (
+                          <Typography className="job-text text">
+                            {result?.data[0]?.status}
+                          </Typography>
+                        )}
+                      </Box>
+                    </Box>
+
+                    <Box className="job-role-container">
+                      <Box className="job-image-container">
+                        <Image
+                          width={48}
+                          height={48}
+                          src={'/images/jobs/currency.png'}
+                          alt="currency-image"
+                        />
+                      </Box>
+                      <Box className="job-info">
+                        <Typography className="content-text">
+                          Currency
+                        </Typography>
+                        <Typography className="job-text">
+                          {result?.data[0]?.currency}
+                        </Typography>
+                      </Box>
+                    </Box>
+                  </Box>
+
+                  <Box className="job-container1">
+                    <Box className="job-role-container">
+                      <Box className="job-image-container">
+                        <Image
+                          width={48}
+                          height={48}
+                          src={'/images/jobs/designation.png'}
+                          alt="designation-image"
+                        />
+                      </Box>
+                      <Box className="job-info">
+                        <Typography className="content-text">
+                          Designation
+                        </Typography>
+                        <Typography className="job-text">
+                          {result?.data[0]?.designation}
+                        </Typography>
+                      </Box>
+                    </Box>
+
+                    {result?.data[0]?.vacancies === 0 ? (
+                      <></>
+                    ) : (
+                      <Box className="job-role-container">
+                        <Box className="job-image-container">
+                          <Image
+                            width={48}
+                            height={48}
+                            src={'/images/jobs/vacancy.png'}
+                            alt="vacancy-image"
+                          />
+                        </Box>
+                        <Box className="job-info">
+                          <Typography className="content-text">
+                            Vacancy
+                          </Typography>
+                          <Typography className="job-text">
+                            {result?.data[0]?.vacancies}
+                          </Typography>
+                        </Box>
+                      </Box>
+                    )}
+                    {result?.data[0]?.publish_salary_range === 1 ? (
+                      <Box className="job-role-container">
+                        <Box className="job-image-container">
+                          <Image
+                            width={48}
+                            height={48}
+                            src={'/images/jobs/salary range.png'}
+                            alt="salary-image"
+                          />
+                        </Box>
+                        <Box className="job-info">
+                          <Typography className="content-text">
+                            Salary Range
+                          </Typography>
+                          <Typography className="job-text">
+                            Range {result?.data[0]?.lower_range}-
+                            {result?.data[0]?.upper_range}
+                          </Typography>
+                        </Box>
+                      </Box>
+                    ) : (
+                      <></>
+                    )}
+                  </Box>
+
+                  <Box className="job-role-info">
+                    <Typography className="job-title">
+                      {jobPageHeader.slice(0, 0)}
+                      {description}
+                    </Typography>
+                    <div
+                      dangerouslySetInnerHTML={{
+                        __html: result?.data[0]?.description,
+                      }}
+                    />
+                  </Box>
+                </div>
+              </Container>
+            </Box>
+          ) : (
+            <h1 className="job-data-not-found"> {positionClose} </h1>
+          )}
+        </Container>
+      ) : (
+        <h1 className="not-found-page"> {pageNotFound} </h1>
+      )}
+    </>
+  )
+}
+
+export default JobDetail
diff --git a/pages/jobs/index.tsx b/pages/jobs/index.tsx
new file mode 100644
index 00000000..b559a82a
--- /dev/null
+++ b/pages/jobs/index.tsx
@@ -0,0 +1,94 @@
+import { Container, Box, Typography, Grid } from '@mui/material'
+import Link from 'next/link'
+import Image from 'next/image'
+import Head from 'next/head'
+import React from 'react'
+import { Props } from '../../types/interfaces'
+
+// eslint-disable-next-line
+import { jobsData } from '../../data/data'
+
+export const getStaticProps = async () => {
+  const url = `${process.env.NEXT_PUBLIC_ERP_BASEPATH}/api/resource/Job%20Opening?fields=[%22*%22]`
+  const response = await fetch(url)
+  const data = await response.json()
+
+  return {
+    props: {
+      data: data,
+    },
+  }
+}
+
+const Jobs = ({ data }: Props) => {
+  const { jobDataNotFound, jobsPageTitle, jobsPageHeader } = jobsData
+  const jobsPublish = data?.data?.filter((job) => job?.publish === 1)
+
+  return (
+    <>
+      <Head>
+        <title>{jobsPageTitle}</title>
+        <meta name="prixite" content="Prixte" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Container maxWidth="xl" className="page-header">
+        <Box className="header">
+          <Box className="heading">
+            <Typography className="heading-text">
+              {jobsPageHeader.slice(0, 10)}
+              <span style={{ color: 'var(--primary-green)' }}>
+                {jobsPageHeader.slice(10, 18)}
+              </span>
+              {jobsPageHeader.slice(18, 50)}
+            </Typography>
+          </Box>
+        </Box>
+
+        {jobsPublish.length > 0 ? (
+          <Grid container spacing={{ xs: 2, md: 7 }} columnSpacing={3}>
+            {jobsPublish?.map((curElem) => {
+              return (
+                <div key={curElem?.name}>
+                  <Grid item sm={12} md={3} className="job">
+                    <Box marginBottom="10px">
+                      <Link href={`/jobs/${curElem?.name}`}>
+                        <Box className="job-image-container">
+                          <Image
+                            width={22}
+                            height={22}
+                            src={'/images/jobs/breifcase.svg'}
+                            alt="job-image"
+                          />
+                        </Box>
+                        <Typography
+                          className="title-description"
+                          sx={{ fontSize: 15, fontWeight: 600, width: 250 }}
+                          mt="16px"
+                          ml="50px"
+                        >
+                          {curElem?.job_title}
+                        </Typography>
+
+                        <div
+                          className="job-description description"
+                          style={{ fontSize: '13px' }}
+                          dangerouslySetInnerHTML={{
+                            __html: curElem?.description,
+                          }}
+                        />
+                      </Link>
+                    </Box>
+                  </Grid>
+                </div>
+              )
+            })}
+          </Grid>
+        ) : (
+          <h1 className="job-data-not-found">{jobDataNotFound}</h1>
+        )}
+      </Container>
+    </>
+  )
+}
+
+export default Jobs
diff --git a/public/images/jobs/breifcase.svg b/public/images/jobs/breifcase.svg
new file mode 100644
index 00000000..3f69a550
--- /dev/null
+++ b/public/images/jobs/breifcase.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" />
+</svg>
diff --git a/public/images/jobs/circle.png b/public/images/jobs/circle.png
new file mode 100644
index 00000000..d51ce97d
Binary files /dev/null and b/public/images/jobs/circle.png differ
diff --git a/public/images/jobs/company.png b/public/images/jobs/company.png
new file mode 100644
index 00000000..834f4601
Binary files /dev/null and b/public/images/jobs/company.png differ
diff --git a/public/images/jobs/currency.png b/public/images/jobs/currency.png
new file mode 100644
index 00000000..5f956adc
Binary files /dev/null and b/public/images/jobs/currency.png differ
diff --git a/public/images/jobs/designation.png b/public/images/jobs/designation.png
new file mode 100644
index 00000000..0bce45c4
Binary files /dev/null and b/public/images/jobs/designation.png differ
diff --git a/public/images/jobs/icon.png b/public/images/jobs/icon.png
new file mode 100644
index 00000000..62eea21b
Binary files /dev/null and b/public/images/jobs/icon.png differ
diff --git a/public/images/jobs/salary range.png b/public/images/jobs/salary range.png
new file mode 100644
index 00000000..e3cba651
Binary files /dev/null and b/public/images/jobs/salary range.png differ
diff --git a/public/images/jobs/status.png b/public/images/jobs/status.png
new file mode 100644
index 00000000..3bfe8c14
Binary files /dev/null and b/public/images/jobs/status.png differ
diff --git a/public/images/jobs/vacancy.png b/public/images/jobs/vacancy.png
new file mode 100644
index 00000000..4ab23f91
Binary files /dev/null and b/public/images/jobs/vacancy.png differ
diff --git a/styles/globals.css b/styles/globals.css
index f45de543..e65ae708 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -198,6 +198,144 @@ ol {
   transition: background-color ease-in 0.2s;
 }
 
+.apply-btn {
+  font-family: 'lato';
+  color: white !important;
+  font-size: 13px;
+  height: 48px;
+}
+
+.btn-text-color {
+  color: white !important;
+}
+
+.job-title {
+  font-size: 40px;
+  font-family: lato;
+  font-weight: 700;
+}
+
+.job-info {
+  margin-left: 15px;
+}
+
+.content-text {
+  font-size: 20px;
+  font-family: lato;
+  font-weight: 700;
+  line-height: 24px;
+  margin-bottom: 5px;
+}
+
+.job-text {
+  font-size: 16px;
+  font-family: lato;
+  font-weight: 400;
+  line-height: 24px;
+  opacity: 60%;
+}
+
+.job-role-info {
+  margin-top: 40px;
+}
+
+.job-container {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.job-container1 {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+.job-role-container1 {
+  visibility: hidden;
+}
+
+.job-role-container {
+  display: flex;
+  margin-top: 40px;
+  width: 33.33333%;
+}
+
+.circle-container {
+  position: relative;
+  display: flex;
+  .circle-image {
+    position: relative;
+    right: 2%;
+    bottom: 10px;
+  }
+  .circle-card {
+    display: flex;
+    align-items: center;
+    padding-bottom: 5px;
+    position: absolute;
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+
+.job {
+  .job-image-container {
+    background: url('../public/images/serviceBackground.png');
+    width: 48px;
+    height: 48px;
+    margin-top: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 50px;
+  }
+  .job-description {
+    margin-left: 50px;
+    font-size: 13px !important ;
+    width: 250px;
+  }
+}
+
+.description {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.title-description {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.job-data-not-found {
+  width: 100%;
+  height: 45.5vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: gray;
+  font-size: 22px;
+}
+
+.text {
+  color: red;
+}
+
+.not-found-page {
+  width: 100%;
+  height: 45.5vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 @media (max-width: 500px) {
   .posts {
     grid-template-columns: 1fr !important;
diff --git a/types/interfaces.ts b/types/interfaces.ts
index 77c6d18a..39f4d52c 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -1,3 +1,5 @@
+import { SubresourceIntegrityAlgorithm } from 'next/dist/build/webpack/plugins/subresource-integrity-plugin'
+
 export interface BlogPost {
   frontmatter: {
     cover_image: string
@@ -58,6 +60,22 @@ export interface EmployeePost {
   slug: string
 }
 
+export interface JobPost {
+  frontmatter: {
+    index: number
+    title: string
+    header: string
+    description: string
+    logo_image: string
+    currency: string
+    salary_range: number
+    designation: string
+    vacancy: string
+    status: string
+  }
+  slug: string
+}
+
 export interface Testimonial {
   frontmatter: {
     index: number
@@ -91,6 +109,7 @@ export interface MDContent {
   testimonials?: Array<Testimonial>
   aboutUs: AboutUs
   product?: Array<Product>
+  jobs?: Array<JobPost>
 }
 
 export interface BlogPostWithContent extends BlogPost {
@@ -109,6 +128,10 @@ export interface EmployeeWithContent extends EmployeePost {
   content: string
 }
 
+export interface JobWithContent extends JobPost {
+  content: string
+}
+
 export interface Blog {
   params: {
     slug: string
@@ -138,6 +161,19 @@ export interface Employee {
   }
 }
 
+export interface Job {
+  params: {
+    slug: string
+  }
+}
+
+export interface DataProps {
+  params: {
+    slug: string
+  }
+  jobDetail: object
+}
+
 export interface SortByDateParam {
   frontmatter: {
     [key: string]: string | number
@@ -148,3 +184,55 @@ export interface SortbyIndexParam {
   slug: string
   frontmatter: { [key: string]: string | number }
 }
+
+export interface Props {
+  data: {
+    data: Array<Jobs>
+  }
+}
+
+export interface JobProps {
+  data: Props
+  params: DataProps
+}
+
+export interface Jobs {
+  name: string
+  company: string
+  creation: string
+  currency: string
+  department: string
+  description: string
+  designation: string
+  docstatus: number
+  idx: number
+  job_application_route: string
+  job_requisition: string
+  job_title: string
+  lower_range: number
+  modified: string
+  modified_by: string
+  owner: string
+  planned_vacancies: number
+  publish: number
+  publish_salary_range: number
+  route: string
+  staffing_plan: string
+  status: string
+  upper_range: number
+  vacancies: number
+  _user_tags: string[] | null
+  _comments: string[] | null
+  _assign: string[] | null
+  _liked_by: string[] | null
+}
+
+export interface ResultProps {
+  result: {
+    data: Array<Jobs>
+  }
+}
+
+export interface ResProps {
+  data: Array<Jobs>
+}