diff --git a/package-lock.json b/package-lock.json
index 3cfc64a..0d197b0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@ckeditor/ckeditor5-build-classic": "^40.0.0",
         "@ckeditor/ckeditor5-build-multi-root": "^40.0.0",
         "@ckeditor/ckeditor5-react": "^6.1.0",
+        "axios": "^0.24.0",
         "dompurify": "^3.0.6",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -1723,6 +1724,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
+      "dependencies": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2668,6 +2677,25 @@
       "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
diff --git a/src/components/JobOfferContent.jsx b/src/components/JobOfferContent.jsx
index 857e32e..1e50a49 100644
--- a/src/components/JobOfferContent.jsx
+++ b/src/components/JobOfferContent.jsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import DOMPurify from 'dompurify';
-import SkillRender from './SkillRender'; // Ensure this import is correctly pointing to your SkillRender component
+import SkillRender from './SkillRender'; 
 
+// eslint-disable-next-line react/prop-types
 const JobOfferContent = ({ id, skills }) => {
   const [jobOffer, setJobOffer] = useState(null);
 
@@ -48,7 +49,7 @@ const JobOfferContent = ({ id, skills }) => {
         <>
           <h1 className="my-4 mx-6 text-3xl font-bold text-slate-800">{jobOffer.name} w {jobOffer.company_name}</h1>
           <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3  gap-4">
-            {jobOffer.skill_levels.map((skillLevel) => {
+            {jobOffer.skill_levels && jobOffer.skill_levels.map((skillLevel) => {
               const skill = skills.find((s) => s.id === parseInt(skillLevel.skill_id));
               return skill ? (
                 <SkillRender key={skill.id} skill={skill.skill_name} level={skillLevel.skill_level} />
diff --git a/src/components/SkillRender.jsx b/src/components/SkillRender.jsx
index 384c9f3..33d1aa1 100644
--- a/src/components/SkillRender.jsx
+++ b/src/components/SkillRender.jsx
@@ -31,7 +31,7 @@ const SkillRender = ({key, skill, level,}) => {
 
   return (
     
-    <div className='w-64 h-42 rounded-[15px] bg-slate-200 py-4 m-2 hover:bg-slate-300 drop-shadow-sm' key={key}>
+    <div className='h-42 rounded-[15px] bg-slate-200 py-4 m-2 hover:bg-slate-300 drop-shadow-sm' key={key}>
         <p className='text-center font-bold mb-1 px-2'>{skill}</p> 
         <div className='h-0.5 mx-auto w-52 mt-2 justify-center bg-dimWhite opacity-60'></div>
 
diff --git a/src/components/StepFourJoblisting.jsx b/src/components/StepFourJoblisting.jsx
index c0a12e4..9e87d33 100644
--- a/src/components/StepFourJoblisting.jsx
+++ b/src/components/StepFourJoblisting.jsx
@@ -7,7 +7,7 @@ const StepFourJoblisting = ({ handleChange, formData, nextStep, prevStep }) => {
       <div className="grid grid-cols-5">
         <div className="col-span-3 col-start-2 mt-12">
           <TextDivider text={`Podaj dane ogłoszeniodawcy`} />
-          <div className="grid grid-cols-3">
+          <div className="grid grid-cols-2">
             <div className="col-span-1 mt-4 mx-2">
               <div className={`${styles.paragraph} px-4 py-2`}>
                 Imię
@@ -21,8 +21,9 @@ const StepFourJoblisting = ({ handleChange, formData, nextStep, prevStep }) => {
                 id="first_name"
                 onChange={handleChange("first_name")}
                 placeholder="Twoje imię..."
-                className={`border-b-2 px-4 my-2 ${styles.paragraph}`}
+                className={`px-4 mt-2 ${styles.paragraph}`}
               />
+              <div className="bg-black h-0.5 opacity-10"></div>
             </div>
             <div className="col-span-1 mt-4 mx-2">
               <div className={`${styles.paragraph} px-4 py-2`}>
@@ -37,8 +38,9 @@ const StepFourJoblisting = ({ handleChange, formData, nextStep, prevStep }) => {
                 id="last_name"
                 onChange={handleChange("last_name")}
                 placeholder="Twoje nazwisko..."
-                className={`border-b-2 px-4 my-2 ${styles.paragraph}`}
+                className={`px-4 mt-2 ${styles.paragraph}`}
               />
+              <div className="bg-black h-0.5 opacity-10"></div>
             </div>
             <div className="col-span-1 mt-4 mx-2">
               <div className={`${styles.paragraph} px-4 py-2`}>
@@ -53,15 +55,15 @@ const StepFourJoblisting = ({ handleChange, formData, nextStep, prevStep }) => {
                 id="contact_email"
                 onChange={handleChange("contact_email")}
                 placeholder="Adres mailowy..."
-                className={`border-b-2 px-4 my-2 ${styles.paragraph}`}
+                className={`px-4 mt-2 ${styles.paragraph}`}
               />
+              <div className="bg-black h-0.5 opacity-10"></div>
             </div>
-            <div className="col-span-2 mt-4 mx-2">
+            <div className="col-span-1 mt-4 mx-2">
               <div className={`${styles.paragraph} px-4 py-2`}>
                 Nazwa firmy
                 <span className={`${styles.paragraph} text-red-700`}>*</span>
               </div>
-              <div className="grid grid-cols-2">
               <input
                 type="text"
                 name="company_name"
@@ -70,9 +72,9 @@ const StepFourJoblisting = ({ handleChange, formData, nextStep, prevStep }) => {
                 onChange={handleChange("company_name")}
                 id="company_name"
                 placeholder="Wpisz nazwę firmy..."
-                className={`border-b-2 px-4 mr-12 my-2 ${styles.paragraph} col-span-2 `}
+                className={`px-4 mt-2  ${styles.paragraph}`}
               />
-              </div>
+              <div className="bg-black h-0.5 opacity-10"></div>
             </div>
             <div className="col-span-1 mt-4 mx-2">
               <div className={`${styles.paragraph} px-4 py-2`}>
@@ -88,8 +90,9 @@ const StepFourJoblisting = ({ handleChange, formData, nextStep, prevStep }) => {
                 onChange={handleChange("vat_number")}
                 id="vat_number"
                 placeholder="Wpisz nip..."
-                className={`border-b-2 px-4 my-2 ${styles.paragraph}  `}
-              />
+                className={`px-4 mt-2 ${styles.paragraph}`}
+                />
+                <div className="bg-black h-0.5 opacity-10"></div>
             </div>
           </div>
           <div className={`${styles.flexCenter} gap-16 mt-16`}>
diff --git a/src/components/TextDivider.jsx b/src/components/TextDivider.jsx
index cdf4c84..e1a9f94 100644
--- a/src/components/TextDivider.jsx
+++ b/src/components/TextDivider.jsx
@@ -4,7 +4,7 @@ const TextDivider = ({text }) => {
   return (
     <div className='flex items-center justify-center mt-4 mb-6'>
     <div className='h-0.5 bg-black w-[14rem] opacity-30'></div>
-    <p className='text-[24px] mx-8 font-semibold'>
+    <p className='text-[24px] mx-8 font-semibold text-center'>
       {text}
     </p>
     <div className='h-0.5 bg-black w-[14rem] opacity-30'></div>