diff --git a/extensions/void/src/common/sendLLMMessage.ts b/extensions/void/src/common/sendLLMMessage.ts
index de39feaa..3bcfa6db 100644
--- a/extensions/void/src/common/sendLLMMessage.ts
+++ b/extensions/void/src/common/sendLLMMessage.ts
@@ -223,14 +223,14 @@ export const sendLLMMessage: SendLLMMessageFnTypeExternal = ({ messages, onText,
 	if (!apiConfig) return { abort: () => { } }
 
 	if (
-		apiConfig.anthropic.apikey === "" &&
-		apiConfig.greptile.apikey === "" &&
-		apiConfig.openai.apikey === "" &&
-		apiConfig.ollama.endpoint === "" &&
-		apiConfig.ollama.model === ""
+		apiConfig.anthropic.apikey === '' &&
+		apiConfig.greptile.apikey === '' &&
+		apiConfig.openai.apikey === '' &&
+		apiConfig.ollama.endpoint === '' &&
+		apiConfig.ollama.model === '' &&
+		apiConfig.whichApi === ''
 	) {
 		getVSCodeAPI().postMessage({ type: 'displayError', message: 'Required API keys are not set.' })
-		onFinalMessage("Required API keys are not set.");
 		return { abort: () => { }}
 	}
 
diff --git a/extensions/void/src/extension.ts b/extensions/void/src/extension.ts
index 835dcade..3eedae28 100644
--- a/extensions/void/src/extension.ts
+++ b/extensions/void/src/extension.ts
@@ -126,7 +126,7 @@ export function activate(context: vscode.ExtensionContext) {
 
 				} else if (m.type === 'displayError') {
 
-					vscode.window.showWarningMessage(m.message, { modal: true });
+					vscode.window.showErrorMessage(m.message, { modal: true });
 				}
 				else {
 
diff --git a/extensions/void/src/sidebar/Sidebar.tsx b/extensions/void/src/sidebar/Sidebar.tsx
index 61426869..d4c35d1b 100644
--- a/extensions/void/src/sidebar/Sidebar.tsx
+++ b/extensions/void/src/sidebar/Sidebar.tsx
@@ -1,273 +1,390 @@
-import React, { useState, ChangeEvent, useEffect, useRef, useCallback, FormEvent } from "react"
-import { ApiConfig, LLMMessage, sendLLMMessage } from "../common/sendLLMMessage"
-import { Command, File, Selection, WebviewMessage } from "../shared_types"
-import { awaitVSCodeResponse, getVSCodeAPI, resolveAwaitingVSCodeResponse } from "./getVscodeApi"
+/* eslint-disable no-mixed-spaces-and-tabs */
+import React, {
+	useState,
+	ChangeEvent,
+	useEffect,
+	useRef,
+	useCallback,
+	FormEvent,
+} from "react";
+import {
+	ApiConfig,
+	LLMMessage,
+	sendLLMMessage,
+} from "../common/sendLLMMessage";
+import { Command, File, Selection, WebviewMessage } from "../shared_types";
+import {
+	awaitVSCodeResponse,
+	getVSCodeAPI,
+	resolveAwaitingVSCodeResponse,
+} from "./getVscodeApi";
 
-import { marked } from 'marked';
+import { marked } from "marked";
 import MarkdownRender, { BlockCode } from "./MarkdownRender";
 
-import * as vscode from 'vscode'
-
+import * as vscode from "vscode";
 
 const filesStr = (fullFiles: File[]) => {
-	return fullFiles.map(({ filepath, content }) =>
-		`
+	return fullFiles
+		.map(
+			({ filepath, content }) =>
+				`
 ${filepath.fsPath}
 \`\`\`
 ${content}
-\`\`\``).join('\n')
-}
+\`\`\``
+		)
+		.join("\n");
+};
 
-const userInstructionsStr = (instructions: string, files: File[], selection: Selection | null) => {
+const userInstructionsStr = (
+	instructions: string,
+	files: File[],
+	selection: Selection | null
+) => {
 	return `
 ${filesStr(files)}
 
-${!selection ? '' : `
+${!selection
+			? ""
+			: `
 I am currently selecting this code:
 \`\`\`${selection.selectionStr}\`\`\`
-`}
+`
+		}
 
 Please edit the code following these instructions:
 ${instructions}
 
 If you make a change, rewrite the entire file.
 `; // TODO don't rewrite the whole file on prompt, instead rewrite it when click Apply
-}
+};
 
-
-const FilesSelector = ({ files, setFiles }: { files: vscode.Uri[], setFiles: (files: vscode.Uri[]) => void }) => {
-	return files.length !== 0 && <div className='text-xs my-2'>
-		Include files:
-		{files.map((filename, i) =>
-			<div key={i} className='flex'>
-				{/* X button on a file */}
-				<button type='button' onClick={() => {
-					let file_index = files.indexOf(filename)
-					setFiles([...files.slice(0, file_index), ...files.slice(file_index + 1, Infinity)])
-				}}>
-					-{' '}<span className='text-gray-500'>{getBasename(filename.fsPath)}</span>
-				</button>
+const FilesSelector = ({
+	files,
+	setFiles,
+}: {
+	files: vscode.Uri[];
+	setFiles: (files: vscode.Uri[]) => void;
+}) => {
+	return (
+		files.length !== 0 && (
+			<div className="text-xs my-2">
+				Include files:
+				{files.map((filename, i) => (
+					<div key={i} className="flex">
+						{/* X button on a file */}
+						<button
+							type="button"
+							onClick={() => {
+								let file_index = files.indexOf(filename);
+								setFiles(files.filter((_, index) => index !== file_index));
+							}}
+						>
+							-{" "}
+							<span className="text-gray-500">
+								{getBasename(filename.fsPath)}
+							</span>
+						</button>
+					</div>
+				))}
 			</div>
-		)}
-	</div>
-}
+		)
+	);
+};
 
 const IncludedFiles = ({ files }: { files: vscode.Uri[] }) => {
-	return files.length !== 0 && <div className='text-xs my-2'>
-		{files.map((filename, i) =>
-			<div key={i} className='flex'>
-				<button type='button'
-					className='pointer-events-none'
-					onClick={() => {
-						// TODO redirect to the document filename.fsPath, when add this remove pointer-events-none
-					}}>
-					-{' '}<span className='text-gray-100'>{getBasename(filename.fsPath)}</span>
-				</button>
+	return (
+		files.length !== 0 && (
+			<div className="text-xs my-2">
+				{files.map((filename, i) => (
+					<div key={i} className="flex">
+						<button
+							type="button"
+							className="pointer-events-none"
+							onClick={() => {
+								// TODO redirect to the document filename.fsPath, when add this remove pointer-events-none
+							}}
+						>
+							-{" "}
+							<span className="text-gray-100">
+								{getBasename(filename.fsPath)}
+							</span>
+						</button>
+					</div>
+				))}
 			</div>
-		)}
-	</div>
-}
-
+		)
+	);
+};
 
 const ChatBubble = ({ chatMessage }: { chatMessage: ChatMessage }) => {
+	const role = chatMessage.role;
+	const children = chatMessage.displayContent;
 
-	const role = chatMessage.role
-	const children = chatMessage.displayContent
+	if (!children) return null;
 
-	if (!children)
-		return null
+	let chatbubbleContents: React.ReactNode;
 
-	let chatbubbleContents: React.ReactNode
-
-	if (role === 'user') {
-		chatbubbleContents = <>
-			<IncludedFiles files={chatMessage.files} />
-			{chatMessage.selection?.selectionStr && <BlockCode text={chatMessage.selection.selectionStr} disableApplyButton={true} />}
-			{children}
-		</>
-	}
-	else if (role === 'assistant') {
+	if (role === "user") {
+		chatbubbleContents = (
+			<>
+				<IncludedFiles files={chatMessage.files} />
+				{chatMessage.selection?.selectionStr && (
+					<BlockCode
+						text={chatMessage.selection.selectionStr}
+						disableApplyButton={true}
+					/>
+				)}
+				{children}
+			</>
+		);
+	} else if (role === "assistant") {
 		const tokens = marked.lexer(children); // https://marked.js.org/using_pro#renderer
-		chatbubbleContents = <MarkdownRender tokens={tokens} /> // sectionsHTML
+		chatbubbleContents = <MarkdownRender tokens={tokens} />; // sectionsHTML
 	}
 
-
-	return <div className={`mb-4 ${role === 'user' ? 'text-right' : 'text-left'}`}>
-		<div className={`inline-block p-2 rounded-lg ${role === 'user' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-black'} max-w-full`}>
-			{chatbubbleContents}
+	return (
+		<div className={`mb-4 ${role === "user" ? "text-right" : "text-left"}`}>
+			<div
+				className={`inline-block p-2 rounded-lg ${role === "user" ? "bg-blue-500 text-white" : "bg-gray-200 text-black"
+					} max-w-full`}
+			>
+				{chatbubbleContents}
+			</div>
 		</div>
-	</div>
-}
+	);
+};
 
 const getBasename = (pathStr: string) => {
 	// "unixify" path
-	pathStr = pathStr.replace(/[/\\]+/g, '/'); // replace any / or \ or \\ with /
-	const parts = pathStr.split('/') // split on /
-	return parts[parts.length - 1]
-}
-
-type ChatMessage = {
-	role: 'user'
-	content: string, // content sent to the llm
-	displayContent: string, // content displayed to user
-	selection: Selection | null, // the user's selection
-	files: vscode.Uri[], // the files sent in the message
-} | {
-	role: 'assistant',
-	content: string, // content received from LLM
-	displayContent: string // content displayed to user (this is the same as content for now)
-}
+	pathStr = pathStr.replace(/[/\\]+/g, "/"); // replace any / or \ or \\ with /
+	const parts = pathStr.split("/"); // split on /
+	return parts[parts.length - 1];
+};
 
