diff --git a/frontend/src/Store/Actions/systemActions.js b/frontend/src/Store/Actions/systemActions.js
index 8e273b217..206183693 100644
--- a/frontend/src/Store/Actions/systemActions.js
+++ b/frontend/src/Store/Actions/systemActions.js
@@ -62,20 +62,6 @@ export const defaultState = {
     isPopulated: false,
     error: null,
     items: []
-  },
-
-  logFiles: {
-    isFetching: false,
-    isPopulated: false,
-    error: null,
-    items: []
-  },
-
-  updateLogFiles: {
-    isFetching: false,
-    isPopulated: false,
-    error: null,
-    items: []
   }
 };
 
@@ -96,9 +82,6 @@ export const DELETE_BACKUP = 'system/backups/deleteBackup';
 
 export const FETCH_UPDATES = 'system/updates/fetchUpdates';
 
-export const FETCH_LOG_FILES = 'system/logFiles/fetchLogFiles';
-export const FETCH_UPDATE_LOG_FILES = 'system/updateLogFiles/fetchUpdateLogFiles';
-
 export const RESTART = 'system/restart';
 export const SHUTDOWN = 'system/shutdown';
 
@@ -119,9 +102,6 @@ export const deleteBackup = createThunk(DELETE_BACKUP);
 
 export const fetchUpdates = createThunk(FETCH_UPDATES);
 
-export const fetchLogFiles = createThunk(FETCH_LOG_FILES);
-export const fetchUpdateLogFiles = createThunk(FETCH_UPDATE_LOG_FILES);
-
 export const restart = createThunk(RESTART);
 export const shutdown = createThunk(SHUTDOWN);
 
@@ -201,8 +181,6 @@ export const actionHandlers = handleThunks({
   [DELETE_BACKUP]: createRemoveItemHandler(backupsSection, '/system/backup'),
 
   [FETCH_UPDATES]: createFetchHandler('system.updates', '/update'),
-  [FETCH_LOG_FILES]: createFetchHandler('system.logFiles', '/log/file'),
-  [FETCH_UPDATE_LOG_FILES]: createFetchHandler('system.updateLogFiles', '/log/file/update'),
 
   [RESTART]: function(getState, payload, dispatch) {
     const promise = createAjaxRequest({
diff --git a/frontend/src/System/Logs/App/AppLogFiles.tsx b/frontend/src/System/Logs/App/AppLogFiles.tsx
index ae0e08172..7225ffa76 100644
--- a/frontend/src/System/Logs/App/AppLogFiles.tsx
+++ b/frontend/src/System/Logs/App/AppLogFiles.tsx
@@ -1,46 +1,39 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import AppState from 'App/State/AppState';
 import * as commandNames from 'Commands/commandNames';
 import { executeCommand } from 'Store/Actions/commandActions';
-import { fetchLogFiles } from 'Store/Actions/systemActions';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import LogFiles from '../LogFiles';
+import useLogFiles from '../useLogFiles';
 
 function AppLogFiles() {
   const dispatch = useDispatch();
-  const { isFetching, items } = useSelector(
-    (state: AppState) => state.system.logFiles
-  );
+  const { data = [], isFetching, refetch } = useLogFiles();
 
   const isDeleteFilesExecuting = useSelector(
     createCommandExecutingSelector(commandNames.DELETE_LOG_FILES)
   );
 
   const handleRefreshPress = useCallback(() => {
-    dispatch(fetchLogFiles());
-  }, [dispatch]);
+    refetch();
+  }, [refetch]);
 
   const handleDeleteFilesPress = useCallback(() => {
     dispatch(
       executeCommand({
         name: commandNames.DELETE_LOG_FILES,
         commandFinished: () => {
-          dispatch(fetchLogFiles());
+          refetch();
         },
       })
     );
-  }, [dispatch]);
-
-  useEffect(() => {
-    dispatch(fetchLogFiles());
-  }, [dispatch]);
+  }, [dispatch, refetch]);
 
   return (
     <LogFiles
       isDeleteFilesExecuting={isDeleteFilesExecuting}
       isFetching={isFetching}
-      items={items}
+      items={data}
       type="app"
       onRefreshPress={handleRefreshPress}
       onDeleteFilesPress={handleDeleteFilesPress}
diff --git a/frontend/src/System/Logs/Update/UpdateLogFiles.tsx b/frontend/src/System/Logs/Update/UpdateLogFiles.tsx
index 4b97c4584..794b985ca 100644
--- a/frontend/src/System/Logs/Update/UpdateLogFiles.tsx
+++ b/frontend/src/System/Logs/Update/UpdateLogFiles.tsx
@@ -1,46 +1,39 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import AppState from 'App/State/AppState';
 import * as commandNames from 'Commands/commandNames';
 import { executeCommand } from 'Store/Actions/commandActions';
-import { fetchUpdateLogFiles } from 'Store/Actions/systemActions';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import LogFiles from '../LogFiles';
+import { useUpdateLogFiles } from '../useLogFiles';
 
 function UpdateLogFiles() {
   const dispatch = useDispatch();
-  const { isFetching, items } = useSelector(
-    (state: AppState) => state.system.updateLogFiles
-  );
+  const { data = [], isFetching, refetch } = useUpdateLogFiles();
 
   const isDeleteFilesExecuting = useSelector(
     createCommandExecutingSelector(commandNames.DELETE_UPDATE_LOG_FILES)
   );
 
   const handleRefreshPress = useCallback(() => {
-    dispatch(fetchUpdateLogFiles());
-  }, [dispatch]);
+    refetch();
+  }, [refetch]);
 
   const handleDeleteFilesPress = useCallback(() => {
     dispatch(
       executeCommand({
         name: commandNames.DELETE_UPDATE_LOG_FILES,
         commandFinished: () => {
-          dispatch(fetchUpdateLogFiles());
+          refetch();
         },
       })
     );
-  }, [dispatch]);
-
-  useEffect(() => {
-    dispatch(fetchUpdateLogFiles());
-  }, [dispatch]);
+  }, [dispatch, refetch]);
 
   return (
     <LogFiles
       isDeleteFilesExecuting={isDeleteFilesExecuting}
       isFetching={isFetching}
-      items={items}
+      items={data}
       type="update"
       onRefreshPress={handleRefreshPress}
       onDeleteFilesPress={handleDeleteFilesPress}
diff --git a/frontend/src/System/Logs/useLogFiles.ts b/frontend/src/System/Logs/useLogFiles.ts
new file mode 100644
index 000000000..50f75950e
--- /dev/null
+++ b/frontend/src/System/Logs/useLogFiles.ts
@@ -0,0 +1,14 @@
+import useApiQuery from 'Helpers/Hooks/useApiQuery';
+import LogFile from 'typings/LogFile';
+
+export default function useLogFiles() {
+  return useApiQuery<LogFile[]>({
+    path: '/log/file',
+  });
+}
+
+export function useUpdateLogFiles() {
+  return useApiQuery<LogFile[]>({
+    path: '/log/file/update',
+  });
+}