diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 44e9810..efb7e85 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -12,7 +12,7 @@
                     </ModalLoadingIcon>
                 </LoadingWrapper>
                 
-                <div class="d-flex flex-column height-fit" style="border-bottom-left-radius: 12px;border-bottom-right-radius:12px"> 
+                <div class="d-flex flex-column height-fit flex-grow-1"> 
                     <Title v-if="!noHeader" class="p-3 Box-title Box-header modal-title">
                         <button @click="close" class="Box-btn-octicon btn-octicon float-right" type="button" aria-label="Close dialog" data-close-dialog="">
                             <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg>
@@ -21,7 +21,7 @@
                             {{title}}
                         </slot>
                     </Title>
-                    <div class="d-flex flex-column" style="overflow-y:auto;">
+                    <div class="d-flex flex-column flex-grow-1" style="overflow-y:auto;border-bottom-left-radius: 12px;border-bottom-right-radius:12px">
                         <slot></slot>
                     </div>
                 </div>
diff --git a/src/components/SelectMenuItem.vue b/src/components/SelectMenuItem.vue
index 91a02f6..160f086 100644
--- a/src/components/SelectMenuItem.vue
+++ b/src/components/SelectMenuItem.vue
@@ -40,7 +40,6 @@
     cursor: pointer;
     background-color: #fff;
     border: 0;
