diff --git a/components.js b/components.js
index 9df0e4f..6f0cf86 100644
--- a/components.js
+++ b/components.js
@@ -3735,4 +3735,4 @@ customElements.define('tags-input', class extends HTMLElement {
         this.input.removeEventListener('keydown', this.handleKeydown)
         this.tagsWrapper.removeEventListener('click', this.handleClick)
     }
-})
\ No newline at end of file
+})
diff --git a/css/main.css b/css/main.css
index b5d7e78..ac3a111 100644
--- a/css/main.css
+++ b/css/main.css
@@ -2,7 +2,7 @@
   padding: 0;
   margin: 0;
   box-sizing: border-box;
-  font-family: "Inter", sans-serif;
+  font-family: "Archivo", sans-serif;
 }
 
 :root {
@@ -21,8 +21,8 @@ body {
 body,
 body * {
   --accent-color: #256eff;
-  --text-color: 36, 36, 36;
-  --background-color: 248, 248, 248;
+  --text-color: 20, 20, 20;
+  --background-color: 255, 255, 255;
   --foreground-color: rgb(255, 255, 255);
   --danger-color: rgb(255, 75, 75);
   --green: #1cad59;
@@ -208,8 +208,9 @@ img {
   font-size: 1.2rem;
 }
 
-.h3 {
-  font-size: 1rem;
+h3 {
+  font-size: 1.2rem;
+  line-height: 1.3;
 }
 
 .h4 {
@@ -362,7 +363,7 @@ img {
   height: 0.4ch;
   width: 0.4ch;
   border-radius: 0.5em;
-  background-color: currentColor;
+  background-color: var(--accent-color);
 }
 
 .icon {
@@ -596,7 +597,6 @@ sm-copy {
   grid-template-columns: auto 1fr auto auto;
   background-color: rgba(var(--background-color), 1);
   z-index: 2;
-  border-bottom: thin solid rgba(var(--text-color), 0.1);
 }
 
 #expanding_search {
@@ -663,11 +663,11 @@ theme-toggle {
   border-radius: 0.5rem;
   width: 5.2rem;
   text-align: center;
-  background-color: rgba(var(--text-color), 0.02);
+  background-color: #e6352f08;
 }
 .category .icon {
   margin-bottom: 1rem;
-  transition: transform 0.3s;
+  transition: transform 0.3s, background-color 0.3s;
   transform-origin: top;
 }
 .category:hover .icon {
@@ -687,20 +687,21 @@ theme-toggle {
 .article-card__title {
   line-height: 1.4;
 }
+.article-card .flex {
+  font-size: 0.75rem;
+}
+
 .article-card__category {
-  background-color: rgba(var(--text-color), 0.06);
+  background-color: #256eff08;
   margin-right: 0.5rem;
   border-radius: 0.2rem;
   font-size: 0.75rem;
   padding: 0.2rem 0.4rem;
   font-weight: 500;
-  color: rgba(var(--text-color), 0.8);
+  color: var(--accent-color) !important;
   justify-self: flex-start;
   text-transform: capitalize;
 }
-.article-card .flex {
-  font-size: 0.75rem;
-}
 
 #trending_article_container,
 #query_results_list,
@@ -711,7 +712,6 @@ theme-toggle {
 }
 
 .trending-article {
-  counter-increment: trending;
   gap: 0.5rem 1.5rem;
 }
 .trending-article a:first-of-type {
@@ -762,8 +762,7 @@ theme-toggle {
 
 #article {
   display: flex;
-  padding: 1.5rem;
-  max-height: 100%;
+  flex-wrap: wrap;
   overflow-y: auto;
 }
 #article main > section:last-of-type {
@@ -793,9 +792,25 @@ theme-toggle {
 }
 
 .hero-section {
+  position: relative;
   display: grid;
   gap: 0.5rem;
-  grid-template-columns: minmax(0, 1fr);
+  margin-top: 1.5rem;
+  align-content: flex-end;
+  width: 100%;
+}
+.hero-section p {
+  color: inherit;
+}
+.hero-section .overlay {
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
+  z-index: -1;
 }
 
 #article_image {
@@ -930,7 +945,7 @@ theme-toggle {
 #preview_popup h1,
 #article h1 {
   font-size: 1.6rem;
-  line-height: 1.3;
+  line-height: 1.1;
 }
 #preview_popup h3:not(:first-of-type),
 #article h3:not(:first-of-type) {
@@ -946,8 +961,7 @@ theme-toggle {
 }
 #preview_popup p,
 #article p {
-  font-family: "noto serif", serif;
-  font-size: 1rem;
+  font-size: 1.1rem;
   line-height: 1.8;
 }
 #preview_popup p > *,
@@ -1072,6 +1086,10 @@ theme-toggle {
     justify-self: flex-end;
   }
 
+  #article main {
+    padding: 0 1.5rem;
+  }
+
   .writer-card .writer-profile {
     height: 2.5rem;
     width: 2.5rem;
@@ -1169,22 +1187,26 @@ theme-toggle {
 
   #preview_popup h1,
 #article h1 {
-    font-size: 2rem;
+    font-size: 2.2rem;
+    font-weight: 800;
+  }
+  #preview_popup h3,
+#article h3 {
+    font-size: 1.4rem;
+    line-height: 1.3;
   }
 
   #article {
-    gap: 6vw;
-    padding: 0;
-    grid-template-columns: 16rem 1fr;
+    padding: 0 4vw;
   }
   #article main {
     width: 60ch;
-    padding: 1.5rem 0;
+    margin-left: 4vw;
   }
 
   #article_aside {
     width: 20rem;
-    padding: 1.5rem 2rem;
+    padding: 1.5rem;
     display: flex;
     flex-direction: column;
     position: -webkit-sticky;
@@ -1259,7 +1281,7 @@ button:not(.button--primary) {
   }
   .interact:hover,
 button:not(.button--primary):hover {
-    background-color: rgba(var(--text-color), 0.06);
+    background-color: #4885ff10;
   }
 
   .button--primary {
diff --git a/css/main.min.css b/css/main.min.css
index 3ec89fa..fca5e60 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Inter",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{color:rgba(var(--text-color), 1);background:rgba(var(--background-color), 1)}body,body *{--accent-color: #256eff;--text-color: 36, 36, 36;--background-color: 248, 248, 248;--foreground-color: rgb(255, 255, 255);--danger-color: rgb(255, 75, 75);--green: #1cad59;--like-color: #e91e63;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color: #86afff;--text-color: 220, 220, 220;--background-color: 10, 10, 10;--foreground-color: rgb(24, 24, 24);--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:var(--foreground-color)}body[data-theme=dark] ::-webkit-calendar-picker-indicator{filter:invert(1)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a{text-decoration:none}a:not([class]){color:var(--accent-color)}a:not([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}input[type=datetime-local]{width:100%;padding:.6rem .8rem;background-color:rgba(var(--text-color), 0.06);border:none;border-radius:.3rem;font-size:.9rem;color:inherit;font-family:inherit}input[type=datetime-local]:focus{outline:none;box-shadow:0 0 0 .1rem var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500}.button{white-space:nowrap;padding:.6rem .8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}.cta{text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:700}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input,sm-textarea,tags-input{font-size:.9rem;--border-radius: 0.3rem}sm-button{--padding: 0.6rem 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.uppercase{letter-spacing:.05em}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}ul{list-style:none}img{border-radius:.5rem;-o-object-fit:cover;object-fit:cover;width:100%}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.75rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:currentColor}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .8rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}.logo{color:inherit;display:grid;align-items:center;grid-template-columns:auto 1fr;gap:0 .2rem;justify-self:center}.logo h4{text-transform:capitalize;font-size:.9rem;letter-spacing:.03em}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;padding:.5rem 0}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-select,sm-option,strip-option{font-size:.9rem}sm-select{--max-height: 12rem}strip-select{--gap: 0}strip-option{font-weight:500;--border-radius: 0.3rem;--active-option-color: var(--accent-color)}sm-menu{--background: var(--foreground-color)}menu-option{font-size:.9rem}sm-copy{font-size:.9rem;--button-border-radius: 0.2rem}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page{height:100%}.page-layout,#preview_page{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*,#preview_page>*{grid-column:2/3}#loading{display:grid;place-content:center;text-align:center}#loader_container{position:relative;height:3rem;overflow:hidden;margin-bottom:1.5rem}#loader_container::after{content:"";position:absolute;height:100%;width:100%;left:0;background:linear-gradient(rgba(var(--foreground-color), 1), transparent 20%, transparent 80%, rgba(var(--foreground-color), 1))}#loader{height:6rem;width:6rem;-webkit-animation:scroll infinite 1s cubic-bezier(0.075, 0.82, 0.165, 1);animation:scroll infinite 1s cubic-bezier(0.075, 0.82, 0.165, 1);fill:rgba(var(--text-color), 0.2)}@-webkit-keyframes scroll{to{transform:translateY(-3rem)}}@keyframes scroll{to{transform:translateY(-3rem)}}.label{font-size:.75rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}#main{display:grid;height:100%;grid-template-rows:auto 1fr;grid-template-columns:minmax(0, 1fr)}#main_header{display:grid;gap:.5rem;padding:1rem;align-items:center;grid-column:1/-1;grid-template-columns:auto 1fr auto auto;background-color:rgba(var(--background-color), 1);z-index:2;border-bottom:thin solid rgba(var(--text-color), 0.1)}#expanding_search{position:absolute;display:grid;gap:.5rem;align-items:center;width:calc(100% - 2rem);z-index:1;background-color:rgba(var(--background-color), 1)}#expanding_search .icon-only{margin-right:.5rem}#search_suggestions{position:absolute;top:calc(100% + .5rem);background-color:var(--foreground-color);padding:.3rem;width:100%;border-radius:.3rem;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1)}.search-suggestion{font-size:.9rem;color:inherit;padding:1rem;border-radius:.3rem}#search_articles{--border-radius: 0.5em;width:100%}theme-toggle{margin-left:auto;padding:0 .5rem}#main_page{align-content:flex-start;display:grid;padding:1.5rem;gap:2rem;grid-template-columns:minmax(0, 1fr)}#news_categories_list{overflow-x:auto;gap:.5rem}.category{display:flex;flex-direction:column;padding:.8rem .5rem;color:inherit;font-size:.75rem;flex-shrink:0;align-items:center;border-radius:.5rem;width:5.2rem;text-align:center;background-color:rgba(var(--text-color), 0.02)}.category .icon{margin-bottom:1rem;transition:transform .3s;transform-origin:top}.category:hover .icon{transform:scale(1.3);fill:var(--accent-color)}.article-card{gap:.3rem}.article-card a{color:inherit}.article-card .article-link{gap:.5rem}.article-card__title{line-height:1.4}.article-card__category{background-color:rgba(var(--text-color), 0.06);margin-right:.5rem;border-radius:.2rem;font-size:.75rem;padding:.2rem .4rem;font-weight:500;color:rgba(var(--text-color), 0.8);justify-self:flex-start;text-transform:capitalize}.article-card .flex{font-size:.75rem}#trending_article_container,#query_results_list,#written_article_list{gap:3rem 2rem;padding-bottom:3rem;grid-template-columns:repeat(auto-fill, minmax(16rem, 1fr))}.trending-article{counter-increment:trending;gap:.5rem 1.5rem}.trending-article a:first-of-type{position:relative;overflow:hidden}.trending-article p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.trending-article img{height:12rem;margin-bottom:.5rem}#explore{align-items:flex-start;padding-top:1.5rem}#writer{align-items:flex-start;align-content:flex-start;padding:1.5rem;gap:3rem}#writer sm-copy{font-size:.75rem}#writer_profile{display:flex;width:4rem;height:4rem;border-radius:2rem;background-color:var(--accent-color);justify-content:center}#writer_profile #writer_initials{align-self:center;font-weight:700;font-size:1.8rem;color:rgba(var(--background-color), 1);text-transform:uppercase}#article{display:flex;padding:1.5rem;max-height:100%;overflow-y:auto}#article main>section:last-of-type{padding-bottom:6rem}#article_aside{position:absolute;left:0;top:5rem;padding:1.5rem}#article_map_container{margin-top:1.5rem;display:grid;gap:.5rem}#article_map_container button{line-height:1.3;width:100%;padding:.5rem 0;text-align:left;font-weight:500;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.hero-section{display:grid;gap:.5rem;grid-template-columns:minmax(0, 1fr)}#article_image{margin-top:1.5rem}#article_summary:not(:empty){margin-bottom:.5rem}#article_contributors{flex-wrap:wrap;gap:.3rem;margin:.5rem 0 1rem 0}.contributor{color:inherit;font-size:.75rem;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem .5rem}#action_panel{position:fixed;bottom:0;left:0;gap:.5rem;align-items:center}.up-vote{display:grid;position:relative;padding:.5rem;border-radius:.3rem}.up-vote>*{pointer-events:none}.up-vote:active{transform:none}.up-vote:active .icon{transform:scale(0.7)}.up-vote .expanding-heart,.up-vote .ring{grid-area:1/1}.up-vote .icon{grid-area:1/1;fill:var(--like-color);transition:transform .2s}.ring{border:.1rem solid var(--like-color);border-radius:50%;height:.5rem;width:.5rem;justify-self:center}.temp-count,#like_count{grid-area:1/2}.temp-count:not(:empty),#like_count:not(:empty){margin-left:.4rem}.floating-button{position:fixed;z-index:2;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);border-radius:2rem;bottom:0;right:0;margin:1.5rem;padding:1rem}#go_to_top{background-color:var(--foreground-color)}#dashboard{height:-webkit-max-content;height:-moz-max-content;height:max-content;padding:1.5rem 0;grid-template-rows:auto 1fr}#publishing_requests,#article_analytics{margin-top:2rem;align-content:flex-start}.request-card{display:grid;gap:.5rem;border-radius:.5rem;align-items:flex-start;grid-template-columns:minmax(0, 1fr)}.request-card__title{grid-area:2/1}.request-card__time{font-size:.75rem}.request-card .flex{grid-row:span 2;margin-top:.5rem}.article-row{align-items:center;gap:1rem;grid-template-columns:1fr auto auto}.article-row__published{font-size:.75rem}#preview_popup h1,#article h1{font-size:1.6rem;line-height:1.3}#preview_popup h3:not(:first-of-type),#article h3:not(:first-of-type){margin-top:2rem}#preview_popup h3,#article h3{margin-bottom:1rem}#preview_popup h3:not(:first-of-type),#article h3:not(:first-of-type){margin-top:1.5rem}#preview_popup p,#article p{font-family:"noto serif",serif;font-size:1rem;line-height:1.8}#preview_popup p>*,#article p>*{font-family:inherit}#preview_popup time,#preview_popup #reading_time,#article time,#article #reading_time{font-size:.75rem}#add_writer_button{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}#add_writer_button .icon{fill:rgba(var(--background-color), 1)}#writers_list{margin:1.5rem 0;grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr));padding-bottom:3rem}.writer-card{display:grid;gap:1rem;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.writer-card .writer-profile{display:flex;align-items:center;justify-content:center;height:3rem;width:3rem;border-radius:2rem;background-color:var(--accent-color);text-align:center;font-size:100%;font-weight:700;text-transform:uppercase;color:var(--foreground-color)}.writer-card sm-copy{margin-top:-0.5rem;font-size:.75rem}#cc_section{padding:1.5rem 0;width:min(28rem,100%)}.flo-id-card{width:100%;padding:.5rem 0;font-size:.9rem}.flo-id-card .flo-id{flex:1}.flo-id-card .icon-only{margin-left:.5rem}#user_popup{overflow:hidden}#user_popup header{overflow:hidden;width:100%;position:relative;padding:1.5rem;color:#dcdcdc}#user_popup header h2{margin-top:2rem}#user_popup header .popup__header__close{margin-left:-0.5rem;background-color:rgba(0,0,0,.2);border-radius:2rem}#user_popup header .popup__header__close .icon{fill:#fff}#user_background{position:absolute;top:-1px;left:0;right:0;z-index:-1;transform:scale(-1);border-radius:0 0 .5rem .5rem}.hide{display:none !important}@media screen and (max-width: 40rem){button,.button{padding:.8rem}sm-button{--padding: 0.8rem}.logo{grid-area:1/1/2/2}#search_button{justify-self:flex-end}.writer-card .writer-profile{height:2.5rem;width:2.5rem}#action_panel{width:-webkit-min-content;width:-moz-min-content;width:min-content;padding:.5rem;border-radius:.5rem;background-color:var(--foreground-color);margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2)}.hide-on-mobile{display:none}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}h1,.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 .8rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.hide-on-desktop{display:none}#main_header{padding:1rem 1.5rem}.logo{position:absolute}#main_page{gap:2rem 4vw;padding:1rem 6vw;grid-template-rows:auto 1fr;grid-template-columns:2fr 1fr}#main_page__header{grid-area:1/1/2/-1}#expanding_search{margin:1rem 1.5rem;left:0;width:20rem}#writer{gap:1.5rem 6vw;padding:2rem 8vw;grid-template-columns:20rem 1fr}#writer>section:first-of-type{position:-webkit-sticky;position:sticky;top:1.5rem}#preview_popup h1,#article h1{font-size:2rem}#article{gap:6vw;padding:0;grid-template-columns:16rem 1fr}#article main{width:60ch;padding:1.5rem 0}#article_aside{width:20rem;padding:1.5rem 2rem;display:flex;flex-direction:column;position:-webkit-sticky;position:sticky;top:0;height:100%;overflow-y:auto}#article_map_container{margin-bottom:3rem}.heading-shortcut.active{color:var(--accent-color) !important}#action_panel{position:relative;margin-top:auto}#article_body{margin-top:1rem}.request-card{grid-template-columns:1fr auto}.request-card .flex{margin-top:0}#preview_popup{--width: 60ch}#edit_article_meta_popup{--width: min(56rem, calc(100vw - 8rem))}#edit_article_meta_popup>section{grid-template-columns:1fr 1.3fr;align-items:flex-start}#user_popup{--width: 26rem}}@media screen and (max-width: 64rem){.hide-on-medium{display:none}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact,button:not(.button--primary){transition:background-color .3s}.interact:hover,button:not(.button--primary):hover{background-color:rgba(var(--text-color), 0.06)}.button--primary{transition:filter .3s}.button--primary:hover{filter:brightness(120%)}}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Archivo",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{color:rgba(var(--text-color), 1);background:rgba(var(--background-color), 1)}body,body *{--accent-color: #256eff;--text-color: 20, 20, 20;--background-color: 255, 255, 255;--foreground-color: rgb(255, 255, 255);--danger-color: rgb(255, 75, 75);--green: #1cad59;--like-color: #e91e63;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color: #86afff;--text-color: 220, 220, 220;--background-color: 10, 10, 10;--foreground-color: rgb(24, 24, 24);--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:var(--foreground-color)}body[data-theme=dark] ::-webkit-calendar-picker-indicator{filter:invert(1)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a{text-decoration:none}a:not([class]){color:var(--accent-color)}a:not([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}input[type=datetime-local]{width:100%;padding:.6rem .8rem;background-color:rgba(var(--text-color), 0.06);border:none;border-radius:.3rem;font-size:.9rem;color:inherit;font-family:inherit}input[type=datetime-local]:focus{outline:none;box-shadow:0 0 0 .1rem var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500}.button{white-space:nowrap;padding:.6rem .8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}.cta{text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:700}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input,sm-textarea,tags-input{font-size:.9rem;--border-radius: 0.3rem}sm-button{--padding: 0.6rem 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.uppercase{letter-spacing:.05em}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}ul{list-style:none}img{border-radius:.5rem;-o-object-fit:cover;object-fit:cover;width:100%}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.h1{font-size:1.5rem}.h2{font-size:1.2rem}h3{font-size:1.2rem;line-height:1.3}.h4{font-size:.9rem}.h5{font-size:.75rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .8rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}.logo{color:inherit;display:grid;align-items:center;grid-template-columns:auto 1fr;gap:0 .2rem;justify-self:center}.logo h4{text-transform:capitalize;font-size:.9rem;letter-spacing:.03em}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;padding:.5rem 0}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-select,sm-option,strip-option{font-size:.9rem}sm-select{--max-height: 12rem}strip-select{--gap: 0}strip-option{font-weight:500;--border-radius: 0.3rem;--active-option-color: var(--accent-color)}sm-menu{--background: var(--foreground-color)}menu-option{font-size:.9rem}sm-copy{font-size:.9rem;--button-border-radius: 0.2rem}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page{height:100%}.page-layout,#preview_page{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*,#preview_page>*{grid-column:2/3}#loading{display:grid;place-content:center;text-align:center}#loader_container{position:relative;height:3rem;overflow:hidden;margin-bottom:1.5rem}#loader_container::after{content:"";position:absolute;height:100%;width:100%;left:0;background:linear-gradient(rgba(var(--foreground-color), 1), transparent 20%, transparent 80%, rgba(var(--foreground-color), 1))}#loader{height:6rem;width:6rem;-webkit-animation:scroll infinite 1s cubic-bezier(0.075, 0.82, 0.165, 1);animation:scroll infinite 1s cubic-bezier(0.075, 0.82, 0.165, 1);fill:rgba(var(--text-color), 0.2)}@-webkit-keyframes scroll{to{transform:translateY(-3rem)}}@keyframes scroll{to{transform:translateY(-3rem)}}.label{font-size:.75rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}#main{display:grid;height:100%;grid-template-rows:auto 1fr;grid-template-columns:minmax(0, 1fr)}#main_header{display:grid;gap:.5rem;padding:1rem;align-items:center;grid-column:1/-1;grid-template-columns:auto 1fr auto auto;background-color:rgba(var(--background-color), 1);z-index:2}#expanding_search{position:absolute;display:grid;gap:.5rem;align-items:center;width:calc(100% - 2rem);z-index:1;background-color:rgba(var(--background-color), 1)}#expanding_search .icon-only{margin-right:.5rem}#search_suggestions{position:absolute;top:calc(100% + .5rem);background-color:var(--foreground-color);padding:.3rem;width:100%;border-radius:.3rem;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1)}.search-suggestion{font-size:.9rem;color:inherit;padding:1rem;border-radius:.3rem}#search_articles{--border-radius: 0.5em;width:100%}theme-toggle{margin-left:auto;padding:0 .5rem}#main_page{align-content:flex-start;display:grid;padding:1.5rem;gap:2rem;grid-template-columns:minmax(0, 1fr)}#news_categories_list{overflow-x:auto;gap:.5rem}.category{display:flex;flex-direction:column;padding:.8rem .5rem;color:inherit;font-size:.75rem;flex-shrink:0;align-items:center;border-radius:.5rem;width:5.2rem;text-align:center;background-color:#e6352f08}.category .icon{margin-bottom:1rem;transition:transform .3s,background-color .3s;transform-origin:top}.category:hover .icon{transform:scale(1.3);fill:var(--accent-color)}.article-card{gap:.3rem}.article-card a{color:inherit}.article-card .article-link{gap:.5rem}.article-card__title{line-height:1.4}.article-card .flex{font-size:.75rem}.article-card__category{background-color:#256eff08;margin-right:.5rem;border-radius:.2rem;font-size:.75rem;padding:.2rem .4rem;font-weight:500;color:var(--accent-color) !important;justify-self:flex-start;text-transform:capitalize}#trending_article_container,#query_results_list,#written_article_list{gap:3rem 2rem;padding-bottom:3rem;grid-template-columns:repeat(auto-fill, minmax(16rem, 1fr))}.trending-article{gap:.5rem 1.5rem}.trending-article a:first-of-type{position:relative;overflow:hidden}.trending-article p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.trending-article img{height:12rem;margin-bottom:.5rem}#explore{align-items:flex-start;padding-top:1.5rem}#writer{align-items:flex-start;align-content:flex-start;padding:1.5rem;gap:3rem}#writer sm-copy{font-size:.75rem}#writer_profile{display:flex;width:4rem;height:4rem;border-radius:2rem;background-color:var(--accent-color);justify-content:center}#writer_profile #writer_initials{align-self:center;font-weight:700;font-size:1.8rem;color:rgba(var(--background-color), 1);text-transform:uppercase}#article{display:flex;flex-wrap:wrap;overflow-y:auto}#article main>section:last-of-type{padding-bottom:6rem}#article_aside{position:absolute;left:0;top:5rem;padding:1.5rem}#article_map_container{margin-top:1.5rem;display:grid;gap:.5rem}#article_map_container button{line-height:1.3;width:100%;padding:.5rem 0;text-align:left;font-weight:500;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.hero-section{position:relative;display:grid;gap:.5rem;margin-top:1.5rem;align-content:flex-end;width:100%}.hero-section p{color:inherit}.hero-section .overlay{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));z-index:-1}#article_image{margin-top:1.5rem}#article_summary:not(:empty){margin-bottom:.5rem}#article_contributors{flex-wrap:wrap;gap:.3rem;margin:.5rem 0 1rem 0}.contributor{color:inherit;font-size:.75rem;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem .5rem}#action_panel{position:fixed;bottom:0;left:0;gap:.5rem;align-items:center}.up-vote{display:grid;position:relative;padding:.5rem;border-radius:.3rem}.up-vote>*{pointer-events:none}.up-vote:active{transform:none}.up-vote:active .icon{transform:scale(0.7)}.up-vote .expanding-heart,.up-vote .ring{grid-area:1/1}.up-vote .icon{grid-area:1/1;fill:var(--like-color);transition:transform .2s}.ring{border:.1rem solid var(--like-color);border-radius:50%;height:.5rem;width:.5rem;justify-self:center}.temp-count,#like_count{grid-area:1/2}.temp-count:not(:empty),#like_count:not(:empty){margin-left:.4rem}.floating-button{position:fixed;z-index:2;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);border-radius:2rem;bottom:0;right:0;margin:1.5rem;padding:1rem}#go_to_top{background-color:var(--foreground-color)}#dashboard{height:-webkit-max-content;height:-moz-max-content;height:max-content;padding:1.5rem 0;grid-template-rows:auto 1fr}#publishing_requests,#article_analytics{margin-top:2rem;align-content:flex-start}.request-card{display:grid;gap:.5rem;border-radius:.5rem;align-items:flex-start;grid-template-columns:minmax(0, 1fr)}.request-card__title{grid-area:2/1}.request-card__time{font-size:.75rem}.request-card .flex{grid-row:span 2;margin-top:.5rem}.article-row{align-items:center;gap:1rem;grid-template-columns:1fr auto auto}.article-row__published{font-size:.75rem}#preview_popup h1,#article h1{font-size:1.6rem;line-height:1.1}#preview_popup h3:not(:first-of-type),#article h3:not(:first-of-type){margin-top:2rem}#preview_popup h3,#article h3{margin-bottom:1rem}#preview_popup h3:not(:first-of-type),#article h3:not(:first-of-type){margin-top:1.5rem}#preview_popup p,#article p{font-size:1.1rem;line-height:1.8}#preview_popup p>*,#article p>*{font-family:inherit}#preview_popup time,#preview_popup #reading_time,#article time,#article #reading_time{font-size:.75rem}#add_writer_button{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}#add_writer_button .icon{fill:rgba(var(--background-color), 1)}#writers_list{margin:1.5rem 0;grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr));padding-bottom:3rem}.writer-card{display:grid;gap:1rem;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.writer-card .writer-profile{display:flex;align-items:center;justify-content:center;height:3rem;width:3rem;border-radius:2rem;background-color:var(--accent-color);text-align:center;font-size:100%;font-weight:700;text-transform:uppercase;color:var(--foreground-color)}.writer-card sm-copy{margin-top:-0.5rem;font-size:.75rem}#cc_section{padding:1.5rem 0;width:min(28rem,100%)}.flo-id-card{width:100%;padding:.5rem 0;font-size:.9rem}.flo-id-card .flo-id{flex:1}.flo-id-card .icon-only{margin-left:.5rem}#user_popup{overflow:hidden}#user_popup header{overflow:hidden;width:100%;position:relative;padding:1.5rem;color:#dcdcdc}#user_popup header h2{margin-top:2rem}#user_popup header .popup__header__close{margin-left:-0.5rem;background-color:rgba(0,0,0,.2);border-radius:2rem}#user_popup header .popup__header__close .icon{fill:#fff}#user_background{position:absolute;top:-1px;left:0;right:0;z-index:-1;transform:scale(-1);border-radius:0 0 .5rem .5rem}.hide{display:none !important}@media screen and (max-width: 40rem){button,.button{padding:.8rem}sm-button{--padding: 0.8rem}.logo{grid-area:1/1/2/2}#search_button{justify-self:flex-end}#article main{padding:0 1.5rem}.writer-card .writer-profile{height:2.5rem;width:2.5rem}#action_panel{width:-webkit-min-content;width:-moz-min-content;width:min-content;padding:.5rem;border-radius:.5rem;background-color:var(--foreground-color);margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2)}.hide-on-mobile{display:none}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}h1,.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 .8rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.hide-on-desktop{display:none}#main_header{padding:1rem 1.5rem}.logo{position:absolute}#main_page{gap:2rem 4vw;padding:1rem 6vw;grid-template-rows:auto 1fr;grid-template-columns:2fr 1fr}#main_page__header{grid-area:1/1/2/-1}#expanding_search{margin:1rem 1.5rem;left:0;width:20rem}#writer{gap:1.5rem 6vw;padding:2rem 8vw;grid-template-columns:20rem 1fr}#writer>section:first-of-type{position:-webkit-sticky;position:sticky;top:1.5rem}#preview_popup h1,#article h1{font-size:2.2rem;font-weight:800}#preview_popup h3,#article h3{font-size:1.4rem;line-height:1.3}#article{padding:0 4vw}#article main{width:60ch;margin-left:4vw}#article_aside{width:20rem;padding:1.5rem;display:flex;flex-direction:column;position:-webkit-sticky;position:sticky;top:0;height:100%;overflow-y:auto}#article_map_container{margin-bottom:3rem}.heading-shortcut.active{color:var(--accent-color) !important}#action_panel{position:relative;margin-top:auto}#article_body{margin-top:1rem}.request-card{grid-template-columns:1fr auto}.request-card .flex{margin-top:0}#preview_popup{--width: 60ch}#edit_article_meta_popup{--width: min(56rem, calc(100vw - 8rem))}#edit_article_meta_popup>section{grid-template-columns:1fr 1.3fr;align-items:flex-start}#user_popup{--width: 26rem}}@media screen and (max-width: 64rem){.hide-on-medium{display:none}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact,button:not(.button--primary){transition:background-color .3s}.interact:hover,button:not(.button--primary):hover{background-color:#4885ff10}.button--primary{transition:filter .3s}.button--primary:hover{filter:brightness(120%)}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index e34b4ca..8c669ce 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -2,7 +2,7 @@
   padding: 0;
   margin: 0;
   box-sizing: border-box;
-  font-family: "Inter", sans-serif;
+  font-family: "Archivo", sans-serif;
 }
 
 :root {
@@ -18,8 +18,8 @@ body {
   &,
   * {
     --accent-color: #256eff;
-    --text-color: 36, 36, 36;
-    --background-color: 248, 248, 248;
+    --text-color: 20, 20, 20;
+    --background-color: 255, 255, 255;
     --foreground-color: rgb(255, 255, 255);
     --danger-color: rgb(255, 75, 75);
     --green: #1cad59;
@@ -199,8 +199,9 @@ img {
   font-size: 1.2rem;
 }
 
-.h3 {
-  font-size: 1rem;
+h3 {
+  font-size: 1.2rem;
+  line-height: 1.3;
 }
 
 .h4 {
@@ -210,7 +211,13 @@ img {
 .h5 {
   font-size: 0.75rem;
 }
-
+h1,
+h2,
+h3,
+h4,
+h5 {
+  // font-family: "Spectral", serif;
+}
 .uppercase {
   text-transform: uppercase;
 }
@@ -352,7 +359,7 @@ img {
     height: 0.4ch;
     width: 0.4ch;
     border-radius: 0.5em;
-    background-color: currentColor;
+    background-color: var(--accent-color);
   }
 }
 .icon {
@@ -563,7 +570,6 @@ sm-copy {
   grid-template-columns: auto 1fr auto auto;
   background-color: rgba(var(--background-color), 1);
   z-index: 2;
-  border-bottom: thin solid rgba(var(--text-color), 0.1);
 }
 #expanding_search {
   position: absolute;
@@ -624,10 +630,10 @@ theme-toggle {
   border-radius: 0.5rem;
   width: 5.2rem;
   text-align: center;
-  background-color: rgba(var(--text-color), 0.02);
+  background-color: #e6352f08;
   .icon {
     margin-bottom: 1rem;
-    transition: transform 0.3s;
+    transition: transform 0.3s, background-color 0.3s;
     transform-origin: top;
   }
   &:hover {
@@ -649,21 +655,21 @@ theme-toggle {
   &__title {
     line-height: 1.4;
   }
-  &__category {
-    background-color: rgba(var(--text-color), 0.06);
-    margin-right: 0.5rem;
-    border-radius: 0.2rem;
-    font-size: 0.75rem;
-    padding: 0.2rem 0.4rem;
-    font-weight: 500;
-    color: rgba(var(--text-color), 0.8);
-    justify-self: flex-start;
-    text-transform: capitalize;
-  }
   .flex {
     font-size: 0.75rem;
   }
 }
+.article-card__category {
+  background-color: #256eff08;
+  margin-right: 0.5rem;
+  border-radius: 0.2rem;
+  font-size: 0.75rem;
+  padding: 0.2rem 0.4rem;
+  font-weight: 500;
+  color: var(--accent-color) !important;
+  justify-self: flex-start;
+  text-transform: capitalize;
+}
 
 #trending_article_container,
 #query_results_list,
@@ -673,7 +679,6 @@ theme-toggle {
   grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
 }
 .trending-article {
-  counter-increment: trending;
   gap: 0.5rem 1.5rem;
   a:first-of-type {
     position: relative;
@@ -723,8 +728,7 @@ theme-toggle {
 
 #article {
   display: flex;
-  padding: 1.5rem;
-  max-height: 100%;
+  flex-wrap: wrap;
   overflow-y: auto;
   main {
     & > section:last-of-type {
@@ -753,9 +757,25 @@ theme-toggle {
   }
 }
 .hero-section {
+  position: relative;
   display: grid;
   gap: 0.5rem;
-  grid-template-columns: minmax(0, 1fr);
+  margin-top: 1.5rem;
+  align-content: flex-end;
+  width: 100%;
+  p {
+    color: inherit;
+  }
+  .overlay {
+    position: absolute;
+    content: "";
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
+    z-index: -1;
+  }
 }
 #article_image {
   margin-top: 1.5rem;
@@ -888,7 +908,7 @@ theme-toggle {
 #article {
   h1 {
     font-size: 1.6rem;
-    line-height: 1.3;
+    line-height: 1.1;
   }
 
   h3:not(:first-of-type) {
@@ -901,8 +921,8 @@ theme-toggle {
     }
   }
   p {
-    font-family: "noto serif", serif;
-    font-size: 1rem;
+    // font-family: "Roboto", sans-serif;
+    font-size: 1.1rem;
     line-height: 1.8;
     & > * {
       font-family: inherit;
@@ -1017,6 +1037,11 @@ theme-toggle {
   #search_button {
     justify-self: flex-end;
   }
+  #article {
+    main {
+      padding: 0 1.5rem;
+    }
+  }
   .writer-card {
     .writer-profile {
       height: 2.5rem;
@@ -1104,21 +1129,24 @@ theme-toggle {
   #preview_popup,
   #article {
     h1 {
-      font-size: 2rem;
+      font-size: 2.2rem;
+      font-weight: 800;
+    }
+    h3 {
+      font-size: 1.4rem;
+      line-height: 1.3;
     }
   }
   #article {
-    gap: 6vw;
-    padding: 0;
-    grid-template-columns: 16rem 1fr;
+    padding: 0 4vw;
     main {
       width: 60ch;
-      padding: 1.5rem 0;
+      margin-left: 4vw;
     }
   }
   #article_aside {
     width: 20rem;
-    padding: 1.5rem 2rem;
+    padding: 1.5rem;
     display: flex;
     flex-direction: column;
     position: sticky;
@@ -1186,7 +1214,7 @@ theme-toggle {
   button:not(.button--primary) {
     transition: background-color 0.3s;
     &:hover {
-      background-color: rgba(var(--text-color), 0.06);
+      background-color: #4885ff10;
     }
   }
   .button--primary {
diff --git a/index.html b/index.html
index 6f88946..c09a263 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,9 @@
     <link
         href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap"
         rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400..700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@400..800&display=swap" rel="stylesheet">
     <script src="purify.min.js" defer></script>
     <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6" defer></script>
     <script id="floGlobals">
@@ -259,6 +262,7 @@
                     <div id="article_contributors" class="flex"></div>
                 </section>
             </main>
+
             <button id="go_to_top" class="floating-button hide" onclick="goToTop()">
                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
                     fill="#000000">
@@ -430,6 +434,11 @@
         </header>
         <section class="grid gap-1-5">
             <div class="grid gap-1-5">
+                <label class="grid gap-0-5">
+                    <h5>Select Hero image</h5>
+                    <img src="" alt="" id="preview_image">
+                    <input id="select_image" type="file" accept="image">
+                </label>
                 <div class="grid gap-0-5">
                     <h5>Title</h5>
                     <sm-input id="edit_title" required></sm-input>
@@ -438,16 +447,12 @@
                     <h5>Select category</h5>
                     <sm-select id="edit_category"></sm-select>
                 </div>
-                <div class="grid gap-0-5">
-                    <h5>Hero image URL</h5>
-                    <sm-input id="edit_image" type="url"></sm-input>
-                </div>
+            </div>
+            <div class="grid gap-1-5">
                 <div class="grid gap-0-5">
                     <h5>Summary</h5>
                     <sm-textarea id="edit_summary" rows="4"></sm-textarea>
                 </div>
-            </div>
-            <div class="grid gap-1-5">
                 <div class="grid gap-0-5">
                     <h5>Add tags</h5>
                     <tags-input id="edit_tags" limit="10"></tags-input>
@@ -544,8 +549,9 @@
             </a>
             <div class="flex align-center" style="margin-top: 0.3rem;">
                 <a href="" class="article-card__category interact"></a>
-                <span class="trending-article__read-time h5"></span><span class="bullet-point"></span><time
-                    class="trending-article__published h5"></time>
+                <time class="trending-article__published h5"></time>
+                <span class="bullet-point"></span>
+                <span class="trending-article__read-time h5"></span>
             </div>
         </div>
     </template>
@@ -556,8 +562,9 @@
             </a>
             <div class="flex align-center" style="margin-top: 0.3rem;">
                 <a href="" class="article-card__category interact"></a>
-                <span class="article-card__read-time"></span><span class="bullet-point"></span>
                 <time class="article-card__published"></time>
+                <span class="bullet-point"></span>
+                <span class="article-card__read-time"></span>
             </div>
         </li>
     </template>
@@ -1164,11 +1171,13 @@
                 getRef('news_categories_list').innerHTML = ''
                 getRef('news_categories_list').append(frag)
                 const arrOfArticles = getArrayOfObj(floGlobals.appObjects.rmTimes.articles)
-                // Render trending article card
                 let sortedByVotes = arrOfArticles.sort((a, b) => b.votes - a.votes)
-                sortedByVotes.slice(0, 4).forEach(articleDetail => frag.append(render.trendingArticleCard(articleDetail)))
-                getRef('trending_article_container').innerHTML = ''
-                getRef('trending_article_container').append(frag)
+                // Render trending article card
+                compactIDB.readData('appObjects', 'heroImages').then(heroImages => {
+                    sortedByVotes.slice(0, 4).forEach(articleDetail => frag.append(render.trendingArticleCard({ ...articleDetail, heroImage: heroImages[articleDetail.uid].thumbnail })))
+                    getRef('trending_article_container').innerHTML = ''
+                    getRef('trending_article_container').append(frag)
+                })
                 // render latest articles
                 const sortedArticles = sortedByVotes.slice(4).sort((a, b) => b.published - a.published)
                 sortedArticles.forEach(articleDetail => frag.append(render.articleCard(articleDetail)))
@@ -1177,9 +1186,9 @@
             },
             async article(articleID, firstLoad = true) {
                 const frag = document.createDocumentFragment()
-                const allArticles = await compactIDB.readData('appObjects', 'articlesContent')
-                const { title, published, readTime, contributors, updated, summary, heroImage } = floGlobals.appObjects.rmTimes.articles[articleID]
-                getRef('article_image').src = heroImage
+                const [allArticles, heroImages] = await Promise.all([compactIDB.readData('appObjects', 'articlesContent'), compactIDB.readData('appObjects', 'heroImages')])
+                const { title, published, readTime, contributors, updated, summary } = floGlobals.appObjects.rmTimes.articles[articleID]
+                getRef('article_image').src = heroImages[articleID].full
                 getRef('article_title').textContent = title
                 getRef('article_summary').textContent = summary
                 getRef('published_time').textContent = `${getFormattedTime(published, 'date-only')}${updated ? `, Updated ${relativeTime.from(updated)}` : ''}`
@@ -1276,8 +1285,10 @@
             Promise.all([
                 floCloudAPI.requestObjectData('rmTimes'),
                 floCloudAPI.requestObjectData('articlesContent'),
+                floCloudAPI.requestObjectData('heroImages'),
             ]).then(() => {
                 delete floGlobals.appObjects.articlesContent
+                delete floGlobals.appObjects.heroImages
                 showPage(window.location.hash, { firstLoad: true })
             })
         }
@@ -1294,19 +1305,6 @@
             return arr
         }
 
-        // implement image resizing
-        function resizeImage(img, maxWidth, maxHeight) {
-            const canvas = document.createElement('canvas')
-            const ctx = canvas.getContext('2d')
-            const ratio = 1
-            canvas.width = img.width * ratio
-            canvas.height = img.height * ratio
-            ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
-            const dataURL = canvas.toDataURL('image/jpeg', 0.5)
-            return dataURL
-        }
-
-
         const categories = [
             {
                 title: 'Culture',
@@ -1797,7 +1795,7 @@
             const isPublished = floGlobals.appObjects.rmTimes.articles.hasOwnProperty(articleID)
             getConfirmation(`${isPublished ? 'Update' : 'Publish'} article?`).then(res => {
                 if (res) {
-                    const { title, category, summary, published, tags, contributors } = getArticleMetaData()
+                    const { title, category, summary, published, tags, contributors, heroImage } = getArticleMetaData()
                     floGlobals.appObjects.adminData.publishedVc[vectorClock] = true
                     floGlobals.appObjects.articlesContent[articleID] = content
                     if (isPublished) {
@@ -1816,10 +1814,12 @@
                     floGlobals.appObjects.rmTimes.articles[articleID].tags = tags
                     floGlobals.appObjects.rmTimes.articles[articleID].readTime = readTime
                     floGlobals.appObjects.rmTimes.articles[articleID].summary = summary
+                    floGlobals.appObjects.heroImages[articleID] = heroImage
                     Promise.all([
                         floCloudAPI.updateObjectData('rmTimes'),
                         floCloudAPI.updateObjectData('adminData'),
                         floCloudAPI.updateObjectData('articlesContent'),
+                        floCloudAPI.updateObjectData('heroImages'),
                     ]).then(() => {
                         notify(`${isPublished ? 'Updated' : 'Published'} article`, 'success')
                         if (!isPublished) {
@@ -1838,9 +1838,9 @@
                 const { message: { articleID, title, contributors } } = floGlobals.generalData[`publishing_requests|${floGlobals.adminID}|${floGlobals.application}`][vc]
                 const isPublished = floGlobals.appObjects.rmTimes.articles.hasOwnProperty(articleID)
                 if (isPublished)
-                    setArticleMetaData(floGlobals.appObjects.rmTimes.articles[articleID])
+                    setArticleMetaData(floGlobals.appObjects.rmTimes.articles[articleID], articleID)
                 else
-                    setArticleMetaData({ title, contributors })
+                    setArticleMetaData({ title, contributors }, articleID)
                 floGlobals.subAdminData = {
                     actionType: 'request',
                     articleID,
@@ -1876,10 +1876,16 @@
             }
         }
 
-        function setArticleMetaData(details) {
-            const { category, title, tags, summary, published, contributors, heroImage } = details
+        async function setArticleMetaData(details, articleID) {
+            const { category, title, tags, summary, published, contributors } = details
+            const heroImage = floGlobals.appObjects.heroImages[articleID]
             getRef('edit_title').value = title;
-            getRef('edit_image').value = heroImage || '';
+            if (heroImage) {
+                getRef('preview_image').src = heroImage.thumbnail
+                getRef('select_image').value = '';
+            } else {
+                getRef('preview_image').src = ''
+            }
             getRef('edit_summary').value = summary || '';
             getRef('edit_category').value = category || '';
             getRef('edit_contributors').value = contributors || [];
@@ -1891,7 +1897,7 @@
             return {
                 title: getRef('edit_title').value.trim(),
                 category: getRef('edit_category').value,
-                heroImage: getRef('edit_image').value,
+                heroImage: currentSelectedImage,
                 summary: getRef('edit_summary').value.trim(),
                 published: new Date(getRef('edit_published').value).getTime(),
                 contributors: getRef('edit_contributors').value,
@@ -1902,7 +1908,7 @@
             if (e.target.closest('.edit-article')) {
                 const button = e.target.closest('.edit-article');
                 const articleID = button.dataset.articleId;
-                setArticleMetaData(floGlobals.appObjects.rmTimes.articles[articleID])
+                setArticleMetaData(floGlobals.appObjects.rmTimes.articles[articleID], articleID)
                 floGlobals.subAdminData = {
                     actionType: 'analytics',
                     articleID,
@@ -1921,11 +1927,11 @@
                     floGlobals.appObjects.rmTimes.articles[articleID].title = title
                     floGlobals.appObjects.rmTimes.articles[articleID].tags = tags
                     floGlobals.appObjects.rmTimes.articles[articleID].summary = summary
-                    floGlobals.appObjects.rmTimes.articles[articleID].heroImage = heroImage
                     floGlobals.appObjects.rmTimes.articles[articleID].contributors = contributors
+                    floGlobals.appObjects.heroImages[articleID] = heroImage
                     Promise.all([
                         floCloudAPI.updateObjectData('rmTimes'),
-                        floCloudAPI.updateObjectData('adminData'),
+                        floCloudAPI.updateObjectData('heroImages'),
                     ]).then(() => {
                         notify(`Updated article meta data`, 'success')
                         hidePopup()
@@ -1991,7 +1997,10 @@
                         console.log('calculated votes')
                     })
             })
-            floGlobals.appObjects.articlesContent = await compactIDB.readData('appObjects', 'articlesContent')
+            Promise.all([compactIDB.readData('appObjects', 'articlesContent'), compactIDB.readData('appObjects', 'heroImages')]).then(res => {
+                floGlobals.appObjects.articlesContent = res[0];
+                floGlobals.appObjects.heroImages = res[1];
+            })
         }
 
         getRef('section_selector').addEventListener('change', e => {
@@ -2118,6 +2127,45 @@
             }
         }
 
+        let currentSelectedImage = {}
+        getRef('select_image').addEventListener('change', function (e) {
+            currentSelectedImage = {}
+            if (this.files.length === 0) return
+            const selectedFile = this.files[0]
+            const reader = new FileReader();
+            reader.onload = function (e) {
+                // show selected image in the preview
+                getRef('preview_image').src = e.target.result;
+                getRef('preview_image').addEventListener('load', function (event) {
+                    // Dynamically create a canvas element
+                    const canvas = createElement("canvas");
+                    const context = canvas.getContext("2d");
+                    const originalWidth = getRef('preview_image').width;
+                    const originalHeight = getRef('preview_image').height;
+                    const resizingFactor = parseFloat((1 / (originalWidth / 600)).toFixed(2));
+
+                    const canvasWidth = originalWidth * resizingFactor;
+                    const canvasHeight = originalHeight * resizingFactor;
+
+                    canvas.width = canvasWidth;
+                    canvas.height = canvasHeight;
+
+                    context.drawImage(
+                        getRef('preview_image'),
+                        0,
+                        0,
+                        originalWidth * resizingFactor,
+                        originalHeight * resizingFactor
+                    );
+                    currentSelectedImage['thumbnail'] = canvas.toDataURL(selectedFile.type);
+                }, { once: true });
+                currentSelectedImage.name = selectedFile.name
+                currentSelectedImage.type = selectedFile.type
+                currentSelectedImage.full = e.target.result
+            }
+            reader.readAsDataURL(this.files[0]);
+        })
+
     </script>
     <script id="onLoadStartUp">
         function onLoadStartUp() {