diff --git a/components/Modal/Collection/CollectionInfo.tsx b/components/Modal/Collection/CollectionInfo.tsx
index 3f26449..202e812 100644
--- a/components/Modal/Collection/CollectionInfo.tsx
+++ b/components/Modal/Collection/CollectionInfo.tsx
@@ -66,7 +66,7 @@ export default function CollectionInfo({
                 <p className="text-sm w-full font-bold text-sky-300 mb-2">
                   Icon Color
                 </p>
-                <div style={{ color: collection.color || "#7dd3fc" }}>
+                <div style={{ color: collection.color }}>
                   <FontAwesomeIcon
                     icon={faFolder}
                     className="w-12 h-12 drop-shadow"
@@ -82,7 +82,7 @@ export default function CollectionInfo({
                 </div>
               </div>
               <HexColorPicker
-                color={collection.color || "#7dd3fc"}
+                color={collection.color}
                 onChange={(e) => setCollection({ ...collection, color: e })}
               />
             </div>
diff --git a/lib/client/getPublicCollectionData.ts b/lib/client/getPublicCollectionData.ts
index d12ad3a..18e932a 100644
--- a/lib/client/getPublicCollectionData.ts
+++ b/lib/client/getPublicCollectionData.ts
@@ -1,11 +1,14 @@
-const getPublicCollectionData = async (collectionId: string) => {
+const getPublicCollectionData = async (
+  collectionId: string,
+  setData?: Function
+) => {
   const res = await fetch(
     "/api/public/routes/collections/?collectionId=" + collectionId
   );
 
   const data = await res.json();
 
-  console.log(data);
+  if (setData) setData(data.response);
 
   return data;
 };
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index 114e0b8..3e0450c 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -218,6 +218,7 @@ export default function () {
             activeCollection={{
               name: "",
               description: "",
+              color: "#7dd3fc",
               isPublic: false,
               ownerId: session.data?.user.id as number,
               members: [],
diff --git a/pages/public/collections/[id].tsx b/pages/public/collections/[id].tsx
index 2575c5e..92c2b12 100644
--- a/pages/public/collections/[id].tsx
+++ b/pages/public/collections/[id].tsx
@@ -10,15 +10,12 @@ export default function PublicCollections() {
   const [data, setData] = useState<PublicCollectionIncludingLinks>();
 
   useEffect(() => {
-    const setState = async () => {
-      if (router.query.id) {
-        const data = await getPublicCollectionData(router.query.id as string);
-
-        setData(data.response);
-      }
-    };
-
-    setState();
+    if (router.query.id) {
+      getPublicCollectionData(
+        router.query.id as string,
+        (e: PublicCollectionIncludingLinks) => setData(e)
+      );
+    }
 
     // document
     //   .querySelector("body")
@@ -32,7 +29,9 @@ export default function PublicCollections() {
 
   return data ? (
     <div className="max-w-4xl mx-auto p-5 bg">
-      <div className="text-center bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-3xl shadow-lg p-5">
+      <div
+        className={`text-center bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-3xl shadow-lg p-5`}
+      >
         <p className="text-5xl bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold mb-5 capitalize">
           {data.name}
         </p>