diff --git a/src/pages/CreateResourcePage/ui/CreateResourcePage.module.css b/src/pages/CreateResourcePage/ui/CreateResourcePage.module.css
index 220b188..8659069 100644
--- a/src/pages/CreateResourcePage/ui/CreateResourcePage.module.css
+++ b/src/pages/CreateResourcePage/ui/CreateResourcePage.module.css
@@ -1,114 +1,119 @@
-.container {
-    max-width: 500px;
-    margin: 30px auto;
-  }
-  
-  .title {
-    text-align: left;
-    margin-bottom: 20px;
-    color: #000000;
-    font-size: 20px;
-    font-weight: 400;
-  }
-  
-  .form {
-    display: flex;
-    flex-direction: column;
-    gap: 20px
-  }
-  
-  .label {
-    font-weight: bold;
-  }
-  
-  .input,
-  .textarea,
-  .fileButtons {
-    padding: 10px;
-    border: 1px solid #000000;
-    border-radius: 4px;
-    font-size: 20px;
-  }
-
-  .input {
-    min-height: 60px;
-  }
-
-  .input::placeholder,
-  .textarea::placeholder {
-    color: #000000;
-    font-size: 20px;
-    font-weight: 400;
-    line-height: 26px;
-    font-family: "Fira Mono", monospace;
-  }
-  
-  .textarea {
-    resize: vertical;
-  }
-  
-  .submitButton {
-    background-color: transparent;
-    color: #000000;
-    border: 1px solid #000000;
-    padding: 10px 16px;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 12px;
-    width: 35%;
-  }
-  
-  .hiddenInput {
-    display: none; 
-  }
-  
-  .fileButtons {
-    display: flex;
-    gap: 10px;
-    box-sizing: border-box;
-  }
-  
-  .iconButton {
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 5px;
-  }
-  
-  .iconButton svg {
-    width: 30px;
-    height: 30px;
-    fill: #ffffff;
-    transition: fill 0.3s;
-  }
-  
-  .fileInfo {
-    font-size: 14px;
-    color: #000000;
-  }
-  
-  .tagSelector {
-    display: flex;
-    justify-content: space-between;
-    gap: 8px;
-  }
-  
-  .tagButton {
-    background-color: transparent;
-    border-radius: 5px;
-    padding: 4px 8px;
-    font-size: 12px;
-    color: #000000;
-    cursor: pointer;
-    border: 1px solid #000000;
-    min-height: 32px;
-    min-width: 102px;
-    box-sizing: border-box;
-  }
-  
-  .activeTag {
-    background-color: #000000;
-    color: #ffffff;
-    border-color: #000000;
-  }
-  
\ No newline at end of file
+.select {
+  width: 100%;
+}
+
+.select :global(.select__control) {
+  background-color: transparent;
+  border: 1px solid rgb(100 116 139);
+  border-radius: 6px;
+  min-height: unset;
+  padding: 4px 0;
+  transition: border-color 150ms;
+  box-shadow: none;
+  cursor: pointer;
+}
+
+.select :global(.select__control--is-focused) {
+  border-color: rgb(148 163 184);
+  box-shadow: none;
+}
+
+.select :global(.select__control:hover) {
+  border-color: rgb(148, 163, 184);
+}
+
+.select :global(.select__value-container) {
+  padding: 0 12px;
+}
+
+.select :global(.select__placeholder) {
+  color: rgb(100 116 139);
+  font-size: 14px;
+}
+
+.select :global(.select__single-value) {
+  font-size: 14px;
+  color: #111827;
+}
+
+.select :global(.select__dropdown-indicator) {
+  padding-right: 12px;
+  cursor: pointer;
+}
+
+.select :global(.select__clear-indicator) {
+  cursor: pointer;
+}
+
+.select :global(.select__dropdown-indicator svg),
+.select :global(.select__clear-indicator svg) {
+  fill: rgb(100 116 139);
+  transition: fill 150ms ease;
+}
+
+.select :global(.select__dropdown-indicator:hover svg),
+.select :global(.select__clear-indicator:hover svg) {
+  fill: rgb(148, 163, 184);
+}
+
+.select :global(.select__indicator-separator) {
+  display: none;
+}
+
+.select :global(.select__menu) {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.select :global(.select__option) {
+  cursor: pointer !important;
+}
+
+.select :global(.select__option--is-focused) {
+  background-color: rgba(241, 233, 233, 0.9);
+}
+
+.select :global(.select__option--is-selected) {
+  background-color: rgba(223, 205, 205, 0.9);
+  color: #fff;
+}
+
+.select :global(.select__multi-value) {
+  background-color: #fef7f8;
+  border-radius: 100px;
+  padding: 5px 8px;
+}
+
+.select :global(.select__multi-value__label) {
+  font-size: 12px;
+}
+
+.select :global(.select__multi-value__remove:hover) {
+  background-color: transparent;
+}
+
+.select :global(.select__multi-value__remove svg) {
+  fill: rgb(100 116 139);
+}
+
+.select :global(.select__multi-value__remove:hover svg) {
+  fill: rgb(148, 163, 184);
+}
+
+.audienceContainer {
+  position: relative;
+  background: rgba(250, 103, 115, 0.15);
+  backdrop-filter: blur(30);
+  box-shadow: 0px 6px 10px 0px #fe444440;
+  overflow: hidden;
+}
+
+.audienceContainer::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: rgba(250, 103, 115, 0.2);
+  filter: blur(30px);
+  z-index: -1;
+  box-shadow: 0px 6px 10px 0px #fe444440;
+}
diff --git a/src/pages/CreateResourcePage/ui/CreateResourcePage.tsx b/src/pages/CreateResourcePage/ui/CreateResourcePage.tsx
index 80ce096..cd16b88 100644
--- a/src/pages/CreateResourcePage/ui/CreateResourcePage.tsx
+++ b/src/pages/CreateResourcePage/ui/CreateResourcePage.tsx
@@ -1,60 +1,137 @@
-import React, { useState } from "react";
+import { useEffect, useState } from "react";
 import styles from "./CreateResourcePage.module.css";
