diff --git a/client/public/ACMDev-logo.svg b/client/public/ACMDev-logo.svg
new file mode 100644
index 0000000..a7a5a5f
--- /dev/null
+++ b/client/public/ACMDev-logo.svg
@@ -0,0 +1,3 @@
+<svg width="172" height="165" viewBox="0 0 172 165" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M162.937 82.5L143.283 102.401L117.774 76.8926C119.96 72.2857 119.184 66.622 115.358 62.7959C110.5 57.9377 102.64 57.9221 97.8018 62.7607C92.9635 67.5993 92.9791 75.4583 97.8369 80.3164C101.663 84.1425 107.327 84.9176 111.934 82.7324L133.899 104.698C125.941 104.975 119.08 109.403 113.034 113.338C102.503 120.193 94.7356 125.21 82.6338 112.127C84.936 107.485 84.1953 101.716 80.3164 97.8369C75.4583 92.9791 67.5993 92.9634 62.7607 97.8018C57.9221 102.64 57.9377 110.5 62.7959 115.358C66.5751 119.137 72.1507 119.947 76.7285 117.861C93.5599 135.832 106.821 127.273 117.568 120.278C122.873 116.826 127.63 113.733 132.719 113.099L81.4678 165L0 82.5L81.4678 0L162.937 82.5ZM154.033 113.151C158.643 110.969 164.307 111.744 168.133 115.57C172.991 120.428 173.006 128.287 168.168 133.126C163.329 137.965 155.469 137.949 150.611 133.091C146.815 129.294 146.017 123.683 148.141 119.097C142.279 113.987 137.361 112.52 132.719 113.099L143.283 102.401L154.033 113.151ZM164.628 119.074C161.717 116.163 156.994 116.153 154.095 119.053C151.195 121.952 151.204 126.676 154.115 129.587C157.027 132.498 161.75 132.507 164.649 129.607C167.549 126.708 167.539 121.986 164.628 119.074ZM66.2783 101.32C69.178 98.4206 73.9011 98.4304 76.8125 101.342C79.7235 104.253 79.7333 108.975 76.834 111.875C73.9343 114.775 69.2112 114.765 66.2998 111.854C63.3887 108.942 63.3789 104.22 66.2783 101.32ZM101.32 66.2783C104.22 63.3789 108.942 63.3887 111.854 66.2998C114.765 69.2112 114.775 73.9343 111.875 76.834C108.975 79.7333 104.253 79.7235 101.342 76.8125C98.4304 73.9011 98.4206 69.178 101.32 66.2783Z" fill="black"/>
+</svg>
diff --git a/client/src/components/Core.tsx b/client/src/components/Core.tsx
index 769b9e7..ab0b788 100644
--- a/client/src/components/Core.tsx
+++ b/client/src/components/Core.tsx
@@ -27,12 +27,12 @@ const Footer = styled.div`
   font-family: var(--font-family);
   padding-left: 10px;
   padding-right: 10px;
-  padding-top: 150px;
+  padding-top: 30px;
   padding-bottom: 15px;
 
   @media (max-width: 992px) {
     & {
-      padding-top: 15px;
+      padding-top: 20px;
     }
   }
 `;
@@ -42,8 +42,8 @@ const SageLink = styled.a`
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
-  padding: 1rem 2rem;
-  margin-bottom: 0.5rem;
+  padding: 0.6rem 1.2rem;
+  margin-bottom: 0.3rem;
   border-radius: 100rem;
   color: #5AED86;
   text-shadow: 0 0 4px rgb(0 0 0 / 0.6);
@@ -57,8 +57,9 @@ const SageLink = styled.a`
 `;
 
 const SageText = styled.p`
-  line-height: 1.375rem;
+  line-height: 1.2rem;
   margin-bottom: 0;
+  font-size: 0.9rem;
 `;
 
 const BuiltWithLove = styled.p`
@@ -66,21 +67,30 @@ const BuiltWithLove = styled.p`
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-  font-size: 1.2rem;
-  margin: 0.5rem 0;
+  font-size: 1rem;
+  margin: 0.3rem 0;
   font-weight: 550;
 `;
 
 const SageLogo = styled.img`
-  height: 1.5rem;
-  margin-right: 0.5rem;
+  height: 1.2rem;
+  margin-right: 0.4rem;
   filter: drop-shadow(0 0 4px rgb(0 0 0 / 0.6));
 `;
 
 const SageTextMark = styled.img`
-  height: 1.375rem;
+  height: 1.2rem;
 `
 
