diff --git a/.env b/.env
index 5f32319..2dc03e4 100644
--- a/.env
+++ b/.env
@@ -1 +1,2 @@
-BROWSER=none
\ No newline at end of file
+BROWSER=none
+NODE_PATH=src/
diff --git a/package.json b/package.json
index bd90542..cbae66e 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
   },
   "scripts": {
     "build": "inferno-scripts build",
-    "dist": "npm run build && build",
+    "dist": "yarn run build && build",
     "eject": "inferno-scripts eject",
     "electron-start": "node src/electron/wait-inferno",
     "electron": "electron .",
diff --git a/public/css/app.css b/public/css/app.css
index 584e722..590f01d 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -31,6 +31,12 @@ bs-container > * {
 	padding: 0.5em 1em;
 }
 
+bs-card,
+bs-card-deck,
+bs-card-group,
+bs-card-header,
+bs-card-body,
+bs-card-footer,
 bs-form-feedback,
 bs-form-group,
 bs-jumbotron {
diff --git a/src/components/Bootstrap/Bootstrap.js b/src/components/Bootstrap/Bootstrap.js
index 8aebd66..3f47325 100644
--- a/src/components/Bootstrap/Bootstrap.js
+++ b/src/components/Bootstrap/Bootstrap.js
@@ -1,4 +1,4 @@
-import Alert from 'inferno-bootstrap/dist/Alert';
+import BSAlert from 'inferno-bootstrap/dist/Alert';
 import Badge from 'inferno-bootstrap/dist/Badge';
 import Breadcrumb from 'inferno-bootstrap/dist/Breadcrumb';
 import BreadcrumbItem from 'inferno-bootstrap/dist/BreadcrumbItem';
@@ -31,10 +31,10 @@ export const BSWrapper = (Component, tagName) => {
 	)
 }
 
+export const Alert = BSWrapper(BSAlert, 'bs-alert');
 export const Jumbotron = BSWrapper(BSJumbotron, 'bs-jumbotron');
 
 export {
-	Alert,
 	Badge,
 	Breadcrumb,
 	BreadcrumbItem,
diff --git a/src/components/Bootstrap/Card.js b/src/components/Bootstrap/Card.js
index e8d269c..63766cd 100644
--- a/src/components/Bootstrap/Card.js
+++ b/src/components/Bootstrap/Card.js
@@ -1,27 +1,30 @@
-import Card from 'inferno-bootstrap/dist/Card/Card';
-import CardBody from 'inferno-bootstrap/dist/Card/CardBody';
-import CardColumns from 'inferno-bootstrap/dist/Card/CardColumns';
-import CardDeck from 'inferno-bootstrap/dist/Card/CardDeck';
-import CardFooter from 'inferno-bootstrap/dist/Card/CardFooter';
-import CardGroup from 'inferno-bootstrap/dist/Card/CardGroup';
-import CardHeader from 'inferno-bootstrap/dist/Card/CardHeader';
+import BSCard from 'inferno-bootstrap/dist/Card/Card';
+import BSCardBody from 'inferno-bootstrap/dist/Card/CardBody';
+import BSCardColumns from 'inferno-bootstrap/dist/Card/CardColumns';
+import BSCardDeck from 'inferno-bootstrap/dist/Card/CardDeck';
+import BSCardFooter from 'inferno-bootstrap/dist/Card/CardFooter';
+import BSCardGroup from 'inferno-bootstrap/dist/Card/CardGroup';
+import BSCardHeader from 'inferno-bootstrap/dist/Card/CardHeader';
+import BSCardImgOverlay from 'inferno-bootstrap/dist/Card/CardImgOverlay';
 import CardImg from 'inferno-bootstrap/dist/Card/CardImg';
-import CardImgOverlay from 'inferno-bootstrap/dist/Card/CardImgOverlay';
 import CardLink from 'inferno-bootstrap/dist/Card/CardLink';
 import CardSubtitle from 'inferno-bootstrap/dist/Card/CardSubtitle';
 import CardText from 'inferno-bootstrap/dist/Card/CardText';
 import CardTitle from 'inferno-bootstrap/dist/Card/CardTitle';
 
+import { BSWrapper } from 'components/Bootstrap';
+
+export const Card = BSWrapper(BSCard, 'bs-card');
+export const CardBody = BSWrapper(BSCardBody, 'bs-card-body');
+export const CardColumns = BSWrapper(BSCardColumns, 'bs-card-columns');
+export const CardDeck = BSWrapper(BSCardDeck, 'bs-card-deck');
+export const CardFooter = BSWrapper(BSCardFooter, 'bs-card-footer');
+export const CardGroup = BSWrapper(BSCardGroup, 'bs-card-group');
+export const CardHeader = BSWrapper(BSCardHeader, 'bs-card-header');
+export const CardImgOverlay = BSWrapper(BSCardImgOverlay, 'bs-card-img-overlay');
+
 export {
-	Card,
-	CardBody,
-	CardColumns,
-	CardDeck,
-	CardFooter,
-	CardGroup,
-	CardHeader,
 	CardImg,
-	CardImgOverlay,
 	CardLink,
 	CardSubtitle,
 	CardText,
diff --git a/src/components/Bootstrap/Form.js b/src/components/Bootstrap/Form.js
index 410c1f9..21ef2b4 100644
--- a/src/components/Bootstrap/Form.js
+++ b/src/components/Bootstrap/Form.js
@@ -1,4 +1,3 @@
-import { BSWrapper } from './Bootstrap';
 import Button from 'inferno-bootstrap/dist/Button';
 import Form from 'inferno-bootstrap/dist/Form/Form';
 import BSFormFeedback from 'inferno-bootstrap/dist/Form/FormFeedback';
@@ -11,6 +10,8 @@ import InputGroupButtonDropdown from 'inferno-bootstrap/dist/Form/InputGroupButt
 import InputGroupText from 'inferno-bootstrap/dist/Form/InputGroupText';
 import Label from 'inferno-bootstrap/dist/Form/Label';
 
+import { BSWrapper } from 'components/Bootstrap';
+
 export const FormFeedback = BSWrapper(BSFormFeedback, 'bs-form-feedback');
 export const FormGroup = BSWrapper(BSFormGroup, 'bs-form-group');
 
diff --git a/src/components/Bootstrap/Grid.js b/src/components/Bootstrap/Grid.js
index c2d7518..b3c18d3 100644
--- a/src/components/Bootstrap/Grid.js
+++ b/src/components/Bootstrap/Grid.js
@@ -1,6 +1,7 @@
 import BSCol from 'inferno-bootstrap/dist/Col';
 import BSContainer from 'inferno-bootstrap/dist/Container';
 import BSRow from 'inferno-bootstrap/dist/Row';
+
 import { BSWrapper } from './Bootstrap'
 
 export const Col = BSWrapper(BSCol, 'bs-col');
diff --git a/src/components/FormBlock.js b/src/components/Form/FormBlock.js
similarity index 75%
rename from src/components/FormBlock.js
rename to src/components/Form/FormBlock.js
index 584ee27..28762c6 100644
--- a/src/components/FormBlock.js
+++ b/src/components/Form/FormBlock.js
@@ -3,7 +3,7 @@ import {
 	FormGroup,
 	Input,
 	Label,
-} from './Bootstrap';
+} from 'components/Bootstrap';
 
 export const FormBlock = ({
 	children,
@@ -16,7 +16,7 @@ export const FormBlock = ({
 		: <Input id={props.name} name={props.name} type={type} {...props} />;
 
 	return (
-		<Col xs={12} sm={6} md={3}>
+		<Col xs={12} sm={6} md={3} className="d-flex align-items-baseline justify-content-around">
 			<FormGroup>
 				<Label for={props.name}>{label}</Label>
 				{formElement}
diff --git a/src/components/Form/index.js b/src/components/Form/index.js
new file mode 100644
index 0000000..d178283
--- /dev/null
+++ b/src/components/Form/index.js
@@ -0,0 +1 @@
+export * from './FormBlock';
diff --git a/src/components/index.js b/src/components/index.js
index 483676b..e2e999f 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,2 +1,2 @@
 export * from './Bootstrap';
-export * from './FormBlock';
+export * from './Form';
diff --git a/src/views/Film/FilmAddView.js b/src/views/Film/FilmAddView.js
index 4c8e227..3a4ce62 100644
--- a/src/views/Film/FilmAddView.js
+++ b/src/views/Film/FilmAddView.js
@@ -1,67 +1,92 @@
-import { Component } from 'inferno';
+import { linkEvent, Component } from 'inferno';
 
 import {
 	Button,
+	Card,
+	CardBody,
+	CardHeader,
+	CardFooter,
+	CardTitle,
 	Col,
 	Form,
 	Row,
-} from '../../components/Bootstrap'
+} from 'components/Bootstrap'
 
-import { FormBlock } from '../../components';
+import { FormBlock } from 'components/Form';
 
 export class FilmAddView extends Component {
 	constructor (props) {
 		super (props);
 
 		this.state = {
-
+			form: {
+				valid: {},
+				values: {},
+			}
 		};
 	}
 
+	handleFormChange (e) {
+		console.log(e);
+	}
+
 	render () {
 		return (
-			<Form>
-				<Row>
-					<FormBlock
-						label="Brand"
-						name="brand"
-						required
-					/>
-					<FormBlock
-						label="Film Name"
-						name="film-name"
-						required
-					/>
-					<FormBlock
-						label="Film Speed (ISO)"
-						max="6400"
-						name="film-speed-asa"
-						required
-						type="number"
-					/>
-					<FormBlock
-						label="Film Speed (DIN)"
-						name="film-speed-din"
-						type="number"
-					/>
-					<FormBlock
-						label="Film Format"
-						name="film-format"
-					>
-						<select className="custom-select" id="film-format" name="film-format">
-							<option value="110">110</option>
-							<option value="120">120</option>
-							<option value="127">127</option>
-							<option value="135">135</option>
-						</select>
-					</FormBlock>
-				</Row>
-				<Row>
-					<Col xs={12}>
-						<Button color="primary" type="submit">Save</Button>
-					</Col>
-				</Row>
-			</Form>
+			<Row className="full-height">
+				<Col sm={12} md={8} lg={4} className="abs-center">
+					<Form onChange={ linkEvent(this, this.handleFormChange) }>
+						<Card>
+							<CardHeader>
+								<CardTitle>Add a Film</CardTitle>
+							</CardHeader>
+							<CardBody>
+								<Row className="align-items-baseline">
+									<FormBlock
+										label="Brand"
+										name="brand"
+										required
+									/>
+									<FormBlock
+										label="Film Name"
+										name="film-name"
+										required
+									/>
+									<FormBlock
+										label="Film Speed (ISO)"
+										max="6400"
+										name="film-speed-asa"
+										required
+										type="number"
+									/>
+									<FormBlock
+										label="Film Speed (DIN)"
+										name="film-speed-din"
+										type="number"
+									/>
+									<FormBlock
+										label="Film Format"
+										name="film-format"
+									>
+										<select className="custom-select" id="film-format" name="film-format">
+											<option value="110">110</option>
+											<option value="120">120</option>
+											<option value="127">127</option>
+											<option value="135">135</option>
+										</select>
+									</FormBlock>
+								</Row>
+							</CardBody>
+							<CardFooter>
+								<Row>
+									<Col xs={12}>
+										<Button color="primary" type="submit">Save</Button>
+									</Col>
+								</Row>
+							</CardFooter>
+						</Card>
+					</Form>
+				</Col>
+			</Row>
 		)
 	}
 }
diff --git a/src/views/HomeView.js b/src/views/HomeView.js
index 835e5a7..c0e6e68 100644
--- a/src/views/HomeView.js
+++ b/src/views/HomeView.js
@@ -2,7 +2,7 @@ import {
 	Container,
 	Jumbotron,
 	Row,
-} from '../components/Bootstrap';
+} from 'components/Bootstrap';
 
 function handleDrop (e) {
 	e.preventDefault();
diff --git a/src/views/OopsView.js b/src/views/OopsView.js
index 3f0fdc8..cea01d2 100644
--- a/src/views/OopsView.js
+++ b/src/views/OopsView.js
@@ -1,4 +1,4 @@
-import { Alert, Row } from '../components/Bootstrap';
+import { Alert, Row } from 'components/Bootstrap';
 
 export const OopsView = (props) => (
 	<Row className="align-items-center justify-content-center full-height">