diff --git a/src/components/jobPosting/JobPosting.tsx b/src/components/jobPosting/JobPosting.tsx
index 7cf3b0752..acc743742 100644
--- a/src/components/jobPosting/JobPosting.tsx
+++ b/src/components/jobPosting/JobPosting.tsx
@@ -1,8 +1,6 @@
-import LinkButton from "src/components/linkButton/LinkButton";
 import Text from "src/components/text/Text";
 import { CompanyLocation } from "studio/lib/interfaces/companyDetails";
 import { IJobPosting } from "studio/lib/interfaces/jobPosting";
-import { LinkType } from "studio/lib/interfaces/navigation";
 
 import styles from "./jobPosting.module.css";
 
@@ -16,7 +14,11 @@ export default async function JobPosting({ jobPosting }: JobPostingProps) {
     .join(", ");
 
   return (
-    <div className={styles.jobPosting}>
+    <a
+      href={jobPosting.recruiteeAdUrl}
+      target="_blank"
+      className={styles.jobPosting}
+    >
       <div className={styles.details}>
         <div className={styles.role}>
           <Text type={"h5"}>{jobPosting.role}</Text>
@@ -25,17 +27,6 @@ export default async function JobPosting({ jobPosting }: JobPostingProps) {
           <Text type={"bodyNormal"}>{jobPostingLocations}</Text>
         </div>
       </div>
-      <LinkButton
-        link={{
-          _key: "recruitee",
-          _type: "link",
-          linkType: LinkType.External,
-          linkTitle: " ",
-          newTab: true,
-          url: jobPosting.recruiteeAdUrl,
-        }}
-        type="secondary"
-      />
-    </div>
+    </a>
   );
 }
diff --git a/src/components/jobPosting/jobPosting.module.css b/src/components/jobPosting/jobPosting.module.css
index 3ad5d0f88..73ad34abb 100644
--- a/src/components/jobPosting/jobPosting.module.css
+++ b/src/components/jobPosting/jobPosting.module.css
@@ -4,9 +4,9 @@
   justify-content: space-between;
   align-items: center;
   border-radius: 24px;
-  height: 64px;
   padding: 8px 24px;
   gap: 5rem;
+  width: 100%;
   background-color: var(--text-primary-light);
   color: var(--text-primary);
 }
@@ -14,12 +14,27 @@
 .details {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+}
+.jobPosting::after {
+  justify-self: end;
+  width: 1.5rem;
+  height: 1.5rem;
+  -webkit-mask: url("/_assets/arrow-right.svg") no-repeat center;
+  -webkit-mask-size: cover;
+  mask: url("/_assets/arrow-right.svg") no-repeat center;
+  mask-size: cover;
+  background-color: var(--background-bg-dark);
 }
 
 .role {
   width: 250px;
+  @media (max-width: 640px) {
+    width: 100%;
+  }
 }
 
 .locations {
@@ -27,5 +42,9 @@
   border: solid;
   border-color: var(--text-primary);
   border-width: thin;
-  border-radius: 24px;
+  border-radius: 25rem;
+  text-align: center;
+  @media (max-width: 640px) {
+    display: none;
+  }
 }
diff --git a/src/components/sections/jobs/jobs.module.css b/src/components/sections/jobs/jobs.module.css
index 4fa9d5b2b..a4e333b93 100644
--- a/src/components/sections/jobs/jobs.module.css
+++ b/src/components/sections/jobs/jobs.module.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   justify-content: center;
   padding: 32px 6px 6px 6px;
-  max-width: 50%;
+  max-width: 53rem;
   margin: 5rem auto;
   border-radius: 6px;
   gap: 0.5rem;
diff --git a/src/styles/global.css b/src/styles/global.css
index d0aa6e94f..7aa42779c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -155,4 +155,5 @@ small {
 
 a {
   color: var(--text-primary);
+  text-decoration: none;
 }