diff --git a/client/package.json b/client/package.json
index 44fe2126d..c55921ada 100644
--- a/client/package.json
+++ b/client/package.json
@@ -12,10 +12,12 @@
     "dotenv": "^8.2.0",
     "firebase": "^7.5.0",
     "graphql": "^14.5.8",
+    "i18next": "^19.0.2",
     "node-sass": "^4.13.0",
     "react": "^16.12.0",
     "react-apollo": "^3.1.3",
     "react-dom": "^16.12.0",
+    "react-i18next": "^11.2.7",
     "react-number-format": "^4.3.1",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0",
diff --git a/client/src/App/App.js b/client/src/App/App.js
index 07fe638d4..2c2c8eeb7 100644
--- a/client/src/App/App.js
+++ b/client/src/App/App.js
@@ -13,7 +13,7 @@ import ErrorBoundary from "../components/error-boundary/error-boundary.component
 import { auth } from "../firebase/firebase.utils";
 import { UPSERT_USER } from "../graphql/user.queries";
 import { GET_CURRENT_USER } from "../graphql/local.queries";
-import { QUERY_BODYSHOP } from "../graphql/bodyshop.queries";
+// import { QUERY_BODYSHOP } from "../graphql/bodyshop.queries";
 
 import PrivateRoute from "../utils/private-route";
 
@@ -61,22 +61,22 @@ export default () => {
             console.log("User login upsert error.", error);
           });
 
