diff --git a/app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/anvilTemplates/react.ts b/app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/anvilTemplates/react.ts
index fe8b35746299..7cb2e9daf649 100644
--- a/app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/anvilTemplates/react.ts
+++ b/app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/anvilTemplates/react.ts
@@ -8,89 +8,131 @@ export default {
 <div id="root"></div>
 `,
     css: `.app {
-	justify-content: center;
-	border: none;
-	border-radius: var(--appsmith-theme-border-radius-elevation-3);
+  height: calc(var(--appsmith-ui-height) * 1px);
+  width: calc(var(--appsmith-ui-width) * 1px);
+  justify-content: center;
+  border-radius: var(--appsmith-theme-border-radius-elevation-3);
+  padding: 29px 25px;
+  box-sizing: border-box;
+  font-family: system-ui;
+  background: #fff;
 }
 
 .tip-container {
   margin-bottom: 20px;
+  font-size: 14px;
+  line-height: 1.571429;
 }
 
 .tip-container h2 {
   margin-bottom: 20px;
-	font-size: 16px;
-	font-weight: 700;
+  font-size: 16px;
+  font-weight: 700;
 }
 
 .tip-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: baseline;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 9px;
 }
 
 .tip-header div {
-	color: #999;
+  color: #999;
+}
+
+.content {
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 14px;
+  line-height: 1.571429;
 }
 
 .button-container {
-	text-align: right;
+  text-align: right;
+  padding-top: 4px;
 }
 
 .button-container button {
   margin: 0 10px;
-	border-radius: var(--appsmith-theme-border-radius-elevation-3);
+  cursor: pointer;
+  border-radius: var(--appsmith-theme-border-radius-elevation-3);
+  padding: 6px 16px;
+  background: none;
+  height: auto;
+  transition: all 0.3s ease;
 }
 
 .button-container button.primary {
-	background: var(--appsmith-theme-color-bg-accent) !important;
+  background: var(--appsmith-theme-color-bg-accent) !important;
+  color: #fff;
+  border: 1px solid var(--appsmith-theme-color-bg-accent) !important;
+}
+
+.button-container button.primary:hover {
+  opacity: 0.8;
 }
 
 .button-container button.reset {
-	color: var(--appsmith-theme-color-bg-accent) !important;
-	border-color: var(--appsmith-theme-color-bg-accent) !important;
+  border: 1px solid #999;
+  color: #999;
+  outline: none;
+  box-shadow: none;
+}
+
+.button-container button.reset:hover:not(:disabled) {
+  color: var(--appsmith-theme-color-bg-accent);
+  border-color: var(--appsmith-theme-color-bg-accent);
+}
+
+.button-container button.reset:disabled {
+  cursor: default;
 }`,
     js: `import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm'
 import reactDom from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm'
-import { Button, Card } from 'https://cdn.jsdelivr.net/npm/antd@5.15.0/+esm'
-import Markdown from 'https://cdn.jsdelivr.net/npm/react-markdown@9.0.1/+esm'
 