-    border-bottom: 1px solid #eaecef;
     svg{
         
         width: 16px;
diff --git a/src/network/api.js b/src/network/api.js
index 44f6803..5e806e3 100644
--- a/src/network/api.js
+++ b/src/network/api.js
@@ -254,15 +254,15 @@ export const API_TREE_LIST = payload => {
 }
 
 export const API_REPOSITORY_ISSUES_AVAILABLE_AUTHORS = payload => {
-    return `${PROXY_API_BASE}/${payload.owner}/${payload.repo}/issues/show_menu_content?partial=issues%2Ffilters%2Fauthors_content&q=${payload.query}`
+    return `${PROXY_API_BASE}/${payload.owner}/${payload.repo}/issues/show_menu_content?partial=issues/filters/authors_content&q=${payload.query}`
 }
 
 export const API_REPOSITORY_ISSUES_AVAILABLE_ASSIGNEES = payload => {
-    return `${PROXY_API_BASE}/${payload.owner}/${payload.repo}/issues/show_menu_content?partial=issues%2Ffilters%2Fassigns_content&q=${payload.query}`
+    return `${PROXY_API_BASE}/${payload.owner}/${payload.repo}/issues/${payload.number}/show_partial?partial=issues/sidebar/assignees_menu_content`
 }
 
 export const API_REPOSITORY_ISSUES_AVAILABLE_LABELS = payload => {
-    return `${PROXY_API_BASE}/${payload.owner}/${payload.repo}/issues/show_menu_content?partial=issues%2Ffilters%2Flabels_content&q=${payload.query}`
+    return `${PROXY_API_BASE}/${payload.owner}/${payload.repo}/issues/show_menu_content?partial=issues/filters/labels_content&q=${payload.query}`
 }
 
 export const API_REPOSITORY_AVAILABLE_BRANCHES = payload => {
@@ -440,9 +440,5 @@ export const API_COMMITS_OF_PULL_REQUEST = payload => {
 
 export const API_PROXY_TAGS = payload => `${PROXY_API_BASE}/${payload.owner}/${payload.repo}/tags?q=${payload.query}`
 
-export const API_ISSUE_AVAILABLE_ASSIGNEES = payload => {
-    let query = util_queryParse.querify(payload.params)
-    return `${GITHUB_REST_API_BASE}/repos/${payload.owner}/${payload.repo}/assignees?${query}`
-}
+export const API_ISSUE_ASSIGNEES_ACTION = payload => `${GITHUB_REST_API_BASE}/repos/${payload.owner}/${payload.repo}/issues/${payload.number}/assignees`
 
-export const API_ISSUE_ASSIGNEES_ACTION = payload => `${GITHUB_REST_API_BASE}/repos/${payload.owner}/${payload.repo}/issues/${payload.number}/assignees`
\ No newline at end of file
diff --git a/src/pages/Repository/Issues/IssueDetail/IssueDetail.vue b/src/pages/Repository/Issues/IssueDetail/IssueDetail.vue
index 8676674..2daa649 100644
--- a/src/pages/Repository/Issues/IssueDetail/IssueDetail.vue
+++ b/src/pages/Repository/Issues/IssueDetail/IssueDetail.vue
@@ -393,6 +393,7 @@
                 this.data.labels = event.detail
             },
             milestoneUpdatedHook(event) {
+                console.log(event)
                 this.data.milestone = event.detail
             },
             assigneesChangedHook(event) {
diff --git a/src/pages/Repository/Issues/IssueDetail/components/BottomInfoRows.vue b/src/pages/Repository/Issues/IssueDetail/components/BottomInfoRows.vue
index d2604fc..3cd732a 100644
--- a/src/pages/Repository/Issues/IssueDetail/components/BottomInfoRows.vue
+++ b/src/pages/Repository/Issues/IssueDetail/components/BottomInfoRows.vue
@@ -82,18 +82,19 @@
                                 v-model="chooseAssigneesModal.searchQuery"/>
           
             <transition-group name="fade-group" appear> 
-                <button v-if="data.assignees && data.assignees.length > 0" :disabled="chooseAssigneesModal.loadingClearAssignees || chooseAssigneesModal.loading.length > 0" class="width-full d-flex clear-assignees-btn flex-items-center border-bottom" key="clear assignees button" @click="network_clearAssignees">
+                <button v-if="data.assignees && data.assignees.length > 0" :disabled="chooseAssigneesModal.loadingClearAssignees || chooseAssigneesModal.loading.length > 0" class="width-full d-flex clear-assignees-btn flex-items-center" key="clear assignees button" @click="network_clearAssignees">
                     <TinyLoadingIcon class="loading-icon" v-if="chooseAssigneesModal.loadingClearAssignees"></TinyLoadingIcon>
                     <svg v-else class="octicon octicon-x" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path></svg>
                     <div class="select-menu-item-text">{{chooseAssigneesModal.loadingClearAssignees ? 'Trying...' : 'Clear assignees'}}</div>
                 </button>
-                <button v-for="item in filteredAssignableUsers" :key="item.login" @click.native="() => network_selectTheAssigneeOrNot(item)" :disabled="chooseAssigneesModal.loading.indexOf(item.login) != -1">
+                <button v-for="item in filteredAssignableUsers" class="d-block width-full px-0" :key="item.login" @click="() => network_selectTheAssigneeOrNot(item)" :disabled="chooseAssigneesModal.loading.indexOf(item.login) != -1">
                     <SelectMenuItem :selected="data.assignees.some(i => i.id == item.id)">
                         <ImgWrapper class="mr-2 avatar avatar-user">
-                            <img class="avatar avatar-user" width="20" height="20" :src="item.avatar_url">
+                            <img class="avatar avatar-user" width="20" height="20" :src="item.avatar">
                         </ImgWrapper>
                         <strong class='mr-1'>{{item.login}}</strong>
                         <span>{{item.name}}</span>    
+                        
 
                         <template v-slot:icon v-if="chooseAssigneesModal.loading.indexOf(item.login) != -1">
                             <TinyLoadingIcon class="mr-2"></TinyLoadingIcon>
@@ -106,17 +107,22 @@
 
         <Modal title="Apply labels to this issue" ref="applyLabelsModal" :modalStyle="{height:'80vh'}" @show="network_getAvailableLabels" :loading="applyLabelsModal.labels.loading">
             <SimpleSearchInput  v-if="!applyLabelsModal.labels.loading" 
-                                 class="p-3 modal-search-input" 
+                                 class="p-3 modal-search-input border-bottom" 
                                 placeholder="Filter labels" 
                                 v-model="applyLabelsModal.searchQuery"/>
             <div v-if="!applyLabelsModal.labels.loading && applyLabelsModal.labels.data.length === 0" class="p-3" style="color: #586069;">
                 No available labels found. Sorry about that.
             </div>  
 
-            <transition-group name="fade-group" appear style="overflowY:auto">
-                <SelectMenuItem v-for="item in filteredAvailableLabels" :iconStyle="{alignSelf:'flex-start'}" :key="item.name" :selected="data.labels.some(i => i.name == item.name)"  @click.native="() => network_applyTheLabelOrNot(item.name)">
+            <transition-group name="fade-group" class="flex-grow-1" appear style="overflowY:auto">
+                <SelectMenuItem v-for="item in filteredAvailableLabels" 
+                                class="border-bottom"
+                                :iconStyle="{alignSelf:'flex-start'}" 
+                                :key="item.name" 
+                                :selected="data.labels.some(i => i.name == item.name)"  
+                                @click.native="() => network_applyTheLabelOrNot(item.name)">
                     <div class="d-flex flex-items-start" >
-                        <LabelBadge class="avatar mt-1 mr-2 label-badge flex-shrink-0" :style="{background: `#${item.color}`}" />
+                        <LabelBadge class="avatar avatar-user mt-1 mr-2 label-badge flex-shrink-0" :style="{background: `#${item.color}`}" />
                         <LabelContent style="min-width:0">
                             <LabelName class="text-bold">{{item.name}}</LabelName>    
                             <LabelDescription v-if="item.description && item.description !== ''" class="label-description">{{item.description}}</LabelDescription>    
@@ -129,13 +135,24 @@
                 </SelectMenuItem>
             </transition-group>
 
-                
-            <router-link v-if="!applyLabelsModal.labels.loading" :to="`/${owner}/${repo}/labels`" class="py-3 d-block text-gray border-top labels-page-link bg-white">
+            <button v-if="filteredAvailableLabels.length == 0 && applyLabelsModal.searchQuery" class="create-label-btn text-left" @click="() => showModal('createNewLabelModal')"> 
+                Create new label "{{applyLabelsModal.searchQuery}}"
+            </button>
+            <router-link v-if="!applyLabelsModal.labels.loading" :to="`/${owner}/${repo}/labels`" class="py-3 d-block text-gray border-top labels-page-link bg-white" >
                 <span>
                     <svg class="octicon octicon-pencil mr-1 label-options-icon" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z"></path></svg>
                 </span>  
                 <span class="select-menu-item-text f6">Edit labels</span>
             </router-link>
+
+            <Modal title="Create new label" ref="createNewLabelModal" :modalStyle="{maxWidth: '85vw'}">
+                <div class="px-3 pt-3" style="margin-bottom:-8px;font-size:12px;font-weight:600" >
+                    Preview
+                </div>
+                <LabelEditor style="font-size:12px;">
+                    
+                </LabelEditor>
+            </Modal>   
         </Modal>
 
         <Modal title="Set milestone" ref="setMilestoneModal" :modalStyle="{height:'80vh'}" @show="network_getAvailableMilestones" :loading="setMilestoneModal.milestones.loading"> 
@@ -148,11 +165,11 @@
                 <button type="button" class="set-milestone-modal-tabs-btn" :class="{'tab-active':setMilestoneModal.state == 'closed'}" @click="() => triggerSetMilestoneModalTab('closed')">Closed</button>
             </div>
             <transition-group name="fade-group" appear>
-                <SelectMenuItem v-for="item in filteredAvailableMilestones" :selected="data.milestone && (data.milestone.number == item.number)" :key="item.number" @click.native="() => network_setMilestone(item.number)">
-                    <router-link :to="`/${owner}/${repo}/milestone/${item.number}`" class="d-block">
+                <SelectMenuItem v-for="item in filteredAvailableMilestones" :iconStyle="{alignSelf:'flex-start'}" :selected="data.milestone && (data.milestone.number == item.number)" :key="item.number" @click.native="() => network_setMilestone(item.number)">
+                    <div>
                         <span class="milestone-title">{{item.title}}</span>
                         <span class="milestone-description">{{item.description}}</span>
-                    </router-link> 
+                    </div> 
 
                     <template v-slot:icon v-if="setMilestoneModal.loading && setMilestoneModal.settingMilestoneNumber == item.number">
                         <TinyLoadingIcon class="mr-2"></TinyLoadingIcon>
@@ -196,11 +213,13 @@
             SelectMenuItem,
             HyperlinkWrapper
         } from '@/components'
+    import {LabelEditor} from '../../../Labels/components'
     import {RouteUpdateAwareMixin} from '@/mixins'
     import ProjectCard from './ProjectCard.vue'
     import IssueNotificationSettingPane from './IssueNotificationSettingPane.vue'
     import {util_dateFormat} from '@/util'
     import {
+        commonGet,
         authRequiredGet,
         authRequiredDelete, 
         authRequiredPost, 
@@ -313,39 +332,28 @@
             },
            
         },
+       
         methods: {
             async network_getAssignableUsers() {
                 if(this.chooseAssigneesModal.assignableUsers.data.length > 0 || this.chooseAssigneesModal.assignableUsers.loading) return
                 try{
                     this.chooseAssigneesModal.assignableUsers.loading = true
-                    let cancelToken = this.cancelAndUpdateAxiosCancelTokenSource(this.$options.name + ' get_assignable_users')
-
-                    let pageInfo = undefined
-                    let assignableUsers = []
 
-                    while(!pageInfo || (pageInfo && pageInfo.next)) {
-                        let url 
-                        if(pageInfo) {
-                            url = pageInfo.next.url
-                        }else{
-                            url = api.API_ISSUE_AVAILABLE_ASSIGNEES({
-                                repo: this.repo,
-                                owner: this.owner,
-                                params: {
-                                    per_page: 100
-                                }
-                            })
-                        }
-                        let res = await authRequiredGet(
-                            url,
-                            {cancelToken}
-                        )
-
-                        assignableUsers = assignableUsers.concat(res.data)
-                        pageInfo = parse(res.headers.link) || {}
-                    }
+                    let url = api.API_REPOSITORY_ISSUES_AVAILABLE_ASSIGNEES({
+                            repo: this.repo,
+                            owner: this.owner,
+                            number: this.number,
+                        })
+                    let res = await commonGet(
+                        url,
+                        {
+                            cancelToken: this.cancelAndUpdateAxiosCancelTokenSource(this.$options.name + ' get_assignable_users'),
+                            headers: {
+                            'accept': 'application/json'
+                        }}
+                    )
 
-                    this.chooseAssigneesModal.assignableUsers.data = assignableUsers
+                    this.chooseAssigneesModal.assignableUsers.data = res.data.users
 
                 }catch(e) { 
                     this.handleError(e)
@@ -437,12 +445,11 @@
                             label: labelName
                         })
 
-                        res = await authRequiredAjax(
+                        res = await authRequiredDelete(
                             url,
                             {
-                                labels: [labelName]
+                                data: {labels: [labelName]}
                             },
-                            'delete'
                         )
                     }else{
 
@@ -451,12 +458,11 @@
                             number: this.data.number
                         })
 
-                        res = await authRequiredAjax(
+                        res = await authRequiredPost(
                             url,
                             {
                                 labels: [labelName]
                             },
-                            'post'
                         )
                     }
 
@@ -550,7 +556,7 @@
                         },
                     )
                     
