diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index ffdbb93d3..ec4f7a0c9 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -1,4 +1,4 @@
-import { Box, HStack, VStack } from './../../elements/LayoutPrimitives'
+import { Box, HStack, SpanBox, VStack } from './../../elements/LayoutPrimitives'
 import Dropzone from 'react-dropzone'
 import type {
   LibraryItem,
@@ -828,7 +828,9 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
         >
           {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => (
             <div {...getRootProps({ className: 'dropzone' })}>
-              <p>Drag n drop files anywhere below</p>
+              <Box css={{ color: '$utilityTextDefault', marginTop: '$1'}}>
+                Drag n drop files anywhere below
+              </Box>
               <input {...getInputProps()} />
               {!props.isValidating && props.items.length == 0 ? (
                 <EmptyLibrary
@@ -940,7 +942,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
           )}
         </Dropzone>
       </VStack>
-
       {/* Temporary code */}
       <div>
         <strong>Files:</strong>
@@ -949,8 +950,8 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
             <li key={fileName}>{fileName}</li>
           ))}
         </ul>
-      </div> {/* Temporary code */}
-
+      </div>{' '}
+      {/* Temporary code */}
       {props.showAddLinkModal && (
         <AddLinkModal onOpenChange={() => props.setShowAddLinkModal(false)} />
       )}
diff --git a/packages/web/components/templates/library/LibraryList.tsx b/packages/web/components/templates/library/LibraryList.tsx
index 1ced0a1b2..1347fb1f8 100644
--- a/packages/web/components/templates/library/LibraryList.tsx
+++ b/packages/web/components/templates/library/LibraryList.tsx
@@ -54,10 +54,12 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
 
   return (
     <Box css={{ overflowY: 'scroll' }}>
-      <Dropzone onDrop={handleDrop} preventDropOnDocument={true} noClick={true} >
+      <Dropzone onDrop={handleDrop} preventDropOnDocument={true} noClick={true}>
         {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => (
           <div {...getRootProps({ className: 'dropzone' })}>
-            <p>Drag n drop files anywhere below</p>
+            <Box css={{ color: '$utilityTextDefault', marginTop: '$1'}}>
+              Drag n drop files anywhere below
+            </Box>
             <input {...getInputProps()} />
 
             <Masonry
@@ -113,7 +115,6 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
           </div>
         )}
       </Dropzone>
-
       {/* Temporary code */}
       <div>
         <strong>Files:</strong>
@@ -122,8 +123,8 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
             <li key={fileName}>{fileName}</li>
           ))}
         </ul>
-      </div> {/* Temporary code */}
-
+      </div>{' '}
+      {/* Temporary code */}
       {/* Extra padding at bottom to give space for scrolling */}
       <Box css={{ width: '100%', height: '200px' }} />
     </Box>