+type ChatMessage =
+	| {
+		role: "user";
+		content: string; // content sent to the llm
+		displayContent: string; // content displayed to user
+		selection: Selection | null; // the user's selection
+		files: vscode.Uri[]; // the files sent in the message
+	}
+	| {
+		role: "assistant";
+		content: string; // content received from LLM
+		displayContent: string; // content displayed to user (this is the same as content for now)
+	};
 
 // const [stateRef, setState] = useInstantState(initVal)
 // setState instantly changes the value of stateRef instead of having to wait until the next render
+
 const useInstantState = <T,>(initVal: T) => {
-	const stateRef = useRef<T>(initVal)
-	const [_, setS] = useState<T>(initVal)
+	const stateRef = useRef<T>(initVal);
+	const [_, setS] = useState<T>(initVal);
 	const setState = useCallback((newVal: T) => {
 		setS(newVal);
 		stateRef.current = newVal;
-	}, [])
-	return [stateRef as React.RefObject<T>, setState] as const // make s.current readonly - setState handles all changes
-}
-
-
+	}, []);
+	return [stateRef as React.RefObject<T>, setState] as const; // make s.current readonly - setState handles all changes
+};
 
 const Sidebar = () => {
-
 	// state of current message
-	const [selection, setSelection] = useState<Selection | null>(null) // the code the user is selecting
-	const [files, setFiles] = useState<vscode.Uri[]>([]) // the names of the files in the chat
-	const [instructions, setInstructions] = useState('') // the user's instructions
+	const [selection, setSelection] = useState<Selection | null>(null); // the code the user is selecting
+	const [files, setFiles] = useState<vscode.Uri[]>([]); // the names of the files in the chat
+	const [instructions, setInstructions] = useState(""); // the user's instructions
 
 	// state of chat
-	const [chatMessageHistory, setChatHistory] = useState<ChatMessage[]>([])
-	const [messageStream, setMessageStream] = useState('')
-	const [isLoading, setIsLoading] = useState(false)
+	const [chatMessageHistory, setChatHistory] = useState<ChatMessage[]>([]);
+	const [messageStream, setMessageStream] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+	const [isDisabled, setIsDisabled] = useState(false);
+	const [errorShown, setErrorShown] = useState(false);
 
-	const abortFnRef = useRef<(() => void) | null>(null)
 
-	const [apiConfig, setApiConfig] = useState<ApiConfig | null>(null)
+	const abortFnRef = useRef<(() => void) | null>(null);
+
+	const [apiConfig, setApiConfig] = useState<ApiConfig | null>(null);
+
+	const checkApiConfig = (apiConfig: ApiConfig) => {
+		if (
+			(apiConfig.anthropic.apikey === "" &&
+				apiConfig.greptile.apikey === "" &&
+				apiConfig.openai.apikey === "" &&
+				(apiConfig.ollama.endpoint === "" ||
+				apiConfig.ollama.model === "")) ||
+				apiConfig.whichApi === ""
+		) {
+			setIsDisabled(true);
+		} else {
+			setIsDisabled(false);
+		}
+
+	}
 
 	// get Api Config on mount
 	useEffect(() => {
-		getVSCodeAPI().postMessage({ type: 'getApiConfig' })
-	}, [])
+		getVSCodeAPI().postMessage({ type: "getApiConfig" });
+	}, []);
 
 	// Receive messages from the extension
 	useEffect(() => {
 		const listener = (event: MessageEvent) => {
-
 			const m = event.data as WebviewMessage;
 			// resolve any awaiting promises
 			// eg. it will resolve the promise below for `await VSCodeResponse('files')`
-			resolveAwaitingVSCodeResponse(m)
+			resolveAwaitingVSCodeResponse(m);
 
 			// if user pressed ctrl+l, add their selection to the sidebar
-			if (m.type === 'ctrl+l') {
+			if (m.type === "ctrl+l") {
+				if (isDisabled) {
+					getVSCodeAPI().postMessage({
+						type: "displayError",
+						message: "Required API keys are not set.",
+					});
+					return;
+				}
+				setSelection(m.selection);
 
-
-				setSelection(m.selection)
-
-				const filepath = m.selection.filePath
+				const filepath = m.selection.filePath;
 
 				// add file if it's not a duplicate
-				if (!files.find(f => f.fsPath === filepath.fsPath)) setFiles(files => [...files, filepath])
-
+				if (!files.find((f) => f.fsPath === filepath.fsPath))
+					setFiles((files) => [...files, filepath]);
 			}
 			// when get apiConfig, set
-			else if (m.type === 'apiConfig') {
-				setApiConfig(m.apiConfig)
+			else if (m.type === "apiConfig") {
+				setApiConfig(m.apiConfig);
+				checkApiConfig(m.apiConfig);
 			}
+		};
+		window.addEventListener("message", listener);
+		return () => {
+			window.removeEventListener("message", listener);
+		};
+	}, [files, selection, isDisabled]);
 
-		}
-		window.addEventListener('message', listener);
-		return () => { window.removeEventListener('message', listener) }
-	}, [files, selection])
-
-
-	const formRef = useRef<HTMLFormElement | null>(null)
+	const formRef = useRef<HTMLFormElement | null>(null);
 	const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		if (isLoading || isDisabled) return;
 