-                    this.$el.dispatchEvent(new CustomEvent('milestone-updated',{bubbles:true,detail:res.milesone}))
+                    this.$el.dispatchEvent(new CustomEvent('milestone-updated',{bubbles:true,detail:res.data.milestone}))
                 }catch(e) {
                     console.log(e)
                 }finally{
@@ -608,6 +614,7 @@
             HyperlinkWrapper,
             Label,
             IssueNotificationSettingPane,
+            LabelEditor,
             State: styled.div``,
             InfoBottom: styled.div``,
             InfoBottomItem: styled.div``,
@@ -738,4 +745,11 @@
         margin-right: 8px;
     }
 }
+
+.create-label-btn{
+    padding-top: 16px;
+    padding-bottom: 16px;
+    padding-left: 40px;
+    font-size: 12px;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/Repository/Labels/Labels.vue b/src/pages/Repository/Labels/Labels.vue
index 9fec875..6c7fa0a 100644
--- a/src/pages/Repository/Labels/Labels.vue
+++ b/src/pages/Repository/Labels/Labels.vue
@@ -3,25 +3,35 @@
         
         <nav class="d-flex flex-justify-between">
             <div>
-                <router-link class="subnav-item" :to="`/${owner()}/${repo()}/labels`">
-                    <svg class="octicon octicon-tag" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.73 1.73C7.26 1.26 6.62 1 5.96 1H3.5C2.13 1 1 2.13 1 3.5v2.47c0 .66.27 1.3.73 1.77l6.06 6.06c.39.39 1.02.39 1.41 0l4.59-4.59a.996.996 0 000-1.41L7.73 1.73zM2.38 7.09c-.31-.3-.47-.7-.47-1.13V3.5c0-.88.72-1.59 1.59-1.59h2.47c.42 0 .83.16 1.13.47l6.14 6.13-4.73 4.73-6.13-6.15zM3.01 3h2v2H3V3h.01z"></path></svg>
-                    Labels
+                 <router-link class="subnav-item" :to="`/${owner}/${repo}/labels`">
+                    <svg class="octicon octicon-tag v-align-middle" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path></svg>
+                    <span class="v-align-middle">
+                        Labels  
+                    </span>    
                 </router-link>
-                <router-link class="subnav-item" :to="`/${owner()}/${repo()}/milestones`">
-                    <svg class="octicon octicon-milestone" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 2H6V0h2v2zm4 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h10l2 2-2 2zM8 4H6v2h2V4zM6 16h2V8H6v8z"></path></svg>
-                    Milestones
+                <router-link class="subnav-item" :to="`/${owner}/${repo}/milestones`">
+                    <svg class="octicon octicon-milestone v-align-middle" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.75 0a.75.75 0 01.75.75V3h3.634c.414 0 .814.147 1.13.414l2.07 1.75a1.75 1.75 0 010 2.672l-2.07 1.75a1.75 1.75 0 01-1.13.414H8.5v5.25a.75.75 0 11-1.5 0V10H2.75A1.75 1.75 0 011 8.25v-3.5C1 3.784 1.784 3 2.75 3H7V.75A.75.75 0 017.75 0zm0 8.5h4.384a.25.25 0 00.161-.06l2.07-1.75a.25.25 0 000-.38l-2.07-1.75a.25.25 0 00-.161-.06H2.75a.25.25 0 00-.25.25v3.5c0 .138.112.25.25.25h5z"></path></svg>
+                    <span class="v-align-middle">
+                        Milestones  
+                    </span>    
                 </router-link>
             </div>
             
-            <button v-if="viewerIsCollaborator().data && accessToken" class="btn btn-primary" type="button" aria-expanded="true" @click="() => triggerCreateLabelPane(true)">New</button>
+            <button v-if="viewerIsCollaborator().data && accessToken" class="btn btn-primary" type="button" aria-expanded="true" @click="() => triggerCreateLabelPane(true)">New label</button>
         </nav> 
 
+       
+
         <AnimatedHeightWrapper :stretch="showCreateLabelPane">
             <div class="py-1 pt-3">
-                <LabelEditor  ref="labelEditor" @submitable="() => {createdLabelSubmitable = true}" @unsubmitable="() => {createdLabelSubmitable = false}">
-                    <button :disabled="submittingCreatedLabel" class="btn" type="button"  @click="() => triggerCreateLabelPane(false)">Cancel</button>
-                    <button @click="network_createLabel" class="btn btn-primary" type="submit" :disabled="!createdLabelSubmitable || submittingCreatedLabel">
-                        {{submittingCreatedLabel ? 'Saving...' : 'Create label'}}
+                <LabelEditor    v-model="createLabelData" 
+                                @label-edited.native="labelEditedHook" 
+                                :labelNameError="labelNameError"
+                                ref="createLabelData"
+                                class="bg-gray border border-gray-dark rounded-1">
+                    <button :disabled="loadingCreateLabel" class="btn" type="button"  @click="() => triggerCreateLabelPane(false)">Cancel</button>
+                    <button @click="network_createLabel" class="btn btn-primary" type="submit" :disabled="!createdLabelSubmitable || loadingCreateLabel || labelNameError">
+                        {{loadingCreateLabel ? 'Saving...' : 'Create label'}}
                     </button>
                 </LabelEditor>
             </div>
@@ -46,7 +56,7 @@
 
                 <div v-else>
                     <transition-group name="fade-group" appear>
-                        <LabelItem v-for="item in data" :key="item.name" :label="item" @label-deleted="labelDeletedHandler" @label-updated="labelUpdatedHandler"/>
+                        <LabelItem v-for="item in data" :key="item.name" :label="item" @label-deleted="labelDeletedHandler" @label-updated.native="labelUpdatedHandler"/>
                     </transition-group>
                 </div>
                
@@ -72,15 +82,15 @@
     import {CommonLoadingWrapper,ComplexBubble,AnimatedHeightWrapper,Label,Modal,SelectMenuItem,SimplePaginationRest,Popover} from '@/components'
     import styled from 'vue-styled-components'
     import {RouteUpdateAwareMixin} from '@/mixins'
-    import {authRequiredGitHubGraphqlApiQuery,authRequiredGet,authRequiredAjax} from '@/network'
-    import {util_color} from '@/util'
+    import {authRequiredGitHubGraphqlApiQuery,authRequiredGet,authRequiredPost} from '@/network'
+    import {util_throttle} from '@/util'
     import * as api from '@/network/api'
     import * as graphql from './graphql'
     import {LabelItem,LabelEditor,LabelSkeleton} from './components'
     let parse = require("parse-link-header")
     export default {
         name: 'repository_labels_page',
-        inject: ['owner','repo','viewerIsCollaborator'],
+        inject: ['viewerIsCollaborator'],
         provide() {
             return {
                 extraDataProvided: () => this.extraData.data
@@ -104,16 +114,34 @@
                 },
 
                 showCreateLabelPane: false,
-                submittingCreatedLabel: false,
-                createdLabelSubmitable: false
+                createLabelData: {
+                    name: '',
+                    color: '',
+                    description: ''
+                },
+                loadingCreateLabel: false,
+                labelNameError: false
             }
         },
         computed: {
+            repo() {
+                return this.$route.params.repo
+            },
+            owner() {
+                return this.$route.params.owner
+            },
             emptyFlag() {
                 return this.data.length == 0 && this.loading == false && !this.pageInfo.prev
             },
             documentTitle() {
-                return `Labels · ${this.owner()}/${this.repo()}`
+                return `Labels · ${this.owner}/${this.repo}`
+            },
+            createdLabelSubmitable() {
+                if(!this.createLabelData.name) return
+                if(!this.createLabelData.color) return
+                let colorNumber = parseInt(this.createLabelData.color.replace('#',''),16)
+                if(colorNumber > 16777215 || colorNumber < 0) return
+                return true
             },
         },
         created() {
@@ -126,8 +154,8 @@
                     this.loading = true
                     let cancelToken = this.cancelAndUpdateAxiosCancelTokenSource(this.$options.name)
                     let url = api.API_REPOSITORY_LABELS({
-                        repo: this.repo(),
-                        owner: this.owner(),
+                        repo: this.repo,
+                        owner: this.owner,
                         params: {
                             per_page: this.perPage,
                             ...this.$route.query
@@ -149,8 +177,8 @@
                     this.totalCount.loading = true
                     let cancelToken = this.cancelAndUpdateAxiosCancelTokenSource(this.$options.name + ' get_labels_count')
                     let url = api.API_REPOSITORY_LABELS({
-                        repo: this.repo(),
-                        owner: this.owner(),
+                        repo: this.repo,
+                        owner: this.owner,
                         params: {
                             per_page: 1
                         }
@@ -187,22 +215,21 @@
                 }
             },
             async network_createLabel() {
-                if(this.submittingCreatedLabel) return 
+                if(this.loadingCreateLabel) return 
                 if(!this.viewerIsCollaborator().data) return 
                 if(!this.accessToken) return
                 try{
-                    this.submittingCreatedLabel = true
+                    this.loadingCreateLabel = true
                     let cancelToken = this.cancelAndUpdateAxiosCancelTokenSource(this.$options.name + ' create_label')
                     let url = api.API_REPOSITORY_LABELS(this.$route.params)
-                    let res = await authRequiredAjax(
+                    let res = await authRequiredPost(
                         url,
                         {
                             cancelToken,
-                            name: this.$refs.labelEditor.name,
-                            color: this.$refs.labelEditor.color.replace('#',''),
-                            description: this.$refs.labelEditor.description,
+                            name: this.createLabelData.name,
+                            color: this.createLabelData.color.replace('#',''),
+                            description: this.createLabelData.description,
                         },
-                        'post'
                     )
 
                     this.data.unshift(res.data)
@@ -212,9 +239,31 @@
                 }catch(e) {
                     handleError(e)
                 }finally{
-                    this.submittingCreatedLabel = false
+                    this.loadingCreateLabel = false
                 }
             },
+            async network_checkIfLabelNameHasBeenTaken() {
+                try {
+                    
+                    let u = api.API_HANDLE_LABEL({
+                        repo: this.repo,
+                        owner: this.owner,
+                        label: this.createLabelData.name
+                    })
+
+                    await authRequiredGet(
+                        u,
+                        {
+                            cancelToken: this.cancelAndUpdateAxiosCancelTokenSource(this.$options.name + ' check_if_label_name_has_been_taken')
+                        }
+                    )
+
+                    this.labelNameError = true
+                } catch (e) {
+                    console.log(e) 
+                    this.labelNameError = false
+                } 
+            },
             getOpenIssuesAndPullRequestsCount(id) {
                 let dataHolder = this.extraData.data.filter(i => i.id == id)[0]
                 if(!dataHolder) return
@@ -228,11 +277,11 @@
                 this.$refs.popover.show = true
             },
             labelUpdatedHandler(e) {
-                let updatedLabel = this.data.filter(i => i.name == e.prev.name)[0]
+                let updatedLabel = this.data.filter(i => i.name == e.detail.prev.name)[0]
                 if(updatedLabel) {
-                    updatedLabel.name = e.name
-                    updatedLabel.color = e.color,
-                    updatedLabel.description = e.description
+                    updatedLabel.name = e.detail.name
+                    updatedLabel.color = e.detail.color,
+                    updatedLabel.description = e.detail.description
                 }
             },
             labelDeletedHandler(e) {
@@ -243,8 +292,18 @@
                     }
                 })
                 this.data.splice(idx,1)
+            },
+            labelEditedHook(e) {
+                this.createLabelData.name = e.detail.name
+                this.createLabelData.color = e.detail.color
             }
         },
+        watch:{
+            'createLabelData.name': function(newOne,oldOne) {
+                this.labelNameError = false
+                util_throttle.throttleByDelay(this.network_checkIfLabelNameHasBeenTaken,500,this)
+            }  
+        },
         components: {
             CommonLoadingWrapper,
             ComplexBubble,
diff --git a/src/pages/Repository/Labels/components/LabelEditor.vue b/src/pages/Repository/Labels/components/LabelEditor.vue
index 97298b8..da457d1 100644
--- a/src/pages/Repository/Labels/components/LabelEditor.vue
+++ b/src/pages/Repository/Labels/components/LabelEditor.vue
@@ -1,32 +1,40 @@
 <template>
-    <CreateLabelPane class="p-3 bg-gray border border-gray-dark rounded-1">
-        <LabelPreviewRow class="mt-0 mb-2"> 
-            <Label :color="color" style="font-size:14px;font-weight:600;padding:4px 8px;line-height:1.25;height:auto" :name="name || 'Label preview'"/>
+    <CreateLabelPane class="p-3">
+        <LabelPreviewRow class="mt-0 mb-3"> 
+            <Label v-if="label.color" :color="labelNameError ? '#B60205' : label.color" style="padding:4px 8px;line-height:1.25;height:auto" :style="previewLabelStyle" :name="label.name || 'Label preview'"/>
         </LabelPreviewRow>
 
-        <LabelInfoRow class="mt-0 mb-2">
-            <label for="label-name" class="mb-2 d-block">
+        <LabelInfoRow class="mt-0 mb-3 position-relative">
+            <label for="label-name" class="mb-2 d-block" :class="{errored:labelNameError}">
                 Label name
             </label>
-            <input @input="$emit('editor-input')" v-model="name" type="text" data-maxlength="50" autocomplete="off" required="" id="label-name" class="form-control width-full" placeholder="Label name">
+            <input ref="labelName"
+                    :class="{errored:labelNameError}"
+                    @input="$emit('input',{...getEdittingLabel(),name:$event.target.value})" 
+                    :value="label.name" type="text" data-maxlength="50" autocomplete="off" required="" id="label-name" class="form-control width-full" placeholder="Label name">
+            <div v-if="labelNameError" class="error-notice" id="label--name-error">Name has already been taken</div>
         </LabelInfoRow>
 
-        <LabelInfoRow class="mt-0 mb-2">
+        <LabelInfoRow class="mt-0 mb-3">
             <label for="label-description" class="mb-2 d-block">
                 Description
             </label>
-            <input @input="$emit('editor-input')" v-model="description" type="text" data-maxlength="100" autocomplete="off" required="" id="label-description" class="form-control width-full" placeholder="Description(optional)">
+            <input ref="labelDescription" 
+                    @input="$emit('input',{...getEdittingLabel(),description:$event.target.value})"
+                    :value="label.description" type="text" data-maxlength="100" autocomplete="off" required="" id="label-description" class="form-control width-full" placeholder="Description(optional)">
         </LabelInfoRow>
 
-        <LabelInfoRow class="mt-0 mb-2">
+        <LabelInfoRow class="mt-0 mb-3">
             <label for="label-color" class="mb-2 d-block">
                 Color
             </label>
             <div>
-                <button @click="refreshCreateLabelColor" type="button" class="flex-shrink-0 btn-link js-new-label-color rounded-1 mr-1 tooltipped tooltipped-w" style="width: 34px; height: 34px;" :style="{backgroundColor:color}">
+                <button @click="refreshCreateLabelColor" type="button" class="flex-shrink-0 btn-link js-new-label-color rounded-1 mr-1 tooltipped tooltipped-w" style="width: 30px; height: 30px;" :style="{backgroundColor:label.color}">
                     <svg :style="{color: createLabelPaneColorIsLight ? 'black' : 'white'}" class="octicon octicon-sync" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 2.5a5.487 5.487 0 00-4.131 1.869l1.204 1.204A.25.25 0 014.896 6H1.25A.25.25 0 011 5.75V2.104a.25.25 0 01.427-.177l1.38 1.38A7.001 7.001 0 0114.95 7.16a.75.75 0 11-1.49.178A5.501 5.501 0 008 2.5zM1.705 8.005a.75.75 0 01.834.656 5.501 5.501 0 009.592 2.97l-1.204-1.204a.25.25 0 01.177-.427h3.646a.25.25 0 01.25.25v3.646a.25.25 0 01-.427.177l-1.38-1.38A7.001 7.001 0 011.05 8.84a.75.75 0 01.656-.834z"></path></svg>
                 </button>
-                <input v-model="color" type="text" data-maxlength="7" autocomplete="off" required="" id="label-color" class="form-control" placeholder="Color" style="width:6em">
+                <input ref="labelColor" 
+                        @input="$emit('input',{...getEdittingLabel(),color:$event.target.value})" 
+                        :value="label.color" type="text" data-maxlength="7" autocomplete="off" required="" id="label-color" class="form-control" placeholder="Color" style="width:6em">
             </div>
         </LabelInfoRow>
 
@@ -42,42 +50,26 @@
     import {util_color} from '@/util'
     export default {
         name: 'repository_label_editor',
-        props: {
-            createdHook: {
-                type: Function,
-                default: () => {}
-            },
-            defaultName: String,
-            defaultColor: String,
-            defaultDescription: String,
+        model: {
+            prop: 'label',
+            event: 'input'
         },
-        data() {
-            return {
-                color: '',
-                name: '',
-                description: '',
-                loading: false,
+        props: {
+            previewLabelStyle: Object,
+            label: Object,
+            labelNameError: {
+                type: Boolean,
+                default: false
             }
         },
-        
         computed: {
             createLabelPaneColorIsLight() {
-                return util_color.isLight(this.color)
+                if(!this.label.color) return
+                return util_color.isLight(this.label.color)
             },
-            createdLabelSubmitable() {
-                if(!this.color) return
-                let colorNumber = parseInt(this.color.replace('#',''),16)
-                if(colorNumber > 16777215 || colorNumber < 0) return false
-                return this.name
-            }
         },
         created() {
-            if(!this.defaultColor) this.refreshCreateLabelColor()
-            this.createdHook()
-
-            this.defaultName && (this.name = this.defaultName)
-            this.defaultColor && (this.color = this.defaultColor)
-            this.defaultDescription && (this.description = this.defaultDescription)
+            if(!this.label.color) this.refreshCreateLabelColor()
         },
         methods: {
             refreshCreateLabelColor() {
@@ -85,16 +77,13 @@
                 while(color.length != 6) {
                     color = Math.floor( Math.random() * 0xffffff ).toString(16)
                 }
-                this.color = '#' + color
+                this.$emit('input',{color:'#' + color,name:this.label.name})
             },
-        },
-        watch: {
-            createdLabelSubmitable(newOne,oldOne) {
-                if(newOne && !oldOne) {
-                    this.$emit('submitable')
-                }
-                if(!newOne && oldOne) {
-                    this.$emit('unsubmitable')
+            getEdittingLabel() {
+                return {
+                    name: this.$refs.labelName.value,
+                    color: this.$refs.labelColor.value,
+                    description: this.$refs.labelDescription.value,
                 }
             }
         },
@@ -109,4 +98,56 @@
 
 <style scoped lang="scss">
 @import 'node_modules/@primer/css/forms/index.scss';
+
+label.errored{
+    color: #cb2431;
+}
+
+input.errored{
+    border-color: #cb2431!important;
+}
+
+.error-notice{
+    color: #86181d;
+    background-color: #ffeef0;
+    border-color: #f97583;
+    position: absolute;
+    z-index: 10;
+    display: block;
+    max-width: 450px;
+    padding: 4px 8px;
+    margin: 10px 0 0;
+    font-size: 12px;
+    font-weight: 400;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 6px;
+}
+.error-notice::before{
+    position: absolute;
+    bottom: 100%;
+    left: 10px;
+    z-index: 15;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    content: " ";
+    border: solid transparent;
+    margin-left: -1px;
+    border-width: 6px;
+    border-bottom-color: rgb(249, 117, 131);
+}
+.error-notice::after{
+    position: absolute;
+    bottom: 100%;
+    left: 10px;
+    z-index: 15;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    content: " ";
+    border: solid transparent;
+    border-width: 5px;
+    border-bottom-color: rgb(255, 238, 240);
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/Repository/Labels/components/LabelItem.vue b/src/pages/Repository/Labels/components/LabelItem.vue
index 69637d8..41ca4cc 100644
--- a/src/pages/Repository/Labels/components/LabelItem.vue
+++ b/src/pages/Repository/Labels/components/LabelItem.vue
@@ -28,14 +28,13 @@
     <LabelEditor v-else 
                 ref="labelEditor"
                 style="background-color:white!important" 
-                :defaultColor="`#${label.color}`" 
-                :defaultName="label.name" 
-                :defaultDescription="label.description" 
-                @submitable="() => {editedLabelSubmitable = true}" 
-                @unsubmitable="() => {editedLabelSubmitable = false}">
-        <button :disabled="submittingEditedLabel" class="btn" type="button"  @click="triggerEdit">Cancel</button>
-        <button @click="network_updateLabel" class="btn btn-primary" type="submit" :disabled="!editedLabelSubmitable || submittingEditedLabel">
-            {{submittingEditedLabel ? 'Saving...' : 'Update label'}}
+                class="bg-gray border border-gray-dark rounded-1"
+                :labelNameError="labelNameError"
+                v-model="editLabelData"
+                >
+        <button :disabled="loadingEditLabel" class="btn" type="button"  @click="triggerEdit">Cancel</button>
+        <button @click="network_updateLabel" class="btn btn-primary" type="submit" :disabled="!editedLabelSubmitable || loadingEditLabel || labelNameError">
+            {{loadingEditLabel ? 'Saving...' : 'Update label'}}
         </button>
 
     </LabelEditor>
@@ -46,7 +45,8 @@
     import LabelEditor from './LabelEditor'
     import styled from 'vue-styled-components'
     import * as api from '@/network/api'
-    import {authRequiredAjax} from '@/network'
+    import {authRequiredGet,authRequiredPatch,authRequiredDelete,cancelAndUpdateAxiosCancelTokenSource} from '@/network'
+    import {util_throttle} from '@/util'
     export default {
         name: 'repository_label_item',
         inject: ['viewerIsCollaborator','extraDataProvided'],
@@ -55,10 +55,26 @@
         },
         data() {
             return {
+                editLabelData: {},
                 showLabelEditor: false,
-                submittingEditedLabel: false,
+                loadingEditLabel: false,
                 deletingLabel: false,
-                editedLabelSubmitable: false,
+                labelNameError: false,
+            }
+        },
+        computed: {
+            editedLabelSubmitable() {
+                if(!this.editLabelData.name) return
+                if(!this.editLabelData.color) return
+                let colorNumber = parseInt(this.editLabelData.color.replace('#',''),16)
+                if(colorNumber > 16777215 || colorNumber < 0) return
+                return true
+            },
+        },
+        created() {
+            this.editLabelData = {
+                ...this.label,
+                color: `#${this.label.color}`
             }
         },
         methods: {
@@ -75,36 +91,33 @@
                 this.showLabelEditor = !this.showLabelEditor
             },
             async network_updateLabel() {
-                if(!this.acessToken) return 
-                if(!this.viewerIsCollaborator().data) return 
+                if(!this.accessToken) return 
+                //if(!this.viewerIsCollaborator().data) return 
                 try{
-                    this.submittingEditedLabel = true
+                    this.loadingEditLabel = true
                     let url = api.API_HANDLE_LABEL({
                         ...this.$route.params,
                         label: this.label.name
                     })
 
-                    let res = await authRequiredAjax(
+                    let res = await authRequiredPatch(
                         url,
                         {
-                            new_name: this.$refs.labelEditor.name,
-                            color: this.$refs.labelEditor.color.replace('#',''),
-                            description: this.$refs.labelEditor.description,
+                            new_name: this.editLabelData.name,
+                            color: this.editLabelData.color.replace('#',''),
+                            description: this.editLabelData.description,
                         },
-                        'patch'
                     )
 
-                    this.$emit('label-updated',{
-                        ...res.data,
-                        prev: this.label
-                    })
+
+                    this.$el.dispatchEvent(new CustomEvent('label-updated',{bubbles:true,detail:{...res.data,prev:this.label}}))
 
                     this.showLabelEditor = false
 
                 }catch(e) {
                     this.handleError(e)
                 }finally{
-                    this.submittingEditedLabel = false
+                    this.loadingEditLabel = false
                 }
             },
             async network_deleteLabel() {
@@ -118,7 +131,7 @@
                         label: this.label.name
                     })
 
-                    let res = await authRequiredAjax(url, {}, 'delete')
+                    let res = await authRequiredDelete(url)
 
                     this.$emit('label-deleted',this.label)
 
@@ -127,7 +140,39 @@
                 }finally{
                     this.deletingLabel = false
                 }
-            }
+            },
+            async network_checkIfLabelNameHasBeenTaken() {
+                try {
+                    let u = api.API_HANDLE_LABEL({
+                        repo: this.repo,
+                        owner: this.owner,
+                        label: this.editLabelData.name
+                    })
+
+                    await authRequiredGet(
+                        u,
+                        {
+                            cancelToken: cancelAndUpdateAxiosCancelTokenSource(this.label.name + ' check_if_label_name_has_been_taken').cancelToken
+                        }
+                    )
+
+                    if(this.editLabelData.name != this.label.name) {
+                        this.labelNameError = true
+                    }else{
+                        this.labelNameError = false
+                    }
+
+                } catch (e) {
+                    console.log(e) 
+                    this.labelNameError = false
+                } 
+            },
+        },
+         watch:{
+            'editLabelData.name': function(newOne,oldOne) {
+                this.labelNameError = false
+                util_throttle.throttleByDelay(this.network_checkIfLabelNameHasBeenTaken,500,this)
+            }  
         },
         components: {
             AnimatedHeightWrapper,
diff --git a/src/pages/Repository/Milestones/Milestones.vue b/src/pages/Repository/Milestones/Milestones.vue
index f11fab1..ddf4308 100644
--- a/src/pages/Repository/Milestones/Milestones.vue
+++ b/src/pages/Repository/Milestones/Milestones.vue
@@ -3,12 +3,16 @@
         
         <nav class="d-flex">
             <router-link class="subnav-item" :to="`/${owner()}/${repo()}/labels`">
-                <svg class="octicon octicon-tag" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.73 1.73C7.26 1.26 6.62 1 5.96 1H3.5C2.13 1 1 2.13 1 3.5v2.47c0 .66.27 1.3.73 1.77l6.06 6.06c.39.39 1.02.39 1.41 0l4.59-4.59a.996.996 0 000-1.41L7.73 1.73zM2.38 7.09c-.31-.3-.47-.7-.47-1.13V3.5c0-.88.72-1.59 1.59-1.59h2.47c.42 0 .83.16 1.13.47l6.14 6.13-4.73 4.73-6.13-6.15zM3.01 3h2v2H3V3h.01z"></path></svg>
-                Labels
+                <svg class="octicon octicon-tag v-align-middle" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path></svg>
+                <span class="v-align-middle">
+                    Labels  
+                </span>    
             </router-link>
             <router-link class="subnav-item" :to="`/${owner()}/${repo()}/milestones`">
-                <svg class="octicon octicon-milestone" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 2H6V0h2v2zm4 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h10l2 2-2 2zM8 4H6v2h2V4zM6 16h2V8H6v8z"></path></svg>
-                Milestones
+                <svg class="octicon octicon-milestone v-align-middle" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.75 0a.75.75 0 01.75.75V3h3.634c.414 0 .814.147 1.13.414l2.07 1.75a1.75 1.75 0 010 2.672l-2.07 1.75a1.75 1.75 0 01-1.13.414H8.5v5.25a.75.75 0 11-1.5 0V10H2.75A1.75 1.75 0 011 8.25v-3.5C1 3.784 1.784 3 2.75 3H7V.75A.75.75 0 017.75 0zm0 8.5h4.384a.25.25 0 00.161-.06l2.07-1.75a.25.25 0 000-.38l-2.07-1.75a.25.25 0 00-.161-.06H2.75a.25.25 0 00-.25.25v3.5c0 .138.112.25.25.25h5z"></path></svg>
+                <span class="v-align-middle">
+                    Milestones  
+                </span>    
             </router-link>
         </nav> 
 
diff --git a/src/scss/custom_global.scss b/src/scss/custom_global.scss
index 294567f..e83d972 100644
--- a/src/scss/custom_global.scss
+++ b/src/scss/custom_global.scss
@@ -8,7 +8,6 @@ flex-shrink: 1;
 
 .octicon {
 display: inline-block;
-vertical-align: text-top;
 fill: currentColor;
 }