-function App() {
-	const [currentIndex, setCurrentIndex] = React.useState(0);
-
-	const handleNext = () => {
-		setCurrentIndex((prevIndex) => (prevIndex + 1) % appsmith.model.tips.length);
-	};
-
-	const handleReset = () => {
-		setCurrentIndex(0);
-		appsmith.triggerEvent("onResetClick");
-	};
-
-	return (
-		<Card className="app">
-			<div className="tip-container">
-				<div className="tip-header">
-					<h2>Custom Widget</h2>
-					<div>{currentIndex + 1} / {appsmith.model.tips.length}		</div>
-				</div>
-				<Markdown>{appsmith.model.tips[currentIndex]}</Markdown>
-			</div>
-			<div className="button-container">
-				<Button className="primary" onClick={handleNext} type="primary">Next Tip</Button>
-				<Button onClick={handleReset}>Reset</Button>
-			</div>
-	</Card>
+const Button = ({ children, className, ...props }) => (
+  <button className={className} {...props}>
+    {children}
+  </button>
 );
+
+function App() {
+  const [currentIndex, setCurrentIndex] = React.useState(0);
+
+  const handleNext = () => {
+    setCurrentIndex((prevIndex) => (prevIndex + 1) % appsmith.model.tips.length);
+  };
+
+  const handleReset = () => {
+    setCurrentIndex(0);
+    appsmith.triggerEvent("onResetClick");
+  };
+
+  return (
+    <div className="app">
+      <div className="tip-container">
+        <div className="tip-header">
+          <h2>Custom Widget</h2>
+          <div>{currentIndex + 1} / {appsmith.model.tips.length}</div>
+        </div>
+        <div className="content">{appsmith.model.tips[currentIndex]}</div>
+      </div>
+      <div className="button-container">
+        <Button className="primary" onClick={handleNext}>Next Tip</Button>
+        <Button className="reset" disabled={currentIndex === 0} onClick={handleReset}>Reset</Button>
+      </div>
+    </div>
+  );
 }
 
 appsmith.onReady(() => {
-	/*
-	 * This handler function will get called when parent application is ready.
-	 * Initialize your component here
-	 * more info - ${CUSTOM_WIDGET_ONREADY_DOC_URL}
-	 */
-	reactDom.render(<App />, document.getElementById("root"));
+  /*
+   * This handler function will get called when parent application is ready.
+   * Initialize your component here
+   * more info - ${CUSTOM_WIDGET_ONREADY_DOC_URL}
+   */
+  reactDom.render(<App />, document.getElementById("root"));
 });`,
   },
 };
diff --git a/app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/react.ts b/app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/react.ts
index 511e102373d2..1397131a7f02 100644
--- a/app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/react.ts
+++ b/app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/react.ts
@@ -13,14 +13,20 @@ export default {
 	justify-content: center;
 	border-radius: var(--appsmith-theme-borderRadius);
 	box-shadow: var(--appsmith-theme-boxShadow);
+	padding: 29px 25px;
+	box-sizing: border-box;
+	font-family: system-ui;
+	background: #fff;
 }
 
 .tip-container {
-  margin-bottom: 20px;
+	margin-bottom: 20px;
+	font-size: 14px;
+	line-height: 1.571429;
 }
 
 .tip-container h2 {
-  margin-bottom: 20px;
+	margin-bottom: 20px;
 	font-size: 16px;
 	font-weight: 700;
 }
@@ -29,33 +35,64 @@ export default {
 	display: flex;
 	justify-content: space-between;
 	align-items: baseline;
+	margin-bottom: 9px;
 }
 
 .tip-header div {
 	color: #999;
 }
 
+.content {
+	white-space: pre-wrap;
+	word-break: break-word;
+	font-size: 14px;
+	line-height: 1.571429;
+}
+
 .button-container {
 	text-align: right;
+	padding-top: 4px;
 }
 
 .button-container button {
-  margin: 0 10px;
+	margin: 0 10px;
+	cursor: pointer;
 	border-radius: var(--appsmith-theme-borderRadius);
+	padding: 6px 16px;
+	background: none;
+	height: auto;
+	transition: all 0.3s ease;
 }
 
 .button-container button.primary {
 	background: var(--appsmith-theme-primaryColor) !important;
+	color: #fff;
+	border: 1px solid var(--appsmith-theme-primaryColor) !important;
 }
 
 .button-container button.reset {
-	color: var(--appsmith-theme-primaryColor) !important;
-	border-color: var(--appsmith-theme-primaryColor) !important;
+	border: 1px solid #999;
+	color: #999;
+	outline: none;
+	box-shadow: none;
+}
+
+.button-container button.reset:hover:not(:disabled) {
+	color: var(--appsmith-theme-primaryColor);
+	border-color: var(--appsmith-theme-primaryColor);
+}
+
+.button-container button.reset:disabled {
+	cursor: default;
 }`,
     js: `import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm'
 import reactDom from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm'
-import { Button, Card } from 'https://cdn.jsdelivr.net/npm/antd@5.15.0/+esm'
-import Markdown from 'https://cdn.jsdelivr.net/npm/react-markdown@9.0.1/+esm'
+
+const Button = ({ children, className, ...props }) => (
+	<button className={className} {...props}>
+		{children}
+	</button>
+);
 
 function App() {
 	const [currentIndex, setCurrentIndex] = React.useState(0);
@@ -70,20 +107,20 @@ function App() {
 	};
 
 	return (
-		<Card className="app">
+		<div className="app">
 			<div className="tip-container">
 				<div className="tip-header">
 					<h2>Custom Widget</h2>
-					<div>{currentIndex + 1} / {appsmith.model.tips.length}		</div>
+					<div>{currentIndex + 1} / {appsmith.model.tips.length}</div>
 				</div>
-				<Markdown>{appsmith.model.tips[currentIndex]}</Markdown>
+				<div className="content">{appsmith.model.tips[currentIndex]}</div>
 			</div>
 			<div className="button-container">
-				<Button className="primary" onClick={handleNext} type="primary">Next Tip</Button>
-				<Button onClick={handleReset}>Reset</Button>
+				<Button className="primary" onClick={handleNext}>Next Tip</Button>
+				<Button className="reset" disabled={currentIndex === 0} onClick={handleReset}>Reset</Button>
 			</div>
-	</Card>
-);
+		</div>
+	);
 }
 
 appsmith.onReady(() => {
diff --git a/app/client/src/widgets/CustomWidget/widget/defaultApp.ts b/app/client/src/widgets/CustomWidget/widget/defaultApp.ts
index ab51cbccece2..83ce2072780c 100644
--- a/app/client/src/widgets/CustomWidget/widget/defaultApp.ts
+++ b/app/client/src/widgets/CustomWidget/widget/defaultApp.ts
@@ -6,91 +6,128 @@ export default {
 <div id="root"></div>
 `,
     css: `.app {
-  width: calc(1px * var(--appsmith-ui-width));
+  height: calc(var(--appsmith-ui-height) * 1px);
+  width: calc(var(--appsmith-ui-width) * 1px);
   justify-content: center;
-  border-radius: 0px;
-  border: none;
-  
-  .tip-container {
-    margin-bottom: 20px;
-
-    h2 {
-      margin-bottom: 20px;
-      font-size: 16px;
-      font-weight: 700;
-    }
-
-    .tip-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: baseline;
-
-      div {
-        color: #999;
-      }
-    }
-  }
-	
-	.button-container {
-      text-align: right;
-
-      button {
-        margin: 0 10px;
-        border-radius: var(--appsmith-theme-borderRadius) !important;
-
-        &.primary {
-          background: var(--appsmith-theme-primaryColor) !important;
-        }
-
-        &.reset:not([disabled]) {
-          color: var(--appsmith-theme-primaryColor) !important;
-          border-color: var(--appsmith-theme-primaryColor) !important;
-        }
-      }
-    }
+  border-radius: var(--appsmith-theme-borderRadius);
+  box-shadow: var(--appsmith-theme-boxShadow);
+  padding: 29px 25px;
+  box-sizing: border-box;
+  font-family: system-ui;
+  background: #fff;
 }
-`,
+
+.tip-container {
+  margin-bottom: 20px;
+  font-size: 14px;
+  line-height: 1.571429;
+}
+
+.tip-container h2 {
+  margin-bottom: 20px;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.tip-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 9px;
+}
+
+.tip-header div {
+  color: #999;
+}
+
+.content {
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 14px;
+  line-height: 1.571429;
+}
+
+.button-container {
+  text-align: right;
+  padding-top: 4px;
+}
+
+.button-container button {
+  margin: 0 10px;
+  cursor: pointer;
+  border-radius: var(--appsmith-theme-borderRadius);
+  padding: 6px 16px;
+  background: none;
+  height: auto;
+  transition: all 0.3s ease;
+}
+
+.button-container button.primary {
+  background: var(--appsmith-theme-primaryColor) !important;
+  color: #fff;
+  border: 1px solid var(--appsmith-theme-primaryColor) !important;
+}
+
+.button-container button.reset {
+  border: 1px solid #999;
+  color: #999;
+  outline: none;
+  box-shadow: none;
+}
+
+.button-container button.reset:hover:not(:disabled) {
+  color: var(--appsmith-theme-primaryColor);
+  border-color: var(--appsmith-theme-primaryColor);
+}
+
+.button-container button.reset:disabled {
+  cursor: default;
+}`,
     js: `import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm'
 import reactDom from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm'
-import { Button, Card } from 'https://cdn.jsdelivr.net/npm/antd@5.15.0/+esm'
-import Markdown from 'https://cdn.jsdelivr.net/npm/react-markdown@9.0.1/+esm';
 
-function App() {
-	const [currentIndex, setCurrentIndex] = React.useState(0);
-
-	const handleNext = () => {
-		setCurrentIndex((prevIndex) => (prevIndex + 1) % appsmith.model.tips.length);
-	};
-
-	const handleReset = () => {
-		setCurrentIndex(0);
-		appsmith.triggerEvent("onResetClick");
-	};
-
-	return (
-		<Card className="app">
-			<div className="tip-container">
-				<div className="tip-header">
-					<h2>Custom Widget</h2>
-					<div>{currentIndex + 1} / {appsmith.model.tips.length}		</div>
-				</div>
-				<Markdown>{appsmith.model.tips[currentIndex]}</Markdown>
-			</div>
-			<div className="button-container">
-				<Button className="primary" onClick={handleNext} type="primary">Next Tip</Button>
-				<Button className="reset" disabled={currentIndex === 0} onClick={handleReset}>Reset</Button>
-			</div>
-	</Card>
+const Button = ({ children, className, ...props }) => (
+  <button className={className} {...props}>
+    {children}
+  </button>
 );
+
+function App() {
+  const [currentIndex, setCurrentIndex] = React.useState(0);
+
+  const handleNext = () => {
+    setCurrentIndex((prevIndex) => (prevIndex + 1) % appsmith.model.tips.length);
+  };
+
+  const handleReset = () => {
+    setCurrentIndex(0);
+    appsmith.triggerEvent("onResetClick");
+  };
+
+  return (
+    <div className="app">
+      <div className="tip-container">
+        <div className="tip-header">
+          <h2>Custom Widget</h2>
+          <div>{currentIndex + 1} / {appsmith.model.tips.length}</div>
+        </div>
+        <div className="content">{appsmith.model.tips[currentIndex]}</div>
+      </div>
+      <div className="button-container">
+        <Button className="primary" onClick={handleNext}>Next Tip</Button>
+        <Button className="reset" disabled={currentIndex === 0} onClick={handleReset}>Reset</Button>
+      </div>
+    </div>
+  );
 }
 
 appsmith.onReady(() => {
-	/*
+/*
 	 * This handler function will get called when parent application is ready.
 	 * Initialize your component here
 	 * more info - ${CUSTOM_WIDGET_ONREADY_DOC_URL}
 	 */
-	reactDom.render(<App />, document.getElementById("root"));
+  reactDom.render(<App />, document.getElementById("root"));
 });`,
   },
   srcDoc: {
@@ -98,53 +135,94 @@ appsmith.onReady(() => {
 <div id="root"></div>
 `,
     css: `.app {
-	width: calc(var(--appsmith-ui-width) * 1px);
-	justify-content: center;
-	border-radius: 0px;
-	border: none;
+  height: calc(var(--appsmith-ui-height) * 1px);
+  width: calc(var(--appsmith-ui-width) * 1px);
+  justify-content: center;
+  border-radius: var(--appsmith-theme-borderRadius);
+  box-shadow: var(--appsmith-theme-boxShadow);
+  padding: 29px 25px;
+  box-sizing: border-box;
+  font-family: system-ui;
+  background: #fff;
 }
 
 .tip-container {
   margin-bottom: 20px;
+  font-size: 14px;
+  line-height: 1.571429;
 }
 
 .tip-container h2 {
   margin-bottom: 20px;
-	font-size: 16px;
-	font-weight: 700;
+  font-size: 16px;
+  font-weight: 700;
 }
 
 .tip-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: baseline;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 9px;
 }
 
 .tip-header div {
-	color: #999;
+  color: #999;
+}
+
+.content {
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 14px;
+  line-height: 1.571429;
 }
 
 .button-container {
-	text-align: right;	
+  text-align: right;
+  padding-top: 4px;
 }
 
 .button-container button {
   margin: 0 10px;
-	border-radius: var(--appsmith-theme-borderRadius) !important;
+  cursor: pointer;
+  border-radius: var(--appsmith-theme-borderRadius);
+  padding: 6px 16px;
+  background: none;
+  height: auto;
+  transition: all 0.3s ease;
 }
 
 .button-container button.primary {
-	background: var(--appsmith-theme-primaryColor) !important;
+  background: var(--appsmith-theme-primaryColor) !important;
+  color: #fff;
+  border: 1px solid var(--appsmith-theme-primaryColor) !important;
 }
 
-.button-container button.reset:not([disabled]) {
-	color: var(--appsmith-theme-primaryColor) !important;
-	border-color: var(--appsmith-theme-primaryColor) !important;
+.button-container button.reset {
+  border: 1px solid #999;
+  color: #999;
+  outline: none;
+  box-shadow: none;
+}
+
+.button-container button.reset:hover:not(:disabled) {
+  color: var(--appsmith-theme-primaryColor);
+  border-color: var(--appsmith-theme-primaryColor);
+}
+
+.button-container button.reset:disabled {
+  cursor: default;
 }`,
     js: `import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm';
 import reactDom from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm';
-import { Button, Card } from 'https://cdn.jsdelivr.net/npm/antd@5.15.0/+esm';
-import Markdown from 'https://cdn.jsdelivr.net/npm/react-markdown@9.0.1/+esm';
+
+const Button = ({
+  children,
+  className,
+  ...props
+}) => /*#__PURE__*/React.createElement("button", {
+  className: className,
+  ...props
+}, children);
 
 function App() {
   const [currentIndex, setCurrentIndex] = React.useState(0);
@@ -155,24 +233,26 @@ function App() {
     setCurrentIndex(0);
     appsmith.triggerEvent("onResetClick");
   };
-  return /*#__PURE__*/React.createElement(Card, {
-    className: "app",
+  return /*#__PURE__*/React.createElement("div", {
+    className: "app"
   }, /*#__PURE__*/React.createElement("div", {
     className: "tip-container"
   }, /*#__PURE__*/React.createElement("div", {
     className: "tip-header"
-  }, /*#__PURE__*/React.createElement("h2", null, "Custom Widget"), /*#__PURE__*/React.createElement("div", null, currentIndex + 1, " / ", appsmith.model.tips.length, "  ")), /*#__PURE__*/React.createElement(Markdown, null, appsmith.model.tips[currentIndex])), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("h2", null, "Custom Widget"), /*#__PURE__*/React.createElement("div", null, currentIndex + 1, " / ", appsmith.model.tips.length)), /*#__PURE__*/React.createElement("div", {
+    className: "content"
+  }, appsmith.model.tips[currentIndex])), /*#__PURE__*/React.createElement("div", {
     className: "button-container"
   }, /*#__PURE__*/React.createElement(Button, {
     className: "primary",
-    onClick: handleNext,
-    type: "primary"
+    onClick: handleNext
   }, "Next Tip"), /*#__PURE__*/React.createElement(Button, {
-	className: "reset",
-	disabled: currentIndex === 0,
+    className: "reset",
+    disabled: currentIndex === 0,
     onClick: handleReset
   }, "Reset")));
 }
+
 appsmith.onReady(() => {
   reactDom.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("root"));
 });`,