diff --git a/package-lock.json b/package-lock.json
index 8405407..d4837b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2225,9 +2225,15 @@
       }
     },
     "@types/babel__traverse": {
+<<<<<<< HEAD
+      "version": "7.0.14",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.0.14.tgz",
+      "integrity": "sha512-8w9szzKs14ZtBVuP6Wn7nMLRJ0D6dfB0VEBEyRgxrZ/Ln49aNMykrghM2FaNn4FJRzNppCSa0Rv9pBRM5Xc3wg==",
+=======
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.0.15.tgz",
       "integrity": "sha512-Pzh9O3sTK8V6I1olsXpCfj2k/ygO2q1X0vhhnDrEQyYLHZesWz+zMZMVcwXLCYf0U36EtmyYaFGPfXlTtDHe3A==",
+>>>>>>> 181d5ade7d714744da63777a8009426fecae661c
       "requires": {
         "@babel/types": "^7.3.0"
       }
@@ -2356,9 +2362,15 @@
       }
     },
     "@types/react-native": {
+<<<<<<< HEAD
+      "version": "0.63.21",
+      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.63.21.tgz",
+      "integrity": "sha512-MmjjWwSnRq18O0Y6YKXshFfn2tSjH7PY1zRZEOWL7Z2VdBn4+6Wnddgo5yCtYgrm/InxJ9k9GbAIm8r3drxGUA==",
+=======
       "version": "0.63.22",
       "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.63.22.tgz",
       "integrity": "sha512-T+ST35WEwpLFAVCGZ4efujd7eHo1yPx3lwme79pg8sLr2EEhpFbblhXkHTJmENJBEL4FbB5suOS3sMn5kuvioQ==",
+>>>>>>> 181d5ade7d714744da63777a8009426fecae661c
       "requires": {
         "@types/react": "*"
       }
@@ -4245,12 +4257,21 @@
       }
     },
     "browserslist": {
+<<<<<<< HEAD
+      "version": "4.14.4",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.4.tgz",
+      "integrity": "sha512-7FOuawafVdEwa5Jv4nzeik/PepAjVte6HmVGHsjt2bC237jeL9QlcTBDF3PnHEvcC6uHwLGYPwZHNZMB7wWAnw==",
+      "requires": {
+        "caniuse-lite": "^1.0.30001135",
+        "electron-to-chromium": "^1.3.570",
+=======
       "version": "4.14.5",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.5.tgz",
       "integrity": "sha512-Z+vsCZIvCBvqLoYkBFTwEYH3v5MCQbsAjp50ERycpOjnPmolg1Gjy4+KaWWpm8QOJt9GHkhdqAl14NpCX73CWA==",
       "requires": {
         "caniuse-lite": "^1.0.30001135",
         "electron-to-chromium": "^1.3.571",
+>>>>>>> 181d5ade7d714744da63777a8009426fecae661c
         "escalade": "^3.1.0",
         "node-releases": "^1.1.61"
       }
@@ -4416,9 +4437,15 @@
       }
     },
     "caniuse-lite": {
+<<<<<<< HEAD
+      "version": "1.0.30001135",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001135.tgz",
+      "integrity": "sha512-ziNcheTGTHlu9g34EVoHQdIu5g4foc8EsxMGC7Xkokmvw0dqNtX8BS8RgCgFBaAiSp2IdjvBxNdh0ssib28eVQ=="
+=======
       "version": "1.0.30001137",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001137.tgz",
       "integrity": "sha512-54xKQZTqZrKVHmVz0+UvdZR6kQc7pJDgfhsMYDG19ID1BWoNnDMFm5Q3uSBSU401pBvKYMsHAt9qhEDcxmk8aw=="
+>>>>>>> 181d5ade7d714744da63777a8009426fecae661c
     },
     "capture-exit": {
       "version": "2.0.0",
@@ -5808,9 +5835,15 @@
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
     "electron-to-chromium": {
+<<<<<<< HEAD
+      "version": "1.3.571",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.571.tgz",
+      "integrity": "sha512-UYEQ2Gtc50kqmyOmOVtj6Oqi38lm5yRJY3pLuWt6UIot0No1L09uu6Ja6/1XKwmz/p0eJFZTUZi+khd1PV1hHA=="
+=======
       "version": "1.3.573",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.573.tgz",
       "integrity": "sha512-oypaNmexr8w0m2GX67fGLQ0Xgsd7uXz7GcwaHZ9eW3ZdQ8uA2+V/wXmLdMTk3gcacbqQGAN7CXWG3fOkfKYftw=="
+>>>>>>> 181d5ade7d714744da63777a8009426fecae661c
     },
     "elliptic": {
       "version": "6.5.3",
@@ -6587,9 +6620,15 @@
       }
     },
     "eslint-plugin-react": {
+<<<<<<< HEAD
+      "version": "7.21.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.21.1.tgz",
+      "integrity": "sha512-TGtWzWrFjZtrD1giMz0O6a9ul++YR9vZSzIL/a7qlb5I/ra/O5RkMGMJK+KKYnJrzz884kyAkEyWiU4Hg2HTrg==",
+=======
       "version": "7.21.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.21.2.tgz",
       "integrity": "sha512-j3XKvrK3rpBzveKFbgAeGsWb9uz6iUOrR0jixRfjwdFeGSRsXvVTFtHDQYCjsd1/6Z/xvb8Vy3LiI5Reo7fDrg==",
+>>>>>>> 181d5ade7d714744da63777a8009426fecae661c
       "dev": true,
       "requires": {
         "array-includes": "^3.1.1",
@@ -12216,9 +12255,15 @@
       }
     },
     "postcss-load-config": {
+<<<<<<< HEAD
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.1.tgz",
+      "integrity": "sha512-D2ENobdoZsW0+BHy4x1CAkXtbXtYWYRIxL/JbtRBqrRGOPtJ2zoga/bEZWhV/ShWB5saVxJMzbMdSyA/vv4tXw==",
+=======
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.2.tgz",
       "integrity": "sha512-/rDeGV6vMUo3mwJZmeHfEDvwnTKKqQ0S7OHUi/kJvvtx3aWtyWG2/0ZWnzCt2keEclwN6Tf0DST2v9kITdOKYw==",
+>>>>>>> 181d5ade7d714744da63777a8009426fecae661c
       "requires": {
         "cosmiconfig": "^5.0.0",
         "import-cwd": "^2.0.0"
@@ -12767,9 +12812,15 @@
       }
     },
     "postcss-selector-parser": {
+<<<<<<< HEAD
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.3.tgz",
+      "integrity": "sha512-0ClFaY4X1ra21LRqbW6y3rUbWcxnSVkDFG57R7Nxus9J9myPFlv+jYDMohzpkBx0RrjjiqjtycpchQ+PLGmZ9w==",
+=======
       "version": "6.0.4",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz",
       "integrity": "sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==",
+>>>>>>> 181d5ade7d714744da63777a8009426fecae661c
       "requires": {
         "cssesc": "^3.0.0",
         "indexes-of": "^1.0.1",
@@ -13637,9 +13688,15 @@
       }
     },
     "react-native-web": {
+<<<<<<< HEAD
+      "version": "0.13.13",
+      "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.13.tgz",
+      "integrity": "sha512-Fp8oam7i9CjGvEd1KvchMk9mAbT+SUlYxEbzGx4spBtY3sItSgd+XJV7aJ60OO9w4/3U8npgaWx2K4+TG35yaA==",
+=======
       "version": "0.13.14",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.14.tgz",
       "integrity": "sha512-tadUswGcXbH7pNTIGR41I2uqN/YrqGMnRTHbVU/ENGk2lps1W75ty+SHtWsWBEdYF4e2zOw8Dd/AJeD5kbat0A==",
+>>>>>>> 181d5ade7d714744da63777a8009426fecae661c
       "requires": {
         "array-find-index": "^1.0.2",
         "create-react-class": "^15.6.2",
diff --git a/src/components/ChannelSidebar.tsx b/src/components/ChannelSidebar.tsx
new file mode 100644
index 0000000..2791366
--- /dev/null
+++ b/src/components/ChannelSidebar.tsx
@@ -0,0 +1,297 @@
+import React from 'react';
+import clsx from 'clsx';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import ChatBubbleIcon from '@material-ui/icons/ChatBubble';
+import ExpandLess from '@material-ui/icons/ExpandLess';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import CancelOutlinedIcon from '@material-ui/icons/CancelOutlined';
+import AddIcon from '@material-ui/icons/Add';
+import {
+  Paper,
+  Typography,
+  Drawer,
+  Button,
+  List,
+  Divider,
+  ListItem,
+  IconButton,
+  Collapse,
+} from '@material-ui/core';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    list: {
+      width: 300,
+    },
+    drawer: {
+      display: 'flex',
+      justifyContent: 'center',
+      color: '#BBE1FA',
+      backgroundColor: '#0F4C75',
+      height: '100%',
+      borderRadius: '0px',
+      boxShadow: 'inset 4px 0px 4px rgba(255, 255, 255, 0.25)',
+    },
+    heading: {
+      padding: '1rem',
+      textAlign: 'center',
+      fontSize: '32px',
+      alignSelf: 'center',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-evenly',
+    },
+    nested: {
+      paddingLeft: theme.spacing(4),
+      display: 'flex',
+      justifyContent: 'space-between',
+    },
+    projectList: {
+      backgroundColor: '#BBE1FA',
+      color: '#1b262c',
+      display: 'flex',
+      justifyContent: 'space-between',
+      boxShadow: 'inset 4px 0px 4px rgba(255, 255, 255, 0.25)',
+    },
+    channelList: {
+      background: '#1b262c',
+    },
+    addButton: {
+      backgroundColor: '#BBE1FA',
+      color: '#1b262c',
+      display: 'flex',
+      justifyContent: 'center',
+      boxShadow: 'inset 4px 0px 4px rgba(255, 255, 255, 0.25)',
+    },
+  })
+);
+
+type Anchor = 'right';
+
+interface Channel {
+  id: number;
+  name: string;
+  members: number;
+}
+
+interface Project {
+  id: number;
+  name: string;
+  isActive: boolean;
+  channels: Array<Channel>;
+}
+
+const channels_data = [
+  {
+    id: 0,
+    name: 'CSA App',
+    isActive: false,
+    channels: [
+      {
+        id: 0,
+        name: '#UI/UX Design',
+        members: 35,
+      },
+      {
+        id: 1,
+        name: '#Frontend',
+        members: 23,
+      },
+      {
+        id: 2,
+        name: '#Backend',
+        members: 13,
+      },
+      {
+        id: 3,
+        name: '#Marketplace',
+        members: 5,
+      },
+    ],
+  },
+  {
+    id: 1,
+    name: 'Mello',
+    isActive: false,
+    channels: [
+      {
+        id: 0,
+        name: '#UI/UX Design',
+        members: 19,
+      },
+      {
+        id: 1,
+        name: '#Frontend',
+        members: 12,
+      },
+      {
+        id: 2,
+        name: '#Chat Module',
+        members: 13,
+      },
+      {
+        id: 3,
+        name: '#Authentication',
+        members: 5,
+      },
+      {
+        id: 4,
+        name: '#GitHub',
+        members: 18,
+      },
+    ],
+  },
+  {
+    id: 2,
+    name: 'Waves',
+    isActive: false,
+    channels: [
+      {
+        id: 0,
+        name: '#UI/UX Design',
+        members: 24,
+      },
+      {
+        id: 1,
+        name: '#Frontend',
+        members: 17,
+      },
+      {
+        id: 2,
+        name: '#Backend',
+        members: 5,
+      },
+    ],
+  },
+];
+
+export default function ChannelSideBar() {
+  const classes = useStyles();
+  const [state, setState] = React.useState({
+    right: false,
+  });
+  const [open, setOpen] = React.useState([]);
+
+  React.useEffect(() => {
+    channels_data.forEach((project: Project) => {
+      setOpen((oldOpen: Array<Boolean>) => [...oldOpen, project.isActive]);
+    });
+  }, []);
+
+  const toggleDrawer = (anchor: Anchor, open: boolean) => (event: any) => {
+    if (
+      event.type === 'keydown' &&
+      ((event as any).key === 'Tab' || (event as any).key === 'Shift')
+    ) {
+      return;
+    }
+
+    setState({ ...state, [anchor]: open });
+  };
+
+  const list = (anchor: Anchor) => (
+    <Paper className={classes.drawer}>
+      <div
+        className={clsx(classes.list)}
+        onKeyDown={toggleDrawer(anchor, false)}
+      >
+        <div>
+          <Typography variant={'h2'} className={classes.heading}>
+            <div>
+              <ChatBubbleIcon variant={'h3'} /> Channels
+            </div>
+            <IconButton color='inherit'>
+              <CancelOutlinedIcon
+                variant='contained'
+                align='right'
+                onClick={toggleDrawer(anchor, false)}
+              />
+            </IconButton>
+          </Typography>
+        </div>
+
+        <List>
+          {channels_data.map((project: Project) => {
+            return (
+              <React.Fragment>
+                <ListItem
+                  button
+                  onClick={() => {
+                    let newOpen = open;
+                    project.isActive = !project.isActive;
+                    newOpen[project.id] = project.isActive;
+                    setOpen((oldOpen: Array<Boolean>) => [
+                      ...oldOpen,
+                      project.isActive,
+                    ]);
+                  }}
+                  className={classes.projectList}
+                  key={project.id}
+                >
+                  <Typography>{project.name}</Typography>
+                  {open[project.id] ? <ExpandLess /> : <ExpandMore />}
+                </ListItem>
+                <Collapse
+                  in={open[project.id]}
+                  timeout='auto'
+                  unmountOnExit
+                  className={classes.channelList}
+                >
+                  <List component='div' disablePadding>
+                    {project.channels.map((channel: Channel) => {
+                      return (
+                        <React.Fragment>
+                          <ListItem
+                            button
+                            className={classes.nested}
+                            key={channel.id}
+                          >
+                            <Typography>{channel.name}</Typography>
+                            <small style={{ right: 0 }}>
+                              {channel.members} members
+                            </small>
+                          </ListItem>
+                        </React.Fragment>
+                      );
+                    })}
+                  </List>
+                </Collapse>
+                <Divider />
+              </React.Fragment>
+            );
+          })}
+          <ListItem
+            button
+            onClick={() => {
+              //add code for channel popup/modal
+            }}
+            className={classes.addButton}
+          >
+            <AddIcon />
+          </ListItem>
+        </List>
+      </div>
+    </Paper>
+  );
+
+  return (
+    <div>
+      {(['right'] as Anchor[]).map(anchor => (
+        <React.Fragment key={anchor}>
+          <Button onClick={toggleDrawer(anchor, true)}>
+            <ChatBubbleIcon />
+          </Button>
+          <Paper className={classes.drawer}>
+            <Drawer
+              anchor={anchor}
+              open={state[anchor]}
+              onClose={toggleDrawer(anchor, false)}
+            >
+              {list(anchor)}
+            </Drawer>
+          </Paper>
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/Topnav.tsx b/src/components/Topnav.tsx
index f9b3521..c8b815f 100644
--- a/src/components/Topnav.tsx
+++ b/src/components/Topnav.tsx
@@ -5,8 +5,8 @@ import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
 import Badge from '@material-ui/core/Badge';
-import ChatBubbleIcon from '@material-ui/icons/ChatBubble';
 import NotifPanel from './NotifPanel';
+import ChannelSidebar from './ChannelSidebar';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -58,7 +58,7 @@ const Topnav = ({ page, index }: Pagetype) => {
               </Badge>
             </IconButton>
             <IconButton color='inherit'>
-              <ChatBubbleIcon />
+              <ChannelSidebar />
             </IconButton>
           </div>
         </Toolbar>