diff --git a/packages/connect-react/CHANGELOG.md b/packages/connect-react/CHANGELOG.md
index 2d7a9befc78af..74bf96e59f6fe 100644
--- a/packages/connect-react/CHANGELOG.md
+++ b/packages/connect-react/CHANGELOG.md
@@ -1,6 +1,14 @@
 <!-- markdownlint-disable MD024 -->
 # Changelog
 
+# [1.0.0-preview.27] - 2025-01-30
+ 
+- Add styling to alerts
+
+# [1.0.0-preview.26] - 2025-01-29
+
+- No change
+
 # [1.0.0-preview.25] - 2025-01-28
 
 - Show prop labels instead of values after selecting dynamic props
diff --git a/packages/connect-react/examples/nextjs/package-lock.json b/packages/connect-react/examples/nextjs/package-lock.json
index a68badecb0ec5..602bed07c206e 100644
--- a/packages/connect-react/examples/nextjs/package-lock.json
+++ b/packages/connect-react/examples/nextjs/package-lock.json
@@ -23,7 +23,7 @@
     },
     "../..": {
       "name": "@pipedream/connect-react",
-      "version": "1.0.0-preview.25",
+      "version": "1.0.0-preview.27",
       "license": "MIT",
       "dependencies": {
         "@pipedream/sdk": "workspace:^",
diff --git a/packages/connect-react/package.json b/packages/connect-react/package.json
index 87e983de987df..a9b76237249a2 100644
--- a/packages/connect-react/package.json
+++ b/packages/connect-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pipedream/connect-react",
-  "version": "1.0.0-preview.26",
+  "version": "1.0.0-preview.27",
   "description": "Pipedream Connect library for React",
   "files": [
     "dist"
diff --git a/packages/connect-react/src/components/Alert.tsx b/packages/connect-react/src/components/Alert.tsx
index 7ab65eb74c769..3d7bc2db3c6fc 100644
--- a/packages/connect-react/src/components/Alert.tsx
+++ b/packages/connect-react/src/components/Alert.tsx
@@ -1,10 +1,65 @@
 import type { ConfigurablePropAlert } from "@pipedream/sdk";
+import Markdown from "react-markdown";
 
 type AlertProps = {
   prop: ConfigurablePropAlert;
 };
 
 export function Alert({ prop }: AlertProps) {
-  // XXX useCustomize, getClassNames
-  return <p className={`pd-alert-${prop.alertType}`}>{prop.content}</p>;
+  const baseStyles = {
+    background: "#e2e3e5",
+    borderRadius: "10px",
+    paddingTop: "2px",
+    paddingLeft: "10px",
+    paddingRight: "10px",
+    paddingBottom: "2px",
+  }
+
+  const warningStyles = {
+    ...baseStyles,
+    background: "#fff3cd",
+  };
+
+  const infoStyles = {
+    ...baseStyles,
+    background: "#d1ecf1",
+  }
+
+  const errorStyles = {
+    ...baseStyles,
+    background: "#f8d7da",
+  }
+
+  const neutralStyles = {
+    ...baseStyles,
+    background: "#fffff2",
+  }
+
+  let alertStyles = {}
+  switch (prop.alertType) {
+  case "info":
+    alertStyles = infoStyles
+    break
+  case "neutral":
+    alertStyles = neutralStyles
+    break
+  case "warning":
+    alertStyles = warningStyles
+    break
+  case "error":
+    alertStyles = errorStyles
+    break
+  default:
+    alertStyles = baseStyles
+  }
+
+  return (<div className={`pd-alert-${prop.alertType}`} style={alertStyles}>
+    <Markdown components={{
+      a: ({ ...props }) => {
+        return <a {...props} target="_blank" rel="noopener noreferrer" />;
+      },
+    }}>
+      {prop.content}
+    </Markdown>
+  </div>)
 }
diff --git a/packages/connect-react/src/components/Description.tsx b/packages/connect-react/src/components/Description.tsx
index b8b2f8d376c5e..0b8366d722ce3 100644
--- a/packages/connect-react/src/components/Description.tsx
+++ b/packages/connect-react/src/components/Description.tsx
@@ -41,5 +41,11 @@ export function Description<T extends ConfigurableProps, U extends ConfigurableP
   if (!prop.description) {
     return null;
   }
-  return <div className={getClassNames("description", props)} style={getStyles("description", baseStyles, props)}><Markdown>{markdown}</Markdown></div>;
+  return <div className={getClassNames("description", props)} style={getStyles("description", baseStyles, props)}> <Markdown components={{
+    a: ({ ...props }) => {
+      return <a {...props} target="_blank" rel="noopener noreferrer" />;
+    },
+  }}>
+    {markdown}
+  </Markdown></div>;
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3f5858a965ed2..15b4cebcd9e9e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -292,8 +292,7 @@ importers:
         specifier: ^3.0.1
         version: 3.0.3
 
-  components/adobe_document_generation_api:
-    specifiers: {}
+  components/adobe_document_generation_api: {}
 
   components/adobe_pdf_services:
     dependencies:
@@ -10501,8 +10500,7 @@ importers:
 
   components/syncro: {}
 
-  components/synthflow:
-    specifiers: {}
+  components/synthflow: {}
 
   components/t2m_url_shortener: {}
 
@@ -31754,6 +31752,8 @@ snapshots:
       '@putout/operator-filesystem': 5.0.0(putout@36.13.1(eslint@8.57.1)(typescript@5.6.3))
       '@putout/operator-json': 2.2.0
       putout: 36.13.1(eslint@8.57.1)(typescript@5.6.3)
+    transitivePeerDependencies:
+      - supports-color
 
   '@putout/operator-regexp@1.0.0(putout@36.13.1(eslint@8.57.1)(typescript@5.6.3))':
     dependencies: