diff --git a/dispatcharr/urls.py b/dispatcharr/urls.py
index 346a8c5e..d0bc5def 100644
--- a/dispatcharr/urls.py
+++ b/dispatcharr/urls.py
@@ -26,7 +26,6 @@ urlpatterns = [
     path('api/', include(('apps.api.urls', 'api'), namespace='api')),
 
     # Admin
-    path('grappelli/', include('grappelli.urls')),  # Grappelli admin
     path('admin/', admin.site.urls),
 
     # Swagger UI
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
index 1d69fe9b..648b9c77 100644
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@@ -6,6 +6,7 @@ services:
     container_name: dispatcharr_web
     ports:
       - "9191:9191"
+      - "3031:3031"
     depends_on:
       - db
       - redis
@@ -25,11 +26,10 @@ services:
   ui:
     image: alpine
     container_name: dispatcharr_ui
+    network_mode: service:web
     volumes:
       - ../frontend:/app
     entrypoint: ["/bin/sh", "/app/entrypoint.sh"]
-    ports:
-      - 3031:3031
 
   celery:
     build:
diff --git a/frontend/package.json b/frontend/package.json
index 3809d0a8..8845f0fd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -48,5 +48,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "proxy": "http://127.0.0.1:9191"
 }
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 812e54a3..0220e64b 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -22,7 +22,7 @@ import {
 } from '@mui/material';
 import theme from './theme';
 import EPG from './pages/EPG';
-// import Guide from './pages/Guide';
+import Guide from './pages/Guide';
 import StreamProfiles from './pages/StreamProfiles';
 import useAuthStore from './store/auth';
 import logo from './images/logo.png';
