diff --git a/src/components/App/SideBar/Relevance/index.tsx b/src/components/App/SideBar/Relevance/index.tsx
index 2592603ec..7f2d867ad 100644
--- a/src/components/App/SideBar/Relevance/index.tsx
+++ b/src/components/App/SideBar/Relevance/index.tsx
@@ -1,10 +1,11 @@
 import { Button } from '@mui/material'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import styled from 'styled-components'
-import { Flex } from '~/components/common/Flex'
 import { ScrollView } from '~/components/ScrollView'
+import { Flex } from '~/components/common/Flex'
 import { useAppStore } from '~/stores/useAppStore'
 import { useDataStore, useFilteredNodes } from '~/stores/useDataStore'
+import { useModal } from '~/stores/useModalStore'
 import { NodeExtended } from '~/types'
 import { formatDescription } from '~/utils/formatDescription'
 import { saveConsumedContent } from '~/utils/relayHelper'
@@ -41,6 +42,8 @@ export const Relevance = ({ isSearchResult }: Props) => {
     [filteredNodes, endSlice],
   )
 
+  const { open: openContentAddModal } = useModal('addContent')
+
   const handleNodeClick = useCallback(
     (node: NodeExtended) => {
       saveConsumedContent(node)
@@ -95,25 +98,31 @@ export const Relevance = ({ isSearchResult }: Props) => {
           )
         })}
 
-        <LoadMoreWrapper align="center" background="BG1" direction="row" justify="center">
-          <Button
-            disabled={!hasNext}
-            onClick={() => {
-              if (hasNext) {
-                setCurrentPage(currentPage + 1)
-                scrollViewRef.current?.scrollTo(0, 0)
-              }
-            }}
-            size="medium"
-          >
-            Load More
-          </Button>
-        </LoadMoreWrapper>
+        <ContentControlsWrapper align="center" background="BG1" direction="row" justify="center">
+          {currentNodes.length !== 0 ? (
+            <Button
+              disabled={!hasNext}
+              onClick={() => {
+                if (hasNext) {
+                  setCurrentPage(currentPage + 1)
+                  scrollViewRef.current?.scrollTo(0, 0)
+                }
+              }}
+              size="medium"
+            >
+              Load More
+            </Button>
+          ) : (
+            <Button onClick={openContentAddModal} size="medium">
+              Add Content
+            </Button>
+          )}
+        </ContentControlsWrapper>
       </ScrollView>
     </>
   )
 }
 
-const LoadMoreWrapper = styled(Flex)`
+const ContentControlsWrapper = styled(Flex)`
   flex: 0 0 86px;
 `
diff --git a/src/components/App/SideBar/Trending/index.tsx b/src/components/App/SideBar/Trending/index.tsx
index 5969e75c7..4f4b43532 100644
--- a/src/components/App/SideBar/Trending/index.tsx
+++ b/src/components/App/SideBar/Trending/index.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from '@mui/material'
+import { Button, Skeleton } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
 import { ClipLoader } from 'react-spinners'
@@ -69,11 +69,19 @@ export const Trending = ({ onSubmit }: Props) => {
           </>
         ) : (
           <>
-            {trendingTopics.map((i) => (
-              <Flex key={i} className="list-item" onClick={() => selectTrending(i)}>
-                #{i}
-              </Flex>
-            ))}
+            {trendingTopics.length !== 0 ? (
+              <>
+                {trendingTopics.map((i) => (
+                  <Flex key={i} className="list-item" onClick={() => selectTrending(i)}>
+                    #{i}
+                  </Flex>
+                ))}
+              </>
+            ) : (
+              <TrendingTopicsNoContent align="center" background="BG1" direction="row" justify="center">
+                <Button size="medium">No Trends</Button>
+              </TrendingTopicsNoContent>
+            )}
           </>
         )}
       </ul>
@@ -106,6 +114,7 @@ const Wrapper = styled(Flex)`
     padding: 0;
     margin: 0;
     cursor: pointer;
+    position: relative;
 
     &-item {
       padding: 18px 16px 18px 24px;
@@ -136,3 +145,11 @@ const StyledSkeleton = styled(Skeleton)`
     background: rgba(0, 0, 0, 0.15);
   }
 `
+
+const TrendingTopicsNoContent = styled(Flex)`
+  flex: 0 0 86px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, 50%);
+`