diff --git a/eslint.config.js b/eslint.config.js
index 39ea393..164dc04 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -28,5 +28,18 @@ export default tseslint.config(
 	},
 	{
 		ignores: ['build/', '.svelte-kit/', 'dist/']
+	},
+	{
+		rules: {
+			'no-unused-vars': 'off',
+			'@typescript-eslint/no-unused-vars': [
+				'warn',
+				{
+					argsIgnorePattern: '^_',
+					varsIgnorePattern: '^_',
+					caughtErrorsIgnorePattern: '^_'
+				}
+			]
+		}
 	}
 );
diff --git a/src/lib/components/MyProfile/UserStats.svelte b/src/lib/components/MyProfile/UserStats.svelte
index 8844980..46f088e 100644
--- a/src/lib/components/MyProfile/UserStats.svelte
+++ b/src/lib/components/MyProfile/UserStats.svelte
@@ -4,58 +4,38 @@
 	import Folder from 'lucide-svelte/icons/folder';
 	import * as Card from '$lib/components/ui/card';
 	import type { PrivateProfileData } from '$lib/types/PrivateProfileData';
+	import { Skeleton } from '$lib/components/ui/skeleton';
+	import StatsCard from '$lib/components/Shared/StatsCard.svelte';
+	import StatsCardSkeleton from '../Shared/StatsCardSkeleton.svelte';
 
 	export let privateProfileData: PrivateProfileData | null;
 </script>
 
