diff --git a/next/src/components/start/advice/AdviceView.tsx b/next/src/components/start/advice/AdviceView.tsx
index c0f67820..f6f40300 100644
--- a/next/src/components/start/advice/AdviceView.tsx
+++ b/next/src/components/start/advice/AdviceView.tsx
@@ -48,6 +48,8 @@ const MainContainer = styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  width: 100%;
 `;
 
 const InfoCardsContainer = styled.div`
@@ -55,17 +57,14 @@ const InfoCardsContainer = styled.div`
   flex-direction: column;
   overflow-y: auto;
 
-  // This is to set the bounds of the container to allow the scrollbar to show up
-  position:absolute;
-  left: 0;
-  right: 0;
-  top:0;
-  bottom: 30px;
+  height: 70vh;
   
+
   @media ${device.laptop} {
     justify-content: space-around;
     flex-direction: row;
     position: relative;
+    height: fit-content;
   }
 `;
 
@@ -74,16 +73,16 @@ const MainButtonContainer = styled.div`
   align-items: center;
   justify-content: space-around;
 
-  padding-top: 36px;
+  padding-top: 12px;
 
   @media ${device.laptop} {
-    padding-top: 48px;
+    padding-top: 36px;
   }
   @media ${device.laptopL} {
-    padding-top: 56px;
+    padding-top: 48px;
   }
   @media ${device.desktop} {
-    padding-top: 64px;
+    padding-top: 56px;
   }
 `;
 
diff --git a/next/src/components/start/advice/InfoCard.tsx b/next/src/components/start/advice/InfoCard.tsx
index 23ad92a1..54cb709b 100644
--- a/next/src/components/start/advice/InfoCard.tsx
+++ b/next/src/components/start/advice/InfoCard.tsx
@@ -115,6 +115,7 @@ const Button = styled.button`
   font-size: 20px;
   height: 40px;
 
+
   @media ${device.laptop} {
     font-size: 16px;
     height: 32px;
diff --git a/next/src/components/start/connect/ConnectView.tsx b/next/src/components/start/connect/ConnectView.tsx
index 21f74aae..f548632d 100644
--- a/next/src/components/start/connect/ConnectView.tsx
+++ b/next/src/components/start/connect/ConnectView.tsx
@@ -14,6 +14,8 @@ import InstagramScreenshot from "../../../../public/assets/csesoc_instagram.png"
 import YoutubeScreenshot from "../../../../public/assets/csesoc_youtube.png";
 import SpotifyScreenshot from "../../../../public/assets/csesoc_spotify.png";
 
+import { device } from "../../../styles/device";
+
 const MainContainer = styled.div`
   display: flex;
   flex-direction: column-reverse;
@@ -40,7 +42,24 @@ const Preview = styled.div`
 const SocialIcons = styled.div`
   display: flex;
   justify-content: center;
-  gap: 2rem;
+  gap: 0.5rem;
+
+  @media ${device.tablet} {
+    gap: 2rem;
+  }
+
+  
+`;
+
+const SocialIconImageContainer = styled.div`
+  position: relative;
+  height: 40px;
+  width: 40px;
+
+  @media ${device.tablet} {
+    height: 60px;
+    width: 60px;
+  }
 `;
 
 const Button = styled.button<{ active?: boolean }>`
@@ -50,15 +69,18 @@ const Button = styled.button<{ active?: boolean }>`
   background: none;
   border: none;
   cursor: pointer;
-  width: 60px;
-  height: 60px;
   border-radius: 100%;
+  padding: 0.5rem;
 
   ${({ active }) =>
     active &&
     `
       box-shadow: 0 0 0 4px var(--primary-purple);
     `}
+
+  @media ${device.tablet} {
+    padding: 1rem;
+  }
 `;
 
 const socialIcons = [
@@ -83,7 +105,7 @@ const socialIcons = [
   {
     name: "YouTube",
     icon: YoutubeLogo,
-    link: "cseso.cc/youtube",
+    link: "https://cseso.cc/youtube",
     screenshot: YoutubeScreenshot,
   },
   {
@@ -102,7 +124,9 @@ export default function ConnectView() {
       <SocialIcons>
         {socialIcons.map(({ name, icon }) => (
           <Button active={name === activeTab} key={name} onClick={() => setActiveTab(name)}>
-            <Image src={icon.src} alt={name} width={50} height={50} />
+            <SocialIconImageContainer>
+              <Image src={icon.src} alt={name} objectFit="contain" layout="fill" />
+            </SocialIconImageContainer>
           </Button>
         ))}
       </SocialIcons>
diff --git a/next/src/components/start/welcome/WelcomeView.tsx b/next/src/components/start/welcome/WelcomeView.tsx
index 83399b8c..5cdb1a0a 100644
--- a/next/src/components/start/welcome/WelcomeView.tsx
+++ b/next/src/components/start/welcome/WelcomeView.tsx
@@ -9,6 +9,7 @@ const MainContainer = styled.div`
   justify-content: center;
   align-items: center;
   row-gap: 30px;
+  width: 100%;
 `;
 
 const blink = keyframes`