diff --git a/package-lock.json b/package-lock.json
index 5253f9c8..06b8997b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,7 +35,7 @@
         "@solid-primitives/storage": "1.3.9",
         "@solid-primitives/upload": "0.0.110",
         "@solidjs/meta": "0.28.2",
-        "@thisbeyond/solid-select": "0.13.0",
+        "@thisbeyond/solid-select": "0.14.0",
         "@tiptap/core": "2.0.3",
         "@tiptap/extension-blockquote": "2.0.3",
         "@tiptap/extension-bold": "2.0.3",
@@ -5745,9 +5745,9 @@
       }
     },
     "node_modules/@thisbeyond/solid-select": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/@thisbeyond/solid-select/-/solid-select-0.13.0.tgz",
-      "integrity": "sha512-eION+Xf8TGLs1NZrvRo1NRKOl4plYMbY7UswHhh5bEUY8oMltjrBhUWF0hzaFViEc1zZpkCQyafaD89iofG6Tg==",
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@thisbeyond/solid-select/-/solid-select-0.14.0.tgz",
+      "integrity": "sha512-ecq4U3Vnc/nJbU84ARuPg2scNuYt994ljF5AmBlzuZW87x43mWiGJ5hEWufIJJMpDT6CcnCIx/xbrdDkaDEHQw==",
       "dev": true,
       "peerDependencies": {
         "solid-js": "^1.5"
@@ -24828,9 +24828,9 @@
       "requires": {}
     },
     "@thisbeyond/solid-select": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/@thisbeyond/solid-select/-/solid-select-0.13.0.tgz",
-      "integrity": "sha512-eION+Xf8TGLs1NZrvRo1NRKOl4plYMbY7UswHhh5bEUY8oMltjrBhUWF0hzaFViEc1zZpkCQyafaD89iofG6Tg==",
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@thisbeyond/solid-select/-/solid-select-0.14.0.tgz",
+      "integrity": "sha512-ecq4U3Vnc/nJbU84ARuPg2scNuYt994ljF5AmBlzuZW87x43mWiGJ5hEWufIJJMpDT6CcnCIx/xbrdDkaDEHQw==",
       "dev": true,
       "requires": {}
     },
diff --git a/package.json b/package.json
index 0bd48e79..a5cb701f 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "@solid-primitives/storage": "1.3.9",
     "@solid-primitives/upload": "0.0.110",
     "@solidjs/meta": "0.28.2",
-    "@thisbeyond/solid-select": "0.13.0",
+    "@thisbeyond/solid-select": "0.14.0",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
     "@tiptap/extension-bold": "2.0.3",
diff --git a/src/components/Editor/TopicSelect/TopicSelect.module.scss b/src/components/Editor/TopicSelect/TopicSelect.module.scss
new file mode 100644
index 00000000..a2a15c1b
--- /dev/null
+++ b/src/components/Editor/TopicSelect/TopicSelect.module.scss
@@ -0,0 +1,23 @@
+.selectedItem {
+  cursor: pointer;
+
+  &.mainTopic {
+    cursor: default;
+
+    &,
+    + :global(.solid-select-multi-value-remove) {
+      color: #ccc;
+    }
+
+    &:before {
+      background: #000;
+      content: '';
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      z-index: -1;
+    }
+  }
+}
diff --git a/src/components/Editor/TopicSelect/TopicSelect.tsx b/src/components/Editor/TopicSelect/TopicSelect.tsx
index 924a4e40..ebab3d12 100644
--- a/src/components/Editor/TopicSelect/TopicSelect.tsx
+++ b/src/components/Editor/TopicSelect/TopicSelect.tsx
@@ -3,32 +3,77 @@ import { createOptions, Select } from '@thisbeyond/solid-select'
 import { useLocalize } from '../../../context/localize'
 import '@thisbeyond/solid-select/style.css'
 import './TopicSelect.scss'