-		e.preventDefault()
-		if (isLoading) return
-
-		setIsLoading(true)
-		setInstructions('');
+		setIsLoading(true);
+		setInstructions("");
 		formRef.current?.reset(); // reset the form's text
-		setSelection(null)
-		setFiles([])
+		setSelection(null);
+		setFiles([]);
 
 		// request file content from vscode and await response
-		getVSCodeAPI().postMessage({ type: 'requestFiles', filepaths: files })
-		const relevantFiles = await awaitVSCodeResponse('files')
+		getVSCodeAPI().postMessage({ type: "requestFiles", filepaths: files });
+		const relevantFiles = await awaitVSCodeResponse("files");
 
 		// add message to chat history
-		const content = userInstructionsStr(instructions, relevantFiles.files, selection)
+		const content = userInstructionsStr(
+			instructions,
+			relevantFiles.files,
+			selection
+		);
 		// console.log('prompt:\n', content)
-		const newHistoryElt: ChatMessage = { role: 'user', content, displayContent: instructions, selection, files }
-		setChatHistory(chatMessageHistory => [...chatMessageHistory, newHistoryElt])
+		const newHistoryElt: ChatMessage = {
+			role: "user",
+			content,
+			displayContent: instructions,
+			selection,
+			files,
+		};
+		setChatHistory((chatMessageHistory) => [
+			...chatMessageHistory,
+			newHistoryElt,
+		]);
 
 		// send message to claude
 		let { abort } = sendLLMMessage({
-			messages: [...chatMessageHistory.map(m => ({ role: m.role, content: m.content })), { role: 'user', content }],
+			messages: [
+				...chatMessageHistory.map((m) => ({
+					role: m.role,
+					content: m.content,
+				})),
+				{ role: "user", content },
+			],
 			onText: (newText, fullText) => setMessageStream(fullText),
 			onFinalMessage: (content) => {
-
 				// add assistant's message to chat history
-				const newHistoryElt: ChatMessage = { role: 'assistant', content, displayContent: content, }
-				setChatHistory(chatMessageHistory => [...chatMessageHistory, newHistoryElt])
+				const newHistoryElt: ChatMessage = {
+					role: "assistant",
+					content,
+					displayContent: content,
+				};
+				setChatHistory((chatMessageHistory) => [
+					...chatMessageHistory,
+					newHistoryElt,
+				]);
 
 				// clear selection
-				setMessageStream('')
-				setIsLoading(false)
+				setMessageStream("");
+				setIsLoading(false);
 			},
-			apiConfig: apiConfig
-		})
-
-
-		abortFnRef.current = abort
-	}
+			apiConfig: apiConfig,
+		});
 
