Header improvements. @observer implemented.

src/ui/components/header/Header.tsx

 import * as React from "react";
 import styled from "styled-components";
+import { HSpacing } from "../../stylesheets/Mixins";
+import { em } from "../../stylesheets/Units";
 import { HeaderBase } from "./HeaderBase";
 
 export class Header extends HeaderBase {
 	protected Container = styled.div`
-		height: 100%;
-		padding: 20px;
+		display: flex;
+		align-items: center;
 	`;
 
 	protected Title = styled.div`
 		font-weight: bold;
 		font-size: 20px;
+		padding: 20px;
 	`;
 
 	public render() {
-		const { title } = this.props;
+		const { title, button } = this.props;
 
 		const { Container, Title } = this;
 
 		return (
 			<Container>
+				{button}
+
 				<Title>{title}</Title>
 			</Container>
 		);

src/ui/components/header/HeaderBase.ts

+import * as React from "react";
 import {
 	BaseComponent,
 	BaseComponentProps,
@@ -6,6 +7,7 @@ import {
 
 export interface HeaderBaseProps extends BaseComponentProps {
 	title: string;
+	button?: React.ReactNode;
 }
 
 export interface HeaderBaseState extends BaseComponentState {}

src/ui/layout/DefaultLayout.tsx

 import * as _ from "lodash";
 import * as React from "react";
-import styled, { css, keyframes } from "styled-components";
+import styled, { css } from "styled-components";
+import { observer } from "../../../node_modules/mobx-react";
 import { LayoutOptions } from "../navigation/Layout";
 import { WiderThan } from "../stylesheets/Mixins";
 import { Breakpoint } from "../stylesheets/Variables";
@@ -26,6 +27,7 @@ export interface DefaultLayoutProps<
 
 export interface DefaultLayoutState extends LayoutBaseState {}
 
+@observer
 export class DefaultLayout<
 	P extends DefaultLayoutProps = DefaultLayoutProps,
 	S extends DefaultLayoutState = DefaultLayoutState
@@ -36,21 +38,21 @@ export class DefaultLayout<
 		display: flex;
 		flex-direction: column;
 
-		${WiderThan(
-			Breakpoint.medium,
-			css`
-				display: grid;
-				grid-template-rows: min-content auto;
-				grid-template-columns: min-content auto;
-			`
-		)};
+		${(p: { headerToShow: boolean }) =>
+			WiderThan(
+				Breakpoint.medium,
+				css`
+					display: grid;
+					grid-template-rows: ${p.headerToShow ? "min-content" : "0"} auto;
+					grid-template-columns: min-content auto;
+				`
+			)};
 	`;
 
 	protected NavBarWrapper = styled.div`
 		box-shadow: 0px 0px 10px rgba(67, 52, 52, 0.4);
 		position: relative;
 		width: 100%;
-		height: 100%;
 
 		${WiderThan(
 			Breakpoint.medium,
@@ -114,8 +116,10 @@ export class DefaultLayout<
 			navBar = options.navOptions;
 		}
 
+		const headerToShow = !_.isNil(header) && !_.isNil(header.render);
+
 		return (
-			<Container>
+			<Container headerToShow={headerToShow}>
 				{!_.isNil(header) &&
 					!_.isNil(header.render) && (
 						<HeaderWrapper

src/ui/pages/course/Course.tsx

@@ -13,7 +13,7 @@ import { CourseBase } from "./CourseBase";
 @observer
 export class Course extends CourseBase {
 	protected controls = {
-		container: React.createRef<HTMLDivElement>()
+		classListWrapper: React.createRef<HTMLDivElement>()
 	};
 
 	protected prevScrollPos: number = 0;
@@ -21,11 +21,10 @@ export class Course extends CourseBase {
 	protected navBarMatches: boolean;
 
 	protected Container = styled.div`
-		display: grid;
+		display: flex;
+		flex-direction: column;
 		height: 100%;
 		width: 100%;
-		grid-template-columns: 100%;
-		grid-template-rows: fit-content(50%) auto;
 		min-height: 0;
 		overflow: auto;
 		grid-gap: 0;
@@ -34,6 +33,7 @@ export class Course extends CourseBase {
 		${WiderThan(
 			Breakpoint.small,
 			css`
+				display: grid;
 				grid-template-columns: 350px auto;
 				grid-template-rows: auto auto auto;
 			`
@@ -50,7 +50,7 @@ export class Course extends CourseBase {
 	protected ClassListWrapper = styled.div`
 		${List};
 		height: initial;
-		grid-row: 2 / 3;
+		flex-grow: 1;
 
 		${WiderThan(
 			Breakpoint.small,
@@ -71,6 +71,7 @@ export class Course extends CourseBase {
 		align-items: center;
 		transition: max-height ease 0.5s;
 		max-height: 50%;
+		flex-shrink: 0;
 
 		${(p: { empty: boolean }) =>
 			p.empty &&
@@ -96,22 +97,22 @@ export class Course extends CourseBase {
 	`;
 
 	public componentDidMount() {
-		const { container } = this.controls;
+		const { classListWrapper } = this.controls;
 
-		if (_.isNil(container.current)) {
+		if (_.isNil(classListWrapper.current)) {
 			return;
 		}
 
-		container.current.addEventListener("scroll", () => {
+		classListWrapper.current.addEventListener("scroll", () => {
 			const layoutOptions = this.layoutOptions as Readonly<
 				DefaultLayoutOptions
 			>;
 
-			if (_.isNil(container.current)) {
+			if (_.isNil(classListWrapper.current)) {
 				return;
 			}
 
-			const currentScrollPos = container.current.scrollTop;
+			const currentScrollPos = classListWrapper.current.scrollTop;
 
 			if (this.prevScrollPos < currentScrollPos - 50) {
 				if (
@@ -203,14 +204,14 @@ export class Course extends CourseBase {
 					}}
 				</MediaQuery> */}
 
-				<Container innerRef={controls.container}>
+				<Container>
 					<VideoWrapper empty={_.isNil(currentClass)}>
 						{!_.isNil(currentClass) && (
 							<CourseClassPlayer courseClass={currentClass} />
 						)}
 					</VideoWrapper>
 
-					<ClassListWrapper>
+					<ClassListWrapper innerRef={controls.classListWrapper}>
 						{!_.isNil(currentCourse.value) &&
 							!_.isNil(currentCourse.value.classes) &&
 							currentCourse.value.classes.map(clazz => (

src/ui/pages/course/CourseBase.tsx

 import * as _ from "lodash";
 import { autorun } from "mobx";
 import * as React from "react";
+import { NavLink } from "react-router-dom";
+import styled, { css } from "styled-components";
 import { ClassesFetcher } from "../../actions/ClassesFetcher";
 import { ClassSetter } from "../../actions/ClassSetter";
 import { DocumentTitle } from "../../actions/DocumentTitle";
 import { Header } from "../../components/header/Header";
 import { DefaultLayoutOptions } from "../../layout/DefaultLayout";
 import { LayoutOptions } from "../../navigation/Layout";
+import { OnHover } from "../../stylesheets/Mixins";
 import { BasePage, BasePageProps, BasePageState } from "../BasePage";
 
 export interface CourseMatchParams {
@@ -38,6 +41,24 @@ export abstract class CourseBase<
 		}
 	};
 
+	protected NavButton = styled(NavLink).attrs({ activeClassName: "active" })`
+		position: relative;
+		background-color: transparent;
+		text-align: center;
+		text-decoration: none;
+		color: #000;
+		box-sizing: content-box;
+		padding: 20px;
+
+		${OnHover(css`
+			background-color: #eee;
+		`)};
+
+		> .la {
+			font-size: 1.5em;
+		}
+	`;
+
 	protected headerProps: CourseBaseHeaderProps = {};
 
 	protected action = autorun(() => this.handleHeaderTitleChange());
@@ -48,7 +69,6 @@ export abstract class CourseBase<
 
 	protected setHeaderTitle(title: string) {
 		const { headerProps } = this;
-		const { layoutOptions } = this;
 
 		if (headerProps.title !== title) {
 			headerProps.title = title;
@@ -59,6 +79,11 @@ export abstract class CourseBase<
 						<Header
 							{...headerProps}
 							title={headerProps.title || ""}
+							button={
+								<this.NavButton to="/" exact={true}>
+									<i className="la la-home" />
+								</this.NavButton>
+							}
 						/>
 					)
 				}

src/ui/pages/faqs/FAQs.tsx

 import * as _ from "lodash";
 import * as React from "react";
 import styled from "styled-components";
+import { observer } from "../../../../node_modules/mobx-react";
 import { List } from "../../stylesheets/Mixins";
 import { FAQItem } from "./faqitem/FAQItem";
 import { FAQsBase } from "./FAQsBase";
 
+@observer
 export class FAQs extends FAQsBase {
 	protected Container = styled.div`
 		display: flex;

src/ui/pages/home/Home.tsx

 import * as React from "react";
 import styled from "styled-components";
-import { NavBar } from "../../components/navbar/NavBar";
-import { DefaultLayout } from "../../layout/DefaultLayout";
-import { LayoutOptions } from "../../navigation/Layout";
+import { observer } from "../../../../node_modules/mobx-react";
 import { Grid } from "../../stylesheets/Mixins";
 import { HomeBase } from "./HomeBase";
 
+@observer
 export class Home extends HomeBase {
 	protected Container = styled.div`
 		${Grid};
 		grid-template-columns: auto fit-content(100%) auto;
 		grid-template-rows: auto fit-content(100%) auto;
+		height: 100%;
+		width: 100%;
 	`;
 
 	protected Image = styled.a`

src/ui/pages/updates/Updates.tsx

 import * as _ from "lodash";
 import * as React from "react";
 import styled from "styled-components";
+import { observer } from "../../../../node_modules/mobx-react";
 import { ResponsiveList } from "../../stylesheets/Mixins";
 import { UpdateItem } from "./updateitem/UpdateItem";
 import { UpdatesBase } from "./UpdatesBase";
 
+@observer
 export class Updates extends UpdatesBase {
 	protected UpdateList = styled.div`
 		${ResponsiveList};