+import styles from './TopicSelect.module.scss'
+import { clsx } from 'clsx'
+import { createSignal } from 'solid-js'
+import { slugify } from '../../../utils/slugify'
+import { clone } from '../../../utils/clone'
 
 type TopicSelectProps = {
   topics: Topic[]
   selectedTopics: Topic[]
   onChange: (selectedTopics: Topic[]) => void
+  mainTopic?: Topic
+  onMainTopicChange: (mainTopic: Topic) => void
 }
 
 export const TopicSelect = (props: TopicSelectProps) => {
   const { t } = useLocalize()
 
+  const [isDisabled, setIsDisabled] = createSignal(false)
+
+  const createValue = (title): Topic => {
+    const minId = Math.min(...props.selectedTopics.map((topic) => topic.id))
+    const id = minId < 0 ? minId - 1 : -2
+    return { id, title, slug: slugify(title) }
+  }
+
   const selectProps = createOptions(props.topics, {
     key: 'title',
     disable: (topic) => {
-      // console.log({ selectedTopics: clone(props.selectedTopics) })
       return props.selectedTopics.some((selectedTopic) => selectedTopic.slug === topic.slug)
-    }
+    },
+    createable: createValue
   })
 
   const handleChange = (selectedTopics: Topic[]) => {
     props.onChange(selectedTopics)
   }
 
+  const handleSelectedItemClick = (topic: Topic) => {
+    setIsDisabled(true)
+    props.onMainTopicChange(topic)
+    setIsDisabled(false)
+  }
+
+  const format = (item, type) => {
+    if (type === 'option') {
+      return item.label
+    }
+
+    const isMainTopic = item.id === props.mainTopic.id
+
+    return (
+      <div
+        class={clsx(styles.selectedItem, {
+          [styles.mainTopic]: isMainTopic
+        })}
+        onClick={() => handleSelectedItemClick(item)}
+      >
+        {item.title}
+      </div>
+    )
+  }
+
+  const initialValue = clone(props.selectedTopics)
+
   return (
     <Select
       multiple={true}
+      disabled={isDisabled()}
+      initialValue={initialValue}
       {...selectProps}
+      format={format}
       placeholder={t('Topics')}
       class="TopicSelect"
       onChange={handleChange}
diff --git a/src/components/Views/Edit.module.scss b/src/components/Views/Edit.module.scss
index 9432bee2..5b5a5f5e 100644
--- a/src/components/Views/Edit.module.scss
+++ b/src/components/Views/Edit.module.scss
@@ -222,3 +222,7 @@
     color: #f00;
   }
 }
+
+.topicSelectContainer {
+  height: 64px;
+}
diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx
index 813eeca7..c3edfd24 100644
--- a/src/components/Views/Edit.tsx
+++ b/src/components/Views/Edit.tsx
@@ -26,6 +26,11 @@ const scrollTop = () => {
   })
 }
 
