diff --git a/src/components/Controller.tsx b/src/components/Controller.tsx
index 1a34f32..d2d6b9f 100644
--- a/src/components/Controller.tsx
+++ b/src/components/Controller.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import axios from 'axios'
 import { useRouter } from 'next/router'
 import type { SelectChangeEvent } from '@mui/material/Select'
@@ -30,44 +30,46 @@ export default function Controller(
 	{
 		isDefaultCollapsed = false,
 		documentOptions,
-		perspectiveOptions,
+		graphTypeOptions,
 		graphOptions,
-		onDocumentChange,
+		onWorkbookChange,
 		onYRangeChange,
-		onPerspectiveChange,
+		onGraphTypeChange,
 		onAddGraph,
 		onWarning
 
 	}: {
 		isDefaultCollapsed: boolean,
 		documentOptions: Array<string>,
-		perspectiveOptions: Array<string>,
+		graphTypeOptions: Array<string>,
 		graphOptions: Array<string>,
-		onDocumentChange: (d: string) => void,
+		onWorkbookChange: (d: string) => void,
 		onYRangeChange: (y: boolean) => void,
-		onPerspectiveChange: (p: string) => void,
+		onGraphTypeChange: (p: string) => void,
 		onAddGraph: (g: string) => void
 		onWarning: (w: string) => void,
 	}
 ) {
+	useEffect(()=>{
+		// this is a limited solution. if the workbook is changed and the graph type is clients
+		// or employees, the graph is not selected
+		changeGraphType('clients')
+	// eslint-disable-next-line
+	}, [])
+	const SPECIAL_DISPLAY = ['client_trends', 'employee_trends']
 
 	const [collapsed, setCollapsed] = useState(isDefaultCollapsed)
-	const [documentSelect, setDocument] = useState(documentOptions[0])
-	
+	const [workbook, setWorkbook] = useState(documentOptions[0])
+
 	const [searchInp, setSearchInp] = useState('')
 	const [searchValue, setSearchValue] = useState<string | null>(null)
 
 	// display options
-	const [displayType, setDisplayType] = useState('clients')
+	const [graphType, setGraphType] = useState('clients')
 	const [yRelative, setYRelative] = useState(true)
 
 	const router = useRouter()
 
-	const handleDocumentChange = (e: SelectChangeEvent) => {
-		setDocument(e.target.value as string)
-		onDocumentChange(e.target.value as string)
-	}
-
 	// References
 	// https://gist.github.com/ndpniraj/2735c3af00a7c4cbe50602ffe6209fc3
 	// https://stackoverflow.com/questions/59233036/react-typescript-get-files-from-file-input
@@ -93,24 +95,42 @@ export default function Controller(
 
 	}
 
+	const handleWorkbookChange = (e: SelectChangeEvent) => {
+		clearSearch()
+
+		if (e.target.value === 'trends' && !SPECIAL_DISPLAY.includes(graphType)) {
+			changeGraphType('client_trends')
+		}
+
+		if (e.target.value !== 'trends' && SPECIAL_DISPLAY.includes(graphType)) {
+			changeGraphType('clients')
+		}
+
+		setWorkbook(e.target.value as string)
+		onWorkbookChange(e.target.value as string)
+	}
 
-	const handleChangeYRange = (event: React.MouseEvent<HTMLElement>, yRange: boolean) => {
+	const handleChangeYRange = (_event: React.MouseEvent<HTMLElement>, yRange: boolean) => {
 		if (yRange !== null) {
 			setYRelative(yRange)
 			onYRangeChange(yRange)
 		}
 	}
-	const handlePerspectiveChange = (e: React.MouseEvent<HTMLElement>, perspective: string) => {
-		if (perspective !== null) {
-			setDisplayType(perspective)
+	const handleGraphTypeChange = (_e: React.MouseEvent<HTMLElement>, type: string) => {
+		changeGraphType(type)
+	}
+
+	const changeGraphType = (type: string) => {
+		if (type !== null) {
+			setGraphType(type)
 			clearSearch()
-			onPerspectiveChange(perspective)
+			onGraphTypeChange(type)
 		}
 	}
 
 	const handleSearchChange = (_e: React.SyntheticEvent<Element, Event>, value: string) => setSearchInp(value)
 
-	const handleSearchValChange = (e: any, newVal: string | null) => setSearchValue(newVal)
+	const handleSearchValChange = (_e: any, newVal: string | null) => setSearchValue(newVal)
 
 	const handleAddGraph = () => {
 		clearSearch()
@@ -135,8 +155,8 @@ export default function Controller(
 						</h2>
 						<div>
 							<Select
-								value={documentSelect}
-								onChange={handleDocumentChange}
+								value={workbook}
+								onChange={handleWorkbookChange}
 							>
 								{documentOptions.map((document, idx) => {
 									return <MenuItem key={idx} value={document}>{document}</MenuItem>
@@ -176,15 +196,15 @@ export default function Controller(
 							</ToggleButtonGroup>
 
 
-							<ToggleButtonGroup value={displayType} exclusive onChange={handlePerspectiveChange}>
-								<ToggleButton className='text-xs' value='clients' disabled={!perspectiveOptions.includes('clients')}>Clients</ToggleButton>
-								<ToggleButton className='text-xs' value='employees' disabled={!perspectiveOptions.includes('employees')}>Employees</ToggleButton>
-								<ToggleButton className='text-xs' value='individual_employees' disabled={!perspectiveOptions.includes('individual_employees')}>Individual Employees</ToggleButton>
-								<ToggleButton className='text-xs' value='individual_clients' disabled={!perspectiveOptions.includes('individual_clients')}>Individual Clients</ToggleButton>
+							<ToggleButtonGroup value={graphType} exclusive onChange={handleGraphTypeChange}>
+								<ToggleButton className='text-xs' value='clients' disabled={!graphTypeOptions.includes('clients')}>Clients</ToggleButton>
+								<ToggleButton className='text-xs' value='employees' disabled={!graphTypeOptions.includes('employees')}>Employees</ToggleButton>
+								<ToggleButton className='text-xs' value='individual_employees' disabled={!graphTypeOptions.includes('individual_employees')}>Individual Employees</ToggleButton>
+								<ToggleButton className='text-xs' value='individual_clients' disabled={!graphTypeOptions.includes('individual_clients')}>Individual Clients</ToggleButton>
 							</ToggleButtonGroup>
-							<ToggleButtonGroup value={displayType} exclusive onChange={handlePerspectiveChange}>
-								<ToggleButton className='text-xs' value='client_trends' disabled={!perspectiveOptions.includes('client_trends')}>Client Trends</ToggleButton>
-								<ToggleButton className='text-xs' value='employee_trends' disabled={!perspectiveOptions.includes('employee_trends')}>Employee Trends</ToggleButton>
+							<ToggleButtonGroup value={graphType} exclusive onChange={handleGraphTypeChange}>
+								<ToggleButton className='text-xs' value='client_trends' disabled={!graphTypeOptions.includes('client_trends')}>Client Trends</ToggleButton>
+								<ToggleButton className='text-xs' value='employee_trends' disabled={!graphTypeOptions.includes('employee_trends')}>Employee Trends</ToggleButton>
 							</ToggleButtonGroup>
 						</div>
 
diff --git a/src/components/Display.tsx b/src/components/Display.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/GraphPanel.tsx b/src/components/GraphPanel.tsx
new file mode 100644
index 0000000..17d9b72
--- /dev/null
+++ b/src/components/GraphPanel.tsx
@@ -0,0 +1,141 @@
+// React
+import * as React from 'react'
+import { useState, useMemo } from 'react'
+
+// Elements
+import Box from '@mui/material/Box'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
+
+import Controller from '@/components/Controller'
+import ChartSpace from '@/components/ChartSpace'
+import Errors from '@/components/Errors'
+
+
+export default function GraphPanel({ sheetsPayload, onWarning }: { sheetsPayload: SheetsPayload, onWarning: (w: string) => void }) {
+
+	const SPECIAL_DISPLAY = ['client_trends', 'employee_trends']
+
+	const [workbook, setWorkbook] = useState<string>(Object.keys(sheetsPayload?.data ?? {})[0] ?? '')
+
+	const [panel, setPanel] = useState<number>(0)
+
+	const [graphs, setGraphs] = useState<Array<string | undefined>>([])
+
+	// display options
+	const [graphType, setGraphType] = useState<string>('')
+	const [yRelative, setYRelative] = useState<boolean>(true)
+	const [autoSort, setAutoSort] = useState<boolean>(true)
+
+	const maxValue: number = useMemo(() => {
+
+		const d = sheetsPayload?.data?.[workbook]?.data
+
+		if (d === undefined) return 0
+
+		const graph_labels: Array<string> = (Object.keys(d?.[graphType] ?? {}))
+		const graph_values: Array<number> = graph_labels.map(label => (
+			(d?.[graphType]?.[label]).map((element: DataElement) => element.value)
+		)).flat()
+
+		return Math.max(...graph_values)
+	}, [sheetsPayload, graphType, workbook])
+
+	const selectedGraphs = useMemo(() => {
+		const available_graphs = sheetsPayload?.data?.[workbook]?.['data']?.[graphType] ?? {}
+		return graphs.reduce((previousValue: FormattedData, currentValue: string | undefined): FormattedData => {
+			if (currentValue === undefined) return previousValue
+
+			previousValue[currentValue] = available_graphs[currentValue]
+			return previousValue
+		}, {})
+	}, [graphType, graphs, sheetsPayload?.data, workbook])
+
+
+	const handleAddGraph = (g: string) => {
+		if (g !== null && g.length > 1 && !graphs.includes(g)) setGraphs((prev) => [g, ...prev])
+	}
+
+	const handleRemoveGraph = (g: string) => {
+		setGraphs(prev => prev.filter(e => e !== g))
+	}
+
+	const handleWorkbookChange = (w: string) => {
+		// rules: 
+		// - if document gets changed to trend and display not client trend, change
+		// - if document gets changed to !trend and display client trend, change
+		// don't need to do any enforcement logic in perspective change because the buttons are disabled
+
+		if (w === 'trends' && !SPECIAL_DISPLAY.includes(graphType)) {
+			setAutoSort(false)
+			handleGraphTypeChange('client_trends')
+		}
+
+		if (w !== 'trends' && SPECIAL_DISPLAY.includes(graphType)) {
+			setAutoSort(true)
+			handleGraphTypeChange('clients')
+		}
+
+		setWorkbook(w)
+		setGraphs([])
+	}
+
+	const handleGraphTypeChange = (p: string) => {
+		if (p === 'clients' || p === 'employees') {
+			setGraphs(Object.keys(sheetsPayload.data?.[workbook]?.data?.[p] ?? {}))
+		} else {
+			setGraphs([])
+		}
+		setGraphType(p)
+	}
+
+	const handleChangePanel = (_event: React.SyntheticEvent, newValue: number) => {
+		setPanel(newValue)
+	}
+
+	return (
+
+		<>
+			<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+				<Tabs value={panel} onChange={handleChangePanel} aria-label="basic tabs example">
+					<Tab label="Graphs" />
+					<Tab label="Errors" />
+				</Tabs>
+			</Box>
+
+			{
+				panel === 0 ? (
+					<div id='display-space' className='flex w-full gap-4'>
+						<div id='data-charts' className={'flex flex-col w-3/4 border gap-4 py-4'}>
+							<ChartSpace
+								graphs={selectedGraphs}
+								autoSort={autoSort}
+								onRemoveGraph={handleRemoveGraph}
+								maxValue={yRelative ? undefined : maxValue}
+							/>
+						</div>
+
+						<div id='data-controller' className='w-fit border py-11'>
+							<Controller
+								isDefaultCollapsed={false}
+								documentOptions={Object.keys(sheetsPayload?.data ?? {})}
+								graphTypeOptions={Object.keys(sheetsPayload?.data?.[workbook]?.data ?? {})}
+								graphOptions={Object.keys(sheetsPayload?.data?.[workbook]?.data?.[graphType] ?? {})}
+								onWorkbookChange={handleWorkbookChange}
+								onYRangeChange={setYRelative}
+								onGraphTypeChange={handleGraphTypeChange}
+								onAddGraph={handleAddGraph}
+								onWarning={onWarning}
+							/>
+
+						</div>
+					</div>
+				) : (
+					<div id='data-input' className='flex flex-col justify-center gap-4'>
+						<Errors errors={sheetsPayload?.data?.[workbook]?.errors ?? {}} />
+					</div>
+				)
+			}
+		</ >
+	)
+}
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index f82347f..34f63b2 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,17 +1,17 @@
 // React
 import * as React from 'react'
-import { useState, useMemo, useEffect } from 'react'
+import { useState, useEffect } from 'react'
+
+import type { SelectChangeEvent } from '@mui/material/Select'
 
 // Elements
 import Box from '@mui/material/Box'
 import Alert from '@mui/material/Alert'
 import Snackbar from '@mui/material/Snackbar'
-import Tabs from '@mui/material/Tabs'
-import Tab from '@mui/material/Tab'
-import Container from '@mui/material/Container'
+import Select from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
 
-import Controller from '@/components/Controller'
-import ChartSpace from '@/components/ChartSpace'
+import GraphPanel from '@/components/GraphPanel'
 import Errors from '@/components/Errors'
 import { getServerSession } from 'next-auth/next'
 import { authOptions } from './api/auth/[...nextauth]'
@@ -28,27 +28,15 @@ export async function getServerSideProps({ req, res }: { req: any, res: any }) {
 
 	if (!session) {
 		return { redirect: { destination: '/api/auth/signin' } }
-	}else{
+	} else {
 		return {
 			props: {
 				sheetsPayload: load_data_sheets(),
 			}
 		}
 	}
-	
-}
-
-
-// useEffect(() => {
-// 	const e = sheetsPayload[workbook]?.errors
-
-// 	if (e !== undefined && Object.keys(e).length > 1) {
-// 		setEExists(true)
-// 	}
-
-// }, [sheetsPayload, workbook])
-
 
+}
 
 export default function Home({ sheetsPayload }: { sheetsPayload: SheetsPayload }) {
 	useEffect(() => {
@@ -57,72 +45,8 @@ export default function Home({ sheetsPayload }: { sheetsPayload: SheetsPayload }
 		}
 	}, [sheetsPayload])
 
-	const SPECIAL_DISPLAY = ['client_trends', 'employee_trends']
-
-	const [workbook, setWorkbookSelected] = useState<string>(Object.keys(sheetsPayload?.data ?? {})[0] ?? '')
-
-	const [warning, setWarning] = useState('')
+	const [warning, setWarning] = useState<string>('')
 
-	const [panel, setPanel] = useState(0)
-
-	const [graphs, setGraphs] = useState<Array<string | undefined>>([])
-
-	// display options
-	const [graphType, setGraphType] = useState('clients')
-	const [yRelative, setYRelative] = useState(true)
-	const [autoSort, setAutoSort] = useState(true)
-
-	const maxValue = useMemo(() => {
-
-		const d = sheetsPayload?.data?.[workbook]?.data
-
-		if (d === undefined) return 0
-
-		const graph_labels: Array<string> = (Object.keys(d?.[graphType] ?? {}))
-		const graph_values: Array<number> = graph_labels.map(label => (
-			(d?.[graphType]?.[label]).map((element: DataElement) => element.value)
-		)).flat()
-
-		return Math.max(...graph_values)
-	}, [sheetsPayload, graphType, workbook])
-
-	const handleAddGraph = (g: string) => {
-		if (g !== null && g.length > 1 && !graphs.includes(g)) setGraphs((prev) => [g, ...prev])
-	}
-
-	const handleRemoveGraph = (g: string) => {
-		setGraphs(prev => prev.filter(e => e !== g))
-	}
-
-	// rules: 
-	// - if document gets changed to client trend and display not client trend, change
-	// - if document gets changed to !client trend and display client trend, change
-	// don't need to do any enforcement logic in perspective change because the buttons are disabled
-	const handleWorkbookChange = (d: string) => {
-		if (d === 'trends' && !SPECIAL_DISPLAY.includes(graphType)) {
-			setAutoSort(false)
-			setGraphType('client_trends')
-		}
-
-		if (d !== 'trends' && SPECIAL_DISPLAY.includes(graphType)) {
-			setAutoSort(true)
-			setGraphType('clients')
-		}
-
-		setWorkbookSelected(d as string)
-		setGraphs([])
-	}
-
-	const handlePerspectiveChange = (p: string) => {
-		setGraphs([])
-		setGraphType(p)
-	}
-
-	const handleChangePanel = (event: React.SyntheticEvent, newValue: number) => {
-		setPanel(newValue)
-	}
-
-	// console.log(Object.entries(sheetsPayload?.[workbook]?.['data']?.[graphType] ?? {}).filter((g, d) => graphs.includes(g))	)
 	return (
 
 		< Box
@@ -133,52 +57,13 @@ export default function Home({ sheetsPayload }: { sheetsPayload: SheetsPayload }
 				justifyContent: 'center',
 				alignItems: 'center',
 				gap: 4,
-				mx: 4
-			}
-			}
+				mx: 4,
+			}}
 		>
 			<h1 className='text-2xl font-bold'>Work Description Report</h1>
 
-			<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-				<Tabs value={panel} onChange={handleChangePanel} aria-label="basic tabs example">
-					<Tab label="Graphs" />
-					<Tab label="Errors" />
-				</Tabs>
-			</Box>
-
-			{
-				panel === 0 ? (
-					<div id='display-space' className='flex w-full gap-4'>
-						<div id='data-charts' className={'flex flex-col w-3/4 border gap-4 py-4'}>
-							<ChartSpace
-								graphs={sheetsPayload?.data?.[workbook]?.['data']?.[graphType] ?? {}}
-								autoSort={autoSort}
-								onRemoveGraph={handleRemoveGraph}
-								maxValue={yRelative ? undefined : maxValue}
-							/>
-						</div>
 
-						<div id='data-controller' className='w-fit border py-11'>
-							<Controller
-								isDefaultCollapsed={false}
-								documentOptions={Object.keys(sheetsPayload?.data ?? {})}
-								perspectiveOptions={Object.keys(sheetsPayload?.data?.[workbook]?.data ?? {})}
-								graphOptions={Object.keys(sheetsPayload?.data?.[workbook]?.data?.[graphType] ?? {})}
-								onDocumentChange={handleWorkbookChange}
-								onYRangeChange={setYRelative}
-								onPerspectiveChange={handlePerspectiveChange}
-								onAddGraph={handleAddGraph}
-								onWarning={setWarning}
-							/>
-
-						</div>
-					</div>
-				) : (
-					<div id='data-input' className='flex flex-col justify-center gap-4'>
-						<Errors errors={sheetsPayload?.data?.[workbook]?.errors ?? {}} />
-					</div>
-				)
-			}
+			<GraphPanel sheetsPayload={sheetsPayload} onWarning={setWarning} />
 
 			<Snackbar open={!!warning} autoHideDuration={12000} onClose={() => setWarning('')}>
 				<Alert onClose={() => setWarning('')} severity={'error'} sx={{ width: '100%' }}>