diff --git a/src/assets/amazon.jpeg b/src/assets/amazon.jpeg
new file mode 100644
index 0000000..e5e677c
Binary files /dev/null and b/src/assets/amazon.jpeg differ
diff --git a/src/assets/blogProfile.png b/src/assets/blogProfile.png
index 5bad173..c6b0637 100644
Binary files a/src/assets/blogProfile.png and b/src/assets/blogProfile.png differ
diff --git a/src/components/Header/LoginModal.jsx b/src/components/Header/LoginModal.jsx
index dd18fe4..3449926 100644
--- a/src/components/Header/LoginModal.jsx
+++ b/src/components/Header/LoginModal.jsx
@@ -12,562 +12,562 @@ import { baseColor } from "styles/base";
 import axios from "helpers/axios";
 
 const LoginModal = ({ login, handleCloseLogin, toggleDrawer }) => {
-	const [, dispatch] = useStateValue();
-	const [register, setRegister] = useState(false);
-	const [details, setDetails] = useState(false);
-	const [email, setEmail] = useState("");
-	const [password, setPassword] = useState("");
-	const [alertOpen, setAlertOpen] = useState(false);
-	const [phone, setPhone] = useState("");
-	const [name, setName] = useState("");
-	const [roll, setRoll] = useState("");
-	const [year, setYear] = useState("");
-	const [branch, setBranch] = useState("");
-	const [valError, setvalError] = useState(null);
-	const [loginBtnDisable, setLoginBtnDisable] = useState(false);
-	const [registerBtnDisable, setRegisterBtnDisable] = useState(false);
+  const [, dispatch] = useStateValue();
+  const [register, setRegister] = useState(false);
+  const [details, setDetails] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [alertOpen, setAlertOpen] = useState(false);
+  const [phone, setPhone] = useState("");
+  const [name, setName] = useState("");
+  const [roll, setRoll] = useState("");
+  const [year, setYear] = useState("");
+  const [branch, setBranch] = useState("");
+  const [valError, setvalError] = useState(null);
+  const [loginBtnDisable, setLoginBtnDisable] = useState(false);
+  const [registerBtnDisable, setRegisterBtnDisable] = useState(false);
 
-	const handleRegister = () => {
-		setRegister(!register);
-	};
+  const handleRegister = () => {
+    setRegister(!register);
+  };
 
-	useEffect(() => {
-		if (valError) {
-			setAlertOpen(true);
-			setTimeout(() => setAlertOpen(false), 2000);
-		} else {
-			setDetails(true);
-		}
-	}, [valError]);
+  useEffect(() => {
+    if (valError) {
+      setAlertOpen(true);
+      setTimeout(() => setAlertOpen(false), 2000);
+    } else {
+      setDetails(true);
+    }
+  }, [valError]);
 
-	const handleDetails = (e) => {
-		e.preventDefault();
-		const error = validateInput({
-			name: name,
-			roll: roll,
-			year: year,
-			branch: branch,
-		});
-		if (error) {
-			setvalError(error);
-		} else {
-			setDetails(false);
-		}
-	};
+  const handleDetails = (e) => {
+    e.preventDefault();
+    const error = validateInput({
+      name: name,
+      roll: roll,
+      year: year,
+      branch: branch,
+    });
+    if (error) {
+      setvalError(error);
+    } else {
+      setDetails(false);
+    }
+  };
 
-	const handleSubmit = async (e) => {
-		e.preventDefault();
-		if (register) {
-			const error = validateDetails({
-				email: email,
-				phone: phone,
-				password: password,
-			});
-			if (error) {
-				setvalError(error);
-			} else {
-				//request registration
-				try {
-					setRegisterBtnDisable(true);
-					let postData = {
-						firstName: name,
-						username: email,
-						phone: phone,
-						branch: branch,
-						year: year,
-						rollNumber: roll,
-						email: email,
-						password: password,
-					};
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (register) {
+      const error = validateDetails({
+        email: email,
+        phone: phone,
+        password: password,
+      });
+      if (error) {
+        setvalError(error);
+      } else {
+        //request registration
+        try {
+          setRegisterBtnDisable(true);
+          let postData = {
+            firstName: name,
+            username: email,
+            phone: phone,
+            branch: branch,
+            year: year,
+            rollNumber: roll,
+            email: email,
+            password: password,
+          };
 
-					let response = await axios.post(
-						"/api/users/register",
-						JSON.stringify(postData)
-					);
+          let response = await axios.post(
+            "/api/users/register",
+            JSON.stringify(postData)
+          );
 
-					if (response.data) {
-						dispatch({
-							type: "SET_USER",
-							user: {
-								email: response.data.email,
-								name: name,
-							},
-						});
-						localStorage.setItem("user", JSON.stringify(email, name));
-						localStorage.setItem("token", response.data.token);
-						handleCloseLogin();
-						setRegisterBtnDisable(false);
-					} else {
-						alert("Unexpected Error");
-					}
-				} catch (err) {
-					if (err.response) {
-						if (err.response.status === 400) {
-							alert(err.response.data.error);
-						} else if (err.response.status === 500) {
-							alert("Internal Error");
-						}
-					} else {
-						alert(err);
-					}
-					setRegisterBtnDisable(false);
-				}
-			}
-		} else {
-			if (email && password) {
-				//request
-				try {
-					setLoginBtnDisable(true);
-					let postData = {
-						email: email,
-						password: password,
-					};
+          if (response.data) {
+            dispatch({
+              type: "SET_USER",
+              user: {
+                email: response.data.email,
+                name: name,
+              },
+            });
+            localStorage.setItem("user", JSON.stringify(email, name));
+            localStorage.setItem("token", response.data.token);
+            handleCloseLogin();
+            setRegisterBtnDisable(false);
+          } else {
+            alert("Unexpected Error");
+          }
+        } catch (err) {
+          if (err.response) {
+            if (err.response.status === 400) {
+              alert(err.response.data.error);
+            } else if (err.response.status === 500) {
+              alert("Internal Error");
+            }
+          } else {
+            alert(err);
+          }
+          setRegisterBtnDisable(false);
+        }
+      }
+    } else {
+      if (email && password) {
+        //request
+        try {
+          setLoginBtnDisable(true);
+          let postData = {
+            email: email,
+            password: password,
+          };
 
-					let response = await axios.post(
-						"/api/users/login",
-						JSON.stringify(postData)
-					);
+          let response = await axios.post(
+            "/api/users/login",
+            JSON.stringify(postData)
+          );
 
-					if (response.data) {
-						dispatch({
-							type: "SET_USER",
-							user: {
-								email: email,
-								name: response.data.firstName,
-							},
-						});
-						localStorage.setItem("user", JSON.stringify(email, name));
-						localStorage.setItem("token", response.data.token);
+          if (response.data) {
+            dispatch({
+              type: "SET_USER",
+              user: {
+                email: email,
+                name: response.data.firstName,
+              },
+            });
+            localStorage.setItem("user", JSON.stringify(email, name));
+            localStorage.setItem("token", response.data.token);
 
-						handleCloseLogin();
-						setLoginBtnDisable(false);
-					} else {
-						alert("Unexpected Error");
-					}
-				} catch (err) {
-					if (err.response) {
-						if (err.response.status === 400) {
-							alert(err.response.data.error);
-						} else if (err.response.status === 500) {
-							alert("Internal Error");
-						}
-					} else {
-						alert(err);
-					}
-					setLoginBtnDisable(false);
-				}
-			} else {
-				setvalError({
-					title: "Missing Input",
-					body: "Please fill all fields",
-					items:
-						!email && !password
-							? "all"
-							: !email
-							? "email"
-							: !password
-							? "password"
-							: "",
-				});
-				setAlertOpen(true);
-				setTimeout(() => setAlertOpen(false), 2000);
-			}
-		}
-	};
+            handleCloseLogin();
+            setLoginBtnDisable(false);
+          } else {
+            alert("Unexpected Error");
+          }
+        } catch (err) {
+          if (err.response) {
+            if (err.response.status === 400) {
+              alert(err.response.data.error);
+            } else if (err.response.status === 500) {
+              alert("Internal Error");
+            }
+          } else {
+            alert(err);
+          }
+          setLoginBtnDisable(false);
+        }
+      } else {
+        setvalError({
+          title: "Missing Input",
+          body: "Please fill all fields",
+          items:
+            !email && !password
+              ? "all"
+              : !email
+              ? "email"
+              : !password
+              ? "password"
+              : "",
+        });
+        setAlertOpen(true);
+        setTimeout(() => setAlertOpen(false), 2000);
+      }
+    }
+  };
 
-	const close = () => {
-		handleCloseLogin();
-		setRegister(false);
-		setEmail("");
-		setPassword("");
-		setBranch("");
-		setName("");
-		setPhone("");
-		setYear("");
-		setRoll("");
-		setDetails(true);
-	};
+  const close = () => {
+    handleCloseLogin();
+    setRegister(false);
+    setEmail("");
+    setPassword("");
+    setBranch("");
+    setName("");
+    setPhone("");
+    setYear("");
+    setRoll("");
+    setDetails(true);
+  };
 
