diff --git a/client/src/features/info/Info.jsx b/client/src/features/info/Info.jsx
index 93c0aec96..ec9780518 100644
--- a/client/src/features/info/Info.jsx
+++ b/client/src/features/info/Info.jsx
@@ -1,82 +1,16 @@
-import { Icon } from '@chakra-ui/react';
-import { FiChevronUp } from 'react-icons/fi';
 import style from './Info.module.css';
+import InfoTitle from './InfoTitle';
+import InfoLogger from './InfoLogger';
 
 export default function Info() {
+  const data = {};
+  const logData = [];
   return (
     <>
       <div className={style.main}>Event 1/31</div>
-
-      <div className={style.container}>
-        <div className={style.header}>
-          Now
-          <Icon
-            className={style.moreExpanded}
-            as={FiChevronUp}
-            marginTop='-0.5em'
-            // onClick={() => props.setCollapsed(true)}
-          />
-        </div>
-
-        <div>
-          <span className={style.label}>Title: </span>Demo title
-        </div>
-        <div>
-          <span className={style.label}>Subtitle: </span>Demo Subtitle
-        </div>
-        <div>
-          <span className={style.label}>Presenter: </span>Demo Presenter Name
-        </div>
-        <div>
-          <span className={style.label}>Notes: </span>Demo Notes
-        </div>
-      </div>
-
-      <div className={style.container}>
-        <div className={style.header}>
-          Next
-          <Icon
-            className={style.moreExpanded}
-            as={FiChevronUp}
-            marginTop='-0.5em'
-            // onClick={() => props.setCollapsed(true)}
-          />
-        </div>
-        <div>
-          <span className={style.label}>Title: </span>Demo title
-        </div>
-        <div>
-          <span className={style.label}>Subtitle: </span>Demo Subtitle
-        </div>
-        <div>
-          <span className={style.label}>Presenter: </span>Demo Presenter Name
-        </div>
-        <div>
-          <span className={style.label}>Notes: </span>Demo Notes
-        </div>
-      </div>
-
-      <div className={style.container}>
-        <div className={style.header}>
-          Log
-          <Icon
-            className={style.moreCollapsed}
-            as={FiChevronUp}
-            marginTop='-0.5em'
-            // onClick={() => props.setCollapsed(true)}
-          />
-        </div>
-        <ul className={style.log}>
-          <li className={style.info}>10:35:23 [PLAYBACK] Next</li>
-          <li className={style.client}>
-            10:32:10 [CLIENT] New Socket client (Total now 3)
-          </li>
-          <li className={style.info}>10:28:23 [PLAYBACK] Next</li>
-          <li className={style.info}>10:25:23 [PLAYBACK] Play</li>
-          <li className={style.info}>10:23:13 [SERVER] Server Reconnected</li>
-          <li className={style.error}>10:23:10 [SERVER] Server Disconnected</li>
-        </ul>
-      </div>
+      <InfoTitle title={'Now'} data={data} />
+      <InfoTitle title={'Next'} data={data} />
+      <InfoLogger logData={logData} />
     </>
   );
 }
diff --git a/client/src/features/info/InfoLogger.jsx b/client/src/features/info/InfoLogger.jsx
new file mode 100644
index 000000000..677502ce2
--- /dev/null
+++ b/client/src/features/info/InfoLogger.jsx
@@ -0,0 +1,30 @@
+import { Icon } from '@chakra-ui/react';
+import { FiChevronUp } from 'react-icons/fi';
+import style from './Info.module.css';
+
+export default function InfoLogger(props) {
+  const { logData } = props;
+  return (
+    <div className={style.container}>
+      <div className={style.header}>
+        Log
+        <Icon
+          className={style.moreCollapsed}
+          as={FiChevronUp}
+          marginTop='-0.5em'
+          // onClick={() => props.setCollapsed(true)}
+        />
+      </div>
+      <ul className={style.log}>
+        <li className={style.info}>10:35:23 [PLAYBACK] Next</li>
+        <li className={style.client}>
+          10:32:10 [CLIENT] New Socket client (Total now 3)
+        </li>
+        <li className={style.info}>10:28:23 [PLAYBACK] Next</li>
+        <li className={style.info}>10:25:23 [PLAYBACK] Play</li>
+        <li className={style.info}>10:23:13 [SERVER] Server Reconnected</li>
+        <li className={style.error}>10:23:10 [SERVER] Server Disconnected</li>
+      </ul>
+    </div>
+  );
+}
diff --git a/client/src/features/info/InfoTitle.jsx b/client/src/features/info/InfoTitle.jsx
new file mode 100644
index 000000000..d77cddba6
--- /dev/null
+++ b/client/src/features/info/InfoTitle.jsx
@@ -0,0 +1,33 @@
+import { Icon } from '@chakra-ui/react';
+import { FiChevronUp } from 'react-icons/fi';
+import style from './Info.module.css';
+
+export default function InfoTitle(props) {
+  const { title, data } = props;
+  return (
+    <div className={style.container}>
+      <div className={style.header}>
+        {title}
+        <Icon
+          className={style.moreExpanded}
+          as={FiChevronUp}
+          marginTop='-0.5em'
+          // onClick={() => props.setCollapsed(true)}
+        />
+      </div>
+
+      <div>
+        <span className={style.label}>Title: </span>Demo title
+      </div>
+      <div>
+        <span className={style.label}>Subtitle: </span>Demo Subtitle
+      </div>
+      <div>
+        <span className={style.label}>Presenter: </span>Demo Presenter Name
+      </div>
+      <div>
+        <span className={style.label}>Notes: </span>Demo Notes
+      </div>
+    </div>
+  );
+}