diff --git a/src/App.js b/src/App.js
index c6352c53..4cea5913 100644
--- a/src/App.js
+++ b/src/App.js
@@ -232,6 +232,22 @@ export default function App() {
                     forceUpdate()}} />  }
                 Hide colored backgrounds?
             </BS.Col>
+            <BS.Col xs={12} lg={4} className="mx-1 mb-4 d-flex align-items-center row">
+            { localStorage.getItem('expandcards') ? 
+                <Toggle className="mr-2"
+                defaultChecked={true}
+                icons={false}
+                onChange={() =>  {
+                    localStorage.removeItem('expandcards');
+                    forceUpdate()}} /> :
+                <Toggle className="mr-2"
+                defaultChecked={false}
+                icons={false}
+                onChange={() => {
+                    localStorage.setItem('expandcards', 'true')
+                    forceUpdate()}} />  }
+                Expand member cards on default?
+            </BS.Col>
             </BS.Row>
             </BS.Card.Body>
         </BS.Card>
diff --git a/src/Components/MemberCard.js b/src/Components/MemberCard.js
index d9b8d8d6..71086e20 100644
--- a/src/Components/MemberCard.js
+++ b/src/Components/MemberCard.js
@@ -219,31 +219,8 @@ export default function MemberCard(props) {
         document.body.removeChild(textField);
     }
 
