diff --git a/src/component/form/form-field/form-field.tsx b/src/component/form/form-field/form-field.tsx
index a17f057..fff5a45 100644
--- a/src/component/form/form-field/form-field.tsx
+++ b/src/component/form/form-field/form-field.tsx
@@ -20,6 +20,8 @@ interface ExtendedFormFieldProps extends FormFieldProps {
   errors?: any
   helperText?: string
   defaultValue?: string
+  isAccount?: boolean
+  disabled?: boolean
   setValue?: (value: string) => void
 }
 
@@ -37,6 +39,8 @@ const FormField = forwardRef(
       helperText,
       isGithub,
       errors,
+      isAccount = false,
+      disabled = false,
       required = false
     }: ExtendedFormFieldProps,
     ref
@@ -56,10 +60,10 @@ const FormField = forwardRef(
 
     return (
       <TextField
-        variant='filled'
+        variant={isAccount ? 'outlined' : 'filled'}
         color='primary'
         autoComplete={autoComplete}
-        disabled={submitting || sent}
+        disabled={submitting || sent || disabled}
         label={label}
         placeholder={placeholder}
         type={showPassword ? type : isPassword ? KEY.PASSWORD : type}
@@ -95,26 +99,50 @@ const FormField = forwardRef(
         fullWidth
         {...register(name)}
         sx={{
-          color: 'common.white',
-          '& .MuiFilledInput-root': {
-            color: 'common.black',
-            backgroundColor: 'common.white',
-            '& .MuiInputLabel-root': {
+          ...(!isAccount && {
+            color: 'common.white',
+            '& .MuiFilledInput-root': {
+              color: 'common.black',
+              backgroundColor: 'common.white',
+              '& .MuiInputLabel-root': {
+                color: 'common.white'
+              },
+              '&.Mui-focused .MuiInputBase-input': {
+                color: 'common.black'
+              },
+              '&.Mui-focused': {
+                backgroundColor: 'secondary.main'
+              },
+              '&:hover': {
+                backgroundColor: 'secondary.main'
+              }
+            },
+            '&:active': {
               color: 'common.white'
+            }
+          }),
+          // if isAccount is true, then apply the following styles
+          ...(isAccount && {
+            '& .MuiOutlinedInput-notchedOutline': {
+              border: 'none',
+              fontWeight: 'bold'
+            },
+            '&.Mui-focused': {
+              backgroundColor: 'transparent'
             },
-            '&.Mui-focused .MuiInputBase-input': {
+            // edit label color
+            '& .MuiInputLabel-root': {
               color: 'common.black'
             },
-            '&.Mui-focused': {
-              backgroundColor: 'secondary.main'
+            // disabled text color
+            '& .MuiInputBase-input ': {
+              color: 'grey.800',
+              opacity: 1,
+              fontWeight: 'bold'
             },
-            '&:hover': {
-              backgroundColor: 'secondary.main'
-            }
-          },
-          '&:active': {
-            color: 'common.white'
-          },
+            backgroundColor: 'transparent',
+            fontWeight: 'bold'
+          }),
           padding: 1,
           marginY: 1
         }}
diff --git a/src/component/setting/style.tsx b/src/component/setting/style.tsx
index 4dbb128..03e3d54 100644
--- a/src/component/setting/style.tsx
+++ b/src/component/setting/style.tsx
@@ -18,7 +18,6 @@ export const SCard = styled(CardActionArea, {
   border: `solid 1px ${alpha(theme.palette.grey[800], 0.22)}`,
   ...(selected && {
     color: theme.palette.primary.main,
-    // boxShadow: theme.customShadow.z12,
     borderColor: alpha(theme.palette.grey[800], 0.22)
   })
 }))
diff --git a/src/config/category.ts b/src/config/category.ts
new file mode 100644
index 0000000..69d08f0
--- /dev/null
+++ b/src/config/category.ts
@@ -0,0 +1,7 @@
+export const CATEGORY = {
+  GENERAL: 'General',
+  AI_DIGITAL_TRANSFORMATION: 'AI & Digital Transformation',
+  SUSTAINABILITY: 'Sustainability',
+  LEADERSHIP_INTERPERSONAL_SKILLS: 'Leadership & Interpersonal Skills',
+  DATABASES: 'Databases'
+}
diff --git a/src/config/icon-directory.ts b/src/config/icon-directory.ts
index 0b4e767..e6b852b 100644
--- a/src/config/icon-directory.ts
+++ b/src/config/icon-directory.ts
@@ -40,6 +40,7 @@ const ICON_WEB = {
   MODE_LIGHT: _getWebIcon('sun'),
   MODE_DARK: _getWebIcon('moon'),
 
+  SAVE: _getWebIcon('save-outline'),
   SUCCESS: _getWebIcon('checkmark-circle-2'),
   SETTING: _getWebIcon('cog'),
   WARNING: _getWebIcon('alert-triangle'),
@@ -87,6 +88,7 @@ export enum ICON_WEB_NAME {
   FULLSCREEN_EXIT = 'FULLSCREEN_EXIT',
   REFRESH = 'REFRESH',
 
+  SAVE = 'SAVE',
   SUCCESS = 'SUCCESS',
   SETTING = 'SETTING',
   WARNING = 'WARNING',
diff --git a/src/config/index.ts b/src/config/index.ts
index 1ed4098..9e78453 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -2,3 +2,4 @@ export { default as GLOBAL } from './global'
 export { default as ASSET } from './asset-directory'
 export * from './icon-directory'
 export * from './dimension'
+export * from './category'
diff --git a/src/constant/aria.ts b/src/constant/aria.ts
index f8e4e5d..59d587e 100644
--- a/src/constant/aria.ts
+++ b/src/constant/aria.ts
@@ -3,7 +3,9 @@ enum ARIA {
   NEW_PASSWORD = 'new-password',
   FIRST_NAME = 'First name',
   LAST_NAME = 'Last name',
-  TOGGLE_PASSWORD = 'toggle password visibility'
+  TOGGLE_PASSWORD = 'toggle password visibility',
+  TABS = 'tabs',
+  COMPANY_BADGE = 'company badge'
 }
 
 export default ARIA
diff --git a/src/constant/button.ts b/src/constant/button.ts
index 0ff96f5..0713f99 100644
--- a/src/constant/button.ts
+++ b/src/constant/button.ts
@@ -81,7 +81,8 @@ enum BUTTON {
   //  @auth
   LOG_IN = 'Log In',
   LOG_OUT = 'Log Out',
-  REGISTER = 'Register'
+  REGISTER = 'Register',
+  START_APPLICATION = ' Start your Application'
 }
 
 export { BUTTON }
diff --git a/src/constant/component.ts b/src/constant/component.ts
new file mode 100644
index 0000000..6553918
--- /dev/null
+++ b/src/constant/component.ts
@@ -0,0 +1,14 @@
+export enum COMPONENT {
+  GS_LOADING_BUTTON = 'GSLoadingButton',
+  S_TOOLBAR = 'SToolbar',
+  S_BADGE_HEADER = 'SBadgeHeader',
+  S_CARD = 'SCard',
+  S_SCROLL_BOX = 'SScrollBox',
+  S_SCROLL_GRID = 'SScrollGrid',
+  GS_CONTAINER_GRID = 'GSContainerGrid',
+  SECTION = 'section',
+  GRID = 'Grid',
+  DIV = 'div',
+  IMG = 'img',
+  A = 'a'
+}
diff --git a/src/constant/index.ts b/src/constant/index.ts
index c739a4a..d4637c2 100644
--- a/src/constant/index.ts
+++ b/src/constant/index.ts
@@ -15,3 +15,6 @@ export { BUTTON } from './button'
 export * from './typography'
 export * from './size'
 export * from './color'
+export * from './component'
+export * from './variant'
+export * from './sx'
diff --git a/src/constant/key.ts b/src/constant/key.ts
index 70d7eee..dbab1f9 100644
--- a/src/constant/key.ts
+++ b/src/constant/key.ts
@@ -9,6 +9,7 @@ enum KEY {
   PHOTO_DEFAULT = 'no-photo.jpeg',
   BADGE_DEFAULT = 'no-badge.png',
   // @form
+  FULL_NAME = 'fullname',
   FIRST_NAME = 'firstname',
   LAST_NAME = 'lastname',
   EMAIL = 'email',
@@ -28,6 +29,7 @@ enum KEY {
   TEXT = 'text',
   AUTO = 'auto',
   END = 'end',
+  IMAGE = 'img',
   // modes
   LIGHT = 'light',
   DARK = 'dark',
@@ -43,7 +45,9 @@ enum KEY {
   TOP = 'top',
   BOTTOM = 'bottom',
   LEFT = 'left',
-  RIGHT = 'right'
+  RIGHT = 'right',
+  HORIZONTAL = 'horizontal',
+  VERTICAL = 'vertical'
 }
 
 export default KEY
diff --git a/src/constant/label.ts b/src/constant/label.ts
index f116eb3..0743237 100644
--- a/src/constant/label.ts
+++ b/src/constant/label.ts
@@ -27,7 +27,9 @@ const LABEL = {
   TRAINER: 'Trainer',
 
   BOOTCAMP_PAGE_TITLE: 'Worldclass Bootcamps Worldwide',
-  COURSE_PAGE_TITLE: 'World Class Courses'
+  COURSE_PAGE_TITLE: 'World Class Courses',
+
+  NEW_BOOTCAMPS: 'New Bootcamps'
 }
 
 export default LABEL
diff --git a/src/constant/placeholder.ts b/src/constant/placeholder.ts
index 1a360ff..c815ec8 100644
--- a/src/constant/placeholder.ts
+++ b/src/constant/placeholder.ts
@@ -10,6 +10,11 @@ enum PLACEHOLDER {
   COUNTRY = 'Country',
   ZIP_CODE = 'Zip Code',
 
+  BOOTCAMP_NAME = 'TCCP Exclusive',
+  NO_DURATION = 'No duration specified',
+  NO_TUITION = 'No tuition specified',
+  NO_MINIMUM_SKILL = 'No minimum skill required',
+
   // @bootcamp search form
   MILES_FROM = 'Miles From',
   ENTER_ZIPCODE = 'Enter Zipcode',
diff --git a/src/constant/sx.ts b/src/constant/sx.ts
new file mode 100644
index 0000000..f4c4bc2
--- /dev/null
+++ b/src/constant/sx.ts
@@ -0,0 +1,13 @@
+export enum FLEX {
+  FLEX = 'flex',
+  INLINE_FLEX = 'inline-flex',
+  FLEX_ROW = 'row',
+  FLEX_COLUMN = 'column',
+  FLEX_ROW_REVERSE = 'row-reverse',
+  FLEX_COLUMN_REVERSE = 'column-reverse',
+  FLEX_WRAP = 'wrap',
+  FLEX_NOWRAP = 'nowrap',
+  FLEX_WRAP_REVERSE = 'wrap-reverse',
+  FLEX_END = 'flex-end',
+  FLEX_START = 'flex-start'
+}
diff --git a/src/constant/variant.ts b/src/constant/variant.ts
new file mode 100644
index 0000000..c9e7f7c
--- /dev/null
+++ b/src/constant/variant.ts
@@ -0,0 +1,33 @@
+export enum BUTTON_VARIANT {
+  CONTAINED = 'contained',
+  OUTLINED = 'outlined',
+  TEXT = 'text'
+}
+
+export enum TYPOGRAPHY_VARIANT {
+  H1 = 'h1',
+  H2 = 'h2',
+  H3 = 'h3',
+  H4 = 'h4',
+  H5 = 'h5',
+  H6 = 'h6',
+  SUBTITLE1 = 'subtitle1',
+  SUBTITLE2 = 'subtitle2',
+  BODY1 = 'body1',
+  BODY2 = 'body2',
+  CAPTION = 'caption',
+  OVERLINE = 'overline'
+}
+
+export enum SKELETON_VARIANT {
+  RECTANGULAR = 'rectangular',
+  CIRCULAR = 'circular',
+  TEXT = 'text'
+}
+
+export enum VARIANT {
+  RECTANGULAR = 'rectangular',
+  CIRCULAR = 'circular',
+  OUTLINED = 'outlined',
+  COVER = 'cover'
+}
diff --git a/src/page/auth/account/user-account.tsx b/src/page/auth/account/user-account.tsx
index 119c7a8..a6c54f0 100644
--- a/src/page/auth/account/user-account.tsx
+++ b/src/page/auth/account/user-account.tsx
@@ -1,24 +1,87 @@
-import React, { useEffect } from 'react'
+import { useState, useEffect, Fragment } from 'react'
+import * as Yup from 'yup'
+import { yupResolver } from '@hookform/resolvers/yup'
 import { ICON_NAME, useIcon } from 'hook'
-import { CardMedia, Box, Typography, TextField, Button, Avatar, Grid, Divider, Accordion, AccordionSummary, AccordionDetails } from '@mui/material'
+import { useForm } from 'react-hook-form'
+import { useUpdateUserMutation } from 'store/slice'
+import { CardMedia, Box, Typography, Grid, Divider, Accordion, AccordionSummary, AccordionDetails, IconButton } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
+import { FormField, FormProvider } from 'component/form'
 import { MotionLazyContainer } from 'component/motion'
 import { BootcampCard } from 'section/bootcamp'
 import { DefaultAvatar } from 'component/avatar'
 import { useAccountQuery } from 'store/slice'
 import { SCard } from 'theme/style'
 import { ASSET } from 'config'
+import { KEY } from 'constant'
 import { mockBootcamp } from '_mock'
 
 const UserAccount = () => {
-  const theme = useTheme()
-  const { data: account, isLoading, refetch, error } = useAccountQuery({}) as any
+  const [isEditState, setIsEditState] = useState<boolean>(false)
+  const { data: account, isLoading, error, refetch } = useAccountQuery({}) as any
+  const [updateAccount] = useUpdateUserMutation()
   const { Icon, iconSrc: editIconSrc } = useIcon(ICON_NAME.EDIT)
   const { iconSrc: downIconSrc } = useIcon(ICON_NAME.CHEVRON_DOWN)
+  const { iconSrc: saveSrc } = useIcon(ICON_NAME.SAVE)
+  const theme = useTheme()
 
   const date = new Date(account?.data?.createdAt)
   const year = date.getFullYear()
-  const fullName = account?.data?.firstname + ' ' + account?.data?.lastname
+  const fullname = account?.data?.firstname + ' ' + account?.data?.lastname
+
+  const accountSchema = Yup.object().shape({
+    firstname: Yup.string().required(),
+    lastname: Yup.string().required(),
+    fullname: Yup.string(),
+    location: Yup.string(),
+    email: Yup.string().email(),
+    password: Yup.string(),
+    confirmPassword: Yup.string().oneOf([Yup.ref('password'), ''], 'Passwords must match')
+  })
+
+  const methods = useForm({
+    resolver: yupResolver(accountSchema),
+    defaultValues: {
+      firstname: account?.data?.firstname || '',
+      lastname: account?.data?.lastname || '',
+      email: account?.data?.email || '',
+      location: account?.data?.location || '',
+      fullname,
+      password: '',
+      confirmPassword: ''
+    }
+  })
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    setError,
+    formState: { errors, isSubmitting, isSubmitSuccessful }
+  } = methods
+
+  const onSubmit = async (data: any) => {
+    try {
+      if (account) {
+        await updateAccount(data)
+        refetch()
+      }
+    } catch (error: any) {
+      setError('email', {
+        type: 'manual',
+        message: error.message
+      })
+    }
+  }
+
+  const handleEdit = () => {
+    setIsEditState(!isEditState)
+  }
+
+  // refetch account data
+  useEffect(() => {
+    refetch()
+  }, [refetch])
 
   return (
     <MotionLazyContainer>
@@ -57,51 +120,100 @@ const UserAccount = () => {
               <Box mb={2}>
                 <Divider />
               </Box>
-              <TextField
-                variant='outlined'
-                label='Full Name'
-                value={fullName}
-                style={{ marginTop: '1rem' }}
-                fullWidth
-                InputProps={{
-                  sx: {
-                    '& .MuiOutlinedInput-notchedOutline': {
-                      border: 'none'
-                    },
-                    fontWeight: 'bold'
-                  }
-                }}
-              />
-              <TextField
-                variant='outlined'
-                label='Location'
-                value={account?.data?.location}
-                style={{ marginTop: '1rem' }}
-                fullWidth
-                InputProps={{
-                  sx: {
-                    '& .MuiOutlinedInput-notchedOutline': {
-                      border: 'none'
-                    },
-                    fontWeight: 'bold'
-                  }
-                }}
-              />
-              <TextField
-                variant='outlined'
-                label='Email'
-                value={account?.data?.email}
-                style={{ marginTop: '1rem' }}
-                fullWidth
-                InputProps={{
-                  sx: {
-                    '& .MuiOutlinedInput-notchedOutline': {
-                      border: 'none'
-                    },
-                    fontWeight: 'bold'
-                  }
-                }}
-              />
+
+              <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+                <FormField
+                  name={KEY.EMAIL}
+                  submitting={isSubmitting}
+                  sent={isSubmitSuccessful}
+                  errors={errors}
+                  label='Email'
+                  placeholder={account?.data?.email}
+                  autoComplete='email'
+                  type='email'
+                  disabled={!isEditState}
+                  required
+                  isAccount
+                />
+                <FormField
+                  name={KEY.LOCATION}
+                  submitting={isSubmitting}
+                  sent={isSubmitSuccessful}
+                  errors={errors}
+                  label='Location'
+                  placeholder={account?.data?.location}
+                  autoComplete='location'
+                  disabled={!isEditState}
+                  required
+                  isAccount
+                />
+                {isEditState ? (
+                  <Fragment>
+                    <FormField
+                      name={KEY.FIRST_NAME}
+                      submitting={isSubmitting}
+                      sent={isSubmitSuccessful}
+                      errors={errors}
+                      label='First name'
+                      placeholder={account?.data?.firstname}
+                      autoComplete='firstname'
+                      disabled={!isEditState}
+                      required
+                      isAccount
+                    />
+                    <FormField
+                      name={KEY.LAST_NAME}
+                      submitting={isSubmitting}
+                      sent={isSubmitSuccessful}
+                      errors={errors}
+                      label='Last name'
+                      placeholder={account?.data?.lastname}
+                      autoComplete='lastname'
+                      disabled={!isEditState}
+                      required
+                      isAccount
+                    />
+                    <Divider />
+                    <FormField
+                      name={KEY.PASSWORD}
+                      submitting={isSubmitting}
+                      sent={isSubmitSuccessful}
+                      errors={errors}
+                      label='Password'
+                      placeholder='Password'
+                      autoComplete='new-password'
+                      disabled={!isEditState}
+                      required
+                      isAccount
+                    />
+                    <FormField
+                      name={KEY.CONFIRM_PASSWORD}
+                      submitting={isSubmitting}
+                      sent={isSubmitSuccessful}
+                      errors={errors}
+                      label='Confirm password'
+                      placeholder='Confirm password'
+                      autoComplete='new-password'
+                      disabled={!isEditState}
+                      required
+                      isAccount
+                    />
+                  </Fragment>
+                ) : (
+                  <FormField
+                    name={KEY.FULL_NAME}
+                    submitting={isSubmitting}
+                    sent={isSubmitSuccessful}
+                    errors={errors}
+                    label='Full name'
+                    placeholder={fullname}
+                    autoComplete='fullname'
+                    disabled={!isEditState}
+                    required
+                    isAccount
+                  />
+                )}
+              </FormProvider>
             </Box>
           </Grid>
           <Grid item sm={9}>
@@ -120,21 +232,23 @@ const UserAccount = () => {
                       </Typography>
                     </Grid>
                     <Grid item sm={12} display='flex' justifyContent='flex-end'>
-                      <Icon
-                        icon={editIconSrc}
-                        width={25}
-                        sx={{
-                          cursor: 'pointer',
-                          color: theme.palette.common.white,
-                          backgroundColor: theme.palette.primary.main,
-                          padding: '0.5rem',
-                          borderRadius: '.4rem',
-                          transition: 'all 0.3s ease',
-                          '&:hover': {
-                            transform: 'scale(1.1)'
-                          }
-                        }}
-                      />
+                      <IconButton onClick={handleEdit}>
+                        <Icon
+                          icon={isEditState ? saveSrc : editIconSrc}
+                          width={25}
+                          sx={{
+                            cursor: 'pointer',
+                            color: theme.palette.common.white,
+                            backgroundColor: theme.palette.primary.main,
+                            padding: '0.5rem',
+                            borderRadius: '.4rem',
+                            transition: 'all 0.3s ease',
+                            '&:hover': {
+                              transform: 'scale(1.1)'
+                            }
+                          }}
+                        />
+                      </IconButton>
                     </Grid>
                   </Grid>
                 </Box>
diff --git a/src/page/course/course.tsx b/src/page/course/course.tsx
index 29fa019..3022637 100644
--- a/src/page/course/course.tsx
+++ b/src/page/course/course.tsx
@@ -1,6 +1,6 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { m } from 'framer-motion'
-import { useGetAllCourseQuery } from 'store/slice'
+import { useGetAllBootcampQuery } from 'store/slice'
 import { MotionLazyContainer } from 'component/motion'
 import { Box, Grid, Pagination } from '@mui/material'
 import { CourseCard } from 'section/course'
@@ -10,14 +10,22 @@ import { Typography } from 'component/typography'
 import { CourseSearch } from 'section/course'
 import { ASSET } from 'config'
 import { LABEL } from 'constant'
+
 const Course = () => {
   const [currentPage, setCurrentPage] = useState(1)
-  const { data, error, isLoading } = useGetAllCourseQuery()
+  const { data, error, isLoading, refetch } = useGetAllBootcampQuery()
 
   const handlePageChange = (event: any, value: any) => {
     setCurrentPage(value)
   }
 
+  useEffect(() => {
+    if (!isLoading) {
+      window.scrollTo(0, 0)
+      refetch()
+    }
+  }, [])
+
   return (
     <MotionLazyContainer>
       <Box sx={{ margin: 10, px: 10, height: '100%' }}>
diff --git a/src/section/bootcamp/bootcamp-card.tsx b/src/section/bootcamp/bootcamp-card.tsx
index 233f0b3..f1ebcdc 100644
--- a/src/section/bootcamp/bootcamp-card.tsx
+++ b/src/section/bootcamp/bootcamp-card.tsx
@@ -1,55 +1,21 @@
 import { FC } from 'react'
-import { Box, CardContent, CardMedia, Chip, Grid, Typography, Rating } from '@mui/material'
-import { SScrollBox, SBadgeHeader } from 'theme/style'
-import { ServerPath } from 'route/path'
-import { KEY } from 'constant'
-import { ASSET } from 'config'
-
-interface BootcampCardProps {
-  _id?: string
-  name: string
-  badge: string
-  description: string
-  address: string
-  photo: string
-  rating: number
-  careers?: string[] | null
-}
-
-interface UploadLocationProps {
-  bootcamp: BootcampCardProps
-}
-
-function photoLocation({ bootcamp }: UploadLocationProps) {
-  return bootcamp?.photo === KEY.PHOTO_DEFAULT
-    ? ServerPath.ORIGIN + `/upload/` + bootcamp?.photo
-    : ServerPath.ORIGIN + `/upload/${bootcamp._id}/` + bootcamp?.photo
-}
-
-function badgeLocation({ bootcamp }: UploadLocationProps) {
-  return bootcamp?.badge === KEY.BADGE_DEFAULT
-    ? ServerPath.ORIGIN + `/upload/badge/` + bootcamp?.badge
-    : ServerPath.ORIGIN + `/upload/badge/${bootcamp._id}/` + bootcamp?.badge
-}
+import { Box, CardContent, CardMedia, Grid, Typography, Rating } from '@mui/material'
+import { GSContainerGrid, SBadgeHeader } from 'theme/style'
+import { BootcampCareer } from 'section/bootcamp'
+import { ARIA, COMPONENT, FLEX, KEY, TYPOGRAPHY_VARIANT, VARIANT } from 'constant'
+import { badgeLocation, photoLocation } from 'util/asset-loc'
 
 const BootcampCard: FC<UploadLocationProps> = ({ bootcamp }) => {
   return (
-    <Grid
-      container
-      sx={{
-        mb: 4,
-        borderRadius: 2,
-        bgcolor: 'grey.300',
-        backgroundImage: `url(${ASSET.DOT_MATRIX_BG})`
-      }}>
+    <GSContainerGrid container>
       <Grid item xs={4}>
         <CardMedia
-          component='img'
+          component={COMPONENT.IMG}
           image={photoLocation({ bootcamp })}
           alt={bootcamp.name}
           sx={{
             height: { xs: '100vh', sm: 200, md: 200, lg: 250, xl: 300 },
-            objectFit: 'cover'
+            objectFit: VARIANT.COVER
           }}
         />
       </Grid>
@@ -58,18 +24,18 @@ const BootcampCard: FC<UploadLocationProps> = ({ bootcamp }) => {
           <Box>
             <Grid container>
               <Grid item xs={8}>
-                <Typography variant='h4' color='common.black'>
+                <Typography variant={TYPOGRAPHY_VARIANT.H4} color='common.black'>
                   {bootcamp?.name}
                 </Typography>
               </Grid>
               <Grid item xs={4}>
-                <Grid container spacing={0} justifyContent='flex-end'>
+                <Grid container spacing={0} justifyContent={FLEX.FLEX_END}>
                   <CardMedia
-                    component='img'
+                    component={KEY.IMAGE}
                     src={badgeLocation({ bootcamp })}
-                    alt='company badge'
+                    alt={ARIA.COMPANY_BADGE}
                     height={50}
-                    sx={{ width: 50, display: 'flex', justifyContent: 'flex-end', borderRadius: 2 }}
+                    sx={{ width: 50, display: FLEX.FLEX, justifyContent: FLEX.FLEX_END, borderRadius: 2 }}
                   />
                 </Grid>
               </Grid>
@@ -83,19 +49,15 @@ const BootcampCard: FC<UploadLocationProps> = ({ bootcamp }) => {
             }}
           />
           <Box height={40}>
-            <Typography variant='body2'>{bootcamp.description}</Typography>
+            <Typography variant={TYPOGRAPHY_VARIANT.BODY2}>{bootcamp.description}</Typography>
           </Box>
-          <Typography variant='h6' py={2}>
-            {bootcamp?.address}
+          <Typography variant={TYPOGRAPHY_VARIANT.H6} py={2}>
+            {bootcamp?.location?.city}, {bootcamp?.location?.state}
           </Typography>
         </CardContent>
-        <SScrollBox my={2} ml={2}>
-          {bootcamp?.careers?.map((chip: string, index: number) => (
-            <Chip key={index} label={chip} variant='outlined' size='small' sx={{ mr: 2, color: 'common.black' }} />
-          ))}
-        </SScrollBox>
+        <BootcampCareer bootcamp={bootcamp} />
       </Grid>
-    </Grid>
+    </GSContainerGrid>
   )
 }
 
diff --git a/src/section/bootcamp/bootcamp-career.tsx b/src/section/bootcamp/bootcamp-career.tsx
new file mode 100644
index 0000000..26902b7
--- /dev/null
+++ b/src/section/bootcamp/bootcamp-career.tsx
@@ -0,0 +1,16 @@
+import { FC } from 'react'
+import { Chip } from '@mui/material'
+import { SScrollBox } from 'theme/style'
+import { SIZE, VARIANT } from 'constant'
+
+const BootcampCareer: FC<UploadLocationProps> = ({ bootcamp }) => {
+  return (
+    <SScrollBox>
+      {bootcamp?.careers?.map((chip: string, index: number) => (
+        <Chip key={index} label={chip} variant={VARIANT.OUTLINED} size={SIZE.SMALL} sx={{ mr: 1, color: 'common.black' }} />
+      ))}
+    </SScrollBox>
+  )
+}
+
+export default BootcampCareer
diff --git a/src/section/bootcamp/index.ts b/src/section/bootcamp/index.ts
index 11f5914..6ae88dc 100644
--- a/src/section/bootcamp/index.ts
+++ b/src/section/bootcamp/index.ts
@@ -1,3 +1,4 @@
 export { default as Bootcamp } from './bootcamp'
 export { default as BootcampSearch } from './bootcamp-search'
 export { default as BootcampCard } from './bootcamp-card'
+export { default as BootcampCareer } from './bootcamp-career'
diff --git a/src/section/course/course-card.tsx b/src/section/course/course-card.tsx
index 6287c8f..ed177d9 100644
--- a/src/section/course/course-card.tsx
+++ b/src/section/course/course-card.tsx
@@ -4,16 +4,18 @@ import { dispatch } from 'store'
 import { useGetBootcampQuery } from 'store/slice'
 import { Box, CardContent, CardMedia, Chip, Grid, Typography, Rating } from '@mui/material'
 import { ServerPath } from 'route/path'
-import { KEY } from 'constant'
+import { KEY, PLACEHOLDER } from 'constant'
 import { ASSET } from 'config'
 import { capitalize } from 'util/format'
+import { badgeLocation } from 'util/asset-loc'
 
 interface CourseCardProps {
   course: Course
 }
 
 const CourseCard: FC<CourseCardProps> = ({ course }) => {
-  const { data: bootcamp, error, isLoading } = useGetBootcampQuery(course?.bootcamp?._id)
+  const { data, error, isLoading, refetch } = useGetBootcampQuery(course?.bootcamp?._id)
+  const { data: bootcamp } = data
 
   let minimumSkill = ''
 
@@ -21,11 +23,11 @@ const CourseCard: FC<CourseCardProps> = ({ course }) => {
     minimumSkill = capitalize(course?.minimumSkill)
   }
 
-  function badgeLocation(bootcamp: Bootcamp) {
-    return bootcamp?.badge === KEY.BADGE_DEFAULT
-      ? ServerPath.ORIGIN + `/upload/badge/` + bootcamp?.badge
-      : ServerPath.ORIGIN + `/upload/badge/${bootcamp?._id}/` + bootcamp?.badge
-  }
+  useEffect(() => {
+    if (!isLoading) {
+      refetch()
+    }
+  }, [])
 
   return (
     <Grid
@@ -42,18 +44,18 @@ const CourseCard: FC<CourseCardProps> = ({ course }) => {
           <Grid container>
             <Grid item xs={8}>
               <Typography variant='h5' color='common.black'>
-                {course?.title.charAt(0).toUpperCase() + course?.title.slice(1)}
+                {course?.title?.charAt(0).toUpperCase() + course?.title?.slice(1)}
               </Typography>
               <Grid container flex={1} flexDirection='row' gap={1}>
-                <Typography variant='subtitle2'>Duration: {course?.duration + ' weeks' || 'No duration specified'}</Typography>
-                <Typography variant='subtitle2'>Tuition: {course?.tuition || 'No tuition specified'}</Typography>
+                <Typography variant='subtitle2'>Duration: {course?.duration + ' weeks' || PLACEHOLDER.NO_DURATION}</Typography>
+                <Typography variant='subtitle2'>Tuition: {course?.tuition || PLACEHOLDER.NO_TUITION}</Typography>
               </Grid>
             </Grid>
             <Grid item xs={4}>
               <Grid container spacing={0} justifyContent='flex-end'>
                 <CardMedia
                   component='img'
-                  src={course?.bootcamp === null ? ASSET.default_badge : badgeLocation(bootcamp?.data)}
+                  src={course?.bootcamp === null ? ASSET.default_badge : badgeLocation({ bootcamp })}
                   alt='company badge'
                   height={50}
                   sx={{ width: 50, display: 'flex', borderRadius: 2 }}
@@ -64,13 +66,13 @@ const CourseCard: FC<CourseCardProps> = ({ course }) => {
         </Box>
 
         <Typography variant='h6' py={2}>
-          {minimumSkill || 'No minimum skill required'}
+          {minimumSkill || PLACEHOLDER.NO_MINIMUM_SKILL}
         </Typography>
         <Box height={130}>
           <Typography variant='subtitle2'>{course.description.charAt(0).toUpperCase() + course.description.slice(1)}</Typography>
         </Box>
         <Typography variant='h6' py={2}>
-          {course?.bootcamp?.name.charAt(0).toUpperCase() + course?.bootcamp?.name.slice(1) || 'Solo'}
+          {course?.bootcamp?.name.charAt(0).toUpperCase() + course?.bootcamp?.name.slice(1) || PLACEHOLDER.BOOTCAMP_NAME}
         </Typography>
       </CardContent>
     </Grid>
diff --git a/src/section/dashboard/dashboard-bootcamp-rd.tsx b/src/section/dashboard/dashboard-bootcamp-rd.tsx
index 24f5bbd..786cb48 100644
--- a/src/section/dashboard/dashboard-bootcamp-rd.tsx
+++ b/src/section/dashboard/dashboard-bootcamp-rd.tsx
@@ -1,28 +1,24 @@
-import { ChangeEvent, useState } from 'react'
+import { ElementType, useEffect, useState } from 'react'
 import { m } from 'framer-motion'
-import { Box, Grid, Divider, Container, Tab, Tabs } from '@mui/material'
-import { Theme } from '@mui/material/styles'
-import { SxProps } from '@mui/system'
-import { ASSET } from 'config'
+import { Box, Grid, Divider, Tab, Tabs, Skeleton } from '@mui/material'
+import { SScrollGrid, GSBox, GSDividerBox, GSRundownContainer } from 'theme/style'
+import { useGetAllBootcampQuery } from 'store/slice'
 import { Button, Typography } from 'component'
+import { BUTTON, LABEL, KEY, COLOR, COMPONENT, BUTTON_VARIANT, SIZE, VARIANT, FLEX, ARIA, TYPOGRAPHY_VARIANT, FONTWEIGHT } from 'constant'
+import { CATEGORY } from 'config'
 import BootcampTile from './dashboard-bootcamp-tile'
-
-const item: SxProps<Theme> = {
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  px: 5
-}
-
-const number = {
-  fontSize: 24,
-  fontFamily: 'default',
-  color: 'secondary.main',
-  fontWeight: 'medium'
-}
+import { AuthPath } from 'route/path'
 
 function DashboardBootcampRundown() {
+  const [skValue, setSkValue] = useState([0, 1, 2, 3, 4, 5])
   const [value, setValue] = useState(0)
+  const { data, error, isLoading } = useGetAllBootcampQuery()
+
+  useEffect(() => {
+    if (data) {
+      window.scrollTo(0, 0)
+    }
+  }, [])
 
   const handleChange = (event: React.SyntheticEvent, newValue: any) => {
     setValue(newValue)
@@ -30,97 +26,57 @@ function DashboardBootcampRundown() {
 
   return (
     <Box
-      component="section"
+      component={COMPONENT.SECTION}
       sx={{
-        display: 'center'
+        display: KEY.CENTER
       }}>
-      <Container
-        sx={{
-          mt: 10,
-          mb: 15,
-          position: 'relative',
-          flexDirection: 'column',
-          alignItems: 'center'
-        }}>
+      <GSRundownContainer>
         <Grid container sx={{ mb: 5 }}>
-          <Grid item alignItems="flex-start">
-            <Typography variant="h3" marked="left" component="h2" fontWeight="medium">
-              New Bootcamps
+          <Grid item alignItems={FLEX.FLEX_START} my={1}>
+            <Typography variant={TYPOGRAPHY_VARIANT.H3} marked={KEY.LEFT} fontWeight={FONTWEIGHT.MEDIUM}>
+              {LABEL.NEW_BOOTCAMPS}
             </Typography>
           </Grid>
-          <Box
-            sx={{
-              display: 'flex-start',
-              justifyContent: 'center',
-              alignItems: 'center',
-              width: '100%',
-              mt: 2
-            }}>
-            <Divider orientation="horizontal" flexItem sx={{ width: 1120 }} />
-          </Box>
-          <Tabs value={value} onChange={handleChange} aria-label="tabs">
-            <Tab label="AI & Digital Transformation" />
-            <Tab label="Sustainability" />
-            <Tab label="Leadership & Interpersonal Skills" />
-            <Tab label="Business Management & Strategy" />
+          <GSDividerBox>
+            <Divider orientation={KEY.HORIZONTAL} flexItem />
+          </GSDividerBox>
+          <Tabs value={value} onChange={handleChange} aria-label={ARIA.TABS}>
+            {Object.values(CATEGORY).map((category: string, index: number) => (
+              <Tab key={index} label={category} />
+            ))}
           </Tabs>
         </Grid>
 
         <m.div>
-          <Grid container>
-            <Grid item xs={12} md={4} lg={3}>
-              <BootcampTile
-                title="Python"
-                institution="Learn Python from scratch"
-                imageUrl="https://images.pexels.com/photos/2982449/pexels-photo-2982449.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
-                badge="https://m.media-amazon.com/images/I/61fLmo3aOHL.jpg"
-              />
-            </Grid>
-            <Grid item xs={12} md={4} lg={3}>
-              <BootcampTile
-                title="Python"
-                institution="Learn Python from scratch"
-                imageUrl="https://images.pexels.com/photos/2982449/pexels-photo-2982449.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
-                badge="https://m.media-amazon.com/images/I/61fLmo3aOHL.jpg"
-              />
-            </Grid>
-            <Grid item xs={12} md={4} lg={3}>
-              <BootcampTile
-                title="C#"
-                institution="Learn Python from scratch"
-                imageUrl="https://images.pexels.com/photos/2982449/pexels-photo-2982449.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
-                badge="https://m.media-amazon.com/images/I/61fLmo3aOHL.jpg"
-              />
-            </Grid>
-            <Grid item xs={12} md={4} lg={3}>
-              <BootcampTile
-                title="Reason"
-                institution="Learn Python from scratch"
-                imageUrl="https://images.pexels.com/photos/2982449/pexels-photo-2982449.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
-                badge="https://m.media-amazon.com/images/I/61fLmo3aOHL.jpg"
-                chips={['Reason', 'OCaml']}
-              />
-            </Grid>
-          </Grid>
-          <Box
-            component="img"
-            src={ASSET.LINE_BG}
-            alt=" lines"
-            sx={{
-              pointerEvents: 'none',
-              position: 'absolute',
-              top: -190,
-              opacity: 0.9,
-              zIndex: -3
-            }}
-          />
+          <SScrollGrid container flexDirection={FLEX.FLEX_ROW} spacing={2}>
+            {!isLoading ? (
+              data?.data?.map((bootcamp: any, index: number) => (
+                <Grid key={index} item xs={12} md={4} lg={3}>
+                  <BootcampTile bootcamp={bootcamp} />
+                </Grid>
+              ))
+            ) : (
+              <Grid item xs={12} md={4} lg={3}>
+                {skValue.map((value, index) => (
+                  <Skeleton key={index} variant={VARIANT.RECTANGULAR} width={300} height={300} />
+                ))}
+              </Grid>
+            )}
+          </SScrollGrid>
+          <GSBox />
         </m.div>
-        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-          <Button color="secondary" size="small" variant="contained" component="a" href="/premium-themes/onepirate/sign-up/" sx={{ mt: 8 }}>
-            Start your Application
+        <Box sx={{ display: FLEX.FLEX, justifyContent: KEY.CENTER }}>
+          <Button
+            color={COLOR.SECONDARY}
+            size={SIZE.SMALL}
+            variant={BUTTON_VARIANT.CONTAINED}
+            component={COMPONENT.A as ElementType}
+            href={AuthPath.REGISTER}
+            sx={{ mt: 8 }}>
+            {BUTTON.START_APPLICATION}
           </Button>
         </Box>
-      </Container>
+      </GSRundownContainer>
     </Box>
   )
 }
diff --git a/src/section/dashboard/dashboard-bootcamp-tile.tsx b/src/section/dashboard/dashboard-bootcamp-tile.tsx
index b6dc5e4..d238dfc 100644
--- a/src/section/dashboard/dashboard-bootcamp-tile.tsx
+++ b/src/section/dashboard/dashboard-bootcamp-tile.tsx
@@ -1,83 +1,45 @@
-import { Card, CardContent, CardMedia, CardHeader, Typography, Box, Chip } from '@mui/material'
+import { FC } from 'react'
+import { Card, CardContent, CardMedia, Typography, Box, Chip } from '@mui/material'
 import { useTheme, styled } from '@mui/material/styles'
+import { SScrollBox, SBadgeHeader, GSBadgeImg } from 'theme/style'
+import { photoLocation, badgeLocation } from 'util/asset-loc'
+import { COMPONENT, FLEX, PLACEHOLDER, TYPOGRAPHY_VARIANT, VARIANT, SIZE } from 'constant'
+import { OPhotoCardMedia, SBootcampCard } from './option'
+import { BootcampCareer } from 'section/bootcamp'
 
-interface BootcampTileProps {
-  title: string
-  institution: string
-  badge: string
-  imageUrl: string
-  chips?: string[] | null
-}
-
-const SBadgeHeader = styled(CardHeader)({
-  position: 'relative',
-})
-
-const SCard = styled(Card)(({ theme }) => ({
-  width: '250px',
-  boxShadow: 'none',
-}))
-
-const BootcampTile = ({ title, institution, badge, imageUrl, chips }: BootcampTileProps) => {
+const BootcampTile: FC<UploadLocationProps> = ({ bootcamp }) => {
   const theme = useTheme()
+
   return (
-    <SCard>
-      <SBadgeHeader
-        avatar={
-          <img
-            src={badge}
-            alt={`${institution} logo`}
-            style={{
-              maxHeight: 40,
-              position: 'absolute',
-              top: 200,
-              right: '10%',
-              zIndex: 1,
-              transform: 'translateX(-50%)',
-              boxShadow: theme.shadows[4],
-            }}
-          />
-        }
-      />
-      <CardMedia
-        component='img'
-        height='230'
-        image={imageUrl}
-        alt={title}
-        sx={{
-          objectFit: 'cover',
-          objectPosition: 'top',
-          marginTop: '-40px',
-        }}
-      />
+    <SBootcampCard>
+      <SBadgeHeader avatar={<GSBadgeImg src={badgeLocation({ bootcamp })} />} />
+      <CardMedia image={photoLocation({ bootcamp })} {...OPhotoCardMedia} />
       <CardContent>
-        <Typography gutterBottom variant='h6' component='div'>
-          {title}
-        </Typography>
-        <Typography variant='subtitle2' color='text.secondary'>
-          {institution}
+        <Box my={1}>
+          <Typography gutterBottom variant={TYPOGRAPHY_VARIANT.H6} component={COMPONENT.DIV}>
+            {bootcamp.name}
+          </Typography>
+        </Box>
+
+        <Typography variant={TYPOGRAPHY_VARIANT.SUBTITLE2} color='text.secondary'>
+          {bootcamp.location ? bootcamp.location.city + ', ' + bootcamp.location.country : PLACEHOLDER.NO_LOCATION}
         </Typography>
         <Box
           sx={{
-            display: 'flex',
-            justifyContent: 'flex-end',
-            mt: 2,
-          }}
-        >
-          {chips && chips.length > 0 ? (
-            chips.map((chip: any, index: number) => (
-              <Typography key={index} variant='caption' m='1em'>
-                #{chip}
-              </Typography>
-            ))
+            display: FLEX.FLEX,
+            justifyContent: FLEX.FLEX_END,
+            mt: 6
+          }}>
+          {bootcamp.careers && bootcamp.careers.length > 0 ? (
+            <BootcampCareer bootcamp={bootcamp} />
           ) : (
-            <Typography variant='caption' m='1em'>
+            <Typography variant={TYPOGRAPHY_VARIANT.CAPTION} m='1em'>
               &nbsp;
             </Typography>
           )}
         </Box>
       </CardContent>
-    </SCard>
+    </SBootcampCard>
   )
 }
 
diff --git a/src/section/dashboard/index.ts b/src/section/dashboard/index.ts
index 941ade3..7b958d1 100644
--- a/src/section/dashboard/index.ts
+++ b/src/section/dashboard/index.ts
@@ -5,3 +5,4 @@ export { default as DashboardBootcampRundown } from './dashboard-bootcamp-rd'
 export { default as DashboardFeedbackSection } from './dashboard-feedback'
 export { default as ProductValue } from './dashboard-value'
 export { default as SDashboardSection } from './dashboard-section'
+export * from './option'
diff --git a/src/section/dashboard/option.tsx b/src/section/dashboard/option.tsx
new file mode 100644
index 0000000..c1674d1
--- /dev/null
+++ b/src/section/dashboard/option.tsx
@@ -0,0 +1,36 @@
+import { Card } from '@mui/material'
+import { styled } from '@mui/material/styles'
+import { COMPONENT } from 'constant'
+
+export const OPhotoCardMedia = {
+  component: COMPONENT.IMG,
+  height: '230',
+  alt: 'bootcamp photo',
+  sx: {
+    objectFit: 'cover',
+    objectPosition: 'top',
+    marginTop: '-40px',
+    height: '230px'
+  }
+}
+
+export const OBadgeHeaderImg = {
+  alt: 'bootcamp badge',
+  style: {
+    height: 40,
+    width: 40,
+    overflow: 'hidden',
+    objectFit: 'cover',
+    position: 'absolute',
+    top: 200,
+    right: '10%',
+    zIndex: 1,
+    transform: 'translateX(-50%)'
+  }
+}
+
+export const SBootcampCard = styled(Card)(({ theme }) => ({
+  width: '250px',
+  height: '400px',
+  boxShadow: 'none'
+}))
diff --git a/src/theme/style/main.ts b/src/theme/style/main.ts
index d422a49..fefbdb5 100644
--- a/src/theme/style/main.ts
+++ b/src/theme/style/main.ts
@@ -1,7 +1,8 @@
-import { Drawer, ListItem, Box, Toolbar, Card, CardHeader } from '@mui/material'
+import { Drawer, Container, ListItem, Box, Toolbar, Card, Grid, CardHeader, CardMedia } from '@mui/material'
 import { LoadingButton } from '@mui/lab'
 import { styled } from '@mui/material/styles'
 import { APP_NAVBAR } from 'config'
+import { ASSET } from 'config'
 
 export const GSLoadingButton = styled(LoadingButton)(({ theme }) => ({
   backgroundColor: theme.palette.primary.dark,
@@ -25,7 +26,9 @@ export const SToolbar = styled(Toolbar)(({ theme }) => ({
 
 // @bootcamp -- card
 export const SBadgeHeader = styled(CardHeader)({
-  position: 'relative'
+  position: 'relative',
+  padding: 0,
+  paddingY: 2
 })
 
 export const SCard = styled(Card)(({ theme }) => ({
@@ -41,9 +44,53 @@ export const SScrollBox = styled(Box)(({ theme }) => ({
   flexWrap: 'nowrap',
   '&::-webkit-scrollbar': {
     display: 'none'
+  },
+  '&': {
+    scrollBehavior: 'smooth'
   }
 }))
 
+export const SScrollGrid = styled(Grid)(({ theme }) => ({
+  overflowX: 'auto',
+  display: 'flex',
+  marginRight: theme.spacing(2),
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  '&::-webkit-scrollbar': {
+    display: 'none'
+  },
+  '&': {
+    scrollBehavior: 'smooth'
+  }
+}))
+
+export const GSContainerGrid = styled(Grid)(({ theme }) => ({
+  marginBottom: theme.spacing(4),
+  borderRadius: theme.spacing(2),
+  bgcolor: theme.palette.grey[300],
+  backgroundImage: `url(${ASSET.DOT_MATRIX_BG})`
+}))
+
+// @bootcamp : tile
+export const GSPhotoCardMedia = styled(CardMedia)(({ theme }) => ({
+  objectFit: 'cover',
+  objectPosition: 'top',
+  marginTop: '-40px',
+  height: '230px'
+}))
+
+export const GSBadgeImg = styled('img')(({ theme }) => ({
+  height: 40,
+  width: 40,
+  overflow: 'hidden',
+  objectFit: 'cover',
+  position: 'absolute',
+  top: 200,
+  right: '10%',
+  zIndex: 1,
+  transform: 'translateX(-50%)'
+}))
+
 // @dashboard -- drawer
 export const SDrawer = styled(Drawer)(({ theme }) => ({
   marginTop: '64px',
@@ -84,6 +131,30 @@ export const SBox = styled(Box)(({ theme }) => ({
   transition: 'all 0.5s ease'
 }))
 
+export const GSBox = styled(Box)(({ theme }) => ({
+  pointerEvents: 'none',
+  position: 'absolute',
+  top: -190,
+  opacity: 0.9,
+  zIndex: -3
+}))
+
+export const GSDividerBox = styled(Box)(({ theme }) => ({
+  display: 'flex-start',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '100%',
+  marginTop: theme.spacing(2)
+}))
+
+export const GSRundownContainer = styled(Container)(({ theme }) => ({
+  marginTop: theme.spacing(10),
+  marginBottom: theme.spacing(15),
+  position: 'relative',
+  flexDirection: 'column',
+  alignItems: 'center'
+}))
+
 // @fallback -- page
 export const FullBox = {
   maxWidth: 'sm' as const,
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index b99e6e2..86323e7 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -143,6 +143,33 @@ declare global {
     xl?: number
   }
 
+  interface BootcampCardProps {
+    _id?: string
+    name: string
+    badge: string
+    description: string
+    location?: Location
+    website: string
+    photo: string
+    rating: number
+    careers?: string[] | null
+  }
+
+  interface Location {
+    type?: string
+    coordinates?: number[]
+    formattedAddress?: string
+    street?: string
+    state?: string | null
+    city?: string
+    zipcode?: string
+    country: string
+  }
+
+  interface UploadLocationProps {
+    bootcamp: BootcampCardProps
+  }
+
   interface IDefaultAvatar {
     color?: COLOR
     firstName?: string
diff --git a/src/util/asset-loc.ts b/src/util/asset-loc.ts
new file mode 100644
index 0000000..ca8ecef
--- /dev/null
+++ b/src/util/asset-loc.ts
@@ -0,0 +1,14 @@
+import { ServerPath } from 'route/path'
+import { KEY } from 'constant'
+
+export function photoLocation({ bootcamp }: UploadLocationProps) {
+  return bootcamp?.photo === KEY.PHOTO_DEFAULT
+    ? ServerPath.ORIGIN + `/upload/` + bootcamp?.photo
+    : ServerPath.ORIGIN + `/upload/${bootcamp._id}/` + bootcamp?.photo
+}
+
+export function badgeLocation({ bootcamp }: UploadLocationProps) {
+  return bootcamp?.badge === KEY.BADGE_DEFAULT
+    ? ServerPath.ORIGIN + `/upload/badge/` + bootcamp?.badge
+    : ServerPath.ORIGIN + `/upload/badge/${bootcamp._id}/` + bootcamp?.badge
+}
diff --git a/src/util/index.ts b/src/util/index.ts
index e557b74..72d684f 100644
--- a/src/util/index.ts
+++ b/src/util/index.ts
@@ -4,3 +4,4 @@ export { default as ErrorBoundary } from './error-boundary'
 export { default as localStorageSpace } from './local-storage-space'
 export * from './time'
 export * from './format'
+export * from './asset-loc'