diff --git a/lib/app.dart b/lib/app.dart
index adb802f..6f347eb 100644
--- a/lib/app.dart
+++ b/lib/app.dart
@@ -2,8 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:snapam/util/constants/strings.dart';
 import 'package:snapam/util/theme_config.dart';
-import 'package:snapam/views/pages/auth/login.dart';
-import 'package:snapam/views/pages/main_screen.dart';
+import 'package:snapam/views/pages/tabs_screen/base_page.dart';
 
 class MyApp extends StatelessWidget {
   @override
@@ -13,7 +12,7 @@ class MyApp extends StatelessWidget {
       title: appName,
       theme: themeData(ThemeConfig.lightTheme),
       // darkTheme: themeData(ThemeConfig.darkTheme),
-      home: MainScreen(),
+      home: BasePage(),
     );
   }
 
diff --git a/lib/util/constants/strings.dart b/lib/util/constants/strings.dart
index f994431..68356c4 100644
--- a/lib/util/constants/strings.dart
+++ b/lib/util/constants/strings.dart
@@ -1 +1 @@
-const String appName = 'Snapam';
\ No newline at end of file
+const String appName = 'Chat app';
\ No newline at end of file
diff --git a/lib/views/components/chat_item.dart b/lib/views/components/chat_item.dart
index cea7afd..9994720 100644
--- a/lib/views/components/chat_item.dart
+++ b/lib/views/components/chat_item.dart
@@ -31,7 +31,7 @@ class _ChatItemState extends State<ChatItem> {
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 8.0),
       child: ListTile(
-        contentPadding: EdgeInsets.all(0),
+        contentPadding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
         leading: Stack(
           children: <Widget>[
             CircleAvatar(
diff --git a/lib/views/pages/auth/login.dart b/lib/views/pages/auth/login.dart
index 3d65027..b072d9a 100644
--- a/lib/views/pages/auth/login.dart
+++ b/lib/views/pages/auth/login.dart
@@ -8,7 +8,7 @@ import 'package:snapam/util/navigate.dart';
 import 'package:snapam/util/validations.dart';
 import 'package:snapam/views/components/custom_button.dart';
 import 'package:snapam/views/components/custom_text_field.dart';
-import 'package:snapam/views/pages/main_screen.dart';
+import 'package:snapam/views/pages/tabs_screen/base_page.dart';
 
 class Login extends StatefulWidget {
   @override
@@ -34,7 +34,7 @@ class _LoginState extends State<Login> {
       setState(() {});
       showInSnackBar('Please fix the errors in red before submitting.');
     } else {
-      Navigate.pushPageReplacement(context, MainScreen());
+      Navigate.pushPageReplacement(context, BasePage());
     }
   }
 
diff --git a/lib/views/pages/chat/chat_list.dart b/lib/views/pages/chat/chat_list.dart
new file mode 100644
index 0000000..b3921e8
--- /dev/null
+++ b/lib/views/pages/chat/chat_list.dart
@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+import 'package:snapam/util/data.dart';
+import 'package:snapam/views/components/chat_item.dart';
+
+class ChatList extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return ListView.separated(
+      separatorBuilder: (BuildContext context, int index) {
+        return Align(
+          alignment: Alignment.centerRight,
+          child: Container(
+            height: 0.5,
+            width: MediaQuery.of(context).size.width / 1.3,
+            child: Divider(),
+          ),
+        );
+      },
+      itemCount: chats.length,
+      itemBuilder: (BuildContext context, int index) {
+        Map chat = chats[index];
+        return ChatItem(
+          dp: chat['dp'],
+          name: chat['name'],
+          isOnline: chat['isOnline'],
+          counter: chat['counter'],
+          msg: chat['msg'],
+          time: chat['time'],
+        );
+      },
+    );
+  }
+}
diff --git a/lib/views/pages/chat/chats.dart b/lib/views/pages/chat/chats.dart
index e781789..d806e87 100644
--- a/lib/views/pages/chat/chats.dart
+++ b/lib/views/pages/chat/chats.dart
@@ -1,46 +1,28 @@
 import 'package:flutter/material.dart';
-import 'package:snapam/util/data.dart';
-import 'package:snapam/views/components/chat_item.dart';
+import 'package:responsive_builder/responsive_builder.dart';
+import 'package:snapam/views/pages/chat/chat_list.dart';
+import 'package:snapam/views/pages/chat/conversation.dart';
 
-class Chats extends StatefulWidget {
-  @override
-  _ChatsState createState() => _ChatsState();
-}
-
-class _ChatsState extends State<Chats> {
+class Chats extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
-        title: Text(
-          'Chat'
-        ),
-      ),
-      body: ListView.separated(
-        padding: EdgeInsets.all(10),
-        separatorBuilder: (BuildContext context, int index) {
-          return Align(
-            alignment: Alignment.centerRight,
-            child: Container(
-              height: 0.5,
-              width: MediaQuery.of(context).size.width / 1.3,
-              child: Divider(),
-            ),
-          );
-        },
-        itemCount: chats.length,
-        itemBuilder: (BuildContext context, int index) {
-          Map chat = chats[index];
-          return ChatItem(
-            dp: chat['dp'],
-            name: chat['name'],
-            isOnline: chat['isOnline'],
-            counter: chat['counter'],
-            msg: chat['msg'],
-            time: chat['time'],
-          );
-        },
+      // appBar: AppBar(title: Text('Chat')),
+      body: ScreenTypeLayout(
+        mobile: ChatList(),
+        desktop: buildDesktop(),
+        tablet: buildDesktop(),
       ),
     );
   }
+
+  buildDesktop() {
+    return Row(
+      children: [
+        Container(width: 400.0, child: ChatList()),
+        VerticalDivider(thickness: 1, width: 1),
+        Flexible(child: Conversation()),
+      ],
+    );
+  }
 }
