ElementsProject · ShahanaFarooqui · Mar 20, 2026 · Mar 10, 2026 · Mar 10, 2026 · Mar 10, 2026
diff --git a/apps/frontend/src/components/bookkeeper/BkprHome/AccountEventsInfo/AccountEventsInfo.tsx b/apps/frontend/src/components/bookkeeper/BkprHome/AccountEventsInfo/AccountEventsInfo.tsx
@@ -41,7 +41,7 @@ const AccountEventsInfo = () => {
                 </Row>
               </Row>
             :
-              <>
+              <Row className='h-100 align-items-stretch'>
                 <div className='d-flex flex-column align-items-stretch justify-content-between'>
                   <div className='d-flex flex-column align-items-start p-2'>
                     <span className='fs-6 text-dark'>Total Invoice Received</span>
@@ -51,8 +51,6 @@ const AccountEventsInfo = () => {
                     <span className='fs-6 text-dark'>Total Payments Sent</span>
                     <span className='fs-2 fw-bold primary'>-<CurrencyBox value={bkprSummary.total_payments_sent_msat} shorten={false} hideUnit={true} fromUnit={Units.MSATS} rootClasses='d-inline-flex flex-column' currencyClasses='fs-2 fw-bold primary'></CurrencyBox></span>
                   </div>
-                </div>
-                <div className='d-flex flex-column align-items-stretch justify-content-between'>
                   <div className='d-flex flex-column align-items-start p-2'>
                     <span className='fs-6 text-dark'>Routing Revenue</span>
                     <span className='fs-2 fw-bold primary'>+<CurrencyBox value={bkprSummary.routing_revenue_msat} shorten={false} hideUnit={true} fromUnit={Units.MSATS} rootClasses='d-inline-flex flex-column' currencyClasses='fs-2 fw-bold primary'></CurrencyBox></span>
@@ -62,7 +60,7 @@ const AccountEventsInfo = () => {
                     <span className='fs-2 fw-bold primary'>-<CurrencyBox value={bkprSummary.onchain_fee_msat} shorten={false} hideUnit={true} fromUnit={Units.MSATS} rootClasses='d-inline-flex flex-column' currencyClasses='fs-2 fw-bold primary'></CurrencyBox></span>
                   </div>
                 </div>
-              </>
+              </Row>
         }
       </Card.Body>
       <Card.Footer className='d-flex justify-content-end px-2'>

diff --git a/apps/frontend/src/components/bookkeeper/BkprHome/BkprHome.scss b/apps/frontend/src/components/bookkeeper/BkprHome/BkprHome.scss
@@ -1,12 +1,5 @@
 @use '../../../styles/constants' as *;
 
-[data-screensize='SM'],
-[data-screensize='XS'] {
-  & .cards-container {
-    height: 77vh;
-  }
-}
-
 .bookkeeper-dashboard-container {
     padding: 0 1rem;
 }

diff --git a/apps/frontend/src/components/bookkeeper/BkprHome/SatsFlowInfo/SatsFlowInfo.tsx b/apps/frontend/src/components/bookkeeper/BkprHome/SatsFlowInfo/SatsFlowInfo.tsx
@@ -41,7 +41,7 @@ const SatsFlowInfo = () => {
                 </Row>
               </Row>
             :
-              <div className='d-flex flex-row justify-content-between '>
+              <Row className='h-100 align-items-stretch'>
                 <div className='d-flex flex-column align-items-start p-2'>
                   <span className='fs-6 text-dark'>Inflow this month</span>
                   <span className='fs-3 fw-bold positive'>
@@ -54,7 +54,7 @@ const SatsFlowInfo = () => {
                     <CurrencyBox value={bkprSummary.outflows_for_period_msat} shorten={false} hideUnit={true} fromUnit={Units.MSATS} rootClasses='d-inline-flex flex-column' currencyClasses='fs-3 fw-bold negative'></CurrencyBox>
                   </span>
                 </div>
-              </div>
+              </Row>
         }
       </Card.Body>
       <Card.Footer className='d-flex justify-content-end px-2'>

diff --git a/apps/frontend/src/components/bookkeeper/BkprHome/VolumeInfo/VolumeInfo.tsx b/apps/frontend/src/components/bookkeeper/BkprHome/VolumeInfo/VolumeInfo.tsx
@@ -55,7 +55,7 @@ const VolumeInfo = () => {
               </Row>
             :
             <>
-              <div className='d-flex flex-column align-items-start p-2 pb-0 h-50'>
+              <Row className='h-100 align-items-stretch'>
                 <span className='fs-6 text-dark'>Route with Most Traffic</span>
                 <OverlayTrigger
                   placement='auto'
@@ -64,8 +64,6 @@ const VolumeInfo = () => {
                 >
                   <span className='fs-4 fw-bold positive'>{bkprSummary.most_traffic_route?.channel_scids}</span>
                 </OverlayTrigger>
-              </div>
-              <div className='d-flex flex-column align-items-start p-2 pt-0 h-50'>
                 <span className='fs-6 text-dark'>Route with Least Traffic</span>
                 <OverlayTrigger
                   placement='auto'
@@ -74,7 +72,7 @@ const VolumeInfo = () => {
                 >
                   <span className='fs-4 fw-bold negative'>{bkprSummary.least_traffic_route?.channel_scids}</span>
                 </OverlayTrigger>
-              </div>
+              </Row>
             </>
         }
       </Card.Body>

diff --git a/apps/frontend/src/components/ui/Header/Header.tsx b/apps/frontend/src/components/ui/Header/Header.tsx
@@ -42,75 +42,84 @@ const Header = (props) => {
 
   if (currentScreenSize === Breakpoints.XS || currentScreenSize === Breakpoints.SM) {
     return (
-      <Row className="header mb-5 mx-1" data-testid="header">
+      <Row className="header mb-2 mx-1" data-testid="header">
         <Col xs={12} data-testid="header-info">
-          <AnimatePresence>
-            <motion.img
-              key='cln-logo'
-              alt='Core Lightning Logo'
-              src={isDarkMode ? '/images/cln-logo-dark.png' : '/images/cln-logo-light.png'}
-              className='header-info-logo me-3 rounded float-start'
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ delay: 0.05, duration: 0.01 }}
-            />
-          </AnimatePresence>
-          <Col className="h-100 d-flex align-items-center justify-content-between">
-            <h4 className="m-0 text-dark">
-              <strong>CLN</strong>
-            </h4>
-            <div className="d-flex align-items-center">
-              <Menu compact={true} />
-              <Settings compact={true} onShowConnectWallet={props.onShowConnectWallet} />
-              {serverConfig.singleSignOn === true || serverConfig.singleSignOn === "true" ?
-                <span className='mx-3'></span>
-                :
-                <div onClick={logoutHandler}>
-                  <LogoutSVG className="svg-logout ms-3 cursor-pointer" />
-                </div>
-              }
-              <div onClick={modeChangeHandler}>
-                {(isDarkMode) ? <NightModeSVG className='svg-night me-3' /> : <DayModeSVG className='svg-day me-3' />}
-              </div>
-            </div>
-          </Col>
-          <Row className='header-info-text my-2'>
-            <Col xs={12} className='d-flex align-items-center text-light'>
-              {isAuthenticated && nodeInfo.isLoading ?
-                <>
-                  <OverlayTrigger
-                    placement="auto"
-                    delay={{ show: 250, hide: 250 }}
-                    overlay={<Tooltip>Loading</Tooltip>}
-                  >
-                    <span className="d-inline-block mx-3 dot bg-warning"></span>
-                  </OverlayTrigger>
-                  <span className="fs-7">Loading...</span>
-                </>
-                :
-                nodeInfo.error ?
-                  <>
-                    <OverlayTrigger
-                      placement='auto'
-                      delay={{ show: 250, hide: 250 }}
-                      overlay={<Tooltip>Error</Tooltip>}
-                    >
-                      <span className='d-inline-block mx-3 dot bg-danger'></span>
-                    </OverlayTrigger>
-                    <span className='fs-7'>{('Error: ' + nodeInfo.error)}</span>
-                  </>
-                  :
-                  <>
-                    <OverlayTrigger
-                      placement='auto'
-                      delay={{ show: 250, hide: 250 }}
-                      overlay={<Tooltip>Connected</Tooltip>}
-                    >
-                      <span className='d-inline-block mx-3 dot bg-success'></span>
-                    </OverlayTrigger>
-                    <span className='fs-7'>{nodeInfo.alias?.replace('--', '-').replace(/-\d+-.*$/, '') + ' (' + nodeInfo.version + ')'}</span>
-                  </>
-              }
+          <Row>
+            <Col xs={3} className='mb-3'>
+              <AnimatePresence>
+                <motion.img
+                  key='cln-logo'
+                  alt='Core Lightning Logo'
+                  src={isDarkMode ? '/images/cln-logo-dark.png' : '/images/cln-logo-light.png'}
+                  className='header-info-logo me-3 rounded float-start'
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ delay: 0.05, duration: 0.01 }}
+                />
+              </AnimatePresence>
+            </Col>
+            <Col xs={9}>
+              <h4 className="ms-3 m-0 text-dark">
+                <strong>Core Lightning Node</strong>
+              </h4>
+              <Row className='header-info-text my-1'>
+                <Col xs={12} className='d-flex align-items-center text-light'>
+                  {isAuthenticated && nodeInfo.isLoading ?
+                    <>
+                      <OverlayTrigger
+                        placement="auto"
+                        delay={{ show: 250, hide: 250 }}
+                        overlay={<Tooltip>Loading</Tooltip>}
+                      >
+                        <span className="d-inline-block mx-3 dot bg-warning"></span>
+                      </OverlayTrigger>
+                      <span className="fs-7">Loading...</span>
+                    </>
+                    :
+                    nodeInfo.error ?
+                      <>
+                        <OverlayTrigger
+                          placement='auto'
+                          delay={{ show: 250, hide: 250 }}
+                          overlay={<Tooltip>Error</Tooltip>}
+                        >
+                          <span className='d-inline-block mx-3 dot bg-danger'></span>
+                        </OverlayTrigger>
+                        <span className='fs-7'>{('Error: ' + nodeInfo.error)}</span>
+                      </>
+                      :
+                      <>
+                        <OverlayTrigger
+                          placement='auto'
+                          delay={{ show: 250, hide: 250 }}
+                          overlay={<Tooltip>Connected</Tooltip>}
+                        >
+                          <span className='d-inline-block mx-3 dot bg-success'></span>
+                        </OverlayTrigger>
+                        <span className='fs-7'>{nodeInfo.alias?.replace('--', '-').replace(/-\d+-.*$/, '')}</span>
+                      </>
+                  }
+                </Col>
+              </Row>
+              <Row className='ms-1'>
+                <Col className="h-100 d-flex align-items-end justify-content-between">
+                  <div className="d-flex align-items-center">
+                    <Menu compact={true} />
+                    <Settings compact={true} onShowConnectWallet={props.onShowConnectWallet} />
+                    {serverConfig.singleSignOn === true || serverConfig.singleSignOn === "true" ?
+                      <span className='mx-2'></span>
+                      :
+                      <div onClick={logoutHandler}>
+                        <LogoutSVG className="svg-logout ms-2 cursor-pointer" />
+                      </div>
+                    }
+                    <div onClick={modeChangeHandler}>
+                      {(isDarkMode) ? <NightModeSVG className='svg-night mx-2' /> : <DayModeSVG className='svg-day mx-2' />}
+                    </div>
+                  </div>
+                </Col>
+              </Row>
+
             </Col>
           </Row>
         </Col>
@@ -213,4 +222,3 @@ const Header = (props) => {
 };
 
 export default Header;
-
diff --git a/apps/frontend/src/components/ui/Menu/Menu.scss b/apps/frontend/src/components/ui/Menu/Menu.scss
@@ -4,7 +4,6 @@
   text-decoration: none;  
   & .dropdown-toggle.btn-menu {
     background-color: $primary;
-    width: 8rem;
     padding: 1.25rem 1.375rem;
     &::after {
       display: none;
@@ -32,8 +31,13 @@
   .menu-dropdown.dropdown {
     & .dropdown-toggle.btn-menu {
       color: $white;
-      & svg path {
-        fill: $white;
+      & svg {
+        .cls-1 {
+          fill:none;
+          stroke:$white;
+          stroke-linecap:round;
+          stroke-linejoin:round;
+        }
       }
     }
     & > .dropdown-menu {
@@ -42,18 +46,28 @@
   }
   .btn-compact {
     background-color: $primary;
-    & svg > path {
-      fill: $dark;
-    }
+      & svg {
+        .cls-1 {
+          fill:none;
+          stroke:$dark;
+          stroke-linecap:round;
+          stroke-linejoin:round;
+        }
+      }
   }
 }
 
 @include color-mode(dark) {
   .menu-dropdown.dropdown {
     & .dropdown-toggle.btn-menu {
       color: $card-bg-dark;
-      & svg path {
-        fill: $card-bg-dark;
+      & svg {
+        .cls-1 {
+          fill:none;
+          stroke:$card-bg-dark;
+          stroke-linecap:round;
+          stroke-linejoin:round;
+        }
       }
     }
     & .dropdown-menu {
@@ -64,8 +78,13 @@
   }
   .btn-compact {
     background-color: $primary;
-    & svg > path {
-      fill: $dark;
+    & svg {
+      .cls-1 {
+        fill:none;
+        stroke:$dark;
+        stroke-linecap:round;
+        stroke-linejoin:round;
+      }
     }
   }
 }
diff --git a/apps/frontend/src/components/ui/Menu/Menu.tsx b/apps/frontend/src/components/ui/Menu/Menu.tsx
@@ -3,6 +3,8 @@ import { Link, useLocation } from 'react-router-dom';
 import Dropdown from 'react-bootstrap/Dropdown';
 import { useSelector } from 'react-redux';
 import { selectIsAuthenticated, selectNodeInfo } from '../../../store/rootSelectors';
+import { HomeSVG } from '../../../svgs/Home';
+import { BookkeeperSVG } from '../../../svgs/Bookkeeper';
 
 const Menu = props => {
   const isAuthenticated = useSelector(selectIsAuthenticated);
@@ -21,19 +23,17 @@ const Menu = props => {
     >
       <Dropdown.Toggle
         variant={props.compact ? '' : 'primary'}
-        disabled={
-          !!(
-            nodeInfo.error ||
-            (isAuthenticated && nodeInfo.isLoading)
-          )
-        }
+        disabled={!!(nodeInfo.error || (isAuthenticated && nodeInfo.isLoading))}
         className={
           props.compact
             ? 'd-flex align-items-center justify-content-between btn-rounded btn-compact btn-menu'
             : 'd-flex align-items-center justify-content-between btn-rounded btn-menu'
         }
       >
-        <span className={props.compact ? '' : 'me-3'}>{location.pathname.includes('bookkeeper') ? 'Dashboard' : 'Bookkeeper'}</span>
+        <span className={props.compact ? '' : 'me-3'}>
+          <span className={props.compact ? '' : 'me-2'}>{props.compact ? '' : location.pathname.includes('bookkeeper') ? 'Dashboard' : 'Bookkeeper'}</span>
+          {location.pathname.includes('bookkeeper') ? <HomeSVG className={((!!nodeInfo.error || (isAuthenticated && nodeInfo.isLoading)) ? 'svg-fill-disabled' : '')} /> : <BookkeeperSVG className={((!!nodeInfo.error || (isAuthenticated && nodeInfo.isLoading)) ? 'svg-fill-disabled' : '')} />}
+        </span>
       </Dropdown.Toggle>
     </Dropdown>
   );

diff --git a/apps/frontend/src/components/ui/Settings/Settings.scss b/apps/frontend/src/components/ui/Settings/Settings.scss
@@ -2,6 +2,9 @@
 
 .settings-menu.dropdown {
   & .dropdown-toggle.btn-settings-menu {
+    &.btn-compact {
+      margin-left: 0;
+    }
     margin-left: 0.5rem;
     padding: 1.25rem 1.375rem;
     &::after {

diff --git a/apps/frontend/src/svgs/Bookkeeper.tsx b/apps/frontend/src/svgs/Bookkeeper.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export const BookkeeperSVG = props => {
+  return (
+    <svg
+      fill='#3a4247'
+      width='20'
+      height='20'
+      viewBox='0 0 64 64'
+      style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinejoin: 'round', strokeMiterlimit: 2 }}
+      version='1.1'
+      xmlSpace='preserve'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <g id='ICON'>
+        <path d='M13,8l-1,0c-0.796,0 -1.559,0.316 -2.121,0.879c-0.563,0.562 -0.879,1.325 -0.879,2.121c0,0.329 0,0.671 0,1c-0,0.796 0.316,1.559 0.879,2.121c0.562,0.563 1.325,0.879 2.121,0.879l1,-0l0,4l-1,0c-0.796,0 -1.559,0.316 -2.121,0.879c-0.563,0.562 -0.879,1.325 -0.879,2.121c0,0.329 0,0.671 0,1c-0,0.796 0.316,1.559 0.879,2.121c0.562,0.563 1.325,0.879 2.121,0.879l1,-0l0,4l-1,0c-0.796,0 -1.559,0.316 -2.121,0.879c-0.563,0.562 -0.879,1.325 -0.879,2.121c0,0.329 0,0.671 0,1c-0,0.796 0.316,1.559 0.879,2.121c0.562,0.563 1.325,0.879 2.121,0.879l1,-0l0,4l-1,0c-0.796,0 -1.559,0.316 -2.121,0.879c-0.563,0.562 -0.879,1.325 -0.879,2.121c0,0.329 0,0.671 0,1c-0,0.796 0.316,1.559 0.879,2.121c0.562,0.563 1.325,0.879 2.121,0.879l1,-0l0,8c0,2.76 2.24,5 5,5c1.871,0 24.992,0 32,-0c0.796,0 1.559,-0.316 2.121,-0.879c0.563,-0.562 0.879,-1.325 0.879,-2.121l0,-52c-0,-0.796 -0.316,-1.559 -0.879,-2.121c-0.562,-0.563 -1.325,-0.879 -2.121,-0.879l-34,0c-0.796,-0 -1.559,0.316 -2.121,0.879c-0.563,0.562 -0.879,1.325 -0.879,2.121l0,2Zm38,45l0,5c-0,0.265 -0.105,0.52 -0.293,0.707c-0.187,0.188 -0.442,0.293 -0.707,0.293l-32,0c-1.656,0 -3,-1.344 -3,-3c0,-1.656 1.344,-3 3,-3l33,0Zm-36,-5l0,4.001c0.836,-0.629 1.875,-1.001 3,-1.001l4,0l0,-46l-6,-0c-0.265,-0 -0.52,0.105 -0.707,0.293c-0.188,0.187 -0.293,0.442 -0.293,0.707l0,2l3,0c0.552,-0 1,0.448 1,1l0,5c0,0.552 -0.448,1 -1,1l-3,-0c0,0 0,4 0,4l3,0c0.552,-0 1,0.448 1,1l0,5c0,0.552 -0.448,1 -1,1l-3,-0c0,0 0,4 0,4l3,0c0.552,-0 1,0.448 1,1l0,5c0,0.552 -0.448,1 -1,1l-3,-0l0,4l3,0c0.552,-0 1,0.448 1,1l0,5c0,0.552 -0.448,1 -1,1l-3,-0Zm9,-29l0,32l27,0l0,-32l-27,0Zm-7,27l-5,0c-0.265,-0 -0.52,-0.105 -0.707,-0.293c-0.188,-0.187 -0.293,-0.442 -0.293,-0.707l-0,-1c-0,-0.265 0.105,-0.52 0.293,-0.707c0.187,-0.188 0.442,-0.293 0.707,-0.293l5,0l0,3Zm32,-10.5c0,-0.552 -0.448,-1 -1,-1l-21,0c-0.552,-0 -1,0.448 -1,1l0,6.5c0,0.552 0.448,1 1,1l21,0c0.552,0 1,-0.448 1,-1l0,-6.5Zm-2,1l0,4.5c0,0 -19,0 -19,0c0,0 0,-4.5 0,-4.5l19,-0Zm-30,-1.5l-5,0c-0.265,-0 -0.52,-0.105 -0.707,-0.293c-0.188,-0.187 -0.293,-0.442 -0.293,-0.707l-0,-1c-0,-0.265 0.105,-0.52 0.293,-0.707c0.187,-0.188 0.442,-0.293 0.707,-0.293l5,0l0,3Zm32,-10.75c0,-0.552 -0.448,-1 -1,-1l-21,0c-0.552,0 -1,0.448 -1,1l0,7c0,0.552 0.448,1 1,1l21,0c0.552,0 1,-0.448 1,-1l0,-7Zm-2,1l0,5c0,0 -19,0 -19,0c0,-0 0,-5 0,-5l19,0Zm-30,-4.25l0,3c-0,0 -5,0 -5,0c-0.265,-0 -0.52,-0.105 -0.707,-0.293c-0.188,-0.187 -0.293,-0.442 -0.293,-0.707l-0,-1c-0,-0.265 0.105,-0.52 0.293,-0.707c0.187,-0.188 0.442,-0.293 0.707,-0.293l5,0Zm24,-16l-17,-0l0,12l27,0l0,-11c-0,-0.265 -0.105,-0.52 -0.293,-0.707c-0.187,-0.188 -0.442,-0.293 -0.707,-0.293l-1,0l0,8c0,0.404 -0.244,0.769 -0.617,0.924c-0.374,0.155 -0.804,0.069 -1.09,-0.217c-0,0 -2.293,-2.293 -2.293,-2.293l-2.293,2.293c-0.286,0.286 -0.716,0.372 -1.09,0.217c-0.373,-0.155 -0.617,-0.52 -0.617,-0.924l0,-8Zm-24,5l0,3c-0,0 -5,0 -5,0c-0.265,-0 -0.52,-0.105 -0.707,-0.293c-0.188,-0.187 -0.293,-0.442 -0.293,-0.707l-0,-1c-0,-0.265 0.105,-0.52 0.293,-0.707c0.187,-0.188 0.442,-0.293 0.707,-0.293l5,0Zm30,-5l0,5.586c-0,-0 -1.293,-1.293 -1.293,-1.293c-0.39,-0.391 -1.024,-0.391 -1.414,-0l-1.293,1.293c0,-0 0,-5.586 0,-5.586l4,0Z' />
+      </g>
+    </svg>
+  );
+};