diff --git a/src/data/ApplyData/allApps.ts b/src/data/ApplyData/allApps.ts
index 94109c38..9f926157 100644
--- a/src/data/ApplyData/allApps.ts
+++ b/src/data/ApplyData/allApps.ts
@@ -3,11 +3,9 @@ import Engagement from './engagement';
 import Hardware from './hardware';
 import Operations from './operations';
 import Software from './software';
-import type { Position } from './types';
+import type { ApplicationGroup, Position } from './types';
 
-type Team = 'clients' | 'hardware' | 'software' | 'operations' | 'management' | 'engagement';
-
-type ApplicationsByTeams = Record<Team, Position[]>;
+type ApplicationsByTeams = Record<ApplicationGroup, Position[]>;
 
 const applicationsByTeams: ApplicationsByTeams = {
   clients: Clients,
diff --git a/src/data/ApplyData/types.ts b/src/data/ApplyData/types.ts
index 6446a30e..7a14f36b 100644
--- a/src/data/ApplyData/types.ts
+++ b/src/data/ApplyData/types.ts
@@ -1,4 +1,8 @@
-type Category = 'Clients' | 'Engagement' | 'Hardware' | 'Operations' | 'Software';
+import type { Team } from '../teams';
+
+export type ApplicationGroup = Team | 'clients';
+
+type Category = Capitalize<ApplicationGroup>;
 
 export type Position = {
   positionTitle: string;
diff --git a/src/data/teamPageDetails.ts b/src/data/teamPageDetails.ts
index a1271388..1005dcde 100644
--- a/src/data/teamPageDetails.ts
+++ b/src/data/teamPageDetails.ts
@@ -13,9 +13,18 @@ import OperationsLargePicture from '../assets/images/TeamsPageImages/TeamsPagePH
 import SoftwareLargePicture from '../assets/images/TeamsPageImages/TeamsPagePH3.png';
 import HardwareLargePicture from '../assets/images/TeamsPageImages/TeamsPagePH4.png';
 import EngagementLargePicture from '../assets/images/TeamsPageImages/TeamsPagePH5.png';
+import type { Team } from './teams';
 
 // yellow - "#FFBF3C"
-const TeamPageDetails = [
+type TeamPageDetail = {
+  name: Capitalize<Team>;
+  color: string;
+  activeIcon: string;
+  inactiveIcon: string;
+  largePic: string;
+};
+
+const TeamPageDetails: TeamPageDetail[] = [
   {
     name: 'Management',
     color: '#187DFF',
diff --git a/src/data/teams.ts b/src/data/teams.ts
new file mode 100644
index 00000000..1506e262
--- /dev/null
+++ b/src/data/teams.ts
@@ -0,0 +1,6 @@
+// The order of these is how they appear on the management expanded teams page
+export const TEAMS = ['management', 'hardware', 'software', 'operations', 'engagement'] as const;
+
+export type Team = (typeof TEAMS)[number];
+
+export const isTeam = (value: string | undefined): value is Team => TEAMS.some(team => team === value);
diff --git a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/JSONFiles/ExpandedTeamsJSON.ts b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/JSONFiles/ExpandedTeamsJSON.ts
index e3ee60c9..85384937 100644
--- a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/JSONFiles/ExpandedTeamsJSON.ts
+++ b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/JSONFiles/ExpandedTeamsJSON.ts
@@ -9,9 +9,11 @@ import Management2 from '../../../../../assets/images/TeamsPageImages/management
 import Operations1 from '../../../../../assets/images/TeamsPageImages/operations1.jpg';
 import Operations2 from '../../../../../assets/images/TeamsPageImages/operations2.jpg';
 import TeamsStock from '../../../../../assets/images/TeamsPageImages/TeamsStockPhoto.svg';
+import type { Team } from '../../../../../data/teams';
+import type { ExpandedTeam } from './types';
 
 // What Youll learn could probably be added here?
-export const ExpandedTeamsJSON = {
+export const ExpandedTeamsJSON: Record<Team, ExpandedTeam> = {
   management: {
     abbv: 'MNGMNT',
     color: '#187DFF',
diff --git a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/JSONFiles/RolesJSON.ts b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/JSONFiles/RolesJSON.ts
index eecf855b..9e120ac3 100644
--- a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/JSONFiles/RolesJSON.ts
+++ b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/JSONFiles/RolesJSON.ts
@@ -1,7 +1,7 @@
-// The Order of these is how it will appear on the management expanded teams page
-export const Teams = ['management', 'hardware', 'software', 'operations', 'engagement'] as const;
+import type { Team } from '../../../../../data/teams';
+import type { TeamRoles } from './types';
 
-export const RolesJSON = {
+export const RolesJSON: Record<Team, TeamRoles> = {
   management: {
     Director: {
       header: 'Executive Director',
diff --git a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/JSONFiles/WhatYouLearnJSON.ts b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/JSONFiles/WhatYouLearnJSON.ts
index 84c90754..c3c67696 100644
--- a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/JSONFiles/WhatYouLearnJSON.ts
+++ b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/JSONFiles/WhatYouLearnJSON.ts
@@ -1,6 +1,8 @@
 import TeamsStock from '../../../../../assets/images/TeamsPageImages/TeamsStockPhoto.svg';
+import type { Team } from '../../../../../data/teams';
+import type { WhatYouLearnTeam } from './types';
 
-export const WhatYouLearnJSON = {
+export const WhatYouLearnJSON: Partial<Record<Team, WhatYouLearnTeam>> = {
   software: {
     about: [
       {
diff --git a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/JSONFiles/types.ts b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/JSONFiles/types.ts
new file mode 100644
index 00000000..6cc2af8c
--- /dev/null
+++ b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/JSONFiles/types.ts
@@ -0,0 +1,46 @@
+export type TeamSection = {
+  header: string;
+  body: string;
+  image: string;
+  invert?: boolean;
+};
+
+export type FeaturedItem = {
+  description: string;
+  image: string;
+  invert: boolean;
+  button: string;
+};
+
+export type ExpandedTeam = {
+  abbv: string;
+  color: string;
+  about: TeamSection[];
+  featured?: {
+    header: string;
+    items: FeaturedItem[];
+  };
+};
+
+export type MemberRole = {
+  subheader: string;
+  desc: string;
+};
+
+export type RoleGroup = {
+  header: string;
+  lead?: MemberRole;
+  members: MemberRole[];
+};
+
+export type TeamRoles = {
+  Director: {
+    header: string;
+    desc: string;
+  };
+  Roles?: RoleGroup[];
+};
+
+export type WhatYouLearnTeam = {
+  about: TeamSection[];
+};
diff --git a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/OurRoles.jsx b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/OurRoles.jsx
deleted file mode 100644
index 64dceb5b..00000000
--- a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/OurRoles.jsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import useWebsite from '../../../../shared/useWebsite'
-import RoleContainer from '../CommonTeam/RoleContainer'
-import { ExpandedTeamsJSON } from './JSONFiles/ExpandedTeamsJSON'
-import { RolesJSON } from './JSONFiles/RolesJSON'
-import './style.css'
-
-export function OurRoles({ children }) {
-  return (
-    <div className='roles-section'>
-      <div className='roles-title paragraph-title'>OUR ROLES</div>
-      <div className='roles-container'>{children}</div>
-    </div>
-  )
-}
-
-export function Roles({ team, children }) {
-  const isWebsite = useWebsite()
-  const isBigScreen = !window.matchMedia('(max-device-width: 650px)').matches
-  const mobile = !isBigScreen || !isWebsite
-
-  return (
-    <RoleContainer color={ExpandedTeamsJSON[team].color}>
-      <div>
-        <div
-          className={`role-name ${
-            children
-              ? mobile
-                ? 'paragraph-title-mobile'
-                : 'paragraph-title'
-              : mobile
-              ? 'paragraph-subtitle-mobile'
-              : 'paragraph-subtitle'
-          }`}
-        >
-          {children
-            ? RolesJSON[team].Director.header.toUpperCase()
-            : RolesJSON[team].Director.header}
-        </div>
-        <div
-          className={`role-desc ${
-            mobile ? 'paragraph-text-mobile' : 'paragraph-text'
-          }`}
-          style={{ marginBottom: '4vh' }}
-        >
-          {RolesJSON[team].Director.desc}
-        </div>
-      </div>
-      {children}
-    </RoleContainer>
-  )
-}
-
-export function Members({ team }) {
-  const isWebsite = useWebsite()
-  const isBigScreen = !window.matchMedia('(max-device-width: 650px)').matches
-  const mobile = !isBigScreen || !isWebsite
-  return (
-    RolesJSON[team].Roles &&
-    RolesJSON[team].Roles.map((role, index) => (
-      <>
-        <div
-          className={`role-name ${
-            mobile ? 'paragraph-title-mobile' : 'paragraph-title'
-          }`}
-        >
-          {role.header.toUpperCase()}
-        </div>
-        <MembersContainer role={role} mobile={mobile} />
-      </>
-    ))
-  )
-}
-
-function MembersContainer({ role, mobile }) {
-  return (
-    <div>
-      {role.lead && (
-        <div>
-          <div
-            className={`role-name ${
-              mobile ? 'paragraph-subtitle-mobile' : 'paragraph-subtitle'
-            }`}
-          >
-            {role.lead.subheader}
-          </div>
-          <div
-            className={`role-desc ${
-              mobile ? 'paragraph-text-mobile' : 'paragraph-text'
-            }`}
-          >
-            {role.lead.desc}
-          </div>
-        </div>
-      )}
-      <div style={{ display: 'flex', flexDirection: 'column' }}>
-        {role.members.map((member, index) => {
-          return (
-            index % 2 === 0 && (
-              <div
-                style={{
-                  display: `${mobile ? '' : 'flex'}`,
-                  flexDirection: 'row'
-                }}
-              >
-                <div
-                  style={{
-                    marginRight: '2vw',
-                    marginTop: '2vh'
-                  }}
-                >
-                  <div
-                    className={`role-name ${
-                      mobile
-                        ? 'paragraph-subtitle-mobile'
-                        : 'paragraph-subtitle'
-                    }`}
-                  >
-                    {member.subheader}
-                  </div>
-                  <div
-                    className={`role-desc ${
-                      mobile ? 'paragraph-text-mobile' : 'paragraph-text'
-                    }`}
-                  >
-                    {member.desc}
-                  </div>
-                </div>
-                {index + 1 < role.members.length ? (
-                  <div
-                    style={{
-                      marginTop: '2vh'
-                    }}
-                  >
-                    <div
-                      className={`role-name ${
-                        mobile
-                          ? 'paragraph-subtitle-mobile'
-                          : 'paragraph-subtitle'
-                      }`}
-                    >
-                      {role.members[index + 1].subheader}
-                    </div>
-                    <div
-                      className={`role-desc ${
-                        mobile ? 'paragraph-text-mobile' : 'paragraph-text'
-                      }`}
-                    >
-                      {role.members[index + 1].desc}
-                    </div>
-                  </div>
-                ) : index !== 0 ? (
-                  <div style={{ marginLeft: '40vw' }}></div>
-                ) : (
-                  <></>
-                )}
-              </div>
-            )
-          )
-        })}
-      </div>
-    </div>
-  )
-}
diff --git a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/OurRoles.tsx b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/OurRoles.tsx
new file mode 100644
index 00000000..e5bb47a7
--- /dev/null
+++ b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/OurRoles.tsx
@@ -0,0 +1,148 @@
+import type { ReactNode } from 'react';
+
+import type { Team } from '../../../../data/teams';
+import useWebsite from '../../../../shared/useWebsite';
+import RoleContainer from '../CommonTeam/RoleContainer';
+import { ExpandedTeamsJSON } from './JSONFiles/ExpandedTeamsJSON';
+import { RolesJSON } from './JSONFiles/RolesJSON';
+import './style.css';
+import type { RoleGroup } from './JSONFiles/types';
+
+type OurRolesProps = {
+  children: ReactNode;
+};
+
+type RolesProps = {
+  team: Team;
+  children?: ReactNode;
+};
+
+type MembersProps = {
+  team: Team;
+};
+
+type MembersContainerProps = {
+  role: RoleGroup;
+  mobile: boolean;
+};
+
+export function OurRoles({ children }: OurRolesProps) {
+  return (
+    <div className="roles-section">
+      <div className="roles-title paragraph-title">OUR ROLES</div>
+      <div className="roles-container">{children}</div>
+    </div>
+  );
+}
+
+export function Roles({ team, children }: RolesProps) {
+  const isWebsite = useWebsite();
+  const isBigScreen = !window.matchMedia('(max-device-width: 650px)').matches;
+  const mobile = !isBigScreen || !isWebsite;
+
+  return (
+    <RoleContainer color={ExpandedTeamsJSON[team].color}>
+      <div>
+        <div
+          className={`role-name ${
+            children
+              ? mobile
+                ? 'paragraph-title-mobile'
+                : 'paragraph-title'
+              : mobile
+                ? 'paragraph-subtitle-mobile'
+                : 'paragraph-subtitle'
+          }`}
+        >
+          {children ? RolesJSON[team].Director.header.toUpperCase() : RolesJSON[team].Director.header}
+        </div>
+        <div
+          className={`role-desc ${mobile ? 'paragraph-text-mobile' : 'paragraph-text'}`}
+          style={{ marginBottom: '4vh' }}
+        >
+          {RolesJSON[team].Director.desc}
+        </div>
+      </div>
+      {children}
+    </RoleContainer>
+  );
+}
+
+export function Members({ team }: MembersProps) {
+  const isWebsite = useWebsite();
+  const isBigScreen = !window.matchMedia('(max-device-width: 650px)').matches;
+  const mobile = !isBigScreen || !isWebsite;
+
+  return (
+    RolesJSON[team].Roles &&
+    RolesJSON[team].Roles.map((role, index) => (
+      <>
+        <div className={`role-name ${mobile ? 'paragraph-title-mobile' : 'paragraph-title'}`}>
+          {role.header.toUpperCase()}
+        </div>
+        <MembersContainer role={role} mobile={mobile} />
+      </>
+    ))
+  );
+}
+
+function MembersContainer({ role, mobile }: MembersContainerProps) {
+  return (
+    <div>
+      {role.lead && (
+        <div>
+          <div className={`role-name ${mobile ? 'paragraph-subtitle-mobile' : 'paragraph-subtitle'}`}>
+            {role.lead.subheader}
+          </div>
+          <div className={`role-desc ${mobile ? 'paragraph-text-mobile' : 'paragraph-text'}`}>{role.lead.desc}</div>
+        </div>
+      )}
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {role.members.map((member, index) => {
+          return (
+            index % 2 === 0 && (
+              <div
+                style={{
+                  display: `${mobile ? '' : 'flex'}`,
+                  flexDirection: 'row',
+                }}
+              >
+                <div
+                  style={{
+                    marginRight: '2vw',
+                    marginTop: '2vh',
+                  }}
+                >
+                  <div className={`role-name ${mobile ? 'paragraph-subtitle-mobile' : 'paragraph-subtitle'}`}>
+                    {member.subheader}
+                  </div>
+                  <div className={`role-desc ${mobile ? 'paragraph-text-mobile' : 'paragraph-text'}`}>
+                    {member.desc}
+                  </div>
+                </div>
+                {index + 1 < role.members.length ? (
+                  <div
+                    style={{
+                      marginTop: '2vh',
+                    }}
+                  >
+                    <div className={`role-name ${mobile ? 'paragraph-subtitle-mobile' : 'paragraph-subtitle'}`}>
+                      {role.members[index + 1].subheader}
+                    </div>
+                    <div className={`role-desc ${mobile ? 'paragraph-text-mobile' : 'paragraph-text'}`}>
+                      {role.members[index + 1].desc}
+                    </div>
+                  </div>
+                ) : index !== 0 ? (
+                  <div style={{ marginLeft: '40vw' }}></div>
+                ) : (
+                  <></>
+                )}
+              </div>
+            )
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/RoleContainer.jsx b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/RoleContainer.tsx
similarity index 52%
rename from src/pages/TeamsPage/ExpandedTeams/CommonTeam/RoleContainer.jsx
rename to src/pages/TeamsPage/ExpandedTeams/CommonTeam/RoleContainer.tsx
index b4a82386..ec74fffd 100644
--- a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/RoleContainer.jsx
+++ b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/RoleContainer.tsx
@@ -1,12 +1,20 @@
-import React from "react";
+import React from 'react';
+import type { ReactNode } from 'react';
 
-export default function RoleContainer({ children, color }) {
-  const childrenWithProps = React.Children.map(children, (child) => {
+type RoleContainerProps = {
+  children: ReactNode;
+  color: string;
+};
+
+export default function RoleContainer({ children, color }: RoleContainerProps) {
+  const childrenWithProps = React.Children.map(children, child => {
     if (React.isValidElement(child)) {
       return React.cloneElement(child);
     }
+
     return child;
   });
+
   return (
     <div className="row-block">
       <div className="roles-banner-color" style={{ background: color }}></div>
diff --git a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/SocialIcons.jsx b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/SocialIcons.tsx
similarity index 53%
rename from src/pages/TeamsPage/ExpandedTeams/CommonTeam/SocialIcons.jsx
rename to src/pages/TeamsPage/ExpandedTeams/CommonTeam/SocialIcons.tsx
index 87b810a3..6e2bc965 100644
--- a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/SocialIcons.jsx
+++ b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/SocialIcons.tsx
@@ -1,46 +1,40 @@
-import React from 'react'
+import React from 'react';
+import { Col, Row } from 'react-bootstrap';
 
-import { Col, Row } from 'react-bootstrap'
-import './footerStyle.css'
+import './footerStyle.css';
+import { SocialIcon, socialIcons } from '../../../../component/SocialIcon';
 
-import { SocialIcon, socialIcons } from '../../../../component/SocialIcon'
+type SocialIconsProps = {
+  mobile: boolean;
+};
 
-export default function SocialIcons({ mobile }) {
+export default function SocialIcons({ mobile }: SocialIconsProps) {
   return !mobile ? (
-    <div className='social-icons-website'>
+    <div className="social-icons-website">
       {socialIcons.map((row, index) => (
-        <Col key={index} className='website-col'>
+        <Col key={index} className="website-col">
           {row.map((icon, index) => (
             <>
-              <SocialIcon
-                key={index}
-                href={icon.href}
-                imgSrc={icon.imgSrc}
-                className={'website-col'}
-              />
+              <SocialIcon key={index} href={icon.href} imgSrc={icon.imgSrc} className={'website-col'} />
             </>
           ))}
         </Col>
       ))}
     </div>
   ) : (
-    <div className='social-icons-mobile'>
+    <div className="social-icons-mobile">
       {socialIcons.map((row, index) => (
         <Row key={index}>
           {row.map((icon, index) => (
             <>
               <SocialIcon
-                className={
-                  icon.href.includes('instagram')
-                    ? 'teams-insta-icon'
-                    : 'teams-icon'
-                }
+                className={icon.href.includes('instagram') ? 'teams-insta-icon' : 'teams-icon'}
                 key={index}
                 href={icon.href}
                 imgSrc={icon.imgSrc}
               />
               {icon.href.includes('instagram') ? (
-                <Col className='icon'>
+                <Col className="icon">
                   {/* <a>
                     <div className='social-media' />
                   </a> */}
@@ -51,5 +45,5 @@ export default function SocialIcons({ mobile }) {
         </Row>
       ))}
     </div>
-  )
+  );
 }
diff --git a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/TeamPageFooter.jsx b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/TeamPageFooter.tsx
similarity index 55%
rename from src/pages/TeamsPage/ExpandedTeams/CommonTeam/TeamPageFooter.jsx
rename to src/pages/TeamsPage/ExpandedTeams/CommonTeam/TeamPageFooter.tsx
index a486eb0f..edd00e23 100644
--- a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/TeamPageFooter.jsx
+++ b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/TeamPageFooter.tsx
@@ -1,157 +1,163 @@
-import React from 'react'
-import { Container } from 'react-bootstrap'
-import Arrow from '../../../../assets/images/projectspage/arrowbutton.svg'
-import ShadowedButton from '../../../../component/ShadowedButton'
-import './footerStyle.css'
-import GenerateLogo from '../../../../assets/images/landingpage-v2/footerlogo.svg'
-import { useNavigate } from 'react-router-dom'
-import useWebsite from '../../../../shared/useWebsite'
-import SocialIcons from './SocialIcons'
-
-const pages = [
+import React from 'react';
+import { Container } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+
+import GenerateLogo from '../../../../assets/images/landingpage-v2/footerlogo.svg';
+import './footerStyle.css';
+import Arrow from '../../../../assets/images/projectspage/arrowbutton.svg';
+import ShadowedButton from '../../../../component/ShadowedButton';
+import useWebsite from '../../../../shared/useWebsite';
+import SocialIcons from './SocialIcons';
+
+type FooterPage = {
+  name: string;
+  link: string;
+  disabled?: boolean;
+};
+
+type FooterLinkProps = {
+  page: FooterPage;
+  currentPage: string;
+};
+
+type TitleCardProps = {
+  title: string;
+  color: string;
+  mobile: boolean;
+};
+
+type TeamPageFooterProps = {
+  color: string;
+  page?: string;
+};
+
+const pages: FooterPage[] = [
   { name: 'Generate', link: '/' },
   { name: 'Apply', link: '/apply' },
   { name: 'About', link: '/about' },
   { name: 'Culture', link: '/culture' },
   { name: 'Teams', link: '/teams' },
   // { name: "People", link: "/", disabled: true },
-  { name: 'Projects', link: '/projects' }
-]
-const pagesSplit = [
+  { name: 'Projects', link: '/projects' },
+];
+
+const pagesSplit: FooterPage[][] = [
   [
     { name: 'Generate', link: '/' },
     { name: 'Apply', link: '/apply' },
-    { name: 'About', link: '/about' }
+    { name: 'About', link: '/about' },
   ],
   [
     { name: 'Culture', link: '/culture' },
     { name: 'Teams', link: '/teams' },
     // { name: "People", link: "/", disabled: true },
-    { name: 'Projects', link: '/projects' }
-  ]
-]
+    { name: 'Projects', link: '/projects' },
+  ],
+];
 
-const FooterLink = ({ page, currentPage }) => {
-  const { name, link, disabled } = page
-  const currentURI = window.location.pathname.split('/').at(1)
-  var isCurrentPage = `/${currentURI}`.includes(link) && link !== '/'
+const FooterLink = ({ page, currentPage }: FooterLinkProps) => {
+  const { name, link, disabled } = page;
+  const currentURI = window.location.pathname.split('/').at(1);
+  var isCurrentPage = `/${currentURI}`.includes(link) && link !== '/';
 
   if (currentURI === 'case-study' && link === '/projects') {
-    isCurrentPage = true
+    isCurrentPage = true;
   }
 
   return (
     <div>
       {disabled ? (
-        <a className='footer-link-text disabled-footer-text' href={link}>
+        <a className="footer-link-text disabled-footer-text" href={link}>
           {name}
         </a>
       ) : isCurrentPage ? (
         <b>
-          <a href={link} className='footer-link-bold'>
+          <a href={link} className="footer-link-bold">
             {name} {'<'}
           </a>
         </b>
       ) : (
-        <a className='footer-link-text' href={link}>
+        <a className="footer-link-text" href={link}>
           {name}
         </a>
       )}
     </div>
-  )
-}
+  );
+};
 
 function FooterLinks() {
-  const currentPageUrl = window.location.href
-  const isWebsite = useWebsite()
-  const isBigScreen = !window.matchMedia('(max-device-width: 650px)').matches
-  const mobile = !isBigScreen || !isWebsite
+  const currentPageUrl = window.location.href;
+  const isWebsite = useWebsite();
+  const isBigScreen = !window.matchMedia('(max-device-width: 650px)').matches;
+  const mobile = !isBigScreen || !isWebsite;
+
   return mobile ? (
-    <span className='footer-pages'>
+    <span className="footer-pages">
       {pages.map((page, index) => (
-        <FooterLink
-          key={index}
-          page={page}
-          currentPage={currentPageUrl.substring(currentPageUrl.indexOf('/'))}
-        />
+        <FooterLink key={index} page={page} currentPage={currentPageUrl.substring(currentPageUrl.indexOf('/'))} />
       ))}
     </span>
   ) : (
     <div style={{ display: 'flex', flexDirection: 'row' }}>
-      <span className='footer-pages'>
+      <span className="footer-pages">
         {pagesSplit[0].map((page, index) => (
-          <FooterLink
-            key={index}
-            page={page}
-            currentPage={currentPageUrl.substring(
-              currentPageUrl.lastIndexOf('/')
-            )}
-          />
+          <FooterLink key={index} page={page} currentPage={currentPageUrl.substring(currentPageUrl.lastIndexOf('/'))} />
         ))}
       </span>
-      <span className='footer-pages'>
+      <span className="footer-pages">
         {pagesSplit[1].map((page, index) => (
-          <FooterLink
-            key={index}
-            page={page}
-            currentPage={currentPageUrl.substring(
-              currentPageUrl.lastIndexOf('/')
-            )}
-          />
+          <FooterLink key={index} page={page} currentPage={currentPageUrl.substring(currentPageUrl.lastIndexOf('/'))} />
         ))}
       </span>
     </div>
-  )
+  );
 }
 
-function TitleCard({ title, color, mobile }) {
+function TitleCard({ title, color, mobile }: TitleCardProps) {
   return (
     <div style={{ marginTop: '6vw' }} className={`${mobile ? 'spacing' : ''}`}>
-      <div className='title'>
-        <div style={{ marginTop: '-10%', marginBottom: '-10%', color: color }}>
-          {title}
-        </div>
+      <div className="title">
+        <div style={{ marginTop: '-10%', marginBottom: '-10%', color: color }}>{title}</div>
       </div>
     </div>
-  )
+  );
 }
 
-function TeamPageFooter({ color, page }) {
-  const navigate = useNavigate()
+function TeamPageFooter({ color, page }: TeamPageFooterProps) {
+  const navigate = useNavigate();
+
   const handleOnClick = () => {
-    window.scrollTo(0, 0)
-    navigate('/')
-  }
+    window.scrollTo(0, 0);
+    navigate('/');
+  };
 
   const handleScrollClick = () => {
-    window.scrollTo(0, 0)
-  }
+    window.scrollTo(0, 0);
+  };
 
-  const isWebsite = useWebsite()
-  const isBigScreen = !window.matchMedia('(max-device-width: 650px)').matches
-  const mobile = !isBigScreen || !isWebsite
+  const isWebsite = useWebsite();
+  const isBigScreen = !window.matchMedia('(max-device-width: 650px)').matches;
+  const mobile = !isBigScreen || !isWebsite;
 
   return (
-    <Container className='footer-container' style={{ backgroundColor: color }}>
+    <Container className="footer-container" style={{ backgroundColor: color }}>
       <div className={`${mobile ? 'divider-col' : 'divider-row'}`}>
         <div className={`${mobile ? 'top-bar-mobile' : 'left-bar'}`}>
           <div
             className={`${
-              mobile
-                ? 'd-flex flex-column flex-direction-start'
-                : 'w-100 d-flex flex-column justify-content-between'
+              mobile ? 'd-flex flex-column flex-direction-start' : 'w-100 d-flex flex-column justify-content-between'
             }`}
           >
-            <div className='sherm'>
+            <div className="sherm">
               <ShadowedButton
-                fillColor='white'
+                fillColor="white"
                 right={true}
                 text={
                   <img
                     style={{ marginTop: '10px' }}
                     width={!isBigScreen ? '200vw' : '100vw'}
                     src={GenerateLogo}
-                    alt='matt was here'
+                    alt="matt was here"
                   />
                 }
                 onClick={handleOnClick}
@@ -160,22 +166,22 @@ function TeamPageFooter({ color, page }) {
           </div>
           {mobile ? (
             <ShadowedButton
-              className='up-icon-mobile'
+              className="up-icon-mobile"
               xPad={mobile ? '3vw' : '2vw'}
               yPad={mobile ? '2vw' : '2vw'}
-              textColor='white'
+              textColor="white"
               text={<img width={'40vh'} src={Arrow} alt="arrow up" />}
               onClick={handleScrollClick}
             />
           ) : (
-            <span className='footer-links'>
+            <span className="footer-links">
               <FooterLinks />
             </span>
           )}
         </div>
         <div className={`${mobile ? 'bot-box-mobile' : 'right-box'}`}>
           {mobile ? (
-            <span className='footer-links'>
+            <span className="footer-links">
               <FooterLinks />
             </span>
           ) : (
@@ -185,10 +191,10 @@ function TeamPageFooter({ color, page }) {
             <SocialIcons mobile={mobile} />
           ) : (
             <ShadowedButton
-              className='up-icon'
+              className="up-icon"
               xPad={mobile ? '15vw' : '2vw'}
               yPad={mobile ? '6vw' : '2vw'}
-              textColor='white'
+              textColor="white"
               text={<img width={'40vh'} src={Arrow} alt="arrow-up" />}
               onClick={handleScrollClick}
             />
@@ -197,7 +203,7 @@ function TeamPageFooter({ color, page }) {
       </div>
       {page && <TitleCard color={color} title={page} mobile={mobile} />}
     </Container>
-  )
+  );
 }
 
-export default TeamPageFooter
+export default TeamPageFooter;
diff --git a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/WhatYouLearn.jsx b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/WhatYouLearn.jsx
deleted file mode 100644
index f4a18ed0..00000000
--- a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/WhatYouLearn.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-import './style.css'
-import useWebsite from '../../../../shared/useWebsite'
-
-export default function TextRow({ title, description, picture, reverse }) {
-  const isWebsite = useWebsite()
-  const isBigScreen = !window.matchMedia('(max-device-width: 650px)').matches
-  const mobile = !isBigScreen || !isWebsite
-  return (
-    <div className={`${mobile ? 'text-row-mobile' : 'text-row'}`}>
-      {(reverse || mobile) && (
-        <img src={picture} className='info-pic' alt=''></img>
-      )}
-      <div className={`${mobile ? 'info-section-mobile' : 'info-section'}`}>
-        <div
-          className={`${mobile ? 'paragraph-title-mobile' : 'paragraph-subtitle'}`}
-        >
-          {title}
-        </div>
-        <div
-          className={`${mobile ? 'paragraph-text-mobile' : 'paragraph-text'}`}
-        >
-          {description}
-        </div>
-      </div>
-      {!reverse && !mobile && (
-        <img src={picture} className='info-pic' alt=''></img>
-      )}
-    </div>
-  )
-}
-
diff --git a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/WhatYouLearn.tsx b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/WhatYouLearn.tsx
new file mode 100644
index 00000000..4cd3b19b
--- /dev/null
+++ b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/WhatYouLearn.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import './style.css';
+import useWebsite from '../../../../shared/useWebsite';
+
+type TextRowProps = {
+  title: string;
+  description: string;
+  picture: string;
+  reverse?: boolean;
+};
+
+export default function TextRow({ title, description, picture, reverse }: TextRowProps) {
+  const isWebsite = useWebsite();
+  const isBigScreen = !window.matchMedia('(max-device-width: 650px)').matches;
+  const mobile = !isBigScreen || !isWebsite;
+
+  return (
+    <div className={`${mobile ? 'text-row-mobile' : 'text-row'}`}>
+      {(reverse || mobile) && <img src={picture} className="info-pic" alt=""></img>}
+      <div className={`${mobile ? 'info-section-mobile' : 'info-section'}`}>
+        <div className={`${mobile ? 'paragraph-title-mobile' : 'paragraph-subtitle'}`}>{title}</div>
+        <div className={`${mobile ? 'paragraph-text-mobile' : 'paragraph-text'}`}>{description}</div>
+      </div>
+      {!reverse && !mobile && <img src={picture} className="info-pic" alt=""></img>}
+    </div>
+  );
+}
diff --git a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/WhatYouLearnContainer.jsx b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/WhatYouLearnContainer.jsx
deleted file mode 100644
index 7efddae7..00000000
--- a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/WhatYouLearnContainer.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-
-import React from 'react'
-import './style.css'
-import { WhatYouLearnJSON } from './JSONFiles/WhatYouLearnJSON'
-import WhatYouLearn from './WhatYouLearn'
- 
-
-export function WhatYouLearnContainer() {
-  const team = window.location.pathname.split('/').pop()
-  return (
-    <div className='roles-section'>
-      <div className='roles-title paragraph-title'>WHAT YOU'LL LEARN</div>
-       <WhatYouWillLearn team={team} />
-       </div>
-  )
-}
-
-function WhatYouWillLearn({ team }) {
-  const teamTopSection = WhatYouLearnJSON[team]
-  return (
-    <>
-      {teamTopSection.about.map((section, index) => (
-        <WhatYouLearn
-          key={index}
-          title={section.header}
-          description={section.body}
-          picture={section.image}
-          reverse={section.invert}
-        />
-      ))}
-    </>
-  )
-}
diff --git a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/WhatYouLearnContainer.tsx b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/WhatYouLearnContainer.tsx
new file mode 100644
index 00000000..0e11b1a9
--- /dev/null
+++ b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/WhatYouLearnContainer.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+import './style.css';
+import type { Team } from '../../../../data/teams';
+import { WhatYouLearnJSON } from './JSONFiles/WhatYouLearnJSON';
+import WhatYouLearn from './WhatYouLearn';
+
+type WhatYouLearnProps = {
+  team: Team;
+};
+
+export function WhatYouLearnContainer({ team }: WhatYouLearnProps) {
+  return (
+    <div className="roles-section">
+      <div className="roles-title paragraph-title">WHAT YOU'LL LEARN</div>
+      <WhatYouWillLearn team={team} />
+    </div>
+  );
+}
+
+function WhatYouWillLearn({ team }: WhatYouLearnProps) {
+  const teamTopSection = WhatYouLearnJSON[team];
+
+  if (!teamTopSection) {
+    return null;
+  }
+
+  return (
+    <>
+      {teamTopSection.about.map((section, index) => (
+        <WhatYouLearn
+          key={index}
+          title={section.header}
+          description={section.body}
+          picture={section.image}
+          reverse={section.invert}
+        />
+      ))}
+    </>
+  );
+}
diff --git a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/featureTextRow.jsx b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/featureTextRow.tsx
similarity index 87%
rename from src/pages/TeamsPage/ExpandedTeams/CommonTeam/featureTextRow.jsx
rename to src/pages/TeamsPage/ExpandedTeams/CommonTeam/featureTextRow.tsx
index 7a2f5e32..895fd4fe 100644
--- a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/featureTextRow.jsx
+++ b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/featureTextRow.tsx
@@ -3,13 +3,21 @@ import { useNavigate } from 'react-router-dom';
 import ShadowedButton from '../../../../component/ShadowedButton';
 import useWebsite from '../../../../shared/useWebsite';
 import './style.css';
-export default function FeatureTextRow({ description, picture, reverse, button }) {
+
+type FeatureTextRowProps = {
+  description: string;
+  picture: string;
+  reverse: boolean;
+  button: string;
+};
+
+export default function FeatureTextRow({ description, picture, reverse, button }: FeatureTextRowProps) {
   const isWebsite = useWebsite();
   const isBigScreen = !window.matchMedia('(max-device-width: 650px)').matches;
   const mobile = !isBigScreen || !isWebsite;
   const navigate = useNavigate();
 
-  const handleOnClick = link => {
+  const handleOnClick = (link: string) => {
     navigate(link);
   };
 
diff --git a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/textRow.jsx b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/textRow.jsx
deleted file mode 100644
index f7779961..00000000
--- a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/textRow.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import './style.css'
-import useWebsite from '../../../../shared/useWebsite'
-
-export default function TextRow({ title, description, picture, reverse }) {
-  const isWebsite = useWebsite()
-  const isBigScreen = !window.matchMedia('(max-device-width: 650px)').matches
-  const mobile = !isBigScreen || !isWebsite
-  return (
-    <div className={`${mobile ? 'text-row-mobile' : 'text-row'}`}>
-      {(reverse || mobile) && (
-        <img src={picture} className='common-info-pic' alt=''></img>
-      )}
-      <div className={`${mobile ? 'info-section-mobile' : 'info-section'}`}>
-        <div
-          className={`${mobile ? 'paragraph-title-mobile' : 'paragraph-title'}`}
-        >
-          {title}
-        </div>
-        <div
-          className={`${mobile ? 'paragraph-text-mobile' : 'paragraph-text'}`}
-        >
-          {description}
-        </div>
-      </div>
-      {!reverse && !mobile && (
-        <img src={picture} className='common-info-pic ' alt=''></img>
-      )}
-    </div>
-  )
-}
diff --git a/src/pages/TeamsPage/ExpandedTeams/CommonTeam/textRow.tsx b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/textRow.tsx
new file mode 100644
index 00000000..4f86f06a
--- /dev/null
+++ b/src/pages/TeamsPage/ExpandedTeams/CommonTeam/textRow.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import './style.css';
+import useWebsite from '../../../../shared/useWebsite';
+
+type TextRowProps = {
+  title: string;
+  description: string;
+  picture: string;
+  reverse?: boolean;
+};
+
+export default function TextRow({ title, description, picture, reverse }: TextRowProps) {
+  const isWebsite = useWebsite();
+  const isBigScreen = !window.matchMedia('(max-device-width: 650px)').matches;
+  const mobile = !isBigScreen || !isWebsite;
+
+  return (
+    <div className={`${mobile ? 'text-row-mobile' : 'text-row'}`}>
+      {(reverse || mobile) && <img src={picture} className="common-info-pic" alt=""></img>}
+      <div className={`${mobile ? 'info-section-mobile' : 'info-section'}`}>
+        <div className={`${mobile ? 'paragraph-title-mobile' : 'paragraph-title'}`}>{title}</div>
+        <div className={`${mobile ? 'paragraph-text-mobile' : 'paragraph-text'}`}>{description}</div>
+      </div>
+      {!reverse && !mobile && <img src={picture} className="common-info-pic " alt=""></img>}
+    </div>
+  );
+}
diff --git a/src/pages/TeamsPage/ExpandedTeams/Engagement/index.jsx b/src/pages/TeamsPage/ExpandedTeams/Engagement/index.jsx
deleted file mode 100644
index 814d46e2..00000000
--- a/src/pages/TeamsPage/ExpandedTeams/Engagement/index.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Members, OurRoles, Roles } from '../CommonTeam/OurRoles'
-import { Featured } from '..'
-
-import './style.css'
-
-export default function EngagementContainer() {
-  return (
-    <>
-      <OurRoles team='engagement'>
-        <Roles team='engagement'>
-          <Members team='engagement' />
-        </Roles>
-      </OurRoles>
-      <Featured team='engagement'></Featured>
-    </>
-  )
-}
diff --git a/src/pages/TeamsPage/ExpandedTeams/Engagement/index.tsx b/src/pages/TeamsPage/ExpandedTeams/Engagement/index.tsx
new file mode 100644
index 00000000..26ae16b2
--- /dev/null
+++ b/src/pages/TeamsPage/ExpandedTeams/Engagement/index.tsx
@@ -0,0 +1,16 @@
+import { Featured } from '..';
+import { Members, OurRoles, Roles } from '../CommonTeam/OurRoles';
+import './style.css';
+
+export default function EngagementContainer() {
+  return (
+    <>
+      <OurRoles>
+        <Roles team="engagement">
+          <Members team="engagement" />
+        </Roles>
+      </OurRoles>
+      <Featured team="engagement"></Featured>
+    </>
+  );
+}
diff --git a/src/pages/TeamsPage/ExpandedTeams/Hardware/index.jsx b/src/pages/TeamsPage/ExpandedTeams/Hardware/index.jsx
deleted file mode 100644
index 5d7c831e..00000000
--- a/src/pages/TeamsPage/ExpandedTeams/Hardware/index.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import { Members, OurRoles, Roles } from '../CommonTeam/OurRoles'
-import { Featured } from '..'
-import './style.css'
-import { WhatYouLearnContainer } from '../CommonTeam/WhatYouLearnContainer'
-
-export default function HardwareContainer() {
-  return (
-    <>
-      <WhatYouLearnContainer team='hardware'> </WhatYouLearnContainer>
-      <OurRoles team='hardware'>
-        <Roles team='hardware'>
-          <Members team='hardware' />
-        </Roles>
-      </OurRoles>
-      <Featured team='hardware'></Featured>
-    </>
-  )
-}
diff --git a/src/pages/TeamsPage/ExpandedTeams/Hardware/index.tsx b/src/pages/TeamsPage/ExpandedTeams/Hardware/index.tsx
new file mode 100644
index 00000000..f605e6ca
--- /dev/null
+++ b/src/pages/TeamsPage/ExpandedTeams/Hardware/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Featured } from '..';
+import { Members, OurRoles, Roles } from '../CommonTeam/OurRoles';
+import './style.css';
+import { WhatYouLearnContainer } from '../CommonTeam/WhatYouLearnContainer';
+
+export default function HardwareContainer() {
+  return (
+    <>
+      <WhatYouLearnContainer team="hardware" />
+      <OurRoles>
+        <Roles team="hardware">
+          <Members team="hardware" />
+        </Roles>
+      </OurRoles>
+      <Featured team="hardware"></Featured>
+    </>
+  );
+}
diff --git a/src/pages/TeamsPage/ExpandedTeams/Management/index.jsx b/src/pages/TeamsPage/ExpandedTeams/Management/index.jsx
deleted file mode 100644
index 2e250fd5..00000000
--- a/src/pages/TeamsPage/ExpandedTeams/Management/index.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-import './style.css'
-import { Teams } from '../CommonTeam/JSONFiles/RolesJSON'
-import { OurRoles, Roles } from '../CommonTeam/OurRoles'
-
-export default function ManagementContainer() {
-  return (
-    <div>
-      <OurRoles>
-        {Teams.map((team) => (
-          <Roles team={team} />
-        ))}
-      </OurRoles>
-    </div>
-  )
-}
diff --git a/src/pages/TeamsPage/ExpandedTeams/Management/index.tsx b/src/pages/TeamsPage/ExpandedTeams/Management/index.tsx
new file mode 100644
index 00000000..b32f81e2
--- /dev/null
+++ b/src/pages/TeamsPage/ExpandedTeams/Management/index.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import './style.css';
+import { TEAMS } from '../../../../data/teams';
+import { OurRoles, Roles } from '../CommonTeam/OurRoles';
+
+export default function ManagementContainer() {
+  return (
+    <div>
+      <OurRoles>
+        {TEAMS.map(team => (
+          <Roles team={team} />
+        ))}
+      </OurRoles>
+    </div>
+  );
+}
diff --git a/src/pages/TeamsPage/ExpandedTeams/Operations/index.jsx b/src/pages/TeamsPage/ExpandedTeams/Operations/index.tsx
similarity index 54%
rename from src/pages/TeamsPage/ExpandedTeams/Operations/index.jsx
rename to src/pages/TeamsPage/ExpandedTeams/Operations/index.tsx
index 23239be2..94f79678 100644
--- a/src/pages/TeamsPage/ExpandedTeams/Operations/index.jsx
+++ b/src/pages/TeamsPage/ExpandedTeams/Operations/index.tsx
@@ -1,12 +1,12 @@
-import { Members, OurRoles, Roles } from '../CommonTeam/OurRoles'
-import './style.css'
+import { Members, OurRoles, Roles } from '../CommonTeam/OurRoles';
+import './style.css';
 
 export default function OperationsContainer() {
   return (
-    <OurRoles team='operations'>
-      <Roles team='operations'>
-        <Members team='operations' />
+    <OurRoles>
+      <Roles team="operations">
+        <Members team="operations" />
       </Roles>
     </OurRoles>
-  )
+  );
 }
diff --git a/src/pages/TeamsPage/ExpandedTeams/Software/index.jsx b/src/pages/TeamsPage/ExpandedTeams/Software/index.jsx
deleted file mode 100644
index 089f0a6d..00000000
--- a/src/pages/TeamsPage/ExpandedTeams/Software/index.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import { Members, OurRoles, Roles } from '../CommonTeam/OurRoles'
-import { Featured } from '..'
-import './style.css'
-import { WhatYouLearnContainer } from '../CommonTeam/WhatYouLearnContainer'
-
-export default function SoftwareContainer() {
-  return (
-    <>
-      <WhatYouLearnContainer team='software'> </WhatYouLearnContainer>
-      <OurRoles team='software'>
-        <Roles team='software'>
-          <Members team='software' />
-        </Roles>
-      </OurRoles>
-      <Featured team='software'></Featured>
-    </>
-  )
-}
diff --git a/src/pages/TeamsPage/ExpandedTeams/Software/index.tsx b/src/pages/TeamsPage/ExpandedTeams/Software/index.tsx
new file mode 100644
index 00000000..b1e15348
--- /dev/null
+++ b/src/pages/TeamsPage/ExpandedTeams/Software/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Featured } from '..';
+import { Members, OurRoles, Roles } from '../CommonTeam/OurRoles';
+import './style.css';
+import { WhatYouLearnContainer } from '../CommonTeam/WhatYouLearnContainer';
+
+export default function SoftwareContainer() {
+  return (
+    <>
+      <WhatYouLearnContainer team="software" />
+      <OurRoles>
+        <Roles team="software">
+          <Members team="software" />
+        </Roles>
+      </OurRoles>
+      <Featured team="software"></Featured>
+    </>
+  );
+}
diff --git a/src/pages/TeamsPage/ExpandedTeams/index.jsx b/src/pages/TeamsPage/ExpandedTeams/index.jsx
deleted file mode 100644
index 3e156a48..00000000
--- a/src/pages/TeamsPage/ExpandedTeams/index.jsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React from 'react'
-import './style.css'
-import NavBar from '../../../component/NavBar'
-import TextRow from './CommonTeam/textRow'
-import FeatureTextRow from './CommonTeam/featureTextRow'
-import TeamPageFooter from './CommonTeam/TeamPageFooter'
-import { ExpandedTeamsJSON } from './CommonTeam/JSONFiles/ExpandedTeamsJSON'
-import { Routes, Route } from 'react-router-dom'
-import useWebsite from '../../../shared/useWebsite'
-import OperationsContainer from './Operations'
-import ManagementContainer from './Management'
-import SoftwareContainer from './Software'
-import EngagementContainer from './Engagement'
-import HardwareContainer from './Hardware'
-
-export default function ExpandedTeamsPage() {
-  const isWebsite = useWebsite()
-  const isBigScreen = !window.matchMedia('(max-device-width: 650px)').matches
-  const mobile = !isBigScreen || !isWebsite
-  const team = window.location.pathname.split('/').pop()
-  return (
-    <div class='expanded-wrapper'>
-      <div className='intro-navbar'>
-        <NavBar />
-      </div>
-      <div>
-        {!mobile ? (
-          <ExpandedTeamsHeader team={team} />
-        ) : (
-          <ExpandedTeamsMobileHeader team={team} />
-        )}
-        <div className='expanded-team-page-margins'>
-          <WhatWeDoHowWeWork team={team} />
-          <Routes>
-            <Route path='/management' element={<ManagementContainer />} />
-            <Route path='/operations' element={<OperationsContainer />} />
-            <Route path='/software' element={<SoftwareContainer />} />
-            <Route path='/hardware' element={<HardwareContainer />} />
-            <Route path='/engagement' element={<EngagementContainer />} />
-          </Routes>
-        </div>
-        <TeamPageFooter
-          color={ExpandedTeamsJSON[team].color}
-          page={ExpandedTeamsJSON[team].abbv}
-        />
-      </div>
-    </div>
-  )
-}
-
-function WhatWeDoHowWeWork({ team }) {
-  const teamTopSection = ExpandedTeamsJSON[team]
-
-  return (
-    <>
-      {teamTopSection.about.map((section, index) => (
-        <TextRow
-          key={index}
-          title={section.header}
-          description={section.body}
-          picture={section.image}
-          reverse={section.invert}
-        />
-      ))}
-    </>
-  )
-}
-
-function ExpandedTeamsHeader({ team }) {
-  const teamTopSection = ExpandedTeamsJSON[team]
-
-  return (
-    <div className='header-wrapper'>
-      <div
-        className='management-header'
-        style={{ backgroundColor: teamTopSection.color }}
-      >
-        <div className='header-title'>
-          <div className='header-text' style={{ color: teamTopSection.color }}>
-            <div style={{ marginTop: '-10%', marginBottom: '-10%' }}>
-              {teamTopSection.abbv}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function ExpandedTeamsMobileHeader({ team }) {
-  const teamTopSection = ExpandedTeamsJSON[team]
-  return (
-    <div className='mobile-header-wrapper'>
-      <div
-        className='mobile-management-header'
-        style={{ backgroundColor: teamTopSection.color }}
-      >
-        <div className='mobile-header-title'>
-          <div
-            className='mobile-header-text'
-            style={{ color: teamTopSection.color }}
-          >
-            <div style={{ marginTop: '-10%', marginBottom: '-10%' }}>
-              {teamTopSection.abbv}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export function Featured({ team }) {
-  const isWebsite = useWebsite()
-  const isBigScreen = !window.matchMedia('(max-device-width: 650px)').matches
-  const mobile = !isBigScreen || !isWebsite
-  return (
-    <>
-      <div className={mobile ? 'paragraph-title-mobile' : 'paragraph-title'}>
-        {ExpandedTeamsJSON[team].featured.header}
-      </div>
-      {ExpandedTeamsJSON[team].featured.items.map((value, index) => (
-        <div
-          className={`role-desc ${
-            mobile ? 'paragraph-text-mobile' : 'paragraph-text'
-          }`}
-          style={{ marginBottom: '4vh' }}
-        >
-          <FeatureTextRow
-            key={index}
-            description={value.description}
-            picture={value.image}
-            reverse={value.invert}
-            button={value.button}
-          />
-        </div>
-      ))}
-    </>
-  )
-}
diff --git a/src/pages/TeamsPage/ExpandedTeams/index.tsx b/src/pages/TeamsPage/ExpandedTeams/index.tsx
new file mode 100644
index 00000000..9e38e8cd
--- /dev/null
+++ b/src/pages/TeamsPage/ExpandedTeams/index.tsx
@@ -0,0 +1,145 @@
+import React from 'react';
+import type { ComponentType } from 'react';
+
+import './style.css';
+import { Routes, Route } from 'react-router-dom';
+
+import NavBar from '../../../component/NavBar';
+import { TEAMS, isTeam } from '../../../data/teams';
+import type { Team } from '../../../data/teams';
+import useWebsite from '../../../shared/useWebsite';
+import FeatureTextRow from './CommonTeam/featureTextRow';
+import { ExpandedTeamsJSON } from './CommonTeam/JSONFiles/ExpandedTeamsJSON';
+import TeamPageFooter from './CommonTeam/TeamPageFooter';
+import TextRow from './CommonTeam/textRow';
+import EngagementContainer from './Engagement';
+import HardwareContainer from './Hardware';
+import ManagementContainer from './Management';
+import OperationsContainer from './Operations';
+import SoftwareContainer from './Software';
+
+type TeamProps = {
+  team: Team;
+};
+
+const teamContainers: Record<Team, ComponentType> = {
+  management: ManagementContainer,
+  operations: OperationsContainer,
+  software: SoftwareContainer,
+  hardware: HardwareContainer,
+  engagement: EngagementContainer,
+};
+
+export default function ExpandedTeamsPage() {
+  const isWebsite = useWebsite();
+  const isBigScreen = !window.matchMedia('(max-device-width: 650px)').matches;
+  const mobile = !isBigScreen || !isWebsite;
+  const team = window.location.pathname.split('/').pop();
+
+  if (!isTeam(team)) {
+    return null;
+  }
+
+  return (
+    <div className="expanded-wrapper">
+      <div className="intro-navbar">
+        <NavBar />
+      </div>
+      <div>
+        {!mobile ? <ExpandedTeamsHeader team={team} /> : <ExpandedTeamsMobileHeader team={team} />}
+        <div className="expanded-team-page-margins">
+          <WhatWeDoHowWeWork team={team} />
+          <Routes>
+            {TEAMS.map(teamName => {
+              const Container = teamContainers[teamName];
+
+              return <Route key={teamName} path={`/${teamName}`} element={<Container />} />;
+            })}
+          </Routes>
+        </div>
+        <TeamPageFooter color={ExpandedTeamsJSON[team].color} page={ExpandedTeamsJSON[team].abbv} />
+      </div>
+    </div>
+  );
+}
+
+function WhatWeDoHowWeWork({ team }: TeamProps) {
+  const teamTopSection = ExpandedTeamsJSON[team];
+
+  return (
+    <>
+      {teamTopSection.about.map((section, index) => (
+        <TextRow
+          key={index}
+          title={section.header}
+          description={section.body}
+          picture={section.image}
+          reverse={section.invert}
+        />
+      ))}
+    </>
+  );
+}
+
+function ExpandedTeamsHeader({ team }: TeamProps) {
+  const teamTopSection = ExpandedTeamsJSON[team];
+
+  return (
+    <div className="header-wrapper">
+      <div className="management-header" style={{ backgroundColor: teamTopSection.color }}>
+        <div className="header-title">
+          <div className="header-text" style={{ color: teamTopSection.color }}>
+            <div style={{ marginTop: '-10%', marginBottom: '-10%' }}>{teamTopSection.abbv}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ExpandedTeamsMobileHeader({ team }: TeamProps) {
+  const teamTopSection = ExpandedTeamsJSON[team];
+
+  return (
+    <div className="mobile-header-wrapper">
+      <div className="mobile-management-header" style={{ backgroundColor: teamTopSection.color }}>
+        <div className="mobile-header-title">
+          <div className="mobile-header-text" style={{ color: teamTopSection.color }}>
+            <div style={{ marginTop: '-10%', marginBottom: '-10%' }}>{teamTopSection.abbv}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function Featured({ team }: TeamProps) {
+  const isWebsite = useWebsite();
+  const isBigScreen = !window.matchMedia('(max-device-width: 650px)').matches;
+  const mobile = !isBigScreen || !isWebsite;
+  const featured = ExpandedTeamsJSON[team].featured;
+
+  if (!featured) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className={mobile ? 'paragraph-title-mobile' : 'paragraph-title'}>{featured.header}</div>
+      {featured.items.map((value, index) => (
+        <div
+          className={`role-desc ${mobile ? 'paragraph-text-mobile' : 'paragraph-text'}`}
+          style={{ marginBottom: '4vh' }}
+        >
+          <FeatureTextRow
+            key={index}
+            description={value.description}
+            picture={value.image}
+            reverse={value.invert}
+            button={value.button}
+          />
+        </div>
+      ))}
+    </>
+  );
+}
diff --git a/src/pages/TeamsPage/TeamCard.jsx b/src/pages/TeamsPage/TeamCard.jsx
deleted file mode 100644
index 80fa488e..00000000
--- a/src/pages/TeamsPage/TeamCard.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react'
-import './style.css'
-import useWebsite from '../../shared/useWebsite'
-
-const TeamCard = ({ color = 'black', name = 'Team', image = null }) => {
-  const isWebsite = useWebsite()
-  const isBigScreen = !window.matchMedia('(max-device-width: 650px)').matches
-  const mobile = !isBigScreen || !isWebsite
-
-  return !mobile ? (
-    <a href={'/teams-expanded/' + name.toLowerCase()} className='link-wrapper'>
-      <div className='card-container-flex' style={{ backgroundColor: color }}>
-        <img className='card-img' src={image} alt='' />
-        <div className='title-bkgnd'>
-          <div className='title-text' style={{ color: color }}>
-            {name}
-          </div>
-        </div>
-      </div>
-    </a>
-  ) : (
-    <a
-      href={'/teams-expanded/' + name.toLowerCase()}
-      className='link-wrapper-mobile'
-    >
-      <div
-        className='d-flex flex-row-reverse align-items-center justify-content-around w-100'
-        style={{ backgroundColor: color }}
-      >
-        <img className='card-img-mobile' src={image} alt='' />
-        {/* <div
-          className='title-bkgnd-mobile'
-          style={{ transform: Rotate90DegreesCcw }}
-        >
-          <div
-            className='title-text'
-            style={{ color: color, transform: 'rotate(90deg)' }}
-          >
-            {name}
-          </div>
-        </div> */}
-      </div>
-    </a>
-  )
-}
-
-export default TeamCard
diff --git a/src/pages/TeamsPage/TeamCard.tsx b/src/pages/TeamsPage/TeamCard.tsx
new file mode 100644
index 00000000..a65e4ebc
--- /dev/null
+++ b/src/pages/TeamsPage/TeamCard.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import './style.css';
+import useWebsite from '../../shared/useWebsite';
+
+type TeamCardProps = {
+  color?: string;
+  name?: string;
+  image?: string;
+};
+
+const TeamCard = ({ color = 'black', name = 'Team', image }: TeamCardProps) => {
+  const isWebsite = useWebsite();
+  const isBigScreen = !window.matchMedia('(max-device-width: 650px)').matches;
+  const mobile = !isBigScreen || !isWebsite;
+
+  return !mobile ? (
+    <a href={'/teams-expanded/' + name.toLowerCase()} className="link-wrapper">
+      <div className="card-container-flex" style={{ backgroundColor: color }}>
+        <img className="card-img" src={image} alt="" />
+        <div className="title-bkgnd">
+          <div className="title-text" style={{ color: color }}>
+            {name}
+          </div>
+        </div>
+      </div>
+    </a>
+  ) : (
+    <a href={'/teams-expanded/' + name.toLowerCase()} className="link-wrapper-mobile">
+      <div
+        className="d-flex flex-row-reverse align-items-center justify-content-around w-100"
+        style={{ backgroundColor: color }}
+      >
+        <img className="card-img-mobile" src={image} alt="" />
+        {/* <div
+          className='title-bkgnd-mobile'
+          style={{ transform: Rotate90DegreesCcw }}
+        >
+          <div
+            className='title-text'
+            style={{ color: color, transform: 'rotate(90deg)' }}
+          >
+            {name}
+          </div>
+        </div> */}
+      </div>
+    </a>
+  );
+};
+
+export default TeamCard;
diff --git a/src/pages/TeamsPage/TeamPageAssets/MobileTeamContainer.jsx b/src/pages/TeamsPage/TeamPageAssets/MobileTeamContainer.jsx
deleted file mode 100644
index 2b707938..00000000
--- a/src/pages/TeamsPage/TeamPageAssets/MobileTeamContainer.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-import '../style.css'
-
-import Row from 'react-bootstrap/esm/Row'
-import NavBar from '../../../component/NavBar'
-import Footer from '../../../component/Footer/HorizontalFooter'
-import NextPage from '../../../component/NextPage'
-
-export default function MobileTeamContainer({ children }) {
-  const childrenWithProps = React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      return React.cloneElement(child)
-    }
-    return child
-  })
-  return (
-    <div className='d-flex flex-row' tab-index='0'>
-      <Row className='flex-nowrap'>
-        <div className='intro-navbar'>
-          <NavBar />
-        </div>
-        <div className='d-flex flex-column'>
-          {childrenWithProps}
-          <Footer />
-          <NextPage pageName='Projects' url='/projects' />
-        </div>
-      </Row>
-    </div>
-  )
-}
diff --git a/src/pages/TeamsPage/TeamPageAssets/MobileTeamContainer.tsx b/src/pages/TeamsPage/TeamPageAssets/MobileTeamContainer.tsx
new file mode 100644
index 00000000..d6b21549
--- /dev/null
+++ b/src/pages/TeamsPage/TeamPageAssets/MobileTeamContainer.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+
+import '../style.css';
+
+import Row from 'react-bootstrap/esm/Row';
+
+import Footer from '../../../component/Footer/HorizontalFooter';
+import NavBar from '../../../component/NavBar';
+import NextPage from '../../../component/NextPage';
+
+type MobileTeamContainerProps = {
+  children: ReactNode;
+};
+
+export default function MobileTeamContainer({ children }: MobileTeamContainerProps) {
+  const childrenWithProps = React.Children.map(children, child => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child);
+    }
+
+    return child;
+  });
+
+  return (
+    <div className="d-flex flex-row" tab-index="0">
+      <Row className="flex-nowrap">
+        <div className="intro-navbar">
+          <NavBar />
+        </div>
+        <div className="d-flex flex-column">
+          {childrenWithProps}
+          <Footer />
+          <NextPage pageName="Projects" url="/projects" />
+        </div>
+      </Row>
+    </div>
+  );
+}
diff --git a/src/pages/TeamsPage/TeamPageAssets/WebTeamContainer.jsx b/src/pages/TeamsPage/TeamPageAssets/WebTeamContainer.jsx
deleted file mode 100644
index f5f02268..00000000
--- a/src/pages/TeamsPage/TeamPageAssets/WebTeamContainer.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react'
-import '../style.css'
-
-import Row from 'react-bootstrap/esm/Row'
-import NavBar from '../../../component/NavBar'
-import Footer from '../../../component/Footer'
-import NextPage from '../../../component/NextPage'
-
-export default function WebTeamContainer({ children }) {
-  const childrenWithProps = React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      return React.cloneElement(child)
-    }
-    return child
-  })
-  return (
-    <div className='vh-100 bg-white container-fluid' tab-index='0'>
-      <Row className='flex-nowrap'>
-        <div className='intro-navbar'>
-          <NavBar />
-        </div>
-        {childrenWithProps}
-        <Footer />
-        <NextPage pageName='Projects' url='/projects' />
-      </Row>
-    </div>
-  )
-}
diff --git a/src/pages/TeamsPage/TeamPageAssets/WebTeamContainer.tsx b/src/pages/TeamsPage/TeamPageAssets/WebTeamContainer.tsx
new file mode 100644
index 00000000..f6b48c5f
--- /dev/null
+++ b/src/pages/TeamsPage/TeamPageAssets/WebTeamContainer.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+
+import '../style.css';
+
+import Row from 'react-bootstrap/esm/Row';
+
+import Footer from '../../../component/Footer';
+import NavBar from '../../../component/NavBar';
+import NextPage from '../../../component/NextPage';
+
+type WebTeamContainerProps = {
+  children: ReactNode;
+};
+
+export default function WebTeamContainer({ children }: WebTeamContainerProps) {
+  const childrenWithProps = React.Children.map(children, child => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child);
+    }
+
+    return child;
+  });
+
+  return (
+    <div className="vh-100 bg-white container-fluid" tab-index="0">
+      <Row className="flex-nowrap">
+        <div className="intro-navbar">
+          <NavBar />
+        </div>
+        {childrenWithProps}
+        <Footer />
+        <NextPage pageName="Projects" url="/projects" />
+      </Row>
+    </div>
+  );
+}
diff --git a/src/pages/TeamsPage/index.jsx b/src/pages/TeamsPage/index.tsx
similarity index 61%
rename from src/pages/TeamsPage/index.jsx
rename to src/pages/TeamsPage/index.tsx
index 56eae6ad..affe93ec 100644
--- a/src/pages/TeamsPage/index.jsx
+++ b/src/pages/TeamsPage/index.tsx
@@ -1,29 +1,27 @@
-import React from 'react'
-import './style.css'
-import teamPageDetails from '../../data/teamPageDetails'
-import TeamCard from './TeamCard'
+import React from 'react';
+
+import './style.css';
 //import DesktopMobileScrollAndBackgroundHandler from "../../component/DesktopMobileHandler";
-import HorizontalDesktopContainer from '../../component/DesktopMobileHandler/HorizontalDesktopContainer'
-import useWebsite from '../../shared/useWebsite'
-import NewMobileContainer from '../../component/DesktopMobileHandler/NewMobileContainer'
-import WebTeamContainer from './TeamPageAssets/WebTeamContainer'
-import MobileTeamContainer from './TeamPageAssets/MobileTeamContainer'
+import HorizontalDesktopContainer from '../../component/DesktopMobileHandler/HorizontalDesktopContainer';
+import NewMobileContainer from '../../component/DesktopMobileHandler/NewMobileContainer';
+import teamPageDetails from '../../data/teamPageDetails';
+import useWebsite from '../../shared/useWebsite';
+import TeamCard from './TeamCard';
+import MobileTeamContainer from './TeamPageAssets/MobileTeamContainer';
+import WebTeamContainer from './TeamPageAssets/WebTeamContainer';
 
 export default function TeamsPage() {
-  const isWebsite = useWebsite()
-  const isBigScreen = !window.matchMedia('(max-device-width: 650px)').matches
-  const mobile = !isBigScreen || !isWebsite
+  const isWebsite = useWebsite();
+  const isBigScreen = !window.matchMedia('(max-device-width: 650px)').matches;
+  const mobile = !isBigScreen || !isWebsite;
 
   const children = [
-    teamPageDetails.map((team) => {
-      return (
-        <TeamCard
-          {...{ color: team.color, name: team.name, image: team.largePic }}
-        />
-      )
-    })
-  ]
+    teamPageDetails.map(team => {
+      return <TeamCard {...{ color: team.color, name: team.name, image: team.largePic }} />;
+    }),
+  ];
   // todo; possibly rename component
+
   return !mobile ? (
     <>
       <HorizontalDesktopContainer
@@ -38,5 +36,5 @@ export default function TeamsPage() {
         mobileBGColor={'black'}
       />
     </>
-  )
+  );
 }