diff --git a/app/src/App.js b/app/src/App.js
index 793af17..772ef5c 100644
--- a/app/src/App.js
+++ b/app/src/App.js
@@ -7,6 +7,7 @@ import firebase from 'firebase/app';
 import 'firebase/firestore';
 import Inactive from './Inactive';
 import { getUserUid } from './Api';
+import Chat from './Chat';
 
 const darkTheme = createMuiTheme({
   palette: {
@@ -19,7 +20,7 @@ const darkTheme = createMuiTheme({
 
 const Routes = (props) => (
   <Router>
-    <Create {...props} />
+    <Chat {...props} />
   </Router>
 );
 
@@ -33,7 +34,7 @@ const App = () => {
 
   useEffect(() => {
     setLoading(true);
-    getUserUid();
+    // getUserUid();
     firebase
       .firestore()
       .collection('server')
diff --git a/app/src/Chat.js b/app/src/Chat.js
index c34842b..e1892d9 100644
--- a/app/src/Chat.js
+++ b/app/src/Chat.js
@@ -13,6 +13,10 @@ import Send from '@material-ui/icons/Send';
 import Exit from '@material-ui/icons/ExitToApp';
 import Share from '@material-ui/icons/Share';
 import Delete from '@material-ui/icons/Delete';
+import PhoneEnable from '@material-ui/icons/CallRounded';
+import PhoneDisable from '@material-ui/icons/CallEndRounded';
+import MicOff from '@material-ui/icons/MicOff';
+import MicOn from '@material-ui/icons/Mic';
 import Gif from '@material-ui/icons/Gif';
 import { Carousel } from '@giphy/react-components';
 import { GiphyFetch } from '@giphy/js-fetch-api';
@@ -44,18 +48,21 @@ export default class Chat extends Component {
       newMessage: '',
       admin: null,
       gif: false,
+      onCall: false,
+      muted: false,
     };
-    this.sendMessage = this.sendMessage.bind(this);
-    this.sendMessageInvoker = this.sendMessageInvoker.bind(this);
+    this.port = null;
+    this.gifClick = this.gifClick.bind(this);
     this.endParty = this.endParty.bind(this);
     this.leaveParty = this.leaveParty.bind(this);
     this.shareParty = this.shareParty.bind(this);
     this.syncPlayer = this.syncPlayer.bind(this);
+    this.sendMessage = this.sendMessage.bind(this);
+    this.getCarousel = this.getCarousel.bind(this);
+    this.handlePhoneCall = this.handlePhoneCall.bind(this);
+    this.sendMessageInvoker = this.sendMessageInvoker.bind(this);
     this.videoEventListener = this.videoEventListener.bind(this);
     this.mVideoListener = new VideoListener(this.videoEventListener);
-    this.port = null;
-    this.getCarousel = this.getCarousel.bind(this);
-    this.gifClick = this.gifClick.bind(this);
   }
   componentDidMount() {
     // EVENT CAPTURE FOR ENTER TO SEND
@@ -75,24 +82,24 @@ export default class Chat extends Component {
     this.mVideoListener.start();
 
     // CHROME FIREBASE FIRESTORE LISTENER
-    this.port = chrome.runtime.connect({ name: window.localStorage.getItem('watchPartyRoomId') });
-    // Initialize listener
-    this.port.postMessage({
-      type: 'INIT',
-      roomId: window.localStorage.getItem('watchPartyRoomId'),
-    });
-    // Listener
-    this.port.onMessage.addListener((response) => {
-      if (response.isError === true) {
-        this.props.notify('Uh oh. Got lost from the party.');
-        goTo(Create, this.props);
-        return;
-      }
-      this.setState(response);
-      if (response.player) this.mVideoListener.doUpdate(response.player);
-      const pcc = document.getElementsByClassName('thread-container')[0];
-      if (pcc) pcc.scrollTop = pcc.scrollHeight;
-    });
+    // this.port = chrome.runtime.connect({ name: window.localStorage.getItem('watchPartyRoomId') });
+    // // Initialize listener
+    // this.port.postMessage({
+    //   type: 'INIT',
+    //   roomId: window.localStorage.getItem('watchPartyRoomId'),
+    // });
+    // // Listener
+    // this.port.onMessage.addListener((response) => {
+    //   if (response.isError === true) {
+    //     this.props.notify('Uh oh. Got lost from the party.');
+    //     goTo(Create, this.props);
+    //     return;
+    //   }
+    //   this.setState(response);
+    //   if (response.player) this.mVideoListener.doUpdate(response.player);
+    //   const pcc = document.getElementsByClassName('thread-container')[0];
+    //   if (pcc) pcc.scrollTop = pcc.scrollHeight;
+    // });
 
     // DONE WITH MOUNTING TASKS
     this.props.updateLoading(false);
@@ -201,21 +208,31 @@ export default class Chat extends Component {
     ev.preventDefault();
     this.sendMessageInvoker(iGif.images.original.url);
   }
-  getCarousel() {
-    const trendingFetch = (offset) => giphyFetch.trending({ offset, limit: 5 });
-    const searchFetch = (offset) => giphyFetch.search(this.state.newMessage, { offset, limit: 5 });
-    return (
-      <Carousel
-        fetchGifs={this.state.newMessage === '' ? trendingFetch : searchFetch}
-        gifHeight={200}
-        gutter={6}
-        onGifClick={this.gifClick}
-        hideAttribution
-      />
-    );
+  getCarousel(offset) {
+    return this.state.newMessage === ''
+      ? giphyFetch.trending({ offset, limit: 1 })
+      : giphyFetch.search(this.state.newMessage, { offset, limit: 1 });
+  }
+  handlePhoneCall() {
+    if (!this.state.onCall) {
+      navigator.mediaDevices
+        .getUserMedia({
+          video: false,
+          audio: true,
+        })
+        .then((mediaStream) => {
+          this.setState({ onCall: true, muted: false });
+          console.log('GOT DEVICE');
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    } else {
+      this.setState({ onCall: false });
+    }
   }
   render() {
-    const { admin, name, messages, newMessage, gif } = this.state;
+    const { admin, name, messages, newMessage, gif, onCall, muted } = this.state;
     if (getPlayerSource() === PLAYER_SOURCE.HBONOW && messages[0] !== alertMessage)
       messages.unshift(alertMessage);
     return (
@@ -238,7 +255,7 @@ export default class Chat extends Component {
             </Button>
             {admin && (
               <Button onClick={this.endParty} startIcon={<Delete />}>
-                {/* <span className="party-control-button-text">End Party</span> */}
+                <span className="party-control-button-text">End</span>
               </Button>
             )}
           </ButtonGroup>
@@ -246,34 +263,70 @@ export default class Chat extends Component {
         <div className="thread-container">
           <Thread messages={messages} />
         </div>
-        <TextField
-          multiline
-          rowsMax="3"
-          size="small"
-          placeholder="New message... (Enter to send)"
-          variant="outlined"
-          className="chat-message-box addFocus"
-          value={newMessage}
-          onChange={(e) => this.setState({ newMessage: e.target.value, gif: false })}
-          InputProps={{
-            id: 'chat-message-box-input',
-            endAdornment: (
-              <InputAdornment position="end">
-                <IconButton onClick={() => this.sendMessageInvoker(newMessage)} edge="end">
-                  <Send />
-                </IconButton>
-              </InputAdornment>
-            ),
-            startAdornment: (
-              <InputAdornment position="start">
-                <IconButton onClick={() => this.setState({ gif: !gif })} edge="start">
-                  <Gif />
-                </IconButton>
-              </InputAdornment>
-            ),
-          }}
-        />
-        {gif ? this.getCarousel() : null}
+        <div className="text-phone-panel">
+          <TextField
+            multiline
+            rowsMax="3"
+            size="small"
+            placeholder={this.state.gif ? 'Search something...' : 'Say something...'}
+            helperText={this.state.newMessage && !this.state.gif ? 'Enter to send' : null}
+            variant="outlined"
+            className="chat-message-box addFocus"
+            value={newMessage}
+            onChange={(e) => {
+              this.setState({ newMessage: e.target.value });
+              if (this.state.gif) {
+                const carousel = document.querySelector('.giphy-carousel');
+                setTimeout(() => carousel.scroll(carousel.scrollWidth, carousel.scrollHeight), 250);
+              }
+            }}
+            InputProps={{
+              id: 'chat-message-box-input',
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    className={`${this.state.gif ? 'gif-active' : ''} ${
+                      this.state.newMessage ? 'message-active' : ''
+                    } message-send`}
+                    size="small"
+                    onClick={() => this.sendMessageInvoker(newMessage)}
+                    edge="end"
+                  >
+                    <Send />
+                  </IconButton>
+                </InputAdornment>
+              ),
+              startAdornment: (
+                <InputAdornment position="start">
+                  <IconButton onClick={() => this.setState({ gif: !gif })} edge="start">
+                    <Gif />
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+          />
+          <IconButton onClick={this.handlePhoneCall} color={onCall ? 'secondary' : 'primary'}>
+            {onCall ? <PhoneDisable /> : <PhoneEnable />}
+          </IconButton>
+          {onCall && !muted ? (
+            <IconButton color="secondary">
+              <MicOff />
+            </IconButton>
+          ) : onCall && muted ? (
+            <IconButton color="primary">
+              <MicOn />
+            </IconButton>
+          ) : null}
+        </div>
+        {gif ? (
+          <Carousel
+            fetchGifs={this.getCarousel}
+            gifHeight={200}
+            gutter={6}
+            onGifClick={this.gifClick}
+            hideAttribution
+          />
+        ) : null}
       </div>
     );
   }
diff --git a/app/src/Giphy.png b/app/src/Giphy.png
new file mode 100644
index 0000000..c42e09e
Binary files /dev/null and b/app/src/Giphy.png differ
diff --git a/app/src/Thread.js b/app/src/Thread.js
index 7a5f77b..511fe3a 100644
--- a/app/src/Thread.js
+++ b/app/src/Thread.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import { Typography } from '@material-ui/core';
 import './Thread.css';
-import firebase from 'firebase/app';
-import 'firebase/firestore';
 
 const Thread = (props) =>
   props.messages.map((m, midx) => {
diff --git a/app/src/index.css b/app/src/index.css
index ea36fe5..cb0085c 100644
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -275,6 +275,11 @@ textarea::-webkit-scrollbar {
 .party-controls button:hover .MuiButton-startIcon {
   margin-right: 8px !important;
 }
+.giphy-carousel::before {
+  position: relative;
+  bottom: 40%;
+  content: url('./Giphy.png');
+}
 .giphy-carousel {
   margin-top: 1rem;
   min-height: fit-content;
@@ -283,9 +288,11 @@ textarea::-webkit-scrollbar {
   border-radius: 1rem;
   transform: scale(0.85);
   transition: all ease-in-out 0.2s;
+  opacity: 0.7;
 }
 .giphy-carousel img:hover {
-  transform: scale(0.95);
+  opacity: 1;
+  transform: scale(0.9);
 }
 
 .giphy-carousel::-webkit-scrollbar {
@@ -300,3 +307,17 @@ textarea::-webkit-scrollbar {
   background-color: rgb(118, 182, 255);
   border-radius: 13px;
 }
+.message-send svg {
+  transform: scale(0.55);
+  transition: all ease 0.5s !important;
+}
+.message-active svg {
+  transform: rotate(-90deg) scale(0.75);
+}
+.message-send.gif-active {
+  display: none !important;
+}
+.text-phone-panel {
+  display: flex;
+  align-items: center;
+}