diff --git a/src/App.css b/src/App.css
index 2428689..d14d55f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,7 +1,6 @@
 .app {
   display: flex;
   justify-content: center;
-  align-items: center;
   gap: 1rem;
 }
 
@@ -10,3 +9,9 @@
   border-radius: 10px;
   box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
 }
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
diff --git a/src/App.tsx b/src/App.tsx
index b81d530..0795fdb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Calendar, EventDetails } from 'components';
+import { Header, Calendar, EventDetails, PageHeader } from 'components';
 import { Event } from 'types/Event';
 import 'App.css';
 
@@ -7,6 +7,7 @@ const App = () => {
   const [selectedEvent, setSelectedEvent] = useState<Event | null>(null);
 
   // TODO: How will this be structured?
+  // Test events => feel free to change the values for testing
   // date and time field NOT FINAL => need to account for timezones (unless it's worked out in the backend)
   const testEvents = [
     {
@@ -83,7 +84,11 @@ const App = () => {
 
   return (
     <div className="app">
-      {selectedEvent && <EventDetails selectedEvent={selectedEvent} />}
+      <div className="sidebar">
+        <Header />
+        <PageHeader />
+        {selectedEvent && <EventDetails selectedEvent={selectedEvent} />}
+      </div>
       <Calendar setSelectedEvent={setSelectedEvent} events={testEvents} />
     </div>
   );
diff --git a/src/components/Calendar/Calendar.css b/src/components/Calendar/Calendar.css
index 9be8bbc..59d811a 100644
--- a/src/components/Calendar/Calendar.css
+++ b/src/components/Calendar/Calendar.css
@@ -31,7 +31,6 @@ h3 {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   width: fit-content;
-  border: 1px solid #bababa;
 }
 
 .calendar-cell {
diff --git a/src/components/EventDetails/EventDetails.css b/src/components/EventDetails/EventDetails.css
index 522b108..bfb6e03 100644
--- a/src/components/EventDetails/EventDetails.css
+++ b/src/components/EventDetails/EventDetails.css
@@ -1,5 +1,5 @@
 .event-details {
   display: block;
-  width: 30rem;
+  width: 20rem;
   padding: 1rem;
 }
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
new file mode 100644
index 0000000..073fbb9
--- /dev/null
+++ b/src/components/Header/Header.css
@@ -0,0 +1,4 @@
+header h1 {
+  margin: 0.25rem;
+  font-size: 2.5rem;
+}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
new file mode 100644
index 0000000..b45ce72
--- /dev/null
+++ b/src/components/Header/Header.tsx
@@ -0,0 +1,11 @@
+import './Header.css';
+
+const Header = () => {
+  return (
+    <header>
+      <h1>Header</h1>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/src/components/PageHeader/PageHeader.css b/src/components/PageHeader/PageHeader.css
new file mode 100644
index 0000000..ee2b93e
--- /dev/null
+++ b/src/components/PageHeader/PageHeader.css
@@ -0,0 +1,5 @@
+.page-header {
+  display: block;
+  width: 20rem;
+  padding: 1rem;
+}
diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx
new file mode 100644
index 0000000..bc6a414
--- /dev/null
+++ b/src/components/PageHeader/PageHeader.tsx
@@ -0,0 +1,11 @@
+import './PageHeader.css';
+
+const PageHeader = () => {
+  return (
+    <div className="page-header card">
+      <h2>Page Header</h2>
+    </div>
+  );
+};
+
+export default PageHeader;
diff --git a/src/components/index.ts b/src/components/index.ts
index 459d446..b4f42f0 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,5 @@
 export { default as Calendar } from 'components/Calendar/Calendar';
 export { default as CalendarEvent } from 'components/CalendarEvent/CalendarEvent';
 export { default as EventDetails } from 'components/EventDetails/EventDetails';
+export { default as PageHeader } from 'components/PageHeader/PageHeader';
+export { default as Header } from 'components/Header/Header';