diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.tsx
new file mode 100644
index 00000000..e9066d58
--- /dev/null
+++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+
+import {
+    DialogContent,
+    DialogTitle,
+    TabPanel,
+    Typography,
+} from "@mui/joy";
+
+
+interface CustomTabPanelProps {
+    children: React.ReactNode,
+    tabName: string,
+    title: string,
+}
+
+/**
+ * Renders a customized tab panel to be extended for displaying extra information in the sidebar.
+ *
+ * @param props
+ * @param props.children
+ * @param props.tabName
+ * @param props.title
+ * @return
+ */
+const CustomTabPanel = ({children, tabName, title}: CustomTabPanelProps) => {
+    return (
+        <TabPanel value={tabName}>
+            <DialogTitle>
+                <Typography
+                    fontSize={14}
+                    fontWeight={400}
+                    level={"body-md"}
+                    textTransform={"uppercase"}
+                >
+                    {title}
+                </Typography>
+            </DialogTitle>
+            <DialogContent>
+                {children}
+            </DialogContent>
+        </TabPanel>
+    );
+};
+
+
+export default CustomTabPanel;
diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx
index 13ed6ebc..bde0afe3 100644
--- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx
+++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx
@@ -1,11 +1,8 @@
 import {useContext} from "react";
 
 import {
-    DialogContent,
-    DialogTitle,
     Divider,
     List,
-    TabPanel,
 } from "@mui/joy";
 
 import AbcIcon from "@mui/icons-material/Abc";
@@ -14,6 +11,7 @@ import StorageIcon from "@mui/icons-material/Storage";
 import {StateContext} from "../../../contexts/StateContextProvider";
 import {formatSizeInBytes} from "../../../utils/units";
 import CustomListItem from "../../CustomListItem";
+import CustomTabPanel from "./CustomTabPanel";
 import {TAB_NAME} from "./index";
 
 import "./index.css";
@@ -28,22 +26,22 @@ const FileInfoTab = () => {
     const {fileName, originalFileSizeInBytes} = useContext(StateContext);
 
     return (
-        <TabPanel value={TAB_NAME.FILE_INFO}>
-            <DialogTitle>File Info</DialogTitle>
-            <DialogContent>
-                <List>
-                    <CustomListItem
-                        content={fileName}
-                        icon={<AbcIcon/>}
-                        title={"File Info"}/>
-                    <Divider/>
-                    <CustomListItem
-                        content={formatSizeInBytes(originalFileSizeInBytes)}
-                        icon={<StorageIcon/>}
-                        title={"Original Size"}/>
-                </List>
-            </DialogContent>
-        </TabPanel>
+        <CustomTabPanel
+            tabName={TAB_NAME.FILE_INFO}
+            title={"File Info"}
+        >
+            <List>
+                <CustomListItem
+                    content={fileName}
+                    icon={<AbcIcon/>}
+                    title={"File Info"}/>
+                <Divider/>
+                <CustomListItem
+                    content={formatSizeInBytes(originalFileSizeInBytes)}
+                    icon={<StorageIcon/>}
+                    title={"Original Size"}/>
+            </List>
+        </CustomTabPanel>
     );
 };