diff --git a/src/Components/Private/MemberCard.js b/src/Components/Private/MemberCard.js
index 9df84397..d00ae747 100644
--- a/src/Components/Private/MemberCard.js
+++ b/src/Components/Private/MemberCard.js
@@ -305,6 +305,31 @@ export default function MemberCard(props) {
                 { member.color ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Color:</b> {color}</BS.Col> : "" }
                 { privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Privacy:</b> <BS.Button variant="light" size="sm" onClick={() => setPrivacyView(true)}>View</BS.Button></BS.Col> }
                 { privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Proxy tags:</b> <BS.Button variant="light" size="sm" onClick={() => setProxyView(true)}>View</BS.Button></BS.Col> }
+                { privacyView || proxyView || !member.banner ? "" : 
+                    <BS.Col className="mb-lg-3" xs={12} lg={3}>
+                    <b>Banner:</b>{" "}
+                    <Popup
+                      trigger={
+                        <BS.Button
+                      variant="light"
+                      size="sm"
+                    >
+                      View
+                    </BS.Button>
+                      }
+                      className="banner"
+                      modal
+                    >
+                      {(close) => (
+                        <div className="text-center w-100" onClick={() => close()}>
+                            <div className="m-auto" style={{maxWidth: '100%'}}>
+                                <BS.Image src={`${banner}`} style={{maxWidth: 'auto', maxHeight: '640px'}} thumbnail />
+                            </div>
+                        </div>
+                      )}
+                    </Popup>
+                    </BS.Col>
+                   }
                 <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Created:</b> {created}</BS.Col>
             </BS.Row>
             { privacyEdit ? <BS.Form id='Privacy' onSubmit={handleSubmitPrivacy(submitPrivacy)}>
diff --git a/src/Components/Private/MemberPage.js b/src/Components/Private/MemberPage.js
index d9d38eef..107ec047 100644
--- a/src/Components/Private/MemberPage.js
+++ b/src/Components/Private/MemberPage.js
@@ -237,9 +237,9 @@ export default function MemberPage(props) {
             <BS.Button variant="primary" className="float-right" onClick={() => history.push("/dash/reload")}>Back</BS.Button>
         </BS.Card.Body></BS.Card> :
         <>
-        { member.banner && !localStorage.getItem("hidebanners") ? <div className="banner" style={{backgroundImage: `url(${banner})`}} alt=""/> : ""}
         { localStorage.getItem('colorbg') && member.color ? "" : <><div className="backdrop" style={{backgroundColor: `#${color}`}}/>
         { !localStorage.getItem('fullbg') ? <div className="backdrop-overlay"/> : "" }</> }
+        { member.banner && !localStorage.getItem("hidebanners") ? <div className="banner" style={{backgroundImage: `url(${banner})`}} alt=""/> : ""}
         <BS.Card className="mb-5">
         <BS.Card.Header className="d-flex align-items-center justify-content-between">
         <div> { member.visibility === 'public' ? <BS.OverlayTrigger placement="left" overlay={ 
@@ -332,6 +332,31 @@ export default function MemberPage(props) {
                 { member.color ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Color:</b> {color}</BS.Col> : "" }
                 { privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Privacy:</b> <BS.Button variant="light" size="sm" onClick={() => setPrivacyView(true)}>View</BS.Button></BS.Col> }
                 { privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Proxy tags:</b> <BS.Button variant="light" size="sm" onClick={() => setProxyView(true)}>View</BS.Button></BS.Col> }
+                { privacyView || proxyView || !member.banner ? "" : 
+                    <BS.Col className="mb-lg-3" xs={12} lg={3}>
+                    <b>Banner:</b>{" "}
+                    <Popup
+                      trigger={
+                        <BS.Button
+                      variant="light"
+                      size="sm"
+                    >
+                      View
+                    </BS.Button>
+                      }
+                      className="banner"
+                      modal
+                    >
+                      {(close) => (
+                        <div className="text-center w-100" onClick={() => close()}>
+                            <div className="m-auto" style={{maxWidth: '100%'}}>
+                                <BS.Image src={`${banner}`} style={{maxWidth: 'auto', maxHeight: '640px'}} thumbnail />
+                            </div>
+                        </div>
+                      )}
+                    </Popup>
+                    </BS.Col>
+                   }
                 <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Created:</b> {created}</BS.Col>
             </BS.Row>
             { privacyMode ? <BS.Form id='Privacy' onSubmit={handleSubmitPrivacy(submitPrivacy)}>
diff --git a/src/Components/Private/System.js b/src/Components/Private/System.js
index 0b3eaeee..3288c13b 100644
--- a/src/Components/Private/System.js
+++ b/src/Components/Private/System.js
@@ -108,11 +108,9 @@ export default function System(props) {
           >
             {(close) => (
               <div className="text-center w-100 m-0" onClick={() => close()}>
-                <BS.Image
-                  src={`${avatar}`}
-                  style={{ "max-width": 640, height: "auto" }}
-                  thumbnail
-                />
+                <div className="m-auto" style={{maxWidth: '640px'}}>
+                    <BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
+                </div>
               </div>
             )}
           </Popup>
@@ -161,6 +159,7 @@ export default function System(props) {
               {privacyView ? (
                 ""
               ) : (
+                <>
                 <BS.Col className="mb-lg-3" xs={12} lg={3}>
                   <b>Privacy:</b>{" "}
                   <BS.Button
@@ -171,7 +170,33 @@ export default function System(props) {
                     View
                   </BS.Button>
                 </BS.Col>
-              )}
+                {user.banner ? 
+                  <BS.Col className="mb-lg-3" xs={12} lg={3}>
+                  <b>Banner:</b>{" "}
+                  <Popup
+                    trigger={
+                      <BS.Button
+                    variant="light"
+                    size="sm"
+                  >
+                    View
+                  </BS.Button>
+                    }
+                    className="banner"
+                    modal
+                  >
+                    {(close) => (
+                      <div className="text-center w-100" onClick={() => close()}>
+                        <div className="m-auto" style={{maxWidth: '100%'}}>
+                            <BS.Image src={`${banner}`} style={{maxWidth: 'auto', maxHeight: '640px'}} thumbnail />
+                        </div>
+                      </div>
+                    )}
+                  </Popup>
+                  </BS.Col>
+                 : "" }
+                 </> 
+                 )}
             </BS.Row>
             {privacyEdit ? (
               <EditSystemPrivacy
diff --git a/src/Components/Public/Profile.js b/src/Components/Public/Profile.js
index c33434b1..e98f7810 100644
--- a/src/Components/Public/Profile.js
+++ b/src/Components/Public/Profile.js
@@ -81,7 +81,9 @@ export default function Profile () {
            { system.avatar_url ? <Popup trigger={<BS.Image src={`${system.avatar_url}`} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />} className="avatar" modal>
          {close => (
              <div className="text-center w-100 m-0" onClick={() => close()}>
-             <BS.Image src={`${avatar}`} style={{'max-width': 640, height: 'auto'}} thumbnail />
+                <div className="m-auto" style={{maxWidth: '640px'}}>
+                    <BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
+                </div>
              </div>
          )}
      </Popup> : 
@@ -92,6 +94,31 @@ export default function Profile () {
              <BS.Col className="mb-lg-3" xs={12} lg={3}><b>ID:</b> {system.id}</BS.Col>
              <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Tag:</b> {tag}</BS.Col>
              <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Timezone:</b> {timezone}</BS.Col>
+             {system.banner ? 
+                  <BS.Col className="mb-lg-3" xs={12} lg={3}>
+                  <b>Banner:</b>{" "}
+                  <Popup
+                    trigger={
+                      <BS.Button
+                    variant="light"
+                    size="sm"
+                  >
+                    View
+                  </BS.Button>
+                    }
+                    className="banner"
+                    modal
+                  >
+                    {(close) => (
+                      <div className="text-center w-100" onClick={() => close()}>
+                        <div className="m-auto" style={{maxWidth: '100%'}}>
+                            <BS.Image src={`${banner}`} style={{maxWidth: 'auto', maxHeight: '640px'}} thumbnail />
+                        </div>
+                      </div>
+                    )}
+                  </Popup>
+                  </BS.Col>
+                 : "" }
          </BS.Row>
          <p><b>Description:</b></p>
          { localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
diff --git a/src/Components/Public/ProfileCard.js b/src/Components/Public/ProfileCard.js
index 618a6b64..a85f9914 100644
--- a/src/Components/Public/ProfileCard.js
+++ b/src/Components/Public/ProfileCard.js
@@ -19,6 +19,7 @@ export default function MemberCard(props) {
     const [ displayName, setDisplayName ] = useState("");
     const [ birthday, setBirthday ] = useState("");
     const [ pronouns, setPronouns ] = useState("");
+    const [ banner, setBanner ] = useState("");
     const [ color, setColor ] = useState("");
     const [ desc, setDesc ] = useState("");
     const proxyTags = member.proxy_tags;
@@ -60,10 +61,14 @@ export default function MemberCard(props) {
             setColor(member.color);
         } else setColor('');
 
+        if (member.banner) {
+            setBanner(member.banner);
+          } else setBanner("");
+
         if (member.description) {
             setDesc(toHTML(member.description));
         } else setDesc("(no description)");
-    }, [member.description, member.color, member.birthday, member.display_name, member.pronouns, member.avatar_url, member.proxy_tags]);
+    }, [member.description, member.color, member.birthday, member.display_name, member.pronouns, member.avatar_url, member.proxy_tags, member.banner]);
 
     function copyLink() {
         var link = `https://pk-webs.spectralitree.com/profile/${sysID}/${member.id}`
@@ -90,6 +95,31 @@ export default function MemberCard(props) {
                 <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></BS.Col> : "" }
                 { member.color ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Color:</b> {color}</BS.Col> : "" }
                 { proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Proxy tags:</b> <BS.Button variant="light" size="sm" onClick={() => setProxyView(true)}>View</BS.Button></BS.Col> }
+                { proxyView || !member.banner ? "" : 
+                    <BS.Col className="mb-lg-3" xs={12} lg={3}>
+                    <b>Banner:</b>{" "}
+                    <Popup
+                      trigger={
+                        <BS.Button
+                      variant="light"
+                      size="sm"
+                    >
+                      View
+                    </BS.Button>
+                      }
+                      className="banner"
+                      modal
+                    >
+                      {(close) => (
+                        <div className="text-center w-100" onClick={() => close()}>
+                            <div className="m-auto" style={{maxWidth: '100%'}}>
+                                <BS.Image src={`${banner}`} style={{maxWidth: 'auto', maxHeight: '640px'}} thumbnail />
+                            </div>
+                        </div>
+                      )}
+                    </Popup>
+                    </BS.Col>
+                   }
                 
             </BS.Row>
             { proxyView ? <><hr/>
diff --git a/src/Components/Public/ProfilePage.js b/src/Components/Public/ProfilePage.js
index 2d4c48f7..97e8c116 100644
--- a/src/Components/Public/ProfilePage.js
+++ b/src/Components/Public/ProfilePage.js
@@ -85,9 +85,9 @@ export default function ProfilePage(props) {
 
     return (
        <> 
-       { member.banner && !localStorage.getItem("hidebanners") ? <div className="banner" style={{backgroundImage: `url(${banner})`}} alt=""/> : ""}
        { localStorage.getItem('colorbg') && member.color ? "" : <><div className="backdrop" style={{backgroundColor: `#${color}`}}/>
         { !localStorage.getItem('fullbg') ? <div className="backdrop-overlay"/> : "" }</> }
+        { member.banner && !localStorage.getItem("hidebanners") ? <div className="banner" style={{backgroundImage: `url(${banner})`}} alt=""/> : ""}
         <BS.Alert variant="primary" >You are currently <b>viewing</b> a member.</BS.Alert>
         <BS.Card className="mb-5">
         <BS.Card.Header className="d-flex align-items-center justify-content-between">
@@ -118,6 +118,31 @@ export default function ProfilePage(props) {
                 <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></BS.Col> : "" }
                 { member.color ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Color:</b> {color}</BS.Col> : "" }
                 { proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Proxy tags:</b> <BS.Button variant="light" size="sm" onClick={() => setProxyView(true)}>View</BS.Button></BS.Col> }
+                { proxyView || !member.banner ? "" : 
+                    <BS.Col className="mb-lg-3" xs={12} lg={3}>
+                    <b>Banner:</b>{" "}
+                    <Popup
+                      trigger={
+                        <BS.Button
+                      variant="light"
+                      size="sm"
+                    >
+                      View
+                    </BS.Button>
+                      }
+                      className="banner"
+                      modal
+                    >
+                      {(close) => (
+                        <div className="text-center w-100" onClick={() => close()}>
+                            <div className="m-auto" style={{maxWidth: '100%'}}>
+                                <BS.Image src={`${banner}`} style={{maxWidth: 'auto', maxHeight: '640px'}} thumbnail />
+                            </div>
+                        </div>
+                      )}
+                    </Popup>
+                    </BS.Col>
+                   }
                 
             </BS.Row>
             { proxyView ? <><hr/>
diff --git a/src/Custom.scss b/src/Custom.scss
index 44d3d881..ca780daf 100644
--- a/src/Custom.scss
+++ b/src/Custom.scss
@@ -65,6 +65,7 @@ body {
 .navbar {
   background-color: $gray-100;
   flex: 0 0 auto;
+  z-index: 5;
 }
 
 .dark-mode .navbar {
@@ -334,8 +335,7 @@ textarea {
   background-size: cover;
   background-position: center;
   z-index: -1;
-  box-shadow: inset 0 -3px 10px -10px #000000, inset 0 10px 10px -10px #000000;;
-
+  box-shadow: inset 0 -3px 10px -10px #000000, inset 0 10px 10px -10px #000000;
 }
 
 @media only screen and (min-width: 992px) {
@@ -343,3 +343,7 @@ textarea {
     height: 50vh;
   }
 }
+
+.banner-content {
+  max-height: 650px !important;
+}