-        apolloClient
-          .query({
-            query: QUERY_BODYSHOP,
-            fetchPolicy: "network-only"
-          })
-          .then(r => {
-            const bodyShopData = r.data.bodyshops[0];
-            apolloClient.writeData({
-              data: {
-                bodyShopData: { ...bodyShopData, __typename: "bodyShopData" }
-              }
-            });
-          })
-          .catch(error => {
-            console.log("Error getting bodyshop data.", error);
-          });
+        // apolloClient
+        //   .query({
+        //     query: QUERY_BODYSHOP,
+        //     fetchPolicy: "network-only"
+        //   })
+        //   .then(r => {
+        //     const bodyShopData = r.data.bodyshops[0];
+        //     apolloClient.writeData({
+        //       data: {
+        //         bodyShopData: { ...bodyShopData, __typename: "bodyShopData" }
+        //       }
+        //     });
+        //   })
+        //   .catch(error => {
+        //     console.log("Error getting bodyshop data.", error);
+        //   });
 
         apolloClient.writeData({
           data: {
diff --git a/client/src/components/error-boundary/error-boundary.component.jsx b/client/src/components/error-boundary/error-boundary.component.jsx
index 63ae12f57..7648ee07c 100644
--- a/client/src/components/error-boundary/error-boundary.component.jsx
+++ b/client/src/components/error-boundary/error-boundary.component.jsx
@@ -22,7 +22,7 @@ class ErrorBoundary extends React.Component {
 
   render() {
     if (this.state.hasErrored === true) {
-      return <div>Uh oh, something went wrong. {this.state.error}</div>;
+      return <div>Uh oh, something went wrong.</div>;
     } else {
       return this.props.children;
     }
diff --git a/client/src/components/global-search/global-search.component.jsx b/client/src/components/global-search/global-search.component.jsx
index 7b9042fda..77a28d9db 100644
--- a/client/src/components/global-search/global-search.component.jsx
+++ b/client/src/components/global-search/global-search.component.jsx
@@ -25,18 +25,17 @@ function searchResult(query) {
 function renderOption(item) {
   return (
     <Option key={item.category} text={item.category}>
-      <div className="global-search-item">
-        <span className="global-search-item-desc">
+      <div className='global-search-item'>
+        <span className='global-search-item-desc'>
           Found {item.query} on
           <a
             href={`https://s.taobao.com/search?q=${item.query}`}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+            target='_blank'
+            rel='noopener noreferrer'>
             {item.category}
           </a>
         </span>
-        <span className="global-search-item-count">{item.count} results</span>
+        <span className='global-search-item-count'>{item.count} results</span>
       </div>
     </Option>
   );
@@ -56,25 +55,26 @@ export default class GlobalSearch extends React.Component {
   render() {
     const { dataSource } = this.state;
     return (
-      <div style={{ width: 300 }}>
-        <AutoComplete
-          size="large"
-          style={{ width: "100%" }}
-          dataSource={dataSource.map(renderOption)}
-          onSelect={onSelect}
-          onSearch={this.handleSearch}
-          placeholder="input here"
-          optionLabelProp="text"
-        >
-          <Input
-            suffix={
-              <Button style={{ marginRight: -12 }} size="large" type="primary">
-                <Icon type="search" />
-              </Button>
-            }
-          />
-        </AutoComplete>
-      </div>
+      <div />
+      // <div style={{ width: 300 }}>
+      //   <AutoComplete
+      //     size="large"
+      //     style={{ width: "100%" }}
+      //     dataSource={dataSource.map(renderOption)}
+      //     onSelect={onSelect}
+      //     onSearch={this.handleSearch}
+      //     placeholder="input here"
+      //     optionLabelProp="text"
+      //   >
+      //     <Input
+      //       suffix={
+      //         <Button style={{ marginRight: -12 }} size="large" type="primary">
+      //           <Icon type="search" />
+      //         </Button>
+      //       }
+      //     />
+      //   </AutoComplete>
+      // </div>
     );
   }
 }
diff --git a/client/src/components/job-tombstone/job-tombstone.component.jsx b/client/src/components/job-tombstone/job-tombstone.component.jsx
index 61bf67b9d..96c6725ed 100644
--- a/client/src/components/job-tombstone/job-tombstone.component.jsx
+++ b/client/src/components/job-tombstone/job-tombstone.component.jsx
@@ -33,8 +33,8 @@ function JobTombstone({ job, ...otherProps }) {
   if (!job) {
     return (
       <AlertComponent
-        message="This job does not exist or you do not have access to it."
-        type="error"
+        message='This job does not exist or you do not have access to it.'
+        type='error'
       />
     );
   }
@@ -70,20 +70,19 @@ function JobTombstone({ job, ...otherProps }) {
               +" " + jobContext.owner?.first_name
             : "No owner"
         }
-        tags={<Tag color="blue">{jobContext?.status}</Tag>}
+        tags={<Tag color='blue'>{jobContext?.job_status?.name}</Tag>}
         extra={[
-          <Form.Item key="1">
-            <Button type="primary" htmlType="submit">
+          <Form.Item key='1'>
+            <Button type='primary' htmlType='submit'>
               Save
             </Button>
           </Form.Item>
-        ]}
-      >
-        <Descriptions size="small" column={3}>
-          <Descriptions.Item label="Claim Total">
+        ]}>
+        <Descriptions size='small' column={3}>
+          <Descriptions.Item label='Claim Total'>
             $ {jobContext.claim_total?.toFixed(2)}
           </Descriptions.Item>
-          <Descriptions.Item label="Deductible">
+          <Descriptions.Item label='Deductible'>
             $ {jobContext.deductible?.toFixed(2)}
           </Descriptions.Item>
         </Descriptions>
@@ -91,51 +90,51 @@ function JobTombstone({ job, ...otherProps }) {
 
       <Row>
         <Typography.Title level={4}>Information</Typography.Title>
-        <Form.Item label="RO #">
+        <Form.Item label='RO #'>
           {getFieldDecorator("ro_number", {
             initialValue: jobContext.ro_number
-          })(<Input name="ro_number" readOnly onChange={handleChange} />)}
+          })(<Input name='ro_number' readOnly onChange={handleChange} />)}
         </Form.Item>
 
-        <Form.Item label="Estimate #">
+        <Form.Item label='Estimate #'>
           {getFieldDecorator("est_number", {
             initialValue: jobContext.est_number
-          })(<Input name="est_number" readOnly onChange={handleChange} />)}
+          })(<Input name='est_number' readOnly onChange={handleChange} />)}
         </Form.Item>
       </Row>
 
       <Row>
         <Typography.Title level={4}>Insurance Information</Typography.Title>
-        <Form.Item label="Insurance Company">
+        <Form.Item label='Insurance Company'>
           {getFieldDecorator("est_co_nm", {
             initialValue: jobContext.est_co_nm
-          })(<Input name="est_co_nm" onChange={handleChange} />)}
+          })(<Input name='est_co_nm' onChange={handleChange} />)}
         </Form.Item>
         <Col span={8}>
