diff --git a/src/components/HomePage/index.tsx b/src/components/HomePage/index.tsx
index c384629..c7f161a 100644
--- a/src/components/HomePage/index.tsx
+++ b/src/components/HomePage/index.tsx
@@ -1,7 +1,10 @@
-import { Grid } from '@material-ui/core';
-import { Inbox, SideBar } from 'components';
+import { Grid as MUIGrid } from '@material-ui/core';
+import { styled as muiStyled } from '@material-ui/core/styles';
+import { Inbox, SideBar, TopBar } from 'components';
 import { InboxItem } from 'models';
 import React from 'react';
+import styled from 'styled-components';
+import theme from 'styles/theme';
 
 const dummyShortItem: InboxItem = {
   title: 'Button not working',
@@ -15,8 +18,8 @@ const dummyLongItem: InboxItem = {
 
 const searchTargetItem: InboxItem = {
   title: 'special',
-  message: 'super top secret message'
-}
+  message: 'super top secret message',
+};
 
 const dummyItems: InboxItem[] = [
   dummyShortItem,
@@ -30,9 +33,55 @@ const dummyItems: InboxItem[] = [
 
 export const HomePage: React.FunctionComponent = () => {
   return (
-    <Grid container direction="row" alignItems="stretch">
-      <SideBar />
-      <Inbox unresolvedItems={dummyItems} resolvedItems={dummyItems} />
+    <Grid container>
+      <Grid item xs={3}>
+        <Header>patch</Header>
+      </Grid>
+      <Grid item xs={9}>
+        <TopBar />
+      </Grid>
+      <NestedGridContainter container item xs={3}>
+        <SideBar />
+      </NestedGridContainter>
+      <Grid item xs={3}>
+        <Inbox unresolvedItems={dummyItems} resolvedItems={dummyItems} />
+      </Grid>
     </Grid>
   );
 };
+
+const Grid = muiStyled(MUIGrid)({
+  '&.MuiGrid-container': {
+    display: 'flex',
+    height: '100vh',
+  },
+});
+
+const NestedGridContainter = styled(MUIGrid)({
+  '&.MuiGrid-container': {
+    display: 'flex',
+    height: '90vh',
+  },
+});
+
+const Header = styled.header`
+  height: 10vh;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding-left: 16px;
+  background-color: ${theme.colors.backgroundWash};
+  font-family: Roboto;
+  font-size: 24px;
+  font-weight: ${theme.fontWeights.bold};
+  color: ${theme.colors.darkGrey};
+  border-right-style: solid;
+  border-right-color: ${theme.colors.mediumGrey};
+  border-right-width: 1px;
+  border-bottom-style: solid;
+  border-bottom-color: ${theme.colors.mediumGrey};
+  border-bottom-width: 1px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
+  position: relative;
+  z-index: 1;
+`;
diff --git a/src/components/Inbox/index.tsx b/src/components/Inbox/index.tsx
index b80a00b..55684ac 100644
--- a/src/components/Inbox/index.tsx
+++ b/src/components/Inbox/index.tsx
@@ -1,15 +1,17 @@
 import {
+  Box as MUIBox,
   Checkbox as MUICheckbox,
   Collapse,
   Divider as MUIDivider,
-  Grid,
   IconButton,
   List,
   ListItem,
   ListItemText,
   ListSubheader,
   StylesProvider,
+  Typography,
 } from '@material-ui/core';
+import { styled as muiStyled } from '@material-ui/core/styles';
 import { ArrowDropDown, ArrowRight } from '@material-ui/icons';
 import { DispatchProps } from 'components/dispatchProps';
 import { InboxItem } from 'models';
@@ -91,7 +93,6 @@ export const InboxComponent: React.FunctionComponent<InboxComponentProps> = ({
   };
 
   const handleSearch = (event: any) => {
-    console.log('handleSearch with', event.target.value);
     setSearchQuery(event.target.value);
   };
 
@@ -109,185 +110,175 @@ export const InboxComponent: React.FunctionComponent<InboxComponentProps> = ({
   };
 
   return (
-    <StylesProvider injectFirst>
-      <Container direction="column">
-        <InboxHeader>Inbox</InboxHeader>
+    <Box height="90vh" display="flex" flexDirection="column" overflow="auto">
+      <SearchContainer display="flex" alignItems="center">
+        <SearchIcon src={require('../../images/search-icon.png')} />
         <SearchBar type="text" placeholder="Search" onChange={handleSearch} />
-        <List
-          component="nav"
-          aria-label="unresolved"
-          subheader={
-            <InboxSectionHeader disableGutters disableSticky>
-              <SectionHeaderButton
-                disableRipple
-                onClick={() => handleClick(InboxSection.Unresolved)}
-              >
-                {arrowIcon(unresolvedOpen)}
-              </SectionHeaderButton>
-              {InboxSection.Unresolved}
-            </InboxSectionHeader>
-          }
-        >
-          <Divider />
-          <Collapse in={unresolvedOpen} timeout="auto" unmountOnExit>
-            {filteredItems(unresolvedItems).map((item, index) =>
-              getInboxItemComponent(item, index),
-            )}
-          </Collapse>
-        </List>
-        <List
-          component="nav"
-          aria-label="resolved"
-          subheader={
-            <InboxSectionHeader disableGutters disableSticky>
-              <SectionHeaderButton
-                disableRipple
-                onClick={() => handleClick(InboxSection.Resolved)}
-              >
-                {arrowIcon(resolvedOpen)}
-              </SectionHeaderButton>
-              {InboxSection.Resolved}
-            </InboxSectionHeader>
-          }
-        >
-          <Divider />
-          <Collapse in={resolvedOpen} timeout="auto" unmountOnExit>
-            {filteredItems(resolvedItems).map((item, index) =>
-              getInboxItemComponent(item, index),
-            )}
-          </Collapse>
-        </List>
-      </Container>
-    </StylesProvider>
+      </SearchContainer>
+      <List
+        component="nav"
+        aria-label="unresolved"
+        subheader={
+          <InboxSectionHeader disableGutters disableSticky>
+            <SectionHeaderButton
+              disableRipple
+              onClick={() => handleClick(InboxSection.Unresolved)}
+            >
+              {arrowIcon(unresolvedOpen)}
+            </SectionHeaderButton>
+            {InboxSection.Unresolved}
+          </InboxSectionHeader>
+        }
+      >
+        <Divider />
+        <Collapse in={unresolvedOpen} timeout="auto" unmountOnExit>
+          {filteredItems(unresolvedItems).map((item, index) =>
+            getInboxItemComponent(item, index),
+          )}
+        </Collapse>
+      </List>
+      <List
+        component="nav"
+        aria-label="resolved"
+        subheader={
+          <InboxSectionHeader disableGutters disableSticky>
+            <SectionHeaderButton
+              disableRipple
+              onClick={() => handleClick(InboxSection.Resolved)}
+            >
+              {arrowIcon(resolvedOpen)}
+            </SectionHeaderButton>
+            {InboxSection.Resolved}
+          </InboxSectionHeader>
+        }
+      >
+        <Divider />
+        <Collapse in={resolvedOpen} timeout="auto" unmountOnExit>
+          {filteredItems(resolvedItems).map((item, index) =>
+            getInboxItemComponent(item, index),
+          )}
+        </Collapse>
+      </List>
+    </Box>
   );
 };
 
-const Checkbox = styled(MUICheckbox)`
-  height: 14.4px;
-  width: 14.4px;
-  color: ${theme.colors.mediumGrey};
-  padding: 0px;
-  align-self: flex-start;
-  min-width: 14.4px;
-  padding-right: 12.5px;
-  padding-top: 4px;
-  &.Mui-checked {
-    color: ${theme.colors.black};
-  }
-  &:hover,
-  &.Mui-checked:hover {
-    background-color: ${theme.colors.transparent};
-  }
-`;
-
-const Container = styled(Grid)`
-  overflow: auto;
-  height: 100vh;
-  max-height: 100vh;
-  width: 387.3px;
-  border-right-style: solid;
-  border-right-color: ${theme.colors.mediumGrey};
-  border-right-width: 1px;
-`;
+const Checkbox = muiStyled(MUICheckbox)({
+  height: '14.4px',
+  width: '14.4px',
+  minWidth: '14.4px',
+  color: `${theme.colors.mediumGrey}`,
+  padding: '0px',
+  alignSelf: 'flex-start',
+  paddingRight: '12.5px',
+  paddingTop: '4px',
+  '&.Mui-checked': {
+    color: `${theme.colors.black}`,
+  },
+  '&:hover,&.Mui-checked:hover ': {
+    backgroundColor: `${theme.colors.transparent}`,
+  },
+});
 
-const Divider = styled(MUIDivider)`
-  color: ${theme.colors.mediumGrey};
-  height: 1px;
-`;
+const Box = muiStyled(MUIBox)({
+  borderRightStyle: 'solid',
+  borderRightColor: `${theme.colors.mediumGrey}`,
+  borderRightWidth: '1px',
+});
 
-const InboxHeader = styled.header`
-  display: flex;
-  min-height: 50.5px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
-  font-size: 18px;
-  font-weight: ${theme.fontWeights.medium};
-  color: ${theme.colors.black};
-  align-items: center;
-  padding-left: 32px;
-  margin-right: 1px;
-  background-color: ${theme.colors.white};
-`;
+const Divider = muiStyled(MUIDivider)({
+  height: '1px',
+  color: `${theme.colors.mediumGrey}`,
+});
 
-const InboxItemContainer = styled(ListItem)`
-  padding: 13.5px 17.5px 14.9px 17.5px;
-  border-bottom: 1px;
-  border-bottom-color: ${theme.colors.mediumGrey};
-  border-bottom-style: solid;
-  &.Mui-selected, &.Mui-selected:hover {
-    ${Checkbox} {
-      color: ${theme.colors.darkGrey};
-      &.Mui-checked {
-        color: ${theme.colors.black};
-      }
-    };
-    background-color: ${theme.colors.mediumGrey};
+const InboxItemContainer = muiStyled(ListItem)({
+  padding: '13.5px 17.5px 14.9px 17.5px',
+  borderBottomStyle: 'solid',
+  borderBottomColor: `${theme.colors.mediumGrey}`,
+  borderBottomWidth: '1px',
+  '&.Mui-selected, &.Mui-selected:hover': {
+    '& .MuiCheckbox-root': {
+      color: `${theme.colors.darkGrey}`,
+      '&.Mui-checked': {
+        color: `${theme.colors.black}`,
+      },
+    },
+    backgroundColor: `${theme.colors.mediumGrey}`,
   },
-  &:hover {
-    background-color: ${theme.colors.transparent};
+  '&:hover': {
+    backgroundColor: `${theme.colors.transparent}`,
   },
-`;
+});
 
-const InboxItemText = styled(ListItemText)`
-  margin: 0px;
-  .MuiListItemText-primary {
-    display: block;
-    max-width: 100%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    font-family: 'Roboto';
-    font-size: 18px;
-    font-weight: ${theme.fontWeights.medium};
-    color: ${theme.colors.black};
-    line-height: normal;
-  }
-  .MuiListItemText-secondary {
-    font-family: 'Roboto';
-    font-size: 12px;
-    display: block;
-    max-width: 100%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    color: ${theme.colors.darkGrey};
-    line-height: normal;
-    padding-top: 7px;
-  }
-`;
+const InboxItemText = muiStyled(ListItemText)({
+  margin: '0px',
+  '& span': {
+    // primary text
+    maxWidth: '100%',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    fontFamily: 'Roboto',
+    fontSize: '18px',
+    fontWeight: theme.fontWeights.medium,
+    color: `${theme.colors.black}`,
+    lineHeight: 'normal',
+  },
+  '& p': {
+    // secondary text
+    maxWidth: '100%',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    fontFamily: 'Roboto',
+    fontSize: '12px',
+    color: `${theme.colors.darkGrey}`,
+    lineHeight: 'normal',
+    paddingTop: '7px',
+  },
+});
 
-const InboxSectionHeader = styled(ListSubheader)`
-  display: inline-flex;
-  font-family: Roboto;
-  color: ${theme.colors.black};
-  font-size: 18px;
-  font-weight: ${theme.fontWeights.regular};
-  line-height: normal;
-  padding-top: 26.8px;
-  padding-bottom: 13px;
-`;
+const InboxSectionHeader = muiStyled(ListSubheader)({
+  display: 'inline-flex',
+  fontFamily: 'Roboto',
+  color: `${theme.colors.black}`,
+  fontSize: '18px',
+  lineHeight: 'normal',
+  paddingTop: '26.8px',
+  paddingBottom: '13px',
+});
 
-const SectionHeaderButton = styled(IconButton)`
-  padding: 0px 21px 0px 23px;
-  width: 20px;
-  height: 20px;
-  &:hover {
-    background-color: ${theme.colors.transparent};
+const SectionHeaderButton = muiStyled(IconButton)({
+  padding: '0px 21px 0px 23px',
+  width: '20px',
+  height: '20px',
+  '&:hover': {
+    backgroundColor: `${theme.colors.transparent}`,
   },
- `;
+});
 
 const SearchBar = styled.input`
-  width: 351.3px;
-  min-height: 31.5px;
-  border-radius: 4px;
+  width: 100%;
   background-color: ${theme.colors.backgroundWash};
+  color: ${theme.colors.darkGrey};
   font-size: 18px;
   font-weight: ${theme.fontWeights.regular};
-  text-indent: 50.8px;
-  margin: 0 auto;
-  margin-top: 18px;
   outline: none;
   border: none;
-  display: flex;
+`;
+
+const SearchContainer = muiStyled(MUIBox)({
+  minHeight: '31.5px',
+  borderRadius: '4px',
+  backgroundColor: `${theme.colors.backgroundWash}`,
+  margin: '18px 18px 0px',
+  paddingRight: '18px',
+});
+
+const SearchIcon = styled.img`
+  width: 16px;
+  height: 15.3px;
+  padding: 8px 18px;
 `;
 
 const mapStateToProps = (state: AppState) => ({
diff --git a/src/components/SideBar/AppPicker/index.tsx b/src/components/SideBar/AppPicker/index.tsx
new file mode 100644
index 0000000..56bbea0
--- /dev/null
+++ b/src/components/SideBar/AppPicker/index.tsx
@@ -0,0 +1,76 @@
+import { Box as MUIBox, ButtonBase as MUIButton } from '@material-ui/core';
+import { styled as muiStyled } from '@material-ui/core/styles';
+import React from 'react';
+import { connect } from 'react-redux';
+import { AppAction } from 'redux/actionTypes';
+import { AppState } from 'redux/reducer';
+import styled from 'styled-components';
+import theme from 'styles/theme';
+
+export const AppPickerComponent: React.FunctionComponent = () => {
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      height="83vh"
+    >
+      <Button>
+        <ButtonImage
+          src={require('../../../images/app-icon.png')}
+        ></ButtonImage>
+      </Button>
+      <Button>
+        <ButtonImage
+          src={require('../../../images/app-icon.png')}
+        ></ButtonImage>
+      </Button>
+      <Button>
+        <ButtonImage
+          src={require('../../../images/app-icon.png')}
+        ></ButtonImage>
+      </Button>
+      <Button>
+        <ButtonImage
+          src={require('../../../images/app-icon.png')}
+        ></ButtonImage>
+      </Button>
+    </Box>
+  );
+};
+
+const Button = muiStyled(MUIButton)({
+  '&.MuiButtonBase-root': {
+    height: '45px',
+    width: '45px',
+  },
+  borderRadius: '8.2px',
+  marginTop: '8px',
+  marginBottom: '8px',
+});
+
+const Box = muiStyled(MUIBox)({
+  flex: 1,
+  boxSizing: 'border-box',
+  backgroundColor: `${theme.colors.backgroundWash}`,
+  borderRightStyle: 'solid',
+  borderRightColor: `${theme.colors.mediumGrey}`,
+  borderRightWidth: '1px',
+  paddingTop: '8px',
+});
+
+const ButtonImage = styled.img`
+  height: 45px;
+  width: 45px;
+  border-radius: 8.2px;
+`;
+
+const mapStateToProps = (state: AppState) => state;
+const mapDispatchToProps = (dispatch: any) => ({
+  dispatch: (action: AppAction) => dispatch(action),
+});
+
+export const AppPicker = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(AppPickerComponent);
diff --git a/src/components/SideBar/index.tsx b/src/components/SideBar/index.tsx
index 4440269..ef385a0 100644
--- a/src/components/SideBar/index.tsx
+++ b/src/components/SideBar/index.tsx
@@ -1,4 +1,6 @@
-import { Grid } from '@material-ui/core';
+import { Box as MUIBox, Grid as MUIGrid } from '@material-ui/core';
+import { styled as muiStyled } from '@material-ui/core/styles';
+import { AppPicker } from 'components';
 import { DispatchProps } from 'components/dispatchProps';
 import React from 'react';
 import { connect } from 'react-redux';
@@ -36,44 +38,71 @@ export const SideBarComponent: React.FunctionComponent<SideBarProps> = ({
   };
 
   return (
-    <Container container direction="column">
-      <AppName>patch</AppName>
-      {sectionComponent(SectionName.BugReports)}
-      {sectionComponent(SectionName.CustomerService)}
-      {sectionComponent(SectionName.FeatureRequests)}
-    </Container>
+    <React.Fragment>
+      <Grid item xs={12}>
+        <AppName
+          display="flex"
+          flexDirection="row"
+          alignItems="center"
+          height="7vh"
+        >
+          Ithaca Transit
+        </AppName>
+      </Grid>
+      <Grid item xs={3}>
+        <AppPicker />
+      </Grid>
+      <Grid item xs={9}>
+        <Box display="flex" flexDirection="column" height="83vh">
+          {sectionComponent(SectionName.BugReports)}
+          {sectionComponent(SectionName.CustomerService)}
+          {sectionComponent(SectionName.FeatureRequests)}
+        </Box>
+      </Grid>
+    </React.Fragment>
   );
 };
 
-const AppName = styled.div`
-  font-family: Roboto;
-  font-size: 48px;
-  font-weight: ${theme.fontWeights.medium};
-  color: ${theme.colors.white};
-  margin-bottom: 220px;
-`;
+const Box = muiStyled(MUIBox)({
+  flex: 1,
+  backgroundColor: `${theme.colors.backgroundWash}`,
+  borderRightStyle: 'solid',
+  borderRightColor: `${theme.colors.mediumGrey}`,
+  borderRightWidth: '1px',
+});
 
-const Container = styled(Grid)`
-  height: 100vh;
-  width: 257.6px;
-  padding-top: 32px;
-  padding-left: 32px;
-  background-color: #585858;
-`;
+const AppName = muiStyled(Box)({
+  boxSizing: 'border-box',
+  paddingLeft: '16px',
+  borderBottomStyle: 'solid',
+  borderBottomColor: `${theme.colors.mediumGrey}`,
+  borderBottomWidth: '1px',
+  fontFamily: 'Roboto',
+  fontSize: '18px',
+  fontWeight: theme.fontWeights.medium,
+  color: `${theme.colors.black}`,
+});
+
+const Grid = muiStyled(MUIGrid)({
+  display: 'flex',
+});
 
 const Section = styled.div`
   font-family: Roboto;
   font-size: 18px;
   font-weight: ${theme.fontWeights.regular};
-  color: ${theme.colors.backgroundWash};
+  color: ${theme.colors.darkGrey};
   text-align: left;
-  padding-top: 15px;
-  padding-bottom: 15px;
+  padding-top: 24px;
+  padding-bottom: 7px;
+  padding-left: 16px;
+  padding-right: 16px;
+  cursor: pointer;
 `;
 
 const SelectedSection = styled(Section)`
-  font-weight: ${theme.fontWeights.bold};
-  color: ${theme.colors.white};
+  font-weight: ${theme.fontWeights.medium};
+  color: ${theme.colors.black};
 `;
 
 const mapStateToProps = (state: AppState) => ({
diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx
new file mode 100644
index 0000000..f038855
--- /dev/null
+++ b/src/components/TopBar/index.tsx
@@ -0,0 +1,30 @@
+import { Box as MUIBox } from '@material-ui/core';
+import { styled as muiStyled } from '@material-ui/core/styles';
+import React from 'react';
+import { connect } from 'react-redux';
+import { AppAction } from 'redux/actionTypes';
+import { AppState } from 'redux/reducer';
+import theme from 'styles/theme';
+
+export const TopBarComponent: React.FunctionComponent = () => {
+  return <Box height="10vh"></Box>;
+};
+
+const Box = muiStyled(MUIBox)({
+  flex: 1,
+  backgroundColor: `${theme.colors.backgroundWash}`,
+  boxShadow: '0 4px 4px 0 rgba(0, 0, 0, 0.05)',
+  borderBottomStyle: 'solid',
+  borderBottomColor: `${theme.colors.mediumGrey}`,
+  borderBottomWidth: '1px',
+});
+
+const mapStateToProps = (state: AppState) => state;
+const mapDispatchToProps = (dispatch: any) => ({
+  dispatch: (action: AppAction) => dispatch(action),
+});
+
+export const TopBar = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(TopBarComponent);
diff --git a/src/components/index.ts b/src/components/index.ts
index cab503b..db7fd72 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,5 @@
+export { AppPicker } from './SideBar/AppPicker';
 export { HomePage } from './HomePage';
 export { Inbox } from './Inbox';
 export { SideBar } from './SideBar';
+export { TopBar } from './TopBar';
diff --git a/src/images/app-icon.png b/src/images/app-icon.png
new file mode 100644
index 0000000..2cca64b
Binary files /dev/null and b/src/images/app-icon.png differ
diff --git a/src/images/search-icon.png b/src/images/search-icon.png
new file mode 100644
index 0000000..d64cf00
Binary files /dev/null and b/src/images/search-icon.png differ