diff --git a/src/components/JobCard/JobCard.tsx b/src/components/JobCard/JobCard.tsx
index e168153..7076720 100644
--- a/src/components/JobCard/JobCard.tsx
+++ b/src/components/JobCard/JobCard.tsx
@@ -7,7 +7,6 @@ import AccessTimeIcon from '@mui/icons-material/AccessTime'
 import JobData from '@/types/JobListing'
 
 
-
 interface JobCardProps {
     job: JobData
 }
@@ -17,7 +16,7 @@ const JobCard: FC<JobCardProps> = ({ job }) => {
         window.open(job.jobPostingUrl, '_blank', 'noopener,noreferrer')
     }
 
-    return <Card sx={{ bgcolor: ' theme.palette.primary.light', width: '100%' }}>
+    return <Card sx={{ bgcolor: 'primary.dark', width: '100%' }}>
         <CardContent>
             <Grid container spacing={1} alignItems="center">
                 <Grid item xs={12} sm={12} md={2} display="flex" justifyContent="center">
@@ -47,7 +46,7 @@ const JobCard: FC<JobCardProps> = ({ job }) => {
                     </Grid>
                     <Stack direction='row' spacing={1} mt={2} justifyContent="flex-start">
                         {job.tags.map((tag, index) => (
-                            <Chip key={index} label={tag} sx={{ bgcolor: '#6A1B9A', height: 32, borderRadius: '8px' }} />
+                            <Chip key={index} label={tag} sx={{ bgcolor: 'secondary.dark', height: 32, borderRadius: '8px' }} />
                         ))}
                     </Stack>
                 </Grid>
@@ -61,6 +60,7 @@ const JobCard: FC<JobCardProps> = ({ job }) => {
                     <Grid item>
                         <Button
                             variant="contained"
+                            color='tertiary'
                             onClick={handleReadMoreClick}
                             sx={{
                                 mt: 1,
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index a4fce30..d35a2c6 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -1,14 +1,14 @@
 import createTheme from '@mui/material/styles/createTheme'
 import typography from './typography/default'
-import { teal, lightBlue, deepPurple, purple, grey } from '@mui/material/colors'
+import { lightBlue, deepPurple, purple, grey, indigo } from '@mui/material/colors'
 
 const theme = createTheme({
     palette: {
         mode: 'dark',
         primary: {
-            light: purple[200],
+            light: purple[700],
             main: purple[800],
-            dark: purple[700],
+            dark: purple[900],
             contrastText: '#FFF'
         },
         secondary: {
@@ -18,9 +18,9 @@ const theme = createTheme({
             contrastText: '#000',
         },
         tertiary: {
-            light: teal[400],
-            main: teal[800],
-            dark: teal[900],
+            light: indigo[500],
+            main: indigo[800],
+            dark: indigo[900],
             contrastText: '#fff',
         },
         action: {
@@ -35,7 +35,6 @@ const theme = createTheme({
             paper: deepPurple[900]
         },
         divider: lightBlue[300]
-      
     },
     typography
 })