diff --git a/app/static/css/custom-ui-tweaks.css b/app/static/css/custom-ui-tweaks.css
new file mode 100644
index 0000000..94fb2fa
--- /dev/null
+++ b/app/static/css/custom-ui-tweaks.css
@@ -0,0 +1,134 @@
+/* Custom UI tweaks for demos: reposition/resize header and navbar elements */
+:root{
+  --navbar-height: 64px;
+}
+
+/* Make navbar slightly taller and adjust brand positioning */
+.navbar {
+  min-height: var(--navbar-height) !important;
+  height: var(--navbar-height) !important;
+}
+
+.navbar .navbar-brand .title-logo {
+  font-size: 1.25rem;
+  line-height: 1;
+  margin: 0;
+  transform: translateY(6px);
+}
+
+/* Resize avatar in navbar */
+.d-flex #currencydiv img {
+  width: 28px !important;
+  height: 28px !important;
+}
+
+/* Slightly increase spacing for nav links */
+.navbar-nav .nav-link {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+/* Example utility: move nav to the right on larger screens */
+@media (min-width: 992px) {
+  .navbar .container-fluid > .navbar-brand { margin-right: 24px; }
+}
+
+/* Use this file to experiment: change --navbar-height or transforms to reposition/resize elements */
+
+/* ------------------------
+   Login page repositioning
+   - Moves the decorative image to the left of the form on wide screens
+   - Stacks the image above the form on small screens
+   - Adjust gap and max-height to taste
+   ------------------------ */
+.login-container {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+}
+
+.login-container > div {
+  order: 2; /* form column */
+  flex: 1 1 0;
+}
+
+.login-container img {
+  order: 1; /* image column */
+  max-height: 420px;
+  width: auto;
+  display: block;
+}
+
+/* Mobile / small screens: stack vertically with image on top */
+@media (max-width: 992px) {
+  .login-container {
+	flex-direction: column-reverse; /* keep form visible first on very small screens */
+	min-width: 280px;
+	gap: 16px;
+  }
+  .login-container img {
+	width: 100%;
+	max-height: 240px;
+	object-fit: cover;
+  }
+  .login-container > div {
+	order: 1;
+	width: 100%;
+  }
+}
+
+/* Utility: nudge the form horizontally if needed */
+.login-container .form-nudge { transform: translateX(10px); }
+
+/* Login logo styling: replace h1 text with an image */
+.login-logo {
+  display: block;
+  margin: 0 auto 8px;
+  max-width: 220px;
+  height: auto;
+}
+.login-subtitle {
+  text-align: center;
+  margin-bottom: 12px;
+  font-size: small;
+  color: rgba(230,238,248,0.9);
+}
+
+/* Navbar brand logo styling */
+.navbar .navbar-brand .brand-logo {
+  display: block;
+  max-height: 44px;
+  width: auto;
+  transform: translateY(6px);
+}
+
+/* Left sidebar styles (replaces top navbar) */
+.has-left-sidebar .fixed-top.width-100 { display: none !important; }
+.left-sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 220px;
+  background: #1f1f1f;
+  color: #fff;
+  padding-top: 18px;
+  z-index: 1040;
+  overflow: auto;
+}
+.left-sidebar .sidebar-brand { text-align: center; padding: 6px 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); }
+.left-sidebar .sidebar-brand .brand-logo { max-height: 48px; }
+.left-sidebar .sidebar-nav ul { list-style:none; margin:0; padding:8px 0; }
+.left-sidebar .sidebar-nav li { margin:0; }
+.left-sidebar .sidebar-nav a { display:block; padding:10px 16px; color: #ddd; text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.02); }
+.left-sidebar .sidebar-nav a:hover { background: rgba(255,255,255,0.03); color:#fff; }
+.left-sidebar .sidebar-nav .badge { background:#e53935; color:#fff; font-size:11px; padding:2px 6px; border-radius:10px; margin-left:6px; }
+
+/* push page content to the right so the sidebar doesn't overlap */
+.has-left-sidebar body, .has-left-sidebar .width-100 { margin-left: 220px !important; }
+@media (max-width: 992px) {
+  .left-sidebar { transform: translateX(-220px); transition: transform .2s ease; }
+  .left-sidebar.open { transform: translateX(0); }
+  .has-left-sidebar .width-100 { margin-left: 0 !important; }
+}
+