diff --git a/packages/app/src/Element/BackButton.css b/packages/app/src/Element/BackButton.css
index 99b93224d..1317f9e6a 100644
--- a/packages/app/src/Element/BackButton.css
+++ b/packages/app/src/Element/BackButton.css
@@ -6,18 +6,17 @@
   font-size: var(--font-size);
   display: flex;
   align-items: center;
+  border: none !important;
+  box-shadow: none !important;
 }
 
 .back-button svg {
   margin-right: 0.5em;
 }
 
-.back-button:hover {
+.back-button:hover:hover,
+.light .back-button:hover {
   text-decoration: underline;
-}
-
-.back-button:hover {
-  background: none;
-  color: var(--font-color);
-  text-decoration: underline;
-}
+  box-shadow: none !important;
+  background: none !important;
+}
\ No newline at end of file
diff --git a/packages/app/src/Element/FollowsYou.css b/packages/app/src/Element/FollowsYou.css
index 5b91d30fb..fb072101b 100644
--- a/packages/app/src/Element/FollowsYou.css
+++ b/packages/app/src/Element/FollowsYou.css
@@ -3,4 +3,7 @@
   font-size: var(--font-size-tiny);
   margin-left: 0.2em;
   font-weight: normal;
-}
+  padding: 4px 6px;
+  background: var(--bg-secondary);
+  border-radius: 6px;
+}
\ No newline at end of file
diff --git a/packages/app/src/Element/Invoice.css b/packages/app/src/Element/Invoice.css
index e2eade8f9..0df555ade 100644
--- a/packages/app/src/Element/Invoice.css
+++ b/packages/app/src/Element/Invoice.css
@@ -8,6 +8,12 @@
   background: var(--invoice-gradient);
 }
 
+.note-invoice.error {
+  padding: 8px 12px !important;
+  color: #AAA;
+  background: transparent;
+}
+
 .note-invoice.expired {
   background: var(--expired-invoice-gradient);
   color: var(--font-secondary-color);
@@ -86,4 +92,4 @@
   top: 26px;
   right: 20px;
   color: var(--font-color);
-}
+}
\ No newline at end of file
diff --git a/packages/app/src/Element/LinkPreview.css b/packages/app/src/Element/LinkPreview.css
index 8ee8aa9e6..96423c484 100644
--- a/packages/app/src/Element/LinkPreview.css
+++ b/packages/app/src/Element/LinkPreview.css
@@ -8,7 +8,7 @@
   cursor: pointer;
 }
 
-.link-preview-container > a {
+.link-preview-container>a {
   text-decoration: none;
 }
 
@@ -17,22 +17,22 @@
   line-height: 21px;
 }
 
