diff --git a/src/renderer/components/Settings/TransformerLabSettings.tsx b/src/renderer/components/Settings/TransformerLabSettings.tsx
index 6ff87a00b5c5c2b90b13a840a3f060e674bda76c..7d281b3c074fccad5ef77882ba585c83fe842e04 100644
--- a/src/renderer/components/Settings/TransformerLabSettings.tsx
+++ b/src/renderer/components/Settings/TransformerLabSettings.tsx
@@ -102,24 +102,16 @@ export default function TransformerLabSettings() {
           defaultValue={0}
           sx={{
             height: '100%',
-            overflowY: 'hidden',
             display: 'flex',
             flexDirection: 'column',
+            overflow: 'hidden',
           }}
         >
           <TabList>
             <Tab>Settings</Tab>
             <Tab>View Jobs</Tab>
           </TabList>
-          <TabPanel
-            value={0}
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              overflowY: 'auto',
-              alignItems: 'flex-start',
-            }}
-          >
+          <TabPanel value={0} style={{ overflow: 'auto' }}>
             {canLogInToHuggingFaceIsLoading && <CircularProgress />}
             <Typography level="title-lg" marginBottom={2}>
               Huggingface Credentials:
@@ -240,7 +232,15 @@ export default function TransformerLabSettings() {
               Reset all Tutorial Popup Screens
             </Button>
           </TabPanel>
-          <TabPanel value={1}>
+          <TabPanel
+            value={1}
+            sx={{
+              overflowY: 'hidden',
+              overflowX: 'hidden',
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
             <ViewJobsTab />
           </TabPanel>
         </Tabs>
diff --git a/src/renderer/components/Settings/ViewJobsTab.tsx b/src/renderer/components/Settings/ViewJobsTab.tsx
index 711aa84050e7660255fd06414e691d9916d95068..056cc99ad191c0f1efaa10d7de6e0f98d6f88b42 100644
--- a/src/renderer/components/Settings/ViewJobsTab.tsx
+++ b/src/renderer/components/Settings/ViewJobsTab.tsx
@@ -1,75 +1,110 @@
 import * as React from 'react';
-import { Typography, IconButton, Select, Option, Table } from '@mui/joy';
+import {
+  Typography,
+  IconButton,
+  Select,
+  Option,
+  Table,
+  Box,
+  Stack,
+} from '@mui/joy';
 import { RotateCcwIcon } from 'lucide-react';
 import useSWR from 'swr';
 import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';
 
 const fetcher = (url) => fetch(url).then((res) => res.json());
 
+const jobTypes = [
+  { value: 'NONE', label: 'None' },
+  { value: '', label: 'All' },
+  { value: 'DOWNLOAD_MODEL', label: 'Download Model' },
+  { value: 'LOAD_MODEL', label: 'Load Model' },
+  { value: 'TRAIN', label: 'Train' },
+  { value: 'GENERATE', label: 'Generate' },
+  { value: 'EVAL', label: 'Evaluate' },
+];
+
 export default function ViewJobsTab() {
-  const [showJobsOfType, setShowJobsOfType] = React.useState('NONE');
+  const [type, setType] = React.useState('');
 
   const {
     data: jobs,
     error: jobsError,
     isLoading: jobsIsLoading,
     mutate: jobsMutate,
-  } = useSWR(chatAPI.Endpoints.Jobs.GetJobsOfType(showJobsOfType, ''), fetcher);
+  } = useSWR(chatAPI.Endpoints.Jobs.GetJobsOfType(type, ''), fetcher);
 
   return (
     <>
-      <Typography level="title-lg" marginBottom={2}>
-        View Jobs (debug):{' '}
+      <Stack flexDirection="row" alignItems="center" marginBottom={2}>
+        <Typography level="title-lg">View Jobs: &nbsp;</Typography>
+        <Select
+          sx={{ width: '200px' }}
+          value={type}
+          onChange={(e, newValue) => {
+            setType(newValue);
+          }}
+        >
+          {jobTypes.map((jobType) => (
+            <Option key={jobType.value} value={jobType.value}>
+              {jobType.label}
+            </Option>
+          ))}
+        </Select>
         <IconButton onClick={() => jobsMutate()}>
           <RotateCcwIcon size="14px" />
         </IconButton>
-      </Typography>
-      <Select
-        sx={{ width: '400px' }}
-        value={showJobsOfType}
-        onChange={(e, newValue) => {
-          setShowJobsOfType(newValue);
-        }}
+      </Stack>
+      <Box
+        style={{ display: 'flex', flexDirection: 'column', overflow: 'auto' }}
       >
-        <Option value="NONE">None</Option>
-        <Option value="">All</Option>
-        <Option value="DOWNLOAD_MODEL">Download Model</Option>
-        <Option value="LOAD_MODEL">Load Model</Option>
-        <Option value="TRAIN">Train</Option>
-        <Option value="GENERATE">Generate</Option>
-        <Option value="EVAL">Evaluate</Option>
-      </Select>
-      {showJobsOfType !== 'NONE' && (
-        <Table
-          stickyHeader
-          sx={{ width: '100%', tableLayout: 'auto', overflow: 'scroll' }}
-        >
-          <thead>
-            <tr>
-              <th>Job ID</th>
-              <th>Job Type</th>
-              <th>Job Status</th>
-              <th>Job Progress</th>
-              <th width="400px" style={{ overflow: 'hidden' }}>
-                Job Data
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {jobs?.map((job) => (
-              <tr key={job.id}>
-                <td>{job.id}</td>
-                <td>{job.type}</td>
-                <td>{job.status}</td>
-                <td>{job.progress}</td>
-                <td width="400px">
-                  <pre>{JSON.stringify(job.job_data, null, 2)}</pre>
-                </td>
+        {type !== 'NONE' && (
+          <Table
+            stickyHeader
+            sx={{ width: '100%', tableLayout: 'auto', overflow: 'scroll' }}
+          >
+            <thead>
+              <tr>
+                <th>Job ID</th>
+                <th>Job Type</th>
+                <th>Job Status</th>
+                <th>Job Progress</th>
+                <th style={{ overflow: 'hidden' }}>Job Data</th>
               </tr>
-            ))}
-          </tbody>
-        </Table>
-      )}
+            </thead>
+            <tbody>
+              {jobs?.map((job) => (
+                <tr key={job.id}>
+                  <td>{job.id}</td>
+                  <td>{job.type}</td>
+                  <td>{job.status}</td>
+                  <td>{job.progress}</td>
+                  <td>
+                    <pre
+                      style={{
+                        maxHeight: '100px',
+                        width: '500px',
+                        overflowY: 'auto',
+                        overflowX: 'hidden',
+                        scrollbarWidth: 'thin', // For Firefox
+                        msOverflowStyle: 'none', // For Internet Explorer and Edge
+                      }}
+                    >
+                      {JSON.stringify(job.job_data, null, 2)}
+                    </pre>
+                    <style>
+                      {`
+                      pre::-webkit-scrollbar {
+                        width: 4px; /* For Chrome, Safari, and Opera */
+                      }`}
+                    </style>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        )}
+      </Box>
     </>
   );
 }