-{#if privateProfileData}
-	<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-		<Card.Root>
-			<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
-				<div class="flex items-center space-x-2">
-					<Users class="h-4 w-4 text-muted-foreground" />
-					<Card.Title class="text-sm font-medium">Total Profile Views</Card.Title>
-				</div>
-			</Card.Header>
-			<Card.Content>
-				<div class="text-2xl font-bold">{privateProfileData.views}</div>
-			</Card.Content>
-		</Card.Root>
-
-		<Card.Root>
-			<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
-				<div class="flex items-center space-x-2">
-					<Folder class="h-4 w-4 text-muted-foreground" />
-					<Card.Title class="text-sm font-medium">Projects on Github</Card.Title>
-				</div>
-			</Card.Header>
-			<Card.Content>
-				<div class="text-2xl font-bold">{privateProfileData.repoCount}</div>
-			</Card.Content>
-		</Card.Root>
-
-		<Card.Root>
-			<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
-				<div class="flex items-center space-x-2">
-					<GitHub class="h-4 w-4 text-muted-foreground" />
-					<Card.Title class="text-sm font-medium">GitHub Contributions (Past 30 Days)</Card.Title>
-				</div>
-			</Card.Header>
-			<Card.Content>
-				<div class="text-2xl font-bold">{privateProfileData.contributionsCount}</div>
-			</Card.Content>
-		</Card.Root>
-
-		<Card.Root>
-			<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
-				<div class="flex items-center space-x-2">
-					<GitHub class="h-4 w-4 text-muted-foreground" />
-					<Card.Title class="text-sm font-medium">Github Followers</Card.Title>
-				</div>
-			</Card.Header>
-			<Card.Content>
-				<div class="text-2xl font-bold">{privateProfileData.followers}</div>
-			</Card.Content>
-		</Card.Root>
-	</div>
-{/if}
+<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+	{#if privateProfileData}
+		<StatsCard
+			icon={Users}
+			title="Total Profile Views"
+			data={privateProfileData.views.toString()}
+		/>
+		<StatsCard
+			icon={Folder}
+			title="Projects on Github"
+			data={privateProfileData.repoCount.toString()}
+		/>
+		<StatsCard
+			icon={GitHub}
+			title="GitHub Contributions (Past 30 Days)"
+			data={privateProfileData.contributionsCount.toString()}
+		/>
+		<StatsCard
+			icon={GitHub}
+			title="GitHub Followers"
+			data={privateProfileData.followers.toString()}
+		/>
+	{:else}
+		{#each { length: 4 } as _}
+			<StatsCardSkeleton />
+		{/each}
+	{/if}
+</div>
diff --git a/src/lib/components/PublicProfile/BasicInfo.svelte b/src/lib/components/PublicProfile/BasicInfo.svelte
index c77379a..fdfce31 100644
--- a/src/lib/components/PublicProfile/BasicInfo.svelte
+++ b/src/lib/components/PublicProfile/BasicInfo.svelte
@@ -1,60 +1,90 @@
 <script lang="ts">
 	import * as Avatar from '$lib/components/ui/avatar';
 	import { Button } from '$lib/components/ui/button';
-	import { IdCard } from 'lucide-svelte';
+	import { IdCard, Twitter } from 'lucide-svelte';
 	import GitHub from 'lucide-svelte/icons/github';
-
+	import { Skeleton } from '$lib/components/ui/skeleton';
 	import type { GithubData } from '$lib/types/GithubData';
 	import type { PublicProfile } from '$lib/types/PublicProfile';
-	export let githubData: GithubData;
+
+	export let githubData: GithubData | null;
 	export let userData: PublicProfile;
 </script>
 
 <!-- User Avatar and Basic Info -->
 <div class="flex items-center justify-center space-x-4">
 	<Avatar.Root class="h-24 w-24 rounded-full">
-		<Avatar.Image src={githubData.avatarUrl} alt="User Avatar" />
-		<Avatar.Fallback>?</Avatar.Fallback>
-	</Avatar.Root>
-	<div class="flex flex-col space-y-4 text-center">
-		{#if githubData.name}
-			<p class="text-2xl font-bold">{githubData.name}</p>
+		{#if githubData}
+			<Avatar.Image src={githubData.avatarUrl} alt="User Avatar" />
+			<Avatar.Fallback>?</Avatar.Fallback>
 		{:else}
-			<p class="text-xl font-bold">{userData.username}</p>
+			<Skeleton class="h-full w-full rounded-full"></Skeleton>
 		{/if}
+	</Avatar.Root>
+	<div class="flex flex-col space-y-4 text-center">
+		{#if githubData}
+			{#if githubData.name}
+				<p class="text-2xl font-bold">{githubData.name}</p>
+			{:else}
+				<p class="text-2xl font-bold">{userData.username}</p>
+			{/if}
 
-		{#if githubData.bio}
-			<p class="text-muted-foreground">{githubData.bio}</p>
-		{:else}
-			<p class="text-muted-foreground">Public Developer Profile</p>
-		{/if}
+			{#if githubData.bio}
+				<p class="text-muted-foreground">{githubData.bio}</p>
+			{:else}
+				<p class="text-muted-foreground">Public Developer Profile</p>
+			{/if}
 
-		{#if githubData.company}
-			<p class="text-muted-foreground">Currently at {githubData.company}</p>
-		{/if}
-		<div class="flex flex-row items-center justify-center gap-4">
-			<div>
-				<Button
-					href={githubData.url}
-					target="_blank"
-					class="mt-2 flex justify-center rounded-full"
-					variant="outline"
-				>
-					<GitHub />
-				</Button>
-			</div>
-			{#if githubData.blog}
+			{#if githubData.company}
+				<p class="text-muted-foreground">Currently at {githubData.company}</p>
+			{/if}
+			<div class="flex flex-row items-center justify-center gap-4">
 				<div>
 					<Button
-						href={githubData.blog}
+						href={githubData.url}
 						target="_blank"
 						class="mt-2 flex justify-center rounded-full"
 						variant="outline"
 					>
-						<IdCard />
+						<GitHub />
 					</Button>
 				</div>
-			{/if}
-		</div>
+				{#if githubData.blog}
+					<div>
+						<Button
+							href={githubData.blog}
+							target="_blank"
+							class="mt-2 flex justify-center rounded-full"
+							variant="outline"
+						>
+							<IdCard />
+						</Button>
+					</div>
+				{/if}
+				{#if githubData.twitter}
+					<div>
+						<Button
+							href="https://x.com/{githubData.twitter}"
+							target="_blank"
+							class="mt-2 flex justify-center rounded-full"
+							variant="outline"
+						>
+							<Twitter />
+						</Button>
+					</div>
+				{/if}
+			</div>
+		{:else}
+			<div class="flex w-[300px] justify-center">
+				<Skeleton class="h-8 w-[75px]"></Skeleton>
+			</div>
+			<Skeleton class="h-6 w-[300px]"></Skeleton>
+
+			<div class="flex flex-row items-center justify-center gap-4">
+				{#each { length: 2 } as _}
+					<Skeleton class="mt-2 h-[40px] w-[58px] rounded-full"></Skeleton>
+				{/each}
+			</div>
+		{/if}
 	</div>
 </div>
diff --git a/src/lib/components/PublicProfile/GithubStats.svelte b/src/lib/components/PublicProfile/GithubStats.svelte
index 548206a..3653123 100644
--- a/src/lib/components/PublicProfile/GithubStats.svelte
+++ b/src/lib/components/PublicProfile/GithubStats.svelte
@@ -1,50 +1,26 @@
 <script lang="ts">
-	import * as Card from '$lib/components/ui/card';
 	import type { GithubData } from '$lib/types/GithubData';
 	import { Folder } from 'lucide-svelte';
 	import GitHub from 'lucide-svelte/icons/github';
+	import StatsCard from '$lib/components/Shared/StatsCard.svelte';
+	import StatsCardSkeleton from '$lib/components/Shared/StatsCardSkeleton.svelte';
 
-	export let githubData: GithubData;
+	export let githubData: GithubData | null;
 </script>
 
 <!-- GitHub Stats Cards -->
 <div class="mt-8 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-	<!-- Total Projects (Repo Count) Card -->
-	<Card.Root>
-		<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
-			<div class="flex items-center space-x-2">
-				<Folder class="h-4 w-4 text-muted-foreground" />
-				<Card.Title class="text-sm font-medium">Projects on GitHub</Card.Title>
-			</div>
-		</Card.Header>
-		<Card.Content>
-			<div class="text-2xl font-bold">{githubData.repoCount}</div>
-		</Card.Content>
-	</Card.Root>
-
-	<!-- GitHub Contributions Card -->
-	<Card.Root>
-		<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
-			<div class="flex items-center space-x-2">
-				<GitHub class="h-4 w-4 text-muted-foreground" />
-				<Card.Title class="text-sm font-medium">GitHub Contributions (Past 30 Days)</Card.Title>
-			</div>
-		</Card.Header>
-		<Card.Content>
-			<div class="text-2xl font-bold">{githubData.contributionsCount}</div>
-		</Card.Content>
-	</Card.Root>
-
-	<!-- Praise Received Card -->
-	<Card.Root>
-		<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
-			<div class="flex items-center space-x-2">
-				<GitHub class="h-4 w-4 text-muted-foreground" />
-				<Card.Title class="text-sm font-medium">Github Followers</Card.Title>
-			</div>
-		</Card.Header>
-		<Card.Content>
-			<div class="text-2xl font-bold">{githubData.followers}</div>
-		</Card.Content>
-	</Card.Root>
+	{#if githubData}
+		<StatsCard icon={Folder} title="Projects on Github" data={githubData.repoCount.toString()} />
+		<StatsCard
+			icon={GitHub}
+			title="GitHub Contributions (Past 30 Days)"
+			data={githubData.contributionsCount.toString()}
+		/>
+		<StatsCard icon={GitHub} title="GitHub Followers" data={githubData.followers.toString()} />
+	{:else}
+		{#each { length: 3 } as _}
+			<StatsCardSkeleton />
+		{/each}
+	{/if}
 </div>
diff --git a/src/lib/components/PublicProfile/PublicProfile.svelte b/src/lib/components/PublicProfile/PublicProfile.svelte
index 3e25386..960f3cf 100644
--- a/src/lib/components/PublicProfile/PublicProfile.svelte
+++ b/src/lib/components/PublicProfile/PublicProfile.svelte
@@ -12,7 +12,7 @@
 	export let userData: PublicProfile;
 
 	//Accept githubData as a prop
-	export let githubData: GithubData;
+	export let githubData: GithubData | null;
 </script>
 
 <!-- Main Profile Content -->
diff --git a/src/lib/components/Shared/StatsCard.svelte b/src/lib/components/Shared/StatsCard.svelte
new file mode 100644
index 0000000..1b6fe93
--- /dev/null
+++ b/src/lib/components/Shared/StatsCard.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { ComponentType, SvelteComponent } from 'svelte';
+	import * as Card from '$lib/components/ui/card';
+
+	export let icon: ComponentType<SvelteComponent>;
+	export let title: string;
+	export let data: string;
+</script>
+
+<Card.Root>
+	<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
+		<div class="flex items-center space-x-2">
+			<svelte:component this={icon} class="h-4 w-4 text-muted-foreground"></svelte:component>
+			<Card.Title class="text-sm font-medium">{title}</Card.Title>
+		</div>
+	</Card.Header>
+	<Card.Content>
+		<div class="text-2xl font-bold">{data}</div>
+	</Card.Content>
+</Card.Root>
diff --git a/src/lib/components/Shared/StatsCardSkeleton.svelte b/src/lib/components/Shared/StatsCardSkeleton.svelte
new file mode 100644
index 0000000..19ba416
--- /dev/null
+++ b/src/lib/components/Shared/StatsCardSkeleton.svelte
@@ -0,0 +1,15 @@
+<script>
+	import * as Card from '$lib/components/ui/card';
+	import { Skeleton } from '$lib/components/ui/skeleton';
+</script>
+
+<Card.Root>
+	<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
+		<div class="flex w-full items-center space-x-2">
+			<Skeleton class="h-5 w-[75%]"></Skeleton>
+		</div>
+	</Card.Header>
+	<Card.Content>
+		<Skeleton class="h-8 w-[40%]"></Skeleton>
+	</Card.Content>
+</Card.Root>
diff --git a/src/lib/types/GithubData.ts b/src/lib/types/GithubData.ts
index 5b50797..e794ba8 100644
--- a/src/lib/types/GithubData.ts
+++ b/src/lib/types/GithubData.ts
@@ -8,6 +8,7 @@ export interface GithubData {
 	blog: string | null;
 	followers: number;
 	bio: string | null;
+	twitter: string | null;
 }
 
 export interface GitHubEvent {
diff --git a/src/lib/utils/getGithubData.ts b/src/lib/utils/getGithubData.ts
index d6238a4..38ed832 100644
--- a/src/lib/utils/getGithubData.ts
+++ b/src/lib/utils/getGithubData.ts
@@ -53,7 +53,8 @@ export const getGithubData = async (username: string): Promise<GithubData> => {
 			company: userData.company,
 			blog: userData.blog,
 			followers: userData.followers,
-			bio: userData.bio
+			bio: userData.bio,
+			twitter: userData.twitter_username
 		};
 	} catch (error) {
 		console.error('Failed to fetch GitHub data:', error);
diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte
index c63eaa3..80f034d 100644
--- a/src/routes/[username]/+page.svelte
+++ b/src/routes/[username]/+page.svelte
@@ -13,6 +13,4 @@
 	});
 </script>
 
-{#if githubData}
-	<PublicProfile userData={data.userData} {githubData} />
-{/if}
+<PublicProfile userData={data.userData} {githubData} />
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index 631f559..a99a34c 100644
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
@@ -57,10 +57,7 @@
 			</div>
 		</div>
 
-		<!-- Conditionally render UserStats only when privateProfileData is available -->
-		{#if privateProfileData}
-			<UserStats {privateProfileData} />
-		{/if}
+		<UserStats {privateProfileData} />
 
 		<div class="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
 			<Card.Root class="xl:col-span-2">
@@ -70,7 +67,7 @@
 						<Card.Description>
 							The links visible on your profile. You can drag links around to modify the order
 						</Card.Description>
-						<LinkForm data={data.form} linksLength={data.links.length} links = {data.links} />
+						<LinkForm data={data.form} linksLength={data.links.length} links={data.links} />
 					</div>
 				</Card.Header>
 				<Card.Content>
@@ -82,7 +79,11 @@
 				<Card.Header>
 					<Card.Title>Tech Stack</Card.Title>
 					<Card.Description>You can drag skills around to modify the order</Card.Description>
-					<SkillsForm data={data.skillsForm} skillsLength={data.skills.length} skills = {data.skills} />
+					<SkillsForm
+						data={data.skillsForm}
+						skillsLength={data.skills.length}
+						skills={data.skills}
+					/>
 				</Card.Header>
 				<Card.Content class="grid gap-8">
 					<UserSkills skills={data.skills} />