diff --git a/components/desc-box.tsx b/components/desc-box.tsx
index b494f56..839ef1a 100644
--- a/components/desc-box.tsx
+++ b/components/desc-box.tsx
@@ -1,6 +1,6 @@
 const DescriptionBox = ({ ...props }) => (
   <div className="container mx-auto p-8 px-4 md:px-16 lg:px-64 xl:px-96">
-    <div className="border-2 border-dashed rounded-lg p-4 border-amber-400 dark:border-amber-500 break-all">
+    <div className="border-2 border-dashed rounded-lg p-4 border-amber-400 dark:border-amber-500">
       {props.children}
     </div>
   </div>
diff --git a/components/past-event.tsx b/components/past-event.tsx
index ceb33d3..3740b0a 100644
--- a/components/past-event.tsx
+++ b/components/past-event.tsx
@@ -84,7 +84,7 @@ const PastEvent = ({ event }: { event: PHEvent }) => {
             } sm:gap-x-4 items-center`}
           >
             <StatsCard event={event} />
-            <div className="sm:max-w-lg md:max-w-xl break-all">
+            <div className="sm:max-w-lg md:max-w-xl">
               <div className="flex flex-col justify-items-center sm:justify-items-end">
                 <div
                   className={`mx-4 mt-4 ${
diff --git a/styles/styles.css b/styles/styles.css
index 93131de..bbab045 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -17,6 +17,7 @@
 @layer components {
   .desc {
     @apply text-amber-500 hover:text-amber-400 transition;
+    word-break: break-word;
   }
   .text-shadow {
     text-shadow: 0 0 6px #fbbf24;