diff --git a/src/assets/icons/cell-icon.svg b/src/assets/icons/cell-icon.svg
new file mode 100644
index 0000000..5d973e9
--- /dev/null
+++ b/src/assets/icons/cell-icon.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title>file_type_excel2</title><path d="M28.781,4.405H18.651V2.018L2,4.588V27.115l16.651,2.868V26.445H28.781A1.162,1.162,0,0,0,30,25.349V5.5A1.162,1.162,0,0,0,28.781,4.405Zm.16,21.126H18.617L18.6,23.642h2.487v-2.2H18.581l-.012-1.3h2.518v-2.2H18.55l-.012-1.3h2.549v-2.2H18.53v-1.3h2.557v-2.2H18.53v-1.3h2.557v-2.2H18.53v-2H28.941Z" style="fill:#20744a;fill-rule:evenodd"/><rect x="22.487" y="7.439" width="4.323" height="2.2" style="fill:#20744a"/><rect x="22.487" y="10.94" width="4.323" height="2.2" style="fill:#20744a"/><rect x="22.487" y="14.441" width="4.323" height="2.2" style="fill:#20744a"/><rect x="22.487" y="17.942" width="4.323" height="2.2" style="fill:#20744a"/><rect x="22.487" y="21.443" width="4.323" height="2.2" style="fill:#20744a"/><polygon points="6.347 10.673 8.493 10.55 9.842 14.259 11.436 10.397 13.582 10.274 10.976 15.54 13.582 20.819 11.313 20.666 9.781 16.642 8.248 20.513 6.163 20.329 8.585 15.666 6.347 10.673" style="fill:#ffffff;fill-rule:evenodd"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/file-icon.svg b/src/assets/icons/file-icon.svg
new file mode 100644
index 0000000..6780166
--- /dev/null
+++ b/src/assets/icons/file-icon.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<g>
+	<g>
+		<polygon fill="#F9EBB2" points="46,3.414 46,14 56.586,14 		"/>
+		<path fill="#F9EBB2" d="M45,16c-0.553,0-1-0.447-1-1V2H8C6.896,2,6,2.896,6,4v56c0,1.104,0.896,2,2,2h48c1.104,0,2-0.896,2-2V16
+			H45z"/>
+	</g>
+	<path fill="#394240" d="M14,26c0,0.553,0.447,1,1,1h34c0.553,0,1-0.447,1-1s-0.447-1-1-1H15C14.447,25,14,25.447,14,26z"/>
+	<path fill="#394240" d="M49,37H15c-0.553,0-1,0.447-1,1s0.447,1,1,1h34c0.553,0,1-0.447,1-1S49.553,37,49,37z"/>
+	<path fill="#394240" d="M49,43H15c-0.553,0-1,0.447-1,1s0.447,1,1,1h34c0.553,0,1-0.447,1-1S49.553,43,49,43z"/>
+	<path fill="#394240" d="M49,49H15c-0.553,0-1,0.447-1,1s0.447,1,1,1h34c0.553,0,1-0.447,1-1S49.553,49,49,49z"/>
+	<path fill="#394240" d="M49,31H15c-0.553,0-1,0.447-1,1s0.447,1,1,1h34c0.553,0,1-0.447,1-1S49.553,31,49,31z"/>
+	<path fill="#394240" d="M15,20h16c0.553,0,1-0.447,1-1s-0.447-1-1-1H15c-0.553,0-1,0.447-1,1S14.447,20,15,20z"/>
+	<path fill="#394240" d="M59.706,14.292L45.708,0.294C45.527,0.112,45.277,0,45,0H8C5.789,0,4,1.789,4,4v56c0,2.211,1.789,4,4,4h48
+		c2.211,0,4-1.789,4-4V15C60,14.723,59.888,14.473,59.706,14.292z M46,3.414L56.586,14H46V3.414z M58,60c0,1.104-0.896,2-2,2H8
+		c-1.104,0-2-0.896-2-2V4c0-1.104,0.896-2,2-2h36v13c0,0.553,0.447,1,1,1h13V60z"/>
+	<polygon opacity="0.15" fill="#231F20" points="46,3.414 56.586,14 46,14 	"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/folder-icon.svg b/src/assets/icons/folder-icon.svg
new file mode 100644
index 0000000..12dc47d
--- /dev/null
+++ b/src/assets/icons/folder-icon.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 1024 1024" class="icon"  version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M525.1 270.1c16.5 0 28.1-5.4 25.7-12-2.4-6.6-7.9-16.1-12.2-21.2-4.3-5-31.6-9.1-48.1-9.1h-224c-16.5 0-34.8 1.9-40.8 4.3-5.9 2.4-15.3 19.2-17.4 25.9-2 6.7 9.8 12.1 26.3 12.1h290.5zM618 863.3l266.9-266.9v-78.2L539.8 863.3zM869.9 300.1H154.1c-8.3 0-15 6.7-15 15v533.2c0 8.3 6.7 15 15 15h343.3l387.5-387.5V315.1c0-8.2-6.7-15-15-15zM256.7 463.2c-28.7 0-51.9-23.2-51.9-51.9s23.2-51.9 51.9-51.9 51.9 23.2 51.9 51.9-23.3 51.9-51.9 51.9zM859.3 863.3l25.6-25.6v-78.2L781.1 863.3zM738.6 863.3L884.9 717v-78.2L660.5 863.3z" fill="#FFBC00" /><path d="M869.9 270.1H587L574.8 236c-7.7-21.4-31.5-38.2-54.2-38.2h-284c-23 0-46.4 17.3-53.1 39.3l-10.1 33.1h-19.2c-24.8 0-45 20.2-45 45v533.2c0 24.8 20.2 45 45 45h715.9c24.8 0 45-20.2 45-45V315.1c-0.2-24.8-20.3-45-45.2-45z m-633.3-42.3h284c10.2 0 22.5 8.7 26 18.3l8.6 24.1H204.7l7.4-24.3c2.9-9.5 14.6-18.1 24.5-18.1z m648.3 609.9l-25.7 25.7H781l103.9-103.9v78.2z m0-120.7L738.6 863.3h-78.2l224.5-224.5V717z m0-120.6L618 863.3h-78.2l345.1-345.1v78.2z m0-120.6L497.4 863.3H154.1c-8.3 0-15-6.7-15-15V315.1c0-8.3 6.7-15 15-15H870c8.3 0 15 6.7 15 15v160.7z" fill="#46287C" /><path d="M256.7 411.3m-51.9 0a51.9 51.9 0 1 0 103.8 0 51.9 51.9 0 1 0-103.8 0Z" fill="#FFFFFF" /></svg>
\ No newline at end of file
diff --git a/src/assets/icons/pdf-icon.svg b/src/assets/icons/pdf-icon.svg
new file mode 100644
index 0000000..c7c3550
--- /dev/null
+++ b/src/assets/icons/pdf-icon.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" ?>
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
+
<defs>
+
<style>.cls-1{fill:#ff402f;}</style>
+
</defs>
+
<title/>
+
<g id="xxx-word">
+
<path class="cls-1" d="M325,105H250a5,5,0,0,1-5-5V25a5,5,0,0,1,10,0V95h70a5,5,0,0,1,0,10Z"/>
+
<path class="cls-1" d="M325,154.83a5,5,0,0,1-5-5V102.07L247.93,30H100A20,20,0,0,0,80,50v98.17a5,5,0,0,1-10,0V50a30,30,0,0,1,30-30H250a5,5,0,0,1,3.54,1.46l75,75A5,5,0,0,1,330,100v49.83A5,5,0,0,1,325,154.83Z"/>
+
<path class="cls-1" d="M300,380H100a30,30,0,0,1-30-30V275a5,5,0,0,1,10,0v75a20,20,0,0,0,20,20H300a20,20,0,0,0,20-20V275a5,5,0,0,1,10,0v75A30,30,0,0,1,300,380Z"/>
+
<path class="cls-1" d="M275,280H125a5,5,0,0,1,0-10H275a5,5,0,0,1,0,10Z"/>
+
<path class="cls-1" d="M200,330H125a5,5,0,0,1,0-10h75a5,5,0,0,1,0,10Z"/>
+
<path class="cls-1" d="M325,280H75a30,30,0,0,1-30-30V173.17a30,30,0,0,1,30-30h.2l250,1.66a30.09,30.09,0,0,1,29.81,30V250A30,30,0,0,1,325,280ZM75,153.17a20,20,0,0,0-20,20V250a20,20,0,0,0,20,20H325a20,20,0,0,0,20-20V174.83a20.06,20.06,0,0,0-19.88-20l-250-1.66Z"/>
+
<path class="cls-1" d="M145,236h-9.61V182.68h21.84q9.34,0,13.85,4.71a16.37,16.37,0,0,1-.37,22.95,17.49,17.49,0,0,1-12.38,4.53H145Zm0-29.37h11.37q4.45,0,6.8-2.19a7.58,7.58,0,0,0,2.34-5.82,8,8,0,0,0-2.17-5.62q-2.17-2.34-7.83-2.34H145Z"/>
+
<path class="cls-1" d="M183,236V182.68H202.7q10.9,0,17.5,7.71t6.6,19q0,11.33-6.8,18.95T200.55,236Zm9.88-7.85h8a14.36,14.36,0,0,0,10.94-4.84q4.49-4.84,4.49-14.41a21.91,21.91,0,0,0-3.93-13.22,12.22,12.22,0,0,0-10.37-5.41h-9.14Z"/>
+
<path class="cls-1" d="M245.59,236H235.7V182.68h33.71v8.24H245.59v14.57h18.75v8H245.59Z"/>
+
</g>
+
</svg>
\ No newline at end of file
diff --git a/src/assets/icons/slide-icon.svg b/src/assets/icons/slide-icon.svg
new file mode 100644
index 0000000..b9f1fb6
--- /dev/null
+++ b/src/assets/icons/slide-icon.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" ?>
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
+
<defs>
+
<style>.cls-1{fill:#fd7a00;}</style>
+
</defs>
+
<title/>
+
<g id="xxx-word">
+
<path class="cls-1" d="M325,105H250a5,5,0,0,1-5-5V25a5,5,0,1,1,10,0V95h70a5,5,0,0,1,0,10Z"/>
+
<path class="cls-1" d="M325,154.83a5,5,0,0,1-5-5V102.07L247.93,30H100A20,20,0,0,0,80,50v98.17a5,5,0,0,1-10,0V50a30,30,0,0,1,30-30H250a5,5,0,0,1,3.54,1.46l75,75A5,5,0,0,1,330,100v49.83A5,5,0,0,1,325,154.83Z"/>
+
<path class="cls-1" d="M300,380H100a30,30,0,0,1-30-30V275a5,5,0,0,1,10,0v75a20,20,0,0,0,20,20H300a20,20,0,0,0,20-20V275a5,5,0,0,1,10,0v75A30,30,0,0,1,300,380Z"/>
+
<path class="cls-1" d="M275,280H125a5,5,0,1,1,0-10H275a5,5,0,0,1,0,10Z"/>
+
<path class="cls-1" d="M200,330H125a5,5,0,1,1,0-10h75a5,5,0,0,1,0,10Z"/>
+
<path class="cls-1" d="M325,280H75a30,30,0,0,1-30-30V173.17a30,30,0,0,1,30-30h.2l250,1.66a30.09,30.09,0,0,1,29.81,30V250A30,30,0,0,1,325,280ZM75,153.17a20,20,0,0,0-20,20V250a20,20,0,0,0,20,20H325a20,20,0,0,0,20-20V174.83a20.06,20.06,0,0,0-19.88-20l-250-1.66Z"/>
+
<path class="cls-1" d="M157.07,236h-9.61V182.68H169.3q9.34,0,13.85,4.71a16.37,16.37,0,0,1-.37,22.95,17.49,17.49,0,0,1-12.38,4.53H157.07Zm0-29.37h11.37q4.45,0,6.8-2.19a7.58,7.58,0,0,0,2.34-5.82,8,8,0,0,0-2.17-5.62q-2.17-2.34-7.83-2.34H157.07Z"/>
+
<path class="cls-1" d="M203.95,249.32h-9.06V196.55h8.52v6.88q4.1-7.69,12.07-7.7a12.1,12.1,0,0,1,10.47,5.7q3.91,5.7,3.91,14.57a27.84,27.84,0,0,1-3.73,14.61A12.15,12.15,0,0,1,215,236.82q-7.62,0-11.05-6.33Zm0-29.49A10.23,10.23,0,0,0,206.5,227a7.55,7.55,0,0,0,5.68,2.83,6.57,6.57,0,0,0,6.23-3.73,20.16,20.16,0,0,0,2-9.47,20.91,20.91,0,0,0-2-9.79,6.37,6.37,0,0,0-5.94-3.77,7.5,7.5,0,0,0-6,3.09,12.51,12.51,0,0,0-2.48,8.09Z"/>
+
<path class="cls-1" d="M256.25,229v7a31.56,31.56,0,0,1-6.17.86,12.57,12.57,0,0,1-6.17-1.43,8.72,8.72,0,0,1-3.77-3.91q-1.19-2.48-1.19-7.64V203.46H234v-6.91h5.43l.82-10.27,7.3-.66v10.94h7.93v6.91h-7.93v19.26q0,3.71,1.35,5.06t5.1,1.35Q255.08,229.13,256.25,229Z"/>
+
</g>
+
</svg>
\ No newline at end of file
diff --git a/src/assets/icons/word-icon.svg b/src/assets/icons/word-icon.svg
new file mode 100644
index 0000000..b128e9f
--- /dev/null
+++ b/src/assets/icons/word-icon.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" ?>
+
<!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 512 512" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
<g id="file__x2C__doc__x2C__word__x2C__document__x2C_">
+
<g id="Layer_116">
+
<g>
+
<g>
+
<polygon points="107.071,25.467 349.079,25.467 420.601,97.709       420.601,447.742 107.071,447.742     " style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;"/>
+
<path d="M420.601,454.602H107.071c-3.79,0-6.859-3.068-6.859-6.859V25.467c0-3.79,3.069-6.86,6.859-6.86      h242.008c1.831,0,3.583,0.729,4.877,2.033l71.522,72.242c1.271,1.285,1.986,3.02,1.986,4.827v350.033      C427.465,451.533,424.391,454.602,420.601,454.602z M113.932,440.883h299.813V100.531L346.22,32.327H113.932V440.883z" style="fill:#4C8CF9;"/>
+
</g>
+
<g>
+
<rect height="105.6" style="fill-rule:evenodd;clip-rule:evenodd;fill:#4C8CF9;" width="313.532" x="129.98" y="177.615"/>
+
</g>
+
<g>
+
<path d="M213.358,258.326h-11.056v-9.818h11.056V258.326z M224.679,258.326v-55.961h19.047      c6.793,0,12.387,2.157,16.782,6.594c4.394,4.304,6.523,9.953,6.523,16.817v9.278c0,6.864-2.13,12.513-6.523,16.821      c-4.396,4.305-9.989,6.451-16.782,6.451H224.679z M235.868,211.111v38.608h7.326c3.994,0,7.057-1.345,9.322-4.038      c2.264-2.689,3.464-6.318,3.464-10.627v-9.416c0-4.304-1.2-7.8-3.464-10.489c-2.265-2.689-5.328-4.038-9.322-4.038H235.868z       M320.441,235.458c0,6.864-2.262,12.513-6.524,16.95c-4.263,4.579-9.856,6.727-16.785,6.727c-6.791,0-12.385-2.148-16.647-6.727      c-4.258-4.437-6.392-10.085-6.392-16.95v-10.086c0-6.864,2.134-12.508,6.392-17.087c4.263-4.438,9.856-6.727,16.647-6.727      c6.796,0,12.522,2.29,16.785,6.727c4.263,4.579,6.524,10.223,6.524,17.087V235.458z M309.255,225.234      c0-4.437-1.064-7.938-3.193-10.76c-2.134-2.822-5.194-4.171-8.93-4.171c-3.859,0-6.791,1.349-8.787,4.171      c-2.134,2.822-3.198,6.323-3.198,10.76v10.224c0,4.441,1.064,8.076,3.198,10.902c2.134,2.689,5.062,4.167,8.787,4.167      c3.863,0,6.796-1.478,8.93-4.167c2.129-2.827,3.193-6.461,3.193-10.902V225.234z M370.925,239.229l0.129,0.266      c0,6.057-1.73,10.765-5.461,14.395c-3.863,3.5-9.058,5.245-15.711,5.245c-6.663,0-11.99-2.148-16.253-6.452      c-4.13-4.309-6.259-9.957-6.259-16.684v-11.169c0-6.727,2.129-12.371,6.126-16.679c4.13-4.304,9.324-6.594,15.849-6.594      c6.925,0,12.256,1.753,16.12,5.387c3.858,3.496,5.727,8.337,5.589,14.527v0.266h-10.921c0-3.762-0.799-6.589-2.528-8.475      c-1.868-2.015-4.529-2.96-8.26-2.96c-3.326,0-5.992,1.349-7.86,4.038c-1.996,2.689-2.927,6.186-2.927,10.489v11.031      c0,4.304,0.931,7.805,3.064,10.627c1.996,2.693,4.791,4.038,8.26,4.038c3.46,0,6.121-0.941,7.723-2.827      c1.729-1.881,2.528-4.708,2.528-8.471H370.925z" style="fill:#FEFEFE;"/>
+
</g>
+
<g>
+
<path d="M263.498,146.357c-14.012,0-26.189-5.08-32.584-13.591c-2.275-3.028-1.666-7.328,1.365-9.604      c3.028-2.285,7.328-1.666,9.606,1.363c3.76,5.006,12.038,8.113,21.612,8.113c0.004,0,0.009,0,0.018,0      c9.691-0.005,18.639-3.263,22.269-8.108c2.276-3.033,6.575-3.644,9.604-1.372c3.032,2.271,3.647,6.571,1.376,9.604      c-6.286,8.379-19.02,13.591-33.239,13.596C263.516,146.357,263.507,146.357,263.498,146.357z" style="fill:#4C8CF9;"/>
+
</g>
+
<g>
+
<path d="M143.968,233.173c-0.025,0-0.051,0-0.078,0c-41.685-0.455-66.41-11.325-73.49-32.308      c-9.211-27.307,17.035-62.661,32.457-74.669c2.992-2.322,7.303-1.785,9.627,1.198c2.329,2.991,1.792,7.3-1.198,9.631      c-13.25,10.315-34.504,39.829-27.885,59.454c6.245,18.51,36.424,22.709,60.64,22.975c3.788,0.041,6.826,3.147,6.784,6.933      C150.784,230.149,147.722,233.173,143.968,233.173z" style="fill:#4C8CF9;"/>
+
</g>
+
<g>
+
<polygon points="349.079,97.709 420.601,97.709 349.079,25.467           " style="fill-rule:evenodd;clip-rule:evenodd;fill:#D4E4FF;"/>
+
<path d="M420.601,104.569h-71.521c-3.79,0-6.86-3.07-6.86-6.86V25.467c0-2.781,1.68-5.286,4.249-6.346      c2.579-1.056,5.534-0.455,7.488,1.519l71.522,72.242c1.95,1.969,2.519,4.914,1.454,7.47      C425.868,102.908,423.372,104.569,420.601,104.569z M355.938,90.85h48.217l-48.217-48.703V90.85z" style="fill:#4C8CF9;"/>
+
</g>
+
<g>
+
<path d="M239.339,493.393c-0.376,0-0.757-0.027-1.143-0.092l-22.509-3.766      c-3.306-0.557-5.727-3.414-5.727-6.77v-35.023c0-3.789,3.069-6.859,6.859-6.859c3.791,0,6.86,3.07,6.86,6.859v29.215      l16.782,2.809c3.738,0.629,6.259,4.162,5.633,7.9C245.536,491.021,242.629,493.393,239.339,493.393z" style="fill:#4C8CF9;"/>
+
</g>
+
<g>
+
<path d="M325.25,493.393c-0.376,0-0.762-0.027-1.146-0.092l-22.507-3.766      c-3.309-0.557-5.727-3.414-5.727-6.77v-35.023c0-3.789,3.069-6.859,6.859-6.859s6.86,3.07,6.86,6.859v29.215l16.78,2.809      c3.739,0.629,6.259,4.162,5.635,7.9C331.445,491.021,328.536,493.393,325.25,493.393z" style="fill:#4C8CF9;"/>
+
</g>
+
<g>
+
<path d="M290.873,65.149c6.259-1.744,13.188,0.945,16.519,6.865      c4.13,7.13,1.73,16.143-5.332,20.18c-7.057,4.167-15.978,1.744-19.979-5.382c-3.193-5.52-2.396-12.375,1.469-16.95      c1.331,1.748,3.726,2.285,5.727,1.207C291.276,69.862,292.075,67.168,290.873,65.149L290.873,65.149z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#4C8CF9;"/>
+
</g>
+
<g>
+
<path d="M228.808,65.149c6.259-1.744,13.185,0.945,16.65,6.865      c3.994,7.13,1.597,16.143-5.463,20.18c-6.924,4.167-15.982,1.744-19.979-5.382c-3.196-5.52-2.397-12.375,1.466-16.95      c1.331,1.748,3.861,2.285,5.727,1.207C229.34,69.862,230.006,67.168,228.808,65.149L228.808,65.149z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#4C8CF9;"/>
+
</g>
+
<g>
+
<path d="M373.72,326.398H164.61c-3.791,0-6.86-3.07-6.86-6.859c0-3.791,3.069-6.861,6.86-6.861h209.11      c3.79,0,6.859,3.07,6.859,6.861C380.579,323.328,377.51,326.398,373.72,326.398z" style="fill:#4C8CF9;"/>
+
</g>
+
<g>
+
<path d="M373.72,361.914H164.61c-3.791,0-6.86-3.07-6.86-6.859c0-3.791,3.069-6.861,6.86-6.861h209.11      c3.79,0,6.859,3.07,6.859,6.861C380.579,358.844,377.51,361.914,373.72,361.914z" style="fill:#4C8CF9;"/>
+
</g>
+
<g>
+
<path d="M300.463,397.563H164.61c-3.791,0-6.86-3.07-6.86-6.859c0-3.791,3.069-6.861,6.86-6.861h135.853      c3.79,0,6.864,3.07,6.864,6.861C307.327,394.492,304.253,397.563,300.463,397.563z" style="fill:#4C8CF9;"/>
+
</g>
+
</g>
+
</g>
+
</g>
+
<g id="Layer_1"/>
+
</svg>
\ No newline at end of file
diff --git a/src/views/doc/manage.vue b/src/views/doc/manage.vue
index e703cfe..c4dc0a5 100644
--- a/src/views/doc/manage.vue
+++ b/src/views/doc/manage.vue
@@ -4,7 +4,7 @@
 @ 备注: 文档管理组件
 -->
 <script lang="ts" setup>
-import { getExpirTime, getFileIcon, readableSize} from "./tools"
+import { getExpirTime, getFileIcon, readableSize,fileType} from "./tools"
 import sharePermission from './sharePermission.vue';
 import { useUserStore } from "@/store/modules/user";
 import { getMatterList,postCreateDir,postDelMatter,postCreateShare,postMatterRename,postDelMatBatch,getMySpaces,doCreateSpace} from "@/api/doc/index"
@@ -20,11 +20,14 @@ import {
   Promotion,
   Folder,
   Avatar,
-  Plus
+  Plus,
+  Grid,
+  List,
 } from '@element-plus/icons-vue'
 import {ElSelect,ElOption, ElText,ElInput,TableInstance,ElMessage,UploadFile,UploadFiles,ElPagination,ElTree,TreeNode} from "element-plus";
 import preview from './preview.vue';
 import space from './space.vue';
+import SvgIcon from "@/components/SvgIcon/index.vue";
 
 //TODO: add file icons  done!
 //TODO: click on table-item， 1）preview on file .....................
@@ -69,6 +72,8 @@ const spaceTreeData=ref<matterTree[]>([])//{name:'个人空间',uuid:'root',chil
 const spaceTreeRef = ref(); //space的树树组件的引用
 let spaceNodeUid="" //用来判断树组件的展开和关闭，如何只是展开和关闭的点击事件不在刷新，通currentNode的作用
 
+const modListOrGrild=ref(true)
+
 const Departs = computed(() => {
     return `${userStore.userInfoCont.company},${userStore.userInfoCont.department},${userStore.userInfoCont.organization}`
 })
@@ -229,6 +234,14 @@ function onDownload(row:matterInfo){
   })
 }
 
