diff --git a/src/Project/Sugcon2024/Sugcon/src/Theme.ts b/src/Project/Sugcon2024/Sugcon/src/Theme.ts
index 624f07d9..645d0577 100644
--- a/src/Project/Sugcon2024/Sugcon/src/Theme.ts
+++ b/src/Project/Sugcon2024/Sugcon/src/Theme.ts
@@ -54,6 +54,11 @@ const Button = defineStyleConfig({
         color: 'white',
       },
     },
+    link: {
+      fontSize: '18px',
+      fontWeight: 'bold',
+      color: 'black',
+    },
     // Variant for Primary Navigation to make a Button look like a Link
     navButtonLink: {
       fontWeight: 'bold',
diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Person.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Person.tsx
index 8ea460a7..b513cf2d 100644
--- a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Person.tsx	
+++ b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Person.tsx	
@@ -63,10 +63,11 @@ export const Default = (props: PersonProps): JSX.Element => {
       <Image
         as={JssImage}
         src={props.fields.Image?.value?.src}
-        w={300}
+        w={260}
         borderRadius={15}
         mb={10}
         onClick={props.params?.LinkToBio == '1' ? onOpen : undefined}
+        cursor="pointer"
         field={props.fields.Image}
       />
 
@@ -82,10 +83,10 @@ export const Default = (props: PersonProps): JSX.Element => {
           <JssText field={props.fields.Name} />
         </Heading>
       )}
-      <Text fontSize="18px" mb={0}>
+      <Text fontSize="16px" color="sugcon.gray.500" mb={0}>
         <JssText field={props.fields.JobRole} />
       </Text>
-      <Text fontSize="18px" mb={0}>
+      <Text fontSize="16px" color="sugcon.gray.500" mb={0}>
         <JssText field={props.fields.Company} />
       </Text>
       {(isEditorActive() ||
@@ -138,16 +139,16 @@ export const Default = (props: PersonProps): JSX.Element => {
                   <Image src={props.fields.Image?.value?.src} w={200} borderRadius={15} />
                 </Box>
                 <Box w={{ base: '100%', md: '55%', lg: '60%' }}>
-                  <Heading as="h3" size="lg">
+                  <Heading as="h2" fontSize="25px">
                     {props.fields.Name?.value}
                   </Heading>
-                  <Text fontSize="18px" mb={0}>
+                  <Text fontSize="18px" mb="15px" color="#4D4D4D">
                     {props.fields.JobRole?.value}
                   </Text>
                   <Text fontSize="18px" mb={0}>
                     {props.fields.Company?.value}
                   </Text>
-                  <Text as={JssRichText} fontSize="18px" mb={0} field={props.fields.Biography} />
+                  <Text as={JssRichText} fontSize="18px" mb="15px" field={props.fields.Biography} />
                 </Box>
               </Flex>
             </ModalBody>
diff --git a/src/Project/Sugcon2024/Sugcon/src/components/List Components/PeopleGrid.tsx b/src/Project/Sugcon2024/Sugcon/src/components/List Components/PeopleGrid.tsx
index afb3504e..fc20aaa3 100644
--- a/src/Project/Sugcon2024/Sugcon/src/components/List Components/PeopleGrid.tsx	
+++ b/src/Project/Sugcon2024/Sugcon/src/components/List Components/PeopleGrid.tsx	
@@ -2,7 +2,6 @@ import React from 'react';
 import { Box, Heading, SimpleGrid } from '@chakra-ui/react';
 import { TextField, Text as JssText } from '@sitecore-jss/sitecore-jss-nextjs';
 import { PersonFields, PersonProps, Default as Person } from '../Basic Components/Person';
-import { isEditorActive } from '@sitecore-jss/sitecore-jss-nextjs/utils';
 import clsx from 'clsx';
 import { LayoutFlex } from 'components/Templates/LayoutFlex';
 
@@ -50,11 +49,8 @@ export const Default = (props: PeopleGridProps): JSX.Element => {
   return (
     <Box w="100%" mt={20} className={clsx(props?.params?.Styles)}>
       <LayoutFlex flexGrow="1" flexDirection="column" align="start">
-        {(isEditorActive() || props.fields?.Headline?.value !== '') && (
-          <Heading as="h2" size="lg">
-            <JssText field={props.fields.Headline} />
-          </Heading>
-        )}
+        <Heading as={JssText} field={props.fields.Headline} tag="h2" size="lg" />
+
         <SimpleGrid
           w="full"
           columns={{ base: 1, md: Math.ceil(cols / 2), xl: cols }} // Using Math.ceil so odd numbers round up.
diff --git a/src/Project/Sugcon2024/Sugcon/src/components/List Components/SpeakersGrid.tsx b/src/Project/Sugcon2024/Sugcon/src/components/List Components/SpeakersGrid.tsx
index 1fd60c7c..54032f7a 100644
--- a/src/Project/Sugcon2024/Sugcon/src/components/List Components/SpeakersGrid.tsx	
+++ b/src/Project/Sugcon2024/Sugcon/src/components/List Components/SpeakersGrid.tsx	
@@ -2,8 +2,8 @@ import { useState, useEffect } from 'react';
 import { Box, Heading, SimpleGrid } from '@chakra-ui/react';
 import { Field, TextField, Text as JssText } from '@sitecore-jss/sitecore-jss-nextjs';
 import { PersonFields, PersonProps, Default as Person } from '../Basic Components/Person';
-import { isEditorActive } from '@sitecore-jss/sitecore-jss-nextjs/utils';
 import * as cheerio from 'cheerio';
+import clsx from 'clsx';
 
 // Define the type of props that People Grid will accept
 interface Fields {
@@ -101,8 +101,7 @@ function getPeople(sessionTitle: string, body: string) {
 }
 
 export const Default = (props: PeopleGridProps): JSX.Element => {
-  const styles = props.params && props.params.Styles ? props.params.Styles : '';
-  const cols = props.params && props.params.Columns ? parseInt(props.params.Columns) : 4;
+  const cols = props.params && props.params.Columns ? parseInt(props.params.Columns) : 5;
 
   const [people, setPeople] = useState(Array<PersonItem>);
 
@@ -128,23 +127,24 @@ export const Default = (props: PeopleGridProps): JSX.Element => {
   }
 
   return (
-    <Box w="100%" mt={20} className={styles}>
-      <Box w="80%" pt={10} m="auto">
-        {(isEditorActive() || props.fields?.Headline?.value !== '') && (
-          <Heading as="h2" size="lg">
-            <JssText field={props.fields.Headline} />
-          </Heading>
-        )}
-        <SimpleGrid columns={{ base: 1, md: cols }} mt={10}>
-          {people.map((person, idx) => {
-            const pp: PersonProps = {
-              params: props.params,
-              fields: person.fields,
-            };
-            return <Person key={idx} {...pp}></Person>;
-          })}
-        </SimpleGrid>
-      </Box>
+    <Box w="100%" pr="0" pl="0" className={clsx(props?.params?.Styles)}>
+      <Heading as={JssText} field={props.fields.Headline} tag="h2" size="lg" />
+
+      <SimpleGrid
+        w="full"
+        columns={{ base: 1, md: 2, lg: Math.ceil(cols / 2), xl: cols }} // Using Math.ceil so odd numbers round up.
+        mt={10}
+        gap="18px"
+        justifyItems="center"
+      >
+        {people.map((person, idx) => {
+          const pp: PersonProps = {
+            params: props.params,
+            fields: person.fields,
+          };
+          return <Person key={idx} {...pp}></Person>;
+        })}
+      </SimpleGrid>
     </Box>
   );
 };