diff --git a/frontend/src/app/terms-and-conditions/page.tsx b/frontend/src/app/terms-and-conditions/page.tsx
index 065947c30..d6381f6ca 100644
--- a/frontend/src/app/terms-and-conditions/page.tsx
+++ b/frontend/src/app/terms-and-conditions/page.tsx
@@ -7,7 +7,7 @@ export const metadata: Metadata = {
 
 export default function TermsAndConditions() {
   return (
-    <div className="p-20 xs:m-12 sm:m-12 xs:text-xs sm:text-sm">
+    <div className="p-20 sm:p-10 xs:text-xs sm:text-sm">
       <h1 className="text-lg font-bold">Terms and Conditions</h1>
       <br />
       <p>
diff --git a/frontend/src/components/TruncatedDescription/TruncatedDescription.tsx b/frontend/src/components/TruncatedDescription/TruncatedDescription.tsx
index 0e2ea920d..e08fa3074 100644
--- a/frontend/src/components/TruncatedDescription/TruncatedDescription.tsx
+++ b/frontend/src/components/TruncatedDescription/TruncatedDescription.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export default function TruncatedDescription({
   content,
@@ -9,26 +9,63 @@ export default function TruncatedDescription({
   content: string;
   maxCharacters: number;
 }) {
+  
   const [showFullContent, setShowFullContent] = useState(false);
+  const [exceed, setExceed] = useState(false);
+  const [shortenedContent, setShortenedContent] = useState(" ");
 
-  const shortenedContent =
-    content.length < maxCharacters
-      ? content
-      : `${content.slice(0, maxCharacters)}...`;
+  /**
+   * If the content exceeds the maxCharacters, find the next whitespace
+   * and make the cutoff point there so the break does not happen mid-word
+   * 
+   * If the new cutoff point is the end of the entire content, make it so
+   * the See More/Less button does not appear
+   */
+  useEffect(() => {
+    if (content.length > maxCharacters) {
+      // Description exceeds max characters
+      setShowFullContent(false);
+      let newMax = maxCharacters;
+      let index = newMax - 1;
+      while (true) {
+        if (content[index] === ' ' || index === content.length) {
+          newMax = index;
+          break;
+        }
+        newMax++;
+        index++;
+      }
+      if (index === content.length) {
+        setShortenedContent(content);
+      } else {
+        setExceed(true);
+        setShortenedContent(content.slice(0, newMax) + '...');
+      }
+    } else {
+      // Description length is less than maxCharacters
+      setShowFullContent(true);
+      setExceed(false);
+      setShortenedContent(content);
+    }
+  }, [content])
 
   return (
     <div>
-      <p className="whitespace-pre-line break-all inline">
-        {showFullContent ? content : shortenedContent}{" "}
+      <p className="whitespace-pre-line text-justify">
+        {showFullContent ? content : shortenedContent}
       </p>
-      {content.length > maxCharacters && (
-        <button
-          className="text-unilectives-blue hover:underline"
-          onClick={() => setShowFullContent((prev) => !prev)}
-        >
-          {showFullContent ? "See Less" : "See More"}
-        </button>
-      )}
+      <div className="mt-1">
+        {exceed && 
+          (
+            <button
+              className="text-unilectives-blue hover:underline"
+              onClick={() => setShowFullContent((prev) => !prev)}
+            >
+              {showFullContent ? "See Less" : "See More"}
+            </button>
+          )
+        }
+      </div>
     </div>
   );
 }