diff --git a/src/components/LoginForm/index.tsx b/src/components/LoginForm/index.tsx
new file mode 100644
index 0000000..4a37a56
--- /dev/null
+++ b/src/components/LoginForm/index.tsx
@@ -0,0 +1,67 @@
+import { FunctionComponent } from 'react'
+import { Box, FormControl, FormErrorMessage, FormLabel } from '@chakra-ui/react'
+import { Field } from 'formik'
+
+import { Button, Input } from '@components/index'
+import { AuthFormProps } from 'src/types'
+
+const LoginForm: FunctionComponent<AuthFormProps> = ({ 
+  handleSubmit, 
+  errors, 
+  touched, 
+  isSubmitting 
+}) => {
+  return (
+    <form onSubmit={handleSubmit}>
+      <Box my={"15px"}>
+        <FormControl
+          isRequired
+          isInvalid={!!errors.email && touched.email}
+        >
+          <FormLabel htmlFor="email">Email address</FormLabel>
+          <Field
+            as={Input}
+            id="email"
+            name="email"
+            type="email"
+            placeholder="enter email address"
+          />
+          <FormErrorMessage>{errors.email}</FormErrorMessage>
+        </FormControl>
+      </Box>
+
+      <Box my={"15px"}>
+        <FormControl
+          isRequired
+          isInvalid={!!errors.password && touched.password}
+        >
+          <FormLabel htmlFor="email">Password</FormLabel>
+          <Field
+            as={Input}
+            id="password"
+            name="password"
+            type="password"
+            placeholder="enter password"
+          />
+          <FormErrorMessage>{errors.password}</FormErrorMessage>
+        </FormControl>
+      </Box>
+
+      <Box my={"15px"}>
+        <Button
+          variant="solid"
+          size={{ base: "md", lg: "lg" }}
+          width={"100%"}
+          type="submit"
+          fontWeight={"semibold"}
+          rounded="sm"
+          isloading={isSubmitting}
+        >
+          Sign In
+        </Button>
+      </Box>
+    </form>
+  )
+}
+
+export default LoginForm;
\ No newline at end of file
diff --git a/src/components/Popover/index.tsx b/src/components/Popover/index.tsx
deleted file mode 100644
index 5b90eff..0000000
--- a/src/components/Popover/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { FunctionComponent } from 'react'
-import { Link } from 'react-router-dom'
-import {
-  Popover as ChakraPopover,
-  PopoverArrow,
-  PopoverBody,
-  PopoverCloseButton,
-  PopoverContent,
-  PopoverHeader,
-  PopoverTrigger,
-  Text
-} from '@chakra-ui/react'
-
-import { colors } from '../../colors'
-
-interface PopoverProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-const Popover: FunctionComponent<PopoverProps> = ({ isOpen, onClose }) => {
-  return (
-    <ChakraPopover
-      returnFocusOnClose={false}
-      isOpen={isOpen}
-      onClose={onClose}
-      placement='right'
-      closeOnBlur={false}
-    >
-      <PopoverTrigger>
-        <Text as={"span"}></Text>
-      </PopoverTrigger>
-      <PopoverContent>
-        <PopoverHeader fontWeight='semibold'>Sign in to participate</PopoverHeader>
-        <PopoverArrow />
-        <PopoverCloseButton />
-        <PopoverBody>
-          Sign in to participate to keep the conversation going! <Text as={"span"} color={colors.primary} ml={"2px"}><Link to="/auth/login">Sign in here</Link></Text>
-        </PopoverBody>
-      </PopoverContent>
-    </ChakraPopover>
-  )
-}
-
-export default Popover;
\ No newline at end of file
diff --git a/src/components/RegisterForm/index.tsx b/src/components/RegisterForm/index.tsx
new file mode 100644
index 0000000..9471846
--- /dev/null
+++ b/src/components/RegisterForm/index.tsx
@@ -0,0 +1,83 @@
+import { FunctionComponent } from 'react'
+import { Box, FormControl, FormErrorMessage, FormLabel } from '@chakra-ui/react'
+import { Field } from 'formik'
+
+import { Button, Input } from '@components/index'
+import { AuthFormProps } from 'src/types'
+
+const RegisterForm: FunctionComponent<AuthFormProps> = ({
+  handleSubmit,
+  errors,
+  touched,
+  isSubmitting
+}) => {
+  return (
+    <form onSubmit={handleSubmit}>
+      <Box mb={"15px"}>
+        <FormControl
+          isRequired
+          isInvalid={!!errors.fullname && touched.fullname}
+        >
+          <FormLabel htmlFor="fullname">Fullname</FormLabel>
+          <Field
+            as={Input}
+            id="fullname"
+            name="fullname"
+            type="text"
+            placeholder="enter fullname"
+          />
+          <FormErrorMessage>{errors.fullname}</FormErrorMessage>
+        </FormControl>
+      </Box>
+      <Box my={"15px"}>
+        <FormControl
+          isRequired
+          isInvalid={!!errors.email && touched.email}
+        >
+          <FormLabel htmlFor="email">Enter Email</FormLabel>
+          <Field
+            as={Input}
+            id="email"
+            name="email"
+            type="email"
+            placeholder="enter email address"
+          />
+          <FormErrorMessage>{errors.email}</FormErrorMessage>
+        </FormControl>
+      </Box>
+
+      <Box my={"15px"}>
+        <FormControl
+          isRequired
+          isInvalid={!!errors.password && touched.password}
+        >
+          <FormLabel htmlFor="password">Password</FormLabel>
+          <Field
+            as={Input}
+            id="password"
+            name="password"
+            type="password"
+            placeholder="enter email password"
+          />
+          <FormErrorMessage>{errors.password}</FormErrorMessage>
+        </FormControl>
+      </Box>
+
+      <Box my={"20px"}>
+        <Button
+          variant="solid"
+          size={{ base: "md", lg: "lg" }}
+          width={"100%"}
+          type="submit"
+          fontWeight={"semibold"}
+          rounded="sm"
+          isloading={isSubmitting}
+        >
+          Sign Up
+        </Button>
+      </Box>
+    </form>
+  )
+}
+
+export default RegisterForm;
\ No newline at end of file
diff --git a/src/components/ShowLoginModal/index.tsx b/src/components/ShowLoginModal/index.tsx
new file mode 100644
index 0000000..22c6ab8
--- /dev/null
+++ b/src/components/ShowLoginModal/index.tsx
@@ -0,0 +1,58 @@
+import { FunctionComponent } from 'react'
+import { Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay } from '@chakra-ui/react'
+import { Formik } from 'formik'
+
+import { LoginForm } from '@components/index'
+import { signInValidataionSchema } from '@validations/signin'
+import { useSignin } from '@hooks/auth/useSignin'
+import { ISignin } from 'src/types'
+
+interface IProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const ShowLoginModal: FunctionComponent<IProps> = ({ isOpen, onClose }) => {
+  const { signinMutation } = useSignin();
+
+  const handleSignin = (values: ISignin) => {
+    signinMutation.mutate(values);
+  };
+
+  const initialValues: ISignin = {
+    email: "",
+    password: ""
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+      <ModalOverlay
+        bg='blackAlpha.300'
+        backdropFilter='blur(10px) hue-rotate(90deg)'
+      />
+      <ModalContent>
+        <ModalBody>
+          <ModalHeader textAlign={"center"}>Sign in to paticipate</ModalHeader>
+
+          <Formik
+            initialValues={initialValues}
+            onSubmit={handleSignin}
+            validationSchema={signInValidataionSchema}
+
+          >
+            {({ handleSubmit, errors, touched }) => (
+              <LoginForm
+                handleSubmit={handleSubmit}
+                errors={errors}
+                touched={touched}
+                isSubmitting={signinMutation.isPending}
+              />
+            )}
+          </Formik>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default ShowLoginModal;
\ No newline at end of file
diff --git a/src/components/ThreadCard/components/ThreadCardInteractions.tsx b/src/components/ThreadCard/components/ThreadCardInteractions.tsx
index c05f3f4..3167785 100644
--- a/src/components/ThreadCard/components/ThreadCardInteractions.tsx
+++ b/src/components/ThreadCard/components/ThreadCardInteractions.tsx
@@ -1,6 +1,7 @@
 import { FunctionComponent } from 'react'
-import { HStack, Text } from '@chakra-ui/react'
+import { HStack, Text, useDisclosure } from '@chakra-ui/react'
 import { MdOutlineQuickreply, MdOutlineThumbUp, MdOutlineThumbDown } from 'react-icons/md'
+import ShowLoginModal from '@components/ShowLoginModal'
 
 interface ThreadCardInteractionsProps {
   userLikedThread: boolean;
@@ -20,67 +21,81 @@ const ThreadCardInteractions: FunctionComponent<ThreadCardInteractionsProps> = (
   handleThreadLike,
   handleThreadDisLike,
   user
-}) => (
-  <HStack borderBottom="1px solid #f1f1f1" py="10px" gap={3}>
-    {user ? (
-      <>
-        <Text fontSize="14px" display="flex" gap={1} alignItems="center">
-          <MdOutlineQuickreply
-            size="23px"
-            cursor="pointer"
-            onClick={handleShowCommentInput}
-          />
-          {threadCommentCounts}
-        </Text>
+}) => {
+  const { isOpen, onClose, onOpen } = useDisclosure();
 
-        <Text
-          fontSize={{ base: "15px", md: "18px" }}
-          display={"flex"}
-          gap={3}
-          alignItems={"center"}
-        >
-          {!userLikedThread && (
-            <MdOutlineThumbUp
-              size={"23px"}
-              cursor={"pointer"}
-              onClick={handleThreadLike}
+  return (
+  <>
+    <HStack borderBottom="1px solid #f1f1f1" py="10px" gap={3}>
+      {user ? (
+        <>
+          <Text fontSize="14px" display="flex" gap={1} alignItems="center">
+            <MdOutlineQuickreply
+              size="23px"
+              cursor="pointer"
+              onClick={handleShowCommentInput}
             />
-          )}
+            {threadCommentCounts}
+          </Text>
+
+          <Text
+            fontSize={{ base: "15px", md: "18px" }}
+            display={"flex"}
+            gap={3}
+            alignItems={"center"}
+          >
+            {!userLikedThread && (
+              <MdOutlineThumbUp
+                size={"23px"}
+                cursor={"pointer"}
+                onClick={handleThreadLike}
+              />
+            )}
 
-          {userLikedThread && (
-            <MdOutlineThumbDown
-              size={"23px"}
-              cursor={"pointer"}
-              onClick={handleThreadDisLike}
+            {userLikedThread && (
+              <MdOutlineThumbDown
+                size={"23px"}
+                cursor={"pointer"}
+                onClick={handleThreadDisLike}
+              />
+            )}
+            {threadLikeCounts}
+          </Text>
+        </>
+      ) : (
+        <>
+          <Text fontSize="14px" display="flex" gap={1} alignItems="center">
+            <MdOutlineQuickreply
+              size="23px"
+              onClick={onOpen}
             />
-          )}
-          {threadLikeCounts}
-        </Text>
-      </>
-    ) : (
-      <>
-        <Text fontSize="14px" display="flex" gap={1} alignItems="center">
-          <MdOutlineQuickreply
-            size="23px"
-          />
-          {threadCommentCounts}
-        </Text>
+            {threadCommentCounts}
+          </Text>
 
-        <Text
-          fontSize={{ base: "15px", md: "18px" }}
-          display={"flex"}
-          gap={3}
-          alignItems={"center"}
-        >
-          <MdOutlineThumbUp
-            size={"24px"}
-            style={{ marginBottom: "5px" }}
-          />
-          {threadLikeCounts}
-        </Text>
-      </>
-    )}
-  </HStack>
-);
+          <Text
+            fontSize={{ base: "15px", md: "18px" }}
+            display={"flex"}
+            gap={3}
+            alignItems={"center"}
+          >
+            <MdOutlineThumbUp
+              size={"24px"}
+              style={{ marginBottom: "5px" }}
+              onClick={onOpen}
+            />
+            {threadLikeCounts}
+          </Text>
+        </>
+      )}
+    </HStack>
+
+    <ShowLoginModal
+      isOpen={isOpen}
+      onClose={onClose}
+    />
+  </>
+
+  )
+}
 
 export default ThreadCardInteractions;
