diff --git a/src/components/Auth/AuthContext.js b/src/components/Auth/AuthContext.js
index 1de623f..08a1dff 100644
--- a/src/components/Auth/AuthContext.js
+++ b/src/components/Auth/AuthContext.js
@@ -5,6 +5,7 @@ import { message, Modal, notification, Progress, Button, Space } from 'antd'
 import PropTypes from 'prop-types'
 import { ExclamationCircleOutlined } from '@ant-design/icons'
 import InfoCircleIcon from '../Icons/InfoCircleIcon'
+import config from '../../config'
 
 const AuthContext = createContext()
 
@@ -25,14 +26,14 @@ const AuthProvider = ({ children }) => {
     setToken(null)
     setExpiresAt(null)
     setUserProfile(null)
-    window.location.href = `http://localhost:8080/auth/logout?redirect_uri=${encodeURIComponent(redirectUri)}`
+    window.location.href = `${config.backendUrl}/auth/logout?redirect_uri=${encodeURIComponent(redirectUri)}`
   }, [])
 
   // Login using query parameters
   const loginWithSSO = useCallback(
     (redirectUri = window.location.pathname + window.location.search) => {
       messageApi.info('Logging in with tombutcher.work')
-      window.location.href = `http://localhost:8080/auth/login?redirect_uri=${encodeURIComponent(redirectUri)}`
+      window.location.href = `${config.backendUrl}/auth/login?redirect_uri=${encodeURIComponent(redirectUri)}`
     },
     [messageApi]
   )
