diff --git a/README.md b/README.md
index c83a30f..bed6197 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@
 
 <h2 align="center">ABI Deployment Thesis - Web Application</h2>
 
-Welcome to the abi-deployment-webapp repository! This project is a key part of a master's thesis at the University of Minho. It's a Proof of Concept for a proposed architecture designed to deploy and integrate intelligent models within ABI (Adaptive Business Intelligence) systems.
+Welcome to the abi-deployment-webapp repository! This project is a key part of a master's thesis at the University of Minho. It's a Proof of Concept for a proposed architecture designed to deploy and integrate intelligent models within Adaptive Business Intelligence (ABI) systems.
 
 **This repository provides a web application that serves as the user interface for interacting with the PoC.**
 
diff --git a/src/components/AddModelModal/AddModelModal.jsx b/src/components/AddModelModal/AddModelModal.jsx
index c3d13c2..dbfbd3a 100644
--- a/src/components/AddModelModal/AddModelModal.jsx
+++ b/src/components/AddModelModal/AddModelModal.jsx
@@ -9,11 +9,14 @@ function AddModelModal({ show, handleClose, refreshModels }) {
   const [type, setType] = useState('predictive');
   const [engine, setEngine] = useState('docker');
   const [language, setLanguage] = useState('Python3');
+  const [dockerTag, setDockerTag] = useState('3.9');
   const [serialization, setSerialization] = useState('joblib');
   const [features, setFeatures] = useState([{ name: '', type: 'int' }]);
   const [dependencies, setDependencies] = useState([{ library: '', version: '' }]);
+  const [memLimit, setMemLimit] = useState('256M');
+  const [cpuPercentage, setCpuPercentage] = useState(50);
   const [file, setFile] = useState(null);
-  const [error, setError] = useState(null);
+  const [formError, setFormError] = useState(null);
 
   const handleAddFeature = () => setFeatures([...features, { name: '', type: 'int' }]);
   const handleRemoveFeature = (index) => setFeatures(features.filter((_, i) => i !== index));
@@ -23,15 +26,26 @@ function AddModelModal({ show, handleClose, refreshModels }) {
 
   const handleFileChange = (e) => {
     const selectedFile = e.target.files[0];
-    const allowedExtensions = ['.py', '.sav', '.rds', '.zip'];
+    const allowedExtensions = ['.pkl', '.sav', '.rds', '.zip'];
     const fileExtension = selectedFile ? `.${selectedFile.name.split('.').pop()}` : '';
 
     if (allowedExtensions.includes(fileExtension)) {
       setFile(selectedFile);
-      setError(null);
+      setFormError(null);
     } else {
       setFile(null);
-      setError('Only .py, .sav, .rds, and .zip files are allowed.');
+      setFormError('Only .pkl, .sav, .rds, and .zip files are allowed.');
+    }
+  };
+
+  const handleLanguageChange = (e) => {
+    const selectedLanguage = e.target.value;
+    setLanguage(selectedLanguage);
+
+    if (selectedLanguage === 'R') {
+      setDockerTag('4.1.3');
+    } else if (selectedLanguage === 'Python3') {
+      setDockerTag('3.9');
     }
   };
 
@@ -45,6 +59,9 @@ function AddModelModal({ show, handleClose, refreshModels }) {
 
     if (engine === 'docker') {
       formData.append('language', language);
+      formData.append('docker_tag', dockerTag);
+      formData.append('mem_limit', memLimit);
+      formData.append('cpu_percentage', cpuPercentage);
     }
 
     if (type === 'predictive') {
@@ -65,7 +82,7 @@ function AddModelModal({ show, handleClose, refreshModels }) {
       handleClose();
     } catch (error) {
       const errorMessage = error.response?.data?.error;
-      setError(
+      setFormError(
         Array.isArray(errorMessage)
           ? errorMessage.map(err => err.msg).join(', ')
           : errorMessage || 'An unexpected error occurred.'
@@ -79,7 +96,6 @@ function AddModelModal({ show, handleClose, refreshModels }) {
         <Modal.Title>Add New Model</Modal.Title>
       </Modal.Header>
       <Modal.Body>
-        {error && <Alert variant="danger">{error}</Alert>}
         <Form onSubmit={handleSubmit}>
           <Form.Group className="mb-3">
             <Form.Label>Name</Form.Label>
@@ -98,18 +114,51 @@ function AddModelModal({ show, handleClose, refreshModels }) {
             <Form.Label>Engine</Form.Label>
             <Form.Select value={engine} onChange={(e) => setEngine(e.target.value)}>
               <option value="docker">Docker</option>
-              <option value="test">Test</option>
             </Form.Select>
           </Form.Group>
 
           {engine === 'docker' && (
-            <Form.Group className="mb-3">
-              <Form.Label>Language</Form.Label>
-              <Form.Select value={language} onChange={(e) => setLanguage(e.target.value)}>
-                <option value="Python3">Python3</option>
-                <option value="R">R</option>
-              </Form.Select>
-            </Form.Group>
+            <>
+              <Form.Group className="mb-3">
+                <Form.Label>Language</Form.Label>
+                <Form.Select value={language} onChange={(e) => handleLanguageChange(e)}>
+                  <option value="Python3">Python3</option>
+                  {type === 'predictive' && <option value="R">R</option>}
+                </Form.Select>
+              </Form.Group>
+
+              <Form.Group className="mb-3">
+                <Form.Label>Docker Tag</Form.Label>
+                <Form.Control
+                  type="text"
+                  value={dockerTag}
+                  onChange={(e) => setDockerTag(e.target.value)}
+                  required
+                />
+              </Form.Group>
+
+              <Form.Group className="mb-3">
+                <Form.Label>Memory Limit</Form.Label>
+                <Form.Control
+                  type="text"
+                  value={memLimit}
+                  onChange={(e) => setMemLimit(e.target.value)}
+                  placeholder="e.g., 256M"
+                  required
+                />
+              </Form.Group>
+
+              <Form.Group className="mb-3">
+                <Form.Label>CPU Percentage</Form.Label>
+                <Form.Control
+                  type="number"
+                  value={cpuPercentage}
+                  onChange={(e) => setCpuPercentage(e.target.value)}
+                  placeholder="e.g., 50"
+                  required
+                />
+              </Form.Group>
+            </>
           )}
 
           {type === 'predictive' && engine === 'docker' && language === 'Python3' && (
@@ -200,6 +249,8 @@ function AddModelModal({ show, handleClose, refreshModels }) {
             <Form.Control type="file" onChange={handleFileChange} required />
           </Form.Group>
 
+          {formError && <Alert variant="danger">{formError}</Alert>}
+
           <Button variant="primary" type="submit">Submit</Button>
         </Form>
       </Modal.Body>
diff --git a/src/components/ModelRunDetailsModal/ModelRunDetailsModal.css b/src/components/ModelRunDetailsModal/ModelRunDetailsModal.css
index 986744f..f9728a2 100644
--- a/src/components/ModelRunDetailsModal/ModelRunDetailsModal.css
+++ b/src/components/ModelRunDetailsModal/ModelRunDetailsModal.css
@@ -1,6 +1,33 @@
+/* src/components/ModelRunDetailsModal/ModelRunDetailsModal.css */
+
 .custom-modal-width {
   max-width: 80%;
   /* Adjust the percentage as needed */
   width: 800px;
   /* Or set a fixed width */
+}
+
+.state-queue {
+  color: gray;
+}
+
+.state-building {
+  color: #0d6efd;
+}
+
+.state-running {
+  color: orange;
+}
+
+.state-finished {
+  color: green;
+}
+
+.state-failed {
+  color: red;
+}
+
+.modal-body {
+  word-wrap: break-word;
+  /* Ensure long words break and wrap */
 }
\ No newline at end of file
diff --git a/src/components/ModelRunDetailsModal/ModelRunDetailsModal.jsx b/src/components/ModelRunDetailsModal/ModelRunDetailsModal.jsx
index 5961288..fbd6ee7 100644
--- a/src/components/ModelRunDetailsModal/ModelRunDetailsModal.jsx
+++ b/src/components/ModelRunDetailsModal/ModelRunDetailsModal.jsx
@@ -9,28 +9,31 @@ const ModelRunDetailsModal = ({ show, handleClose, runId }) => {
   const [runDetails, setRunDetails] = useState(null);
   const [modelType, setModelType] = useState('');
 
-  useEffect(() => {
-    const fetchRunDetails = async () => {
-      const token = localStorage.getItem('token');
-      try {
-        const { data: runData } = await axios.get(`${API_ENDPOINTS.MODEL_RUNS}/${runId}`, {
-          headers: { Authorization: `Bearer ${token}` },
-        });
+  const fetchRunDetails = async () => {
+    const token = localStorage.getItem('token');
+    try {
+      const { data: runData } = await axios.get(`${API_ENDPOINTS.MODEL_RUNS}/${runId}`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
 
-        const { data: modelData } = await axios.get(`${API_ENDPOINTS.MODEL}/${runData.model_id}`, {
-          headers: { Authorization: `Bearer ${token}` },
-        });
+      const { data: modelData } = await axios.get(`${API_ENDPOINTS.MODELS}/${runData.model_id}`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
 
-        setRunDetails(runData);
-        setModelType(modelData.type);
-      } catch (error) {
-        console.error('Error fetching run details:', error);
-        setRunDetails(null);
-      }
-    };
+      setRunDetails(runData);
+      setModelType(modelData.type);
+    } catch (error) {
+      console.error('Error fetching run details:', error);
+      setRunDetails(null);
+    }
+  };
 
+  useEffect(() => {
     if (show && runId) {
       fetchRunDetails();
+      const intervalId = setInterval(fetchRunDetails, 3000); // Update every 3 seconds
+
+      return () => clearInterval(intervalId); // Clean up interval on component unmount
     }
   }, [show, runId]);
 
@@ -47,6 +50,8 @@ const ModelRunDetailsModal = ({ show, handleClose, runId }) => {
     ));
   };
 
+  const stateClass = runDetails ? `state-${runDetails.state}` : '';
+
   return (
     <Modal show={show} onHide={handleClose} dialogClassName="custom-modal-width">
       <Modal.Header closeButton>
@@ -55,18 +60,34 @@ const ModelRunDetailsModal = ({ show, handleClose, runId }) => {
       <Modal.Body>
         {runDetails ? (
           <>
-            <h5>Model ID: {runDetails.model_id}</h5>
-            <h5>State: {runDetails.state}</h5>
-            <h5>Created At: {new Date(runDetails.createdAt).toLocaleString()}</h5>
-            <h5>Updated At: {new Date(runDetails.updatedAt).toLocaleString()}</h5>
-            <h5>Container ID: {runDetails.container_id}</h5>
-            <h5>Container Exit Code: {runDetails.container_exit_code}</h5>
-            <h5>Result:</h5>
-            <pre>{runDetails.result}</pre>
+            <strong>Model ID:</strong> {runDetails.model_id}<br />
+            <strong>State: <span className={stateClass}>{runDetails.state}</span></strong><br />
+            <strong>Created At:</strong> {new Date(runDetails.createdAt).toLocaleString()}<br />
+            <strong>Updated At:</strong> {new Date(runDetails.updatedAt).toLocaleString()}<br />
+            {runDetails.container_id !== undefined && runDetails.container_id !== null && runDetails.container_id !== '' && (
+              <>
+                <strong>Container ID:</strong> {runDetails.container_id}<br />
+              </>
+            )}
+
+            {(runDetails.state == 'failed' || runDetails.state == 'finished') && (
+              <>
+                <strong>Container Exit Code:</strong> {runDetails.container_exit_code}<br />
+              </>
+            )}
+            <br />
+
+            {(runDetails.state == 'failed' || runDetails.state == 'finished') && (
+              <>
+                <strong>Result:</strong>
+                <pre>{runDetails.result}</pre>
+              </>
+            )}
+
             {modelType !== 'optimization' && (
               <>
-                <h5>Input Features:</h5>
-                <Table bordered>
+                <strong>Input Features:</strong>
+                <Table>
                   <thead>
                     <tr>
                       <th>Name</th>
diff --git a/src/components/RunModelModal/RunModelModal.jsx b/src/components/RunModelModal/RunModelModal.jsx
index 36dbc53..0e57d25 100644
--- a/src/components/RunModelModal/RunModelModal.jsx
+++ b/src/components/RunModelModal/RunModelModal.jsx
@@ -1,6 +1,6 @@
 // src/components/RunModelModal/RunModelModal.jsx
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { Modal, Button, Form } from 'react-bootstrap';
+import React, { useState, useEffect, useCallback } from 'react';
+import { Modal, Button, Form, Alert } from 'react-bootstrap';
 import axios from 'axios';
 import { API_ENDPOINTS } from '../../config/config';
 
@@ -12,6 +12,7 @@ const RunModelModal = ({ show, handleClose, refreshModelRuns }) => {
   const [inputValues, setInputValues] = useState({});
   const [file, setFile] = useState(null);
   const [fileError, setFileError] = useState('');
+  const [formError, setFormError] = useState('');
 
   const token = localStorage.getItem('token');
 
@@ -22,7 +23,12 @@ const RunModelModal = ({ show, handleClose, refreshModelRuns }) => {
       });
       setModels(response.data);
     } catch (error) {
-      console.error('Error fetching models:', error);
+      const errorMessage = error.response?.data?.error;
+      setFormError(
+        Array.isArray(errorMessage)
+          ? errorMessage.map(err => err.msg).join(', ')
+          : errorMessage || 'Failed to load models. Please try again.'
+      );
     }
   }, [token]);
 
@@ -40,7 +46,12 @@ const RunModelModal = ({ show, handleClose, refreshModelRuns }) => {
         setFeatures(features);
         setModelType(type);
       } catch (error) {
-        console.error('Error fetching model details:', error);
+        const errorMessage = error.response?.data?.error;
+        setFormError(
+          Array.isArray(errorMessage)
+            ? errorMessage.map(err => err.msg).join(', ')
+            : errorMessage || 'Failed to load model details. Please try again.'
+        );
       }
     }
   }, [selectedModel, token]);
@@ -54,6 +65,7 @@ const RunModelModal = ({ show, handleClose, refreshModelRuns }) => {
     setInputValues({});
     setFile(null);
     setFileError('');
+    setFormError('');
   };
 
   const handleInputChange = (feature, event) => {
@@ -105,7 +117,7 @@ const RunModelModal = ({ show, handleClose, refreshModelRuns }) => {
         model_id: selectedModel,
         input_features: features.map(feature => ({
           name: feature.name,
-          value: inputValues[feature.name] == '0' ? 0 : (inputValues[feature.name] || '')
+          value: inputValues[feature.name] === '0' || inputValues[feature.name] === '0.0' ? 0 : (inputValues[feature.name] || '')
         }))
       };
       headers['Content-Type'] = 'application/json';
@@ -125,10 +137,25 @@ const RunModelModal = ({ show, handleClose, refreshModelRuns }) => {
       handleClose();
       refreshModelRuns();
     } catch (error) {
-      console.error('Error running model:', error);
+      const errorMessage = error.response?.data?.error;
+      setFormError(
+        Array.isArray(errorMessage)
+          ? errorMessage.map(err => err.msg).join(', ')
+          : errorMessage || 'Failed to run the model. Please try again.'
+      );
     }
   };
 
+  useEffect(() => {
+    if (show) {
+      const params = new URLSearchParams(window.location.search);
+      const modelId = params.get('model_id');
+      if (modelId && models.length > 0) {
+        setSelectedModel(modelId);
+      }
+    }
+  }, [show, models]);
+
   return (
     <Modal show={show} onHide={handleClose}>
       <Modal.Header closeButton>
@@ -146,6 +173,8 @@ const RunModelModal = ({ show, handleClose, refreshModelRuns }) => {
             </Form.Control>
           </Form.Group>
 
+          {selectedModel && <br />}
+
           {modelType === 'predictive' && features.map(feature => (
             <Form.Group controlId={`feature-${feature.name}`} key={feature._id}>
               <Form.Label>{feature.name}</Form.Label>
@@ -168,6 +197,10 @@ const RunModelModal = ({ show, handleClose, refreshModelRuns }) => {
             </Form.Group>
           )}
 
+          <br />
+
+          {formError && <Alert variant="danger">{formError}</Alert>}
+
           <Button variant="primary" type="submit">Run</Button>
         </Form>
       </Modal.Body>
diff --git a/src/index.css b/src/index.css
index 3e3b6a1..cf72ae7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,5 @@
+/* src/index.css */
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
diff --git a/src/pages/ModelManagement/ModelManagement.css b/src/pages/ModelManagement/ModelManagement.css
new file mode 100644
index 0000000..314b082
--- /dev/null
+++ b/src/pages/ModelManagement/ModelManagement.css
@@ -0,0 +1,28 @@
+/* src/pages/ModelManagement/ModelManagement.css */
+
+/* Arrow styling */
+th {
+    cursor: pointer;
+    position: relative;
+}
+
+th::after {
+    content: '';
+    display: inline-block;
+    width: 0;
+    height: 0;
+    margin-left: 5px;
+    vertical-align: middle;
+}
+
+th.sort-asc::after {
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 5px solid black;
+}
+
+th.sort-desc::after {
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid black;
+}
\ No newline at end of file
diff --git a/src/pages/ModelManagement/ModelManagement.jsx b/src/pages/ModelManagement/ModelManagement.jsx
index 757a26d..0f05df8 100644
--- a/src/pages/ModelManagement/ModelManagement.jsx
+++ b/src/pages/ModelManagement/ModelManagement.jsx
@@ -1,10 +1,11 @@
 // src/pages/ModelManagement/ModelManagement.jsx
 import React, { useEffect, useState } from 'react';
+import { Table, Button } from 'react-bootstrap';
 import axios from 'axios';
 import AddModelModal from '../../components/AddModelModal/AddModelModal';
-import { Button } from 'react-bootstrap';
 import { useNavigate } from 'react-router-dom';
 import { API_ENDPOINTS } from '../../config/config';
+import './ModelManagement.css';
 
 function ModelManagement() {
   const [models, setModels] = useState([]);
@@ -51,17 +52,38 @@ function ModelManagement() {
     navigate(`/model-runner?model_id=${modelId}`);
   };
 
+  const getSortArrow = (key) => {
+    if (sortConfig.key === key) {
+      return sortConfig.direction === 'asc' ? '↑' : '↓';
+    }
+    return '';
+  };
+
   return (
     <div className="container">
       <h1>Model Management</h1>
       <Button variant="primary" onClick={handleShowModal}>Add New Model</Button>
-      <table className="table mt-3">
+      <Table>
         <thead>
           <tr>
-            <th onClick={() => handleSort('name')}>Name</th>
-            <th onClick={() => handleSort('type')}>Type</th>
-            <th onClick={() => handleSort('engine')}>Engine</th>
-            <th onClick={() => handleSort('created_at')}>Created At</th>
+            <th onClick={() => handleSort('name')}>
+              Name {getSortArrow('name')}
+            </th>
+            <th onClick={() => handleSort('type')}>
+              Type {getSortArrow('type')}
+            </th>
+            <th onClick={() => handleSort('engine')}>
+              Engine {getSortArrow('engine')}
+            </th>
+            <th onClick={() => handleSort('language')}>
+              Language {getSortArrow('language')}
+            </th>
+            <th onClick={() => handleSort('serialization')}>
+              Serialization {getSortArrow('serialization')}
+            </th>
+            <th onClick={() => handleSort('created_at')}>
+              Created On {getSortArrow('created_at')}
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -70,11 +92,13 @@ function ModelManagement() {
               <td>{model.name}</td>
               <td>{model.type}</td>
               <td>{model.engine}</td>
+              <td>{model.language}</td>
+              <td>{model.serialization}</td>
               <td>{new Date(model.created_at).toLocaleString()}</td>
             </tr>
           ))}
         </tbody>
-      </table>
+      </Table>
       <AddModelModal show={showModal} handleClose={handleCloseModal} refreshModels={fetchModels} />
     </div>
   );
diff --git a/src/pages/ModelRunner/ModelRunner.css b/src/pages/ModelRunner/ModelRunner.css
index 143bc18..9258ae3 100644
--- a/src/pages/ModelRunner/ModelRunner.css
+++ b/src/pages/ModelRunner/ModelRunner.css
@@ -1,3 +1,5 @@
+/* src/components/ModelRunner/ModelRunner.css */
+
 .spinner {
     animation: spin 1s linear infinite;
 }
@@ -10,4 +12,30 @@
     100% {
         transform: rotate(360deg);
     }
+}
+
+/* Arrow styling */
+th {
+    cursor: pointer;
+}
+
+th::after {
+    content: '';
+    display: inline-block;
+    width: 0;
+    height: 0;
+    margin-left: 5px;
+    vertical-align: middle;
+}
+
+th.sort-asc::after {
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 5px solid black;
+}
+
+th.sort-desc::after {
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid black;
 }
\ No newline at end of file
diff --git a/src/pages/ModelRunner/ModelRunner.jsx b/src/pages/ModelRunner/ModelRunner.jsx
index 4d8f2f9..75595eb 100644
--- a/src/pages/ModelRunner/ModelRunner.jsx
+++ b/src/pages/ModelRunner/ModelRunner.jsx
@@ -1,8 +1,8 @@
 // src/components/ModelRunner/ModelRunner.jsx
 import React, { useEffect, useState } from 'react';
+import { Table, Button } from 'react-bootstrap';
 import axios from 'axios';
 import { FaCheckCircle, FaTimesCircle, FaSpinner } from 'react-icons/fa';
-import { Button } from 'react-bootstrap';
 import { useLocation } from 'react-router-dom';
 import './ModelRunner.css';
 import RunModelModal from '../../components/RunModelModal/RunModelModal';
@@ -14,6 +14,7 @@ function ModelRunner() {
   const [showModal, setShowModal] = useState(false);
   const [showDetailsModal, setShowDetailsModal] = useState(false);
   const [selectedRunId, setSelectedRunId] = useState(null);
+  const [selectedModelId, setSelectedModelId] = useState(null);
   const [sortConfig, setSortConfig] = useState({ key: 'updatedAt', direction: 'desc' });
   const location = useLocation();
 
@@ -26,7 +27,13 @@ function ModelRunner() {
           'Authorization': `Bearer ${token}`
         }
       });
-      setModelRuns(response.data);
+
+      const runsWithDuration = response.data.map(run => {
+        const durationMs = new Date(run.updatedAt) - new Date(run.createdAt);
+        return { ...run, durationMs };
+      });
+
+      setModelRuns(runsWithDuration);
     } catch (error) {
       console.error('Error fetching model runs:', error);
     }
@@ -35,13 +42,14 @@ function ModelRunner() {
   useEffect(() => {
     const queryParams = new URLSearchParams(location.search);
     const modelId = queryParams.get('model_id');
+    setSelectedModelId(modelId);
     fetchModelRuns(modelId);
 
     const intervalId = setInterval(() => {
       fetchModelRuns(modelId);
-    }, 5000);
+    }, 3000); // Update every 3 seconds
 
-    return () => clearInterval(intervalId); // Clear interval on component unmount
+    return () => clearInterval(intervalId); // Clean up interval on component unmount
   }, [location.search]);
 
   const getStateIcon = (state) => {
@@ -74,36 +82,83 @@ function ModelRunner() {
   };
 
   const sortedModelRuns = [...modelRuns].sort((a, b) => {
+    if (sortConfig.key === 'duration') {
+      // Sorting by duration in milliseconds
+      if (a.durationMs < b.durationMs) return sortConfig.direction === 'asc' ? -1 : 1;
+      if (a.durationMs > b.durationMs) return sortConfig.direction === 'asc' ? 1 : -1;
+      return 0;
+    }
+    // Default sorting by other keys
     if (a[sortConfig.key] < b[sortConfig.key]) return sortConfig.direction === 'asc' ? -1 : 1;
     if (a[sortConfig.key] > b[sortConfig.key]) return sortConfig.direction === 'asc' ? 1 : -1;
     return 0;
   });
 
+  const formatDuration = (start, end) => {
+    const durationMs = new Date(end) - new Date(start);
+
+    const days = Math.floor(durationMs / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((durationMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    const minutes = Math.floor((durationMs % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds = Math.floor((durationMs % (1000 * 60)) / 1000);
+
+    let durationStr = '';
+    if (days > 0) durationStr += `${days}d `;
+    if (hours > 0 || days > 0) durationStr += `${hours}h `;
+    if (minutes > 0 || hours > 0 || days > 0) durationStr += `${minutes}m `;
+    durationStr += `${seconds}s`;
+
+    return durationStr.trim();
+  };
+
+  const getSortArrow = (key) => {
+    if (sortConfig.key === key) {
+      return sortConfig.direction === 'asc' ? '↑' : '↓';
+    }
+    return '';
+  };
+
   return (
     <div className="container">
       <h1>Model Runner</h1>
       <Button variant="primary" onClick={handleShowModal}>Run</Button>
-      <table className="table mt-3">
+      <Table>
         <thead>
           <tr>
-            <th onClick={() => handleSort('model_name')}>Model Name</th>
-            <th onClick={() => handleSort('updatedAt')}>Updated At</th>
-            <th onClick={() => handleSort('duration')}>Duration (s)</th>
-            <th onClick={() => handleSort('state')}>State</th>
+            <th onClick={() => handleSort('model_name')}>
+              Model Name {getSortArrow('model_name')}
+            </th>
+            <th onClick={() => handleSort('model_type')}>
+              Type {getSortArrow('model_type')}
+            </th>
+            <th onClick={() => handleSort('model_engine')}>
+              Engine {getSortArrow('model_engine')}
+            </th>
+            <th onClick={() => handleSort('updatedAt')}>
+              Last Updated On {getSortArrow('updatedAt')}
+            </th>
+            <th onClick={() => handleSort('duration')}>
+              Duration {getSortArrow('duration')}
+            </th>
+            <th onClick={() => handleSort('state')}>
+              State {getSortArrow('state')}
+            </th>
           </tr>
         </thead>
         <tbody>
           {sortedModelRuns.map(run => (
             <tr key={run._id} onClick={() => handleRowClick(run._id)}>
               <td>{run.model_name}</td>
+              <td>{run.model_type}</td>
+              <td>{run.model_engine}</td>
               <td>{new Date(run.updatedAt).toLocaleString()}</td>
-              <td>{Math.round((new Date(run.updatedAt) - new Date(run.createdAt)) / 1000)}</td>
+              <td>{formatDuration(run.createdAt, run.updatedAt)}</td>
               <td>{getStateIcon(run.state)}</td>
             </tr>
           ))}
         </tbody>
-      </table>
-      <RunModelModal show={showModal} handleClose={handleCloseModal} refreshModelRuns={() => fetchModelRuns()} />
+      </Table>
+      <RunModelModal show={showModal} handleClose={handleCloseModal} refreshModelRuns={() => fetchModelRuns(selectedModelId)} />
       <ModelRunDetailsModal show={showDetailsModal} handleClose={handleCloseDetailsModal} runId={selectedRunId} />
     </div>
   );
diff --git a/src/pages/SignIn/SignIn.css b/src/pages/SignIn/SignIn.css
new file mode 100644
index 0000000..70f345b
--- /dev/null
+++ b/src/pages/SignIn/SignIn.css
@@ -0,0 +1,37 @@
+/* src/components/SignIn/SignIn.css */
+
+.sign-in-container {
+    max-width: 400px;
+    /* Adjust the max-width as needed */
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.sign-in-form {
+    display: flex;
+    flex-direction: column;
+}
+
+.mb-2 {
+    margin-bottom: 1rem;
+    /* Reduced margin for compact spacing */
+}
+
+.form-label {
+    margin-bottom: 0.5rem;
+    /* Reduced margin for compact spacing */
+}
+
+.form-control-sm {
+    font-size: 0.875rem;
+    /* Smaller font size for compact input */
+    padding: 0.375rem 0.75rem;
+    /* Adjust padding for smaller input */
+}
+
+.btn-sm {
+    padding: 0.25rem 0.5rem;
+    /* Smaller padding for compact button */
+    font-size: 0.875rem;
+    /* Smaller font size for button */
+}
\ No newline at end of file
diff --git a/src/pages/SignIn/SignIn.jsx b/src/pages/SignIn/SignIn.jsx
index 7baba54..e5c6597 100644
--- a/src/pages/SignIn/SignIn.jsx
+++ b/src/pages/SignIn/SignIn.jsx
@@ -1,13 +1,12 @@
 // src/components/SignIn/SignIn.jsx
 import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
 import { API_ENDPOINTS } from '../../config/config';
+import './SignIn.css';
 
 function SignIn() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const navigate = useNavigate();
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -28,13 +27,13 @@ function SignIn() {
   };
 
   return (
-    <div className="container mt-5">
-      <form onSubmit={handleSubmit}>
+    <div className="sign-in-container">
+      <form onSubmit={handleSubmit} className="sign-in-form">
         <div className="mb-3">
           <label htmlFor="email" className="form-label">Email</label>
           <input
             type="email"
-            className="form-control"
+            className="form-control form-control-sm"
             id="email"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
@@ -45,7 +44,7 @@ function SignIn() {
           <label htmlFor="password" className="form-label">Password</label>
           <input
             type="password"
-            className="form-control"
+            className="form-control form-control-sm"
             id="password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}