diff --git a/.eslintrc.js b/.eslintrc.js
index 448e589e..5b15a85f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -50,16 +50,8 @@ module.exports = {
   },
   globals: {},
   rules: {
-    // FIXME
-    'unicorn/prefer-dom-node-append': 'off',
-
-    // TEMP
-    // FIXME
-    'solid/reactivity': 'off',
-
-    // Should be enabled
-    // 'promise/catch-or-return': 'off',
-
+    // Solid
+    'solid/reactivity': 'off', // FIXME
     'solid/no-innerhtml': 'off',
 
     /** Unicorn **/
@@ -73,8 +65,12 @@ module.exports = {
     'unicorn/import-style': 'off',
     'unicorn/numeric-separators-style': 'off',
     'unicorn/prefer-node-protocol': 'off',
+    'unicorn/prefer-dom-node-append': 'off', // FIXME
+    'unicorn/prefer-top-level-await': 'warn',
     'unicorn/consistent-function-scoping': 'warn',
 
+    // Promise
+    // 'promise/catch-or-return': 'off',  // Should be enabled
     'promise/always-return': 'off',
 
     eqeqeq: 'error',
diff --git a/public/icons/remove.svg b/public/icons/remove.svg
new file mode 100644
index 00000000..a0723869
--- /dev/null
+++ b/public/icons/remove.svg
@@ -0,0 +1,6 @@
+<svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.9082 6.97827L6.35974 6.92188L6.73364 16.535L5.2821 16.5914L4.9082 6.97827Z" fill="black"/>
+<path d="M11.0469 16.538L11.4228 6.9248L12.8744 6.98149L12.4984 16.5946L11.0469 16.538Z" fill="black"/>
+<path d="M8.16797 6.94727H9.6207V16.5683H8.16797V6.94727Z" fill="black"/>
+<path d="M17.7692 3.01065H11.9374V0.484375H5.83184V3.01065H0V4.46332H1.32641L2.12649 20.4844H15.6218L16.4219 4.46332H17.7483L17.7482 3.01065H17.7692ZM7.28454 1.93701H10.5057V3.03178H7.28454V1.93701ZM14.2533 19.0317H3.51595L2.77915 4.46332H14.9902L14.2533 19.0317Z" fill="black"/>
+</svg>
diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index ecc3c51b..36d176e4 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -43,7 +43,6 @@ const formatDate = (date: Date) => {
 export const FullArticle = (props: ArticleProps) => {
   const { session } = useSession()
   const formattedDate = createMemo(() => formatDate(new Date(props.article.createdAt)))
-  const [isSharePopupVisible, setIsSharePopupVisible] = createSignal(false)
 
   const mainTopic = () =>
     (props.article.topics?.find((topic) => topic?.slug === props.article.mainTopic)?.title || '').replace(
@@ -127,9 +126,6 @@ export const FullArticle = (props: ArticleProps) => {
           {/*</div>*/}
           <div class={styles.shoutStatsItem}>
             <SharePopup
-              onVisibilityChange={(isVisible) => {
-                setIsSharePopupVisible(isVisible)
-              }}
               containerCssClass={stylesHeader.control}
               trigger={<Icon name="share" class={styles.icon} />}
             />
diff --git a/src/components/Nav/ProfilePopup.tsx b/src/components/Nav/ProfilePopup.tsx
index fbd8de48..caef2d15 100644
--- a/src/components/Nav/ProfilePopup.tsx
+++ b/src/components/Nav/ProfilePopup.tsx
@@ -2,20 +2,23 @@ import { useSession } from '../../context/session'
 import type { PopupProps } from '../_shared/Popup'
 import { Popup } from '../_shared/Popup'
 import styles from '../_shared/Popup/Popup.module.scss'
+import { getPagePath } from '@nanostores/router'
+import { router } from '../../stores/router'
 
 type ProfilePopupProps = Omit<PopupProps, 'children'>
 
 export const ProfilePopup = (props: ProfilePopupProps) => {
   const {
-    session,
+    userSlug,
     actions: { signOut }
   } = useSession()
 
   return (
     <Popup {...props} horizontalAnchor="right">
+      {/*TODO: l10n*/}
       <ul class="nodash">
         <li>
-          <a href={`/author/${session().user?.slug}`}>Профиль</a>
+          <a href={getPagePath(router, 'author', { slug: userSlug() })}>Профиль</a>
         </li>
         <li>
           <a href="#">Черновики</a>
@@ -30,7 +33,7 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
           <a href="#">Закладки</a>
         </li>
         <li>
-          <a href="#">Настройки</a>
+          <a href={getPagePath(router, 'profileSettings')}>Настройки</a>
         </li>
         <li class={styles.topBorderItem}>
           <a
diff --git a/src/components/Pages/ConnectPage.tsx b/src/components/Pages/ConnectPage.tsx
index a4c4fa66..5ae4359e 100644
--- a/src/components/Pages/ConnectPage.tsx
+++ b/src/components/Pages/ConnectPage.tsx
@@ -3,7 +3,7 @@ import { PageWrap } from '../_shared/PageWrap'
 export const ConnectPage = () => {
   return (
     <PageWrap>
-      <article class="container container--static-page">
+      <article class="wide-container container--static-page">
         <div class="row">
           <div class="col-sm-10 col-md-8 col-lg-7 col-xl-6 shift-content">
             <h1>
diff --git a/src/components/Pages/about/DiscussionRulesPage.tsx b/src/components/Pages/about/DiscussionRulesPage.tsx
index 935639bc..51c1d38c 100644
--- a/src/components/Pages/about/DiscussionRulesPage.tsx
+++ b/src/components/Pages/about/DiscussionRulesPage.tsx
@@ -5,7 +5,7 @@ export const DiscussionRulesPage = () => {
   const title = t('Discussion rules')
   return (
     <PageWrap>
-      <article class="container container--static-page">
+      <article class="wide-container container--static-page">
         <div class="row">
           <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1>
diff --git a/src/components/Pages/about/DogmaPage.tsx b/src/components/Pages/about/DogmaPage.tsx
index 789ceddf..aec59c8b 100644
--- a/src/components/Pages/about/DogmaPage.tsx
+++ b/src/components/Pages/about/DogmaPage.tsx
@@ -5,7 +5,7 @@ import { PageWrap } from '../../_shared/PageWrap'
 export const DogmaPage = () => {
   return (
     <PageWrap>
-      <article class="container container--static-page">
+      <article class="wide-container container--static-page">
         <div class="row">
           <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h4>Редакционные принципы</h4>
diff --git a/src/components/Pages/about/GuidePage.tsx b/src/components/Pages/about/GuidePage.tsx
index aac38377..8d74df65 100644
--- a/src/components/Pages/about/GuidePage.tsx
+++ b/src/components/Pages/about/GuidePage.tsx
@@ -20,9 +20,9 @@ export const GuidePage = () => {
       {/*<Meta property="og:image:width" content="1200" />*/}
       {/*<Meta property="og:image:height" content="630" />*/}
 
-      <article class="container container--static-page">
+      <article class="wide-container container--static-page">
         <div class="row">
-          <div class="col-md-4 col-lg-3 order-md-last">
+          <div class="col-md-3 col-lg-2 order-md-last">
             <button class="button button--content-index" onClick={toggleIndexExpanded}>
               <Show when={!indexExpanded()}>
                 <Icon name="content-index-control" />
diff --git a/src/components/Pages/about/HelpPage.tsx b/src/components/Pages/about/HelpPage.tsx
index f5be324b..f034ca43 100644
--- a/src/components/Pages/about/HelpPage.tsx
+++ b/src/components/Pages/about/HelpPage.tsx
@@ -17,9 +17,9 @@ export const HelpPage = () => {
 
       {/*<Modal name="thank">Благодарим!</Modal>*/}
 
-      <article class="container container--static-page discours-help">
+      <article class="wide-container container--static-page discours-help">
         <div class="row">
-          <div class="col-md-4 col-lg-3 order-md-last">
+          <div class="col-md-3 col-lg-2 order-md-last">
             <button class="button button--content-index" onClick={toggleIndexExpanded}>
               <Show when={!indexExpanded()}>
                 <Icon name="content-index-control" />
diff --git a/src/components/Pages/about/ManifestPage.tsx b/src/components/Pages/about/ManifestPage.tsx
index 02d02014..1972935f 100644
--- a/src/components/Pages/about/ManifestPage.tsx
+++ b/src/components/Pages/about/ManifestPage.tsx
@@ -21,9 +21,9 @@ export const ManifestPage = () => {
       <Modal name="subscribe">
         <Subscribe />
       </Modal>
-      <article class="container container--static-page">
+      <article class="wide-container container--static-page">
         <div class="row">
-          <div class="col-md-4 col-lg-3 order-md-last">
+          <div class="col-md-3 col-lg-2 order-md-last">
             <button class="button button--content-index" onClick={toggleIndexExpanded}>
               <Show when={!indexExpanded()}>
                 <Icon name="content-index-control" />
diff --git a/src/components/Pages/about/PartnersPage.tsx b/src/components/Pages/about/PartnersPage.tsx
index e01aadac..67e18cef 100644
--- a/src/components/Pages/about/PartnersPage.tsx
+++ b/src/components/Pages/about/PartnersPage.tsx
@@ -6,7 +6,7 @@ import { t } from '../../../utils/intl'
 export const PartnersPage = () => {
   return (
     <PageWrap>
-      <article class="container container--static-page">
+      <article class="wide-container container--static-page">
         <div class="row">
           <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1>{t('Partners')}</h1>
diff --git a/src/components/Pages/about/PrinciplesPage.tsx b/src/components/Pages/about/PrinciplesPage.tsx
index 3d6f0ab2..a77337e5 100644
--- a/src/components/Pages/about/PrinciplesPage.tsx
+++ b/src/components/Pages/about/PrinciplesPage.tsx
@@ -5,7 +5,7 @@ export const PrinciplesPage = () => {
   const title = t('Principles')
   return (
     <PageWrap>
-      <article class="container container--static-page">
+      <article class="wide-container container--static-page">
         <div class="row">
           <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1>
diff --git a/src/components/Pages/about/ProjectsPage.tsx b/src/components/Pages/about/ProjectsPage.tsx
index 63b52fc7..752dcfa3 100644
--- a/src/components/Pages/about/ProjectsPage.tsx
+++ b/src/components/Pages/about/ProjectsPage.tsx
@@ -6,7 +6,7 @@ import { t } from '../../../utils/intl'
 export const ProjectsPage = () => {
   return (
     <PageWrap>
-      <article class="container container--static-page">
+      <article class="wide-container container--static-page">
         <div class="row">
           <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1>{t('Projects')}</h1>
diff --git a/src/components/Pages/about/TermsOfUsePage.tsx b/src/components/Pages/about/TermsOfUsePage.tsx
index be178bf4..15a5e9d4 100644
--- a/src/components/Pages/about/TermsOfUsePage.tsx
+++ b/src/components/Pages/about/TermsOfUsePage.tsx
@@ -15,9 +15,9 @@ export const TermsOfUsePage = () => {
       {/*<Meta name="keywords" content={`Discours.io, ${t('Terms of use')}, ${t('Terms of use', 'en')}`} />*/}
       {/*<Meta property="og:title" content={title} />*/}
       {/*<Meta property="og:description" content={title} />*/}
-      <article class="container container--static-page">
+      <article class="wide-container container--static-page">
         <div class="row">
-          <div class="col-md-4 col-lg-3 order-md-last">
+          <div class="col-md-3 col-lg-2 order-md-last">
             <button class="button button--content-index" onClick={toggleIndexExpanded}>
               <Show when={!indexExpanded()}>
                 <Icon name="content-index-control" />
diff --git a/src/components/Pages/about/ThanksPage.tsx b/src/components/Pages/about/ThanksPage.tsx
index fc11bc2e..21b64d8f 100644
--- a/src/components/Pages/about/ThanksPage.tsx
+++ b/src/components/Pages/about/ThanksPage.tsx
@@ -10,7 +10,7 @@ export const ThanksPage = () => {
       {/*<Meta property="og:title" content={title} />*/}
       {/*<Meta property="og:description" content={title} />*/}
 
-      <article class="container container--static-page">
+      <article class="wide-container container--static-page">
         <div class="row">
           <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1>
diff --git a/src/components/Pages/profile/ProfileSettingsPage.tsx b/src/components/Pages/profile/ProfileSettingsPage.tsx
new file mode 100644
index 00000000..01041b37
--- /dev/null
+++ b/src/components/Pages/profile/ProfileSettingsPage.tsx
@@ -0,0 +1,125 @@
+import { PageWrap } from '../../_shared/PageWrap'
+import type { PageProps } from '../../types'
+import styles from './Settings.module.scss'
+import { Icon } from '../../_shared/Icon'
+import { clsx } from 'clsx'
+
+export const ProfileSettingsPage = (props: PageProps) => {
+  return (
+    <PageWrap>
+      <div class="wide-container">
+        <div class="shift-content">
+          <div class="left-col">
+            <div class="left-navigation">WIP</div>
+          </div>
+
+          <div class="row">
+            <div class="col-md-10 col-lg-9 col-xl-8">
+              <h1>Настройки профиля</h1>
+              <p class="description">Здесь можно настроить свой профиль так, как вы хотите.</p>
+
+              <form>
+                <h4>Аватар</h4>
+                <div class="pretty-form__item">
+                  <div class={styles.avatarContainer}>
+                    <img class={styles.avatar} />
+                    <input
+                      type="file"
+                      name="avatar"
+                      class={styles.avatarInput}
+                      accept="image/jpeg,image/png,image/gif,image/webp"
+                    />
+                  </div>
+                </div>
+
+                <h4>Имя</h4>
+                <p class="description">
+                  Ваше имя появится на&nbsp;странице вашего профиля и&nbsp;как ваша подпись
+                  в&nbsp;публикациях, комментариях и&nbsp;откликах
+                </p>
+                <div class="pretty-form__item">
+                  <input type="text" name="username" id="username" placeholder="Имя" />
+                  <label for="username">Имя</label>
+                </div>
+
+                <h4>Адрес на&nbsp;Дискурсе</h4>
+                <div class="pretty-form__item">
+                  <div class={styles.discoursName}>
+                    <label for="user-address">https://discours.io/user/</label>
+                    <div class={styles.discoursNameField}>
+                      <input type="text" name="user-address" id="user-address" class="nolabel" />
+                      <p class="form-message form-message--error">
+                        Увы, этот адрес уже занят, выберите другой
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <h4>Представление</h4>
+                <div class="pretty-form__item">
+                  <textarea name="presentation" id="presentation" placeholder="Представление" />
+                  <label for="presentation">Представление</label>
+                </div>
+
+                <h4>О себе</h4>
+                <div class="pretty-form__item">
+                  <textarea name="about" id="about" placeholder="О себе" />
+                  <label for="about">О себе</label>
+                </div>
+
+                <h4>Чем могу помочь/навыки</h4>
+                <div class="pretty-form__item">
+                  <input type="text" name="skills" id="skills" />
+                </div>
+
+                <h4>Откуда</h4>
+                <div class="pretty-form__item">
+                  <input type="text" name="location" id="location" placeholder="Откуда" />
+                  <label for="location">Откуда</label>
+                </div>
+
+                <h4>Дата рождения</h4>
+                <div class="pretty-form__item">
+                  <input
+                    type="date"
+                    name="birthdate"
+                    id="birthdate"
+                    placeholder="Дата рождения"
+                    class="nolabel"
+                  />
+                </div>
+
+                <div class={clsx(styles.multipleControls, 'pretty-form__item')}>
+                  <div class={styles.multipleControlsHeader}>
+                    <h4>Социальные сети</h4>
+                    <button class="button">+</button>
+                  </div>
+                  <div class={styles.multipleControlsItem}>
+                    <input type="text" name="social1" class="nolabel" />
+                    <button>
+                      <Icon name="remove" class={styles.icon} />
+                    </button>
+                  </div>
+                  <div class={styles.multipleControlsItem}>
+                    <input type="text" name="social1" class="nolabel" />
+                    <button>
+                      <Icon name="remove" class={styles.icon} />
+                    </button>
+                  </div>
+                </div>
+
+                <br />
+                <p>
+                  <button class="button button--submit">Сохранить настройки</button>
+                </p>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </PageWrap>
+  )
+}
+
+// for lazy loading
+export default ProfileSettingsPage
diff --git a/src/components/Pages/profile/Settings.module.scss b/src/components/Pages/profile/Settings.module.scss
new file mode 100644
index 00000000..70b5246d
--- /dev/null
+++ b/src/components/Pages/profile/Settings.module.scss
@@ -0,0 +1,105 @@
+h4 {
+  font-weight: 500;
+}
+
+.avatarContainer {
+  border-radius: 100%;
+  overflow: hidden;
+  position: relative;
+  height: 18rem;
+  width: 18rem;
+}
+
+.avatar,
+.avatarInput {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.avatar {
+  background: #ccc;
+  border: none;
+  object-fit: cover;
+  object-position: center;
+}
+
+.avatarInput {
+  border-radius: 100%;
+  cursor: pointer;
+  opacity: 0;
+  z-index: 1;
+}
+
+.multipleControls {
+  margin-top: 3rem;
+}
+
+.multipleControlsItem {
+  position: relative;
+
+  button {
+    background-color: #fff;
+    padding: 0.5em;
+    position: absolute;
+    right: 0.8em;
+    top: 50%;
+    transform: translateY(-50%);
+    transition: background-color 0.3s;
+
+    &:hover {
+      background-color: #000;
+
+      .icon {
+        filter: invert(1);
+      }
+    }
+
+    .icon {
+      filter: invert(0);
+      transition: filter 0.3s;
+    }
+  }
+
+  form & input {
+    padding-right: 5rem;
+  }
+}
+
+.multipleControlsHeader {
+  display: flex;
+  margin-bottom: 0.5em;
+
+  h4 {
+    flex: 1;
+    margin-bottom: 0;
+  }
+
+  button {
+    margin-left: 1em;
+    padding-bottom: 0.5rem;
+    padding-top: 0.5rem;
+  }
+}
+
+.discoursName {
+  display: flex;
+
+  @include media-breakpoint-down(sm) {
+    flex-wrap: wrap;
+
+    input {
+      min-width: 250px;
+    }
+  }
+
+  label {
+    margin: 0.6em 0.5em 0 0;
+  }
+}
+
+.discoursNameField {
+  flex: 1;
+}
diff --git a/src/components/Root.tsx b/src/components/Root.tsx
index 9e9e751a..75a470f5 100644
--- a/src/components/Root.tsx
+++ b/src/components/Root.tsx
@@ -32,6 +32,7 @@ import { ConnectPage } from './Pages/ConnectPage'
 import { InboxPage } from './Pages/InboxPage'
 import { LayoutShoutsPage } from './Pages/LayoutShoutsPage'
 import { SessionProvider } from '../context/session'
+import { ProfileSettingsPage } from './Pages/profile/ProfileSettingsPage'
 
 // TODO: lazy load
 // const SomePage = lazy(() => import('./Pages/SomePage'))
@@ -58,7 +59,8 @@ const pagesMap: Record<keyof Routes, Component<PageProps>> = {
   partners: PartnersPage,
   principles: PrinciplesPage,
   termsOfUse: TermsOfUsePage,
-  thanks: ThanksPage
+  thanks: ThanksPage,
+  profileSettings: ProfileSettingsPage
 }
 
 export const Root = (props: PageProps) => {
diff --git a/src/context/session.tsx b/src/context/session.tsx
index 966d8d6f..0075d6c0 100644
--- a/src/context/session.tsx
+++ b/src/context/session.tsx
@@ -6,6 +6,7 @@ import { resetToken, setToken } from '../graphql/privateGraphQLClient'
 
 type SessionContextType = {
   session: InitializedResource<AuthResult>
+  userSlug: Accessor<string>
   isAuthenticated: Accessor<boolean>
   actions: {
     getSession: () => AuthResult | Promise<AuthResult>
@@ -42,6 +43,8 @@ export const SessionProvider = (props: { children: JSX.Element }) => {
     initialValue: null
   })
 
+  const userSlug = createMemo(() => session()?.user?.slug)
+
   const isAuthenticated = createMemo(() => Boolean(session()?.user?.slug))
 
   const signIn = async ({ email, password }: { email: string; password: string }) => {
@@ -71,7 +74,7 @@ export const SessionProvider = (props: { children: JSX.Element }) => {
     confirmEmail
   }
 
-  const value: SessionContextType = { session, isAuthenticated, actions }
+  const value: SessionContextType = { session, userSlug, isAuthenticated, actions }
 
   onMount(() => {
     refetchSession()
diff --git a/src/pages/profile/settings.astro b/src/pages/profile/settings.astro
new file mode 100644
index 00000000..98564ae8
--- /dev/null
+++ b/src/pages/profile/settings.astro
@@ -0,0 +1,12 @@
+---
+import Prerendered from '../../main.astro'
+import { Root } from '../../components/Root'
+import { initRouter } from '../../stores/router'
+
+const { pathname, search } = Astro.url
+initRouter(pathname, search)
+---
+
+<Prerendered>
+  <Root client:load />
+</Prerendered>
diff --git a/src/stores/router.ts b/src/stores/router.ts
index 67358486..d69c180a 100644
--- a/src/stores/router.ts
+++ b/src/stores/router.ts
@@ -27,6 +27,7 @@ export interface Routes {
   thanks: void
   expo: 'layout'
   inbox: void // TODO: добавить ID текущего юзера
+  profileSettings: void
 }
 
 const searchParamsStore = createSearchParams()
@@ -53,7 +54,8 @@ const routerStore = createRouter<Routes>(
     projects: '/about/projects',
     termsOfUse: '/about/terms-of-use',
     thanks: '/about/thanks',
-    expo: '/expo/:layout'
+    expo: '/expo/:layout',
+    profileSettings: '/profile/settings'
   },
   {
     search: false,
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 34ae8298..869b2fe4 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -67,6 +67,7 @@ section {
   margin: 0 auto;
   max-width: 1400px;
   padding: 0 divide($container-padding-x, 2);
+  width: 100%;
 
   @include media-breakpoint-up(sm) {
     padding: 0 $container-padding-x;
@@ -299,6 +300,12 @@ button {
   }
 }
 
+.button--submit {
+  @include font-size(2rem);
+
+  padding: 1.6rem 2rem;
+}
+
 form {
   .pretty-form__item {
     position: relative;
@@ -317,6 +324,7 @@ form {
   input[type='password'],
   input[type='search'],
   input[type='tel'],
+  input[type='date'],
   textarea,
   select {
     border: 2px solid #e8e8e8;
@@ -351,6 +359,19 @@ form {
       transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
       user-select: none;
     }
+
+    & + .form-message {
+      margin-top: -1.2rem;
+    }
+
+    &.nolabel {
+      padding-bottom: 1.8rem;
+      padding-top: 1.7rem;
+    }
+  }
+
+  .form-message--error {
+    color: #d00820;
   }
 
   select {
@@ -378,6 +399,10 @@ form {
       top: 3rem;
     }
   }
+
+  .form-message {
+    @include font-size(1.2rem);
+  }
 }
 
 .input--short {
@@ -415,45 +440,6 @@ input[type='checkbox'] {
   display: none !important;
 }
 
-.article__author {
-  font-size: 1.5rem;
-  font-weight: 400;
-
-  &,
-  a {
-    color: #9fa1a7;
-  }
-
-  a {
-    background: transparent;
-    transition: background-color 0.2s;
-
-    &:hover {
-      background: #000;
-      color: #fff;
-    }
-  }
-}
-
-.article__topic {
-  font-size: 1.2rem;
-  letter-spacing: 0.08em;
-  margin-bottom: 0.8rem;
-  text-transform: uppercase;
-  transition: background-color 0.2s;
-
-  a {
-    background: transparent;
-    border: none;
-    color: $link-color;
-
-    &:hover {
-      background: $link-color;
-      color: #fff;
-    }
-  }
-}
-
 figure {
   margin: 2em 0;
 }
@@ -677,6 +663,8 @@ astro-island {
 }
 
 .shift-content {
+  position: relative;
+
   @include media-breakpoint-up(md) {
     margin-left: 161px;
   }
@@ -684,6 +672,27 @@ astro-island {
   @include media-breakpoint-up(lg) {
     margin-left: 235px;
   }
+
+  .left-col {
+    height: 100%;
+    padding-right: 2rem;
+    position: absolute;
+    right: 100%;
+    top: 0;
+
+    @include media-breakpoint-up(md) {
+      width: 161px;
+    }
+
+    @include media-breakpoint-up(lg) {
+      width: 235px;
+    }
+  }
+
+  .left-navigation {
+    position: sticky;
+    top: 0;
+  }
 }
 
 .center {
@@ -790,3 +799,8 @@ details {
   -webkit-box-orient: vertical;
   white-space: normal;
 }
+
+.description {
+  @include font-size(1.4rem);
+  color: rgba(0 0 0 / 40%);
+}