+const EMPTY_TOPIC: Topic = {
+  id: -1,
+  slug: ''
+}
+
 export const EditView = (props: EditViewProps) => {
   const { t } = useLocalize()
   const { user } = useSession()
@@ -39,13 +44,15 @@ export const EditView = (props: EditViewProps) => {
     actions: { setForm, setFormErrors }
   } = useEditorContext()
 
+  const shoutTopics = props.shout.topics || []
+
   setForm({
     shoutId: props.shout.id,
     slug: props.shout.slug,
     title: props.shout.title,
     subtitle: props.shout.subtitle,
-    selectedTopics: props.shout.topics || [],
-    mainTopic: props.shout.mainTopic,
+    selectedTopics: shoutTopics,
+    mainTopic: shoutTopics.find((topic) => topic.slug === props.shout.mainTopic) || EMPTY_TOPIC,
     body: props.shout.body,
     coverImageUrl: props.shout.cover
   })
@@ -90,6 +97,24 @@ export const EditView = (props: EditViewProps) => {
     setCoverImage(null)
   }
 
+  const handleTopicSelectChange = (newSelectedTopics) => {
+    console.log({ newSelectedTopics })
+    if (newSelectedTopics.length === 0) {
+      setForm('mainTopic', EMPTY_TOPIC)
+    } else if (
+      form.selectedTopics.length === 0 ||
+      newSelectedTopics.every((topic) => topic.id !== form.mainTopic.id)
+    ) {
+      setForm('mainTopic', newSelectedTopics[0])
+    }
+
+    if (newSelectedTopics.length > 0) {
+      setFormErrors('selectedTopics', '')
+    }
+
+    setForm('selectedTopics', newSelectedTopics)
+  }
+
   return (
     <>
       <button
@@ -188,15 +213,21 @@ export const EditView = (props: EditViewProps) => {
                   {/*  его на&nbsp;страницах интересных ему тем. Темы можно менять местами, первая тема*/}
                   {/*  становится заглавной*/}
                   {/*</p>*/}
-                  <div class="pretty-form__item">
-                    <Show when={topics()}>
-                      <TopicSelect
-                        topics={topics()}
-                        onChange={(newSelectedTopics) => setForm('selectedTopics', newSelectedTopics)}
-                        selectedTopics={form.selectedTopics}
-                      />
+                  <div class={styles.inputContainer}>
+                    <div class={clsx('pretty-form__item', styles.topicSelectContainer)}>
+                      <Show when={topics()}>
+                        <TopicSelect
+                          topics={topics()}
+                          onChange={handleTopicSelectChange}
+                          selectedTopics={form.selectedTopics}
+                          onMainTopicChange={(mainTopic) => setForm('mainTopic', mainTopic)}
+                          mainTopic={form.mainTopic}
+                        />
+                      </Show>
+                    </div>
+                    <Show when={formErrors.selectedTopics}>
+                      <div class={styles.validationError}>{formErrors.selectedTopics}</div>
                     </Show>
-                    {/*<input type="text" name="topics" id="topics" placeholder="Темы" class="nolabel" />*/}
                   </div>
 
                   {/*<h4>Соавторы</h4>*/}
diff --git a/src/context/editor.tsx b/src/context/editor.tsx
index 221b912a..d47877ad 100644
--- a/src/context/editor.tsx
+++ b/src/context/editor.tsx
@@ -1,13 +1,13 @@
 import type { JSX } from 'solid-js'
 import { Accessor, createContext, createSignal, useContext } from 'solid-js'
 import { createStore, SetStoreFunction } from 'solid-js/store'
-import { Topic } from '../graphql/types.gen'
+import { Topic, TopicInput } from '../graphql/types.gen'
 import { apiClient } from '../utils/apiClient'
 import { useLocalize } from './localize'
 import { useSnackbar } from './snackbar'
-import { translit } from '../utils/ru2en'
 import { openPage } from '@nanostores/router'
 import { router, useRouter } from '../stores/router'
+import { slugify } from '../utils/slugify'
 
 type WordCounter = {
   characters: number
@@ -20,7 +20,7 @@ type ShoutForm = {
   title: string
   subtitle: string
   selectedTopics: Topic[]
-  mainTopic: string
+  mainTopic?: Topic
   body: string
   coverImageUrl: string
 }
@@ -29,7 +29,7 @@ type EditorContextType = {
   isEditorPanelVisible: Accessor<boolean>
   wordCounter: Accessor<WordCounter>
   form: ShoutForm
-  formErrors: Partial<ShoutForm>
+  formErrors: Record<keyof ShoutForm, string>
   actions: {
     saveShout: () => Promise<void>
     publishShout: () => Promise<void>
@@ -38,7 +38,7 @@ type EditorContextType = {
     toggleEditorPanel: () => void
     countWords: (value: WordCounter) => void
     setForm: SetStoreFunction<ShoutForm>
-    setFormErrors: SetStoreFunction<Partial<ShoutForm>>
+    setFormErrors: SetStoreFunction<Record<keyof ShoutForm, string>>
   }
 }
 
@@ -48,6 +48,14 @@ export function useEditorContext() {
   return useContext(EditorContext)
 }
 
+const topic2topicInput = (topic: Topic): TopicInput => {
+  return {
+    id: topic.id,
+    slug: topic.slug,
+    title: topic.title
+  }
+}
+
 export const EditorProvider = (props: { children: JSX.Element }) => {
   const { t } = useLocalize()
 
@@ -60,7 +68,7 @@ export const EditorProvider = (props: { children: JSX.Element }) => {
   const [isEditorPanelVisible, setIsEditorPanelVisible] = createSignal<boolean>(false)
 
   const [form, setForm] = createStore<ShoutForm>(null)
-  const [formErrors, setFormErrors] = createStore<Partial<ShoutForm>>(null)
+  const [formErrors, setFormErrors] = createStore<Record<keyof ShoutForm, string>>(null)
 
   const [wordCounter, setWordCounter] = createSignal<WordCounter>({
     characters: 0,
@@ -79,31 +87,48 @@ export const EditorProvider = (props: { children: JSX.Element }) => {
     return true
   }
 
+  const validateSettings = () => {
+    if (form.selectedTopics.length === 0) {
+      setFormErrors('selectedTopics', t('Required'))
+      return false
+    }
+
+    return true
+  }
+
+  const updateShout = async ({ publish }: { publish: boolean }) => {
+    return apiClient.updateArticle({
+      shoutId: form.shoutId,
+      shoutInput: {
+        body: form.body,
+        topics: form.selectedTopics.map((topic) => topic2topicInput(topic)),
+        // authors?: InputMaybe<Array<InputMaybe<Scalars['String']>>>
+        // community?: InputMaybe<Scalars['Int']>
+        mainTopic: topic2topicInput(form.mainTopic),
+        slug: form.slug,
+        subtitle: form.subtitle,
+        title: form.title,
+        cover: form.coverImageUrl
+      },
+      publish
+    })
+  }
+
   const saveShout = async () => {
     if (isEditorPanelVisible()) {
       toggleEditorPanel()
     }
 
-    if (!validate()) {
+    if (page().route === 'edit' && !validate()) {
+      return
+    }
+
+    if (page().route === 'editSettings' && !validateSettings()) {
       return
     }
 
     try {
-      const shout = await apiClient.updateArticle({
-        shoutId: form.shoutId,
-        shoutInput: {
-          body: form.body,
-          topics: form.selectedTopics.map((topic) => topic.slug),
-          // authors?: InputMaybe<Array<InputMaybe<Scalars['String']>>>
-          // community?: InputMaybe<Scalars['Int']>
-          mainTopic: form.selectedTopics[0]?.slug || 'society',
-          slug: form.slug,
-          subtitle: form.subtitle,
-          title: form.title,
-          cover: form.coverImageUrl
-        },
-        publish: false
-      })
+      const shout = await updateShout({ publish: false })
 
       if (shout.visibility === 'owner') {
         openPage(router, 'drafts')
@@ -120,32 +145,26 @@ export const EditorProvider = (props: { children: JSX.Element }) => {
     if (isEditorPanelVisible()) {
       toggleEditorPanel()
     }
-    if (!validate()) {
-      return
-    }
+
     if (page().route === 'edit') {
-      const slug = translit(form.title.toLowerCase()).replaceAll(' ', '-')
+      if (!validate()) {
+        return
+      }
+
+      await updateShout({ publish: false })
+
+      const slug = slugify(form.title)
       setForm('slug', slug)
       openPage(router, 'editSettings', { shoutId: form.shoutId.toString() })
       return
     }
 
+    if (!validateSettings()) {
+      return
+    }
+
     try {
-      await apiClient.updateArticle({
-        shoutId: form.shoutId,
-        shoutInput: {
-          body: form.body,
-          topics: form.selectedTopics.map((topic) => topic.slug),
-          // authors?: InputMaybe<Array<InputMaybe<Scalars['String']>>>
-          // community?: InputMaybe<Scalars['Int']>
-          mainTopic: form.selectedTopics[0]?.slug || 'society',
-          slug: form.slug,
-          subtitle: form.subtitle,
-          title: form.title,
-          cover: form.coverImageUrl
-        },
-        publish: true
-      })
+      await updateShout({ publish: true })
       openPage(router, 'feed')
     } catch (error) {
       console.error('[publishShout]', error)
diff --git a/src/graphql/query/topics-all.ts b/src/graphql/query/topics-all.ts
index d2ab1263..467ac999 100644
--- a/src/graphql/query/topics-all.ts
+++ b/src/graphql/query/topics-all.ts
@@ -3,6 +3,7 @@ import { gql } from '@urql/core'
 export default gql`
   query TopicsAllQuery {
     topicsAll {
+      id
       title
       body
       slug
diff --git a/src/graphql/types.gen.ts b/src/graphql/types.gen.ts
index 37795c5b..9bab98ee 100644
--- a/src/graphql/types.gen.ts
+++ b/src/graphql/types.gen.ts
@@ -582,11 +582,11 @@ export type ShoutInput = {
   body?: InputMaybe<Scalars['String']>
   community?: InputMaybe<Scalars['Int']>
   cover?: InputMaybe<Scalars['String']>
-  mainTopic?: InputMaybe<Scalars['String']>
+  mainTopic?: InputMaybe<TopicInput>
   slug?: InputMaybe<Scalars['String']>
   subtitle?: InputMaybe<Scalars['String']>
   title?: InputMaybe<Scalars['String']>
-  topics?: InputMaybe<Array<InputMaybe<Scalars['String']>>>
+  topics?: InputMaybe<Array<InputMaybe<TopicInput>>>
 }
 
 export type ShoutsFilterBy = {
@@ -628,7 +628,6 @@ export type Token = {
 
 export type Topic = {
   body?: Maybe<Scalars['String']>
-  community: Community
   id: Scalars['Int']
   oid?: Maybe<Scalars['String']>
   pic?: Maybe<Scalars['String']>
@@ -639,7 +638,7 @@ export type Topic = {
 
 export type TopicInput = {
   body?: InputMaybe<Scalars['String']>
-  community: Scalars['String']
+  id?: InputMaybe<Scalars['Int']>
   pic?: InputMaybe<Scalars['String']>
   slug: Scalars['String']
   title?: InputMaybe<Scalars['String']>
diff --git a/src/pages/edit.page.tsx b/src/pages/edit.page.tsx
index 1d60ac44..a0d66a58 100644
--- a/src/pages/edit.page.tsx
+++ b/src/pages/edit.page.tsx
@@ -25,7 +25,16 @@ export const EditPage = () => {
   return (
     <PageLayout>
       <Show when={isSessionLoaded()}>
-        <Show when={isAuthenticated()} fallback="Давайте авторизуемся">
+        <Show
+          when={isAuthenticated()}
+          fallback={
+            <div class="wide-container">
+              <div class="row">
+                <div class="col-md-19 col-lg-18 col-xl-16 offset-md-5">Давайте авторизуемся</div>
+              </div>
+            </div>
+          }
+        >
           <Show when={shout()}>
             <Suspense fallback={<Loading />}>
               <EditView shout={shout()} />
diff --git a/src/pages/profile/Settings.module.scss b/src/pages/profile/Settings.module.scss
index 24faffb6..3c3302bb 100644
--- a/src/pages/profile/Settings.module.scss
+++ b/src/pages/profile/Settings.module.scss
@@ -204,9 +204,23 @@ h5 {
   }
 
   :global(.solid-select-multi-value) {
+    background: none;
     margin: 0 0.5rem 0.5rem 0;
+    overflow: hidden;
     padding-left: 0.8rem;
     padding-bottom: 0.2rem;
+    position: relative;
+
+    &:before {
+      background: rgb(243, 244, 246);
+      content: '';
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      z-index: -1;
+    }
   }
 
   :global(.solid-select-multi-value-remove) {
diff --git a/src/utils/slugify.ts b/src/utils/slugify.ts
new file mode 100644
index 00000000..5edb0c94
--- /dev/null
+++ b/src/utils/slugify.ts
@@ -0,0 +1,7 @@
+import { translit } from './ru2en'
+
+export const slugify = (text) => {
+  return translit(text.toLowerCase())
+    .replaceAll(/[^\da-z]/g, '')
+    .replaceAll(' ', '-')
+}