diff --git a/web/components/interface/navigation/nav-side-menu.tsx b/web/components/interface/navigation/nav-side-menu.tsx
index 8872183..213c139 100644
--- a/web/components/interface/navigation/nav-side-menu.tsx
+++ b/web/components/interface/navigation/nav-side-menu.tsx
@@ -113,6 +113,11 @@ function PanelContent({
     useState(false);
 
   const tabItems: TabItem[] = [
+    {
+      name: "Projects",
+      description: "List of projects",
+      icon: "folder",
+    },
     {
       name: "Apps",
       description: "List of apps",
@@ -145,27 +150,6 @@ function PanelContent({
       </div>
     );
   }
-  // Pick project if no project is opened
-  else if (!editorContext?.editorStates.project) {
-    return (
-      <div className="bg-content2 h-full w-full space-y-2 overflow-y-auto px-4">
-        <p className="text-center text-lg font-medium">View Projects</p>
-        <Button
-          className="w-full"
-          onPress={() => {
-            setIsProjectSettingsModalOpen(true);
-          }}
-        >
-          New Project
-        </Button>
-        <ProjectExplorer />
-        <ProjectSettingsModal
-          isOpen={isProjectSettingsModalOpen}
-          setIsOpen={setIsProjectSettingsModalOpen}
-        />
-      </div>
-    );
-  }
 
   return (
     <div className="relative h-full w-full grid grid-rows-[max-content_auto] overflow-y-hidden">
@@ -187,10 +171,27 @@ function PanelContent({
       <div className="h-full w-full overflow-y-hidden">
         {tabItems[selectedTabIndex]?.name === "Apps" ? (
           <AppExplorer />
-        ) : (
+        ) : tabItems[selectedTabIndex]?.name === "Workspace" ? (
           <FileSystemExplorer setIsMenuOpen={setIsMenuOpen} />
+        ) : (
+          <div className="bg-content2 h-full w-full space-y-2 overflow-y-auto px-4">
+            <p className="text-center text-lg font-medium">View Projects</p>
+            <Button
+              className="w-full"
+              onPress={() => {
+                setIsProjectSettingsModalOpen(true);
+              }}
+            >
+              New Project
+            </Button>
+            <ProjectExplorer />
+          </div>
         )}
       </div>
+      <ProjectSettingsModal
+        isOpen={isProjectSettingsModalOpen}
+        setIsOpen={setIsProjectSettingsModalOpen}
+      />
     </div>
   );
 }
diff --git a/web/components/views/canvas/canvas-node-control.tsx b/web/components/views/canvas/canvas-node-control.tsx
deleted file mode 100644
index 4c72217..0000000
--- a/web/components/views/canvas/canvas-node-control.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import Icon from "@/components/misc/icon";
-import { isMobile } from "@/lib/platform-api/platform-checker";
-import { Button } from "@heroui/react";
-import { NodeResizeControl } from "@xyflow/react";
-
-export default function CanvasNodeControl({
-  controlActions,
-  setIsResizing,
-  isShowingWorkflowConnector,
-  setIsShowingWorkflowConnector,
-}: {
-  controlActions: Record<string, (() => void) | undefined>;
-  setIsResizing: (resizing: boolean) => void;
-  isShowingWorkflowConnector: boolean;
-  setIsShowingWorkflowConnector: (showing: boolean) => void;
-}) {
-  return (
-    <>
-      <Button
-        isIconOnly
-        variant="light"
-        size="sm"
-        onPress={() => {
-          const action = controlActions["fullscreen"];
-          if (action) action();
-        }}
-      >
-        <Icon name="fullscreen" />
-      </Button>
-
-      <Button
-        isIconOnly
-        variant="light"
-        size="sm"
-        onPress={() => {
-          setIsShowingWorkflowConnector(!isShowingWorkflowConnector);
-        }}
-        className="data-[active=true]:bg-default data-[active=true]:text-default-foreground"
-        data-active={isShowingWorkflowConnector ? "true" : "false"}
-      >
-        <Icon name="swap_calls" />
-      </Button>
-
-      <div className="p-3">
-        <div className="relative">
-          {/* Popover is interfering with the drag area... */}
-          <NodeResizeControl
-            style={{
-              background: "transparent",
-              border: "none",
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-            }}
-            minWidth={40}
-            minHeight={40}
-            // Disable resizing events on mobile
-            // because apparently it breaks the touch resizing
-            onResizeStart={isMobile() ? undefined : () => setIsResizing(true)}
-            onResizeEnd={isMobile() ? undefined : () => setIsResizing(false)}
-            autoScale={false}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="20"
-              height="20"
-              viewBox="0 0 24 24"
-              strokeWidth="2"
-              className="stroke-default-foreground"
-              fill="none"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              style={{
-                position: "absolute",
-                right: "50%",
-                bottom: "50%",
-                transform: "translate(50%, 50%)",
-              }}
-            >
-              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-              <polyline points="16 20 20 20 20 16" />
-              <line x1="14" y1="14" x2="20" y2="20" />
-              <polyline points="8 4 4 4 4 8" />
-              <line x1="4" y1="4" x2="10" y2="10" />
-            </svg>
-          </NodeResizeControl>
-        </div>
-      </div>
-
-      <Button
-        isIconOnly
-        variant="light"
-        size="sm"
-        onPress={() => {
-          const action = controlActions["delete"];
-          if (action) action();
-        }}
-      >
-        <Icon name="delete" className="text-danger!" />
-      </Button>
-    </>
-  );
-}
diff --git a/web/components/views/canvas/canvas-node-view-layout.tsx b/web/components/views/canvas/canvas-node-view-layout.tsx
deleted file mode 100644
index 8f08c1d..0000000
--- a/web/components/views/canvas/canvas-node-view-layout.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { isMobile } from "@/lib/platform-api/platform-checker";
-import { Popover, PopoverContent, PopoverTrigger } from "@heroui/react";
-import { NodeResizer } from "@xyflow/react";
-import { useState } from "react";
-import CanvasNodeControl from "./canvas-node-control";
-
-export default function CanvasNodeViewLayout({
-  height = "100%",
-  width = "100%",
-  children,
-  controlActions = {},
-}: {
-  height?: string;
-  width?: string;
-  children: React.ReactNode;
-  controlActions?: Record<string, (() => void) | undefined>;
-}) {
-  const [isShowingMenu, setIsShowingMenu] = useState(false);
-  const [isResizing, setIsResizing] = useState(false);
-  const [isShowingWorkflowConnector, setIsShowingWorkflowConnector] =
-    useState(false);
-
-  return (
-    <div
-      className="relative"
-      style={{
-        height,
-        width,
-      }}
-    >
-      <div className="absolute -top-1.5 z-20 flex w-full justify-center">
-        <div
-          className="flex pt-1 h-3 w-8 cursor-grab flex-col items-center justify-start active:h-16 active:w-16 active:cursor-grabbing"
-          onClick={(e) => {
-            e.preventDefault();
-            setIsShowingMenu((prev) => !prev);
-          }}
-        >
-          <div className="bg-default-500 h-1 w-8 rounded-full"></div>
-
-          <Popover isOpen={isShowingMenu} onOpenChange={setIsShowingMenu}>
-            <PopoverTrigger>
-              <div></div>
-            </PopoverTrigger>
-            <PopoverContent>
-              <div className="bg-content1 flex items-center gap-x-1 rounded-md">
-                <CanvasNodeControl
-                  setIsResizing={setIsResizing}
-                  controlActions={controlActions}
-                  isShowingWorkflowConnector={isShowingWorkflowConnector}
-                  setIsShowingWorkflowConnector={setIsShowingWorkflowConnector}
-                />
-              </div>
-            </PopoverContent>
-          </Popover>
-        </div>
-      </div>
-
-      {isShowingWorkflowConnector && (
-        <>
-          {/* Input Area */}
-          <div className="absolute top-0 -left-4 h-10 w-4 bg-red-400"></div>
-
-          {/* Output Area */}
-          <div className="absolute top-0 -right-4 h-10 w-4 bg-blue-400"></div>
-        </>
-      )}
-
-      <NodeResizer
-        minWidth={40}
-        minHeight={40}
-        onResizeStart={isMobile() ? undefined : () => setIsResizing(true)}
-        onResizeEnd={isMobile() ? undefined : () => setIsResizing(false)}
-        lineStyle={{
-          borderColor: "transparent",
-          borderWidth: 6,
-        }}
-        handleStyle={{
-          background: "transparent",
-          borderColor: "transparent",
-          width: 12,
-          height: 12,
-          zIndex: 40,
-        }}
-      />
-
-      <div className="bg-content1 relative h-full w-full overflow-hidden rounded-lg shadow-md">
-        {
-          // Add a temporary div overlay to prevent interaction while resizing
-          isResizing && (
-            <div className="absolute top-0 left-0 z-20 h-full w-full" />
-          )
-        }
-        {children}
-      </div>
-    </div>
-  );
-}
diff --git a/web/components/views/canvas/canvas-view.tsx b/web/components/views/canvas/canvas-view.tsx
index 046e326..92720a0 100644
--- a/web/components/views/canvas/canvas-view.tsx
+++ b/web/components/views/canvas/canvas-view.tsx
@@ -6,35 +6,23 @@ import {
   addEdge,
   applyEdgeChanges,
   applyNodeChanges,
+  Background,
+  BackgroundVariant,
+  Connection,
   EdgeChange,
   NodeChange,
   ReactFlow,
   Edge as ReactFlowEdge,
   Node as ReactFlowNode,
+  reconnectEdge,
   useReactFlow,
   useViewport,
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import { useCallback, useEffect, useRef, useState } from "react";
 import Icon from "../../misc/icon";
-import AppNode from "./nodes/app-node";
-
-// const initialNodes = [
-//   {
-//     id: "n1",
-//     position: { x: 200, y: 0 },
-//     data: {
-//       label: "Node 1",
-//       config: {
-//         viewId: v4(),
-//         app: "https://cdn.pulse-editor.com/extension/spin_wheel/0.0.1/",
-//       },
-//     },
-//     type: "appNode",
-//   },
-//   { id: "n2", position: { x: 0, y: 100 }, data: { label: "Node 2" } },
-// ];
-// const initialEdges = [{ id: "n1-n2", source: "n1", target: "n2" }];
+import AppNode from "./nodes/app-node/app-node";
+import "./theme.css";
 
 const appInfo: AppInfoModalContent = {
   name: "Pulse Editor",
@@ -71,8 +59,10 @@ export default function CanvasView({ config }: { config?: CanvasViewConfig }) {
     setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot));
   }, []);
   const onEdgesChange = useCallback(
-    (changes: EdgeChange<{ id: string; source: string; target: string }>[]) =>
-      setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot)),
+    (changes: EdgeChange<{ id: string; source: string; target: string }>[]) => {
+      console.log("Edge changes:", changes);
+      setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot));
+    },
     [],
   );
   const onConnect = useCallback(
@@ -80,7 +70,13 @@ export default function CanvasView({ config }: { config?: CanvasViewConfig }) {
       setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)),
     [],
   );
