diff --git a/components/recents/Recents.tsx b/components/recents/Recents.tsx
index 20f3db7..fcf283c 100644
--- a/components/recents/Recents.tsx
+++ b/components/recents/Recents.tsx
@@ -42,7 +42,7 @@ export default function Recents() {
 
   // fetchData reads all notes.
   const fetchData = async () => {
-    try { setRecentsData(await db.notes.readAll()) }
+    try { setRecentsData(await db.notes.getRecents(cardCount)) }
     catch (error) {
       let description = 'An unknown error has occurred'
       if (error instanceof Error) {
@@ -67,12 +67,12 @@ export default function Recents() {
   if (recentsData && recentsData.length > 0) {
     const recentsCardsList = recentsData.slice(0, cardCount).map((note, i) => (
       <div key={i}
-        onClick={() => router.push(`/note?id=${note.id}`) }
+      onClick={() => router.push(`/note?id=${note.id}`) }
         className="opacity-0 animate-fade-in"
         style={{ animationDelay: `${i * 0.06}s` }}>
         <RecentsCard
           title={note.title}
-          desc={note.content}
+          desc={note.contentPreview || ''}
           atime={note.atime}
         />
       </div>
diff --git a/components/recents/RecentsCard.tsx b/components/recents/RecentsCard.tsx
index 50bbde3..48337e3 100644
--- a/components/recents/RecentsCard.tsx
+++ b/components/recents/RecentsCard.tsx
@@ -24,7 +24,7 @@ const RecentsCard = ({title, desc, atime} : RecentsCardsProps) => (
   <div className='w-[344px] h-[77px] bg-white rounded-md border border-[#979797] grid grid-cols-[3fr_1fr] my-1'>
     <div className="p-2">
       <p className='font-extrabold text-sm line-clamp-1'>{title}</p>
-      <p className='font-light text-sm line-clamp-2'>{desc}</p>
+      <p className='font-light text-sm line-clamp-2 break-all overflow-ellipsis'>{desc}</p>
     </div>
     <div className='flex items-center justify-center'>
       <p className='text-sm font-light'>{timeAgo(atime)}</p>
diff --git a/lib/controller/NoteController.ts b/lib/controller/NoteController.ts
index 0318ab8..81a63bc 100644
--- a/lib/controller/NoteController.ts
+++ b/lib/controller/NoteController.ts
@@ -8,6 +8,7 @@ export type Note = {
   atime           : number
   mtime           : number
   snippetContent? : string
+  contentPreview? : string
 }
 
 // NoteController manages notes in the database.
@@ -60,9 +61,12 @@ class NoteController extends Database {
     return await this.select<Note>(`SELECT * FROM Notes;`)
   }
 
+  // Gets notes to load into recents menu.
+  // Count should be number of cards that can fit on screen.
   async getRecents(count: number) : Promise<Note[]> {
     await this.ensureConnected()
-    const query = `SELECT * FROM Notes ORDER BY atime DESC LIMIT ?;`
+    const query = `SELECT id, title, atime, SUBSTR(content, 1, 65) AS contentPreview 
+                  FROM Notes ORDER BY atime DESC LIMIT ?;`
     return await this.select<Note>(query, [count])
   }