-          <Form.Item label="Estimator Last Name">
+          <Form.Item label='Estimator Last Name'>
             {getFieldDecorator("est_ct_ln", {
               initialValue: jobContext.est_ct_ln
-            })(<Input name="est_ct_ln" onChange={handleChange} />)}
+            })(<Input name='est_ct_ln' onChange={handleChange} />)}
           </Form.Item>
-          <Form.Item label="Estimator First Name">
+          <Form.Item label='Estimator First Name'>
             {getFieldDecorator("est_ct_fn", {
               initialValue: jobContext.est_ct_fn
-            })(<Input name="est_ct_fn" onChange={handleChange} />)}
+            })(<Input name='est_ct_fn' onChange={handleChange} />)}
           </Form.Item>
         </Col>
         <Col span={8}>
-          <Form.Item label="Estimator Phone #">
+          <Form.Item label='Estimator Phone #'>
             {getFieldDecorator("est_ph1", {
               initialValue: jobContext.est_ph1
             })(
               <FormItemPhone
                 customInput={Input}
-                name="est_ph1"
+                name='est_ph1'
                 onValueChange={handleChange}
               />
             )}
           </Form.Item>
-          <Form.Item label="Estimator Email">
+          <Form.Item label='Estimator Email'>
             {getFieldDecorator("est_ea", {
               initialValue: jobContext.est_ea,
               rules: [
@@ -144,7 +143,7 @@ function JobTombstone({ job, ...otherProps }) {
                   message: "This is not a valid email address."
                 }
               ]
-            })(<Input name="est_ea" onChange={handleChange} />)}
+            })(<Input name='est_ea' onChange={handleChange} />)}
           </Form.Item>
         </Col>
       </Row>