-	const responseGoogle = async (res) => {
-		try {
-			let response = await axios.post(
-				"/api/users/google",
-				JSON.stringify({ idToken: res.tokenId })
-			);
+  const responseGoogle = async (res) => {
+    try {
+      let response = await axios.post(
+        "/api/users/google",
+        JSON.stringify({ idToken: res.tokenId })
+      );
 
-			if (response.data.email) {
-				dispatch({
-					type: "SET_USER",
-					user: {
-						email: response.data.email,
-						name: response.data.firstName,
-					},
-				});
-				localStorage.setItem(
-					"user",
-					JSON.stringify(response.data.email, response.data.firstName)
-				);
-				localStorage.setItem("token", response.data.token);
-				handleCloseLogin();
-			} else {
-				alert("Unexpected Error");
-			}
-		} catch (err) {
-			if (err.response) {
-				if (err.response.status === 400) {
-					alert(err.response.data.error);
-				} else if (err.response.status === 500) {
-				}
-			} else {
-				alert(err);
-			}
-		}
-	};
-	return (
-		<>
-			<Modal
-				open={login}
-				onClose={close}
-				aria-labelledby="Login Modal"
-				aria-describedby="Modal for login and register functionality"
-			>
-				{
-					<ModalContainer>
-						<Alerts
-							setAlertOpen={setAlertOpen}
-							alertOpen={alertOpen}
-							type="error"
-							title={valError?.title}
-							body={valError?.body}
-							isVal={true}
-						/>
-						{!register ? (
-							<Content>
-								<SideBar>
-									<div className="logo">
-										<DcrsutLogoImg src={DcrustLogo} alt="" />
-										<h2>IIC</h2>
-									</div>
-									<div className="links">
-										<p className="sec-link">Don't have an account?</p>
-										<p
-											className="prim-link"
-											onClick={handleRegister}
-											disabled={registerBtnDisable}
-										>
-											Sign Up
-										</p>
-									</div>
-								</SideBar>
-								<div className="box login">
-									<IconButton onClick={close} className="close">
-										<Close />
-									</IconButton>
-									<h1 className="auth-heading">Sign In</h1>
-									<div className="form login-form">
-										<div>
-											<GoogleLogin
-												clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
-												buttonText="Continue with Google"
-												onSuccess={responseGoogle}
-												onFailure={responseGoogle}
-												theme="light"
-												cookiePolicy="single_host_origin"
-												className="google-login"
-											/>
-											<p className="login-alt-text sideline">
-												<span>or login with email</span>
-											</p>
-										</div>
-										<Input
-											type="email"
-											label="Email"
-											value={email}
-											onChange={(e) => setEmail(e.target.value)}
-											error={
-												valError &&
-												(valError.items === "all" || valError.items === "email")
-													? true
-													: false
-											}
-										/>
+      if (response.data.email) {
+        dispatch({
+          type: "SET_USER",
+          user: {
+            email: response.data.email,
+            name: response.data.firstName,
+          },
+        });
+        localStorage.setItem(
+          "user",
+          JSON.stringify(response.data.email, response.data.firstName)
+        );
+        localStorage.setItem("token", response.data.token);
+        handleCloseLogin();
+      } else {
+        alert("Unexpected Error");
+      }
+    } catch (err) {
+      if (err.response) {
+        if (err.response.status === 400) {
+          alert(err.response.data.error);
+        } else if (err.response.status === 500) {
+        }
+      } else {
+        alert(err);
+      }
+    }
+  };
+  return (
+    <>
+      <Modal
+        open={login}
+        onClose={close}
+        aria-labelledby="Login Modal"
+        aria-describedby="Modal for login and register functionality"
+      >
+        {
+          <ModalContainer>
+            <Alerts
+              setAlertOpen={setAlertOpen}
+              alertOpen={alertOpen}
+              type="error"
+              title={valError?.title}
+              body={valError?.body}
+              isVal={true}
+            />
+            {!register ? (
+              <Content>
+                <SideBar>
+                  <div className="logo">
+                    <DcrsutLogoImg src={DcrustLogo} alt="" />
+                    <h2>IIC</h2>
+                  </div>
+                  <div className="links">
+                    <p className="sec-link">Don't have an account?</p>
+                    <p
+                      className="prim-link"
+                      onClick={handleRegister}
+                      disabled={registerBtnDisable}
+                    >
+                      Sign Up
+                    </p>
+                  </div>
+                </SideBar>
+                <div className="box login">
+                  <IconButton onClick={close} className="close">
+                    <Close />
+                  </IconButton>
+                  <h1 className="auth-heading">Sign In</h1>
+                  <div className="form login-form">
+                    <div>
+                      <GoogleLogin
+                        clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
+                        buttonText="Continue with Google"
+                        onSuccess={responseGoogle}
+                        onFailure={responseGoogle}
+                        theme="light"
+                        cookiePolicy="single_host_origin"
+                        className="google-login"
+                      />
+                      <p className="login-alt-text sideline">
+                        <span>or login with email</span>
+                      </p>
+                    </div>
+                    <Input
+                      type="email"
+                      label="Email"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      error={
+                        valError &&
+                        (valError.items === "all" || valError.items === "email")
+                          ? true
+                          : false
+                      }
+                    />
 
-										<Input
-											label="Password"
-											type="password"
-											value={password}
-											onChange={(e) => setPassword(e.target.value)}
-											error={
-												valError &&
-												(valError.items === "all" ||
-													valError.items === "password")
-													? true
-													: false
-											}
-										/>
-										<Button
-											type="submit"
-											onClick={(e) => handleSubmit(e)}
-											disabled={loginBtnDisable}
-										>
-											Sign In
-										</Button>
-										<MobLink className="links">
-											<p className="sec-link">Don't have an account?</p>
-											<p className="prim-link" onClick={handleRegister}>
-												Sign Up
-											</p>
-										</MobLink>
-									</div>
-								</div>
-							</Content>
-						) : details ? (
-							<Content>
-								<div className="box login">
-									<IconButton onClick={close} className="close">
-										<Close />
-									</IconButton>
-									<h1 className="auth-heading register-head">Sign Up</h1>
-									<div className="form login-form">
-										<div>
-											<GoogleLogin
-												clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
-												buttonText="Continue with Google"
-												onSuccess={responseGoogle}
-												onFailure={responseGoogle}
-												theme="light"
-												cookiePolicy={"single_host_origin"}
-												className="google-login"
-											/>
-											<p className="login-alt-text sideline">
-												<span>or login with email</span>
-											</p>
-										</div>
+                    <Input
+                      label="Password"
+                      type="password"
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      error={
+                        valError &&
+                        (valError.items === "all" ||
+                          valError.items === "password")
+                          ? true
+                          : false
+                      }
+                    />
+                    <Button
+                      type="submit"
+                      onClick={(e) => handleSubmit(e)}
+                      disabled={loginBtnDisable}
+                    >
+                      Sign In
+                    </Button>
+                    <MobLink className="links">
+                      <p className="sec-link">Don't have an account?</p>
+                      <p className="prim-link" onClick={handleRegister}>
+                        Sign Up
+                      </p>
+                    </MobLink>
+                  </div>
+                </div>
+              </Content>
+            ) : details ? (
+              <Content>
+                <div className="box login">
+                  <IconButton onClick={close} className="close">
+                    <Close />
+                  </IconButton>
+                  <h1 className="auth-heading register-head">Sign Up</h1>
+                  <div className="form login-form">
+                    <div>
+                      <GoogleLogin
+                        clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
+                        buttonText="Continue with Google"
+                        onSuccess={responseGoogle}
+                        onFailure={responseGoogle}
+                        theme="light"
+                        cookiePolicy={"single_host_origin"}
+                        className="google-login"
+                      />
+                      <p className="login-alt-text sideline">
+                        <span>or login with email</span>
+                      </p>
+                    </div>
 
-										<Input
-											label="Full Name"
-											value={name}
-											name="name"
-											error={
-												valError && valError.items.includes("name")
-													? true
-													: false
-											}
-											onChange={(e) => setName(e.target.value)}
-										/>
-										<Input
-											type="phone"
-											label="Roll No."
-											name="roll"
-											value={roll}
-											error={
-												valError && valError.items.includes("roll")
-													? true
-													: false
-											}
-											onChange={(e) => setRoll(e.target.value)}
-										/>
-										<Input
-											select
-											label="Year of study"
-											value={year}
-											error={
-												valError && valError.items.includes("year")
-													? true
-													: false
-											}
-											onChange={(e) => setYear(e.target.value)}
-										>
-											<MenuItem value={1}>First</MenuItem>
-											<MenuItem value={2}>Second</MenuItem>
-											<MenuItem value={3}>Third</MenuItem>
-											<MenuItem value={4}>Fourth</MenuItem>
-											<MenuItem value={5}>Fifth</MenuItem>
-										</Input>
-										<Input
-											label="Branch"
-											value={branch}
-											name="branch"
-											error={
-												valError && valError.items.includes("branch")
-													? true
-													: false
-											}
-											onChange={(e) => setBranch(e.target.value)}
-										/>
+                    <Input
+                      label="Full Name"
+                      value={name}
+                      name="name"
+                      error={
+                        valError && valError.items.includes("name")
+                          ? true
+                          : false
+                      }
+                      onChange={(e) => setName(e.target.value)}
+                    />
+                    <Input
+                      type="phone"
+                      label="Roll No."
+                      name="roll"
+                      value={roll}
+                      error={
+                        valError && valError.items.includes("roll")
+                          ? true
+                          : false
+                      }
+                      onChange={(e) => setRoll(e.target.value)}
+                    />
+                    <Input
+                      select
+                      label="Year of study"
+                      value={year}
+                      error={
+                        valError && valError.items.includes("year")
+                          ? true
+                          : false
+                      }
+                      onChange={(e) => setYear(e.target.value)}
+                    >
+                      <MenuItem value={1}>First</MenuItem>
+                      <MenuItem value={2}>Second</MenuItem>
+                      <MenuItem value={3}>Third</MenuItem>
+                      <MenuItem value={4}>Fourth</MenuItem>
+                      <MenuItem value={5}>Fifth</MenuItem>
+                    </Input>
+                    <Input
+                      label="Branch"
+                      value={branch}
+                      name="branch"
+                      error={
+                        valError && valError.items.includes("branch")
+                          ? true
+                          : false
+                      }
+                      onChange={(e) => setBranch(e.target.value)}
+                    />
 
-										<Button type="submit" onClick={(e) => handleDetails(e)}>
-											Next
-										</Button>
-										<MobLink className="links">
-											<p className="sec-link">Already have an account?</p>
-											<p className="prim-link" onClick={handleRegister}>
-												Sign In
-											</p>
-										</MobLink>
-									</div>
-								</div>
-								<SideBar>
-									<div className="logo">
-										<DcrsutLogoImg src={DcrustLogo} alt="" />
-										<h2>IIC</h2>
-									</div>
-									<div className="links">
-										<p className="sec-link">Already have an account?</p>
-										<p className="prim-link" onClick={handleRegister}>
-											Sign In
-										</p>
-									</div>
-								</SideBar>
-							</Content>
-						) : (
-							<Content>
-								<div className="box login">
-									<IconButton onClick={close} className="close">
-										<Close />
-									</IconButton>
-									<h1 className="auth-heading register-head">Details</h1>
-									<div className="form login-form">
-										<div>
-											<GoogleLogin
-												clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
-												buttonText="Continue with Google"
-												onSuccess={responseGoogle}
-												onFailure={responseGoogle}
-												theme="light"
-												cookiePolicy={"single_host_origin"}
-												className="google-login"
-											/>
-											<p className="login-alt-text sideline">
-												<span>or login with email</span>
-											</p>
-										</div>
+                    <Button type="submit" onClick={(e) => handleDetails(e)}>
+                      Next
+                    </Button>
+                    <MobLink className="links">
+                      <p className="sec-link">Already have an account?</p>
+                      <p className="prim-link" onClick={handleRegister}>
+                        Sign In
+                      </p>
+                    </MobLink>
+                  </div>
+                </div>
+                <SideBar>
+                  <div className="logo">
+                    <DcrsutLogoImg src={DcrustLogo} alt="" />
+                    <h2>IIC</h2>
+                  </div>
+                  <div className="links">
+                    <p className="sec-link">Already have an account?</p>
+                    <p className="prim-link" onClick={handleRegister}>
+                      Sign In
+                    </p>
+                  </div>
+                </SideBar>
+              </Content>
+            ) : (
+              <Content>
+                <div className="box login">
+                  <IconButton onClick={close} className="close">
+                    <Close />
+                  </IconButton>
+                  <h1 className="auth-heading register-head">Details</h1>
+                  <div className="form login-form">
+                    <div>
+                      <GoogleLogin
+                        clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
+                        buttonText="Continue with Google"
+                        onSuccess={responseGoogle}
+                        onFailure={responseGoogle}
+                        theme="light"
+                        cookiePolicy={"single_host_origin"}
+                        className="google-login"
+                      />
+                      <p className="login-alt-text sideline">
+                        <span>or login with email</span>
+                      </p>
+                    </div>
 
-										<Input
-											type="email"
-											name="email"
-											label="Email"
-											value={email}
-											error={
-												valError &&
-												(valError.items.includes("email") ||
-													valError.items.includes("emailInvalid"))
-													? true
-													: false
-											}
-											onChange={(e) => setEmail(e.target.value)}
-										/>
-										<Input
-											type="phone"
-											label="Phone"
-											name="phone"
-											value={phone}
-											error={
-												valError &&
-												(valError.items.includes("phone") ||
-													valError.items.includes("phoneInvalid"))
-													? true
-													: false
-											}
-											onChange={(e) => setPhone(e.target.value)}
-										/>
-										<Input
-											type="password"
-											label="Password"
-											value={password}
-											error={
-												valError &&
-												(valError.items.includes("password") ||
-													valError.items.includes("passInvalid"))
-													? true
-													: false
-											}
-											onChange={(e) => setPassword(e.target.value)}
-										/>
-										<Button type="submit" onClick={(e) => handleSubmit(e)}>
-											Sign Up
-										</Button>
-										<Button type="submit" onClick={(e) => setDetails(!details)}>
-											Back
-										</Button>
-									</div>
-								</div>
-								<SideBar>
-									<div className="logo">
-										<DcrsutLogoImg src={DcrustLogo} alt="" />
-										<h2>IIC</h2>
-									</div>
-									<div className="links">
-										<p className="sec-link">Already have an account?</p>
-										<p className="prim-link" onClick={handleRegister}>
-											Sign In
-										</p>
-									</div>
-								</SideBar>
-							</Content>
-						)}
-					</ModalContainer>
-				}
-			</Modal>
-		</>
-	);
+                    <Input
+                      type="email"
+                      name="email"
+                      label="Email"
+                      value={email}
+                      error={
+                        valError &&
+                        (valError.items.includes("email") ||
+                          valError.items.includes("emailInvalid"))
+                          ? true
+                          : false
+                      }
+                      onChange={(e) => setEmail(e.target.value)}
+                    />
+                    <Input
+                      type="phone"
+                      label="Phone"
+                      name="phone"
+                      value={phone}
+                      error={
+                        valError &&
+                        (valError.items.includes("phone") ||
+                          valError.items.includes("phoneInvalid"))
+                          ? true
+                          : false
+                      }
+                      onChange={(e) => setPhone(e.target.value)}
+                    />
+                    <Input
+                      type="password"
+                      label="Password"
+                      value={password}
+                      error={
+                        valError &&
+                        (valError.items.includes("password") ||
+                          valError.items.includes("passInvalid"))
+                          ? true
+                          : false
+                      }
+                      onChange={(e) => setPassword(e.target.value)}
+                    />
+                    <Button type="submit" onClick={(e) => handleSubmit(e)}>
+                      Sign Up
+                    </Button>
+                    <Button type="submit" onClick={(e) => setDetails(!details)}>
+                      Back
+                    </Button>
+                  </div>
+                </div>
+                <SideBar>
+                  <div className="logo">
+                    <DcrsutLogoImg src={DcrustLogo} alt="" />
+                    <h2>IIC</h2>
+                  </div>
+                  <div className="links">
+                    <p className="sec-link">Already have an account?</p>
+                    <p className="prim-link" onClick={handleRegister}>
+                      Sign In
+                    </p>
+                  </div>
+                </SideBar>
+              </Content>
+            )}
+          </ModalContainer>
+        }
+      </Modal>
+    </>
+  );
 };
 
 export default LoginModal;
 
 const DcrsutLogoImg = styled.img`
-	border-radius: 5px;
-	margin-bottom: 20px;
-	border: 1px solid ${baseColor.onPrimaryLite};
-	box-shadow: 0px 0px 10px ${baseColor.onBackgroundLite};
+  border-radius: 5px;
+  margin-bottom: 20px;
+  border: 1px solid ${baseColor.onPrimaryLite};
+  box-shadow: 0px 0px 10px ${baseColor.onBackgroundLite};
 `;
 
 const ModalContainer = styled.div`
-	position: "absolute";
-	width: 100vw;
-	height: 100vh;
-	margin: auto;
-	background-color: #f6f6f6;
+  position: "absolute";
+  width: 100vw;
+  height: 100vh;
+  margin: auto;
+  background-color: #f6f6f6;
 `;
 
 const Content = styled.div`
-	display: flex;
+  display: flex;
 `;
 
 const SideBar = styled.div`
-	height: 100vh;
-	flex: 3;
-	background-color: #034b94;
-	display: ${getDeviceType() === "mobile" ? "none" : "flex"};
-	flex-direction: column;
-	justify-content: space-between;
-	align-items: center;
+  height: 100vh;
+  flex: 3;
+  background-color: #034b94;
+  display: ${getDeviceType() === "mobile" ? "none" : "flex"};
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
 `;
 
 const Input = styled(TextField)`
-	width: ${getDeviceType() === "mobile" ? "75%" : "40%"};
-	height: 50px;
-	margin: 17px auto !important;
-	text-align: left;
+  width: ${getDeviceType() === "mobile" ? "75%" : "40%"};
+  height: 50px;
+  margin: 17px auto !important;
+  text-align: left;
 `;
 
 const Button = styled.button`
-	margin-top: 1.5rem;
-	width: ${getDeviceType() === "mobile" ? "30%" : "20%"};
-	height: 7vh;
-	cursor: pointer;
-	border-radius: 100px;
-	border: none;
-	background-color: #034b94;
-	font-size: 1rem;
-	font-weight: 500;
-	color: #f6f6f6;
-	letter-spacing: 0.5px;
-	font-family: Poppins, Verdana sans-serif;
-	:hover {
-		background-color: #004182;
-	}
+  margin-top: 1.5rem;
+  width: ${getDeviceType() === "mobile" ? "30%" : "20%"};
+  height: 7vh;
+  cursor: pointer;
+  border-radius: 100px;
+  border: none;
+  background-color: #034b94;
+  font-size: 1rem;
+  font-weight: 500;
+  color: #f6f6f6;
+  letter-spacing: 0.5px;
+  font-family: Poppins, Verdana sans-serif;
+  :hover {
+    background-color: #004182;
+  }
 `;
 const MobLink = styled.div`
-	display: ${getDeviceType() === "desktop" ? "none" : ""};
+  display: ${getDeviceType() === "desktop" ? "none" : ""};
 `;
diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
index dd1b8e6..6d17ea8 100644
--- a/src/components/Header/index.jsx
+++ b/src/components/Header/index.jsx
@@ -13,237 +13,240 @@ import Alerts from "./Alerts";
 import { appColors } from "styles/colors";
 
 const Header = () => {
-	const [{ user }, dispatch] = useStateValue();
-	const [open, setOpen] = useState(false);
-	const [alertOpen, setAlertOpen] = useState(true);
-	const [login, setLogin] = useState(false);
+  const [{ user }, dispatch] = useStateValue();
+  const [open, setOpen] = useState(false);
+  const [alertOpen, setAlertOpen] = useState(true);
+  const [login, setLogin] = useState(false);
 
-	const history = useHistory();
+  const history = useHistory();
 
-	// useEffect(() => {
-	// 	axios.get("/api/events?type=all&page=1").then((res) =>
-	// 		dispatch({
-	// 			type: "SET_EVENTS",
-	// 			events: {
-	// 				id: res.data.id,
-	// 				title: res.data.title,
-	// 				desc: res.data.description,
-	// 				start: res.data.startDate,
-	// 				venue: res.data.venue,
-	// 				url: res.data.mainImgUrl,
-	// 			},
-	// 		})
-	// 	);
-	// 	// .catch((e) => alert(e));
-	// // }, [dispatch
+  // useEffect(() => {
+  // 	axios.get("/api/events?type=all&page=1").then((res) =>
+  // 		dispatch({
+  // 			type: "SET_EVENTS",
+  // 			events: {
+  // 				id: res.data.id,
+  // 				title: res.data.title,
+  // 				desc: res.data.description,
+  // 				start: res.data.startDate,
+  // 				venue: res.data.venue,
+  // 				url: res.data.mainImgUrl,
+  // 			},
+  // 		})
+  // 	);
+  // 	// .catch((e) => alert(e));
+  // // }, [dispatch
 
-	useEffect(async () => {
-		try {
-			let response = await axios.get("/api/users/data");
-			dispatch({
-				type: "SET_USER",
-				user: {
-					email: response.data.email,
-					name: response.data.firstName,
-				},
-			});
-			console.log(response);
-		} catch (err) {
-			console.log(err);
-		}
-	}, []);
-	const toggleDrawer = () => {
-		setOpen(!open);
-	};
+  useEffect(() => {
+    async function func() {
+      try {
+        let response = await axios.get("/api/users/data");
+        dispatch({
+          type: "SET_USER",
+          user: {
+            email: response.data.email,
+            name: response.data.firstName,
+          },
+        });
+        console.log(response);
+      } catch (err) {
+        console.log(err);
+      }
+    }
+    func();
+  }, [dispatch]);
+  const toggleDrawer = () => {
+    setOpen(!open);
+  };
 
-	useEffect(() => {
-		setAlertOpen(true);
-		setTimeout(() => {
-			setAlertOpen(false);
-		}, 2000);
-	}, [user]);
+  useEffect(() => {
+    setAlertOpen(true);
+    setTimeout(() => {
+      setAlertOpen(false);
+    }, 2000);
+  }, [user]);
 
-	useEffect(() => {
-		setAlertOpen(false);
-	}, []);
+  useEffect(() => {
+    setAlertOpen(false);
+  }, []);
 
-	const handleOpenLogin = () => {
-		if (user) {
-			dispatch({
-				type: "SET_USER",
-				user: null,
-			});
-			localStorage.setItem("token", null);
-		} else {
-			setLogin(true);
-		}
-	};
+  const handleOpenLogin = () => {
+    if (user) {
+      dispatch({
+        type: "SET_USER",
+        user: null,
+      });
+      localStorage.setItem("token", null);
+    } else {
+      setLogin(true);
+    }
+  };
 
-	const handleCloseLogin = () => {
-		setLogin(false);
-	};
-	const handleChange = (type) => {
-		setOpen(false);
-		switch (type) {
-			case "home":
-				history.push("/home");
-				if (process.browser) {
-					window.scrollTo(0, 0);
-				}
-				break;
-			case "events":
-				history.push("/events");
-				if (process.browser) {
-					window.scrollTo(0, 0);
-				}
-				break;
-			case "team":
-				history.push("/team");
-				if (process.browser) {
-					window.scrollTo(0, 0);
-				}
-				break;
-			case "blogs":
-				history.push("/blogs");
-				if (process.browser) {
-					window.scrollTo(0, 0);
-				}
-				break;
-			case "faq":
-				history.push("/faq");
-				if (process.browser) {
-					window.scrollTo(0, 0);
-				}
-				break;
-			default:
-				break;
-		}
-	};
+  const handleCloseLogin = () => {
+    setLogin(false);
+  };
+  const handleChange = (type) => {
+    setOpen(false);
+    switch (type) {
+      case "home":
+        history.push("/home");
+        if (process.browser) {
+          window.scrollTo(0, 0);
+        }
+        break;
+      case "events":
+        history.push("/events");
+        if (process.browser) {
+          window.scrollTo(0, 0);
+        }
+        break;
+      case "team":
+        history.push("/team");
+        if (process.browser) {
+          window.scrollTo(0, 0);
+        }
+        break;
+      case "blogs":
+        history.push("/blogs");
+        if (process.browser) {
+          window.scrollTo(0, 0);
+        }
+        break;
+      case "faq":
+        history.push("/faq");
+        if (process.browser) {
+          window.scrollTo(0, 0);
+        }
+        break;
+      default:
+        break;
+    }
+  };
 
-	return (
-		<Main>
-			<Container>
-				{user ? (
-					<Alerts
-						setAlertOpen={setAlertOpen}
-						alertOpen={alertOpen}
-						type="success"
-						title="Welcome to IIC"
-						body={`Logged in as - ${user.name}`}
-					/>
-				) : (
-					<Alerts
-						setAlertOpen={setAlertOpen}
-						alertOpen={alertOpen}
-						type="info"
-						title="Thanks for Visiting"
-						body="Successfully logged out."
-					/>
-				)}
-				<MainLogo />
-				<Name onClick={() => handleChange("home")}>
-					{getDeviceType() === "mobile"
-						? "IIC Dcrust"
-						: "Institute Innovation Cell"}
-				</Name>
-			</Container>
-			<Nav>
-				<NavItem onClick={() => handleChange("home")}>Home</NavItem>
-				<NavItem onClick={() => handleChange("events")}>Events</NavItem>
-				<NavItem onClick={() => handleChange("blogs")}>Blogs</NavItem>
-				<NavItem onClick={() => handleChange("faq")}>FAQ's</NavItem>
-				<NavItem onClick={() => handleChange("team")}>Our Team</NavItem>
-				<NavButton onClick={handleOpenLogin}>
-					{user ? "Logout" : "Login"}
-				</NavButton>
-			</Nav>
-			<LoginModal
-				login={login}
-				handleCloseLogin={handleCloseLogin}
-				setAlertOpen={setAlertOpen}
-			/>
-			<DrawerIcon>
-				<IconButton>
-					<MenuIcon style={{ color: "#fafafa" }} onClick={toggleDrawer} />
-				</IconButton>
-			</DrawerIcon>
-			<Drawer anchor={"bottom"} open={open} onClose={toggleDrawer}>
-				<DrawerStructure
-					handleOpenLogin={handleOpenLogin}
-					login={login}
-					handleCloseLogin={handleCloseLogin}
-					handleChange={handleChange}
-					toggleDrawer={toggleDrawer}
-				/>
-			</Drawer>
-		</Main>
-	);
+  return (
+    <Main>
+      <Container>
+        {user ? (
+          <Alerts
+            setAlertOpen={setAlertOpen}
+            alertOpen={alertOpen}
+            type="success"
+            title="Welcome to IIC"
+            body={`Logged in as - ${user.name}`}
+          />
+        ) : (
+          <Alerts
+            setAlertOpen={setAlertOpen}
+            alertOpen={alertOpen}
+            type="info"
+            title="Thanks for Visiting"
+            body="Successfully logged out."
+          />
+        )}
+        <MainLogo />
+        <Name onClick={() => handleChange("home")}>
+          {getDeviceType() === "mobile"
+            ? "IIC Dcrust"
+            : "Institute Innovation Cell"}
+        </Name>
+      </Container>
+      <Nav>
+        <NavItem onClick={() => handleChange("home")}>Home</NavItem>
+        <NavItem onClick={() => handleChange("events")}>Events</NavItem>
+        <NavItem onClick={() => handleChange("blogs")}>Blogs</NavItem>
+        <NavItem onClick={() => handleChange("faq")}>FAQ's</NavItem>
+        <NavItem onClick={() => handleChange("team")}>Our Team</NavItem>
+        <NavButton onClick={handleOpenLogin}>
+          {user ? "Logout" : "Login"}
+        </NavButton>
+      </Nav>
+      <LoginModal
+        login={login}
+        handleCloseLogin={handleCloseLogin}
+        setAlertOpen={setAlertOpen}
+      />
+      <DrawerIcon>
+        <IconButton>
+          <MenuIcon style={{ color: "#fafafa" }} onClick={toggleDrawer} />
+        </IconButton>
+      </DrawerIcon>
+      <Drawer anchor={"bottom"} open={open} onClose={toggleDrawer}>
+        <DrawerStructure
+          handleOpenLogin={handleOpenLogin}
+          login={login}
+          handleCloseLogin={handleCloseLogin}
+          handleChange={handleChange}
+          toggleDrawer={toggleDrawer}
+        />
+      </Drawer>
+    </Main>
+  );
 };
 
 export default Header;
 
 const Main = styled.div`
-	width: 100%;
-	position: fixed;
-	top: 0px;
-	z-index: 101;
-	background-color: ${appColors.primary};
-	height: 65px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	color: ${appColors.bgVar3};
-	border-bottom: 1px solid ${appColors.secondary};
+  width: 100%;
+  position: fixed;
+  top: 0px;
+  z-index: 101;
+  background-color: ${appColors.primary};
+  height: 65px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: ${appColors.bgVar3};
+  border-bottom: 1px solid ${appColors.secondary};
 `;
 const Name = styled.h1`
-	display: flex;
-	align-items: center;
-	font-size: ${getDeviceType() === "mobile" ? "20px" : "22px"};
-	margin-left: 20px;
-	cursor: pointer;
-	width: 200px;
+  display: flex;
+  align-items: center;
+  font-size: ${getDeviceType() === "mobile" ? "20px" : "22px"};
+  margin-left: 20px;
+  cursor: pointer;
+  width: 200px;
 `;
 const DrawerIcon = styled.span`
-	display: ${getDeviceType() === "desktop" ? "none" : ""};
+  display: ${getDeviceType() === "desktop" ? "none" : ""};
 `;
 const Container = styled.div`
-	display: flex;
-	margin-left: 30px;
-	flex: 0.5;
+  display: flex;
+  margin-left: 30px;
+  flex: 0.5;
 `;
 const Nav = styled.div`
-	display: ${getDeviceType() === "desktop" ? "flex" : "none"};
-	justify-content: space-evenly;
-	flex: 1;
+  display: ${getDeviceType() === "desktop" ? "flex" : "none"};
+  justify-content: space-evenly;
+  flex: 1;
 `;
 const NavItem = styled.span`
-	height: ${getDeviceType() === "desktop" ? "65px" : "40px"};
-	padding: ${getDeviceType() === "desktop" ? "0 20px" : "0"};
-	display: flex;
-	font-weight: 500;
-	font-size: 16px;
-	cursor: pointer;
-	align-items: center;
-	:hover {
-		background-color: ${getDeviceType() === "desktop"
-			? appColors.secondary
-			: ""};
-	}
+  height: ${getDeviceType() === "desktop" ? "65px" : "40px"};
+  padding: ${getDeviceType() === "desktop" ? "0 20px" : "0"};
+  display: flex;
+  font-weight: 500;
+  font-size: 16px;
+  cursor: pointer;
+  align-items: center;
+  :hover {
+    background-color: ${getDeviceType() === "desktop"
+      ? appColors.secondary
+      : ""};
+  }
 `;
 const NavButton = styled.button`
-	height: 35px;
-	cursor: pointer;
-	margin: auto 0;
-	background-color: ${appColors.secondary};
-	border: 1px solid ${appColors.accentLight};
-	border-radius: 20px;
-	color: #fafafa;
-	font-weight: 700;
-	padding: 5px 10px;
-	transition: 0.35s;
-	:hover {
-		transition: 0.4s;
-		background-color: #fafafa;
-		color: #0e95d4;
-	}
+  height: 35px;
+  cursor: pointer;
+  margin: auto 0;
+  background-color: ${appColors.secondary};
+  border: 1px solid ${appColors.accentLight};
+  border-radius: 20px;
+  color: #fafafa;
+  font-weight: 700;
+  padding: 5px 10px;
+  transition: 0.35s;
+  :hover {
+    transition: 0.4s;
+    background-color: #fafafa;
+    color: #0e95d4;
+  }
 `;
diff --git a/src/containers/Blogs/Blog.module.css b/src/containers/Blogs/Blog.module.css
index d232e55..6f23d79 100644
--- a/src/containers/Blogs/Blog.module.css
+++ b/src/containers/Blogs/Blog.module.css
@@ -16,8 +16,6 @@
   max-width: 1140px;
   margin-left: auto;
   margin-right: auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
 }
 .blogBoxInner {
   display: flex;
@@ -68,8 +66,6 @@
   min-width: 0;
   align-items: stretch;
   height: 100%;
-  flex-direction: row;
-  display: flex;
 }
 .innerContent {
   margin: 0;
@@ -87,6 +83,7 @@
   margin-bottom: 1rem;
 }
 .cardCategoryLink {
+  /* cursor: pointer; */
   font-size: 13px;
   padding: 0.15rem 1rem 0.25rem 1rem;
   border-radius: 0.5rem;
@@ -103,6 +100,7 @@
   border: 1px solid #718096;
 }
 .blogName {
+  cursor: pointer;
   display: block;
   color: #2d3748;
   font-weight: 700;
@@ -166,6 +164,7 @@
   box-sizing: border-box;
 }
 .categoryLinklist {
+  /* cursor: pointer; */
   display: inline-block;
   text-align: center;
   line-height: inherit;
@@ -323,9 +322,7 @@
   font-size: 24px;
   margin-top: auto;
 }
