diff --git a/README.md b/README.md
new file mode 100644
index 0000000..a0f8243
--- /dev/null
+++ b/README.md
@@ -0,0 +1,41 @@
+# TextBee - Android SMS Gateway
+
+A simple SMS gateway that allows users to send SMS messages from a web interface or
+from their application via a REST API. It utilizes android phones as SMS gateways.
+
+- **Technology stack**: React, Next.js, Node.js, NestJs, MongoDB, Android, Java
+- **Status**: MVP in development, not ready for production use yet
+- **Link**: [https://textbee.vernu.dev](https://textbee.vernu.dev/)
+
+![](https://ik.imagekit.io/vernu/textbee/texbee-landing-light.png?updatedAt=1687076964687)
+
+## Usage
+
+1. Go to [textbee.vernu.dev](https://textbee.vernu.dev) and register or login with your account
+2. Install the app on your android phone from [textbee.vernu.dev/android](https://textbee.vernu.dev/android)
+3. Open the app and grant the permissions for SMS
+4. Go to [textbee.vernu.dev/dashboard](https://textbee.vernu.dev/dashboard) and click register device/ generate API Key
+5. Scan the QR code with the app or enter the API key manually
+6. You are ready to send SMS messages from the dashboard or from your application via the REST API
+
+**Code Snippet**: Few lines of code showing how to send an SMS message via the REST API
+
+```javascript
+const API_KEY = 'YOUR_API_KEY';
+const DEVICE_ID = 'YOUR_DEVICE_ID';
+
+await axios.post(`https://api.textbee.vernu.dev/api/v1/devices/${DEVICE_ID}/sendSMS?apiKey=${API_KEY}`, {
+  receivers: [ '+251912345678' ],
+  smsBody: 'Hello World!',
+})
+
+```
+
+## Contributing
+
+Contributions are welcome!
+
+1. Fork the project.
+2. Create a feature or bugfix branch from `main` branch.
+3. Make sure your commit messages and PR comment summaries are descriptive.
+4. Create a pull request to the `main` branch.
diff --git a/android/.idea/.name b/android/.idea/.name
index 6c55949..a454675 100644
--- a/android/.idea/.name
+++ b/android/.idea/.name
@@ -1 +1 @@
-SMS Gateway
\ No newline at end of file
+TextBee
\ No newline at end of file
diff --git a/android/app/build.gradle b/android/app/build.gradle
index 168b628..a9fa6c1 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -10,8 +10,8 @@ android {
         applicationId "com.vernu.sms"
         minSdk 24
         targetSdk 32
-        versionCode 5
-        versionName "1.3.0"
+        versionCode 7
+        versionName "2.0"
 
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
     }
diff --git a/android/app/src/main/java/com/vernu/sms/activities/MainActivity.java b/android/app/src/main/java/com/vernu/sms/activities/MainActivity.java
index 689382f..4bcdf42 100644
--- a/android/app/src/main/java/com/vernu/sms/activities/MainActivity.java
+++ b/android/app/src/main/java/com/vernu/sms/activities/MainActivity.java
@@ -54,7 +54,7 @@ public class MainActivity extends AppCompatActivity {
     private static final int SEND_SMS_PERMISSION_REQUEST_CODE = 0;
     private static final int SCAN_QR_REQUEST_CODE = 49374;
 
-    private static final String API_BASE_URL = "https://api.sms.vernu.dev/api/v1/";
+    private static final String API_BASE_URL = "https://api.textbee.vernu.dev/api/v1/";
     private String deviceId = null;
 
 
@@ -89,6 +89,12 @@ public class MainActivity extends AppCompatActivity {
         deviceIdTxt.setText(deviceId);
         deviceBrandAndModelTxt.setText(Build.BRAND + " " + Build.MODEL);
 
+        if(deviceId == null || deviceId.isEmpty()) {
+            registerDeviceBtn.setText("Register");
+        } else {
+            registerDeviceBtn.setText("Update");
+        }
+
         if (isSMSPermissionGranted(mContext)) {
             grantSMSPermissionBtn.setEnabled(false);
             grantSMSPermissionBtn.setText("SMS Permission Granted");
@@ -146,7 +152,7 @@ public class MainActivity extends AppCompatActivity {
 
         scanQRBtn.setOnClickListener(view -> {
             IntentIntegrator intentIntegrator = new IntentIntegrator(MainActivity.this);
-            intentIntegrator.setPrompt("Go to sms.vernu.dev/dashboard and click Register Device to generate QR Code");
+            intentIntegrator.setPrompt("Go to textbee.vernu.dev/dashboard and click Register Device to generate QR Code");
             intentIntegrator.setRequestCode(SCAN_QR_REQUEST_CODE);
             intentIntegrator.initiateScan();
         });
diff --git a/android/app/src/main/res/layout/activity_main.xml b/android/app/src/main/res/layout/activity_main.xml
index 0de57c3..11c26d1 100644
--- a/android/app/src/main/res/layout/activity_main.xml
+++ b/android/app/src/main/res/layout/activity_main.xml
@@ -27,7 +27,7 @@
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:text="Go to sms.vernu.dev/dashboard and click register device, then copy and paste the api key generated or scan the QR code" />
+            android:text="Go to textbee.vernu.dev/dashboard and click register device, then copy and paste the api key generated or scan the QR code" />
 
         <Button
             android:id="@+id/grantSMSPermissionBtn"
diff --git a/android/app/src/main/res/values-night/themes.xml b/android/app/src/main/res/values-night/themes.xml
index 25d4073..d93b633 100644
--- a/android/app/src/main/res/values-night/themes.xml
+++ b/android/app/src/main/res/values-night/themes.xml
@@ -2,12 +2,12 @@
     <!-- Base application theme. -->
     <style name="Theme.SMSGateway" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
         <!-- Primary brand color. -->
-        <item name="colorPrimary">#f35b04</item>
-        <item name="colorPrimaryVariant">#f18701</item>
+        <item name="colorPrimary">#4299E1</item>
+        <item name="colorPrimaryVariant">#4299cc</item>
         <item name="colorOnPrimary">@color/white</item>
         <!-- Secondary brand color. -->
-        <item name="colorSecondary">#3d348b</item>
-        <item name="colorSecondaryVariant">#7678ed</item>
+        <item name="colorSecondary">#f35b04</item>
+        <item name="colorSecondaryVariant">#f18701</item>
         <item name="colorOnSecondary">@color/black</item>
         <!-- Status bar color. -->
         <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
diff --git a/android/app/src/main/res/values/strings.xml b/android/app/src/main/res/values/strings.xml
index eb0248b..c263911 100644
--- a/android/app/src/main/res/values/strings.xml
+++ b/android/app/src/main/res/values/strings.xml
@@ -1,3 +1,3 @@
 <resources>
-    <string name="app_name">SMS Gateway</string>
+    <string name="app_name">TextBee</string>
 </resources>
\ No newline at end of file
diff --git a/android/app/src/main/res/values/themes.xml b/android/app/src/main/res/values/themes.xml
index 25d4073..d93b633 100644
--- a/android/app/src/main/res/values/themes.xml
+++ b/android/app/src/main/res/values/themes.xml
@@ -2,12 +2,12 @@
     <!-- Base application theme. -->
     <style name="Theme.SMSGateway" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
         <!-- Primary brand color. -->
-        <item name="colorPrimary">#f35b04</item>
-        <item name="colorPrimaryVariant">#f18701</item>
+        <item name="colorPrimary">#4299E1</item>
+        <item name="colorPrimaryVariant">#4299cc</item>
         <item name="colorOnPrimary">@color/white</item>
         <!-- Secondary brand color. -->
-        <item name="colorSecondary">#3d348b</item>
-        <item name="colorSecondaryVariant">#7678ed</item>
+        <item name="colorSecondary">#f35b04</item>
+        <item name="colorSecondaryVariant">#f18701</item>
         <item name="colorOnSecondary">@color/black</item>
         <!-- Status bar color. -->
         <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
diff --git a/android/settings.gradle b/android/settings.gradle
index f8cf97b..0b82b4e 100644
--- a/android/settings.gradle
+++ b/android/settings.gradle
@@ -12,5 +12,5 @@ dependencyResolutionManagement {
         mavenCentral()
     }
 }
-rootProject.name = "SMS Gateway"
+rootProject.name = "TextBee"
 include ':app'
diff --git a/api/src/main.ts b/api/src/main.ts
index 0c0623b..83abe89 100644
--- a/api/src/main.ts
+++ b/api/src/main.ts
@@ -16,8 +16,8 @@ async function bootstrap() {
   })
 
   const config = new DocumentBuilder()
-    .setTitle('VERNU SMS Gateway api docs')
-    .setDescription('api docs')
+    .setTitle('TextBee API Docs')
+    .setDescription('TextBee - Android SMS Gateway API Docs')
     .setVersion('1.0')
     .addBearerAuth()
     .build()
diff --git a/web/.env.example b/web/.env.example
index e947137..8352dcd 100644
--- a/web/.env.example
+++ b/web/.env.example
@@ -1,2 +1,2 @@
-NEXT_PUBLIC_API_BASE_URL=https://api.sms.vernu.dev/api/v1
+NEXT_PUBLIC_API_BASE_URL=https://api.textbee.vernu.dev/api/v1
 NEXT_PUBLIC_GOOGLE_CLIENT_ID=
\ No newline at end of file
diff --git a/web/components/Footer.tsx b/web/components/Footer.tsx
new file mode 100644
index 0000000..1053f57
--- /dev/null
+++ b/web/components/Footer.tsx
@@ -0,0 +1,52 @@
+import {
+  Box,
+  chakra,
+  Container,
+  Stack,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react'
+import Link from 'next/link'
+
+export default function Footer() {
+  return (
+    <Box
+      bg={useColorModeValue('gray.50', 'gray.900')}
+      color={useColorModeValue('gray.700', 'gray.200')}
+    >
+      <Container
+        as={Stack}
+        maxW={'6xl'}
+        py={4}
+        spacing={4}
+        justify={'center'}
+        align={'center'}
+      >
+        <Stack direction={'row'} spacing={6}>
+          <Link href='/'>Home</Link>
+          <Link href='/dashboard'>Dashboard</Link>
+          <Link href='/android'>Download App</Link>
+          <Link href='https://github.com/vernu/textbee'>Github</Link>
+        </Stack>
+      </Container>
+
+      <Box
+        borderTopWidth={1}
+        borderStyle={'solid'}
+        borderColor={useColorModeValue('gray.200', 'gray.700')}
+      >
+        <Container
+          as={Stack}
+          maxW={'6xl'}
+          py={4}
+          direction={{ base: 'column', md: 'row' }}
+          spacing={4}
+          justify='center'
+          align={{ base: 'center', md: 'center' }}
+        >
+          <Text>© {new Date().getFullYear()} All rights reserved</Text>
+        </Container>
+      </Box>
+    </Box>
+  )
+}
diff --git a/web/components/Navbar.tsx b/web/components/Navbar.tsx
index 02ea415..aae6412 100644
--- a/web/components/Navbar.tsx
+++ b/web/components/Navbar.tsx
@@ -27,7 +27,12 @@ export default function Navbar() {
 
   return (
     <>
-      <Box bg={useColorModeValue('gray.100', 'gray.700')} px={4} shadow='lg' mb={1}>
+      <Box
+        bg={useColorModeValue('gray.100', 'blue.600')}
+        px={4}
+        shadow='lg'
+        mb={1}
+      >
         <Flex h={16} alignItems={'center'} justifyContent={'space-between'}>
           <Link href='/' passHref>
             <Flex alignItems={'center'}>
@@ -37,9 +42,10 @@ export default function Navbar() {
                 w={'30px'}
                 h={'30px'}
                 src={'/images/sms-gateway-logo.png'}
+                borderRadius='full'
               />
               <Box style={{ cursor: 'pointer', marginLeft: '5px' }}>
-                VERNU SMS
+                TextBee
               </Box>
             </Flex>
           </Link>
@@ -50,6 +56,12 @@ export default function Navbar() {
                 {colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
               </Button>
 
+              <Menu>
+                <Link href='https://github.com/vernu/textbee' passHref>
+                  <MenuButton>Github</MenuButton>
+                </Link>
+              </Menu>
+
               {!user ? (
                 <>
                   <Menu>
@@ -102,7 +114,6 @@ export default function Navbar() {
                     >
                       Dashboard
                     </MenuItem>
-                    <MenuItem>Account Settings</MenuItem>
                     <MenuItem
                       onClick={() => {
                         dispatch(logout())
diff --git a/web/components/dashboard/DeviceList.tsx b/web/components/dashboard/DeviceList.tsx
index fb85546..0b4b182 100644
--- a/web/components/dashboard/DeviceList.tsx
+++ b/web/components/dashboard/DeviceList.tsx
@@ -64,20 +64,13 @@ const DeviceList = () => {
                   <Tr key={_id}>
                     <Td>{`${brand}/ ${model}`}</Td>
                     <Td>{enabled ? 'enabled' : 'disabled'}</Td>
-                    <Td>
-                      <EmailIcon onDoubleClick={(e) => {}} />
-                    </Td>
+                    <Td>{/* <EmailIcon onDoubleClick={(e) => {}} /> */}</Td>
                     <Td>
                       <Tooltip label='Double Click to delete'>
                         <IconButton
                           aria-label='Delete'
                           icon={<DeleteIcon />}
-                          onDoubleClick={(e) => {
-                            sendSMSRequest(_id, {
-                              receivers: ['+251912657519'],
-                              smsBody: 'Hello World',
-                            })
-                          }}
+                          onDoubleClick={(e) => {}}
                         />
                       </Tooltip>
                     </Td>
diff --git a/web/components/dashboard/GenerateApiKey.tsx b/web/components/dashboard/GenerateApiKey.tsx
index aeb48fe..970b9a9 100644
--- a/web/components/dashboard/GenerateApiKey.tsx
+++ b/web/components/dashboard/GenerateApiKey.tsx
@@ -1,4 +1,5 @@
 import {
+  Box,
   Button,
   chakra,
   Flex,
@@ -112,32 +113,40 @@ export default function GenerateApiKey() {
   }
   return (
     <>
-      {' '}
-      <Flex justifyContent='center'>
-        <Button
-          /* flex={1} */
-          px={4}
-          fontSize={'sm'}
-          rounded={'full'}
-          bg={'blue.400'}
-          color={'white'}
-          boxShadow={
-            '0px 1px 25px -5px rgb(66 153 225 / 48%), 0 10px 10px -5px rgb(66 153 225 / 43%)'
-          }
-          _hover={{
-            bg: 'blue.500',
-          }}
-          _focus={{
-            bg: 'blue.500',
-          }}
-          onClick={generateApiKey}
-          disabled={generatingApiKey}
-        >
-          {generatingApiKey
-            ? 'generating... '
-            : 'Generate Api Key/ Register Device'}
-        </Button>
-      </Flex>
+      <Box padding={5} border='1px solid gray' marginBottom={10} borderRadius='2xl'>
+        <Flex direction='row' justifyContent='space-between'>
+          {' '}
+          <chakra.h1
+            fontSize='md'
+            fontWeight='bold'
+            mt={2}
+            color={useColorModeValue('gray.800', 'white')}
+          >
+            Generate Api Key and Register Device
+          </chakra.h1>
+          <Button
+            /* flex={1} */
+            px={4}
+            fontSize={'sm'}
+            rounded={'full'}
+            bg={'blue.400'}
+            color={'white'}
+            boxShadow={
+              '0px 1px 25px -5px rgb(66 153 225 / 48%), 0 10px 10px -5px rgb(66 153 225 / 43%)'
+            }
+            _hover={{
+              bg: 'blue.500',
+            }}
+            _focus={{
+              bg: 'blue.500',
+            }}
+            onClick={generateApiKey}
+            disabled={generatingApiKey}
+          >
+            {generatingApiKey ? 'loading... ' : 'Get Started'}
+          </Button>
+        </Flex>{' '}
+      </Box>
       {generatedApiKey && (
         <>
           {
diff --git a/web/components/dashboard/SendSMS.tsx b/web/components/dashboard/SendSMS.tsx
index 408265f..194bb69 100644
--- a/web/components/dashboard/SendSMS.tsx
+++ b/web/components/dashboard/SendSMS.tsx
@@ -1,6 +1,7 @@
 import {
   Box,
   Button,
+  Flex,
   FormLabel,
   Input,
   Modal,
@@ -53,7 +54,11 @@ export default function SendSMS() {
 
   return (
     <>
-      <Button onClick={onOpen}>Start Sending</Button>
+      <Flex justifyContent='flex-end' marginBottom={20}>
+        <Button bg={'blue.400'} color={'white'} onClick={onOpen}>
+          Send SMS
+        </Button>
+      </Flex>
 
       <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />
diff --git a/web/components/dashboard/UserStats.tsx b/web/components/dashboard/UserStats.tsx
index c731787..3833014 100644
--- a/web/components/dashboard/UserStats.tsx
+++ b/web/components/dashboard/UserStats.tsx
@@ -1,26 +1,34 @@
 import { Box, SimpleGrid, chakra } from '@chakra-ui/react'
 import React from 'react'
 import { useSelector } from 'react-redux'
+import { selectApiKeyList } from '../../store/apiKeyListReducer'
 import { selectAuth } from '../../store/authReducer'
+import { selectDeviceList } from '../../store/deviceListReducer'
 import UserStatsCard from './UserStatsCard'
 
 const UserStats = () => {
   const { user: currentUser } = useSelector(selectAuth)
+
+  const { data: deviceListData } = useSelector(selectDeviceList)
+  const { data: apiKeyListData } = useSelector(selectApiKeyList)
+  
   return (
     <>
       <Box maxW='7xl' mx={'auto'} pt={5} px={{ base: 2, sm: 12, md: 17 }}>
-        <chakra.h1
-          textAlign={'center'}
-          fontSize={'4xl'}
-          py={10}
-          fontWeight={'bold'}
-        >
-          Welcome {currentUser?.name}
-        </chakra.h1>
-        <SimpleGrid columns={{ base: 1, md: 3 }} spacing={{ base: 5, lg: 8 }}>
-          <UserStatsCard title={'Registered '} stat={'2 devices'} />
-          <UserStatsCard title={'Generated'} stat={'3 API Keys'} />
-          <UserStatsCard title={'Sent'} stat={'100 SMS'} />
+        <SimpleGrid columns={{ base: 1, md: 2 }} >
+          <chakra.h1
+            textAlign={'center'}
+            fontSize={'4xl'}
+            py={10}
+            fontWeight={'bold'}
+          >
+            Welcome {currentUser?.name}
+          </chakra.h1>
+          <SimpleGrid columns={{ base: 3 }} spacing={{ base: 5, lg: 8 }}>
+            <UserStatsCard title={'Registered '} stat={`${deviceListData?.length || '-:-'} Devices`} />
+            <UserStatsCard title={'Generated'} stat={`${apiKeyListData?.length || '-:-'} API Keys`} />
+            <UserStatsCard title={'Sent'} stat={'-:- SMS'} />
+          </SimpleGrid>
         </SimpleGrid>
       </Box>
     </>
diff --git a/web/components/dashboard/UserStatsCard.tsx b/web/components/dashboard/UserStatsCard.tsx
index b0d0708..c9acbc2 100644
--- a/web/components/dashboard/UserStatsCard.tsx
+++ b/web/components/dashboard/UserStatsCard.tsx
@@ -16,11 +16,14 @@ export default function UserStatsCard({ ...props }) {
       border={'1px solid'}
       borderColor={useColorModeValue('gray.800', 'gray.500')}
       rounded={'lg'}
+      style={{
+        height: '90px'
+      }}
     >
       <StatLabel fontWeight={'medium'} isTruncated>
         {title}
       </StatLabel>
-      <StatNumber fontSize={'2xl'} fontWeight={'medium'}>
+      <StatNumber fontSize={'md'} fontWeight={'bold'}>
         {stat}
       </StatNumber>
     </Stat>
diff --git a/web/components/home/CodeSnippetSection.tsx b/web/components/home/CodeSnippetSection.tsx
new file mode 100644
index 0000000..6323445
--- /dev/null
+++ b/web/components/home/CodeSnippetSection.tsx
@@ -0,0 +1,42 @@
+import { Box, Flex, Heading, Image, Text } from '@chakra-ui/react'
+import React from 'react'
+
+export default function CodeSnippetSection() {
+  return (
+    <Box m={{ base: 0, md: 8 }} p={{ base: 0, md: 8 }}>
+      <Flex
+        height='100%'
+        direction='column'
+        justifyContent='center'
+        alignItems='center'
+      >
+        <Heading fontSize={'3xl'} textAlign={'center'} py={8}>
+          Code Snippet
+        </Heading>
+        <Text color={'gray.600'} fontSize={'lg'} textAlign={'center'} pb='4'>
+          Send SMS messages from your web application using our REST API. You
+          can use any programming language to interact with our API. Here is a
+          sample code snippet in JavaScript using axios library.
+        </Text>
+
+        <Box
+          borderRadius={'lg'}
+          padding={{ base: 0, md: 8 }}
+          border={'1px solid #E2E8F0'}
+          w={{ base: '100%', md: '70%' }}
+        >
+          <Image
+            alt={'Hero Image'}
+            fit={'cover'}
+            align={'center'}
+            // h={'100%'}
+            src={
+              'https://ik.imagekit.io/vernu/textbee/Screenshot_2023-06-18_at_11.30.25_AM.png?updatedAt=1687077054749'
+            }
+            borderRadius={'lg'}
+          />
+        </Box>
+      </Flex>
+    </Box>
+  )
+}
diff --git a/web/components/home/DownloadAppSection.tsx b/web/components/home/DownloadAppSection.tsx
new file mode 100644
index 0000000..3674da6
--- /dev/null
+++ b/web/components/home/DownloadAppSection.tsx
@@ -0,0 +1,88 @@
+import {
+  Box,
+  Button,
+  chakra,
+  Flex,
+  Image,
+  useColorModeValue,
+} from '@chakra-ui/react'
+import React from 'react'
+
+export default function DownloadAppSection() {
+  return (
+    <Box my={16}>
+      <Flex
+        padding={5}
+        background={useColorModeValue('gray.100', 'gray.700')}
+        borderRadius='2xl'
+      >
+        <Flex
+          borderRadius='2xl'
+          m={{ base: 5, md: 8 }}
+          p={{ base: 5, md: 8 }}
+          width='100%'
+          border='1px solid gray'
+          direction='row'
+          justifyContent='center'
+        >
+          <Box>
+            <Image
+              alt={'Hero Image'}
+              fit={'cover'}
+              align={'center'}
+              w={'180px'}
+              // h={'100%'}
+              src={'/images/smsgatewayandroid.png'}
+            />
+          </Box>
+          <Box>
+            <Flex
+              height='100%'
+              direction='column'
+              justifyContent='center'
+              alignItems='center'
+            >
+              <chakra.h1
+                fontSize='md'
+                fontWeight='bold'
+                my={4}
+                color={useColorModeValue('gray.800', 'white')}
+              >
+                Download the App to get started!
+              </chakra.h1>
+              <chakra.p
+                fontSize='sm'
+                color={useColorModeValue('gray.600', 'gray.400')}
+                mb={4}
+              >
+                Unlock the power of messaging with our open-source Android SMS
+                Gateway.
+              </chakra.p>
+              <a href='/android' target='_blank'>
+                <Button
+                  /* flex={1} */
+                  px={4}
+                  fontSize={'sm'}
+                  rounded={'full'}
+                  bg={'blue.400'}
+                  color={'white'}
+                  boxShadow={
+                    '0px 1px 25px -5px rgb(66 153 225 / 48%), 0 10px 10px -5px rgb(66 153 225 / 43%)'
+                  }
+                  _hover={{
+                    bg: 'blue.500',
+                  }}
+                  _focus={{
+                    bg: 'blue.500',
+                  }}
+                >
+                  Download App
+                </Button>
+              </a>
+            </Flex>
+          </Box>
+        </Flex>
+      </Flex>
+    </Box>
+  )
+}
diff --git a/web/components/home/FeaturesSection.tsx b/web/components/home/FeaturesSection.tsx
index 8caed05..63840d4 100644
--- a/web/components/home/FeaturesSection.tsx
+++ b/web/components/home/FeaturesSection.tsx
@@ -8,37 +8,46 @@ import {
   SimpleGrid,
   Stack,
   Text,
+  useColorModeValue,
   VStack,
 } from '@chakra-ui/react'
 import React from 'react'
 import { featuresContent } from './featuresContent'
 
-const FeaturesSection = () => {
+export default function FeaturesSection() {
+  const boxBgColor = useColorModeValue('gray.100', 'gray.800')
+
   return (
-    <Box p={4}>
-      <Stack spacing={4} as={Container} maxW={'6xl'}>
-        <Heading fontSize={'3xl'} textAlign={'center'} pb={8}>
-          Features
-        </Heading>
-        <Text color={'gray.600'} fontSize={'lg'} textAlign={'justify'}>
-          The ultimate solution for your messaging needs! Our free open-source
-          Android-based SMS Gateway provides you with all the features you need
-          to effectively manage your SMS communications. From sending messages
-          and automating messaging workflows via API, our SMS Gateway is the
-          perfect tool for any small/mid business or individual.
-        </Text>
-      </Stack>
+    <Box p={4} my={16} maxW={'6xl'}>
+      <Heading fontSize={'3xl'} textAlign={'center'} pb={0}>
+        Features
+      </Heading>
+      <Text color={'gray.600'} fontSize={'lg'} textAlign={'center'}>
+        The ultimate solution for your messaging needs! Our free open-source
+        Android-based SMS Gateway provides you with all the features you need to
+        effectively manage your SMS communications. From sending messages and
+        automating messaging workflows via API, our SMS Gateway is the perfect
+        tool for any small/mid business or individual.
+      </Text>
 
-      <Container maxW={'6xl'} mt={10}>
+      <Container maxW={'6xl'} mt={0}>
         <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={3} pt={16}>
           {featuresContent.map((feature, i) => (
-            <HStack key={i} align={'top'} borderWidth="1px" borderRadius="md" p={2} shadow='lg' >
+            <HStack
+              key={i}
+              align={'top'}
+              borderWidth='1px'
+              borderRadius='sm'
+              p={2}
+              shadow='lg'
+              background={boxBgColor}
+            >
               <Box color={'green.400'} px={1}>
                 <Icon as={CheckIcon} />
               </Box>
               <VStack align={'start'}>
-                <Text fontWeight={600}>{feature.title}</Text>
-                <Text color={'gray.600'}>{feature.description}</Text>
+                <Text fontWeight={800}>{feature.title}</Text>
+                <Text fontWeight='normal'>{feature.description}</Text>
               </VStack>
             </HStack>
           ))}
@@ -47,5 +56,3 @@ const FeaturesSection = () => {
     </Box>
   )
 }
-
-export default FeaturesSection
diff --git a/web/components/home/HowItWorksSection.tsx b/web/components/home/HowItWorksSection.tsx
index ca8884a..2a96b54 100644
--- a/web/components/home/HowItWorksSection.tsx
+++ b/web/components/home/HowItWorksSection.tsx
@@ -2,13 +2,11 @@ import { AddIcon, MinusIcon } from '@chakra-ui/icons'
 import {
   Accordion,
   AccordionButton,
-  AccordionIcon,
   AccordionItem,
   AccordionPanel,
   Box,
   Container,
   Heading,
-  Stack,
   Text,
 } from '@chakra-ui/react'
 import React from 'react'
@@ -16,22 +14,20 @@ import { howItWorksContent } from './howItWorksContent'
 
 export default function HowItWorksSection() {
   return (
-    <Box p={4}>
-      <Stack spacing={4} as={Container} maxW={'6xl'}>
-        <a id='#how-it-works'>
-          <Heading fontSize={'3xl'} textAlign={'center'} py={8}>
-            How It Works
-          </Heading>
-        </a>
-        <Text color={'gray.600'} fontSize={'lg'} textAlign={'justify'}>
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
-          exercitationem quo quibusdam, fugit quaerat odio quisquam commodi ut?
-          Aliquid ab sapiente, expedita quas neque amet consectetur quisquam
-          reprehenderit voluptas commodi?
-        </Text>
-      </Stack>
+    <Box px={4} my={24} maxW={'6xl'}>
+      {/* @ts-ignore */}
+      <a name='how-it-works'>
+        <Heading fontSize={'3xl'} textAlign={'center'}>
+          How It Works
+        </Heading>
+      </a>
+      <Text color={'gray.600'} fontSize={'lg'} textAlign={'center'}>
+        How it works is simple. You install the app on your Android device, and
+        it will turn your device into a SMS Gateway. You can then use the API to
+        send SMS messages from your own applications.
+      </Text>
 
-      <Container maxW={'6xl'} mt={10} pt={8}>
+      <Container maxW={'6xl'} mt={10} pt={0}>
         <Accordion allowMultiple defaultIndex={[]}>
           {howItWorksContent.map(({ title, description }) => (
             <AccordionItem key={title}>
diff --git a/web/components/home/IntroSection.tsx b/web/components/home/IntroSection.tsx
index e7d74be..a6df21a 100644
--- a/web/components/home/IntroSection.tsx
+++ b/web/components/home/IntroSection.tsx
@@ -7,15 +7,27 @@ import {
   Text,
   Button,
   Image,
-  IconButton,
   createIcon,
 } from '@chakra-ui/react'
 import Link from 'next/link'
 import Router from 'next/router'
+import { selectAuth } from '../../store/authReducer'
+import { useSelector } from 'react-redux'
+import { ChatIcon } from '@chakra-ui/icons'
 
 export default function IntroSection() {
+  const { currentUser } = useSelector(selectAuth)
+
+  const handleGetStarted = () => {
+    if (!currentUser) {
+      Router.push('/register')
+    } else {
+      Router.push('/dashboard')
+    }
+  }
+
   return (
-    <Container maxW={'7xl'}>
+    <Container maxW={'7xl'} py={8}>
       <Stack
         align={'center'}
         spacing={{ base: 8, md: 10 }}
@@ -28,28 +40,21 @@ export default function IntroSection() {
             fontWeight={600}
             fontSize={{ base: '3xl', sm: '4xl', lg: '5xl' }}
           >
-            <Text
-              as={'span'}
-              position={'relative'}
-              _after={{
-                content: "''",
-                width: 'full',
-                height: '30%',
-                position: 'absolute',
-                bottom: 1,
-                left: 0,
-                bg: 'blue.400',
-                zIndex: -1,
-              }}
-            >
-              VERNU SMS Gateway,
+            <Text as={'span'} position={'relative'} fontWeight={600}>
+              <ChatIcon /> Text
+              <Text as={'span'} color={'blue.400'} decoration='underline'>
+                Bee
+              </Text>
             </Text>
             <br />
-            <Text as={'span'} color={'blue.400'}>
+            <Text as={'span'} color={'blue.400'} fontWeight={300}>
               Make your android device a portable SMS Gateway!
             </Text>
           </Heading>
-          <Text color={'gray.500'}>
+          <Text
+            color={'gray.500'}
+            fontSize={{ base: 'md', sm: 'lg', lg: 'xl' }}
+          >
             Unlock the power of messaging with our open-source Android SMS
             Gateway.
           </Text>
@@ -65,9 +70,7 @@ export default function IntroSection() {
               colorScheme={'blue'}
               bg={'blue.400'}
               _hover={{ bg: 'blue.500' }}
-              onClick={() => {
-                Router.push('/register')
-              }}
+              onClick={handleGetStarted}
             >
               Get Started
             </Button>
@@ -95,29 +98,17 @@ export default function IntroSection() {
             position={'relative'}
             height={'400px'}
             rounded={'2xl'}
-            boxShadow={'2xl'}
+            boxShadow={'xs'}
             width={'full'}
             overflow={'hidden'}
           >
-            <IconButton
-              aria-label={'Play Button'}
-              variant={'ghost'}
-              _hover={{ bg: 'transparent' }}
-              icon={<PlayIcon w={12} h={12} />}
-              size={'lg'}
-              color={'white'}
-              position={'absolute'}
-              left={'50%'}
-              top={'50%'}
-              transform={'translateX(-50%) translateY(-50%)'}
-            />
             <Image
               alt={'Hero Image'}
               fit={'cover'}
               align={'center'}
-              w={'100%'}
-              h={'100%'}
-              src={'/images/landing-img1.jpeg'}
+              // w={'100%'}
+              // h={'100%'}
+              src={'/images/smsgatewayandroid.png'}
             />
           </Box>
         </Flex>
diff --git a/web/components/home/howItWorksContent.ts b/web/components/home/howItWorksContent.ts
index 35e6ee8..24a38ab 100644
--- a/web/components/home/howItWorksContent.ts
+++ b/web/components/home/howItWorksContent.ts
@@ -1,23 +1,23 @@
 export const howItWorksContent = [
   {
-    title: 'Step 1: Download The Android App',
+    title: 'Step 1: Download The Android App from textbee.vernu.dev/android',
     description:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+      '',
   },
   {
     title: 'Step 2: Generate an API Key from the dashboard',
     description:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+      '',
   },
   {
     title:
       'Step 3: Scan the QR/ enter your api key manually and enable the gateway app',
     description:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+      '',
   },
   {
     title: 'Step 4: Start sending',
     description:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+      'You can now send SMS from the dashboard. or visit the API docs at https://api.textbee.vernu.dev to send SMS programatically',
   },
 ]
diff --git a/web/components/meta/Meta.tsx b/web/components/meta/Meta.tsx
index 50f9f3a..6c90993 100644
--- a/web/components/meta/Meta.tsx
+++ b/web/components/meta/Meta.tsx
@@ -3,10 +3,10 @@ import Head from 'next/head'
 export default function Meta() {
   return (
     <Head>
-      <title>SMS Gateway</title>
+      <title>TextBee - SMS Gateway</title>
       <meta name='viewport' content='initial-scale=1.0, width=device-width' />
       <meta name='description' content='Android SMS Gateway' />
-      <meta name='keywords' content='android, sms, gateway, sms-gateway' />
+      <meta name='keywords' content='android, text, sms, gateway, sms-gateway' />
       <meta name='author' content='Israel Abebe' />
       <link rel='icon' href='/favicon.ico' />
     </Head>
diff --git a/web/lib/axiosInstance.ts b/web/lib/customAxios.ts
similarity index 70%
rename from web/lib/axiosInstance.ts
rename to web/lib/customAxios.ts
index 2d4c6d7..98d262f 100644
--- a/web/lib/axiosInstance.ts
+++ b/web/lib/customAxios.ts
@@ -1,11 +1,11 @@
 import axios from 'axios'
 import { LOCAL_STORAGE_KEY } from '../shared/constants'
 
-const axiosInstance = axios.create({
+const customAxios = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API_BASE_URL,
 })
 
-axiosInstance.interceptors.request.use((config) => {
+customAxios.interceptors.request.use((config) => {
   const token = localStorage.getItem(LOCAL_STORAGE_KEY.TOKEN)
   if (token) {
     config.headers.Authorization = `Bearer ${token}`
@@ -13,4 +13,4 @@ axiosInstance.interceptors.request.use((config) => {
   return config
 })
 
-export default axiosInstance
+export default customAxios
diff --git a/web/next.config.js b/web/next.config.js
index a843cbe..4a5796b 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -1,6 +1,15 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  async redirects() {
+    return [
+      {
+        source: '/android',
+        destination: 'https://appdistribution.firebase.dev/i/1439f7af2d1e8e8e',
+        permanent: false,
+      },
+    ]
+  },
 }
 
 module.exports = nextConfig
diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
index f310872..a58f94a 100644
--- a/web/pages/_app.tsx
+++ b/web/pages/_app.tsx
@@ -2,11 +2,12 @@ import '../styles/globals.css'
 import type { AppProps } from 'next/app'
 import { Provider } from 'react-redux'
 import { store } from '../store/store'
-import { ChakraProvider } from '@chakra-ui/react'
+import { Box, ChakraProvider } from '@chakra-ui/react'
 import Navbar from '../components/Navbar'
 import Meta from '../components/meta/Meta'
 import { GoogleOAuthProvider } from '@react-oauth/google'
 import ErrorBoundary from '../components/ErrorBoundary'
+import Footer from '../components/Footer'
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <ErrorBoundary>
@@ -20,6 +21,7 @@ function MyApp({ Component, pageProps }: AppProps) {
             <Wrapper>
               <Component {...pageProps} />
             </Wrapper>
+            <Footer />
           </ChakraProvider>
         </GoogleOAuthProvider>
       </Provider>
@@ -28,7 +30,7 @@ function MyApp({ Component, pageProps }: AppProps) {
 }
 
 const Wrapper = ({ children }) => {
-  return <>{children}</>
+  return <Box minH='75vh'>{children}</Box>
 }
 
 export default MyApp
diff --git a/web/pages/api/hello.ts b/web/pages/api/hello.ts
deleted file mode 100644
index f8bcc7e..0000000
--- a/web/pages/api/hello.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-type Data = {
-  name: string
-}
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>
-) {
-  res.status(200).json({ name: 'John Doe' })
-}
diff --git a/web/pages/dashboard/index.tsx b/web/pages/dashboard/index.tsx
index 5f39dd7..6b0f463 100644
--- a/web/pages/dashboard/index.tsx
+++ b/web/pages/dashboard/index.tsx
@@ -28,19 +28,18 @@ export default function Dashboard() {
     <>
       <UserStats />
       <Box maxW='7xl' mx={'auto'} pt={5} px={{ base: 2, sm: 12, md: 17 }}>
-        <Flex justifyContent='space-evenly'>
-          <GenerateApiKey />
-          <SendSMS />
-        </Flex>
+        <Flex justifyContent='space-eve nly'></Flex>
 
         <br />
         <SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: 5, lg: 8 }}>
-          <Box backdropBlur='2xl' borderWidth='1px' borderRadius='lg'>
+          <Box backdropBlur='2xl' borderWidth='0px' borderRadius='lg'>
+            <GenerateApiKey />
             <ErrorBoundary>
               <ApiKeyList />
             </ErrorBoundary>
           </Box>
-          <Box backdropBlur='2xl' borderWidth='1px' borderRadius='lg'>
+          <Box backdropBlur='2xl' borderWidth='0px' borderRadius='lg'>
+            <SendSMS />
             <ErrorBoundary>
               <DeviceList />
             </ErrorBoundary>
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
index 981f4d5..32b459f 100644
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -1,28 +1,17 @@
-import { Box, Container } from '@chakra-ui/react'
+import { Container } from '@chakra-ui/react'
 import { useGoogleOneTapLogin } from '@react-oauth/google'
-import Image from 'next/image'
-import Router from 'next/router'
-import { useEffect } from 'react'
+
 import { useDispatch, useSelector } from 'react-redux'
 import FeaturesSection from '../components/home/FeaturesSection'
 import HowItWorksSection from '../components/home/HowItWorksSection'
 import IntroSection from '../components/home/IntroSection'
 import { loginWithGoogle, selectAuth } from '../store/authReducer'
-import wageSvg from '../public/images/wave.svg'
 
-const Wave = ({ rotate }: { rotate?: boolean }) => (
-  <Box transform={rotate ? 'rotate(180deg)' : ''}>
-    <Image src={wageSvg} alt={'wave'} />
-  </Box>
-)
+import DownloadAppSection from '../components/home/DownloadAppSection'
+import CodeSnippetSection from '../components/home/CodeSnippetSection'
 
 export default function HomePage() {
-  const { accessToken, user } = useSelector(selectAuth)
-  useEffect(() => {
-    if (accessToken && user) {
-      Router.push('/dashboard')
-    }
-  }, [accessToken, user])
+  const { user } = useSelector(selectAuth)
 
   const dispatch = useDispatch()
 
@@ -41,11 +30,10 @@ export default function HomePage() {
   return (
     <Container maxW={'7xl'}>
       <IntroSection />
-      <Wave rotate />
       <FeaturesSection />
-      <Wave />
       <HowItWorksSection />
-      <Wave />
+      <DownloadAppSection />
+      <CodeSnippetSection />
     </Container>
   )
 }
diff --git a/web/public/favicon.ico b/web/public/favicon.ico
index 718d6fe..e0b4826 100644
Binary files a/web/public/favicon.ico and b/web/public/favicon.ico differ
diff --git a/web/public/images/landing-img1.jpeg b/web/public/images/landing-img1.jpeg
deleted file mode 100644
index 5f6f81a..0000000
Binary files a/web/public/images/landing-img1.jpeg and /dev/null differ
diff --git a/web/public/images/smsgatewayandroid.png b/web/public/images/smsgatewayandroid.png
new file mode 100644
index 0000000..6002480
Binary files /dev/null and b/web/public/images/smsgatewayandroid.png differ
diff --git a/web/services/index.ts b/web/services/index.ts
index 157e911..fbe7921 100644
--- a/web/services/index.ts
+++ b/web/services/index.ts
@@ -1,4 +1,4 @@
-import axiosInstance from '../lib/axiosInstance'
+import axios from '../lib/customAxios'
 import {
   GoogleLoginRequestPayload,
   LoginRequestPayload,
@@ -11,41 +11,46 @@ import {
 export const loginRequest = async (
   payload: LoginRequestPayload
 ): Promise<LoginResponse> => {
-  const res = await axiosInstance.post(`/auth/login`, payload)
+  const res = await axios.post(`/auth/login`, payload)
   return res.data.data
 }
 
 export const loginWithGoogleRequest = async (
   payload: GoogleLoginRequestPayload
 ): Promise<LoginResponse> => {
-  const res = await axiosInstance.post(`/auth/google-login`, payload)
+  const res = await axios.post(`/auth/google-login`, payload)
   return res.data.data
 }
 
 export const registerRequest = async (
   payload: RegisterRequestPayload
 ): Promise<RegisterResponse> => {
-  const res = await axiosInstance.post(`/auth/register`, payload)
+  const res = await axios.post(`/auth/register`, payload)
+  return res.data.data
+}
+
+export const getCurrentUserRequest = async () => {
+  const res = await axios.get(`/auth/who-am-i`)
   return res.data.data
 }
 
 export const generateApiKeyRequest = async () => {
-  const res = await axiosInstance.post(`/auth/api-keys`, {})
+  const res = await axios.post(`/auth/api-keys`, {})
   return res.data.data
 }
 
 export const getApiKeyListRequest = async () => {
-  const res = await axiosInstance.get(`/auth/api-keys`)
+  const res = await axios.get(`/auth/api-keys`)
   return res.data.data
 }
 
 export const deleteApiKeyRequest = async (id: string) => {
-  const res = await axiosInstance.delete(`/auth/api-keys/${id}`)
+  const res = await axios.delete(`/auth/api-keys/${id}`)
   return res.data.data
 }
 
 export const getDeviceListRequest = async () => {
-  const res = await axiosInstance.get(`/gateway/devices`)
+  const res = await axios.get(`/gateway/devices`)
   return res.data.data
 }
 
@@ -53,7 +58,7 @@ export const sendSMSRequest = async (
   deviceId: string,
   payload: SendSMSRequestPayload
 ) => {
-  const res = await axiosInstance.post(
+  const res = await axios.post(
     `/gateway/devices/${deviceId}/sendSMS`,
     payload
   )
diff --git a/web/services/types.ts b/web/services/types.ts
index 28b15a1..b6ba53f 100644
--- a/web/services/types.ts
+++ b/web/services/types.ts
@@ -43,6 +43,10 @@ export interface LoginResponse extends BaseResponse {
 
 export type RegisterResponse = LoginResponse
 
+export interface CurrentUserResponse extends BaseResponse {
+  data: UserEntity
+}
+
 export interface SendSMSRequestPayload {
   receivers: string[]
   smsBody: string
diff --git a/web/shared/constants.ts b/web/shared/constants.ts
index 696302e..0b8113a 100644
--- a/web/shared/constants.ts
+++ b/web/shared/constants.ts
@@ -1,4 +1,4 @@
-export const KEY_PREFIX = 'sms0'
+export const KEY_PREFIX = 'textbee'
 
 export const LOCAL_STORAGE_KEY = {
   USER: `${KEY_PREFIX}.user`,