+function getImagePreivewURL(_uuid:string,_name:string){
+  return `${apiURL}/alien/preview/${_uuid}/${_name}?ir=fill_100_100`
+}
+
+function getImageDownloadURL(_uuid:string,_name:string){
+  return `${apiURL}/alien/preview/${_uuid}/${_name}`
+}
+
 function onMatterRename(row:matterInfo){
   const newname=ref(row.name)
   ElMessageBox({
@@ -292,15 +305,18 @@ function onLoadMatterList(){
 }
 //----------for dir-----------
 function createDir(){
-    matterList.value?.unshift({
-      name:"",
-      userUuid:uid,
-      puuid:"",
-      uuid:"",
-      dir:true,
-      size:0,
-      deleted:false,
-    })
+  if(matterList.value){
+    if (matterList.value[0].name=="") return;
+  }
+  matterList.value?.unshift({
+    name:"",
+    userUuid:uid,
+    puuid:"",
+    uuid:"",
+    dir:true,
+    size:0,
+    deleted:false,
+  })
 }
 
 function onCreateDir(){
@@ -398,19 +414,38 @@ function onNodeClick(data:matterTree,node:TreeNode,self:any,env:any){
   })
 }
 
+function updateListOrGrid(val:boolean){
+  modListOrGrild.value=val
+  if(val){
+    localStorage.setItem("listOrGrid","true")
+  }else{
+    localStorage.setItem("listOrGrid","false")
+  }
+}
+
 //文件预览
 function onPrivateView(row:matterInfo){
   if(row.dir){
     alert("目录不支持预览")
     return
   }
-  let a = `${row.uuid}${row.name}`
+
   let _token=document.cookie.match(/hxpan=([\w-]*)/)
   if (_token&&_token.length>1){
     _token=_token[1]
   }
 
-  let _url=`${siteHost}${apiURL}/alien/download/${row.uuid}/${row.name}?access_token=${_token}&fullfilename=${a}`
+  const _type=fileType(row.name!)
+  if(_type!==""){ //office file
+    const info =btoa(encodeURIComponent(`${row.name}`)) //预览模式不需要绝对路径，只核对一下文件名即可
+    const _url=`${siteHost}${apiURL}/alien/download/${row.uuid}/${row.name}?access_token=${_token}`
+    //前半部分内容是为了校验信息，主要内容是fileurl
+    window.open(`/#/onlyoffice?name=${row.name}&dtype=${_type}&info=${info}&fileurl=`+encodeURIComponent(_url),"_blank")
+    return
+  }
+
+  const a = `${row.uuid}${row.name}`
+  const _url=`${siteHost}${apiURL}/alien/download/${row.uuid}/${row.name}?access_token=${_token}&fullfilename=${a}`
 
   dynamicVNode.value=h(preview,{
     url:`${officeHost}/kkpreview/onlinePreview?url=`+window.btoa(unescape(encodeURIComponent(_url))),
@@ -600,6 +635,12 @@ onMounted(() => {
       spaceTreeRef.value.append({name:item.name,uuid:item.uuid,dir:false,userUuid:item.userUuid})
     })
   })
+  let val =localStorage.getItem("listOrGrid") 
+  if(val&&val=="false"){
+    modListOrGrild.value=false
+  }else{
+    modListOrGrild.value=true
+  }
 });
 
 const handleSelectionChange = (val:matterInfo[]) => {
@@ -678,10 +719,14 @@ const handleSelectionChange = (val:matterInfo[]) => {
         <el-button type="danger" plain @click="onDelMatter({uuid:currentNode.uuid,name:currentNode.name,dir:true,
           puuid:currentNode.puuid,path:currentNode.path})">删除目录</el-button>
       </el-col>
+      <el-button-group style="margin:0 50px 0 auto;">
+        <el-button  :icon="List"  @click="updateListOrGrid(true)"></el-button>
+        <el-button  :icon="Grid"  @click="updateListOrGrid(false)"></el-button>
+      </el-button-group>
     </el-row>
 
-    <el-row :gutter="24" style="height: 84%;overflow-y: auto;">
-      <el-table
+    <el-row :gutter="24" style="overflow-y: auto;">
+      <el-table v-if="modListOrGrild"
         stripe
         :data="matterList"
         ref="multipleTableRef"
@@ -696,10 +741,10 @@ const handleSelectionChange = (val:matterInfo[]) => {
           <template #default="scope">
             <input type="text" autofocus placeholder="文件夹名" style="border:groove;height:30px;" v-model="newdir" @change="onCreateDir" v-if="scope.row.name===''"  />
             <div v-if="scope.row.name" style="display: flex; align-items: center;">
-              <el-icon :size="26">
-                <component v-if="scope.row.dir" :is="Folder" />
-                <component v-else :is="getFileIcon(scope.row.name)" />
-              </el-icon>
+              <svg-icon v-if="scope.row.dir" icon-class="folder-icon"  size="30px"/>
+              <el-image v-else-if="getFileIcon(scope.row.name)==='img'" style="width: 30px;" :preview-src-list="[getImageDownloadURL(scope.row.uuid,scope.row.name)]"  :src="getImagePreivewURL(scope.row.uuid,scope.row.name)" />
+              <svg-icon v-else :icon-class="getFileIcon(scope.row.name)+'-icon'" size="30px" />
+
               <span style="margin-left: 10px">{{ scope.row.name }}</span>
             </div>
           </template>
@@ -724,6 +769,24 @@ const handleSelectionChange = (val:matterInfo[]) => {
           </template>
         </el-table-column>
       </el-table>
+      <div class="table-grid" v-else>
+        <div class="grid-item" v-for="row in matterList">
+          <div class="grid">
+            <div class="grid-box"  @mouseover="handleMouseEnter(row)">
+              <svg-icon v-if="row.dir" icon-class="folder-icon" size="80px"/>
+              <el-image v-else-if="getFileIcon(row.name)==='img'" style="width: 80px;" :preview-src-list="[getImageDownloadURL(row.uuid,row.name)]"  :src="getImagePreivewURL(row.uuid,row.name)" />
+              <svg-icon v-else :icon-class="getFileIcon(row.name)+'-icon'" size="80px"/>
+              <span style="margin: 5px 0;text-wrap-mode:nowrap;">{{ row.name }}</span>
+            </div>
+          </div>
+          <div class="grid-menus" v-show="currentHoverRow === row.name">
+            <el-button v-if="getFileIcon(row.name)!='img'" size="small" :icon="View" circle @click="onPrivateView(row)"></el-button>
+            <el-button size="small" :icon="Share" circle @click="onShareMatter(row)"></el-button>
+            <el-button size="small" :icon="Download" circle @click="onDownload(row)"></el-button>
+            <el-button size="small" :icon="Delete" circle @click="onDelMatter(row)"></el-button>
+          </div>
+        </div>
+      </div>
     </el-row>
 
     <el-row v-if="paginInfo.total>1" style="justify-content: center;">
@@ -731,7 +794,7 @@ const handleSelectionChange = (val:matterInfo[]) => {
     </el-row>
   </div>
   <div v-else class="app_container">
-    <space ref="spaceEleRef" :uid="uid" :tree="spaceTreeRef" 
+    <space ref="spaceEleRef" :uid="uid" :tree="spaceTreeRef" :listOrGrid="modListOrGrild"
       :spaceid="SpaceID.uuid" :roles="Departs" :spacename="SpaceID.name" :owner="SpaceID.userUuid"
       :officeHost="officeHost" :site-host="siteHost" :api-u-r-l="apiURL"
       :flushSpaceTree="flushSpaceTree"></space> 
@@ -795,4 +858,32 @@ const handleSelectionChange = (val:matterInfo[]) => {
   bottom: auto;
 }
 
+.table-grid{
+  display: flex;
+  flex-wrap: wrap; /* 关键属性，允许子元素自动换行 */
+  .grid-item{
+    height: 134px;
+    width: 134px;
+    margin: 5px;
+    .grid-box{
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      align-items: center;
+      text-align:center;
+    }
+    .grid{
+      :hover {
+        background-color: #c4c4c4; /* 悬停时的背景色 */
+      }
+    }
+  }
+}
+
+
+</style>
+<style>
+:root{
+  --el-index-normal:auto;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/doc/space.vue b/src/views/doc/space.vue
index 7492d42..de41b8b 100644
--- a/src/views/doc/space.vue
+++ b/src/views/doc/space.vue
@@ -21,6 +21,7 @@ import {
 import {ElMessage,UploadFile,UploadFiles,ElPagination} from "element-plus";
 import aiagent from './agent.vue';
 import router from "@/router";
+import SvgIcon from "@/components/SvgIcon/index.vue";
 
 const matterList = ref<matterInfo[]>([])
 const newdir=ref("") //创建新目录时的目录名
@@ -50,6 +51,7 @@ const props = withDefaults(defineProps<{
   owner:string,
   apiURL:string,
   roles:string,
+  listOrGrid:boolean,
 
   flushSpaceTree:(uuid:string,data:matterTree[])=>void
 }>(),{})
@@ -57,6 +59,7 @@ const props = withDefaults(defineProps<{
 //属性变更，特别是为了处理空间切换的状态更新
 watch(props,()=>{
   currentNode.value.uuid="root"
+  currentNode.value.name="根目录"
   onLoadMatterList()
 })
 
@@ -428,6 +431,14 @@ async function onlyOfficeEdit(row:matterInfo){
   })
 }
 
+function getSpaceImageViewURL(_uuid:string,_name:string){
+  return `${props.apiURL}/space/download/${_uuid}/${_name}?space=${props.spaceid}&ir=fill_100_100&`
+}
+
+function getSpaceImageDURL(_uuid:string,_name:string){
+  return `${props.apiURL}/space/download/${_uuid}/${_name}?space=${props.spaceid}`
+}
+
 //------------------------------------------------------
 
 //渲染完页面再执行
@@ -493,7 +504,7 @@ function isOwner(){
     </el-row>
 
     <el-row :gutter="24" style="height: 84%;overflow-y: auto;">
-      <el-table
+      <el-table v-if="listOrGrid"
         stripe
         :data="matterList"
         :header-cell-style="{ background: '#f5f8fd' }"
@@ -502,15 +513,14 @@ function isOwner(){
         :row-style ="() => ({ lineHeight: '36px' })"
         @selection-change="handleSelectionChange"
         @cell-mouse-enter="handleMouseEnter">
-        <el-table-column type="selection" width="50" />
+        <!-- <el-table-column type="selection" width="50" /> -->
         <el-table-column width="450" property="name" label="文件名">
           <template #default="scope">
             <input type="text" autofocus placeholder="文件夹名" style="border:groove;height:30px;" v-model="newdir" @change="onCreateDir" v-if="scope.row.name===''"  />
             <div v-if="scope.row.name" style="display: flex; align-items: center;">
-              <el-icon :size="26">
-                <component v-if="scope.row.dir" :is="Folder" />
-                <component v-else :is="getFileIcon(scope.row.name)" />
-              </el-icon>
+              <svg-icon v-if="scope.row.dir" icon-class="folder-icon"  :size="30"/>
+              <el-image v-else-if="getFileIcon(scope.row.name)==='img'" style="width: 30px;" :preview-src-list="[getSpaceImageDURL(scope.row.uuid,scope.row.name)]"  :src="getSpaceImageViewURL(scope.row.uuid,scope.row.name)" />
+              <svg-icon v-else :icon-class="getFileIcon(scope.row.name)+'-icon'" :size="30" />
               <span style="margin-left: 10px">{{ scope.row.name }}</span>
             </div>
           </template>
@@ -534,6 +544,25 @@ function isOwner(){
           </template>
         </el-table-column>
       </el-table>
+
+      <div class="table-grid" v-else>
+        <div class="grid-item" v-for="row in matterList">
+          <div class="grid">
+            <div class="grid-box"  @mouseover="handleMouseEnter(row)">
+              <svg-icon v-if="row.dir" icon-class="folder-icon" size="80px"/>
+              <el-image v-else-if="getFileIcon(row.name)==='img'" style="width: 80px;" :preview-src-list="[getSpaceImageDURL(row.uuid,row.name)]"  :src="getSpaceImageViewURL(row.uuid,row.name)" />
+              <svg-icon v-else :icon-class="getFileIcon(row.name)+'-icon'" size="80px"/>
+              <span style="margin: 5px 0;text-wrap-mode:nowrap;">{{ row.name }}</span>
+            </div>
+          </div>
+          <div class="grid-menus" v-show="currentHoverRow === row.name">
+            <el-button size="small" :icon="Edit" circle @click="onlyOfficeEdit(row)"></el-button>
+            <el-button v-if="getFileIcon(row.name)!='img'" size="small" :icon="View" circle @click="onPrivateView(row)"></el-button>
+            <el-button size="small" :icon="Download" circle @click="onDownload(row)"></el-button>
+            <el-button size="small" :icon="Delete" circle @click="onDelMatter(row)"></el-button>
+          </div>
+        </div>
+      </div>
     </el-row>
 
     <el-row v-if="paginInfo.total>1" style="justify-content: center;">
@@ -558,8 +587,36 @@ function isOwner(){
   }
 }
 
+.table-grid{
+  display: flex;
+  flex-wrap: wrap; /* 关键属性，允许子元素自动换行 */
+  .grid-item{
+    height: 134px;
+    width: 134px;
+    margin: 5px;
+    .grid-box{
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      align-items: center;
+      text-align:center;
+    }
+    .grid{
+      :hover {
+        background-color: #c4c4c4; /* 悬停时的背景色 */
+      }
+    }
+  }
+}
+
 .dynamic-width-message-box-byme .el-message-box__message{
   width: 100%;
 }
 
 </style>
+
+<style lang="scss">
+    .el-table--default .el-table__cell{
+      padding: 10px 0;
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/doc/tools.ts b/src/views/doc/tools.ts
index f4775cb..f80e6ed 100644
--- a/src/views/doc/tools.ts
+++ b/src/views/doc/tools.ts
@@ -47,37 +47,26 @@ export function checkExpirTime(val:matterInfo){
 }
 
 export const getFileIcon = (fileName:string) => {
-    const extension = fileName?.split('.').pop()?.toLowerCase();
-  
-    switch(extension) {
-      case 'pdf':
-      case 'doc':
-      case 'docx':
-      case 'xls':
-      case 'xlsx':
-        return Document;
-      case 'jpg':
-      case 'jpeg':
-      case 'png':
-      case 'gif':
-      case 'svg':
-        return Picture;
-      case 'mp4':
-      case 'mov':
-      case 'avi':
-        return VideoPlay;
-      case 'mp3':
-      case 'wav':
-        return Headset;
-      case 'zip':
-      case 'rar':
-      case '7z':
-        return Files;
-      default:
-        return Tickets;
-    }
+  const extension = fileName?.split('.').pop()?.toLowerCase()??'';
+  if (".doc, .docx, .html, .md, .txt, .wps, .xml".includes(extension)){
+    return "word"
+  } else if(".csv, .xls, .xlsb, .xlsm, .xlsx".includes(extension)){
+    return "cell"
+  }else if(".jpg, .jpeg, .png, .gif".includes(extension)){
+    return "img"
+  }else if (extension==="pdf"){
+    return "pdf"
+  }else if(".ppt, .pptm, .pptx".includes(extension)){
+    return "slide"
+  }else if(".mp4, .mov, avi".includes(extension)){
+    return "video"
+  }else if(".mp3, .wav".includes(extension)){
+    return "audio"
   }
 
+  return "file"
+}
+
 export function readableSize(val:matterInfo){
     if(val.size<1024) return "1 Kb"
     //1024*1024
@@ -100,7 +89,7 @@ export function fileType(name:string){
   } else if(".csv, .xls, .xlsb, .xlsm, .xlsx".includes(suffix[0])){
     return "cell"
   }else if(".ppt, .pptm, .pptx".includes(suffix[0])){
-    return "slide "
+    return "slide"
   }else if (suffix[0]===".pdf"){
     return "pdf"
   }