diff --git a/app/chatyuk.jsx b/app/chatyuk.jsx
index d0c1d45..eb2aac2 100644
--- a/app/chatyuk.jsx
+++ b/app/chatyuk.jsx
@@ -4,7 +4,11 @@ var ChatArea = require('./components/chat_area.jsx');
 
 var comms = Object.create(XmppComms);
 
+var MobileDetect = require('mobile-detect');
 var Chatyuk = {
+  isMobile: function() {
+    return new MobileDetect(window.navigator.userAgent).mobile() !== null;
+  },
 
   defaultConfig: {
     display_mode: 'inpage'
@@ -24,7 +28,7 @@ var Chatyuk = {
 
   renderComponent: function(parentEl) {
     React.render(
-      <ChatArea comms={comms} config={this.config} />,
+      <ChatArea comms={comms} config={this.config} mobile={this.isMobile()} />,
       parentEl
     );
   }
diff --git a/app/components/chat_area.jsx b/app/components/chat_area.jsx
index 65c9f3c..fd8477a 100644
--- a/app/components/chat_area.jsx
+++ b/app/components/chat_area.jsx
@@ -34,7 +34,7 @@ var ChatArea = React.createClass({
   },
 
   chatBoxClass: function() {
-    if(this.props.config.display_mode == 'inpage') {
+    if(this.props.config.display_mode == 'inpage' || this.props.mobile == true) {
       return InPageChatBox;
     } else {
       return OnPageChatBox;
@@ -47,7 +47,7 @@ var ChatArea = React.createClass({
 
     if(this.props. comms.isConnected()) { 
       return (
-      <ChatBox>
+      <ChatBox mobile={this.props.mobile}>
         <MessagePane comms={this.props.comms} />
         <LoggedInBox logout={this.logout} username={this.state.username} room={this.state.room} />
         <MessageBox comms={this.props.comms} />
@@ -55,7 +55,7 @@ var ChatArea = React.createClass({
       );
     } else {
       return (
-        <ChatBox>
+        <ChatBox mobile={this.props.mobile}>
           <LoginForm loggedInAs={this.loggedInAs} username="test" room="testroom" />
         </ChatBox>
       );
diff --git a/app/components/in_page_chat_box.jsx b/app/components/in_page_chat_box.jsx
index a551a00..c711f98 100644
--- a/app/components/in_page_chat_box.jsx
+++ b/app/components/in_page_chat_box.jsx
@@ -3,15 +3,25 @@ var ChatBoxHead = require('./chat_box_head.jsx');
 var InPageChatBox = React.createClass({
 
   render: function() {
+    var chatStyle = {};
+    if(this.props.mobile){
+      chatStyle = {
+        backgroundColor: 'yellow',
+        height: '1000px',
+        width: '500px'
+      }
+    }
+
     return (
-      <div id="chatyuk">
+      <div id="chatyuk" style= {chatStyle}>
        <ChatBoxHead ref="chatBoxHead"/>
         <div className="chat-body" >
          <div className="chat-area">
            {this.props.children}
           </div>
         </div>
-      </div>);
+      </div>
+    );
   }
 
 });
diff --git a/package.json b/package.json
index 7a86dbf..ddad37e 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,8 @@
   "version": "0.0.1",
   "description": "A fun embed-able multiuser chat room for fun and profit",
   "dependencies": {
-    "react": "^0.12"
+    "react": "^0.12",
+    "mobile-detect": "0.4.3"
   },
   "scripts": {
     "build-tests": "watchify -p proxyquireify/plugin -e jasmine/spec/suite.js -t reactify -o jasmine/spec/bundle.js --verbose",
diff --git a/public/chat.html b/public/chat.html
index 94d3958..8c7cd1c 100644
--- a/public/chat.html
+++ b/public/chat.html
@@ -8,15 +8,11 @@
 
   <body>
     <div id="chatarea" style="
-        border:  1px solid black;
-        width: 25%;
-        height: 100%;
-        float: right;
     "></div>
     <script type="text/javascript" src="scripts/bundle.js"></script>
     <script type="text/javascript">
       var chatyuk = Object.create(Chatyuk);
-      chatyuk.init(document.querySelector('#chatarea'), {display_mode: 'inpage'});
+      chatyuk.init(document.querySelector('#chatarea'), {display_mode: 'onpage'});
     </script>
   </body>
 
diff --git a/public/css/chatyuk.css b/public/css/chatyuk.css
index 8f0a74d..56d7f47 100644
--- a/public/css/chatyuk.css
+++ b/public/css/chatyuk.css
@@ -1508,3 +1508,4 @@ input.custom-xmpp-status {
   margin: 0 0.25em 0 0.5em;
   vertical-align: -0.5em;
   background-size: 5em 5em; }
+
