diff --git a/src/components/Common/PieItem.tsx b/src/components/Common/PieItem.tsx
index 2e951f5c..dc8b7801 100644
--- a/src/components/Common/PieItem.tsx
+++ b/src/components/Common/PieItem.tsx
@@ -37,12 +37,14 @@ export type PieItemProps = {
   percent: number
   children: ReactNode
   className?: string
+  innerClassName?: string
 }
 
 export const PieItem: React.FC<PieItemProps> = ({
   percent,
   children,
   className,
+  innerClassName,
 }) => {
   const start = [0, 85, 255]
   const end = [0, 255, 238]
@@ -50,7 +52,7 @@ export const PieItem: React.FC<PieItemProps> = ({
 
   return (
     <PieDiv start={start} end={color} percent={percent} className={className}>
-      <CircleDiv>{children}</CircleDiv>
+      <CircleDiv className={innerClassName}>{children}</CircleDiv>
     </PieDiv>
   )
 }
diff --git a/src/components/Portfolio/SkillItem.tsx b/src/components/Portfolio/SkillItem.tsx
index 34d264f8..3c6f43d9 100644
--- a/src/components/Portfolio/SkillItem.tsx
+++ b/src/components/Portfolio/SkillItem.tsx
@@ -10,7 +10,11 @@ export type SkillItemProps = {
 export const SkillItem: React.FC<SkillItemProps> = ({ skill, className }) => {
   return (
     <div className={className}>
-      <PieItem className="mx-auto" percent={skill.percent}>
+      <PieItem
+        innerClassName="bg-body"
+        className="mx-auto"
+        percent={skill.percent}
+      >
         <div className="d-flex flex-column mb-2">
           {skill.logoSrc && (
             <div className="icon text-center">
diff --git a/src/data/skills.ts b/src/data/skills.ts
index 4efe8ea8..d6c3f384 100644
--- a/src/data/skills.ts
+++ b/src/data/skills.ts
@@ -28,7 +28,7 @@ export const skillsData: SkillType[] = [
   },
   {
     name: 'django',
-    percent: 30,
+    percent: 10,
     logoSrc: '/images/skills/django.svg',
   },
 ]