diff --git a/web/app/command-palette.css b/web/app/command-palette.css
index 808aa88b..f4e67bc7 100644
--- a/web/app/command-palette.css
+++ b/web/app/command-palette.css
@@ -69,14 +69,14 @@
 [la-dialog][cmdk-dialog] {
 	top: 15%;
 	transform: translateX(-50%);
-	width: 640px;
+	max-width: 640px;
 	background: var(--cmdk-bg);
 	box-shadow: var(--cmdk-shadow);
 	transform-origin: left;
 	animation: scaleIn 0.2s ease;
 	transition: transform 0.1s ease;
 	border: 0.5px solid var(--cmdk-border-color);
-	@apply fixed left-1/2 z-50 overflow-hidden rounded-lg outline-none;
+	@apply fixed left-1/2 z-50 w-full overflow-hidden rounded-lg outline-none;
 }
 
 [la-dialog][cmdk-dialog][data-state="closed"] {
diff --git a/web/components/custom/command-palette/command-items.tsx b/web/components/custom/command-palette/command-items.tsx
index 64b09602..9555ad16 100644
--- a/web/components/custom/command-palette/command-items.tsx
+++ b/web/components/custom/command-palette/command-items.tsx
@@ -1,6 +1,7 @@
+import * as React from "react"
 import { Command } from "cmdk"
 import { CommandSeparator, CommandShortcut } from "@/components/ui/command"
-import { LaIcon } from "../la-icon"
+import { LaIcon } from "@/components/custom/la-icon"
 import { CommandItemType, CommandAction } from "./command-data"
 import { HTMLLikeElement, renderHTMLLikeElement } from "@/lib/utils"
 
@@ -9,17 +10,24 @@ export interface CommandItemProps extends Omit<CommandItemType, "action"> {
 	handleAction: (action: CommandAction, payload?: any) => void
 }
 
-const HTMLLikeRenderer: React.FC<{ content: HTMLLikeElement | string }> = ({ content }) => {
+const HTMLLikeRenderer: React.FC<{ content: HTMLLikeElement | string }> = React.memo(({ content }) => {
 	return <>{renderHTMLLikeElement(content)}</>
-}
+})
 
-export const CommandItem: React.FC<CommandItemProps> = ({ icon, label, action, payload, shortcut, handleAction }) => (
-	<Command.Item onSelect={() => handleAction(action, payload)}>
-		{icon && <LaIcon name={icon} />}
-		<HTMLLikeRenderer content={label} />
-		{shortcut && <CommandShortcut>{shortcut}</CommandShortcut>}
-	</Command.Item>
+HTMLLikeRenderer.displayName = "HTMLLikeRenderer"
+
+export const CommandItem: React.FC<CommandItemProps> = React.memo(
+	({ icon, label, action, payload, shortcut, handleAction }) => (
+		<Command.Item onSelect={() => handleAction(action, payload)}>
+			{icon && <LaIcon name={icon} />}
+			<HTMLLikeRenderer content={label} />
+			{shortcut && <CommandShortcut>{shortcut}</CommandShortcut>}
+		</Command.Item>
+	)
 )
+
+CommandItem.displayName = "CommandItem"
+
 export interface CommandGroupProps {
 	heading?: string
 	items: CommandItemType[]
@@ -27,7 +35,7 @@ export interface CommandGroupProps {
 	isLastGroup: boolean
 }
 
-export const CommandGroup: React.FC<CommandGroupProps> = ({ heading, items, handleAction, isLastGroup }) => {
+export const CommandGroup: React.FC<CommandGroupProps> = React.memo(({ heading, items, handleAction, isLastGroup }) => {
 	return (
 		<>
 			{heading ? (
@@ -44,4 +52,6 @@ export const CommandGroup: React.FC<CommandGroupProps> = ({ heading, items, hand
 			{!isLastGroup && <CommandSeparator className="my-1.5" />}
 		</>
 	)
-}
+})
+
+CommandGroup.displayName = "CommandGroup"
diff --git a/web/components/custom/command-palette/command-palette.tsx b/web/components/custom/command-palette/command-palette.tsx
index e6a45aa9..56f3eef5 100644
--- a/web/components/custom/command-palette/command-palette.tsx
+++ b/web/components/custom/command-palette/command-palette.tsx
@@ -12,7 +12,7 @@ import { GraphNode } from "@/components/routes/public/PublicHomeRoute"
 import { useCommandActions } from "./hooks/use-command-actions"
 import { atom, useAtom } from "jotai"
 
-let graph_data_promise = import("@/components/routes/public/graph-data.json").then(a => a.default)
+const graph_data_promise = import("@/components/routes/public/graph-data.json").then(a => a.default)
 
 const filterItems = (items: CommandItemType[], searchRegex: RegExp) =>
 	items.filter(item => searchRegex.test(item.value)).slice(0, 6)