diff --git a/client/src/components/jobs-list/jobs-list.component.jsx b/client/src/components/jobs-list/jobs-list.component.jsx
index bfc3e40ae..f69a65087 100644
--- a/client/src/components/jobs-list/jobs-list.component.jsx
+++ b/client/src/components/jobs-list/jobs-list.component.jsx
@@ -38,7 +38,10 @@ export default function JobsPage({ loading, jobs }) {
       sorter: (a, b) => alphaSort(a, b),
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
-      ellipsis: true
+      ellipsis: true,
+      render: (text, record) => {
+        return record.job_status?.name ?? "";
+      }
     },
     {
       title: "Customer",
@@ -75,9 +78,9 @@ export default function JobsPage({ loading, jobs }) {
       render: (text, record) => (
         <span>
           Action 一 {record.ro_number}
-          <Divider type="vertical" />
-          <Divider type="vertical" />
-          More actions <Icon type="down" />
+          <Divider type='vertical' />
+          <Divider type='vertical' />
+          More actions <Icon type='down' />
         </span>
       )
     }
@@ -94,12 +97,12 @@ export default function JobsPage({ loading, jobs }) {
 
   return (
     <div>
-      <Input name="searchCriteria" onChange={handleChange} />
+      <Input name='searchCriteria' onChange={handleChange} />
       <Table
         loading={loading}
         pagination={{ position: "bottom" }}
         columns={columns.map(item => ({ ...item }))}
-        rowKey="id"
+        rowKey='id'
         dataSource={jobs}
         onChange={handleTableChange}
       />
diff --git a/client/src/components/white-board-card/white-board-card.component.jsx b/client/src/components/white-board-card/white-board-card.component.jsx
index db272b443..7443bc84d 100644
--- a/client/src/components/white-board-card/white-board-card.component.jsx
+++ b/client/src/components/white-board-card/white-board-card.component.jsx
@@ -1,59 +1,75 @@
 import React from "react";
-import { Skeleton, Switch, Card, Icon, Avatar } from "antd";
+import { Link } from "react-router-dom";
+import { Menu, Dropdown, Card, Icon, Avatar, Button } from "antd";
 
-const { Meta } = Card;
+export default function WhiteBoardCard({ metadata }) {
+  // const {
+  //   onClick,
+  //   className,
+  //   name,
+  //   cardStyle,
+  //   body,
+  //   dueOn,
+  //   cardColor,
+  //   subTitle,
+  //   tagStyle,
+  //   escalationText,
+  //   tags,
+  //   showDeleteButton,
+  //   onDelete
+  // } = this.props;
+  const menu = (
+    <Menu>
+      <Menu.Item key='images'>
+        <Icon type='file-image' />
+        View Job Images
+      </Menu.Item>
+      <Menu.Item key='printing'>
+        <Icon type='printer' />
+        Printing
+      </Menu.Item>
+      <Menu.Item key='notes'>
+        <Icon type='edit' />
+        Job Notes
+      </Menu.Item>
+      <Menu.Item key='postinvoices'>
+        <Icon type='shopping-cart' />
+        Post Invoices
+      </Menu.Item>
+      <Menu.Item key='receiveparts'>
+        <Icon type='inbox' />
+        Receive Parts
+      </Menu.Item>
+      <Menu.Item key='partstatus'>
+        <Icon type='tool' />
+        Parts Status
+      </Menu.Item>
+    </Menu>
+  );
 
-class WhiteBoardCard extends React.Component {
-  state = {
-    loading: true
-  };
-
-  onChange = checked => {
-    this.setState({ loading: !checked });
-  };
-
-  render() {
-    const { loading } = this.state;
-    // const {
-    //   onClick,
-    //   className,
-    //   name,
-    //   cardStyle,
-    //   body,
-    //   dueOn,
-    //   cardColor,
-    //   subTitle,
-    //   tagStyle,
-    //   escalationText,
-    //   tags,
-    //   showDeleteButton,
-    //   onDelete
-    // } = this.props;
-
-    return (
-      <div>
-        <Card
-          style={{ width: 300, marginTop: 16 }}
-          actions={[
-            <Icon type="setting" key="setting" />,
-            <Icon type="edit" key="edit" />,
-            <Icon type="ellipsis" key="ellipsis" />,
-            <Switch checked={!loading} onChange={this.onChange} />
-          ]}
-        >
-          <Skeleton loading={loading} avatar active>
-            <Meta
-              avatar={
-                <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
-              }
-              title="Card title"
-              description="This is the description"
-            />
-          </Skeleton>
-        </Card>
-      </div>
-    );
-  }
+  return (
+    <div>
+      <Card
+        title={
+          (metadata.ro_number ?? metadata.est_number) +
+          " | " +
+          (metadata.owner?.first_name ?? "") +
+          " " +
+          (metadata.owner?.last_name ?? "")
+        }
+        style={{ width: 300, marginTop: 10 }}
+        actions={[
+          <Link to={`/manage/jobs/${metadata.id}`}>
+            <Icon type='eye' key='view' />
+          </Link>,
+          <Icon type='message' key='message' />,
+          <Dropdown overlay={menu} trigger={["click"]}>
+            <Icon type='ellipsis' />
+          </Dropdown>
+        ]}>
+        <Avatar alt='Job' />
+        This is the card data.
+      </Card>
+    </div>
+  );
 }
-
-export default WhiteBoardCard;
diff --git a/client/src/components/white-board-kanban/white-board-kanban.component.jsx b/client/src/components/white-board-kanban/white-board-kanban.component.jsx
index 4f986fc2f..a230e2d62 100644
--- a/client/src/components/white-board-kanban/white-board-kanban.component.jsx
+++ b/client/src/components/white-board-kanban/white-board-kanban.component.jsx
@@ -11,7 +11,7 @@ export default function WhiteBoardKanBan({ data, eventBus }) {
     <Board
       tagStyle={{ fontSize: "80%" }}
       data={data}
-      draggable
+      laneDraggable={false}
       eventBusHandle={setEventBus}
       components={{ Card: WhiteBoardCard }}
       onCardClick={(cardId, metadata) =>
diff --git a/client/src/components/white-board-kanban/white-board-kanban.container.jsx b/client/src/components/white-board-kanban/white-board-kanban.container.jsx
index febca893e..ac444f7df 100644
--- a/client/src/components/white-board-kanban/white-board-kanban.container.jsx
+++ b/client/src/components/white-board-kanban/white-board-kanban.container.jsx
@@ -13,39 +13,34 @@ export default function WhiteBoardKanBanContainer() {
     }
   );
 
-  const static_data = {
-    lanes: [
-      {
-        id: "lane1",
-        title: "Planned Tasks",
-        label: "2/2",
-        cards: [
-          {
-            id: "Card1",
-            title: "Write Blog",
-            description: "Can AI make memes",
-            label: "30 mins"
-          },
-          {
-            id: "Card2",
-            title: "Pay Rent",
-            description: "Transfer via NEFT",
-            label: "5 mins",
-            metadata: { sha: "be312a1" }
-          }
-        ]
-      },
-      {
-        id: "lane2",
-        title: "Completed",
-        label: "0/0",
-        cards: []
-      }
-    ]
-  };
-
   if (loading) return <LoadingSpinner />;
   if (error) return <Alert message={error.message} />;
   let eventBus;
-  return <WhiteBoardKanBan eventBus={eventBus} data={static_data} />;
+
+  let i = data.job_status.reduce((acc, value) => {
+    //Create a lane object for each row.
+    let newLane = {
+      id: value.name,
+      title: value.name,
+      label: "0",
+      cards: value.jobs.reduce((acc, value) => {
+        acc.push({
+          id: value.id,
+          title: value.ro_number,
+          description: value.est_number,
+          label: value.id,
+          metadata: value
+        });
+        return acc;
+      }, [])
+    };
+    acc.push(newLane);
+    return acc;
+  }, []);
+
+  let laneData = {
+    lanes: i
+  };
+
+  return <WhiteBoardKanBan  eventBus={eventBus} data={laneData} />;
 }
diff --git a/client/src/graphql/jobs.queries.js b/client/src/graphql/jobs.queries.js
index 59f40f764..b42679bcc 100644
--- a/client/src/graphql/jobs.queries.js
+++ b/client/src/graphql/jobs.queries.js
@@ -6,7 +6,9 @@ export const GET_ALL_OPEN_JOBS = gql`
       id
       est_number
       ro_number
-      status
+      job_status {
+        name
+      }
       scheduled_completion
       scheduled_delivery
       vehicle {
@@ -30,7 +32,9 @@ export const SUBSCRIPTION_ALL_OPEN_JOBS = gql`
       updated_at
       est_number
       ro_number
-      status
+      job_status {
+        name
+      }
       scheduled_completion
       scheduled_delivery
       vehicle {
@@ -73,23 +77,30 @@ export const QUERY_JOBS_IN_PRODUCTION = gql`
 
 export const SUBSCRIPTION_JOBS_IN_PRODUCTION = gql`
   subscription SUBSCRIPTION_JOBS_IN_PRODUCTION {
-    jobs(limit: 1, order_by: {updated_at: desc }) {
+    job_status(
+      where: { isproductionstatus: { _eq: true } }
+      order_by: { order: asc }
+    ) {
+      name
+      order
+      isproductionstatus
       id
-      updated_at
-      est_number
-      ro_number
-      status
-      scheduled_completion
-      scheduled_delivery
-      vehicle {
-        v_model_yr
-        v_make_desc
-        v_model_desc
-        plate_no
-      }
-      owner {
-        first_name
-        last_name
+      jobs {
+        id
+        actual_completion
+        actual_delivery
+        actual_in
+        est_number
+        ro_number
+        vehicle {
+          v_model_yr
+          v_model_desc
+          v_make_desc
+        }
+        owner {
+          first_name
+          last_name
+        }
       }
     }
   }
@@ -120,7 +131,9 @@ export const GET_JOB_BY_PK = gql`
       scheduled_completion
       scheduled_in
       scheduled_delivery
-      status
+      job_status {
+        name
+      }
       updated_at
       claim_total
       deductible
diff --git a/client/src/pages/jobs/jobs.page.jsx b/client/src/pages/jobs/jobs.page.jsx
index 532cf576e..3bcf197de 100644
--- a/client/src/pages/jobs/jobs.page.jsx
+++ b/client/src/pages/jobs/jobs.page.jsx
@@ -10,6 +10,10 @@ export default function JobsPage() {
   const { loading, error, data } = useSubscription(SUBSCRIPTION_ALL_OPEN_JOBS, {
     fetchPolicy: "network-only"
   });
+  
+  useEffect(() => {
+    document.title = "new title"
+ }, []);
 
   if (error) return <AlertComponent message={error.message} />;
 
diff --git a/client/src/pages/jobs/test.jsx b/client/src/pages/jobs/test.jsx
deleted file mode 100644
index ede02a3f9..000000000
--- a/client/src/pages/jobs/test.jsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import React from "react";
-import { Table, Button } from "antd";
-
-const data = [
-  {
-    key: "1",
-    name: "John Brown",
-    age: 32,
-    address: "New York No. 1 Lake Park"
-  },
-  {
-    key: "2",
-    name: "Jim Green",
-    age: 42,
-    address: "London No. 1 Lake Park"
-  },
-  {
-    key: "3",
-    name: "Joe Black",
-    age: 32,
-    address: "Sidney No. 1 Lake Park"
-  },
-  {
-    key: "4",
-    name: "Jim Red",
-    age: 32,
-    address: "London No. 2 Lake Park"
-  }
-];
-
-export default class Test extends React.Component {
-  state = {
-    filteredInfo: null,
-    sortedInfo: null
-  };
-
-  handleChange = (pagination, filters, sorter) => {
-    console.log("Various parameters", pagination, filters, sorter);
-    this.setState({
-      filteredInfo: filters,
-      sortedInfo: sorter
-    });
-  };
-
-  clearFilters = () => {
-    this.setState({ filteredInfo: null });
-  };
-
-  clearAll = () => {
-    this.setState({
-      filteredInfo: null,
-      sortedInfo: null
-    });
-  };
-
-  setAgeSort = () => {
-    this.setState({
-      sortedInfo: {
-        order: "descend",
-        columnKey: "age"
-      }
-    });
-  };
-
-  render() {
-    let { sortedInfo, filteredInfo } = this.state;
-    sortedInfo = sortedInfo || {};
-    filteredInfo = filteredInfo || {};
-    console.log("filteredInfo", filteredInfo);
-    const columns = [
-      {
-        title: "Name",
-        dataIndex: "name",
-        key: "name",
-        filters: [
-          { text: "Joe", value: "Joe" },
-          { text: "Jim", value: "Jim" }
-        ],
-        filteredValue: filteredInfo.name || null,
-        onFilter: (value, record) => record.name.includes(value),
-        sorter: (a, b) => a.name.length - b.name.length,
-        sortOrder: sortedInfo.columnKey === "name" && sortedInfo.order,
-        ellipsis: true
-      },
-      {
-        title: "Age",
-        dataIndex: "age",
-        key: "age",
-        sorter: (a, b) => a.age - b.age,
-        sortOrder: sortedInfo.columnKey === "age" && sortedInfo.order,
-        ellipsis: true
-      },
-      {
-        title: "Address",
-        dataIndex: "address",
-        key: "address",
-        filters: [
-          { text: "London", value: "London" },
-          { text: "New York", value: "New York" }
-        ],
-        filteredValue: filteredInfo.address || null,
-        onFilter: (value, record) => record.address.includes(value),
-        sorter: (a, b) => a.address.length - b.address.length,
-        sortOrder: sortedInfo.columnKey === "address" && sortedInfo.order,
-        ellipsis: true
-      }
-    ];
-    return (
-      <div>
-        <div className="table-operations">
-          <Button onClick={this.setAgeSort}>Sort age</Button>
-          <Button onClick={this.clearFilters}>Clear filters</Button>
-          <Button onClick={this.clearAll}>Clear filters and sorters</Button>
-        </div>
-        <Table
-          columns={columns}
-          dataSource={data}
-          onChange={this.handleChange}
-        />
-      </div>
-    );
-  }
-}
diff --git a/client/src/translations/en/common.json b/client/src/translations/en/common.json
new file mode 100644
index 000000000..7e0d476fb
--- /dev/null
+++ b/client/src/translations/en/common.json
@@ -0,0 +1,6 @@
+{
+    "welcome": {
+        "title": "Welcome to {{framework}}",
+        "intro": "To get started, edit <1><0></0></1> and save to reload."
+    }
+}
\ No newline at end of file
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
new file mode 100644
index 000000000..7e0d476fb
--- /dev/null
+++ b/client/src/translations/es/common.json
@@ -0,0 +1,6 @@
+{
+    "welcome": {
+        "title": "Welcome to {{framework}}",
+        "intro": "To get started, edit <1><0></0></1> and save to reload."
+    }
+}
\ No newline at end of file
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
new file mode 100644
index 000000000..3f54dbcce
--- /dev/null
+++ b/client/src/translations/fr/common.json
@@ -0,0 +1,6 @@
+{
+  "welcome": {
+      "title": "Welcome to {{framework}}",
+      "intro": "To get started, edit <1><0></0></1> and save to reload."
+  }
+}
\ No newline at end of file
diff --git a/client/yarn.lock b/client/yarn.lock
index 64022d4b2..405c93c98 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1010,7 +1010,7 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4":
   version "7.7.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.7.tgz#194769ca8d6d7790ec23605af9ee3e42a0aa79cf"
   integrity sha512-uCnC2JEVAu8AKB5do1WRIsvrdJ0flYx/A/9f/6chdacnEZ7LmavjdsDXr5ksYBegxtuTPR5Va9/+13QF/kFkCA==
@@ -5873,6 +5873,13 @@ html-minifier@^3.5.20:
     relateurl "0.2.x"
     uglify-js "3.4.x"
 
+html-parse-stringify2@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
+  integrity sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=
+  dependencies:
+    void-elements "^2.0.1"
+
 html-webpack-plugin@4.0.0-beta.5:
   version "4.0.0-beta.5"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.5.tgz#2c53083c1151bfec20479b1f8aaf0039e77b5513"
@@ -5972,6 +5979,13 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
+i18next@^19.0.2:
+  version "19.0.2"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.0.2.tgz#d72502ef031403572703f2e9f013cae005265444"
+  integrity sha512-fBa43Ann2udP1CQAz3IQpOZ1dGAkmi3mMfzisOhH17igneSRbvZ7P2RNbL+L1iRYKMufBmVwnC7G3gqcyviZ9g==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+
 iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -8043,7 +8057,7 @@ node-notifier@^5.4.2:
     shellwords "^0.1.1"
     which "^1.3.0"
 
-node-pre-gyp@*, node-pre-gyp@^0.14.0:
+node-pre-gyp@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
   integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
@@ -10224,7 +10238,7 @@ react-app-polyfill@^1.0.4:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
-"react-click-outside@github:tj/react-click-outside":
+react-click-outside@tj/react-click-outside:
   version "1.1.1"
   resolved "https://codeload.github.com/tj/react-click-outside/tar.gz/a833ddc5be47490307f9fcc6ed09d8c353108510"
 
@@ -10274,6 +10288,14 @@ react-error-overlay@^6.0.3:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.4.tgz#0d165d6d27488e660bc08e57bdabaad741366f7a"
   integrity sha512-ueZzLmHltszTshDMwyfELDq8zOA803wQ1ZuzCccXa1m57k1PxSHfflPD5W9YIiTXLs0JTLzoj6o1LuM5N6zzNA==
 
+react-i18next@^11.2.7:
+  version "11.2.7"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.2.7.tgz#d0dd61ae6127589e316c6293fc948fe413c63580"
+  integrity sha512-BBm6/ch6jgvpIBwyitNd0G7Z49+wNeyJ6x0rZFcXX6NPrla2GuDGH+oKSjmYRg8IqtL6aG9CwWb06YJCrXbk6w==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    html-parse-stringify2 "2.0.1"
+
 react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
@@ -11276,9 +11298,9 @@ slice-ansi@^2.1.0:
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
-"smooth-dnd@git+https://github.com/rcdexta/smooth-dnd.git":
+"smooth-dnd@https://github.com/rcdexta/smooth-dnd":
   version "0.6.3"
-  resolved "git+https://github.com/rcdexta/smooth-dnd.git#f13924c67bf6ffe4613d97bb1ee83f11d364eb1e"
+  resolved "https://github.com/rcdexta/smooth-dnd#f13924c67bf6ffe4613d97bb1ee83f11d364eb1e"
 
 snapdragon-node@^2.0.1:
   version "2.1.1"
@@ -12404,6 +12426,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+void-elements@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
+  integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
+
 w3c-hr-time@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"