diff --git a/src/App.css b/src/App.css
index 4e08d0a..b7fded1 100644
--- a/src/App.css
+++ b/src/App.css
@@ -5,7 +5,9 @@ html {
 html, body {
   max-width: 100%;
   overflow-x: hidden;
-  font-family: "Avenir";
+  font-family: "Roboto", "Helvetica", "Arial";
+  background-color: #F5F5F5;
+  font-size: 12px;
 }
 ::-webkit-scrollbar {
   width: 0px;  /* remove scrollbar space */
diff --git a/src/App.js b/src/App.js
index 9b3e363..51f1c06 100644
--- a/src/App.js
+++ b/src/App.js
@@ -72,6 +72,7 @@ import {
 import dbLogo from './assets/dblogo.png';
 import ssLogo from './assets/sslogo.jpg';
 import kepLogo from './assets/kepler.gl-logo_2x.png';
+import { Typography } from '@material-ui/core';
 
 const MAPBOX_ACCESS_TOKEN =
   'pk.eyJ1IjoidWJlcmRhdGEiLCJhIjoiY2p2OGVvejQwMDJxZzRma2dvdWQ2OTQwcSJ9.VbuIamTa_JayuD2yr5tjaA';
@@ -714,13 +715,17 @@ class App extends Component {
         // Placeholder sheet names. TODO: Bind to worksheet data
         return (
           <React.Fragment>
-            <Stepper stepIndex={this.state.stepIndex} steps={stepNames} />
-            <PickSheets
-              sheetNames={this.state.sheetNames}
-              configCallBack={this.configCallBack}
-              field={'ConfigSheet'}
-              ConfigSheet={tableauSettingsState.ConfigSheet || ''}
-            />
+            <div style={{padding: '24px'}}>
+              <Typography variant={'display1'} style={{color: '#333'}}>
+                Kepler.gl within Tableau Configuration
+              </Typography>
+              <PickSheets
+                sheetNames={this.state.sheetNames}
+                configCallBack={this.configCallBack}
+                field={'ConfigSheet'}
+                ConfigSheet={tableauSettingsState.ConfigSheet || ''}
+              />
+            </div>
             <StepButtons
               onNextClick={this.onNextStep}
               onPrevClick={this.onPrevStep}
@@ -738,14 +743,18 @@ class App extends Component {
       if (this.state.stepIndex === 2) {
         return (
           <React.Fragment>
-            <Stepper stepIndex={this.state.stepIndex} steps={stepNames} />
-            <CustomizeViolin
-              handleChange={this.handleChange}
-              customCallBack={this.customCallBack}
-              field={'configuration'}
-              tableauSettings={tableauSettingsState}
-              configSheetColumns={this.state.ConfigSheetStringColumns || []}
-            />
+            <div style={{padding: '24px'}}>
+              <Typography variant={'display1'} style={{color: '#333'}}>
+                Kepler.gl within Tableau Configuration
+              </Typography>
+              <CustomizeViolin
+                handleChange={this.handleChange}
+                customCallBack={this.customCallBack}
+                field={'configuration'}
+                tableauSettings={tableauSettingsState}
+                configSheetColumns={this.state.ConfigSheetStringColumns || []}
+              />
+            </div>
             <StepButtons
               onNextClick={this.onNextStep}
               onPrevClick={this.onPrevStep}
@@ -770,6 +779,7 @@ class App extends Component {
           <SplashScreen
             configure={this.configure}
             title="Kepler.gl within Tableau"
+            version={KEPLER_GL_VERSION}
             desc="Leverage the brilliance of Kepler.gl functionality, directly within Tableau!"
             ctaText="Configure"
             poweredBy={
@@ -786,30 +796,35 @@ class App extends Component {
                   <br /> Tableau Requirements: Tableau Desktop (Mac Only) 2018.3
                   or >= 2019.1.2 or Tableau Server >= 2018.3
                 </p>
-                <p className="info">Brought to you by: </p>
-                <a
-                  href="http://www.datablick.com/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <img src={dbLogo} />
-                </a>{' '}
-                <a
-                  href="https://starschema.com/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <img src={ssLogo} />
-                </a>
-                <p className="info">Powered by: </p>
-                <a
-                  href="https://github.com/uber/kepler.gl"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <img src={kepLogo} />
-                </a>
-            <p className="info">Version: {KEPLER_GL_VERSION}</p>
+                <div className="inline">
+                  <div>
+                    <p className="info">Brought to you by: </p>
+                    <a
+                      href="http://www.datablick.com/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <img src={dbLogo} />
+                    </a>{' '}
+                    <a
+                      href="https://starschema.com/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <img src={ssLogo} />
+                    </a>
+                  </div>
+                  <div>
+                    <p className="info">Powered by: </p>
+                    <a
+                      href="https://github.com/uber/kepler.gl"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <img src={kepLogo} />
+                    </a>
+                  </div>
+                </div>
               </React.Fragment>
             }
           />
diff --git a/src/assets/tableau/css/style.css b/src/assets/tableau/css/style.css
index e732dd3..b67cd69 100644
--- a/src/assets/tableau/css/style.css
+++ b/src/assets/tableau/css/style.css
@@ -3160,7 +3160,7 @@ Style guide: buttons-links.cta
   cursor: pointer;
   letter-spacing: 1px;
   line-height: 1;
-  font-size: 11px;
+  font-size: 12px;
   font-family: "Benton Sans Medium", Helvetica, sans-serif;
   color: #fff;
   text-transform: uppercase;
@@ -3510,7 +3510,7 @@ Style guide: buttons-links.toggle-links
     cursor: pointer;
     letter-spacing: 1px;
     line-height: 1;
-    font-size: 11px;
+    font-size: 12px;
     text-transform: uppercase;
     font-family: "Benton Sans Book", Helvetica, sans-serif;
     color: #e8762c;
@@ -14119,3 +14119,4 @@ Style guide: typography.text-stat
   @media (max-width: 960px) {
     .text-stat {
       font-size: 4em; } }
+
diff --git a/src/components/Configuration/ConfigScreen.js b/src/components/Configuration/ConfigScreen.js
index 5c293db..97e64b5 100644
--- a/src/components/Configuration/ConfigScreen.js
+++ b/src/components/Configuration/ConfigScreen.js
@@ -38,7 +38,6 @@ const styles = {
 
 function ConfigScreen(props) {
   const {
-    classes,
     selectSheet,
     sheetNames,
     configTitle,
@@ -46,10 +45,9 @@ function ConfigScreen(props) {
     field,
     selectedValue } = props;
 
-  console.log('configScreen', props);
   return (
     <React.Fragment>
-      <div className="sheetScreen" style={{padding : 10, paddingBottom: 100 }}>
+      <div className="sheetScreen">
         <Grid
           container
           alignItems="center"
diff --git a/src/components/Configuration/CustomScreen.js b/src/components/Configuration/CustomScreen.js
index 428cb7c..2ed953d 100644
--- a/src/components/Configuration/CustomScreen.js
+++ b/src/components/Configuration/CustomScreen.js
@@ -33,16 +33,48 @@ import Select from '@material-ui/core/Select';
 //tableau ui
 import { TextField } from '@tableau/tableau-ui';
 
-import { InputLabelWithTooltip, OptionWrapper, OptionTitle } from './CustomizeUIElements';
+import { InputLabelWithTooltip, OptionWrapper, OptionTitle, SectionTitle } from './CustomizeUIElements';
+import styled from 'styled-components';
+import '../../styles/ConfigScreen.css';
 
 const styles = theme => ({
   formControl: {
-    margin: theme.spacing.unit,
+    fontSize: '12px',
     minWidth: 120,
-    display: 'inherit',
-  },
+    display: 'inherit'
+  }
 });
 
+const Grid6 = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-bottom:16px;
+
+  & > div {
+    width: 200px;
+    margin-right: 16px;
+  }
+
+  & > div > div:nth-child(2) {
+    border: 1px solid #ccc;
+
+    & > div {
+      padding-left: 8px;
+    }
+  }
+`;
+
+const Grid12 = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-bottom:8px;
+
+  & > div {
+    width: 416px;
+    margin-right: 16px;
+  }
+`;
+
 // the example on material ui has this function statement
 class CustomScreen extends React.Component {
   constructor (props) {
@@ -85,140 +117,151 @@ class CustomScreen extends React.Component {
       <div className="sheetScreen">
         <OptionWrapper>
           <div class="content-container">
-            <OptionTitle style={{paddingLeft: "8px"}}>{this.props.configTitle}</OptionTitle>
-            <FormControl className={classes.formControl}>
-              <InputLabelWithTooltip
-                title="Optional: Mapbox API Key"
-                tooltipText="Optional: Your unique API key for utilizing mapbox"
-              />
-              <TextField
-                // className={classes.textField}
-                id="mapboxAPIKey-helper"
-                kind="line"
-                name="mapboxAPIKey"
-                // label="Mapbox API Key"
-                placeholder="pk.12345..."
-                value={tableauSettings.mapboxAPIKey}
-                onChange={handleChange}
-                // margin="normal"
-              />
-            </FormControl>
-            <FormControl className={classes.formControl}>
-              <InputLabelWithTooltip
-                    title="Read only mode?"
-                    tooltipText="Toggle whether or not to hide the config panel on the side (e.g., read only)"
-                  />
-              <Select
-                value={tableauSettings.readOnly === "true"}
-                onChange={handleChange}
-                input={<Input name="readOnly" id="readOnly-helper" />}
-              >
-                 <MenuItem value={true}>True</MenuItem>
-                 <MenuItem value={false}>False</MenuItem>
-              </Select>
-            </FormControl>
-
-            <FormControl className={classes.formControl}>
-              <InputLabelWithTooltip
-                    title="Color Theme"
-                    tooltipText="Select a dark or light kepler.gl UI theme"
-                  />
-              <Select
-                value={tableauSettings.theme || 'dark'}
-                onChange={handleChange}
-                input={<Input name="theme" id="theme-helper" />}
-              >
-                 <MenuItem value="light">Light</MenuItem>
-                 <MenuItem value="dark">Dark</MenuItem>
-              </Select>
-            </FormControl>
-
-            <FormControl className={classes.formControl}>
-              <InputLabelWithTooltip
-                    title="Hover Action"
-                    tooltipText="Toggle and select which action to take on hover"
-                  />
-              <Select
-                value={tableauSettings.hoverAction || "No Action"}
-                onChange={handleChange}
-                input={<Input name="hoverAction" id="hoverAction-helper" />}
-              >
-                 <MenuItem value={"No Action"}>No Action</MenuItem>
-                 <MenuItem value={"Highlight"}>Highlight</MenuItem>
-                 <MenuItem value={"Filter"}>Filter</MenuItem>
-              </Select>
-            </FormControl>
-            <FormControl className={classes.formControl}>
-              <InputLabelWithTooltip
-                    title="Hover Identifying Field"
-                    tooltipText="Select which STRING field to take action on (we require string for interaction)"
-                  />
-              <Select
-                value={tableauSettings.hoverField || "None"}
-                onChange={handleChange}
-                input={<Input name="hoverField" id="hoverField-helper" />}
-              >
-                 <MenuItem value={"None"}>None</MenuItem>
-                 {
-                  configSheetColumns.map(f => (
-                    <MenuItem value={f.fieldName} key={f.fieldName}>{f.fieldName}</MenuItem>
-                  ))
-                };
-              </Select>
-            </FormControl>
-            <FormControl className={classes.formControl}>
-              <InputLabelWithTooltip
-                    title="Click Action"
-                    tooltipText="Toggle and select which action to take on click"
-                  />
-              <Select
-                value={tableauSettings.clickAction || "No Action"}
-                onChange={handleChange}
-                input={<Input name="clickAction" id="clickAction-helper" />}
-              >
-                 <MenuItem value={"No Action"}>No Action</MenuItem>
-                 <MenuItem value={"Highlight"}>Highlight</MenuItem>
-                 <MenuItem value={"Filter"}>Filter</MenuItem>
-              </Select>
-            </FormControl>
-            <FormControl className={classes.formControl}>
-              <InputLabelWithTooltip
-                    title="Click Identifying Field"
-                    tooltipText="Select which STRING field to take action on (we require string for interaction)"
-                  />
-              <Select
-                value={tableauSettings.clickField || "None"}
-                onChange={handleChange}
-                input={<Input name="clickField" id="clickField-helper" />}
-              >
-                 <MenuItem value={"None"}>None</MenuItem>
-                 {
-                  configSheetColumns.map(f => (
-                    <MenuItem value={f.fieldName} key={f.fieldName}>{f.fieldName}</MenuItem>
-                  ))
-                };
-              </Select>
-            </FormControl>
-            <FormControl className={classes.formControl}>
-              <InputLabelWithTooltip
-                    title="Tableau to Kepler Filter Field"
-                    tooltipText="Select which STRING field to use when filtering Kepler (we require string for interaction)"
-                  />
-              <Select
-                value={tableauSettings.keplerFilterField || "None"}
-                onChange={handleChange}
-                input={<Input name="keplerFilterField" id="keplerFilterField-helper" />}
-              >
-                 <MenuItem value={"None"}>None</MenuItem>
-                 {
-                  configSheetColumns
-                  .filter(col => col.dataType !== 'date-time')
-                  .map(f => (
-                    <MenuItem value={f.fieldName} key={f.fieldName}>{f.fieldName}</MenuItem>
-                  ))
-                };
-              </Select>
-            </FormControl>
+            <OptionTitle>{this.props.configTitle}</OptionTitle>
+            <SectionTitle>Visual</SectionTitle>
+            <Grid6>
+              <FormControl variant="outlined" className={classes.formControl}>
+                <InputLabelWithTooltip
+                      title="Read only mode?"
+                      tooltipText="Toggle whether or not to hide the config panel on the side (e.g., read only)"
+                    />
+                <Select
+                  value={tableauSettings.readOnly === "true"}
+                  onChange={handleChange}
+                  input={<Input name="readOnly" id="readOnly-helper" />}
+                >
+                  <MenuItem value={true}>True</MenuItem>
+                  <MenuItem value={false}>False</MenuItem>
+                </Select>
+              </FormControl>
+              <FormControl className={classes.formControl}>
+                <InputLabelWithTooltip
+                      title="Color Theme"
+                      tooltipText="Select a dark or light kepler.gl UI theme"
+                    />
+                <Select
+                  value={tableauSettings.theme || 'dark'}
+                  onChange={handleChange}
+                  input={<Input name="theme" id="theme-helper" />}
+                >
+                  <MenuItem value="light">Light</MenuItem>
+                  <MenuItem value="dark">Dark</MenuItem>
+                </Select>
+              </FormControl>
+            </Grid6>
+            <SectionTitle>Events</SectionTitle>
+            <Grid6>
+              <FormControl className={classes.formControl}>
+                <InputLabelWithTooltip
+                      title="Hover Action"
+                      tooltipText="Toggle and select which action to take on hover"
+                    />
+                <Select
+                  value={tableauSettings.hoverAction || "No Action"}
+                  onChange={handleChange}
+                  input={<Input name="hoverAction" id="hoverAction-helper" />}
+                >
+                  <MenuItem value={"No Action"}>No Action</MenuItem>
+                  <MenuItem value={"Highlight"}>Highlight</MenuItem>
+                  <MenuItem value={"Filter"}>Filter</MenuItem>
+                </Select>
+              </FormControl>
+              <FormControl className={classes.formControl}>
+                <InputLabelWithTooltip
+                      title="Hover Identifying Field"
+                      tooltipText="Select which STRING field to take action on (we require string for interaction)"
+                    />
+                <Select
+                  value={tableauSettings.hoverField || "None"}
+                  onChange={handleChange}
+                  input={<Input name="hoverField" id="hoverField-helper" />}
+                >
+                  <MenuItem value={"None"}>None</MenuItem>
+                  {
+                    configSheetColumns.map(f => (
+                      <MenuItem value={f.fieldName} key={f.fieldName}>{f.fieldName}</MenuItem>
+                    ))
+                  };
+                </Select>
+              </FormControl>
+            </Grid6>
+            <Grid6>
+              <FormControl className={classes.formControl}>
+                <InputLabelWithTooltip
+                      title="Click Action"
+                      tooltipText="Toggle and select which action to take on click"
+                    />
+                <Select
+                  value={tableauSettings.clickAction || "No Action"}
+                  onChange={handleChange}
+                  input={<Input name="clickAction" id="clickAction-helper" />}
+                >
+                  <MenuItem value={"No Action"}>No Action</MenuItem>
+                  <MenuItem value={"Highlight"}>Highlight</MenuItem>
+                  <MenuItem value={"Filter"}>Filter</MenuItem>
+                </Select>
+              </FormControl>
+              <FormControl className={classes.formControl}>
+                <InputLabelWithTooltip
+                      title="Click Identifying Field"
+                      tooltipText="Select which STRING field to take action on (we require string for interaction)"
+                    />
+                <Select
+                  value={tableauSettings.clickField || "None"}
+                  onChange={handleChange}
+                  input={<Input name="clickField" id="clickField-helper" />}
+                >
+                  <MenuItem value={"None"}>None</MenuItem>
+                  {
+                    configSheetColumns.map(f => (
+                      <MenuItem value={f.fieldName} key={f.fieldName}>{f.fieldName}</MenuItem>
+                    ))
+                  };
+                </Select>
+              </FormControl>
+            </Grid6>
+            <Grid6>
+              <FormControl className={classes.formControl}>
+                <InputLabelWithTooltip
+                      title="Tableau to Kepler Filter Field"
+                      tooltipText="Select which STRING field to use when filtering Kepler (we require string for interaction)"
+                    />
+                <Select
+                  value={tableauSettings.keplerFilterField || "None"}
+                  onChange={handleChange}
+                  input={<Input name="keplerFilterField" id="keplerFilterField-helper" />}
+                >
+                  <MenuItem value={"None"}>None</MenuItem>
+                  {
+                    configSheetColumns
+                    .filter(col => col.dataType !== 'date-time')
+                    .map(f => (
+                      <MenuItem value={f.fieldName} key={f.fieldName}>{f.fieldName}</MenuItem>
+                    ))
+                  };
+                </Select>
+              </FormControl>
+            </Grid6>
+            <SectionTitle>Optional</SectionTitle>
+            <Grid12>
+              <FormControl className={classes.formControl}>
+                <InputLabelWithTooltip
+                  title="Mapbox API Key"
+                  tooltipText="Optional: Your unique API key for utilizing mapbox"
+                />
+                <TextField
+                  className="bordered"
+                  id="mapboxAPIKey-helper"
+                  kind="line"
+                  name="mapboxAPIKey"
+                  // label="Mapbox API Key"
+                  placeholder="pk.12345..."
+                  value={tableauSettings.mapboxAPIKey}
+                  onChange={handleChange}
+                  // margin="normal"
+                />
+              </FormControl>
+            </Grid12>
             {/* <FormControl className={classes.formControl}>
               <InputLabelWithTooltip
                   title="Hover Configuration"
diff --git a/src/components/Configuration/CustomizeUIElements.js b/src/components/Configuration/CustomizeUIElements.js
index 8d580af..dfe8b7e 100644
--- a/src/components/Configuration/CustomizeUIElements.js
+++ b/src/components/Configuration/CustomizeUIElements.js
@@ -23,21 +23,27 @@ import styled from 'styled-components';
 
 import '../../styles/Tooltip.css';
 
-const InputTitle = styled.span`
-  font-size: 11px;
+const InputTitle = styled.div`
+  font-size: 12px;
+  margin-bottom: 4px;
+  display: inline-block;
 `;
 
 const Tooltip = styled.a`
   display: inline !important;
   cursor: pointer;
   color: rgb(45, 204, 151);
-  font-weight: 700;
   margin-left: 8px;
+  font-size: 12px;
 `;
 
 export const OptionTitle = styled.p`
-  font-size: 11px;
-  font-weight: 700;
+  font-size: 12px;
+`;
+
+export const SectionTitle = styled.p`
+  font-size: 12px;
+  font-weight: 600;
 `;
 
 export const OptionWrapper = styled.div`
@@ -45,10 +51,7 @@ export const OptionWrapper = styled.div`
 `;
 
 export const OptionColumn = styled.div`
-  height: 375px;
   overflow: auto;
-  border: 1px solid lightgrey;
-  border-radius: 2px;
 `;
 
 // export const TextField = styled.input`
@@ -61,7 +64,7 @@ export const OptionColumn = styled.div`
 export const SearchInput = styled.input`
   border: 1px solid rgba(0, 0, 0, 0.41);
   border-radius: 20px;
-  font-size: 11px;
+  font-size: 12px;
   padding-bottom: 5px;
   padding-top: 5px;
   padding-left: 10px;
@@ -70,11 +73,25 @@ export const SearchInput = styled.input`
   margin-bottom: 10px;
 `;
 
+const InfoIcon = styled.div`
+  font-size: 10px;
+  background-color: #ccc;
+  color: #fff;
+  border-radius: 100px;
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+  text-align: center;
+  ::after {
+    content: "i";
+  }
+`;
+
 export const InputLabelWithTooltip = (props) => (
   <div>
     <InputTitle htmlFor="markerShow-helper">{props.title}</InputTitle>
     <Tooltip className="tooltip">
-      ?
+      <InfoIcon></InfoIcon>
       <div class="tooltip__text">{props.tooltipText}</div>
     </Tooltip>
   </div>
diff --git a/src/components/Configuration/CustomizeViolin.js b/src/components/Configuration/CustomizeViolin.js
index f32e89b..907ddbe 100644
--- a/src/components/Configuration/CustomizeViolin.js
+++ b/src/components/Configuration/CustomizeViolin.js
@@ -25,23 +25,21 @@ import { OptionColumn } from './CustomizeUIElements';
 
 const CustomizeViolin = (props) => (
   <React.Fragment>
-    <div class="content-container">
-      <h4 style={{color: "#BDBDBD"}}>{props.title}</h4>
-      <div className="clearfix">
-        <OptionColumn className="grid--6" style={{margin: "10px"}}>
-          <CustomScreen
-            configTitle={"Customize how to render kepler.gl in Tableau"}
-            handleChange={props.handleChange}
-            customCallBack={props.customCallBack}
-            field={props.field}
-            d3Projections={props.d3Projections}
-            projectionName={props.projectionName}
-            color={props.color}
-            tableauSettings={props.tableauSettings}
-            configSheetColumns={props.configSheetColumns}
-          />
-        </OptionColumn>
-      </div>
+    <h4 style={{color: "#333"}}>{props.title}</h4>
+    <div className="clearfix">
+      <OptionColumn className="grid--6" style={{border: 0, overflow: 'visible'}}>
+        <CustomScreen
+          configTitle={"Customize how to render kepler.gl in Tableau"}
+          handleChange={props.handleChange}
+          customCallBack={props.customCallBack}
+          field={props.field}
+          d3Projections={props.d3Projections}
+          projectionName={props.projectionName}
+          color={props.color}
+          tableauSettings={props.tableauSettings}
+          configSheetColumns={props.configSheetColumns}
+        />
+      </OptionColumn>
     </div>
   </React.Fragment>
 );
diff --git a/src/components/Configuration/PickSheets.js b/src/components/Configuration/PickSheets.js
index 235cbca..bab5bcb 100644
--- a/src/components/Configuration/PickSheets.js
+++ b/src/components/Configuration/PickSheets.js
@@ -26,13 +26,13 @@ import { OptionColumn } from './CustomizeUIElements';
 const PickSheets = (props) => (
   <React.Fragment>
     <div className="content-container">
-      <h4 style={{color: "#BDBDBD"}}>{props.title}</h4>
+      <h4 style={{color: "#333"}}>{props.title}</h4>
       <div className="clearfix">
-        <OptionColumn className="grid--6" style={{margin: "10px"}}>
+        <OptionColumn className="grid--6" style={{border: 0}}>
           <ConfigScreen
                 sheetNames = {props.sheetNames}
                 selectSheet = {props.configCallBack}
-                configTitle = "Select a Data Sheet"
+                configTitle = "Select a Data Sheet:"
                 listTitle = "Available Sheets"
                 field={props.field}
                 selectedValue={props.ConfigSheet || ""}
diff --git a/src/components/Configuration/StepButtons.js b/src/components/Configuration/StepButtons.js
index 67fe835..093e8e6 100644
--- a/src/components/Configuration/StepButtons.js
+++ b/src/components/Configuration/StepButtons.js
@@ -22,16 +22,37 @@ import React from 'react';
 import { Button } from '@tableau/tableau-ui';
 
 import './../../styles/StepButtons.css';
+import styled from 'styled-components';
+
+const NUMBER_OF_STEPS = 2;
+const StepDots = styled.span`
+  margin-top: 12px;
+`;
+
+const Dot = styled.div`
+  display: inline-block;
+  background-color: #ccc;
+  width: 8px;
+  height: 8px;
+  border-radius: 8px;
+
+  &:not(:first-child) {
+    margin-left: 4px;
+  }
+
+  &.selected {
+    background-color: #333;
+  }
+`;
 
 const StepButtons = (props) => {
   return (
-    <div class="StepButtons">
-      {
-        props.stepIndex !== 1
-        &&
-        <Button className={"newCta"} kind={"outline"} onClick={ props.onPrevClick }>{ props.backText }</Button>
-      }
-      <Button className={"newCta next"} kind={"filledGreen"} onClick={props.onNextClick}> { props.nextText } </Button>
+    <div className="StepButtons">
+      <Button className={"newCta"} kind={"outline"} onClick={ props.onPrevClick } disabled={ props.stepIndex === 1 }> { props.backText } </Button>
+      <StepDots>
+        { new Array(NUMBER_OF_STEPS).fill(0).map((value, index) => <Dot className={props.stepIndex === index + 1 && 'selected'} />)}
+      </StepDots>
+      <Button className={"newCta next"} kind={"outline"} onClick={props.onNextClick}> { props.nextText } </Button>
     </div>
   );
 }
diff --git a/src/components/SplashScreen.js b/src/components/SplashScreen.js
index e3202e0..a83d965 100644
--- a/src/components/SplashScreen.js
+++ b/src/components/SplashScreen.js
@@ -27,9 +27,11 @@ import './../styles/SplashScreen.css';
 const SplashScreen = props => (
   <div className="gallery-grid" id="splashScreen">
     <div className="gallery-grid__item">
-      <Typography variant={'display2'} style={{color: '#000'}}>
+      <Typography variant={'display1'} style={{color: '#333'}}>
         {props.title}
+        <span className="info">v{props.version}</span>
       </Typography>
+
     </div>
     <div className="gallery-grid__item">
       <Typography variant={'subheading'}>{props.desc}</Typography>
@@ -38,7 +40,8 @@ const SplashScreen = props => (
     <div className="gallery-grid__item">
       <div className="clearfix">
         <Button
-          kind={'filledGreen'}
+          className="cta"
+          kind={'outline'}
           key={'configButton'}
           onClick={props.configure}
         >
@@ -46,12 +49,13 @@ const SplashScreen = props => (
         </Button>
       </div>
     </div>
-    <br />
-    <div className="gallery-grid__item">
-      <p className="info">{props.infoText}</p>
-    </div>
-    <div className="gallery-grid__item">
-      <div className="padded-box padded-box--one">{props.poweredBy}</div>
+    <div className="gallery-footer">
+      <div className="gallery-grid__item">
+        <p className="info">{props.infoText}</p>
+      </div>
+      <div className="gallery-grid__item">
+        <div className="padded-box padded-box--one">{props.poweredBy}</div>
+      </div>
     </div>
   </div>
 );
diff --git a/src/index.js b/src/index.js
index d8abe80..f0c16f9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -17,7 +17,6 @@
 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
-
 import './polyfills.js';
 import React from 'react';
 import document from 'global/document';
diff --git a/src/styles/ConfigScreen.css b/src/styles/ConfigScreen.css
new file mode 100644
index 0000000..2ab6996
--- /dev/null
+++ b/src/styles/ConfigScreen.css
@@ -0,0 +1,5 @@
+.bordered  input {
+  border: 1px solid #ccc; }
+  .bordered  input:focus {
+    border: 1px solid #333;
+  }
\ No newline at end of file
diff --git a/src/styles/SplashScreen.css b/src/styles/SplashScreen.css
index 4a71ab6..241bbb2 100644
--- a/src/styles/SplashScreen.css
+++ b/src/styles/SplashScreen.css
@@ -1,3 +1,8 @@
+#splashScreen {
+  padding: 24px;
+  background-color: #F5F5F5;
+}
+
 #splashScreen img {
   max-height: 30px;
 }
@@ -5,10 +10,41 @@
 #splashScreen button.cta {
   max-width: 230px;
   margin-left: auto;
-  margin-right: auto;
-}
+  margin-right: auto; }
+  #splashScreen button.cta:active,
+  #splashScreen button.cta:hover,
+  #splashScreen button.cta:focus {
+    outline-style: none;
+  }
+  #splashScreen button.cta:active {
+    opacity: .6;
+  }
 
 #splashScreen .info {
-  font-style: italic;
-  font-size: 11px;
+  font-size: 12px;
+}
+
+#splashScreen .gallery-footer {
+  display: flex;
+}
+
+#splashScreen  .inline {
+  display: inline-flex; }
+  .inline > div {
+    margin-right: 16px; }
+
+@media screen and (min-height: 0) {
+  #splashScreen .gallery-footer {
+    position: unset;
+    bottom: auto;
+    left: auto;
+  }
+}
+
+@media screen and (min-height: 400px) {
+  #splashScreen .gallery-footer {
+    position: absolute;
+    bottom: 24px;
+    left: 30px;
+  }
 }
\ No newline at end of file
diff --git a/src/styles/StepButtons.css b/src/styles/StepButtons.css
index 9c7d043..7102032 100644
--- a/src/styles/StepButtons.css
+++ b/src/styles/StepButtons.css
@@ -7,6 +7,8 @@
   box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25);
   z-index: 100;
   background: white;
+  display: flex;
+  justify-content: space-between;
 }
 
 .StepButtons Button.newCta {
@@ -19,4 +21,8 @@
 
 .StepButtons Button.newCta.next {
   float: right;
+}
+
+.StepButtons Button {
+  outline-style: none;
 }
\ No newline at end of file
diff --git a/src/styles/Stepper.css b/src/styles/Stepper.css
index 3119fd5..1dde9cf 100644
--- a/src/styles/Stepper.css
+++ b/src/styles/Stepper.css
@@ -1,7 +1,7 @@
 #Stepper {
   font-size: 16px;
   line-height: 2.15;
-  font-family: "Avenir";
+  font-family: "Roboto", "Helvetica", "Arial";
   font-weight: 400;
   font-style: normal;
   color: #333;