diff --git a/app/(base)/pcp/page.tsx b/app/(base)/pcp/page.tsx
index c5d2080..611570c 100644
--- a/app/(base)/pcp/page.tsx
+++ b/app/(base)/pcp/page.tsx
@@ -2,7 +2,7 @@
 import NavigationBar from "@/components/NavigationBar";
 import PipResource from "@/components/PipResource";
 import PipTask from "@/components/PipTask";
-import ProgressBar from "@/components/Progressbar";
+import ProgressBar from "@/components/ProgressBar";
 import {
   getUserTasks,
   getUserResources,
diff --git a/components/PipResource.tsx b/components/PipResource.tsx
new file mode 100644
index 0000000..c1bba4d
--- /dev/null
+++ b/components/PipResource.tsx
@@ -0,0 +1,55 @@
+import Link from "next/link";
+import ArticleIcon from "../components/icons/ArticleIcon";
+import BookIcon from "../components/icons/BookIcon";
+import VideoIcon from "../components/icons/VideoIcon";
+
+interface InterfacePipResource {
+  title: string | null;
+  description: string | null;
+  type: string | null;
+}
+
+const PipResource = ({ title, description, type }: InterfacePipResource) => {
+  const renderIcon = () => {
+    switch (type) {
+      case "video":
+        return <VideoIcon size="h-10 w-10" color="text-primary" />;
+      case "book":
+        return <BookIcon size="h-10 w-10" color="text-primary" />;
+      case "article":
+        return <ArticleIcon size="h-10 w-10" color="text-primary" />;
+      default:
+        return <ArticleIcon size="h-10 w-10" color="text-primary" />;
+    }
+  };
+
+  const renderButtonLabel = () => {
+    switch (type) {
+      case "video":
+        return "Watch it";
+      case "book":
+        return "Get it";
+      case "article":
+        return "Read it";
+      default:
+        return "Read it";
+    }
+  };
+
+  return (
+    <div className="box-border flex h-48 w-52 shrink-0 flex-col rounded-xl bg-white p-3 shadow-lg">
+      <header className="flex items-center">
+        {renderIcon()}
+        <p className="text-md ms-3 text-wrap font-semibold">{title}</p>
+      </header>
+      <p className="font-regular mb-2 mt-3 h-full overflow-hidden text-ellipsis text-xs  text-[#9E9E9E]">
+        {description}
+      </p>
+      <button className="mx-auto w-fit rounded-full bg-primary px-7 py-1 text-xs font-medium text-white">
+        <Link href="/">{renderButtonLabel()}</Link>
+      </button>
+    </div>
+  );
+};
+
+export default PipResource;
diff --git a/components/PipTask.tsx b/components/PipTask.tsx
new file mode 100644
index 0000000..92d111e
--- /dev/null
+++ b/components/PipTask.tsx
@@ -0,0 +1,36 @@
+interface InterfacePipTask {
+  title: string | null;
+  description: string | null;
+  isDone: boolean | null;
+  handleCheck: () => void;
+}
+
+const PipTask = ({
+  title,
+  description,
+  isDone,
+  handleCheck,
+}: InterfacePipTask) => {
+  return (
+    <div className="box-border h-48 w-52 shrink-0 rounded-xl bg-white px-2 py-9 shadow-lg">
+      <header className="flex items-center">
+        <p className="text-md text-wrap font-semibold">{title}</p>
+        <div className="ml-auto inline-flex items-center">
+          <label className="relative flex cursor-pointer items-center">
+            <input
+              type="checkbox"
+              onChange={handleCheck}
+              className="h-6 w-6 transform cursor-pointer appearance-none rounded-full border border-primary border-primary/80 bg-primary-light/20 outline-primary transition-all duration-200 ease-in-out checked:bg-primary hover:scale-110"
+              checked={isDone || false} // default to false if isDone is null
+            />
+          </label>
+        </div>
+      </header>
+      <p className="font-regular mt-2 text-ellipsis text-wrap text-xs text-[#9E9E9E]">
+        {description}
+      </p>
+    </div>
+  );
+};
+
+export default PipTask;
diff --git a/components/ProgressBar.tsx b/components/ProgressBar.tsx
new file mode 100644
index 0000000..79fab5f
--- /dev/null
+++ b/components/ProgressBar.tsx
@@ -0,0 +1,17 @@
+interface InterfaceProgressBar {
+  width: number; // percentage
+  height: number; // height in talwindcss
+}
+
+const ProgressBar = ({ width, height }: InterfaceProgressBar) => {
+  return (
+    <div className="w-100 rounded-full bg-gray-200 p-1.5">
+      <div
+        className={`h-${height} rounded-full bg-gradient-to-r from-primary to-secondary transition-all delay-100 ease-linear`}
+        style={{ width: `${width}%` }}
+      />
+    </div>
+  );
+};
+
+export default ProgressBar;
diff --git a/components/icons/ArticleIcon.tsx b/components/icons/ArticleIcon.tsx
new file mode 100644
index 0000000..8fa5417
--- /dev/null
+++ b/components/icons/ArticleIcon.tsx
@@ -0,0 +1,23 @@
+interface InterfaceArticle {
+  size: string;
+  color: string;
+}
+
+const ArticleIcon = ({ size, color }: InterfaceArticle) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    className={`${color} ${size}`}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z"
+    />
+  </svg>
+);
+
+export default ArticleIcon;
diff --git a/components/icons/BookIcon.tsx b/components/icons/BookIcon.tsx
new file mode 100644
index 0000000..c3a3e8e
--- /dev/null
+++ b/components/icons/BookIcon.tsx
@@ -0,0 +1,22 @@
+interface InterfaceBookIcon {
+  color: string;
+  size: string;
+}
+const BookIcon = ({ color, size }: InterfaceBookIcon) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    className={`${size} ${color}`}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"
+    />
+  </svg>
+);
+
+export default BookIcon;
diff --git a/components/NotificationIcon.tsx b/components/icons/NotificationIcon.tsx
similarity index 100%
rename from components/NotificationIcon.tsx
rename to components/icons/NotificationIcon.tsx
diff --git a/components/icons/VideoIcon.tsx b/components/icons/VideoIcon.tsx
new file mode 100644
index 0000000..e58e4e1
--- /dev/null
+++ b/components/icons/VideoIcon.tsx
@@ -0,0 +1,25 @@
+interface InterfaceVideoIcon {
+  color: string;
+  size: string;
+}
+
+const VideoIcon = ({ color, size }: InterfaceVideoIcon) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={`${size} ${color}`}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"
+      />
+    </svg>
+  );
+};
+
+export default VideoIcon;