diff --git a/.changeset/smart-chicken-kick.md b/.changeset/smart-chicken-kick.md
new file mode 100644
index 0000000000..ee13ecfcb8
--- /dev/null
+++ b/.changeset/smart-chicken-kick.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+Fix chat messages with long words from going off the screen
diff --git a/apps/nextjs-website/src/components/atoms/ChatHistoryMessage/ChatHistoryMessage.tsx b/apps/nextjs-website/src/components/atoms/ChatHistoryMessage/ChatHistoryMessage.tsx
index d0ba94c27e..9640300fcb 100644
--- a/apps/nextjs-website/src/components/atoms/ChatHistoryMessage/ChatHistoryMessage.tsx
+++ b/apps/nextjs-website/src/components/atoms/ChatHistoryMessage/ChatHistoryMessage.tsx
@@ -71,7 +71,10 @@ const ChatHistoryMessage = ({
           component='span'
           minWidth='12rem'
           fontWeight={600}
-          sx={{ fontSize: { xs: '1rem', xl: '1.125rem' } }}
+          sx={{
+            fontSize: { xs: '1rem', xl: '1.125rem' },
+            overflowWrap: 'break-word',
+          }}
         >
           {sender}
         </Typography>
@@ -92,7 +95,10 @@ const ChatHistoryMessage = ({
         marginLeft={'1rem'}
         paragraph
         width={'100%'}
-        sx={{ fontSize: { xs: '0.875rem', xl: '1rem' } }}
+        sx={{
+          fontSize: { xs: '0.875rem', xl: '1rem' },
+          overflowWrap: 'break-word',
+        }}
       >
         {parsedChatMessage}
       </Typography>
diff --git a/apps/nextjs-website/src/components/organisms/ChatbotHistoryDetailLayout/ChatbotHistoryDetailLayout.tsx b/apps/nextjs-website/src/components/organisms/ChatbotHistoryDetailLayout/ChatbotHistoryDetailLayout.tsx
index ff87e83151..95958aabfd 100644
--- a/apps/nextjs-website/src/components/organisms/ChatbotHistoryDetailLayout/ChatbotHistoryDetailLayout.tsx
+++ b/apps/nextjs-website/src/components/organisms/ChatbotHistoryDetailLayout/ChatbotHistoryDetailLayout.tsx
@@ -103,7 +103,9 @@ const ChatbotHistoryDetailLayout = ({
           </Button>
         </DialogActions>
       </Dialog>
-      <Typography variant='h4'>{firstQuery.question}</Typography>
+      <Typography variant='h4' sx={{ overflowWrap: 'break-word' }}>
+        {firstQuery.question}
+      </Typography>
       <Stack direction='row' justifyContent='space-between'>
         <Typography
           component='span'