diff --git a/client-web/src/pages/AppBuilder/AppBuilder.tsx b/client-web/src/pages/AppBuilder/AppBuilder.tsx
index c0dd71bf..0ccf6c1c 100644
--- a/client-web/src/pages/AppBuilder/AppBuilder.tsx
+++ b/client-web/src/pages/AppBuilder/AppBuilder.tsx
@@ -1,6 +1,14 @@
 import { useEffect, useRef, useState } from "react";
 import AppMock from "../../components/AppBuilder/AppMock";
-import { Box, Button, TextField, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  Chip,
+  Divider,
+  TextField,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import { httpWithAuth, updateAppSettings } from "../../http";
 import { useParams } from "react-router";
 import { intervalToDuration } from "date-fns";
@@ -13,7 +21,10 @@ import {
 } from "../../utils";
 import { config } from "../../config";
 import useDebounce from "../../hooks/useDebounce";
-
+import UploadFileIcon from "@mui/icons-material/UploadFile";
+import DownloadIcon from "@mui/icons-material/Download";
+import InfoIcon from "@mui/icons-material/Info";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 export interface TCustomDetails {
   primaryColor: string;
   secondaryColor: string;
@@ -209,6 +220,7 @@ export default function AppBuilder() {
     try {
       const res = await updateAppSettings(appId, data);
       updateApp(res.data.result);
+      showSnackbar('success', 'Your app is ready to use')
     } catch (error) {
       showSnackbar("error", "Cannot save settings");
       console.log({ error });
@@ -266,6 +278,10 @@ export default function AppBuilder() {
     }
     setLoading(false);
   };
+  const openAppDomain = () => {
+    const url = "https://" + app.domainName + "." + config.DOMAIN_NAME;
+    window.open(url, "_blank");
+  };
   return (
     <main>
       <Box
@@ -278,74 +294,110 @@ export default function AppBuilder() {
         }}
       >
         <Box>
-          <Typography sx={{ fontWeight: "bold", mb: 2 }}>
-            General Appearance
-          </Typography>
-          <Box
-            sx={{
-              display: "grid",
-              gridTemplateColumns: { xs: "1fr", lg: "1fr 1fr" },
-              columnGap: 3,
+          <fieldset
+            style={{
+              border: "1px solid rgba(0,0,0,0.3)",
+              marginBottom: 20,
+              borderRadius: 10,
+              padding: 20,
+              paddingRight: 100,
             }}
           >
-            <Box>
-              <TextField
-                margin="dense"
-                fullWidth
-                label="Main Color"
-                name="mainColor"
-                variant="outlined"
-                placeholder="#ffffff"
-                InputLabelProps={{ shrink: true }}
-                type={"color"}
-                value={primaryColor}
-                error={!isValidHexCode(primaryColor)}
-                onChange={(e) => setPrimaryColor(e.target.value)}
+            <legend>
+              <Chip
+                variant="filled"
+                color={"primary"}
+                sx={{ fontWeight: "bold" }}
+                label={"General Appearance"}
               />
-            </Box>
-
-            <Box>
-              <TextField
-                margin="dense"
-                fullWidth
-                label="Display Name"
-                name="displayName"
-                variant="outlined"
-                value={displayName}
-                onChange={handleAppNameChange}
-              />
-            </Box>
+            </legend>
+            <Box
+              sx={{
+                display: "grid",
+                gridTemplateColumns: { xs: "1fr", lg: "1fr 1fr" },
+                columnGap: 3,
+                rowGap: 2,
+              }}
+            >
+              <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+                <input
+                  type="color"
+                  id="primaryColor"
+                  value={primaryColor}
+                  onChange={(e) => setPrimaryColor(e.target.value)}
+                  style={{
+                    outline: "none",
+                    border: "1px solid grey",
+
+                    borderRadius: "100%",
+                    width: 40,
+                    height: 40,
+                    backgroundColor: primaryColor,
+                    padding: 10,
+                  }}
+                />
+                <label htmlFor="primaryColor">
+                  <Typography>Primary Color</Typography>
+                </label>
+              </Box>
 
-            <Box>
-              <TextField
-                margin="dense"
-                fullWidth
-                label="Secondary Color"
-                name="secondaryColor"
-                variant={"outlined"}
-                type={"color"}
-                InputLabelProps={{ shrink: true }}
-                placeholder="#ffffff"
-                value={secondaryColor}
-                error={!isValidHexCode(secondaryColor)}
-                onChange={(e) => setSecondaryColor(e.target.value)}
-              />
-            </Box>
-            <Box>
-              <TextField
-                margin="dense"
-                fullWidth
-                label="Coin Name"
-                name="coinName"
-                variant="outlined"
-                value={coinName}
-                onChange={(e) => setCoinName(e.target.value)}
-                helperText={
-                  "Name of your internal coin used for gamification and token economy. Leave “Coin” if unsure."
-                }
-              />
-            </Box>
-            {/* <Box sx={{ gridColumn: "1/3" }}>
+              <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+                <input
+                  type="color"
+                  id="secondaryColor"
+                  value={secondaryColor}
+                  onChange={(e) => setSecondaryColor(e.target.value)}
+                  style={{
+                    outline: "none",
+                    borderRadius: "100%",
+                    width: 40,
+                    height: 40,
+                    backgroundColor: secondaryColor,
+                    border: "1px solid grey",
+                    padding: 10,
+                  }}
+                />
+                <label htmlFor="secondaryColor">
+                  <Typography>Secondary Color</Typography>
+                </label>
+              </Box>
+              <Box>
+                <TextField
+                  margin="dense"
+                  fullWidth
+                  label="Display Name"
+                  name="displayName"
+                  variant="outlined"
+                  value={displayName}
+                  onChange={handleAppNameChange}
+                />
+              </Box>
+              <Box sx={{ position: "relative" }}>
+                <TextField
+                  margin="dense"
+                  fullWidth
+                  label="Coin Name"
+                  name="coinName"
+                  variant="outlined"
+                  value={coinName}
+                  onChange={(e) => setCoinName(e.target.value)}
+                  // helperText={
+                  //   "Name of your internal coin used for gamification and token economy. Leave “Coin” if unsure."
+                  // }
+                />
+                <Tooltip title="Name of your internal coin used for gamification and token economy. Leave “Coin” if unsure.">
+                  <InfoIcon
+                    sx={{
+                      position: "absolute",
+                      right: -30,
+                      top: "50%",
+                      transform: "translateY(-50%)",
+                    }}
+                    color="primary"
+                  />
+                </Tooltip>
+              </Box>
+              {/* <Box sx={{ gridColumn: "1/3" }}>
               <TextField
                 fullWidth
                 margin="dense"
@@ -356,157 +408,239 @@ export default function AppBuilder() {
                 onChange={(e) => setCoinSymbol(e.target.value)}
               />
             </Box> */}
-            <Box sx={{ mb: 2, mt: 1, position: "relative" }}>
-              <Typography>App Logo</Typography>
-
-              <input
-                onChange={handleLogoChange}
-                ref={appLogoRef}
-                type="file"
-                style={{ display: "none" }}
-              />
-              <Button
-                // disabled={loading}
-                color="primary"
-                variant="outlined"
-                onClick={() => appLogoRef?.current?.click()}
-                sx={{ minWidth: 150 }}
-              >
-                {logo?.file?.name || "Upload File"}
-              </Button>
-              <Typography sx={{ fontSize: 12, color: "rgba(0, 0, 0, 0.6)" }}>
-                Recommended size: 500px x 500px
-              </Typography>
-            </Box>
-            <Box sx={{ mb: 2, mt: 1 }}>
-              <input
-                onInput={handleLoginScreenBackgroundChange}
-                ref={loginScreenBgRef}
-                type="file"
-                style={{ display: "none" }}
-              />
-              <Typography>Login Screen Background</Typography>
-              <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+              <Box sx={{ mb: 2, mt: 1, position: "relative" }}>
+                <input
+                  onChange={handleLogoChange}
+                  ref={appLogoRef}
+                  type="file"
+                  style={{ display: "none" }}
+                />
                 <Button
                   // disabled={loading}
                   color="primary"
                   variant="outlined"
-                  onClick={() => loginScreenBgRef?.current?.click()}
-                  sx={{ maxWidth: "200px", minWidth: 150 }}
+                  onClick={() => appLogoRef?.current?.click()}
+                  sx={{ width: "100%" }}
+                  startIcon={<UploadFileIcon />}
                 >
-                  {loginScreenBackground?.file?.name || "Upload File"}
+                  {logo?.file?.name || "App Logo"}
                 </Button>
-                <Typography>OR</Typography>
-                <TextField
-                  margin="dense"
-                  fullWidth
-                  label="Login Screen Color"
-                  name="loginScreenColor"
-                  variant={"outlined"}
-                  type={"color"}
-                  InputLabelProps={{ shrink: true }}
-                  placeholder="#ffffff"
-                  value={
-                    isValidHexCode(loginScreenBackground.value)
-                      ? loginScreenBackground.value
-                      : "#fffff"
-                  }
-                  error={!isValidHexCode(secondaryColor)}
-                  onChange={(e) =>
-                    setLoginScreenBackground({
-                      file: undefined,
-                      value: e.target.value,
-                    })
-                  }
-                  sx={{ minWidth: 150 }}
-                />
+                <Typography sx={{ fontSize: 12, color: "rgba(0, 0, 0, 0.6)" }}>
+                  Recommended size: 500px x 500px
+                </Typography>
               </Box>
-            </Box>
-          </Box>
-          <Box>
-            <Typography sx={{ fontWeight: "bold", mb: 2 }}>
-              Mobile App
-            </Typography>
-          </Box>
-          <Box>
-            <Box sx={{ display: "flex", alignItems: "flex-start", gap: 3 }}>
-              <TextField
-                margin="dense"
-                fullWidth
-                label="Bundle ID"
-                name="bundleId"
-                variant="outlined"
-                onChange={(e) => setBundleId(e.target.value)}
-                value={bundleId}
-                helperText={
-                  "Bundle ID should be unique to identify your app for Appstore and other purposes."
-                }
-              />
-              {buildStage === "download" ? (
+              <Box sx={{ mb: 2, mt: 1 }}>
+                <input
+                  onInput={handleLoginScreenBackgroundChange}
+                  ref={loginScreenBgRef}
+                  type="file"
+                  style={{ display: "none" }}
+                />
                 <Box
                   sx={{
                     display: "flex",
+                    alignItems: "center",
+                    gap: 2,
                     flexDirection: "column",
-                    alignItems: "flex-end",
                     position: "relative",
-                    mt: 1,
                   }}
                 >
                   <Button
-                    onClick={getBuild}
-                    variant="contained"
-                    color={"success"}
-                    sx={{ width: 300, height: 50 }}
+                    // disabled={loading}
+                    color="primary"
+                    variant="outlined"
+                    onClick={() => loginScreenBgRef?.current?.click()}
+                    sx={{ width: "100%" }}
+                    startIcon={<UploadFileIcon />}
                   >
-                    Download React Native build
+                    {loginScreenBackground?.file?.name || "Login Background"}
                   </Button>
-                  <Typography
-                    sx={{ fontSize: 12, color: "rgba(0, 0, 0, 0.6)" }}
+                  <Divider
+                    variant={"fullWidth"}
+                    sx={{ color: "black", width: "100%" }}
                   >
-                    Expires in {fileTimeToLive && fileTimeToLive.hours + "h"}{" "}
-                    {fileTimeToLive && fileTimeToLive.minutes + "m"}
-                  </Typography>
+                    OR
+                  </Divider>
+                  <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+                    <input
+                      type="color"
+                      id="loginScreenBackground"
+                      value={
+                        isValidHexCode(loginScreenBackground.value)
+                          ? loginScreenBackground.value
+                          : "#fffff"
+                      }
+                      onChange={(e) =>
+                        setLoginScreenBackground({
+                          file: undefined,
+                          value: e.target.value,
+                        })
+                      }
+                      style={{
+                        outline: "none",
+                        borderRadius: "100%",
+                        width: 40,
+                        height: 40,
+                        backgroundColor: isValidHexCode(
+                          loginScreenBackground.value
+                        )
+                          ? loginScreenBackground.value
+                          : "#fffff",
+                        border: "1px solid grey",
+                        padding: 10,
+                      }}
+                    />
+                    <label htmlFor="loginScreenBackground">
+                      <Typography>Login Screen Color</Typography>
+                    </label>
+                  </Box>
+
+                  <Tooltip title="Login background or login screen colour is only used for the mobile application.">
+                    <InfoIcon
+                      sx={{
+                        position: "absolute",
+                        right: -30,
+                        top: 15,
+                        transform: "translateY(-50%)",
+                      }}
+                      color="primary"
+                    />
+                  </Tooltip>
                 </Box>
-              ) : (
-                <LoadingButton
-                  loading={loading}
-                  disabled={buildStage === "preparing"}
-                  onClick={prepareRnBuild}
-                  sx={{ width: 300, height: 50 }}
-                  variant="contained"
-                >
-                  {buildStage === "preparing" ? "Preparing" : "Prepare"} React
-                  Native build
-                </LoadingButton>
-              )}
+              </Box>
             </Box>
-          </Box>
-          <Box>
-            <Typography sx={{ fontWeight: "bold", mb: 2 }}>Web App</Typography>
-          </Box>
-          <Box style={{ display: "flex", alignItems: "center" }}>
-            <TextField
-              margin="dense"
-              label="Domain Name"
-              name="domain"
-              variant="outlined"
-              onChange={handleDomainNameChange}
-              value={domain}
-              error={domainNameError}
-              helperText={
-                domainNameError
-                  ? "❌ name not available, please fill in something more unique here"
-                  : app.domainName === domain
-                  ? ""
-                  : "✅ available"
-              }
-            />
-            <Typography
-              style={{ marginBottom: app.domainName !== domain ? "20px" : 0 }}
+          </fieldset>
+          <fieldset
+            style={{
+              border: "1px solid rgba(0,0,0,0.3)",
+              marginBottom: 20,
+              borderRadius: 10,
+              padding: 20,
+            }}
+          >
+            <legend>
+              <Chip
+                variant="filled"
+                color={"primary"}
+                sx={{ fontWeight: "bold" }}
+                label={"Mobile App"}
+              />
+            </legend>
+            <Box>
+              <Box sx={{ display: "flex", alignItems: "flex-start", gap: 3 }}>
+                <TextField
+                  margin="dense"
+                  fullWidth
+                  sx={{margin: 0,}}
+                  label="Bundle ID"
+                  name="bundleId"
+                  variant="outlined"
+                  onChange={(e) => setBundleId(e.target.value)}
+                  value={bundleId}
+                  helperText={
+                    "Bundle ID should be unique to identify your app for Appstore and other purposes."
+                  }
+                />
+                {buildStage === "download" ? (
+                  <Box
+                    sx={{
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "flex-end",
+                      position: "relative",
+                    }}
+                  >
+                    <Button
+                      onClick={getBuild}
+                      variant="outlined"
+                      color={"success"}
+                      sx={{ width: 300, height: 50 }}
+                      startIcon={<DownloadIcon />}
+                    >
+                      Download React Native build
+                    </Button>
+                    <Typography
+                      sx={{ fontSize: 12, color: "rgba(0, 0, 0, 0.6)" }}
+                    >
+                      Expires in {fileTimeToLive && fileTimeToLive.hours + "h"}{" "}
+                      {fileTimeToLive && fileTimeToLive.minutes + "m"}
+                    </Typography>
+                  </Box>
+                ) : (
+                  <LoadingButton
+                    loading={loading}
+                    disabled={buildStage === "preparing"}
+                    onClick={prepareRnBuild}
+                    sx={{ width: 300, height: 50 }}
+                    variant="outlined"
+
+                    startIcon={<DownloadIcon />}
+                  >
+                    {buildStage === "preparing" ? "Preparing" : "Prepare"} React
+                    Native build
+                  </LoadingButton>
+                )}
+              </Box>
+            </Box>
+          </fieldset>
+          <fieldset
+            style={{
+              border: "1px solid rgba(0,0,0,0.3)",
+              marginBottom: 20,
+              borderRadius: 10,
+              padding: 20,
+            }}
+          >
+            <legend>
+              <Chip
+                variant="filled"
+                color={"primary"}
+                sx={{ fontWeight: "bold" }}
+                label={"Web App"}
+              />
+            </legend>
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+              }}
             >
-              {"." + config.DOMAIN_NAME}
-            </Typography>
-          </Box>
+              <Box style={{ display: "flex", alignItems: "center" }}>
+                <TextField
+                  margin="dense"
+                  label="Domain Name"
+                  name="domain"
+                  variant="outlined"
+                  onChange={handleDomainNameChange}
+                  value={domain}
+                  error={domainNameError}
+                  helperText={
+                    domainNameError
+                      ? "❌ name not available, please fill in something more unique here"
+                      : app.domainName === domain
+                      ? ""
+                      : "✅ available"
+                  }
+                />
+                <Typography
+                  style={{
+                    marginBottom: app.domainName !== domain ? "20px" : 0,
+                  }}
+                >
+                  {"." + config.DOMAIN_NAME}
+                </Typography>
+              </Box>
+              <Button
+                onClick={openAppDomain}
+                variant="outlined"
+
+                startIcon={<OpenInNewIcon />}
+              >
+                Open the Web App
+              </Button>
+            </Box>
+          </fieldset>
           <Box sx={{ display: "flex", mt: 2 }}>
             <LoadingButton
               loading={loading}
@@ -534,4 +668,4 @@ export default function AppBuilder() {
       </Box>
     </main>
   );
-}
\ No newline at end of file
+}