diff --git a/.gitignore b/.gitignore
index 5fdde25..f89b829 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@
 .buildlog/
 .history
 .svn/
+.env
 
 # IntelliJ related
 *.iml
diff --git a/lib/components/appbar.dart b/lib/components/appbar.dart
index 8fa3939..72dfa5b 100644
--- a/lib/components/appbar.dart
+++ b/lib/components/appbar.dart
@@ -1,9 +1,17 @@
+import 'package:firebase_auth/firebase_auth.dart';
 import 'package:flutter/material.dart';
+import 'package:literature/provider/playerlistprovider.dart';
 import 'package:literature/screens/howtoplay.dart';
+import 'package:literature/screens/landingpage.dart';
+import 'package:literature/screens/profile.dart';
 import 'package:literature/utils/game_communication.dart';
 import 'package:literature/components/credits.dart';
+import 'package:provider/provider.dart';
 
 class GlobalAppBar extends StatefulWidget implements PreferredSizeWidget {
+  final bool backbtn;
+
+  const GlobalAppBar({this.backbtn});
   @override
   _GlobalAppBarState createState() => _GlobalAppBarState();
 
@@ -28,266 +36,278 @@ class BackButton extends StatelessWidget {
   }
 }
 
-showSettingsDialog(BuildContext context) {
-  double height = MediaQuery.of(context).size.height;
-  double width = MediaQuery.of(context).size.width;
-  Widget title = Row(children: <Widget>[
-    Align(alignment: Alignment.centerLeft, child: BackButton()),
-  ]);
-  Widget music = Container(
-    margin: EdgeInsets.fromLTRB(
-        width * 0.011, width * 0.02, width * 0.011, width * 0.02),
-    decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(width * 0.025),
-        border: Border.all(
-            color: Color(0xFF6ad1ff))), //             <--- BoxDecoration here
-    child: GestureDetector(
-      child: Container(
-        width: width * 0.8,
-        height: height * 0.078,
-        child: Material(
+class _GlobalAppBarState extends State<GlobalAppBar> {
+  FirebaseUser user;
+
+  showSettingsDialog(BuildContext context) {
+    double height = MediaQuery.of(context).size.height;
+    double width = MediaQuery.of(context).size.width;
+    Widget title = Row(children: <Widget>[
+      Align(alignment: Alignment.centerLeft, child: BackButton()),
+    ]);
+    Widget music = Container(
+      margin: EdgeInsets.fromLTRB(
+          width * 0.011, width * 0.02, width * 0.011, width * 0.02),
+      decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(width * 0.025),
-          shadowColor: Color(0xFF6ad1ff),
-          //color: Color(0xFF039be5),
-          elevation: width * 0.015,
-          child: Center(
-            child: Text(
-              'Music',
-              style: TextStyle(color: Colors.black, fontFamily: 'B612'),
+          border: Border.all(
+              color: Color(0xFF6ad1ff))), //             <--- BoxDecoration here
+      child: GestureDetector(
+        child: Container(
+          width: width * 0.8,
+          height: height * 0.078,
+          child: Material(
+            borderRadius: BorderRadius.circular(width * 0.025),
+            shadowColor: Color(0xFF6ad1ff),
+            //color: Color(0xFF039be5),
+            elevation: width * 0.015,
+            child: Center(
+              child: Text(
+                'Music',
+                style: TextStyle(color: Colors.black, fontFamily: 'B612'),
+              ),
             ),
           ),
         ),
+        //onTap: () => playMusic(),
       ),
-      //onTap: () => playMusic(),
-    ),
-  );
-  Widget theme = Container(
-    margin: EdgeInsets.fromLTRB(
-        width * 0.011, width * 0.02, width * 0.011, width * 0.02),
-    decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(width * 0.025),
-        border: Border.all(
-            color: Color(0xFF6ad1ff))), //             <--- BoxDecoration here
-    child: GestureDetector(
-      child: Container(
-        height: height * 0.078,
-        child: Material(
+    );
+    Widget theme = Container(
+      margin: EdgeInsets.fromLTRB(
+          width * 0.011, width * 0.02, width * 0.011, width * 0.02),
+      decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(width * 0.025),
-          shadowColor: Color(0xFF6ad1ff),
-          //color: Color(0xFF039be5),
-          elevation: width * 0.015,
-          child: Center(
-            child: Text(
-              'Change Theme',
-              style: TextStyle(color: Colors.black, fontFamily: 'B612'),
+          border: Border.all(
+              color: Color(0xFF6ad1ff))), //             <--- BoxDecoration here
+      child: GestureDetector(
+        child: Container(
+          height: height * 0.078,
+          child: Material(
+            borderRadius: BorderRadius.circular(width * 0.025),
+            shadowColor: Color(0xFF6ad1ff),
+            //color: Color(0xFF039be5),
+            elevation: width * 0.015,
+            child: Center(
+              child: Text(
+                'Change Theme',
+                style: TextStyle(color: Colors.black, fontFamily: 'B612'),
+              ),
             ),
           ),
         ),
+        onTap: () {
+          Navigator.of(context).pop();
+        },
       ),
-      onTap: () {
-        Navigator.of(context).pop();
-      },
-    ),
-  );
+    );
 
-  AlertDialog alert = AlertDialog(
-    actions: [
-      title,
-      music,
-      theme,
-    ],
-  );
+    AlertDialog alert = AlertDialog(
+      actions: [
+        title,
+        music,
+        theme,
+      ],
+    );
 
-  showDialog(
-    context: context,
-    builder: (BuildContext context) {
-      return alert;
-    },
-  );
-}
+    showDialog(
+      context: context,
+      builder: (BuildContext context) {
+        return alert;
+      },
+    );
+  }
 
-showAlertDialog(BuildContext context) {
-  double height = MediaQuery.of(context).size.height;
-  double width = MediaQuery.of(context).size.width;
-  Widget title = Row(children: <Widget>[
-    Align(alignment: Alignment.centerLeft, child: BackButton()),
-  ]);
-  Widget settings = Container(
-    margin: EdgeInsets.fromLTRB(
-        width * 0.011, width * 0.02, width * 0.011, width * 0.02),
-    decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(width * 0.025),
-        border: Border.all(color: Color(0xFF6ad1ff))),
-    child: GestureDetector(
-      child: Container(
-        height: height * 0.078,
-        child: Material(
+  showAlertDialog(BuildContext context) {
+    double height = MediaQuery.of(context).size.height;
+    double width = MediaQuery.of(context).size.width;
+    Widget title = Row(children: <Widget>[
+      Align(alignment: Alignment.centerLeft, child: BackButton()),
+    ]);
+    Widget settings = Container(
+      margin: EdgeInsets.fromLTRB(
+          width * 0.011, width * 0.02, width * 0.011, width * 0.02),
+      decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(width * 0.025),
-          shadowColor: Color(0xFF6ad1ff),
-          //color: Color(0xFF039be5),
-          elevation: width * 0.015,
-          child: Center(
-            child: Text(
-              'Settings',
-              style: TextStyle(color: Colors.black, fontFamily: 'B612'),
+          border: Border.all(color: Color(0xFF6ad1ff))),
+      child: GestureDetector(
+        child: Container(
+          height: height * 0.078,
+          child: Material(
+            borderRadius: BorderRadius.circular(width * 0.025),
+            shadowColor: Color(0xFF6ad1ff),
+            //color: Color(0xFF039be5),
+            elevation: width * 0.015,
+            child: Center(
+              child: Text(
+                'Settings',
+                style: TextStyle(color: Colors.black, fontFamily: 'B612'),
+              ),
             ),
           ),
         ),
+        onTap: () {
+          showSettingsDialog(context);
+        },
       ),
-      onTap: () {
-        showSettingsDialog(context);
-      },
-    ),
-  );
-  Widget profile = Container(
-    margin: EdgeInsets.fromLTRB(
-        width * 0.011, width * 0.02, width * 0.011, width * 0.02),
-    decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(width * 0.025),
-        border: Border.all(color: Color(0xFF6ad1ff))),
-    child: GestureDetector(
-      child: Container(
-        height: height * 0.078,
-        child: Material(
+    );
+    Widget logut = Container(
+      margin: EdgeInsets.fromLTRB(
+          width * 0.011, width * 0.02, width * 0.011, width * 0.02),
+      decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(width * 0.025),
-          shadowColor: Color(0xFF6ad1ff),
-          //color: Color(0xFF039be5),
-          elevation: width * 0.015,
-          child: Center(
-            child: Text(
-              'Profile',
-              style: TextStyle(color: Colors.black, fontFamily: 'B612'),
+          border: Border.all(color: Color(0xFF6ad1ff))),
+      child: GestureDetector(
+        child: Container(
+          height: height * 0.078,
+          child: Material(
+            borderRadius: BorderRadius.circular(width * 0.025),
+            shadowColor: Color(0xFF6ad1ff),
+            //color: Color(0xFF039be5),
+            elevation: width * 0.015,
+            child: Center(
+              child: Text(
+                'Log Out',
+                style: TextStyle(color: Colors.black, fontFamily: 'B612'),
+              ),
             ),
           ),
         ),
+        onTap: () {
+          if (user != null) {
+            Navigator.pop(context);
+            FirebaseAuth.instance.signOut();
+          } else {
+            Navigator.pushReplacement(context,
+                MaterialPageRoute(builder: (context) => LandingPage()));
+          }
+        },
       ),
-      onTap: () {
-        Navigator.of(context).pop();
-      },
-    ),
-  );
-  Widget devdet = Container(
-    margin: EdgeInsets.fromLTRB(
-        width * 0.011, width * 0.02, width * 0.011, width * 0.02),
-    decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(width * 0.025),
-        border: Border.all(color: Color(0xFF6ad1ff))),
-    child: GestureDetector(
-      child: Container(
-        height: height * 0.078,
-        width: width * 0.8,
-        child: Material(
+    );
+    Widget devdet = Container(
+      margin: EdgeInsets.fromLTRB(
+          width * 0.011, width * 0.02, width * 0.011, width * 0.02),
+      decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(width * 0.025),
-          shadowColor: Color(0xFF6ad1ff),
-          //color: Color(0xFF039be5),
-          elevation: width * 0.015,
-          child: Center(
-            child: Text(
-              "Developers' Details",
-              style: TextStyle(color: Colors.black, fontFamily: 'B612'),
+          border: Border.all(color: Color(0xFF6ad1ff))),
+      child: GestureDetector(
+        child: Container(
+          height: height * 0.078,
+          width: width * 0.8,
+          child: Material(
+            borderRadius: BorderRadius.circular(width * 0.025),
+            shadowColor: Color(0xFF6ad1ff),
+            //color: Color(0xFF039be5),
+            elevation: width * 0.015,
+            child: Center(
+              child: Text(
+                "Developers' Details",
+                style: TextStyle(color: Colors.black, fontFamily: 'B612'),
+              ),
             ),
           ),
         ),
+        onTap: () {
+          Navigator.push(
+              context, MaterialPageRoute(builder: (context) => Credits()));
+        },
       ),
-      onTap: () {
-        Navigator.push(
-            context, MaterialPageRoute(builder: (context) => Credits()));
-      },
-    ),
-  );
-  Widget lic = Container(
-    margin: EdgeInsets.fromLTRB(
-        width * 0.011, width * 0.02, width * 0.011, width * 0.02),
-    decoration: BoxDecoration(
-      borderRadius: BorderRadius.circular(width * 0.025),
-      border: Border.all(color: Color(0xFF6ad1ff)),
-    ),
-    child: GestureDetector(
-      child: Container(
-        height: height * 0.078,
-        child: Material(
-          borderRadius: BorderRadius.circular(width * 0.025),
-          shadowColor: Color(0xFF6ad1ff),
-          //color: Color(0xFF039be5),
-          elevation: width * 0.015,
-          child: Center(
-            child: Text(
-              'License',
-              style: TextStyle(color: Colors.black, fontFamily: 'B612'),
+    );
+    Widget lic = Container(
+      margin: EdgeInsets.fromLTRB(
+          width * 0.011, width * 0.02, width * 0.011, width * 0.02),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(width * 0.025),
+        border: Border.all(color: Color(0xFF6ad1ff)),
+      ),
+      child: GestureDetector(
+        child: Container(
+          height: height * 0.078,
+          child: Material(
+            borderRadius: BorderRadius.circular(width * 0.025),
+            shadowColor: Color(0xFF6ad1ff),
+            //color: Color(0xFF039be5),
+            elevation: width * 0.015,
+            child: Center(
+              child: Text(
+                'License',
+                style: TextStyle(color: Colors.black, fontFamily: 'B612'),
+              ),
             ),
           ),
         ),
+        onTap: () {
+          Navigator.of(context).pop();
+        },
       ),
-      onTap: () {
-        Navigator.of(context).pop();
-      },
-    ),
-  );
-  Widget howtoplay = Container(
-    margin: EdgeInsets.fromLTRB(
-        width * 0.011, width * 0.02, width * 0.011, width * 0.02),
-    decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(width * 0.025),
-        border: Border.all(
-            color: Color(0xFF6ad1ff))), //             <--- BoxDecoration here
-    child: GestureDetector(
-      child: Container(
-        height: height * 0.078,
-        child: Material(
+    );
+    Widget howtoplay = Container(
+      margin: EdgeInsets.fromLTRB(
+          width * 0.011, width * 0.02, width * 0.011, width * 0.02),
+      decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(width * 0.025),
-          shadowColor: Color(0xFF6ad1ff),
-          //color: Color(0xFF039be5),
-          elevation: width * 0.015,
-          child: Center(
-            child: Text(
-              'How To Play',
-              style: TextStyle(color: Colors.black, fontFamily: 'B612'),
+          border: Border.all(
+              color: Color(0xFF6ad1ff))), //             <--- BoxDecoration here
+      child: GestureDetector(
+        child: Container(
+          height: height * 0.078,
+          child: Material(
+            borderRadius: BorderRadius.circular(width * 0.025),
+            shadowColor: Color(0xFF6ad1ff),
+            //color: Color(0xFF039be5),
+            elevation: width * 0.015,
+            child: Center(
+              child: Text(
+                'How To Play',
+                style: TextStyle(color: Colors.black, fontFamily: 'B612'),
+              ),
             ),
           ),
         ),
+        onTap: () {
+          Navigator.of(context).pop();
+          Navigator.push(context,
+              MaterialPageRoute(builder: (context) => OnBoardingPage()));
+        },
       ),
-      onTap: () {
-        Navigator.push(
-            context, MaterialPageRoute(builder: (context) => OnBoardingPage()));
-      },
-    ),
-  );
-  AlertDialog alert = AlertDialog(
-    actions: [
-      title,
-      profile,
-      settings,
-      howtoplay,
-      devdet,
-      lic,
-    ],
-  );
+    );
+    AlertDialog alert = AlertDialog(
+      actions: [
+        title,
+        settings,
+        howtoplay,
+        devdet,
+        lic,
+        logut,
+      ],
+    );
 
-  showDialog(
-    context: context,
-    builder: (BuildContext context) {
-      return alert;
-    },
-  );
-}
+    showDialog(
+      context: context,
+      builder: (BuildContext context) {
+        return alert;
+      },
+    );
+  }
 
-class _GlobalAppBarState extends State<GlobalAppBar> {
   @override
   Widget build(BuildContext context) {
     double width = MediaQuery.of(context).size.width;
+    user = Provider.of<PlayerList>(context, listen: false).user;
     return Container(
       height: MediaQuery.of(context).size.height * 0.1,
       child: AppBar(
-        leading: IconButton(
-          onPressed: () {
-            Navigator.of(context).pop();
-            // Close socket connection
-            // after user presses back.
-            game.disconnect();
-          },
-          icon: Icon(Icons.arrow_back_ios),
-          color: Color(0xFF303f9f),
-        ),
+        leading: Navigator.of(context).canPop()
+            ? IconButton(
+                onPressed: () {
+                  Navigator.of(context).pop();
+                  // Close socket connection
+                  // after user presses back.
+                  game.disconnect();
+                },
+                icon: Icon(Icons.arrow_back_ios),
+                color: Color(0xFF303f9f),
+              )
+            : null,
         backgroundColor: Colors.transparent,
         elevation: width * 0.0,
         title: Text('Literature',
@@ -309,12 +329,16 @@ class _GlobalAppBarState extends State<GlobalAppBar> {
         // ],
         actions: <Widget>[
           GestureDetector(
-            child: CircleAvatar(
-              radius: width * 0.05,
-              backgroundColor: Color(0xFF6ad1ff),
-/*              child: Text(
-                'OK'
-              ),*/
+            child: Padding(
+              padding: EdgeInsets.all(10.0),
+              child: CircleAvatar(
+                radius: width * 0.05,
+                backgroundColor: (user == null) ? Color(0xFF6ad1ff) : null,
+                backgroundImage: (user != null)
+                    ? NetworkImage(user.photoUrl, scale: 1.0)
+                    : null,
+                child: (user != null) ? null : Text('A'),
+              ),
             ),
             onTap: () {
               showAlertDialog(context);
diff --git a/lib/provider/playerlistprovider.dart b/lib/provider/playerlistprovider.dart
index 46ac92a..df1e2cf 100644
--- a/lib/provider/playerlistprovider.dart
+++ b/lib/provider/playerlistprovider.dart
@@ -1,21 +1,21 @@
 import 'dart:collection';
+import 'package:firebase_auth/firebase_auth.dart';
 import 'package:flutter/foundation.dart';
 import 'package:literature/models/player.dart';
 
 class PlayerList extends ChangeNotifier {
-
-  final List<Player> _list=[];
-  final List<Player> _currPlayer=[];
-
+  final List<Player> _list = [];
+  final List<Player> _currPlayer = [];
+  FirebaseUser user;
   UnmodifiableListView<Player> get players => UnmodifiableListView(_list);
   Player get currPlayer => _currPlayer.first;
 
-  void addPlayer(Player p){
+  void addPlayer(Player p) {
     _list.add(p);
     notifyListeners();
   }
 
-  void addCurrPlayer(Player p){
+  void addCurrPlayer(Player p) {
     _currPlayer.clear();
     _currPlayer.add(p);
     notifyListeners();
@@ -27,11 +27,15 @@ class PlayerList extends ChangeNotifier {
     notifyListeners();
   }
 
-  void removeAll(){
+  void removeAll() {
     _list.clear();
   }
 
-  Player getLeader(){
+  Player getLeader() {
     return _list.firstWhere((player) => player.lobbyLeader);
   }
-}
\ No newline at end of file
+
+  void addFirebaseUser(FirebaseUser u) {
+    user = u;
+  }
+}
diff --git a/lib/screens/creategame.dart b/lib/screens/creategame.dart
index a1d8930..f7199e6 100644
--- a/lib/screens/creategame.dart
+++ b/lib/screens/creategame.dart
@@ -1,189 +1,530 @@
+import 'package:awesome_dialog/awesome_dialog.dart';
+import 'package:firebase_auth/firebase_auth.dart';
 import 'package:flutter/material.dart';
 import 'package:literature/components/appbar.dart';
+import 'package:literature/models/player.dart';
+import 'package:literature/provider/playerlistprovider.dart';
 import 'package:literature/screens/joinroom.dart';
 import 'package:literature/screens/createroom.dart';
-
+import 'package:literature/screens/waitingpage.dart';
+import 'package:literature/utils/game_communication.dart';
+import 'package:literature/utils/loader.dart';
+import 'package:provider/provider.dart';
+import 'package:after_layout/after_layout.dart';
+import 'dart:convert';
 
 class CreateGame extends StatefulWidget {
   _CreateGame createState() => _CreateGame();
 }
 
-class _CreateGame extends State<CreateGame> {
+class _CreateGame extends State<CreateGame> with AfterLayoutMixin<CreateGame> {
+  Player currPlayer;
+  String playerId;
+  bool isLoading = false;
+  List<dynamic> playersList = <dynamic>[];
+  FirebaseUser user;
+  var currPlayerProvider;
+  TextEditingController joinRoomIdTextController;
+  String joinRoomId;
+  var auth;
+  // TODO: Room ID should be a hashed value
+  String roomId;
   @override
   void initState() {
     super.initState();
+    userDetails();
+
+    joinRoomIdTextController = new TextEditingController();
+    // game.addListener(_joinRoomListener);
   }
 
   void dispose() {
+    game.removeListener(_createGameListener);
+    game.removeListener(_joinRoomListener);
     super.dispose();
   }
 
-  @override
-  Widget build(BuildContext context) {
-    var appBar = GlobalAppBar();
-    return Scaffold(
-      backgroundColor: Color(0xFFb3e5fc),
-      appBar: appBar,
-      body: Center(
-        child: new ListView(children: <Widget>[
-            Stack(children: <Widget>[
-                Container(
-                  height: MediaQuery.of(context).size.height -100,
-                  width: MediaQuery.of(context).size.width,
-                  color: Colors.transparent
-                ),
+  userDetails() async {
+    auth = FirebaseAuth.instance;
+    user = await auth.currentUser();
+  }
 
-                Positioned(
-                  top: MediaQuery.of(context).size.height/15,
-                  child: Container(
-                    decoration: BoxDecoration(
-                      borderRadius: BorderRadius.only(
-                        topLeft: Radius.circular(45.0),
-                        topRight: Radius.circular(45.0),
-                      ),
-                      color: Colors.white
+  _createGameListener(Map message) {
+    switch (message["action"]) {
+      case "set_id":
+        // Set the player ID.
+        playerId = message["data"]["playerId"];
+        print(playerId);
+        Map createDetails = {"name": user.displayName, "playerId": playerId};
+        game.send("create_game", json.encode(createDetails));
+        break;
+
+      ///
+      /// Creates a new game with a Room ID, Redirect to
+      /// waiting page and wait for other players in
+      /// the lobby.
+      ///
+      case 'creates_game':
+        playersList = (message["data"])["players"];
+        roomId = (message["data"])["roomId"];
+
+        // Validates if actually the player created the room,
+        // Need username matching in the db for any room.
+        print(roomId.toString());
+
+        currPlayer = new Player(
+            name: user.displayName,
+            id: playerId,
+            lobbyLeader:
+                (message["data"]["lobbyLeader"])["name"] == user.displayName
+                    ? true
+                    : false);
+
+        currPlayerProvider.addCurrPlayer(currPlayer);
+        currPlayerProvider.removeAll();
+        currPlayerProvider.addPlayer(currPlayer);
+        setState(() {
+          isLoading = false;
+        });
+        // game.removeListener(_createRoomListener);
+        Navigator.push(
+            context,
+            new MaterialPageRoute(
+              builder: (BuildContext context) => WaitingPage(
+                roomId: roomId,
+              ),
+            ));
+        break;
+    }
+  }
+
+  _joinRoomListener(Map message) {
+    switch (message["action"]) {
+      case "set_id":
+        // Set the player ID.
+        playerId = message["data"]["playerId"];
+        Map joinDetails = {
+          "roomId": joinRoomId,
+          "name": user.displayName,
+          "playerId": playerId
+        };
+        game.send("join_game", json.encode(joinDetails));
+        break;
+
+      ///
+      /// Each time a new player joins, we need to
+      ///   * record the new list of players
+      ///   * rebuild the list of all the players
+      ///
+      case "joined":
+        setState(() {
+          isLoading = false;
+        });
+        if (playersList.length == 0) {
+          playersList = (message["data"])["players"];
+          // print(playersList.toString());
+          currPlayer = new Player(name: user.displayName);
+          // Assign the ID of the player
+          currPlayer.id = playerId;
+        }
+        final players = Provider.of<PlayerList>(context, listen: false);
+        players.addCurrPlayer(currPlayer);
+        players.removeAll();
+        List<Player> lp = [];
+        for (var player in (message["data"])["players"]) {
+          Player p;
+          if ((message["data"])["lobbyLeader"]["id"] == player["id"])
+            p = new Player(
+                name: player["name"], id: player["id"], lobbyLeader: true);
+          else
+            p = new Player(name: player["name"], id: player["id"]);
+          lp.add(p);
+        }
+        players.addPlayers(lp);
+        // force rebuild
+        // game.removeListener(_joinRoomListener);
+        Navigator.push(
+            context,
+            new MaterialPageRoute(
+              builder: (BuildContext context) => WaitingPage(
+                roomId: message["data"]["roomId"],
+              ),
+            ));
+        break;
+      case "roomisfull":
+        showAnimateDialogBox(context, "full");
+        game.removeListener(_joinRoomListener);
+        game.disconnect();
+        setState(() {
+          isLoading = false;
+        });
+        break;
+      case "invalid room":
+        showAnimateDialogBox(context, "invalid");
+        game.disconnect();
+        game.removeListener(_joinRoomListener);
+        setState(() {
+          isLoading = false;
+        });
+        break;
+    }
+  }
+
+  /// -----------------------------------------
+  /// Sends a create game signal to the server
+  /// -----------------------------------------
+  _onCreateGame() {
+    // Send a message to server to create a new game
+    // and then move to join room page.
+
+    ///
+    /// Ask to be notified when messages related to the game
+    /// are sent by the server, also creates the connection.
+    ///
+    game.addListener(_createGameListener);
+    game.connect();
+
+    setState(() {
+      isLoading = true;
+    });
+    // Forces a rebuild
+    // setState(() {});
+  }
+
+  _onJoinGame() {
+    // Connect to the
+    // socket.
+    game.addListener(_joinRoomListener);
+    game.connect();
+    setState(() {
+      isLoading = true;
+    });
+  }
+
+  /// ------------------------
+  /// Show Dialog for Users
+  /// ------------------------
+  void showAnimateDialogBox(BuildContext context, String arg) {
+    AwesomeDialog(
+        context: context,
+        dialogType: DialogType.ERROR,
+        animType: AnimType.BOTTOMSLIDE,
+        btnOkColor: Colors.red,
+        title: (arg == "full") ? 'Room is Full' : 'Invalid Room',
+        desc: (arg == "full")
+            ? 'The Room you have requested to join is already full.'
+            : 'The Room you have requested to join doesn\'t exist.',
+        btnOkOnPress: () {},
+        dismissOnBackKeyPress: true,
+        dismissOnTouchOutside: true,
+        useRootNavigator: false)
+      ..show();
+  }
+
+  void showWelcomeMessage() {
+    FirebaseUser u = currPlayerProvider.user;
+    var dialogContext = context;
+    AwesomeDialog(
+        context: dialogContext,
+        dialogType: DialogType.NO_HEADER,
+        customHeader: CircleAvatar(
+          radius: MediaQuery.of(context).size.height * 0.2,
+          child: Image.network(
+            u.photoUrl,
+          ),
+          backgroundColor: Colors.white,
+        ),
+        animType: AnimType.BOTTOMSLIDE,
+        title: 'Welcome ' + u.displayName.split(' ').first,
+        desc: ' ',
+        btnOkOnPress: () {
+          dispose();
+        },
+        dismissOnTouchOutside: true,
+        useRootNavigator: true)
+      ..show();
+  }
+
+  void showJoinDialog(BuildContext context) {
+    showDialog(
+        child: new Dialog(
+          backgroundColor: Colors.white,
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.all(Radius.circular(20.0)),
+          ),
+          child: Container(
+            width: MediaQuery.of(context).size.width * 0.3,
+            height: MediaQuery.of(context).size.height * 0.25,
+            padding: EdgeInsets.fromLTRB(
+                MediaQuery.of(context).size.width * 0.01,
+                MediaQuery.of(context).size.height * 0.01,
+                MediaQuery.of(context).size.width * 0.01,
+                MediaQuery.of(context).size.height * 0.01),
+            child: new Column(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: <Widget>[
+                Center(
+                  child: new Text(
+                    "Join Room",
+                    textAlign: TextAlign.center,
+                    style: TextStyle(
+                      color: Colors.blueAccent,
+                      fontFamily: 'B612',
+                      fontSize: MediaQuery.of(context).size.width * 0.075,
                     ),
-                    height: MediaQuery.of(context).size.height -
-                        MediaQuery.of(context).size.height/15,
-                    width: MediaQuery.of(context).size.width
-                  )
+                  ),
                 ),
-
-                Column(
+                new TextField(
+                  controller: joinRoomIdTextController,
+                  keyboardType: TextInputType.text,
+                  decoration: new InputDecoration(
+                    hintText: 'Enter Room ID...',
+                    contentPadding: EdgeInsets.fromLTRB(
+                        MediaQuery.of(context).size.width * 0.01,
+                        MediaQuery.of(context).size.height * 0.01,
+                        MediaQuery.of(context).size.width * 0.01,
+                        MediaQuery.of(context).size.height * 0.01),
+                    border: new OutlineInputBorder(
+                      borderRadius: new BorderRadius.circular(
+                          MediaQuery.of(context).size.height * 0.03),
+                    ),
+                    icon: const Icon(Icons.person),
+                  ),
+                ),
+                Row(
+                  crossAxisAlignment: CrossAxisAlignment.end,
                   mainAxisAlignment: MainAxisAlignment.center,
-                  crossAxisAlignment: CrossAxisAlignment.center,
                   children: <Widget>[
-                    Center(child:
-                      new Container(
-                        margin: EdgeInsets.only(top: 10.0),
-                        decoration: BoxDecoration(
-                          image: DecorationImage(
-                            image: AssetImage('assets/create_room_bg.png'),
-                            fit: BoxFit.cover
-                          ),
-                        ),
-                        height: 339.0,
-                        width: 241.0,
+                    FlatButton(
+                        onPressed: () {
+                          game.disconnect();
+                          Navigator.pop(context, false);
+                        },
+                        child: Text(
+                          'Close',
+                          style: TextStyle(color: Colors.black),
+                        )),
+                    FlatButton(
+                      onPressed: () {
+                        joinRoomId = joinRoomIdTextController.text;
+                        _onJoinGame();
+                        Navigator.of(context).pop();
+                      },
+                      child: Text(
+                        'Join',
+                        style: TextStyle(color: Colors.blue),
                       ),
                     ),
-                    Container(
-                      padding: EdgeInsets.only(top: 30.0, left: 30.0, right: 30.0),
-                      child: Column(
-                        children: <Widget>[
-                          InkWell(
-                            onTap: () {
-                              Navigator.push(
-                                context,
-                                MaterialPageRoute(
-                                  builder: (context) =>
-                                  CreateRoom()
-                                ),
-                              );
-                            },
-                            child: Container(
-                              height: 50.0,
-                              child: Material(
-                                borderRadius: BorderRadius.circular(20.0),
-                                shadowColor: Color(0xFFb3e5fc),
-                                color: Color(0xFF039be5),
-                                elevation: 7.0,
-                                child: Center(
-                                  child: Text(
-                                    'Create Room',
-                                    style: TextStyle(
-                                        color: Colors.white,
-                                        fontWeight: FontWeight.bold,
-                                        fontFamily: 'B612'),
-                                  ),
-                                ),
-                              ),
-                            )
-                          ),
+                  ],
+                ),
+              ],
+            ),
+          ),
+        ),
+        context: context);
+  }
 
-                          SizedBox(height: 20.0),
-                          InkWell(
-                            onTap: () {
-                              Navigator.push(
-                                context,
-                                MaterialPageRoute(
-                                  builder: (context) =>
-                                  JoinRoom()
-                                ),
-                              );
-                            },
-                            child: Container(
-                              height: 50.0,
-                              child: Material(
-                                borderRadius: BorderRadius.circular(20.0),
-                                shadowColor: Color(0xFF24315E),
-                                color: Color(0xffb0bec5),
-                                elevation: 7.0,
-                                child: Center(
-                                  child: Text(
-                                    'Join Room',
-                                    style: TextStyle(
-                                        color: Colors.white,
-                                        fontWeight: FontWeight.bold,
-                                        fontFamily: 'B612'),
+  @override
+  Widget build(BuildContext context) {
+    currPlayerProvider = Provider.of<PlayerList>(context, listen: false);
+    var appBar = GlobalAppBar();
+    return Scaffold(
+      backgroundColor: Color(0xFFb3e5fc),
+      appBar: appBar,
+      body: isLoading
+          ? new Container(
+              width: double.infinity,
+              height: double.infinity,
+              child: Loader(),
+            )
+          : Center(
+              child: new ListView(
+                children: <Widget>[
+                  Stack(
+                    children: <Widget>[
+                      Container(
+                          height: MediaQuery.of(context).size.height * 0.85,
+                          width: MediaQuery.of(context).size.width,
+                          color: Colors.transparent),
+                      Positioned(
+                          top: MediaQuery.of(context).size.height * 0.035,
+                          child: Container(
+                              decoration: BoxDecoration(
+                                  borderRadius: BorderRadius.only(
+                                    topLeft: Radius.circular(
+                                        MediaQuery.of(context).size.height *
+                                            0.035),
+                                    topRight: Radius.circular(
+                                        MediaQuery.of(context).size.height *
+                                            0.035),
                                   ),
-                                ),
+                                  color: Colors.white),
+                              height: MediaQuery.of(context).size.height -
+                                  MediaQuery.of(context).size.height * 0.025,
+                              width: MediaQuery.of(context).size.width)),
+                      Column(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        crossAxisAlignment: CrossAxisAlignment.center,
+                        children: <Widget>[
+                          Center(
+                            child: new Container(
+                              margin: EdgeInsets.only(
+                                  top: MediaQuery.of(context).size.height *
+                                      0.01),
+                              decoration: BoxDecoration(
+                                image: DecorationImage(
+                                    image:
+                                        AssetImage('assets/create_room_bg.png'),
+                                    fit: BoxFit.cover),
                               ),
-                            )
+                              height: MediaQuery.of(context).size.height * 0.5,
+                              width: MediaQuery.of(context).size.width * 0.7,
+                            ),
                           ),
-
-                          SizedBox(height: 50.0),
-                          InkWell(
-                            onTap: () {
-                              Navigator.push(
-                                context,
-                                MaterialPageRoute(
-                                  builder: (context) =>
-                                  JoinRoom()
-                                ),
-                              );
-                            },
-                            child:Container(
-                              height: 40.0,
-                              color: Colors.transparent,
-                              child: Container(
-                                decoration: BoxDecoration(
-                                    border: Border.all(
-                                        color: Colors.black,
-                                        style: BorderStyle.solid,
-                                        width: 1.0),
+                          Container(
+                            padding: EdgeInsets.only(
+                              top: MediaQuery.of(context).size.height * 0.03,
+                              left: MediaQuery.of(context).size.width * 0.03,
+                              right: MediaQuery.of(context).size.width * 0.03,
+                            ),
+                            child: Column(
+                              children: <Widget>[
+                                InkWell(
+                                    onTap: () => (user != null)
+                                        ? _onCreateGame()
+                                        : Navigator.push(
+                                            context,
+                                            MaterialPageRoute(
+                                                builder: (context) =>
+                                                    CreateRoom())),
+                                    child: Container(
+                                      height:
+                                          MediaQuery.of(context).size.height *
+                                              0.07,
+                                      child: Material(
+                                        borderRadius: BorderRadius.circular(
+                                            MediaQuery.of(context).size.height *
+                                                0.05),
+                                        shadowColor: Color(0xFFb3e5fc),
+                                        color: Color(0xFF039be5),
+                                        elevation: 7.0,
+                                        child: Center(
+                                          child: Text(
+                                            'Create Room',
+                                            style: TextStyle(
+                                                color: Colors.white,
+                                                fontWeight: FontWeight.bold,
+                                                fontFamily: 'B612'),
+                                          ),
+                                        ),
+                                      ),
+                                    )),
+                                SizedBox(
+                                    height: MediaQuery.of(context).size.height *
+                                        0.02),
+                                InkWell(
+                                    onTap: () => (user != null)
+                                        ? showJoinDialog(context)
+                                        : Navigator.push(
+                                            context,
+                                            MaterialPageRoute(
+                                                builder: (context) =>
+                                                    JoinRoom())),
+                                    child: Container(
+                                      height:
+                                          MediaQuery.of(context).size.height *
+                                              0.07,
+                                      child: Material(
+                                        borderRadius: BorderRadius.circular(
+                                            MediaQuery.of(context).size.height *
+                                                0.05),
+                                        shadowColor: Color(0xFF24315E),
+                                        color: Color(0xffb0bec5),
+                                        elevation: 7.0,
+                                        child: Center(
+                                          child: Text(
+                                            'Join Room',
+                                            style: TextStyle(
+                                                color: Colors.white,
+                                                fontWeight: FontWeight.bold,
+                                                fontFamily: 'B612'),
+                                          ),
+                                        ),
+                                      ),
+                                    )),
+                                SizedBox(
+                                    height: MediaQuery.of(context).size.height *
+                                        0.07),
+                                InkWell(
+                                  onTap: () {
+                                    Navigator.push(
+                                      context,
+                                      MaterialPageRoute(
+                                          builder: (context) => JoinRoom()),
+                                    );
+                                  },
+                                  child: Container(
+                                    height: MediaQuery.of(context).size.height *
+                                        0.05,
                                     color: Colors.transparent,
-                                    borderRadius: BorderRadius.circular(20.0)
-                                ),
-                                child: Row(
-                                  mainAxisAlignment: MainAxisAlignment.center,
-                                  children: <Widget>[
-                                    Center(
-                                      child:
-                                      ImageIcon(AssetImage('assets/facebook.png')),
-                                    ),
-                                    SizedBox(width: 10.0),
-                                    Center(
-                                      child: Text('Invite Friends with Facebook',
-                                          style: TextStyle(
-                                              fontWeight: FontWeight.bold,
-                                              fontFamily: 'B612')
+                                    child: Container(
+                                      decoration: BoxDecoration(
+                                          border: Border.all(
+                                              color: Colors.black,
+                                              style: BorderStyle.solid,
+                                              width: 1.0),
+                                          color: Colors.transparent,
+                                          borderRadius: BorderRadius.circular(
+                                              MediaQuery.of(context)
+                                                      .size
+                                                      .height *
+                                                  0.025)),
+                                      child: Row(
+                                        mainAxisAlignment:
+                                            MainAxisAlignment.center,
+                                        children: <Widget>[
+                                          Center(
+                                            child: ImageIcon(
+                                              AssetImage('assets/facebook.png'),
+                                            ),
+                                          ),
+                                          SizedBox(
+                                              width: MediaQuery.of(context)
+                                                      .size
+                                                      .width *
+                                                  0.01),
+                                          Center(
+                                            child: InkWell(
+                                              onTap: () {},
+                                              child: Text(
+                                                'Invite Friends with Facebook',
+                                                style: TextStyle(
+                                                    fontWeight: FontWeight.bold,
+                                                    fontFamily: 'B612'),
+                                              ),
+                                            ),
+                                          )
+                                        ],
                                       ),
-                                    )
-                                  ],
+                                    ),
+                                  ),
                                 ),
-                              ),
-                            )
+                              ],
+                            ),
                           ),
                         ],
                       ),
-                    ),
-                  ],
-                ),
-              ]
+                    ],
+                  ),
+                ],
+              ),
             ),
-          ]
-        ),
-      ),
     );
   }
+
+  @override
+  void afterFirstLayout(BuildContext context) {
+    if (currPlayerProvider.user != null) showWelcomeMessage();
+  }
 }
diff --git a/lib/screens/homepage.dart b/lib/screens/homepage.dart
index 9e1f0ea..533acf4 100644
--- a/lib/screens/homepage.dart
+++ b/lib/screens/homepage.dart
@@ -1,8 +1,11 @@
+import 'package:awesome_dialog/awesome_dialog.dart';
 import 'package:firebase_auth/firebase_auth.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_facebook_login/flutter_facebook_login.dart';
 import 'package:google_sign_in/google_sign_in.dart';
+import 'package:literature/provider/playerlistprovider.dart';
 import 'package:literature/screens/creategame.dart';
+import 'package:provider/provider.dart';
 
 class LiteratureHomePage extends StatefulWidget {
   LiteratureHomePage({Key key, this.title}) : super(key: key);
@@ -14,8 +17,8 @@ class LiteratureHomePage extends StatefulWidget {
   _LiteratureHomePage createState() => _LiteratureHomePage();
 }
 
-class _LiteratureHomePage extends State<LiteratureHomePage> with WidgetsBindingObserver {
-
+class _LiteratureHomePage extends State<LiteratureHomePage>
+    with WidgetsBindingObserver {
   AppLifecycleState _lastLifecycleState;
   //firebase instance
   final FirebaseAuth _auth = FirebaseAuth.instance;
@@ -24,6 +27,8 @@ class _LiteratureHomePage extends State<LiteratureHomePage> with WidgetsBindingO
   //facebook login
   final FacebookLogin facebookSignIn = new FacebookLogin();
 
+  var provider;
+
   @override
   void initState() {
     super.initState();
@@ -36,121 +41,149 @@ class _LiteratureHomePage extends State<LiteratureHomePage> with WidgetsBindingO
 
   //Google Login
   Future<FirebaseUser> _handleGoogleSignIn() async {
-    final GoogleSignInAccount googleUser = await _googleSignIn.signIn();
-    final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
+    try {
+      final GoogleSignInAccount googleUser = await _googleSignIn.signIn();
+      final GoogleSignInAuthentication googleAuth =
+          await googleUser.authentication;
 
-    final AuthCredential credential = GoogleAuthProvider.getCredential(
-      accessToken: googleAuth.accessToken,
-      idToken: googleAuth.idToken,
-    );
-
-    final FirebaseUser user = (await _auth.signInWithCredential(credential)).user;
-    print("signed in " + user.displayName);
-    print(user.email+' '+user.photoUrl);
-    return user;
+      final AuthCredential credential = GoogleAuthProvider.getCredential(
+        accessToken: googleAuth.accessToken,
+        idToken: googleAuth.idToken,
+      );
+      final FirebaseUser user =
+          (await _auth.signInWithCredential(credential)).user;
+      print("signed in " + user.displayName);
+      print(user.email + ' ' + user.photoUrl);
+      provider.addFirebaseUser(user);
+      return user;
+    } on Exception catch (e) {
+      AwesomeDialog(
+          context: context,
+          animType: AnimType.SCALE,
+          dialogType: DialogType.ERROR,
+          title: "Error in Log In",
+          desc: "You have cancelled the process",
+          dismissOnTouchOutside: true,
+          headerAnimationLoop: false,
+          dismissOnBackKeyPress: true)
+        ..show();
+    }
   }
 
   //Facebook Login
   Future<FirebaseUser> _handleFacebookLogin() async {
-    final FacebookLoginResult facebookLoginResult = await facebookSignIn.logIn(['email', 'public_profile']);
-    FacebookAccessToken facebookAccessToken = facebookLoginResult.accessToken;
+    try {
+      final FacebookLoginResult facebookLoginResult =
+          await facebookSignIn.logIn(['email', 'public_profile']);
 
-    final AuthCredential authCredential = FacebookAuthProvider.getCredential(
-      accessToken: facebookAccessToken.token
-      );
-    FirebaseUser fbUser = (await _auth.signInWithCredential(authCredential)).user;
-    print("signed in "+ fbUser.displayName);
-    print(fbUser.email+' '+fbUser.photoUrl);
-    return fbUser;
+      FacebookAccessToken facebookAccessToken = facebookLoginResult.accessToken;
+
+      final AuthCredential authCredential = FacebookAuthProvider.getCredential(
+          accessToken: facebookAccessToken.token);
+      FirebaseUser fbUser =
+          (await _auth.signInWithCredential(authCredential)).user;
+      print("signed in " + fbUser.displayName);
+      print(fbUser.email + ' ' + fbUser.photoUrl);
+      provider.addFirebaseUser(fbUser);
+      return fbUser;
+    } on Exception catch (e) {
+      AwesomeDialog(
+          context: context,
+          animType: AnimType.SCALE,
+          dialogType: DialogType.ERROR,
+          title: "Error in Log In",
+          desc: "You have cancelled the process",
+          dismissOnTouchOutside: true,
+          headerAnimationLoop: false,
+          dismissOnBackKeyPress: true)
+        ..show();
+    }
   }
 
   @override
   Widget build(BuildContext context) {
     double height = MediaQuery.of(context).size.height;
+    provider = Provider.of<PlayerList>(context, listen: false);
     return Scaffold(
       backgroundColor: Colors.white,
       body: Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            InkWell(
-                child: Container(
-                width: 200,
-                height: height*0.5,
-                decoration: BoxDecoration(
-                  color: Color(0xFFe1f5fe),
-                  shape: BoxShape.circle,
-                ),
-                child: Column(
+        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: <
+            Widget>[
+          InkWell(
+            child: Container(
+              width: 200,
+              height: height * 0.5,
+              decoration: BoxDecoration(
+                color: Color(0xFFe1f5fe),
+                shape: BoxShape.circle,
+              ),
+              child: Column(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: <Widget>[
-                    Image(image: AssetImage('assets/logo.png'),
+                    Image(
+                      image: AssetImage('assets/logo.png'),
                     ),
-                    Text('Literature',
-                    style: TextStyle(fontFamily:'Monteserrat',
-                      fontWeight: FontWeight.bold,color:
-                      Color(0xFF37474f),fontSize: 20.0),
+                    Text(
+                      'Literature',
+                      style: TextStyle(
+                          fontFamily: 'Monteserrat',
+                          fontWeight: FontWeight.bold,
+                          color: Color(0xFF37474f),
+                          fontSize: 20.0),
                     ),
-                    Text('Tap to Go!',style: TextStyle(color:
-                      Color(0xFF37474f))
-                    ),
-                  ]
-                ),
-              ),
-              onTap: () {
-                setState(() {});
-                Navigator.push(
-                  context,
-                  MaterialPageRoute(builder: (context) => CreateGame()),
-                );
-              },
+                    Text('Tap to Go!',
+                        style: TextStyle(color: Color(0xFF37474f))),
+                  ]),
             ),
-            SizedBox(
-              height: 100.0,
-              width: 100.0,
-            ),
-            Container(
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: <Widget>[
-                  InkWell(
-                      child: Container(
+            onTap: () {
+              setState(() {});
+              Navigator.push(
+                context,
+                MaterialPageRoute(builder: (context) => CreateGame()),
+              );
+            },
+          ),
+          SizedBox(
+            height: 100.0,
+            width: 100.0,
+          ),
+          Container(
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: <Widget>[
+                InkWell(
+                  child: Container(
                       width: 60,
                       height: 60,
                       decoration: BoxDecoration(
-                        boxShadow: [
-                          BoxShadow(
-                            color: Colors.grey,
-                            offset: const Offset(3.0, 3.0),
-                            blurRadius: 5.0,
-                            spreadRadius: 2.0,
-                          )
-                        ],
-                        border: Border.all(
-                          color: Colors.black,
-                          style: BorderStyle.solid,
-                          width: 1.0,
-                        ),
-                        color: Colors.white,
-                        borderRadius: BorderRadius.circular(40.0)
-                      ),
+                          boxShadow: [
+                            BoxShadow(
+                              color: Colors.grey,
+                              offset: const Offset(3.0, 3.0),
+                              blurRadius: 5.0,
+                              spreadRadius: 2.0,
+                            )
+                          ],
+                          border: Border.all(
+                            color: Colors.black,
+                            style: BorderStyle.solid,
+                            width: 1.0,
+                          ),
+                          color: Colors.white,
+                          borderRadius: BorderRadius.circular(40.0)),
                       child: Center(
-                        child:
-                        ImageIcon(AssetImage('assets/facebook.png')
-                        )
-                      )
-                    ),
-                    onTap: () {
-                      _handleFacebookLogin()
+                          child: ImageIcon(AssetImage('assets/facebook.png')))),
+                  onTap: () {
+                    _handleFacebookLogin()
                         .then((FirebaseUser fbUser) => print(fbUser))
                         .catchError((e) => print(e));
-                    },
-                  ),
-                  SizedBox(
-                    width: 30.0,
-                  ),
-                  InkWell(
-                      child: Container(
+                  },
+                ),
+                SizedBox(
+                  width: 30.0,
+                ),
+                InkWell(
+                  child: Container(
                       width: 60,
                       height: 60,
                       decoration: BoxDecoration(
@@ -171,22 +204,17 @@ class _LiteratureHomePage extends State<LiteratureHomePage> with WidgetsBindingO
                         borderRadius: BorderRadius.circular(40.0),
                       ),
                       child: Center(
-                          child:
-                          ImageIcon(AssetImage('assets/google.png')
-                          )
-                      )
-                    ),
-                    onTap: () {
-                      _handleGoogleSignIn()
+                          child: ImageIcon(AssetImage('assets/google.png')))),
+                  onTap: () {
+                    _handleGoogleSignIn()
                         .then((FirebaseUser user) => print(user))
                         .catchError((e) => print(e));
-                    },
-                  ),
-                ],
-              ),
+                  },
+                ),
+              ],
             ),
-          ]
-        ),
+          ),
+        ]),
       ),
     );
   }
diff --git a/lib/screens/joinroom.dart b/lib/screens/joinroom.dart
index fd93694..f3414fc 100644
--- a/lib/screens/joinroom.dart
+++ b/lib/screens/joinroom.dart
@@ -1,5 +1,6 @@
 import 'dart:convert';
 
+import 'package:awesome_dialog/awesome_dialog.dart';
 import 'package:flutter/material.dart';
 import 'package:literature/components/appbar.dart';
 import 'package:literature/models/player.dart';
@@ -100,14 +101,14 @@ class _JoinRoomState extends State<JoinRoom> {
             ));
         break;
       case "roomisfull":
-        showCustomDialogWithImage(context, "full");
+        showAnimateDialogBox(context, "full");
         game.disconnect();
         setState(() {
           isLoading = false;
         });
         break;
       case "invalid room":
-        showCustomDialogWithImage(context, "invalid");
+        showAnimateDialogBox(context, "invalid");
         game.disconnect();
         setState(() {
           isLoading = false;
@@ -201,55 +202,19 @@ class _JoinRoomState extends State<JoinRoom> {
 /// ------------------------
 /// Show Dialog for Users
 /// ------------------------
-void showCustomDialogWithImage(BuildContext context, String arg) {
-  Dialog dialogWithImage = Dialog(
-    child: Container(
-      height: 300.0,
-      width: 300.0,
-      child: Column(
-        children: <Widget>[
-          Container(
-            padding: EdgeInsets.all(10),
-            alignment: Alignment.center,
-            decoration: BoxDecoration(
-              color: Colors.blue[300],
-            ),
-            child: Text(
-              "SORRY !!!",
-              style: TextStyle(
-                  color: Colors.black,
-                  fontSize: 18,
-                  fontWeight: FontWeight.w600),
-            ),
-          ),
-          Container(
-            height: 200,
-            width: 300,
-            child: Image.asset(
-              (arg == "full") ? 'assets/roomisfull.png' : 'assets/noroom.png',
-              fit: BoxFit.scaleDown,
-            ),
-          ),
-          Row(
-            mainAxisAlignment: MainAxisAlignment.center,
-            crossAxisAlignment: CrossAxisAlignment.end,
-            children: <Widget>[
-              RaisedButton(
-                color: Colors.red,
-                onPressed: () {
-                  Navigator.of(context).pop();
-                },
-                child: Text(
-                  'Go To Main Screen',
-                  style: TextStyle(fontSize: 18.0, color: Colors.white),
-                ),
-              )
-            ],
-          ),
-        ],
-      ),
-    ),
-  );
-  showDialog(
-      context: context, builder: (BuildContext context) => dialogWithImage);
+void showAnimateDialogBox(BuildContext context, String arg) {
+  AwesomeDialog(
+        context: context,
+        dialogType: DialogType.ERROR,
+        animType: AnimType.BOTTOMSLIDE,
+        btnOkColor: Colors.red,
+        title: (arg == "full") ? 'Room is Full' : 'Invalid Room',
+        desc: (arg == "full")
+            ? 'The Room you have requested to join is already full.'
+            : 'The Room you have requested to join doesn\'t exist.',
+        btnOkOnPress: () {},
+        dismissOnBackKeyPress: true,
+        dismissOnTouchOutside: true,
+        useRootNavigator: false)
+      ..show();
 }
diff --git a/lib/screens/landingpage.dart b/lib/screens/landingpage.dart
new file mode 100644
index 0000000..ecb372c
--- /dev/null
+++ b/lib/screens/landingpage.dart
@@ -0,0 +1,40 @@
+import 'package:firebase_auth/firebase_auth.dart';
+import 'package:flutter/material.dart';
+import 'package:literature/provider/playerlistprovider.dart';
+import 'package:literature/screens/creategame.dart';
+import 'package:literature/screens/homepage.dart';
+import 'package:literature/utils/loader.dart';
+import 'package:provider/provider.dart';
+
+class LandingPage extends StatefulWidget {
+  @override
+  _LandingPageState createState() => _LandingPageState();
+}
+
+class _LandingPageState extends State<LandingPage> {
+  @override
+  Widget build(BuildContext context) {
+    final provider = Provider.of<PlayerList>(context);
+    return StreamBuilder<FirebaseUser>(
+      stream: FirebaseAuth.instance.onAuthStateChanged,
+      builder: (context, snapshot) {
+        if (snapshot.connectionState == ConnectionState.active) {
+          FirebaseUser user = snapshot.data;
+          if (user == null) {
+            provider.user = null;
+            return LiteratureHomePage();
+          }
+          provider.addFirebaseUser(user);
+          return CreateGame();
+        } else {
+          return Scaffold(
+            body: Center(
+              child: Loader(),
+            ),
+          );
+        }
+      },
+    );
+  }
+}
+
diff --git a/lib/screens/profile.dart b/lib/screens/profile.dart
new file mode 100644
index 0000000..639be4c
--- /dev/null
+++ b/lib/screens/profile.dart
@@ -0,0 +1,116 @@
+import 'package:flutter/material.dart';
+
+class ProfilePage extends StatefulWidget {
+  @override
+  MapScreenState createState() => MapScreenState();
+}
+
+class MapScreenState extends State<ProfilePage> {
+  @override
+  Widget build(BuildContext context) {
+    return new Scaffold(
+      appBar: AppBar( title: Text('Profile'),),
+      body: new Stack(
+      children: <Widget>[
+        ClipPath(
+          child: Container(color: Colors.black.withOpacity(0.8)),
+          clipper: getClipper(),
+        ),
+        Positioned(
+            width: 350.0,
+            top: MediaQuery.of(context).size.height / 5,
+            child: Column(
+              children: <Widget>[
+                Container(
+                    width: 150.0,
+                    height: 150.0,
+                    decoration: BoxDecoration(
+                        color: Colors.red,
+                        image: DecorationImage(
+                            image: NetworkImage(
+                                'https://pixel.nymag.com/imgs/daily/vulture/2017/06/14/14-tom-cruise.w700.h700.jpg'),
+                            fit: BoxFit.cover),
+                        borderRadius: BorderRadius.all(Radius.circular(75.0)),
+                        boxShadow: [
+                          BoxShadow(blurRadius: 7.0, color: Colors.black)
+                        ])),
+                SizedBox(height: 90.0),
+                Text(
+                  'Tom Cruise',
+                  style: TextStyle(
+                      fontSize: 30.0,
+                      fontWeight: FontWeight.bold,
+                      fontFamily: 'Montserrat'),
+                ),
+                SizedBox(height: 15.0),
+                Text(
+                  'Subscribe guys',
+                  style: TextStyle(
+                      fontSize: 17.0,
+                      fontStyle: FontStyle.italic,
+                      fontFamily: 'Montserrat'),
+                ),
+                SizedBox(height: 25.0),
+                Container(
+                    height: 30.0,
+                    width: 95.0,
+                    child: Material(
+                      borderRadius: BorderRadius.circular(20.0),
+                      shadowColor: Colors.greenAccent,
+                      color: Colors.green,
+                      elevation: 7.0,
+                      child: GestureDetector(
+                        onTap: () {},
+                        child: Center(
+                          child: Text(
+                            'Edit Name',
+                            style: TextStyle(
+                                color: Colors.white, fontFamily: 'Montserrat'),
+                          ),
+                        ),
+                      ),
+                    )),
+                SizedBox(height: 25.0),
+                Container(
+                    height: 30.0,
+                    width: 95.0,
+                    child: Material(
+                      borderRadius: BorderRadius.circular(20.0),
+                      shadowColor: Colors.redAccent,
+                      color: Colors.red,
+                      elevation: 7.0,
+                      child: GestureDetector(
+                        onTap: () {},
+                        child: Center(
+                          child: Text(
+                            'Log out',
+                            style: TextStyle(
+                                color: Colors.white, fontFamily: 'Montserrat'),
+                          ),
+                        ),
+                      ),
+                    ))
+              ],
+            ))
+      ],
+    ));
+  }
+}
+
+class getClipper extends CustomClipper<Path> {
+  @override
+  Path getClip(Size size) {
+    var path = new Path();
+
+    path.lineTo(0.0, size.height / 1.9);
+    path.lineTo(size.width + 125, 0.0);
+    path.close();
+    return path;
+  }
+
+  @override
+  bool shouldReclip(CustomClipper<Path> oldClipper) {
+    // TODO: implement shouldReclip
+    return true;
+  }
+}
diff --git a/lib/screens/splash.dart b/lib/screens/splash.dart
index 60cf859..7b893dc 100644
--- a/lib/screens/splash.dart
+++ b/lib/screens/splash.dart
@@ -1,8 +1,11 @@
 import 'dart:async';
+import 'package:firebase_auth/firebase_auth.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
-
-import 'homepage.dart';
+import 'package:literature/provider/playerlistprovider.dart';
+import 'package:literature/screens/landingpage.dart';
+import 'package:literature/utils/auth.dart';
+import 'package:provider/provider.dart';
 
 class AnimatedSplashScreen extends StatefulWidget {
   @override
@@ -12,20 +15,22 @@ class AnimatedSplashScreen extends StatefulWidget {
 class SplashScreenState extends State<AnimatedSplashScreen>
     with SingleTickerProviderStateMixin {
   var _visible = true;
-
+  var provider;
   AnimationController animationController;
   Animation<double> animation;
 
   startTime() async {
     var _duration = new Duration(seconds: 2);
+    FirebaseUser user = await FirebaseAuth.instance.currentUser();
+    if(user != null) provider.addFirebaseUser(user);
     return new Timer(_duration, navigationPage);
   }
 
-  void navigationPage() {
-    Navigator.push(
-      context,
-      MaterialPageRoute(builder: (context) => LiteratureHomePage()),
-    );  
+  void navigationPage() async {
+    Navigator.pushReplacement(
+        context,
+        new MaterialPageRoute(
+            builder: (BuildContext context) => LandingPage()));
   }
 
   @override
@@ -33,8 +38,8 @@ class SplashScreenState extends State<AnimatedSplashScreen>
     super.initState();
     animationController = new AnimationController(
         vsync: this, duration: new Duration(seconds: 2));
-    animation =
-    new CurvedAnimation(parent: animationController, curve: Curves.elasticInOut);
+    animation = new CurvedAnimation(
+        parent: animationController, curve: Curves.elasticInOut);
 
     animation.addListener(() => this.setState(() {}));
     animationController.forward();
@@ -47,6 +52,7 @@ class SplashScreenState extends State<AnimatedSplashScreen>
 
   @override
   Widget build(BuildContext context) {
+    provider = Provider.of<PlayerList>(context, listen: false);
     return Scaffold(
       body: Center(
         child: new Image.asset(
diff --git a/lib/screens/waitingpage.dart b/lib/screens/waitingpage.dart
index 5e91ef3..1baeeba 100644
--- a/lib/screens/waitingpage.dart
+++ b/lib/screens/waitingpage.dart
@@ -2,6 +2,7 @@ import 'dart:convert';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_local_notifications/flutter_local_notifications.dart';
+import 'package:literature/components/appbar.dart';
 import 'package:literature/models/player.dart';
 import 'package:literature/provider/playerlistprovider.dart';
 // Game communication helper import
@@ -236,13 +237,13 @@ class _WaitingPageState extends State<WaitingPage> {
   _removePlayerFromList(playerInfo, where) {
     print(playerInfo.lobbyLeader);
     if (playerInfo.lobbyLeader) {
-      final players  = Provider.of<PlayerList>(context,listen: false).players;
+      final players = Provider.of<PlayerList>(context, listen: false).players;
       players.forEach((element) {
         if (!element.lobbyLeader) {
           _removePlayerFromList(element, 'leader_leaving');
         }
       });
-      game.send('remove_room', json.encode({"roomId":widget.roomId}));
+      game.send('remove_room', json.encode({"roomId": widget.roomId}));
       return Navigator.of(context).pop(true);
     } else {
       print("initiate removal sequence ${playerInfo.name}");
@@ -253,7 +254,7 @@ class _WaitingPageState extends State<WaitingPage> {
       };
       game.send("player_remove_clicked", json.encode(playerDetails));
     }
-      if (where == 'leave_dialog') {
+    if (where == 'leave_dialog') {
       return Navigator.of(context).pop(false);
     }
   }
@@ -313,8 +314,7 @@ class _WaitingPageState extends State<WaitingPage> {
                 ),
                 title: new Text(
                   name,
-                  style:
-                      TextStyle(fontFamily: 'B612', color: Colors.white),
+                  style: TextStyle(fontFamily: 'B612', color: Colors.white),
                 ),
                 subtitle: new Text("[Lobby Leader]"),
                 trailing: (isLeader) ? _getPlayButton(playerInfo) : null,
@@ -347,8 +347,7 @@ class _WaitingPageState extends State<WaitingPage> {
                 ),
                 title: new Text(
                   name,
-                  style:
-                      TextStyle(fontFamily: 'B612', color: Colors.white),
+                  style: TextStyle(fontFamily: 'B612', color: Colors.white),
                 ),
                 subtitle: new Text(" "),
                 trailing: _getRemoveButton(currPlayer, playerInfo, context),
@@ -386,9 +385,7 @@ class _WaitingPageState extends State<WaitingPage> {
                 TextSpan(
                   text: '\'s room',
                   style: TextStyle(
-                      color: Colors.black,
-                      fontSize: 16,
-                      fontFamily: 'B612'),
+                      color: Colors.black, fontSize: 16, fontFamily: 'B612'),
                 )
               ],
             ),
@@ -416,9 +413,7 @@ class _WaitingPageState extends State<WaitingPage> {
           bottom: false,
           top: false,
           child: Scaffold(
-            appBar: new AppBar(
-              title: new Text('Literature'),
-            ),
+            appBar: GlobalAppBar(),
             body: SingleChildScrollView(
               child: new Column(
                 mainAxisAlignment: MainAxisAlignment.start,
@@ -441,7 +436,10 @@ class _WaitingPageState extends State<WaitingPage> {
         title: Text('Do you want to leave this room'),
         actions: <Widget>[
           FlatButton(
-              onPressed: () => Navigator.pop(context, false),
+              onPressed: () {
+                game.disconnect();
+                Navigator.pop(context, false);
+              },
               child: Text('Close')),
           FlatButton(
               onPressed: () =>
diff --git a/lib/utils/loader.dart b/lib/utils/loader.dart
index 9b74238..453ede0 100644
--- a/lib/utils/loader.dart
+++ b/lib/utils/loader.dart
@@ -27,7 +27,7 @@ class _LoaderState extends State<Loader>
 
     radius = widget.radius;
     dotRadius = widget.dotRadius;
-
+    
     controller = AnimationController(
         lowerBound: 0.0,
         upperBound: 1.0,
diff --git a/lib/utils/websocket.dart b/lib/utils/websocket.dart
index 484a5cf..70d0114 100644
--- a/lib/utils/websocket.dart
+++ b/lib/utils/websocket.dart
@@ -38,7 +38,7 @@ class WebSocket {
     // Initiate communication 
     // To Connect to the Localhost in the App, Read this following
     // https://stackoverflow.com/questions/4779963/how-can-i-access-my-localhost-from-my-android-device
-    _channel = IO.io('http://localhost:3000', <String, dynamic>{
+    _channel = IO.io('http://localhost:3000  ', <String, dynamic>{
       'transports': ['websocket'],
         // 'extraHeaders': {'foo': 'bar'} // optional
     });
diff --git a/node_server/package.json b/node_server/package.json
index edbbcb5..d1a0419 100644
--- a/node_server/package.json
+++ b/node_server/package.json
@@ -85,5 +85,5 @@
     },
     "engines": {
         "node": "10.x"
-      }
+    }
 }
diff --git a/pubspec.lock b/pubspec.lock
index 1021725..d091773 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -1,6 +1,13 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
+  after_layout:
+    dependency: "direct main"
+    description:
+      name: after_layout
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.7+2"
   archive:
     dependency: transitive
     description:
@@ -22,6 +29,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.4.1"
+  awesome_dialog:
+    dependency: "direct main"
+    description:
+      name: awesome_dialog
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.3"
   badges:
     dependency: "direct main"
     description:
@@ -134,6 +148,20 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.1.1+2"
+  flare_dart:
+    dependency: transitive
+    description:
+      name: flare_dart
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.3.4"
+  flare_flutter:
+    dependency: transitive
+    description:
+      name: flare_flutter
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.6"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -347,6 +375,34 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.1.3"
+  sa_anicoto:
+    dependency: transitive
+    description:
+      name: sa_anicoto
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.2"
+  sa_multi_tween:
+    dependency: transitive
+    description:
+      name: sa_multi_tween
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.1"
+  sa_stateless_animation:
+    dependency: transitive
+    description:
+      name: sa_stateless_animation
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.1"
+  sa_v1_migration:
+    dependency: transitive
+    description:
+      name: sa_v1_migration
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.2"
   shared_preferences:
     dependency: "direct main"
     description:
@@ -375,6 +431,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.1.2+4"
+  simple_animations:
+    dependency: transitive
+    description:
+      name: simple_animations
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.2.1"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -429,6 +492,20 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.5"
+  supercharged:
+    dependency: transitive
+    description:
+      name: supercharged
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.8.2"
+  supercharged_dart:
+    dependency: transitive
+    description:
+      name: supercharged_dart
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.1"
   term_glyph:
     dependency: transitive
     description:
diff --git a/pubspec.yaml b/pubspec.yaml
index 918b986..71fa497 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -37,6 +37,8 @@ dependencies:
   firebase_auth: ^0.16.1
   google_sign_in: ^4.5.1
   flutter_facebook_login: ^3.0.0
+  awesome_dialog: ^1.1.3
+  after_layout: ^1.0.7+2
   
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.