diff --git a/dear-diary/.firebase/hosting.YnVpbGQ.cache b/dear-diary/.firebase/hosting.YnVpbGQ.cache
new file mode 100644
index 000000000..83207c212
--- /dev/null
+++ b/dear-diary/.firebase/hosting.YnVpbGQ.cache
@@ -0,0 +1,12 @@
+asset-manifest.json,1703009562633,87c928384c0064153c5b5a79ce1fabbafd0329ccff5c3d190d24ca20781ad0fe
+favicon.ico,1701879327313,27edce7be5922cf0bef7d4136f69b5bfbdd5bf8c13c7b026f71187d41a00aa7d
+index.html,1703009562633,b5ec86cdc24508af78e258379facbb04693b71772e06b7e466c80aed4dcc5133
+manifest.json,1701879327314,4368aeaf848ae2e048765562c289452f33ad2a175c4b1951ea8bdf2ada0d5b10
+robots.txt,1701879327314,b2090cf9761ef60aa06e4fab97679bd43dfa5e5df073701ead5879d7c68f1ec5
+static/css/main.9c6b28c8.css,1703009562641,1edf76c00632245ad1bf38b355bd4bbdee2a01800c4b9c6eb43fec31b3c0fd77
+static/css/main.9c6b28c8.css.map,1703009562641,9dddbe352e71eafb9c0e5c826cdf1d273fe1df8f944d031deaf121498a45d9cd
+static/js/787.97a755d5.chunk.js,1703009562641,80b29505546cb82bbae49a4595eb07131d17e7959ccd5453239d7652d6e6e308
+static/js/787.97a755d5.chunk.js.map,1703009562642,b102309d3478fab86053fcf07fc925203c452b3b7eb42a01f99f5932bfaff424
+static/js/main.f465f8af.js,1703009562641,099f43abe687d2c5b6fa534d363329104dfdd430aa3190eece1a850958122beb
+static/js/main.f465f8af.js.LICENSE.txt,1703009562641,d31ce7e59ec7e7ef7af40ee3985d2dbf9aaee26a52023476fc98d981856f4ada
+static/js/main.f465f8af.js.map,1703009562643,e54ceba0db9d88b625266b2693e87f35d8c0b8f399d97a5e80d6747118dc4b6d
diff --git a/dear-diary/.firebaserc b/dear-diary/.firebaserc
new file mode 100644
index 000000000..a0add170a
--- /dev/null
+++ b/dear-diary/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "dear-diary-emailusername-79cfe"
+  }
+}
diff --git a/dear-diary/firebase.json b/dear-diary/firebase.json
new file mode 100644
index 000000000..1085af247
--- /dev/null
+++ b/dear-diary/firebase.json
@@ -0,0 +1,18 @@
+{
+  "hosting": {
+    "site": "dear-diary-thambara",
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+      
+    ]
+  }
+}
diff --git a/dear-diary/public/background.png b/dear-diary/public/background.png
deleted file mode 100644
index 85217469a..000000000
Binary files a/dear-diary/public/background.png and /dev/null differ
diff --git a/dear-diary/public/logo.png b/dear-diary/public/logo.png
deleted file mode 100644
index a42064741..000000000
Binary files a/dear-diary/public/logo.png and /dev/null differ
diff --git a/dear-diary/public/user-avatar.svg b/dear-diary/public/user-avatar.svg
deleted file mode 100644
index 9836b7fb9..000000000
--- a/dear-diary/public/user-avatar.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-
-<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72" fill="none"
-    >
-    <rect width="72" height="72" fill="#01A9FF" />
-    <rect width="72" height="72" fill="white" fill-opacity="0.2" />
-    <rect x="7" y="7" width="58" height="58" rx="29" fill="white" fill-opacity="0.3" />
-    <path
-        d="M36.4999 43.9531C10.1559 43.9531 0.899902 57.3031 0.899902 66.2031V79.5531H72.0999V66.2031C72.0999 57.3031 62.8439 43.9531 36.4999 43.9531Z"
-        fill="#33A8E4" />
-    <path
-        d="M36.5001 39.5031C47.5596 39.5031 56.5251 30.5376 56.5251 19.4781C56.5251 8.41862 47.5596 -0.546875 36.5001 -0.546875C25.4406 -0.546875 16.4751 8.41862 16.4751 19.4781C16.4751 30.5376 25.4406 39.5031 36.5001 39.5031Z"
-        fill="#33A8E4" />
-</svg>
\ No newline at end of file
diff --git a/dear-diary/src/components/DearDiary/DearDiary.tsx b/dear-diary/src/components/DearDiary/DearDiary.tsx
index 02ef05849..f1e2d2e5c 100644
--- a/dear-diary/src/components/DearDiary/DearDiary.tsx
+++ b/dear-diary/src/components/DearDiary/DearDiary.tsx
@@ -33,7 +33,7 @@ const SignInPageTitle = styled.div`
 const DearDiary = () => {
   return (
     <SignInPageHeaderBackground >
-      <SignInPageLogo src={"/logo.png"} alt="logo" />
+      <SignInPageLogo src={"https://res.cloudinary.com/dzsokhvfq/image/upload/v1703007756/jvxeozqwb43syppmtayv.png"} alt="logo" />
       <SignInPageTitle >Dear Diary</SignInPageTitle>
     </SignInPageHeaderBackground>
   );
diff --git a/dear-diary/src/components/Profile/Profile.tsx b/dear-diary/src/components/Profile/Profile.tsx
index 7912cee63..da7d0ab03 100644
--- a/dear-diary/src/components/Profile/Profile.tsx
+++ b/dear-diary/src/components/Profile/Profile.tsx
@@ -35,7 +35,7 @@ const Profile = () => {
     return (
         <ProfileWrapper>
             <ProfileName>
-                <ImageProfile src={"/user-avatar.svg"}></ImageProfile>
+                <ImageProfile src={"https://res.cloudinary.com/dzsokhvfq/image/upload/v1703007607/vpgx1dyoefgkgebbbrrs.svg"}></ImageProfile>
                 <ProfileNameText >
                     {name}
                 </ProfileNameText>
diff --git a/dear-diary/src/containers/HomePage/Home/Home.tsx b/dear-diary/src/containers/HomePage/Home/Home.tsx
index 8f68d633b..253d96705 100644
--- a/dear-diary/src/containers/HomePage/Home/Home.tsx
+++ b/dear-diary/src/containers/HomePage/Home/Home.tsx
@@ -25,18 +25,23 @@ const HomeSearch = styled.div`
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    width: 100%;
-`
+    width: 100%;`;
+
 const ScrollableGridContainer = styled.div`
     overflow-y: auto;
 `
 const SubmitFormButton = styled(Button)`
     border: 0.1px solid black !important;
-    min-width: 16vh !important;
+    width : 12% ;
     color: white !important;
     box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.638);
     background-color: #0092DD !important;
-    text-transform: none !important;`
+    text-transform: none !important;
+
+    @media screen and (max-width: 1000px) {
+    min-width :24vh !important; 
+  }`
+
 
 type HomeProps = {
   showform: boolean;
diff --git a/dear-diary/src/containers/HomePage/HomePage.tsx b/dear-diary/src/containers/HomePage/HomePage.tsx
index a2a8a5b19..1a0508f48 100644
--- a/dear-diary/src/containers/HomePage/HomePage.tsx
+++ b/dear-diary/src/containers/HomePage/HomePage.tsx
@@ -11,7 +11,7 @@ const Background = styled.div`
     display: flex;
     width: 100%; 
     min-height: 100vh; 
