diff --git a/components/IntroductionArticle.js b/components/IntroItem.js
similarity index 79%
rename from components/IntroductionArticle.js
rename to components/IntroItem.js
index 57719fa..92823a8 100644
--- a/components/IntroductionArticle.js
+++ b/components/IntroItem.js
@@ -3,7 +3,7 @@ import { ACTIONS } from "../pages/_app";
 import FormLabel from "./forms/FormLabel";
 import FormInput from "./forms/FormInput";
 
-const IntroductionArticle = forwardRef((props, ref) => {
+const IntroItem = forwardRef((props, ref) => {
   const { formLabelText, formLabelIcon, section, type, inputPlaceholder } =
     props;
   return (
@@ -20,6 +20,6 @@ const IntroductionArticle = forwardRef((props, ref) => {
   );
 });
 
-IntroductionArticle.displayName = "IntroductionArticle";
+IntroItem.displayName = "IntroItem";
 
-export default IntroductionArticle;
+export default IntroItem;
diff --git a/components/IntroductionArticleWithLink.js b/components/IntroLinkItem.js
similarity index 76%
rename from components/IntroductionArticleWithLink.js
rename to components/IntroLinkItem.js
index a0d3728..de27a56 100644
--- a/components/IntroductionArticleWithLink.js
+++ b/components/IntroLinkItem.js
@@ -1,8 +1,8 @@
 import React, { useContext, forwardRef } from "react";
 import { ACTIONS } from "../pages/_app";
-import SocialInput from "./SocialInput";
+import SocialInput from "./forms/MinimalFormInput";
 
-const IntroductionArticleWithLink = forwardRef((props, ref) => {
+const IntroLinkItem = forwardRef((props, ref) => {
   const { section, type, inputPlaceholder, linkPrefix } = props;
   return (
     <article className="flex flex-col flex-1 w-full">
@@ -22,6 +22,6 @@ const IntroductionArticleWithLink = forwardRef((props, ref) => {
   );
 });
 
-IntroductionArticleWithLink.displayName = "IntroductionArticleWithLink";
+IntroLinkItem.displayName = "IntroLinkItem";
 
-export default IntroductionArticleWithLink;
+export default IntroLinkItem;
diff --git a/components/IntroductionTextarea.js b/components/IntroTextarea.js
similarity index 79%
rename from components/IntroductionTextarea.js
rename to components/IntroTextarea.js
index f3bc1bf..1a6af65 100644
--- a/components/IntroductionTextarea.js
+++ b/components/IntroTextarea.js
@@ -3,7 +3,7 @@ import { ACTIONS } from "../pages/_app";
 import FormLabel from "./forms/FormLabel";
 import FormTextarea from "./forms/FormTextarea";
 
-const IntroductionTextarea = forwardRef((props, ref) => {
+const IntroTextarea = forwardRef((props, ref) => {
   const { formLabelText, formLabelIcon, section, type, inputPlaceholder } =
     props;
   return (
@@ -20,6 +20,6 @@ const IntroductionTextarea = forwardRef((props, ref) => {
   );
 });
 
-IntroductionTextarea.displayName = "IntroductionTextarea";
+IntroTextarea.displayName = "IntroTextarea";
 
-export default IntroductionTextarea;
+export default IntroTextarea;
diff --git a/components/SocialArticle.js b/components/SocialItem.js
similarity index 84%
rename from components/SocialArticle.js
rename to components/SocialItem.js
index 837f319..0695fb1 100644
--- a/components/SocialArticle.js
+++ b/components/SocialItem.js
@@ -2,9 +2,9 @@ import React, { useContext, forwardRef } from "react";
 import Image from "next/image";
 import { StateContext } from "../pages/_app";
 import FormLabel from "./forms/FormLabel";
-import SocialInput from "./SocialInput";
+import MinimalFormInput from "./forms/MinimalFormInput";
 
-const SocialArticle = forwardRef((props, ref) => {
+const SocialItem = forwardRef((props, ref) => {
   const {
     formLabelText,
     linkPrefix,
@@ -30,7 +30,7 @@ const SocialArticle = forwardRef((props, ref) => {
         <div className="flex items-center text-sm text-dark-300 bg-dark-900">
           <span className="py-2 pl-2 mt-0 mb-0 leading-4">{linkPrefix}</span>
         </div>
-        <SocialInput
+        <MinimalFormInput
           ref={ref}
           section={section}
           type={account}
@@ -42,6 +42,6 @@ const SocialArticle = forwardRef((props, ref) => {
   );
 });
 
-SocialArticle.displayName = "SocialArticle";
+SocialItem.displayName = "SocialItem";
 
-export default SocialArticle;
+export default SocialItem;
diff --git a/components/buttons/AddRepo.js b/components/buttons/AddRepo.js
index fd95398..d02d735 100644
--- a/components/buttons/AddRepo.js
+++ b/components/buttons/AddRepo.js
@@ -1,7 +1,7 @@
 import React, { useContext } from "react";
 import { StateContext } from "../../pages/_app";
 
-const AddButton = ({ action, repoNumberToAdd }) => {
+const AddRepo = ({ action, repoNumberToAdd }) => {
   const { state, dispatch } = useContext(StateContext);
   return (
     <button
@@ -34,4 +34,4 @@ const AddButton = ({ action, repoNumberToAdd }) => {
   );
 };
 
-export default AddButton;
+export default AddRepo;
diff --git a/components/MenuItem.js b/components/buttons/MenuItem.js
similarity index 89%
rename from components/MenuItem.js
rename to components/buttons/MenuItem.js
index 779142d..c40e77e 100644
--- a/components/MenuItem.js
+++ b/components/buttons/MenuItem.js
@@ -1,7 +1,7 @@
 import React, { useContext } from "react";
 
-import { ACTIONS } from "../pages/_app";
-import { StateContext } from "../pages/_app";
+import { ACTIONS } from "../../pages/_app";
+import { StateContext } from "../../pages/_app";
 
 const MenuItem = ({ text, section, setSidebarOpen }) => {
   const { state, dispatch } = useContext(StateContext);
diff --git a/components/BadgeStyleSelector.js b/components/buttons/StyleBadgeButton.js
similarity index 94%
rename from components/BadgeStyleSelector.js
rename to components/buttons/StyleBadgeButton.js
index 64346ac..7dcc8d6 100644
--- a/components/BadgeStyleSelector.js
+++ b/components/buttons/StyleBadgeButton.js
@@ -1,9 +1,9 @@
 import React, { useContext } from "react";
-import { StateContext } from "../pages/_app";
+import { StateContext } from "../../pages/_app";
 
-const BadgeStyleSelector = ({
+const StyleBadgeButton = ({
   badgeText,
-  handleColorToggle,
+  handleStyleBadge,
   badgeKeyToStyle,
   badgeKeyToHide,
   colorList,
@@ -14,7 +14,7 @@ const BadgeStyleSelector = ({
   return (
     <article className={`flex flex-col`}>
       <button
-        onClick={handleColorToggle}
+        onClick={handleStyleBadge}
         name={badgeKeyToHide}
         disabled={!badgesShowing ? true : false}
         className={`border flex flex-col text-xs font-semibold uppercase border-dark-600 items-start group ${
@@ -84,4 +84,4 @@ const BadgeStyleSelector = ({
   );
 };
 
-export default BadgeStyleSelector;
+export default StyleBadgeButton;
diff --git a/components/BadgeSelector.js b/components/buttons/ToggleBadgeButton.js
similarity index 75%
rename from components/BadgeSelector.js
rename to components/buttons/ToggleBadgeButton.js
index 980ce37..9cd2fb6 100644
--- a/components/BadgeSelector.js
+++ b/components/buttons/ToggleBadgeButton.js
@@ -1,14 +1,13 @@
 import React, { useContext } from "react";
-import { StateContext } from "../pages/_app";
-import { FormLabel } from "./forms/FormLabel";
+import { StateContext } from "../../pages/_app";
 
-const BadgeSelector = ({
+const ToggleBadgeButton = ({
   badgeType,
   badgeText,
   profileLink,
-  handleBadgeClick,
+  handleBadgeToggle,
 }) => {
-  const { state, dispatch } = useContext(StateContext);
+  const { state } = useContext(StateContext);
   return (
     <label
       className={`py-3 w-full flex uppercase font-semibold group select-none border border-dark-600 px-2 ${
@@ -21,7 +20,7 @@ const BadgeSelector = ({
         type="checkbox"
         name={badgeType}
         value={state.badges[badgeType].selected}
-        onChange={handleBadgeClick}
+        onChange={handleBadgeToggle}
         className="checkbox-input"
         checked={state.badges[badgeType].selected}
         disabled={
@@ -33,4 +32,4 @@ const BadgeSelector = ({
   );
 };
 
-export default BadgeSelector;
+export default ToggleBadgeButton;
diff --git a/components/BadgeShowSelector.js b/components/buttons/ToggleBadgeElementCheckbox.js
similarity index 76%
rename from components/BadgeShowSelector.js
rename to components/buttons/ToggleBadgeElementCheckbox.js
index 73177de..7307938 100644
--- a/components/BadgeShowSelector.js
+++ b/components/buttons/ToggleBadgeElementCheckbox.js
@@ -1,9 +1,9 @@
 import React, { useContext } from "react";
-import { StateContext } from "../pages/_app";
+import { StateContext } from "../../pages/_app";
 
-const BadgeShowSelector = ({
+const ToggleBadgeElementCheckbox = ({
   badgeText,
-  handleBadgeShowClick,
+  handleBadgeElementToggle,
   badgeKeyToHide,
 }) => {
   const { state, dispatch } = useContext(StateContext);
@@ -15,7 +15,7 @@ const BadgeShowSelector = ({
         type="checkbox"
         name={badgeKeyToHide}
         value={state.badges.githubStatsCard[badgeKeyToHide]}
-        onChange={handleBadgeShowClick}
+        onChange={handleBadgeElementToggle}
         className="checkbox-input"
         checked={state.badges.githubStatsCard[badgeKeyToHide]}
       />
@@ -24,4 +24,4 @@ const BadgeShowSelector = ({
   );
 };
 
-export default BadgeShowSelector;
+export default ToggleBadgeElementCheckbox;
diff --git a/components/SocialInput.js b/components/forms/MinimalFormInput.js
similarity index 66%
rename from components/SocialInput.js
rename to components/forms/MinimalFormInput.js
index 8bd5b9a..6b7ea80 100644
--- a/components/SocialInput.js
+++ b/components/forms/MinimalFormInput.js
@@ -1,15 +1,15 @@
 import React, { useContext, forwardRef } from "react";
-import { StateContext } from "../pages/_app";
+import { StateContext } from "../../pages/_app";
 
-const SocialInput = forwardRef((props, ref) => {
+const MinimalFormInput = forwardRef((props, ref) => {
   const { placeholder, action, type, section } = props;
   const { state, dispatch } = useContext(StateContext);
   return (
     <input
-      className="minimal-input-field"
+      name={type}
+      className="minimal-input-field appearance-none"
       placeholder={placeholder}
       ref={ref}
-      name={type}
       value={state[section][type]["linkSuffix"]}
       onChange={() =>
         dispatch({
@@ -21,6 +21,6 @@ const SocialInput = forwardRef((props, ref) => {
   );
 });
 
-SocialInput.displayName = "SocialInput";
+MinimalFormInput.displayName = "MinimalFormInput";
 
-export default SocialInput;
+export default MinimalFormInput;
diff --git a/pages/_app.js b/pages/_app.js
index 25555ae..4e11fd0 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -628,6 +628,11 @@ const initialState = {
       linkPrefix: "https://www.codesandbox.com/",
       linkSuffix: "",
     },
+    codepen: {
+      path: "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/codepen.svg",
+      linkPrefix: "https://www.codepen.com/",
+      linkSuffix: "",
+    },
     stackoverflow: {
       path: "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/stackoverflow.svg",
       linkPrefix: "https://www.stackoverflow.com/users/",
diff --git a/pages/index.js b/pages/index.js
index ce1c903..c5ad12c 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -3,24 +3,24 @@ import Head from "next/head";
 // Import state and actions
 import { ACTIONS } from "./_app";
 import { StateContext } from "./_app";
-import { colorStore } from "./_app";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
+import { colorStore } from "./_app";
 // Import components
-import MenuItem from "../components/MenuItem";
+import MenuItem from "../components/buttons/MenuItem";
 import FormInput from "../components/forms/FormInput";
 import SectionHeader from "../components/SectionHeader";
-import SocialArticle from "../components/SocialArticle";
-import IntroductionArticle from "../components/IntroductionArticle";
+import SocialItem from "../components/SocialItem";
+import IntroItem from "../components/IntroItem";
+import IntroLinkItem from "../components/IntroLinkItem";
+import IntroTextarea from "../components/IntroTextarea";
 import IconSelector from "../components/IconSelector";
-import BadgeSelector from "../components/BadgeSelector";
-import IntroductionArticleWithLink from "../components/IntroductionArticleWithLink";
-import BadgeShowSelector from "../components/BadgeShowSelector";
-import BadgeStyleSelector from "../components/BadgeStyleSelector";
-import AddButton from "../components/buttons/AddRepo";
-import IntroductionTextarea from "../components/IntroductionTextarea";
+import ToggleBadgeButton from "../components/buttons/ToggleBadgeButton";
+import ToggleBadgeElementCheckbox from "../components/buttons/ToggleBadgeElementCheckbox";
+import StyleBadgeButton from "../components/buttons/StyleBadgeButton";
 import NextSection from "../components/buttons/NextSection";
 import PreviousSection from "../components/buttons/PreviousSection";
 import CopyrightLabel from "../components/misc/CopyrightLabel";
+import AddRepo from "../components/buttons/AddRepo";
 import DeleteRepo from "../components/buttons/DeleteRepo";
 let TurndownService = require("turndown").default;
 
@@ -38,6 +38,7 @@ export default function Home() {
     },
     socials: {
       behance: "",
+      codepen: "",
       codesandbox: "",
       devdotto: "",
       discord: "",
@@ -79,6 +80,7 @@ export default function Home() {
       behavior: "smooth",
       block: "start",
     });
+
   const copyToClipBoard = async (copyMe) => {
     try {
       await navigator.clipboard.writeText(copyMe);
@@ -100,7 +102,6 @@ export default function Home() {
   const socialsRef = useRef(null);
   const badgesTitleRef = useRef(null);
   const badgesRef = useRef(null);
-  const supportTitleRef = useRef(null);
   const supportRef = useRef(null);
 
   // Introduction refs
@@ -120,6 +121,7 @@ export default function Home() {
   // Socials refs
   const behanceRef = useRef();
   const codesandboxRef = useRef();
+  const codepenRef = useRef();
   const devdottoRef = useRef();
   const discordRef = useRef();
   const dribbbleRef = useRef();
@@ -258,7 +260,7 @@ export default function Home() {
     } else return;
   }, [state.section]);
 
-  const handleBadgeClick = (e) => {
+  const handleBadgeToggle = (e) => {
     dispatch({
       type: ACTIONS.TOGGLE_BADGE,
       payload: {
@@ -267,7 +269,7 @@ export default function Home() {
     });
   };
 
-  const handleBadgeShowClick = (e) => {
+  const handleBadgeElementToggle = (e) => {
     dispatch({
       type: ACTIONS.TOGGLE_GITHUB_STATS,
       payload: {
@@ -276,7 +278,7 @@ export default function Home() {
     });
   };
 
-  const handleColorToggle = (e) => {
+  const handleStyleBadge = (e) => {
     dispatch({
       type: ACTIONS.TOGGLE_STYLE_COLOR,
       payload: {
@@ -460,7 +462,7 @@ export default function Home() {
                 <div ref={introductionAnchorRef}></div>
                 <section className="flex flex-col p-6 gap-y-5">
                   {/* Name */}
-                  <IntroductionArticle
+                  <IntroItem
                     ref={nameRef}
                     formLabelText={"Hi! My name is:"}
                     formLabelIcon={"👋"}
@@ -469,7 +471,7 @@ export default function Home() {
                     inputPlaceholder={"Peter Parker"}
                   />
                   {/* Short Description */}
-                  <IntroductionArticle
+                  <IntroItem
                     ref={shortDescriptionRef}
                     formLabelText={"Subtitle:"}
                     formLabelIcon={"💡"}
@@ -478,7 +480,7 @@ export default function Home() {
                     inputPlaceholder={"Web Developer and Designer"}
                   />
                   {/* Long Description */}
-                  <IntroductionTextarea
+                  <IntroTextarea
                     ref={longDescriptionRef}
                     formLabelText={"Long Description:"}
                     formLabelIcon={"✏️"}
@@ -490,7 +492,7 @@ export default function Home() {
                   />
                   {/* Location */}
                   <h4 className="mb-0">About me</h4>
-                  <IntroductionArticle
+                  <IntroItem
                     ref={locationRef}
                     formLabelText={"I'm based in:"}
                     formLabelIcon={"🌍"}
@@ -500,7 +502,7 @@ export default function Home() {
                   />
                   {/* Portfolio  */}
                   <article>
-                    <IntroductionArticle
+                    <IntroItem
                       ref={portfolioTitleRef}
                       formLabelText={"See my portfolio:"}
                       formLabelIcon={"🖥️"}
@@ -508,7 +510,7 @@ export default function Home() {
                       type={"portfolioTitle"}
                       inputPlaceholder={"MyPortfolio"}
                     />
-                    <IntroductionArticleWithLink
+                    <IntroLinkItem
                       ref={portfolioLinkRef}
                       section={"introduction"}
                       linkPrefix={"http://"}
@@ -517,7 +519,7 @@ export default function Home() {
                     />
                   </article>
                   {/* Email  */}
-                  <IntroductionArticle
+                  <IntroItem
                     ref={emailMeRef}
                     formLabelText={"Contact me at:"}
                     formLabelIcon={"✉️"}
@@ -527,7 +529,7 @@ export default function Home() {
                   />
                   {/* Currently working on */}
                   <article>
-                    <IntroductionArticle
+                    <IntroItem
                       ref={workingOnTitleRef}
                       formLabelText={"I'm currently working on:"}
                       formLabelIcon={"🚀"}
@@ -535,7 +537,7 @@ export default function Home() {
                       type={"workingOnTitle"}
                       inputPlaceholder={"MyApp"}
                     />
-                    <IntroductionArticleWithLink
+                    <IntroLinkItem
                       ref={workingOnLinkRef}
                       section={"introduction"}
                       type={"workingOnLink"}
@@ -545,7 +547,7 @@ export default function Home() {
                   </article>
 
                   {/* Currently learning */}
-                  <IntroductionArticle
+                  <IntroItem
                     ref={learningRef}
                     formLabelText={"I'm currently learning:"}
                     formLabelIcon={"🧠"}
@@ -554,7 +556,7 @@ export default function Home() {
                     inputPlaceholder={"a new framework"}
                   />
                   {/* Collaborate on */}
-                  <IntroductionArticle
+                  <IntroItem
                     ref={collaborateOnRef}
                     formLabelText={"I'm open to collaborating on:"}
                     formLabelIcon={"🤝"}
@@ -563,7 +565,7 @@ export default function Home() {
                     inputPlaceholder={"interesting projects"}
                   />
                   {/* Additional info */}
-                  <IntroductionArticle
+                  <IntroItem
                     ref={additionalInfoRef}
                     formLabelText={"Anything else:"}
                     formLabelIcon={"⚡"}
@@ -648,7 +650,7 @@ export default function Home() {
                 <div ref={socialsAnchorRef}></div>
                 <section className="flex flex-col p-6 gap-y-5">
                   {/* GitHub Input */}
-                  <SocialArticle
+                  <SocialItem
                     ref={githubRef}
                     section={"socials"}
                     account={"github"}
@@ -659,7 +661,7 @@ export default function Home() {
                   />
 
                   {/* Twitter Input */}
-                  <SocialArticle
+                  <SocialItem
                     ref={twitterRef}
                     section={"socials"}
                     account={"twitter"}
@@ -670,7 +672,7 @@ export default function Home() {
                   />
 
                   {/* Hashnode Input */}
-                  <SocialArticle
+                  <SocialItem
                     ref={hashnodeRef}
                     section={"socials"}
                     account={"hashnode"}
@@ -681,7 +683,7 @@ export default function Home() {
                   />
 
                   {/* Medium Input */}
-                  <SocialArticle
+                  <SocialItem
                     ref={mediumRef}
                     section={"socials"}
                     account={"medium"}
@@ -692,7 +694,7 @@ export default function Home() {
                   />
 
                   {/* DevDotTo Input */}
-                  <SocialArticle
+                  <SocialItem
                     ref={devdottoRef}
                     section={"socials"}
                     account={"devdotto"}
@@ -703,7 +705,7 @@ export default function Home() {
                   />
 
                   {/* LinkedIn Input */}
-                  <SocialArticle
+                  <SocialItem
                     ref={linkedinRef}
                     section={"socials"}
                     account={"linkedin"}
@@ -714,7 +716,7 @@ export default function Home() {
                   />
 
                   {/* Polywork Input */}
-                  <SocialArticle
+                  <SocialItem
                     ref={polyworkRef}
                     section={"socials"}
                     account={"polywork"}
@@ -725,7 +727,7 @@ export default function Home() {
                   />
 
                   {/* Twitch Input */}
-                  <SocialArticle
+                  <SocialItem
                     ref={twitchRef}
                     section={"socials"}
                     account={"twitch"}
@@ -736,7 +738,7 @@ export default function Home() {
                   />
 
                   {/* YouTube Input */}
-                  <SocialArticle
+                  <SocialItem
                     ref={youtubeRef}
                     section={"socials"}
                     account={"youtube"}
@@ -747,7 +749,7 @@ export default function Home() {
                   />
 
                   {/* Discord Input */}
-                  <SocialArticle
+                  <SocialItem
                     ref={discordRef}
                     section={"socials"}
                     account={"discord"}
@@ -758,7 +760,7 @@ export default function Home() {
                   />
 
                   {/* Instagram Input */}
-                  <SocialArticle
+                  <SocialItem
                     ref={instagramRef}
                     section={"socials"}
                     account={"instagram"}
@@ -769,7 +771,7 @@ export default function Home() {
                   />
 
                   {/* Facebook Input */}
-                  <SocialArticle
+                  <SocialItem
                     ref={facebookRef}
                     section={"socials"}
                     account={"facebook"}
@@ -780,7 +782,7 @@ export default function Home() {
                   />
 
                   {/* Dribbble Input */}
-                  <SocialArticle
+                  <SocialItem
                     ref={dribbbleRef}
                     section={"socials"}
                     account={"dribbble"}
@@ -791,7 +793,7 @@ export default function Home() {
                   />
 
                   {/* Behance Input */}
-                  <SocialArticle
+                  <SocialItem
                     ref={behanceRef}
                     section={"socials"}
                     account={"behance"}
@@ -802,7 +804,7 @@ export default function Home() {
                   />
 
                   {/* Code Sandbox Input */}
-                  <SocialArticle
+                  <SocialItem
                     ref={codesandboxRef}
                     section={"socials"}
                     account={"codesandbox"}
@@ -812,8 +814,19 @@ export default function Home() {
                     action={ACTIONS.ADD_SOCIAL_PROFILE}
                   />
 
+                  {/* Codepen Input */}
+                  <SocialItem
+                    ref={codepenRef}
+                    section={"socials"}
+                    account={"codepen"}
+                    inputPlaceholder={"yourname"}
+                    formLabelText={"Codepen profile:"}
+                    linkPrefix={state.socials.codepen.linkPrefix}
+                    action={ACTIONS.ADD_SOCIAL_PROFILE}
+                  />
+
                   {/* Stack Overflow Input */}
-                  <SocialArticle
+                  <SocialItem
                     ref={stackoverflowRef}
                     section={"socials"}
                     account={"stackoverflow"}
@@ -824,7 +837,7 @@ export default function Home() {
                   />
 
                   {/* RSS Input */}
-                  <SocialArticle
+                  <SocialItem
                     ref={rssRef}
                     section={"socials"}
                     account={"rss"}
@@ -866,41 +879,41 @@ export default function Home() {
                       </p>
                     ) : null}
                     <article className="grid grid-cols-1 gap-2 mb-4 xl:grid-cols-2">
-                      <BadgeStyleSelector
+                      <StyleBadgeButton
                         colorList={colorStore.lightColors}
                         badgeKeyToStyle={"titleColor"}
                         badgeText={"Title"}
-                        handleColorToggle={handleColorToggle}
+                        handleStyleBadge={handleStyleBadge}
                         badgeKeyToHide={"titleColorEdit"}
                         badgesShowing={badgesShowing}
                         handleChangeBadgeColor={handleChangeBadgeColor}
                       />
 
-                      <BadgeStyleSelector
+                      <StyleBadgeButton
                         colorList={colorStore.lightColors}
                         badgeKeyToStyle={"textColor"}
                         badgeText={"Text"}
-                        handleColorToggle={handleColorToggle}
+                        handleStyleBadge={handleStyleBadge}
                         badgeKeyToHide={"textColorEdit"}
                         badgesShowing={badgesShowing}
                         handleChangeBadgeColor={handleChangeBadgeColor}
                       />
 
-                      <BadgeStyleSelector
+                      <StyleBadgeButton
                         colorList={colorStore.lightColors}
                         badgeKeyToStyle={"iconColor"}
                         badgeText={"Icons"}
-                        handleColorToggle={handleColorToggle}
+                        handleStyleBadge={handleStyleBadge}
                         badgeKeyToHide={"iconColorEdit"}
                         badgesShowing={badgesShowing}
                         handleChangeBadgeColor={handleChangeBadgeColor}
                       />
 
-                      <BadgeStyleSelector
+                      <StyleBadgeButton
                         colorList={colorStore.darkColors}
                         badgeKeyToStyle={"bgColor"}
                         badgeText={"Background"}
-                        handleColorToggle={handleColorToggle}
+                        handleStyleBadge={handleStyleBadge}
                         badgeKeyToHide={"bgColorEdit"}
                         badgesShowing={badgesShowing}
                         handleChangeBadgeColor={handleChangeBadgeColor}
@@ -927,11 +940,11 @@ export default function Home() {
                     ) : null}
                     {/* GitHub Stats Card */}
                     <article>
-                      <BadgeSelector
+                      <ToggleBadgeButton
                         badgeType={"githubStatsCard"}
                         profileLink={"github"}
                         badgeText={"Stats Card"}
-                        handleBadgeClick={handleBadgeClick}
+                        handleBadgeToggle={handleBadgeToggle}
                       />
 
                       <article
@@ -945,70 +958,70 @@ export default function Home() {
                           Show:
                         </p>
                         <article className="grid grid-cols-1 gap-2 lg:grid-cols-2">
-                          <BadgeShowSelector
+                          <ToggleBadgeElementCheckbox
                             badgeKeyToHide={"stars"}
                             badgeText={"Stars"}
-                            handleBadgeShowClick={handleBadgeShowClick}
+                            handleBadgeElementToggle={handleBadgeElementToggle}
                           />
-                          <BadgeShowSelector
+                          <ToggleBadgeElementCheckbox
                             badgeKeyToHide={"commits"}
                             badgeText={"Commits"}
-                            handleBadgeShowClick={handleBadgeShowClick}
+                            handleBadgeElementToggle={handleBadgeElementToggle}
                           />
-                          <BadgeShowSelector
+                          <ToggleBadgeElementCheckbox
                             badgeKeyToHide={"prs"}
                             badgeText={"PRs"}
-                            handleBadgeShowClick={handleBadgeShowClick}
+                            handleBadgeElementToggle={handleBadgeElementToggle}
                           />
-                          <BadgeShowSelector
+                          <ToggleBadgeElementCheckbox
                             badgeKeyToHide={"issues"}
                             badgeText={"Issues"}
-                            handleBadgeShowClick={handleBadgeShowClick}
+                            handleBadgeElementToggle={handleBadgeElementToggle}
                           />
-                          <BadgeShowSelector
+                          <ToggleBadgeElementCheckbox
                             badgeKeyToHide={"contribs"}
                             badgeText={"Contributions"}
-                            handleBadgeShowClick={handleBadgeShowClick}
+                            handleBadgeElementToggle={handleBadgeElementToggle}
                           />
-                          <BadgeShowSelector
+                          <ToggleBadgeElementCheckbox
                             badgeKeyToHide={"privateCommits"}
                             badgeText={"Private Commits"}
-                            handleBadgeShowClick={handleBadgeShowClick}
+                            handleBadgeElementToggle={handleBadgeElementToggle}
                           />
                         </article>
                       </article>
                     </article>
 
-                    <BadgeSelector
+                    <ToggleBadgeButton
                       badgeType={"githubStreak"}
                       profileLink={"github"}
                       badgeText={"Commit Streak"}
-                      handleBadgeClick={handleBadgeClick}
+                      handleBadgeToggle={handleBadgeToggle}
                     />
 
                     {/* GitHub Commits Graph Badge */}
-                    <BadgeSelector
+                    <ToggleBadgeButton
                       badgeType={"githubCommitsGraph"}
                       profileLink={"github"}
                       badgeText={"Commits Graph"}
-                      handleBadgeClick={handleBadgeClick}
+                      handleBadgeToggle={handleBadgeToggle}
                     />
 
                     {/* Top Languages Card */}
-                    <BadgeSelector
+                    <ToggleBadgeButton
                       badgeType={"topLangsCard"}
                       profileLink={"github"}
                       badgeText={"Top Languages"}
-                      handleBadgeClick={handleBadgeClick}
+                      handleBadgeToggle={handleBadgeToggle}
                     />
 
                     {/* Repository Card */}
                     <article>
-                      <BadgeSelector
+                      <ToggleBadgeButton
                         badgeType={"reposCard"}
                         profileLink={"github"}
                         badgeText={"Top Repositories"}
-                        handleBadgeClick={handleBadgeClick}
+                        handleBadgeToggle={handleBadgeToggle}
                       />
 
                       <article
@@ -1084,7 +1097,7 @@ export default function Home() {
                         </article>
                         {state.badges.reposCard.repoTwo != null ? null : (
                           <>
-                            <AddButton
+                            <AddRepo
                               action={ACTIONS.ADD_REPO}
                               repoNumberToAdd={"repoTwo"}
                             />
@@ -1094,7 +1107,7 @@ export default function Home() {
                         {state.badges.reposCard.repoThree != null ||
                         state.badges.reposCard.repoTwo == null ? null : (
                           <>
-                            <AddButton
+                            <AddRepo
                               action={ACTIONS.ADD_REPO}
                               repoNumberToAdd={"repoThree"}
                             />
@@ -1105,7 +1118,7 @@ export default function Home() {
                         state.badges.reposCard.repoTwo == null ||
                         state.badges.reposCard.repoThree == null ? null : (
                           <>
-                            <AddButton
+                            <AddRepo
                               action={ACTIONS.ADD_REPO}
                               repoNumberToAdd={"repoFour"}
                             />
@@ -1115,11 +1128,11 @@ export default function Home() {
                     </article>
 
                     {/* GitHub Followers Badge */}
-                    <BadgeSelector
+                    <ToggleBadgeButton
                       badgeType={"githubFollowers"}
                       profileLink={"github"}
                       badgeText={"Follower Count"}
-                      handleBadgeClick={handleBadgeClick}
+                      handleBadgeToggle={handleBadgeToggle}
                     />
                   </article>
                   <article className="flex flex-col mb-4 gap-y-2">
@@ -1141,11 +1154,11 @@ export default function Home() {
                       </p>
                     ) : null}
                     {/* Twitter Followers Badge */}
-                    <BadgeSelector
+                    <ToggleBadgeButton
                       badgeType={"twitterFollowers"}
                       profileLink={"twitter"}
                       badgeText={"Follower Count"}
-                      handleBadgeClick={handleBadgeClick}
+                      handleBadgeToggle={handleBadgeToggle}
                     />
                   </article>
                   <article className="flex flex-col mb-4 gap-y-2">
@@ -1167,11 +1180,11 @@ export default function Home() {
                       </p>
                     ) : null}
                     {/* Twitch Channel Badge */}
-                    <BadgeSelector
+                    <ToggleBadgeButton
                       badgeType={"twitchStatus"}
                       profileLink={"twitch"}
                       badgeText={"Streaming Status"}
-                      handleBadgeClick={handleBadgeClick}
+                      handleBadgeToggle={handleBadgeToggle}
                     />
                   </article>
                   <section className="flex mt-4">
@@ -1197,7 +1210,7 @@ export default function Home() {
                 <div ref={supportAnchorRef}></div>
                 <section className="flex flex-col p-6 gap-y-4">
                   {/* GitHub Input */}
-                  <SocialArticle
+                  <SocialItem
                     ref={buymeacoffeeRef}
                     section={"support"}
                     account={"buymeacoffee"}
diff --git a/public/icons/socials/codepen.svg b/public/icons/socials/codepen.svg
new file mode 100644
index 0000000..fe0a22e
--- /dev/null
+++ b/public/icons/socials/codepen.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>CodePen</title><path d="M18.144 13.067v-2.134L16.55 12zm1.276 1.194a.628.628 0 01-.006.083l-.005.028-.011.053-.01.031c-.005.016-.01.031-.017.047l-.014.03a.78.78 0 01-.021.043l-.019.03a.57.57 0 01-.08.1l-.026.025a.602.602 0 01-.036.03l-.029.022-.01.008-6.782 4.522a.637.637 0 01-.708 0L4.864 14.79l-.01-.008a.599.599 0 01-.065-.052l-.026-.025-.032-.034-.021-.028a.588.588 0 01-.067-.11l-.014-.031a.644.644 0 01-.017-.047l-.01-.03c-.004-.018-.008-.036-.01-.054l-.006-.028a.628.628 0 01-.006-.083V9.739c0-.028.002-.055.006-.083l.005-.027.011-.054.01-.03a.574.574 0 01.12-.217l.031-.034.026-.025a.62.62 0 01.065-.052l.01-.008 6.782-4.521a.638.638 0 01.708 0l6.782 4.521.01.008.03.022.035.03c.01.008.017.016.026.025a.545.545 0 01.08.1l.019.03a.633.633 0 01.021.043l.014.03c.007.016.012.032.017.047l.01.031c.004.018.008.036.01.054l.006.027a.619.619 0 01.006.083zM12 0C5.373 0 0 5.372 0 12 0 18.627 5.373 24 12 24c6.628 0 12-5.372 12-12 0-6.627-5.372-12-12-12m0 10.492L9.745 12 12 13.51 14.255 12zm.638 4.124v2.975l4.996-3.33-2.232-1.493zm-6.272-.356l4.996 3.33v-2.974l-2.764-1.849zm11.268-4.52l-4.996-3.33v2.974l2.764 1.85zm-6.272-.356V6.41L6.366 9.74l2.232 1.493zm-5.506 1.549v2.134L7.45 12Z"/></svg>
\ No newline at end of file