diff --git a/css/skeleton-auto.css b/css/skeleton-auto.css
index a6d2b11..6d9d188 100644
--- a/css/skeleton-auto.css
+++ b/css/skeleton-auto.css
@@ -194,3 +194,15 @@ hr {
   border-width: 0;
   border-top: 1px solid #e1e1e1;
 }
+/* Radius values:
+
+10%-40%: Squircles
+50% (default): True circle
+*/
+.avatar {
+  width: 128px;
+  height: 128px;
+  object-fit: cover;
+  background-position: center;
+  border-radius: 50%;
+}
\ No newline at end of file
diff --git a/css/skeleton-dark.css b/css/skeleton-dark.css
index ba79ae5..fe9a7ae 100644
--- a/css/skeleton-dark.css
+++ b/css/skeleton-dark.css
@@ -194,3 +194,15 @@ hr {
   border-width: 0;
   border-top: 1px solid #e1e1e1;
 }
+/* Radius values:
+
+10%-40%: Squircles
+50% (default): True circle
+*/
+.avatar {
+  width: 128px;
+  height: 128px;
+  object-fit: cover;
+  background-position: center;
+  border-radius: 50%;
+}
\ No newline at end of file
diff --git a/css/skeleton-light.css b/css/skeleton-light.css
index 11b8c0c..de3fd8e 100644
--- a/css/skeleton-light.css
+++ b/css/skeleton-light.css
@@ -194,3 +194,15 @@ hr {
   border-width: 0;
   border-top: 1px solid #e1e1e1;
 }
+/* Radius values:
+
+10%-40%: Squircles
+50% (default): True circle
+*/
+.avatar {
+  width: 128px;
+  height: 128px;
+  object-fit: cover;
+  background-position: center;
+  border-radius: 50%;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index ebbbb6e..957f4bd 100644
--- a/index.html
+++ b/index.html
@@ -66,7 +66,7 @@
         -->
 
         <!-- Your Image Here -->
-        <img src="images/avatar.png" srcset="images/avatar@2x.png 2x" alt="LittleLink Logo">
+        <img src="images/avatar.png" class="avatar" srcset="images/avatar@2x.png 2x" alt="LittleLink Logo">
 
         <!-- Title -->
         <h1>LittleLink</h1>