diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 98be2f1af..814340659 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -40,7 +40,6 @@ import {
   updateTemplate,
 } from "../utils/reactflowUtils";
 import {
-  IncrementObjectKey,
   getRandomDescription,
   getRandomName,
   getSetFromObject,
@@ -154,6 +153,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
           return;
         }
         if (flow.data && flow.is_component) {
+          console.log(flow.data.nodes[0].data);
           storeComponents[(flow.data.nodes[0].data as NodeDataType).type] =
             _.cloneDeep((flow.data.nodes[0].data as NodeDataType).node!);
           return;
@@ -674,12 +674,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     component.node!.official = false;
     let key = component.type;
     if (data["custom_components"][key] !== undefined) {
-      let { newKey, increment } = IncrementObjectKey(
-        data["custom_components"],
-        key
-      );
-      key = newKey;
-      component.type = newKey;
+      let increment: number;
+      component.type = removeCountFromString(key) + ` (${uid()})`;
       let componentNodes: { [key: string]: APIClassType } = {};
       Object.keys(data["custom_components"]).forEach((key) => {
         componentNodes[key] = data["custom_components"][key];
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 70eb26f1d..c819d8f2b 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -309,7 +309,12 @@ export default function ExtraSidebar(): JSX.Element {
               >
                 <div className="side-bar-components-gap">
                   {Object.keys(dataFilter[SBSectionName])
-                    .sort(sensitiveSort)
+                    .sort((a, b) =>
+                      sensitiveSort(
+                        dataFilter[SBSectionName][a].display_name,
+                        dataFilter[SBSectionName][b].display_name
+                      )
+                    )
                     .map((SBItemName: string, index) => (
                       <ShadTooltip
                         content={
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index 567a18247..68c5843c4 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@@ -571,7 +571,7 @@ export function IncrementObjectKey(
 
 export function removeCountFromString(input: string): string {
   // Define a regex pattern to match the count in parentheses
-  const pattern = /\s*\(\d+\)\s*$/;
+  const pattern = /\s*\(\w+\)\s*$/;
 
   // Use the `replace` method to remove the matched pattern
   const result = input.replace(pattern, "");
@@ -581,7 +581,7 @@ export function removeCountFromString(input: string): string {
 
 export function sensitiveSort(a: string, b: string): number {
   // Extract the name and number from each string using regular expressions
-  const regex = /(.+) \((\d+)\)/;
+  const regex = /(.+) \((\w+)\)/;
   const matchA = a.match(regex);
   const matchB = b.match(regex);