+		abortFnRef.current = abort;
+	};
 
 	const onStop = useCallback(() => {
 		// abort claude
-		abortFnRef.current?.()
+		abortFnRef.current?.();
 
 		// if messageStream was not empty, add it to the history
-		const llmContent = messageStream || '(canceled)'
-		const newHistoryElt: ChatMessage = { role: 'assistant', displayContent: messageStream, content: llmContent }
-		setChatHistory(chatMessageHistory => [...chatMessageHistory, newHistoryElt])
+		const llmContent = messageStream || "(canceled)";
+		const newHistoryElt: ChatMessage = {
+			role: "assistant",
+			displayContent: messageStream,
+			content: llmContent,
+		};
+		setChatHistory((chatMessageHistory) => [
+			...chatMessageHistory,
+			newHistoryElt,
+		]);
 
-		setMessageStream('')
-		setIsLoading(false)
-
-	}, [messageStream])
+		setMessageStream("");
+		setIsLoading(false);
+	}, [messageStream]);
 
 	//Clear code selection
 	const clearSelection = () => {
 		setSelection(null);
 	};
 
-	return <>
-		<div className="flex flex-col h-full w-full">
-			<div className="flex-grow overflow-y-auto overflow-x-hidden p-4">
-				{/* previous messages */}
-				{chatMessageHistory.map((message, i) =>
-					<ChatBubble key={i} chatMessage={message} />
-				)}
-				{/* message stream */}
-				<ChatBubble chatMessage={{ role: 'assistant', content: messageStream, displayContent: messageStream }} />
-			</div>
-			{/* chatbar */}
-			<div className="py-4 border-t">
-				{/* selection */}
-				<div className="text-left">
-					{/* selected files */}
-					<FilesSelector files={files} setFiles={setFiles} />
-					{/* selected code */}
-					{!selection?.selectionStr ? null
-						: (
+	return (
+		<>
+			<div
+				className={`flex flex-col h-full w-full relative ${isDisabled ? 'no-select' : ''}`}
+
+			>
+				<div className="flex-grow overflow-y-auto overflow-x-hidden p-4">
+					{/* previous messages */}
+					{chatMessageHistory.map((message, i) => (
+						<ChatBubble key={i} chatMessage={message} />
+					))}
+					{/* message stream */}
+					<ChatBubble
+						chatMessage={{
+							role: "assistant",
+							content: messageStream,
+							displayContent: messageStream,
+						}}
+					/>
+				</div>
+				{/* chatbar */}
+				<div className="py-4 border-t">
+					{/* selection */}
+					<div className="text-left">
+						{/* selected files */}
+						<FilesSelector files={files} setFiles={setFiles} />
+						{/* selected code */}
+						{!selection?.selectionStr ? null : (
 							<div className="relative">
 								<button
 									onClick={clearSelection}
@@ -275,54 +392,81 @@ const Sidebar = () => {
 								>
 									X
 								</button>
-								<BlockCode text={selection.selectionStr} disableApplyButton={true} />
+								<BlockCode
+									text={selection.selectionStr}
+									disableApplyButton={true}
+								/>
 							</div>
-					)}
+						)}
+					</div>
+					<form
+						ref={formRef}
+						className="flex flex-row items-center rounded-md p-2 border border-gray-400 bg-[rgb(20,20,20)]"
+						onKeyDown={(e) => {
+							if (e.key === "Enter" && !e.shiftKey) onSubmit(e);
+						}}
+						onSubmit={(e) => {
+							console.log("submit!");
+							e.preventDefault();
+							onSubmit(e);
+						}}
+					>
+						{/* input */}
+
+						<textarea
+							onChange={(e) => {
+								setInstructions(e.target.value);
+							}}
+							className="w-full p-2 leading-tight resize-none max-h-[50vh] overflow-hidden text-gray-100 rounded-md bg-[rgb(20,20,20)]"
+							style={{ outline: "0px solid" }}
+							placeholder="Ctrl+L to select"
+							rows={1}
+							onInput={(e) => {
+								e.currentTarget.style.height = "auto";
+								e.currentTarget.style.height =
+									e.currentTarget.scrollHeight + "px";
+							}} // Adjust height dynamically
+						/>
+						{/* submit button */}
+						{isLoading ? (
+							<button
+								onClick={onStop}
+								className="bg-gray-400 text-white p-2 rounded-r-lg max-h-10"
+								type="button"
+							>
+								Stop
+							</button>
+						) : (
+							<button
+								className="cursor-pointer hover:bg-gray-700 bg-gray-600 text-white font-bold size-8 flex justify-center items-center rounded-full p-2 max-h-10"
+								disabled={!instructions}
+								type="submit"
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									strokeWidth="2"
+									strokeLinecap="round"
+									strokeLinejoin="round"
+								>
+									<line x1="12" y1="19" x2="12" y2="5"></line>
+									<polyline points="5 12 12 5 19 12"></polyline>
+								</svg>
+							</button>
+						)}
+					</form>
 				</div>
-				<form
-					ref={formRef}
-					className="flex flex-row items-center rounded-md p-2 border border-gray-400 bg-[rgb(20,20,20)]"
-					onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) onSubmit(e) }}
-
-					onSubmit={(e) => {
-						console.log('submit!')
-						e.preventDefault();
-						onSubmit(e)
-					}}>
-					{/* input */}
-
-					<textarea
-						onChange={(e) => { setInstructions(e.target.value) }}
-						className="w-full p-2 leading-tight resize-none max-h-[50vh] overflow-hidden text-gray-100 rounded-md bg-[rgb(20,20,20)]"
-						style={{ outline: '0px solid' }}
-						placeholder="Ctrl+L to select"
-						rows={1}
-						onInput={e => { e.currentTarget.style.height = 'auto'; e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px' }} // Adjust height dynamically
-					/>
-					{/* submit button */}
-					{isLoading ?
-						<button
-							onClick={onStop}
-							className="bg-gray-400 text-white p-2 rounded-r-lg max-h-10"
-							type='button'
-						>Stop</button>
-						: <button
-							className="cursor-pointer hover:bg-gray-700 bg-gray-600 text-white font-bold size-8 flex justify-center items-center rounded-full p-2 max-h-10"
-							disabled={!instructions}
-							type='submit'
-						>
-							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-								<line x1="12" y1="19" x2="12" y2="5"></line>
-								<polyline points="5 12 12 5 19 12"></polyline>
-							</svg>
-						</button>
-					}
-				</form>
+				{/* Red overlay when isDisabled is true */}
+				{isDisabled && (
+					<div className="absolute top-0 left-0 w-full h-full bg-gray-500 opacity-10 pointer-events-none" />
+				)}
 			</div>
-		</div>
+		</>
+	);
+};
 
-	</>
-
-}
-
-export default Sidebar
+export default Sidebar;
diff --git a/extensions/void/src/sidebar/styles.css b/extensions/void/src/sidebar/styles.css
index b5c61c95..d5fc7bc9 100644
--- a/extensions/void/src/sidebar/styles.css
+++ b/extensions/void/src/sidebar/styles.css
@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.no-select {
+    user-select: none;
+	pointer-events: none;
+	filter: blur(3px)
+}