diff --git a/components.js b/components.js
index 44f0002..6eb55d3 100644
--- a/components.js
+++ b/components.js
@@ -301,7 +301,6 @@ border: none;
     --width: 100%;
     --icon-gap: 0.5rem;
     --border-radius: 0.3rem;
-    --padding: 0.7rem 1rem;
     --background: rgba(var(--text-color), 0.06);
 }
 .hide{
@@ -335,7 +334,7 @@ border: none;
             align-items: center;
     position: relative;
     gap: var(--icon-gap);
-    padding: var(--padding);
+    padding: var(--padding, 0.6rem 0.8rem);
     border-radius: var(--border-radius);
     -webkit-transition: opacity 0.3s;
     -o-transition: opacity 0.3s;
@@ -1535,8 +1534,8 @@ themeToggle.innerHTML = `
     .theme-toggle {
         display: flex;
         position: relative;
-        width: 1.4rem;
-        height: 1.4rem;
+        width: 1.2rem;
+        height: 1.2rem;
         cursor: pointer;
         -webkit-tap-highlight-color: transparent;
     }
diff --git a/css/main.css b/css/main.css
index 1290e65..6ec416e 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,8 +1,7 @@
 * {
   padding: 0;
   margin: 0;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   font-family: "Inter", sans-serif;
 }
 
@@ -22,7 +21,7 @@ body {
 }
 body,
 body * {
-  --accent-color: rgb(0, 156, 78);
+  --accent-color: #256eff;
   --text-color: 36, 36, 36;
   --background-color: 248, 248, 248;
   --foreground-color: rgb(255, 255, 255);
@@ -34,7 +33,7 @@ body * {
 
 body[data-theme=dark],
 body[data-theme=dark] * {
-  --accent-color: rgb(14, 230, 122);
+  --accent-color: #86afff;
   --text-color: 230, 230, 230;
   --text-color-light: 170, 170, 170;
   --background-color: 10, 10, 10;
@@ -60,12 +59,14 @@ strong:not(:last-of-type) {
 }
 
 a {
-  color: var(--accent-color);
   text-decoration: none;
 }
-a:focus-visible {
-  -webkit-box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
-          box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+
+a:not([class]) {
+  color: var(--accent-color);
+}
+a:not([class]):focus-visible {
+  box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
 }
 
 button,
@@ -75,8 +76,6 @@ button,
       -ms-user-select: none;
           user-select: none;
   position: relative;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
   border: none;
   background-color: transparent;
@@ -84,9 +83,7 @@ button,
   color: inherit;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   font-size: 0.9rem;
   font-weight: 500;
 }
@@ -97,9 +94,7 @@ button,
   border-radius: 0.3rem;
   background-color: rgba(var(--text-color), 0.06);
   color: rgba(var(--text-color), 0.8);
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 .button--primary {
   background-color: var(--accent-color);
@@ -209,8 +204,6 @@ ul {
 }
 
 .flex {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -247,15 +240,11 @@ ul {
 }
 
 .align-start {
-  -webkit-box-align: start;
-      -ms-flex-align: start;
-          align-items: flex-start;
+  align-items: flex-start;
 }
 
 .align-center {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 
 .text-center {
@@ -263,15 +252,11 @@ ul {
 }
 
 .justify-start {
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: start;
+  justify-content: start;
 }
 
 .justify-center {
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 
 .justify-right {
@@ -279,8 +264,7 @@ ul {
 }
 
 .align-self-center {
-  -ms-flex-item-align: center;
-      align-self: center;
+  align-self: center;
 }
 
 .justify-self-center {
@@ -296,16 +280,11 @@ ul {
 }
 
 .direction-column {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
 }
 
 .space-between {
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
 }
 
 .w-100 {
@@ -317,8 +296,7 @@ ul {
   width: 8rem;
   position: absolute;
   border-radius: 50%;
-  -webkit-transform: scale(0);
-          transform: scale(0);
+  transform: scale(0);
   background: radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);
   pointer-events: none;
 }
@@ -348,8 +326,7 @@ ul {
   width: 1.2rem;
   height: 1.2rem;
   fill: rgba(var(--text-color), 0.8);
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-shrink: 0;
 }
 
 .button__icon {
@@ -377,10 +354,7 @@ ul {
 
 #confirmation_popup,
 #prompt_popup {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
 }
 #confirmation_popup h4,
 #prompt_popup h4 {
@@ -411,9 +385,7 @@ ul {
   gap: 0.5rem;
   width: 100%;
   padding: 0 1.5rem 0 0.8rem;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   grid-template-columns: auto 1fr auto;
 }
 
@@ -423,19 +395,17 @@ ul {
 }
 
 .logo {
+  color: inherit;
   display: grid;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  width: 100%;
+  align-items: center;
   grid-template-columns: auto 1fr;
-  gap: 0 0.5rem;
-  margin-right: 1rem;
+  gap: 0 0.2rem;
+  justify-self: center;
 }
 .logo h4 {
   text-transform: capitalize;
   font-size: 0.9rem;
-  font-weight: 600;
+  letter-spacing: 0.03em;
 }
 .logo .main-logo {
   height: 1.4rem;
@@ -445,24 +415,15 @@ ul {
 }
 
 details summary {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   cursor: pointer;
 }
-details[open] > summary {
-  margin-bottom: 1rem;
-}
-details[open] > summary .icon {
-  -webkit-transform: rotate(180deg);
-          transform: rotate(180deg);
+details[open] > summary .down-arrow {
+  transform: rotate(180deg);
 }
 
 sm-select,
@@ -481,12 +442,6 @@ strip-option {
   --active-option-color: var(--accent-color);
 }
 
-sm-checkbox {
-  --height: 1rem;
-  --width: 1rem;
-  -webkit-tap-highlight-color: transparent;
-}
-
 sm-menu {
   --background: var(--foreground-color);
 }
@@ -529,14 +484,12 @@ sm-copy {
   padding: 1.5rem 0;
 }
 #landing > section {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   text-align: center;
 }
 #landing h1 {
   margin-top: -2ch;
-  font-size: clamp(2rem,5vw,5rem);
+  font-size: clamp(2rem, 5vw, 5rem);
 }
 #landing p {
   max-width: 100%;
@@ -545,9 +498,7 @@ sm-copy {
 #sign_in,
 #sign_up {
   grid-template-rows: auto 1fr;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 #sign_in section,
 #sign_up section {
@@ -582,25 +533,40 @@ sm-copy {
   place-content: center;
   text-align: center;
 }
-#loading sm-spinner {
+
+#loader_container {
+  height: 3rem;
+  overflow: hidden;
   margin-bottom: 1.5rem;
 }
-
-#main_header {
-  position: sticky;
-  top: 0;
-  display: grid;
-  gap: 1rem;
-  padding: 1rem;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  grid-template-columns: 1fr auto auto;
-  grid-column: 1/-1;
-  background-color: var(--foreground-color);
-  z-index: 2;
+#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: 0.8rem;
   color: rgba(var(--text-color), 0.8);
@@ -616,14 +582,137 @@ sm-copy {
   fill: var(--danger-color);
 }
 
-#main_page {
-  -ms-scroll-chaining: none;
-      overscroll-behavior: contain;
+main {
+  display: grid;
   height: 100%;
-  overflow-y: hidden;
+  grid-template-rows: auto 1fr;
   grid-template-columns: minmax(0, 1fr);
 }
 
+#main_header {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  display: grid;
+  gap: 0.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.2);
+}
+
+#expanding_search {
+  position: absolute;
+  display: grid;
+  gap: 0.5rem;
+  align-items: center;
+  width: calc(100% - 2rem);
+  margin: 0 1rem;
+  z-index: 1;
+  background-color: rgba(var(--background-color), 1);
+  -webkit-clip-path: circle(0 at 1.5rem);
+          clip-path: circle(0 at 1.5rem);
+  transition: -webkit-clip-path 0.1s;
+  transition: clip-path 0.1s;
+  transition: clip-path 0.1s, -webkit-clip-path 0.1s;
+}
+#expanding_search.expanded {
+  transition: -webkit-clip-path 0.3s;
+  transition: clip-path 0.3s;
+  transition: clip-path 0.3s, -webkit-clip-path 0.3s;
+  -webkit-clip-path: circle(200%);
+          clip-path: circle(200%);
+}
+#expanding_search button {
+  margin-right: 0.5rem;
+}
+
+#search_suggestions {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  background-color: var(--foreground-color);
+  padding: 0.3rem;
+  width: 100%;
+  border-radius: 0.3rem;
+  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
+}
+
+.search-suggestion {
+  font-size: 0.9rem;
+  color: inherit;
+  padding: 1rem;
+  border-radius: 0.3rem;
+}
+
+#search_articles {
+  --border-radius: 0.5em;
+  width: 100%;
+}
+
+theme-toggle {
+  padding: 0 0.5rem;
+}
+
+#main_page {
+  display: grid;
+  padding: 1rem;
+  padding-top: 0;
+  gap: 1.5rem;
+}
+
+.category {
+  padding: 0.5rem;
+  color: inherit;
+  font-size: 0.9rem;
+}
+
+#latest_articles_list {
+  margin: 1rem 0;
+  gap: 1.6rem;
+}
+
+.article-card {
+  gap: 0.3rem;
+}
+.article-card a {
+  color: inherit;
+}
+.article-card .article-link {
+  gap: 0.5rem;
+}
+.article-card__title {
+  line-height: 1.4;
+}
+.article-card__category {
+  background-color: rgba(var(--text-color), 0.1);
+  border-radius: 0.3rem;
+  font-size: 0.8rem;
+  padding: 0.3rem 0.6rem;
+  font-weight: 700;
+  color: rgba(var(--text-color), 0.6) !important;
+  justify-self: flex-start;
+  text-transform: capitalize;
+}
+.article-card .flex {
+  font-size: 0.8rem;
+  gap: 0.3rem;
+}
+
+#article {
+  gap: 2rem 0;
+  padding-bottom: 3rem;
+}
+
+.hero-section {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: minmax(0, 1fr);
+  padding-top: 1.5rem;
+}
+
 #dashboard {
   height: -webkit-max-content;
   height: -moz-max-content;
@@ -633,18 +722,15 @@ sm-copy {
 }
 
 #publishing_requests {
-  padding: 1.5rem 0;
-  -ms-flex-line-pack: start;
-      align-content: flex-start;
+  margin-top: 2rem;
+  align-content: flex-start;
 }
 
 .request-card {
   display: grid;
   gap: 0.5rem;
   border-radius: 0.5rem;
-  -webkit-box-align: start;
-      -ms-flex-align: start;
-          align-items: flex-start;
+  align-items: flex-start;
   grid-template-columns: 1fr auto;
 }
 .request-card__title {
@@ -663,26 +749,39 @@ sm-copy {
   font-weight: 700;
 }
 
-#preview_popup h1 {
+#preview_popup h1,
+#article h1 {
   font-size: 1.4rem;
   margin-bottom: 1rem;
 }
-#preview_popup h3:not(:first-of-type) {
+#preview_popup h3:not(:first-of-type),
+#article h3:not(:first-of-type) {
   margin-top: 2rem;
 }
-#preview_popup h3 {
+#preview_popup h3,
+#article h3 {
   margin-bottom: 1rem;
 }
-#preview_popup h3:not(:first-of-type) {
-  margin-top: 3rem;
+#preview_popup h3:not(:first-of-type),
+#article h3:not(:first-of-type) {
+  margin-top: 1.5rem;
 }
-#preview_popup p {
+#preview_popup p,
+#article p {
   font-family: "noto serif", serif;
   font-size: 1rem;
+  line-height: 1.8;
 }
-#preview_popup p > * {
+#preview_popup p > *,
+#article p > * {
   font-family: inherit;
 }
+#preview_popup time,
+#preview_popup #reading_time,
+#article time,
+#article #reading_time {
+  font-size: 0.8rem;
+}
 
 @media screen and (max-width: 40rem) {
   .hide-on-mobile {
@@ -742,6 +841,31 @@ sm-copy {
     padding: 1rem 1.5rem;
   }
 
+  #main_page {
+    padding: 1rem 6vw;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 1fr 22rem;
+  }
+
+  #main_page__header {
+    grid-area: 1/1/2/-1;
+  }
+
+  #expanding_search {
+    margin: 1rem 1.5rem;
+    left: 0;
+    width: 20rem;
+  }
+
+  #preview_popup h1,
+#article h1 {
+    font-size: 2rem;
+  }
+
+  #article {
+    grid-template-columns: 1fr 60ch 1fr;
+  }
+
   #preview_popup {
     --width: 60ch;
   }
@@ -762,22 +886,17 @@ sm-copy {
 
   .interact,
 button:not(.button--primary) {
-    -webkit-transition: background-color 0.3s;
     transition: background-color 0.3s;
   }
   .interact:hover,
 button:not(.button--primary):hover {
-    background-color: rgba(var(--text-color), 0.1);
+    background-color: rgba(var(--text-color), 0.06);
   }
 
   .button--primary {
-    -webkit-transition: -webkit-filter 0.3s;
-    transition: -webkit-filter 0.3s;
     transition: filter 0.3s;
-    transition: filter 0.3s, -webkit-filter 0.3s;
   }
   .button--primary:hover {
-    -webkit-filter: brightness(120%);
-            filter: brightness(120%);
+    filter: brightness(120%);
   }
 }
\ No newline at end of file
diff --git a/css/main.min.css b/css/main.min.css
index 6189212..703a7d8 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Inter",sans-serif}:root{font-size:clamp(1rem, 1.2vmax, 1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color), 1);background:rgba(var(--background-color), 1)}body,body *{--accent-color: rgb(0, 156, 78);--text-color: 36, 36, 36;--background-color: 248, 248, 248;--foreground-color: rgb(255, 255, 255);--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: #f3a600;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color: rgb(14, 230, 122);--text-color: 230, 230, 230;--text-color-light: 170, 170, 170;--background-color: 10, 10, 10;--foreground-color: rgb(24, 24, 24);--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: #ffd13a}body[data-theme=dark] sm-popup::part(popup){background-color:var(--foreground-color)}p,strong{font-size:.9rem;max-width:70ch;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{color:var(--accent-color);text-decoration:none}a:focus-visible{-webkit-box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset;box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:.9rem;font-weight:500}.button{white-space:nowrap;padding:.5rem .8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}.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.5rem 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}.hide-completely{display:none !important}.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:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.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{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.text-center{text-align:center}.justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-right{margin-left:auto}.align-self-center{-ms-flex-item-align:center;align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.w-100{width:100%}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;-webkit-transform:scale(0);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 1rem}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);-ms-flex-negative:0;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{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;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;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}.logo{display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .5rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}sm-select,sm-option,strip-option{font-size:.9rem}strip-select{--gap: 0}strip-option{font-weight:500;--border-radius: 0.3rem;--active-option-color: var(--accent-color)}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}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:1rem minmax(0, 1fr) 1rem}.page-layout>*,#preview_page>*{grid-column:2/3}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>section{-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center}#landing h1{margin-top:-2ch;font-size:clamp(2rem,5vw,5rem)}#landing p{max-width:100%}#sign_in,#sign_up{grid-template-rows:auto 1fr;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#sign_in section,#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem, 100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_in header,#sign_up header{padding:1.5rem 0}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#loading{place-content:center;text-align:center}#loading sm-spinner{margin-bottom:1.5rem}#main_header{position:sticky;top:0;display:grid;gap:1rem;padding:1rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:1fr auto auto;grid-column:1/-1;background-color:var(--foreground-color);z-index:2}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}#main_page{-ms-scroll-chaining:none;overscroll-behavior:contain;height:100%;overflow-y:hidden;grid-template-columns:minmax(0, 1fr)}#dashboard{height:-webkit-max-content;height:-moz-max-content;height:max-content;padding:1.5rem 0;grid-template-rows:auto 1fr}#publishing_requests{padding:1.5rem 0;-ms-flex-line-pack:start;align-content:flex-start}.request-card{display:grid;gap:.5rem;border-radius:.5rem;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;grid-template-columns:1fr auto}.request-card__title{grid-area:2/1}.request-card__time{font-size:.8rem}.request-card .flex{grid-row:span 2}.request-card .publish-button{text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;font-weight:700}#preview_popup h1{font-size:1.4rem;margin-bottom:1rem}#preview_popup h3:not(:first-of-type){margin-top:2rem}#preview_popup h3{margin-bottom:1rem}#preview_popup h3:not(:first-of-type){margin-top:3rem}#preview_popup p{font-family:"noto serif",serif;font-size:1rem}#preview_popup p>*{font-family:inherit}@media screen and (max-width: 40rem){.hide-on-mobile{display:none}}@supports(-webkit-text-stroke: 1px black){#landing h1{-webkit-text-stroke:1px rgba(var(--text-color), 1);-webkit-text-fill-color:rgba(var(--background-color), 1)}}@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}#landing h1{-webkit-text-stroke-width:.1rem}#main_header{padding:1rem 1.5rem}#preview_popup{--width: 60ch}}@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){-webkit-transition:background-color .3s;transition:background-color .3s}.interact:hover,button:not(.button--primary):hover{background-color:rgba(var(--text-color), 0.1)}.button--primary{-webkit-transition:-webkit-filter .3s;transition:-webkit-filter .3s;transition:filter .3s;transition:filter .3s, -webkit-filter .3s}.button--primary:hover{-webkit-filter:brightness(120%);filter:brightness(120%)}}
\ No newline at end of file
+*{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%;scroll-behavior:smooth}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;--yellow: #f3a600;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color: #86afff;--text-color: 230, 230, 230;--text-color-light: 170, 170, 170;--background-color: 10, 10, 10;--foreground-color: rgb(24, 24, 24);--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: #ffd13a}body[data-theme=dark] sm-popup::part(popup){background-color:var(--foreground-color)}p,strong{font-size:.9rem;max-width:70ch;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}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:.5rem .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)}.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.5rem 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}.hide-completely{display:none !important}.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:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.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 1rem}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.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}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-select,sm-option,strip-option{font-size:.9rem}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:1rem minmax(0, 1fr) 1rem}.page-layout>*,#preview_page>*{grid-column:2/3}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>section{align-items:center;text-align:center}#landing h1{margin-top:-2ch;font-size:clamp(2rem,5vw,5rem)}#landing p{max-width:100%}#sign_in,#sign_up{grid-template-rows:auto 1fr;align-items:center}#sign_in section,#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_in header,#sign_up header{padding:1.5rem 0}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#loading{place-content:center;text-align:center}#loader_container{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:.8rem;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{position:-webkit-sticky;position:sticky;top:0;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.2)}#expanding_search{position:absolute;display:grid;gap:.5rem;align-items:center;width:calc(100% - 2rem);margin:0 1rem;z-index:1;background-color:rgba(var(--background-color), 1);-webkit-clip-path:circle(0 at 1.5rem);clip-path:circle(0 at 1.5rem);transition:-webkit-clip-path .1s;transition:clip-path .1s;transition:clip-path .1s, -webkit-clip-path .1s}#expanding_search.expanded{transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(200%);clip-path:circle(200%)}#expanding_search button{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{padding:0 .5rem}#main_page{display:grid;padding:1rem;padding-top:0;gap:1.5rem}.category{padding:.5rem;color:inherit;font-size:.9rem}#latest_articles_list{margin:1rem 0;gap:1.6rem}.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.1);border-radius:.3rem;font-size:.8rem;padding:.3rem .6rem;font-weight:700;color:rgba(var(--text-color), 0.6) !important;justify-self:flex-start;text-transform:capitalize}.article-card .flex{font-size:.8rem;gap:.3rem}#article{gap:2rem 0;padding-bottom:3rem}.hero-section{display:grid;gap:.5rem;grid-template-columns:minmax(0, 1fr);padding-top:1.5rem}#dashboard{height:-webkit-max-content;height:-moz-max-content;height:max-content;padding:1.5rem 0;grid-template-rows:auto 1fr}#publishing_requests{margin-top:2rem;align-content:flex-start}.request-card{display:grid;gap:.5rem;border-radius:.5rem;align-items:flex-start;grid-template-columns:1fr auto}.request-card__title{grid-area:2/1}.request-card__time{font-size:.8rem}.request-card .flex{grid-row:span 2}.request-card .publish-button{text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;font-weight:700}#preview_popup h1,#article h1{font-size:1.4rem;margin-bottom:1rem}#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:.8rem}@media screen and (max-width: 40rem){.hide-on-mobile{display:none}}@supports(-webkit-text-stroke: 1px black){#landing h1{-webkit-text-stroke:1px rgba(var(--text-color), 1);-webkit-text-fill-color:rgba(var(--background-color), 1)}}@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}#landing h1{-webkit-text-stroke-width:.1rem}#main_header{padding:1rem 1.5rem}#main_page{padding:1rem 6vw;grid-template-rows:auto 1fr;grid-template-columns:1fr 22rem}#main_page__header{grid-area:1/1/2/-1}#expanding_search{margin:1rem 1.5rem;left:0;width:20rem}#preview_popup h1,#article h1{font-size:2rem}#article{grid-template-columns:1fr 60ch 1fr}#preview_popup{--width: 60ch}}@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
diff --git a/css/main.scss b/css/main.scss
index a635285..6476253 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -18,7 +18,7 @@ body {
 body {
   &,
   * {
-    --accent-color: rgb(0, 156, 78);
+    --accent-color: #256eff;
     --text-color: 36, 36, 36;
     --background-color: 248, 248, 248;
     --foreground-color: rgb(255, 255, 255);
@@ -35,7 +35,7 @@ body {
 body[data-theme="dark"] {
   &,
   * {
-    --accent-color: rgb(14, 230, 122);
+    --accent-color: #86afff;
     --text-color: 230, 230, 230;
     --text-color-light: 170, 170, 170;
     --background-color: 10, 10, 10;
@@ -60,11 +60,12 @@ strong {
     margin-bottom: 1.5rem;
   }
 }
-
 a {
-  color: var(--accent-color);
   text-decoration: none;
-  
+}
+a:not([class]) {
+  color: var(--accent-color);
+
   &:focus-visible {
     box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
   }
@@ -97,7 +98,7 @@ button,
     color: rgba(var(--background-color), 1);
   }
 }
-.icon-only{
+.icon-only {
   padding: 0.5rem;
   border-radius: 0.3rem;
 }
@@ -282,16 +283,20 @@ ul {
   width: 100%;
 }
 
-.ripple{
+.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%);
+  background: radial-gradient(
+    circle,
+    rgba(var(--text-color), 0.3) 0%,
+    rgba(0, 0, 0, 0) 50%
+  );
   pointer-events: none;
 }
-.interact{
+.interact {
   position: relative;
   overflow: hidden;
   cursor: pointer;
@@ -377,17 +382,16 @@ ul {
   cursor: pointer;
 }
 .logo {
+  color: inherit;
   display: grid;
   align-items: center;
-  width: 100%;
   grid-template-columns: auto 1fr;
-  gap: 0 0.5rem;
-  margin-right: 1rem;
-
+  gap: 0 0.2rem;
+  justify-self: center;
   h4 {
     text-transform: capitalize;
     font-size: 0.9rem;
-    font-weight: 600;
+    letter-spacing: 0.03em;
   }
 
   .main-logo {
@@ -400,36 +404,29 @@ ul {
 details {
   summary {
     display: flex;
-    justify-content: space-between;
     user-select: none;
     cursor: pointer;
   }
 
   &[open] > summary {
-    margin-bottom: 1rem;
-    .icon {
+    .down-arrow {
       transform: rotate(180deg);
     }
   }
 }
 sm-select,
 sm-option,
-strip-option{
+strip-option {
   font-size: 0.9rem;
 }
-strip-select{
+strip-select {
   --gap: 0;
 }
-strip-option{
+strip-option {
   font-weight: 500;
   --border-radius: 0.3rem;
   --active-option-color: var(--accent-color);
 }
-sm-checkbox {
-  --height: 1rem;
-  --width: 1rem;
-  -webkit-tap-highlight-color: transparent;
-}
 sm-menu {
   --background: var(--foreground-color);
 }
@@ -447,7 +444,7 @@ sm-copy {
   border-radius: 0.5rem;
   line-height: 1.5;
 }
-.page{
+.page {
   height: 100%;
 }
 .page-layout,
@@ -467,11 +464,11 @@ sm-copy {
     align-items: center;
     text-align: center;
   }
-  h1{
+  h1 {
     margin-top: -2ch;
-    font-size: clamp(2rem,5vw,5rem);
+    font-size: clamp(2rem, 5vw, 5rem);
   }
-  p{
+  p {
     max-width: 100%;
   }
 }
@@ -480,7 +477,7 @@ sm-copy {
 #sign_up {
   grid-template-rows: auto 1fr;
   align-items: center;
-  section{
+  section {
     margin-top: -6rem;
     justify-self: center;
     width: min(24rem, 100%);
@@ -510,22 +507,36 @@ sm-copy {
 #loading {
   place-content: center;
   text-align: center;
-  sm-spinner {
-    margin-bottom: 1.5rem;
+}
+#loader_container {
+  height: 3rem;
+  overflow: hidden;
+  margin-bottom: 1.5rem;
+  &::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;
+  animation: scroll infinite 1s cubic-bezier(0.075, 0.82, 0.165, 1);
+  fill: rgba(var(--text-color), 0.2);
+}
 
-#main_header {
-  position: sticky;
-  top: 0;
-  display: grid;
-  gap: 1rem;
-  padding: 1rem;
-  align-items: center;
-  grid-template-columns: 1fr auto auto;
-  grid-column: 1/-1;
-  background-color: var(--foreground-color);
-  z-index: 2;
+@keyframes scroll {
+  to {
+    transform: translateY(-3rem);
+  }
 }
 .label {
   font-size: 0.8rem;
@@ -540,38 +551,155 @@ sm-copy {
   fill: var(--danger-color);
 }
 
-#main_page {
-  overscroll-behavior: contain;
+main {
+  display: grid;
   height: 100%;
-  overflow-y: hidden;
+  grid-template-rows: auto 1fr;
   grid-template-columns: minmax(0, 1fr);
 }
-#dashboard{
+
+#main_header {
+  position: sticky;
+  top: 0;
+  display: grid;
+  gap: 0.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.2);
+}
+#expanding_search {
+  position: absolute;
+  display: grid;
+  gap: 0.5rem;
+  align-items: center;
+  width: calc(100% - 2rem);
+  margin: 0 1rem;
+  z-index: 1;
+  background-color: rgba(var(--background-color), 1);
+  clip-path: circle(0 at 1.5rem);
+  transition: clip-path 0.1s;
+  &.expanded {
+    transition: clip-path 0.3s;
+    clip-path: circle(200%);
+  }
+  button {
+    margin-right: 0.5rem;
+  }
+}
+#search_suggestions {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  background-color: var(--foreground-color);
+  padding: 0.3rem;
+  width: 100%;
+  border-radius: 0.3rem;
+  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
+}
+.search-suggestion {
+  font-size: 0.9rem;
+  color: inherit;
+  padding: 1rem;
+  border-radius: 0.3rem;
+}
+#search_articles {
+  --border-radius: 0.5em;
+  width: 100%;
+}
+theme-toggle {
+  padding: 0 0.5rem;
+}
+
+#main_page {
+  display: grid;
+  padding: 1rem;
+  padding-top: 0;
+  gap: 1.5rem;
+  // & > * {
+  //   border: solid;
+  // }
+}
+
+#news_categories_list {
+}
+.category {
+  padding: 0.5rem;
+  color: inherit;
+  font-size: 0.9rem;
+}
+
+#latest_articles_list {
+  margin: 1rem 0;
+  gap: 1.6rem;
+}
+.article-card {
+  gap: 0.3rem;
+  a {
+    color: inherit;
+  }
+  .article-link {
+    gap: 0.5rem;
+  }
+  &__title {
+    line-height: 1.4;
+  }
+  &__category {
+    background-color: rgba(var(--text-color), 0.1);
+    border-radius: 0.3rem;
+    font-size: 0.8rem;
+    padding: 0.3rem 0.6rem;
+    font-weight: 700;
+    color: rgba(var(--text-color), 0.6) !important;
+    justify-self: flex-start;
+    text-transform: capitalize;
+  }
+  .flex {
+    font-size: 0.8rem;
+    gap: 0.3rem;
+  }
+}
+
+#article {
+  gap: 2rem 0;
+  padding-bottom: 3rem;
+}
+
+.hero-section {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: minmax(0, 1fr);
+  padding-top: 1.5rem;
+}
+
+#dashboard {
   height: max-content;
-  padding: 1.5rem  0;
+  padding: 1.5rem 0;
   grid-template-rows: auto 1fr;
 }
-#publishing_requests{
-  padding: 1.5rem 0;
+#publishing_requests {
+  margin-top: 2rem;
   align-content: flex-start;
 }
 
-.request-card{
+.request-card {
   display: grid;
   gap: 0.5rem;
   border-radius: 0.5rem;
   align-items: flex-start;
   grid-template-columns: 1fr auto;
-  &__title{
+  &__title {
     grid-area: 2/1;
   }
-  &__time{
+  &__time {
     font-size: 0.8rem;
   }
-  .flex{
+  .flex {
     grid-row: span 2;
   }
-  .publish-button{
+  .publish-button {
     text-transform: uppercase;
     letter-spacing: 0.05em;
     font-size: 0.8rem;
@@ -579,28 +707,34 @@ sm-copy {
   }
 }
 
-#preview_popup{
+#preview_popup,
+#article {
   h1 {
     font-size: 1.4rem;
-    margin-bottom: 1rem
-}
+    margin-bottom: 1rem;
+  }
 
-h3:not(:first-of-type) {
-    margin-top: 2rem
-}
+  h3:not(:first-of-type) {
+    margin-top: 2rem;
+  }
   h3 {
     margin-bottom: 1rem;
     &:not(:first-of-type) {
-      margin-top: 3rem;
+      margin-top: 1.5rem;
     }
   }
   p {
     font-family: "noto serif", serif;
     font-size: 1rem;
+    line-height: 1.8;
     & > * {
       font-family: inherit;
     }
   }
+  time,
+  #reading_time {
+    font-size: 0.8rem;
+  }
 }
 
 @media screen and (max-width: 40rem) {
@@ -648,12 +782,36 @@ h3:not(:first-of-type) {
     display: none;
   }
   #landing h1 {
-    -webkit-text-stroke-width: .1rem;
+    -webkit-text-stroke-width: 0.1rem;
   }
   #main_header {
     padding: 1rem 1.5rem;
   }
-  #preview_popup{
+  #main_page {
+    padding: 1rem 6vw;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 1fr 22rem;
+  }
+  #main_page__header {
+    grid-area: 1/1/2/-1;
+  }
+  #expanding_search {
+    margin: 1rem 1.5rem;
+    left: 0;
+    width: 20rem;
+  }
+
+  #preview_popup,
+  #article {
+    h1 {
+      font-size: 2rem;
+    }
+  }
+  #article {
+    grid-template-columns: 1fr 60ch 1fr;
+  }
+
+  #preview_popup {
     --width: 60ch;
   }
 }
@@ -675,13 +833,13 @@ h3:not(:first-of-type) {
   button:not(.button--primary) {
     transition: background-color 0.3s;
     &:hover {
-      background-color: rgba(var(--text-color), 0.1);
+      background-color: rgba(var(--text-color), 0.06);
     }
   }
-  .button--primary{
+  .button--primary {
     transition: filter 0.3s;
-    &:hover{
+    &:hover {
       filter: brightness(120%);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/index.html b/index.html
index 7ce7dd7..002883a 100644
--- a/index.html
+++ b/index.html
@@ -10,8 +10,8 @@
     <link rel="stylesheet" href="css/main.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+    <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">
     <script src="purify.min.js" defer></script>
     <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6" defer></script>
@@ -143,36 +143,130 @@
         </section>
     </article>
     <article id="loading" class="page page-layout">
-        <sm-spinner></sm-spinner>
+        <div id="loader_container">
+            <svg id="loader" viewBox="0 0 112 256" xmlns="http://www.w3.org/2000/svg">
+                <g>
+                    <rect x="33" width="39" height="8" rx="2" />
+                    <rect x="33" y="11" width="79" height="13" rx="2" />
+                    <rect x="33" y="29" width="79" height="20" rx="2" />
+                    <rect width="27" height="27" rx="2" />
+                </g>
+                <g>
+                    <rect x="33" y="69" width="39" height="8" rx="2" />
+                    <rect x="33" y="80" width="79" height="13" rx="2" />
+                    <rect x="33" y="98" width="79" height="20" rx="2" />
+                    <rect y="69" width="27" height="27" rx="2" />
+                </g>
+                <g>
+                    <rect x="33" y="138" width="39" height="8" rx="2" />
+                    <rect x="33" y="149" width="79" height="13" rx="2" />
+                    <rect x="33" y="167" width="79" height="20" rx="2" />
+                    <rect y="138" width="27" height="27" rx="2" />
+                </g>
+                <g>
+                    <rect x="33" y="207" width="39" height="8" rx="2" />
+                    <rect x="33" y="218" width="79" height="13" rx="2" />
+                    <rect x="33" y="236" width="79" height="20" rx="2" />
+                    <rect y="207" width="27" height="27" rx="2" />
+                </g>
+            </svg>
+        </div>
         <h4>Loading RM Times</h4>
     </article>
-    <header id="main_header">
-        <div class="logo">
-            <svg class="main-logo" viewBox="0 0 27.25 32">
-                <title>RanchiMall</title>
-                <path
-                    d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
-            </svg>
-            <div class="grid">
-                <h4>RM Times</h4>
+    <main>
+        <header id="main_header">
+            <button id="search_button" class="icon-only" title="Search for articles" onclick="toggleSearch()">
+                <svg class="icon" slot="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                    width="24px" fill="#000000">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path
+                        d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
+                </svg>
+            </button>
+            <div id="expanding_search">
+                <div class="flex align-center">
+                    <button class="icon-only" onclick="toggleSearch()">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                            width="24px" fill="#000000">
+                            <path d="M0 0h24v24H0V0z" fill="none" />
+                            <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
+                        </svg>
+                    </button>
+                    <sm-input id="search_articles" placeholder="Search articles" type="search">
+                        <svg class="icon" slot="icon" xmlns="http://www.w3.org/2000/svg" height="24px"
+                            viewBox="0 0 24 24" width="24px" fill="#000000">
+                            <path d="M0 0h24v24H0V0z" fill="none" />
+                            <path
+                                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
+                        </svg>
+                    </sm-input>
+                </div>
+                <div id="search_suggestions" class="flex direction-column hide-completely"></div>
             </div>
-        </div>
-        <theme-toggle></theme-toggle>
-        <button onclick="showPopup('user_popup')" aria-label="User profile">
-            <svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24px" viewBox="0 0 24 24" width="24px"
-                fill="#000000">
-                <path d="M0 0h24v24H0V0z" fill="none" />
-                <path
-                    d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z" />
-            </svg>
-        </button>
-    </header>
-    <article id="dashboard" class="page page-layout hide-completely">
-        <h2>Dashboard</h2>
-        <div class="ripple"></div>
-        <ul id="publishing_requests" class="grid gap-1-5 observe-empty-state"></ul>
-        <p class="empty-state">No requests</p>
-    </article>
+            <a href="#/home" class="logo">
+                <svg class="main-logo" viewBox="0 0 27.25 32">
+                    <title>RanchiMall</title>
+                    <path
+                        d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
+                </svg>
+                <h4>RM TIMES</h4>
+            </a>
+            <theme-toggle></theme-toggle>
+            <button class="icon-only" onclick="showPopup('user_popup')" aria-label="User profile">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24px" viewBox="0 0 24 24" width="24px"
+                    fill="#000000">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path
+                        d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z" />
+                </svg>
+            </button>
+        </header>
+        <article id="main_page" class="page hide-completely">
+            <section id="main_page__header" class="flex align-center">
+                <div id="news_categories_list" class="flex"></div>
+            </section>
+            <section>
+                <h5>Featured</h5>
+                <h3>A Wake Up Call for India - Analyzing the falling GDP</h3>
+            </section>
+            <section id="lastest_articles_section">
+                <div class="flex align-center space-between">
+                    <h5>Latest</h5>
+                    <a href="">See all</a>
+                </div>
+                <ul id="latest_articles_list" class="grid"></ul>
+            </section>
+        </article>
+        <article id="explore" class="page page-layout hide-completely">
+            <h1>Explore</h1>
+            <div id="query_results_list" class="grid"></div>
+        </article>
+        <article id="article" class="page page-layout hide-completely">
+            <section class="hero-section">
+                <div class="flex align-center">
+                    <time id="published_time"></time>&nbsp;•&nbsp;<span id="reading_time"></span>
+                </div>
+                <h1 id="article_title"></h1>
+            </section>
+            <section id="article_body" class="grid"></section>
+            <section>
+                <h4>Article by -</h4>
+                <div id="article_contributors" class="flex"></div>
+                <span>created with RanchiMall Content collaboration app</span>
+            </section>
+        </article>
+        <article id="dashboard" class="page page-layout hide-completely">
+            <div class="flex space-between align-center">
+                <h2>Dashboard</h2>
+                <strip-select>
+                    <strip-option value="requests" selected>Requests</strip-option>
+                    <strip-option value="analytics">Analytics</strip-option>
+                </strip-select>
+            </div>
+            <ul id="publishing_requests" class="grid gap-1-5 observe-empty-state"></ul>
+            <p class="empty-state">No requests</p>
+        </article>
+    </main>
     <sm-popup id="preview_popup">
         <header slot="header" class="popup__header">
             <div class="flex align-center">
@@ -208,11 +302,22 @@
             <div class="grid gap-0-5">
                 <h5>My FLO ID</h5>
                 <sm-copy id="user_flo_id"></sm-copy>
+                <sm-button class="danger" onclick="signOut()">Sign out</sm-button>
             </div>
-            <sm-button class="danger" onclick="signOut()">Sign out</sm-button>
         </section>
     </sm-popup>
-
+    <template id="article_card_template">
+        <li class="article-card grid">
+            <a href="" class="article-card__category"></a>
+            <a href="" class="grid article-link">
+                <h4 class="article-card__title"></h4>
+                <div class="flex">
+                    <span class="article-card__read-time"></span> •
+                    <time class="article-card__published"></time>
+                </div>
+            </a>
+        </li>
+    </template>
     <template id="request_template">
         <li class="request-card">
             <h4 class="request-card__title"></h4>
@@ -231,6 +336,18 @@
         </li>
     </template>
 
+    <script>
+
+        /**
+          * @yaireo/relative-time - javascript function to transform timestamp or date to local relative-time
+          *
+          * @version v1.0.0
+          * @homepage https://github.com/yairEO/relative-time
+          */
+
+        !function (e, t) { var o = o || {}; "function" == typeof o && o.amd ? o([], t) : "object" == typeof exports && "object" == typeof module ? module.exports = t() : "object" == typeof exports ? exports.RelativeTime = t() : e.RelativeTime = t() }(this, (function () { const e = { year: 31536e6, month: 2628e6, day: 864e5, hour: 36e5, minute: 6e4, second: 1e3 }, t = "en", o = { numeric: "auto" }; function n(e) { e = { locale: (e = e || {}).locale || t, options: { ...o, ...e.options } }, this.rtf = new Intl.RelativeTimeFormat(e.locale, e.options) } return n.prototype = { from(t, o) { const n = t - (o || new Date); for (let t in e) if (Math.abs(n) > e[t] || "second" == t) return this.rtf.format(Math.round(n / e[t]), t) } }, n }));
+    </script>
+
     <script id="ui_utils">
         // Global letiables
         const domRefs = {};
@@ -386,11 +503,7 @@
                 const intTime = parseInt(time)
                 if (String(intTime).length < 13)
                     time *= 1000
-                let timeFrag = new Date(intTime).toString().split(' '),
-                    day = timeFrag[0],
-                    month = timeFrag[1],
-                    date = timeFrag[2],
-                    year = timeFrag[3],
+                let [day, month, date, year] = new Date(intTime).toString().split(' '),
                     minutes = new Date(intTime).getMinutes(),
                     hours = new Date(intTime).getHours(),
                     currentTime = new Date().toString().split(' ')
@@ -406,25 +519,6 @@
 
                 finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM`
                 switch (format) {
-                    case 'relative':
-                        if (year == currentYear) {
-                            if (currentTime[1] === month) {
-                                const dateDiff = (parseInt(currentTime[2]) - parseInt(date))
-                                if (dateDiff === 0)
-                                    return `${finalHours}`;
-                                else if (dateDiff === 1)
-                                    return `Yesterday`;
-                                else if (dateDiff > 1 && dateDiff < 8)
-                                    return currentTime[0];
-                                else
-                                    return ` ${date} ${month}`;
-                            }
-                            else
-                                return ` ${date} ${month}`;
-                        }
-                        else
-                            return `${month} ${year}`;
-                        break;
                     case 'date-only':
                         return `${month} ${date}, ${year}`;
                         break;
@@ -472,7 +566,7 @@
                     },
                 ],
                 {
-                    duration: 1000,
+                    duration: 600,
                     fill: "forwards",
                     easing: "ease-out",
                 }
