diff --git a/public/images/_95b8f045-1e51-438c-b82f-497af3764144.jpg b/public/images/_95b8f045-1e51-438c-b82f-497af3764144.jpg
new file mode 100644
index 0000000..91d4357
Binary files /dev/null and b/public/images/_95b8f045-1e51-438c-b82f-497af3764144.jpg differ
diff --git a/public/images/earlyAdopter.png b/public/images/earlyAdopter.png
new file mode 100644
index 0000000..0567e9b
Binary files /dev/null and b/public/images/earlyAdopter.png differ
diff --git a/public/images/home-hero.jpg b/public/images/home-hero.jpg
deleted file mode 100644
index 394074a..0000000
Binary files a/public/images/home-hero.jpg and /dev/null differ
diff --git a/public/images/home-hero.png b/public/images/home-hero.png
new file mode 100644
index 0000000..2952322
Binary files /dev/null and b/public/images/home-hero.png differ
diff --git a/public/images/login4.png b/public/images/login4.png
new file mode 100644
index 0000000..71a740f
Binary files /dev/null and b/public/images/login4.png differ
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 2600c5d..684f707 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -22,6 +22,8 @@ export default function Footer({ type = 'platform' }: { type?: 'public' | 'platf
         align={'center'}
         justify={'center'}
       >
+
+        <Flex align={'center'} justify={'center'} fontSize={'sm'}>
         <Text>
           <Text
             as={'span'}
@@ -32,16 +34,23 @@ export default function Footer({ type = 'platform' }: { type?: 'public' | 'platf
           </Text>{' '}
           All rights reserved.
         </Text>
+          <Divider
+            orientation={'vertical'}
+            mx={2}
+            h={'1rem'}
+            borderColor={useColorModeValue('gray.300', 'gray.700')}
+          />
         <Text>
-          System hosted by
+          System hosted and forked by{' '}
           <Text
             as={'span'}
             fontWeight={'bold'}
             letterSpacing={'tight'}
           >
              PT Amperra Sambung Semesta Sentosa
-          </Text>{' '}
+          </Text>
         </Text>
+        </Flex>
         <Flex align={'center'} justify={'center'} fontSize={'sm'}>
           <Link
             as={NextLink}
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index a33cab7..244f273 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -54,7 +54,7 @@ export default function Home({ allPostsData: posts }: { allPostsData: any }) {
             w={'full'}
           >
             <Image
-              src={'/images/home-hero.jpg'}
+              src={'/images/home-hero.png'}
               alt={'Home Image'}
               w={"full"}
               height={"full"}
@@ -64,7 +64,50 @@ export default function Home({ allPostsData: posts }: { allPostsData: any }) {
             />
           </Flex>
         </Flex>
-        {/* <Flex
+        <Flex
+          minH={'50vh'}
+          maxW={'container.xl'}
+          mx={{ base: 4, md: 16 }}
+          py={16}
+          borderBottom={'1px solid'}
+          borderColor={useColorModeValue('blackAlpha.900', 'whiteAlpha.900')}
+        >
+          <Box
+            flexGrow={1}
+            flexBasis={1}
+            display={{ base: 'none', md: 'block' }}
+          >
+            <Heading
+              size={'xl'}
+              fontWeight={'400'}
+              pb={2}
+            >
+              Apa itu Restrafes XCS?
+            </Heading>
+          </Box>
+          <Box
+            flexGrow={1}
+            flexBasis={1}
+          >
+            <Heading
+              size={'xl'}
+              fontWeight={'400'}
+              pb={2}
+            >
+              What is Restrafes XCS?
+            </Heading>
+            <Text fontSize={'xl'}>
+              Restrafes XCS is a powerful access control system designed to help you manage access points for your
+              building. With Restrafes XCS, you can easily and securely control who has access to your property, including
+              employees and visitors. The system is highly customizable, allowing you to set access levels and permissions
+              for different users, and offers a range of advanced features such as real-time monitoring, reporting, and
+              reverse-compatibility with other systems. Whether you&apos;re looking to enhance the security of your
+              business or residential property, Restrafes XCS provides the flexibility and reliability you need
+              to manage access with confidence.
+            </Text>
+          </Box>
+        </Flex>
+                <Flex
           flexDir={'column'}
           minH={'50vh'}
           w={'container.xl'}
@@ -106,49 +149,6 @@ export default function Home({ allPostsData: posts }: { allPostsData: any }) {
               </Flex>
             </Flex>
           </Box>
-        </Flex> */}
-        <Flex
-          minH={'50vh'}
-          maxW={'container.xl'}
-          mx={{ base: 4, md: 16 }}
-          py={16}
-          borderBottom={'1px solid'}
-          borderColor={useColorModeValue('blackAlpha.900', 'whiteAlpha.900')}
-        >
-          <Box
-            flexGrow={1}
-            flexBasis={1}
-            display={{ base: 'none', md: 'block' }}
-          >
-            <Heading
-              size={'xl'}
-              fontWeight={'400'}
-              pb={2}
-            >
-              Qu&apos;est-ce que Restrafes XCS?
-            </Heading>
-          </Box>
-          <Box
-            flexGrow={1}
-            flexBasis={1}
-          >
-            <Heading
-              size={'xl'}
-              fontWeight={'400'}
-              pb={2}
-            >
-              What is Restrafes XCS?
-            </Heading>
-            <Text fontSize={'xl'}>
-              Restrafes XCS is a powerful access control system designed to help you manage access points for your
-              building. With Restrafes XCS, you can easily and securely control who has access to your property, including
-              employees and visitors. The system is highly customizable, allowing you to set access levels and permissions
-              for different users, and offers a range of advanced features such as real-time monitoring, reporting, and
-              reverse-compatibility with other systems. Whether you&apos;re looking to enhance the security of your
-              business or residential property, Restrafes XCS provides the flexibility and reliability you need
-              to manage access with confidence.
-            </Text>
-          </Box>
         </Flex>
         <Flex
           flexDir={{ base: 'column', md: 'row' }}
diff --git a/src/components/nav/Nav.tsx b/src/components/nav/Nav.tsx
index 140a4bf..45f74fc 100644
--- a/src/components/nav/Nav.tsx
+++ b/src/components/nav/Nav.tsx
@@ -180,6 +180,13 @@ export default function Nav({ type }: { type?: string }) {
               Blog
               <Icon as={BsArrowUpRight} ml={1} h={3} />
             </NavLink> */}
+            <NavLink
+              href={'https://store.ryj.my.id'}
+              pathname={pathname as string}
+            >
+              Storefront
+              <Icon as={BsArrowUpRight} ml={1} h={3} />
+            </NavLink>
             <NavLink
               href={'/auth/login'}
               pathname={pathname as string}
diff --git a/src/components/nav/PlatformNav.tsx b/src/components/nav/PlatformNav.tsx
index 0185750..eb5f12e 100644
--- a/src/components/nav/PlatformNav.tsx
+++ b/src/components/nav/PlatformNav.tsx
@@ -35,7 +35,7 @@ import {
 import { HamburgerIcon } from '@chakra-ui/icons';
 
 import { AiFillHome, AiFillInfoCircle, AiFillSetting } from 'react-icons/ai';
-import { BiSolidExit, BiSolidNotification, BiSolidTime } from 'react-icons/bi';
+import { BiSolidExit, BiSolidNotification, BiSolidTime, BiSolidStoreAlt } from 'react-icons/bi';
 import { FaBell, FaBuilding, FaIdBadge } from 'react-icons/fa';
 import { ImTree } from 'react-icons/im';
 import { IoHomeSharp } from 'react-icons/io5';
@@ -471,6 +471,14 @@ export default function PlatformNav({ type, title }: { type?: string; title?: st
               >
                 Help & Information
               </NavLink>
+              <NavLink
+                href={'https://xcs-docs.restrafes.co/'}
+                target={'_blank'}
+                pathname={pathname}
+                leftIcon={<BiSolidStoreAlt />}
+              >
+                Storefront
+              </NavLink>
             </>
           )}
           {(!isAuthLoaded || currentUser) ? (
diff --git a/src/pages/auth/login/index.tsx b/src/pages/auth/login/index.tsx
index 8783874..f84c9b0 100644
--- a/src/pages/auth/login/index.tsx
+++ b/src/pages/auth/login/index.tsx
@@ -8,10 +8,10 @@ import {
   Flex,
   FormControl,
   FormLabel,
+  Image,
   Input,
   InputGroup,
   InputLeftElement,
-  Image,
   Link,
   Modal,
   ModalBody,
@@ -171,16 +171,16 @@ export default function Login() {
                   maxW={"container.md"}
                   overflow={'hidden'}
                   height={{ base: 'auto', md: '500px' }}
-                // boxShadow={'rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;'}
+                  boxShadow={'rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;'}
                 >
-                  <Image flex={"0 0 auto"} display={{ base: "none", md: "flex" }} src={'/images/login4.jpeg'} alt={'Login'} objectFit={'cover'} w={'sm'} h={"full"} />
-                  <Flex flex={"0 0 auto"} display={{ base: "none", md: "flex" }} objectFit={'cover'} w={'sm'} h={"full"} flexDir={'column'}>
+                  <Image flex={"0 0 auto"} display={{ base: "none", md: "flex" }} src={'/images/login4.png'} alt={'Login'} objectFit={'cover'} w={'sm'} h={"full"} />
+                  {/* <Flex flex={"0 0 auto"} display={{ base: "none", md: "flex" }} objectFit={'cover'} w={'sm'} h={"full"} flexDir={'column'}>
                     <Box
                       backgroundColor={useColorModeValue('gray.200', 'gray.700')}
                       w={'full'}
                       h={'full'}
                     />
-                  </Flex>
+                  </Flex> */}
                   <Flex flex={"1 1 auto"} flexDir={'column'} justify={"center"} align={"flex-start"} py={8} px={10}>
                     <Box
                       w={'full'}
@@ -189,7 +189,7 @@ export default function Login() {
                         fontSize={"3xl"}
                         fontWeight={'bold'}
                       >
-                        Welcome! welcome to City 17.
+                        Welcome! 
                       </Text>
                       <Text color={"gray.500"} fontSize={'md'}>Please present your credentials to continue.</Text>
                     </Box>