diff --git a/docs/images/WelcomeToWebStorm.png b/docs/images/WelcomeToWebStorm.png
new file mode 100644
index 0000000..36c9b76
Binary files /dev/null and b/docs/images/WelcomeToWebStorm.png differ
diff --git a/src/js/components/Person/PersonSummaryHeader.jsx b/src/js/components/Person/PersonSummaryHeader.jsx
index d0fb52b..03eb840 100644
--- a/src/js/components/Person/PersonSummaryHeader.jsx
+++ b/src/js/components/Person/PersonSummaryHeader.jsx
@@ -9,17 +9,17 @@ const PersonSummaryHeader = () => {
   return (
     <OnePersonHeader>
       {/* Width (below) of this PersonHeaderCell comes from the combined widths of the first x columns in PersonMemberList */}
-      <PersonHeaderCell $largefont $titleCell cellwidth={200}>
+      <PersonHeaderCell $largefont $titleCell $cellwidth={200}>
         &nbsp;
       </PersonHeaderCell>
-      <PersonHeaderCell cellwidth={300}>
+      <PersonHeaderCell $cellwidth={300}>
         Location
       </PersonHeaderCell>
-      <PersonHeaderCell cellwidth={190}>
+      <PersonHeaderCell $cellwidth={190}>
         Title / Volunteering Love
       </PersonHeaderCell>
       {/* Edit icon */}
-      <PersonHeaderCell cellwidth={20} />
+      <PersonHeaderCell $cellwidth={20} />
     </OnePersonHeader>
   );
 };
@@ -37,9 +37,9 @@ const PersonHeaderCell = styled.div`
   height: 22px;
   font-size: ${(props) => (props?.$largefont ? '1.1em;' : '.8em;')};
   font-weight: ${(props) => (props?.$titleCell ? ';' : '550;')}
-  min-width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';')};
-  max-width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';')};
-  width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';')};
+  min-width: ${(props) => (props.$cellwidth ? `${props.$cellwidth}px;` : ';')};
+  max-width: ${(props) => (props.$cellwidth ? `${props.$cellwidth}px;` : ';')};
+  width: ${(props) => (props.$cellwidth ? `${props.$cellwidth}px;` : ';')};
   overflow: hidden;
   white-space: nowrap;
 `;
