diff --git a/frontend/src/App.css b/frontend/src/App.css
index b60fb5acf..e38834d8c 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -360,4 +360,15 @@
   height: calc(100vh - 58px);
   min-height: 200px;
   display: flex
+}
+.profile-container{
+  display:flex;
+  gap:4px;
+  align-items:center;
+  border: 1px solid rgb(var(--theme-palette-neutral-border-strong));
+  border-radius: 12px;
+}
+.websource-btn-container{
+  display: flex;
+  gap: 10px;
 }
\ No newline at end of file
diff --git a/frontend/src/components/ChatBot/ChatInfoModal.tsx b/frontend/src/components/ChatBot/ChatInfoModal.tsx
index a6e7f6590..859bcf9b7 100644
--- a/frontend/src/components/ChatBot/ChatInfoModal.tsx
+++ b/frontend/src/components/ChatBot/ChatInfoModal.tsx
@@ -315,13 +315,13 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
   );
   return (
     <div className='n-bg-palette-neutral-bg-weak p-4'>
-      <div className='flex flex-row pb-6 items-center mb-2'>
+      <div className='flex! flex-row pb-6 items-center mb-2'>
         <img
           src={Neo4jRetrievalLogo}
           style={{ width: isTablet ? 80 : 95, height: isTablet ? 80 : 95, marginRight: 10 }}
           loading='lazy'
         />
-        <div className='flex flex-col'>
+        <div className='flex! flex-col'>
           <Typography variant='h2'>Retrieval information</Typography>
           <Typography variant='body-medium' className='mb-2'>
             To generate this response, the process took <span className='font-bold'>{response_time} seconds,</span>
@@ -499,7 +499,7 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
         )}
       </Flex>
       {activeTab == 4 && nodes?.length && relationships?.length && mode !== chatModeLables.graph ? (
-        <div className='button-container flex mt-2 justify-center'>
+        <div className='button-container flex! mt-2 justify-center'>
           <GraphViewButton
             nodeValues={nodes}
             relationshipValues={relationships}
diff --git a/frontend/src/components/ChatBot/Chatbot.tsx b/frontend/src/components/ChatBot/Chatbot.tsx
index bebe2f2ee..e565f3858 100644
--- a/frontend/src/components/ChatBot/Chatbot.tsx
+++ b/frontend/src/components/ChatBot/Chatbot.tsx
@@ -406,26 +406,26 @@ const Chatbot: FC<ChatbotProps> = (props) => {
   }, []);
 
   return (
-    <div className='n-bg-palette-neutral-bg-weak flex flex-col justify-between min-h-full max-h-full overflow-hidden relative'>
+    <div className='n-bg-palette-neutral-bg-weak flex! flex-col justify-between min-h-full max-h-full overflow-hidden relative'>
       {isDeleteChatLoading && (
         <div className='chatbot-deleteLoader'>
           <Loader title='Deleting...'></Loader>
         </div>
       )}
       <div
-        className={`flex overflow-y-auto pb-12 min-w-full pl-5 pr-5 chatBotContainer ${
+        className={`flex! overflow-y-auto pb-12 min-w-full pl-5 pr-5 chatBotContainer ${
           isChatOnly ? 'min-h-[calc(100dvh-114px)] max-h-[calc(100dvh-114px)]' : ''
         } `}
       >
         <Widget className='n-bg-palette-neutral-bg-weak w-full' header='' isElevated={false}>
-          <div className='flex flex-col gap-4 gap-y-4'>
+          <div className='flex! flex-col gap-4 gap-y-4'>
             {listMessages.map((chat, index) => {
               const messagechatModes = Object.keys(chat.modes);
               return (
                 <div
                   ref={messagesEndRef}
                   key={chat.id}
-                  className={clsx(`flex gap-2.5`, {
+                  className={clsx(`flex! gap-2.5`, {
                     'flex-row': chat.user === 'chatbot',
                     'flex-row-reverse': chat.user !== 'chatbot',
                   })}
@@ -545,8 +545,8 @@ const Chatbot: FC<ChatbotProps> = (props) => {
           </div>
         </Widget>
       </div>
-      <div className='n-bg-palette-neutral-bg-weak flex gap-2.5 bottom-0 p-2.5 w-full'>
-        <form onSubmit={handleSubmit} className={`flex gap-2.5 w-full ${!isFullScreen ? 'justify-between' : ''}`}>
+      <div className='n-bg-palette-neutral-bg-weak flex! gap-2.5 bottom-0 p-2.5 w-full'>
+        <form onSubmit={handleSubmit} className={`flex! gap-2.5 w-full ${!isFullScreen ? 'justify-between' : ''}`}>
           <TextInput
             className={`n-bg-palette-neutral-bg-default flex-grow-7 ${
               isFullScreen ? 'w-[calc(100%-105px)]' : 'w-[70%]'
diff --git a/frontend/src/components/ChatBot/ChunkInfo.tsx b/frontend/src/components/ChatBot/ChunkInfo.tsx
index 1f91cec77..1dd5f2feb 100644
--- a/frontend/src/components/ChatBot/ChunkInfo.tsx
+++ b/frontend/src/components/ChatBot/ChunkInfo.tsx
@@ -36,7 +36,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
   return (
     <>
       {loading ? (
-        <div className='flex justify-center items-center'>
+        <div className='flex! justify-center items-center'>
           <LoadingSpinner size='small' />
         </div>
       ) : chunks?.length > 0 ? (
@@ -46,7 +46,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
               <li key={chunk.id} className='mb-2'>
                 {chunk?.page_number ? (
                   <>
-                    <div className='flex flex-row inline-block items-center'>
+                    <div className='flex! flex-row inline-block items-center'>
                       <>
                         <DocumentTextIconOutline className='w-4 h-4 inline-block mr-2' />
                         <Typography
@@ -79,7 +79,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
                   </>
                 ) : chunk?.url && chunk?.start_time ? (
                   <>
-                    <div className='flex flex-row inline-block justiy-between items-center'>
+                    <div className='flex! flex-row inline-block justiy-between items-center'>
                       <img src={youtubelogo} width={20} height={20} className='mr-2' />
                       <TextLink href={generateYouTubeLink(chunk?.url, chunk?.start_time)} isExternalLink={true}>
                         <Typography
@@ -111,7 +111,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
                   </>
                 ) : chunk?.url && new URL(chunk.url).host === 'wikipedia.org' ? (
                   <>
-                    <div className='flex flex-row inline-block justiy-between items-center'>
+                    <div className='flex! flex-row inline-block justiy-between items-center'>
                       <img src={wikipedialogo} width={20} height={20} className='mr-2' />
                       <Typography variant='subheading-medium'>{chunk?.fileName}</Typography>
                     </div>
@@ -135,7 +135,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
                   </>
                 ) : chunk?.url && new URL(chunk.url).host === 'storage.googleapis.com' ? (
                   <>
-                    <div className='flex flex-row inline-block justiy-between items-center'>
+                    <div className='flex! flex-row inline-block justiy-between items-center'>
                       <img src={gcslogo} width={20} height={20} className='mr-2' />
                       <Typography variant='subheading-medium'>{chunk?.fileName}</Typography>
                     </div>
@@ -159,7 +159,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
                   </>
                 ) : chunk?.url && chunk?.url.startsWith('s3://') ? (
                   <>
-                    <div className='flex flex-row inline-block justiy-between items-center'>
+                    <div className='flex! flex-row inline-block justiy-between items-center'>
                       <img src={s3logo} width={20} height={20} className='mr-2' />
                       <Typography variant='subheading-medium'>{chunk?.fileName}</Typography>
                     </div>
@@ -185,7 +185,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
                   !chunk?.url.startsWith('s3://') &&
                   !isAllowedHost(chunk?.url, ['storage.googleapis.com', 'wikipedia.org', 'youtube.com']) ? (
                   <>
-                    <div className='flex flex-row inline-block items-center'>
+                    <div className='flex! flex-row inline-block items-center'>
                       <GlobeAltIconOutline className='n-size-token-7' />
                       <TextLink href={chunk?.url} isExternalLink={true}>
                         <Typography variant='body-medium'>{chunk?.url}</Typography>
@@ -211,7 +211,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
                   </>
                 ) : (
                   <>
-                    <div className='flex flex-row inline-block items-center'>
+                    <div className='flex! flex-row inline-block items-center'>
                       {chunk.fileSource === 'local file' ? (
                         <DocumentTextIconOutline className='n-size-token-7 mr-2' />
                       ) : (
diff --git a/frontend/src/components/ChatBot/ExpandedChatButtonContainer.tsx b/frontend/src/components/ChatBot/ExpandedChatButtonContainer.tsx
index 136eeef15..f0371d1d5 100644
--- a/frontend/src/components/ChatBot/ExpandedChatButtonContainer.tsx
+++ b/frontend/src/components/ChatBot/ExpandedChatButtonContainer.tsx
@@ -22,7 +22,7 @@ const ExpandedChatButtonContainer: React.FC<IconProps> = ({ closeChatBot, delete
         menuAnchor={chatAnchor}
         isRoot={false}
       />
-      <div className='h-[48px]! mx-2 flex items-center'>
+      <div className='h-[48px]! mx-2 flex! items-center'>
         <div ref={chatAnchor}>
           <IconButtonWithToolTip
             onClick={() => {
diff --git a/frontend/src/components/ChatBot/SourcesInfo.tsx b/frontend/src/components/ChatBot/SourcesInfo.tsx
index ace69a07f..5a1874c1c 100644
--- a/frontend/src/components/ChatBot/SourcesInfo.tsx
+++ b/frontend/src/components/ChatBot/SourcesInfo.tsx
@@ -37,8 +37,8 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
             .map((c) => ({ fileName: c.fileName, fileSource: c.fileSource }))
             .map((s, index) => {
               return (
-                <li key={index} className='flex flex-row inline-block justify-between items-center p-2'>
-                  <div className='flex flex-row inline-block justify-between items-center'>
+                <li key={index} className='flex! flex-row inline-block justify-between items-center p-2'>
+                  <div className='flex! flex-row inline-block justify-between items-center'>
                     {s.fileSource === 'local file' ? (
                       <DocumentTextIconOutline className='n-size-token-7 mr-2' />
                     ) : (
@@ -59,11 +59,11 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
         <ul className='list-class list-none'>
           {sources.map((link, index) => {
             return (
-              <li key={index} className='flex flex-row inline-block justify-between items-center p-2'>
+              <li key={index} className='flex! flex-row inline-block justify-between items-center p-2'>
                 {link?.startsWith('http') || link?.startsWith('https') ? (
                   <>
                     {isAllowedHost(link, ['wikipedia.org']) && (
-                      <div className='flex flex-row inline-block justify-between items-center'>
+                      <div className='flex! flex-row inline-block justify-between items-center'>
                         <img src={wikipedialogo} width={20} height={20} className='mr-2' alt='Wikipedia Logo' />
                         <TextLink href={link} isExternalLink={true}>
                           <HoverableLink url={link}>
@@ -78,7 +78,7 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
                       </div>
                     )}
                     {isAllowedHost(link, ['storage.googleapis.com']) && (
-                      <div className='flex flex-row inline-block justify-between items-center'>
+                      <div className='flex! flex-row inline-block justify-between items-center'>
                         <img src={gcslogo} width={20} height={20} className='mr-2' alt='Google Cloud Storage Logo' />
                         <Typography
                           variant='body-medium'
@@ -90,7 +90,7 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
                     )}
                     {youtubeLinkValidation(link) && (
                       <>
-                        <div className='flex flex-row inline-block justiy-between items-center'>
+                        <div className='flex! flex-row inline-block justiy-between items-center'>
                           <img src={youtubelogo} width={20} height={20} className='mr-2' />
                           <TextLink href={link} isExternalLink={true}>
                             <HoverableLink url={link}>
@@ -107,7 +107,7 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
                     )}
                     {!link?.startsWith('s3://') &&
                       !isAllowedHost(link, ['storage.googleapis.com', 'wikipedia.org', 'www.youtube.com']) && (
-                        <div className='flex flex-row inline-block justify-between items-center'>
+                        <div className='flex! flex-row inline-block justify-between items-center'>
                           <GlobeAltIconOutline className='n-size-token-7' />
                           <TextLink href={link} isExternalLink={true}>
                             <Typography variant='body-medium'>{link}</Typography>
@@ -116,7 +116,7 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
                       )}
                   </>
                 ) : link?.startsWith('s3://') ? (
-                  <div className='flex flex-row inline-block justify-between items-center'>
+                  <div className='flex! flex-row inline-block justify-between items-center'>
                     <img src={s3logo} width={20} height={20} className='mr-2' alt='S3 Logo' />
                     <Typography
                       variant='body-medium'
@@ -126,7 +126,7 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
                     </Typography>
                   </div>
                 ) : (
-                  <div className='flex flex-row inline-block justify-between items-center'>
+                  <div className='flex! flex-row inline-block justify-between items-center'>
                     <DocumentTextIconOutline className='n-size-token-7 mr-2' />
                     <Typography
                       variant='body-medium'
diff --git a/frontend/src/components/Content.tsx b/frontend/src/components/Content.tsx
index 35e99fbad..d761d15c0 100644
--- a/frontend/src/components/Content.tsx
+++ b/frontend/src/components/Content.tsx
@@ -889,7 +889,7 @@ const Content: React.FC<ContentProps> = ({
             <span className='h6 px-1'>Neo4j connection {isReadOnlyUser ? '(Read only Mode)' : ''}</span>
             <Typography variant='body-medium'>
               <DatabaseStatusIcon isConnected={connectionStatus} isGdsActive={isGdsActive} uri={userCredentials?.uri} />
-              <div className='pt-1 flex gap-1 items-center'>
+              <div className='pt-1 flex! gap-1 items-center'>
                 <div>{!hasSelections ? <StatusIndicator type='danger' /> : <StatusIndicator type='success' />}</div>
                 <div>
                   {hasSelections ? (
diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
index a629f46cf..50c0de53b 100644
--- a/frontend/src/components/Dropdown.tsx
+++ b/frontend/src/components/Dropdown.tsx
@@ -32,7 +32,7 @@ const DropdownComponent: React.FC<ReusableDropdownProps> = ({
           type='select'
           label='LLM Models'
           helpText={
-            <div className='w-max! flex gap-1 items-center'>
+            <div className='w-max! flex! gap-1 items-center'>
               <span>
                 <InformationCircleIconOutline title='info' aria-label='infoicon' className='n-size-token-6' />
               </span>
diff --git a/frontend/src/components/FileTable.tsx b/frontend/src/components/FileTable.tsx
index 3f733efce..f6ead8034 100644
--- a/frontend/src/components/FileTable.tsx
+++ b/frontend/src/components/FileTable.tsx
@@ -177,7 +177,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
           if (info.getValue() != 'Processing') {
             return (
               <div
-                className='cellClass flex gap-1 items-center'
+                className='cellClass flex! gap-1 items-center'
                 title={info.row.original?.status === 'Failed' ? info.row.original?.errorMessage : ''}
               >
                 <div>
@@ -203,7 +203,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
             );
           } else if (info.getValue() === 'Processing' && info.row.original.processingProgress === undefined) {
             return (
-              <div className='cellClass flex gap-1 items-center'>
+              <div className='cellClass flex! gap-1 items-center'>
                 <div>
                   <StatusIndicator type={statusCheck(info.getValue())} />
                 </div>
@@ -268,7 +268,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
             );
           }
           return (
-            <div className='cellClass flex gap-1'>
+            <div className='cellClass flex! gap-1'>
               <div>
                 <StatusIndicator type={statusCheck(info.getValue())} />
               </div>
@@ -341,7 +341,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
         cell: (info: CellContext<CustomFile, string>) => {
           if (parseInt(info.getValue()) === 100 || info.row.original?.status === 'New') {
             return (
-              <div className='flex gap-1 items-center'>
+              <div className='flex! gap-1 items-center'>
                 <Typography variant='body-medium'>
                   <StatusIndicator type='success' />
                 </Typography>
@@ -352,7 +352,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
             return <CustomProgressBar value={parseInt(info?.getValue())}></CustomProgressBar>;
           } else if (info.row.original?.status === 'Failed') {
             return (
-              <div className='flex gap-1 items-center'>
+              <div className='flex! gap-1 items-center'>
                 <Typography variant='body-medium'>
                   <StatusIndicator type='danger' />
                 </Typography>
@@ -361,7 +361,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
             );
           }
           return (
-            <div className='flex items-center gap-1'>
+            <div className='flex! items-center gap-1'>
               <Typography variant='body-medium'>
                 <StatusIndicator type='success' />
               </Typography>
diff --git a/frontend/src/components/Graph/GraphPropertiesPanel.tsx b/frontend/src/components/Graph/GraphPropertiesPanel.tsx
index a11399971..ce0701d0f 100644
--- a/frontend/src/components/Graph/GraphPropertiesPanel.tsx
+++ b/frontend/src/components/Graph/GraphPropertiesPanel.tsx
@@ -69,7 +69,7 @@ const GraphPropertiesPanel = ({ inspectedItem, newScheme }: GraphPropertiesPanel
         <h6 className='mr-auto'>{inspectedItemType === 'node' ? 'Node details' : 'Relationship details'}</h6>
       </ResizePanelDetails.Title>
       <ResizePanelDetails.Content>
-        <div className='mx-4 flex flex-row flex-wrap gap-2'>
+        <div className='mx-4 flex! flex-row flex-wrap gap-2'>
           {isNode(inspectedItem) ? (
             labelsSorted.map((label) => (
               <LegendsChip type='node' key={`node ${label}`} label={label} scheme={newScheme} />
diff --git a/frontend/src/components/Graph/GraphPropertiesTable.tsx b/frontend/src/components/Graph/GraphPropertiesTable.tsx
index 3d2bbd87f..d599dd4e7 100644
--- a/frontend/src/components/Graph/GraphPropertiesTable.tsx
+++ b/frontend/src/components/Graph/GraphPropertiesTable.tsx
@@ -5,7 +5,7 @@ const GraphPropertiesTable = ({ propertiesWithTypes }: GraphPropertiesTableProps
   console.log('proerties', propertiesWithTypes);
   return (
     <div className='flex w-full flex-col break-all px-4 text-sm' data-testid='viz-details-pane-properties-table'>
-      <div className='mb-1 flex flex-row pl-2'>
+      <div className='mb-1 flex! flex-row pl-2'>
         <Typography variant='body-medium' className='basis-1/3'>
           Key
         </Typography>
@@ -15,7 +15,7 @@ const GraphPropertiesTable = ({ propertiesWithTypes }: GraphPropertiesTableProps
         .filter(({ value }) => value !== undefined && value !== null && value !== '' && !Array.isArray(value))
         .map(({ key, value }, _) => {
           return (
-            <div key={key} className='border-palette-neutral-border-weak flex border-t py-1 pl-2 first:border-none'>
+            <div key={key} className='border-palette-neutral-border-weak flex! border-t py-1 pl-2 first:border-none'>
               <div className='shrink basis-1/3 overflow-hidden whitespace-nowrap'>
                 <GraphLabel
                   type='propertyKey'
diff --git a/frontend/src/components/Graph/GraphViewModal.tsx b/frontend/src/components/Graph/GraphViewModal.tsx
index a7e7296c5..f9775d3e2 100644
--- a/frontend/src/components/Graph/GraphViewModal.tsx
+++ b/frontend/src/components/Graph/GraphViewModal.tsx
@@ -385,19 +385,19 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
         <Dialog.Content className='flex flex-col n-gap-token-4 w-full grow overflow-auto border border-palette-neutral-border-weak'>
           <div className='bg-white relative w-full h-full max-h-full'>
             {loading ? (
-              <div className='my-40 flex items-center justify-center'>
+              <div className='my-40 flex! items-center justify-center'>
                 <LoadingSpinner size='large' />
               </div>
             ) : status !== 'unknown' ? (
-              <div className='my-40 flex items-center justify-center'>
+              <div className='my-40 flex! items-center justify-center'>
                 <Banner name='graph banner' description={statusMessage} type={status} usage='inline' />
               </div>
             ) : nodes.length === 0 && relationships.length === 0 && graphType.length !== 0 ? (
-              <div className='my-40 flex items-center justify-center'>
+              <div className='my-40 flex! items-center justify-center'>
                 <Banner name='graph banner' description={graphLabels.noNodesRels} type='danger' usage='inline' />
               </div>
             ) : graphType.length === 0 && checkBoxView ? (
-              <div className='my-40 flex items-center justify-center'>
+              <div className='my-40 flex! items-center justify-center'>
                 <Banner name='graph banner' description={graphLabels.selectCheckbox} type='danger' usage='inline' />
               </div>
             ) : (
diff --git a/frontend/src/components/Graph/ResizePanel.tsx b/frontend/src/components/Graph/ResizePanel.tsx
index a0eac1a7e..726ede1a3 100644
--- a/frontend/src/components/Graph/ResizePanel.tsx
+++ b/frontend/src/components/Graph/ResizePanel.tsx
@@ -41,7 +41,7 @@ export const ResizePanelDetails = ({ children, open, onResizeStop }: ResizePanel
 };
 const Title = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className='ml-4 flex items-center' style={{ gridArea: 'title' }}>
+    <div className='ml-4 flex! items-center' style={{ gridArea: 'title' }}>
       {children}
     </div>
   );
diff --git a/frontend/src/components/Layout/DrawerDropzone.tsx b/frontend/src/components/Layout/DrawerDropzone.tsx
index c5d86a7fd..566a24af2 100644
--- a/frontend/src/components/Layout/DrawerDropzone.tsx
+++ b/frontend/src/components/Layout/DrawerDropzone.tsx
@@ -63,7 +63,7 @@ const DrawerDropzone: React.FC<DrawerProps> = ({
               <div className='flex flex-col h-full'>
                 <div className='relative h-full'>
                   {process.env.VITE_ENV !== 'PROD' && (
-                    <div className='mx-6 flex items-center justify-between pb-6'>
+                    <div className='mx-6 flex! items-center justify-between pb-6'>
                       <Typography variant='body-medium' className='flex items-center gap-1'>
                         <StatusIndicator type={isBackendConnected ? 'success' : 'danger'} />
                         <span>Backend connection status</span>
diff --git a/frontend/src/components/Layout/Header.tsx b/frontend/src/components/Layout/Header.tsx
index 4278e2072..00abe00a9 100644
--- a/frontend/src/components/Layout/Header.tsx
+++ b/frontend/src/components/Layout/Header.tsx
@@ -83,7 +83,7 @@ const Header: React.FC<HeaderProp> = ({ chatOnly, deleteOnClick, setOpenConnecti
             <Typography variant='h6' as='a' href='#app-bar-with-responsive-menu'>
               <img
                 src={colorMode === 'dark' ? Neo4jLogoBW : Neo4jLogoColor}
-                className='h-8 min-h-8 min-w-8'
+                className='h-8! min-h-8 min-w-8'
                 alt='Neo4j Logo'
               />
             </Typography>
diff --git a/frontend/src/components/Popups/ChunkPopUp/index.tsx b/frontend/src/components/Popups/ChunkPopUp/index.tsx
index e2170fe9e..1db028508 100644
--- a/frontend/src/components/Popups/ChunkPopUp/index.tsx
+++ b/frontend/src/components/Popups/ChunkPopUp/index.tsx
@@ -33,7 +33,7 @@ const ChunkPopUp = ({
   return (
     <Dialog isOpen={showChunkPopup} onClose={onClose}>
       <Dialog.Header>
-        <div className='flex flex-row items-center mb-2'>
+        <div className='flex! flex-row items-center mb-2'>
           <img
             src={chunklogo}
             style={{ width: isTablet ? 100 : 140, height: isTablet ? 100 : 140, marginRight: 10 }}
@@ -48,7 +48,7 @@ const ChunkPopUp = ({
           </div>
         </div>
         {!chunksLoading && totalPageCount != null && totalPageCount > 0 && (
-          <div className='flex flex-row justify-end'>
+          <div className='flex! flex-row justify-end'>
             <Typography variant='subheading-small'>Total Pages: {totalPageCount}</Typography>
           </div>
         )}
@@ -57,9 +57,9 @@ const ChunkPopUp = ({
         {chunksLoading ? (
           <Loader title='loading...'></Loader>
         ) : (
-          <ol className='max-h-80 overflow-y-auto flex flex-col gap-4'>
+          <ol className='max-h-80 overflow-y-auto flex! flex-col gap-4'>
             {sortedChunksData.map((c) => (
-              <li key={`${c.position}`} className='flex flex-row gap-1'>
+              <li key={`${c.position}`} className='flex! flex-row gap-1'>
                 <Flex flexDirection='column' gap='2'>
                   <Flex flexDirection='row'>
                     <Typography variant='label'>Position :</Typography>
diff --git a/frontend/src/components/Popups/ExpirationModal/ExpiredFilesAlert.tsx b/frontend/src/components/Popups/ExpirationModal/ExpiredFilesAlert.tsx
index 2207c866a..c1e1b98c3 100644
--- a/frontend/src/components/Popups/ExpirationModal/ExpiredFilesAlert.tsx
+++ b/frontend/src/components/Popups/ExpirationModal/ExpiredFilesAlert.tsx
@@ -12,7 +12,7 @@ import { IconWithToolTip } from '../../UI/IconButtonToolTip';
 const ExpiredFilesAlert: FC<LargefilesProps> = ({ Files, handleToggle, checked }) => {
   return (
     <div className='n-bg-palette-neutral-bg-weak p-4'>
-      <div className='flex flex-row pb-6 items-center mb-2'>
+      <div className='flex! flex-row pb-6 items-center mb-2'>
         <img
           style={{ width: 95, height: 95, marginRight: 10, alignSelf: 'flex-start' }}
           src={BellImage}
diff --git a/frontend/src/components/Popups/GraphEnhancementDialog/AdditionalInstructions/index.tsx b/frontend/src/components/Popups/GraphEnhancementDialog/AdditionalInstructions/index.tsx
index 9e94c1d8b..aeaa9eaef 100644
--- a/frontend/src/components/Popups/GraphEnhancementDialog/AdditionalInstructions/index.tsx
+++ b/frontend/src/components/Popups/GraphEnhancementDialog/AdditionalInstructions/index.tsx
@@ -94,7 +94,7 @@ export default function AdditionalInstructionsText({
             size='small'
           />
         </Flex>
-        <Flex className='mt-4! mb-2 flex items-center' flexDirection='row' justifyContent='flex-end'>
+        <Flex className='mt-4! mb-2 flex! items-center' flexDirection='row' justifyContent='flex-end'>
           <Flex flexDirection='row' gap='4'>
             <ButtonWithToolTip
               placement='top'
diff --git a/frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/EntityExtractionSetting.tsx b/frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/EntityExtractionSetting.tsx
index edec205c8..81076ea54 100644
--- a/frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/EntityExtractionSetting.tsx
+++ b/frontend/src/components/Popups/GraphEnhancementDialog/EnitityExtraction/EntityExtractionSetting.tsx
@@ -303,8 +303,7 @@ export default function EntityExtractionSetting({
           }}
           type='creatable'
         />
-
-        <Flex className='mt-4! mb-2 flex items-center' flexDirection='row' justifyContent='flex-end'>
+        <Flex className='mt-4! mb-2 flex! items-center' flexDirection='row' justifyContent='flex-end'>
           <Flex flexDirection='row' gap='4'>
             <ButtonWithToolTip
               loading={loading}
diff --git a/frontend/src/components/Popups/GraphEnhancementDialog/index.tsx b/frontend/src/components/Popups/GraphEnhancementDialog/index.tsx
index fba3737b7..313d80eae 100644
--- a/frontend/src/components/Popups/GraphEnhancementDialog/index.tsx
+++ b/frontend/src/components/Popups/GraphEnhancementDialog/index.tsx
@@ -41,7 +41,7 @@ export default function GraphEnhancementDialog({ open, onClose }: { open: boolea
     >
       <Dialog.Header className='flex justify-between self-end mb-0! '>
         <div className='n-bg-palette-neutral-bg-weak px-4'>
-          <div className='flex flex-row items-center mb-2'>
+          <div className='flex! flex-row items-center mb-2'>
             <img
               src={graphenhancement}
               style={{
diff --git a/frontend/src/components/Popups/LargeFilePopUp/LargeFilesAlert.tsx b/frontend/src/components/Popups/LargeFilePopUp/LargeFilesAlert.tsx
index a107dcb2f..ca438b07b 100644
--- a/frontend/src/components/Popups/LargeFilePopUp/LargeFilesAlert.tsx
+++ b/frontend/src/components/Popups/LargeFilePopUp/LargeFilesAlert.tsx
@@ -31,7 +31,7 @@ const LargeFilesAlert: FC<LargefilesProps> = ({ Files, handleToggle, checked })
   );
   return (
     <div className='n-bg-palette-neutral-bg-weak p-4'>
-      <div className='flex flex-row pb-6 items-center mb-2'>
+      <div className='flex! flex-row pb-6 items-center mb-2'>
         <img
           style={{ width: 95, height: 95, marginRight: 10, alignSelf: 'flex-start' }}
           src={BellImage}
diff --git a/frontend/src/components/User/Profile.tsx b/frontend/src/components/User/Profile.tsx
index dd614ef1f..38c26b93f 100644
--- a/frontend/src/components/User/Profile.tsx
+++ b/frontend/src/components/User/Profile.tsx
@@ -30,11 +30,7 @@ export default function Profile() {
   }
   if (isAuthenticated) {
     return (
-      <div
-        className='hidden 
-    md:flex md:p-1.5 md:gap-2 md:h-12 md:items-center md:inline-block 
-    md:border md:border-[rgb(var(--theme-palette-neutral-border-strong))] md:rounded-xl'
-      >
+      <div className=' p-1.5 h-12 profile-container'>
         <>
           <Avatar
             className='md:flex hidden'
diff --git a/frontend/src/components/WebSources/CustomSourceInput.tsx b/frontend/src/components/WebSources/CustomSourceInput.tsx
index 725930103..8e812fe91 100644
--- a/frontend/src/components/WebSources/CustomSourceInput.tsx
+++ b/frontend/src/components/WebSources/CustomSourceInput.tsx
@@ -62,7 +62,7 @@ export default function CustomSourceInput({
         </div>
       </Box>
       <Flex flexDirection='row' justifyContent='flex-end'>
-        <div>
+        <div className='websource-btn-container'>
           <Button
             isDisabled={value.trim() === ''}
             color='neutral'
diff --git a/frontend/src/components/WebSources/GenericSourceButton.tsx b/frontend/src/components/WebSources/GenericSourceButton.tsx
index 96aab02ff..dc73eb1b2 100644
--- a/frontend/src/components/WebSources/GenericSourceButton.tsx
+++ b/frontend/src/components/WebSources/GenericSourceButton.tsx
@@ -12,7 +12,7 @@ export default function GenericButton({ openModal }: DataComponentProps) {
       <Typography variant='body-small'>
         <Flex gap='0'>
           <span>Web Sources</span>
-          <div className='align-self-center flex justify-center'>
+          <div className='align-self-center flex! justify-center'>
             <IconButtonWithToolTip
               label='Source info'
               clean
diff --git a/frontend/src/components/WebSources/GenericSourceModal.tsx b/frontend/src/components/WebSources/GenericSourceModal.tsx
index e44ebe3c1..b9b75b221 100644
--- a/frontend/src/components/WebSources/GenericSourceModal.tsx
+++ b/frontend/src/components/WebSources/GenericSourceModal.tsx
@@ -39,7 +39,7 @@ export default function GenericModal({
       }}
     >
       <Dialog.Header>
-        <div className='flex flex-row pb-6 items-center mb-2'>
+        <div className='flex! flex-row pb-6 items-center mb-2'>
           <img src={Neo4jDataImportFromCloud} style={{ width: 95, height: 95, marginRight: 10 }} loading='lazy' />
           <div className='flex flex-col'>
             <Typography variant='h2'>Web Sources</Typography>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 55ddc861b..0c6f09cba 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -2,14 +2,6 @@
 
 @config '../tailwind.config.js';
 
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
 @layer base {
   *,
   ::after,
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 5e6341034..96424a7e2 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -4068,9 +4068,8 @@ iterator.prototype@^1.1.2:
     has-symbols "^1.0.3"
     reflect.getprototypeof "^1.0.4"
     set-function-name "^2.0.1"
-
-
 jiti@^2.4.2:
+
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-2.4.2.tgz#d19b7732ebb6116b06e2038da74a55366faef560"
   integrity sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==
@@ -4157,7 +4156,6 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-
 lightningcss-darwin-arm64@1.29.1:
   version "1.29.1"
   resolved "https://registry.yarnpkg.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.1.tgz#dce17349c7b9f968f396ec240503de14e7b4870b"
@@ -4863,7 +4861,6 @@ picocolors@^1.0.0, picocolors@^1.0.1:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
   integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
 
-
 picocolors@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
@@ -5673,14 +5670,12 @@ tailwindcss@4.0.7, tailwindcss@^4.0.7:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-4.0.7.tgz#b3e26a5dda77651808a873f1b535cc8c39fcb0ae"
   integrity sha512-yH5bPPyapavo7L+547h3c4jcBXcrKwybQRjwdEIVAd9iXRvy/3T1CC6XSQEgZtRySjKfqvo3Cc0ZF1DTheuIdA==
-
-
+  
 tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
 
-
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"