@@ -41,7 +42,7 @@ const AuthProvider = ({ children }) => {
     setLoading(true)
     try {
       // Make a call to your backend to check auth status
-      const response = await axios.get('http://localhost:8080/auth/user', {
+      const response = await axios.get(`${config.backendUrl}/auth/user`, {
         withCredentials: true // Important for including cookies
       })
 
@@ -67,7 +68,7 @@ const AuthProvider = ({ children }) => {
 
   const refreshToken = useCallback(async () => {
     try {
-      const response = await axios.get('http://localhost:8080/auth/refresh', {
+      const response = await axios.get(`${config.backendUrl}/auth/refresh`, {
         withCredentials: true
       })
       if (response.status === 200 && response.data) {
diff --git a/src/components/Dashboard/Inventory/FilamentStocks.jsx b/src/components/Dashboard/Inventory/FilamentStocks.jsx
index b464a19..459f2ae 100644
--- a/src/components/Dashboard/Inventory/FilamentStocks.jsx
+++ b/src/components/Dashboard/Inventory/FilamentStocks.jsx
@@ -28,6 +28,8 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import FilamentStockState from '../common/FilamentStockState'
 import TimeDisplay from '../common/TimeDisplay'
 
+import config from '../../../config'
+
 const { Text } = Typography
 
 const useStyle = createStyles(({ css, token }) => {
@@ -65,7 +67,7 @@ const FilamentStocks = () => {
 
   const fetchFilamentStocksData = useCallback(async () => {
     try {
-      const response = await axios.get('http://localhost:8080/filamentstocks', {
+      const response = await axios.get(`${config.backendUrl}/filamentstocks`, {
         headers: {
           Accept: 'application/json'
         },
diff --git a/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx b/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
index ff040f1..869e2c1 100644
--- a/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
+++ b/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
@@ -22,6 +22,8 @@ import TimeDisplay from '../../common/TimeDisplay'
 import FilamentIcon from '../../../Icons/FilamentIcon'
 import ReloadIcon from '../../../Icons/ReloadIcon'
 
+import config from '../../../../config'
+
 const { Title } = Typography
 
 const FilamentStockInfo = () => {
@@ -87,7 +89,7 @@ const FilamentStockInfo = () => {
     try {
       setFetchLoading(true)
       const response = await axios.get(
-        `http://localhost:8080/filamentStocks/${filamentStockId}`,
+        `${config.backendUrl}/filamentStocks/${filamentStockId}`,
         {
           headers: {
             Accept: 'application/json'
diff --git a/src/components/Dashboard/Inventory/FilamentStocks/NewFilamentStock.jsx b/src/components/Dashboard/Inventory/FilamentStocks/NewFilamentStock.jsx
index f61db24..324c44c 100644
--- a/src/components/Dashboard/Inventory/FilamentStocks/NewFilamentStock.jsx
+++ b/src/components/Dashboard/Inventory/FilamentStocks/NewFilamentStock.jsx
@@ -15,6 +15,8 @@ import {
 } from 'antd'
 import FilamentSelect from '../../common/FilamentSelect'
 
+import config from '../../../../config'
+
 const { Title } = Typography
 
 const initialNewFilamentStockForm = {
@@ -89,7 +91,7 @@ const NewFilamentStock = ({ onOk, reset }) => {
     setNewFilamentStockLoading(true)
     try {
       await axios.post(
-        `http://localhost:8080/filamentstocks`,
+        `${config.backendUrl}/filamentstocks`,
         newFilamentStockFormValues,
         {
           withCredentials: true // Important for including cookies
diff --git a/src/components/Dashboard/Inventory/StockAudits.jsx b/src/components/Dashboard/Inventory/StockAudits.jsx
index 04f8d3b..3157aee 100644
--- a/src/components/Dashboard/Inventory/StockAudits.jsx
+++ b/src/components/Dashboard/Inventory/StockAudits.jsx
@@ -16,6 +16,8 @@ import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import TimeDisplay from '../common/TimeDisplay'
 
+import config from '../../../config'
+
 const { Text } = Typography
 
 const useStyle = createStyles(({ css, token }) => {
@@ -50,7 +52,7 @@ const StockAudits = () => {
 
   const fetchStockAuditsData = useCallback(async () => {
     try {
-      const response = await axios.get('http://localhost:8080/stockaudits', {
+      const response = await axios.get(`${config.backendUrl}/stockaudits`, {
         headers: {
           Accept: 'application/json'
         },
diff --git a/src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx b/src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx
index b671e6f..c214c77 100644
--- a/src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx
+++ b/src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx
@@ -23,6 +23,8 @@ import { AuthContext } from '../../../Auth/AuthContext'
 import IdText from '../../common/IdText'
 import TimeDisplay from '../../common/TimeDisplay'
 
+import config from '../../../../config'
+
 const { Text, Title } = Typography
 
 const StockAuditInfo = () => {
@@ -46,7 +48,7 @@ const StockAuditInfo = () => {
 
       try {
         const response = await axios.get(
-          `http://localhost:8080/stockaudits/${stockAuditId}`,
+          `${config.backendUrl}/stockaudits/${stockAuditId}`,
           {
             headers: {
               Accept: 'application/json'
diff --git a/src/components/Dashboard/Management/Filaments.jsx b/src/components/Dashboard/Management/Filaments.jsx
index 9efe5d6..ada2ba9 100644
--- a/src/components/Dashboard/Management/Filaments.jsx
+++ b/src/components/Dashboard/Management/Filaments.jsx
@@ -33,6 +33,8 @@ import CheckIcon from '../../Icons/CheckIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import TimeDisplay from '../common/TimeDisplay'
 
+import config from '../../../config'
+
 const { Text } = Typography
 
 const useStyle = createStyles(({ css, token }) => {
@@ -73,7 +75,7 @@ const Filaments = () => {
   const fetchFilamentsData = useCallback(
     async (pageNum = 1, append = false) => {
       try {
-        const response = await axios.get('http://localhost:8080/filaments', {
+        const response = await axios.get(`${config.backendUrl}/filaments`, {
           params: {
             page: pageNum,
             limit: 25,
diff --git a/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx b/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
index 08953cf..7910c72 100644
--- a/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
+++ b/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
@@ -32,6 +32,8 @@ import TimeDisplay from '../../common/TimeDisplay.jsx'
 import VendorSelect from '../../common/VendorSelect'
 import useCollapseState from '../../hooks/useCollapseState'
 
+import config from '../../../../config.js'
+
 const { Title, Link } = Typography
 
 const FilamentInfo = () => {
@@ -81,7 +83,7 @@ const FilamentInfo = () => {
     try {
       setFetchLoading(true)
       const response = await axios.get(
-        `http://localhost:8080/filaments/${filamentId}`,
+        `${config.backendUrl}/filaments/${filamentId}`,
         {
           headers: {
             Accept: 'application/json'
@@ -129,7 +131,7 @@ const FilamentInfo = () => {
       setLoading(true)
 
       await axios.put(
-        `http://localhost:8080/filaments/${filamentId}`,
+        `${config.backendUrl}/filaments/${filamentId}`,
         {
           name: values.name,
           vendor: values.vendor,
@@ -170,7 +172,7 @@ const FilamentInfo = () => {
   const handleDelete = async () => {
     try {
       setLoading(true)
-      await axios.delete(`http://localhost:8080/filaments/${filamentId}`, {
+      await axios.delete(`${config.backendUrl}/filaments/${filamentId}`, {
         withCredentials: true
       })
       messageApi.success('Filament deleted successfully')
diff --git a/src/components/Dashboard/Management/Filaments/NewFilament.jsx b/src/components/Dashboard/Management/Filaments/NewFilament.jsx
index 63f3e3b..f9fcad7 100644
--- a/src/components/Dashboard/Management/Filaments/NewFilament.jsx
+++ b/src/components/Dashboard/Management/Filaments/NewFilament.jsx
@@ -20,6 +20,8 @@ import {
 import { UploadOutlined, LinkOutlined } from '@ant-design/icons'
 import VendorSelect from '../../common/VendorSelect'
 
+import config from '../../../../config'
+
 const { Title } = Typography
 
 const initialNewFilamentForm = {
@@ -129,7 +131,7 @@ const NewFilament = ({ onOk, reset }) => {
     setNewFilamentLoading(true)
     try {
       await axios.post(
-        `http://localhost:8080/filaments`,
+        `${config.backendUrl}/filaments`,
         newFilamentFormValues,
         {
           withCredentials: true // Important for including cookies
diff --git a/src/components/Dashboard/Management/Materials.jsx b/src/components/Dashboard/Management/Materials.jsx
index 14d5f0b..b46ab4d 100644
--- a/src/components/Dashboard/Management/Materials.jsx
+++ b/src/components/Dashboard/Management/Materials.jsx
@@ -26,6 +26,8 @@ import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import TimeDisplay from '../common/TimeDisplay'
 
+import config from '../../../config'
+
 const useStyle = createStyles(({ css, token }) => {
   const { antCls } = token
   return {
@@ -61,7 +63,7 @@ const Materials = () => {
   const fetchMaterialsData = useCallback(
     async (pageNum = 1, append = false) => {
       try {
-        const response = await axios.get('http://localhost:8080/materials', {
+        const response = await axios.get(`${config.backendUrl}/materials`, {
           params: {
             page: pageNum,
             limit: 25
diff --git a/src/components/Dashboard/Management/Materials/NewMaterial.jsx b/src/components/Dashboard/Management/Materials/NewMaterial.jsx
index 1d9c773..8762255 100644
--- a/src/components/Dashboard/Management/Materials/NewMaterial.jsx
+++ b/src/components/Dashboard/Management/Materials/NewMaterial.jsx
@@ -16,6 +16,8 @@ import {
 import { UploadOutlined } from '@ant-design/icons'
 import VendorSelect from '../../common/VendorSelect'
 
+import config from '../../../../config'
+
 const initialNewMaterialForm = {
   name: '',
   vendor: { id: null, name: '' },
@@ -93,7 +95,7 @@ const NewMaterial = ({ onSuccess }) => {
     setNewMaterialLoading(true)
     try {
       await axios.post(
-        `http://localhost:8080/materials`,
+        `${config.backendUrl}/materials`,
         newMaterialFormValues,
         {
           withCredentials: true
diff --git a/src/components/Dashboard/Management/Parts.jsx b/src/components/Dashboard/Management/Parts.jsx
index db46e65..71fe49d 100644
--- a/src/components/Dashboard/Management/Parts.jsx
+++ b/src/components/Dashboard/Management/Parts.jsx
@@ -33,6 +33,8 @@ import CheckIcon from '../../Icons/CheckIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import TimeDisplay from '../common/TimeDisplay'
 
+import config from '../../../config'
+
 const { Text } = Typography
 
 const useStyle = createStyles(({ css, token }) => {
@@ -206,7 +208,7 @@ const Parts = () => {
   const fetchPartsData = useCallback(
     async (pageNum = 1, append = false) => {
       try {
-        const response = await axios.get('http://localhost:8080/parts', {
+        const response = await axios.get(`${config.backendUrl}/parts`, {
           params: {
             page: pageNum,
             limit: 25,
diff --git a/src/components/Dashboard/Management/Parts/PartInfo.jsx b/src/components/Dashboard/Management/Parts/PartInfo.jsx
index 165d1dc..d8ac86a 100644
--- a/src/components/Dashboard/Management/Parts/PartInfo.jsx
+++ b/src/components/Dashboard/Management/Parts/PartInfo.jsx
@@ -28,6 +28,8 @@ import CheckIcon from '../../../Icons/CheckIcon.jsx'
 import useCollapseState from '../../hooks/useCollapseState'
 import TimeDisplay from '../../common/TimeDisplay.jsx'
 
+import config from '../../../../config.js'
+
 const { Title } = Typography
 
 const PartInfo = () => {
@@ -93,15 +95,12 @@ const PartInfo = () => {
   const fetchPartDetails = async () => {
     try {
       setFetchLoading(true)
-      const response = await axios.get(
-        `http://localhost:8080/parts/${partId}`,
-        {
-          headers: {
-            Accept: 'application/json'
-          },
-          withCredentials: true
-        }
-      )
+      const response = await axios.get(`${config.backendUrl}/parts/${partId}`, {
+        headers: {
+          Accept: 'application/json'
+        },
+        withCredentials: true
+      })
       setPartData(response.data)
       setError(null)
     } catch (err) {
@@ -125,7 +124,7 @@ const PartInfo = () => {
         objectUrlRef.current = null
       }
       const response = await axios.get(
-        `http://localhost:8080/parts/${partId}/content`,
+        `${config.backendUrl}/parts/${partId}/content`,
         {
           withCredentials: true,
           responseType: 'blob'
@@ -190,7 +189,7 @@ const PartInfo = () => {
       const values = await partForm.validateFields()
       setLoading(true)
 
-      await axios.put(`http://localhost:8080/parts/${partId}`, values, {
+      await axios.put(`${config.backendUrl}/parts/${partId}`, values, {
         headers: {
           'Content-Type': 'application/json'
         },
diff --git a/src/components/Dashboard/Management/Products.jsx b/src/components/Dashboard/Management/Products.jsx
index 52f586f..f73d2bb 100644
--- a/src/components/Dashboard/Management/Products.jsx
+++ b/src/components/Dashboard/Management/Products.jsx
@@ -34,6 +34,8 @@ import CheckIcon from '../../Icons/CheckIcon'
 
 import useColumnVisibility from '../hooks/useColumnVisibility'
 
+import config from '../../../config'
+
 const useStyle = createStyles(({ css, token }) => {
   const { antCls } = token
   return {
@@ -73,7 +75,7 @@ const Products = () => {
   const fetchProductsData = useCallback(
     async (pageNum = 1, append = false) => {
       try {
-        const response = await axios.get('http://localhost:8080/products', {
+        const response = await axios.get(`${config.backendUrl}/products`, {
           params: {
             page: pageNum,
             limit: 25,
diff --git a/src/components/Dashboard/Management/Products/NewProduct.jsx b/src/components/Dashboard/Management/Products/NewProduct.jsx
index 079460f..71d7019 100644
--- a/src/components/Dashboard/Management/Products/NewProduct.jsx
+++ b/src/components/Dashboard/Management/Products/NewProduct.jsx
@@ -23,6 +23,8 @@ import PartIcon from '../../../Icons/PartIcon'
 import { StlViewer } from 'react-stl-viewer'
 import VendorSelect from '../../common/VendorSelect'
 
+import config from '../../../../config'
+
 const { Dragger } = Upload
 const { Title, Text } = Typography
 
@@ -166,7 +168,7 @@ const NewProduct = ({ onOk, reset }) => {
     setNewProductLoading(true)
     try {
       const result = await axios.post(
-        `http://localhost:8080/products`,
+        `${config.backendUrl}/products`,
         newProductFormValues,
         {
           withCredentials: true // Important for including cookies
@@ -192,7 +194,7 @@ const NewProduct = ({ onOk, reset }) => {
         formData.append('partFile', parts[i].file)
 
         await axios.post(
-          `http://localhost:8080/parts/${partIds[i]}/content`,
+          `${config.backendUrl}/parts/${partIds[i]}/content`,
           formData,
           {
             headers: {
diff --git a/src/components/Dashboard/Management/Products/ProductInfo.jsx b/src/components/Dashboard/Management/Products/ProductInfo.jsx
index 2433805..e85e832 100644
--- a/src/components/Dashboard/Management/Products/ProductInfo.jsx
+++ b/src/components/Dashboard/Management/Products/ProductInfo.jsx
@@ -28,6 +28,8 @@ import XMarkIcon from '../../../Icons/XMarkIcon.jsx'
 import CheckIcon from '../../../Icons/CheckIcon.jsx'
 import TimeDisplay from '../../common/TimeDisplay.jsx'
 
+import config from '../../../../config.js'
+
 const { Title } = Typography
 
 const ProductInfo = () => {
@@ -97,7 +99,7 @@ const ProductInfo = () => {
     try {
       setFetchLoading(true)
       const response = await axios.get(
-        `http://localhost:8080/products/${productId}`,
+        `${config.backendUrl}/products/${productId}`,
         {
           headers: {
             Accept: 'application/json'
@@ -142,7 +144,7 @@ const ProductInfo = () => {
       const values = await productForm.validateFields()
       setLoading(true)
 
-      await axios.put(`http://localhost:8080/products/${productId}`, values, {
+      await axios.put(`${config.backendUrl}/products/${productId}`, values, {
         headers: {
           'Content-Type': 'application/json'
         },
diff --git a/src/components/Dashboard/Management/Vendors.jsx b/src/components/Dashboard/Management/Vendors.jsx
index f8461bd..9663cb3 100644
--- a/src/components/Dashboard/Management/Vendors.jsx
+++ b/src/components/Dashboard/Management/Vendors.jsx
@@ -30,6 +30,8 @@ import CheckIcon from '../../Icons/CheckIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import InfoCircleIcon from '../../Icons/InfoCircleIcon'
 
+import config from '../../../config'
+
 const { Link } = Typography
 
 const useStyle = createStyles(({ css, token }) => {
@@ -68,7 +70,7 @@ const Vendors = () => {
   const fetchVendorsData = useCallback(
     async (pageNum = 1, append = false) => {
       try {
-        const response = await axios.get('http://localhost:8080/vendors', {
+        const response = await axios.get(`${config.backendUrl}/vendors`, {
           params: {
             page: pageNum,
             limit: 25,
diff --git a/src/components/Dashboard/Management/Vendors/NewVendor.jsx b/src/components/Dashboard/Management/Vendors/NewVendor.jsx
index 8512c3b..9cecadc 100644
--- a/src/components/Dashboard/Management/Vendors/NewVendor.jsx
+++ b/src/components/Dashboard/Management/Vendors/NewVendor.jsx
@@ -16,6 +16,8 @@ import {
 import CountrySelect from '../../common/CountrySelect'
 import CountryDisplay from '../../common/CountryDisplay'
 
+import config from '../../../../config'
+
 const { Title } = Typography
 
 const initialNewVendorForm = {
@@ -93,7 +95,7 @@ const NewVendor = ({ onOk, reset }) => {
   const handleNewVendor = async () => {
     setNewVendorLoading(true)
     try {
-      await axios.post('http://localhost:8080/vendors', newVendorFormValues, {
+      await axios.post(`${config.backendUrl}/vendors`, newVendorFormValues, {
         withCredentials: true
       })
       onOk()
diff --git a/src/components/Dashboard/Management/Vendors/VendorInfo.jsx b/src/components/Dashboard/Management/Vendors/VendorInfo.jsx
index f053073..483d780 100644
--- a/src/components/Dashboard/Management/Vendors/VendorInfo.jsx
+++ b/src/components/Dashboard/Management/Vendors/VendorInfo.jsx
@@ -28,6 +28,8 @@ import XMarkIcon from '../../../Icons/XMarkIcon.jsx'
 import CheckIcon from '../../../Icons/CheckIcon.jsx'
 import useCollapseState from '../../hooks/useCollapseState'
 
+import config from '../../../../config.js'
+
 const { Title, Link } = Typography
 
 const VendorInfo = () => {
@@ -67,7 +69,7 @@ const VendorInfo = () => {
     try {
       setFetchLoading(true)
       const response = await axios.get(
-        `http://localhost:8080/vendors/${vendorId}`,
+        `${config.backendUrl}/vendors/${vendorId}`,
         {
           headers: {
             Accept: 'application/json'
@@ -107,7 +109,7 @@ const VendorInfo = () => {
       const values = await form.validateFields()
       setLoading(true)
 
-      await axios.put(`http://localhost:8080/vendors/${vendorId}`, values, {
+      await axios.put(`${config.backendUrl}/vendors/${vendorId}`, values, {
         headers: {
           'Content-Type': 'application/json'
         },
diff --git a/src/components/Dashboard/Production/GCodeFiles.jsx b/src/components/Dashboard/Production/GCodeFiles.jsx
index 8c39cea..c48b190 100644
--- a/src/components/Dashboard/Production/GCodeFiles.jsx
+++ b/src/components/Dashboard/Production/GCodeFiles.jsx
@@ -34,6 +34,8 @@ import XMarkIcon from '../../Icons/XMarkIcon'
 import CheckIcon from '../../Icons/CheckIcon'
 import TimeDisplay from '../common/TimeDisplay'
 
+import config from '../../../config'
+
 const { Text } = Typography
 
 const useStyle = createStyles(({ css, token }) => {
@@ -259,7 +261,7 @@ const GCodeFiles = () => {
           order: sorter.order
         }
 
-        const response = await axios.get('http://localhost:8080/gcodefiles', {
+        const response = await axios.get(`${config.backendUrl}/gcodefiles`, {
           params,
           headers: {
             Accept: 'application/json'
@@ -369,7 +371,7 @@ const GCodeFiles = () => {
     }
     try {
       const response = await axios.get(
-        `http://localhost:8080/gcodefiles/${id}/content`,
+        `${config.backendUrl}/gcodefiles/${id}/content`,
         {
           headers: {
             Accept: 'application/json'
diff --git a/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx b/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
index ca4a718..55de1ca 100644
--- a/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
+++ b/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
@@ -27,6 +27,8 @@ import EditIcon from '../../../Icons/EditIcon.jsx'
 import XMarkIcon from '../../../Icons/XMarkIcon.jsx'
 import CheckIcon from '../../../Icons/CheckIcon.jsx'
 
+import config from '../../../../config.js'
+
 const { Title } = Typography
 
 const GCodeFileInfo = () => {
@@ -66,7 +68,7 @@ const GCodeFileInfo = () => {
     try {
       setFetchLoading(true)
       const response = await axios.get(
-        `http://localhost:8080/gcodefiles/${gcodeFileId}`,
+        `${config.backendUrl}/gcodefiles/${gcodeFileId}`,
         {
           headers: {
             Accept: 'application/json'
@@ -103,7 +105,7 @@ const GCodeFileInfo = () => {
       setLoading(true)
 
       await axios.put(
-        `http://localhost:8080/gcodefiles/${gcodeFileId}`,
+        `${config.backendUrl}/gcodefiles/${gcodeFileId}`,
         values,
         {
           headers: {
diff --git a/src/components/Dashboard/Production/GCodeFiles/NewGCodeFile.jsx b/src/components/Dashboard/Production/GCodeFiles/NewGCodeFile.jsx
index 59ee28c..2f07c8e 100644
--- a/src/components/Dashboard/Production/GCodeFiles/NewGCodeFile.jsx
+++ b/src/components/Dashboard/Production/GCodeFiles/NewGCodeFile.jsx
@@ -29,6 +29,8 @@ import GCodeFileIcon from '../../../Icons/GCodeFileIcon'
 
 import FilamentSelect from '../../common/FilamentSelect'
 
+import config from '../../../../config.js'
+
 const { Dragger } = Upload
 
 const { Title } = Typography
@@ -79,7 +81,7 @@ const NewGCodeFile = ({ onOk, reset }) => {
       try {
         setNextLoading(true)
         const response = await axios.get(
-          `http://localhost:8080/filaments/${newGCodeFileFormValues.filament}`,
+          `${config.backendUrl}/filaments/${newGCodeFileFormValues.filament}`,
           {
             headers: {
               Accept: 'application/json'
@@ -230,7 +232,7 @@ const NewGCodeFile = ({ onOk, reset }) => {
     formData.append('gcodeFile', gcodeFile)
     try {
       await axios.post(
-        `http://localhost:8080/gcodefiles/${id}/content`,
+        `${config.backendUrl}/gcodefiles/${id}/content`,
         formData,
         {
           headers: {
@@ -253,7 +255,7 @@ const NewGCodeFile = ({ onOk, reset }) => {
     setNewGCodeFileLoading(true)
     try {
       const request = await axios.post(
-        `http://localhost:8080/gcodefiles`,
+        `${config.backendUrl}/gcodefiles`,
         newGCodeFileFormValues,
         {
           headers: {
@@ -279,7 +281,7 @@ const NewGCodeFile = ({ onOk, reset }) => {
 
       // Call the API to extract and parse the config block
       const request = await axios.post(
-        `http://localhost:8080/gcodefiles/content`,
+        `${config.backendUrl}/gcodefiles/content`,
         formData,
         {
           withCredentials: true // Important for including cookies
diff --git a/src/components/Dashboard/Production/PrintJobs.jsx b/src/components/Dashboard/Production/PrintJobs.jsx
index 52ac37e..8ed204b 100644
--- a/src/components/Dashboard/Production/PrintJobs.jsx
+++ b/src/components/Dashboard/Production/PrintJobs.jsx
@@ -44,6 +44,8 @@ import EditIcon from '../../Icons/EditIcon.jsx'
 import XMarkIcon from '../../Icons/XMarkIcon.jsx'
 import CheckIcon from '../../Icons/CheckIcon.jsx'
 
+import config from '../../../config.js'
+
 const { Text } = Typography
 
 const useStyle = createStyles(({ css, token }) => {
@@ -331,7 +333,7 @@ const PrintJobs = () => {
           order: sorter.order
         }
 
-        const response = await axios.get('http://localhost:8080/printjobs', {
+        const response = await axios.get(`${config.backendUrl}/printjobs`, {
           params,
           headers: {
             Accept: 'application/json'
diff --git a/src/components/Dashboard/Production/PrintJobs/NewPrintJob.jsx b/src/components/Dashboard/Production/PrintJobs/NewPrintJob.jsx
index 4dc29f0..406a213 100644
--- a/src/components/Dashboard/Production/PrintJobs/NewPrintJob.jsx
+++ b/src/components/Dashboard/Production/PrintJobs/NewPrintJob.jsx
@@ -16,6 +16,8 @@ import PropTypes from 'prop-types'
 import GCodeFileSelect from '../../common/GCodeFileSelect'
 import PrinterSelect from '../../common/PrinterSelect'
 
+import config from '../../../../config'
+
 const { Title } = Typography
 
 const initialNewPrintJobForm = {
@@ -67,7 +69,7 @@ const NewPrintJob = ({ onOk, reset }) => {
     setNewPrintJobLoading(true)
     try {
       await axios.post(
-        `http://localhost:8080/printjobs`,
+        `${config.backendUrl}/printjobs`,
         newPrintJobFormValues,
         {
           headers: {
diff --git a/src/components/Dashboard/Production/PrintJobs/PrintJobInfo.jsx b/src/components/Dashboard/Production/PrintJobs/PrintJobInfo.jsx
index ac098b2..8505474 100644
--- a/src/components/Dashboard/Production/PrintJobs/PrintJobInfo.jsx
+++ b/src/components/Dashboard/Production/PrintJobs/PrintJobInfo.jsx
@@ -20,6 +20,7 @@ import { SocketContext } from '../../context/SocketContext'
 import GCodeFileIcon from '../../../Icons/GCodeFileIcon'
 import ReloadIcon from '../../../Icons/ReloadIcon'
 import useCollapseState from '../../hooks/useCollapseState'
+import config from '../../../../config'
 
 const { Title } = Typography
 
@@ -72,7 +73,7 @@ const PrintJobInfo = () => {
     try {
       setLoading(true)
       const response = await axios.get(
-        `http://localhost:8080/printjobs/${printJobId}`,
+        `${config.backendUrl}/printjobs/${printJobId}`,
         {
           headers: {
             Accept: 'application/json'
diff --git a/src/components/Dashboard/Production/Printers.jsx b/src/components/Dashboard/Production/Printers.jsx
index fe2a6c3..70edfd5 100644
--- a/src/components/Dashboard/Production/Printers.jsx
+++ b/src/components/Dashboard/Production/Printers.jsx
@@ -32,6 +32,8 @@ import ReloadIcon from '../../Icons/ReloadIcon'
 import XMarkIcon from '../../Icons/XMarkIcon'
 import CheckIcon from '../../Icons/CheckIcon'
 
+import config from '../../../config'
+
 const useStyle = createStyles(({ css, token }) => {
   const { antCls } = token
   return {
@@ -236,7 +238,7 @@ const Printers = () => {
           order: sorter.order
         }
 
-        const response = await axios.get('http://localhost:8080/printers', {
+        const response = await axios.get(`${config.backendUrl}/printers`, {
           params,
           headers: {
             Accept: 'application/json'
diff --git a/src/components/Dashboard/Production/Printers/ControlPrinter.jsx b/src/components/Dashboard/Production/Printers/ControlPrinter.jsx
index 9cd2713..f1f1e46 100644
--- a/src/components/Dashboard/Production/Printers/ControlPrinter.jsx
+++ b/src/components/Dashboard/Production/Printers/ControlPrinter.jsx
@@ -45,6 +45,8 @@ import LoadFilamentStock from '../../Inventory/FilamentStocks/LoadFilamentStock'
 import UnloadFilamentStock from '../../Inventory/FilamentStocks/UnloadFilamentStock'
 import FilamentStockState from '../../common/FilamentStockState'
 
+import config from '../../../../config'
+
 const { Text } = Typography
 
 // Helper function to parse query parameters
@@ -96,7 +98,7 @@ const ControlPrinter = () => {
     if (printerId) {
       try {
         const response = await axios.get(
-          `http://localhost:8080/printers/${printerId}`,
+          `${config.backendUrl}/printers/${printerId}`,
           {
             headers: {
               Accept: 'application/json'
@@ -610,25 +612,6 @@ const ControlPrinter = () => {
                     </Descriptions.Item>
                   )}
 
-                  <Descriptions.Item label='Est. Print Time'>
-                    {(() => {
-                      if (
-                        printerData.currentJob?.gcodeFile?.gcodeFileInfo
-                          .estimatedPrintingTimeNormalMode
-                      ) {
-                        return (
-                          <Text ellipsis>
-                            {
-                              printerData.currentJob.gcodeFile.gcodeFileInfo
-                                .estimatedPrintingTimeNormalMode
-                            }
-                          </Text>
-                        )
-                      }
-                      return 'n/a'
-                    })()}
-                  </Descriptions.Item>
-
                   <Descriptions.Item label='Print Profile'>
                     {(() => {
                       if (
@@ -648,6 +631,25 @@ const ControlPrinter = () => {
                       }
                     })()}
                   </Descriptions.Item>
+
+                  <Descriptions.Item label='Est. Print Time'>
+                    {(() => {
+                      if (
+                        printerData.currentJob?.gcodeFile?.gcodeFileInfo
+                          .estimatedPrintingTimeNormalMode
+                      ) {
+                        return (
+                          <Text ellipsis>
+                            {
+                              printerData.currentJob.gcodeFile.gcodeFileInfo
+                                .estimatedPrintingTimeNormalMode
+                            }
+                          </Text>
+                        )
+                      }
+                      return 'n/a'
+                    })()}
+                  </Descriptions.Item>
                 </Descriptions>
                 {componentVisibility.subjobs && (
                   <PrinterSubJobsTree subJobs={printerData.subJobs} />
diff --git a/src/components/Dashboard/Production/Printers/NewPrinter.jsx b/src/components/Dashboard/Production/Printers/NewPrinter.jsx
index 3e6e6dc..e777570 100644
--- a/src/components/Dashboard/Production/Printers/NewPrinter.jsx
+++ b/src/components/Dashboard/Production/Printers/NewPrinter.jsx
@@ -24,6 +24,8 @@ import PropTypes from 'prop-types'
 import { SocketContext } from '../../context/SocketContext'
 import EditIcon from '../../../Icons/EditIcon.jsx'
 
+import config from '../../../../config.js'
+
 const { Title } = Typography
 
 const initialNewPrinterForm = {
@@ -154,7 +156,7 @@ const NewPrinter = ({ onOk, reset }) => {
     setNewPrinterLoading(true)
     try {
       await axios.post(
-        'http://localhost:8080/printers',
+        `${config.backendUrl}/printers`,
         {
           ...newPrinterFormValues
         },
diff --git a/src/components/Dashboard/Production/Printers/PrinterInfo.jsx b/src/components/Dashboard/Production/Printers/PrinterInfo.jsx
index 6e06ba2..89b0f2c 100644
--- a/src/components/Dashboard/Production/Printers/PrinterInfo.jsx
+++ b/src/components/Dashboard/Production/Printers/PrinterInfo.jsx
@@ -30,6 +30,8 @@ import XMarkIcon from '../../../Icons/XMarkIcon.jsx'
 import CheckIcon from '../../../Icons/CheckIcon.jsx'
 import useCollapseState from '../../hooks/useCollapseState'
 
+import config from '../../../../config.js'
+
 const { Title } = Typography
 
 const PrinterInfo = () => {
@@ -73,7 +75,7 @@ const PrinterInfo = () => {
     try {
       setFetchLoading(true)
       const response = await axios.get(
-        `http://localhost:8080/printers/${printerId}`,
+        `${config.backendUrl}/printers/${printerId}`,
         {
           headers: {
             Accept: 'application/json'
@@ -120,7 +122,7 @@ const PrinterInfo = () => {
       setLoading(true)
 
       await axios.put(
-        `http://localhost:8080/printers/${printerId}`,
+        `${config.backendUrl}/printers/${printerId}`,
         {
           name: values.name,
           vendor: values.vendor,
diff --git a/src/components/Dashboard/Production/ProductionOverview.jsx b/src/components/Dashboard/Production/ProductionOverview.jsx
index 5b1ab9a..486eb26 100644
--- a/src/components/Dashboard/Production/ProductionOverview.jsx
+++ b/src/components/Dashboard/Production/ProductionOverview.jsx
@@ -21,6 +21,8 @@ import XMarkIcon from '../../Icons/XMarkIcon'
 import useCollapseState from '../hooks/useCollapseState'
 import CheckIcon from '../../Icons/CheckIcon'
 
+import config from '../../../config'
+
 const { Title, Text } = Typography
 
 const ProductionOverview = () => {
@@ -64,7 +66,7 @@ const ProductionOverview = () => {
   const fetchPrinterStats = async () => {
     try {
       setFetchPrinterStatsLoading(true)
-      const response = await axios.get(`http://localhost:8080/printers/stats`, {
+      const response = await axios.get(`${config.backendUrl}/printers/stats`, {
         headers: {
           Accept: 'application/json'
         },
@@ -85,15 +87,12 @@ const ProductionOverview = () => {
   const fetchPrintJobStats = async () => {
     try {
       setFetchPrinterStatsLoading(true)
-      const response = await axios.get(
-        `http://localhost:8080/printjobs/stats`,
-        {
-          headers: {
-            Accept: 'application/json'
-          },
-          withCredentials: true
-        }
-      )
+      const response = await axios.get(`${config.backendUrl}/printjobs/stats`, {
+        headers: {
+          Accept: 'application/json'
+        },
+        withCredentials: true
+      })
       const printJobStats = response.data
       setStats((prev) => ({ ...prev, printJobs: printJobStats }))
       setError(null)
diff --git a/src/components/Dashboard/common/FilamentSelect.jsx b/src/components/Dashboard/common/FilamentSelect.jsx
index ac962f4..581b59a 100644
--- a/src/components/Dashboard/common/FilamentSelect.jsx
+++ b/src/components/Dashboard/common/FilamentSelect.jsx
@@ -4,6 +4,8 @@ import React, { useEffect, useState, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import axios from 'axios'
 
+import config from '../../../config'
+
 const propertyOrder = ['diameter', 'type', 'vendor.name']
 
 const FilamentSelect = ({ onChange, filter, useFilter, value }) => {
@@ -15,7 +17,7 @@ const FilamentSelect = ({ onChange, filter, useFilter, value }) => {
   const fetchFilamentsData = async (property, filter) => {
     setLoading(true)
     try {
-      const response = await axios.get('http://localhost:8080/filaments', {
+      const response = await axios.get(`${config.backendUrl}/filaments`, {
         params: {
           ...filter,
           property
diff --git a/src/components/Dashboard/common/FilamentStockSelect.jsx b/src/components/Dashboard/common/FilamentStockSelect.jsx
index deacaa5..8790055 100644
--- a/src/components/Dashboard/common/FilamentStockSelect.jsx
+++ b/src/components/Dashboard/common/FilamentStockSelect.jsx
@@ -2,6 +2,7 @@ import { TreeSelect } from 'antd'
 import React, { useEffect, useState, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import axios from 'axios'
+import config from '../../../config'
 
 import FilamentStockDisplay from './FilamentStockDisplay'
 
@@ -20,7 +21,7 @@ const FilamentStockSelect = ({ onChange, filter, useFilter, value }) => {
   const fetchFilamentStocksData = async (property, filter) => {
     setLoading(true)
     try {
-      const response = await axios.get('http://localhost:8080/filamentstocks', {
+      const response = await axios.get(`${config.backendUrl}/filamentstocks`, {
         params: {
           ...filter,
           property
diff --git a/src/components/Dashboard/common/GCodeFileSelect.jsx b/src/components/Dashboard/common/GCodeFileSelect.jsx
index d1ffa1e..b9aeeff 100644
--- a/src/components/Dashboard/common/GCodeFileSelect.jsx
+++ b/src/components/Dashboard/common/GCodeFileSelect.jsx
@@ -6,6 +6,8 @@ import axios from 'axios'
 import GCodeFileIcon from '../../Icons/GCodeFileIcon'
 import { AuthContext } from '../../Auth/AuthContext'
 
+import config from '../../../config'
+
 const propertyOrder = [
   'filament.diameter',
   'filament.type',
@@ -28,7 +30,7 @@ const GCodeFileSelect = ({ onChange, filter, useFilter }) => {
     }
     setLoading(true)
     try {
-      const response = await axios.get('http://localhost:8080/gcodefiles', {
+      const response = await axios.get(`${config.backendUrl}/gcodefiles`, {
         params: {
           ...filter,
           search,
diff --git a/src/components/Dashboard/common/PartSelect.jsx b/src/components/Dashboard/common/PartSelect.jsx
index 69d6d7a..077b4e3 100644
--- a/src/components/Dashboard/common/PartSelect.jsx
+++ b/src/components/Dashboard/common/PartSelect.jsx
@@ -16,7 +16,7 @@ const PartSelect = ({ onChange, filter, useFilter }) => {
   const fetchPartsData = async (property, filter) => {
     setLoading(true)
     try {
-      const response = await axios.get('http://localhost:8080/parts', {
+      const response = await axios.get(`${config.backendUrl}/parts', {
         params: {
           ...filter,
           property
diff --git a/src/components/Dashboard/common/PartTransfer.jsx b/src/components/Dashboard/common/PartTransfer.jsx
index b83c6f5..0d3f531 100644
--- a/src/components/Dashboard/common/PartTransfer.jsx
+++ b/src/components/Dashboard/common/PartTransfer.jsx
@@ -21,7 +21,7 @@ const PartTransfer = ({
   const fetchPartsData = async (property, filter) => {
     setLoading(true)
     try {
-      const response = await axios.get('http://localhost:8080/parts', {
+      const response = await axios.get(`${config.backendUrl}/parts', {
         params: {
           ...filter,
           property
diff --git a/src/components/Dashboard/common/PrinterJobsTree.jsx b/src/components/Dashboard/common/PrinterJobsTree.jsx
index bb3ae73..48605e4 100644
--- a/src/components/Dashboard/common/PrinterJobsTree.jsx
+++ b/src/components/Dashboard/common/PrinterJobsTree.jsx
@@ -11,6 +11,8 @@ import JobIcon from '../../Icons/JobIcon'
 import SubJobIcon from '../../Icons/SubJobIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 
+import config from '../../../config'
+
 const PrinterJobsTree = ({ subJobs: initialSubJobs }) => {
   const [subJobs, setSubJobs] = useState(initialSubJobs || [])
   const [loading, setLoading] = useState(false)
@@ -93,7 +95,7 @@ const PrinterJobsTree = ({ subJobs: initialSubJobs }) => {
       if (!initialSubJobs) {
         try {
           setLoading(true)
-          const response = await axios.get('http://localhost:8080/printjobs', {
+          const response = await axios.get(`${config.backendUrl}/printjobs`, {
             headers: { Accept: 'application/json' },
             withCredentials: true
           })
diff --git a/src/components/Dashboard/common/PrinterSelect.jsx b/src/components/Dashboard/common/PrinterSelect.jsx
index 75790ce..8a7cfc3 100644
--- a/src/components/Dashboard/common/PrinterSelect.jsx
+++ b/src/components/Dashboard/common/PrinterSelect.jsx
@@ -5,6 +5,7 @@ import React, { useEffect, useState, useContext } from 'react'
 import axios from 'axios'
 import PrinterState from './PrinterState'
 import { AuthContext } from '../../Auth/AuthContext'
+import config from '../../../config'
 
 const PrinterSelect = ({ onChange, disabled, checkable, value = [] }) => {
   const [printersTreeData, setPrintersTreeData] = useState([])
@@ -22,7 +23,7 @@ const PrinterSelect = ({ onChange, disabled, checkable, value = [] }) => {
     setLoading(true)
 
     try {
-      const response = await axios.get('http://localhost:8080/printers', {
+      const response = await axios.get(`${config.backendUrl}/printers`, {
         headers: {
           Accept: 'application/json'
         },
diff --git a/src/components/Dashboard/common/SubJobsTree.jsx b/src/components/Dashboard/common/SubJobsTree.jsx
index d827f72..e20427f 100644
--- a/src/components/Dashboard/common/SubJobsTree.jsx
+++ b/src/components/Dashboard/common/SubJobsTree.jsx
@@ -12,6 +12,8 @@ import SubJobState from './SubJobState'
 import SubJobIcon from '../../Icons/SubJobIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
 
+import config from '../../../config'
+
 const SubJobsTree = ({ printJobData }) => {
   const [treeData, setTreeData] = useState([])
   const [loading, setLoading] = useState(false)
@@ -89,7 +91,7 @@ const SubJobsTree = ({ printJobData }) => {
       if (!printJobData) {
         try {
           setLoading(true)
-          const response = await axios.get('http://localhost:8080/printjobs', {
+          const response = await axios.get(`${config.backendUrl}/printjobs`, {
             headers: { Accept: 'application/json' },
             withCredentials: true
           })
diff --git a/src/components/Dashboard/common/VendorSelect.jsx b/src/components/Dashboard/common/VendorSelect.jsx
index 8183a45..a1b8f12 100644
--- a/src/components/Dashboard/common/VendorSelect.jsx
+++ b/src/components/Dashboard/common/VendorSelect.jsx
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import axios from 'axios'
 import CountryDisplay from './CountryDisplay'
 import VendorIcon from '../../Icons/VendorIcon'
+import config from '../../../config'
 
 const propertyOrder = ['country']
 
@@ -15,7 +16,7 @@ const VendorSelect = ({ onChange, filter = {}, useFilter = false, value }) => {
   const fetchVendorsData = async (property, filter) => {
     setLoading(true)
     try {
-      const response = await axios.get('http://localhost:8080/vendors', {
+      const response = await axios.get(`${config.backendUrl}/vendors`, {
         params: {
           ...filter,
           property
diff --git a/src/components/Dashboard/context/SocketContext.js b/src/components/Dashboard/context/SocketContext.js
index e89a7b4..db74b98 100644
--- a/src/components/Dashboard/context/SocketContext.js
+++ b/src/components/Dashboard/context/SocketContext.js
@@ -10,6 +10,7 @@ import io from 'socket.io-client'
 import { message, notification } from 'antd'
 import PropTypes from 'prop-types'
 import { AuthContext } from '../../Auth/AuthContext'
+import config from '../../../config'
 
 const SocketContext = createContext()
 
@@ -25,7 +26,7 @@ const SocketProvider = ({ children }) => {
     if (token) {
       console.log('Token is available, connecting to web socket server...')
 
-      const newSocket = io('http://localhost:8081', {
+      const newSocket = io(config.wsUrl, {
         reconnectionAttempts: 3,
         timeout: 3000,
         auth: { token: token }
diff --git a/src/components/Dashboard/context/SpotlightContext.js b/src/components/Dashboard/context/SpotlightContext.js
index d97b367..26a3827 100644
--- a/src/components/Dashboard/context/SpotlightContext.js
+++ b/src/components/Dashboard/context/SpotlightContext.js
@@ -11,6 +11,8 @@ import PrinterState from '../common/PrinterState'
 import JobState from '../common/JobState'
 import IdText from '../common/IdText'
 
+import config from '../../../config'
+
 const SpotlightContext = createContext()
 
 const SpotlightProvider = ({ children }) => {
@@ -56,7 +58,7 @@ const SpotlightProvider = ({ children }) => {
       setLoading(true)
       setListData([])
       const response = await axios.get(
-        `http://localhost:8080/spotlight/${encodeURIComponent(searchQuery.trim())}`,
+        `${config.backendUrl}/spotlight/${encodeURIComponent(searchQuery.trim())}`,
         {
           headers: {
             Accept: 'application/json'
diff --git a/src/config.js b/src/config.js
new file mode 100644
index 0000000..7a4eac3
--- /dev/null
+++ b/src/config.js
@@ -0,0 +1,16 @@
+const config = {
+  development: {
+    backendUrl: 'http://localhost:8080',
+    wsUrl: 'ws://localhost:8081'
+  },
+  production: {
+    backendUrl: 'https://api.farmcontrol.com', // Replace with your production backend URL
+    wsUrl: 'wss://api.farmcontrol.com' // Replace with your production WebSocket URL
+  }
+}
+
+// Get the current environment, defaulting to development
+const env = process.env.NODE_ENV || 'development'
+
+// Export the configuration for the current environment
+export default config[env]