diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx
index 61719cea3f..513b210a0a 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx
@@ -3,6 +3,7 @@ import { RootState } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
 import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
+import { AnimatePresence } from 'framer-motion';
 import ParamSDXLConcatButton from './ParamSDXLConcatButton';
 import ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning';
 import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning';
@@ -24,28 +25,32 @@ export default function ParamSDXLPromptArea() {
         gap: 2,
       }}
     >
-      {shouldConcatSDXLStylePrompt && (
-        <Box
-          sx={{
-            position: 'absolute',
-            w: 'full',
-            top: shouldPinParametersPanel ? '119px' : '175px',
-          }}
-        >
-          <SDXLConcatLink />
-        </Box>
-      )}
-      {shouldConcatSDXLStylePrompt && (
-        <Box
-          sx={{
-            position: 'absolute',
-            w: 'full',
-            top: shouldPinParametersPanel ? '263px' : '319px',
-          }}
-        >
-          <SDXLConcatLink />
-        </Box>
-      )}
+      <AnimatePresence>
+        {shouldConcatSDXLStylePrompt && (
+          <Box
+            sx={{
+              position: 'absolute',
+              w: 'full',
+              top: shouldPinParametersPanel ? '119px' : '175px',
+            }}
+          >
+            <SDXLConcatLink />
+          </Box>
+        )}
+      </AnimatePresence>
+      <AnimatePresence>
+        {shouldConcatSDXLStylePrompt && (
+          <Box
+            sx={{
+              position: 'absolute',
+              w: 'full',
+              top: shouldPinParametersPanel ? '263px' : '319px',
+            }}
+          >
+            <SDXLConcatLink />
+          </Box>
+        )}
+      </AnimatePresence>
       <ParamPositiveConditioning />
       <ParamSDXLConcatButton />
       <ParamSDXLPositiveStyleConditioning />
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx
index c4a7caf1d5..ac21ceebc8 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx
@@ -1,7 +1,21 @@
 import { Box, Flex } from '@chakra-ui/react';
+import { CSSObject } from '@emotion/react';
 import { motion } from 'framer-motion';
 import { FaLink } from 'react-icons/fa';
 
+const sharedConcatLinkStyle: CSSObject = {
+  position: 'absolute',
+  bg: 'none',
+  w: 'full',
+  minH: 2,
+  borderRadius: 0,
+  borderLeft: 'none',
+  borderRight: 'none',
+  zIndex: 2,
+  maskImage:
+    'radial-gradient(circle at center, black, black 65%, black 30%, black 15%, transparent)',
+};
+
 export default function SDXLConcatLink() {
   return (
     <Flex
@@ -16,29 +30,23 @@ export default function SDXLConcatLink() {
         as={motion.div}
         initial={{
           scaleX: 0,
-          borderRadius: 0,
           borderWidth: 0,
           display: 'none',
         }}
         animate={{
           display: ['block', 'block', 'block', 'none'],
           scaleX: [0, 0.25, 0.5, 1],
-          borderRadius: [0, 0, 0, 3],
           borderWidth: [0, 3, 3, 0],
-          transition: { duration: 0.5, times: [0, 0.25, 0.5, 1] },
+          transition: { duration: 0.37, times: [0, 0.25, 0.5, 1] },
         }}
         sx={{
-          position: 'absolute',
           top: '1px',
-          bg: 'none',
-          w: 'full',
-          minH: 2,
           borderTop: 'none',
-          borderTopRadius: 0,
-          borderColor: 'accent.300',
+          borderColor: 'base.400',
           zIndex: 2,
+          ...sharedConcatLinkStyle,
           _dark: {
-            borderColor: 'accent.600',
+            borderColor: 'accent.500',
           },
         }}
       />
@@ -47,13 +55,15 @@ export default function SDXLConcatLink() {
         initial={{
           opacity: 0,
           scale: 0,
-          rotate: 0,
         }}
         animate={{
-          rotate: 360,
           opacity: [0, 1, 1, 1],
           scale: [0, 0.75, 1.5, 1],
-          transition: { duration: 0.6, times: [0, 0.25, 0.5, 1] },
+          transition: { duration: 0.42, times: [0, 0.25, 0.5, 1] },
+        }}
+        exit={{
+          opacity: 0,
+          scale: 0,
         }}
         sx={{
           zIndex: 3,
@@ -74,29 +84,22 @@ export default function SDXLConcatLink() {
         as={motion.div}
         initial={{
           scaleX: 0,
-          borderRadius: 0,
           borderWidth: 0,
           display: 'none',
         }}
         animate={{
           display: ['block', 'block', 'block', 'none'],
           scaleX: [0, 0.25, 0.5, 1],
-          borderRadius: [0, 0, 0, 3],
           borderWidth: [0, 3, 3, 0],
-          transition: { duration: 0.5, times: [0, 0.25, 0.5, 1] },
+          transition: { duration: 0.37, times: [0, 0.25, 0.5, 1] },
         }}
         sx={{
-          position: 'absolute',
           top: '17px',
-          bg: 'none',
-          w: 'full',
-          minH: 2,
           borderBottom: 'none',
-          borderBottomRadius: 0,
-          borderColor: 'accent.300',
-          zIndex: 2,
+          borderColor: 'base.400',
+          ...sharedConcatLinkStyle,
           _dark: {
-            borderColor: 'accent.600',
+            borderColor: 'accent.500',
           },
         }}
       />