diff --git a/apps/shelter-web/src/app/layout/footer.tsx b/apps/shelter-web/src/app/layout/footer.tsx
index 23562264a..3f9ae6bd4 100644
--- a/apps/shelter-web/src/app/layout/footer.tsx
+++ b/apps/shelter-web/src/app/layout/footer.tsx
@@ -1,3 +1,4 @@
+import { BaLogoShelterIcon } from '@monorepo/react/icons';
 import { ReactElement } from 'react';
 
 type IParams = {
@@ -19,7 +20,14 @@ export function Footer(props: IParams): ReactElement {
 
   return (
     <footer className={parentCss}>
-      <div className="border-t-[0.5px] border-white pt-6 flex justify-end">
+      <div className="flex items-center">
+        <BaLogoShelterIcon className="h-8" />
+        <div className="text-white flex ml-3 text-2xl">
+          <div className="font-normal">Shelters</div>
+          <div className="font-semibold">LA</div>
+        </div>
+      </div>
+      <div className="mt-6 border-t-[0.5px] border-white pt-6 flex justify-end">
         <div className="text-xs">
           © 2024 Better Angels Inc. All rights reserved.
         </div>
diff --git a/apps/shelter-web/src/app/layout/header.tsx b/apps/shelter-web/src/app/layout/header.tsx
index 12e20e283..d9e645335 100644
--- a/apps/shelter-web/src/app/layout/header.tsx
+++ b/apps/shelter-web/src/app/layout/header.tsx
@@ -1,3 +1,4 @@
+import { BaLogoShelterIcon } from '@monorepo/react/icons';
 import { ReactElement } from 'react';
 
 type IParams = {
@@ -16,5 +17,15 @@ export function Header(props: IParams): ReactElement {
     'text-white',
   ].join(' ');
 
-  return <header className={parentCss}>hello shelter-app</header>;
+  return (
+    <header className={parentCss}>
+      <div className="flex items-center">
+        <BaLogoShelterIcon className="h-4" />
+        <div className="text-white flex ml-2 text-sm">
+          <div className="font-normal">Shelters</div>
+          <div className="font-semibold">LA</div>
+        </div>
+      </div>
+    </header>
+  );
 }
diff --git a/apps/shelter-web/src/assets/styles/global.css b/apps/shelter-web/src/assets/styles/global.css
index c54244485..c447e44b8 100644
--- a/apps/shelter-web/src/assets/styles/global.css
+++ b/apps/shelter-web/src/assets/styles/global.css
@@ -4,6 +4,7 @@
 
 :root {
   --font-primary: 'Poppins', 'sans-serif';
+  --color-brand-yellow: #fff82e;
   --color-primary-20: #052b73;
   --color-primary-60: #216af8;
   --color-steel-blue: #375c76;
diff --git a/apps/shelter-web/tailwind.config.js b/apps/shelter-web/tailwind.config.js
index 980819e4c..78bf7f0aa 100644
--- a/apps/shelter-web/tailwind.config.js
+++ b/apps/shelter-web/tailwind.config.js
@@ -21,6 +21,7 @@ module.exports = {
         primary: ['Poppins', 'sans-serif'],
       },
       colors: {
+        'brand-yellow': 'var(--color-brand-yellow)',
         'primary-20': 'var(--color-primary-20)',
         'primary-60': 'var(--color-primary-60)',
         'steel-blue': 'var(--color-steel-blue)',
diff --git a/libs/assets/src/icons/svg/better_angels/betterAngelsLogo.svg b/libs/assets/src/icons/svg/better_angels/betterAngelsLogo.svg
new file mode 100644
index 000000000..3bf45a6d2
--- /dev/null
+++ b/libs/assets/src/icons/svg/better_angels/betterAngelsLogo.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 95.78">
+    <polygon points="43.83 45.57 10.06 17.48 0 48.45 43.83 45.57" />
+    <polygon points="46.18 52.83 9.04 76.26 35.38 95.4 46.18 52.83" />
+    <polygon points="53.82 52.83 64.62 95.4 90.96 76.26 53.82 52.83" />
+    <polygon points="56.17 45.57 100 48.45 89.94 17.48 56.17 45.57" />
+    <circle cx="50" cy="13.89" r="13.51" />
+</svg>
diff --git a/libs/react/icons/src/lib/components/baLogoShelterIcon.tsx b/libs/react/icons/src/lib/components/baLogoShelterIcon.tsx
new file mode 100644
index 000000000..015269600
--- /dev/null
+++ b/libs/react/icons/src/lib/components/baLogoShelterIcon.tsx
@@ -0,0 +1,10 @@
+import { SVGProps } from 'react';
+import BetterAngelsLogoIcon from './betterAngelsLogoIcon';
+
+interface IProps extends SVGProps<SVGSVGElement> {
+  className?: string;
+}
+
+export default function BaLogoShelter(props?: IProps) {
+  return <BetterAngelsLogoIcon fill="#fff82e" {...props} />;
+}
diff --git a/libs/react/icons/src/lib/components/betterAngelsLogoIcon.tsx b/libs/react/icons/src/lib/components/betterAngelsLogoIcon.tsx
new file mode 100644
index 000000000..3f9de1ecd
--- /dev/null
+++ b/libs/react/icons/src/lib/components/betterAngelsLogoIcon.tsx
@@ -0,0 +1,4 @@
+import svg from '../../../../../assets/src/icons/svg/better_angels/betterAngelsLogo.svg';
+import { createSvgComponent } from '../../toComponent';
+
+export default createSvgComponent(svg);
diff --git a/libs/react/icons/src/lib/index.ts b/libs/react/icons/src/lib/index.ts
index 6af3ee8f2..4ae5a405f 100644
--- a/libs/react/icons/src/lib/index.ts
+++ b/libs/react/icons/src/lib/index.ts
@@ -1,3 +1,5 @@
+export { default as BaLogoShelterIcon } from './components/baLogoShelterIcon';
+export { default as BetterAngelsLogoIcon } from './components/betterAngelsLogoIcon';
 export { default as CloseIcon } from './components/closeIcon';
 export { default as FilterIcon } from './components/filterIcon';
 export { default as FindMeIcon } from './components/findMeIcon';