-.tendingBox {
-  padding: 10px;
-}
+
 .trendingInner {
   border-radius: 1rem;
   background-color: #fff;
@@ -337,16 +334,17 @@
 .leftImgBox {
   max-width: 296px;
   display: block;
+  cursor: pointer;
+  max-height: 300px;
 }
 .leftImg {
   max-width: 100%;
   display: block;
   position: static;
-  border-radius: 16px 0 0 16px;
 }
 .outerTrending {
   float: left;
-  width: 615px;
+  max-width: 615px;
 }
 .SingleBlogContent {
   color: #718096;
diff --git a/src/containers/Blogs/BlogCard.jsx b/src/containers/Blogs/BlogCard.jsx
index f553bc0..b25d633 100644
--- a/src/containers/Blogs/BlogCard.jsx
+++ b/src/containers/Blogs/BlogCard.jsx
@@ -1,11 +1,16 @@
 import React from "react";
 import blogProfile from "assets/blogProfile.png";
-import blogLeftimg from "assets/blogLeftimg.jpg";
 import FacebookIcon from "@material-ui/icons/Facebook";
 import InstagramIcon from "@material-ui/icons/Instagram";
 import TwitterIcon from "@material-ui/icons/Twitter";
 import style from "./Blog.module.css";
+import { useHistory, useParams } from "react-router";
+import { BlogData } from "./BlogData";
+import styled from "styled-components";
+import { getDeviceType } from "helpers";
+
 const BlogCard = (props) => {
+  const history = useHistory();
   return (
     <>
       <div className={style.blogBloxInner}>
@@ -14,11 +19,25 @@ const BlogCard = (props) => {
             <article className={style.cardArticle}>
               <div className={style.innerContent}>
                 <div className={style.cardCategory}>
-                  <span className={style.cardCategoryLink}>
+                  <span
+                    className={style.cardCategoryLink}
+                    // onClick={() => {
+                    //   history.push(`/${props.Category}`);
+                    // }}
+                  >
                     {props.Category}
                   </span>
                 </div>
-                <span className={style.blogName}>{props.BlogHeading}</span>
+                <span
+                  className={style.blogName}
+                  onClick={() => {
+                    history.push(
+                      `/blogs/${props.Category}/${props.blogId}/${props.BlogHeading}`
+                    );
+                  }}
+                >
+                  {props.BlogHeading}
+                </span>
                 <div className={style.blogContent}>{props.AboutBlog}</div>
                 <div className={style.profileBox}>
                   <div className={style.profileImg}>
@@ -45,10 +64,17 @@ const BlogCard = (props) => {
   );
 };
 const BlogListBox = (props) => {
+  // const history = useHistory();
+
   return (
     <>
       <div className={style.CategoryList}>
-        <span className={style.categoryLinklist}>
+        <span
+          className={style.categoryLinklist}
+          // onClick={() => {
+          //   history.push(`/blogs/${props.CategoryName}`);
+          // }}
+        >
           <div className={style.categoryLinkIcon}>{props.CategoryIcon}</div>
           <span className={style.categorylistName}>{props.CategoryName}</span>
         </span>
@@ -57,24 +83,50 @@ const BlogListBox = (props) => {
   );
 };
 const TrendingBlogBox = (props) => {
+  const history = useHistory();
+
   return (
     <>
       <div className={style.outerTrending}>
-        <div className={style.tendingBox}>
+        <TrendingBox>
           <div className={style.trendingInner}>
-            <article className={style.cardArticle}>
-              <span>
+            <Article className={style.cardArticle}>
+              <span
+                onClick={() => {
+                  history.push(
+                    `/blogs/${props.Category}/${props.blogId}/${props.BlogHeading}`
+                  );
+                }}
+              >
                 <div className={style.leftImgBox}>
-                  <img src={blogLeftimg} className={style.leftImg} alt="" />
+                  <Img
+                    src={props.blogLeftimg}
+                    className={style.leftImg}
+                    alt=""
+                  />
                 </div>
               </span>
               <div className={style.innerContent}>
                 <div className={style.cardCategory}>
-                  <span className={style.cardCategoryLink}>
+                  <span
+                    className={style.cardCategoryLink}
+                    // onClick={() => {
+                    //   history.push(`/blogs/${props.Category}`);
+                    // }}
+                  >
                     {props.Category}
                   </span>
                 </div>
-                <span className={style.blogName}>{props.BlogHeading}</span>
+                <span
+                  className={style.blogName}
+                  onClick={() => {
+                    history.push(
+                      `/blogs/${props.Category}/${props.blogId}/${props.BlogHeading}`
+                    );
+                  }}
+                >
+                  {props.BlogHeading}
+                </span>
                 <div className={style.blogContent}>{props.AboutBlog}</div>
                 <div className={style.profileBox}>
                   <div className={style.profileImg}>
@@ -93,14 +145,18 @@ const TrendingBlogBox = (props) => {
                   </div>
                 </div>
               </div>
-            </article>
+            </Article>
           </div>
-        </div>
+        </TrendingBox>
       </div>
     </>
   );
 };
 const SingleBlogBox = (props) => {
+  const { blogId } = useParams();
+  const blogTemp = BlogData.filter(
+    (blog) => blog.blogId.toString() === blogId
+  )[0];
   return (
     <>
       <div className={style.blogBloxInner}>
@@ -109,37 +165,12 @@ const SingleBlogBox = (props) => {
             <article className={style.cardArticle}>
               <div className={style.innerContent}>
                 <h2 className={style.SingleBlogHeading}>
-                  <span className={style.blogName}>
-                    What I’ll Be Wearing This Party Season & The Festive Edit
-                  </span>
+                  <span className={style.blogName}>{blogTemp.BlogHeading}</span>
                 </h2>
                 <div className={style.blogContent}>
-                  <p className={style.SingleBlogContent}>
-                    Lorem markdownum illic venturi instructa nobis Echidnae, cum
-                    quid magna fatebor. Levat placetque Phrygios annis micat
-                    carpat; sua iamque disparibus omnia Daedalion utinam et
-                    curvos nomine potentia. Retro fecit stridore ignarus spatium
-                    petit germanam; sive tergoque. Time sibi sit vulnere
-                    Iurantem vimque Alendi ad suspiria fores An nec tumulo
-                    fratres arcana Terris passos vix tenuavit petit Hostes
-                    iamque Amor tamen
-                  </p>
-
-                  <ol
-                    style={{
-                      paddingLeft: "17px",
-                      color: "#718096",
-                      fontSize: "18px",
-                      lineHeight: "31px",
-                    }}
-                  >
-                    <li>Time sibi sit vulnere </li>
-                    <li>Iurantem vimque</li>
-                    <li>Alendi ad suspiria fores </li>
-                    <li>An nec tumulo fratres arcana </li>
-                    <li>Terris passos vix tenuavit petit</li>
-                    <li>Hostes iamque Amor tamen</li>
-                  </ol>
+                  {blogTemp.FullBlog.map((data) => (
+                    <p className={style.SingleBlogContent}>{data}</p>
+                  ))}
                 </div>
                 <div className={style.SocialIcons}>
                   <ul className={style.Socialul}>
@@ -198,7 +229,7 @@ const SingleBlogRight = (props) => {
                   </div>
                   <div className={style.profileInfoBox}>
                     <div className={style.profileName}>
-                      <strong>Prateek</strong>
+                      <strong>Tamanna Verma</strong>
                     </div>
                     <div className={style.SocialIcons}>
                       <ul className={style.Socialul}>
@@ -242,6 +273,8 @@ const SingleBlogRight = (props) => {
   );
 };
 const RelatedPost = (props) => {
+  const history = useHistory();
+
   return (
     <>
       <div className={style.RelatedPostBox}>
@@ -249,7 +282,16 @@ const RelatedPost = (props) => {
           <div className={style.insideCard}>
             <article className={style.cardArticle}>
               <div className={style.innerContent}>
-                <span className={style.blogName}>{props.BlogHeading}</span>
+                <span
+                  className={style.blogName}
+                  onClick={() => {
+                    history.push(
+                      `/blogs/${props.Category}/${props.blogId}/${props.BlogHeading}`
+                    );
+                  }}
+                >
+                  {props.BlogHeading}
+                </span>
 
                 <div className={style.profileInfoBox}>
                   <div className={style.profileName}>
@@ -274,3 +316,19 @@ export {
   SingleBlogRight,
   RelatedPost,
 };
+
+const Article = styled.div`
+  display: flex;
+  flex-direction: ${getDeviceType() === "mobile" ? "column" : "row"};
+`;
+
+const Img = styled.img`
+  height: ${getDeviceType() === "desktop" ? "max-content" : "250px"};
+  border-radius: ${getDeviceType() === "mobile"
+    ? "16px 16px 0 0"
+    : "16px 0 0 16px"};
+`;
+
+const TrendingBox = styled.div`
+  padding: ${getDeviceType() === "desktop" ? "10px" : "0"};
+`;
diff --git a/src/containers/Blogs/BlogData.jsx b/src/containers/Blogs/BlogData.jsx
index db96a56..fe5a124 100644
--- a/src/containers/Blogs/BlogData.jsx
+++ b/src/containers/Blogs/BlogData.jsx
@@ -1,81 +1,177 @@
 import blogProfile from "assets/blogProfile.png";
-import blogLeftimg from "assets/blogLeftimg.jpg";
 const BlogData = [
   {
-    Category: "Agriculture",
-    BlogHeading: "What I’ll Be Wearing This Party Season & The Festive Edit",
+    blogId: 0,
+    Category: "Technical",
+    BlogHeading: "What is Kubernetes?",
     AboutBlog:
-      "Lorem markdownum illic venturi instructa nobis Echidnae,  cum  quid magna",
+      "Kubernetes is open-source software for deploying and managing those containers at scale. Modern applications are increasingly built using containers, which are microservices packaged with their dependencies and configurations.",
     imgsrc: blogProfile,
-    Name: "Prateek",
-    BlogDate: "May 2, 2021",
+    FullBlog: [
+      "Kubernetes :-",
+      "Kubernetes is open-source software for deploying and managing those containers at scale. Modern applications are increasingly built using containers, which are microservices packaged with their dependencies and configurations.",
+      "How Kubernetes Works :-",
+      "As applications grow to span multiple containers deployed across multiple servers, operating them becomes more complex. To manage this complexity, Kubernetes provides an open source API that controls how and where those containers will run. Kubernetes orchestrates clusters of virtual machines and schedules containers to run on those virtual machines based on their available compute resources and the resource requirements of each container. Containers are grouped into pods, the basic operational unit for Kubernetes and those pods scale to your desired state. Kubernetes also automatically manages service discovery, incorporates load balancing, tracks resource allocation and scales based on compute utilization. And, it checks the health of individual resources and enables apps to self-heal by automatically restarting or replicating containers.",
+      "Why use Kubernetes?",
+      "Keeping containerized apps up and running can be complex because they often involve many containers deployed across different machines. Kubernetes provides a way to schedule and deploy those containers — plus scale them to your desired state and manage their lifecycles. Use Kubernetes to implement your container-based applications in a portable, scalable and extensible way. Azure Kubernetes Service (AKS) is a managed container orchestration service, based on the open source Kubernetes system, which is available on the Microsoft Azure public cloud Deploy and manage containerized applications more easily with a fully managed Kubernetes service. Azure Kubernetes Service (AKS) offers server less Kubernetes, an integrated continuous integration and continuous delivery (CI/CD) experience and enterprise-grade security and governance. Unite your development and operations teams on a single platform to rapidly build, deliver and scale applications with confidence.",
+      "Common uses for Azure Kubernetes Service (AKS)",
+      "1.Lift and Shift to container with AKS",
+      "Easily migrate existing application to container(s) and run within the Azure managed Kubernetes service (AKS).",
+      "2.Microservices with AKS",
+      "Use AKS to simplify the deployment and management of microservices based architecture. AKS streamlines horizontal scaling, self-healing, load balancing, secret management.",
+      "3.Secure DevOps with AKS",
+      "DevOps and Kubernetes are better together. Implementing secure DevOps together with Kubernetes on Azure, you can achieve the balance between speed and security and deliver code faster at scale.",
+      "4.Bursting from AKS with ACI",
+      "Use the AKS virtual node to provision pods inside ACI that start in seconds. This enables AKS to run with just enough capacity for your average workload.",
+      "5.Machine Learning model training with AKS:-",
+      "Using large datasets ,training of models is a complex and resource intensive task. Use familiar tools such as Tensorflow and Kubeflow to simplify training of Machine Learning models.",
+      "6.Data Streaming Scenario:-",
+      "Use AKS to easily ingest & process a real-time data stream with millions of data points collected via sensors. Perform fast analysis and computations to develop insights into complex scenarios quickly.",
+    ],
+    Name: "Tamanna Verma",
+    BlogDate: "May 15, 2021",
   },
   {
-    Category: "Agriculture",
-    BlogHeading: "What I’ll Be Wearing This Party Season & The Festive Edit",
+    blogId: 1,
+    Category: "Technical",
+    BlogHeading: "Machine Learning is Driving Innovation at Uber.",
     AboutBlog:
-      "Lorem markdownum illic venturi instructa nobis Echidnae,  cum  quid magna",
+      "To know what is machine learning ..first, let’s be aware of what data science is?  Data Science is a branch of Computer Science that contains Machine Learning /Deep Learning and ....",
+    FullBlog: [
+      "Some of us really don’t know that what is machine learning actually …",
+      "To know what is machine learning ..first, let’s be aware of what data science is?",
+      "Data Science is a branch of Computer Science that contains Machine Learning /Deep Learning and many more. It helps to predict future data with the help of historical data by training the machine or by giving intelligence to the machine. Uber is one of the most successful startups of all time. The idea of Uber was born when its co-founder Garrett Camp had to pay $800 to hire a private driver on New Year’s Eve. The idea was converted into a business called UberCabs in 2009. Initially Uber offered rides only in black luxury cars, and three years later, UberX was rolled out. UberX allowed people to drive for Uber using their own cars. The business took off, and the startup joined the eight-figure decacorn club being valued at over $70 billion in less than 10 years. Uber gives about 1 million rides per day and 14,000 rides per minute and adds about 50,000 drivers per month. Giving customers exactly what they want at a reasonable cost is one of the important reasons for Uber’s success. Uber’s machine learning algorithms play a crucial role in helping the company predict customer needs.",
+      "What is machine learning?",
+      "Uber",
+      "Traditionally, humans played a key role in analyzing data patterns and building systems on top of these patterns. When the volumes of data surpassed the ability to manually process it, the need for automation was triggered. This need eventually gave birth to machine learning. In a nutshell, machine learning is about making computers answer questions based on data patterns. We see machine learning in almost all the systems around us today. For example, when you watch videos of a particular celebrity on YouTube, the system understands that you enjoy content related to that celebrity. The system then recommends similar videos. Here, YouTube’s machine learning systems learn from your browsing data and predicts your likes. The same logic is applied in systems like Facebook’s photo tagging recommendations, auto-correct and text prediction in mobile phone keyboards, and so much more. Machine learning is at the core of Uber",
+      "Uber’s decision-making is completely data-driven with machine learning at its core. Uber leverages machine learning in many ways to make the customer experience better. For example, when you tap the destination field, the app shows you suggestions based on your ride history and frequently traveled destinations. Here are some interesting ways in which Uber leverages machine learning to streamline the business process. Bridging the supply-demand gap",
+      "Based on historical data, Uber predicts the time and areas of demand. The system uses these predictions to alert drivers of the areas with upcoming demand. This way, Uber makes sure that there are enough cabs in the predicted areas of demand and bridges the supply-demand gap. Demand prediction systems enable the app to slightly increase the prices during peak hours, eventually increasing profitability. Customers don’t wait when cabs are not instantly available, they just book a ride from a different service. Customer retention is very important for a service like ride-hailing. Getting a new customer can take up to six to seven times more effort than retaining an existing customer. The supply-demand gap can affect customer retention to a great extent. But Uber’s machine learning based demand predictions prevent Uber from losing customers to its competitors.",
+      "Reduction in ETA",
+      "The time wasted in road traffic is one of the most frustrating problems in the urbanized areas. This gets worse when cabs take longer to reach the pickup point. But, Uber’s machine learning algorithms have a solution for this issue too. By predicting demand and keeping cabs ready, Uber reduces the expected time arrival (ETA) when a customer makes a booking. By reducing a lot of wait time, Uber always makes the customer experience better. The perfect blend of customer satisfaction, loyalty programs, and referral bonuses has resulted in a massive expansion in the customer base just through word of mouth.",
+      "Route optimization",
+      "Conventional ride-hailing systems require the driver to make assumption-based route choices. This method is not reliable because the travel duration through the same route might change based on traffic jams, weather conditions, and road maintenance schedules. But Uber’s machine learning system updates the app with the conditions in every route and suggests the fastest route to the driver. This way, Uber helps its drivers avoid congestion and enables faster rides. Besides making the customers happy, faster rides also enable drivers to get additional time to take on more rides.",
+      "AI-based one-click chat",
+      "Riders tend to message drivers while they wait for the cab. Most of the time, riders do this to check the status when they see the cab barely moving in the app. It is difficult for drivers to type a reply while driving. So Uber came up with an artificial intelligence-based concept called the “one-click chat.” The one-click chat leverages natural language processing and machine learning techniques to predict responses to common messages. This way, drivers can easily respond to the messages by just clicking on one of the suggested replies.",
+      "Uber Pool",
+      "During rush hours, it is difficult to make individual cabs available for everyone. But ridesharing solves this problem by matching the riders heading in the same direction. Also, the pooling feature makes the rides more economical by reducing the fares by 25 percent to 40 percent. Machine learning algorithms decide which rider to drop first based on the data gathered from maps. Also, the app uses historical data and patterns to understand peak hours and surge prices accordingly.",
+      "Machine learning in Uber’s robotaxi",
+      "Shutterstock",
+      "Autonomous vehicles are the future of the transportation industry. Uber is one of the super-successful companies that is dumping millions into driverless cars. Uber’s robotaxi aims to compete with Google’s Waymo and General Motor’s Cruise. Uber rolled out their autonomous cars in 2015 when self-driving cars were only thought about as fiction. These autonomous cars, however, had a driver take control when things get rough. Machine learning is the core technology behind the decision-making of Uber’s driverless cars. It is the machine learning algorithms that harness the data gathered from various sensors like lidar, radar, and cameras deployed in the vehicle and direct the actuators accordingly. Sensors will only be able to detect the obstacles on the road. It is the machine learning algorithms that help the vehicles figure out if the obstacle is a pedestrian or an object or another vehicle. Based on this analysis, the cars decide whether to use the horn or to break the speed or to take a diversion. This type of machine learning is called machine vision. Uber: Innovation despite scandals. Uber is not just about hiring vehicles but innovation. Uber has been often plagued with scandals, regulatory troubles, and lawsuits. In 2016, Uber didn’t make any profit at all. Uber was once boycotted by some celebrities in the United States who also tried to spread the idea using the hashtag #DeleteUber. Uber was sued by Google’s parent company Alphabet because its former employee Anthony Levandowski allegedly stole some files when he was working with Google and used the data for Uber’s project. Despite these setbacks, Uber always managed to keep moving forward with innovative ideas like self-driving cars, hot-air balloon transportation, food delivery services, Uber boats, and even a helicopter service called the UberCHOPPER. Uber even has plans of rolling out flying taxis. The company seems to be quite serious about its future project called “Elevate,” which aims to bring aviation to everyday people. This ambitious plan will be implemented within the next decade.",
+    ],
     imgsrc: blogProfile,
-    Name: "Prateek",
-    BlogDate: "May 2, 2021",
+    Name: "Tamanna Verma",
+    BlogDate: "May 15, 2021",
   },
   {
-    Category: "Agriculture",
-    BlogHeading: "What I’ll Be Wearing This Party Season & The Festive Edit",
+    blogId: 2,
+    Category: "Technical",
+    BlogHeading: "How Amazon.com use AWS?",
     AboutBlog:
-      "Lorem markdownum illic venturi instructa nobis Echidnae,  cum  quid magna",
+      "Amazon Web Services (AWS) is an evolving cloud computing platform provided by Amazon. It provides a mix of infrastructure as a service (IaaS), Platform as a service (PaaS), and Packaged software as a service (SaaS) offerings.",
     imgsrc: blogProfile,
-    Name: "Prateek",
-    BlogDate: "May 2, 2021",
+    FullBlog: [
+      "Today Amazon.com is an online retailer, manufacturer of electronic book readers, and Web services provider that became the iconic example of electronic commerce. Its headquarters are in Seattle, Washington.",
+      "History of Amazon",
+      "Amazon started in 1995 as a book retailer, it was a site that only sold books. Within a month of starting the company, it already shipped books to over 40 different countries. Since then, Amazon has become one of the world’s largest e-commerce companies. How exactly did Amazon pull off such impressive results?",
+      "Innovation:",
+      "Amazon’s success largely stems from its innovative technologies and practices, many of which were championed by its CEO, Jeff Bezos. Consider the Echo, Amazon’s impressive voice command device. The echo can be used to play songs, research your favorite sports teams, and even check the weather with a few spoken words. This innovative technology was a huge investment for the e-commerce giant -one that encouraged the development of such exceptional results. Over 22 million Echo units were sold in 2017 alone. Amazon’s progressive mindset doesn’t always bear fruit, but accomplishments like the Echo prove that innovation can yield impressive results for e-commerce companies.",
+      "CUSTOMER SERVICE",
+      "Because of its commitment to world-class customer service, Amazon has developed a range of helpful tools users can employ to track packages and quickly return or exchange ordered items, bringing simplicity and convenience to their online shopping experiences. Amazon’s Customer Service team has won multiple awards for its dedication to preventing and swiftly addressing problems for customers. One of Amazon’s overarching missions is to become the planet’s most customer-centric company and the brand’s dedication to this goal has paid dividends.",
+      "EXECUTION",
+      "Amazon gets everything right when executing customer orders. They select products and services that customers want and need and best places for distribution centers across the globe that allow them to quickly ship products. Amazon also has excellent vendor relationships that allow them to offer customers discounted pricing. They’re also looking to implement brick-and-mortar stores that will have the capability of same-day-delivery via drones!",
+      "DIVERSIFICATION",
+      "Starting off as an online bookstore, Amazon now offers everything from soup to nuts. Literally, a search of the site reveals over 3,000 listings for vegetable soup. Search the term “nuts” and you’ll see over 37,000 results. Amazon now carries products in music, books, electronics, health and beauty, automotive, grocery, and clothing. Business owners can contract with Amazon’s network of pros to get IT support, furniture assembly, and even A/V services. By diversifying its offerings, Amazon is continuously driving reach and relevance.",
+      "OUTSTANDING USER EXPERIENCES",
+      "A strong UX (Amazon’s User Experience) makes it easy for e-commerce customers to find what they’re looking for. That’s why Amazon employs a full UX team comprised of professionals in everything from user research and interaction design to web development. These UX experts collaborate with Amazon’s engineers, product managers, and executives to create seamless user experiences that drive customer conversions.",
+      "MERGING DESIGN WITH CONTENT",
+      "It’s no secret that long-tail content is a huge component of e-commerce CEO. You need large amounts of keyword-rich copy to increase the visibility of a page on search engines and which is why Amazon uses lengthy product descriptions and FAQs on its product pages. However, take a look at any product page on Amazon, and you’ll notice that this long-tail content doesn’t adversely affect its flow or UX. Amazon’s product copy is given less priority than important CTAs (such as the “Add to Cart” and “Buy Now” buttons). This seamless merging of design and content ensures that Amazon pages attract and convert relevant web traffic.",
+      "AN “IN IT TO WIN IT” MINDSET",
+      "Does anybody really remember when Amazon was unprofitable? If you’ve been around for a while, you might remember Bezos’ warning to investors that it would be a long time before they would see a return. Back in 1997, he told Inc. Magazine that Amazon would be unprofitable for a very long time. His “in it to win it” mindset kept the company pushing through new strategies until 2003 — when the company posted its first profit. No matter how you look at it, Amazon has grown up from a little online bookstore to an industry giant. You could even say Amazon created the industry for total domination.",
+      "Overview of AWS",
+      "Cloud computing has become an integral part of businesses across all industries. AWS is the most popular form. It improves efficiency and provides relief for any number of business practices. Back in the 2000s, businesses were completely dependent on purchased servers, and those servers had limited functionality and steep prices. Plus, a functioning server required countless validations. The more growth businesses experienced, the more servers and optimization practices they needed. Acquiring those items proved inefficient, and, sometimes, prohibitively expensive. The advantages of AWS have solved many of those problems. Companies using AWS have servers available instantly, and AWS provides various workloads, increased storage options, and enhanced security measures,",
+      "What is AWS?",
+      "To be able to answer “What is AWS?”, you must first understand that it’s a cloud provider. Among other features, cloud providers grant more storage flexibility and enhanced security measures. They also contain features you’d find at a local data center, like security, higher computing capacity, and database construction. Depending on your location, you can get other features like content caching. One of the advantages of AWS is that you get all 175+ cloud services on a pay-as-you-go basis. This means that you pay only for the services you use. And it works on a relative scale. That means the less you use it, the less you pay. And the more you use it, the less you pay per unit. (i.e., The price of each unit goes down with each new purchase.) Earlier AWS used to charge on an hourly basis but now AWS charges on a minute basis.",
+      "That’s not all. Other advantages of AWS relate to the applications associated with it. The applications are reliable because they run on a safe and reliable infrastructure. Their on-demand infrastructure allows greater scalability. The design options available on the cloud permit large flexibility. Reading about real-world uses (and users) of Amazon Web Services (AWS) can help you understand what kinds of interesting and innovative things can be done with AWS. And it should come as no surprise to you that Amazon is a proud user of Amazon Web Services.",
+      "A Brief History of AWS",
+      "AWS was launched in 2002. The company wanted to sell its unused infrastructure as a service, or as an offering to customers. The idea was met with enthusiasm. Amazon launched its first AWS product in 2006. Four years later, in 2012, Amazon hosted a huge event focused on collecting customer input about AWS. The company still holds similar events, such as Reinvent, which allows customers to share feedback about AWS. In 2015, Amazon announced that its AWS revenue had reached $7.8 billion. Between then and 2016, AWS launched measures that helped customers migrate their services to AWS. Those measures, along with the public’s growing appreciation of AWS’s features, induced further economic growth. Amazon’s revenue increased to $12.2 billion in 2016. Today, AWS offers customers 160 products and services. That number will likely increase, given the rate at which Amazon builds upon and tweaks AWS. Let us now improve our understanding of what AWS is by looking into the services of the amazon web services (AWS). Understanding AWS and Its Services",
+      "AWS Services",
+      "Since it came into existence, AWS has become an essential cloud computing technology. Here are some of AWS’s essential offerings:",
+      "Amazon S3",
+      "This tool is used for internet back up, and it’s the cheapest storage option in the object-storage category. The best part: you can retrieve stored data from almost anywhere whenever you need it.",
+      "AWS Data Transfer Products",
+      "As the name suggests, these are migration, data collection, and data transfer products that help you collect data seamlessly. They also enable you to monitor and analyze data in real-time.",
+      "Amazon EC2 (Elastic Compute Cloud)",
+      "This provides a secure and resizable computing capacity based on your needs. The service is designed to make web-scale cloud computing more accessible.",
+      "Amazon SNS (Simple Notification Services)",
+      "This is a notification tool that delivers messages to a large number of subscribers through email or SMS. You can send alarms, service notifications, and other messages intended to call attention to important information.",
+      "Amazon KMS (Key Management System)",
+      "This is a security tool that uses 256-bit encryption for your data. It also safeguards it from hackers and cyber attacks.",
+      "Amazon Lambda",
+      "This service runs your code depending on specific events and manages the dependent resources. You need neither managing nor provisioning servers, and how much you pay depends on how long it takes to execute your code. It saves a lot of money compared with services that charge hourly rates.",
+      "Route 53",
+      "This is a DNS service in the cloud that doesn’t require you to maintain a separate DNS account. It’s designed to provide businesses with a reliable and cost-effective method to route users to internet applications.",
+      "After having learned what is AWS, let us next find out the benefits of Amazon web services.",
+    ],
+    Name: "Tamanna Verma",
+    BlogDate: "May 15, 2021",
   },
   {
-    Category: "Agriculture",
-    BlogHeading: "What I’ll Be Wearing This Party Season & The Festive Edit",
+    blogId: 3,
+    Category: "Technical",
+    BlogHeading: "What If Data Is BIG?",
     AboutBlog:
-      "Lorem markdownum illic venturi instructa nobis Echidnae,  cum  quid magna",
+      "Since the invention of computers, people have used the term data to refer to computer information, and this information was either transmitted or stored. But that is not the only data definition; there exist other types of data as well.",
     imgsrc: blogProfile,
-    Name: "Prateek",
-    BlogDate: "May 2, 2021",
+    FullBlog: [
+      "In order to know what is BIG DATA, you first need to know What is DATA? Since the invention of computers, people have used the term data to refer to computer information, and this information was either transmitted or stored. But that is not the only data definition; there exist other types of data as well. So, what is the data? Data can be texts or numbers written on papers, or it can be bytes and bits inside the memory of electronic devices, or it could be facts that are stored inside a person’s mind. Now, if we talk about data mainly in the field of science, then the answer to “what is data” will be that data is different types of information that usually is formatted in a particular manner. All the software is divided into two major categories, and those are programs and data. Programs are the collection made of instructions that are used to manipulate data. So, now after thoroughly understanding what is data and data science, let us learn some fantastic facts.",
+      " What is BIG DATA?",
+      " In Layman’s language, let’s suppose the maximum capacity of our OS is 50 Gigabytes, and let's suppose we want to store the data more than this capacity, let’s say we want to store the data of 100 Gigabytes, then if we try to store this data, our system will give an error saying -You are dumping data more than my capacity. So this is the point where the problem arises. The data we want to store is big and we don’t have enough space to store it and this problem is known as BIG DATA. We are constantly producing data — even our kitchen appliances are hooked up to the internet, sharing and storing mountains of data. The amount of information being collected around the globe is literally too hefty to process. That’s where the notion of big data comes into play. Simply put, big data consists of huge sets of raw data that are too complex for traditional data-processing software. Powerful computers and advanced software mine these data set to reveal unsuspected patterns and trends. Big data is taking the world by storm and here are I am presenting you the most fascinating Big Data statistics. There are a lot of misconceptions about Big Data, and the biggest one is that it’s simple. At first glance, Big Data appears to be just another processing issue. Surely all data trends would eventually be revealed by conventional processing on a bigger computer. But that’s not how it works. The goal of big data is to increase the speed at which products get to market, to reduce the amount of time and resources required to gain market adoption, target audiences, and to ensure that customers remain satisfied.",
+      " Big Data could be found in three forms:",
+      " 1. Structured",
+      " 2. Unstructured ",
+      "3. Semi-structured",
+      " Structured",
+      "Any data that can be stored, accessed, and processed in the form of fixed-format is termed as a ‘structured’ data. Over the period of time, talent in computer science has achieved greater success in developing techniques for working with such kind of data (where the format is well known in advance) and also deriving value out of it. However, nowadays, we are foreseeing issues when the size of such data grows to a huge extent, typical sizes are being in the rage of multiple zettabytes. Do you know? 1021 bytes equal to 1 zettabyte or one billion terabytes forms a zettabyte. Looking at these figures one can easily understand why the name Big Data is given and imagine the challenges involved in its storage and processing. Do you know? Data stored in a relational database management system is one example of a ‘structured’ data.",
+      " Unstructured",
+      "Any data with an unknown form or the structure is classified as unstructured data. In addition to the size being huge, unstructured data poses multiple challenges in terms of its processing for deriving value out of it. A typical example of unstructured data is a heterogeneous data source containing a combination of simple text files, images, videos, etc. Now day organizations have wealth of data available with them but unfortunately, they don’t know how to derive value out of it since this data is in its raw form or unstructured format.",
+      " Semi-structured",
+      " Semi-structured data can contain both forms of data. We can see semi-structured data as structured in form but it is actually not defined with e.g. a table definition in relational DBMS. An example of semi-structured data is data represented in an XML file.",
+    ],
+    Name: "Tamannah Verma",
+    BlogDate: "May 15, 2021",
   },
 ];
 const BlogList = [
   {
-    CategoryName: "Agriculture",
-    CategoryIcon: "ds",
-  },
-  {
-    CategoryName: "School",
-    CategoryIcon: "ds",
-  },
-  {
-    CategoryName: "Hospital",
-    CategoryIcon: "ds",
-  },
-  {
-    CategoryName: "University",
+    CategoryName: "Technical",
     CategoryIcon: "ds",
   },
 ];
 const TrendingBlog = [
   {
-    Category: "Agriculture",
-    BlogHeading: "What I’ll Be Wearing This Party Season & The Festive Edit",
+    Category: "Technical",
+    BlogHeading: "What If Data Is BIG?",
     AboutBlog:
-      "Lorem markdownum illic venturi instructa nobis Echidnae,  cum  quid magna",
+      "Since the invention of computers, people have used the term data to refer to computer information, and this information was either transmitted or stored. But that is not the only data definition; there exist other types of data as well.",
     imgsrc: blogProfile,
-    Name: "Prateek",
-    BlogDate: "May 2, 2021",
-    BlogLeftimg: blogLeftimg,
+
+    Name: "Tamannah Verma",
+    BlogDate: "May 15, 2021",
+    blogLeftimg:
+      "https://miro.medium.com/max/1000/1*tZEdL85CFLWU_FRidB0Gtw.jpeg",
+    blogId: 3,
   },
   {
-    Category: "Agriculture",
-    BlogHeading: "What I’ll Be Wearing This Party Season & The Festive Edit",
+    blogId: 2,
+    Category: "Technical",
+    BlogHeading: "How Amazon.com use AWS?",
     AboutBlog:
-      "Lorem markdownum illic venturi instructa nobis Echidnae,  cum  quid magna",
+      "Amazon Web Services (AWS) is an evolving cloud computing platform provided by Amazon. It provides a mix of infrastructure as a service (IaaS), Platform as a service (PaaS), and Packaged software as a service ..",
     imgsrc: blogProfile,
-    Name: "Prateek",
-    BlogDate: "May 2, 2021",
-    BlogLeftimg: blogLeftimg,
+    Name: "Tamanna Verma",
+    BlogDate: "May 15, 2021",
+    blogLeftimg:
+      "https://miro.medium.com/max/660/1*qYWKOnF1F-TpauSGcHtUfQ.jpeg",
   },
 ];
 export { BlogData, BlogList, TrendingBlog };
diff --git a/src/containers/Blogs/SingleBlog.jsx b/src/containers/Blogs/SingleBlog.jsx
index 9b893c1..4a839dc 100644
--- a/src/containers/Blogs/SingleBlog.jsx
+++ b/src/containers/Blogs/SingleBlog.jsx
@@ -1,44 +1,39 @@
-import React, { Component } from "react";
+import React from "react";
 import style from "./Blog.module.css";
 import { BlogData } from "./BlogData";
 import { SingleBlogBox, SingleBlogRight, RelatedPost } from "./BlogCard";
 import { Container, Grid } from "@material-ui/core";
-class SingleBlogsComponent extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-  componentDidMount() {}
-  render() {
-    return (
-      <>
-        <Container maxWidth="lg" className={style.BlogContainer}>
-          <div className={style.innoBlogBox}>
-            <Grid container spacing={5}>
-              <Grid item xs={8}>
-                <SingleBlogBox />
-              </Grid>
-              <Grid item xs={4}>
-                <SingleBlogRight />
-                <div className={style.RelatedHead}>
-                  <h2 className={style.RelatedPostHeading}>Related Posts</h2>
-                </div>
-                {BlogData.map((val, ind) => {
-                  return (
-                    <RelatedPost
-                      key={ind}
-                      BlogHeading={val.BlogHeading}
-                      Name={val.Name}
-                      BlogDate={val.BlogDate}
-                    />
-                  );
-                })}
-              </Grid>
+const SingleBlogsComponent = () => {
+  return (
+    <>
+      <Container maxWidth="lg" className={style.BlogContainer}>
+        <div className={style.innoBlogBox}>
+          <Grid container spacing={5}>
+            <Grid item xs={8}>
+              <SingleBlogBox />
             </Grid>
-          </div>
-        </Container>
-      </>
-    );
-  }
-}
+            <Grid item xs={4}>
+              <SingleBlogRight />
+              <div className={style.RelatedHead}>
+                <h2 className={style.RelatedPostHeading}>Related Posts</h2>
+              </div>
+              {BlogData.map((val, ind) => {
+                return (
+                  <RelatedPost
+                    key={ind}
+                    BlogHeading={val.BlogHeading}
+                    Name={val.Name}
+                    BlogDate={val.BlogDate}
+                    Category={val.Category}
+                    blogId={val.blogId}
+                  />
+                );
+              })}
+            </Grid>
+          </Grid>
+        </div>
+      </Container>
+    </>
+  );
+};
 export default SingleBlogsComponent;
diff --git a/src/containers/Blogs/index.jsx b/src/containers/Blogs/index.jsx
index c57a7f2..05a9233 100644
--- a/src/containers/Blogs/index.jsx
+++ b/src/containers/Blogs/index.jsx
@@ -3,11 +3,13 @@ import style from "./Blog.module.css";
 import { BlogData, BlogList, TrendingBlog } from "./BlogData";
 import { BlogCard, BlogListBox, TrendingBlogBox } from "./BlogCard";
 import { Container, Grid } from "@material-ui/core";
+import { getDeviceType } from "helpers";
+import styled from "styled-components";
 const BlogsComponent = () => {
   return (
     <>
       <Container maxWidth="lg" className={style.BlogContainer}>
-        <div className={style.innoBlogBox}>
+        <InnerBox className={style.innoBlogBox}>
           <Grid container spacing={1}>
             <Grid item xs={8}>
               <h2 className={style.InnoHeading}>Innovative Ideas</h2>
@@ -21,11 +23,13 @@ const BlogsComponent = () => {
                     Name={val.Name}
                     BlogDate={val.BlogDate}
                     imgsrc={val.imgsrc}
+                    blogId={val.blogId}
+                    FullBlog={val.FullBlog}
                   />
                 );
               })}
             </Grid>
-            <Grid item xs={4}>
+            <CategoryList item xs={4}>
               <h2 className={style.CatHeading}>Category</h2>
               {BlogList.map((val, ind) => {
                 return (
@@ -36,13 +40,13 @@ const BlogsComponent = () => {
                   />
                 );
               })}
-            </Grid>
+            </CategoryList>
           </Grid>
-        </div>
+        </InnerBox>
       </Container>
       <Container maxWidth="lg" className={style.topPick}>
         <h2 className={style.topHeading}>Trending Now</h2>
-        <Grid container spacing={1}>
+        <Grid container spacing={0}>
           <Grid item xs={12}>
             {TrendingBlog.map((val, ind) => {
               return (
@@ -54,7 +58,8 @@ const BlogsComponent = () => {
                   Name={val.Name}
                   BlogDate={val.BlogDate}
                   imgsrc={val.imgsrc}
-                  BlogLeftimg={val.BlogLeftimg}
+                  blogLeftimg={val.blogLeftimg}
+                  blogId={val.blogId}
                 />
               );
             })}
@@ -66,3 +71,10 @@ const BlogsComponent = () => {
 };
 
 export default BlogsComponent;
+
+const CategoryList = styled(Grid)`
+  display: ${getDeviceType() === "mobile" ? "none" : ""};
+`;
+const InnerBox = styled.div`
+  margin-left: ${getDeviceType() === "mobile" ? "-5px" : "0"};
+`;
diff --git a/src/containers/Events/EventDetials/index.jsx b/src/containers/Events/EventDetials/index.jsx
index f0845ba..5b97551 100644
--- a/src/containers/Events/EventDetials/index.jsx
+++ b/src/containers/Events/EventDetials/index.jsx
@@ -10,238 +10,238 @@ import axios from "../../../helpers/axios";
 import { useParams } from "react-router";
 
 const EventDetails = () => {
-	const [isRegistered, setIsRegistered] = useState(false);
-	const [details, setDeatils] = useState({});
-	const [schedule, setSchedule] = useState(false);
-	const [attachedFiles, setAttachedFiles] = useState([]);
-	const [startTime, setStartTime] = useState("");
-	const [endTime, setEndTime] = useState("");
-	const { eventId } = useParams();
+  const [isRegistered, setIsRegistered] = useState(false);
+  const [details, setDeatils] = useState({});
+  const [schedule, setSchedule] = useState(false);
+  const [attachedFiles, setAttachedFiles] = useState([]);
+  const [startTime, setStartTime] = useState("");
+  const [endTime, setEndTime] = useState("");
+  const { eventId } = useParams();
 
-	useEffect(() => {
-		async function eventFunction() {
-			try {
-				let response = await axios.get("/api/events/" + eventId);
-				setDeatils(response.data);
-				let stime = new Date(response.data.startTime);
-				let etime = new Date(response.data.endTime);
-				stime = stime.toLocaleString("en-US");
-				etime = etime.toLocaleString("en-US");
-				setStartTime(stime);
-				setEndTime(etime);
-				setIsRegistered(response.data.eventRegistered);
+  useEffect(() => {
+    async function eventFunction() {
+      try {
+        let response = await axios.get("/api/events/" + eventId);
+        setDeatils(response.data);
+        let stime = new Date(response.data.startTime);
+        let etime = new Date(response.data.endTime);
+        stime = stime.toLocaleString("en-US");
+        etime = etime.toLocaleString("en-US");
+        setStartTime(stime);
+        setEndTime(etime);
+        setIsRegistered(response.data.eventRegistered);
 
-				let arr = response.data.schedule.split(";");
-				let res = [];
-				for (let i = 0; i < arr.length; i += 3) {
-					let temp = {
-						text: arr[i],
-						shortText: arr[i + 1],
-						description: arr[i + 2],
-					};
-					res.push(temp);
-				}
-				setSchedule(res);
+        let arr = response.data.schedule.split(";");
+        let res = [];
+        for (let i = 0; i < arr.length; i += 3) {
+          let temp = {
+            text: arr[i],
+            shortText: arr[i + 1],
+            description: arr[i + 2],
+          };
+          res.push(temp);
+        }
+        setSchedule(res);
 
-				let arr2 = response.data.attachedFiles.split(";");
-				console.log(arr2);
-				let res2 = [];
-				for (let i = 0; i < arr2.length; i += 2) {
-					let temp = {
-						text: arr2[i],
-						url: arr2[i + 1],
-					};
-					res2.push(temp);
-				}
-				console.log(res2);
-				setAttachedFiles(res2);
-			} catch (err) {
-				if (err.response) {
-					if (err.response.status === 400) {
-						alert(err.response.data.error);
-					} else if (err.response.status === 500) {
-						alert("Internal Error");
-					}
-				} else {
-					alert(err);
-				}
-			}
-		}
-		eventFunction();
-	}, [eventId]);
+        let arr2 = response.data.attachedFiles.split(";");
+        console.log(arr2);
+        let res2 = [];
+        for (let i = 0; i < arr2.length; i += 2) {
+          let temp = {
+            text: arr2[i],
+            url: arr2[i + 1],
+          };
+          res2.push(temp);
+        }
+        console.log(res2);
+        setAttachedFiles(res2);
+      } catch (err) {
+        if (err.response) {
+          if (err.response.status === 400) {
+            alert(err.response.data.error);
+          } else if (err.response.status === 500) {
+            alert("Internal Error");
+          }
+        } else {
+          alert(err);
+        }
+      }
+    }
+    eventFunction();
+  }, [eventId]);
 
-	const registerEvent = async () => {
-		try {
-			let response = await axios.post("/api/events/register/" + eventId);
+  const registerEvent = async () => {
+    try {
+      let response = await axios.post("/api/events/register/" + eventId);
 
-			if (response.data.success) {
-				alert("Event Registered");
-				setIsRegistered(true);
-			}
-		} catch (err) {
-			if (err.response) {
-				if (err.response.status === 401) {
-					alert("Please Login First");
-				} else if (err.response.status === 500) {
-					alert("Internal Error");
-				}
-			} else {
-				alert(err);
-			}
-		}
-	};
+      if (response.data.success) {
+        alert("Event Registered");
+        setIsRegistered(true);
+      }
+    } catch (err) {
+      if (err.response) {
+        if (err.response.status === 401) {
+          alert("Please Login First");
+        } else if (err.response.status === 500) {
+          alert("Internal Error");
+        }
+      } else {
+        alert(err);
+      }
+    }
+  };
 
-	return (
-		<Container>
-			<Image src={details.mainImgUrl}></Image>
-			<Box>
-				<Head>{details.title}</Head>
-				<Info>
-					<Button
-						onClick={() =>
-							!isRegistered
-								? registerEvent()
-								: window.open(details.joinLink, "_blank")
-						}
-					>
-						{isRegistered ? "Join Now" : "Register"}
-					</Button>
-					<Tag>
-						<InfoHead>Starts on:</InfoHead>
-						<InfoBody>{startTime}</InfoBody>
-					</Tag>
-					<Tag>
-						<InfoHead>Ends on:</InfoHead>
-						<InfoBody>{endTime}</InfoBody>
-					</Tag>
-					<Tag>
-						<InfoHead>Venue:</InfoHead>
-						<InfoBody>{details.venue}</InfoBody>
-					</Tag>
-				</Info>
-			</Box>
-			<Box>
-				<Desc>Description</Desc>
-				<Body>{details.description}</Body>
-			</Box>
-			{details.schedule && (
-				<Box>
-					<Desc>Schedule</Desc>
-					<Schedule data={schedule} />
-				</Box>
-			)}
-			<Box>
-				<Desc>Related Stuff</Desc>
-				<Info2>
-					{attachedFiles &&
-						attachedFiles.map((e) => {
-							return <Related text={e.text} link={e.url} />;
-						})}
-				</Info2>
-			</Box>
-		</Container>
-	);
+  return (
+    <Container>
+      <Image src={details.mainImgUrl}></Image>
+      <Box>
+        <Head>{details.title}</Head>
+        <Info>
+          <Button
+            onClick={() =>
+              !isRegistered
+                ? registerEvent()
+                : window.open(details.joinLink, "_blank")
+            }
+          >
+            {isRegistered ? "Join Now" : "Register"}
+          </Button>
+          <Tag>
+            <InfoHead>Starts on:</InfoHead>
+            <InfoBody>{startTime}</InfoBody>
+          </Tag>
+          <Tag>
+            <InfoHead>Ends on:</InfoHead>
+            <InfoBody>{endTime}</InfoBody>
+          </Tag>
+          <Tag>
+            <InfoHead>Venue:</InfoHead>
+            <InfoBody>{details.venue}</InfoBody>
+          </Tag>
+        </Info>
+      </Box>
+      <Box>
+        <Desc>Description</Desc>
+        <Body>{details.description}</Body>
+      </Box>
+      {details.schedule && (
+        <Box>
+          <Desc>Schedule</Desc>
+          <Schedule data={schedule} />
+        </Box>
+      )}
+      <Box>
+        <Desc>Related Stuff</Desc>
+        <Info2>
+          {attachedFiles &&
+            attachedFiles.map((e) => {
+              return <Related text={e.text} link={e.url} />;
+            })}
+        </Info2>
+      </Box>
+    </Container>
+  );
 };
 
 export default EventDetails;
 
 const Container = styled.div`
-	width: ${getDeviceType() === "mobile" ? "100vw" : "75vw"};
-	margin: 100px auto;
-	color: ${appColors.primary};
-	box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px,
-		rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
-		rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
-	background-color: #fafafa;
-	padding: ${getDeviceType() === "mobile" ? "0" : "20px"};
-	padding-top: 35px;
-	border-radius: 10px;
+  width: ${getDeviceType() === "mobile" ? "100vw" : "75vw"};
+  margin: 100px auto;
+  color: ${appColors.primary};
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px,
+    rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
+    rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
+  background-color: #fafafa;
+  padding: ${getDeviceType() === "mobile" ? "0" : "20px"};
+  padding-top: 35px;
+  border-radius: 10px;
 `;
 const Image = styled.img`
-	width: 100%;
-	max-height: 55vh;
-	margin-bottom: 35px;
-	object-fit: cover;
-	border-radius: 10px;
+  width: 100%;
+  max-height: 55vh;
+  margin-bottom: 35px;
+  object-fit: cover;
+  border-radius: 10px;
 `;
 
 const Box = styled.div``;
 const Head = styled.h1`
-	font-family: Quicksand;
-	font-size: ${getDeviceType() === "mobile" ? "25px" : "35px"};
-	padding: 5px 10px;
+  font-family: Quicksand;
+  font-size: ${getDeviceType() === "mobile" ? "25px" : "35px"};
+  padding: 5px 10px;
 `;
 const Info = styled.div`
-	display: flex;
-	flex-direction: ${getDeviceType() === "mobile" ? "column" : "row"};
-	border-bottom: 1px solid lightgray;
-	padding: 15px;
-	align-items: center;
-	justify-content: flex-start;
-	margin-bottom: 40px;
+  display: flex;
+  flex-direction: ${getDeviceType() === "mobile" ? "column" : "row"};
+  border-bottom: 1px solid lightgray;
+  padding: 15px;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 40px;
 `;
 const Info2 = styled.div`
-	display: flex;
-	flex-direction: row;
-	border-bottom: 1px solid lightgray;
-	padding: 15px;
-	align-items: center;
-	justify-content: flex-start;
-	margin-bottom: 40px;
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid lightgray;
+  padding: 15px;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 40px;
 `;
 
 const Tag = styled.div`
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-start;
-	align-content: baseline;
-	margin-top: 20px;
-	padding: 5px 5px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-content: baseline;
+  margin-top: 20px;
+  padding: 5px 5px;
 `;
 const InfoHead = styled.span`
-	color: gray;
-	font-size: ${getDeviceType() === "mobile" ? "14px" : "16px"};
-	margin-right: ${getDeviceType() === "mobile" ? "10px" : "20px"};
+  color: gray;
+  font-size: ${getDeviceType() === "mobile" ? "14px" : "16px"};
+  margin-right: ${getDeviceType() === "mobile" ? "10px" : "20px"};
 `;
 const InfoBody = styled.span`
-	font-weight: 500;
-	font-size: ${getDeviceType() === "mobile" ? "16px" : "18px"};
+  font-weight: 500;
+  font-size: ${getDeviceType() === "mobile" ? "16px" : "18px"};
 `;
 const Button = styled.button`
-	font-size: 16px;
-	margin-right: 10px;
-	margin-top: 10px;
-	outline: none;
-	cursor: pointer;
-	box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px,
-		rgba(17, 17, 26, 0.1) 0px 0px 8px;
-	background-image: linear-gradient(
-		to right,
-		#040016,
-		rgba(12, 136, 194, 0.945)
-	);
-	border: none;
-	color: white;
-	padding: 10px 25px;
+  font-size: 16px;
+  margin-right: 10px;
+  margin-top: 10px;
+  outline: none;
+  cursor: pointer;
+  box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px,
+    rgba(17, 17, 26, 0.1) 0px 0px 8px;
+  background-image: linear-gradient(
+    to right,
+    #040016,
+    rgba(12, 136, 194, 0.945)
+  );
+  border: none;
+  color: white;
+  padding: 10px 25px;
 
-	:hover {
-		background-image: linear-gradient(
-			to left,
-			#040016,
-			rgba(12, 136, 194, 0.945)
-		);
-	}
+  :hover {
+    background-image: linear-gradient(
+      to left,
+      #040016,
+      rgba(12, 136, 194, 0.945)
+    );
+  }
 `;
 
 const Desc = styled.h2`
-	font-family: Quicksand;
-	padding: 0 20px;
-	margin-bottom: 10px;
+  font-family: Quicksand;
+  padding: 0 20px;
+  margin-bottom: 10px;
 `;
 
 const Body = styled.p`
-	margin-bottom: 15px;
-	text-align: justify;
+  margin-bottom: 15px;
+  text-align: justify;
 
-	padding: ${getDeviceType() === "mobile" ? "20px" : "35px"}; ;
+  padding: ${getDeviceType() === "mobile" ? "20px" : "35px"}; ;
 `;
diff --git a/src/containers/Team/TeamDetails.jsx b/src/containers/Team/TeamDetails.jsx
index 5ee7c45..77569ff 100644
--- a/src/containers/Team/TeamDetails.jsx
+++ b/src/containers/Team/TeamDetails.jsx
@@ -46,16 +46,19 @@ const TeamDetails = ({ details }) => {
         ) : (
           ""
         )}
-
-        <a href={details.linkedin}>
-          <LinkedIn
-            style={{
-              marginTop: "10px",
-              fontSize: "17px",
-              color: "#0075b3",
-            }}
-          />
-        </a>
+        {details.linkedin ? (
+          <a href={details.linkedin}>
+            <LinkedIn
+              style={{
+                marginTop: "10px",
+                fontSize: "17px",
+                color: "#0075b3",
+              }}
+            />
+          </a>
+        ) : (
+          ""
+        )}
       </Icons>
 
       <Name active={active}>{details.name}</Name>
diff --git a/src/helpers/Data.js b/src/helpers/Data.js
index 638c49b..4e0cf3d 100644
--- a/src/helpers/Data.js
+++ b/src/helpers/Data.js
@@ -8,22 +8,22 @@ export const TeamData = {
     {
       name: "Prof. Suman Sangwan",
       image: suman,
-      work: "President IIC, Prof. CSED",
+      work: "President IIC",
     },
     {
       name: "Dr. Rohtash Dhiman",
       image: rd,
-      work: "Assistant Professor, EED",
+      work: "Co-ordinator",
     },
     {
       name: "Dr. Ajmer Singh",
       image: ajmer,
-      work: "Assistant Professor, CSED",
+      work: "Co-ordinator",
     },
     {
       name: "Mr. Vikas Nehra",
       image: vikas,
-      work: "Assistant Professor, ECED",
+      work: "Co-ordinator",
     },
     {
       name: "Tushar",
@@ -35,19 +35,21 @@ export const TeamData = {
     },
     {
       name: "Vinay Matta",
-      image: "https://res.cloudinary.com/dpnapmmwm/image/upload/v1620981575/Others/IMG_20210511_180431_aj3waf.jpg",
+      image:
+        "https://res.cloudinary.com/dpnapmmwm/image/upload/v1620981575/Others/IMG_20210511_180431_aj3waf.jpg",
       work: "Full Stack Developer",
       telegram: "https://telegram.me/VinayMatta63",
       linkedin: "https://www.linkedin.com/in/vinay-matta-465578192/",
     },
     {
       name: "Nikita Jain",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image: "https://pub.iicdcrustm.com/images/nikita.jpeg",
       work: "Developer",
+      linkedin: "https://www.linkedin.com/in/nikita-jain-97b463149/",
     },
     {
       name: "Deepanshu Kaushik",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image: "https://pub.iicdcrustm.com/images/deepanshu.jpg",
       work: "Record of Activities",
       linkedin: "https://www.linkedin.com/in/deepanshu-kaushik-a479301b3/",
     },
@@ -69,87 +71,106 @@ export const TeamData = {
     },
     {
       name: "Rohan Malik",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image:
+        "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
       work: "Media/ Publicity",
     },
     {
       name: "Yashwant Soni",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image: "https://pub.iicdcrustm.com/images/yashwant.jfif",
       work: "Media/ Publicity",
+      linkedin: "https://www.linkedin.com/in/yashwant-soni-5354ba169",
     },
     {
       name: "Anjali Duhan",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image:
+        "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
       work: "Event Management",
+      linkedin: "https://www.linkedin.com/in/anjali-duhan-0385651a2",
     },
     {
       name: "Yash Mohan",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image: "https://pub.iicdcrustm.com/images/yashmohan.png",
       work: "Event Management",
+      linkedin: "https://www.linkedin.com/in/yash-mohan-060b23190",
+      telegram: "https://telegram.me/yashmohan1609",
     },
     {
       name: "Devansh Atray",
-      image: "https://res.cloudinary.com/dpnapmmwm/image/upload/v1620981141/Others/IMG-20210504-WA0003__01_zs6fyl.jpg",
+      image:
+        "https://res.cloudinary.com/dpnapmmwm/image/upload/v1620981141/Others/IMG-20210504-WA0003__01_zs6fyl.jpg",
       work: "Event Management",
       linkedin: "https://www.linkedin.com/in/devanshatray",
       whatsapp: "https://wa.me/917082349057",
     },
     {
       name: "Tamanna Verma",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image:
+        "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
       work: "Event Management",
     },
     {
       name: "Harsh Kumar phogat",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image:
+        "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
       work: "Member",
     },
     {
       name: "Chaitanya",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image: "https://pub.iicdcrustm.com/images/chaitanaya.png",
       work: "Member",
       linkedin: "https://www.linkedin.com/in/guptachaitanya/",
     },
     {
       name: "Jatin",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image:
+        "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
       work: "Member",
+      linkedin: "https://www.linkedin.com/in/jatin-saini-467223193/",
     },
     {
       name: "Yuvraj Singh",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image:
+        "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
       work: "Member",
     },
     {
       name: "Paritosh Dahiya",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image:
+        "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
       work: "Member",
+      linkedin: "https://www.linkedin.com/in/paritosh-dahiya-57b568192/",
+      telegram: "https://telegram.me/hnhparitosh",
     },
     {
       name: "Rahul Saini",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image: "https://pub.iicdcrustm.com/images/rahul.jpg",
       work: "Member",
+      linkedin: "https://www.linkedin.com/in/rahul-saini-b712311a8",
     },
     {
       name: "Rishabh Kalra",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image:
+        "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
       work: "Member",
     },
     {
       name: "Naveen",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image: "https://pub.iicdcrustm.com/images/naveen.jpeg",
       work: "Member",
       linkedin: "https://www.linkedin.com/in/naveengill121/",
     },
     {
       name: "Kashish",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image:
+        "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
       work: "Member",
     },
     {
       name: "Bharti",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image: "https://pub.iicdcrustm.com/images/bharti.jpg",
       work: "Member",
+      linkedin: "https://www.linkedin.com/in/bharti-sharma-9140a0161/",
     },
   ],
   teacher: [
@@ -185,19 +206,21 @@ export const TeamData = {
     },
     {
       name: "Vinay Matta",
-      image: "https://res.cloudinary.com/dpnapmmwm/image/upload/v1620981575/Others/IMG_20210511_180431_aj3waf.jpg",
+      image:
+        "https://res.cloudinary.com/dpnapmmwm/image/upload/v1620981575/Others/IMG_20210511_180431_aj3waf.jpg",
       work: "Full Stack Developer",
       telegram: "https://telegram.me/VinayMatta63",
       linkedin: "https://www.linkedin.com/in/vinay-matta-465578192/",
     },
     {
       name: "Nikita Jain",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image: "https://pub.iicdcrustm.com/images/nikita.jpeg",
       work: "Developer",
+      linkedin: "https://www.linkedin.com/in/nikita-jain-97b463149/",
     },
     {
       name: "Deepanshu Kaushik",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image: "https://pub.iicdcrustm.com/images/deepanshu.jpg",
       work: "Record of Activities",
       linkedin: "https://www.linkedin.com/in/deepanshu-kaushik-a479301b3/",
     },
@@ -219,99 +242,116 @@ export const TeamData = {
     },
     {
       name: "Rohan Malik",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image:
+        "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
       work: "Media/ Publicity",
     },
     {
       name: "Yashwant Soni",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image: "https://pub.iicdcrustm.com/images/yashwant.jfif",
       work: "Media/ Publicity",
+      linkedin: "https://www.linkedin.com/in/yashwant-soni-5354ba169",
     },
     {
       name: "Anjali Duhan",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image:
+        "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
       work: "Event Management",
+      linkedin: "https://www.linkedin.com/in/anjali-duhan-0385651a2",
     },
     {
       name: "Yash Mohan",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image: "https://pub.iicdcrustm.com/images/yashmohan.png",
       work: "Event Management",
+      linkedin: "https://www.linkedin.com/in/yash-mohan-060b23190",
+      telegram: "https://telegram.me/yashmohan1609",
     },
     {
       name: "Devansh Atray",
-      image: "https://res.cloudinary.com/dpnapmmwm/image/upload/v1620981141/Others/IMG-20210504-WA0003__01_zs6fyl.jpg",
+      image:
+        "https://res.cloudinary.com/dpnapmmwm/image/upload/v1620981141/Others/IMG-20210504-WA0003__01_zs6fyl.jpg",
       work: "Event Management",
       linkedin: "https://www.linkedin.com/in/devanshatray",
       whatsapp: "https://wa.me/917082349057",
     },
     {
       name: "Tamanna Verma",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image:
+        "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
       work: "Event Management",
     },
   ],
   members: [
     {
       name: "Harsh Kumar phogat",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image:
+        "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
       work: "Member",
     },
     {
       name: "Chaitanya",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image: "https://pub.iicdcrustm.com/images/chaitanaya.png",
       work: "Member",
       linkedin: "https://www.linkedin.com/in/guptachaitanya/",
     },
     {
       name: "Jatin",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image:
+        "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
       work: "Member",
+      linkedin: "https://www.linkedin.com/in/jatin-saini-467223193/",
     },
     {
       name: "Yuvraj Singh",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image:
+        "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
       work: "Member",
     },
     {
       name: "Paritosh Dahiya",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image:
+        "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
       work: "Member",
+      linkedin: "https://www.linkedin.com/in/paritosh-dahiya-57b568192/",
+      telegram: "https://telegram.me/hnhparitosh",
     },
     {
       name: "Rahul Saini",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image: "https://pub.iicdcrustm.com/images/rahul.jpg",
       work: "Member",
+      linkedin: "https://www.linkedin.com/in/rahul-saini-b712311a8",
     },
     {
       name: "Rishabh Kalra",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image:
+        "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
       work: "Member",
     },
     {
       name: "Naveen",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image: "https://pub.iicdcrustm.com/images/naveen.jpeg",
       work: "Member",
       linkedin: "https://www.linkedin.com/in/naveengill121/",
     },
     {
       name: "Kashish",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image:
+        "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
       work: "Member",
     },
     {
       name: "Bharti",
-      image: "https://i.pinimg.com/originals/99/29/4a/99294a1f9c7e060973ee95fdb2a667b7.jpg",
+      image: "https://pub.iicdcrustm.com/images/bharti.jpg",
       work: "Member",
+      linkedin: "https://www.linkedin.com/in/bharti-sharma-9140a0161/",
     },
   ],
 };
 
 export const IntroData = {
   title: "Institute Innovation Cell",
-  p1:
-    "Under the leadership of Hon’ble Vice Chancellor, Prof. (Dr.) Rajendrakumar Anayath, Deenbandhu Chhotu Ram University Of Science And Technology, Murthal (Sonepat) successfully established Institute Innovation Council (IIC) as per the norms and directives of Innovation Cell, Ministry of Human Resource Development (MHRD), Government of India, in 2019. ",
-  p2:
-    "MIC has envisioned encouraging creation of ‘Institution’s Innovation Council (IICs)’ across selected HEIs. A network of these IICs will be established to promote innovation in the Institution through multitudinous modes leading to an innovation promotion eco-system in the campuses. IIC has been established to systematically foster the culture of innovation in the institute. IICs are responsible for conducting the activities as per activity calendar provided by MHRD Innovation Cell.",
+  p1: "Under the leadership of Hon’ble Vice Chancellor, Prof. (Dr.) Rajendrakumar Anayath, Deenbandhu Chhotu Ram University Of Science And Technology, Murthal (Sonepat) successfully established Institute Innovation Council (IIC) as per the norms and directives of Innovation Cell, Ministry of Human Resource Development (MHRD), Government of India, in 2019. ",
+  p2: "Ministery of Education’s Innovation Cell has envisioned encouraging creation of ‘Institution’s Innovation Council (IICs)’ across selected HEIs. A network of these IICs will be established to promote innovation in the Institution through multitudinous modes leading to an innovation promotion eco-system in the campuses. IIC has been established to systematically foster the culture of innovation in the institute. IICs are responsible for conducting the activities as per activity calendar provided by MHRD Innovation Cell.",
 };
 
 export const FunctionsData = {
@@ -320,27 +360,34 @@ export const FunctionsData = {
     <>
       <li>To foster the culture of innovation in the institute.</li>
       <li>
-        To conduct various innovation and entrepreneurship-related activities prescribed by Central MIC in time bound
-        fashion.
+        To conduct various innovation and entrepreneurship-related activities
+        prescribed by Central MIC in time bound fashion.
       </li>
       <li>Identify and reward innovations and share success stories.</li>
       <li>
-        Organize periodic workshops/ seminars/ interactions with entrepreneurs, investors, professionals and create a
-        mentor pool for student innovators.
+        Organize periodic workshops/ seminars/ interactions with entrepreneurs,
+        investors, professionals and create a mentor pool for student
+        innovators.
       </li>
     </>
   ),
   list2: (
     <>
-      <li>Network with peers and national entrepreneurship development organizations.</li>
       <li>
-        Create an Institution’s Innovation portal to highlight innovative projects carried out by institution’s faculty
-        and students.
+        Network with peers and national entrepreneurship development
+        organizations.
+      </li>
+      <li>
+        Create an Institution’s Innovation portal to highlight innovative
+        projects carried out by institution’s faculty and students.
+      </li>
+      <li>
+        Organize Hackathons, idea competition, mini-challenges etc. with the
+        involvement of industries.
       </li>
-      <li>Organize Hackathons, idea competition, mini-challenges etc. with the involvement of industries.</li>
       <li>
-        To mentor students in analyzing their new ideas and transforming the ideas into prototypes and further into
-        startups
+        To mentor students in analyzing their new ideas and transforming the
+        ideas into prototypes and further into startups
       </li>
     </>
   ),
@@ -348,7 +395,6 @@ export const FunctionsData = {
 
 export const VisionData = {
   title: "VISION OF IIC",
-  body:
-    "Primarily, the IICs' role is to engage a large number of faculty and staff, and encourage, inspire, and nuture young students in various innovation and enterpreneurship-relaed activities such as ideation, problem-solving, proof of concept development, design thinking, IPR, project handling and management at pre-incubting/incubation stage, etc.,so that innovation and entrepreneurship ecosystem gets established and stabilized in HEIs.",
+  body: "Primarily, the IICs' role is to engage a large number of faculty and staff, and encourage, inspire, and nuture young students in various innovation and enterpreneurship-relaed activities such as ideation, problem-solving, proof of concept development, design thinking, IPR, project handling and management at pre-incubting/incubation stage, etc.,so that innovation and entrepreneurship ecosystem gets established and stabilized in HEIs.",
   image: "https://www.mic.gov.in/assets/img/iic-logo.png",
 };
diff --git a/src/pages/Events/index.jsx b/src/pages/Events/index.jsx
index 5cd799e..c4deeb2 100644
--- a/src/pages/Events/index.jsx
+++ b/src/pages/Events/index.jsx
@@ -10,124 +10,125 @@ import CircularProgress from "@material-ui/core/CircularProgress";
 import NoData from "assets/nodata.svg";
 
 const Events = () => {
-	const [events, setEvents] = useState(null);
-	const [loading, setLoading] = useState(false);
-	const [page, setPage] = useState(1);
-	const [type, setType] = useState("all");
-	const [time, setTime] = useState("all");
+  const [events, setEvents] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const [type, setType] = useState("all");
+  const [time, setTime] = useState("all");
 
-	useEffect(() => {
-		updateEventsList(page, type, time);
-	}, [type, time, page]);
-	useEffect(() => {
-		setPage(1);
-	}, [time, type]);
+  useEffect(() => {
+    updateEventsList(page, type, time);
+  }, [type, time, page]);
+  useEffect(() => {
+    setPage(1);
+  }, [time, type]);
 
-	const updateEventsList = (page, type, time) => {
-		setLoading(true);
-		axios
-			.get(`/api/events?type=${type}&page=${page}&time=${time}`)
-			.then((res) => {
-				setEvents(res.data);
-				setLoading(false);
-			})
-			.catch((err) => {
-				setEvents(null);
-				setLoading(false);
-			});
-	};
+  const updateEventsList = (page, type, time) => {
+    setLoading(true);
+    axios
+      .get(`/api/events?type=${type}&page=${page}&time=${time}`)
+      .then((res) => {
+        console.log(res.data);
+        setEvents(res.data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setEvents(null);
+        setLoading(false);
+      });
+  };
 
-	return (
-		<Container>
-			<Mask>
-				<Text>Event Calendar</Text>
-			</Mask>
-			<Image src="https://images.unsplash.com/photo-1506784365847-bbad939e9335?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=748&q=80" />
-			<Box>
-				<EventHeader
-					time={time}
-					type={type}
-					setTime={setTime}
-					setType={setType}
-				/>
-				<EventWrapper>
-					{loading ? (
-						<CircularProgress style={{ margin: "150px auto" }} />
-					) : events && events.length !== 0 ? (
-						events.map((e) => <EventBox event={e} key={e.id} />)
-					) : (
-						<NoDataImg src={NoData} alt=" " />
-					)}
-				</EventWrapper>
-				<Page
-					count={10}
-					page={page}
-					onChange={(e, value) => {
-						setPage(value);
-					}}
-					color="primary"
-				/>
-			</Box>
-		</Container>
-	);
+  return (
+    <Container>
+      <Mask>
+        <Text>Event Calendar</Text>
+      </Mask>
+      <Image src="https://images.unsplash.com/photo-1506784365847-bbad939e9335?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=748&q=80" />
+      <Box>
+        <EventHeader
+          time={time}
+          type={type}
+          setTime={setTime}
+          setType={setType}
+        />
+        <EventWrapper>
+          {loading ? (
+            <CircularProgress style={{ margin: "150px auto" }} />
+          ) : events && events.length !== 0 ? (
+            events.map((e) => <EventBox event={e} key={e.id} />)
+          ) : (
+            <NoDataImg src={NoData} alt=" " />
+          )}
+        </EventWrapper>
+        <Page
+          count={10}
+          page={page}
+          onChange={(e, value) => {
+            setPage(value);
+          }}
+          color="primary"
+        />
+      </Box>
+    </Container>
+  );
 };
 
 export default Events;
 
 const NoDataImg = styled.img`
-	height: 200px;
-	width: 200px;
-	margin: 90px auto;
+  height: 200px;
+  width: 200px;
+  margin: 90px auto;
 `;
 
 const EventWrapper = styled.div`
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: space-evenly;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
 `;
 
 const Container = styled.div`
-	width: ${getDeviceType() === "mobile" ? "100vw" : "75vw"};
-	margin: 0 auto;
-	background-color: #f5f5f5;
-	padding-top: 70px;
+  width: ${getDeviceType() === "mobile" ? "100vw" : "75vw"};
+  margin: 0 auto;
+  background-color: #f5f5f5;
+  padding-top: 70px;
 `;
 const Image = styled.img`
-	width: 100%;
-	height: ${getDeviceType() === "mobile" ? "40vh" : "50vh"};
+  width: 100%;
+  height: ${getDeviceType() === "mobile" ? "40vh" : "50vh"};
 `;
 const Mask = styled.div`
-	width: ${getDeviceType() === "mobile" ? "100vw" : "75vw"};
-	height: ${getDeviceType() === "mobile" ? "40vh" : "50vh"};
-	background-color: rgba(0, 0, 0, 0.699);
-	position: absolute;
-	display: flex;
-	justify-content: center;
-	align-items: center;
+  width: ${getDeviceType() === "mobile" ? "100vw" : "75vw"};
+  height: ${getDeviceType() === "mobile" ? "40vh" : "50vh"};
+  background-color: rgba(0, 0, 0, 0.699);
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
 
 const Text = styled.span`
-	color: #fff;
-	font-size: ${getDeviceType() === "mobile" ? "1.5rem" : "3.5rem"};
-	font-family: Quicksand;
+  color: #fff;
+  font-size: ${getDeviceType() === "mobile" ? "1.5rem" : "3.5rem"};
+  font-family: Quicksand;
 `;
 
 const Box = styled.div`
-	width: ${getDeviceType() === "mobile" ? "100vw" : "75vw"};
-	box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
-		rgba(17, 17, 26, 0.05) 0px 8px 32px;
-	border: 1px solid ${appColors.footerHover};
-	margin-top: 30px;
-	margin-bottom: 30px;
-	border-radius: 10px;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	padding-bottom: 20px;
-	overflow-x: hidden;
+  width: ${getDeviceType() === "mobile" ? "100vw" : "75vw"};
+  box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
+    rgba(17, 17, 26, 0.05) 0px 8px 32px;
+  border: 1px solid ${appColors.footerHover};
+  margin-top: 30px;
+  margin-bottom: 30px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 20px;
+  overflow-x: hidden;
 `;
 
 const Page = styled(Pagination)`
-	padding-top: 20px;
+  padding-top: 20px;
 `;
diff --git a/src/routes/index.jsx b/src/routes/index.jsx
index d4582c2..71cb8f9 100644
--- a/src/routes/index.jsx
+++ b/src/routes/index.jsx
@@ -13,8 +13,9 @@ import Team from "containers/Team";
 
 import Events from "pages/Events";
 import EventDetails from "containers/Events/EventDetials";
-import FAQ from "containers/FAQ";
 import BlogsComponent from "containers/Blogs";
+import SingleBlogsComponent from "containers/Blogs/SingleBlog";
+import FAQ from "containers/FAQ";
 
 export default function App() {
   return (
@@ -32,12 +33,15 @@ export default function App() {
           <Route path="/events">
             <Events />
           </Route>
-          <Route path="/faq">
-            <FAQ />
+          <Route path="/blogs/:Category/:blogId/:BlogHeading">
+            <SingleBlogsComponent />
           </Route>
           <Route path="/blogs">
             <BlogsComponent />
           </Route>
+          <Route path="/faq">
+            <FAQ />
+          </Route>
           <Route path="/team">
             <Team />
           </Route>