diff --git a/packages/interface/src/components/layout/TopBar.tsx b/packages/interface/src/components/layout/TopBar.tsx
index 151a880c3..4e527ca55 100644
--- a/packages/interface/src/components/layout/TopBar.tsx
+++ b/packages/interface/src/components/layout/TopBar.tsx
@@ -1,5 +1,5 @@
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/outline';
-import { useLibraryCommand } from '@sd/client';
+import { AppPropsContext, useLibraryCommand } from '@sd/client';
 import { useExplorerStore } from '@sd/client';
 import { Dropdown } from '@sd/ui';
 import clsx from 'clsx';
@@ -15,7 +15,6 @@ import {
 } from 'phosphor-react';
 import React, { DetailedHTMLProps, HTMLAttributes, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { AppPropsContext } from '../../AppPropsContext';
 
 import { Shortcut } from '../primitive/Shortcut';
 import { DefaultProps } from '../primitive/types';
@@ -51,22 +50,27 @@ const TopBarButton: React.FC<TopBarButtonProps> = ({ icon: Icon, ...props }) =>
 	);
 };
 
-const SearchBar: React.FC<SearchBarProps> = (props) => { //TODO: maybe pass the appProps, so we can have the context in the TopBar if needed again
+const SearchBar: React.FC<SearchBarProps> = (props) => {
+	//TODO: maybe pass the appProps, so we can have the context in the TopBar if needed again
 	const appProps = useContext(AppPropsContext);
 
-	return (					
+	return (
 		<div className="relative flex h-7">
 			<input
 				placeholder="Search"
 				className="w-32 h-[30px] focus:w-52 text-sm p-3 rounded-lg outline-none focus:ring-2  placeholder-gray-400 dark:placeholder-gray-500 bg-[#F6F2F6] border border-gray-50 dark:bg-gray-650 dark:border-gray-550 focus:ring-gray-100 dark:focus:ring-gray-600 transition-all"
 			/>
 			<div className="space-x-1 absolute top-[2px] right-1">
-				<Shortcut chars={ appProps?.platform === "macOS" || appProps?.platform === "browser" ? "⌘K" : "CTRL+K" } /> 
+				<Shortcut
+					chars={
+						appProps?.platform === 'macOS' || appProps?.platform === 'browser' ? '⌘K' : 'CTRL+K'
+					}
+				/>
 				{/* <Shortcut chars="S" /> */}
 			</div>
 		</div>
 	);
-}
+};
 
 export const TopBar: React.FC<TopBarProps> = (props) => {
 	const { locationId } = useExplorerStore();