@@ -150,7 +150,7 @@ const App = () => {
                     path="/stream-profiles"
                     element={<StreamProfiles />}
                   />
-                  {/* <Route exact path="/guide" element={<Guide />} /> */}
+                  <Route exact path="/guide" element={<Guide />} />
                 </>
               ) : (
                 <Route path="/login" element={<Login />} />
diff --git a/frontend/src/api.js b/frontend/src/api.js
index 4f8629eb..d2b4836e 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -10,8 +10,7 @@ import useStreamProfilesStore from './store/streamProfiles';
 //   withCredentials: true,
 // });
 
-const host = 'http://127.0.0.1:9191';
-// const host = '';
+const host = '';
 
 const getAuthToken = async () => {
   const token = await useAuthStore.getState().getToken(); // Assuming token is stored in Zustand store
diff --git a/frontend/src/components/tables/ChannelsTable.js b/frontend/src/components/tables/ChannelsTable.js
index 7c458aba..3610d361 100644
--- a/frontend/src/components/tables/ChannelsTable.js
+++ b/frontend/src/components/tables/ChannelsTable.js
@@ -217,7 +217,7 @@ const Example = () => {
     ),
     muiTableContainerProps: {
       sx: {
-        height: 'calc(100vh - 90px)', // Subtract padding to avoid cutoff
+        height: 'calc(100vh - 75px)', // Subtract padding to avoid cutoff
         overflowY: 'auto', // Internal scrolling for the table
       },
     },
diff --git a/frontend/src/components/tables/EPGsTable.js b/frontend/src/components/tables/EPGsTable.js
index 3a1cd986..cb204ab4 100644
--- a/frontend/src/components/tables/EPGsTable.js
+++ b/frontend/src/components/tables/EPGsTable.js
@@ -149,7 +149,7 @@ const EPGsTable = () => {
     ),
     muiTableContainerProps: {
       sx: {
-        height: 'calc(42vh - 0px)',
+        height: 'calc(43vh - 0px)',
       },
     },
     renderTopToolbarCustomActions: ({ table }) => (
@@ -177,7 +177,7 @@ const EPGsTable = () => {
   return (
     <Box
       sx={{
-        padding: 2,
+        padding: 1,
       }}
     >
       <MaterialReactTable table={table} />
diff --git a/frontend/src/components/tables/M3UsTable.js b/frontend/src/components/tables/M3UsTable.js
index e2b5aa16..7447411d 100644
--- a/frontend/src/components/tables/M3UsTable.js
+++ b/frontend/src/components/tables/M3UsTable.js
@@ -193,7 +193,7 @@ const Example = () => {
     ),
     muiTableContainerProps: {
       sx: {
-        height: 'calc(42vh - 0px)',
+        height: 'calc(43vh - 0px)',
       },
     },
     renderTopToolbarCustomActions: ({ table }) => (
@@ -221,7 +221,7 @@ const Example = () => {
   return (
     <Box
       sx={{
-        padding: 2,
+        padding: 1,
       }}
     >
       <MaterialReactTable table={table} />
diff --git a/frontend/src/components/tables/StreamProfilesTable.js b/frontend/src/components/tables/StreamProfilesTable.js
index 266f9d96..a00256d1 100644
--- a/frontend/src/components/tables/StreamProfilesTable.js
+++ b/frontend/src/components/tables/StreamProfilesTable.js
@@ -173,7 +173,7 @@ const StreamProfiles = () => {
     ),
     muiTableContainerProps: {
       sx: {
-        height: 'calc(100vh - 100px)', // Subtract padding to avoid cutoff
+        height: 'calc(100vh - 73px)', // Subtract padding to avoid cutoff
         overflowY: 'auto', // Internal scrolling for the table
       },
     },
@@ -202,7 +202,7 @@ const StreamProfiles = () => {
   return (
     <Box
       sx={{
-        padding: 2,
+        padding: 1,
       }}
     >
       <MaterialReactTable table={table} />
diff --git a/frontend/src/components/tables/StreamsTable.js b/frontend/src/components/tables/StreamsTable.js
index 891c4800..dcfffdac 100644
--- a/frontend/src/components/tables/StreamsTable.js
+++ b/frontend/src/components/tables/StreamsTable.js
@@ -160,7 +160,7 @@ const Example = () => {
     ),
     muiTableContainerProps: {
       sx: {
-        height: 'calc(100vh - 90px)', // Subtract padding to avoid cutoff
+        height: 'calc(100vh - 75px)', // Subtract padding to avoid cutoff
         overflowY: 'auto', // Internal scrolling for the table
       },
     },
diff --git a/frontend/src/components/tables/UserAgentsTable.js b/frontend/src/components/tables/UserAgentsTable.js
index afbdcce2..d546a734 100644
--- a/frontend/src/components/tables/UserAgentsTable.js
+++ b/frontend/src/components/tables/UserAgentsTable.js
@@ -173,7 +173,7 @@ const UserAgentsTable = () => {
     ),
     muiTableContainerProps: {
       sx: {
-        height: 'calc(42vh - 10px)',
+        height: 'calc(42vh + 5px)',
       },
     },
     renderTopToolbarCustomActions: ({ table }) => (
@@ -202,7 +202,7 @@ const UserAgentsTable = () => {
     <>
       <Box
         sx={{
-          padding: 2,
+          padding: 1,
         }}
       >
         <MaterialReactTable table={table} />
diff --git a/frontend/src/pages/Channels.js b/frontend/src/pages/Channels.js
index 99a1652e..68a32df1 100644
--- a/frontend/src/pages/Channels.js
+++ b/frontend/src/pages/Channels.js
@@ -1,7 +1,7 @@
-import React from "react";
-import ChannelsTable from "../components/tables/ChannelsTable";
-import StreamsTable from "../components/tables/StreamsTable";
-import { Grid2, Box } from "@mui/material";
+import React from 'react';
+import ChannelsTable from '../components/tables/ChannelsTable';
+import StreamsTable from '../components/tables/StreamsTable';
+import { Grid2, Box } from '@mui/material';
 
 const ChannelsPage = () => {
   return (
@@ -9,13 +9,13 @@ const ChannelsPage = () => {
       <Grid2 size={6}>
         <Box
           sx={{
-            height: "100vh", // Full viewport height
-            paddingTop: "20px", // Top padding
-            paddingBottom: "20px", // Bottom padding
-            paddingRight: "10px",
-            paddingLeft: "20px",
-            boxSizing: "border-box", // Include padding in height calculation
-            overflow: "hidden", // Prevent parent scrolling
+            height: '100vh', // Full viewport height
+            paddingTop: 1, // Top padding
+            paddingBottom: 1, // Bottom padding
+            paddingRight: 0.5,
+            paddingLeft: 1,
+            boxSizing: 'border-box', // Include padding in height calculation
+            overflow: 'hidden', // Prevent parent scrolling
           }}
         >
           <ChannelsTable />
@@ -24,13 +24,13 @@ const ChannelsPage = () => {
       <Grid2 size={6}>
         <Box
           sx={{
-            height: "100vh", // Full viewport height
-            paddingTop: "20px", // Top padding
-            paddingBottom: "20px", // Bottom padding
-            paddingRight: "20px",
-            paddingLeft: "10px",
-            boxSizing: "border-box", // Include padding in height calculation
-            overflow: "hidden", // Prevent parent scrolling
+            height: '100vh', // Full viewport height
+            paddingTop: 1, // Top padding
+            paddingBottom: 1, // Bottom padding
+            paddingRight: 1,
+            paddingLeft: 0.5,
+            boxSizing: 'border-box', // Include padding in height calculation
+            overflow: 'hidden', // Prevent parent scrolling
           }}
         >
           <StreamsTable />
diff --git a/frontend/src/pages/Guide.js b/frontend/src/pages/Guide.js
index 2b72ee6c..e9fd294b 100644
--- a/frontend/src/pages/Guide.js
+++ b/frontend/src/pages/Guide.js
@@ -3,6 +3,7 @@ import { Box, Typography, Avatar, Paper, Tooltip, Stack } from '@mui/material';
 import dayjs from 'dayjs';
 import API from '../api';
 import useChannelsStore from '../store/channels';
+import logo from '../images/logo.png';
 
 const CHANNEL_WIDTH = 100;
 const PROGRAM_HEIGHT = 80;
@@ -13,6 +14,7 @@ const TVChannelGuide = ({ startDate, endDate }) => {
 
   const [programs, setPrograms] = useState([]);
   const [guideChannels, setGuideChannels] = useState([]);
+  const [now, setNow] = useState(dayjs());
 
   const guideRef = useRef(null);
 
@@ -36,8 +38,6 @@ const TVChannelGuide = ({ startDate, endDate }) => {
     fetchPrograms();
   }, [channels]);
 
-  const now = dayjs();
-
   const latestHalfHour = new Date();
 
   // Round down the minutes to the nearest half hour
@@ -126,6 +126,14 @@ const TVChannelGuide = ({ startDate, endDate }) => {
     );
   };
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setNow(dayjs());
+    }, 60000); // Update every minute
+
+    return () => clearInterval(interval);
+  }, []);
+
   const nowPosition = useMemo(() => {
     if (now.isBefore(start) || now.isAfter(end)) return -1;
     const totalMinutes = end.diff(start, 'minute');
@@ -175,7 +183,7 @@ const TVChannelGuide = ({ startDate, endDate }) => {
                   }}
                 >
                   <Avatar
-                    src={channel.logo_url || '/static/images/logo.png'}
+                    src={channel.logo_url || logo}
                     alt={channel.channel_name}
                   />
                   {/* <Typography variant="body2" sx={{ marginLeft: 1 }}>
@@ -188,7 +196,7 @@ const TVChannelGuide = ({ startDate, endDate }) => {
         </Box>
 
         {/* Timeline and Lineup */}
-        <Box sx={{ overflowY: 'auto', height: '100%' }}>
+        <Box ref={guideRef} sx={{ overflowY: 'auto', height: '100%' }}>
           <Box
             sx={{
               display: 'flex',
diff --git a/frontend/src/pages/Guide2.js b/frontend/src/pages/Guide2.js
deleted file mode 100644
index e69de29b..00000000