diff --git a/crates/app/src/lib/worker.ts b/crates/app/src/lib/worker.ts
index 91e7a9caa..6b682774c 100644
--- a/crates/app/src/lib/worker.ts
+++ b/crates/app/src/lib/worker.ts
@@ -1,55 +1,55 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import {ComponentExportFunction, Field, Typ} from "@/types/component.ts";
+import { ComponentExportFunction, Field, Typ } from "@/types/component.ts";
 
 function buildJsonSkeleton(field: Field): any {
-    const {type, fields} = field.typ;
-    switch (type) {
-        case "Str":
-        case "Chr":
-            return "";
-
-        case "Bool":
-            return false;
-
-        case "F64":
-        case "F32":
-        case "U64":
-        case "S64":
-        case "U32":
-        case "S32":
-        case "U16":
-        case "S16":
-        case "U8":
-        case "S8":
-            return 0;
-
-        case "Record": {
-            const obj: Record<string, any> = {};
-            fields?.forEach((subField: Field) => {
-                obj[subField.name] = buildJsonSkeleton(subField);
-            });
-            return obj;
-        }
-
-        case "Tuple": {
-            if (!fields) return [];
-            return fields.map((subField: Field) => buildJsonSkeleton(subField));
-        }
-
-        case "List": {
-            return [];
-        }
-
-        case "Option": {
-            return null;
-        }
-
-        case "Enum": {
-            return "";
-        }
-        default:
-            return null;
+  const { type, fields } = field.typ;
+  switch (type) {
+    case "Str":
+    case "Chr":
+      return "";
+
+    case "Bool":
+      return false;
+
+    case "F64":
+    case "F32":
+    case "U64":
+    case "S64":
+    case "U32":
+    case "S32":
+    case "U16":
+    case "S16":
+    case "U8":
+    case "S8":
+      return 0;
+
+    case "Record": {
+      const obj: Record<string, any> = {};
+      fields?.forEach((subField: Field) => {
+        obj[subField.name] = buildJsonSkeleton(subField);
+      });
+      return obj;
+    }
+
+    case "Tuple": {
+      if (!fields) return [];
+      return fields.map((subField: Field) => buildJsonSkeleton(subField));
+    }
+
+    case "List": {
+      return [];
+    }
+
+    case "Option": {
+      return null;
     }
+
+    case "Enum": {
+      return "";
+    }
+    default:
+      return null;
+  }
 }
 
 /**
@@ -57,7 +57,7 @@ function buildJsonSkeleton(field: Field): any {
  * into a default JSON array for user editing.
  */
 export function parseToJsonEditor(data: ComponentExportFunction) {
-    return data.parameters.map((param) => buildJsonSkeleton(param));
+  return data.parameters.map((param) => buildJsonSkeleton(param));
 }
 
 /**
@@ -65,54 +65,127 @@ export function parseToJsonEditor(data: ComponentExportFunction) {
  * format expected by the server.
  */
 export function parseToApiPayload(
-    input: any[],
-    actionDefinition: ComponentExportFunction
+  input: any[],
+  actionDefinition: ComponentExportFunction
 ) {
-    const payload = {params: [] as Array<{ value: any; typ: Typ }>};
-
-    const parseValue = (data: any, typeDef: Typ) => {
-        switch (typeDef.type) {
-            case "Str":
-            case "Chr":
-            case "Bool":
-            case "F64":
-            case "F32":
-            case "U64":
-            case "S64":
-            case "U32":
-            case "S32":
-            case "U16":
-            case "S16":
-            case "U8":
-            case "S8":
-            case "Tuple":
-            case "Record":
-            case "Enum":
-                return data;
-            case "List":
-                return Array.isArray(data) ? data : [data];
-            default:
-                throw new Error(`Unsupported type: ${typeDef.type}`);
-        }
-    };
-
-    actionDefinition.parameters.forEach((param, index) => {
-        // Each param is presumably an item in input
-        const userValue = input[index];
-        payload.params.push({
-            value: parseValue(userValue, param.typ),
-            typ: param.typ,
-        });
+  const payload = { params: [] as Array<{ value: any; typ: Typ }> };
+
+  const parseValue = (data: any, typeDef: Typ) => {
+    switch (typeDef.type) {
+      case "Str":
+      case "Chr":
+      case "Bool":
+      case "F64":
+      case "F32":
+      case "U64":
+      case "S64":
+      case "U32":
+      case "S32":
+      case "U16":
+      case "S16":
+      case "U8":
+      case "S8":
+      case "Tuple":
+      case "Record":
+      case "Enum":
+        return data;
+      case "List":
+        return Array.isArray(data) ? data : [data];
+      default:
+        throw new Error(`Unsupported type: ${typeDef.type}`);
+    }
+  };
+
+  actionDefinition.parameters.forEach((param, index) => {
+    // Each param is presumably an item in input
+    const userValue = input[index];
+    payload.params.push({
+      value: parseValue(userValue, param.typ),
+      typ: param.typ,
     });
+  });
 
-    return payload;
+  return payload;
 }
 
 export function safeFormatJSON(input: string): string {
-    try {
-        const parsed = JSON.parse(input);
-        return JSON.stringify(parsed, null, 2);
-    } catch {
-        return input; // Return as-is if parse fails
+  try {
+    const parsed = JSON.parse(input);
+    return JSON.stringify(parsed, null, 2);
+  } catch {
+    return input; // Return as-is if parse fails
+  }
+}
+
+export function getCaretCoordinates(
+  element: HTMLTextAreaElement,
+  position: number
+) {
+  const div = document.createElement("div");
+  const styles = getComputedStyle(element);
+  const properties = [
+    "direction",
+    "boxSizing",
+    "width",
+    "height",
+    "overflowX",
+    "overflowY",
+    "borderTopWidth",
+    "borderRightWidth",
+    "borderBottomWidth",
+    "borderLeftWidth",
+    "borderStyle",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+    "fontStyle",
+    "fontVariant",
+    "fontWeight",
+    "fontStretch",
+    "fontSize",
+    "fontSizeAdjust",
+    "lineHeight",
+    "fontFamily",
+    "textAlign",
+    "textTransform",
+    "textIndent",
+    "textDecoration",
+    "letterSpacing",
+    "wordSpacing",
+    "tabSize",
+    "MozTabSize",
+  ];
+
+  div.id = "input-textarea-caret-position-mirror-div";
+  document.body.appendChild(div);
+
+  const style = div.style;
+  style.whiteSpace = "pre-wrap";
+  style.wordWrap = "break-word";
+  style.position = "absolute";
+  style.visibility = "hidden";
+
+  properties.forEach((prop: string) => {
+    if (
+      Object.prototype.hasOwnProperty.call(styles as Record<string, any>, prop)
+    ) {
+      style.setProperty(prop, (styles as Record<string, any>)[prop]);
     }
+  });
+
+  div.textContent = element.value.substring(0, position);
+  const span = document.createElement("span");
+  span.textContent = element.value.substring(position) || ".";
+  div.appendChild(span);
+
+  const coordinates = {
+    top: span.offsetTop + Number.parseInt(styles["borderTopWidth"]),
+    left: span.offsetLeft + Number.parseInt(styles["borderLeftWidth"]),
+    height: Number.parseInt(styles["lineHeight"]),
+  };
+
+  document.body.removeChild(div);
+
+  return coordinates;
 }
diff --git a/crates/app/src/pages/api/details/createRoute.tsx b/crates/app/src/pages/api/details/createRoute.tsx
index d81cc80f5..ac75ddd2d 100644
--- a/crates/app/src/pages/api/details/createRoute.tsx
+++ b/crates/app/src/pages/api/details/createRoute.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { ArrowLeft, Loader2 } from "lucide-react";
 import {
@@ -24,10 +24,24 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
 import { API } from "@/service";
-import { Api, HttpMethod } from "@/types/api";
-import { Component } from "@/types/component";
+import type { Api, HttpMethod } from "@/types/api";
+import type { ComponentList } from "@/types/component";
 import ErrorBoundary from "@/components/errorBoundary";
 import { toast } from "@/hooks/use-toast";
+import { Card } from "@/components/ui/card";
+import { getCaretCoordinates } from "@/lib/worker";
+
+const extractDynamicParams = (path: string) => {
+  const regex = /{([^}]+)}/g;
+  const matches = [];
+  let match;
+
+  while ((match = regex.exec(path)) !== null) {
+    matches.push(match[1]);
+  }
+
+  return matches;
+};
 
 const HTTP_METHODS = [
   "Get",
@@ -68,7 +82,7 @@ const CreateRoute = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [componentList, setComponentList] = useState<{
-    [key: string]: Component;
+    [key: string]: ComponentList;
   }>({});
   const [isEdit, setIsEdit] = useState(false);
   const [activeApiDetails, setActiveApiDetails] = useState<Api | null>(null);
@@ -76,6 +90,24 @@ const CreateRoute = () => {
   const [queryParams] = useSearchParams();
   const path = queryParams.get("path");
   const method = queryParams.get("method");
+  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [cursorPosition, setCursorPosition] = useState(0);
+
+  const [responseSuggestions, setResponseSuggestions] = useState(
+    [] as string[]
+  );
+  const [filteredResponseSuggestions, setFilteredResponseSuggestions] =
+    useState<string[]>([]);
+  const [showResponseSuggestions, setShowResponseSuggestions] = useState(false);
+  const [responseMenuPosition, setResponseMenuPosition] = useState({
+    top: 0,
+    left: 0,
+  });
+  const responseTextareaRef = useRef<HTMLTextAreaElement>(null);
+  const [responseCursorPosition, setResponseCursorPosition] = useState(0);
 
   const form = useForm<RouteFormValues>({
     resolver: zodResolver(routeSchema),
@@ -145,7 +177,7 @@ const CreateRoute = () => {
           title: "API not found",
           description: "Please try again.",
           variant: "destructive",
-          duration: Infinity,
+          duration: Number.POSITIVE_INFINITY,
         });
         return;
       }
@@ -158,7 +190,7 @@ const CreateRoute = () => {
         binding: {
           componentId: {
             componentId: values.componentId,
-            version: parseInt(values.version),
+            version: Number.parseInt(values.version),
           },
           workerName: values.workerName,
           response: values.response || "",
@@ -184,6 +216,182 @@ const CreateRoute = () => {
     }
   };
 
+  const handleSuggestionClick = (suggestion: string) => {
+    const currentValue = form.getValues("workerName");
+    const textBeforeCursor = currentValue.slice(0, cursorPosition);
+    const pattern = "request.path.";
+    const startIndex = textBeforeCursor.lastIndexOf(pattern);
+
+    let newValue: string;
+    let newCursorPosition: number;
+
+    if (startIndex !== -1) {
+      // Replace any text after "request.path." with the suggestion
+      newValue =
+        currentValue.slice(0, startIndex) +
+        pattern +
+        suggestion +
+        currentValue.slice(cursorPosition);
+      newCursorPosition = startIndex + pattern.length + suggestion.length;
+    } else {
+      // If the pattern isn't found, insert it along with the suggestion at the cursor position
+      newValue =
+        currentValue.slice(0, cursorPosition) +
+        pattern +
+        suggestion +
+        currentValue.slice(cursorPosition);
+      newCursorPosition = cursorPosition + pattern.length + suggestion.length;
+    }
+
+    form.setValue("workerName", newValue);
+    setShowSuggestions(false);
+
+    if (textareaRef.current) {
+      textareaRef.current.focus();
+      textareaRef.current.setSelectionRange(
+        newCursorPosition,
+        newCursorPosition
+      );
+      setCursorPosition(newCursorPosition);
+    }
+  };
+
+  const onComponentChange = (componentId: string) => {
+    form.setValue("componentId", componentId);
+  };
+
+  const onVersionChange = (version: string) => {
+    form.setValue("version", version);
+    const componentId = form.getValues("componentId");
+    const exportedFunctions = componentList?.[componentId]?.versions?.find(
+      (data) => data.versionedComponentId?.version?.toString() === version
+    );
+    const data = exportedFunctions?.metadata?.exports || [];
+    const output = data.flatMap((item) =>
+      item.functions.map((func) => `${item.name}.{${func.name}}`)
+    );
+    setResponseSuggestions(output);
+  };
+
+  const handleWorkerNameChange = (
+    e: React.ChangeEvent<HTMLTextAreaElement>
+  ) => {
+    const value = e.target.value;
+    form.setValue("workerName", value);
+    const cursorPos = e.target.selectionStart || 0;
+    setCursorPosition(cursorPos);
+
+    const textBeforeCursor = value.slice(0, cursorPos);
+    // Look for the last occurrence of "request.path."
+    const pattern = "request.path.";
+    const startIndex = textBeforeCursor.lastIndexOf(pattern);
+
+    if (startIndex !== -1) {
+      // Extract the token typed after "request.path."
+      const token = textBeforeCursor.slice(startIndex + pattern.length);
+      // Retrieve the dynamic parameters (or suggestion candidates)
+      const dynamicParams = extractDynamicParams(form.getValues("path"));
+
+      // If token is empty, show all dynamicParams; otherwise filter them
+      const filteredSuggestions =
+        token.trim().length > 0
+          ? dynamicParams.filter((param) =>
+              param.toLowerCase().startsWith(token.toLowerCase())
+            )
+          : dynamicParams;
+
+      if (filteredSuggestions.length > 0) {
+        setSuggestions(filteredSuggestions);
+        updateMenuPosition();
+        setShowSuggestions(true);
+      } else {
+        setShowSuggestions(false);
+      }
+    } else {
+      setShowSuggestions(false);
+    }
+  };
+
+  const updateMenuPosition = () => {
+    if (textareaRef.current) {
+      const { selectionStart } = textareaRef.current;
+      const coords = getCaretCoordinates(textareaRef.current, selectionStart);
+      setMenuPosition({
+        top: coords.top + coords.height - textareaRef.current.scrollTop,
+        left: coords.left - textareaRef.current.scrollLeft,
+      });
+    }
+  };
+
+  const handleResponseSuggestionClick = (suggestion: string) => {
+    const currentValue = form.getValues("response") ?? "";
+    // Get text before the current cursor position.
+    const textBeforeCursor = currentValue.slice(0, responseCursorPosition);
+    // Find the last contiguous non-space token
+    const tokenMatch = textBeforeCursor.match(/(\S+)$/);
+    let tokenStart = responseCursorPosition;
+    if (tokenMatch) {
+      tokenStart = responseCursorPosition - tokenMatch[1].length;
+    }
+    // Replace the token with the suggestion.
+    const newValue =
+      currentValue.slice(0, tokenStart) +
+      suggestion +
+      currentValue.slice(responseCursorPosition);
+    form.setValue("response", newValue);
+    setShowResponseSuggestions(false);
+
+    if (responseTextareaRef.current) {
+      responseTextareaRef.current.focus();
+      const newCursorPosition = tokenStart + suggestion.length;
+      responseTextareaRef.current.setSelectionRange(
+        newCursorPosition,
+        newCursorPosition
+      );
+      setResponseCursorPosition(newCursorPosition);
+    }
+  };
+
+  const handleResponseChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    form.setValue("response", value);
+    const cursorPos = e.target.selectionStart || 0;
+    setResponseCursorPosition(cursorPos);
+
+    // Extract the last "word" (non-whitespace sequence) before the cursor.
+    const textBeforeCursor = value.slice(0, cursorPos);
+    const match = textBeforeCursor.match(/(\S+)$/); // captures last token
+    const token = match ? match[1] : "";
+
+    // Filter responseSuggestions to only those that match the token (case-insensitive)
+    const filtered = responseSuggestions.filter((item) =>
+      item.toLowerCase().startsWith(token.toLowerCase())
+    );
+
+    // If there are any matches and the token is not empty, show the dropdown.
+    if (filtered.length > 0 && token.length > 0) {
+      updateResponseMenuPosition();
+      setFilteredResponseSuggestions(filtered);
+      setShowResponseSuggestions(true);
+    } else {
+      setShowResponseSuggestions(false);
+    }
+  };
+
+  const updateResponseMenuPosition = () => {
+    if (responseTextareaRef.current) {
+      const { selectionStart } = responseTextareaRef.current;
+      const coords = getCaretCoordinates(
+        responseTextareaRef.current,
+        selectionStart
+      );
+      setResponseMenuPosition({
+        top: coords.top + coords.height - responseTextareaRef.current.scrollTop,
+        left: coords.left - responseTextareaRef.current.scrollLeft,
+      });
+    }
+  };
+
   if (fetchError) {
     return (
       <div className="p-6 max-w-3xl mx-auto">
@@ -196,7 +404,6 @@ const CreateRoute = () => {
       </div>
     );
   }
-
   return (
     <ErrorBoundary>
       <div className="overflow-y-auto h-[80vh]">
@@ -295,7 +502,7 @@ const CreateRoute = () => {
                         <FormItem>
                           <FormLabel>Component</FormLabel>
                           <Select
-                            onValueChange={field.onChange}
+                            onValueChange={onComponentChange}
                             value={field.value}
                           >
                             <FormControl>
@@ -305,7 +512,7 @@ const CreateRoute = () => {
                             </FormControl>
                             <SelectContent>
                               {Object.values(componentList).map(
-                                (data: Component) => (
+                                (data: ComponentList) => (
                                   <SelectItem
                                     value={data.componentId || ""}
                                     key={data.componentName}
@@ -328,7 +535,7 @@ const CreateRoute = () => {
                         <FormItem>
                           <FormLabel>Version</FormLabel>
                           <Select
-                            onValueChange={field.onChange}
+                            onValueChange={onVersionChange}
                             value={field.value}
                             disabled={!form.watch("componentId")}
                           >
@@ -344,7 +551,7 @@ const CreateRoute = () => {
                               {form.watch("componentId") &&
                                 componentList[
                                   form.watch("componentId")
-                                ]?.versionId?.map((v: number) => (
+                                ]?.versionList?.map((v: number) => (
                                   <SelectItem value={String(v)} key={v}>
                                     v{v}
                                   </SelectItem>
@@ -364,13 +571,40 @@ const CreateRoute = () => {
                       <FormItem className="mt-4">
                         <FormLabel>Worker Name</FormLabel>
                         <FormControl>
-                          <Textarea
-                            placeholder="Interpolate variables into your Worker ID"
-                            {...field}
-                          />
+                          <div className="relative">
+                            <Textarea
+                              placeholder="Interpolate variables into your Worker ID"
+                              {...field}
+                              onChange={handleWorkerNameChange}
+                              ref={textareaRef}
+                            />
+                            {showSuggestions && (
+                              <Card
+                                className="absolute z-10 p-1 space-y-1 bg-white shadow-lg min-w-[70px]"
+                                style={{
+                                  top: `${menuPosition.top}px`,
+                                  left: `${menuPosition.left}px`,
+                                  width: "max-content",
+                                }}
+                              >
+                                {suggestions.map((suggestion) => (
+                                  <div
+                                    key={suggestion}
+                                    className="px-2 py-1 text-sm cursor-pointer hover:bg-gray-100"
+                                    onClick={() =>
+                                      handleSuggestionClick(suggestion)
+                                    }
+                                  >
+                                    {suggestion}
+                                  </div>
+                                ))}
+                              </Card>
+                            )}
+                          </div>
                         </FormControl>
                         <FormDescription>
-                          Unique identifier for your worker instance
+                          Unique identifier for your worker instance. Use ${"{"}{" "}
+                          to interpolate path parameters.
                         </FormDescription>
                         <FormMessage />
                       </FormItem>
@@ -385,13 +619,41 @@ const CreateRoute = () => {
                     <FormItem>
                       <FormLabel>Response</FormLabel>
                       <FormControl>
-                        <Textarea
-                          placeholder="Define the HTTP response template"
-                          {...field}
-                        />
+                        <div className="relative">
+                          <Textarea
+                            placeholder="Define the HTTP response template"
+                            className="min-h-[130px]"
+                            {...field}
+                            onChange={handleResponseChange}
+                            ref={responseTextareaRef}
+                          />
+                          {showResponseSuggestions && (
+                            <Card
+                              className="absolute z-10 p-1 space-y-1 bg-white shadow-lg min-w-[200px]"
+                              style={{
+                                top: `${responseMenuPosition.top}px`,
+                                left: `${responseMenuPosition.left}px`,
+                                width: "max-content",
+                              }}
+                            >
+                              {filteredResponseSuggestions.map((suggestion) => (
+                                <div
+                                  key={suggestion}
+                                  className="px-2 py-1 text-sm cursor-pointer hover:bg-gray-100"
+                                  onClick={() =>
+                                    handleResponseSuggestionClick(suggestion)
+                                  }
+                                >
+                                  {suggestion}
+                                </div>
+                              ))}
+                            </Card>
+                          )}
+                        </div>
                       </FormControl>
                       <FormDescription>
-                        Define the HTTP response for this API Route
+                        Type 'golem:' to see available functions. Define the
+                        HTTP response for this API Route.
                       </FormDescription>
                       <FormMessage />
                     </FormItem>
diff --git a/crates/app/src/pages/api/details/viewRoute.tsx b/crates/app/src/pages/api/details/viewRoute.tsx
index f7e8d0b3a..e5de58c5d 100644
--- a/crates/app/src/pages/api/details/viewRoute.tsx
+++ b/crates/app/src/pages/api/details/viewRoute.tsx
@@ -10,14 +10,14 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { HTTP_METHOD_COLOR } from "@/pages/api/details/apiLeftNav";
-import { Component } from "@/types/component";
+import { ComponentList } from "@/types/component";
 
 export const ApiRoute = () => {
   const navigate = useNavigate();
   const { apiName, version } = useParams();
   const [currentRoute, setCurrentRoute] = useState({} as Route);
   const [componentList, setComponentList] = useState<{
-    [key: string]: Component;
+    [key: string]: ComponentList;
   }>({});
   const [queryParams] = useSearchParams();
   const path = queryParams.get("path");
diff --git a/crates/app/src/pages/components/details/componentsLeftNav.tsx b/crates/app/src/pages/components/details/componentsLeftNav.tsx
index 034f98940..3b323cc35 100644
--- a/crates/app/src/pages/components/details/componentsLeftNav.tsx
+++ b/crates/app/src/pages/components/details/componentsLeftNav.tsx
@@ -1,169 +1,160 @@
-import {useLocation, useNavigate, useParams} from "react-router-dom";
-import {ArrowLeft, ArrowRightFromLine, Home, Info, Pencil, Pickaxe, Settings, ToyBrick, Workflow,} from "lucide-react";
+import { useNavigate, useParams, useLocation } from "react-router-dom";
+import {
+  ArrowRightFromLine,
+  Home,
+  Pencil,
+  Settings,
+  ArrowLeft,
+  Pickaxe,
+  Info,
+  Workflow,
+} from "lucide-react";
 
-import {Button} from "@/components/ui/button";
-import {cn} from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import ErrorBoundary from "@/components/errorBoundary";
-import {Component} from "@/types/component";
 
 interface ComponentLeftNavProps {
-    componentDetails: Component;
+  componentType: string | undefined;
 }
 
 const ComponentLeftNav: React.FC<ComponentLeftNavProps> = ({
-                                                               componentDetails,
-                                                           }) => {
-    const navigate = useNavigate();
-    const {componentId} = useParams();
-    const location = useLocation();
+  componentType = "Durable",
+}) => {
+  const navigate = useNavigate();
+  const { componentId } = useParams();
+  const location = useLocation();
 
-    const isActive = (path: string) => location.pathname.endsWith(path);
+  const isActive = (path: string) => location.pathname.endsWith(path);
 
-    return (
-        <ErrorBoundary>
-            <nav className="w-64 border-r p-4 border-gray-200 dark:border-gray-700 min-h-[88vh]">
-                <div className="mb-6">
-                    <div className="flex items-center mb-6">
-                        <div onClick={() => navigate(-1)}>
-                            <ArrowLeft
-                                className="h-5 w-5 mr-2 text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 cursor-pointer"/>
-                        </div>
-                        <h1 className="text-lg font-semibold text-gray-800 dark:text-gray-200">
-                            Component
-                        </h1>
-                    </div>
+  return (
+    <ErrorBoundary>
+      <nav className="w-64 border-r p-4 border-gray-200 dark:border-gray-700 min-h-[88vh]">
+        <div className="mb-6">
+          <div className="flex items-center mb-6">
+            <div onClick={() => navigate(-1)}>
+              <ArrowLeft className="h-5 w-5 mr-2 text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 cursor-pointer" />
+            </div>
+            <h1 className="text-lg font-semibold text-gray-800 dark:text-gray-200">
+              Component
+            </h1>
+          </div>
 
-                    <ul className="space-y-1">
-                        <li>
-                            <Button
-                                variant="ghost"
-                                onClick={() => navigate(`/components/${componentId}`)}
-                                className={cn(
-                                    "w-full flex items-center px-3 py-2 rounded-md text-sm font-medium justify-start",
-                                    isActive(componentId ?? "")
-                                        ? "bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
-                                        : "hover:bg-gray-100 dark:hover:bg-gray-900 text-gray-600 dark:text-gray-400"
-                                )}
-                            >
-                                <Home className="h-5 w-5 mr-2"/>
-                                <span>Overview</span>
-                            </Button>
-                        </li>
-                        {componentDetails?.componentType === "Durable" ||
-                        !componentDetails?.componentType ? (
-                            <li>
-                                <Button
-                                    variant="ghost"
-                                    onClick={() => navigate(`/components/${componentId}/workers`)}
-                                    className={cn(
-                                        "w-full flex items-center px-3 py-2 rounded-md text-sm font-medium justify-start",
-                                        isActive("workers") || isActive("create")
-                                            ? "bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
-                                            : "hover:bg-gray-100 dark:hover:bg-gray-900 text-gray-600 dark:text-gray-400"
-                                    )}
-                                >
-                                    <Pickaxe className="h-5 w-5 mr-2"/>
-                                    <span>Workers</span>
-                                </Button>
-                            </li>
-                        ) : (
-                            <li>
-                                <Button
-                                    variant="ghost"
-                                    onClick={() => navigate(`/components/${componentId}/invoke`)}
-                                    className={cn(
-                                        "w-full flex items-center px-3 py-2 rounded-md text-sm font-medium justify-start",
-                                        isActive("invoke")
-                                            ? "bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
-                                            : "hover:bg-gray-100 dark:hover:bg-gray-900 text-gray-600 dark:text-gray-400"
-                                    )}
-                                >
-                                    <Workflow className="h-5 w-5 mr-2"/>
-                                    <span>Invoke</span>
-                                </Button>
-                            </li>
-                        )}
+          <ul className="space-y-1">
+            <li>
+              <Button
+                variant="ghost"
+                onClick={() => navigate(`/components/${componentId}`)}
+                className={cn(
+                  "w-full flex items-center px-3 py-2 rounded-md text-sm font-medium justify-start",
+                  isActive(componentId ?? "")
+                    ? "bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                    : "hover:bg-gray-100 dark:hover:bg-gray-900 text-gray-600 dark:text-gray-400"
+                )}
+              >
+                <Home className="h-5 w-5 mr-2" />
+                <span>Overview</span>
+              </Button>
+            </li>
+            {componentType === "Durable" ? (
+              <li>
+                <Button
+                  variant="ghost"
+                  onClick={() => navigate(`/components/${componentId}/workers`)}
+                  className={cn(
+                    "w-full flex items-center px-3 py-2 rounded-md text-sm font-medium justify-start",
+                    isActive("workers") || isActive("create")
+                      ? "bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                      : "hover:bg-gray-100 dark:hover:bg-gray-900 text-gray-600 dark:text-gray-400"
+                  )}
+                >
+                  <Pickaxe className="h-5 w-5 mr-2" />
+                  <span>Workers</span>
+                </Button>
+              </li>
+            ) : (
+              <li>
+                <Button
+                  variant="ghost"
+                  onClick={() => navigate(`/components/${componentId}/invoke`)}
+                  className={cn(
+                    "w-full flex items-center px-3 py-2 rounded-md text-sm font-medium justify-start",
+                    isActive("invoke")
+                      ? "bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                      : "hover:bg-gray-100 dark:hover:bg-gray-900 text-gray-600 dark:text-gray-400"
+                  )}
+                >
+                  <Workflow className="h-5 w-5 mr-2" />
+                  <span>Invoke</span>
+                </Button>
+              </li>
+            )}
 
-                        <li>
-                            <Button
-                                variant="ghost"
-                                onClick={() => navigate(`/components/${componentId}/exports`)}
-                                className={cn(
-                                    "w-full flex items-center px-3 py-2 rounded-md text-sm font-medium justify-start",
-                                    isActive("exports")
-                                        ? "bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
-                                        : "hover:bg-gray-100 dark:hover:bg-gray-900 text-gray-600 dark:text-gray-400"
-                                )}
-                            >
-                                <ArrowRightFromLine className="h-4 w-4 mr-2"/>
-                                <span>Exports</span>
-                            </Button>
-                        </li>
-                        <li>
-                            <Button
-                                variant="ghost"
-                                onClick={() => navigate(`/components/${componentId}/plugins`)}
-                                className={cn(
-                                    "w-full flex items-center px-3 py-2 rounded-md text-sm font-medium justify-start",
-                                    isActive("exports")
-                                        ? "bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
-                                        : "hover:bg-gray-100 dark:hover:bg-gray-900 text-gray-600 dark:text-gray-400"
-                                )}
-                            >
-                                <ToyBrick className="h-4 w-4 mr-2"/>
-                                <span>Plugins</span>
-                            </Button>
-                        </li>
-                        <li>
-                            <Button
-                                variant="ghost"
-                                onClick={() => navigate(`/components/${componentId}/update`)}
-                                className={cn(
-                                    "w-full flex items-center px-3 py-2 rounded-md text-sm font-medium justify-start",
-                                    isActive("update")
-                                        ? "bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
-                                        : "hover:bg-gray-100 dark:hover:bg-gray-900 text-gray-600 dark:text-gray-400"
-                                )}
-                            >
-                                <Pencil className="h-5 w-5 mr-2"/>
-                                <span>Update</span>
-                            </Button>
-                        </li>
-                        <li>
-                            <Button
-                                variant="ghost"
-                                onClick={() => navigate(`/components/${componentId}/info`)}
-                                className={cn(
-                                    "w-full flex items-center px-3 py-2 rounded-md text-sm font-medium justify-start",
-                                    isActive("info")
-                                        ? "bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
-                                        : "hover:bg-gray-100 dark:hover:bg-gray-900 text-gray-600 dark:text-gray-400"
-                                )}
-                            >
-                                <Info className="h-5 w-5 mr-2"/>
-                                <span>Info</span>
-                            </Button>
-                        </li>
-                        <li>
-                            <Button
-                                variant="ghost"
-                                onClick={() => navigate(`/components/${componentId}/settings`)}
-                                className={cn(
-                                    "w-full flex items-center px-3 py-2 rounded-md text-sm font-medium justify-start",
-                                    isActive("settings")
-                                        ? "bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
-                                        : "hover:bg-gray-100 dark:hover:bg-gray-900 text-gray-600 dark:text-gray-400"
-                                )}
-                            >
-                                <Settings className="h-5 w-5 mr-2"/>
-                                <span>Settings</span>
-                            </Button>
-                        </li>
-                    </ul>
-                </div>
-            </nav>
-        </ErrorBoundary>
-    );
+            <li>
+              <Button
+                variant="ghost"
+                onClick={() => navigate(`/components/${componentId}/exports`)}
+                className={cn(
+                  "w-full flex items-center px-3 py-2 rounded-md text-sm font-medium justify-start",
+                  isActive("exports")
+                    ? "bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                    : "hover:bg-gray-100 dark:hover:bg-gray-900 text-gray-600 dark:text-gray-400"
+                )}
+              >
+                <ArrowRightFromLine className="h-4 w-4 mr-2" />
+                <span>Exports</span>
+              </Button>
+            </li>
+            <li>
+              <Button
+                variant="ghost"
+                onClick={() => navigate(`/components/${componentId}/update`)}
+                className={cn(
+                  "w-full flex items-center px-3 py-2 rounded-md text-sm font-medium justify-start",
+                  isActive("update")
+                    ? "bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                    : "hover:bg-gray-100 dark:hover:bg-gray-900 text-gray-600 dark:text-gray-400"
+                )}
+              >
+                <Pencil className="h-5 w-5 mr-2" />
+                <span>Update</span>
+              </Button>
+            </li>
+            <li>
+              <Button
+                variant="ghost"
+                onClick={() => navigate(`/components/${componentId}/info`)}
+                className={cn(
+                  "w-full flex items-center px-3 py-2 rounded-md text-sm font-medium justify-start",
+                  isActive("info")
+                    ? "bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                    : "hover:bg-gray-100 dark:hover:bg-gray-900 text-gray-600 dark:text-gray-400"
+                )}
+              >
+                <Info className="h-5 w-5 mr-2" />
+                <span>Info</span>
+              </Button>
+            </li>
+            <li>
+              <Button
+                variant="ghost"
+                onClick={() => navigate(`/components/${componentId}/settings`)}
+                className={cn(
+                  "w-full flex items-center px-3 py-2 rounded-md text-sm font-medium justify-start",
+                  isActive("settings")
+                    ? "bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                    : "hover:bg-gray-100 dark:hover:bg-gray-900 text-gray-600 dark:text-gray-400"
+                )}
+              >
+                <Settings className="h-5 w-5 mr-2" />
+                <span>Settings</span>
+              </Button>
+            </li>
+          </ul>
+        </div>
+      </nav>
+    </ErrorBoundary>
+  );
 };
 
 export default ComponentLeftNav;
diff --git a/crates/app/src/pages/components/details/export.tsx b/crates/app/src/pages/components/details/export.tsx
index c4391ceda..fa1662f95 100644
--- a/crates/app/src/pages/components/details/export.tsx
+++ b/crates/app/src/pages/components/details/export.tsx
@@ -20,8 +20,8 @@ import { useEffect, useState } from "react";
 import { API } from "@/service";
 import { useParams } from "react-router-dom";
 import {
-  Component,
   ComponentExportFunction,
+  ComponentList,
   Export,
   Field,
   Parameter,
@@ -75,69 +75,59 @@ function convertJsonToFunctionStructure(json: Parameter[] | Result[]) {
 
 export default function Exports() {
   const { componentId = "" } = useParams();
-  const [componentList, setComponentList] = useState([] as Component[]);
-  const [component, setComponent] = useState<Component>({});
+  const [component, setComponent] = useState<ComponentList>({});
   const [versionList, setVersionList] = useState([] as number[]);
   const [versionChange, setVersionChange] = useState(0 as number);
   const [functions, setFunctions] = useState([] as ComponentExportFunction[]);
 
   useEffect(() => {
     if (componentId) {
-      API.getComponents().then((response) => {
-        setComponentList(response);
-      });
-
       API.getComponentByIdAsKey().then((response) => {
-        setVersionList(response[componentId].versionId || []);
+        setVersionList(response[componentId].versionList || []);
+        setVersionChange(
+          response[componentId].versionList?.[
+            response[componentId].versionList?.length - 1
+          ] || 0
+        );
         setComponent(response[componentId]);
       });
     }
   }, [componentId]);
 
   useEffect(() => {
-    if (component && component.exports) {
-      const functions = component.exports.reduce(
-        (acc: ComponentExportFunction[], curr: Export) => {
-          const updatedFunctions = curr.functions.map(
-            (func: ComponentExportFunction) => ({
-              ...func,
-              exportName: curr.name,
-            })
-          );
+    const componentDetails = component.versions?.find(
+      (data) => data.versionedComponentId?.version === versionChange
+    );
+    if (componentDetails) {
+      const functions =
+        componentDetails.metadata?.exports.reduce(
+          (acc: ComponentExportFunction[], curr: Export) => {
+            const updatedFunctions = curr.functions.map(
+              (func: ComponentExportFunction) => ({
+                ...func,
+                exportName: curr.name,
+              })
+            );
 
-          return acc.concat(updatedFunctions);
-        },
-        []
-      );
+            return acc.concat(updatedFunctions);
+          },
+          []
+        ) || [];
       setFunctions(functions);
     }
-  }, [component]);
+  }, [component, versionChange]);
 
   const handleVersionChange = (version: number) => {
     setVersionChange(version);
-    const componentDetails = componentList.find((component: Component) => {
-      if (component.versionedComponentId) {
-        return (
-          component.versionedComponentId.componentId === componentId &&
-          component.versionedComponentId.version === version
-        );
-      }
-    });
-    if (componentDetails) {
-      setComponent({
-        ...componentDetails,
-        exports: componentDetails.metadata?.exports,
-      });
-    } else {
-      setComponent({});
-    }
   };
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
 
     const searchResult = calculateExportFunctions(
-      component.exports || []
+      component.versions?.find(
+        (data) => data.versionedComponentId?.version === versionChange
+      )?.metadata?.exports || []
     ).filter((fn: ComponentExportFunction) => {
       return fn.name.includes(value);
     });
@@ -147,7 +137,7 @@ export default function Exports() {
   return (
     <ErrorBoundary>
       <div className="flex">
-        <ComponentLeftNav componentDetails={component} />
+        <ComponentLeftNav componentType={component?.componentType} />
         <div className="flex-1 flex flex-col">
           <header className="w-full border-b bg-background py-4">
             <div className="mx-auto px-6 lg:px-8">
diff --git a/crates/app/src/pages/components/details/index.tsx b/crates/app/src/pages/components/details/index.tsx
index 40a3ec61b..53c843221 100644
--- a/crates/app/src/pages/components/details/index.tsx
+++ b/crates/app/src/pages/components/details/index.tsx
@@ -5,18 +5,18 @@ import { WorkerStatus } from "./widgets/workerStatus";
 import ComponentLeftNav from "./componentsLeftNav";
 import { useEffect, useState } from "react";
 import { API } from "@/service";
-import { Component } from "@/types/component.ts";
+import { ComponentList } from "@/types/component.ts";
 import { Worker, WorkerStatus as IWorkerStatus } from "@/types/worker.ts";
 import ErrorBoundary from "@/components/errorBoundary";
 
 export const ComponentDetails = () => {
   const { componentId = "" } = useParams();
-  const [component, setComponent] = useState({} as Component);
+  const [component, setComponent] = useState({} as ComponentList);
   const [workerStatus, setWorkerStatus] = useState({} as IWorkerStatus);
 
   useEffect(() => {
-    API.getComponentById(componentId!).then((res) => {
-      setComponent(res);
+    API.getComponentByIdAsKey().then((response) => {
+      setComponent(response[componentId]);
     });
 
     API.findWorker(componentId!).then((res) => {
@@ -31,7 +31,7 @@ export const ComponentDetails = () => {
   return (
     <ErrorBoundary>
       <div className="flex">
-        <ComponentLeftNav componentDetails={component} />
+        <ComponentLeftNav componentType={component.componentType} />
         <div className="flex-1 flex flex-col">
           <header className="w-full border-b bg-background py-4">
             <div className="mx-auto px-6 lg:px-8">
@@ -48,7 +48,10 @@ export const ComponentDetails = () => {
                 <MetricCard
                   title="Latest Component Version"
                   value={
-                    "v" + (component?.versionedComponentId?.version || "0")
+                    "v" +
+                    (component?.versionList?.[
+                      component?.versionList?.length - 1
+                    ] || "0")
                   }
                   type="version"
                 />
@@ -74,7 +77,12 @@ export const ComponentDetails = () => {
               </div>
 
               <div className="grid gap-4 md:grid-cols-2">
-                <ExportsList exports={component?.metadata?.exports || []} />
+                <ExportsList
+                  exports={
+                    component?.versions?.[component.versions?.length - 1]
+                      ?.metadata?.exports || []
+                  }
+                />
                 <WorkerStatus workerStatus={workerStatus} />
               </div>
             </div>
diff --git a/crates/app/src/pages/components/details/info.tsx b/crates/app/src/pages/components/details/info.tsx
index 7ed027753..f403038af 100644
--- a/crates/app/src/pages/components/details/info.tsx
+++ b/crates/app/src/pages/components/details/info.tsx
@@ -21,61 +21,35 @@ import ErrorBoundary from "@/components/errorBoundary";
 import { writeFile } from "@tauri-apps/plugin-fs";
 import { BaseDirectory } from "@tauri-apps/api/path";
 import { useEffect, useState } from "react";
-import { Component } from "@/types/component";
+import { ComponentList } from "@/types/component";
 import { API } from "@/service";
 import { formatRelativeTime } from "@/lib/utils";
 import { toast } from "@/hooks/use-toast";
 
 export default function ComponentInfo() {
-  const { componentId } = useParams();
-  const [componentList, setComponentList] = useState([] as Component[]);
-  const [component, setComponent] = useState<Component>({});
+  const { componentId = "" } = useParams();
+  const [componentList, setComponentList] = useState<{
+    [key: string]: ComponentList;
+  }>({});
   const [versionList, setVersionList] = useState([] as number[]);
-  const [versionChange, setVersionChange] = useState("0" as string);
+  const [versionChange, setVersionChange] = useState(0 as number);
 
   useEffect(() => {
     if (componentId) {
       API.getComponentByIdAsKey().then((response) => {
-        setVersionList(response[componentId].versionId || []);
-      });
-
-      API.getComponents().then((response) => {
+        const componentData = response[componentId];
+        const versionList = componentData?.versionList || [];
+        setVersionList(versionList);
         setComponentList(response);
-        const selectedComponentList = response.filter(
-          (component: Component) =>
-            component.versionedComponentId?.componentId === componentId
-        );
-        let mostRecentComponent = {} as Component;
-        selectedComponentList.forEach((component: Component) => {
-          if (component.createdAt) {
-            const currentDate = new Date(component.createdAt);
-            if (
-              !mostRecentComponent.createdAt ||
-              currentDate > new Date(mostRecentComponent.createdAt)
-            ) {
-              mostRecentComponent = component;
-            }
-          }
-        });
-        setComponent(mostRecentComponent);
-        setVersionChange(
-          mostRecentComponent?.versionedComponentId?.version?.toString() || ""
-        );
+        if (versionList.length > 0) {
+          setVersionChange(versionList[versionList.length - 1]);
+        }
       });
     }
   }, [componentId]);
 
-  const handleVersionChange = (version: string) => {
+  const handleVersionChange = (version: number) => {
     setVersionChange(version);
-    const componentDetails = componentList.find((component: Component) => {
-      if (component.versionedComponentId) {
-        return (
-          component.versionedComponentId.componentId === componentId &&
-          component.versionedComponentId.version?.toString() === version
-        );
-      }
-    });
-    setComponent(componentDetails || {});
   };
 
   async function downloadFile() {
@@ -101,16 +75,21 @@ export default function ComponentInfo() {
     }
   }
 
+  const componentDetails =
+    componentList[componentId]?.versions?.[versionChange] || {};
+
   return (
     <ErrorBoundary>
       <div className="flex">
-        <ComponentLeftNav componentDetails={component} />
+        <ComponentLeftNav
+          componentType={componentList[componentId]?.componentType}
+        />
         <div className="flex-1 flex flex-col">
           <header className="w-full border-b bg-background py-4">
             <div className="mx-auto px-6 lg:px-8">
               <div className="flex items-center gap-4">
                 <h1 className="text-xl font-semibold text-foreground truncate">
-                  {component.componentName}
+                  {componentList[componentId]?.componentName}
                 </h1>
               </div>
             </div>
@@ -129,8 +108,8 @@ export default function ComponentInfo() {
                 <div className="flex items-center gap-2">
                   {versionList.length > 0 && (
                     <Select
-                      defaultValue={versionChange}
-                      onValueChange={(version) => handleVersionChange(version)}
+                      defaultValue={versionChange.toString()}
+                      onValueChange={(version) => handleVersionChange(+version)}
                     >
                       <SelectTrigger className="w-[80px]">
                         <SelectValue> v{versionChange}</SelectValue>
@@ -156,7 +135,7 @@ export default function ComponentInfo() {
                       Component ID
                     </div>
                     <div className="font-mono text-sm">
-                      {component.versionedComponentId?.componentId}
+                      {componentDetails.versionedComponentId?.componentId}
                     </div>
                   </div>
                   <div className="grid grid-cols-[180px,1fr] items-center gap-4 py-3 border-b">
@@ -170,7 +149,7 @@ export default function ComponentInfo() {
                       Name
                     </div>
                     <div className="font-mono text-sm">
-                      {component.componentName}
+                      {componentDetails.componentName}
                     </div>
                   </div>
                   <div className="grid grid-cols-[180px,1fr] items-center gap-4 py-3 border-b">
@@ -178,7 +157,10 @@ export default function ComponentInfo() {
                       Size
                     </div>
                     <div className="font-mono text-sm">
-                      {Math.round((component?.componentSize || 0) / 1024)} KB
+                      {Math.round(
+                        (componentDetails?.componentSize || 0) / 1024
+                      )}{" "}
+                      KB
                     </div>
                   </div>
                   <div className="grid grid-cols-[180px,1fr] items-center gap-4 py-3">
@@ -186,8 +168,8 @@ export default function ComponentInfo() {
                       Created At
                     </div>
                     <div className="font-mono text-sm">
-                      {component.createdAt
-                        ? formatRelativeTime(component.createdAt)
+                      {componentDetails.createdAt
+                        ? formatRelativeTime(componentDetails.createdAt)
                         : "NA"}
                     </div>
                   </div>
diff --git a/crates/app/src/pages/components/details/invoke.tsx b/crates/app/src/pages/components/details/invoke.tsx
index 0fb1c2c9c..d2e3415dc 100644
--- a/crates/app/src/pages/components/details/invoke.tsx
+++ b/crates/app/src/pages/components/details/invoke.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from "react";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { API } from "@/service";
 import {
-  Component,
+  ComponentList,
   ComponentExportFunction,
   Export,
 } from "@/types/component.ts";
@@ -34,7 +34,7 @@ export default function ComponentInvoke() {
   const [resultValue, setResultValue] = useState<string>("");
   const [error, setError] = useState<string | null>(null);
   const [componentList, setComponentList] = useState<{
-    [key: string]: Component;
+    [key: string]: ComponentList;
   }>({});
 
   /** Fetch function details based on URL params. */
@@ -42,12 +42,13 @@ export default function ComponentInvoke() {
     try {
       const data = await API.getComponentByIdAsKey();
       setComponentList(data);
-      const matchingComponent = data?.[componentId];
+      const matchingComponent =
+        data?.[componentId].versions?.[data?.[componentId].versions.length - 1];
       if (!matchingComponent) {
         throw new Error("Component not found.");
       }
       if (name && urlFn) {
-        const exportItem = matchingComponent.exports?.find(
+        const exportItem = matchingComponent.metadata?.exports?.find(
           (e: Export) => e.name === name
         );
         if (!exportItem) {
@@ -67,10 +68,10 @@ export default function ComponentInvoke() {
       } else if (
         !name &&
         !urlFn &&
-        matchingComponent?.exports?.[0]?.functions?.[0]
+        matchingComponent?.metadata?.exports?.[0]?.functions?.[0]
       ) {
         navigate(
-          `/components/${componentId}/invoke?name=${matchingComponent.exports[0].name}&&fn=${matchingComponent.exports[0].functions[0].name}`
+          `/components/${componentId}/invoke?name=${matchingComponent.metadata.exports[0].name}&&fn=${matchingComponent.metadata.exports[0].functions[0].name}`
         );
       }
     } catch (error: unknown) {
@@ -133,15 +134,22 @@ export default function ComponentInvoke() {
     navigator.clipboard.writeText(value);
   };
 
+  const componentDetails =
+    componentList[componentId]?.versions?.[
+      componentList[componentId]?.versions.length - 1
+    ] || {};
+
   return (
     <ErrorBoundary>
       <div className="flex h-screen">
-        <ComponentLeftNav componentDetails={componentList[componentId]} />
+        <ComponentLeftNav
+          componentType={componentList[componentId]?.componentType}
+        />
         <div className="flex-1 flex flex-col bg-background">
           <div className="flex">
             <div className="border-r px-8 py-4 min-w-[300px]">
               <div className="grid grid-cols-1 gap-4 overflow-scroll h-[80vh]">
-                {componentList?.[componentId]?.exports?.map((exportItem) => (
+                {componentDetails?.metadata?.exports?.map((exportItem) => (
                   <div key={exportItem.name}>
                     <div className="flex items-center justify-between">
                       <span className="text-sm text-gray-600 font-bold pb-4">
diff --git a/crates/app/src/pages/components/details/settings.tsx b/crates/app/src/pages/components/details/settings.tsx
index 198e8a8d5..26442fe26 100644
--- a/crates/app/src/pages/components/details/settings.tsx
+++ b/crates/app/src/pages/components/details/settings.tsx
@@ -22,7 +22,7 @@ import { Separator } from "@/components/ui/separator.tsx";
 import { API } from "@/service";
 import { Worker } from "@/types/worker.ts";
 import ErrorBoundary from "@/components/errorBoundary";
-import { Component } from "@/types/component";
+import { ComponentList } from "@/types/component";
 
 export default function ComponentSettings() {
   const { toast } = useToast();
@@ -30,7 +30,7 @@ export default function ComponentSettings() {
   const [isDeleting, setIsDeleting] = React.useState(false);
   const { componentId } = useParams();
   const navigate = useNavigate();
-  const [component, setComponent] = React.useState({} as Component);
+  const [component, setComponent] = React.useState({} as ComponentList);
 
   React.useEffect(() => {
     if (componentId) {
@@ -64,7 +64,7 @@ export default function ComponentSettings() {
   return (
     <ErrorBoundary>
       <div className="flex">
-        <ComponentLeftNav componentDetails={component} />
+        <ComponentLeftNav componentType={component.componentType} />
         <div className="flex-1 flex flex-col">
           <header className="w-full border-b bg-background py-4">
             <div className="mx-auto px-6 lg:px-8">
diff --git a/crates/app/src/pages/components/details/update.tsx b/crates/app/src/pages/components/details/update.tsx
index d92ed73bc..3be171232 100644
--- a/crates/app/src/pages/components/details/update.tsx
+++ b/crates/app/src/pages/components/details/update.tsx
@@ -24,7 +24,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { API } from "@/service";
 import { toast } from "@/hooks/use-toast.ts";
 import ErrorBoundary from "@/components/errorBoundary.tsx";
-import { Component } from "@/types/component";
+import { ComponentList } from "@/types/component";
 
 const formSchema = z.object({
   component: z.instanceof(File).refine((file) => file.size < 50000000, {
@@ -43,7 +43,7 @@ export default function ComponentUpdate() {
     },
   });
 
-  const [component, setComponent] = useState({} as Component);
+  const [component, setComponent] = useState({} as ComponentList);
 
   useEffect(() => {
     if (componentId) {
@@ -69,7 +69,7 @@ export default function ComponentUpdate() {
   return (
     <ErrorBoundary>
       <div className="flex">
-        <ComponentLeftNav componentDetails={component} />
+        <ComponentLeftNav componentType={component.componentType} />
         <div className="flex-1 flex flex-col">
           <header className="w-full border-b bg-background py-4">
             <div className="mx-auto px-6 lg:px-8">
diff --git a/crates/app/src/pages/components/index.tsx b/crates/app/src/pages/components/index.tsx
index 4d471c3cc..2e278963b 100644
--- a/crates/app/src/pages/components/index.tsx
+++ b/crates/app/src/pages/components/index.tsx
@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button.tsx";
 import { calculateExportFunctions, formatRelativeTime } from "@/lib/utils";
 import { Input } from "@/components/ui/input";
 import { API } from "@/service";
-import { Component } from "@/types/component";
+import { ComponentList } from "@/types/component";
 import { Worker, WorkerStatus } from "@/types/worker";
 import ErrorBoundary from "@/components/errorBoundary";
 
@@ -17,10 +17,10 @@ const Metrix = ["Idle", "Running", "Suspended", "Failed"];
 const Components = () => {
   const navigate = useNavigate();
   const [componentList, setComponentList] = useState<{
-    [key: string]: Component;
+    [key: string]: ComponentList;
   }>({});
   const [componentApiList, setComponentApiList] = useState<{
-    [key: string]: Component;
+    [key: string]: ComponentList;
   }>({});
   const [workerList, setWorkerList] = useState(
     {} as {
@@ -65,7 +65,7 @@ const Components = () => {
     const filteredList = Object.fromEntries(
       Object.entries(componentApiList).filter(
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        ([_, data]: [string, Component]) =>
+        ([_, data]: [string, ComponentList]) =>
           data.componentName?.toLowerCase().includes(value) ?? false
       )
     );
@@ -108,7 +108,7 @@ const Components = () => {
           </div>
         ) : (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 overflow-scroll max-h-[78vh]">
-            {Object.values(componentList).map((data: Component) => (
+            {Object.values(componentList).map((data: ComponentList) => (
               <Card
                 key={data.componentId}
                 className="border shadow-sm cursor-pointer"
@@ -143,20 +143,30 @@ const Components = () => {
                   </div>
                   <div className="flex flex-wrap items-center gap-2">
                     <Badge variant="secondary" className="rounded-md">
-                      V{data.versionId?.[0] || ""}
+                      V{data.versionList?.[data.versionList?.length - 1] || "0"}
                     </Badge>
                     <Badge variant="secondary" className="rounded-md">
-                      {calculateExportFunctions(data.exports || []).length || 0}{" "}
+                      {calculateExportFunctions(
+                        data.versions?.[data.versions?.length - 1]?.metadata
+                          ?.exports || []
+                      ).length || 0}{" "}
                       Exports
                     </Badge>
                     <Badge variant="secondary" className="rounded-md">
-                      {Math.round((data.componentSize || 0) / 1024)} KB
+                      {Math.round(
+                        (data.versions?.[data.versions?.length - 1]
+                          ?.componentSize || 0) / 1024
+                      )}{" "}
+                      KB
                     </Badge>
                     <Badge variant="secondary" className="rounded-md">
-                      {data.componentType}
+                      {data.versions?.[data.versions?.length - 1].componentType}
                     </Badge>
                     <span className="ml-auto text-sm text-muted-foreground">
-                      {formatRelativeTime(data.createdAt || new Date())}
+                      {formatRelativeTime(
+                        data.versions?.[data.versions?.length - 1].createdAt ||
+                          new Date()
+                      )}
                     </span>
                   </div>
                 </CardContent>
diff --git a/crates/app/src/pages/dashboard/componentSection.tsx b/crates/app/src/pages/dashboard/componentSection.tsx
index 2057340b7..ff67ebaa2 100644
--- a/crates/app/src/pages/dashboard/componentSection.tsx
+++ b/crates/app/src/pages/dashboard/componentSection.tsx
@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button.tsx";
 import { useEffect, useState } from "react";
 import { calculateExportFunctions, formatRelativeTime } from "@/lib/utils";
 import { API } from "@/service";
-import { Component } from "@/types/component.ts";
+import { ComponentList } from "@/types/component.ts";
 import {
   Card,
   CardContent,
@@ -17,9 +17,9 @@ import ErrorBoundary from "@/components/errorBoundary";
 
 export const ComponentsSection = () => {
   const navigate = useNavigate();
-  const [components, setComponents] = useState<{ [key: string]: Component }>(
-    {}
-  );
+  const [components, setComponents] = useState<{
+    [key: string]: ComponentList;
+  }>({});
   useEffect(() => {
     API.getComponentByIdAsKey().then((response) => setComponents(response));
   }, []);
@@ -40,7 +40,7 @@ export const ComponentsSection = () => {
             {Object.keys(components).length > 0 ? (
               <div className="p-4 pt-0 md:p-6 md:pt-0 flex-1 w-full">
                 <div className="grid w-full grid-cols-1 gap-4 md:gap-6 md:grid-cols-2">
-                  {Object.values(components).map((data: Component) => (
+                  {Object.values(components).map((data: ComponentList) => (
                     <Card
                       className={
                         "rounded-lg cursor-pointer text-card-foreground shadow transition-all hover:shadow-lg hover:shadow-border/75 duration-150"
@@ -56,15 +56,18 @@ export const ComponentsSection = () => {
                             {data.componentName}
                           </CardTitle>
                           <Badge variant="outline">
-                            v{data.versionId?.[0]}
+                            V
+                            {data.versionList?.[data.versionList?.length - 1] ||
+                              "0"}
                           </Badge>
                         </div>
                         <CardDescription
                           className={"text-xs font-light text-muted-foreground"}
                         >
-                          {data.createdAt
-                            ? formatRelativeTime(data.createdAt)
-                            : "NA"}
+                          {formatRelativeTime(
+                            data.versions?.[data.versions?.length - 1]
+                              .createdAt || new Date()
+                          )}
                         </CardDescription>
                       </CardHeader>
                       <CardContent>
@@ -73,17 +76,21 @@ export const ComponentsSection = () => {
                             variant="outline"
                             className="font-mono font-extralight transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-accent hover:text-accent-foreground active:bg-accent/50 active:text-accent-foreground text-muted-foreground"
                           >
-                            {
-                              calculateExportFunctions(data.exports || [])
-                                .length
-                            }{" "}
+                            {calculateExportFunctions(
+                              data.versions?.[data.versions?.length - 1]
+                                ?.metadata?.exports || []
+                            ).length || 0}{" "}
                             Exports
                           </Badge>
                           <Badge
                             variant="outline"
                             className="font-mono font-extralight transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-accent hover:text-accent-foreground active:bg-accent/50 active:text-accent-foreground text-muted-foreground"
                           >
-                            {Math.round((data?.componentSize || 0) / 1024)} KB
+                            {Math.round(
+                              (data.versions?.[data.versions?.length - 1]
+                                ?.componentSize || 0) / 1024
+                            )}{" "}
+                            KB{" "}
                           </Badge>
                           <Badge
                             variant="outline"
diff --git a/crates/app/src/pages/plugin/create.tsx b/crates/app/src/pages/plugin/create.tsx
index 8c4d8524a..592321156 100644
--- a/crates/app/src/pages/plugin/create.tsx
+++ b/crates/app/src/pages/plugin/create.tsx
@@ -21,7 +21,7 @@ import {
 } from "@/components/ui/form";
 import { Textarea } from "@/components/ui/textarea";
 import { useEffect, useState } from "react";
-import { Component } from "@/types/component";
+import { ComponentList } from "@/types/component";
 import { API } from "@/service";
 import {
   Select,
@@ -83,7 +83,7 @@ const formSchema = z.object({
 export default function CreatePlugin() {
   const navigate = useNavigate();
   const [componentApiList, setComponentApiList] = useState<{
-    [key: string]: Component;
+    [key: string]: ComponentList;
   }>({});
   const [activeSpecTab, setActiveSpecTab] = useState("OplogProcessor");
   const form = useForm<z.infer<typeof formSchema>>({
@@ -374,7 +374,7 @@ export default function CreatePlugin() {
                                 <SelectContent>
                                   {componentApiList[
                                     form.watch("specs.componentId")
-                                  ]?.versionId?.map((v: number) => (
+                                  ]?.versionList?.map((v: number) => (
                                     <SelectItem key={v} value={v.toString()}>
                                       V{v}
                                     </SelectItem>
diff --git a/crates/app/src/pages/workers/create/index.tsx b/crates/app/src/pages/workers/create/index.tsx
index e2255432e..dd8f52404 100644
--- a/crates/app/src/pages/workers/create/index.tsx
+++ b/crates/app/src/pages/workers/create/index.tsx
@@ -28,7 +28,7 @@ import { v4 as uuidv4 } from "uuid";
 import ErrorBoundary from "@/components/errorBoundary";
 import { ArrowLeft } from "lucide-react";
 import { useNavigate, useParams } from "react-router-dom";
-import { Component } from "@/types/component";
+import { ComponentList } from "@/types/component";
 
 const formSchema = z.object({
   componentID: z.string(),
@@ -57,7 +57,7 @@ export default function CreateWorker() {
     },
   });
 
-  const [component, setComponent] = useState({} as Component);
+  const [component, setComponent] = useState({} as ComponentList);
 
   useEffect(() => {
     if (componentId) {
@@ -112,7 +112,7 @@ export default function CreateWorker() {
   return (
     <ErrorBoundary>
       <div className="flex">
-        <ComponentLeftNav componentDetails={component} />
+        <ComponentLeftNav componentType={component.componentType} />
         <div className="flex-1 flex flex-col">
           <header className="w-full border-b bg-background py-4">
             <div className="mx-auto px-6 lg:px-8">
diff --git a/crates/app/src/pages/workers/details/invoke.tsx b/crates/app/src/pages/workers/details/invoke.tsx
index 6207c69b5..da1a67909 100644
--- a/crates/app/src/pages/workers/details/invoke.tsx
+++ b/crates/app/src/pages/workers/details/invoke.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from "react";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { API } from "@/service";
 import {
-  Component,
+  ComponentList,
   ComponentExportFunction,
   Export,
 } from "@/types/component.ts";
@@ -34,7 +34,7 @@ export default function WorkerInvoke() {
   const [resultValue, setResultValue] = useState<string>("");
   const [error, setError] = useState<string | null>(null);
   const [componentList, setComponentList] = useState<{
-    [key: string]: Component;
+    [key: string]: ComponentList;
   }>({});
 
   /** Fetch function details based on URL params. */
@@ -42,12 +42,13 @@ export default function WorkerInvoke() {
     try {
       const data = await API.getComponentByIdAsKey();
       setComponentList(data);
-      const matchingComponent = data?.[componentId];
+      const matchingComponent =
+        data?.[componentId].versions?.[data?.[componentId].versions.length - 1];
       if (!matchingComponent) {
         throw new Error("Component not found.");
       }
       if (name && urlFn) {
-        const exportItem = matchingComponent.exports?.find(
+        const exportItem = matchingComponent.metadata?.exports?.find(
           (e: Export) => e.name === name
         );
         if (!exportItem) {
@@ -67,10 +68,10 @@ export default function WorkerInvoke() {
       } else if (
         !name &&
         !urlFn &&
-        matchingComponent?.exports?.[0]?.functions?.[0]
+        matchingComponent?.metadata?.exports?.[0]?.functions?.[0]
       ) {
         navigate(
-          `/components/${componentId}/workers/${workerName}/invoke?name=${matchingComponent.exports[0].name}&&fn=${matchingComponent.exports[0].functions[0].name}`
+          `/components/${componentId}/workers/${workerName}/invoke?name=${matchingComponent.metadata.exports[0].name}&&fn=${matchingComponent.metadata.exports[0].functions[0].name}`
         );
       }
     } catch (error: unknown) {
@@ -134,6 +135,11 @@ export default function WorkerInvoke() {
     navigator.clipboard.writeText(value);
   };
 
+  const componentDetails =
+    componentList[componentId]?.versions?.[
+      componentList[componentId]?.versions.length - 1
+    ] || {};
+
   return (
     <ErrorBoundary>
       <div className="flex h-screen">
@@ -147,7 +153,7 @@ export default function WorkerInvoke() {
           <div className="flex">
             <div className="border-r px-8 py-4 min-w-[300px]">
               <div className="grid grid-cols-1 gap-4 overflow-scroll h-[80vh]">
-                {componentList?.[componentId]?.exports?.map((exportItem) => (
+                {componentDetails?.metadata?.exports?.map((exportItem) => (
                   <div key={exportItem.name}>
                     <div className="flex items-center justify-between">
                       <span className="text-sm text-gray-600 font-bold pb-4">
diff --git a/crates/app/src/pages/workers/index.tsx b/crates/app/src/pages/workers/index.tsx
index 731940930..0d6cec4a8 100644
--- a/crates/app/src/pages/workers/index.tsx
+++ b/crates/app/src/pages/workers/index.tsx
@@ -14,13 +14,13 @@ import ErrorBoundary from "@/components/errorBoundary";
 import ComponentLeftNav from "../components/details/componentsLeftNav";
 import { Worker } from "@/types/worker.ts";
 import { API } from "@/service";
-import { Component } from "@/types/component";
+import { ComponentList } from "@/types/component";
 
 export default function WorkerList() {
   const [workerList, setWorkerList] = useState([] as Worker[]);
   const [filteredWorkers, setFilteredWorkers] = useState([] as Worker[]);
   const [searchQuery, setSearchQuery] = useState("");
-  const [component, setComponent] = useState({} as Component);
+  const [component, setComponent] = useState({} as ComponentList);
 
   const navigate = useNavigate();
   const { componentId } = useParams();
@@ -57,7 +57,7 @@ export default function WorkerList() {
   return (
     <ErrorBoundary>
       <div className="flex">
-        <ComponentLeftNav componentDetails={component} />
+        <ComponentLeftNav componentType={component.componentType} />
         <div className="flex-1 flex flex-col">
           <header className="w-full border-b bg-background py-4">
             <div className="mx-auto px-6 lg:px-8">
diff --git a/crates/app/src/service/client.ts b/crates/app/src/service/client.ts
index 34e4183ce..5bc7266a7 100644
--- a/crates/app/src/service/client.ts
+++ b/crates/app/src/service/client.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component } from "@/types/component.ts";
+import { Component, ComponentList } from "@/types/component.ts";
 import { ENDPOINT } from "@/service/endpoints.ts";
 import { Api } from "@/types/api.ts";
 import { fetch } from "@tauri-apps/plugin-http";
@@ -63,11 +63,6 @@ export class Service {
     return r;
   };
 
-  public getComponentById = async (componentId: string) => {
-    const r = await this.callApi(ENDPOINT.getComponentById(componentId));
-    return r as Component;
-  };
-
   public createWorker = async (componentID: string, params: any) => {
     const r = await this.callApi(
       ENDPOINT.createWorker(componentID),
@@ -197,27 +192,46 @@ export class Service {
   };
 
   public getComponentByIdAsKey = async (): Promise<
-    Record<string, Component>
+    Record<string, ComponentList>
   > => {
-    const result: Record<string, Component> = {};
+    // Assume getComponents returns a Promise<RawComponent[]>
     const components = await this.getComponents();
-    components.forEach((data: Component) => {
-      if (data?.versionedComponentId?.componentId) {
-        result[data.versionedComponentId.componentId] = {
-          componentName: data.componentName,
-          componentId: data.versionedComponentId.componentId,
-          createdAt: data.createdAt,
-          exports: data?.metadata?.exports,
-          componentSize: data.componentSize,
-          componentType: data.componentType,
-          versionId: [
-            ...(result[data.versionedComponentId.componentId]?.versionId ?? []),
-            data.versionedComponentId.version!,
-          ],
-        };
-      }
-    });
-    return result;
+
+    const componentList = components.reduce<Record<string, ComponentList>>(
+      (acc, component) => {
+        const {
+          componentName,
+          versionedComponentId = {},
+          componentType,
+        } = component;
+
+        // Use type assertion to help TS with the optional fields in versionedComponentId
+        const { componentId = "", version = 0 } = versionedComponentId;
+
+        // Use componentId as the key. If not available, you might want to skip or handle differently.
+        const key = componentId || "";
+
+        // Initialize the component entry if it doesn't exist
+        if (!acc[key]) {
+          acc[key] = {
+            componentName: componentName || "",
+            componentId: componentId || "",
+            componentType: componentType || "",
+            versions: [],
+            versionList: [],
+          };
+        }
+        if (acc[key].versionList) {
+          acc[key].versionList.push(version);
+        }
+        if (acc[key].versions) {
+          acc[key].versions.push(component);
+        }
+        return acc;
+      },
+      {}
+    );
+    return componentList;
   };
 
   public getPlugins = async (): Promise<Plugin[]> => {
@@ -230,7 +244,7 @@ export class Service {
 
   public downloadComponent = async (
     componentId: string,
-    version: string
+    version: number
   ): Promise<any> => {
     return await this.downloadApi(
       ENDPOINT.downloadComponent(componentId, version)
diff --git a/crates/app/src/service/endpoints.ts b/crates/app/src/service/endpoints.ts
index a63c21849..c4eea3041 100644
--- a/crates/app/src/service/endpoints.ts
+++ b/crates/app/src/service/endpoints.ts
@@ -14,9 +14,6 @@ export const ENDPOINT = {
   updateComponent: (id: string) => {
     return `/v1/components/${id}`;
   },
-  getComponentById: (id: string) => {
-    return `/v1/components/${id}/latest`;
-  },
   getApiList: () => {
     return "/v1/api/definitions";
   },
@@ -66,7 +63,7 @@ export const ENDPOINT = {
   getPluginName: (name: string) => {
     return `/v1/plugins/${name}`;
   },
-  downloadComponent: (componentId: string, version: string) => {
+  downloadComponent: (componentId: string, version: number) => {
     return `/v1/components/${componentId}/download?version=${version}`;
   },
   deletePlugin: (name: string, version: string) => {
diff --git a/crates/app/src/types/component.ts b/crates/app/src/types/component.ts
index 40b59081d..fc4405b30 100644
--- a/crates/app/src/types/component.ts
+++ b/crates/app/src/types/component.ts
@@ -81,12 +81,19 @@ export interface Component {
   installedPlugins?: unknown[];
   metadata?: Metadata;
   projectId?: string;
-  versionId?: number[];
   componentId?: string;
   exports?: Export[];
   versionedComponentId?: VersionedComponentId;
 }
 
+export interface ComponentList {
+  componentName?: string;
+  componentType?: string;
+  versions?: Component[];
+  versionList?: number[];
+  componentId?: string;
+}
+
 export interface ComponentExportFunction {
   name: string;
   parameters: Parameter[];