diff --git a/package.json b/package.json
index 06254eb7..d9f224e5 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.1",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.2",
+    "react-router-dom": "^6.22.3",
     "styled-components": "^6.1.8"
   },
   "devDependencies": {
diff --git a/src/App.tsx b/src/App.tsx
index 6c230100..186c52cd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,23 +9,17 @@ import SpeciesPage from './webPages/species';
 import ReactionsPage from './webPages/reactions';
 
 function App() {
-
     return (
-        <div>
-
-            <Routes>
-                <Route path="/" element={<LogIn />} />
-                <Route path="/LoggedIn" element={<LoggedIn />} />
-                <Route path="/FamilyPage" element={<FamilyPage />} />
-                <Route path="/FamilyMechanismPage" element={<FamilyMechanismPage />} />
-                <Route path="/SpeciesPage" element={<SpeciesPage />} />
-                <Route path="/ReactionsPage" element={<ReactionsPage />} />
-                <Route path="/Settings" element={<Settings />} />
-                <Route path="/Mechanisms" element={<Mechanisms />} />
-            </Routes>
-
-        
-        </div>
+        <Routes>
+            <Route path="/" element={<LogIn />} />
+            <Route path="/LoggedIn" element={<LoggedIn />} />
+            <Route path="/FamilyPage" element={<FamilyPage />} />
+            <Route path="/Mechanisms" element={<Mechanisms />} />
+            <Route path="/FamilyMechanismPage" element={<FamilyMechanismPage />} />
+            <Route path="/SpeciesPage" element={<SpeciesPage />} />
+            <Route path="/ReactionsPage" element={<ReactionsPage />} />
+            <Route path="/Settings" element={<Settings />} />
+        </Routes>
     );
 }
 
diff --git a/src/buttonSystem/ButtonSystemGrid.css b/src/buttonSystem/ButtonSystemGrid.css
new file mode 100644
index 00000000..4137f8eb
--- /dev/null
+++ b/src/buttonSystem/ButtonSystemGrid.css
@@ -0,0 +1,21 @@
+.button-system-grid-container {
+    overflow-y: auto;
+  }
+  
+  .button-system-grid-container::-webkit-scrollbar {
+    width: 8px;
+  }
+  
+  .button-system-grid-container::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+  }
+  
+  .button-system-grid-container::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+  
+  .button-system-grid-container::-webkit-scrollbar-track {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  
\ No newline at end of file
diff --git a/src/buttonSystem/ButtonSystemGrid.tsx b/src/buttonSystem/ButtonSystemGrid.tsx
index 340bfe1f..cc01b2d9 100644
--- a/src/buttonSystem/ButtonSystemGrid.tsx
+++ b/src/buttonSystem/ButtonSystemGrid.tsx
@@ -1,16 +1,18 @@
 import React, { useEffect, useState } from 'react';
 import { Container, Row, Col } from 'react-bootstrap';
 import { renderButton, ButtonData } from './RenderButtons';
+import './ButtonSystemGrid.css';
 
 interface ButtonSystemGridProps {
   buttonArray: Promise<ButtonData[]>[];
+  uuid: string;
   category: string;
   handleClick: (uuid: string, reactant_list_uuid?: string, product_list_uuid?: string) => void;
   cols: number;
   height: string;
 }
 
-const ButtonSystemGrid: React.FC<ButtonSystemGridProps> = ({ buttonArray, category, handleClick, cols, height }) => {
+const ButtonSystemGrid: React.FC<ButtonSystemGridProps> = ({ buttonArray, uuid, category, handleClick, cols, height }) => {
   const [resolvedButtons, setResolvedButtons] = useState<ButtonData[]>([]);
 
   useEffect(() => {
@@ -34,11 +36,11 @@ const ButtonSystemGrid: React.FC<ButtonSystemGridProps> = ({ buttonArray, catego
   }
 
   return (
-    <Container fluid style={{ maxHeight: height, overflowY: 'auto' }}>
+    <Container fluid className="button-system-grid-container" style={{ maxHeight: height }}>
       <Row>
         {resolvedButtons.map((button, index) => (
           <Col key={index} xs={columnWidth}>
-            {renderButton(button, category, handleClick)}
+            {renderButton(button, category, handleClick, uuid)}
           </Col>
         ))}
       </Row>
diff --git a/src/buttonSystem/GlobalVariables.tsx b/src/buttonSystem/GlobalVariables.tsx
index c188f259..55fb99d6 100644
--- a/src/buttonSystem/GlobalVariables.tsx
+++ b/src/buttonSystem/GlobalVariables.tsx
@@ -16,7 +16,7 @@ export const useFamilyUuid = () => {
         setFamilyUuid(uuid);
     };
 
-    return { familyUuid, handleFamilyClick };
+    return { familyUuid, setFamilyUuid, handleFamilyClick };
 };
 
 
@@ -43,7 +43,26 @@ export const useMechanismUuid = () => {
         navigate('/FamilyMechanismPage');
     };
 
-    return { mechanismUuid, handleMechanismsClick, handleFamilyMechanismClick };
+    return { mechanismUuid, setMechanismUuid, handleMechanismsClick, handleFamilyMechanismClick };
+};
+
+export const useTagMechanismUuid = () => {
+    
+    const [tagMechanismUuid, setTagMechanismUuid] = useState<string | null>(null);
+
+    useEffect(() => {
+        const storedTagMechanismUuid = localStorage.getItem('tag_mechanism_uuid');
+        if (storedTagMechanismUuid) {
+            setTagMechanismUuid(storedTagMechanismUuid);
+        }
+    }, []);
+
+    const handleTagMechanismClick = (uuid: string) => {
+        localStorage.setItem('tag_mechanism_uuid', uuid);
+        setTagMechanismUuid(uuid);
+    };
+
+    return { tagMechanismUuid, handleTagMechanismClick };
 };
 
 export const useReactionUuid = () => {
@@ -94,23 +113,4 @@ export const useSpeciesUuid = () => {
     };
 
     return { speciesUuid, setSpeciesUuid, handleSpeciesClick };
-};
-
-export const useTagMechanismUuid = () => {
-    
-    const [tagMechanismUuid, setTagMechanismUuid] = useState<string | null>(null);
-
-    useEffect(() => {
-        const storedTagMechanismUuid = localStorage.getItem('tag_mechanism_uuid');
-        if (storedTagMechanismUuid) {
-            setTagMechanismUuid(storedTagMechanismUuid);
-        }
-    }, []);
-
-    const handleTagMechanismClick = (uuid: string) => {
-        localStorage.setItem('tag_mechanism_uuid', uuid);
-        setTagMechanismUuid(uuid);
-    };
-
-    return { tagMechanismUuid, handleTagMechanismClick };
 };
\ No newline at end of file
diff --git a/src/buttonSystem/RenderButtons.tsx b/src/buttonSystem/RenderButtons.tsx
index 4d4b2f4b..27b25f4a 100644
--- a/src/buttonSystem/RenderButtons.tsx
+++ b/src/buttonSystem/RenderButtons.tsx
@@ -1,62 +1,65 @@
 import { Family, Mechanism, Reaction, Species, TagMechanism } from '../API/API_Interfaces';
-import 'bootstrap/dist/css/bootstrap.css';
 import { StyledFamilyButton, StyledMechanismsFromFamilyButton, StyledTagMechanismsFromMechanismButton, StyledSpeciesFromTagMechanismButton, StyledReactionsFromTagMechanismButton, StyledMechanismsButton } from './RenderButtonsStyling';
+import 'bootstrap/dist/css/bootstrap.css';
 
 export type ButtonData = Family | Mechanism | Reaction | Species | TagMechanism;
 
-export const renderButton = (button: ButtonData, category: string, handleClick: (uuid: string, reactant_list_uuid?: string, product_list_uuid?: string) => void) => {
+export const renderButton = (button: ButtonData, category: string, handleClick: (uuid: string) => void, uuid: string) => {
   switch (category) {
     case 'Families':
-      return familiesButton(button as Family, handleClick);
+      return familiesButton(button as Family, handleClick, uuid);
     case 'Mechanisms':
-      return mechanismsButton(button as Mechanism, handleClick);
+      return mechanismsButton(button as Mechanism, handleClick, uuid);
     case 'MechanismsFromFamily':
-      return mechanismsFromFamilyButton(button as Mechanism, handleClick);
+      return mechanismsFromFamilyButton(button as Mechanism, handleClick, uuid);
     case 'TagMechanismsFromMechanism':
-      return tagMechanismsFromMechanismButton(button as TagMechanism, handleClick);
+      return tagMechanismsFromMechanismButton(button as TagMechanism, handleClick, uuid);
     case 'SpeciesFromTagMechanism':
-      return speciesFromTagMechanismButton(button as Species, handleClick);
+      return speciesFromTagMechanismButton(button as Species, handleClick, uuid);
     case 'ReactionsFromTagMechanism':
-      return reactionsFromTagMechanismButton(button as Reaction, handleClick);
+      return reactionsFromTagMechanismButton(button as Reaction, handleClick, uuid);
     default:
       return null;
   }
 };
 
-const familiesButton = ({ uuid, name}: Family, handleClick: (uuid: string) => void) => (
-  <StyledFamilyButton onClick={() => handleClick(uuid)} style={{ width: '100%' }} {...{ uuid}}>
+
+const familiesButton = ({ uuid, name}: Family, handleClick: (uuid: string) => void, familyUuid: string) => (
+  <StyledFamilyButton active={familyUuid === uuid ? 'true' : 'false'}onClick={() => handleClick(uuid)} style={{ width: '100%' }}>
     {name}
   </StyledFamilyButton>
 );
 
-const mechanismsButton = ({ uuid, name}: Mechanism, handleClick: (uuid: string) => void) => (
-  <StyledMechanismsButton onClick={() => handleClick(uuid)} style={{ width: '100%' }} {...{ uuid}}>
+const mechanismsButton = ({ uuid, name}: Mechanism, handleClick: (uuid: string) => void, mechanismUuid: string) => (
+  <StyledMechanismsButton active={mechanismUuid === uuid ? 'true' : 'false'} onClick={() => handleClick(uuid)} style={{ width: '100%' }}>
     {name}
   </StyledMechanismsButton>
 );
 
-const mechanismsFromFamilyButton = ({ uuid, name}: Mechanism, handleClick: (uuid: string) => void) => (
-  <StyledMechanismsFromFamilyButton onClick={() => handleClick(uuid)} style={{ width: '100%' }} {...{ uuid}}>
+const mechanismsFromFamilyButton = ({ uuid, name}: Mechanism, handleClick: (uuid: string) => void, mechanismUuid: string) => (
+  <StyledMechanismsFromFamilyButton active={mechanismUuid === uuid ? 'true' : 'false'} onClick={() => handleClick(uuid)} style={{ width: '100%' }}>
     {name}
   </StyledMechanismsFromFamilyButton>
 );
 
-const tagMechanismsFromMechanismButton = ({ uuid, tag}: TagMechanism, handleClick: (uuid: string) => void) => (
-  <StyledTagMechanismsFromMechanismButton onClick={() => handleClick(uuid)} style={{ width: '100%' }} {...{ uuid}}>
+const tagMechanismsFromMechanismButton = ({ uuid, tag}: TagMechanism, handleClick: (uuid: string) => void, tagMechanismUuid: string) => (
+  <StyledTagMechanismsFromMechanismButton active={tagMechanismUuid === uuid ? 'true' : 'false'} onClick={() => handleClick(uuid)} style={{ width: '100%' }}>
     {tag}
   </StyledTagMechanismsFromMechanismButton>
 );
 
-const speciesFromTagMechanismButton = ({ uuid, type}: Species, handleClick: (uuid: string) => void) => (
-  <StyledSpeciesFromTagMechanismButton onClick={() => handleClick(uuid)} style={{ width: '100%' }} {...{ uuid}}>
+const speciesFromTagMechanismButton = ({ uuid, type}: Species, handleClick: (uuid: string) => void, speciesUuid: string) => (
+  <StyledSpeciesFromTagMechanismButton active={speciesUuid === uuid ? 'true' : 'false'} onClick={() => handleClick(uuid)} style={{ width: '100%' }}>
     {type}
   </StyledSpeciesFromTagMechanismButton>
 );
 
-const reactionsFromTagMechanismButton = ({ uuid, type, reactant_list_uuid, product_list_uuid}: Reaction, handleClick: (uuid: string, reactant_list_uuid?: string, product_list_uuid?: string) => void) => (
-  <StyledReactionsFromTagMechanismButton onClick={() => handleClick(uuid, reactant_list_uuid, product_list_uuid)} style={{ width: '100%' }} {...{ uuid, reactant_list_uuid, product_list_uuid}}>
+const reactionsFromTagMechanismButton = ({ uuid, type, reactant_list_uuid, product_list_uuid}: Reaction, handleClick: (uuid: string, reactant_list_uuid?: string, product_list_uuid?: string) => void, reactionUuid: string) => (
+  <StyledReactionsFromTagMechanismButton active={reactionUuid === uuid ? 'true' : 'false'} onClick={() => handleClick(uuid, reactant_list_uuid, product_list_uuid)} style={{ width: '100%' }}>
     {type}
   </StyledReactionsFromTagMechanismButton>
 );
 
+
+
 export default renderButton;
diff --git a/src/buttonSystem/RenderButtonsStyling.tsx b/src/buttonSystem/RenderButtonsStyling.tsx
index 017f94ea..d231e671 100644
--- a/src/buttonSystem/RenderButtonsStyling.tsx
+++ b/src/buttonSystem/RenderButtonsStyling.tsx
@@ -2,84 +2,82 @@ import 'bootstrap/dist/css/bootstrap.css';
 import styled from 'styled-components';
 
 export const StyledHeader = styled.header`
-padding: 20px;
-text-align: left;
-border-bottom: 10px solid #53565A;
+  padding: 20px;
+  text-align: left;
+  border-bottom: 10px solid #53565A;
 `;
 
 export const StyledActionBar = styled.nav`
-display: flex;
-overflow: hidden;
-background-color: #53565A;
-width: 100%;
-height: 40%;
-border-radius: 5px;
-grid-column: 1 / span 2;
-grid-row: 1;
+  display: flex;
+  overflow: hidden;
+  background-color: #53565A;
+  width: 100%;
+  height: 40%;
+  border-radius: 5px;
+  grid-column: 1 / span 2;
+  grid-row: 1;
 `;
 
 export const StyledActionBarButton = styled.a`
-float: left;
-display: block;
-height: 100%;
-flex-grow: 1;
-color: #f2f2f2;
-text-align: center;
-text-decoration: none;
-border-style: solid;
-border-color: #012169;
+  float: left;
+  display: block;
+  height: 100%;
+  flex-grow: 1;
+  color: #f2f2f2;
+  text-align: center;
+  text-decoration: none;
+  border-style: solid;
+  border-color: #012169;
 `;
 
 export const StyledDetailBox = styled.section`
-display: block;
-width: 100%;
-height: 100%;
-background-color: #C3D7EE;
-border-style: solid;
-border-width: 5px;
-border-radius: 50px;
-position: relative;
-grid-column: 2 / span 2;
-grid-row: 2 / span 2;
-overflow: auto;
+  display: block;
+  width: 100%;
+  height: 60vh;
+  background-color: #C3D7EE;
+  border-style: solid;
+  border-width: 5px;
+  border-radius: 50px;
+  position: relative;
+  grid-column: 2 / span 2;
+  grid-row: 2 / span 2;
+  overflow: auto;
 `;
 
-export const StyledButton = styled.button`
-display: block;
-padding: 10px;
-width: 100%;
-height: 100%;
-background-color: #1A658F;
-border-style: solid;
-border-width: 2px;
-border-radius: 10px;
-position: relative;
-grid-column: 1;
-grid-row: 2 / span 2;
+interface StyledButtonProps {
+  active: string | undefined;
+}
+
+export const StyledButton = styled.button<StyledButtonProps>`
+  display: block;
+  padding: 10px;
+  width: 100%;
+  height: 100%;
+  background-color: ${({ active }) => active === 'true' ? '#00797C' : '#1A658F'};
+  border-style: solid;
+  border-width: 2px;
+  border-radius: 10px;
+  position: relative;
+  grid-column: 1;
+  grid-row: 2 / span 2;
+
+  &:hover {
+    background-color: ${({ active }) => active === 'true' ? '#0f476d' : '#0f476d'};
+  }
+
+  &:active {
+    background-color: #0a3350;
+  }
 `;
 
-export const StyledFamilyButton = styled(StyledButton)`
+export const StyledFamilyButton = styled(StyledButton)``;
 
-`;
-
-export const StyledMechanismsButton = styled(StyledButton)`
-
-`;
-
-export const StyledMechanismsFromFamilyButton = styled(StyledButton)`
-
-`;
+export const StyledMechanismsButton = styled(StyledButton)``;
 
-export const StyledTagMechanismsFromMechanismButton = styled(StyledButton)`
+export const StyledMechanismsFromFamilyButton = styled(StyledButton)``;
 
-`;
-
-export const StyledSpeciesFromTagMechanismButton = styled(StyledButton)`
-
-`;
-
-export const StyledReactionsFromTagMechanismButton = styled(StyledButton)`
-
-`;
+export const StyledTagMechanismsFromMechanismButton = styled(StyledButton)``;
 
+export const StyledSpeciesFromTagMechanismButton = styled(StyledButton)``;
 
+export const StyledReactionsFromTagMechanismButton = styled(StyledButton)``;
diff --git a/src/main.tsx b/src/main.tsx
index 50e33873..c37200c2 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,8 +2,6 @@ import React from 'react';
 import { GoogleOAuthProvider } from '@react-oauth/google';
 import App from './App';
 import { createRoot } from 'react-dom/client';
-// import ButtonSystemGrid from './buttonSystem/ButtonSystemGrid';
-// import { getFamilies } from './buttonSystem/API_Methods';
 import { BrowserRouter } from 'react-router-dom';
 
 const rootElement = document.getElementById('root');
@@ -14,7 +12,6 @@ root.render(
     <GoogleOAuthProvider clientId="534701394161-6gcjh4gd19u5p40gtagdl8i0bkg28rvg.apps.googleusercontent.com">
       <React.StrictMode>
         <App />
-        {/* <ButtonSystemGrid buttonArray={[getFamilies()]} category={'Family'} size={'30%'} cols={1} /> */}
       </React.StrictMode>
     </GoogleOAuthProvider>,
   </BrowserRouter>
diff --git a/src/webPages/family.tsx b/src/webPages/family.tsx
index 42705889..63f21f04 100644
--- a/src/webPages/family.tsx
+++ b/src/webPages/family.tsx
@@ -4,7 +4,7 @@ import ButtonSystemGrid from '.././buttonSystem/ButtonSystemGrid';
 import { getFamilies, getMechanisms, getMechanismsFromFamily } from '../API/API_GetMethods';
 import { createFamily, createFamilyMechList, createMechanism } from '../API/API_CreateMethods';
 import { useFamilyUuid, useMechanismUuid } from '../buttonSystem/GlobalVariables';
-import { FamilyMechList, Mechanism } from '../API/API_Interfaces';
+import { Family, FamilyMechList, Mechanism } from '../API/API_Interfaces';
 import { StyledHeader, StyledDetailBox } from '../buttonSystem/RenderButtonsStyling';
 import Button from "@mui/material/Button";
 import ButtonGroup from '@mui/material/ButtonGroup';
@@ -21,12 +21,12 @@ import TaskSharpIcon from '@mui/icons-material/TaskSharp';
 import "./family.css";
 
 
-const FamilyPage = () => {
+const FamilyPage = () => {    
     const createFamRef = useRef("");
     const createMechanismRef = useRef("");
 
-    const { familyUuid, handleFamilyClick } = useFamilyUuid();
-    const { handleFamilyMechanismClick } = useMechanismUuid();
+    const { familyUuid, setFamilyUuid, handleFamilyClick } = useFamilyUuid();
+    const { mechanismUuid, setMechanismUuid, handleFamilyMechanismClick } = useMechanismUuid();
     
     const [publishOpen, setPublishOpen] = React.useState(false);
     const [shareOpen, setShareOpen] = React.useState(false);
@@ -45,7 +45,7 @@ const FamilyPage = () => {
     const [selectedMechanism, setSelectedMechanism] = useState('');
     const [mechanismOptions, setMechanismOptions] = useState<Mechanism[]>([]);
 
-    const handleSpeciesChange = (event: SelectChangeEvent<string>) => {
+    const handleMechanismChange = (event: SelectChangeEvent<string>) => {
         setSelectedMechanism(event.target.value);
     };
 
@@ -88,6 +88,13 @@ const FamilyPage = () => {
     const handleDelFamOpen = () => setDelFamOpen(true);
     const handleDelFamClose = () => setDelFamOpen(false);
 
+    const [selectedFamily, setSelectedFamily] = useState('');
+    const [familyOptions, setFamilyOptions] = useState<Mechanism[]>([]);
+
+    const handleFamilyChange = (event: SelectChangeEvent<string>) => {
+        setSelectedFamily(event.target.value);
+    };
+
     const handleDeleteFamClick = () => {
         console.log("Delete not rdy yet!");
     }
@@ -104,7 +111,19 @@ const FamilyPage = () => {
 
         fetchMechanisms();
     }, [familyUuid]);
-    
+
+    useEffect(() => {
+        const fetchFamilies = async () => {
+            try {
+                const families = await getFamilies();
+                setFamilyOptions(families);
+            } catch (error) {
+                console.error(error);
+            }
+        };
+
+        fetchFamilies();
+    }, []);
 
     const style = {
         position: 'absolute' as 'absolute',
@@ -161,12 +180,12 @@ const FamilyPage = () => {
                 </div>
 
                 <div className="L3">
-                    <ButtonSystemGrid buttonArray={[getFamilies()]} handleClick={handleFamilyClick} category={'Families'} height={'60vh'} cols={1}/>
+                    <ButtonSystemGrid buttonArray={[getFamilies()]} uuid={familyUuid as string} handleClick={handleFamilyClick} category={'Families'} height={'40vh'} cols={1}/>
                 </div>
 
                 <StyledDetailBox>
                     <p></p>
-                    <ButtonSystemGrid buttonArray={[getMechanismsFromFamily(familyUuid as string)]} handleClick={handleFamilyMechanismClick} category={'MechanismsFromFamily'} height={'80vh'} cols={1} />
+                    <ButtonSystemGrid buttonArray={[getMechanismsFromFamily(familyUuid as string)]} uuid={mechanismUuid as string} handleClick={handleFamilyMechanismClick} category={'MechanismsFromFamily'} height={'60vh'} cols={1} />
                     <p></p>
                 </StyledDetailBox>
 
@@ -229,21 +248,18 @@ const FamilyPage = () => {
                     >
                         <Box sx={style}>
                             Pick existing Mechanism
-                            <div>
-                                Enter Mechanism.
-                                <Select
-                                    value={selectedMechanism}
-                                    onChange={handleSpeciesChange}
-                                    label="Mechanism"
-                                    style={{ minWidth: 200 }}
-                                >
-                                    {mechanismOptions.map((mechanism: Mechanism) => (
-                                        <MenuItem key={mechanism.uuid} value={mechanism.uuid}>
-                                            {mechanism.name}
-                                        </MenuItem>
-                                    ))}
-                                </Select>
-                            </div>
+                            <Select
+                                value={selectedMechanism}
+                                onChange={handleMechanismChange}
+                                label="Mechanism"
+                                style={{ minWidth: 200 }}
+                            >
+                                {mechanismOptions.map((mechanism: Mechanism) => (
+                                    <MenuItem key={mechanism.uuid} value={mechanism.uuid}>
+                                        {mechanism.name}
+                                    </MenuItem>
+                                ))}
+                            </Select>
                             <Button onClick={handleCreateMtoFClick}>
                                 Submit
                             </Button>
@@ -255,8 +271,18 @@ const FamilyPage = () => {
                     >
                         <Box sx={style}>
                             Select Family to delete.
-                            <p></p>
-                            <ButtonSystemGrid buttonArray={[getFamilies()]} handleClick={handleFamilyClick} category={'Families'} height={'50vh'} cols={1}/>
+                            <Select
+                                value={selectedFamily}
+                                onChange={handleFamilyChange}
+                                label="Family"
+                                style={{ minWidth: 200 }}
+                            >
+                                {familyOptions.map((family: Family) => (
+                                    <MenuItem key={family.uuid} value={family.uuid}>
+                                        {family.name}
+                                    </MenuItem>
+                                ))}
+                            </Select>
                             <Button onClick={handleDeleteFamClick}>
                                 Submit
                             </Button>
diff --git a/src/webPages/familyMechanism.tsx b/src/webPages/familyMechanism.tsx
index b7b6d6ee..7afae6ad 100644
--- a/src/webPages/familyMechanism.tsx
+++ b/src/webPages/familyMechanism.tsx
@@ -167,12 +167,12 @@ const FamilyMechanismPage = () => {
                 </div>
 
                 <div className="L3">
-                    <ButtonSystemGrid buttonArray={[getMechanismsFromFamily(familyUuid as string)]} handleClick={handleMechanismsClick} category={'MechanismsFromFamily'} height={'60vh'} cols={1}/>
+                    <ButtonSystemGrid buttonArray={[getMechanismsFromFamily(familyUuid as string)]} uuid={mechanismUuid as string} handleClick={handleMechanismsClick} category={'MechanismsFromFamily'} height={'40vh'} cols={1}/>
                 </div>
 
                 <StyledDetailBox>
                     <p></p>
-                    <ButtonSystemGrid buttonArray={[getTagMechanismsFromMechanism(mechanismUuid as string)]} handleClick={masterHandleTagMechanismClick} category={'TagMechanismsFromMechanism'} height={'80vh'} cols={1} />
+                    <ButtonSystemGrid buttonArray={[getTagMechanismsFromMechanism(mechanismUuid as string)]} uuid={tagMechanismUuid as string} handleClick={masterHandleTagMechanismClick} category={'TagMechanismsFromMechanism'} height={'60vh'} cols={1} />
                     <p></p>
                 </StyledDetailBox>
 
diff --git a/src/webPages/loggedIn.tsx b/src/webPages/loggedIn.tsx
index 189c0ba8..a5064b72 100644
--- a/src/webPages/loggedIn.tsx
+++ b/src/webPages/loggedIn.tsx
@@ -3,7 +3,6 @@ import { useNavigate } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import Button from "@mui/material/Button";
 import ButtonGroup from '@mui/material/ButtonGroup';
-import Divider from '@mui/material/Divider';
 import Drawer from '@mui/material/Drawer';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
diff --git a/src/webPages/mechanisms.tsx b/src/webPages/mechanisms.tsx
index 98c96473..eacd447c 100644
--- a/src/webPages/mechanisms.tsx
+++ b/src/webPages/mechanisms.tsx
@@ -176,12 +176,12 @@ const MechanismPage = () => {
                 </div>
 
                 <div className="L3">
-                    <ButtonSystemGrid buttonArray={[getMechanisms()]} handleClick={handleMechanismsClick} category={'Mechanisms'} height={'60vh'} cols={1}/>
+                    <ButtonSystemGrid buttonArray={[getMechanisms()]} uuid={mechanismUuid as string} handleClick={handleMechanismsClick} category={'Mechanisms'} height={'40vh'} cols={1}/>
                 </div>
 
                 <StyledDetailBox>
                     <p></p>
-                    <ButtonSystemGrid buttonArray={[getTagMechanismsFromMechanism(mechanismUuid as string)]} handleClick={masterHandleTagMechanismClick} category={'TagMechanismsFromMechanism'} height={'80vh'} cols={1} />
+                    <ButtonSystemGrid buttonArray={[getTagMechanismsFromMechanism(mechanismUuid as string)]} uuid={tagMechanismUuid as string} handleClick={masterHandleTagMechanismClick} category={'TagMechanismsFromMechanism'} height={'60vh'} cols={1} />
                     <p></p>
                 </StyledDetailBox>
                 
diff --git a/src/webPages/reactions.tsx b/src/webPages/reactions.tsx
index dd5c6df3..bd754542 100644
--- a/src/webPages/reactions.tsx
+++ b/src/webPages/reactions.tsx
@@ -4,7 +4,7 @@ import { useRef, useState, useEffect } from 'react';
 import ButtonSystemGrid from '../buttonSystem/ButtonSystemGrid';
 import { createReaction, createTagMechanismReactionList, createPropertyList, createPropertyType, createPropertyVersion, createReactantProduct } from '../API/API_CreateMethods';
 import { Species, PropertyList, PropertyType, PropertyVersion, TagMechanismReactionList, ReactantProductList} from "../API/API_Interfaces";
-import { getReaction, getReactantsFromReactionReactantList, getProductsFromReactionReactantList, getReactionsFromTagMechanism, getSpeciesFromTagMechanism, getPropertyiesFromParent } from '../API/API_GetMethods';
+import { getReactantsFromReactionReactantList, getProductsFromReactionReactantList, getReactionsFromTagMechanism, getSpeciesFromTagMechanism, getPropertyiesFromParent } from '../API/API_GetMethods';
 import { useReactionUuid, useTagMechanismUuid, useMechanismUuid } from '../buttonSystem/GlobalVariables';
 import { StyledHeader, StyledDetailBox } from '../buttonSystem/RenderButtonsStyling';
 import RenderProperties from './RenderPropeties/RenderProperties';
@@ -274,7 +274,7 @@ const ReactionsPage = () => {
                 </div>
 
                 <div className="L3">
-                    <ButtonSystemGrid buttonArray={[getReactionsFromTagMechanism(tagMechanismUuid as string)]} handleClick={masterhandleReactionClick} category={'ReactionsFromTagMechanism'} height={'60vh'} cols={1}/>
+                    <ButtonSystemGrid buttonArray={[getReactionsFromTagMechanism(tagMechanismUuid as string)]} uuid={reactionUuid as string} handleClick={masterhandleReactionClick} category={'ReactionsFromTagMechanism'} height={'40vh'} cols={1}/>
                 </div>
 
                 <StyledDetailBox>
diff --git a/src/webPages/species.tsx b/src/webPages/species.tsx
index 72929cf4..1a72630e 100644
--- a/src/webPages/species.tsx
+++ b/src/webPages/species.tsx
@@ -209,7 +209,7 @@ const SpeciesPage = () => {
                 </div>
 
                 <div className="L3">
-                    <ButtonSystemGrid buttonArray={[getSpeciesFromTagMechanism(tagMechanismUuid as string)]} handleClick={handleSpeciesClick} category={'SpeciesFromTagMechanism'} height={'60vh'} cols={1}/>
+                    <ButtonSystemGrid buttonArray={[getSpeciesFromTagMechanism(tagMechanismUuid as string)]} uuid={speciesUuid as string} handleClick={handleSpeciesClick} category={'SpeciesFromTagMechanism'} height={'40vh'} cols={1}/>
                 </div>
 
                 <StyledDetailBox>