diff --git a/src/components/home/ProjectsNavigationItem.vue b/src/components/home/ProjectsNavigationItem.vue
index 92d820265..5e521adbb 100644
--- a/src/components/home/ProjectsNavigationItem.vue
+++ b/src/components/home/ProjectsNavigationItem.vue
@@ -17,14 +17,14 @@
 				class="list-menu-link"
 				:class="{'router-link-exact-active': currentProject.id === project.id}"
 			>
-				<span class="icon menu-item-icon handle">
-					<icon icon="grip-lines"/>
-				</span>
 				<ColorBubble
 					v-if="project.hexColor !== ''"
 					:color="project.hexColor"
-					class="mr-1"
+					class="handle"
 				/>
+				<span class="icon menu-item-icon handle" v-else>
+					<icon icon="grip-lines"/>
+				</span>
 				<span class="list-menu-title">{{ getProjectTitle(project) }}</span>
 			</BaseButton>
 			<BaseButton
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index 383bea575..f10c79809 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -10,6 +10,8 @@
     .color-bubble {
       height: 12px;
       flex: 0 0 12px;
+      opacity: 1;
+      margin: 0 .5rem 0 .25rem;
     }
   }