diff --git a/lib/views/pages/chat/conversation.dart b/lib/views/pages/chat/conversation.dart
index b1fd44a..b8f9e90 100644
--- a/lib/views/pages/chat/conversation.dart
+++ b/lib/views/pages/chat/conversation.dart
@@ -1,8 +1,8 @@
 import 'dart:math';
 
 import 'package:flutter/material.dart';
-import 'package:snapam/views/components/chat_bubble.dart';
 import 'package:snapam/util/data.dart';
+import 'package:snapam/views/components/chat_bubble.dart';
 
 class Conversation extends StatefulWidget {
   @override
@@ -24,7 +24,7 @@ class _ConversationState extends State<Conversation> {
           ),
           onPressed: () => Navigator.pop(context),
         ),
-        titleSpacing: 0,
+        titleSpacing: 0.0,
         title: InkWell(
           child: Row(
             children: <Widget>[
@@ -62,14 +62,6 @@ class _ConversationState extends State<Conversation> {
           ),
           onTap: () {},
         ),
-        actions: <Widget>[
-          IconButton(
-            icon: Icon(
-              Icons.more_horiz,
-            ),
-            onPressed: () {},
-          ),
-        ],
       ),
       body: Container(
         height: MediaQuery.of(context).size.height,
@@ -112,7 +104,7 @@ class _ConversationState extends State<Conversation> {
                     children: <Widget>[
                       IconButton(
                         icon: Icon(
-                          Icons.add,
+                          Icons.photo,
                           color: Theme.of(context).accentColor,
                         ),
                         onPressed: () {},
@@ -130,19 +122,13 @@ class _ConversationState extends State<Conversation> {
                             hintText: "Write your message...",
                             hintStyle: TextStyle(
                               fontSize: 15.0,
-                              color: Theme.of(context).textTheme.headline6.color,
+                              color:
+                                  Theme.of(context).textTheme.headline6.color,
                             ),
                           ),
                           maxLines: null,
                         ),
                       ),
-                      IconButton(
-                        icon: Icon(
-                          Icons.mic,
-                          color: Theme.of(context).accentColor,
-                        ),
-                        onPressed: () {},
-                      )
                     ],
                   ),
                 ),
