diff --git a/frontend/src/components/LogHistory/LogTable.css b/frontend/src/components/LogHistory/LogTable.css
new file mode 100644
index 00000000..86df3e5c
--- /dev/null
+++ b/frontend/src/components/LogHistory/LogTable.css
@@ -0,0 +1,76 @@
+/* Logs Table */
+.logs-table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+    border-radius: 20px;
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+  }
+  
+  .logs-table th {
+    background: #333A3F;
+    color: white;
+    text-align: left;
+    padding: 13px 24px;
+    font-weight: 700;
+    font-size: 17px;
+    white-space: nowrap;
+    letter-spacing: 0.5px;
+  }
+  
+  .logs-table th:first-child {
+    border-top-left-radius: 20px;
+  }
+  
+  .logs-table th:last-child {
+    border-top-right-radius: 20px;
+  }
+  
+  .logs-table td {
+    color: #1E1E1E;
+    font-size: 15px;
+    padding: 8px 24px;
+  }
+  
+  .logs-table td:not(.checkbox-column) {
+    text-align: left;
+    padding: 16px 24px;
+  }
+  
+  /* Selected Row */
+  .logs-table tr.selected {
+    background-color: #D3E4FF;
+  }
+  
+  /* Hover and Even Rows */
+  .logs-table tr:not(.selected):nth-child(even),
+  .logs-table tr:not(.selected):hover {
+    background-color: #F2F5FF;
+  }
+  
+  /* Column Widths */
+  .checkbox-column {
+    width: 64px;
+  }
+  
+  .log-title-column,
+  .type-column,
+  .date-column {
+    width: calc((100% - 64px) / 3);
+  }
+  
+  /* Title Column */
+  .title-column {
+    color: #64B2F6 !important;
+  }
+  
+  /* Sort Icon */
+  .sort-icon {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 5px;
+    margin-bottom: 3px;
+    stroke-width: 2.5;
+  }
\ No newline at end of file
diff --git a/frontend/src/components/LogHistory/LogTable.jsx b/frontend/src/components/LogHistory/LogTable.jsx
new file mode 100644
index 00000000..9312a733
--- /dev/null
+++ b/frontend/src/components/LogHistory/LogTable.jsx
@@ -0,0 +1,51 @@
+import { ChevronUpDownIcon } from "@heroicons/react/24/outline";
+import "./LogTable.css";
+
+export default function LogTable({
+  currentLogs,
+  selectedLogs,
+  handleSelectAll,
+  handleSelectLog,
+  allSelected,
+}) {
+  return (
+    <table className="logs-table">
+      <thead>
+        <tr>
+          <th className="checkbox-column">
+            <input
+              type="checkbox"
+              onChange={handleSelectAll}
+              checked={allSelected}
+            />
+          </th>
+          <th className="log-title-column">
+            LOG TITLE <ChevronUpDownIcon className="sort-icon" />
+          </th>
+          <th className="type-column">
+            TYPE <ChevronUpDownIcon className="sort-icon" />
+          </th>
+          <th className="date-column">
+            DATE CREATED <ChevronUpDownIcon className="sort-icon" />
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {currentLogs.map((log) => (
+          <tr key={log.id} className={selectedLogs[log.id] ? "selected" : ""}>
+            <td className="checkbox-column">
+              <input
+                type="checkbox"
+                checked={!!selectedLogs[log.id]}
+                onChange={() => handleSelectLog(log.id)}
+              />
+            </td>
+            <td className="log-title-column title-column">{log.title}</td>
+            <td className="type-column">{log.type}</td>
+            <td className="date-column">{log.dateCreated}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
diff --git a/frontend/src/components/LogHistory/Pagination.css b/frontend/src/components/LogHistory/Pagination.css
new file mode 100644
index 00000000..13e0c6c4
--- /dev/null
+++ b/frontend/src/components/LogHistory/Pagination.css
@@ -0,0 +1,37 @@
+.pagination {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+  
+  .pagination span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 4px 8px;
+    color: #64B2F6;
+    font-size: 14px;
+    min-width: 13px;
+    height: 20px;
+  }
+  
+  .pagination .current-page {
+    background-color: #244B94;
+    color: white !important;
+    font-weight: 500;
+    border-radius: 50%;
+  }
+  
+  .pagination span.next,
+  .pagination span.previous {
+    min-width: auto;
+    height: auto;
+    color: #244B94;
+    font-weight: 500;
+  }
+  
+  /* Hover state for pagination */
+  .pagination span:hover:not(.current-page):not(.next):not(.previous) {
+    color: #244B94;
+  }
\ No newline at end of file
diff --git a/frontend/src/components/LogHistory/Pagination.jsx b/frontend/src/components/LogHistory/Pagination.jsx
new file mode 100644
index 00000000..3ee20a4b
--- /dev/null
+++ b/frontend/src/components/LogHistory/Pagination.jsx
@@ -0,0 +1,33 @@
+import "./Pagination.css";
+
+export default function Pagination({
+  currentPage,
+  totalPages,
+  handleNextPage,
+  handlePreviousPage,
+  handlePageClick,
+}) {
+  return (
+    <div className="pagination">
+      {currentPage > 1 && (
+        <span className="previous" onClick={handlePreviousPage}>
+          Previous
+        </span>
+      )}
+      {Array.from({ length: totalPages }, (_, index) => (
+        <span
+          key={index + 1}
+          className={currentPage === index + 1 ? "current-page" : "page-number"}
+          onClick={() => handlePageClick(index + 1)}
+        >
+          {index + 1}
+        </span>
+      ))}
+      {currentPage < totalPages && (
+        <span className="next" onClick={handleNextPage}>
+          Next
+        </span>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/pages/log_history/LogHistory.css b/frontend/src/pages/log_history/LogHistory.css
index 805ead66..e55efdc8 100644
--- a/frontend/src/pages/log_history/LogHistory.css
+++ b/frontend/src/pages/log_history/LogHistory.css
@@ -7,83 +7,6 @@
   width: 90%;
 }
 
-/* Logs Table */
-.logs-table {
-  width: 100%;
-  border-collapse: collapse;
-  table-layout: fixed;
-  border-radius: 20px;
-  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-}
-
-.logs-table th {
-  background: #333A3F;
-  color: white;
-  text-align: left;
-  padding: 13px 24px;
-  font-weight: 700;
-  font-size: 17px;
-  white-space: nowrap;
-  letter-spacing: 0.5px;
-}
-
-.logs-table th:first-child {
-  border-top-left-radius: 20px;
-}
-
-.logs-table th:last-child {
-  border-top-right-radius: 20px;
-}
-
-.logs-table td {
-  color: #1E1E1E;
-  font-size: 15px;
-  padding: 8px 24px;
-}
-
-.logs-table td:not(.checkbox-column) {
-  text-align: left;
-  padding: 16px 24px;
-}
-
-/* Selected Row */
-.logs-table tr.selected {
-  background-color: #D3E4FF;
-}
-
-/* Hover and Even Rows */
-.logs-table tr:not(.selected):nth-child(even),
-.logs-table tr:not(.selected):hover {
-  background-color: #F2F5FF;
-}
-
-/* Column Widths */
-.checkbox-column {
-  width: 64px;
-}
-
-.log-title-column,
-.type-column,
-.date-column {
-  width: calc((100% - 64px) / 3);
-}
-
-/* Title Column */
-.title-column {
-  color: #64B2F6 !important;
-}
-
-/* Sort Icon */
-.sort-icon {
-  width: 20px;
-  height: 20px;
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: 5px;
-  margin-bottom: 3px;
-  stroke-width: 2.5;
-}
-
 /* Table Footer */
 .table-footer {
   display: flex;
@@ -97,42 +20,3 @@
 .table-footer .showing-text span {
   color: #64B2F6;
 }
-
-/* Pagination */
-.pagination {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.pagination span {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 4px 8px;
-  color: #64B2F6;
-  font-size: 14px;
-  min-width: 13px;
-  height: 20px;
-}
-
-.pagination .current-page {
-  background-color: #244B94;
-  color: white !important;
-  font-weight: 500;
-  border-radius: 50%;
-}
-
-.pagination span.next,
-.pagination span.previous {
-  min-width: auto;
-  height: auto;
-  color: #244B94;
-  font-weight: 500;
-}
-
-/* Hover state for pagination */
-.pagination span:hover:not(.current-page):not(.next):not(.previous) {
-  color: #244B94;
-}
diff --git a/frontend/src/pages/log_history/LogHistory.jsx b/frontend/src/pages/log_history/LogHistory.jsx
index 0282c071..e8edb6a4 100644
--- a/frontend/src/pages/log_history/LogHistory.jsx
+++ b/frontend/src/pages/log_history/LogHistory.jsx
@@ -1,7 +1,8 @@
 import { useState } from "react";
-import { ChevronUpDownIcon } from "@heroicons/react/24/outline";
 import { NavContentWrapper } from "../../components/NavContentWrapper/NavContentWrapper";
 import ContentHeader from "../../components/ContentHeader/ContentHeader";
+import LogTable from "../../components/LogHistory/LogTable";
+import Pagination from "../../components/LogHistory/Pagination";
 import "./LogHistory.css";
 
 export default function LogHistory() {
@@ -74,72 +75,25 @@ function MainContent() {
   return (
     <div className="table-container">
       <ContentHeader />
-      <table className="logs-table">
-        <thead>
-          <tr>
-            <th className="checkbox-column">
-              <input
-                type="checkbox"
-                onChange={handleSelectAll}
-                checked={allSelected}
-              />
-            </th>
-            <th className="log-title-column">
-              LOG TITLE <ChevronUpDownIcon className="sort-icon" />
-            </th>
-            <th className="type-column">
-              TYPE <ChevronUpDownIcon className="sort-icon" />
-            </th>
-            <th className="date-column">
-              DATE CREATED <ChevronUpDownIcon className="sort-icon" />
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {currentLogs.map((log) => (
-            <tr key={log.id} className={selectedLogs[log.id] ? "selected" : ""}>
-              <td className="checkbox-column">
-                <input
-                  type="checkbox"
-                  checked={!!selectedLogs[log.id]}
-                  onChange={() => handleSelectLog(log.id)}
-                />
-              </td>
-              <td className="log-title-column title-column">{log.title}</td>
-              <td className="type-column">{log.type}</td>
-              <td className="date-column">{log.dateCreated}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+      <LogTable
+        currentLogs={currentLogs}
+        selectedLogs={selectedLogs}
+        handleSelectAll={handleSelectAll}
+        handleSelectLog={handleSelectLog}
+        allSelected={allSelected}
+      />
       <div className="table-footer">
         <div className="showing-text">
           Showing <span>{startRange}</span>-<span>{endRange}</span> of{" "}
           {logs.length} logs
         </div>
-        <div className="pagination">
-          {currentPage > 1 && (
-            <span className="previous" onClick={handlePreviousPage}>
-              Previous
-            </span>
-          )}
-          {Array.from({ length: totalPages }, (_, index) => (
-            <span
-              key={index + 1}
-              className={
-                currentPage === index + 1 ? "current-page" : "page-number"
-              }
-              onClick={() => handlePageClick(index + 1)}
-            >
-              {index + 1}
-            </span>
-          ))}
-          {currentPage < totalPages && (
-            <span className="next" onClick={handleNextPage}>
-              Next
-            </span>
-          )}
-        </div>
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          handleNextPage={handleNextPage}
+          handlePreviousPage={handlePreviousPage}
+          handlePageClick={handlePageClick}
+        />
       </div>
     </div>
   );