-import VideoIcon from "../../../shared/ui/icons/VideoIcon";
-import ImageIcon from "../../../shared/ui/icons/ImageIcon";
-import FileIcon from "../../../shared/ui/icons/FileIcon";
-import CrossIcon from "../../../shared/ui/icons/CrossIcon";
 import { useNavigate } from "react-router-dom";
 import { Resource } from "../../CommunityResourcesPage/ui/constants";
+import Select from "react-select";
+import CreatableSelect from "react-select/creatable";
+import { MultiValue } from "react-select";
+import { useUser } from "../../../shared/lib/customHooks/useUser";
+import axios from "axios";
+import ConfirmModal from "../../../shared/ui/ConfirmModal/ConfirmModal";
+import Navbar from "../../../shared/ui/Navbar/Navbar";
+import makeAnimated from "react-select/animated";
+import Footer from "../../../shared/ui/Footer/Footer";
+import Button, { ButtonsEnum } from "../../../shared/ui/Button/Button";
 
 interface CreateResourcePageProps {
   addResource?: (newResource: Resource) => void;
 }
 
+type Type = "post" | "video";
+type Audience = "public" | "member" | "mentor";
+
 export const CreateResourcePage: React.FC<CreateResourcePageProps> = ({
   addResource,
 }) => {
-  const [title, setTitle] = useState("");
-  const [description, setDescription] = useState("");
-  const [file, setFile] = useState<File | null>(null);
-  const [fullInfo, setFullInfo] = useState("");
-  const [selectedTag, setSelectedTag] = useState<string | null>(null);
-
-  const tags = ["Documents", "Video", "Links", "Posts"];
+  const userIdFromLocalStorage = localStorage.getItem("userId")
+    ? Number(localStorage.getItem("userId"))
+    : null;
+  const { user } = useUser(userIdFromLocalStorage);
+  const [selectedType, setSelectedType] = useState<Type>("post");
+  const [title, setTitle] = useState<string>("");
+  const [description, setDescription] = useState<string>("");
+  const [tags, setTags] = useState<
+    MultiValue<{ value: string; label: string }>
+  >([]);
+  const [selectedTags, setSelectedTags] = useState<
+    MultiValue<{ value: string; label: string }>
+  >([]);
+  const [audience, setAudience] = useState<Audience>("public");
+  const [isMentor, setIsMentor] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [isConfirmModalOpen, setIsConfirmModalOpen] = useState(false);
   const navigate = useNavigate();
+  const animatedComponent = makeAnimated();
+  const MAX_TAG_LENGTH = 50;
 
-  const handleTagClick = (tag: string) => {
-    setSelectedTag(tag);
-  };
+  const resourceTypeOptions = [
+    { value: "post", label: "Post" },
+    { value: "video", label: "YouTube video" },
+  ];
+
+  const audienceOptions: {
+    value: Audience;
+    label: string;
+    isMentorOnly?: boolean;
+  }[] = [
+    { value: "public", label: "Everyone" },
+    { value: "member", label: "Members only" },
+    { value: "mentor", label: "Mentors only", isMentorOnly: isMentor },
+  ];
 
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files && e.target.files[0]) {
-      setFile(e.target.files[0]);
+  useEffect(() => {
+    if (user) {
+      setIsMentor(
+        user?.roles?.filter(
+          (role: { role_id: number; role_name: string }) =>
+            role.role_name === "mentor",
+        ).length > 0,
+      );
     }
+  }, [user]);
+
+  useEffect(() => {
+    const fetchTags = async () => {
+      try {
+        const response = await axios.get(`${import.meta.env.VITE_DEVAPI}tags`, {
+          withCredentials: true,
+        });
+
+        const formattedTags = response?.data?.tags.map((tag: string) => ({
+          value: tag,
+          label: tag,
+        }));
+
+        setTags(formattedTags);
+      } catch (error) {
+        console.error("Error fetching tags:", error);
+      }
+    };
+
+    fetchTags();
+  }, []);
+
+  const handleTagChange = (
+    selectedOptions: MultiValue<{ value: string; label: string }>,
+  ) => {
+    setSelectedTags(selectedOptions || []);
+    setErrors((prev) => ({ ...prev, selectedTags: "" }));
   };
 
-  const handleFileClick = (accept: string) => {
-    const input = document.getElementById("file") as HTMLInputElement;
-    if (input) {
-      input.setAttribute("accept", accept);
-      input.click();
+  const validate = () => {
+    const validateErrors: Record<string, string> = {};
+
+    if (!title.trim()) {
+      validateErrors.title = "Title is required";
+    } else if (title.trim().length < 1 || title.trim().length > 100) {
+      validateErrors.title = "Title must be between 1 and 100 characters";
+    }
+    if (selectedType === "post" && !description.trim()) {
+      validateErrors.description = "Description is required for post";
     }
+    if (selectedTags.length === 0 || selectedTags.length >= 10)
+      validateErrors.selectedTags = "Please add from 1 to 10 tags";
+
+    setErrors(validateErrors);
+    return Object.keys(validateErrors).length === 0;
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handlePublishClick = (e: React.FormEvent) => {
     e.preventDefault();
-    if (!selectedTag) {
-      alert("Please select a tag for the resource.");
-      return;
-    }
 
+    if (!validate()) return;
+
+    setIsConfirmModalOpen(true);
+  };
+
+  const submitResource = () => {
     const newResource = {
       id: Date.now(),
+      selectedType,
       title,
       description,
-      file,
-      fullInfo,
-      tags: [selectedTag],
+      tags: selectedTags.map((tag) => tag.value),
+      audience,
     };
 
     if (addResource) {
@@ -62,108 +139,164 @@ export const CreateResourcePage: React.FC<CreateResourcePageProps> = ({
     }
 
     navigate("/community_resources");
-
     setTitle("");
+    setSelectedType("post");
     setDescription("");
-    setFile(null);
-    setFullInfo("");
-    setSelectedTag(null);
+    setSelectedTags([]);
+    setAudience("public");
+  };
+
+  const handleConfirmation = (confirmed: boolean) => {
+    setIsConfirmModalOpen(false);
+
+    if (confirmed) {
+      submitResource();
+    }
   };
 
   return (
-    <div className={styles.container}>
-      <h3 className={styles.title}>Create a New Resource</h3>
-      <form className={styles.form} onSubmit={handleSubmit}>
-        <input
-          type="text"
-          id="title"
-          placeholder="Title"
-          value={title}
-          onChange={(e) => setTitle(e.target.value)}
-          className={styles.input}
-          required
-        />
-        <input
-          id="description"
-          value={description}
-          placeholder="Description"
-          onChange={(e) => setDescription(e.target.value)}
-          className={styles.input}
-          required
-        />
-
-        <input
-          type="file"
-          id="file"
-          onChange={handleFileChange}
-          className={styles.hiddenInput}
-        />
-
-        <div className={styles.fileButtons}>
-          <button
-            type="button"
-            onClick={() => handleFileClick("video/*")}
-            className={styles.iconButton}
-          >
-            <VideoIcon />
-          </button>
-          <button
-            type="button"
-            onClick={() => handleFileClick("image/png, image/jpeg, image/jpg")}
-            className={styles.iconButton}
-          >
-            <ImageIcon />
-          </button>
-          <button
-            type="button"
-            onClick={() =>
-              handleFileClick(
-                "application/pdf, application/msword, .docx, .txt"
-              )
-            }
-            className={styles.iconButton}
-          >
-            <FileIcon />
-          </button>
-          <button
-            type="button"
-            onClick={() => handleFileClick("*/*")}
-            className={styles.iconButton}
+    <div className="max-w-7xl px-5 mx-auto sm:px-10">
+      <Navbar />
+      <div className="mt-10">
+        <h3 className="font-bold text-4xl">Add new resource</h3>
+        <form
+          className="mt-8 flex flex-col gap-6 md:flex-row justify-between"
+          onSubmit={handlePublishClick}
+        >
+          <div className="flex flex-col gap-6 px-6 py-8 rounded-3xl md:w-3/5 bg-white/40 shadow-[0_6px_10px_#ffa6ad66]">
+            <div className="flex w-full flex-col gap-2">
+              <label className="text-sm text-slate-600">Resource type*</label>
+              <Select
+                placeholder="Select"
+                options={resourceTypeOptions}
+                value={resourceTypeOptions.find(
+                  (opt) => opt.value === selectedType,
+                )}
+                onChange={(opt) => {
+                  if (opt) {
+                    setSelectedType(opt.value as Type);
+                  }
+                }}
+                className={styles.select}
+                classNamePrefix="select"
+              />
+              {errors.type && (
+                <p className="text-sm text-red-500">{errors.type}</p>
+              )}
+            </div>
+
+            <div className="flex w-full flex-col gap-2">
+              <span className="flex flex-row items-end justify-between">
+                <label className="text-sm text-slate-600">Title*</label>
+                <p className="text-xs text-slate-500">{title.length}/100</p>
+              </span>
+              <input
+                type="text"
+                placeholder="Add title"
+                value={title}
+                onChange={(e) => {
+                  setTitle(e.target.value);
+                  setErrors((prev) => ({ ...prev, title: "" }));
+                }}
+                className="w-full bg-transparent rounded-md border border-slate-500 p-3 text-sm outline-none transition placeholder:text-slate-500 focus:border-slate-400 hover:border-slate-400"
+                maxLength={100}
+              />
+              {errors.title && (
+                <p className="text-sm text-red-500">{errors.title}</p>
+              )}
+            </div>
+
+            <div className="flex w-full flex-col gap-2">
+              <label className="text-sm text-slate-600">Description*</label>
+              <textarea
+                placeholder="Add description"
+                value={description}
+                onChange={(e) => {
+                  setDescription(e.target.value);
+                  setErrors((prev) => ({ ...prev, description: "" }));
+                }}
+                rows={4}
+                className="w-full bg-transparent rounded-md border border-slate-500 p-3 text-sm outline-none transition placeholder:text-slate-500 focus:border-slate-400 hover:border-slate-400"
+              />
+              {errors.description && (
+                <p className="text-sm text-red-500">{errors.description}</p>
+              )}
+            </div>
+
+            <div className="flex w-full flex-col gap-2">
+              <span className="flex flex-row items-end justify-between">
+                <label className="text-sm text-slate-600">Add tags*</label>
+                <p className="text-xs text-slate-500">
+                  {selectedTags.length}/10
+                </p>
+              </span>
+              <CreatableSelect
+                isClearable
+                isMulti
+                placeholder="Select"
+                options={tags}
+                value={selectedTags}
+                onChange={handleTagChange}
+                getNewOptionData={(inputValue) => ({
+                  label: inputValue.trim().toLowerCase(),
+                  value: inputValue.trim().toLowerCase(),
+                })}
+                isOptionDisabled={() => selectedTags.length >= 10}
+                className={styles.select}
+                classNamePrefix="select"
+                components={animatedComponent}
+                menuShouldScrollIntoView={false}
+                isValidNewOption={(inputValue) =>
+                  inputValue.trim().length > 0 &&
+                  inputValue.trim().length <= MAX_TAG_LENGTH
+                }
+              />
+              {errors.selectedTags && (
+                <p className="text-sm text-red-500">{errors.selectedTags}</p>
+              )}
+            </div>
+          </div>
+
+          <div
+            className={`${styles.audienceContainer} flex flex-col mt-6 rounded-3xl py-8 px-6 h-fit md:mt-0 md:w-2/5`}
           >
-            <CrossIcon />
-          </button>
-        </div>
-
-        {file && <p className={styles.fileInfo}>Selected file: {file.name}</p>}
-
-        <div className={styles.tagSelector}>
-          {tags.map((tag) => (
-            <button
-              key={tag}
-              type="button"
-              onClick={() => handleTagClick(tag)}
-              className={`${styles.tagButton} ${
-                selectedTag === tag ? styles.activeTag : ""
-              }`}
-            >
-              {tag}
-            </button>
-          ))}
-        </div>
-
-        <textarea
-          id="fullInfo"
-          value={fullInfo}
-          placeholder="Write text..."
-          onChange={(e) => setFullInfo(e.target.value)}
-          className={styles.textarea}
-          rows={6}
-        />
-
-        <button type="submit" className={styles.submitButton}>
-          Published
-        </button>
-      </form>
+            <h3 className="text-xl font-semibold">This resource is for:</h3>
+            <div className="mt-5 mb-10 gap-4 flex flex-col">
+              {audienceOptions
+                .filter((opt) => opt.isMentorOnly !== false)
+                .map((opt) => (
+                  <label
+                    key={opt.value}
+                    className="flex items-center gap-3 cursor-pointer"
+                  >
+                    <input
+                      type="radio"
+                      name="audience"
+                      value={opt.value}
+                      checked={audience === opt.value}
+                      onChange={() => setAudience(opt.value)}
+                      className="relative h-5 w-5 appearance-none rounded-full bg-[#fef7f8] transition checked:bg-rose-400 before:absolute before:inset-1 before:rounded-full before:bg-[#fef7f8] before:opacity-0 checked:before:opacity-100 cursor-pointer"
+                    />
+                    {opt.label}
+                  </label>
+                ))}
+            </div>
+            <Button
+              btnType={ButtonsEnum.PRIMARY}
+              onClick={handlePublishClick}
+              label="Publish now"
+            />
+          </div>
+        </form>
+
+        {isConfirmModalOpen && (
+          <ConfirmModal
+            text="Are you sure you want to add new resource?"
+            getConfirmation={handleConfirmation}
+          />
+        )}
+      </div>
+      <Footer />
     </div>
   );
 };
diff --git a/src/shared/config/routeConfig/routeConfig.tsx b/src/shared/config/routeConfig/routeConfig.tsx
index 99164fa..46729cf 100644
--- a/src/shared/config/routeConfig/routeConfig.tsx
+++ b/src/shared/config/routeConfig/routeConfig.tsx
@@ -8,7 +8,7 @@ import { MentorsPage } from "../../../pages/MentorsPage";
 import { ApplicationsPage } from "../../../pages/ApplicationsPage";
 import { LoginPage } from "../../../pages/LoginPage";
 import { Pomodoro } from "../../../pages/Pomodoro";
-// import {CreateResourcePage} from "../../../pages/CreateResourcePage";
+import {CreateResourcePage} from "../../../pages/CreateResourcePage";
 // import {CommunityResources} from "../../../pages/CommunityResourcesPage";
 // import {AllProjectsPage} from "../../../pages/AllProjectsPage";
 // import {ProjectPage} from "../../../pages/ProjectPage";
@@ -32,7 +32,7 @@ export enum AppRoutes {
   NOT_FOUND = "not_found",
   POMODORO = "pomodoro",
   // COMMUNITY_RESOURCES = "community_resources",
-  // CREATE_RESOURCE = "CREATE_RESOURCE",
+  CREATE_RESOURCE = "CREATE_RESOURCE",
   APPLICATIONS = "applications",
   LOGIN = "login",
   CREATE_APPLICATION = "create_application",
@@ -55,7 +55,7 @@ export const RoutePath: Record<AppRoutes, string> = {
   [AppRoutes.NOT_FOUND]: "*",
   [AppRoutes.POMODORO]: "/pomodoro",
   // [AppRoutes.COMMUNITY_RESOURCES]: "/community_resources",
-  // [AppRoutes.CREATE_RESOURCE]: "/create_resource",
+  [AppRoutes.CREATE_RESOURCE]: "/create_resource",
   [AppRoutes.APPLICATIONS]: "/applications",
   [AppRoutes.LOGIN]: "/login",
   [AppRoutes.CREATE_APPLICATION]: "/create_application",
@@ -108,10 +108,10 @@ export const routeConfig: Record<AppRoutes, RouteProps> = {
   //   path: RoutePath.community_resources,
   //   element: <CommunityResources />,
   // },
-  // [AppRoutes.CREATE_RESOURCE]: {
-  //   path: RoutePath.CREATE_RESOURCE,
-  //   element: <CreateResourcePage />,
-  // },
+  [AppRoutes.CREATE_RESOURCE]: {
+    path: RoutePath.CREATE_RESOURCE,
+    element: <CreateResourcePage />,
+  },
   [AppRoutes.APPLICATIONS]: {
     path: RoutePath.applications,
     element: <ProtectedRoute element={<ApplicationsPage />} />,