diff --git a/components/articles/Contact.js b/components/articles/Contact.js
index 016a7fb..90bcb93 100644
--- a/components/articles/Contact.js
+++ b/components/articles/Contact.js
@@ -26,16 +26,16 @@ const Contact = () => {
             </form>
             <ul className="icons">
             <li><a href="#">
-                <FontAwesomeIcon icon={faTwitter} />
+                <FontAwesomeIcon className="fa-icon" icon={faTwitter} />
             </a></li>
             <li><a href="#">
-                <FontAwesomeIcon icon={faFacebook} />
+                <FontAwesomeIcon className="fa-icon" icon={faFacebook} />
             </a></li>
             <li><a href="#">
-                <FontAwesomeIcon icon={faInstagram} />
+                <FontAwesomeIcon className="fa-icon" icon={faInstagram} />
             </a></li>
             <li><a href="#">
-                <FontAwesomeIcon icon={faGithub} />
+                <FontAwesomeIcon className="fa-icon" icon={faGithub} />
             </a></li>
             </ul>
         </>
diff --git a/styles/components/_list.scss b/styles/components/_list.scss
index cceffdd..6a5dbd3 100644
--- a/styles/components/_list.scss
+++ b/styles/components/_list.scss
@@ -56,11 +56,13 @@
 				a {
 					border-radius: 100%;
 					box-shadow: inset 0 0 0 _size(border-width) _palette(border);
-					display: inline-block;
-					height: 2.25rem;
+					display: flex;
+					height: 3rem;
 					line-height: 2.25rem;
 					text-align: center;
-					width: 2.25rem;
+					width: 3rem;
+					align-items: center;
+					justify-content: center;
 
 					&:hover {
 						background-color: _palette(border-bg);
@@ -69,6 +71,14 @@
 					&:active {
 						background-color: _palette(border-bg-alt);
 					}
+
+					.fa-icon {
+						font-size: 1rem; // Adjust the size of the icon as needed
+						//display: inline-flex; // Use flex to center the icon
+						//align-items: center;
+						//justify-content: center;
+						//height: 100%;
+					}
 				}
 			}
 		}