Position the logo and title components

web/components/ui/Content/Content.module.scss

@@ -17,6 +17,11 @@
   display: grid;
 }
 
+.buttonsLogoTitleSection {
+  margin-left: 1.5vw;
+  margin-right: 1.5vw;
+}
+
 .pageContentSection {
   background-color: var(--theme-background-secondary);
   border-radius: var(--theme-rounded-corners);
@@ -25,6 +30,29 @@
   width: 100%;
 }
 
+.logoTitleSection {
+  display: flex;
+  flex-direction: row;
+}
+
+.titleSection {
+  display: flex;
+  flex-direction: column;
+  margin-top: 20px;
+  margin-left: 10px;
+
+  .title {
+    font-size: 2.5vw;
+    font-weight: bold;
+    color: var(--theme-text-primary);
+  }
+
+  .subtitle {
+    font-size: 1.6vw;
+    font-weight: bold;
+  }
+}
+
 @media (min-width: 768px) {
   .mobileChat {
     display: none;

web/components/ui/Content/Content.tsx

@@ -1,5 +1,5 @@
 import { useRecoilValue } from 'recoil';
-import { Layout, Button, Tabs, Typography } from 'antd';
+import { Layout, Button, Tabs } from 'antd';
 import {
   chatVisibilityAtom,
   clientConfigStateAtom,
@@ -29,7 +29,6 @@ import ServerLogo from '../Logo/Logo';
 
 const { TabPane } = Tabs;
 const { Content } = Layout;
-const { Title } = Typography;
 
 export default function ContentComponent() {
   const status = useRecoilValue<ServerStatus>(serverStatusState);
@@ -74,19 +73,30 @@ export default function ContentComponent() {
           lastDisconnectTime={lastDisconnectTime}
           viewerCount={viewerCount}
         />
-        <ActionButtonRow>
+        <div className={s.buttonsLogoTitleSection}>
-          {externalActionButtons}
+          <ActionButtonRow>
-          <Button>Follow</Button>
+            {externalActionButtons}
-          <NotifyReminderPopup visible notificationClicked={() => {}} notificationClosed={() => {}}>
+            <Button>Follow</Button>
-            <Button>Notify</Button>
+            <NotifyReminderPopup
-          </NotifyReminderPopup>
+              visible
-        </ActionButtonRow>
+              notificationClicked={() => {}}
+              notificationClosed={() => {}}
+            >
+              <Button>Notify</Button>
+            </NotifyReminderPopup>
+          </ActionButtonRow>
+
+          <div className={`${s.lowerRow}`}>
+            <div className={s.logoTitleSection}>
+              <ServerLogo src="/logo" />
+              <div className={s.titleSection}>
+                <div className={s.title}>{name}</div>
+                <div className={s.subtitle}>{title}</div>
+                <div>{tags.length > 0 && tags.map(tag => <span key={tag}>#{tag}&nbsp;</span>)}</div>
+              </div>
+            </div>
+          </div>
 
-        <div className={`${s.lowerRow}`}>
-          <ServerLogo src="/logo" />
-          <Title level={2}>{name}</Title>
-          {online && title !== '' && <Title level={3}>{title}</Title>}
-          <div>{tags.length > 0 && tags.map(tag => <span key={tag}>#{tag}&nbsp;</span>)}</div>
           <Tabs defaultActiveKey="1">
             <TabPane tab="About" key="1" className={`${s.pageContentSection}`}>
               <SocialLinks links={socialHandles} />