diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx
index 2e8978597..2f120d30b 100644
--- a/src/frontend/src/modals/importModal/buttonBox/index.tsx
+++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect } from "react";
+import React, { ReactNode, useEffect, useRef, useState } from "react";
 import { DocumentDuplicateIcon } from "@heroicons/react/solid";
 import { classNames } from "../../../utils";
 import Tooltip from "../../../components/TooltipComponent";
@@ -24,7 +24,7 @@ export default function ButtonBox({
 }) {
   let bigCircle: string;
   let smallCircle: string;
-  let titleFontSize: string;
+  let titleFontSize: number;
   let descriptionFontSize: string;
   let padding: string;
   let marginTop: string;
@@ -36,19 +36,19 @@ export default function ButtonBox({
     case "small":
       bigCircle = "h-12 w-12";
       smallCircle = "h-8 w-8";
-      titleFontSize = "text-sm";
+      titleFontSize = 14;
       descriptionFontSize = "text-xs";
       padding = "p-2 py-3";
       marginTop = "mt-2";
       height = "h-36";
       textHeight = 70;
-      textWidth = 80;
+      textWidth = 40;
       width = "w-32";
       break;
     case "medium":
       bigCircle = "h-16 w-16";
       smallCircle = "h-12 w-12";
-      titleFontSize = "text-base";
+      titleFontSize = 16;
       descriptionFontSize = "text-sm";
       padding = "p-4 py-5";
       marginTop = "mt-3";
@@ -60,7 +60,7 @@ export default function ButtonBox({
     case "big":
       bigCircle = "h-20 w-20";
       smallCircle = "h-16 w-16";
-      titleFontSize = "text-lg";
+      titleFontSize = 18;
       descriptionFontSize = "text-sm";
       padding = "p-8 py-10";
       marginTop = "mt-6";
@@ -70,7 +70,7 @@ export default function ButtonBox({
     default:
       bigCircle = "h-20 w-20";
       smallCircle = "h-16 w-16";
-      titleFontSize = "text-lg";
+      titleFontSize = 18;
       descriptionFontSize = "text-sm";
       padding = "p-8 py-10";
       marginTop = "mt-6";
@@ -79,43 +79,36 @@ export default function ButtonBox({
       break;
   }
 
-  const titleRef = React.useRef<HTMLHeadingElement>(null);
+  const [fontSize, setFontSize] = useState<number>(16); // Initial font size value
+
+  const titleRef = useRef<HTMLHeadingElement>(null);
+  const parentDivRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const resizeFont = () => {
-      const titleElement = titleRef.current;
-      if (titleElement) {
-        const containerWidth = titleElement.offsetWidth;
-        const containerHeight = titleElement.offsetHeight;
-
-        const titleComputedStyle = window.getComputedStyle(titleElement);
-        const titleWidth = titleElement.getBoundingClientRect().width;
-
-        const currentFontSize = parseFloat(titleComputedStyle.fontSize);
-
-        const desiredWidth = textWidth - 10; // Subtracting the desired padding
-
-        // Calculate the desired font size based on the adjusted width
-        let desiredFontSize = currentFontSize * (desiredWidth / titleWidth);
-
-        // Adjust the desired font size to fit within the container height, if needed
-        const maxHeight = containerHeight - 10; // Subtracting the desired top padding
-        const maxHeightFontSize = maxHeight * 0.8; // Adjust the scaling factor as needed
-        desiredFontSize = Math.min(desiredFontSize, maxHeightFontSize);
-
-        // Apply the desired font size and padding to the title element
-        titleElement.style.fontSize = `${desiredFontSize}px`;
-        titleElement.style.paddingLeft = "5px";
-        titleElement.style.paddingRight = "5px";
-      }
-    };
-
-    resizeFont();
-    window.addEventListener("resize", resizeFont);
-    return () => {
-      window.removeEventListener("resize", resizeFont);
-    };
-  }, []);
+	const textElement = titleRef.current;
+	const parentDivElement = parentDivRef.current;
+  
+	if (!textElement || !parentDivElement) return;
+  
+	const parentDivHeight = parentDivElement.offsetHeight;
+	const parentDivWidth = parentDivElement.offsetWidth;
+	let textElementHeight = textElement.scrollHeight;
+	let textElementWidth = textElement.scrollWidth;
+  
+	if (textElementHeight > parentDivHeight || textElementWidth > parentDivWidth) {
+	  let newFontSize = fontSize;
+  
+	  while (textElementHeight > parentDivHeight || textElementWidth > parentDivWidth) {
+		newFontSize -= 1;
+		textElement.style.fontSize = `${newFontSize}px`;
+		textElementHeight = textElement.scrollHeight;
+		textElementWidth = textElement.scrollWidth;
+	  }
+  
+	  setFontSize(newFontSize);
+	}
+  }, [title, size, fontSize]);
+  
 
   return (
     <button disabled={deactivate} onClick={onClick}>
@@ -129,7 +122,7 @@ export default function ButtonBox({
         )}
       >
         <div
-          className={`flex items-center justify-center ${bigCircle} bg-white/30 dark:bg-white/30 rounded-full`}
+          className={`flex items-center justify-center ${bigCircle} bg-white/30 dark:bg-white/30 rounded-full mb-1`}
         >
           <div
             className={`flex items-center justify-center ${smallCircle} bg-white dark:bg-white/80 rounded-full`}
@@ -137,16 +130,16 @@ export default function ButtonBox({
             <div className={textColor}>{icon}</div>
           </div>
         </div>
-        <h3
+		<div ref={parentDivRef} className="w-full h-1/2 mt-auto">
+		<div
           ref={titleRef}
           className={classNames(
-            " font-semibold text-white dark:text-white/80",
-
-            marginTop
+            " font-semibold text-white h-full dark:text-white/80",
           )}
         >
           {title}
-        </h3>
+        </div>
+		</div>
       </div>
     </button>
   );