-    return (
-       memberDeleted ? <BS.Card.Header className="d-flex align-items-center justify-content-between"><BS.Button variant="link" className="float-left"><FaTrashAlt className="mr-4"/>Member Deleted</BS.Button></BS.Card.Header> :
-       <LazyLoad offset={100}>
-           <BS.Card.Header className="d-flex align-items-center justify-content-between">
-        <div> { member.visibility === 'public' ? <BS.OverlayTrigger placement="left" overlay={ 
-            <BS.Tooltip>
-                Copy public link
-            </BS.Tooltip>
-        }><BS.Button variant="link" onClick={() => copyLink()}><FaLink style={{fontSize: '1.25rem'}}/></BS.Button></BS.OverlayTrigger> : 
-        <BS.Button variant="link"><FaLock style={{fontSize: '1.25rem'}} /></BS.Button> }
-        { localStorage.getItem('pagesonly') ? 
-        <Link to={`dash/${member.id}`}><BS.Button variant="link" className="float-left"><b>{member.name}</b> ({member.id})</BS.Button></Link>
-        : <BS.Accordion.Toggle  as={BS.Button} variant="link" eventKey={member.id}> <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>}</div>
-            { member.avatar_url ?   <Popup trigger={<BS.Image src={`${member.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()}>
-                        <div className="m-auto" style={{maxWidth: '640px'}}>
-                            <BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
-                        </div>
-                    </div>
-                )}
-            </Popup> : 
-        <BS.Image src={defaultAvatar} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />}
-        </BS.Card.Header>
-        <BS.Accordion.Collapse eventKey={member.id}>
+    function renderCard() {
+        return (
             <BS.Card.Body style={{borderLeft: `5px solid #${color}` }}>
                 { errorAlert ? <BS.Alert variant="danger">Something went wrong, please try logging in and out again.</BS.Alert> : "" }
                 { editMode ?
@@ -414,7 +391,36 @@ export default function MemberCard(props) {
             { localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
                 { proxyView ? "" : privacyMode ? "" : privacyView ? "" : <><BS.Button variant="light" onClick={() => setEditMode(true)}>Edit</BS.Button> <Link to={`dash/${member.id}`}><BS.Button variant="primary" className="float-right">View page</BS.Button></Link></> }
             </> } </BS.Card.Body>
-        </BS.Accordion.Collapse>
+        )
+    }
+
+    return (
+       memberDeleted ? <BS.Card.Header className="d-flex align-items-center justify-content-between"><BS.Button variant="link" className="float-left"><FaTrashAlt className="mr-4"/>Member Deleted</BS.Button></BS.Card.Header> :
+       <LazyLoad offset={100}>
+           <BS.Card.Header className="d-flex align-items-center justify-content-between">
+        <div> { member.visibility === 'public' ? <BS.OverlayTrigger placement="left" overlay={ 
+            <BS.Tooltip>
+                Copy public link
+            </BS.Tooltip>
+        }><BS.Button variant="link" onClick={() => copyLink()}><FaLink style={{fontSize: '1.25rem'}}/></BS.Button></BS.OverlayTrigger> : 
+        <BS.Button variant="link"><FaLock style={{fontSize: '1.25rem'}} /></BS.Button> }
+        { localStorage.getItem('pagesonly') ? 
+        <Link to={`dash/${member.id}`}><BS.Button variant="link" className="float-left"><b>{member.name}</b> ({member.id})</BS.Button></Link>
+        : <BS.Accordion.Toggle  as={BS.Button} variant="link" eventKey={member.id}> <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>}</div>
+            { member.avatar_url ?   <Popup trigger={<BS.Image src={`${member.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()}>
+                        <div className="m-auto" style={{maxWidth: '640px'}}>
+                            <BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
+                        </div>
+                    </div>
+                )}
+            </Popup> : 
+        <BS.Image src={defaultAvatar} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />}
+        </BS.Card.Header>
+        {localStorage.getItem("expandcards") ? renderCard() : <BS.Accordion.Collapse eventKey={member.id}>
+            {renderCard()}
+        </BS.Accordion.Collapse>}
         </LazyLoad>
         
     )
diff --git a/src/Components/Memberlist.js b/src/Components/Memberlist.js
index 61e07326..6ca8ffb0 100644
--- a/src/Components/Memberlist.js
+++ b/src/Components/Memberlist.js
@@ -47,7 +47,7 @@ export default function Memberlist() {
   const fetchMembers = useCallback( () => {
     setIsLoading(true);
     setIsError(false);
-    setMembersPerPage(25);
+    setMembersPerPage(localStorage.getItem("expandcards") ? 10 : 25);
 
      fetch(`${API_URL}s/${userId}/members`,{
     method: 'GET',
@@ -135,7 +135,7 @@ export default function Memberlist() {
         sortMembers =  currentMembers.sort((a, b) => a.created.localeCompare(b.created)).slice(indexOfFirstMember, indexOfLastMember);
       }
 
-      const memberList = sortMembers.map((member) => <BS.Card key={member.id}>
+      const memberList = sortMembers.map((member) => <BS.Card key={member.id} className={localStorage.getItem("expandcards") ? "mb-3" : ""}>
       <MemberCard
       member={member} 
       edit={memberEdit => setMembers(members.map(member => member.id === memberEdit.id ? Object.assign(member, memberEdit) : member))}
@@ -179,7 +179,7 @@ export default function Memberlist() {
         <BS.Form>
           <BS.InputGroup className="mb-3">
           <BS.Form.Control disabled placeholder='Page length:'/>
-            <BS.Form.Control as="select" defaultValue="25" onChange={e => {
+            <BS.Form.Control as="select" defaultValue={localStorage.getItem("expandcards") ? 10 : 25} onChange={e => {
               setMembersPerPage(e.target.value);
               setCurrentPage(1);
               }}>
diff --git a/src/Components/ProfileCard.js b/src/Components/ProfileCard.js
index dd4ad348..dc597f4a 100644
--- a/src/Components/ProfileCard.js
+++ b/src/Components/ProfileCard.js
@@ -78,29 +78,8 @@ export default function MemberCard(props) {
         document.body.removeChild(textField);
     }
 
-    return (
-       <LazyLoad offset={100}>
-           <BS.Card.Header className="d-flex align-items-center justify-content-between">
-           <div> <BS.OverlayTrigger placement="left" overlay={ 
-            <BS.Tooltip>
-                Copy link
-            </BS.Tooltip>
-        }><BS.Button variant="link" onClick={() => copyLink()}><FaLink style={{fontSize: '1.25rem'}}/></BS.Button></BS.OverlayTrigger>
-           { localStorage.getItem('pagesonly') ? 
-        <Link to={`${sysID}/${member.id}`}><BS.Button variant="link"> <b>{member.name}</b> ({member.id})</BS.Button></Link>
-        : <BS.Accordion.Toggle  as={BS.Button} variant="link" eventKey={member.id} > <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>}</div>
-            { member.avatar_url ?   <Popup trigger={<BS.Image src={`${member.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()}>
-                  <div className="m-auto" style={{maxWidth: '640px'}}>
-                      <BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
-                  </div>
-                </div>
-                )}
-            </Popup> : 
-        <BS.Image src={defaultAvatar} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />}
-        </BS.Card.Header>
-        <BS.Accordion.Collapse eventKey={member.id}>
+    function renderCard() {
+        return (
             <BS.Card.Body style={{borderLeft: `5px solid #${color}` }}>
             <BS.Row>
                 <BS.Col className="mb-lg-3" xs={12} lg={3}><b>ID:</b> {member.id}</BS.Col>
@@ -123,7 +102,34 @@ export default function MemberCard(props) {
             <p><b>Description:</b></p>
             { localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
             <BS.Row><BS.Col><Link to={`${sysID}/${member.id}`}><BS.Button variant="primary" className="float-right">View page</BS.Button></Link></BS.Col></BS.Row> </BS.Card.Body>
-        </BS.Accordion.Collapse>
+        )
+    }
+
+    return (
+       <LazyLoad offset={100}>
+           <BS.Card.Header className="d-flex align-items-center justify-content-between">
+           <div> <BS.OverlayTrigger placement="left" overlay={ 
+            <BS.Tooltip>
+                Copy link
+            </BS.Tooltip>
+        }><BS.Button variant="link" onClick={() => copyLink()}><FaLink style={{fontSize: '1.25rem'}}/></BS.Button></BS.OverlayTrigger>
+           { localStorage.getItem('pagesonly') ? 
+        <Link to={`${sysID}/${member.id}`}><BS.Button variant="link"> <b>{member.name}</b> ({member.id})</BS.Button></Link>
+        : <BS.Accordion.Toggle  as={BS.Button} variant="link" eventKey={member.id} > <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>}</div>
+            { member.avatar_url ?   <Popup trigger={<BS.Image src={`${member.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()}>
+                  <div className="m-auto" style={{maxWidth: '640px'}}>
+                      <BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
+                  </div>
+                </div>
+                )}
+            </Popup> : 
+        <BS.Image src={defaultAvatar} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />}
+        </BS.Card.Header>
+        {localStorage.getItem("expandcards") ? renderCard() : <BS.Accordion.Collapse eventKey={member.id}>
+        {renderCard()}
+        </BS.Accordion.Collapse>}
         </LazyLoad>
         
     )
diff --git a/src/Components/ProfileList.js b/src/Components/ProfileList.js
index 50b7d6dc..5f9537d4 100644
--- a/src/Components/ProfileList.js
+++ b/src/Components/ProfileList.js
@@ -29,7 +29,7 @@ export default function Memberlist() {
   const fetchMembers = useCallback( () => {
     setIsLoading(true);
     setIsError(false);
-    setMembersPerPage(25);
+    setMembersPerPage(localStorage.getItem("expandcards") ? 10 : 25);
 
      fetch(`${API_URL}s/${sysID}/members`,{
     method: 'GET',
@@ -102,7 +102,7 @@ export default function Memberlist() {
         sortMembers =  currentMembers.sort((a, b) => a.id.localeCompare(b.id)).slice(indexOfFirstMember, indexOfLastMember);
       } 
 
-      const memberList = sortMembers.map((member) => <BS.Card key={member.id}>
+      const memberList = sortMembers.map((member) => <BS.Card key={member.id} className={localStorage.getItem("expandcards") ? "mb-3" : ""}>
       <ProfileCard
       member={member} 
       />
@@ -118,7 +118,7 @@ export default function Memberlist() {
       <BS.Form>
         <BS.InputGroup className="mb-3">
         <BS.Form.Control disabled placeholder='Page length:'/>
-          <BS.Form.Control as="select" defaultValue="25" onChange={e => {
+          <BS.Form.Control as="select" defaultValue={localStorage.getItem("expandcards") ? 10 : 25} onChange={e => {
             setMembersPerPage(e.target.value);
             setCurrentPage(1);
             }}>