diff --git a/graph/client/src/app/ui-components/project-details-modal.tsx b/graph/client/src/app/ui-components/project-details-modal.tsx
index d693c42e5392a..17eb137fb4bcd 100644
--- a/graph/client/src/app/ui-components/project-details-modal.tsx
+++ b/graph/client/src/app/ui-components/project-details-modal.tsx
@@ -50,15 +50,15 @@ export function ProjectDetailsModal() {
   return (
     isOpen && (
       <div
-        className="top-24 z-20 right-4 opacity-100 bg-white dark:bg-slate-800 fixed h-max  w-1/3"
+        className="fixed top-24 right-4 z-20 h-max w-1/3 bg-white opacity-100  dark:bg-slate-800"
         style={{
           height: 'calc(100vh - 6rem - 2rem)',
         }}
         ref={refs.setFloating}
       >
-        <div className="rounded-md h-full border border-slate-500">
+        <div className="h-full rounded-md border border-slate-500">
           <ProjectDetailsWrapper project={project} sourceMap={sourceMap} />
-          <div className="top-2 right-2 absolute" onClick={onClose}>
+          <div className="absolute top-2 right-2" onClick={onClose}>
             <XMarkIcon className="h-4 w-4" />
           </div>
         </div>
diff --git a/graph/ui-components/src/lib/modal.tsx b/graph/ui-components/src/lib/modal.tsx
index 1b83f71996b70..1cac5f2fbf1e1 100644
--- a/graph/ui-components/src/lib/modal.tsx
+++ b/graph/ui-components/src/lib/modal.tsx
@@ -63,7 +63,7 @@ export const Modal = forwardRef(
           </Transition.Child>
 
           <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
-            <div className="flex min-h-full items-end justify-center p-4 text-center items-center sm:p-0">
+            <div className="flex min-h-full items-end items-center justify-center p-4 text-center sm:p-0">
               <Transition.Child
                 as={Fragment}
                 enter="ease-out duration-300"
@@ -74,10 +74,10 @@ export const Modal = forwardRef(
                 leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
               >
                 <Dialog.Panel
-                  className={`relative transform overflow-hidden rounded-lg bg-white dark:bg-slate-900 text-left shadow-xl transition-all my-8 mx-4 w-full md:max-w-5xl xl:max-w-7xl
+                  className={`relative my-8 mx-4 w-full transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all dark:bg-slate-900 md:max-w-5xl xl:max-w-7xl
                   `}
                 >
-                  <div className="flex items-center bg-white dark:bg-slate-900 justify-between p-2 pb-1 md:p-4 md:pb-2 border-b rounded-t dark:border-gray-600">
+                  <div className="flex items-center justify-between rounded-t border-b bg-white p-2 pb-1 dark:border-gray-600 dark:bg-slate-900 md:p-4 md:pb-2">
                     <Dialog.Title
                       as="h3"
                       className="text-lg font-medium leading-6 text-gray-900 dark:text-slate-200"
@@ -86,7 +86,7 @@ export const Modal = forwardRef(
                     </Dialog.Title>
                     <button
                       type="button"
-                      className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+                      className="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
                       data-modal-hide="default-modal"
                       onClick={() => setOpen(false)}
                     >
@@ -94,7 +94,7 @@ export const Modal = forwardRef(
                       <span className="sr-only">Close modal</span>
                     </button>
                   </div>
-                  <div className="bg-white dark:bg-slate-900 p-2 md:p-4 overflow-y-auto max-h-[90vh]">
+                  <div className="max-h-[90vh] overflow-y-auto bg-white p-2 dark:bg-slate-900 md:p-4">
                     {children}
                   </div>
                 </Dialog.Panel>
diff --git a/graph/ui-project-details/src/lib/project-details/project-details.tsx b/graph/ui-project-details/src/lib/project-details/project-details.tsx
index 73f05e7cff875..584b4eed1f3ff 100644
--- a/graph/ui-project-details/src/lib/project-details/project-details.tsx
+++ b/graph/ui-project-details/src/lib/project-details/project-details.tsx
@@ -96,14 +96,14 @@ export const ProjectDetails = forwardRef(
           <h1
             className={twMerge(
               `flex items-center justify-between dark:text-slate-100`,
-              isCompact ? `text-2xl gap-1` : `text-4xl mb-4 gap-2`
+              isCompact ? `gap-1 text-2xl` : `mb-4 gap-2 text-4xl`
             )}
           >
             <span>{name}</span>
             <span>
               {onViewInProjectGraph ? (
                 <button
-                  className="text-base cursor-pointer items-center inline-flex gap-2 text-slate-600 dark:text-slate-300 ring-2 ring-inset ring-slate-400/40 dark:ring-slate-400/30 hover:bg-slate-50 dark:hover:bg-slate-800/60 rounded-md py-1 px-2"
+                  className="inline-flex cursor-pointer items-center gap-2 rounded-md py-1 px-2 text-base text-slate-600 ring-2 ring-inset ring-slate-400/40 hover:bg-slate-50 dark:text-slate-300 dark:ring-slate-400/30 dark:hover:bg-slate-800/60"
                   onClick={() => onViewInProjectGraph({ projectName: name })}
                 >
                   <EyeIcon className="h-5 w-5 "></EyeIcon>
@@ -115,7 +115,7 @@ export const ProjectDetails = forwardRef(
           <div className="py-2 ">
             {projectData.tags && projectData.tags.length ? (
               <p>
-                <span className="font-medium inline-block w-10">Tags:</span>
+                <span className="inline-block w-10 font-medium">Tags:</span>
                 {projectData.tags?.map((tag) => (
                   <span className="ml-2 font-mono">
                     <Pill text={tag} />
@@ -124,19 +124,19 @@ export const ProjectDetails = forwardRef(
               </p>
             ) : null}
             <p>
-              <span className="font-medium inline-block w-10">Root:</span>
+              <span className="inline-block w-10 font-medium">Root:</span>
               <span className="font-mono"> {root}</span>
             </p>
             {displayType ? (
               <p>
-                <span className="font-medium inline-block w-10">Type:</span>
+                <span className="inline-block w-10 font-medium">Type:</span>
                 <span className="font-mono"> {displayType}</span>
               </p>
             ) : null}
           </div>
         </header>
         <div>
-          <h2 className={isCompact ? `text-lg mb-3` : `text-xl mb-4`}>
+          <h2 className={isCompact ? `mb-3 text-lg` : `mb-4 text-xl`}>
             <Tooltip
               openAction="hover"
               content={(<PropertyInfoTooltip type="targets" />) as any}