@@ -540,10 +634,24 @@
                 case 'home':
                 case 'main_page':
                     targetPage = 'main_page'
+                    renderHomepage()
+                    break;
+                case 'article':
+                    targetPage = 'article'
+                    renderArticle(params.articleID)
+                    break;
+                case 'explore':
+                    targetPage = 'explore'
+                    renderArticle(params.articleID)
                     break;
                 case 'dashboard':
                     targetPage = 'dashboard'
-                    renderPublishingRequests()
+                    await Promise.all([
+                        floCloudAPI.requestObjectData('publishedVc'),
+                        floCloudAPI.requestGeneralData('publishing_requests', {
+                            callback: (d, e) => renderPublishingRequests(d)
+                        })
+                    ])
                     break;
             }
             document.querySelectorAll('.page').forEach(page => page.classList.add('hide-completely'))
@@ -641,8 +749,21 @@
             return anime
         }
     </script>
+
     <script>
+        const relativeTime = new RelativeTime();
         const render = {
+            articleCard(details) {
+                const { uid: articleID, category, title, readTime, published } = details
+                const clone = getRef('article_card_template').content.cloneNode(true).firstElementChild
+                clone.querySelector('.article-card__category').textContent = category
+                clone.querySelector('.article-card__category').href = `#/explore?type=category&query=${category}`
+                clone.querySelector('.article-link').href = `#/article?articleID=${articleID}`
+                clone.querySelector('.article-card__title').textContent = title
+                clone.querySelector('.article-card__read-time').textContent = `${readTime} Min read`
+                clone.querySelector('.article-card__published').textContent = relativeTime.from(published)
+                return clone
+            },
             requestCard(details) {
                 const { message: { articleID, category, title }, time, vectorClock } = details
                 if (floGlobals.appObjects.publishedVc[vectorClock]) return
@@ -656,27 +777,64 @@
         }
 
         const getArticles = async () => {
-            await Promise.all([floCloudAPI.requestObjectData('articles'), floCloudAPI.requestObjectData('publishedVc')])
+            await floCloudAPI.requestObjectData('articles')
         }
-        async function renderPublishingRequests() {
-            floCloudAPI.requestGeneralData('publishing_requests')
-            const genData = floGlobals.generalData[`publishing_requests|${floGlobals.adminID}|${floGlobals.application}`]
+
+        function getArrayOfObj(obj) {
+            const arr = []
+            for (const key in obj) {
+                arr.push({
+                    uid: key,
+                    ...obj[key]
+                })
+            }
+            return arr
+        }
+
+        function renderHomepage() {
+            const sortedArticles = getArrayOfObj(floGlobals.appObjects.articles).sort((a, b) => b.published - a.published)
             const frag = document.createDocumentFragment()
-            for (const key in genData) {
-                const card = render.requestCard(genData[key])
+            sortedArticles.slice(0, 5).forEach(articleDetail => frag.append(render.articleCard(articleDetail)))
+            getRef('latest_articles_list').innerHTML = ''
+            getRef('latest_articles_list').append(frag)
+
+            const categories = ['Art', 'Politics', 'Science', 'Tech']
+            categories.forEach(category => frag.append(createElement('a', {
+                textContent: category,
+                attributes: { href: `#/explore?type=category&query=${category.toLowerCase()}` },
+                className: 'category interact'
+            })))
+            getRef('news_categories_list').innerHTML = ''
+            getRef('news_categories_list').append(frag)
+
+        }
+        async function renderArticle(articleID) {
+            await floCloudAPI.requestObjectData(articleID)
+            const articleBody = floGlobals.appObjects[articleID]
+            const { title, published, readTime } = floGlobals.appObjects.articles[articleID]
+            getRef('article_title').textContent = title
+            getRef('published_time').textContent = getFormattedTime(published, 'date-only')
+            getRef('reading_time').textContent = `${readTime} Min read`
+            getRef('article_body').innerHTML = articleBody
+        }
+
+        async function renderPublishingRequests() {
+            const requests = floGlobals.generalData[`publishing_requests|${floGlobals.adminID}|${floGlobals.application}`]
+            const frag = document.createDocumentFragment()
+            for (const key in requests) {
+                const card = render.requestCard(requests[key])
                 if (card)
                     frag.prepend(card)
             }
+            getRef('publishing_requests').innerHTML = ''
             getRef('publishing_requests').append(frag)
         }
 
-        getRef('publishing_requests').addEventListener('click', publishArticle)
-
-        function publishArticle(e) {
+        function handleRequestClick(e) {
             if (e.target.closest('.publish-button')) {
                 const button = e.target.closest('.publish-button');
                 const vc = button.closest('.request-card').dataset.vc;
-                const { message: { articleID, category, content, title }, vectorClock } = floGlobals.generalData[`publishing_requests|${floGlobals.adminID}|${floGlobals.application}`][vc];
+                const { message: { articleID, category, content, title, tags, readTime }, vectorClock } = floGlobals.generalData[`publishing_requests|${floGlobals.adminID}|${floGlobals.application}`][vc];
                 const isPublished = floGlobals.appObjects['articles'].hasOwnProperty(articleID)
                 getConfirmation(`${isPublished ? 'Update' : 'Publish'} article?`).then(res => {
                     if (res) {
@@ -685,18 +843,19 @@
                         if (isPublished) {
                             floGlobals.appObjects['articles'][articleID]['updated'] = Date.now();
                         } else {
-                            floGlobals.appObjects['articles'][articleID] = {
-                                category,
-                                title,
-                                published: Date.now()
-                            }
+                            floGlobals.appObjects.articles[articleID] = {}
+                            floGlobals.appObjects['articles'][articleID]['published'] = Date.now();
                         }
+                        floGlobals.appObjects['articles'][articleID].category = category
+                        floGlobals.appObjects['articles'][articleID].title = title
+                        floGlobals.appObjects['articles'][articleID].tags = tags
+                        floGlobals.appObjects['articles'][articleID].readTime = readTime
                         Promise.all([
                             floCloudAPI.updateObjectData('articles'),
                             floCloudAPI.updateObjectData('publishedVc'),
                             floCloudAPI.resetObjectData(articleID)
                         ]).then(() => {
-                            notify(`${isPublished ? 'Published' : 'Updated'} article`, 'success')
+                            notify(`${isPublished ? 'Updated' : 'Published'} article`, 'success')
                             button.closest('.request-card').remove()
                         })
                     }
@@ -714,6 +873,54 @@
             }
         }
 
+        function toggleSearch() {
+            if (!getRef('expanding_search').classList.contains('expanded')) {
+                getRef('search_articles').focusIn()
+            }
+            getRef('expanding_search').classList.toggle('expanded')
+        }
+        getRef('search_articles').addEventListener('input', debounce((e) => {
+            const searchKey = e.target.value.trim()
+            if (searchKey !== '') {
+                const options = {
+                    keys: ['title', 'tags', 'category'],
+                    threshold: 0.3
+                }
+                const fuse = new Fuse(getArrayOfObj(floGlobals.appObjects.articles), options)
+                const searchResult = fuse.search(searchKey).map(v => v.item)
+                getRef('search_suggestions').innerHTML = ''
+                if (searchResult.length) {
+                    const frag = document.createDocumentFragment()
+                    searchResult.slice(0, 5).forEach((result) => {
+                        const { uid, title } = result
+                        console.log(result)
+                        frag.append(createElement('a', {
+                            textContent: title,
+                            attributes: { href: `#/article?articleID=${uid}` },
+                            className: 'search-suggestion interact'
+                        }))
+                    })
+                    getRef('search_suggestions').append(frag)
+                    if (searchResult.length > 5) {
+                        getRef('search_suggestions').append(createElement('a', {
+                            textContent: 'See all results',
+                            attributes: { href: `#/explore?type=search&query=${searchKey}}` },
+                            className: 'search-suggestion interact'
+                        }))
+                    }
+                } else {
+                    getRef('search_suggestions').append(createElement('div', {
+                        innerHTML: `No articles related to <strong>${searchKey}</strong>`
+                    }))
+                }
+                getRef('search_suggestions').classList.remove('hide-completely')
+            } else {
+                getRef('search_suggestions').classList.add('hide-completely')
+            }
+        }, 100))
+
+
+
         function getSignedIn() {
             return new Promise((resolve, reject) => {
                 if (window.location.hash.includes('sign_in') || window.location.hash.includes('sign_up')) {
@@ -742,11 +949,9 @@
                     }
                 })
         }
+
     </script>
     <script id="onLoadStartUp">
-        floGlobals.isSubAdmin = false
-        let maxCardsPerSection
-
         function onLoadStartUp() {
 
             //floDapps.addStartUpFunction('Sample', Promised Function)
@@ -757,11 +962,16 @@
                 getRef('user_flo_id').value = myFloID
                 floGlobals.isSubAdmin = floGlobals.subAdmins.includes(myFloID)
                 if (floGlobals.isSubAdmin) {
+                    getRef('publishing_requests').addEventListener('click', handleRequestClick)
                     document.querySelectorAll('.admin-option').forEach(elem => elem.classList.remove('hide-completely'))
                 } else {
+                    getRef('publishing_requests').removeEventListener('click', handleRequestClick)
                     document.querySelectorAll('.admin-option').forEach(elem => elem.classList.add('hide-completely'))
                 }
-                showPage(floGlobals.isSubAdmin ? 'dashboard' : window.location.hash, { firstLoad: true })
+                if (location.hash.includes('sign_in') || location.hash.includes('sign_up'))
+                    location.hash = floGlobals.isSubAdmin ? '#/dashboard' : '#/home'
+                showPage(window.location.hash, { firstLoad: true })
+                console.log(result)
             }).catch(error => console.error(error))
         }
     </script>