diff --git a/src/components/styled/Home.styled.jsx b/src/components/styled/Home.styled.jsx
index f8c81fa8..3ab9b6cd 100644
--- a/src/components/styled/Home.styled.jsx
+++ b/src/components/styled/Home.styled.jsx
@@ -171,6 +171,11 @@ export const Boards = styled.div`
padding: 0;
padding-bottom: .5em;
background: #fff;
+ word-wrap: break-word;
+
+ #subscriptions {
+ text-align: left;
+ }
`;
export const BoardsTitle = styled.div`
@@ -237,6 +242,22 @@ export const BoardsContent = styled.div`
padding: 0 2px;
white-space: pre-line;
}
+
+ h3 {
+ font-size: 100%;
+ font-weight: 700;
+ text-align: left;
+ }
+
+ .boardlink {
+ color: #800;
+ text-decoration: none;
+
+ :hover {
+ text-decoration: underline;
+ color: #e00
+ }
+ }
`;
export const Footer = styled.div`
diff --git a/src/components/views/Home.jsx b/src/components/views/Home.jsx
index 1155aec1..c1fda378 100644
--- a/src/components/views/Home.jsx
+++ b/src/components/views/Home.jsx
@@ -1,6 +1,6 @@
import React, { useEffect, useRef, useState } from 'react';
import { Helmet } from 'react-helmet-async';
-import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Link, useNavigate } from 'react-router-dom';
import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/Home.styled';
@@ -31,6 +31,7 @@ const Home = () => {
setSelectedTitle
} = useGeneralStore(state => state);
+ const account = useAccount();
const inputRef = useRef(null);
const navigate = useNavigate();
@@ -98,9 +99,30 @@ const Home = () => {
+ {account.subscriptions?.length > 0 ? (
+
+
+ Board Subscriptions
+
+
+
+ You have subscribed to {account.subscriptions.length} board{account.subscriptions.length > 1 ? "s" : null}
+
+
+ {account.subscriptions.map((subscription, index) => (
+ <>
+
+ {subscription}
+
+
+ >
+ ))}
+
+
+ ) : null}
- Popular boards
+ Popular Boards
{defaultSubplebbits.map(subplebbit => (