diff --git a/src/shared/SocialsList1.tsx b/src/shared/SocialsList1.tsx
new file mode 100644
index 0000000..4f73105
--- /dev/null
+++ b/src/shared/SocialsList1.tsx
@@ -0,0 +1,36 @@
+import { SocialType } from "@/shared/SocialsShare";
+import React, { FC } from "react";
+
+export interface SocialsList1Props {
+  className?: string;
+}
+
+const socials: SocialType[] = [
+  { name: "Facebook", icon: "lab la-facebook-square", href: "#" },
+  { name: "Twitter", icon: "lab la-twitter", href: "#" },
+  { name: "Youtube", icon: "lab la-youtube", href: "#" },
+  { name: "Instagram", icon: "lab la-instagram", href: "#" },
+];
+
+const SocialsList1: FC<SocialsList1Props> = ({ className = "space-y-2.5" }) => {
+  const renderItem = (item: SocialType, index: number) => {
+    return (
+      <a
+        href={item.href}
+        className="flex items-center text-2xl text-neutral-700 hover:text-black dark:text-neutral-300 dark:hover:text-white leading-none space-x-2 group"
+        key={index}
+      >
+        <i className={item.icon}></i>
+        <span className="hidden lg:block text-sm">{item.name}</span>
+      </a>
+    );
+  };
+
+  return (
+    <div className={`nc-SocialsList1 ${className}`} data-nc-id="SocialsList1">
+      {socials.map(renderItem)}
+    </div>
+  );
+};
+
+export default SocialsList1;