diff --git a/src/App.jsx b/src/App.jsx
index 7b1a003..61d5567 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,15 +1,15 @@
 import {Route, createBrowserRouter, createRoutesFromElements, RouterProvider} from 'react-router-dom'
-import homepage from './pages/homepage'
-import mainlayout from './layouts/mainlayout'
-import jobspage from './pages/jobspage';
-import notfoundpage from './pages/notfoundpage';
+import HomePage from './pages/HomePage'
+import MainLayout from './layouts/MainLayout'
+import JobsPage from './pages/JobsPage';
+import NotFoundPage from './pages/NotFoundPage';
 
 const router = createBrowserRouter(
   createRoutesFromElements(
-    <Route path = '/' element = {<mainlayout />}>
-      <Route index element = {<homepage />} /> 
-      <Route path = '/jobs' element = {<jobspage />} /> 
-      <Route path = '*' element = {<notfoundpage />} /> 
+    <Route path = '/' element = {<MainLayout />}>
+      <Route index element = {<HomePage />} /> 
+      <Route path = '/jobs' element = {<JobsPage />} /> 
+      <Route path = '*' element = {<NotFoundPage />} /> 
 
 
     </Route>
diff --git a/src/components/homecards.jsx b/src/components/homecards.jsx
index 0345cbc..e3bde1a 100644
--- a/src/components/homecards.jsx
+++ b/src/components/homecards.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 import card from './card'
 import {Link} from 'react-router-dom'
 
-const homecards = () => {
+const HomeCards = () => {
   return (
     <section className="py-4">
         <div className="container-xl lg:container m-auto">
@@ -37,4 +37,4 @@ const homecards = () => {
   )
 }
 
-export default homecards
+export default HomeCards
diff --git a/src/components/joblisting.jsx b/src/components/joblisting.jsx
index 39ed2ea..47064e1 100644
--- a/src/components/joblisting.jsx
+++ b/src/components/joblisting.jsx
@@ -4,7 +4,7 @@ import { useState } from 'react'
 import {FaMapMarker } from 'react-icons/fa'
 import {Link} from 'react-router-dom';
 
-const joblisting = ({job}) => {
+const jobListing = ({job}) => {
 
     const [showFullDescription, setShowFullDescription] = useState(false);
     let description = job.description; 
@@ -48,4 +48,4 @@ const joblisting = ({job}) => {
   )
 }
 
-export default joblisting
+export default l
diff --git a/src/components/joblistings.jsx b/src/components/joblistings.jsx
index 1f10f60..57625b6 100644
--- a/src/components/joblistings.jsx
+++ b/src/components/joblistings.jsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import jobs from '../jobs.json'
-import joblisting from './joblistings'
+import jobListing from './jobListings'
 
-const joblistings = () => {
-    const recentjobs = jobs.slice(0,3);
+const jobListings = ({isHome}) => {
+    const jobListings = isHome ? jobs.slice(0,3) : jobs;
   return (
     <section className="bg-blue-50 px-4 py-10">
     <div className="container-xl lg:container m-auto">
@@ -11,8 +11,8 @@ const joblistings = () => {
         Browse Jobs
       </h2>
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        {recentjobs.map((job) => (
-            <joblisting key = {job.id} job ={job} />
+        {jobListings.map((job) => (
+            <jobListing key = {job.id} job ={job} />
         ))}
         
       </div>
diff --git a/src/jobs.json b/src/jobs.json
index 5249791..bcd2606 100644
--- a/src/jobs.json
+++ b/src/jobs.json
@@ -1,86 +1,89 @@
- [
-    {
-      "id": "1",
-      "title": "Senior React Developer",
-      "type": "Full-Time",
-      "description": "We are seeking a talented Front-End Developer to join our team in Boston, MA. The ideal candidate will have strong skills in HTML, CSS, and JavaScript, with experience working with modern JavaScript frameworks such as React or Angular.",
-      "location": "Boston, MA",
-      "salary": "$70K - $80K",
-      "company": {
-        "name": "NewTek Solutions",
-        "description": "NewTek Solutions is a leading technology company specializing in web development and digital solutions. We pride ourselves on delivering high-quality products and services to our clients while fostering a collaborative and innovative work environment.",
-        "contactEmail": "contact@teksolutions.com",
-        "contactPhone": "555-555-5555"
+ {
+  "jobs":
+  [
+      {
+        "id": "1",
+        "title": "Senior React Developer",
+        "type": "Full-Time",
+        "description": "We are seeking a talented Front-End Developer to join our team in Boston, MA. The ideal candidate will have strong skills in HTML, CSS, and JavaScript, with experience working with modern JavaScript frameworks such as React or Angular.",
+        "location": "Boston, MA",
+        "salary": "$70K - $80K",
+        "company": {
+          "name": "NewTek Solutions",
+          "description": "NewTek Solutions is a leading technology company specializing in web development and digital solutions. We pride ourselves on delivering high-quality products and services to our clients while fostering a collaborative and innovative work environment.",
+          "contactEmail": "contact@teksolutions.com",
+          "contactPhone": "555-555-5555"
+        }
+      },
+      {
+        "id": "2",
+        "title": "Front-End Engineer (React & Redux)",
+        "type": "Full-Time",
+        "location": "Miami, FL",
+        "description": "Join our team as a Front-End Developer in sunny Miami, FL. We are looking for a motivated individual with a passion for crafting beautiful and responsive web applications. Experience with UI/UX design principles and a strong attention to detail are highly desirable.",
+        "salary": "$70K - $80K",
+        "company": {
+          "name": "Veneer Solutions",
+          "description": "Veneer Solutions is a creative agency specializing in digital design and development. Our team is dedicated to pushing the boundaries of creativity and innovation to deliver exceptional results for our clients.",
+          "contactEmail": "contact@loremipsum.com",
+          "contactPhone": "555-555-5555"
+        }
+      },
+      {
+        "id": "3",
+        "title": "React.js Dev",
+        "type": "Full-Time",
+        "location": "Brooklyn, NY",
+        "description": "Are you passionate about front-end development? Join our team in vibrant Brooklyn, NY, and work on exciting projects that make a difference. We offer competitive compensation and a collaborative work environment where your ideas are valued.",
+        "salary": "$70K - $80K",
+        "company": {
+          "name": "Dolor Cloud",
+          "description": "Dolor Cloud is a leading technology company specializing in digital solutions for businesses of all sizes. With a focus on innovation and customer satisfaction, we are committed to delivering cutting-edge products and services.",
+          "contactEmail": "contact@dolorsitamet.com",
+          "contactPhone": "555-555-5555"
+        }
+      },
+      {
+        "id": "4",
+        "title": "React Front-End Developer",
+        "type": "Part-Time",
+        "description": "Join our team as a Part-Time Front-End Developer in beautiful Pheonix, AZ. We are looking for a self-motivated individual with a passion for creating engaging user experiences. This position offers flexible hours and the opportunity to work remotely.",
+        "location": "Pheonix, AZ",
+        "salary": "$60K - $70K",
+        "company": {
+          "name": "Alpha Elite",
+          "description": "Alpha Elite is a dynamic startup specializing in digital marketing and web development. We are committed to fostering a diverse and inclusive workplace where creativity and innovation thrive.",
+          "contactEmail": "contact@adipisicingelit.com",
+          "contactPhone": "555-555-5555"
+        }
+      },
+      {
+        "id": "5",
+        "title": "Full Stack React Developer",
+        "type": "Full-Time",
+        "description": "Exciting opportunity for a Full-Time Front-End Developer in bustling Atlanta, GA. We are seeking a talented individual with a passion for building elegant and scalable web applications. Join our team and make an impact!",
+        "location": "Atlanta, GA",
+        "salary": "$90K - $100K",
+        "company": {
+          "name": "Browning Technologies",
+          "description": "Browning Technologies is a rapidly growing technology company specializing in e-commerce solutions. We offer a dynamic and collaborative work environment where employees are encouraged to think creatively and innovate.",
+          "contactEmail": "contact@consecteturadipisicing.com",
+          "contactPhone": "555-555-5555"
+        }
+      },
+      {
+        "id": "6",
+        "title": "React Native Developer",
+        "type": "Full-Time",
+        "description": "Join our team as a Front-End Developer in beautiful Portland, OR. We are looking for a skilled and enthusiastic individual to help us create innovative web solutions. Competitive salary and great benefits package available.",
+        "location": "Portland, OR",
+        "salary": "$100K - $110K",
+        "company": {
+          "name": "Port Solutions INC",
+          "description": "Port Solutions is a leading technology company specializing in software development and digital marketing. We are committed to providing our clients with cutting-edge solutions and our employees with a supportive and rewarding work environment.",
+          "contactEmail": "contact@ipsumlorem.com",
+          "contactPhone": "555-555-5555"
+        }
       }
-    },
-    {
-      "id": "2",
-      "title": "Front-End Engineer (React & Redux)",
-      "type": "Full-Time",
-      "location": "Miami, FL",
-      "description": "Join our team as a Front-End Developer in sunny Miami, FL. We are looking for a motivated individual with a passion for crafting beautiful and responsive web applications. Experience with UI/UX design principles and a strong attention to detail are highly desirable.",
-      "salary": "$70K - $80K",
-      "company": {
-        "name": "Veneer Solutions",
-        "description": "Veneer Solutions is a creative agency specializing in digital design and development. Our team is dedicated to pushing the boundaries of creativity and innovation to deliver exceptional results for our clients.",
-        "contactEmail": "contact@loremipsum.com",
-        "contactPhone": "555-555-5555"
-      }
-    },
-    {
-      "id": "3",
-      "title": "React.js Dev",
-      "type": "Full-Time",
-      "location": "Brooklyn, NY",
-      "description": "Are you passionate about front-end development? Join our team in vibrant Brooklyn, NY, and work on exciting projects that make a difference. We offer competitive compensation and a collaborative work environment where your ideas are valued.",
-      "salary": "$70K - $80K",
-      "company": {
-        "name": "Dolor Cloud",
-        "description": "Dolor Cloud is a leading technology company specializing in digital solutions for businesses of all sizes. With a focus on innovation and customer satisfaction, we are committed to delivering cutting-edge products and services.",
-        "contactEmail": "contact@dolorsitamet.com",
-        "contactPhone": "555-555-5555"
-      }
-    },
-    {
-      "id": "4",
-      "title": "React Front-End Developer",
-      "type": "Part-Time",
-      "description": "Join our team as a Part-Time Front-End Developer in beautiful Pheonix, AZ. We are looking for a self-motivated individual with a passion for creating engaging user experiences. This position offers flexible hours and the opportunity to work remotely.",
-      "location": "Pheonix, AZ",
-      "salary": "$60K - $70K",
-      "company": {
-        "name": "Alpha Elite",
-        "description": "Alpha Elite is a dynamic startup specializing in digital marketing and web development. We are committed to fostering a diverse and inclusive workplace where creativity and innovation thrive.",
-        "contactEmail": "contact@adipisicingelit.com",
-        "contactPhone": "555-555-5555"
-      }
-    },
-    {
-      "id": "5",
-      "title": "Full Stack React Developer",
-      "type": "Full-Time",
-      "description": "Exciting opportunity for a Full-Time Front-End Developer in bustling Atlanta, GA. We are seeking a talented individual with a passion for building elegant and scalable web applications. Join our team and make an impact!",
-      "location": "Atlanta, GA",
-      "salary": "$90K - $100K",
-      "company": {
-        "name": "Browning Technologies",
-        "description": "Browning Technologies is a rapidly growing technology company specializing in e-commerce solutions. We offer a dynamic and collaborative work environment where employees are encouraged to think creatively and innovate.",
-        "contactEmail": "contact@consecteturadipisicing.com",
-        "contactPhone": "555-555-5555"
-      }
-    },
-    {
-      "id": "6",
-      "title": "React Native Developer",
-      "type": "Full-Time",
-      "description": "Join our team as a Front-End Developer in beautiful Portland, OR. We are looking for a skilled and enthusiastic individual to help us create innovative web solutions. Competitive salary and great benefits package available.",
-      "location": "Portland, OR",
-      "salary": "$100K - $110K",
-      "company": {
-        "name": "Port Solutions INC",
-        "description": "Port Solutions is a leading technology company specializing in software development and digital marketing. We are committed to providing our clients with cutting-edge solutions and our employees with a supportive and rewarding work environment.",
-        "contactEmail": "contact@ipsumlorem.com",
-        "contactPhone": "555-555-5555"
-      }
-    }
-  ]
+    ]
+}
\ No newline at end of file
diff --git a/src/layouts/mainlayout.jsx b/src/layouts/mainlayout.jsx
index e1dd956..0200014 100644
--- a/src/layouts/mainlayout.jsx
+++ b/src/layouts/mainlayout.jsx
@@ -1,15 +1,15 @@
 import { Outlet, replace } from "react-router-dom";
-import navbar from "../components/navbar";
+import NavBar from "../components/navBar";
 
 import React from 'react'
 
-const mainlayout = () => {
+const MainLayout = () => {
   return (
     <>
-      <navbar />
+      <NavBar />
       <Outlet />
     </>
   );
 }
 
-export default mainlayout
+export default MainLayout
diff --git a/src/pages/homepage.jsx b/src/pages/homepage.jsx
index 881df5e..6784d20 100644
--- a/src/pages/homepage.jsx
+++ b/src/pages/homepage.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import hero from '../components/hero'; 
-import homecards from '../components/homecards';
-import joblistings from '../components/joblistings';
+import homecards from '../components/HomeCards';
+import joblistings from '../components/jobListings';
 import viewalljobs from '../components/viewalljobs';
 
 const homepage = () => {
diff --git a/src/pages/jobspage.jsx b/src/pages/jobspage.jsx
index 52f1edf..4de575a 100644
--- a/src/pages/jobspage.jsx
+++ b/src/pages/jobspage.jsx
@@ -1,11 +1,11 @@
 import React from 'react'
+import joblistings from '../components/jobListings'
 
-const jobspage = () => {
-  return (
-    <div>
-      
-    </div>
-  )
+const JobsPage = () => {
+  return 
+  <section className='bg-blue-50 px-4 py-6'>
+    <joblistings />
+  </section>
 }
 
-export default jobspage
+export default JobsPage
diff --git a/src/pages/notfoundpage.jsx b/src/pages/notfoundpage.jsx
index 0165725..927fb66 100644
--- a/src/pages/notfoundpage.jsx
+++ b/src/pages/notfoundpage.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 import {Link} from 'react-router-dom'; 
 import { FaExclamationTriangle } from 'react-icons/fa';
 
-const notfoundpage = () => {
+const NotFoundPage = () => {
   return (
     <section className="text-center flex flex-col justify-center items-center h-96">
     <FaExclamationTriangle className='text-yellow-400 text-6xl mb-4' />
@@ -17,4 +17,4 @@ const notfoundpage = () => {
   )
 }
 
-export default notfoundpage
+export default NotFoundPage
\ No newline at end of file