diff --git a/ui/src/pages/CSS/BoxShadow/index.tsx b/ui/src/pages/CSS/BoxShadow/index.tsx
index 83cbb87a..18c9098d 100644
--- a/ui/src/pages/CSS/BoxShadow/index.tsx
+++ b/ui/src/pages/CSS/BoxShadow/index.tsx
@@ -2,41 +2,21 @@ import { useState } from "react";
 import { Card, Form, Slider, Space } from "antd";
 import PageGrid from "components/Layouts/PageGrid";
 import CodeHighlightWithCopy from "components/General/CodeHighlightWithCopy";
-import about from "assets/sample.jpg";
 import style from "./BoxShadow.module.scss";
-import { faker } from "@faker-js/faker";
-import {
-	ResponsiveSegementWithLabel,
-	ResponsiveSelectWithLabel,
-} from "components/General/FormComponents";
-import { BORDER_STYLES, SEGMENTED_OPTIONS } from "./utils/constants";
 import ColorPickerWithInput from "components/General/ColorPickerWithInput";
 import InputGrid from "components/Layouts/InputGrid";
 
-const PARAGRAPHS = faker.lorem.paragraph(7);
-
 const BoxShadow = () => {
-	const [border, setBorder] = useState(0);
-	const [borderRadiusTopLeft, setBorderRadiusTopLeft] = useState(0);
-	const [borderRadiusTopRight, setBorderRadiusTopRight] = useState(0);
-	const [borderRadiusBottomLeft, setBorderRadiusBottomLeft] = useState(0);
-	const [borderRadiusBottomRight, setBorderRadiusBottomRight] = useState(0);
-
-	const [borderWidth, setBorderWidth] = useState(0);
-	const [borderStyle, setBorderStyle] = useState(BORDER_STYLES[4].value);
-	const [borderColor, setBorderColor] = useState("rgba(0, 0, 0, 1)");
-
-	const [borderType, setBorderType] = useState("rgba(0, 0, 0, 1)");
+	const [shadowColor, setShadowColor] = useState("#ddd");
+	const [boxColor, setBoxColor] = useState("#df6a0b77");
+	const [horizontalLength, setHorizontalLength] = useState(0);
+	const [verticalLength, setVerticalLength] = useState(0);
+	const [blurRadius, setBlurRadius] = useState(0);
+	const [spreadRadius, setSpreadRadius] = useState(0);
+	const [opacity, setOpacity] = useState(0);
 
 	const generateCSSCodeString = () => {
-		const borderRadiusString = `border-radius: ${borderRadiusTopLeft}px ${borderRadiusTopRight}px ${borderRadiusBottomRight}px ${borderRadiusBottomLeft}px;`;
-		const borderWidthString = `border-width: ${borderWidth}px;`;
-		const borderColorString = `border-color: ${borderColor};`;
-		const borderStyleString = `border-style: ${borderStyle};`;
-
-		const borderShorthandString = `border: ${borderWidth}px ${borderStyle} ${borderColor};`;
-
-		return `${borderRadiusString}\n${borderWidthString}\n${borderColorString}\n${borderStyleString}\n\n// Shorthand Property\n${borderRadiusString}\n${borderShorthandString}`;
+		return "";
 	};
 
 	return (
@@ -45,91 +25,72 @@ const BoxShadow = () => {
 				<Form layout="vertical">
 					<InputGrid>
 						<ColorPickerWithInput
-							label="Color"
-							value={borderColor}
-							setValue={(e) => setBorderColor(e.target.value)}
-							setColor={setBorderColor}
+							label="Shadow color"
+							value={shadowColor}
+							setValue={(e) => setShadowColor(e.target.value)}
+							setColor={setShadowColor}
+						/>
+						<ColorPickerWithInput
+							label="Box color"
+							value={boxColor}
+							setValue={(e) => setBoxColor(e.target.value)}
+							setColor={setBoxColor}
 						/>
-						<Form.Item label="Border style">
-							<ResponsiveSelectWithLabel
-								value={borderStyle}
-								defaultActiveFirstOption
-								onSelect={(_, option) =>
-									setBorderStyle(option.value)
-								}
-								options={BORDER_STYLES}
-							/>
-						</Form.Item>
 					</InputGrid>
 
-					<ResponsiveSegementWithLabel
-						label="Radius type"
-						value={borderType}
-						onChange={(value: string | number) =>
-							setBorderType(value as string)
-						}
-						options={SEGMENTED_OPTIONS}
-					/>
-					<Form.Item label="Border">
+					<Form.Item label="Horizontal length">
 						<Slider
 							defaultValue={0}
-							value={border}
+							value={horizontalLength}
 							onChange={(value: number) => {
 								if (value) {
-									setBorder(value);
-									setBorderRadiusTopLeft(value);
-									setBorderRadiusTopRight(value);
-									setBorderRadiusBottomLeft(value);
-									setBorderRadiusBottomRight(value);
+									setHorizontalLength(value);
 								}
 							}}
 						/>
 					</Form.Item>
-					<Form.Item label="Top left border">
+					<Form.Item label="Vertical length">
 						<Slider
 							defaultValue={0}
-							value={borderRadiusTopLeft}
-							onChange={(value) =>
-								value !== null && setBorderRadiusTopLeft(value)
-							}
-						/>
-					</Form.Item>
-					<Form.Item label="Top right border">
-						<Slider
-							defaultValue={0}
-							value={borderRadiusTopRight}
-							onChange={(value) =>
-								value !== null && setBorderRadiusTopRight(value)
-							}
+							value={verticalLength}
+							onChange={(value) => {
+								if (value) {
+									setVerticalLength(value);
+								}
+							}}
 						/>
 					</Form.Item>
-					<Form.Item label="Bottom left border">
+					<Form.Item label="Blur radius">
 						<Slider
 							defaultValue={0}
-							value={borderRadiusBottomLeft}
-							onChange={(value) =>
-								value !== null &&
-								setBorderRadiusBottomLeft(value)
-							}
+							value={blurRadius}
+							onChange={(value) => {
+								if (value) {
+									setBlurRadius(value);
+								}
+							}}
 						/>
 					</Form.Item>
-					<Form.Item label="Bottom right border">
+					<Form.Item label="Spread radius">
 						<Slider
 							defaultValue={0}
-							value={borderRadiusBottomRight}
-							onChange={(value) =>
-								value !== null &&
-								setBorderRadiusBottomRight(value)
-							}
+							value={spreadRadius}
+							onChange={(value) => {
+								if (value) {
+									setSpreadRadius(value);
+								}
+							}}
 						/>
 					</Form.Item>
-					<Form.Item label="Border width">
+					<Form.Item label="Opacity">
 						<Slider
 							defaultValue={0}
-							value={borderWidth}
-							onChange={(value) =>
-								value !== null && setBorderWidth(value)
-							}
+							value={opacity}
+							onChange={(value) => {
+								if (value) {
+									setOpacity(value);
+								}
+							}}
 						/>
 					</Form.Item>
 				</Form>
@@ -137,33 +98,24 @@ const BoxShadow = () => {
 
 			<Card className={style.br__output}>
 				<Space direction="vertical">
-					<img
-						src={about}
-						onClick={() =>
-							window.open(
-								"https://unsplash.com/photos/AaqI2ao96KM",
-								"_blank"
-							)
-						}
+					<div
 						style={{
-							borderRadius: `${borderRadiusTopLeft}px ${borderRadiusTopRight}px ${borderRadiusBottomRight}px ${borderRadiusBottomLeft}px`,
-							borderWidth: `${borderWidth}px`,
-							borderColor: `${borderColor}`,
-							borderStyle: `${borderStyle}`,
-						}}
-						className={style.br__output_img}
-					/>
-					<Card
-						className={style.br__output_text}
-						style={{
-							borderRadius: `${borderRadiusTopLeft}px ${borderRadiusTopRight}px ${borderRadiusBottomRight}px ${borderRadiusBottomLeft}px`,
-							borderWidth: `${borderWidth}px`,
-							borderColor: `${borderColor}`,
-							borderStyle: `${borderStyle}`,
+							width: 400,
+							height: 300,
+							backgroundColor: shadowColor,
+							transform: `translate(${horizontalLength}px, ${verticalLength}px)`,
 						}}
 					>
-						{PARAGRAPHS}
-					</Card>
+						<div
+							style={{
+								width: 400,
+								height: 300,
+								backgroundColor: boxColor,
+								position: "absolute",
+							}}
+						></div>
+					</div>
+					<br />
 					<CodeHighlightWithCopy
 						codeString={generateCSSCodeString()}
 						language="css"