-    background-image: url("/background.png");
+    background-image: url("https://res.cloudinary.com/dzsokhvfq/image/upload/v1703006709/dhbvxtisextdrc9odln0.png");
     background-size: cover;
     background-repeat: no-repeat;
     padding-bottom: 0;
diff --git a/dear-diary/src/containers/HomePage/SubmitForm/SubmitForm.tsx b/dear-diary/src/containers/HomePage/SubmitForm/SubmitForm.tsx
index 7e9d8fd78..6f0e009fc 100644
--- a/dear-diary/src/containers/HomePage/SubmitForm/SubmitForm.tsx
+++ b/dear-diary/src/containers/HomePage/SubmitForm/SubmitForm.tsx
@@ -7,13 +7,13 @@ import { useAppDispatch } from '../../../redux/hooks';
 import { addCardByUser } from '../../../redux/diarycard/diaryCardSlice';
 
 type Diary = {
-  title: string;
-  body: string;
+    title: string;
+    body: string;
 };
 
 type SubmitFormProps = {
-  showform: boolean;
-  reset: () => void;
+    showform: boolean;
+    reset: () => void;
 };
 
 const StyledSubmitForm = styled.div<{ showform: boolean }>`
@@ -87,72 +87,72 @@ const TextFieldSingleLine = styled(TextField)`
   width: 99%;`
 
 const TextFieldMultiLine = styled(TextField)`
