diff --git a/content/profile/lwinmoepaing.mdx b/content/profile/lwinmoepaing.mdx
index a5a249f..916bbb6 100644
--- a/content/profile/lwinmoepaing.mdx
+++ b/content/profile/lwinmoepaing.mdx
@@ -6,7 +6,7 @@ tags:
   - Fullstack
   - Frontend
   - JavaScript
-  - ReactJS 
+  - ReactJS
   - SolidJS
 ---
 
@@ -15,39 +15,52 @@ import ContriSquareBox from "@/components/Contributors/ContriSquareBox/ContriSqu
 import SpacingDivider from "@/components/Common/SpacingDivider/SpacingDivider";
 
 <div className="lwinmoepaing">
-  <div className="flex flex-col md:flex-row">
-    <div className="md:w-6/12 mb-5 flex flex-col justify-center items-center">
-      <div className="h-28 w-28 rounded-3xl overflow-hidden mx-auto">
-        <img src="https://avatars.githubusercontent.com/u/49163775?v=4" />
-      </div>
-      <SpacingDivider size="sm"/>
-      <h3 className="flex flex-row max-w-[240px] mx-auto">
-        <img
-          src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/gitto.gif"
-          className="h-[20px] object-contain mr-2"
-        />
-        <span> Hi, I'm Lwin Moe Paing </span>
-      </h3>
-      <SpacingDivider size="sm"/>
-      <Counter />
-      <SpacingDivider size="sm"/>
-      <ContriSquareBox>
-        <p className="text-center text-sm mb-2"><img className="h-5 inline-block mr-1 relative -top-1" src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/katto.gif"/>I’m looking for help with Javascript Language to build Many Free Softwares to help people who can't afford to pay!!</p>
-        <p className="text-center text-sm mb-2"><img className="h-5 inline-block mr-1 relative -top-1" src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/katto.gif"/>How to reach me **lwinmoepaing.dev@gmail.com (or) [facebook](https://www.facebook.com/lwin.im/)**</p>
-      </ContriSquareBox>
-    </div>
-    <div className="flex flex-1 flex-row justify-center items-center">
-      <div className="ph-container">
-        <div className="phone">
-          <div className="notch-container">
-            <div className="notch"></div>
-          </div>
-          <iframe
-            src="https://lwinmoepaing.github.io/"
-            className="h-full relative"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div> 
+	<div className="flex flex-col md:flex-row">
+		<div className="md:w-6/12 mb-5 flex flex-col justify-center items-center">
+			<div className="h-28 w-28 rounded-3xl overflow-hidden mx-auto">
+				<img src="https://avatars.githubusercontent.com/u/49163775?v=4" />
+			</div>
+			<SpacingDivider size="sm" />
+			<h3 className="flex flex-row max-w-[240px] mx-auto">
+				<img
+					src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/gitto.gif"
+					className="h-[20px] object-contain mr-2"
+				/>
+				<span> Hi, I'm Lwin Moe Paing </span>
+			</h3>
+			<SpacingDivider size="sm" />
+			<Counter />
+			<SpacingDivider size="sm" />
+			<ContriSquareBox>
+				<p className="text-center text-sm mb-2">
+					<img
+						className="h-5 inline-block mr-1 relative -top-1"
+						src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/katto.gif"
+					/>
+					I’m looking for help with Javascript Language to build Many Free Softwares
+					to help people who can't afford to pay!!
+				</p>
+				<p className="text-center text-sm mb-2">
+					<img
+						className="h-5 inline-block mr-1 relative -top-1"
+						src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/katto.gif"
+					/>
+					How to reach me **lwinmoepaing.dev@gmail.com (or) [facebook](https://www.facebook.com/lwin.im/)**
+				</p>
+			</ContriSquareBox>
+		</div>
+		<div className="flex flex-1 flex-row justify-center items-center">
+			<div className="ph-container">
+				<div className="phone">
+					<div className="notch-container">
+						<div className="notch"></div>
+					</div>
+					<iframe
+						src="https://lwinmoepaing.github.io/"
+						className="h-full relative"
+					/>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/content/profile/yehtetaung.mdx b/content/profile/yehtetaung.mdx
new file mode 100644
index 0000000..5d20f23
--- /dev/null
+++ b/content/profile/yehtetaung.mdx
@@ -0,0 +1,24 @@
+---
+name: Ye Htet Aung
+description: I'm full stack developer with 1 year of experience.
+image: "https://avatars.githubusercontent.com/u/66383566?v=4"
+tags:
+  - FullStack
+  - JavaScript
+  - TypeScript
+  - ReactJS
+  - React Native
+  - NextJS
+  - NodeJS
+  - ExpressJS
+  - MySQL
+  - MongoDB
+  - Firebase
+  - Prisma
+---
+
+import YeHtetAung from "@/components/Contributors/YeHtetAung/App";
+
+<div className="p-10">
+	<YeHtetAung />
+</div>
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 5f94ecf..aa06166 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -8,29 +8,29 @@ import SpacingDivider from "@/components/Common/SpacingDivider/SpacingDivider";
 import ProfileCardList from "@/components/Profile/ProfileCardList/ProfileCardList";
 
 export const metadata: Metadata = {
-  title: `Profile List | ${APP_CONFIG.title}`,
-  description: APP_CONFIG.description,
-  openGraph: {
-    title: `Profile List | ${APP_CONFIG.title}`,
-    description: APP_CONFIG.description,
-    images: "https://mmswe.com/images/landing/galaxy.jpg",
-  },
+	title: `Profile List | ${APP_CONFIG.title}`,
+	description: APP_CONFIG.description,
+	openGraph: {
+		title: `Profile List | ${APP_CONFIG.title}`,
+		description: APP_CONFIG.description,
+		images: "https://mmswe.com/images/landing/galaxy.jpg",
+	},
 };
 
 const getAllProfileList = async () => {
-  return allProfiles;
+	return allProfiles;
 };
 
 const ProfileListPage = async () => {
-  const profiles = await getAllProfileList();
+	const profiles = await getAllProfileList();
 
-  return (
-    <PageTransitionWrapper>
-      <Container>
-        <ProfileCardList profiles={profiles} />
-        <SpacingDivider size="lg" />
-      </Container>
-    </PageTransitionWrapper>
-  );
+	return (
+		<PageTransitionWrapper>
+			<Container>
+				<ProfileCardList profiles={profiles} />
+				<SpacingDivider size="lg" />
+			</Container>
+		</PageTransitionWrapper>
+	);
 };
 export default ProfileListPage;
diff --git a/src/components/Contributors/YeHtetAung/App.tsx b/src/components/Contributors/YeHtetAung/App.tsx
new file mode 100644
index 0000000..f71bea9
--- /dev/null
+++ b/src/components/Contributors/YeHtetAung/App.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import Skills from "./components/Skills";
+import Intro from "./components/Intro";
+import Profile from "./components/Profile";
+import Projects from "./components/Projects";
+
+const YeHtetAung = () => {
+	return (
+		<div className="md:flex">
+			<Profile />
+			<div className="container">
+				<Intro />
+				<Skills />
+				<Projects />
+			</div>
+		</div>
+	);
+};
+
+export default YeHtetAung;
diff --git a/src/components/Contributors/YeHtetAung/components/Intro.tsx b/src/components/Contributors/YeHtetAung/components/Intro.tsx
new file mode 100644
index 0000000..63055d3
--- /dev/null
+++ b/src/components/Contributors/YeHtetAung/components/Intro.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+const Intro = () => {
+	return (
+		<div>
+			<h2 className="text_shadows">Ye Htet Aung</h2>
+			<span className="text-lg">
+				I&apos;m full stack developer with 1 year of experience. Now I currently
+				working with React, React Native, Nextjs and Nodejs.
+			</span>
+		</div>
+	);
+};
+
+export default Intro;
diff --git a/src/components/Contributors/YeHtetAung/components/Profile.tsx b/src/components/Contributors/YeHtetAung/components/Profile.tsx
new file mode 100644
index 0000000..c4d29b2
--- /dev/null
+++ b/src/components/Contributors/YeHtetAung/components/Profile.tsx
@@ -0,0 +1,66 @@
+/* eslint-disable @next/next/no-img-element */
+import React from "react";
+import { Profile } from "../types";
+
+import { FaLinkedin, FaFacebook, FaGithub } from "react-icons/fa";
+import { SiGmail } from "react-icons/si";
+
+const Profile = () => {
+	const profiles: Profile[] = [
+		{
+			title: "Zen",
+			url: "https://github.com/yellhtetaung",
+			icon: FaGithub,
+			iconColor: "#1F2328",
+		},
+		{
+			title: "Ye Htet Aung",
+			url: "https://www.facebook.com/yehtetaungxzen",
+			icon: FaFacebook,
+			iconColor: "#0765FF",
+		},
+		{
+			title: "Ye Htet Aung",
+			url: "https://www.linkedin.com/in/yellhtetaung2488/",
+			icon: FaLinkedin,
+			iconColor: "#0B65C2",
+		},
+		{
+			title: "yehtetaung.dev@gmail.com",
+			url: "mailto:yehtetaung.dev@gmail.com",
+			icon: SiGmail,
+			iconColor: "#000000",
+		},
+	];
+
+	return (
+		<div className="w-full md:w-1/2 mb-10 md:me-5 md:mb-0 flex flex-col items-center">
+			<img
+				src="https://yehtetaung-dev.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-image.c39e72b0.jpg&w=384&q=95"
+				className="w-[160px] h-[160px] border-4 rounded-full object-cover"
+				alt="yehtetaung"
+			/>
+
+			<div className="w-full h-full p-5 mt-10 flex justify-center gap-5 md:justify-start md:gap-0 md:flex-col md:bg-[rgba(255,255,255,0.6)] md:backdrop-blur-3xl md:rounded-xl md:shadow-xl">
+				{profiles.map((profile) => (
+					<a
+						href={profile.url}
+						target="_blank"
+						key={profile.url}
+						className="my-3 flex items-center gap-3 hover:scale-125 md:hover:scale-100"
+					>
+						<profile.icon
+							className="text-2xl"
+							style={{ color: profile.iconColor }}
+						/>
+						<span className="text-black text-sm hover:text-cyan-800 hidden md:inline">
+							{profile.title}
+						</span>
+					</a>
+				))}
+			</div>
+		</div>
+	);
+};
+
+export default Profile;
diff --git a/src/components/Contributors/YeHtetAung/components/Projects.tsx b/src/components/Contributors/YeHtetAung/components/Projects.tsx
new file mode 100644
index 0000000..65a700b
--- /dev/null
+++ b/src/components/Contributors/YeHtetAung/components/Projects.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+const Projects = () => {
+	return (
+		<div className="w-full mt-10">
+			<h4 className="text-2xl font-bold my-5">Projects</h4>
+			<span>Comming Soon....</span>
+		</div>
+	);
+};
+
+export default Projects;
diff --git a/src/components/Contributors/YeHtetAung/components/Skills.tsx b/src/components/Contributors/YeHtetAung/components/Skills.tsx
new file mode 100644
index 0000000..b65c850
--- /dev/null
+++ b/src/components/Contributors/YeHtetAung/components/Skills.tsx
@@ -0,0 +1,68 @@
+import { Skills } from "../types";
+import {
+	TbBrandTypescript,
+	TbBrandTailwind,
+	TbBrandBootstrap,
+	TbBrandMongodb,
+	TbBrandNextjs,
+	TbBrandHtml5,
+	TbBrandCss3,
+	TbBrandMysql,
+	TbBrandJavascript,
+	TbBrandReact,
+	TbBrandReactNative,
+	TbBrandNodejs,
+	TbBrandPrisma,
+	TbBrandFigma,
+	TbBrandUbuntu,
+	TbBrandGithub,
+} from "react-icons/tb";
+
+const SkillsComponent = () => {
+	const skills: Skills[] = [
+		{ title: "html", bg: "#DC4A25", icon: TbBrandHtml5 },
+		{ title: "css", bg: "#244BDD", icon: TbBrandCss3 },
+		{ title: "javascript", bg: "#EFD81A", icon: TbBrandJavascript, text: true },
+		{
+			title: "typescript",
+			bg: "#3077C6",
+			icon: TbBrandTypescript,
+		},
+		{ title: "tailwindcss", bg: "#38BDF8", icon: TbBrandTailwind },
+		{ title: "bootstrap", bg: "#7A10F7", icon: TbBrandBootstrap },
+		{ title: "react", bg: "#0A7EA3", icon: TbBrandReact },
+		{ title: "react native", bg: "#0A7EA3", icon: TbBrandReactNative },
+		{ title: "nextjs", bg: "#000000", icon: TbBrandNextjs },
+		{ title: "nodejs", bg: "#509F43", icon: TbBrandNodejs },
+		{ title: "mysql", bg: "#3E6E93", icon: TbBrandMysql },
+		{ title: "mongodb", bg: "#00EC64", icon: TbBrandMongodb, text: true },
+		{ title: "prisma", bg: "#2D3748", icon: TbBrandPrisma },
+		{ title: "figma", bg: "#2B2F41", icon: TbBrandFigma },
+		{ title: "linux", bg: "#DE4F21", icon: TbBrandUbuntu },
+		{ title: "github", bg: "#1F2229", icon: TbBrandGithub },
+	];
+
+	return (
+		<div className="w-full mt-10">
+			<h4 className="text-2xl font-bold my-5">Skills</h4>
+
+			<div className="flex flex-wrap gap-3">
+				{skills.map((skill) => (
+					<div
+						key={skill.title}
+						className="flex gap-2 justify-center items-center p-2 rounded-full text-sm uppercase font-semibold cursor-pointer hover:scale-110 transition-all shadow-lg"
+						style={{
+							background: skill.bg,
+							color: skill.text ? "black" : "white",
+						}}
+					>
+						<skill.icon className="text-xl" />
+						{skill.title}
+					</div>
+				))}
+			</div>
+		</div>
+	);
+};
+
+export default SkillsComponent;
diff --git a/src/components/Contributors/YeHtetAung/types.d.ts b/src/components/Contributors/YeHtetAung/types.d.ts
new file mode 100644
index 0000000..3f27bb5
--- /dev/null
+++ b/src/components/Contributors/YeHtetAung/types.d.ts
@@ -0,0 +1,13 @@
+export interface Skills {
+	title: string;
+	bg?: string;
+	text?: boolean;
+	icon?: any;
+}
+
+export interface Profile {
+	title: string;
+	url: string;
+	icon?: any;
+	iconColor?: string;
+}
diff --git a/src/components/Profile/ProfileCardList/ProfileCardList.tsx b/src/components/Profile/ProfileCardList/ProfileCardList.tsx
index ad044c9..6b7a634 100644
--- a/src/components/Profile/ProfileCardList/ProfileCardList.tsx
+++ b/src/components/Profile/ProfileCardList/ProfileCardList.tsx
@@ -15,93 +15,93 @@ import { useState } from "react";
 import { IoPeople } from "react-icons/io5";
 
 type TPropsProfileCardList = {
-  profiles: Profile[];
+	profiles: Profile[];
 };
 
 const ProfileCardList = ({ profiles }: TPropsProfileCardList) => {
-  const searchParams = useSearchParams();
-  const initSearchTag = searchParams.get("tag") ?? "";
-  const {
-    searchTag,
-    uniqueTagColors,
-    uniqueTags,
-    searchedTags,
-    filteredProfiles,
-    searchByName,
-    handleSearchByName,
-    handleSearchTag,
-  } = useProfileHook(profiles, initSearchTag);
+	const searchParams = useSearchParams();
+	const initSearchTag = searchParams.get("tag") ?? "";
+	const {
+		searchTag,
+		uniqueTagColors,
+		uniqueTags,
+		searchedTags,
+		filteredProfiles,
+		searchByName,
+		handleSearchByName,
+		handleSearchTag,
+	} = useProfileHook(profiles, initSearchTag);
 
-  return (
-    <>
-      <motion.div
-        initial="hidden"
-        animate="visible"
-        transition={{ staggerChildren: 0.005 }}
-        className="relative"
-      >
-        {uniqueTagColors?.length &&
-          uniqueTags.map((tag, i) => (
-            <motion.span
-              key={tag}
-              variants={opacityAnimation}
-              className="inline-block"
-            >
-              <Tag
-                tag={tag}
-                searchTag={searchTag}
-                bgColor={uniqueTagColors[i]}
-                onClick={handleSearchTag}
-              />
-            </motion.span>
-          ))}
-      </motion.div>
+	return (
+		<>
+			<motion.div
+				initial="hidden"
+				animate="visible"
+				transition={{ staggerChildren: 0.005 }}
+				className="relative"
+			>
+				{uniqueTagColors?.length &&
+					uniqueTags.map((tag, i) => (
+						<motion.span
+							key={tag}
+							variants={opacityAnimation}
+							className="inline-block"
+						>
+							<Tag
+								tag={tag}
+								searchTag={searchTag}
+								bgColor={uniqueTagColors[i]}
+								onClick={handleSearchTag}
+							/>
+						</motion.span>
+					))}
+			</motion.div>
 
-      <div className="flex flex-col gap-3 md:flex-row mt-2 md:items-center">
-        <input
-          placeholder="Search by name..."
-          className={cn(
-            "rounded-xl outline-none py-1 inline-block px-3 text-black text-base md:min-w-[300px]",
-            titleFont.className
-          )}
-          value={searchByName}
-          onChange={handleSearchByName}
-        />
-        <TitleText tag="h3" className="text-sm ">
-          <IoPeople className="inline-block -top-[2px] ml-1 mr-2 relative" />
-          Total Profiles :{filteredProfiles.length}
-        </TitleText>
+			<div className="flex flex-col gap-3 md:flex-row mt-2 md:items-center">
+				<input
+					placeholder="Search by name..."
+					className={cn(
+						"rounded-xl outline-none py-1 inline-block px-3 text-black text-base md:min-w-[300px]",
+						titleFont.className
+					)}
+					value={searchByName}
+					onChange={handleSearchByName}
+				/>
+				<TitleText tag="h3" className="text-sm ">
+					<IoPeople className="inline-block -top-[2px] ml-1 mr-2 relative" />
+					Total Profiles :{filteredProfiles.length}
+				</TitleText>
 
-        {uniqueTagColors?.length &&
-          searchedTags.map((tag, i) => (
-            <Tag
-              key={`distincted_${tag}`}
-              tag={tag}
-              searchTag={searchTag}
-              bgColor={uniqueTagColors[i]}
-              onClick={handleSearchTag}
-            />
-          ))}
-      </div>
+				{uniqueTagColors?.length &&
+					searchedTags.map((tag, i) => (
+						<Tag
+							key={`distincted_${tag}`}
+							tag={tag}
+							searchTag={searchTag}
+							bgColor={uniqueTagColors[i]}
+							onClick={handleSearchTag}
+						/>
+					))}
+			</div>
 
-      <SpacingDivider size="lg" />
+			<SpacingDivider size="lg" />
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 relative">
-        {filteredProfiles.map((profile) => (
-          <ProfileCardItem
-            key={profile._id}
-            _id={profile._id}
-            name={profile.name}
-            image={profile.image}
-            slugAsParams={profile.slugAsParams}
-            description={profile.description}
-            tags={profile.tags}
-            searchTag={searchTag}
-            handleSearchTag={handleSearchTag}
-          />
-        ))}
-      </div>
-    </>
-  );
+			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 relative">
+				{filteredProfiles.map((profile) => (
+					<ProfileCardItem
+						key={profile._id}
+						_id={profile._id}
+						name={profile.name}
+						image={profile.image}
+						slugAsParams={profile.slugAsParams}
+						description={profile.description}
+						tags={profile.tags}
+						searchTag={searchTag}
+						handleSearchTag={handleSearchTag}
+					/>
+				))}
+			</div>
+		</>
+	);
 };
 export default ProfileCardList;
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index bf2a446..8d91675 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -18,3 +18,4 @@
 @import "profiles/aungkoko";
 @import "profiles/peter";
 @import "profiles/jiro";
+@import "profiles/yehtetaung";
diff --git a/src/styles/profiles/_yehtetaung.scss b/src/styles/profiles/_yehtetaung.scss
new file mode 100644
index 0000000..67f468e
--- /dev/null
+++ b/src/styles/profiles/_yehtetaung.scss
@@ -0,0 +1,84 @@
+:root {
+	--color-primary: #ffffff;
+	--color-secondary: #f4f4f4;
+	--color-tertiary: #e4e4e4;
+	--color-quaternary: #d4d4d4;
+	--color-quinary: #c4c4c4;
+}
+
+.text_shadows {
+	text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary),
+		9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
+	font-family: bungee, sans-serif;
+	font-weight: 800;
+	text-transform: uppercase;
+	font-size: calc(2rem + 1vw);
+	margin: 0;
+	color: var(--color-primary);
+	animation: shadows 1.2s ease-in infinite, move 1.2s ease-in infinite;
+	letter-spacing: 0.4rem;
+}
+
+@keyframes shadows {
+	0% {
+		text-shadow: none;
+	}
+	10% {
+		text-shadow: 3px 3px 0 var(--color-secondary);
+	}
+	20% {
+		text-shadow: 3px 3px 0 var(--color-secondary),
+			6px 6px 0 var(--color-tertiary);
+	}
+	30% {
+		text-shadow: 3px 3px 0 var(--color-secondary),
+			6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
+	}
+	40% {
+		text-shadow: 3px 3px 0 var(--color-secondary),
+			6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
+			12px 12px 0 var(--color-quinary);
+	}
+	50% {
+		text-shadow: 3px 3px 0 var(--color-secondary),
+			6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
+			12px 12px 0 var(--color-quinary);
+	}
+	60% {
+		text-shadow: 3px 3px 0 var(--color-secondary),
+			6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary),
+			12px 12px 0 var(--color-quinary);
+	}
+	70% {
+		text-shadow: 3px 3px 0 var(--color-secondary),
+			6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
+	}
+	80% {
+		text-shadow: 3px 3px 0 var(--color-secondary),
+			6px 6px 0 var(--color-tertiary);
+	}
+	90% {
+		text-shadow: 3px 3px 0 var(--color-secondary);
+	}
+	100% {
+		text-shadow: none;
+	}
+}
+
+@keyframes move {
+	0% {
+		transform: translate(0px, 0px);
+	}
+	40% {
+		transform: translate(-12px, -12px);
+	}
+	50% {
+		transform: translate(-12px, -12px);
+	}
+	60% {
+		transform: translate(-12px, -12px);
+	}
+	100% {
+		transform: translate(0px, 0px);
+	}
+}