diff --git a/app/Provider.tsx b/app/Provider.tsx
index 9d4ac84..1df1b9f 100644
--- a/app/Provider.tsx
+++ b/app/Provider.tsx
@@ -9,7 +9,7 @@ interface Props {
   session?: Session;
 }
 
-export default async function Provider({ children }: Props) {
+export default function Provider({ children }: Props) {
   return (
     <NextUIProvider>
       <Toaster
diff --git a/app/signin/page.tsx b/app/signin/page.tsx
index ed6803e..23ea0a6 100644
--- a/app/signin/page.tsx
+++ b/app/signin/page.tsx
@@ -11,12 +11,24 @@ const Page = () => {
   const { data: session } = useSession();
   const router = useRouter();
 
+  const handleSignIn = async (provider: string) => {
+    try {
+      await signIn(provider);
+      // Redirect to home page after sign-in
+      router.push("/");
+      toast.success("Logged in successfully");
+    } catch (error) {
+      toast.error("Sign in failed");
+      console.error("Sign in error:", error);
+    }
+  };
+
   useEffect(() => {
     if (session) {
-      toast.success("Logged in successfully");
       router.push(`/`);
+      toast.success("Logged in successfully");
     }
-  }, [session]);
+  }, [session, router]);
   return (
     <>
       <div className="h-full w-full p-6 ">
@@ -33,7 +45,7 @@ const Page = () => {
                   <Button
                     color="primary"
                     size="lg"
-                    onClick={() => signIn("github")}
+                    onClick={() => handleSignIn("github")}
                   >
                     <FaGithub className="text-lg" />
                     <span className="font-bold">Continue with Github</span>
@@ -42,7 +54,7 @@ const Page = () => {
                     color="primary"
                     className="mt-4"
                     size="lg"
-                    onClick={() => signIn("google")}
+                    onClick={() => handleSignIn("google")}
                   >
                     <FaGoogle className="text-lg" />
                     <span className="font-bold">Continue with Google</span>
diff --git a/components/BlogCard.tsx b/components/BlogCard.tsx
index e54dbb0..0cde1ae 100644
--- a/components/BlogCard.tsx
+++ b/components/BlogCard.tsx
@@ -5,6 +5,7 @@ import CommentButton from "./CommentButton";
 import LikeButton from "./LikeButton";
 import { useEffect, useState } from "react";
 import { GetUserImage } from "@/actions/actions";
+import Image from "next/image";
 
 interface CardProps {
   blog: blogs;
@@ -28,11 +29,14 @@ const BlogCard = ({ blog, handleLike, handleComment }: CardProps) => {
     <>
       <Card className="w-full p-2 m-4 bg-theme text-cyan-50 font-semibold  drop-shadow-2xl bg-transparent">
         <div className="flex space-x-2">
-          <img
-            className="h-10 w-10 rounded-full"
-            src={image}
-            alt="profile"
-          />
+          <div className="relative h-10 w-10">
+            <Image
+              fill
+              className="rounded-full object-center object-cover"
+              src={image}
+              alt="profile"
+            />
+          </div>
           <div>
             <CardHeader className=" px-3 pt-0">
               <div className="flex flex-col">
diff --git a/next.config.js b/next.config.js
index d5fc77c..4199553 100644
--- a/next.config.js
+++ b/next.config.js
@@ -4,9 +4,15 @@ const nextConfig = {
     remotePatterns: [
       {
         protocol: "https",
-        hostname: "media4.giphy.com",
+        hostname: "avatars.githubusercontent.com",
         port: "",
-        pathname: "/media/**",
+        pathname: "**",
+      },
+      {
+        protocol: "https",
+        hostname: "lh3.googleusercontent.com",
+        port: "",
+        pathname: "**",
       },
     ],
   },