diff --git a/src/js/components/Person/PersonSummaryRow.jsx b/src/js/components/Person/PersonSummaryRow.jsx
index 019c673..2271fe4 100644
--- a/src/js/components/Person/PersonSummaryRow.jsx
+++ b/src/js/components/Person/PersonSummaryRow.jsx
@@ -54,7 +54,7 @@ const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => {
       {rowNumberForDisplay && (
         <PersonCell
           id={`index-personId-${person.personId}`}
-          cellwidth={15}
+          $cellwidth={15}
         >
           <GraySpan>
             {rowNumberForDisplay}
@@ -69,23 +69,22 @@ const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => {
           textDecoration: 'underline',
           color: DesignTokenColors.primary500,
         }}
-        // cellwidth="200"
-        cellwidth={200}
+        $cellwidth={200}
       >
         {/* {`${person.firstName} ${person.lastName}`} */}
         {getFullNamePreferredPerson(person)} {/* 2/6/25 currently if you save a first name preferred, it shows up here, but will not be searchable on add team member If you */}
       </PersonCell>
       <PersonCell
         id={`location-personId-${person.personId}`}
-        cellwidth={300}
-        $smallfont             // Fixed: $smallfont gets rid of error message, but doesn't get passed to PersonCell styled div
+        $cellwidth={300}
+        $smallfont
       >
         {person.location}
       </PersonCell>
       <PersonCell
         id={`jobTitle-personId-${person.personId}`}
-        cellwidth={225}
-        $smallestfont     // Fixed: $smallestfont gets rid of error message, but doesn't get passed to PersonCell styled div
+        $cellwidth={225}
+        $smallestfont
       >
         {person.jobTitle}
       </PersonCell>
@@ -94,15 +93,13 @@ const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => {
           id={`editPerson-personId-${person.personId}`}
           onClick={() => editPersonClick(hasEditRights)}
           style={{ cursor: 'pointer' }}
-          // cellwidth="20"
-          cellwidth={20}
+          $cellwidth={20}
         >
           <EditStyled />
         </PersonCell>
       ) : (
         <PersonCell
-          // cellwidth="20"
-          cellwidth={20}
+          $cellwidth={20}
         >
           &nbsp;
         </PersonCell>
@@ -114,14 +111,13 @@ const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => {
               id={`removeMember-personId-${person.personId}`}
               onClick={() => removeTeamMemberClick(person)}
               style={{ cursor: 'pointer' }}
-              cellwidth={20}
+              $cellwidth={20}
             >
               <DeleteStyled />
             </PersonCell>
           ) : (
             <PersonCell
-              // cellwidth="20"
-              cellwidth={20}
+              $cellwidth={20}
             >
               &nbsp;
             </PersonCell>
@@ -167,17 +163,15 @@ const fontSz = (smallfont, smallestfont) => {
   }
   return ';';
 };
-// ${(smallfont && !smallestfont) ? 'font-size: .9em;' : ''}
-// ${(smallestfont && !smallfont) ? 'font-size: .8em;' : ''}
 
 const PersonCell = styled.div`
   align-content: center;
   border-bottom: 1px solid #ccc;
   font-size: ${(props) => (fontSz(props?.$smallfont, props?.$smallestfont))}
   height: 22px;
-  min-width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';')};
-  max-width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';;')};
-  width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';')};
+  min-width: ${(props) => (props.$cellwidth ? `${props.$cellwidth}px;` : ';')};
+  max-width: ${(props) => (props.$cellwidth ? `${props.$cellwidth}px;` : ';;')};
+  width: ${(props) => (props.$cellwidth ? `${props.$cellwidth}px;` : ';')};
   overflow: hidden;
   white-space: nowrap;
 `;
diff --git a/src/js/components/Team/TeamHeader.jsx b/src/js/components/Team/TeamHeader.jsx
index 33348cf..a2ae227 100644
--- a/src/js/components/Team/TeamHeader.jsx
+++ b/src/js/components/Team/TeamHeader.jsx
@@ -30,24 +30,24 @@ const TeamHeader = ({ showHeaderLabels, showIcons, team }) => {
   return (
     <OneTeamHeader>
       {/* Width (below) of this TeamHeaderCell comes from the combined widths of the first x columns in TeamMemberList */}
-      <TeamHeaderCell cellwidth={215} $largefont $titlecell>
+      <TeamHeaderCell $cellwidth={215} $largefont $titlecell>
         {teamLocal && (
           <Link to={`/team-home/${teamLocal.id}`}>
             {teamLocal.teamName}
           </Link>
         )}
       </TeamHeaderCell>
-      <TeamHeaderCell cellwidth={300}>
+      <TeamHeaderCell $cellwidth={300}>
         {showHeaderLabels ? 'Location' : ''}
       </TeamHeaderCell>
-      <TeamHeaderCell cellwidth={225}>
+      <TeamHeaderCell $cellwidth={225}>
         {showHeaderLabels ? 'Title / Volunteering Love' : ''}
       </TeamHeaderCell>
       {/* Edit icon */}
       {showIcons && (
         <>
           {viewerCanSeeOrDo('canEditTeamAnyTeam', viewerAccessRights) && (
-            <TeamHeaderCell cellwidth={20} onClick={editTeamClick}>
+            <TeamHeaderCell $cellwidth={20} onClick={editTeamClick}>
               <EditStyled />
             </TeamHeaderCell>
           )}
@@ -91,9 +91,9 @@ const TeamHeaderCell = styled.div`
   font-size: ${(props) => (props?.$largefont ? '1.1em;' : '.8em;')};
   font-weight: ${(props) => (props?.$titleCell ? ';' : '550;')}
   height: 22px;
-  max-width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';')};
-  min-width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';')};
-  width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';')};
+  max-width: ${(props) => (props.$cellwidth ? `${ props.$cellwidth}px;` : ';')};
+  min-width: ${(props) => (props.$cellwidth ? `${ props.$cellwidth}px;` : ';')};
+  width: ${(props) => (props.$cellwidth ? `${ props.$cellwidth}px;` : ';')};
   overflow: hidden;
   white-space: nowrap;
 `;