diff --git a/components/accordian-item.js b/components/accordian-item.js
index e079f98d..878f1935 100644
--- a/components/accordian-item.js
+++ b/components/accordian-item.js
@@ -3,7 +3,7 @@ import ArrowRight from '../svgs/arrow-right-s-fill.svg'
 import ArrowDown from '../svgs/arrow-down-s-fill.svg'
 import { useEffect, useState } from 'react'
 
-export default function AccordianItem ({ header, body, headerColor = 'grey', show }) {
+export default function AccordianItem ({ header, body, headerColor = 'var(--theme-grey)', show }) {
   const [open, setOpen] = useState(show)
 
   useEffect(() => {
diff --git a/components/comment.module.css b/components/comment.module.css
index 859691d7..6e80226f 100644
--- a/components/comment.module.css
+++ b/components/comment.module.css
@@ -33,7 +33,7 @@
 
 .collapser {
     cursor: pointer;
-    fill: grey;
+    fill: var(--theme-grey);
     width: 45px;
     margin-left: auto;
     user-select: none;
@@ -78,6 +78,7 @@
 
 .hunk {
     margin-bottom: 0;
+    margin-top: 0.15rem;
 }
 
 .comment:not(:last-of-type) {
diff --git a/components/footer.js b/components/footer.js
index 9233a60b..33060f7c 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -20,7 +20,7 @@ const COLORS = {
     body: '#f5f5f5',
     color: '#212529',
     navbarVariant: 'light',
-    navLink: 'rgba(0, 0, 0, 0.5)',
+    navLink: 'rgba(0, 0, 0, 0.55)',
     navLinkFocus: 'rgba(0, 0, 0, 0.7)',
     navLinkActive: 'rgba(0, 0, 0, 0.9)',
     borderColor: '#ced4da',
@@ -30,13 +30,17 @@ const COLORS = {
     dropdownItemColorHover: 'rgba(0, 0, 0, 0.9)',
     commentBg: 'rgba(0, 0, 0, 0.03)',
     clickToContextColor: 'rgba(0, 0, 0, 0.05)',
-    brandColor: 'rgba(0, 0, 0, 0.9)'
+    brandColor: 'rgba(0, 0, 0, 0.9)',
+    grey: '#707070',
+    link: '#007cbe',
+    linkHover: '#004a72',
+    linkVisited: '#7acaf5'
   },
   dark: {
     body: '#000000',
     inputBg: '#000000',
     inputDisabledBg: '#000000',
-    navLink: 'rgba(255, 255, 255, 0.5)',
+    navLink: 'rgba(255, 255, 255, 0.55)',
     navLinkFocus: 'rgba(255, 255, 255, 0.75)',
     navLinkActive: 'rgba(255, 255, 255, 0.9)',
     borderColor: 'rgba(255, 255, 255, 0.5)',
@@ -45,7 +49,11 @@ const COLORS = {
     commentBg: 'rgba(255, 255, 255, 0.04)',
     clickToContextColor: 'rgba(255, 255, 255, 0.08)',
     color: '#f8f9fa',
-    brandColor: 'var(--primary)'
+    brandColor: 'var(--primary)',
+    grey: '#969696',
+    link: '#2e99d1',
+    linkHover: '#007cbe',
+    linkVisited: '#066ba3'
   }
 }
 
@@ -60,16 +68,16 @@ const handleThemeChange = (dark) => {
 
 const ChatPopover = (
   <Popover>
-    <Popover.Content style={{ fontWeight: 500, opacity: 0.5, fontSize: '.9rem' }}>
+    <Popover.Content style={{ fontWeight: 500, fontSize: '.9rem' }}>
       <a
-        href='https://tribes.sphinx.chat/t/stackerzchat' className='text-reset d-inline-flex'
+        href='https://tribes.sphinx.chat/t/stackerzchat' className='text-dark d-inline-flex'
         target='_blank' rel='noreferrer'
       >
         sphinx
       </a>
-      <span className='mx-2'> \ </span>
+      <span className='mx-2 text-dark'> \ </span>
       <a
-        href='https://t.me/stackernews' className='text-reset d-inline-flex'
+        href='https://t.me/stackernews' className='text-dark d-inline-flex'
         target='_blank' rel='noreferrer'
       >
         telegram
@@ -102,39 +110,39 @@ export default function Footer ({ noLinks }) {
     <footer>
       <Container className='mb-3 mt-4'>
         {!noLinks &&
-          <div className='mb-2' style={{ fontWeight: 500, opacity: 0.5 }}>
+          <div className='mb-2' style={{ fontWeight: 500 }}>
             {mounted &&
               <div className='mb-2'>
                 {darkMode.value
-                  ? <Sun onClick={() => darkMode.toggle()} className='theme' />
-                  : <Moon onClick={() => darkMode.toggle()} className='theme' />}
+                  ? <Sun onClick={() => darkMode.toggle()} className='fill-grey theme' />
+                  : <Moon onClick={() => darkMode.toggle()} className='fill-grey theme' />}
               </div>}
             <Link href='/faq' passHref>
-              <a className='text-reset d-inline-flex'>
+              <a className='nav-link p-0 d-inline-flex'>
                 faq
               </a>
             </Link>
-            <span className='mx-2'> \ </span>
+            <span className='mx-2 text-muted'> \ </span>
             <Link href='/story' passHref>
-              <a className='text-reset d-inline-flex'>
+              <a className='nav-link p-0 d-inline-flex'>
                 story
               </a>
             </Link>
-            <span className='mx-2'> \ </span>
+            <span className='mx-2 text-muted'> \ </span>
             <a
-              href='https://plausible.io/stacker.news' className='text-reset d-inline-flex'
+              href='https://plausible.io/stacker.news' className='nav-link p-0 d-inline-flex'
               target='_blank' rel='noreferrer'
             >
               analytics
             </a>
-            <span className='mx-2'> \ </span>
+            <span className='mx-2 text-muted'> \ </span>
             <OverlayTrigger trigger='click' placement='top' overlay={ChatPopover} rootClose>
-              <div className='text-reset d-inline-flex' style={{ cursor: 'pointer' }}>
+              <div className='nav-link p-0 d-inline-flex' style={{ cursor: 'pointer' }}>
                 chat
               </div>
             </OverlayTrigger>
-            <span className='mx-2'> \ </span>
-            <a href='/rss' className='text-reset d-inline-flex' target='_blank'>
+            <span className='mx-2 text-muted'> \ </span>
+            <a href='/rss' className='nav-link p-0 d-inline-flex' target='_blank'>
               rss
             </a>
           </div>}
diff --git a/components/header.js b/components/header.js
index 56095414..73af269b 100644
--- a/components/header.js
+++ b/components/header.js
@@ -162,7 +162,7 @@ export default function Header () {
             <Nav.Item className='d-md-flex d-none'>
               <Nav.Link href='https://bitcoinerjobs.co' target='_blank' className={styles.navLink}>jobs</Nav.Link>
             </Nav.Item>
-            <Nav.Item className='text-monospace' style={{ opacity: '.5' }}>
+            <Nav.Item className='text-monospace nav-link'>
               <Price />
             </Nav.Item>
             <Corner />
diff --git a/components/item-full.js b/components/item-full.js
index 60346d7e..d365ac77 100644
--- a/components/item-full.js
+++ b/components/item-full.js
@@ -37,7 +37,11 @@ function ItemEmbed ({ item }) {
   const darkMode = useDarkMode()
   const twitter = item.url?.match(/^https?:\/\/twitter\.com\/(?:#!\/)?\w+\/status(?:es)?\/(?<id>\d+)/)
   if (twitter?.groups?.id) {
-    return <TweetEmbed id={twitter.groups.id} options={{ width: '100%', theme: darkMode.value ? 'dark' : 'light' }} />
+    return (
+      <div className='mt-1'>
+        <TweetEmbed id={twitter.groups.id} options={{ width: '100%', theme: darkMode.value ? 'dark' : 'light' }} />
+      </div>
+    )
   }
 
   const youtube = item.url?.match(/(https?:\/\/)?((www\.)?(youtube(-nocookie)?|youtube.googleapis)\.com.*(v\/|v=|vi=|vi\/|e\/|embed\/|user\/.*\/u\/\d+\/)|youtu\.be\/)(?<id>[_0-9a-z-]+)/i)
diff --git a/components/item.js b/components/item.js
index d24e3abc..dbc3525d 100644
--- a/components/item.js
+++ b/components/item.js
@@ -24,7 +24,7 @@ export default function Item ({ item, rank, children }) {
 
   useEffect(() => {
     setWrap(
-      parseInt(window.getComputedStyle(titleRef.current).lineHeight) <
+      Math.ceil(parseFloat(window.getComputedStyle(titleRef.current).lineHeight)) <
         titleRef.current.clientHeight)
   }, [])
 
diff --git a/components/item.module.css b/components/item.module.css
index f6d9c009..d06c0317 100644
--- a/components/item.module.css
+++ b/components/item.module.css
@@ -28,19 +28,19 @@
 }
 
 a.link:visited {
-    color: #7acaf5;
+    color: var(--theme-linkVisited) !important;
 }
 
 .other {
-    font-size: 70%;
-    color: grey;
+    font-size: 80%;
+    color: var(--theme-grey);
+    margin-bottom: .15rem;
 }
 
 .item {
     display: flex;
     justify-content: flex-start;
     min-width: 0;
-    margin-bottom: .2rem;
 }
 
 .item .cover {
@@ -51,7 +51,7 @@ a.link:visited {
     overflow: hidden;
     width: 100%;
     margin-bottom: .3rem;
-    line-height: 1rem;
+    line-height: 1.06rem;
 }
 
 .main {
@@ -60,7 +60,6 @@ a.link:visited {
 }
 
 .children {
-    margin-top: .25rem;
     margin-left: 28px;
 }
 
@@ -68,7 +67,7 @@ a.link:visited {
     font-weight: 600;
     margin-top: 4px;
     display: flex;
-    color: grey;
+    color: var(--theme-grey);
     font-size: 90%;
 }
 
@@ -78,7 +77,7 @@ a.link:visited {
 }
 
 .skeleton .title {
-    background-color: grey;
+    background-color: var(--theme-grey);
     width: 500px;
     border-radius: .4rem;
     height: 17px;
@@ -87,7 +86,7 @@ a.link:visited {
 
 .skeleton .link {
     height: 14px;
-    background-color: grey;
+    background-color: var(--theme-grey);
     width: 800px;
     border-radius: .3rem;
     margin: 2px 0px;
@@ -98,7 +97,7 @@ a.link:visited {
     width: 42px;
     height: 70%;
     border-radius: .27rem;
-    background-color: grey;
+    background-color: var(--theme-grey);
     margin-right: .5rem;
 }
 
diff --git a/components/more-footer.js b/components/more-footer.js
index 8d753002..5aacaf5f 100644
--- a/components/more-footer.js
+++ b/components/more-footer.js
@@ -28,7 +28,7 @@ export default function MoreFooter ({ cursor, fetchMore, Skeleton, noMoreText })
     )
   } else {
     Footer = () => (
-      <div className='text-muted' style={{ fontFamily: 'lightning', fontSize: '2rem', opacity: '0.6' }}>{noMoreText || 'GENISIS'}</div>
+      <div className='text-muted' style={{ fontFamily: 'lightning', fontSize: '2rem', opacity: '0.75' }}>{noMoreText || 'GENISIS'}</div>
     )
   }
 
diff --git a/components/reply.module.css b/components/reply.module.css
index 17744dee..147e38da 100644
--- a/components/reply.module.css
+++ b/components/reply.module.css
@@ -6,16 +6,17 @@
 
 .replyButtons {
     font-size: 70%;
-    color: grey;
+    color: var(--theme-grey);
     font-weight: bold;
     display: inline-block;
     cursor: pointer;
     padding-bottom: .5rem;
     line-height: 1rem;
+    vertical-align: middle;
 }
 
 .skeleton .input {
-    background-color: grey;
+    background-color: var(--theme-grey);
     width: 100%;
     border-radius: .4rem;
     height: 115px;
@@ -23,7 +24,7 @@
 }
 
 .skeleton .button {
-    background-color: grey;
+    background-color: var(--theme-grey);
     border-radius: .4rem;
     margin-top: .25rem;
     width: 71px;
diff --git a/components/search.js b/components/search.js
index 79c2ff7f..43b31187 100644
--- a/components/search.js
+++ b/components/search.js
@@ -13,9 +13,9 @@ export default function Search () {
   const [atBottom, setAtBottom] = useState()
 
   useEffect(() => {
-    setAtBottom((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight)
+    setAtBottom(Math.ceil(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight)
     window.onscroll = function (ev) {
-      if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
+      if (Math.ceil(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
         setAtBottom(true)
       } else {
         setAtBottom(false)
diff --git a/components/text.module.css b/components/text.module.css
index 463a7106..740ffc9a 100644
--- a/components/text.module.css
+++ b/components/text.module.css
@@ -1,10 +1,16 @@
 .text {
-    font-size: 90%;
+    font-size: 94%;
     font-family: inherit;
     word-break: break-word;
-    line-height: 1rem;
+    line-height: 140%;
 }
 
+@media screen and (min-width: 767px) {
+    .text {
+      line-height: 130%;
+    }
+  }
+
 .text p {
     margin-bottom: .5rem;
     white-space: pre-wrap;
@@ -15,8 +21,16 @@
     margin-bottom: .5rem;
 }
 
+.text pre > div {
+    margin: 0 !important;
+}
+
 .text > *:last-child {
-    margin-bottom: 0;
+    margin-bottom: 0 !important;
+}
+
+.text blockquote > *:last-child {
+    margin-bottom: 0 !important;
 }
 
 .text img {
@@ -29,6 +43,7 @@
 }
 
 .text blockquote {
-    border-left: 2px solid #212529;
+    border-left: 2px solid var(--theme-grey);
     padding-left: 1rem;
+    margin: 0 0 0.5rem 0.5rem !important;
 }
\ No newline at end of file
diff --git a/public/darkmode.js b/public/darkmode.js
index 6152ed92..2b24426c 100644
--- a/public/darkmode.js
+++ b/public/darkmode.js
@@ -5,7 +5,7 @@ const COLORS = {
     body: '#f5f5f5',
     color: '#212529',
     navbarVariant: 'light',
-    navLink: 'rgba(0, 0, 0, 0.5)',
+    navLink: 'rgba(0, 0, 0, 0.55)',
     navLinkFocus: 'rgba(0, 0, 0, 0.7)',
     navLinkActive: 'rgba(0, 0, 0, 0.9)',
     borderColor: '#ced4da',
@@ -15,13 +15,17 @@ const COLORS = {
     dropdownItemColorHover: 'rgba(0, 0, 0, 0.9)',
     commentBg: 'rgba(0, 0, 0, 0.03)',
     clickToContextColor: 'rgba(0, 0, 0, 0.05)',
-    brandColor: 'rgba(0, 0, 0, 0.9)'
+    brandColor: 'rgba(0, 0, 0, 0.9)',
+    grey: '#707070',
+    link: '#007cbe',
+    linkHover: '#004a72',
+    linkVisited: '#7acaf5'
   },
   dark: {
     body: '#000000',
     inputBg: '#000000',
     inputDisabledBg: '#000000',
-    navLink: 'rgba(255, 255, 255, 0.5)',
+    navLink: 'rgba(255, 255, 255, 0.55)',
     navLinkFocus: 'rgba(255, 255, 255, 0.75)',
     navLinkActive: 'rgba(255, 255, 255, 0.9)',
     borderColor: 'rgba(255, 255, 255, 0.5)',
@@ -30,7 +34,11 @@ const COLORS = {
     commentBg: 'rgba(255, 255, 255, 0.04)',
     clickToContextColor: 'rgba(255, 255, 255, 0.08)',
     color: '#f8f9fa',
-    brandColor: 'var(--primary)'
+    brandColor: 'var(--primary)',
+    grey: '#969696',
+    link: '#2e99d1',
+    linkHover: '#007cbe',
+    linkVisited: '#066ba3'
   }
 }
 
diff --git a/styles/globals.scss b/styles/globals.scss
index 47e8ef8a..fbf0f991 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -6,7 +6,7 @@ $theme-colors: (
   "success" : #5c8001,
   "twitter" : #1da1f2,
   "boost" : #8c25f4,
-  "grey" : #e9ecef
+  "grey" : #e9ecef,
 );
 
 $body-bg: #f5f5f5;
@@ -51,7 +51,6 @@ $nav-tabs-link-hover-border-color: transparent;
 $nav-tabs-link-active-border-color: #ced4da #ced4da $nav-tabs-link-active-bg;
 $tooltip-bg: #5c8001;
 
-
 @import "~bootstrap/scss/bootstrap";
 
 @font-face {
@@ -65,6 +64,10 @@ $tooltip-bg: #5c8001;
   }
 }
 
+.text-muted {
+  color: var(--theme-grey) !important;
+}
+
 mark {
   background-color: var(--primary);
   padding: 0 0.2rem;
@@ -109,6 +112,14 @@ body {
   height: 100%;
 }
 
+a {
+  color: var(--theme-link);
+}
+
+a:hover {
+  color: var(--theme-linkHover);
+}
+
 .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
   color: inherit;
   background-color: var(--theme-inputBg);
@@ -157,11 +168,11 @@ body {
   border-color: var(--theme-borderColor);
 }
 
-.navbar-nav .nav-link:not(.text-success) {
+.nav-link:not(.text-success) {
   color: var(--theme-navLink) !important;
 }
 
-.navbar-nav .nav-link:not(.text-success):hover, .navbar-nav .nav-link:not(.text-success):focus {
+.nav-link:not(.text-success):hover, .nav-link:not(.text-success):focus {
   color: var(--theme-navLinkFocus) !important;
 }
 
@@ -173,25 +184,25 @@ body {
   color: var(--theme-navLinkFocus) !important;
 }
 
-.navbar-nav .dropdown-menu {
+.dropdown-menu {
   background-color: var(--theme-inputBg);
   border: 1px solid var(--theme-borderColor);
 }
 
-.navbar-nav .dropdown-item {
+.dropdown-item {
   color: var(--theme-dropdownItemColor);
 }
 
-.navbar-nav .dropdown-item:hover {
+.dropdown-item:hover {
   color: var(--theme-dropdownItemColorHover);
 }
 
-.navbar-nav .dropdown-item.active {
+.dropdown-item.active {
   color: var(--theme-brandColor);
   text-shadow: 0 0 10px var(--primary);
 }
 
-.navbar-nav .dropdown-divider {
+.dropdown-divider {
   border-top: 1px solid var(--theme-borderColor);
 }
 
@@ -230,7 +241,7 @@ footer {
 }
 
 .text-muted svg {
-  fill: #6c757d;
+  fill: var(--theme-grey);
 }
 
 .pointer {
@@ -343,7 +354,7 @@ textarea.form-control {
 }
 
 .fill-grey {
-  fill: grey;
+  fill: var(--theme-grey);
 }
 
 .fill-white {
@@ -373,7 +384,7 @@ textarea.form-control {
 
 .clouds {
   background-image: url('/clouds.jpeg') !important;
-  background-color: grey;
+  background-color:var(--theme-grey);
   background-repeat: repeat;
   background-origin: content-box;
   background-size: cover;
@@ -396,7 +407,7 @@ textarea.form-control {
 
 .static {
   background: url('/giphy.gif');
-  background-color: grey;
+  background-color:var(--theme-grey);
   background-repeat: repeat;
   background-origin: content-box;
   background-size: cover;
diff --git a/styles/index.module.css b/styles/index.module.css
index f9694e3e..2a12ee77 100644
--- a/styles/index.module.css
+++ b/styles/index.module.css
@@ -1,5 +1,5 @@
 .box {
     width: 100px;
     height: 100px;
-    background-color: grey;
+    background-color:var(--theme-grey);
 }
\ No newline at end of file
diff --git a/styles/invites.module.css b/styles/invites.module.css
index 6a266d70..d7fd2031 100644
--- a/styles/invites.module.css
+++ b/styles/invites.module.css
@@ -11,7 +11,7 @@
 .other {
     font-weight: 500;
     font-size: 70%;
-    color: grey;
+    color: var(--theme-grey);
 }
 
 .revoke {
@@ -20,7 +20,7 @@
 
 .invite {
     margin-bottom: .5rem;
-}
+}Í
 
 .invite:last-child {
     margin-bottom: 0;