-  width: 95%;`  
+  width: 95%;`
 
 const SubmitForm: React.FC<SubmitFormProps> = ({ showform, reset }) => {
-  const [title, setTitle] = useState('');
-  const [description, setDescription] = useState('');
-  const dispatch = useAppDispatch();
-
-  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setTitle(event.target.value);
-  };
-
-  const handleDescriptionChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setDescription(event.target.value);
-  };
-
-  const handleSubmit = () => {
-    const newDiary: Diary = {
-      title: title,
-      body: description,
+    const [title, setTitle] = useState('');
+    const [description, setDescription] = useState('');
+    const dispatch = useAppDispatch();
+
+    const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setTitle(event.target.value);
+    };
+
+    const handleDescriptionChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setDescription(event.target.value);
+    };
+
+    const handleSubmit = () => {
+        const newDiary: Diary = {
+            title: title,
+            body: description,
+        };
+        if (!ValidateDiaryCard(title, description)) {
+            return;
+        }
+        dispatch(addCardByUser(newDiary));
+        setTitle('');
+        setDescription('');
+        reset();
     };
-    if (!ValidateDiaryCard(title, description)) {
-      return;
-    }
-    dispatch(addCardByUser(newDiary));
-    setTitle('');
-    setDescription('');
-    reset();
-  };
-
-  const handleCancel = () => {
-    setTitle('');
-    setDescription('');
-  };
-
-  const handleClose = () => {
-    setTitle('');
-    setDescription('');
-    reset();
-  };
-
-  return (
-    <StyledSubmitForm showform={showform}>
-      <HeaderSubmit>
-        <FormTitle>Submit New</FormTitle>
-        <FormClose onClick={handleClose}>
-          <CloseIcon />
-        </FormClose>
-      </HeaderSubmit>
-      <SubmitTitle>
-        <SubmitFormBar>Title</SubmitFormBar>
-        <TextFieldSingleLine value={title} onChange={handleTitleChange} placeholder="Enter title" size="small"  />
-      </SubmitTitle>
-      <SubmitDesc>
-        <SubmitFormBar>Description</SubmitFormBar>
-        <TextFieldMultiLine value={description} onChange={handleDescriptionChange} placeholder="Descryption" multiline rows={10} />
-      </SubmitDesc>
-      <div>
-        <SubmitButton variant="contained" onClick={handleSubmit}>
-          Submit
-        </SubmitButton>
-        <CancelButton variant="contained" onClick={handleCancel}>
-          Cancel
-        </CancelButton>
-      </div>
-    </StyledSubmitForm>
-  );
+
+    const handleCancel = () => {
+        setTitle('');
+        setDescription('');
+    };
+
+    const handleClose = () => {
+        setTitle('');
+        setDescription('');
+        reset();
+    };
+
+    return (
+        <StyledSubmitForm showform={showform}>
+            <HeaderSubmit>
+                <FormTitle>Submit New</FormTitle>
+                <FormClose onClick={handleClose}>
+                    <CloseIcon />
+                </FormClose>
+            </HeaderSubmit>
+            <SubmitTitle>
+                <SubmitFormBar>Title</SubmitFormBar>
+                <TextFieldSingleLine value={title} onChange={handleTitleChange} placeholder="Enter title" size="small" />
+            </SubmitTitle>
+            <SubmitDesc>
+                <SubmitFormBar>Description</SubmitFormBar>
+                <TextFieldMultiLine value={description} onChange={handleDescriptionChange} placeholder="Descryption" multiline rows={10} />
+            </SubmitDesc>
+            <div>
+                <SubmitButton variant="contained" onClick={handleSubmit}>
+                    Submit
+                </SubmitButton>
+                <CancelButton variant="contained" onClick={handleCancel}>
+                    Cancel
+                </CancelButton>
+            </div>
+        </StyledSubmitForm>
+    );
 };
 
 export default SubmitForm;
diff --git a/dear-diary/src/containers/SignInPage/SignInPage.tsx b/dear-diary/src/containers/SignInPage/SignInPage.tsx
index 3199d690f..3d34a7e81 100644
--- a/dear-diary/src/containers/SignInPage/SignInPage.tsx
+++ b/dear-diary/src/containers/SignInPage/SignInPage.tsx
@@ -12,7 +12,7 @@ const Background = styled.div`
     display: flex;
     width: 100%; 
     min-height: 100vh; 
-    background-image: url("/background.png");
+    background-image: url("https://res.cloudinary.com/dzsokhvfq/image/upload/v1703006709/dhbvxtisextdrc9odln0.png");
     background-size: cover;
     background-repeat: no-repeat;
     padding-bottom: 0;
diff --git a/dear-diary/src/redux/diarycard/diaryCardSlice.ts b/dear-diary/src/redux/diarycard/diaryCardSlice.ts
index e733f2d9b..c6169b523 100644
--- a/dear-diary/src/redux/diarycard/diaryCardSlice.ts
+++ b/dear-diary/src/redux/diarycard/diaryCardSlice.ts
@@ -36,7 +36,7 @@ const diaryCardSlice = createSlice({
             state.cards = action.payload;
           },
         watchingCards: (state) => {
-            state.isLoading = false;
+            
         }