diff --git a/client/public/index.html b/client/public/index.html
index c0344da..960f4b6 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -7,6 +7,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>entropychat.app</title>
     <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
   </head>
   <body>
     <noscript>
diff --git a/client/src/assets/logo-black.png b/client/src/assets/logo-black.png
new file mode 100644
index 0000000..38fb846
Binary files /dev/null and b/client/src/assets/logo-black.png differ
diff --git a/client/src/assets/logo-white.png b/client/src/assets/logo-white.png
new file mode 100644
index 0000000..e37d380
Binary files /dev/null and b/client/src/assets/logo-white.png differ
diff --git a/client/src/assets/logo.png b/client/src/assets/logo.png
old mode 100644
new mode 100755
index f3d2503..1c8d38a
Binary files a/client/src/assets/logo.png and b/client/src/assets/logo.png differ
diff --git a/client/src/components/community/ChannelButton.vue b/client/src/components/community/ChannelButton.vue
new file mode 100644
index 0000000..2c42b68
--- /dev/null
+++ b/client/src/components/community/ChannelButton.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="channel-button" :class="selected && 'active'">
+    <div>
+      <i data-feather="hash" class="hashtag"></i>
+      <span>{{name}}</span>
+    </div>
+    <div class="actions" v-if="true">
+      <i data-feather="user-plus" class="add"></i>
+      <i data-feather="settings" class="settings"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+import { onMounted } from '@vue/composition-api';
+
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup() {
+    onMounted(() => {
+      // eslint-disable-next-line no-undef
+      feather.replace();
+    });
+  },
+};
+</script>
+
+<style lang="scss">
+  .channel-button {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 5px 3px;
+
+    border-radius: 5px;
+
+    background-color: transparent;
+    transition: background-color 0.3s;
+
+    cursor: pointer;
+
+    .actions {
+      visibility: hidden;
+    }
+
+    div {
+      display: flex;
+      align-items: center;
+    }
+
+    div span {
+      font-size: 13px;
+
+      margin-left: 5px;
+
+      color: $septenary;
+    }
+
+    &:hover {
+      background-color: $senary;
+      // padding: 3px 3px;
+
+      div span {
+        font-weight: bold;
+        color: $white;
+      }
+
+      div.actions {
+        visibility: visible;
+      }
+    }
+
+    .hashtag {
+      width: 18px;
+      height: 18px;
+
+      color: $symbol;
+    }
+
+    .add {
+      width: 16px;
+      height: 16px;
+
+      color: $symbol;
+
+      cursor: pointer;
+
+      transition: color 0.3s;
+
+      &:hover {
+        color: $white;
+      }
+    }
+
+    .settings {
+      width: 16px;
+      height: 16px;
+
+      margin-left: 4px;
+
+      color: $symbol;
+
+      cursor: pointer;
+
+      transition: color 0.3s;
+
+      &:hover {
+        color: $white;
+      }
+    }
+  }
+</style>
diff --git a/client/src/components/community/Communities.vue b/client/src/components/community/Communities.vue
new file mode 100644
index 0000000..091b112
--- /dev/null
+++ b/client/src/components/community/Communities.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="communities">
+    <CommunityButton :isHome="true" />
+
+    <div class="separator"></div>
+
+    <CommunityButton draggable="true" />
+    <CommunityButton :hasNotifications="true" :mentions="1" draggable="true" />
+    <CommunityButton draggable="true" />
+    <CommunityButton :mentions="1" draggable="true" />
+    <CommunityButton :hasNotifications="true" draggable="true" />
+    <CommunityButton draggable="true" />
+    <CommunityButton draggable="true" />
+    <CommunityButton draggable="true" />
+    <CommunityButton draggable="true" />
+    <CommunityButton draggable="true" />
+    <CommunityButton draggable="true" />
+  </div>
+</template>
+
+<script>
+import CommunityButton from '@/components/community/CommunityButton.vue';
+
+export default {
+  components: {
+    CommunityButton,
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '@/styles/abstracts/_variables.scss';
+
+  .communities {
+    grid-area: COM;
+
+    max-height: 100vh;
+    overflow-y: scroll;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+
+    background-color: $quaternary;
+    padding: 11px 0;
+
+    &::-webkit-scrollbar {
+      display: none;
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+    }
+
+    .separator {
+      width: 32px;
+
+      border-bottom: 2px solid $quinary;
+      margin-bottom: 8px;
+    }
+  }
+</style>
diff --git a/client/src/components/community/CommunityButton.vue b/client/src/components/community/CommunityButton.vue
new file mode 100644
index 0000000..f0b441e
--- /dev/null
+++ b/client/src/components/community/CommunityButton.vue
@@ -0,0 +1,117 @@
+<template>
+  <button :class="[ 'community-button',
+                    isHome && 'home' || 'notHome',
+                    hasNotifications && 'notification',
+                    mentions > 0 && 'mention', ]">
+    <span v-if="isHome"><img src="@/assets/logo-white.png" /></span>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+    isHome: {
+      type: Boolean,
+      default: false,
+    },
+    hasNotifications: {
+      type: Boolean,
+      default: false,
+    },
+    mentions: Number,
+  },
+};
+</script>
+
+<style lang="scss">
+  .community-button {
+    width: 48px;
+    height: 48px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    margin-bottom: 8px;
+
+    background-color: $secondary;
+
+    cursor: pointer;
+
+    position: relative;
+
+    border-radius: 25px;
+
+    img {
+      width: 32px;
+      height: 32px;
+    }
+
+    transition: border-radius .3s, background-color .3s;
+
+    &.active, &:hover {
+      border-radius: 15px;
+    }
+
+    &.home {
+      background-color: $primary;
+
+      &.active, &:hover {
+        background-color: $green;
+      }
+    }
+
+    &.notHome {
+      &.active, &:hover {
+        background-color: $discord;
+      }
+    }
+
+    &.notification {
+      &::before {
+        content: '';
+
+        width: 9px;
+        height: 9px;
+
+        position: absolute;
+        left: -17px;
+        top: calc(50% - 4.5px);
+
+        background-color: $white;
+        border-radius: 25px;
+      }
+    }
+
+    &.mention {
+      &::after {
+        // TODO: Bind to computed property or something
+        content: '1';
+
+        width: auto;
+        height: 16px;
+
+        position: absolute;
+        bottom: -4px;
+        right: -4px;
+
+        background-color: $notification;
+        border-radius: 12px;
+        padding: 0 4px;
+
+        border: 4px solid $quinary;
+
+        text-align: right;
+        font-size: 13px;
+        font-weight: bold;
+
+        color: $white;
+      }
+    }
+  }
+</style>
diff --git a/client/src/components/community/CommunityChannelMessage.vue b/client/src/components/community/CommunityChannelMessage.vue
new file mode 100644
index 0000000..80a498f
--- /dev/null
+++ b/client/src/components/community/CommunityChannelMessage.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="community-channel-message">
+    <div class="avatar" :class="isBot && 'bot'"></div>
+    <div class="message">
+      <div class="header">
+        <strong>{{author}}</strong>
+        <span v-if="isBot">Bot</span>
+        <time>{{date}}</time>
+      </div>
+      <div class="content">{{message}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    author: {
+      type: String,
+      required: true,
+    },
+    date: {
+      type: String,
+      required: true,
+    },
+    message: {
+      type: String,
+      required: true,
+    },
+    isBot: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+  .community-channel-message {
+    display: flex;
+    align-items: center;
+
+    padding: 8px 16px;
+    margin-right: 4px;
+
+    background-color: transparent;
+
+    .avatar {
+      width: 40px;
+      height: 40px;
+
+      background-color: $tertiary;
+      border-radius: 50%;
+
+      &.bot {
+        background-color: $mention-detail;
+      }
+    }
+
+    .message {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      min-height: 40px;
+      margin-left: 17px;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+
+      strong {
+        font-size: 14px;
+
+        color: $white;
+      }
+
+      span {
+        padding: 4px 5px;
+        margin-left: 6px;
+
+        border-radius: 4px;
+
+        text-transform: uppercase;
+        font-weight: bold;
+        font-size: 11px;
+
+        background-color: $discord;
+        color: $white;
+      }
+
+      time {
+        margin-left: 6px;
+        font-size: 11px;
+
+        color: $gray;
+      }
+    }
+
+    .content {
+      text-align: left;
+      font-size: 14px;
+
+      color: $white;
+    }
+  }
+</style>
diff --git a/client/src/components/community/CommunityChannelMessages.vue b/client/src/components/community/CommunityChannelMessages.vue
new file mode 100644
index 0000000..44388db
--- /dev/null
+++ b/client/src/components/community/CommunityChannelMessages.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="community-channel-messages">
+    <div class="messages">
+      <CommunityChannelMessage :author="'Manolo Ito'"
+                               :date="'07/02/2020'"
+                               :message="'This is a test message'" />
+
+      <CommunityChannelMessage :author="'Manolo Ito'"
+                               :date="'07/02/2020'"
+                               :message="'This is a test message'" />
+
+      <CommunityChannelMessage :author="'Manolo Ito'"
+                               :date="'07/02/2020'"
+                               :message="'This is a test message'" />
+
+      <CommunityChannelMessage :author="'Manolo Ito'"
+                               :date="'07/02/2020'"
+                               :message="'This is a test message'" />
+
+      <CommunityChannelMessage :author="'Manolo Ito'"
+                               :date="'07/02/2020'"
+                               :message="'This is a test message'" />
+
+      <CommunityChannelMessage :author="'Manolo Ito'"
+                               :date="'07/02/2020'"
+                               :message="'This is a test message'" />
+
+      <CommunityChannelMessage :author="'Manolo Ito'"
+                               :date="'07/02/2020'"
+                               :message="'This is a test message'" />
+
+      <CommunityChannelMessage :author="'Manolo Ito'"
+                               :date="'07/02/2020'"
+                               :message="'This is a test message'" />
+
+      <CommunityChannelMessage :author="'Manolo Ito'"
+                               :date="'07/02/2020'"
+                               :message="'This is a test message'" />
+
+      <CommunityChannelMessage :author="'Manolo Ito'"
+                               :date="'07/02/2020'"
+                               :message="'This is a test message'" />
+
+      <CommunityChannelMessage :author="'Manolo Ito'"
+                               :date="'07/02/2020'"
+                               :message="'This is a test message'" />
+
+      <CommunityChannelMessage :author="'Manolo Ito'"
+                               :date="'07/02/2020'"
+                               :message="'This is a test message'" />
+
+      <CommunityChannelMessage :author="'Manolo Ito'"
+                               :date="'07/02/2020'"
+                               :message="'This is a test message'" />
+
+      <CommunityChannelMessage :author="'Manolo Ito'"
+                               :date="'07/02/2020'"
+                               :message="'This is a test message'" />
+
+      <CommunityChannelMessage :author="'Manolo Ito'"
+                               :date="'07/02/2020'"
+                               :message="'This is a test message'" />
+
+      <CommunityChannelMessage :author="'CG-BOT'"
+                               :date="'07/02/2020'"
+                               :message="'🚨 Stop spamming @ManoloIto'"
+                               :hasMention="true"
+                               :isBot="true" />
+    </div>
+
+    <div class="input-wrapper">
+      <input type="text" placeholder="Message #👋welcome"/>
+      <i data-feather="plus-circle" class="add"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+import CommunityChannelMessage from '@/components/community/CommunityChannelMessage.vue';
+import { onMounted } from '@vue/composition-api';
+
+export default {
+  components: {
+    CommunityChannelMessage,
+  },
+  setup() {
+    onMounted(() => {
+      // eslint-disable-next-line no-undef
+      feather.replace();
+    });
+  },
+};
+</script>
+
+<style lang="scss">
+  .community-channel-messages {
+    grid-area: CCM;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    background-color: $secondary;
+
+    .messages {
+      display: flex;
+      flex-direction: column;
+
+      max-height: calc(100vh - 46px - 69px);
+      overflow-y: scroll;
+
+      padding: 20px 0;
+
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: $quaternary;
+        border-radius: 6px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: $tertiary;
+      }
+    }
+
+    .input-wrapper {
+      width: 100%;
+      padding: 0 16px;
+
+      input {
+        width: 100%;
+        height: 40px;
+
+        padding: 0 10px 0 47px;
+
+        border-radius: 7px;
+
+        color: $white;
+        background-color: $primary;
+
+        position: relative;
+
+        opacity: 0.9;
+
+        &::placeholder {
+          color: $white;
+        }
+
+        ~ svg {
+          position: relative;
+          top: -47%;
+          left: 10px;
+          transition: 180ms ease-in-out;
+        }
+      }
+
+      .input-icon {
+        width: 24px;
+        height: 24px;
+
+        color: $gray;
+      }
+    }
+  }
+</style>
diff --git a/client/src/components/community/CommunityChannels.vue b/client/src/components/community/CommunityChannels.vue
new file mode 100644
index 0000000..22c0cfc
--- /dev/null
+++ b/client/src/components/community/CommunityChannels.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="community-channels">
+    <div class="category">
+      <span>🌱Coding garden</span>
+      <i data-feather="plus"></i>
+    </div>
+
+    <ChannelButton :name="'👋welcome'" />
+    <ChannelButton :name="'🗣introductions'" />
+    <ChannelButton :name="'📣announcements'" />
+    <ChannelButton :name="'📺new-videos'" />
+  </div>
+</template>
+
+<script>
+import { onMounted } from '@vue/composition-api';
+import ChannelButton from '@/components/community/ChannelButton.vue';
+
+export default {
+  components: {
+    ChannelButton,
+  },
+  setup() {
+    onMounted(() => {
+      // eslint-disable-next-line no-undef
+      feather.replace();
+    });
+  },
+};
+</script>
+
+<style lang="scss">
+  .community-channels {
+    grid-area: COC;
+
+    display: flex;
+    flex-direction: column;
+
+    padding: 24px 9px 0 16px;
+
+    background-color: $tertiary;
+
+    .category {
+      display: flex;
+      align-content: center;
+      justify-content: space-between;
+
+      margin-bottom: 6px;
+
+      span {
+        text-transform: uppercase;
+        font-size: 12px;
+        font-weight: 500;
+
+        color: $gray
+      }
+
+      svg {
+        width: 21px;
+        height: 21px;
+
+        color: $symbol;
+        cursor: pointer;
+      }
+    }
+
+  }
+</style>
diff --git a/client/src/components/community/CommunityInfo.vue b/client/src/components/community/CommunityInfo.vue
new file mode 100644
index 0000000..cb5483d
--- /dev/null
+++ b/client/src/components/community/CommunityInfo.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="community-info">
+    <i data-feather="hash"></i>
+    <h1>👋welcome</h1>
+    <div class="separator"></div>
+    <span class="description">This is the beginning of this community</span>
+  </div>
+</template>
+
+<script>
+import { onMounted } from '@vue/composition-api';
+
+export default {
+  setup() {
+    onMounted(() => {
+      // eslint-disable-next-line no-undef
+      feather.replace();
+    });
+  },
+};
+</script>
+
+<style lang="scss">
+  .community-info {
+    grid-area: COI;
+
+    display: flex;
+    align-items: center;
+
+    padding: 0 17px;
+
+    background-color: $secondary;
+
+    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
+
+    z-index: 2;
+
+    h1 {
+      font-size: 16px;
+      font-weight: bold;
+
+      margin-left: 9px;
+
+      color: $white;
+    }
+
+    svg {
+      width: 24px;
+      height: 24px;
+
+      color: $symbol;
+    }
+
+    .separator {
+      width: 1px;
+      height: 24px;
+
+      margin: 0 13px;
+
+      background-color: $white;
+      opacity: 0.2;
+    }
+
+    .description {
+      font-size: 15px;
+      color: $gray;
+    }
+  }
+</style>
diff --git a/client/src/components/community/CommunityName.vue b/client/src/components/community/CommunityName.vue
new file mode 100644
index 0000000..018bd45
--- /dev/null
+++ b/client/src/components/community/CommunityName.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="community-name">
+    <h1>CodingGardenWithCJ</h1>
+    <i data-feather="chevron-down"></i>
+  </div>
+</template>
+
+<script>
+import { onMounted } from '@vue/composition-api';
+
+export default {
+  setup() {
+    onMounted(() => {
+      // eslint-disable-next-line no-undef
+      feather.replace();
+    });
+  },
+};
+</script>
+
+<style lang="scss">
+  .community-name {
+    grid-area: CON;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 0 13px;
+
+    background-color: $tertiary;
+
+    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
+
+    z-index: 2;
+
+    h1 {
+      font-size: 16px;
+      font-weight: bold;
+      color: $white;
+    }
+
+    svg {
+      width: 24px;
+      height: 24px;
+
+      color: $white;
+      cursor: pointer;
+    }
+  }
+</style>
diff --git a/client/src/components/community/CommunityUserList.vue b/client/src/components/community/CommunityUserList.vue
new file mode 100644
index 0000000..c0ff804
--- /dev/null
+++ b/client/src/components/community/CommunityUserList.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="community-user-list">
+    <span class="role">Pruners - 11</span>
+    <div>
+      <User :name="'John Doe'"></User>
+      <User :name="'Jane Doe'"></User>
+    </div>
+
+    <span class="role">Avocados - 1</span>
+    <div>
+        <User :name="'Eliot Carrillo'"></User>
+    </div>
+
+    <span class="role">Twitch subscriber: tier-3 - 1</span>
+    <div>
+        <User :name="'Braden Larson'"></User>
+    </div>
+
+    <span class="role">Fertilizers - 4</span>
+    <div>
+        <User :name="'Arjan Nunez'"></User>
+    </div>
+
+    <span class="role">Twitch subscriber: tier 2 - 2</span>
+    <div>
+        <User :name="'Kayson Fenton'"></User>
+    </div>
+
+    <span class="role">Twitch subscriber: tier 1 - 40</span>
+    <div>
+        <User :name="'Miya Milne'"></User>
+        <User :name="'Alby Coleman'"></User>
+        <User :name="'Yanis Cohen'"></User>
+        <User :name="'Cari Edge'"></User>
+        <User :name="'Bayley Montoya'"></User>
+        <User :name="'Kaynan Busby'"></User>
+    </div>
+
+    <span class="role">Online - 1</span>
+    <div>
+        <User :name="'CG-BOT'" :isBot="true"></User>
+    </div>
+  </div>
+</template>
+
+<script>
+import User from '@/components/community/User.vue';
+import { onMounted } from '@vue/composition-api';
+
+export default {
+  components: {
+    User,
+  },
+  setup() {
+    onMounted(() => {
+      // eslint-disable-next-line no-undef
+      feather.replace();
+    });
+  },
+};
+</script>
+
+<style lang="scss">
+  .community-user-list {
+    grid-area: CUL;
+
+    display: flex;
+    flex-direction: column;
+
+    padding: 3px 6px 0 16px;
+
+    background-color: $tertiary;
+
+    max-height: calc(100vh - 46px);
+
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      background-color: $quaternary;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: $tertiary;
+    }
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    .role {
+      margin-top: 20px;
+
+      text-transform: uppercase;
+      font-size: 12px;
+      font-weight: 500;
+
+      color: $gray;
+    }
+
+    .user {
+      margin-top: 5px;
+      padding: 5px;
+
+      display: flex;
+      align-items: center;
+
+      cursor: pointer;
+
+      font-size: 13px;
+
+      border-radius: 4px;
+
+      background: transparent;
+      transition: background-color 0.3s;
+
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.05);
+      }
+
+      strong {
+        margin-left: 13px;
+
+        font-weight: 500;
+
+        color: $white;
+
+        opacity: 0.7;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      span {
+        margin-left: 9px;
+
+        background-color: $discord;
+
+        color: $white;
+
+        border-radius: 4px;
+
+        padding: 4px 5px;
+
+        text-transform: uppercase;
+        font-weight: bold;
+        font-size: 11px;
+      }
+
+      .avatar {
+        flex-shrink: 0;
+
+        width: 32px;
+        height: 32px;
+
+        border-radius: 25px;
+        background-color: $secondary;
+
+        &.bot {
+          background-color: $mention-detail;
+        }
+      }
+    }
+
+  }
+</style>
diff --git a/client/src/components/community/User.vue b/client/src/components/community/User.vue
new file mode 100644
index 0000000..be31fa1
--- /dev/null
+++ b/client/src/components/community/User.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="user">
+    <div class="avatar" :class="isBot && 'bot'"></div>
+    <strong>{{name}}</strong>
+    <span v-if="isBot">Bot</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    isBot: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+</style>
diff --git a/client/src/components/community/UserInfo.vue b/client/src/components/community/UserInfo.vue
new file mode 100644
index 0000000..d47740f
--- /dev/null
+++ b/client/src/components/community/UserInfo.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="user-info">
+    <div class="profile">
+      <div class="avatar"></div>
+
+      <div class="info">
+        <strong>Manolo Ito</strong>
+        <span>#1234</span>
+      </div>
+    </div>
+
+    <div class="user-settings">
+      <i data-feather="mic" class="mic"></i>
+      <i data-feather="headphones" class="headphone"></i>
+      <i data-feather="settings" class="settings"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+import { onMounted } from '@vue/composition-api';
+
+export default {
+  setup() {
+    onMounted(() => {
+      // eslint-disable-next-line no-undef
+      feather.replace();
+    });
+  },
+};
+</script>
+
+<style lang="scss">
+  .user-info {
+    grid-area: USR;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 10px;
+
+    background-color: $quinary;
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px;
+
+    .profile {
+      display: flex;
+      align-items: center;
+
+      .avatar {
+        width: 32px;
+        height: 32px;
+
+        border-radius: 25px;
+        background-color: $gray;
+      }
+
+      .info {
+        display: flex;
+        flex-direction: column;
+
+        margin-left: 8px;
+
+        strong {
+          color: $white;
+          font-size: 13px;
+          display: block;
+        }
+
+        span {
+          color: $gray;
+          font-size: 13px;
+        }
+      }
+    }
+
+    .user-settings {
+      display: flex;
+      align-items: center;
+
+      svg:not(:first-child) {
+        margin-left: 7px;
+      }
+
+      .mic {
+        width: 16px;
+        height: 16px;
+
+        color: $white;
+        opacity: 0.7;
+
+        cursor: pointer;
+
+        transition: opacity 0.2s;
+        &:hover {
+          opacity: 1;
+        }
+      }
+
+      .headphone {
+        width: 16px;
+        height: 16px;
+
+        color: $white;
+        opacity: 0.7;
+
+        cursor: pointer;
+
+        transition: opacity 0.2s;
+        &:hover {
+          opacity: 1;
+        }
+      }
+
+      .settings {
+        width: 16px;
+        height: 16px;
+
+        color: var(--white);
+        opacity: 0.7;
+
+        cursor: pointer;
+
+        transition: opacity 0.2s;
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+  }
+</style>
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 23111a2..00f1873 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import Home from '../views/Home.vue';
-import Messages from '../views/Messages.vue';
+import Main from '../views/Main.vue';
 
 Vue.use(VueRouter);
 
@@ -12,9 +12,9 @@ const routes = [
     component: Home,
   },
   {
-    path: '/messages',
-    name: 'Messages',
-    component: Messages,
+    path: '/main',
+    name: 'Main',
+    component: Main,
   },
 ];
 
diff --git a/client/src/styles/abstracts/_variables.scss b/client/src/styles/abstracts/_variables.scss
index d71121a..8371b8a 100644
--- a/client/src/styles/abstracts/_variables.scss
+++ b/client/src/styles/abstracts/_variables.scss
@@ -1,5 +1,25 @@
 $primary: #B6065A;
+$secondary: #36393f;
+$tertiary: #2f3136;
+$quaternary: rgb(32,34,37);
+$quinary: #292b2f;
+$senary: #393d42;
+$septenary: #828386;
+
 $bg: #26222C;
 $bg_dark: #211F28;
+
 $font_color: #fafafa;
-$font_family: 'Manrope', sans-serif;
\ No newline at end of file
+$font_family: 'Manrope', sans-serif;
+
+$white: #fff;
+$gray: #8a8c90;
+$green: #1ca056;
+$chat-input: rgb(64,68,75);
+$symbol: #74777a;
+
+$notification: #f84a4b;
+$discord: #6e86d6;
+$mention-detail: #f9a839;
+
+$link: #5d80d6;
\ No newline at end of file
diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss
index 3b3f4a6..3af34e1 100644
--- a/client/src/styles/main.scss
+++ b/client/src/styles/main.scss
@@ -7,18 +7,19 @@
   box-sizing: border-box;
 }
 
