diff --git a/apps/career/src/components/joblist/JobCard.tsx b/apps/career/src/components/joblist/JobCard.tsx
index da025b7c..6cf5dbff 100644
--- a/apps/career/src/components/joblist/JobCard.tsx
+++ b/apps/career/src/components/joblist/JobCard.tsx
@@ -26,7 +26,7 @@ const JobCard: React.FC<JobCardProps> = ({
       <div className="p-4">
         <div className="grid h-auto w-full grid-cols-12 items-center gap-x-11 sm:h-36 sm:gap-24">
           {/* Logo Section */}
-          <div className="col-span-12 lg:col-span-2">
+          <div className="col-span-12 sm:col-span-2">
             <div className="mb-md-0 mb-4 text-center">
               <img
                 src={company_logo}
@@ -38,7 +38,7 @@ const JobCard: React.FC<JobCardProps> = ({
             </div>
           </div>
           {/* Title Section */}
-          <div className="col-span-12 lg:col-span-3">
+          <div className="col-span-12 sm:col-span-3">
             <div className="mb-md-0 mb-2">
               <h2
                 className={`truncate text-2xl font-bold text-light-text1 dark:text-dark-text1`}
@@ -56,8 +56,8 @@ const JobCard: React.FC<JobCardProps> = ({
             </div>
           </div>
           {/* Location Section */}
-          <div className="col-span-12 lg:col-span-3">
-            <div className="mb-2 lg:flex">
+          <div className="col-span-12 sm:col-span-3">
+            <div className="mb-2 sm:flex">
               {/* You can add an icon for location next to the text */}
               <p className="mb-0 truncate text-light-text1 dark:text-dark-text1">
                 {location}
@@ -65,12 +65,12 @@ const JobCard: React.FC<JobCardProps> = ({
             </div>
           </div>
           {/* Date Posted Section */}
-          <div className="col-span-12 lg:col-span-2">
+          <div className="col-span-12 sm:col-span-2">
             <div className="mb-0">
               <h2 className="text-2xl font-bold">{formattedTime}</h2>
             </div>
           </div>
-          <div className="col-span-12 lg:col-span-2">
+          <div className="col-span-12 sm:col-span-2">
             <div className="flex flex-wrap gap-1.5">
               <span className=" rounded bg-green-500/20 px-2 py-0.5 font-medium capitalize text-green-500">
                 {type}
diff --git a/apps/career/src/components/joblist/JobCardFooter.tsx b/apps/career/src/components/joblist/JobCardFooter.tsx
index bd88c487..32354e89 100644
--- a/apps/career/src/components/joblist/JobCardFooter.tsx
+++ b/apps/career/src/components/joblist/JobCardFooter.tsx
@@ -12,13 +12,13 @@ const JobCardFooter: React.FC<JobFooterProps> = ({ jobID, isRegistered }) => {
     <div className="bg-gray-100 px-4 py-4 dark:bg-neutral-700">
       {isRegistered ? (
         <Link to={`/${jobID}`}>
-          <div className="col-span-12 text-right text-light-text1 dark:text-dark-text1 lg:col-span-6 lg:mt-0">
+          <div className="col-span-12 text-right text-light-text1 dark:text-dark-text1 sm:col-span-6 sm:mt-0">
             <span>Apply</span>
             <KeyboardDoubleArrowRightIcon />
           </div>
         </Link>
       ) : (
-        <div className="col-span-12 cursor-not-allowed text-right text-light-text1 dark:text-dark-text1 lg:col-span-6 lg:mt-0">
+        <div className="col-span-12 cursor-not-allowed text-right text-light-text1 dark:text-dark-text1 sm:col-span-6 sm:mt-0">
           <span>Apply</span>
           <KeyboardDoubleArrowRightIcon />
         </div>
diff --git a/apps/career/src/components/joblist/Joblist.tsx b/apps/career/src/components/joblist/Joblist.tsx
index 848744ba..fd5db2c9 100644
--- a/apps/career/src/components/joblist/Joblist.tsx
+++ b/apps/career/src/components/joblist/Joblist.tsx
@@ -39,8 +39,8 @@ const Joblist: React.FC<CareerComponentProps> = ({
   return (
     <>
       {isLoggedIn ? (
-        <div className="grid grid-cols-12 gap-y-6 lg:gap-10 lg:gap-y-0">
-          <div className="col-span-12 lg:col-span-9">
+        <div className="grid grid-cols-12 gap-y-6 sm:gap-10 sm:gap-y-0">
+          <div className="col-span-12 sm:col-span-9">
             <div className={`mt-14 pt-6`}>
               {jobData.map((job, index) => (
                 <JobCard
@@ -58,7 +58,7 @@ const Joblist: React.FC<CareerComponentProps> = ({
               ))}
             </div>
           </div>
-          <div className="col-span-12 lg:col-span-3">
+          <div className="col-span-12 sm:col-span-3">
             <div className="mt-14 pt-6">
               {isRegistered ? (
                 <PostRegisterProfile
diff --git a/apps/career/src/root.component.tsx b/apps/career/src/root.component.tsx
index 57b50391..59cf2f0e 100644
--- a/apps/career/src/root.component.tsx
+++ b/apps/career/src/root.component.tsx
@@ -12,7 +12,7 @@ import "@app/styles/main.css"
 import "@app/styles/common.css"
 
 configAuth()
-
+type Props = {}
 const apiConfig = {
   API: {
     endpoints: [
@@ -27,7 +27,7 @@ API.configure(apiConfig)
 
 ReactGA.initialize(import.meta.env.VITE_GA_ID, {})
 
-export default function Root(props) {
+export default function Root(props: Props) {
   return (
     <section className="h-screen">
       <RecoilRoot>
diff --git a/apps/career/tsconfig.json b/apps/career/tsconfig.json
index c1d07bf3..29fca6a3 100644
--- a/apps/career/tsconfig.json
+++ b/apps/career/tsconfig.json
@@ -12,6 +12,7 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
+    "types": ["vite/client"],
     "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
diff --git a/apps/career/vite.config.ts b/apps/career/vite.config.ts
index 6e83ce50..a04a5cc7 100644
--- a/apps/career/vite.config.ts
+++ b/apps/career/vite.config.ts
@@ -1,31 +1,42 @@
 import react from "@vitejs/plugin-react"
+import { defineConfig, loadEnv } from "vite"
 import dynamicImport from "vite-plugin-dynamic-import"
 const path = require("path")
 
-export default {
-  root: "./src",
-  rollupOptions: {
-    input: "wasedatime-career.ts",
-    preserveEntrySignatures: true,
-  },
-  build: {
-    outDir: "../dist",
-    emptyOutDir: true,
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd() + "/src")
+
+  return {
+    root: "./src",
+    publicDir: "assets",
+    base: (env.VITE_PUBLIC_BASE_PATH || "http://localhost:8082") + "/",
     rollupOptions: {
-      input: "./src/wasedatime-career.ts",
+      input: "wasedatime-career.ts",
       preserveEntrySignatures: true,
-      output: {
-        entryFileNames: "wasedatime-career.js",
+    },
+    build: {
+      outDir: "../dist",
+      emptyOutDir: true,
+      cssCodeSplit: false,
+      manifest: true,
+      rollupOptions: {
+        input: "./src/wasedatime-career.ts",
+        preserveEntrySignatures: true,
+        output: {
+          entryFileNames: "[name].js",
+          assetFileNames: "assets/[name].[ext]",
+        },
       },
     },
-  },
-  resolve: {
-    fullySpecified: false,
-    alias: {
-      "@app": path.resolve(__dirname, "src/"),
+    resolve: {
+      fullySpecified: false,
+      alias: {
+        "@app": path.resolve(__dirname, "src/"),
+      },
+      modules: ["node_modules"],
     },
-    modules: ["node_modules"],
-  },
-  plugins: [react(), dynamicImport()],
-  envPrefix: ["VITE_", "REACT_APP_"],
-}
+    plugins: [react(), dynamicImport()],
+    assetsInclude: ["**/*.png", "**/*.jpg", "**/*.svg"],
+    envPrefix: ["VITE_", "REACT_APP_"],
+  }
+})