+const CreditsText = styled.p`
+  font-size: 0.9rem;
+  margin: 0.2rem 0;
+  
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
+
 interface CoreProps {
   children: ReactNode;
 }
@@ -110,7 +120,7 @@ function Core({ children }: CoreProps) {
           Built with <HeartTwoTone twoToneColor="#eb2f96" /> by{" "}
           <a href="https://www.acmutd.co" target={"blank"}>ACM Dev</a>
         </BuiltWithLove>
-        <p>
+        <CreditsText>
           Designed by <a href="https://www.arimilli.io" target={"blank"}>Bharat Arimilli</a>. Thanks to{" "}
           <a href="https://garrettgu.com/" target={"blank"}>Garrett Gu</a>,{" "}
           <a href="https://jeffw.xyz/" target={"blank"}>Jeffrey Wang</a>,{" "}
@@ -121,7 +131,7 @@ function Core({ children }: CoreProps) {
 
           <a href="https://github.com/acmutd/utd-grades/tree/master/raw_data" target={"blank"}> Raw data available for download</a>
 
-        </p>
+        </CreditsText>
       </Footer>
     </Container>
   );
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index 8e67754..4f0f07b 100644
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -35,6 +35,9 @@ const HeaderText = styled.a`
     letter-spacing: 2px;
     font-size: 24px;
     margin-bottom: 0px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
   }
 `;
 
@@ -45,7 +48,6 @@ const HeaderBold = styled.span`
 const Logo = {
   height: "36px",
   width: "36px",
-  marginTop: "-8px",
 };
 
 export default function Header() {
@@ -60,7 +62,7 @@ export default function Header() {
       <Back onClick={goHome} type="ghost" icon={<HomeOutlined />} shape="circle" size="large" />
       <HeaderText href="#" onClick={goHome}>
         <h2>
-          <Image src="/ACMDev-logo.png" alt="ACM Dev Logo" width={24} height={24} style={Logo} /> <HeaderBold>UTD</HeaderBold> Grades
+          <Image src="/ACMDev-logo.svg" alt="ACM Dev Logo" width={24} height={24} style={Logo} /> <HeaderBold>UTD</HeaderBold> Grades
         </h2>
       </HeaderText>
       <Back
diff --git a/client/src/components/SearchResults.tsx b/client/src/components/SearchResults.tsx
index e406739..7da1f74 100644
--- a/client/src/components/SearchResults.tsx
+++ b/client/src/components/SearchResults.tsx
@@ -208,7 +208,8 @@ const Results = React.memo(function Results({ search, sectionId, router }: Resul
         if (scrollRef.current) {
           const contentArea = scrollRef.current;
           const contentRect = contentArea.getBoundingClientRect();
-          const targetScrollY = window.scrollY + contentRect.top - 80; // 80px padding from top
+          const offset = window.innerWidth <= 992 ? 5 : 35;  // diff offsets for mobile vs desktop
+          const targetScrollY = window.scrollY + contentRect.top - offset;
 
           scroll.scrollTo(Math.max(0, targetScrollY), {
             duration: 400,
@@ -257,7 +258,8 @@ const Results = React.memo(function Results({ search, sectionId, router }: Resul
 
       const contentArea = scrollRef.current;
       const contentRect = contentArea.getBoundingClientRect();
-      const targetScrollY = window.scrollY + contentRect.top - 80;
+      const offset = window.innerWidth <= 992 ? 5 : 35;  // diff offsets for mobile vs desktop
+      const targetScrollY = window.scrollY + contentRect.top - offset;
 
       scroll.scrollTo(Math.max(0, targetScrollY), {
         duration: 400,
diff --git a/client/src/components/SectionContent.tsx b/client/src/components/SectionContent.tsx
index d12066e..3906478 100644
--- a/client/src/components/SectionContent.tsx
+++ b/client/src/components/SectionContent.tsx
@@ -21,11 +21,15 @@ ChartJS.register(CategoryScale, LinearScale, BarElement, ChartTooltip);
 const Container = styled.div`
   padding-top: 20px;
   padding-bottom: 50px;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
 
   @media (max-width: 992px) {
     & {
       padding-left: 25px;
       padding-right: 25px;
+      height: auto;
     }
   }
 
@@ -39,8 +43,8 @@ const Container = styled.div`
 
 const GraphContainer = styled.div`
   width: 100%;
-  height: 50vh;
-  min-height: 300px;
+  flex: 1;
+  min-height: 250px;
   max-height: 400px;
 
   @media (max-width: 992px) {
@@ -49,6 +53,7 @@ const GraphContainer = styled.div`
       height: 30vh;
       min-height: 200px;
       max-height: 300px;
+      flex: none;
     }
   }
 
@@ -63,7 +68,8 @@ const GraphContainer = styled.div`
 
 const ProfessorDetailsContainer = styled.div`
   width: 100%;
-  margin-top: 2rem;
+  margin-top: 1rem;
+  flex-shrink: 0;
 
   @media (max-width: 992px) {
     & {
@@ -85,7 +91,7 @@ const Header = styled.h3`
   font-weight: 700;
   font-size: 48px;
   margin-bottom: 0px !important;
-  margin-top: 6px !important;
+  margin-top: 0px !important;
 `;
 
 const SubHeader = styled.h5`
@@ -93,8 +99,16 @@ const SubHeader = styled.h5`
   font-weight: 600;
   font-size: 22px;
   color: rgb(117, 117, 117);
-  margin-top: 1rem !important;
+  margin-top: 0.25rem !important;
   margin-bottom: 0rem !important;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+
+  @media (max-width: 992px) {
+    & {
+      font-size: 18px;
+    }
+  }
 `;
 
 const Stat = styled.h5`
@@ -127,7 +141,7 @@ const RMPScore = styled.span`
 const RMPTooltip = styled(Row)`
   justify-content: center;
   align-items: center;
-  margin-top: 1rem !important;
+  margin-top: 0.25rem !important;
   gap: 0.5rem;
 `;
 
@@ -260,6 +274,14 @@ const Section = styled.span`
 const Stack = styled.div`
   display: flex;
   flex-direction: column;
+  flex-shrink: 0;
+
+  @media (max-width: 992px) {
+    &:first-child {
+      flex: 1;
+      min-width: 0; /* Allow text to wrap */
+    }
+  }
 `;
 
 const FlexSmall = styled.div`
@@ -271,6 +293,7 @@ const FlexSmall = styled.div`
   @media (max-width: 992px) {
     & {
       gap: 1rem;
+      flex-wrap: wrap;
     }
   }
 `;
@@ -345,7 +368,7 @@ const SectionContent = React.memo(function SectionContent({
 
   return (
     <Container>
-      <Stack>
+      <Stack style={{ marginBottom: "1rem" }}>
         <FlexSmall>
           <Stack>
             <Header>
@@ -388,7 +411,7 @@ const SectionContent = React.memo(function SectionContent({
         </Stat>
       </Stack>
 
-      <Row style={{ marginBottom: "2rem" }}>
+      <Row style={{ marginBottom: "0.5rem" }}>
         <Col xs={24} sm={24} md={24}>
           <GraphContainer>
             <Bar options={options} data={data} />
diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx
index 9d335c1..4769134 100644
--- a/client/src/pages/index.tsx
+++ b/client/src/pages/index.tsx
@@ -21,15 +21,31 @@ const Main = styled.div`
   margin-top: 50px;
 `;
 
-const Header = styled.h2`
+const Header = styled.h1`
   font-family: var(--font-family);
   text-transform: uppercase;
   text-align: center;
   color: rgb(78, 78, 78);
   font-weight: 300;
-  letter-spacing: 2px;
-  font-size: 26px;
+  letter-spacing: 3px;
+  font-size: 48px;
   margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  
+  @media (max-width: 768px) {
+    font-size: 36px;
+    letter-spacing: 2px;
+    gap: 12px;
+  }
+  
+  @media (max-width: 480px) {
+    font-size: 28px;
+    letter-spacing: 1px;
+    gap: 8px;
+  }
 `;
 
 const Description = styled.p`
@@ -45,15 +61,28 @@ const HeaderBold = styled.span`
   font-weight: 700;
 `;
 
-const SmallFont = styled.span`
-   font-size: 12px;
+const ByACM = styled.span`
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 1px;
+  color: #95989a;
+  margin-left: 12px;
+  
+  @media (max-width: 768px) {
+    font-size: 14px;
+    margin-left: 8px;
+  }
+  
+  @media (max-width: 480px) {
+    font-size: 12px;
+    margin-left: 6px;
+  }
 `;
 
 const Logo = {
-  height: "36px",
-  width: "36px",
-  marginTop: "-8px",
-
+  height: "52px",
+  width: "52px",
+  flexShrink: 0,
 };
 
 
@@ -75,7 +104,11 @@ export default function Home() {
           <Col lg={{ span: 10, offset: 7 }} xs={{ span: 20, offset: 2 }}>
             <FadeIn delay={0}>
               <Header>
-                <Image src="/ACMDev-logo.png" alt="ACM Dev Logo" width={32} height={32} style={Logo} /> <HeaderBold>UTD</HeaderBold> Grades <SmallFont> by <HeaderBold>ACM</HeaderBold></SmallFont>
+                <Image src="/ACMDev-logo.svg" alt="ACM Dev Logo" width={52} height={52} style={Logo} />
+                <div>
+                  <HeaderBold>UTD</HeaderBold> GRADES
+                  <ByACM>by <HeaderBold>ACM</HeaderBold></ByACM>
+                </div>
               </Header>
             </FadeIn>
             <FadeIn delay={300}>