-.link-preview-title > h1 {
+.link-preview-title>h1 {
   padding: 0;
   font-size: 16px;
   font-weight: 700;
 }
 
-.link-preview-container:hover .link-preview-title > h1 {
+.link-preview-container:hover .link-preview-title>h1 {
   color: var(--highlight);
 }
 
-.link-preview-title > small {
+.link-preview-title>small {
   color: var(--font-secondary-color);
   font-size: 14px;
 }
 
-.link-preview-title > small.host {
+.link-preview-title>small.host {
   font-size: 12px;
 }
 
@@ -40,12 +40,23 @@
   margin: 0 0 15px 0 !important;
   border-radius: 0 !important;
   background-image: var(--img-url);
-  min-height: 250px;
+  min-height: 220px;
   max-height: 500px;
   background-size: cover;
   background-position: center;
 }
 
 .light .link-preview-container {
-  background: #ddd;
+  background: #FFF;
+  border: 1px solid var(--border-color);
 }
+
+.light .link-preview-container:hover {
+  box-shadow: rgba(0, 0, 0, 0.08) 0 1px 3px;
+}
+
+@media (min-width: 1025px) {
+  .link-preview-image {
+    min-height: 342px;
+  }
+}
\ No newline at end of file
diff --git a/packages/app/src/Element/Modal.css b/packages/app/src/Element/Modal.css
index 003aab7bc..9380ffa4d 100644
--- a/packages/app/src/Element/Modal.css
+++ b/packages/app/src/Element/Modal.css
@@ -13,8 +13,8 @@
 
 .modal-body {
   background-color: var(--gray-superdark);
-  padding: 16px 24px;
-  border-radius: 12px;
+  padding: 24px;
+  border-radius: 16px;
   display: flex;
   flex-direction: column;
   width: 500px;
@@ -25,3 +25,11 @@
 .modal-body button.secondary:hover {
   background-color: var(--gray);
 }
+
+.light .modal-body {
+  background-color: #FFF;
+}
+
+.modal.spotlight {
+  color: #FFF;
+}
\ No newline at end of file
diff --git a/packages/app/src/Element/Note.css b/packages/app/src/Element/Note.css
index 4245f4507..86683d56c 100644
--- a/packages/app/src/Element/Note.css
+++ b/packages/app/src/Element/Note.css
@@ -2,23 +2,23 @@
   min-height: 110px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 16px;
 }
 
 .note:hover {
   cursor: pointer;
 }
 
-.note > .header .reply {
+.note>.header .reply {
   font-size: 13px;
   color: var(--font-secondary-color);
 }
 
-.note > .header .reply a {
+.note>.header .reply a {
   color: var(--highlight);
 }
 
-.note > .header .reply a:hover {
+.note>.header .reply a:hover {
   text-decoration-color: var(--highlight);
 }
 
@@ -65,6 +65,7 @@
   border: 1px solid var(--gray-superdark);
   border-radius: 12px;
   padding: 8px 16px 16px 16px;
+  margin-top: 16px;
 }
 
 .note .footer .footer-reactions {
@@ -82,12 +83,12 @@
   }
 }
 
-.note > .header img:hover,
-.note > .header .name > .reply:hover {
+.note>.header img:hover,
+.note>.header .name>.reply:hover {
   cursor: pointer;
 }
 
-.note > .note-creator {
+.note>.note-creator {
   margin-top: 12px;
   margin-left: 56px;
 }
@@ -97,7 +98,7 @@
   user-select: none;
 }
 
-.note .poll-body > div {
+.note .poll-body>div {
   border: 1px solid var(--font-secondary-color);
   border-radius: 5px;
   margin-bottom: 3px;
@@ -105,17 +106,17 @@
   overflow: hidden;
 }
 
-.note .poll-body > div > div {
+.note .poll-body>div>div {
   padding: 5px 10px;
   z-index: 2;
 }
 
-.note .poll-body > div:hover {
+.note .poll-body>div:hover {
   cursor: pointer;
   border: 1px solid var(--highlight);
 }
 
-.note .poll-body > div > .progress {
+.note .poll-body>div>.progress {
   background-color: var(--gray);
   height: stretch;
   height: -webkit-fill-available;
@@ -192,6 +193,6 @@
   text-decoration: underline;
 }
 
-.note .body > .text > a {
+.note .body>.text>a {
   color: var(--highlight);
-}
+}
\ No newline at end of file
diff --git a/packages/app/src/Element/NoteCreator.css b/packages/app/src/Element/NoteCreator.css
index 444170171..51c2681c9 100644
--- a/packages/app/src/Element/NoteCreator.css
+++ b/packages/app/src/Element/NoteCreator.css
@@ -12,9 +12,13 @@
 }
 
 .note-creator-modal .note.card {
+  padding: 0;
+  border: none;
+}
+
+.note-creator-modal .note.card.note-quote {
+  border: 1px solid var(--gray);
   padding: 8px 12px;
-  border-radius: 12px;
-  background-color: var(--gray-dark);
 }
 
 .note-creator-modal h4 {
@@ -81,13 +85,13 @@
 .note-create-button {
   width: 48px;
   height: 48px;
-  background-color: var(--highlight);
   color: white;
+  background: linear-gradient(90deg, rgba(239, 150, 68, 1) 0%, rgba(123, 65, 246, 1) 100%);
   border: none;
   border-radius: 100%;
   position: fixed;
-  bottom: 50px;
-  right: calc(((100vw - 640px) / 2) - 60px);
+  bottom: 40px;
+  right: calc(((100vw - 640px) / 2) - 75px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -98,3 +102,14 @@
     right: 16px;
   }
 }
+
+.light .note-creator textarea {
+  background-color: #FFF;
+}
+
+.light .note-creator {
+  box-shadow: 0px 0px 6px 1px rgba(182, 108, 156, 0.3);
+  background: linear-gradient(var(--gray-superdark), var(--gray-superdark)) padding-box,
+    linear-gradient(90deg, #ef9644, #fd7c49, #ff5e58, #ff3b70, #ff088e, #eb00b1, #c31ed5, #7b41f6) border-box;
+
+}
\ No newline at end of file
diff --git a/packages/app/src/Element/NoteCreator.tsx b/packages/app/src/Element/NoteCreator.tsx
index 33cd1b4c2..56310ca57 100644
--- a/packages/app/src/Element/NoteCreator.tsx
+++ b/packages/app/src/Element/NoteCreator.tsx
@@ -300,9 +300,9 @@ export function NoteCreator() {
                         e.target.checked && selectedCustomRelays && selectedCustomRelays.length == a.length - 1
                           ? false
                           : // otherwise return selectedCustomRelays with target relay added / removed
-                            a.filter(el =>
-                              el === r ? e.target.checked : !selectedCustomRelays || selectedCustomRelays.includes(el),
-                            ),
+                          a.filter(el =>
+                            el === r ? e.target.checked : !selectedCustomRelays || selectedCustomRelays.includes(el),
+                          ),
                       ),
                     )
                   }
@@ -397,7 +397,7 @@ export function NoteCreator() {
               <button className="secondary" onClick={cancel}>
                 <FormattedMessage defaultMessage="Cancel" />
               </button>
-              <AsyncButton onClick={onSubmit}>
+              <AsyncButton className="primary" onClick={onSubmit}>
                 {replyTo ? <FormattedMessage defaultMessage="Reply" /> : <FormattedMessage defaultMessage="Send" />}
               </AsyncButton>
             </div>
diff --git a/packages/app/src/Element/NoteFooter.tsx b/packages/app/src/Element/NoteFooter.tsx
index 90bd8eeab..5adce0ca6 100644
--- a/packages/app/src/Element/NoteFooter.tsx
+++ b/packages/app/src/Element/NoteFooter.tsx
@@ -260,10 +260,10 @@ export default function NoteFooter(props: NoteFooterProps) {
     <>
       <div className="footer">
         <div className="footer-reactions">
-          {tipButton()}
-          {reactionIcon()}
-          {repostIcon()}
           {replyIcon()}
+          {repostIcon()}
+          {reactionIcon()}
+          {tipButton()}
           {powIcon()}
         </div>
         {willRenderNoteCreator && <NoteCreator />}
diff --git a/packages/app/src/Element/ProfilePreview.css b/packages/app/src/Element/ProfilePreview.css
index 00211cc0e..c2a0ca5bb 100644
--- a/packages/app/src/Element/ProfilePreview.css
+++ b/packages/app/src/Element/ProfilePreview.css
@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   min-height: 59px;
+  padding: 0 16px;
 }
 
 .profile-preview .pfp {
@@ -18,4 +19,4 @@
 
 .profile-preview button {
   min-width: 98px;
-}
+}
\ No newline at end of file
diff --git a/packages/app/src/Element/Reactions.css b/packages/app/src/Element/Reactions.css
index 24f932768..e8a6f51ef 100644
--- a/packages/app/src/Element/Reactions.css
+++ b/packages/app/src/Element/Reactions.css
@@ -29,11 +29,31 @@
   color: var(--font-tertiary-color);
 }
 
+.reactions-modal .modal-body .tabs.p {
+  padding: 12px 0;
+}
+
 .reactions-modal .modal-body .reactions-header {
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-bottom: 32px;
+  margin-bottom: 12px;
+}
+
+.reactions-modal .modal-body .tab {
+  background: none;
+  border: none;
+}
+
+.reactions-modal .modal-body .tab.active {
+  background: #FFF;
+  color: #000;
+}
+
+.reactions-modal .modal-body .tab:hover {
+  background: rgba(255, 255, 255, 0.8);
+  color: #000;
+  border: none;
 }
 
 .reactions-modal .modal-body .reactions-header h2 {
@@ -47,8 +67,11 @@
 .reactions-modal .modal-body .reactions-body {
   overflow: scroll;
   height: 40vh;
-  -ms-overflow-style: none; /* for Internet Explorer, Edge */
-  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;
+  /* for Internet Explorer, Edge */
+  scrollbar-width: none;
+  /* Firefox */
+  margin-top: 12px;
 }
 
 .reactions-modal .modal-body .reactions-body::-webkit-scrollbar {
@@ -70,6 +93,7 @@
 
 .reactions-item .follow-button {
   margin-left: auto;
+
 }
 
 .reactions-item .zap-reaction-icon {
@@ -91,4 +115,4 @@
   .reactions-modal .modal-body .tab.disabled {
     display: none;
   }
-}
+}
\ No newline at end of file
diff --git a/packages/app/src/Element/RootTabs.css b/packages/app/src/Element/RootTabs.css
index 1e93a1111..9e2df09bd 100644
--- a/packages/app/src/Element/RootTabs.css
+++ b/packages/app/src/Element/RootTabs.css
@@ -4,9 +4,9 @@
   justify-content: center;
 }
 
-.root-type > button {
+.root-type>button {
   background: white;
-  color: black;
+  color: var(--bg-color);
   font-size: 16px;
   padding: 10px 16px;
   border-radius: 1000px;
@@ -14,4 +14,10 @@
   align-items: center;
   justify-content: center;
   gap: 12px;
+  border: 1px solid var(--gray-superdark);
 }
+
+.light .root-type>button {
+  color: var(--font-color);
+  border: 1px solid var(--border-color);
+}
\ No newline at end of file
diff --git a/packages/app/src/Element/Tabs.css b/packages/app/src/Element/Tabs.css
index b6aa14c2e..ce744a261 100644
--- a/packages/app/src/Element/Tabs.css
+++ b/packages/app/src/Element/Tabs.css
@@ -3,8 +3,10 @@
   align-items: center;
   flex-direction: row;
   overflow-x: scroll;
-  -ms-overflow-style: none; /* for Internet Explorer, Edge */
-  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;
+  /* for Internet Explorer, Edge */
+  scrollbar-width: none;
+  /* Firefox */
   white-space: nowrap;
   gap: 8px;
 }
@@ -13,9 +15,23 @@
   display: none;
 }
 
+.light .tab {
+  border: 1px solid var(--border-color);
+
+}
+
+.tab.active {
+  background: var(--gray-superdark);
+}
+
+.light .tab.active {
+  background: #FFF;
+  border-color: #bfc6d6;
+}
+
 .tab {
   background: var(--gray-ultradark);
-  color: var(--font-tertiary-color);
+  color: var(--font-secondary-color);
   border-radius: 100px;
   font-weight: 600;
   font-size: 16px;
@@ -27,11 +43,10 @@
 }
 
 .tab.active {
-  color: black;
-  background: white;
+  color: var(--font-color);
 }
 
-.tabs > div {
+.tabs>div {
   cursor: pointer;
 }
 
@@ -42,5 +57,5 @@
 }
 
 .tab:hover {
-  border-color: var(--font-color);
-}
+  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px;
+}
\ No newline at end of file
diff --git a/packages/app/src/Element/Thread.css b/packages/app/src/Element/Thread.css
index 2969a8219..63af01c1e 100644
--- a/packages/app/src/Element/Thread.css
+++ b/packages/app/src/Element/Thread.css
@@ -7,11 +7,12 @@
   box-shadow: none;
 }
 
-.thread-root.note > .body .text {
-  font-size: 19px;
+.thread-root.note>.body .text {
+  font-size: 18px;
+  line-height: 27px;
 }
 
-.thread-root.note > .footer {
+.thread-root.note>.footer {
   padding-left: 0;
 }
 
@@ -97,4 +98,4 @@
 
 .thread-container .hidden-note {
   padding-left: 48px;
-}
+}
\ No newline at end of file
diff --git a/packages/app/src/Element/Timeline.css b/packages/app/src/Element/Timeline.css
index 199cffbe8..a17aea481 100644
--- a/packages/app/src/Element/Timeline.css
+++ b/packages/app/src/Element/Timeline.css
@@ -10,16 +10,16 @@
 
 .latest-notes-fixed {
   position: fixed;
-  left: calc(50% - 261px / 2 + 0.5px);
+  left: 45%;
   top: 12px;
-  width: 261px;
-  left: calc(50% - 261px / 2 + 0.5px);
+  width: auto;
   z-index: 42;
   opacity: 0.9;
   box-shadow: 0px 0px 15px rgba(78, 0, 255, 0.6);
   color: white;
   background: var(--highlight);
   border-radius: 100px;
+  border: none;
 }
 
 @media (max-width: 520px) {
@@ -36,6 +36,7 @@
   margin: 0;
   margin-right: -26px;
 }
+
 .latest-notes .pfp:last-of-type {
   margin-right: -8px;
 }
@@ -45,4 +46,4 @@
   width: 32px;
   height: 32px;
   border: 2px solid white;
-}
+}
\ No newline at end of file
diff --git a/packages/app/src/Pages/Layout.css b/packages/app/src/Pages/Layout.css
index a42439225..1ff8f8aad 100644
--- a/packages/app/src/Pages/Layout.css
+++ b/packages/app/src/Pages/Layout.css
@@ -20,6 +20,7 @@ header {
   justify-content: space-between;
   align-items: center;
   align-self: stretch;
+  gap: 24px;
 }
 
 .header-actions .avatar {
@@ -33,6 +34,7 @@ header {
   flex-direction: row;
   align-items: center;
   gap: 24px;
+  width: 100%;
 }
 
 .header-actions .btn {
@@ -65,6 +67,11 @@ header {
   border-radius: 1000px;
 }
 
+.light .search {
+  background: #FFF;
+  border: 1px solid var(--border-color);
+}
+
 .search input {
   border: none !important;
   border-radius: 0 !important;
@@ -82,4 +89,4 @@ header {
   .search input {
     display: none;
   }
-}
+}
\ No newline at end of file
diff --git a/packages/app/src/Pages/Layout.tsx b/packages/app/src/Pages/Layout.tsx
index 4de52fde9..cd613a695 100644
--- a/packages/app/src/Pages/Layout.tsx
+++ b/packages/app/src/Pages/Layout.tsx
@@ -93,7 +93,7 @@ export default function Layout() {
 
       {!shouldHideNoteCreator && (
         <>
-          <button className="note-create-button" onClick={handleNoteCreatorButtonClick}>
+          <button className="primary note-create-button" onClick={handleNoteCreatorButtonClick}>
             <Icon name="plus" size={16} />
           </button>
           <NoteCreator />
diff --git a/packages/app/src/Pages/MessagesPage.css b/packages/app/src/Pages/MessagesPage.css
index 133e2e8cb..c941e82d5 100644
--- a/packages/app/src/Pages/MessagesPage.css
+++ b/packages/app/src/Pages/MessagesPage.css
@@ -5,6 +5,12 @@
   height: var(--full-height);
   /* 100vh - header - padding */
   overflow: hidden;
+  padding: 4px;
+}
+
+.dm-page>div:nth-child(1)::-webkit-scrollbar-track {
+  background: transparent !important;
+  ;
 }
 
 /* These should match what is in code too */
@@ -13,7 +19,7 @@
     grid-template-columns: 100vw;
   }
 
-  .dm-page > div:nth-child(1) {
+  .dm-page>div:nth-child(1) {
     margin: 0 !important;
   }
 }
@@ -25,30 +31,31 @@
 }
 
 /* User list */
-.dm-page > div:nth-child(1) {
+.dm-page>div:nth-child(1) {
   overflow-y: auto;
   padding: 0 5px;
 }
 
 /* Chat window */
-.dm-page > div:nth-child(2) {
+.dm-page>div:nth-child(2) {
   padding: 0 12px;
+  margin: 0 4px;
   height: var(--full-height);
   background-color: var(--gray-superdark);
   border-radius: 16px;
 }
 
 /* Profile pannel */
-.dm-page > div:nth-child(3) {
-  margin: 0 10px;
+.dm-page>div:nth-child(3) {
+  margin: 16px;
 }
 
-.dm-page > div:nth-child(3) .avatar {
+.dm-page>div:nth-child(3) .avatar {
   margin-left: auto;
   margin-right: auto;
 }
 
-.dm-page > div:nth-child(3) .card {
+.dm-page>div:nth-child(3) .card {
   cursor: pointer;
 }
 
@@ -56,7 +63,7 @@
   min-width: 100px;
 }
 
-.dm-page .chat-list > div.active {
+.dm-page .chat-list>div.active {
   background-color: var(--gray-superdark);
   border-radius: 16px;
 }
@@ -66,13 +73,13 @@
   overflow-y: auto;
 }
 
-.new-chat-modal .user-list > div {
+.new-chat-modal .user-list>div {
   padding: 8px 12px;
   cursor: pointer;
 }
 
 /* user in list selected */
-.new-chat-modal .user-list > div.active {
+.new-chat-modal .user-list>div.active {
   background-color: var(--gray-dark);
   border-radius: 16px;
 }
@@ -100,4 +107,4 @@
   font-size: 11px;
   letter-spacing: 1.21px;
   text-transform: uppercase;
-}
+}
\ No newline at end of file
diff --git a/packages/app/src/Pages/ProfilePage.css b/packages/app/src/Pages/ProfilePage.css
index e25d57a58..07109574a 100644
--- a/packages/app/src/Pages/ProfilePage.css
+++ b/packages/app/src/Pages/ProfilePage.css
@@ -2,7 +2,9 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  border: 1px solid var(--gray-superdark);
+  border: 1px solid var(--border-color);
+  border-bottom: none;
+  border-top: none;
 }
 
 .profile .banner {
@@ -17,12 +19,14 @@
   display: flex;
   align-items: center;
   align-self: flex-end;
+  gap: 8px;
 }
 
 .profile .icon-actions {
   display: flex;
   flex-direction: row;
   align-items: center;
+  gap: 8px;
 }
 
 .profile .profile-actions button:not(:last-child) {
@@ -39,6 +43,7 @@
     max-width: 720px;
     height: 280px;
   }
+
   .profile .profile-actions button.icon:not(:last-child) {
     margin-right: 2px;
   }
@@ -58,23 +63,23 @@
   white-space: pre-wrap;
 }
 
-.details-wrapper > .name > h2 {
+.details-wrapper>.name>h2 {
   margin: 0 0 4px 0;
   font-weight: 600;
   font-size: 21px;
 }
 
-.details-wrapper > .name > .nip05 {
+.details-wrapper>.name>.nip05 {
   font-size: 15px;
 }
 
-.profile-wrapper > .avatar-wrapper {
+.profile-wrapper>.avatar-wrapper {
   z-index: 1;
   display: flex;
   justify-content: space-between;
 }
 
-.profile-wrapper > .avatar-wrapper .avatar {
+.profile-wrapper>.avatar-wrapper .avatar {
   width: 100px;
   height: 100px;
   background-image: var(--img-url);
@@ -87,7 +92,7 @@
 }
 
 .profile .about {
-  color: var(--font-secondary-color);
+  color: var(--font-color);
   font-size: 16px;
   line-height: 26px;
 }
@@ -138,6 +143,7 @@
 .profile .website a {
   text-decoration: none;
 }
+
 .profile .website a:hover {
   text-decoration: underline;
 }
@@ -205,6 +211,7 @@
 .profile .nip05 .nick {
   display: unset;
 }
+
 .profile .nip05 .domain {
   display: unset;
 }
@@ -222,4 +229,4 @@
 
 .badge-card .body {
   margin-bottom: 0;
-}
+}
\ No newline at end of file
diff --git a/packages/app/src/Pages/ProfilePage.tsx b/packages/app/src/Pages/ProfilePage.tsx
index 905c4620b..e13d92d66 100644
--- a/packages/app/src/Pages/ProfilePage.tsx
+++ b/packages/app/src/Pages/ProfilePage.tsx
@@ -326,14 +326,14 @@ export default function ProfilePage() {
           targets={
             lnurl?.lnurl && id
               ? [
-                  {
-                    type: "lnurl",
-                    value: lnurl?.lnurl,
-                    weight: 1,
-                    name: user?.display_name || user?.name,
-                    zap: { pubkey: id },
-                  } as ZapTarget,
-                ]
+                {
+                  type: "lnurl",
+                  value: lnurl?.lnurl,
+                  weight: 1,
+                  name: user?.display_name || user?.name,
+                  zap: { pubkey: id },
+                } as ZapTarget,
+              ]
               : undefined
           }
           show={showLnQr}
@@ -431,7 +431,7 @@ export default function ProfilePage() {
         <Avatar pubkey={id ?? ""} user={user} />
         <div className="profile-actions">
           {renderIcons()}
-          {!isMe && id && <FollowButton pubkey={id} />}
+          {!isMe && id && <FollowButton className="primary" pubkey={id} />}
         </div>
       </div>
     );
diff --git a/packages/app/src/Pages/settings/Profile.tsx b/packages/app/src/Pages/settings/Profile.tsx
index 68be332dc..738652249 100644
--- a/packages/app/src/Pages/settings/Profile.tsx
+++ b/packages/app/src/Pages/settings/Profile.tsx
@@ -152,7 +152,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
           </h4>
           <input className="w-max" type="text" value={lud16} onChange={e => setLud16(e.target.value)} />
         </div>
-        <AsyncButton onClick={() => saveProfile()}>
+        <AsyncButton className="primary" onClick={() => saveProfile()}>
           <FormattedMessage defaultMessage="Save" />
         </AsyncButton>
       </div>
diff --git a/packages/app/src/Pages/settings/Root.css b/packages/app/src/Pages/settings/Root.css
index 5afcbcc69..c4f6b9da3 100644
--- a/packages/app/src/Pages/settings/Root.css
+++ b/packages/app/src/Pages/settings/Root.css
@@ -9,11 +9,11 @@
   }
 }
 
-.settings-nav > div {
-  border: 1px solid var(--gray-superdark);
+.settings-nav>div {
+  border: 1px solid var(--border-color);
 }
 
-.settings-nav > div.content {
+.settings-nav>div.content {
   padding: 12px 16px;
 }
 
@@ -26,7 +26,7 @@
   grid-template-columns: 24px 1fr 24px;
   align-items: center;
   cursor: pointer;
-  padding: 12px 16px;
+  padding: 12px 0px 12px 16px;
   gap: 8px;
   font-size: 16px;
   font-weight: 600;
@@ -57,6 +57,6 @@
   margin-left: auto;
 }
 
-.settings-group-header .collapse-icon > svg {
+.settings-group-header .collapse-icon>svg {
   width: 8px;
-}
+}
\ No newline at end of file
diff --git a/packages/app/src/Pages/subscribe/ManageSubscription.tsx b/packages/app/src/Pages/subscribe/ManageSubscription.tsx
index 120d138d8..07c90eab3 100644
--- a/packages/app/src/Pages/subscribe/ManageSubscription.tsx
+++ b/packages/app/src/Pages/subscribe/ManageSubscription.tsx
@@ -33,7 +33,7 @@ export default function ManageSubscriptionPage() {
     return <PageSpinner />;
   }
   return (
-    <div className="main-content p flex-column g24">
+    <div className="main-content p flex-column g16">
       <h2>
         <FormattedMessage defaultMessage="Subscriptions" />
       </h2>
@@ -41,7 +41,7 @@ export default function ManageSubscriptionPage() {
         <SubscriptionCard sub={a} key={a.id} />
       ))}
       {subs.length !== 0 && (
-        <button onClick={() => navigate("/subscribe")}>
+        <button className="primary" onClick={() => navigate("/subscribe")}>
           <FormattedMessage defaultMessage="Buy Subscription" />
         </button>
       )}
diff --git a/packages/app/src/Pages/subscribe/SubscriptionCard.tsx b/packages/app/src/Pages/subscribe/SubscriptionCard.tsx
index 87c872ab1..b653972d6 100644
--- a/packages/app/src/Pages/subscribe/SubscriptionCard.tsx
+++ b/packages/app/src/Pages/subscribe/SubscriptionCard.tsx
@@ -62,7 +62,7 @@ export default function SubscriptionCard({ sub }: { sub: Subscription }) {
 
   return (
     <>
-      <div className="p">
+      <div className="p subtier">
         <div className="flex card-title">
           <Icon name="badge" className="mr5" size={25} />
           {mapPlanName(sub.type)}
diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index 10244f841..4309b7c6d 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -15,8 +15,8 @@
   --live: #f83838;
   --heart: #ef4444;
   --zap: #ff710a;
-
   --gray-superlight: #eee;
+  --bg-secondary: #2A2A2A;
   --gray-light: #999;
   --gray-medium: #7b7b7b;
   --gray: #333;
@@ -28,22 +28,20 @@
   --gray-gradient: linear-gradient(to bottom right, var(--gray-superlight), var(--gray), var(--gray-light));
   --snort-gradient: linear-gradient(90deg, #a178ff 0%, #ff6baf 100%);
   --dm-gradient: linear-gradient(90deg, #5722d2 0%, #db1771 100%);
-  --invoice-gradient: linear-gradient(
-    45deg,
-    var(--gray-superdark) 50%,
-    rgba(161, 120, 255, 0.2),
-    rgba(255, 107, 175, 0.2) 108.33%
-  );
-  --paid-invoice-gradient: linear-gradient(
-    45deg,
-    var(--gray-superdark) 50%,
-    rgba(161, 120, 255, 0.6),
-    rgba(255, 107, 175, 0.6) 108.33%
-  );
+  --invoice-gradient: linear-gradient(45deg,
+      var(--gray-superdark) 50%,
+      rgba(161, 120, 255, 0.2),
+      rgba(255, 107, 175, 0.2) 108.33%);
+  --paid-invoice-gradient: linear-gradient(45deg,
+      var(--gray-superdark) 50%,
+      rgba(161, 120, 255, 0.6),
+      rgba(255, 107, 175, 0.6) 108.33%);
   --expired-invoice-gradient: linear-gradient(45deg, var(--gray-superdark) 50%, var(--gray), var(--gray-superdark));
   --strike-army-gradient: linear-gradient(to bottom right, #ccff00, #a1c900);
-
+  --sub-bg: #111;
   --header-padding-tb: 10px;
+  --btn-color: #FFF;
+  --primary-gradient: linear-gradient(90deg, rgba(239, 150, 68, 1) 0%, rgba(123, 65, 246, 1) 100%);
 }
 
 ::-webkit-scrollbar {
@@ -70,27 +68,27 @@ html {
 }
 
 html.light {
-  --bg-color: #f8f8f8;
+  --bg-color: #fff;
   --font-color: #2f3f64;
-  --font-secondary-color: #71717a;
+  --font-secondary-color: #5C6C92;
   --font-tertiary-color: #52525b;
   --border-color: #dee1e8;
-
   --highlight: #7139f1;
-  --modal-bg-color: rgba(240, 240, 240, 0.8);
-
-  --gray: #999;
+  --modal-bg-color: #0009;
+  --gray: #dee1e8;
   --gray-secondary: #aaa;
   --gray-tertiary: #bbb;
   --gray-superlight: #333;
   --gray-light: #555;
   --gray-dark: #ccc;
-  --gray-superdark: #ddd;
-  --gray-ultradark: #eee;
-
+  --gray-superdark: #FFF;
+  --gray-ultradark: #FFF;
   --dm-gradient: var(--gray);
   --invoice-gradient: linear-gradient(45deg, var(--gray-superdark) 50%, #f7b73333, #fc4a1a33);
   --paid-invoice-gradient: linear-gradient(45deg, var(--gray-superdark) 50%, #f7b73399, #fc4a1a99);
+  --bg-secondary: #FFF;
+  --sub-bg: #FFF;
+  --btn-color: #FFF;
 }
 
 body {
@@ -136,12 +134,12 @@ code {
 
 .card {
   padding: 12px 16px;
-  border-bottom: 1px solid var(--gray-superdark);
+  border-bottom: 1px solid var(--border-color);
 }
 
 /* Card inside card */
 .card .card {
-  border: 1px solid var(--gray-superdark);
+  border: 1px solid var(--border-color);
   border-radius: 16px;
   min-height: 0;
 }
@@ -150,9 +148,10 @@ code {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  margin-bottom: -8px;
 }
 
-.card > .footer {
+.card>.footer {
   display: flex;
   flex-direction: row;
 }
@@ -164,16 +163,28 @@ code {
 
 button {
   cursor: pointer;
-  padding: 6px 12px;
+  padding: 10px 16px;
   font-weight: 600;
   color: var(--bg-color);
   font-size: var(--font-size);
-  background-color: var(--font-color);
+  background-color: var(--btn-color);
   border: none;
-  border-radius: 16px;
+  border-radius: 100px;
   outline: none;
 }
 
+button.primary {
+  background: rgb(239, 150, 68);
+  background: var(--primary-gradient);
+  color: #FFF !important;
+  border: none !important;
+}
+
+button.primary:hover {
+  box-shadow: 0px 1px 4px rgba(128, 29, 255, 1) !important;
+  background: var(--primary-gradient) !important;
+}
+
 button:disabled {
   opacity: 0.3;
   cursor: not-allowed;
@@ -187,7 +198,7 @@ button.secondary:disabled {
 button:disabled:hover {
   cursor: not-allowed;
   color: var(--font-color);
-  border-color: var(--gray-superdark);
+  border-color: var(--gray-border-color);
 }
 
 .light button.transparent {
@@ -211,11 +222,7 @@ button.transparent {
   font-weight: 400;
   color: var(--font-secondary);
   background-color: transparent;
-  border: 1px solid var(--gray-superdark);
-}
-
-.light button.secondary {
-  background-color: var(--gray);
+  border: 1px solid var(--border-color);
 }
 
 button.secondary:hover {
@@ -229,15 +236,13 @@ button.transparent:hover {
   background-color: var(--font-color);
 }
 
-.light button.secondary:hover {
-  background-color: var(--gray-secondary);
-}
-
 button.icon {
   border: none;
-  background: none;
+  background: var(--bg-secondary);
   color: var(--font-color);
-  min-height: 28px;
+  width: 40px;
+  height: 40px;
+  padding: 10px;
 }
 
 button.icon .icon-wrapper {
@@ -307,13 +312,15 @@ input[type="password"],
 input[type="number"],
 select,
 textarea {
-  padding: 12px 16px;
+  padding: 8px 12px;
   color: var(--font-color);
   background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 2px solid rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   outline: none;
-  line-height: 24px; /* 150% */
+  font-size: 15px;
+  line-height: 24px;
+  /* 150% */
 }
 
 .light input[type="text"],
@@ -321,7 +328,7 @@ textarea {
 .light input[type="number"],
 .light select,
 .light textarea {
-  border: 1px solid rgba(0, 0, 0, 0.3);
+  border: 2px solid var(--border-color);
 }
 
 option,
@@ -335,8 +342,8 @@ textarea:placeholder {
 }
 
 input[type="checkbox"] {
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
 }
 
 input:disabled {
@@ -482,22 +489,22 @@ div.form-group {
   grid-template-columns: 1fr 2fr;
 }
 
-div.form-group > div {
+div.form-group>div {
   padding: 3px 5px;
 }
 
-div.form-group > div:nth-child(1) {
+div.form-group>div:nth-child(1) {
   display: flex;
   align-self: center;
 }
 
-div.form-group > div:nth-child(2) {
+div.form-group>div:nth-child(2) {
   display: flex;
   flex-grow: 1;
   justify-content: flex-end;
 }
 
-div.form-group > div:nth-child(2) input {
+div.form-group>div:nth-child(2) input {
   flex-grow: 1;
 }
 
@@ -601,7 +608,7 @@ small.xs {
   margin: 0 auto;
 }
 
-.tweet div .twitter-tweet > iframe {
+.tweet div .twitter-tweet>iframe {
   max-height: unset;
 }
 
@@ -630,8 +637,9 @@ small.xs {
 
 .main-content h2 {
   font-weight: 600;
-  font-size: 32px;
-  line-height: 39px;
+  font-size: 26px;
+  line-height: 36px;
+  margin: 12px 0 0 0;
 }
 
 .main-content .h4 {
@@ -639,7 +647,7 @@ small.xs {
 }
 
 .main-content .profile-preview {
-  margin-bottom: 16px;
+  margin: 8px 0;
 }
 
 button.tall {
@@ -706,18 +714,24 @@ button.tall {
 .rta__textarea {
   /* Fix width calculation to account for 32px padding on input */
   width: calc(100% - 32px) !important;
+  font-size: 15px !important;
 }
 
 .ctx-menu {
-  color: var(--font-secondary-color) !important;
+  color: var(--font-color) !important;
   background: transparent !important;
   min-width: 0 !important;
   margin: 0 !important;
 }
 
+.szh-menu {
+  border-radius: 16px !important;
+  padding: 0 !important;
+}
+
 .ctx-menu li {
   background: #1e1e1e !important;
-  padding: 8px 32px 8px 32px !important;
+  padding: 8px 24px !important;
   display: grid !important;
   grid-template-columns: 2rem auto !important;
   font-size: 16px;
@@ -725,7 +739,7 @@ button.tall {
 }
 
 .light .ctx-menu li {
-  background: var(--gray-superdark) !important;
+  background: #FFF !important;
 }
 
 .ctx-menu li:first-of-type {
@@ -733,13 +747,13 @@ button.tall {
 }
 
 .ctx-menu li:nth-child(3) {
-  padding-top: 24px !important;
+  padding-top: 16px !important;
   border-top-left-radius: 16px !important;
   border-top-right-radius: 16px !important;
 }
 
 .ctx-menu li:last-of-type {
-  padding-bottom: 24px !important;
+  padding-bottom: 16px !important;
   border-bottom-left-radius: 16px !important;
   border-bottom-right-radius: 16px !important;
 }
@@ -754,8 +768,8 @@ button.tall {
 }
 
 .light .ctx-menu li:hover {
-  color: white !important;
-  background: var(--font-secondary-color) !important;
+  color: var(--font-color) !important;
+  background: #EEE !important;
 }
 
 .ctx-menu .red {
@@ -782,3 +796,54 @@ svg.heart-solid {
 svg.zap-solid {
   color: var(--zap);
 }
+
+.subtier {
+  background: var(--sub-bg);
+  border-radius: 16px;
+}
+
+.light .subtier {
+  border: 1px solid var(--border-color);
+}
+
+.light .spinner-button {
+  background: #FFF;
+  border: 1px solid var(--border-color);
+  color: var(--font-secondary);
+  box-shadow: rgba(0, 0, 0, 0.08) 0 1px 1px;
+}
+
+.light .spinner-button:hover {
+  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px;
+}
+
+.main-content.p {
+  border-bottom: 0;
+  border-top: 0;
+}
+
+.light button.icon {
+  border: 1px solid var(--border-color);
+  box-shadow: rgba(0, 0, 0, 0.08) 0 1px 1px;
+}
+
+.light button.icon:hover {
+  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px;
+}
+
+.light button,
+.light button.secondary {
+  color: #4B5C83;
+  background-color: #FFF;
+  border: 1px solid var(--border-color);
+  box-shadow: rgba(0, 0, 0, 0.08) 0 1px 1px;
+}
+
+.light button:hover,
+.light button.secondary:hover {
+  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px !important;
+}
+
+.light .modal button.secondary:hover {
+  background: #FFF !important;
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index c3c267e46..e5c88c9a5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2775,6 +2775,40 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@snort/shared@^1.0.6, @snort/shared@workspace:*, @snort/shared@workspace:packages/shared":
+  version: 0.0.0-use.local
+  resolution: "@snort/nostr@workspace:packages/nostr"
+  dependencies:
+    "@noble/curves": ^1.0.0
+    "@noble/hashes": ^1.2.0
+    "@types/chai": ^4.3.4
+    "@types/events": ^3.0.0
+    "@types/expect": ^24.3.0
+    "@types/express": ^4.17.17
+    "@types/mocha": ^10.0.1
+    "@types/node": ^20.4.1
+    "@types/uuid": ^9.0.1
+    "@typescript-eslint/eslint-plugin": ^5.53.0
+    "@typescript-eslint/parser": ^5.53.0
+    base64-js: ^1.5.1
+    bech32: ^2.0.0
+    chai: ^4.3.7
+    eslint: ^8.34.0
+    events: ^3.3.0
+    express: ^4.18.2
+    isomorphic-ws: ^5.0.0
+    mocha: ^10.2.0
+    ts-loader: ^9.4.2
+    ts-mocha: ^10.0.0
+    ts-node: ^10.9.1
+    typescript: ^4.9.5
+    uuid: ^9.0.0
+    webpack: ^5.77.0
+    webpack-cli: ^5.0.1
+    ws: ^8.12.1
+  languageName: unknown
+  linkType: soft
+
 "@snort/shared@^1.0.6, @snort/shared@workspace:*, @snort/shared@workspace:packages/shared":
   version: 0.0.0-use.local
   resolution: "@snort/shared@workspace:packages/shared"
@@ -2829,6 +2863,7 @@ __metadata:
     "@peculiar/webcrypto": ^1.4.3
     "@scure/base": ^1.1.2
     "@snort/shared": ^1.0.6
+    "@snort/shared": ^1.0.6
     "@stablelib/xchacha20": ^1.0.1
     "@types/debug": ^4.1.8
     "@types/jest": ^29.5.1