diff --git a/package-lock.json b/package-lock.json
index 2166aadc..86ce1e0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "2.4.2",
       "dependencies": {
         "@abi-software/gallery": "^1.1.2",
-        "@abi-software/map-utilities": "^1.1.2",
+        "@abi-software/map-utilities": "^1.1.3-beta.11",
         "@abi-software/svg-sprite": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
         "algoliasearch": "^4.10.5",
@@ -65,12 +65,13 @@
       }
     },
     "node_modules/@abi-software/map-utilities": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.2.tgz",
-      "integrity": "sha512-NMERIqSq6pVwy7Daq+Uip8Cm1UE2KEJoquOqVXACrMoTDHV77LPbWAtawn3f7De5HK69oqLwZ+wbnFLy5aisrQ==",
+      "version": "1.1.3-beta.11",
+      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.3-beta.11.tgz",
+      "integrity": "sha512-t/BSMpaYIwIi4YykMkg6on/32/9ug9yk0m0y9wYyu8YZjNBuDewwy9GIA8bOhA1mZ9ei9WHD109IQdXnWZYuHw==",
       "dependencies": {
         "@abi-software/svg-sprite": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
+        "cytoscape": "^3.30.2",
         "element-plus": "2.8.4",
         "mitt": "^3.0.1",
         "vue": "^3.4.21"
@@ -2734,6 +2735,14 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/cytoscape": {
+      "version": "3.30.2",
+      "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.2.tgz",
+      "integrity": "sha512-oICxQsjW8uSaRmn4UK/jkczKOqTrVqt5/1WL0POiJUT2EKNc9STM4hYFHv917yu55aTBMFNRzymlJhVAiWPCxw==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
diff --git a/package.json b/package.json
index 2b7a23a2..5051fc0a 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.2",
-    "@abi-software/map-utilities": "^1.1.2",
+    "@abi-software/map-utilities": "^1.1.3-beta.11",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",
diff --git a/src/App.vue b/src/App.vue
index 1258c40c..323cbf82 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,6 +26,7 @@
       @tabClicked="tabClicked"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
+      @connectivity-component-click="onConnectivityComponentClick"
       @actionClick="action"
     />
   </div>
@@ -112,6 +113,7 @@ export default {
         BL_SERVER_URL: import.meta.env.VITE_APP_BL_SERVER_URL,
         NL_LINK_PREFIX: import.meta.env.VITE_APP_NL_LINK_PREFIX,
         ROOT_URL: import.meta.env.VITE_APP_ROOT_URL,
+        FLATMAPAPI_LOCATION: import.meta.env.VITE_FLATMAPAPI_LOCATION,
       },
       connectivityInput: exampleConnectivityInput,
       activeId: 1,
@@ -224,6 +226,9 @@ export default {
       let facets = await this.$refs.sideBar.getAlgoliaFacets()
       console.log('Algolia facets:', facets)
     },
+    onConnectivityComponentClick: function(data) {
+      console.log("onConnectivityComponentClick" , data)
+    }
   },
   mounted: function () {
     console.log('mounted app')
diff --git a/src/components.d.ts b/src/components.d.ts
index ba5eedf9..ca6e0240 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -19,6 +19,7 @@ declare module 'vue' {
     ElIconArrowRight: typeof import('@element-plus/icons-vue')['ArrowRight']
     ElIconLocation: typeof import('@element-plus/icons-vue')['Location']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
+    ElIconWarnTriangleFilled: typeof import('@element-plus/icons-vue')['WarnTriangleFilled']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index 62ce1e15..762c25f5 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -35,7 +35,9 @@
         <div class="block" v-else>
           <div class="title">{{ entry.featureId }}</div>
         </div>
-        <external-resource-card :resources="resources"></external-resource-card>
+        <div class="block" v-if="resources.length">
+          <external-resource-card :resources="resources"></external-resource-card>
+        </div>
       </div>
       <div class="title-buttons">
         <el-popover
@@ -58,7 +60,28 @@
         <CopyToClipboard :content="updatedCopyContent" />
       </div>
     </div>
-    <div class="content-container scrollbar">
+
+    <div class="content-container population-display">
+      <div class="block attribute-title-container">
+        <span class="attribute-title">Population Display</span>
+      </div>
+      <div class="block buttons-row">
+        <el-button
+          :class="activeView === 'listView' ? 'button' : 'el-button-secondary'"
+          @click="switchConnectivityView('listView')"
+        >
+          List view
+        </el-button>
+        <el-button
+          :class="activeView === 'graphView' ? 'button' : 'el-button-secondary'"
+          @click="switchConnectivityView('graphView')"
+        >
+          Graph view
+        </el-button>
+      </div>
+    </div>
+
+    <div class="content-container" v-if="activeView === 'listView'">
       {{ entry.paths }}
       <div v-if="entry.origins && entry.origins.length > 0" class="block">
         <div class="attribute-title-container">
@@ -163,18 +186,30 @@
           Explore destination data
         </el-button>
       </div>
-
-      <el-button
+      <div
         v-show="
           entry.componentsWithDatasets &&
           entry.componentsWithDatasets.length > 0 &&
           shouldShowExploreButton(entry.componentsWithDatasets)
         "
-        class="button"
-        @click="openAll"
+        class="block"
       >
-        Search for data on components
-      </el-button>
+        <el-button
+          class="button"
+          @click="openAll"
+        >
+          Search for data on components
+        </el-button>
+      </div>
+    </div>
+
+    <div class="content-container" v-if="activeView === 'graphView'">
+      <connectivity-graph
+        :entry="entry.featureId[0]"
+        :mapServer="envVars.FLATMAPAPI_LOCATION"
+        @tap-node="onTapNode"
+        ref="connectivityGraphRef"
+      />
     </div>
   </div>
 </template>
@@ -193,7 +228,7 @@ import {
 } from 'element-plus'
 import ExternalResourceCard from './ExternalResourceCard.vue'
 import EventBus from './EventBus.js'
-import { CopyToClipboard } from '@abi-software/map-utilities';
+import { CopyToClipboard, ConnectivityGraph } from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
 
 const titleCase = (str) => {
@@ -218,6 +253,7 @@ export default {
     ElIconWarning,
     ExternalResourceCard,
     CopyToClipboard,
+    ConnectivityGraph,
   },
   props: {
     entry: {
@@ -233,6 +269,10 @@ export default {
         featuresAlert: undefined,
       }),
     },
+    envVars: {
+      type: Object,
+      default: () => {},
+    },
     availableAnatomyFacets: {
       type: Array,
       default: () => [],
@@ -244,6 +284,7 @@ export default {
       activeSpecies: undefined,
       pubmedSearchUrl: '',
       loading: false,
+      activeView: 'listView',
       facetList: [],
       showToolip: false,
       showDetails: false,
@@ -352,6 +393,24 @@ export default {
       // connected to flatmapvuer > moveMap(featureIds) function
       this.$emit('show-connectivity', featureIds);
     },
+    switchConnectivityView: function (val) {
+      this.activeView = val;
+
+      if (val === 'graphView') {
+        const connectivityGraphRef = this.$refs.connectivityGraphRef;
+        if (connectivityGraphRef && connectivityGraphRef.$el) {
+          connectivityGraphRef.$el.scrollIntoView({
+            behavior: 'smooth',
+          });
+        }
+      }
+    },
+    onTapNode: function (data) {
+      /**
+       * This event is triggered by connectivity-graph's `tap-node` event.
+       */
+      this.$emit('connectivity-component-click', data);
+    },
     getUpdateCopyContent: function () {
       if (!this.entry) {
         return '';
@@ -447,6 +506,15 @@ export default {
       return contentArray.join('\n\n<br>');
     },
   },
+  mounted: function () {
+    EventBus.on('connectivity-graph-error', (errorMessage) => {
+      const connectivityGraphRef = this.$refs.connectivityGraphRef;
+
+      if (connectivityGraphRef) {
+        connectivityGraphRef.showErrorMessage(errorMessage);
+      }
+    });
+  },
 }
 </script>
 
@@ -458,7 +526,7 @@ export default {
 }
 
 .connectivity-info-title {
-  padding: 1rem;
+  padding: 0;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -476,16 +544,8 @@ export default {
   color: $app-primary-color;
 }
 
-.block {
-  margin-bottom: 0.5em;
-
-  .main > &:first-of-type {
-    margin-right: 1em;
-  }
-}
-
-.pub {
-  width: 16rem;
+.block + .block {
+  margin-top: 0.5em;
 }
 
 .button-circle {
@@ -585,6 +645,10 @@ export default {
   height: 100%;
   border-left: 1px solid var(--el-border-color);
   border-top: 1px solid var(--el-border-color);
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+  padding: 1rem;
 }
 
 .attribute-title-container {
@@ -627,14 +691,50 @@ export default {
   font-size: 14px !important;
   background-color: $app-primary-color;
   color: #fff;
-  & + .button {
-    margin-top: 10px !important;
-  }
+
   &:hover {
     color: #fff !important;
-    background: #ac76c5 !important;
+    background-color: #ac76c5 !important;
     border: 1px solid #ac76c5 !important;
   }
+
+  & + .button {
+    margin-top: 10px !important;
+  }
+}
+
+.el-button-secondary {
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.buttons-row {
+  text-align: right;
+
+  .button {
+    cursor: default;
+    border-color: transparent;
+
+    &:hover {
+      background-color: $app-primary-color !important;
+      border-color: transparent !important;
+    }
+  }
+
+  .el-button + .el-button {
+    margin-top: 0 !important;
+    margin-left: 10px !important;
+  }
+}
+
+.population-display {
+  display: flex;
+  flex: 1 1 auto !important;
+  flex-direction: row !important;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid $app-primary-color;
+  padding-bottom: 0.5rem !important;
 }
 
 .tooltip-container {
@@ -696,39 +796,18 @@ export default {
 
 .content-container {
   flex: 1 1 100%;
-  padding: 1rem;
+  padding: 0;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 
-  .block {
-    padding-top: 0.5em;
-
-    + .block {
-      margin-top: 1rem;
-    }
-  }
-
-  .connectivity-info-title ~ & {
-    padding-top: 0;
+  > div,
+  > .block + .block {
+    margin: 0;
   }
 }
 
-.scrollbar::-webkit-scrollbar-track {
-  border-radius: 10px;
-  background-color: #f5f5f5;
-}
-
-.scrollbar::-webkit-scrollbar {
-  width: 12px;
-  right: -12px;
-  background-color: #f5f5f5;
-}
-
-.scrollbar::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-  background-color: #979797;
-}
-
 /* Fix for chrome bug where under triangle pops up above one on top of it  */
 .selector:not(*:root),
 .tooltip-container::after {
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index dd8a9349..92cf0786 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -30,13 +30,15 @@
           />
           <template v-for="tab in tabs" key="tab.id">
             <!-- Connectivity Info -->
-            <template v-if="tab.type === 'connectivity'">
+            <template v-if="tab.type === 'connectivity' && connectivityInfo">
               <connectivity-info
                 :entry="connectivityInfo"
                 :availableAnatomyFacets="availableAnatomyFacets"
-                v-show="tab.id === activeTabId"
+                v-if="tab.id === activeTabId"
+                :envVars="envVars"
                 :ref="'connectivityTab_' + tab.id"
                 @show-connectivity="showConnectivity"
+                @connectivity-component-click="onConnectivityComponentClick"
               />
             </template>
             <template v-else>
@@ -154,6 +156,13 @@ export default {
     showConnectivity: function (featureIds) {
       this.$emit('show-connectivity', featureIds);
     },
+    /**
+     * This function is triggered after a connectivity component is clicked.
+     * @arg data
+     */
+    onConnectivityComponentClick: function (data) {
+      this.$emit('connectivity-component-click', data);
+    },
     /**
      * This event is emitted when the search filters are changed.
      * @arg `obj` {data, id}
@@ -263,6 +272,13 @@ export default {
     tabClose: function (id) {
       this.$emit('connectivity-info-close');
     },
+    /**
+     * To receive error message for connectivity graph
+     * @param {String} errorMessage
+     */
+    updateConnectivityGraphError: function (errorMessage) {
+      EventBus.emit('connectivity-graph-error', errorMessage);
+    },
   },
   created: function () {
     this.drawerOpen = this.openAtStart
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index 676a1921..0e08793c 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -16,7 +16,7 @@
         </div>
       </div>
       <el-button
-        v-if="title.id === 2"
+        v-if="title.id > 1"
         @click="tabClose(title.id)"
         class="button-tab-close"
         aria-label="Close"