+  const onReconnect = useCallback(
+    (oldEdge: ReactFlowEdge, newConnection: Connection) =>
+      setEdges((els) => reconnectEdge(oldEdge, newConnection, els)),
+    [],
+  );
 
+  /* Node creator functions */
   const createAppNode = useCallback((props: any) => {
     return <AppNode {...props} />;
   }, []);
@@ -221,7 +217,7 @@ export default function CanvasView({ config }: { config?: CanvasViewConfig }) {
   return (
     <div
       ref={containerRef}
-      className="bg-default text-default-foreground relative h-full w-full"
+      className="bg-content3 text-content3-foreground relative h-full w-full"
       id={`canvas-${config?.viewId}`}
     >
       <ReactFlow
@@ -237,7 +233,18 @@ export default function CanvasView({ config }: { config?: CanvasViewConfig }) {
         nodeTypes={{
           appNode: createAppNode,
         }}
-      />
+        deleteKeyCode={["Delete", "Backspace"]}
+        onReconnect={onReconnect}
+        defaultEdgeOptions={{
+          markerEnd: {
+            type: "arrowclosed",
+            width: 20,
+            height: 20,
+          },
+        }}
+      >
+        <Background variant={BackgroundVariant.Dots} />
+      </ReactFlow>
       <Button
         isIconOnly
         className="absolute right-2 bottom-2"
diff --git a/web/components/views/canvas/nodes/app-node.tsx b/web/components/views/canvas/nodes/app-node/app-node.tsx
similarity index 89%
rename from web/components/views/canvas/nodes/app-node.tsx
rename to web/components/views/canvas/nodes/app-node/app-node.tsx
index 30aceb0..5123091 100644
--- a/web/components/views/canvas/nodes/app-node.tsx
+++ b/web/components/views/canvas/nodes/app-node/app-node.tsx
@@ -4,8 +4,8 @@ import { ViewModeEnum } from "@pulse-editor/shared-utils";
 import { Node } from "@xyflow/react";
 import { memo } from "react";
 import { v4 } from "uuid";
-import BaseAppView from "../../base/base-app-view";
-import CanvasNodeViewLayout from "../canvas-node-view-layout";
+import BaseAppView from "../../../base/base-app-view";
+import CanvasNodeViewLayout from "./layout";
 
 const AppNode = memo((props: any) => {
   const nodeProps = props as Node<{ config: AppViewConfig }>;
@@ -24,6 +24,7 @@ const AppNode = memo((props: any) => {
 
   return (
     <CanvasNodeViewLayout
+      viewId={viewId}
       controlActions={{
         fullscreen: () => {
           openViewInFullScreen();
diff --git a/web/components/views/canvas/nodes/app-node/layout.tsx b/web/components/views/canvas/nodes/app-node/layout.tsx
new file mode 100644
index 0000000..819509c
--- /dev/null
+++ b/web/components/views/canvas/nodes/app-node/layout.tsx
@@ -0,0 +1,272 @@
+import Icon from "@/components/misc/icon";
+import { Button, Popover, PopoverContent, PopoverTrigger } from "@heroui/react";
+import {
+  NodeResizeControl,
+  NodeResizer,
+  Position,
+  useInternalNode,
+  useUpdateNodeInternals,
+} from "@xyflow/react";
+import { useEffect, useState } from "react";
+import NodeHandle from "./node-handle";
+
+export default function CanvasNodeViewLayout({
+  viewId,
+  height = "100%",
+  width = "100%",
+  children,
+  controlActions = {},
+}: {
+  viewId: string;
+  height?: string;
+  width?: string;
+  children: React.ReactNode;
+  controlActions?: Record<string, (() => void) | undefined>;
+}) {
+  const updateNodeInternals = useUpdateNodeInternals();
+  const node = useInternalNode(viewId);
+
+  const [isShowingMenu, setIsShowingMenu] = useState(false);
+  const [isShowingWorkflowConnector, setIsShowingWorkflowConnector] =
+    useState(false);
+  const [isRunning, setIsRunning] = useState(false);
+
+  useEffect(() => {
+    // Update node internals to ensure handles are positioned correctly
+    updateNodeInternals(viewId);
+  }, [updateNodeInternals, isShowingWorkflowConnector]);
+
+  useEffect(() => {
+    console.log("Node updated:", node);
+  }, [node]);
+
+  return (
+    <div
+      className="relative"
+      style={{
+        height,
+        width,
+      }}
+    >
+      {/* Control */}
+      <div className="absolute -top-1.5 z-40 flex w-full justify-center">
+        <div
+          className="flex pt-1 h-3 w-8 cursor-grab flex-col items-center justify-start active:h-16 active:w-16 active:cursor-grabbing"
+          onClick={(e) => {
+            e.preventDefault();
+            setIsShowingMenu((prev) => !prev);
+          }}
+        >
+          <div className="bg-default-500 h-1 w-8 rounded-full"></div>
+
+          <Popover isOpen={isShowingMenu} onOpenChange={setIsShowingMenu}>
+            <PopoverTrigger>
+              <div></div>
+            </PopoverTrigger>
+            <PopoverContent>
+              <div className="bg-content1 flex items-center gap-x-1 rounded-md">
+                <CanvasNodeControl
+                  controlActions={controlActions}
+                  isShowingWorkflowConnector={isShowingWorkflowConnector}
+                  setIsShowingWorkflowConnector={setIsShowingWorkflowConnector}
+                />
+              </div>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </div>
+
+      {/* Input Handles */}
+      <>
+        <div className="absolute top-0 -translate-x-[100%] h-full pointer-events-none">
+          {isShowingWorkflowConnector ? (
+            <div className="h-full w-full flex flex-col gap-y-1 relative justify-center">
+              <NodeHandle
+                id="input-1"
+                displayName="input 1"
+                position={Position.Left}
+                type="target"
+              />
+              <NodeHandle
+                id="input-2"
+                displayName="input 2"
+                position={Position.Left}
+                type="target"
+              />
+            </div>
+          ) : (
+            <div className="h-full w-full flex flex-col gap-y-1 relative justify-center">
+              <NodeHandle
+                id="input-compact"
+                displayName="Compact Input"
+                position={Position.Left}
+                type="target"
+              />
+            </div>
+          )}
+        </div>
+
+        {/* Output Handles */}
+        <div className="absolute top-0 right-0 translate-x-[100%] h-full pointer-events-none">
+          {isShowingWorkflowConnector ? (
+            <div className="h-full w-full flex flex-col gap-y-1 relative justify-center">
+              <NodeHandle
+                id="output-1"
+                displayName="output 1"
+                position={Position.Right}
+                type="source"
+              />
+              <NodeHandle
+                id="output-2"
+                displayName="output 2"
+                position={Position.Right}
+                type="source"
+              />
+            </div>
+          ) : (
+            <div className="h-full w-full flex flex-col gap-y-1 relative justify-center">
+              <NodeHandle
+                id="output-compact"
+                displayName="Compact Output"
+                position={Position.Right}
+                type="source"
+              />
+            </div>
+          )}
+        </div>
+      </>
+
+      <NodeResizer
+        minWidth={40}
+        minHeight={40}
+        lineStyle={{
+          borderColor: "transparent",
+          borderWidth: 6,
+        }}
+        handleStyle={{
+          background: "transparent",
+          borderColor: "transparent",
+          width: 12,
+          height: 12,
+          zIndex: 40,
+        }}
+      />
+
+      <div className="bg-content1 relative h-full w-full rounded-lg shadow-md z-10">
+        {node?.selected || node?.dragging ? (
+          <div className="absolute top-0 left-0 rounded-lg h-full w-full overflow-hidden selected wrapper gradient z-0" />
+        ) : (
+          isRunning && (
+            <div className="absolute top-0 left-0 rounded-lg h-full w-full overflow-hidden running wrapper gradient z-0" />
+          )
+        )}
+
+        <div
+          className="relative h-full w-full rounded-md overflow-hidden z-10 data-[is-dragging=true]:pointer-events-none data-[is-resizing=true]:pointer-events-none aura"
+          data-is-dragging={node?.dragging ? "true" : "false"}
+          data-is-resizing={node?.resizing ? "true" : "false"}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function CanvasNodeControl({
+  controlActions,
+  isShowingWorkflowConnector,
+  setIsShowingWorkflowConnector,
+}: {
+  controlActions: Record<string, (() => void) | undefined>;
+  isShowingWorkflowConnector: boolean;
+  setIsShowingWorkflowConnector: (showing: boolean) => void;
+}) {
+  return (
+    <>
+      <Button
+        isIconOnly
+        variant="light"
+        size="sm"
+        onPress={() => {
+          const action = controlActions["fullscreen"];
+          if (action) action();
+        }}
+      >
+        <Icon name="fullscreen" />
+      </Button>
+
+      <Button
+        isIconOnly
+        variant="light"
+        size="sm"
+        onPress={() => {
+          setIsShowingWorkflowConnector(!isShowingWorkflowConnector);
+        }}
+        className="data-[active=true]:bg-default data-[active=true]:text-default-foreground"
+        data-active={isShowingWorkflowConnector ? "true" : "false"}
+      >
+        <Icon name="swap_calls" />
+      </Button>
+
+      <div className="p-3">
+        <div className="relative">
+          {/* Popover is interfering with the drag area... */}
+          <NodeResizeControl
+            style={{
+              background: "transparent",
+              border: "none",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+            }}
+            minWidth={40}
+            minHeight={40}
+            // Disable resizing events on mobile
+            // because apparently it breaks the touch resizing
+            // onResizeStart={isMobile() ? undefined : () => setIsResizing(true)}
+            // onResizeEnd={isMobile() ? undefined : () => setIsResizing(false)}
+            autoScale={false}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              strokeWidth="2"
+              className="stroke-default-foreground"
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              style={{
+                position: "absolute",
+                right: "50%",
+                bottom: "50%",
+                transform: "translate(50%, 50%)",
+              }}
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <polyline points="16 20 20 20 20 16" />
+              <line x1="14" y1="14" x2="20" y2="20" />
+              <polyline points="8 4 4 4 4 8" />
+              <line x1="4" y1="4" x2="10" y2="10" />
+            </svg>
+          </NodeResizeControl>
+        </div>
+      </div>
+
+      <Button
+        isIconOnly
+        variant="light"
+        size="sm"
+        onPress={() => {
+          const action = controlActions["delete"];
+          if (action) action();
+        }}
+      >
+        <Icon name="delete" className="text-danger!" />
+      </Button>
+    </>
+  );
+}
diff --git a/web/components/views/canvas/nodes/app-node/node-handle.tsx b/web/components/views/canvas/nodes/app-node/node-handle.tsx
new file mode 100644
index 0000000..d45995b
--- /dev/null
+++ b/web/components/views/canvas/nodes/app-node/node-handle.tsx
@@ -0,0 +1,25 @@
+import { Handle, HandleType, Position } from "@xyflow/react";
+
+export default function NodeHandle({
+  id,
+  displayName,
+  position,
+  type,
+}: {
+  id: string;
+  displayName: string;
+  position: Position;
+  type: HandleType;
+}) {
+  return (
+    <div className="relative h-10 w-fit bg-red-400 z-40 pointer-events-none">
+      <Handle
+        id={id}
+        type={type}
+        position={position}
+        className="!bg-black pointer-events-auto"
+      />
+      <p>{displayName}</p>
+    </div>
+  );
+}
diff --git a/web/components/views/canvas/nodes/backend-node.tsx b/web/components/views/canvas/nodes/backend-node/backend-node.tsx
similarity index 88%
rename from web/components/views/canvas/nodes/backend-node.tsx
rename to web/components/views/canvas/nodes/backend-node/backend-node.tsx
index 7f8a120..f4fad39 100644
--- a/web/components/views/canvas/nodes/backend-node.tsx
+++ b/web/components/views/canvas/nodes/backend-node/backend-node.tsx
@@ -1,8 +1,8 @@
 import { AppViewConfig } from "@/lib/types";
 import { Node } from "@xyflow/react";
-import BaseAppView from "../../base/base-app-view";
 import { memo } from "react";
-import CanvasNodeViewLayout from "../canvas-node-view-layout";
+import CanvasNodeViewLayout from "../app-node/layout";
+import BaseAppView from "@/components/views/base/base-app-view";
 
 /* Runs backend part of pulse app. */
 const BackendNode = memo((props: any) => {
@@ -15,6 +15,7 @@ const BackendNode = memo((props: any) => {
 
   return (
     <CanvasNodeViewLayout
+      viewId={viewId}
       controlActions={{
         fullscreen: openViewInFullScreen
           ? () =>
diff --git a/web/components/views/canvas/theme.css b/web/components/views/canvas/theme.css
new file mode 100644
index 0000000..dc350ad
--- /dev/null
+++ b/web/components/views/canvas/theme.css
@@ -0,0 +1,66 @@
+.react-flow__node-appNode.selected .aura {
+  box-shadow:
+    4px 0 15px rgba(42, 138, 246, 0.3),
+    -4px 0 15px rgba(233, 42, 103, 0.3);
+}
+
+.react-flow__node-appNode .aura {
+  box-shadow: none;
+}
+
+.react-flow__node-appNode .wrapper {
+  overflow: hidden;
+  padding: 3px;
+  margin-left: -3px;
+  margin-top: -3px;
+  box-sizing: content-box;
+  flex-grow: 1;
+  height: 100%;
+  width: 100%;
+}
+
+.gradient:before {
+  content: "";
+  position: absolute;
+  inset: -50%; /* makes it bigger than the box */
+  border-radius: 50%; /* keep it circular */
+  background: conic-gradient(
+    from -160deg at 50% 50%,
+    #e92a67 0deg,
+    #a853ba 120deg,
+    #2a8af6 240deg,
+    #e92a67 360deg
+  );
+  z-index: -1;
+}
+
+.react-flow__node-appNode .running.gradient:before {
+  content: "";
+  background: conic-gradient(
+    from -160deg at 50% 50%,
+    #e92a6700 0deg,
+    #ff0035cc 20deg,
+    #a853ba 126deg,
+    #2a8af6cc 232deg,
+    #2a8af600 340deg
+  );
+  animation: spinner 4s linear infinite;
+  transform: rotate(0deg);
+  z-index: -1;
+}
+
+@keyframes spinner {
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+
+.react-flow__node:focus {
+  outline: none;
+}
+
+.react-flow__edge .react-flow__edge-path {
+  stroke: url(#edge-gradient);
+  stroke-width: 2;
+  stroke-opacity: 0.75;
+}
diff --git a/web/components/views/console-panel/console-panel-view.tsx b/web/components/views/console-panel/console-panel-view.tsx
index 64d95e1..87d61c2 100644
--- a/web/components/views/console-panel/console-panel-view.tsx
+++ b/web/components/views/console-panel/console-panel-view.tsx
@@ -17,7 +17,7 @@ import { ExtensionTypeEnum, ViewModel } from "@pulse-editor/shared-utils";
 import { AnimatePresence, motion } from "framer-motion";
 import { v4 } from "uuid";
 import SandboxAppLoader from "../../app-loaders/sandbox-app-loader";
-import AppViewLayout from "../standalone-app/app-view-layout";
+import AppViewLayout from "../standalone-app/layout";
 
 function ConsoleNavBar({
   consoles,
diff --git a/web/components/views/standalone-app/app-control.tsx b/web/components/views/standalone-app/app-control.tsx
deleted file mode 100644
index 6d07b74..0000000
--- a/web/components/views/standalone-app/app-control.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function AppControl() {
-  return <></>;
-}
diff --git a/web/components/views/standalone-app/app-view-layout.tsx b/web/components/views/standalone-app/layout.tsx
similarity index 97%
rename from web/components/views/standalone-app/app-view-layout.tsx
rename to web/components/views/standalone-app/layout.tsx
index 87c1f01..994d94f 100644
--- a/web/components/views/standalone-app/app-view-layout.tsx
+++ b/web/components/views/standalone-app/layout.tsx
@@ -1,6 +1,5 @@
 import { Popover, PopoverContent, PopoverTrigger } from "@heroui/react";
 import { useState } from "react";
-import AppControl from "./app-control";
 
 export default function AppViewLayout({
   height = "100%",
@@ -52,3 +51,7 @@ export default function AppViewLayout({
     </div>
   );
 }
+
+function AppControl() {
+  return <></>;
+}
diff --git a/web/components/views/standalone-app/standalone-app-view.tsx b/web/components/views/standalone-app/standalone-app-view.tsx
index 0cd8c8d..df72adf 100644
--- a/web/components/views/standalone-app/standalone-app-view.tsx
+++ b/web/components/views/standalone-app/standalone-app-view.tsx
@@ -1,6 +1,6 @@
 import { AppViewConfig } from "@/lib/types";
 import BaseAppView from "../base/base-app-view";
-import AppViewLayout from "./app-view-layout";
+import AppViewLayout from "./layout";
 
 export default function StandaloneAppView({
   config,
diff --git a/web/components/views/view-area.tsx b/web/components/views/view-area.tsx
index 39d9013..7e24fa9 100644
--- a/web/components/views/view-area.tsx
+++ b/web/components/views/view-area.tsx
@@ -157,40 +157,47 @@ export default function ViewArea() {
         <div>No view selected</div>
       ) : (
         <div
-          className="grid h-full w-full grid-rows-1 gap-y-0.5 px-2 pt-17 data-[is-show-tabs=true]:grid-rows-[max-content_auto]"
+          className="relative grid h-full w-full grid-rows-1 gap-y-0.5 data-[is-show-tabs=true]:data-[type=app]:grid-rows-[max-content_auto] data-[is-show-tabs=false]:data-[type=app]:pt-17"
           data-is-show-tabs={isShowTabs}
+          data-type={activeTabView?.type}
         >
           {isShowTabs && (
-            <div className="border-default-border bg-content2 w-full rounded-lg py-0.5">
-              <Tabs
-                tabItems={tabItems}
-                selectedItem={
-                  tabItems[tabIndex] ? tabItems[tabIndex] : undefined
-                }
-                setSelectedItem={(item) => {
-                  const index = tabItems.findIndex(
-                    (tab) => tab.name === item?.name,
-                  );
-                  selectTab(index !== -1 ? index : 0);
-                }}
-                isShowPagination={true}
-                onTabClose={(item) => {
-                  const index = tabItems.findIndex(
-                    (tab) => tab.name === item?.name,
-                  );
-                  if (index !== -1) {
-                    closeTabView(tabViews[index]);
+            <div
+              className="data-[type=canvas]:absolute pt-17 px-2 w-full z-20"
+              data-type={activeTabView?.type}
+            >
+              <div className="border-default-border bg-content2 w-full rounded-lg shadow-md py-0.5">
+                <Tabs
+                  tabItems={tabItems}
+                  selectedItem={
+                    tabItems[tabIndex] ? tabItems[tabIndex] : undefined
                   }
-                }}
-              />
+                  setSelectedItem={(item) => {
+                    const index = tabItems.findIndex(
+                      (tab) => tab.name === item?.name,
+                    );
+                    selectTab(index !== -1 ? index : 0);
+                  }}
+                  isShowPagination={true}
+                  onTabClose={(item) => {
+                    const index = tabItems.findIndex(
+                      (tab) => tab.name === item?.name,
+                    );
+                    if (index !== -1) {
+                      closeTabView(tabViews[index]);
+                    }
+                  }}
+                />
+              </div>
             </div>
           )}
-          <div className="h-full w-full">
+          <div className="relative h-full w-full">
             {tabViews.map((tabView, idx) => (
               <div
                 key={tabView.config.viewId}
                 data-is-active={idx === tabIndex}
-                className="hidden h-full w-full data-[is-active=true]:block"
+                data-type={tabView.type}
+                className="hidden h-full w-full data-[is-active=true]:block data-[type=app]:px-2"
               >
                 {tabView.type === ViewModeEnum.App ? (
                   <MemoizedStandaloneAppView