diff --git a/.env b/.env
new file mode 100644
index 0000000..bbad2dd
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+ NEXT_PUBLIC_WEB_SOCKET=http://localhost:3001/
\ No newline at end of file
diff --git a/components/PropertiesBar/PropertiesBar.jsx b/components/PropertiesBar/PropertiesBar.jsx
index f4a5a58..115c681 100644
--- a/components/PropertiesBar/PropertiesBar.jsx
+++ b/components/PropertiesBar/PropertiesBar.jsx
@@ -16,6 +16,10 @@ import { setElement } from '../Redux/features/elementSlice'
 import { MdRoundedCorner } from "react-icons/md"
 import { GlobalProps } from '../Redux/GlobalProps'
 
+import { FaItalic } from "react-icons/fa";
+import { RiFontFamily } from "react-icons/ri";
+import { ImBold } from "react-icons/im";;
+
 
 const PropertiesBar = () => {
 
@@ -341,14 +345,15 @@ const PropertiesBar = () => {
                         <span className='text-xs'>Fill style</span>
                         <div className="flex flex-wrap max-w-[230px] gap-2 mt-1">
                             {fillStyles.map((style) => (
-                                <div key={style} className={`border border-1 cursor-pointer active:scale-105 inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10  ${fillStyle === style ? 'border-2 border-black ' : null}`}
+                                <div key={style} className={`border border-1 cursor-pointer active:scale-105 inline-flex items-center rounded-md bg-gray-50  text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10  ${fillStyle === style ? 'border-2 border-black ' : null}`}
                                 onClick={() => {
                                     setChangedByUser(true);
                                     setFillStyle(style);
-                                }}>
+                                }} title={style}>
                                 <p className="text-xs rounded-md ">
-                                    {style}
-                                </p>  
+                                    <img src={`/${style}.png`} className="w-[1.5rem] h-[1.5rem] rounded-md" alt="" />
+                                    
+                                    </p>  
                             </div>
                         ))}
                         </div>
@@ -360,17 +365,17 @@ const PropertiesBar = () => {
                     {(tool === 'text' && selectedElement === null) || (selectedElement != null && selectedElement.type === 'text') ? <CardContent>
                         <span className='text-xs'>Font style</span>
                         <div className='flex flex-row'>
-                           <Button onClick={() => {
+                           <Button  title="Normal"  onClick={() => {
                                 setChangedByUser(true);
                                 setFontStyle("normal");
                             }} variant={"ghost"} className={`rounded-md h-6 w-auto m-1 cursor-pointer active:scale-105 bg-indigo-100 ${fontStyle == "normal" ? "bg-[#d4d9d6]" : null} `}>
-                                <span className='text-sm font-normal'>Normal</span>
+                                <span className='text-sm font-normal'><RiFontFamily /></span>
                             </Button>
-                            <Button onClick={() => {
+                            <Button  title="Italic"  onClick={() => {
                                 setChangedByUser(true);
                                 setFontStyle("italic");
                             }} variant={"ghost"} className={`rounded-md h-6 w-auto m-1 cursor-pointer active:scale-105 bg-indigo-100 ${fontStyle == "italic" ? "bg-[#d4d9d6]" : null} `}>
-                                <span className='text-sm italic font-normal'>Italic</span>
+                                <span className='text-sm italic font-normal'><FaItalic/></span>
                             </Button>
                         </div>
 
@@ -386,17 +391,17 @@ const PropertiesBar = () => {
                             }} variant={"ghost"} className={`rounded-md h-6 w-auto m-1 cursor-pointer active:scale-105 bg-indigo-100 ${fontWeight === "normal" ? "bg-[#d4d9d6]" : null} `}>
                                 <span className='text-sm font-normal'>Normal</span>
                             </Button> */}
-                            <Button onClick={() => {
+                            <Button title="Lighter" onClick={() => {
                                 setChangedByUser(true);
                                 setFontWeight("lighter");
                             }} variant={"ghost"} className={`rounded-md h-6 w-auto m-1 cursor-pointer active:scale-105 bg-indigo-100 ${fontWeight === "lighter" ? "bg-[#d4d9d6]" : null} `}>
-                                <span className='text-sm font-thin'>Lighter</span>
+                                <span className='text-sm font-thin'>L</span>
                             </Button>
-                            <Button onClick={() => {
+                            <Button title="Bold" onClick={() => {
                                 setChangedByUser(true);
                                 setFontWeight("bold");
                             }} variant={"ghost"} className={`rounded-md h-6 w-auto m-1 cursor-pointer active:scale-105 bg-indigo-100 ${fontWeight === "bold" ? "bg-[#d4d9d6]" : null} `}>
-                                <span className='text-sm font-bold'>Bold</span>
+                                <span className='text-sm font-bold' ><ImBold /></span>
                             </Button>
                         </div>
 
diff --git a/package-lock.json b/package-lock.json
index 1233611..7abf322 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,7 @@
         "perfect-freehand": "^1.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-icons": "^5.0.1",
+        "react-icons": "^5.2.1",
         "react-redux": "^9.0.4",
         "redux": "^5.0.1",
         "roughjs": "^4.6.6",
@@ -8290,9 +8290,9 @@
       }
     },
     "node_modules/react-icons": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
-      "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
       "peerDependencies": {
         "react": "*"
       }
diff --git a/package.json b/package.json
index d5f08b1..9d69007 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "perfect-freehand": "^1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^5.0.1",
+    "react-icons": "^5.2.1",
     "react-redux": "^9.0.4",
     "redux": "^5.0.1",
     "roughjs": "^4.6.6",
diff --git a/public/cross-hatch.png b/public/cross-hatch.png
new file mode 100644
index 0000000..ba263aa
Binary files /dev/null and b/public/cross-hatch.png differ
diff --git a/public/dashed.png b/public/dashed.png
new file mode 100644
index 0000000..6c8c6f5
Binary files /dev/null and b/public/dashed.png differ
diff --git a/public/solid.png b/public/solid.png
new file mode 100644
index 0000000..008e6ff
Binary files /dev/null and b/public/solid.png differ
diff --git a/public/sunburst.png b/public/sunburst.png
new file mode 100644
index 0000000..1405f80
Binary files /dev/null and b/public/sunburst.png differ
diff --git a/public/zigzag-line.png b/public/zigzag-line.png
new file mode 100644
index 0000000..be3437d
Binary files /dev/null and b/public/zigzag-line.png differ
diff --git a/public/zigzag.png b/public/zigzag.png
new file mode 100644
index 0000000..ff1dee1
Binary files /dev/null and b/public/zigzag.png differ