+html, body, #app {
+  width: 100%;
+  height: 100%;
+}
+
 body {
-  margin: 0;
-  padding: 0;
-  width: 100vw;
-  height: 100vh;
   font-family: $font_family;
   color: $font_color;
 }
 
-#app {
-  width: 100%;
-  height: 100%;
+*, button, input {
+  border: 0;
+  outline: 0;
 }
 
 .container {
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index 1ef6a3f..b19348c 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -38,7 +38,7 @@ export default {
     watch(user, () => {
       if (user.value) {
         console.log('user!', user.value);
-        router.push('/messages');
+        router.push('/main');
       }
     });
 
diff --git a/client/src/views/Main.vue b/client/src/views/Main.vue
new file mode 100644
index 0000000..3ee48a1
--- /dev/null
+++ b/client/src/views/Main.vue
@@ -0,0 +1,56 @@
+<template>
+  <main class="main">
+    <Communities />
+    <CommunityName />
+    <CommunityInfo />
+    <CommunityChannels />
+    <UserInfo />
+    <CommunityChannelMessages />
+    <CommunityUserList />
+  </main>
+</template>
+
+<script>
+import Communities from '@/components/community/Communities.vue';
+import CommunityName from '@/components/community/CommunityName.vue';
+import CommunityInfo from '@/components/community/CommunityInfo.vue';
+import CommunityChannels from '@/components/community/CommunityChannels.vue';
+import UserInfo from '@/components/community/UserInfo.vue';
+import CommunityChannelMessages from '@/components/community/CommunityChannelMessages.vue';
+import CommunityUserList from '@/components/community/CommunityUserList.vue';
+
+export default {
+  name: 'Main',
+  components: {
+    Communities,
+    CommunityName,
+    CommunityInfo,
+    CommunityChannels,
+    UserInfo,
+    CommunityChannelMessages,
+    CommunityUserList,
+  },
+};
+</script>
+
+<style lang="scss">
+  .main {
+    height: 100vh;
+
+    display: grid;
+
+    grid-template-columns: 71px 240px auto 240px;
+    grid-template-rows: 46px auto 52px;
+
+    // COM - communities
+    // CON - community name
+    // COI - community information
+    // COC - community channels
+    // CCM - community channel messages
+    // CUL - community user list
+    // USR - user info
+    grid-template-areas: 'COM CON COI COI'
+                         'COM COC CCM CUL'
+                         'COM USR CCM CUL';
+  }
+</style>