diff --git a/src/components/ThreadCard/index.tsx b/src/components/ThreadCard/index.tsx
index a706fd6..8bca8f2 100644
--- a/src/components/ThreadCard/index.tsx
+++ b/src/components/ThreadCard/index.tsx
@@ -9,7 +9,6 @@ import {
   DeleteConfirmation,
   ThreadCommentForm
 } from '@components/ThreadCard/components'
-import { errorNotification } from '@helpers/notification'
 import { useUser } from '@context/userContext'
 import { useCreateThreadComment } from '@hooks/thread/useCreateThreadComment'
 import { useCreateThreadLike } from '@hooks/thread/useCreateThreadLike'
@@ -44,11 +43,6 @@ const ThreadCard: FunctionComponent<ThreadCardProps> = ({ thread, isSingleView =
 
   const handleCommentSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    if (!comment) {
-      errorNotification('The comment field is Required*');
-      return;
-    }
-
     const commmentValue = { comment }
     createThreadCommentMutation.mutate({ data: commmentValue, id: thread?.id })
     setComment("");
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 178f8cc..779a415 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -16,8 +16,10 @@ import EmptyState from '@components/EmptyState'
 import Editor from '@components/Editor'
 import ContentBlockContent from '@components/CodeBlockContent'
 import ThreadCard from '@components/ThreadCard'
-import Popover from '@components/Popover'
 import Loading from '@components/Loading'
+import LoginForm from '@components/LoginForm'
+import RegisterForm from '@components/RegisterForm'
+import ShowLoginModal from '@components/ShowLoginModal'
 
 export {
   Alert,
@@ -38,6 +40,8 @@ export {
   Editor,
   ContentBlockContent,
   ThreadCard,
-  Popover,
   Loading,
+  LoginForm,
+  RegisterForm,
+  ShowLoginModal,
 }
\ No newline at end of file
diff --git a/src/hooks/auth/useSignin.ts b/src/hooks/auth/useSignin.ts
index 967fbe0..994f610 100644
--- a/src/hooks/auth/useSignin.ts
+++ b/src/hooks/auth/useSignin.ts
@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
 import { signinUser } from '@services/auth'
@@ -6,19 +6,22 @@ import { errorNotification, successNotification } from '@helpers/notification'
 
 export const useSignin = () => {
   const navigate = useNavigate();
+  const location = useLocation();
   const queryClient = useQueryClient();
 
   const signinMutation = useMutation({
     mutationFn: signinUser,
     onSuccess: (data) => {
       successNotification(data.message);
-      queryClient.invalidateQueries({
-        queryKey: ['user']
-      })
+      queryClient.invalidateQueries({ queryKey: ['user'] })
 
       localStorage.setItem('ucType_', data?.access_token);
 
-      navigate('/');
+      if (location.pathname === '/auth/login') {
+        navigate('/');
+      } else {
+        window.location.reload();
+      }
     },
     onError: (error: any) => {
       errorNotification(error?.response?.data?.message)
diff --git a/src/main.tsx b/src/main.tsx
index d8aca07..6e11009 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -22,11 +22,11 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <ChakraProvider theme={Theme}>
-        <HelmetProvider>
-          <UserContextProvider>
+        <UserContextProvider>
+          <HelmetProvider>
             <App />
-          </UserContextProvider>
-        </HelmetProvider>
+          </HelmetProvider>
+        </UserContextProvider>
         <ToastContainer />
       </ChakraProvider>
       <ReactQueryDevtools />
diff --git a/src/pages/Articles/components/ArticleActionButtons.tsx b/src/pages/Articles/components/ArticleActionButtons.tsx
index c6d0a96..adaa99b 100644
--- a/src/pages/Articles/components/ArticleActionButtons.tsx
+++ b/src/pages/Articles/components/ArticleActionButtons.tsx
@@ -3,7 +3,7 @@ import { Stack, Text, useDisclosure } from '@chakra-ui/react'
 import { MdOutlineQuickreply, MdOutlineThumbDown, MdOutlineThumbUp } from 'react-icons/md'
 
 import { useUser } from '@context/userContext'
-import { Popover } from '@components/index'
+import { ShowLoginModal } from '@components/index'
 import { ArticleActionButtonsProps } from 'src/types'
 
 const ArticleActionButtons: FunctionComponent<ArticleActionButtonsProps> = ({
@@ -13,7 +13,7 @@ const ArticleActionButtons: FunctionComponent<ArticleActionButtonsProps> = ({
   onShowComment
 }) => {
   const { user } = useUser();
-  const { onClose, onToggle, isOpen} = useDisclosure();
+  const { onClose, onOpen, isOpen} = useDisclosure();
   
   return (
     <>
@@ -78,7 +78,7 @@ const ArticleActionButtons: FunctionComponent<ArticleActionButtonsProps> = ({
               <MdOutlineThumbUp
                 size={"24px"}
                 style={{ marginBottom: "5px" }}
-                onClick={onToggle}
+                onClick={onOpen}
               />
               {article?.article_like_counts}
             </Text>
@@ -86,7 +86,7 @@ const ArticleActionButtons: FunctionComponent<ArticleActionButtonsProps> = ({
         )}
       </Stack>
     
-      <Popover
+      <ShowLoginModal
         isOpen={isOpen}
         onClose={onClose}
       />
diff --git a/src/pages/Articles/components/CommentDrawer.tsx b/src/pages/Articles/components/CommentDrawer.tsx
index a1b8f6c..bfbf608 100644
--- a/src/pages/Articles/components/CommentDrawer.tsx
+++ b/src/pages/Articles/components/CommentDrawer.tsx
@@ -11,10 +11,11 @@ import {
   DrawerHeader,
   DrawerOverlay,
   Stack,
-  Text
+  Text,
+  useDisclosure
 } from '@chakra-ui/react'
 
-import { Button, ContentBlockContent, Editor } from '@components/index'
+import { Button, ContentBlockContent, Editor, ShowLoginModal } from '@components/index'
 import { useUser } from '@context/userContext'
 import { colors } from '../../../colors'
 import { CommentDrawerProps } from 'src/types'
@@ -30,121 +31,131 @@ const CommentDrawer: FunctionComponent<CommentDrawerProps> = ({
   isSubmitting
 }) => {
   const { user } = useUser();
+  const { onClose: onCloseShowLoginModal, onOpen: onOpenShowLoginModal, isOpen: isOpenShowLoginModal } = useDisclosure();
 
   return (
-    <Drawer
-      isOpen={isOpen}
-      onClose={onClose}
-      size={"sm"}
-    >
-      <DrawerOverlay />
-      <DrawerContent>
-        <DrawerCloseButton />
-        <DrawerHeader borderBottomWidth='1px'>
-          Responses ({commentCounts})
-        </DrawerHeader>
+    <>
+      <Drawer
+        isOpen={isOpen}
+        onClose={onClose}
+        size={"sm"}
+      >
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerCloseButton />
+          <DrawerHeader borderBottomWidth='1px'>
+            Responses ({commentCounts})
+          </DrawerHeader>
 
-        <DrawerBody pb={"10px"}>
-          <Stack spacing='24px'>
-            <Box my={5}>
-              {user && (
-                <form onSubmit={handleSubmit}>
-                  <Box height={"250px"} mb={"30px"}>
-                    <Editor
-                      content={comment}
-                      setContent={setComment}
-                      placeholder="write your thought here..."
-                    />
-                  </Box>
-
-                  <Box textAlign={"right"} py={"25px"}>
-                    <Button
-                      variant="solid"
-                      size={"md"}
-                      width={{ base: "100%", lg: "auto" }}
-                      type="submit"
-                      fontWeight={"semibold"}
-                      rounded="sm"
-                      isDisabled={!comment}
-                      isloading={isSubmitting}
-                    >
-                      Submit
-                    </Button>
-                  </Box>
-                </form>
-              )}
-
-              {!user && (
-                <Box>
-                  <Text fontSize={"18px"}>
-                    Sign in to participate!
-                    <Text
-                      as={"span"}
-                      fontSize={"16px"}
-                      ml={"5px"}
-                      color={colors.primary}
-                      _hover={{
-                        color: colors.primaryDark
-                      }}
-                    >
-                      <Link to="/auth/login">Sign in here</Link>
-                    </Text>
-                  </Text>
-                </Box>
-              )}
-            </Box>
-
-            <Divider />
+          <DrawerBody pb={"10px"}>
+            <Stack spacing='24px'>
+              <Box my={5}>
+                {user && (
+                  <form onSubmit={handleSubmit}>
+                    <Box height={"250px"} mb={"30px"}>
+                      <Editor
+                        content={comment}
+                        setContent={setComment}
+                        placeholder="write your thought here..."
+                      />
+                    </Box>
 
-            {comments?.map((comment: any, index: number) => (
-              <Fragment key={index}>
-                <Box mb={"5px"}>
-                  <Box
-                    display={"flex"}
-                    justifyContent={"flex-start"}
-                    gap={3}
-                    mb={"15px"}
-                  >
-                    <Box>
-                      <Link to={`/user/${comment?.user?.username}`}>
-                        <Avatar
-                          src={comment?.user?.avatar}
-                          name={comment?.user?.fullname}
-                          size={"sm"}
-                        />
-                      </Link>
+                    <Box textAlign={"right"} py={"25px"}>
+                      <Button
+                        variant="solid"
+                        size={"md"}
+                        width={{ base: "100%", lg: "auto" }}
+                        type="submit"
+                        fontWeight={"semibold"}
+                        rounded="sm"
+                        isDisabled={!comment}
+                        isloading={isSubmitting}
+                      >
+                        Submit
+                      </Button>
                     </Box>
+                  </form>
+                )}
 
-                    <Box>
+                {!user && (
+                  <Box>
+                    <Text fontSize={"18px"}>
+                      Sign in to participate!
                       <Text
-                        color={"#000"}
+                        as={"span"}
                         fontSize={"16px"}
-                        mb={"2px"}
-                        _hover={{ textDecoration: "underline" }}
+                        ml={"5px"}
+                        color={colors.primary}
+                        cursor={"pointer"}
+                        _hover={{
+                          color: colors.primaryDark
+                        }}
+                        onClick={onOpenShowLoginModal}
                       >
+                        Sign in here
+                      </Text>
+                    </Text>
+                  </Box>
+                )}
+              </Box>
+
+              <Divider />
+
+              {comments?.map((comment: any, index: number) => (
+                <Fragment key={index}>
+                  <Box mb={"5px"}>
+                    <Box
+                      display={"flex"}
+                      justifyContent={"flex-start"}
+                      gap={3}
+                      mb={"15px"}
+                    >
+                      <Box>
                         <Link to={`/user/${comment?.user?.username}`}>
-                          {comment?.user?.fullname}
+                          <Avatar
+                            src={comment?.user?.avatar}
+                            name={comment?.user?.fullname}
+                            size={"sm"}
+                          />
                         </Link>
-                      </Text>
-                      <Text
-                        color={"#0009"}
-                        fontSize={"14px"}
-                      >
-                        about {comment?.created_at?.human}
-                      </Text>
+                      </Box>
+
+                      <Box>
+                        <Text
+                          color={"#000"}
+                          fontSize={"16px"}
+                          mb={"2px"}
+                          _hover={{ textDecoration: "underline" }}
+                        >
+                          <Link to={`/user/${comment?.user?.username}`}>
+                            {comment?.user?.fullname}
+                          </Link>
+                        </Text>
+                        <Text
+                          color={"#0009"}
+                          fontSize={"14px"}
+                        >
+                          about {comment?.created_at?.human}
+                        </Text>
+                      </Box>
                     </Box>
+
+                    <ContentBlockContent fontSize='12.5px' content={comment?.comment} />
                   </Box>
 
-                  <ContentBlockContent fontSize='12.5px' content={comment?.comment} />
-                </Box>
+                  <Divider />
+                </Fragment>
+              ))}
+            </Stack>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
 
-                <Divider />
-              </Fragment>
-            ))}
-          </Stack>
-        </DrawerBody>
-      </DrawerContent>
-    </Drawer>
+      <ShowLoginModal
+        isOpen={isOpenShowLoginModal}
+        onClose={onCloseShowLoginModal}
+      />
+    </>
   )
 }
 
diff --git a/src/pages/Auth/Login/index.tsx b/src/pages/Auth/Login/index.tsx
index d45e06d..0644339 100644
--- a/src/pages/Auth/Login/index.tsx
+++ b/src/pages/Auth/Login/index.tsx
@@ -1,20 +1,10 @@
 import { FunctionComponent } from 'react'
 import { Link } from 'react-router-dom'
-import {
-  Box,
-  FormControl,
-  FormLabel,
-  Card,
-  CardBody,
-  CardHeader,
-  Heading,
-  Text,
-  FormErrorMessage
-} from '@chakra-ui/react'
-import { Formik, Field } from 'formik'
+import { Box, Card, CardBody, CardHeader, Heading, Text } from '@chakra-ui/react'
+import { Formik } from 'formik'
 import { Helmet } from 'react-helmet-async'
 
-import { Button, Input } from '@components/index'
+import { LoginForm } from '@components/index'
 import { colors } from '../../../colors'
 import { useSignin } from '@hooks/auth/useSignin'
 import { signInValidataionSchema } from '@validations/signin'
@@ -53,75 +43,32 @@ const Login: FunctionComponent = () => {
               validationSchema={signInValidataionSchema}
             >
               {({ handleSubmit, errors, touched }) => (
-                <form onSubmit={handleSubmit}>
-                  <Box my={"15px"}>
-                    <FormControl
-                      isRequired
-                      isInvalid={!!errors.email && touched.email}
-                    >
-                      <FormLabel htmlFor="email">Email address</FormLabel>
-                      <Field
-                        as={Input}
-                        id="email"
-                        name="email"
-                        type="email"
-                        placeholder="enter email address"
-                      />
-                      <FormErrorMessage>{errors.email}</FormErrorMessage>
-                    </FormControl>
-                  </Box>
-
-                  <Box my={"15px"}>
-                    <FormControl
-                      isRequired
-                      isInvalid={!!errors.password && touched.password}
-                    >
-                      <FormLabel htmlFor="email">Password</FormLabel>
-                      <Field
-                        as={Input}
-                        id="password"
-                        name="password"
-                        type="password"
-                        placeholder="enter password"
-                      />
-                      <FormErrorMessage>{errors.password}</FormErrorMessage>
-                    </FormControl>
-                  </Box>
-
-                  <Box my={"15px"}>
-                    <Button
-                      variant="solid"
-                      size={{ base: "md", lg: "lg" }}
-                      width={"100%"}
-                      type="submit"
-                      fontWeight={"semibold"}
-                      rounded="sm"
-                      isloading={signinMutation.isPending}
-                    >
-                      Sign In
-                    </Button>
-                  </Box>
-
-                  <Text
-                    fontSize={"14px"}
-                    fontWeight={"300"}
-                    textAlign={{ base: "center", md: "right" }}
-                    color={"#0009"}
-                  >
-                    Don't have an account? {" "}
-                    <Link to="/auth/register">
-                      <Text
-                        as={"span"}
-                        color={colors.primary}
-                        _hover={{ textDecoration: "underline" }}
-                      >
-                        Sign Up
-                      </Text>
-                    </Link>
-                  </Text>
-                </form>
+                <LoginForm
+                  handleSubmit={handleSubmit}
+                  errors={errors}
+                  touched={touched}
+                  isSubmitting={signinMutation.isPending}
+                />
               )}
             </Formik>
+
+            <Text
+              fontSize={"14px"}
+              fontWeight={"300"}
+              textAlign={{ base: "center", md: "right" }}
+              color={"#0009"}
+            >
+              Don't have an account? {" "}
+              <Link to="/auth/register">
+                <Text
+                  as={"span"}
+                  color={colors.primary}
+                  _hover={{ textDecoration: "underline" }}
+                >
+                  Sign Up
+                </Text>
+              </Link>
+            </Text>
           </CardBody>
         </Card>
       </Box>
diff --git a/src/pages/Auth/Register/index.tsx b/src/pages/Auth/Register/index.tsx
index ea318b6..458d559 100644
--- a/src/pages/Auth/Register/index.tsx
+++ b/src/pages/Auth/Register/index.tsx
@@ -1,20 +1,10 @@
 import { FunctionComponent } from 'react'
 import { Link } from 'react-router-dom'
-import {
-  Box,
-  FormControl,
-  FormLabel,
-  Card,
-  CardBody,
-  CardHeader,
-  Heading,
-  Text,
-  FormErrorMessage,
-} from '@chakra-ui/react'
-import { Formik, Field } from 'formik'
+import { Box, Card, CardBody, CardHeader, Heading, Text } from '@chakra-ui/react'
+import { Formik } from 'formik'
 import { Helmet } from 'react-helmet-async'
 
-import { Button, Input } from '@components/index'
+import { RegisterForm } from '@components/index'
 import { colors } from '../../../colors'
 import { useSignup } from '@hooks/auth/useSignup'
 import { signUpValidataionSchema } from '@validations/signup'
@@ -54,90 +44,32 @@ const Register: FunctionComponent = () => {
               validationSchema={signUpValidataionSchema}
             >
               {({ handleSubmit, errors, touched }) => (
-                <form onSubmit={handleSubmit}>
-                  <Box mb={"15px"}>
-                    <FormControl
-                      isRequired
-                      isInvalid={!!errors.fullname && touched.fullname}
-                    >
-                      <FormLabel htmlFor="fullname">Fullname</FormLabel>
-                      <Field
-                        as={Input}
-                        id="fullname"
-                        name="fullname"
-                        type="text"
-                        placeholder="enter fullname"
-                      />
-                      <FormErrorMessage>{errors.fullname}</FormErrorMessage>
-                    </FormControl>
-                  </Box>
-                  <Box my={"15px"}>
-                    <FormControl
-                      isRequired
-                      isInvalid={!!errors.email && touched.email}
-                    >
-                      <FormLabel htmlFor="email">Enter Email</FormLabel>
-                      <Field
-                        as={Input}
-                        id="email"
-                        name="email"
-                        type="email"
-                        placeholder="enter email address"
-                      />
-                      <FormErrorMessage>{errors.email}</FormErrorMessage>
-                    </FormControl>
-                  </Box>
-
-                  <Box my={"15px"}>
-                    <FormControl
-                      isRequired
-                      isInvalid={!!errors.password && touched.password}
-                    >
-                      <FormLabel htmlFor="password">Password</FormLabel>
-                      <Field
-                        as={Input}
-                        id="password"
-                        name="password"
-                        type="password"
-                        placeholder="enter email password"
-                      />
-                      <FormErrorMessage>{errors.password}</FormErrorMessage>
-                    </FormControl>
-                  </Box>
-
-                  <Box my={"20px"}>
-                    <Button
-                      variant="solid"
-                      size={{ base: "md", lg: "lg" }}
-                      width={"100%"}
-                      type="submit"
-                      fontWeight={"semibold"}
-                      rounded="sm"
-                      isloading={signupMutation.isPending}
-                    >
-                      Sign Up
-                    </Button>
-                  </Box>
-                  <Text
-                    fontSize={"14px"}
-                    fontWeight={"300"}
-                    textAlign={{ base: "center", md: "right" }}
-                    color={"#0009"}
-                  >
-                    Already have an account? {" "}
-                    <Link to="/auth/login">
-                      <Text
-                        as={"span"}
-                        color={colors.primary}
-                        _hover={{ textDecoration: "underline" }}
-                      >
-                        Sign In
-                      </Text>
-                    </Link>
-                  </Text>
-                </form>
+                <RegisterForm
+                  handleSubmit={handleSubmit}
+                  errors={errors}
+                  touched={touched}
+                  isSubmitting={signupMutation.isPending}
+                />
               )}
             </Formik>
+
+            <Text
+              fontSize={"14px"}
+              fontWeight={"300"}
+              textAlign={{ base: "center", md: "right" }}
+              color={"#0009"}
+            >
+              Already have an account? {" "}
+              <Link to="/auth/login">
+                <Text
+                  as={"span"}
+                  color={colors.primary}
+                  _hover={{ textDecoration: "underline" }}
+                >
+                  Sign In
+                </Text>
+              </Link>
+            </Text>
           </CardBody>
         </Card>
       </Box>
diff --git a/src/pages/Users/SavedArticles/index.tsx b/src/pages/Users/SavedArticles/index.tsx
index c81b079..253e9b0 100644
--- a/src/pages/Users/SavedArticles/index.tsx
+++ b/src/pages/Users/SavedArticles/index.tsx
@@ -2,7 +2,7 @@ import { Link } from 'react-router-dom'
 import { Avatar, Box, Container, Flex, Heading, Text } from '@chakra-ui/react'
 import { Helmet } from 'react-helmet-async'
 
-import { ArticlesCard } from '@components/index'
+import { ArticlesCard, Skeleton } from '@components/index'
 import { useUser } from '@context/userContext'
 import { useSavedArticles } from '@hooks/article/useGetSavedArticles'
 import { colors } from '../../../colors'
@@ -10,7 +10,7 @@ import { useDeleteSaveArticle } from '@hooks/article/useDeleteSavaArticles'
 
 const SavedArticles = () => {
   const { user } = useUser();
-  const { data: savedArticles } = useSavedArticles();
+  const { data: savedArticles, isLoading } = useSavedArticles();
   const { deleteSaveArticleMutation} = useDeleteSaveArticle()
 
   const handleUnSaveArticle = (articleId: string) => {
@@ -45,6 +45,8 @@ const SavedArticles = () => {
           </Box>
 
           <Box>
+            {isLoading && <Skeleton />}
+
             {savedArticles && savedArticles?.map((article: any, index: number) => (
               <ArticlesCard
                 key={index}
@@ -86,10 +88,7 @@ const SavedArticles = () => {
             />
 
             <Text my={"15px"} fontWeight={"bold"}>{user?.data?.fullname}</Text>
-            {/* <Text my={"10px"}>0 Follower</Text> */}
-
             <Text fontSize={"14px"} color={"#0009"} lineHeight={"1.6em"}>{user?.data?.bio}</Text>
-
             <Text
               color={colors.primary}
               fontSize={"15px"}
diff --git a/src/pages/Users/Settings/index.tsx b/src/pages/Users/Settings/index.tsx
index 226d060..4b005ec 100644
--- a/src/pages/Users/Settings/index.tsx
+++ b/src/pages/Users/Settings/index.tsx
@@ -25,19 +25,8 @@ const ProfileEdit: FunctionComponent = () => {
       m={"3rem auto"}
       width={"90%"}
     >
-      <Text 
-        mb={"5px"} 
-        fontSize={"18px"} 
-        cursor={"pointer"}
-        _hover={{textDecoration: "underline"}}
-      >
-        <Link to={`/${user?.data?.username}`}>
-          Back
-        </Link>
-      </Text>
-
       <Heading as="h4" size="lg" py={"10px"}>
-        <Text color={"gray.400"} as={"span"}>profile</Text> \ <Text as={"span"}>Settings</Text>
+        <Text color={"gray.400"} as={"span"}><Link to={`/${user?.data?.username}`}>profile</Link></Text> \ <Text as={"span"}>Settings</Text>
       </Heading>
 
       <Box
diff --git a/src/types/auth/index.ts b/src/types/auth/index.ts
index a758244..1bdfbb9 100644
--- a/src/types/auth/index.ts
+++ b/src/types/auth/index.ts
@@ -1,3 +1,12 @@
+import { FormEvent } from 'react'
+
+export interface AuthFormProps {
+  errors: any;
+  touched: any; 
+  isSubmitting: boolean;
+  handleSubmit: (event: FormEvent<HTMLFormElement>) => void; 
+}
+
 export interface AuthFields {
   email: string;
   password: string;