From 5e7059206aeb0851c7f6f975e8a334d965325460 Mon Sep 17 00:00:00 2001
From: 9z25 <rsenecaljr@gmail.com>
Date: Wed, 15 Jul 2026 12:21:44 -0700
Subject: [PATCH] Update social feed and navbar styling

---
 src/App.css                                | 1096 +++++++++++++++++---
 src/components/app-body/posts/index.js     |   59 +-
 src/components/post-feed/post-feed-item.js |  122 ++-
 src/components/post-feed/post-feed.css     |  598 ++++++++++-
 4 files changed, 1619 insertions(+), 256 deletions(-)

diff --git a/src/App.css b/src/App.css
index e635585..e76c4c7 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,220 +1,1006 @@
-.header {
-  text-align: center;
+:root {
+  --app-bg: #f7f9f9;
+  --surface: #ffffff;
+  --surface-hover: #f7f9f9;
+  --surface-muted: #eff3f4;
+
+  --text-primary: #0f1419;
+  --text-secondary: #536471;
+  --text-muted: #8b98a5;
+
+  --border: #eff3f4;
+  --border-strong: #cfd9de;
+
+  --brand: #1683d8;
+  --brand-hover: #0876c9;
+  --brand-soft: rgba(29, 155, 240, 0.1);
+
+  --success: #00a884;
+  --danger: #f4212e;
+
+  --content-width: 650px;
+  --sidebar-width: 260px;
+
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-round: 9999px;
+
+  --shadow-menu:
+    0 2px 8px rgba(15, 20, 25, 0.08),
+    0 12px 32px rgba(15, 20, 25, 0.06);
 }
 
+/* Base reset */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  min-height: 100%;
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100%;
+  margin: 0;
+
+  color: var(--text-primary);
+  background: var(--app-bg);
+
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif;
+
+  font-size: 15px;
+  line-height: 1.5;
+
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+#root {
+  min-height: 100vh;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+img,
+svg {
+  max-width: 100%;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+/* Main application shell */
+
 .app-container {
   min-height: 100vh;
+
   display: flex;
   flex-direction: column;
+
+  color: var(--text-primary);
+  background: var(--app-bg);
 }
 
 .main-content {
+  position: relative;
+  z-index: 1;
+
   flex: 1 0 auto;
+  width: 100%;
+  min-height: calc(100vh - 120px);
+
+  padding:
+    calc(var(--navbar-height) + 24px)
+    16px
+    56px;
+}
+/*
+  Center common Bootstrap containers.
+  This creates a narrow social-media feed instead of a wide dashboard.
+*/
+.main-content > .container,
+.main-content > .container-fluid {
+  width: 100%;
+  max-width: 1140px;
+  margin-inline: auto;
+  padding-inline: 12px;
+
+  text-align: left;
 }
 
-.balance-spinner-container {
+.posts-feed,
+.posts-feed-container,
+.posts-feed-list {
+  width: 100%;
+  max-width: 760px;
+  margin-inline: auto;
+
+  text-align: left;
+}
+
+.posts-feed-item,
+.posts-feed-item-text,
+.posts-feed-item-meta,
+.posts-feed-item-footer {
+  width: 100%;
+  text-align: left;
+}
+
+.main-content .row {
+  margin-inline: 0;
+}
+
+.main-content .row > [class*="col"] {
+  padding-inline: 0;
+}
+
+/* Navigation shell */
+
+header,
+.header,
+.navbar {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+
+  width: 100%;
+  min-height: 64px;
+
+  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.97);
+
+  border-bottom: 1px solid var(--border);
+  box-shadow: 0 1px 3px rgba(15, 20, 25, 0.06);
+
+  text-align: left;
+
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+.navbar {
+  padding: 8px max(16px, calc((100vw - 1100px) / 2));
+}
+
+.navbar > .container,
+.navbar > .container-fluid {
+  width: 100%;
+  max-width: 1100px;
+  margin-inline: auto;
+  padding-inline: 0;
+}
+
+/* SLP Wallet title */
+
+.navbar-brand,
+.header-brand,
+.app-brand {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 10px;
+
+  margin-right: 20px;
+
+  color: var(--text-primary) !important;
+
+  font-size: 20px;
+  font-weight: 750;
+  letter-spacing: -0.03em;
+  line-height: 1;
+  text-align: left;
+  text-decoration: none;
+}
+
+.navbar-brand:hover,
+.navbar-brand:focus,
+.header-brand:hover,
+.app-brand:hover {
+  color: var(--text-primary) !important;
+  opacity: 0.75;
+}
+
+.navbar-brand img,
+.header-brand img,
+.app-brand img {
+  width: 34px;
+  height: 34px;
+
+  object-fit: contain;
+  border-radius: 9px;
+}
+
+/* Navigation links */
+
+
+.nav-link,
+.nav-link-active,
+.nav-link-inactive {
+  position: relative;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+
+  min-height: 42px;
+  padding: 8px 14px !important;
+
+  color: var(--text-secondary) !important;
+  background: transparent !important;
+
+  border: 0 !important;
+  border-radius: var(--radius-round);
+
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1;
+  text-decoration: none;
+  text-align: left;
+
+  box-shadow: none !important;
+
+  transition:
+    color 150ms ease,
+    background-color 150ms ease;
+}
+
+.nav-link:hover,
+.nav-link-inactive:hover {
+  color: var(--text-primary) !important;
+  background: var(--surface-muted) !important;
+}
+
+.nav-link.active,
+.nav-link-active {
+  color: var(--text-primary) !important;
+  background: var(--surface-muted) !important;
+  font-weight: 700;
+}
+
+.nav-link.active::after,
+.nav-link-active::after {
+  content: "";
+
+  position: absolute;
+  right: 14px;
+  bottom: 3px;
+  left: 14px;
+
+  height: 3px;
+
+  background: var(--brand);
+  border-radius: var(--radius-round);
+}
+
+.navbar-toggler {
+  width: 42px;
+  height: 42px;
+  padding: 8px;
+
+  color: var(--text-primary);
+  background: transparent;
+
+  border: 1px solid var(--border);
+  border-radius: 50%;
+
+  box-shadow: none;
+}
+
+.navbar-toggler:focus {
+  box-shadow: 0 0 0 3px var(--brand-soft);
+}
+
+/* Dropdown menus */
+
+.dropdown-menu {
+  min-width: 220px;
+  padding: 8px;
+
+  background: var(--surface);
+
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+
+  box-shadow: var(--shadow-menu);
+}
+
+.dropdown-item {
+  padding: 10px 12px;
+
+  color: var(--text-primary);
+  border-radius: var(--radius-sm);
+
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.dropdown-item:hover,
+.dropdown-item:focus {
+  color: var(--text-primary);
+  background: var(--surface-muted);
+}
+
+.dropdown-divider {
+  border-top-color: var(--border);
+}
+
+/* General page headings */
+
+.main-content h1 {
+  margin: 0 0 8px;
+
+  color: var(--text-primary);
+
+  font-size: clamp(26px, 5vw, 34px);
+  font-weight: 800;
+  line-height: 1.15;
+  letter-spacing: -0.04em;
+}
+
+.main-content h2 {
+  color: var(--text-primary);
+
+  font-size: 22px;
+  font-weight: 750;
+  letter-spacing: -0.025em;
+}
+
+.main-content h3 {
+  color: var(--text-primary);
+
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.text-muted {
+  color: var(--text-secondary) !important;
+}
+
+/* Instagram/X-style content panel */
+
+.content-panel,
+.page-panel,
+.wallet-panel,
+.card {
+  color: var(--text-primary);
+  background: var(--surface);
+
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+
+  box-shadow: none;
+}
+
+.card-header,
+.card-footer {
+  background: var(--surface);
+  border-color: var(--border);
+}
+
+.card-header {
+  padding: 14px 16px;
+
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.card-body {
+  padding: 16px;
+}
+
+.card-footer {
+  padding: 12px 16px;
+}
+
+/* Buttons */
+
+.btn,
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+
+  min-height: 40px;
+  padding: 8px 16px;
+
+  border-radius: var(--radius-round);
+
+  font-weight: 700;
+  line-height: 1;
+
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    opacity 150ms ease,
+    transform 100ms ease;
+}
+
+.btn-primary {
+  color: #ffffff;
+  background: var(--brand);
+  border-color: var(--brand);
+
+  box-shadow: none;
+}
+
+.btn-primary:hover,
+.btn-primary:focus {
+  color: #ffffff;
+  background: var(--brand-hover);
+  border-color: var(--brand-hover);
+
+  box-shadow: none;
+}
+
+.btn-outline-primary {
+  color: var(--brand);
+  background: transparent;
+  border-color: var(--border-strong);
+}
+
+.btn-outline-primary:hover,
+.btn-outline-primary:focus {
+  color: var(--brand-hover);
+  background: var(--brand-soft);
+  border-color: var(--brand);
+}
+
+.btn-outline-dark,
+.btn-secondary,
+.btn-outline-secondary {
+  color: var(--text-primary);
+  background: transparent;
+  border-color: var(--border-strong);
+}
+
+.btn-outline-dark:hover,
+.btn-secondary:hover,
+.btn-outline-secondary:hover {
+  color: var(--text-primary);
+  background: var(--surface-muted);
+  border-color: var(--border-strong);
+}
+
+.btn-danger {
+  background: var(--danger);
+  border-color: var(--danger);
+}
+
+.btn:active,
+button:active {
+  transform: scale(0.97);
+}
+
+.btn:disabled,
+button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* Forms */
+
+.form-control,
+.form-select,
+input,
+select,
+textarea {
+  width: 100%;
+  min-height: 44px;
+  padding: 10px 13px;
+
+  color: var(--text-primary);
+  background: var(--surface);
+
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+
+  outline: none;
+  box-shadow: none;
+
+  transition:
+    border-color 150ms ease,
+    box-shadow 150ms ease,
+    background-color 150ms ease;
+}
+
+textarea.form-control,
+textarea {
+  min-height: 110px;
+  resize: vertical;
+}
+
+.form-control:hover,
+.form-select:hover,
+input:hover,
+select:hover,
+textarea:hover {
+  border-color: #aab8c2;
+}
+
+.form-control:focus,
+.form-select:focus,
+input:focus,
+select:focus,
+textarea:focus {
+  color: var(--text-primary);
+  background: var(--surface);
+
+  border-color: var(--brand);
+
+  box-shadow: 0 0 0 3px var(--brand-soft);
+}
+
+.form-control::placeholder,
+input::placeholder,
+textarea::placeholder {
+  color: var(--text-muted);
+}
+
+.form-label,
+label {
+  margin-bottom: 6px;
+
+  color: var(--text-primary);
+
+  font-size: 14px;
+  font-weight: 650;
+}
+
+/* Alerts */
+
+.alert {
+  padding: 12px 14px;
+
+  border-radius: var(--radius-md);
+
+  font-size: 14px;
+}
+
+.alert-danger {
+  color: #b4232c;
+  background: #fff1f2;
+  border-color: #ffd3d7;
+}
+
+.alert-success {
+  color: #08785f;
+  background: #ecfdf8;
+  border-color: #b8efe1;
+}
+
+.text-danger {
+  color: var(--danger) !important;
+}
+
+/* Loading state */
+
+.balance-spinner-container,
+.loading-container {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 10px;
+  justify-content: center;
+
+  min-height: 180px;
+  gap: 12px;
+
+  color: var(--text-secondary);
 }
 
-.nav-link-active {
-  color: white !important;
-  text-decoration: none;
-  padding: 0.5rem;
+.spinner-border {
+  color: var(--brand) !important;
 }
 
-.nav-link-inactive {
-  color: gray !important;
-  text-decoration: none;
-  padding: 0.5rem;
+/* Startup modal */
 
+.modal-content {
+  color: var(--text-primary);
+  background: var(--surface);
+
+  border: 0;
+  border-radius: var(--radius-lg);
+
+  box-shadow:
+    0 8px 30px rgba(15, 20, 25, 0.15),
+    0 30px 80px rgba(15, 20, 25, 0.12);
 }
 
+.modal-header {
+  padding: 16px 18px;
+
+  border-bottom: 1px solid var(--border);
+}
+
+.modal-title {
+  font-size: 19px;
+  font-weight: 750;
+}
+
+.modal-body {
+  padding: 18px;
+
+  color: var(--text-secondary);
+}
+
+.modal-footer {
+  padding: 12px 18px;
+
+  border-top: 1px solid var(--border);
+}
+
+.modal-backdrop.show {
+  opacity: 0.48;
+}
+
+/* Address control */
+
 #address-switch {
+  color: var(--brand);
   cursor: pointer;
+  font-weight: 650;
 }
 
+#address-switch:hover {
+  color: var(--brand-hover);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+/* Tables */
+
+.table {
+  --bs-table-bg: var(--surface);
+  --bs-table-color: var(--text-primary);
+  --bs-table-border-color: var(--border);
+
+  margin-bottom: 0;
+}
+
+.table th {
+  color: var(--text-secondary);
+  background: var(--surface-muted);
+
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.table td,
+.table th {
+  padding: 12px 14px;
+  vertical-align: middle;
+}
+
+/* Footer */
+
+footer,
+.footer {
+  flex-shrink: 0;
+
+  width: 100%;
+  padding: 22px 16px;
+
+  color: var(--text-secondary);
+  background: var(--surface);
+
+  border-top: 1px solid var(--border);
+
+  font-size: 13px;
+  text-align: center;
+}
+
+footer a,
+.footer a {
+  color: var(--text-secondary);
+  font-weight: 600;
+}
+
+footer a:hover,
+.footer a:hover {
+  color: var(--brand);
+}
+
+/* Remove number input controls */
 
-/* Remove input number arrows Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
   margin: 0;
+  -webkit-appearance: none;
 }
 
-/* Remove input number arrows Firefox */
-input[type=number] {
-  --moz-appearance: textfield;
+input[type="number"] {
+  appearance: textfield;
+  -moz-appearance: textfield;
 }
 
-/* Markdown Content Styles */
-.markdown-content {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem;
-  background: #ffffff;
-  border-radius: 12px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  border: 1px solid #e5e7eb;
-  text-align: left;
+/* Selection and keyboard navigation */
+
+::selection {
+  color: var(--text-primary);
+  background: rgba(29, 155, 240, 0.2);
 }
 
-.markdown-content h1 {
-  font-size: 2.5rem;
-  font-weight: 700;
-  color: #1f2937;
-  margin-bottom: 1.5rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 3px solid #3b82f6;
-  text-align: left;
+a:focus-visible,
+button:focus-visible,
+[role="button"]:focus-visible {
+  outline: 3px solid var(--brand-soft);
+  outline-offset: 2px;
 }
 
-.markdown-content h2 {
-  font-size: 2rem;
-  font-weight: 600;
-  color: #374151;
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-  padding-bottom: 0.25rem;
-  border-bottom: 2px solid #e5e7eb;
+/* Desktop */
+
+@media (min-width: 992px) {
+  .main-content {
+    padding-top: 32px;
+  }
+
+  /*
+    Optional wide layouts can override the narrow social-feed width
+    by adding className="wide-page" to a page container.
+  */
+
+  .main-content > .wide-page {
+    width: min(100%, 1100px);
+  }
 }
 
-.markdown-content h3 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: #4b5563;
-  margin-top: 1.5rem;
-  margin-bottom: 0.75rem;
+/* Mobile */
+
+@media (max-width: 767px) {
+  body {
+    background: var(--surface);
+  }
+
+  .main-content {
+    padding: 14px 0 36px;
+  }
+
+  .main-content > .container,
+  .main-content > .container-fluid {
+    width: 100%;
+    padding-inline: 0;
+  }
+
+  header,
+  .header,
+  .navbar {
+    min-height: 56px;
+  }
+
+  .navbar {
+    padding: 7px 12px;
+  }
+
+  .navbar-brand,
+  .header-brand,
+  .app-brand {
+    font-size: 18px;
+  }
+
+  .navbar-collapse {
+    margin-top: 8px;
+    padding: 8px 0 12px;
+
+    background: var(--surface);
+  }
+
+  .navbar-nav {
+    align-items: stretch;
+  }
+
+  .nav-link,
+  .nav-link-active,
+  .nav-link-inactive {
+    justify-content: flex-start;
+
+    min-height: 44px;
+    padding-inline: 14px !important;
+
+    border-radius: var(--radius-sm);
+  }
+
+  .nav-link.active::after,
+  .nav-link-active::after {
+    display: none;
+  }
+
+  .card,
+  .content-panel,
+  .page-panel,
+  .wallet-panel {
+    border-right: 0;
+    border-left: 0;
+    border-radius: 0;
+  }
+
+  footer,
+  .footer {
+    padding: 20px 12px;
+  }
 }
 
-.markdown-content h4, .markdown-content h5, .markdown-content h6 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #6b7280;
-  margin-top: 1.25rem;
-  margin-bottom: 0.5rem;
+/* Respect reduced-motion settings */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
 }
 
-.markdown-content p {
-  font-size: 1.1rem;
-  line-height: 1.7;
-  color: #374151;
-  margin-bottom: 1.25rem;
-  text-align: left;
+:root {
+  --navbar-height: 64px;
 }
 
-.markdown-content ul, .markdown-content ol {
-  margin-bottom: 1.25rem;
-  padding-left: 1.5rem;
+.main-content {
+  position: relative;
+  z-index: 1;
+  padding-top: calc(var(--navbar-height) + 24px);
 }
 
-.markdown-content li {
-  font-size: 1.1rem;
-  line-height: 1.6;
-  color: #374151;
-  margin-bottom: 0.5rem;
-}
+.recent-posts-heading {
+  position: relative;
+  z-index: 2;
 
-.markdown-content blockquote {
-  border-left: 4px solid #3b82f6;
-  background: #f8fafc;
-  padding: 1rem 1.5rem;
-  margin: 1.5rem 0;
-  border-radius: 0 8px 8px 0;
-  font-style: italic;
-  color: #4b5563;
-}
-
-.markdown-content code {
-  background: #f1f5f9;
-  color: #e11d48;
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 0.9rem;
-}
-
-.markdown-content pre {
-  background: #1e293b;
-  color: #e2e8f0;
-  padding: 1.5rem;
-  border-radius: 8px;
-  overflow-x: auto;
-  margin: 1.5rem 0;
-  border: 1px solid #334155;
-}
-
-.markdown-content pre code {
-  background: transparent;
-  color: inherit;
-  padding: 0;
-  border-radius: 0;
-}
-
-.markdown-content a {
-  color: #3b82f6;
-  text-decoration: none;
-  border-bottom: 1px solid transparent;
-  transition: all 0.2s ease;
-}
-
-.markdown-content a:hover {
-  color: #1d4ed8;
-  border-bottom-color: #1d4ed8;
-}
-
-.markdown-content table {
   width: 100%;
-  border-collapse: collapse;
-  margin: 1.5rem 0;
-  background: white;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
+  max-width: 760px;
+
+  margin: 0 auto 24px;
+  padding: 0;
 
-.markdown-content th, .markdown-content td {
-  padding: 0.75rem 1rem;
   text-align: left;
-  border-bottom: 1px solid #e5e7eb;
 }
 
-.markdown-content th {
-  background: #f8fafc;
-  font-weight: 600;
-  color: #374151;
+.recent-posts-heading h1,
+.recent-posts-heading p,
+.recent-posts-heading span {
+  text-align: left;
 }
 
-.markdown-content hr {
-  border: none;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
-  margin: 2rem 0;
+.recent-posts-heading p {
+  margin-left: 0;
+  margin-right: 0;
 }
 
-.markdown-content img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  margin: 1rem 0;
+.posts-feed {
+  position: relative;
+  z-index: 1;
 }
 
-@media (max-width: 768px) {
-  .markdown-content {
-    padding: 1.5rem;
-    margin: 1rem;
+.posts-feed-item {
+  position: relative;
+  z-index: 1;
+}
+
+@media (max-width: 767px) {
+  :root {
+    --navbar-height: 56px;
   }
-  .markdown-content h1 {
-    font-size: 2rem;
+
+  .main-content {
+    padding:
+      calc(var(--navbar-height) + 14px)
+      0
+      36px;
   }
-  .markdown-content h2 {
-    font-size: 1.75rem;
+}
+
+/* Final navbar alignment and color overrides */
+
+.navbar,
+.header {
+  text-align: left !important;
+}
+
+/* Keep SLP WALLET visible on the dark navbar */
+.navbar-brand,
+.navbar-brand:hover,
+.navbar-brand:focus,
+.header-brand,
+.app-brand {
+  color: #ffffff !important;
+  text-align: left !important;
+  opacity: 1;
+}
+
+/* Keep the entire navbar content aligned left */
+.navbar > .container,
+.navbar > .container-fluid {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+
+  width: 100%;
+  max-width: 1140px;
+  margin: 0 auto;
+}
+
+/* Place menu directly after the brand */
+.navbar-collapse {
+  flex-grow: 0;
+  text-align: left !important;
+}
+
+.navbar-nav {
+  display: flex !important;
+  justify-content: flex-start !important;
+
+  margin-left: 0 !important;
+  margin-right: auto !important;
+
+  text-align: left !important;
+}
+
+/* Menu item text */
+.navbar-nav .nav-link,
+.nav-link-active,
+.nav-link-inactive {
+  justify-content: flex-start !important;
+  text-align: left !important;
+}
+
+/* Dark navbar link colors */
+.navbar-dark .navbar-nav .nav-link,
+.navbar-dark .nav-link-active,
+.navbar-dark .nav-link-inactive {
+  color: rgba(255, 255, 255, 0.82) !important;
+}
+
+.navbar-dark .navbar-nav .nav-link:hover,
+.navbar-dark .nav-link-inactive:hover {
+  color: #ffffff !important;
+  background: rgba(255, 255, 255, 0.1) !important;
+}
+
+.navbar-dark .navbar-nav .nav-link.active,
+.navbar-dark .nav-link-active {
+  color: #ffffff !important;
+  background: rgba(255, 255, 255, 0.14) !important;
+}
+
+/* Mobile expanded menu */
+@media (max-width: 767px) {
+  .navbar-collapse {
+    width: 100%;
   }
-  .markdown-content p, .markdown-content li {
-    font-size: 1rem;
+
+  .navbar-nav {
+    width: 100%;
+    align-items: stretch !important;
+  }
+
+  .navbar-nav .nav-link,
+  .nav-link-active,
+  .nav-link-inactive {
+    width: 100%;
+    justify-content: flex-start !important;
+    text-align: left !important;
   }
 }
\ No newline at end of file
diff --git a/src/components/app-body/posts/index.js b/src/components/app-body/posts/index.js
index 345161d..7245756 100644
--- a/src/components/app-body/posts/index.js
+++ b/src/components/app-body/posts/index.js
@@ -47,7 +47,11 @@ function RecentPosts () {
 
       try {
         const memoDb = new MemoDb()
-        const data = await memoDb.getRecentPosts({ limit: PAGE_SIZE, offset })
+        const data = await memoDb.getRecentPosts({
+          limit: PAGE_SIZE,
+          offset
+        })
+
         const loadedPosts = data.posts || []
         const addrs = collectPostAddrs(loadedPosts)
         const profileMap = await loadThreadProfiles(addrs, memoDb)
@@ -80,31 +84,47 @@ function RecentPosts () {
   }
 
   return (
-    <Container>
-      <Row>
-        <Col>
-          <h1 className='mt-4'>Recent Posts</h1>
-          {pagination && posts.length > 0 && (
-            <p className='text-muted'>
-              Showing {pagination.offset + 1}–{pagination.offset + posts.length} of {pagination.total} posts
+    <Container className='recent-posts-page'>
+      <Row className='justify-content-center'>
+        <Col lg={8} md={10} xs={12}>
+          <header className='recent-posts-heading'>
+            <h1>BCH Memo Posts</h1>
+            <p>
+              Recent messages published through the Memo protocol on Bitcoin Cash.
+            </p>
+
+            {pagination && posts.length > 0 && (
+              <span className='recent-posts-count'>
+                Showing {pagination.offset + 1}–
+                {pagination.offset + posts.length} of {pagination.total}
+              </span>
+            )}
+
+            {pagination && posts.length === 0 && (
+              <span className='recent-posts-count'>
+                No posts on this page.
+              </span>
+            )}
+          </header>
+
+          {error && (
+            <p className='recent-posts-error'>
+              {error}
             </p>
           )}
-          {pagination && posts.length === 0 && (
-            <p className='text-muted'>No posts on this page.</p>
-          )}
-
-          {error && <p className='text-danger'>{error}</p>}
 
           {loading && (
             <div className='text-center my-5'>
-              <Spinner animation='border' role='status' variant='primary'>
-                <span className='visually-hidden'>Loading...</span>
+              <Spinner animation='border' role='status'>
+                <span className='visually-hidden'>
+                  Loading...
+                </span>
               </Spinner>
             </div>
           )}
 
           {!loading && !error && posts.length > 0 && (
-            <div className='posts-feed mt-3'>
+            <div className='posts-feed'>
               {posts.map((post) => (
                 <PostFeedItem
                   key={post.txid}
@@ -118,16 +138,17 @@ function RecentPosts () {
           )}
 
           {!loading && !error && (pagination || offset > 0) && (
-            <div className='d-flex justify-content-between mt-3 mb-4'>
+            <div className='recent-posts-pagination'>
               <Button
-                variant='outline-primary'
+                variant='outline-dark'
                 onClick={handlePrevious}
                 disabled={!canGoBack}
               >
                 Previous
               </Button>
+
               <Button
-                variant='outline-primary'
+                variant='outline-dark'
                 onClick={handleNext}
                 disabled={!canGoNext}
               >
diff --git a/src/components/post-feed/post-feed-item.js b/src/components/post-feed/post-feed-item.js
index c601c10..0505c54 100644
--- a/src/components/post-feed/post-feed-item.js
+++ b/src/components/post-feed/post-feed-item.js
@@ -1,5 +1,5 @@
 /*
-  Single post row for feed and thread views.
+  Instagram-style post card for feed and thread views.
 */
 
 import React from 'react'
@@ -30,32 +30,92 @@ function PostFeedItem ({
   if (!post) return null
 
   const displayName = getDisplayName(post.addr, profiles)
-  const hasCustomName = Boolean(profile.name ?? profiles?.[post.addr]?.name)
+
+  const hasCustomName = Boolean(
+    profile.name ?? profiles?.[post.addr]?.name
+  )
+
+  const profilePicUrl =
+    profile.profilePicUrl ??
+    profiles?.[post.addr]?.profilePicUrl
+
   const Wrapper = embedded ? 'div' : 'article'
 
+  const copyTxid = () => {
+    if (!post.txid) return
+    appUtil.copyToClipboard(post.txid)
+  }
+
   return (
-    <Wrapper className={`posts-feed-item${embedded ? ' posts-feed-item-embedded' : ''}`}>
-      <div className='posts-feed-item-header'>
-        <PostThreadAvatar
-          addr={post.addr}
-          profilePicUrl={profile.profilePicUrl ?? profiles?.[post.addr]?.profilePicUrl}
-        />
+    <Wrapper
+      className={[
+        'posts-feed-item',
+        embedded ? 'posts-feed-item-embedded' : ''
+      ].filter(Boolean).join(' ')}
+    >
+      <header className='posts-feed-item-header'>
+        <Link
+          to={`/profile/${encodeURIComponent(post.addr)}`}
+          className='posts-feed-item-avatar-link'
+          aria-label={`View ${displayName}'s profile`}
+        >
+          <PostThreadAvatar
+            addr={post.addr}
+            profilePicUrl={profilePicUrl}
+          />
+        </Link>
+
         <div className='posts-feed-item-meta'>
+          <div className='posts-feed-item-author-row'>
+            <Link
+              to={`/profile/${encodeURIComponent(post.addr)}`}
+              className={[
+                'posts-feed-item-author',
+                hasCustomName
+                  ? ''
+                  : 'posts-feed-item-author-address'
+              ].filter(Boolean).join(' ')}
+              title={post.addr}
+            >
+              {displayName}
+            </Link>
+
+            {showRepliedLabel && (
+              <span className='posts-feed-item-replied'>
+                replied
+              </span>
+            )}
+          </div>
+
+          <span className='posts-feed-item-seen'>
+            {formatRelativeSeen(post.seen)}
+          </span>
+        </div>
+
+        <button
+          type='button'
+          className='posts-feed-item-menu'
+          aria-label='Post options'
+          title='Post options'
+        >
+          <span aria-hidden='true'>•••</span>
+        </button>
+      </header>
+
+      <div className='posts-feed-item-content'>
+        <p className='posts-feed-item-text'>
           <Link
             to={`/profile/${encodeURIComponent(post.addr)}`}
-            className={`posts-feed-item-author${hasCustomName ? '' : ' posts-feed-item-author-address'}`}
-            title={post.addr}
+            className='posts-feed-item-inline-author'
           >
             {displayName}
           </Link>
-          {showRepliedLabel && (
-            <span className='posts-feed-item-replied'>replied</span>
-          )}
-          <span className='posts-feed-item-seen'>{formatRelativeSeen(post.seen)}</span>
-        </div>
-      </div>
 
-      <div className='posts-feed-item-text'>{post.text}</div>
+          {' '}
+
+          {post.text}
+        </p>
+      </div>
 
       {showReplyCount && (
         <div className='posts-feed-item-actions'>
@@ -67,28 +127,28 @@ function PostFeedItem ({
       )}
 
       {showFooterMeta && (
-        <div className='posts-feed-item-footer'>
+        <footer className='posts-feed-item-footer'>
           <span>Block {post.blockHeight}</span>
-          <span className='posts-feed-item-footer-separator'>·</span>
+
           <span
+            className='posts-feed-item-footer-separator'
+            aria-hidden='true'
+          >
+            ·
+          </span>
+
+          <button
+            type='button'
             className='posts-feed-item-txid'
             title={post.txid}
-            onClick={() => appUtil.copyToClipboard(post.txid)}
-            role='button'
-            tabIndex={0}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault()
-                appUtil.copyToClipboard(post.txid)
-              }
-            }}
+            onClick={copyTxid}
           >
             {truncateTxid(post.txid, 20)}
-          </span>
-        </div>
+          </button>
+        </footer>
       )}
     </Wrapper>
   )
 }
 
-export default PostFeedItem
+export default PostFeedItem
\ No newline at end of file
diff --git a/src/components/post-feed/post-feed.css b/src/components/post-feed/post-feed.css
index bed0d58..e31cc51 100644
--- a/src/components/post-feed/post-feed.css
+++ b/src/components/post-feed/post-feed.css
@@ -1,109 +1,605 @@
-.posts-feed {
-  max-width: 720px;
-  background: #f5f5f5;
-  border: 1px solid #e8e8e8;
-  border-radius: 4px;
+
+/*
+  Instagram-inspired post feed
+*/
+
+:root {
+  --ig-background: #fafafa;
+  --ig-surface: #ffffff;
+  --ig-border: #dbdbdb;
+  --ig-border-soft: #efefef;
+
+  --ig-text: #262626;
+  --ig-text-secondary: #737373;
+  --ig-text-muted: #a8a8a8;
+
+  --ig-link: #00376b;
+  --ig-blue: #0095f6;
+  --ig-blue-hover: #1877f2;
+
+  --ig-danger: #ed4956;
+
+  --ig-radius: 8px;
+  --ig-feed-width: 630px;
+}
+
+/* Feed wrapper */
+
+.posts-feed,
+.posts-feed-list,
+.posts-feed-container {
+  width: min(100%, var(--ig-feed-width));
+  margin: 0 auto;
+  padding: 24px 12px 60px;
+}
+
+/* Main post card */
+
+.posts-feed-item {
+  position: relative;
+  width: 100%;
+  margin: 0 0 20px;
+  padding: 0;
+
+  color: var(--ig-text);
+  background: var(--ig-surface);
+
+  border: 1px solid var(--ig-border);
+  border-radius: var(--ig-radius);
+
+  box-shadow: none;
   overflow: hidden;
 }
 
-.posts-feed-item {
-  background: #fff;
-  padding: 0.85rem 1rem;
-  border-bottom: 1px solid #e8e8e8;
+/* Remove the previous green accent */
+.posts-feed-item::before {
+  display: none;
 }
 
-.posts-feed-item:last-child {
-  border-bottom: none;
+/* No floating card animation */
+.posts-feed-item:hover {
+  transform: none;
+  border-color: var(--ig-border);
+  box-shadow: none;
 }
 
-.posts-feed-item-embedded {
-  background: transparent;
-  padding: 0;
-  border-bottom: none;
-  margin-bottom: 0.75rem;
-}
-
-.posts-feed-item-embedded:last-child {
-  margin-bottom: 0;
-}
+/* Post header */
 
 .posts-feed-item-header {
   display: flex;
   align-items: center;
-  gap: 0.6rem;
-  margin-bottom: 0.5rem;
+  gap: 12px;
+
+  min-height: 60px;
+  margin: 0;
+  padding: 12px 16px;
+
+  border-bottom: 1px solid var(--ig-border-soft);
 }
 
+/* Metadata */
+
 .posts-feed-item-meta {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 0.35rem;
-  font-size: 0.85rem;
-  color: #6c757d;
   min-width: 0;
+  flex: 1;
+
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px 7px;
+
+  padding: 0;
 }
 
+/* Author name */
+
 .posts-feed-item-author {
+  display: inline-block;
+  max-width: 100%;
+
+  color: var(--ig-text);
+  font-size: 14px;
   font-weight: 600;
-  color: #212529;
+  line-height: 18px;
+
   text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  transition: opacity 0.15s ease;
 }
 
 .posts-feed-item-author:hover {
-  text-decoration: underline;
-  color: #28a745;
+  color: var(--ig-text);
+  text-decoration: none;
+  opacity: 0.65;
 }
 
+/* Address-based usernames */
+
 .posts-feed-item-author-address {
-  font-family: monospace;
-  font-size: 0.8rem;
-  font-weight: 500;
+  max-width: 300px;
+
+  color: var(--ig-text);
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+
+  font-size: 14px;
+  font-weight: 600;
 }
 
+/* Replied badge */
+
 .posts-feed-item-replied {
-  font-style: italic;
+  display: inline-flex;
+  align-items: center;
+
+  padding: 0;
+
+  color: var(--ig-text-secondary);
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
 }
 
+/* Timestamp */
+
 .posts-feed-item-seen {
-  white-space: nowrap;
+  color: var(--ig-text-secondary);
+  font-size: 12px;
+  line-height: 16px;
 }
 
+.posts-feed-item-seen::before {
+  content: "•";
+  margin-right: 7px;
+  color: var(--ig-text-muted);
+}
+
+/* Post body */
+
 .posts-feed-item-text {
+  margin: 0;
+  padding: 16px;
+
+  color: var(--ig-text);
+  font-size: 14px;
+  line-height: 20px;
+
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
   word-break: break-word;
-  font-size: 0.95rem;
-  line-height: 1.5;
 }
 
+/* Links inside posts */
+
+.posts-feed-item-text a {
+  color: var(--ig-link);
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.posts-feed-item-text a:hover {
+  text-decoration: underline;
+}
+
+/* Actions */
+
 .posts-feed-item-actions {
-  margin-top: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  min-height: 46px;
+  margin: 0;
+  padding: 8px 16px;
+
+  border-top: 1px solid var(--ig-border-soft);
 }
 
-.posts-feed-item-actions .post-reply-count {
-  margin-top: 0.35rem;
+/* Reply-count buttons and links */
+
+.posts-feed-item-actions button,
+.posts-feed-item-actions a,
+.posts-feed-item-actions [role="button"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+
+  min-height: 32px;
+  padding: 4px 0;
+
+  color: var(--ig-text);
+  background: transparent;
+
+  border: 0;
+  border-radius: 0;
+
+  box-shadow: none;
+
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 18px;
+  text-decoration: none;
+
+  cursor: pointer;
+
+  transition:
+    opacity 0.15s ease,
+    color 0.15s ease;
 }
 
+.posts-feed-item-actions button:hover,
+.posts-feed-item-actions a:hover,
+.posts-feed-item-actions [role="button"]:hover {
+  color: var(--ig-text);
+  background: transparent;
+  border: 0;
+
+  box-shadow: none;
+  transform: none;
+  opacity: 0.55;
+}
+
+/* Footer metadata */
+
 .posts-feed-item-footer {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  gap: 0.35rem;
-  margin-top: 0.5rem;
-  font-size: 0.75rem;
-  color: #adb5bd;
+  flex-wrap: wrap;
+  gap: 4px;
+
+  margin: 0;
+  padding: 0 16px 14px;
+
+  color: var(--ig-text-secondary);
+
+  border-top: 0;
+
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+
+  font-size: 11px;
+  line-height: 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
 }
 
 .posts-feed-item-footer-separator {
-  color: #ced4da;
+  color: var(--ig-text-muted);
+}
+
+/* Transaction ID */
+
+.posts-feed-item-txid {
+  color: var(--ig-text-secondary);
+  cursor: pointer;
+
+  border: 0;
+  text-transform: none;
+
+  transition: color 0.15s ease;
+}
+
+.posts-feed-item-txid:hover {
+  color: var(--ig-text);
+  background: transparent;
+}
+
+.posts-feed-item-txid:focus-visible {
+  outline: 2px solid var(--ig-blue);
+  outline-offset: 3px;
+  border-radius: 2px;
+}
+
+/* Embedded replies */
+
+.posts-feed-item-embedded {
+  margin: 12px 0 0 44px;
+  padding: 0;
+
+  background: var(--ig-surface);
+  border: 1px solid var(--ig-border-soft);
+  border-radius: var(--ig-radius);
+
+  box-shadow: none;
+}
+
+.posts-feed-item-embedded .posts-feed-item-header {
+  min-height: 52px;
+  padding: 10px 12px;
+}
+
+.posts-feed-item-embedded .posts-feed-item-text {
+  padding: 12px;
+}
+
+.posts-feed-item-embedded .posts-feed-item-actions {
+  padding: 6px 12px;
+}
+
+.posts-feed-item-embedded .posts-feed-item-footer {
+  padding: 0 12px 12px;
+}
+
+/* Alternate posts should remain consistent */
+.posts-feed-item:nth-child(even) {
+  background: var(--ig-surface);
+}
+
+/* Common avatar overrides */
+
+.posts-feed-item-header img,
+.posts-feed-item-header .avatar,
+.posts-feed-item-header [class*="avatar"] {
+  width: 36px;
+  height: 36px;
+  flex: 0 0 36px;
+
+  object-fit: cover;
+
+  background: #efefef;
+  border: 1px solid var(--ig-border);
+  border-radius: 50%;
+}
+
+/* Optional Instagram-style profile ring */
+
+.posts-feed-item-header img,
+.posts-feed-item-header [class*="avatar"] img {
+  padding: 2px;
+  background:
+    linear-gradient(#ffffff, #ffffff) padding-box,
+    linear-gradient(
+      135deg,
+      #f9ce34,
+      #ee2a7b,
+      #6228d7
+    ) border-box;
+
+  border: 2px solid transparent;
+}
+
+/* Mobile */
+
+@media (max-width: 700px) {
+  .posts-feed,
+  .posts-feed-list,
+  .posts-feed-container {
+    width: 100%;
+    padding: 0 0 40px;
+  }
+
+  .posts-feed-item {
+    margin-bottom: 10px;
+
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+  }
+
+  .posts-feed-item-header {
+    padding: 10px 12px;
+  }
+
+  .posts-feed-item-text {
+    padding: 14px 12px;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .posts-feed-item-actions {
+    padding: 7px 12px;
+  }
+
+  .posts-feed-item-footer {
+    padding: 0 12px 12px;
+  }
+
+  .posts-feed-item-author-address {
+    max-width: 190px;
+  }
+
+  .posts-feed-item-embedded {
+    margin-left: 24px;
+    margin-right: 10px;
+
+    border-left: 1px solid var(--ig-border-soft);
+    border-right: 1px solid var(--ig-border-soft);
+    border-radius: var(--ig-radius);
+  }
+}
+
+/* Accessibility */
+
+@media (prefers-reduced-motion: reduce) {
+  .posts-feed-item-author,
+  .posts-feed-item-actions button,
+  .posts-feed-item-actions a,
+  .posts-feed-item-actions [role="button"],
+  .posts-feed-item-txid {
+    transition: none;
+  }
+}
+
+.posts-feed-item-avatar-link {
+  display: inline-flex;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  text-decoration: none;
+}
+
+.posts-feed-item-meta {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+}
+
+.posts-feed-item-author-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.posts-feed-item-menu {
+  width: 34px;
+  height: 34px;
+  padding: 0;
+
+  color: #262626;
+  background: transparent;
+  border: 0;
+  border-radius: 50%;
+  box-shadow: none;
+
+  font-size: 15px;
+  letter-spacing: 1px;
+  cursor: pointer;
+}
+
+.posts-feed-item-menu:hover {
+  color: #737373;
+  background: #f2f2f2;
+  border: 0;
+  box-shadow: none;
+  transform: none;
+}
+
+.posts-feed-item-content {
+  padding: 14px 16px 6px;
+}
+
+.posts-feed-item-text {
+  margin: 0;
+  padding: 0;
+  color: #262626;
+  font-size: 14px;
+  line-height: 20px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.posts-feed-item-inline-author {
+  color: #262626;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.posts-feed-item-inline-author:hover {
+  text-decoration: underline;
 }
 
 .posts-feed-item-txid {
-  font-family: monospace;
+  padding: 0;
+  color: #737373;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+
+  font-size: inherit;
+  font-weight: inherit;
+  text-transform: none;
   cursor: pointer;
 }
 
 .posts-feed-item-txid:hover {
-  color: #6c757d;
-  text-decoration: underline;
+  color: #262626;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  transform: none;
 }
+
+.recent-posts-page {
+  padding-top: 2.5rem;
+  padding-bottom: 4rem;
+}
+
+.recent-posts-heading {
+  margin-bottom: 1.75rem;
+  text-align: center;
+}
+
+.recent-posts-heading h1 {
+  margin: 0;
+  color: #262626;
+  font-size: clamp(2rem, 5vw, 2.8rem);
+  font-weight: 700;
+  letter-spacing: -0.04em;
+}
+
+.recent-posts-heading p {
+  max-width: 560px;
+  margin: 0.6rem auto 0;
+  color: #737373;
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+.recent-posts-count {
+  display: inline-block;
+  margin-top: 0.85rem;
+  color: #8e8e8e;
+  font-size: 0.78rem;
+  font-weight: 500;
+}
+
+.recent-posts-error {
+  padding: 0.85rem 1rem;
+  color: #c62828;
+  background: #fff1f1;
+  border: 1px solid #ffd2d2;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.recent-posts-pagination {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-top: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.recent-posts-pagination .btn {
+  min-width: 110px;
+  border-radius: 8px;
+}
+
+@media (max-width: 700px) {
+  .recent-posts-page {
+    padding-top: 1.5rem;
+  }
+
+  .recent-posts-heading {
+    padding: 0 0.75rem;
+  }
+
+  .recent-posts-heading h1 {
+    font-size: 2rem;
+  }
+
+  .recent-posts-heading p {
+    font-size: 0.9rem;
+  }
+
+  .recent-posts-pagination {
+    padding: 0 0.75rem;
+  }
+}
\ No newline at end of file