diff --git a/lib/views/pages/home.dart b/lib/views/pages/home.dart
index 0ed4f8f..85e93fe 100644
--- a/lib/views/pages/home.dart
+++ b/lib/views/pages/home.dart
@@ -10,13 +10,14 @@ class Home extends StatefulWidget {
 class _HomeState extends State<Home> {
   @override
   Widget build(BuildContext context) {
+    final screenWidth = MediaQuery.of(context).size.width;
     return Scaffold(
       appBar: AppBar(
         title: Text("Home"),
         centerTitle: true,
       ),
       body: ListView.builder(
-        padding: EdgeInsets.symmetric(horizontal: 20),
+        padding: EdgeInsets.symmetric(horizontal: screenWidth * 0.2),
         itemCount: posts.length,
         itemBuilder: (BuildContext context, int index) {
           Map post = posts[index];
diff --git a/lib/views/pages/profile.dart b/lib/views/pages/profile.dart
index 87bbd1e..518e096 100644
--- a/lib/views/pages/profile.dart
+++ b/lib/views/pages/profile.dart
@@ -43,40 +43,6 @@ class _ProfileState extends State<Profile> {
                 style: TextStyle(),
               ),
               SizedBox(height: 20),
-              Row(
-                mainAxisSize: MainAxisSize.min,
-                children: <Widget>[
-                  FlatButton(
-                    child: Icon(
-                      Icons.message,
-                      color: Colors.white,
-                    ),
-                    color: Colors.grey,
-                    onPressed: () {},
-                  ),
-                  SizedBox(width: 10),
-                  FlatButton(
-                    child: Icon(
-                      Icons.add,
-                      color: Colors.white,
-                    ),
-                    color: Theme.of(context).accentColor,
-                    onPressed: () {},
-                  ),
-                ],
-              ),
-              SizedBox(height: 40),
-              Padding(
-                padding: EdgeInsets.symmetric(horizontal: 50),
-                child: Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  children: <Widget>[
-                    _buildCategory("Posts"),
-                    _buildCategory("Friends"),
-                    _buildCategory("Groups"),
-                  ],
-                ),
-              ),
               SizedBox(height: 20),
               GridView.builder(
                 shrinkWrap: true,
diff --git a/lib/views/pages/tabs_screen/base_page.dart b/lib/views/pages/tabs_screen/base_page.dart
new file mode 100644
index 0000000..032205d
--- /dev/null
+++ b/lib/views/pages/tabs_screen/base_page.dart
@@ -0,0 +1,16 @@
+import 'package:flutter/material.dart';
+import 'package:responsive_builder/responsive_builder.dart';
+
+import 'desktop/rails_page.dart';
+import 'mobile/tabs_page.dart';
+
+class BasePage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return ScreenTypeLayout(
+      mobile: TabsPage(),
+      desktop: RailsPage(),
+      tablet: RailsPage(),
+    );
+  }
+}
diff --git a/lib/views/pages/tabs_screen/desktop/rails_page.dart b/lib/views/pages/tabs_screen/desktop/rails_page.dart
new file mode 100644
index 0000000..663bcf7
--- /dev/null
+++ b/lib/views/pages/tabs_screen/desktop/rails_page.dart
@@ -0,0 +1,149 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_icons/flutter_icons.dart';
+import 'package:snapam/util/constants/strings.dart';
+import 'package:snapam/views/pages/chat/chats.dart';
+import 'package:snapam/views/pages/home.dart';
+import 'package:snapam/views/pages/profile.dart';
+
+class RailsPage extends StatefulWidget {
+  @override
+  _RailsPageState createState() => _RailsPageState();
+}
+
+class _RailsPageState extends State<RailsPage> {
+  List tabs = [
+    {'label': 'Home', 'icon': Icons.home, 'page': Home()},
+    {'label': 'Chat', 'icon': Icons.message, 'page': Chats()},
+    {'label': 'Profile', 'icon': Icons.person, 'page': Profile()},
+  ];
+  int selectedIndex = 0;
+  bool extended = true;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Row(
+        children: [
+          buildRail(),
+          VerticalDivider(thickness: 1, width: 1),
+          Expanded(
+            child: Column(
+              children: [
+                // AppBar(),
+                // Divider(thickness: 1, height: 2),
+                Expanded(child: tabs[selectedIndex]['page'])
+              ],
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  buildRail() {
+    return NavigationRail(
+      leading: buildLeading(),
+      extended: extended,
+      labelType: NavigationRailLabelType.none,
+      selectedIndex: selectedIndex,
+      onDestinationSelected: (int index) {
+        setState(() {
+          selectedIndex = index;
+        });
+      },
+      destinations: [
+        for (Map tab in tabs)
+          NavigationRailDestination(
+            icon: Icon(tab['icon']),
+            // selectedIcon: Icon(e.selectedIcon),
+            label: Text(tab['label']),
+          )
+      ],
+      trailing: Container(
+        child: Column(
+          children: [SizedBox(height: 40.0), buildLogoutButton()],
+        ),
+      ),
+    );
+  }
+
+  buildLeading() {
+    return AnimatedContainer(
+      duration: Duration(milliseconds: 500),
+      // color: Color(0xFF1a1a27),
+      padding:
+          EdgeInsets.symmetric(vertical: 10.0, horizontal: extended ? 10.0 : 5),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          AnimatedContainer(
+            padding: EdgeInsets.only(left: 10.0),
+            width: extended ? null : 0,
+            height: extended ? null : 0,
+            duration: Duration(milliseconds: 500),
+            child: Text(
+              "$appName",
+              style: TextStyle(
+                fontSize: 18.0,
+                fontWeight: FontWeight.w600,
+                // color: Colors.white,
+              ),
+            ),
+          ),
+          IconButton(
+            icon: Icon(
+              extended
+                  ? FlutterIcons.chevron_double_left_mco
+                  : FlutterIcons.chevron_double_right_mco,
+              // color: Colors.white,
+            ),
+            onPressed: () {
+              setState(() {
+                extended = !extended;
+              });
+            },
+          )
+        ],
+      ),
+    );
+  }
+
+  buildLogoutButton() {
+    return MaterialButton(
+      elevation: 0.0,
+      minWidth: extended ? 220 : 45,
+      color: Theme.of(context).accentColor,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(6.0),
+      ),
+      onPressed: () async {
+        // await locator<AuthRepository>().signOut();
+        // Navigator.pushReplacementNamed(context, AppRoutes.onboarding);
+      },
+      padding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 15.0),
+      child: Row(
+        children: [
+          Icon(
+            Icons.power_settings_new,
+            color: Colors.white,
+          ),
+          AnimatedContainer(
+            width: extended ? null : 0,
+            duration: Duration(milliseconds: 500),
+            child: Row(
+              children: [
+                SizedBox(width: 5.0),
+                Text(
+                  "Logout",
+                  style: TextStyle(
+                    color: Colors.white,
+                  ),
+                )
+              ],
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/views/pages/main_screen.dart b/lib/views/pages/tabs_screen/mobile/tabs_page.dart
similarity index 90%
rename from lib/views/pages/main_screen.dart
rename to lib/views/pages/tabs_screen/mobile/tabs_page.dart
index 9ef6d17..0a5ef80 100644
--- a/lib/views/pages/main_screen.dart
+++ b/lib/views/pages/tabs_screen/mobile/tabs_page.dart
@@ -3,12 +3,12 @@ import 'package:snapam/views/pages/chat/chats.dart';
 import 'package:snapam/views/pages/home.dart';
 import 'package:snapam/views/pages/profile.dart';
 
-class MainScreen extends StatefulWidget {
+class TabsPage extends StatefulWidget {
   @override
-  _MainScreenState createState() => _MainScreenState();
+  _TabsPageState createState() => _TabsPageState();
 }
 
-class _MainScreenState extends State<MainScreen> {
+class _TabsPageState extends State<TabsPage> {
   PageController _pageController;
   int _page = 1;
 
diff --git a/macos/Runner/MainFlutterWindow.swift b/macos/Runner/MainFlutterWindow.swift
index 2722837..967186c 100644
--- a/macos/Runner/MainFlutterWindow.swift
+++ b/macos/Runner/MainFlutterWindow.swift
@@ -7,6 +7,9 @@ class MainFlutterWindow: NSWindow {
     let windowFrame = self.frame
     self.contentViewController = flutterViewController
     self.setFrame(windowFrame, display: true)
+    let size = NSSize(width: 1200, height: 750);
+    self.minSize = size
+    self.setContentSize(size)
 
     RegisterGeneratedPlugins(registry: flutterViewController)
 
diff --git a/pubspec.lock b/pubspec.lock
index 7d4849c..930be9d 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -97,6 +97,13 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_icons:
+    dependency: "direct main"
+    description:
+      name: flutter_icons
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.0"
   flutter_staggered_animations:
     dependency: "direct main"
     description:
@@ -228,6 +235,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "3.0.13"
+  responsive_builder:
+    dependency: "direct main"
+    description:
+      name: responsive_builder
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.2.0+2"
   sky_engine:
     dependency: transitive
     description: flutter
diff --git a/pubspec.yaml b/pubspec.yaml
index c69e986..70ca065 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -23,6 +23,8 @@ dependencies:
   google_fonts: ^1.0.0
   flutter_staggered_animations: ^0.1.2
   lottie: ^0.6.0
+  responsive_builder: ^0.2.0+2
+  flutter_icons: ^1.1.0
 
 dev_dependencies:
   flutter_test: