diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx
index 2bd124bd7..e9d59b751 100644
--- a/src/frontend/src/modals/importModal/buttonBox/index.tsx
+++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx
@@ -1,6 +1,7 @@
 import React, { ReactNode } from "react";
 import { DocumentDuplicateIcon } from "@heroicons/react/solid";
 import { classNames } from "../../../utils";
+import Tooltip from "../../../components/TooltipComponent";
 
 export default function ButtonBox({
 	onClick,
@@ -10,7 +11,7 @@ export default function ButtonBox({
 	bgColor,
 	textColor,
 	deactivate,
-	size
+	size,
 }: {
 	onClick: () => void;
 	title: string;
@@ -18,57 +19,57 @@ export default function ButtonBox({
 	icon: ReactNode;
 	bgColor: string;
 	textColor: string;
-	deactivate?:boolean;
-	size:"small"|"medium"|"big";
+	deactivate?: boolean;
+	size: "small" | "medium" | "big";
 }) {
-	let bigCircle:string;
-	let smallCircle:string;
-	let titleFontSize:string;
-	let descriptionFontSize:string;
-	let padding:string;
-	let marginTop:string;
-	let height:string;
-	let widht:string;
-	switch(size){
+	let bigCircle: string;
+	let smallCircle: string;
+	let titleFontSize: string;
+	let descriptionFontSize: string;
+	let padding: string;
+	let marginTop: string;
+	let height: string;
+	let widht: string;
+	switch (size) {
 		case "small":
-			bigCircle="h-12 w-12";
-			smallCircle ="h-8 w-8";
-			titleFontSize="text-sm";
-			descriptionFontSize="text-xs";
-			padding="p-2";
-			marginTop="mt-2";
-			height="h-36";
-			widht="w-28";
+			bigCircle = "h-12 w-12";
+			smallCircle = "h-8 w-8";
+			titleFontSize = "text-sm";
+			descriptionFontSize = "text-xs";
+			padding = "p-2";
+			marginTop = "mt-2";
+			height = "h-36";
+			widht = "w-28";
 			break;
 		case "medium":
-			bigCircle="h-16 w-16";
-			smallCircle ="h-12 w-12";
-			titleFontSize="text-base";
-			descriptionFontSize="text-sm";
-			padding="p-4";
-			marginTop="mt-3";
-			height="h-44";
-			widht="w-36";
+			bigCircle = "h-16 w-16";
+			smallCircle = "h-12 w-12";
+			titleFontSize = "text-base";
+			descriptionFontSize = "text-sm";
+			padding = "p-4";
+			marginTop = "mt-3";
+			height = "h-44";
+			widht = "w-36";
 			break;
 		case "big":
-			bigCircle="h-20 w-20";
-			smallCircle ="h-16 w-16";
-			titleFontSize="text-lg";
-			descriptionFontSize="text-sm";
-			padding="p-8";
-			marginTop="mt-6";
-			height="h-56";
-			widht="w-44";
+			bigCircle = "h-20 w-20";
+			smallCircle = "h-16 w-16";
+			titleFontSize = "text-lg";
+			descriptionFontSize = "text-sm";
+			padding = "p-8";
+			marginTop = "mt-6";
+			height = "h-56";
+			widht = "w-44";
 			break;
 		default:
-			bigCircle="h-20 w-20";
-			smallCircle ="h-16 w-16";
-			titleFontSize="text-lg";
-			descriptionFontSize="text-sm";
-			padding="p-8";
-			marginTop="mt-6";
-			height="h-56";
-			widht="w-44";
+			bigCircle = "h-20 w-20";
+			smallCircle = "h-16 w-16";
+			titleFontSize = "text-lg";
+			descriptionFontSize = "text-sm";
+			padding = "p-8";
+			marginTop = "mt-6";
+			height = "h-56";
+			widht = "w-44";
 			break;
 	}
 	return (
@@ -82,17 +83,36 @@ export default function ButtonBox({
 				)}
 			>
 				<div className={`flex flex-1 flex-col ${padding}`}>
-					<div className={`mx-auto flex items-center justify-center ${bigCircle} bg-white/30 rounded-full`}>
-						<div className={`mx-auto flex items-center justify-center ${smallCircle} bg-white rounded-full`}>
-                            <div className={textColor}>
-                                {icon}
-                            </div>
+					<div
+						className={`mx-auto flex items-center justify-center ${bigCircle} bg-white/30 rounded-full`}
+					>
+						<div
+							className={`mx-auto flex items-center justify-center ${smallCircle} bg-white rounded-full`}
+						>
+							<div className={textColor}>{icon}</div>
 						</div>
 					</div>
-					<h3 className={classNames("font-semibold text-white",titleFontSize,marginTop)}>{title}</h3>
+					<h3
+						className={classNames(
+							"font-semibold text-white",
+							titleFontSize,
+							marginTop
+						)}
+					>
+						{title}
+					</h3>
 					<div className="mt-1 flex flex-grow flex-col justify-between">
 						<dt className="sr-only">{title}</dt>
-						<dd className={classNames("text-gray-100",descriptionFontSize)}>{deactivate? "Coming soon":description}</dd>
+						<Tooltip title={description} placement="bottom">
+							<dd
+								className={classNames(
+									"text-gray-100 line-clamp-2",
+									descriptionFontSize
+								)}
+							>
+								{deactivate ? "Coming soon" : description}
+							</dd>
+						</Tooltip>
 					</div>
 				</div>
 			</div>
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index df39875c8..eec06add1 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -26,7 +26,7 @@ export default function ImportModal() {
 	const [showExamples, setShowExamples] = useState(false);
 	const [loadingExamples, setLoadingExamples] = useState(false);
 	const [examples, setExamples] = useState<FlowType[]>([]);
-	const { uploadFlow } = useContext(TabsContext);
+	const { uploadFlow, addFlow } = useContext(TabsContext);
 	function setModalOpen(x: boolean) {
 		setOpen(x);
 		if (x === false) {
@@ -181,12 +181,13 @@ export default function ImportModal() {
 														<ButtonBox
 															size="small"
 															bgColor="bg-slate-300"
-															description="Prebuilt Examples"
+															description={example.description??"Prebuilt Examples"}
 															icon={
 																<DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
 															}
 															onClick={() => {
-																console.log("click");
+																addFlow(example)
+																setModalOpen(false)
 															}}
 															textColor="text-slate-400"
 															title={example.name}