diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/GridRows.jsx b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/GridRows.jsx
index 35b0f016e5..dc86117a1d 100644
--- a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/GridRows.jsx
+++ b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/GridRows.jsx
@@ -3,7 +3,7 @@ import React from 'react'
 
 function GridRows(props) {
 
-    const {columns , items, CardComponent, buttonText, onButtonClick, changedColumns} = props;
+    const {columns , items, CardComponent, buttonText, onButtonClick, changedColumns, currentSelected} = props;
     let usedColumns = changedColumns && changedColumns > 0 ? changedColumns : columns
 
     const rows = Math.ceil((items?.length)/usedColumns)
@@ -18,7 +18,7 @@ function GridRows(props) {
                             const itemIndex = index * usedColumns + col;
                             const item = items[itemIndex];
                             if (item) {
-                                return <CardComponent cardObj={item} buttonText={buttonText} key={itemIndex} onButtonClick={onButtonClick}/>;
+                                return <CardComponent currentSelected={currentSelected} cardObj={item} buttonText={buttonText} key={itemIndex} onButtonClick={onButtonClick}/>;
                             }
                         })}
                     </HorizontalGrid>
diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/dashboard.css b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/dashboard.css
index 7c136a4814..56d99e6fff 100644
--- a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/dashboard.css
+++ b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/dashboard.css
@@ -220,4 +220,10 @@
     background-color: #E4E5E7;
     color: #202223 !important;
     font-weight: 550 !important;
+}
+
+.selected-card {
+    border-radius: 8px;
+    border: 1px solid #8C9196 !important;
+    box-shadow: var(--p-shadow-base) !important;
 }
\ No newline at end of file
diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/components/RowCard.jsx b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/components/RowCard.jsx
index 9245dcbd5e..6df6300a1c 100644
--- a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/components/RowCard.jsx
+++ b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/components/RowCard.jsx
@@ -2,7 +2,7 @@ import { Avatar, Button, Card, Text, VerticalStack, HorizontalStack, Badge, Box
 
 function RowCard(props) {
 
-    const {cardObj, onButtonClick, buttonText} = props ;
+    const {cardObj, onButtonClick, buttonText, currentSelected} = props ;
     const goToDocs = () => {
         window.open(cardObj.docsUrl)
     }
@@ -12,28 +12,30 @@ function RowCard(props) {
     }
 
     return (
-        <Card>
-            <VerticalStack gap="5">
-                <div style={{display: 'flex' , justifyContent: 'space-between'}}>
-                    <Box padding={"2"} borderWidth='1' borderColor='border-subdued' borderRadius='2'>
-                    <Avatar customer size="extraSmall" name={cardObj.label} source={cardObj.icon} shape='square'/>
-                    </Box>
-                    <Box paddingBlockStart="1">
-                        {cardObj.badge ? <Badge size='small' status='info'>{cardObj.badge}</Badge> : null}
-                    </Box>
-                </div>
-                <VerticalStack gap="1">
-                    <Text variant="headingMd" as="h5">{cardObj.label}</Text>
-                    <Box minHeight="80px">
-                        <Text variant="bodyMd" color='subdued'>{cardObj.text}</Text>
-                    </Box>
+        <div className={`${currentSelected === cardObj.label ? 'selected-card' : ''}`}>
+            <Card>
+                <VerticalStack gap="5">
+                    <div style={{display: 'flex' , justifyContent: 'space-between'}}>
+                        <Box padding={"2"} borderWidth='1' borderColor='border-subdued' borderRadius='2'>
+                        <Avatar customer size="extraSmall" name={cardObj.label} source={cardObj.icon} shape='square'/>
+                        </Box>
+                        <Box paddingBlockStart="1">
+                            {cardObj.badge ? <Badge size='small' status='info'>{cardObj.badge}</Badge> : null}
+                        </Box>
+                    </div>
+                    <VerticalStack gap="1">
+                        <Text variant="headingMd" as="h5">{cardObj.label}</Text>
+                        <Box minHeight="80px">
+                            <Text variant="bodyMd" color='subdued'>{cardObj.text}</Text>
+                        </Box>
+                    </VerticalStack>
+                    <HorizontalStack gap={"4"} align='start'>
+                        <Button onClick={handleAction}>{buttonText}</Button>
+                        <Button plain onClick={goToDocs} size='medium'>See Docs</Button>
+                    </HorizontalStack>
                 </VerticalStack>
-                <HorizontalStack gap={"4"} align='start'>
-                    <Button onClick={handleAction}>{buttonText}</Button>
-                    <Button plain onClick={goToDocs} size='medium'>See Docs</Button>
-                </HorizontalStack>
-            </VerticalStack>
-        </Card>
+            </Card>
+        </div>
     )
 }
 
diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/components/UpdateConnections.jsx b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/components/UpdateConnections.jsx
index e86c7b1481..09ed014cc8 100644
--- a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/components/UpdateConnections.jsx
+++ b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/components/UpdateConnections.jsx
@@ -59,7 +59,7 @@ function UpdateConnections(props) {
                             <Divider/>
                             <GridRows CardComponent={RowCard} columns="3" 
                             items={obj[key]} buttonText="Connect" onButtonClick={onButtonClick}     
-                            changedColumns={newCol} 
+                            changedColumns={newCol} currentSelected={currentCardObj?.label || ""}
                             />
                             </VerticalStack>
                         )