diff --git a/package.json b/package.json
index 0fcda53..aca1f55 100755
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "react-google-login": "^3.1.0",
     "react-materialize": "^2.1.4",
     "react-redux": "^5.0.6",
+    "react-responsive-modal": "^3.0.0",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "react-router-redux": "next",
diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js
index d132faa..7b3bdfa 100644
--- a/src/components/Modal/index.js
+++ b/src/components/Modal/index.js
@@ -2,7 +2,8 @@ import React from "react";
 
 import Button from "../Button";
 
-import { Modal } from "react-materialize";
+import Modal from "react-responsive-modal";
+import { Row, Col } from "react-materialize";
 
 class RideModal extends React.Component {
   constructor(props) {
@@ -50,14 +51,26 @@ class RideModal extends React.Component {
   }
 
   render() {
-    const { trip, scrollbox, driver } = this.props;
+    const { trip, scrollbox, driver, visible } = this.props;
     const { form, editing } = this.state;
     return (
-      <Modal open>
-        <Button id="close-button" onClick={this.closeModal} label="Close" />
-        {driver && <Button label="Delete" onClick={this.delete} />}
-        {!editing && driver && <Button label="Edit" onClick={this.edit} />}
-        {editing && driver && <Button label="Save" onClick={this.save} />}
+      <Modal open={visible} onClose={this.closeModal}>
+        <h2>
+          {trip.start_city} to {trip.end_city}
+        </h2>
+        <h4> ${trip.price_per_seat} per seat </h4>
+        <h4> {trip.seats} seats available </h4>
+        <p> {trip.info} </p>
+        <Row>
+          <Col>
+            {driver && <Button label="Delete" onClick={this.delete} />}
+            {!driver && <Button label="Contact driver" onClick={this.delete} />}
+          </Col>
+          <Col>
+            {!editing && driver && <Button label="Edit" onClick={this.edit} />}
+            {editing && driver && <Button label="Save" onClick={this.save} />}
+          </Col>
+        </Row>
       </Modal>
     );
   }
diff --git a/src/containers/dashboard.js b/src/containers/dashboard.js
index 9e268ee..b15dcf8 100644
--- a/src/containers/dashboard.js
+++ b/src/containers/dashboard.js
@@ -12,10 +12,10 @@ class Dashboard extends React.Component {
     // TODO: Flesh out ride object
     this.state = {
       trips: [],
+      modalVisible: false,
       selectedTrip: {
         info: "",
       },
-      modalViewing: false,
     };
 
     this.closeModal = this.closeModal.bind(this);
@@ -38,7 +38,7 @@ class Dashboard extends React.Component {
 
   async getRideByID(id) {
     // TODO: fetch specific ride
-    this.setState({
+    await this.setState({
       selectedTrip: {
         seats: 3,
         start_city: "Los Angeles",
@@ -48,27 +48,27 @@ class Dashboard extends React.Component {
         end_dest_lat: "2",
         end_dest_lon: "2",
         price_per_seat: 20,
-        info: "Hi",
+        info:
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at lectus sed odio ornare auctor ac eget massa. Aliquam erat volutpat. Donec placerat risus leo, vel aliquet neque venenatis nec. Sed pulvinar sed urna sagittis eleifend. Fusce quam libero, sagittis quis metus placerat, volutpat mattis mi. Cras sit amet metus tincidunt, tempus dui id, blandit urna. Sed ipsum nibh, dignissim nec enim sed, vehicula condimentum odio. Sed malesuada malesuada magna in dignissim. Ut pellentesque malesuada augue, ac convallis nunc ultrices sit amet. Phasellus laoreet, enim ut congue accumsan, leo mi gravida arcu, sed consectetur augue sem maximus augue. Curabitur sed vulputate justo, vel lacinia quam.",
       },
-      modalViewing: true,
+      modalVisible: true,
     });
   }
 
   async closeModal() {
     this.setState({
+      modalVisible: false,
       selectedTrip: {},
-      modalViewing: false,
     });
   }
 
   render() {
     const {} = this.props;
-    const { trips, selectedTrip, modalViewing } = this.state;
+    const { trips, selectedTrip, modalVisible } = this.state;
 
     const tripCards = trips.map(tripInfo => (
       <li>
         <RideCard
-
           date={tripInfo.date}
           price={tripInfo.price}
           start={tripInfo.start}
@@ -80,13 +80,11 @@ class Dashboard extends React.Component {
     ));
     return (
       <div className="dashboard container">
-        {modalViewing && (
-          <RideModal
-            trip={selectedTrip}
-            closeModal={this.closeModal}
-            scrollbox
-          />
-        )}
+        <RideModal
+          visible={modalVisible}
+          trip={selectedTrip}
+          closeModal={this.closeModal}
+        />
         <ul>{tripCards}</ul>
       </div>
     );
diff --git a/src/containers/driver.js b/src/containers/driver.js
index 5043cd5..2c602f2 100644
--- a/src/containers/driver.js
+++ b/src/containers/driver.js
@@ -23,10 +23,11 @@ class DriverPanel extends React.Component {
     this.state = {
       trips: [],
       selectedTrip: {},
-      tripViewing: false,
+      modalVisible: false,
       err: false,
     };
 
+    this.closeModal = this.closeModal.bind(this);
     this.listRides = this.listRides.bind(this);
     this.getRideByID = this.getRideByID.bind(this);
     this.updateRide = this.updateRide.bind(this);
@@ -52,11 +53,11 @@ class DriverPanel extends React.Component {
         end_dest_lat: "2",
         end_dest_lon: "2",
         price_per_seat: 20,
-        info: "Hi",
+        info:
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at lectus sed odio ornare auctor ac eget massa. Aliquam erat volutpat. Donec placerat risus leo, vel aliquet neque venenatis nec. Sed pulvinar sed urna sagittis eleifend. Fusce quam libero, sagittis quis metus placerat, volutpat mattis mi. Cras sit amet metus tincidunt, tempus dui id, blandit urna. Sed ipsum nibh, dignissim nec enim sed, vehicula condimentum odio. Sed malesuada malesuada magna in dignissim. Ut pellentesque malesuada augue, ac convallis nunc ultrices sit amet. Phasellus laoreet, enim ut congue accumsan, leo mi gravida arcu, sed consectetur augue sem maximus augue. Curabitur sed vulputate justo, vel lacinia quam.",
       },
-      modalViewing: true,
+      modalVisible: true,
     });
-    å;
   }
 
   async updateRide() {
@@ -81,13 +82,20 @@ class DriverPanel extends React.Component {
     });
   }
 
+  async closeModal() {
+    this.setState({
+      modalVisible: false,
+      selectedTrip: {},
+    });
+  }
+
   componentDidMount() {
     this.listRides();
   }
 
   render() {
     const {} = this.props;
-    const { trips, selectedTrip, tripViewing, err } = this.state;
+    const { trips, selectedTrip, modalVisible, err } = this.state;
 
     const tripCards = trips.map(tripInfo => (
       <li>
@@ -120,15 +128,13 @@ class DriverPanel extends React.Component {
           <h2> Upcoming rides </h2>
           {tripCards}
         </Row>
-        {tripViewing && (
-          <RideModal
-            trip={selectedTrip}
-            closeModal={this.closeModal}
-            delete={this.deleteRide}
-            scrollbox
-            driver
-          />
-        )}
+        <RideModal
+          trip={selectedTrip}
+          visible={modalVisible}
+          closeModal={this.closeModal}
+          delete={this.deleteRide}
+          driver
+        />
       </div>
     );
   }
diff --git a/yarn.lock b/yarn.lock
index c87af88..ac12a1e 100755
--- a/yarn.lock
+++ b/yarn.lock
@@ -2349,6 +2349,10 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
+dom-helpers@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
+
 dom-serializer@0, dom-serializer@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -5746,6 +5750,10 @@ no-case@^2.2.0:
   dependencies:
     lower-case "^1.1.1"
 
+no-scroll@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/no-scroll/-/no-scroll-2.1.0.tgz#f8643b3ddb6a3bf94430e5ff31d26f21d082a695"
+
 node-fetch@^1.0.1:
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.1.tgz#899cb3d0a3c92f952c47f1b876f4c8aeabd400d5"
@@ -6824,7 +6832,7 @@ prop-types@^15.5.10, prop-types@^15.5.4:
     fbjs "^0.8.9"
     loose-envify "^1.3.1"
 
-prop-types@^15.5.8:
+prop-types@^15.5.8, prop-types@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
   dependencies:
@@ -7027,6 +7035,10 @@ react-is@^16.3.1:
   version "16.3.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.3.1.tgz#ee66e6d8283224a83b3030e110056798488359ba"
 
+react-lifecycles-compat@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.2.tgz#7279047275bd727a912e25f734c0559527e84eff"
+
 react-materialize@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/react-materialize/-/react-materialize-2.1.4.tgz#f2efcc5807bbf48d638ec1d72f2c84468816f59c"
@@ -7035,6 +7047,12 @@ react-materialize@^2.1.4:
     react "^16.2.0"
     react-dom "^16.2.0"
 
+react-minimalist-portal@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-minimalist-portal/-/react-minimalist-portal-2.1.1.tgz#d32c403f446c5cb91060e3a3c70beba8c3d08c8f"
+  dependencies:
+    prop-types "^15.6.0"
+
 react-reconciler@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.7.0.tgz#9614894103e5f138deeeb5eabaf3ee80eb1d026d"
@@ -7055,6 +7073,17 @@ react-redux@^5.0.6:
     loose-envify "^1.1.0"
     prop-types "^15.5.10"
 
+react-responsive-modal@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-responsive-modal/-/react-responsive-modal-3.0.0.tgz#c88b9f22156fa6585e87df5f68c8f7967a15a73f"
+  dependencies:
+    classnames "^2.2.5"
+    no-scroll "^2.1.0"
+    prop-types "^15.6.1"
+    react-lifecycles-compat "^3.0.2"
+    react-minimalist-portal "^2.1.1"
+    react-transition-group "^2.3.1"
+
 react-router-dom@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d"
@@ -7162,6 +7191,14 @@ react-test-renderer@^16.0.0-0, react-test-renderer@^16.3.1:
     prop-types "^15.6.0"
     react-is "^16.3.1"
 
+react-transition-group@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.3.1.tgz#31d611b33e143a5e0f2d94c348e026a0f3b474b6"
+  dependencies:
+    dom-helpers "^3.3.1"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.1"
+
 react@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"