diff --git a/src/components/GridItem.astro b/src/components/GridItem.astro
index 4860fca..3d85ffe 100644
--- a/src/components/GridItem.astro
+++ b/src/components/GridItem.astro
@@ -1,67 +1,106 @@
 ---
+import Icon from './Icon.astro';
+
 export interface Props {
+    id: string;
     title: string;
     text: string;
     url: string;
-    elemClass?: Array<String>;
-    btnClass?: Array<string>;
-    dataJs?: string;
+    width?: number;
 }
 
 const {
+    id,
     title, text, url,
-    elemClass = [],
-    btnClass = [],
-    dataJs = "",
+    width = 9,
 } = Astro.props;
 ---
 
-<div class:list={["gi", ...elemClass]}>
-    <a href={url} target="_blank" class="gi-main">
-        <span class="icon-wrapper">
-            <slot name="icon-primary" />
-        </span>
-        <span class="content">
-            <span class="title">
-                <slot name="title">
-                    {title}
-                </slot>
+<div class="gi" id={id}>
+    <div class="gi-row">
+        <div class="gi-main">
+            <span class="icon-wrapper">
+                <slot name="icon-primary" />
             </span>
-            <span class="text">
-                <slot name="text">
-                    {text}
-                </slot>
+            <span class="content">
+                <span class="title">
+                    <slot name="title">
+                        {title}
+                    </slot>
+                </span>
+                <span class="text">
+                    <slot name="text">
+                        {text}
+                    </slot>
+                </span>
             </span>
-        </span>
-    </a>
-    <a href="javascript:void(0)" class:list={["gi-btn", ...btnClass]} data-js={dataJs}>
-        <span class="icon-wrapper">
-            <slot name="icon-btn" />
-        </span>
-    </a>
+        </div>
+        <a href={`#${id}`} class="gi-btn gi-btn-expand">
+            <span class="icon-wrapper">
+                <Icon code="&#xf107;" />
+            </span>
+        </a>
+        <a href="#scroll" class="gi-btn gi-btn-close">
+            <span class="icon-wrapper">
+                <Icon code="&#xf106;" />
+            </span>
+        </a>
+    </div>
+    <div class="gi-options">
+        <slot name="options" />
+    </div>
+    <div class="gi-options gi-note">
+        <slot name="note" />
+    </div>
 </div>
 
-<style lang="less">
-    @import "/src/styles/grid_calc.less";
-
+<style lang="less" define:vars={{width: `${width}rem`}}>
     .gi {
         //     vertical horizontal
-        padding: 0.4rem @gi-horiz-padding;
+        padding: 0.4rem 0.6rem;
 
         display: flex;
-        flex-direction: row;
-        align-items: center;
+        flex-direction: column;
 
-        width: @gi-width;
         min-height: 3rem;
         border-radius: var(--bdrs);
 
         &:hover {
             background: var(--accent-bg);
         }
+
+        .gi-options { display: none }
+        .gi-btn-close { display: none }
+        .gi-btn-expand { display: flex }
+
+        &:target {
+            background: var(--accent-bg);
+
+            .gi-options {
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+
+                :global(.icon) {
+                    @icon-size: 1.75rem;
+
+                    font-size: @icon-size;
+                    width: @icon-size;
+                }
+            }
+
+            .gi-btn-close { display: flex }
+            .gi-btn-expand { display: none }
+        }
     }
 
-    a.gi-main {
+    .gi-row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .gi-main {
         flex-grow: 1;
         height: 100%;
 
@@ -73,17 +112,36 @@ const {
         text-decoration: none;
 
         .icon-wrapper {
-            width: @gi-icon-primary;
-            font-size: @gi-icon-primary;
-            margin-right: @gi-icon-margin;
+            @icon-size: 2.3rem;
+
+            width: @icon-size;
+            font-size: @icon-size;
+            margin-right: 0.4rem;
 
             & > :global(img) {
-                width: @gi-icon-primary;
+                width: @icon-size;
+            }
+        }
+
+        .content {
+            display: flex;
+            flex-direction: column;
+
+            width: var(--width);
+            overflow: hidden;
+
+            .title {
+                font-weight: 600;
+            }
+            
+            .text {
+                font-size: 0.9rem;
+                color: var(--fg-sec);
             }
         }
     }
 
-    a.gi-btn {
+    .gi-btn {
         position: relative;
         font-size: 1.1rem;
 
@@ -92,12 +150,14 @@ const {
         align-items: center;
 
         .icon-wrapper {
-            width: @gi-icon-btn;
-            font-size: @gi-icon-btn;
-            margin-left: @gi-icon-margin;
+            @icon-size: 1.25rem;
+
+            width: @icon-size;
+            font-size: @icon-size;
+            margin-left: 0.4rem;
 
             & > :global(img) {
-                width: @gi-icon-btn;
+                width: @icon-size;
             }
         }
     }
@@ -106,22 +166,7 @@ const {
         display: flex;
         flex-direction: column;
         align-items: center;
-    }
 
-    .content {
-        display: flex;
-        flex-direction: column;
-
-        width: @gi-text-width;
-        overflow: hidden;
-
-        .title {
-            font-weight: 600;
-        }
-        
-        .text {
-            font-size: 0.9rem;
-            color: var(--fg-sec);
-        }
+        user-select: none;
     }
 </style>
diff --git a/src/components/HostedService.astro b/src/components/HostedService.astro
index 392761e..3f1e472 100644
--- a/src/components/HostedService.astro
+++ b/src/components/HostedService.astro
@@ -12,23 +12,11 @@ const { name, description, url, iconUrl = `${url}/favicon.ico` } = Astro.props;
 ---
 
 <GridItem
+    id={`s-${name.toLowerCase()}`}
     title={name}
     text={description}
     url={url}
-    elemClass={["gi-service"]}
+    width={14}
 >
     <img src={iconUrl} slot="icon-primary" />
 </GridItem>
-
-<style lang="less" is:global>
-    @import "/src/styles/grid_calc.less";
-
-    // Overwriting default GridItem's width
-    .gi-service {
-        width: @service-width;
-
-        .content {
-            width: @service-text-width;
-        }
-    }
-</style>
diff --git a/src/components/Profile.astro b/src/components/Profile.astro
index e043752..12e7cb0 100644
--- a/src/components/Profile.astro
+++ b/src/components/Profile.astro
@@ -8,26 +8,37 @@ export interface Props {
     name: string;
     icon: string;
     copyName?: boolean;
+    note?: string;
 }
 
-const { app, url, name, icon, copyName = false } = Astro.props;
+const {
+    app, url, name, icon,
+    copyName = false,
+    note = "",
+} = Astro.props;
 ---
 
 <GridItem
+    id={`p-${app.toLowerCase()}`}
     title={app} text={name} url={url}
-    elemClass={["gi-profile"]}
-    btnClass={["profile-copy"]}
-    dataJs={copyName ? name : url}
+    width={9.5}
 >
     <Icon code={icon} slot="icon-primary" />
-    <Icon code="&#xf0c5;" slot="icon-btn" />
+    <Fragment slot="options">
+        <a href="javascript:void(0)" class="profile-copy" data-url={copyName ? name : url}>
+            <Icon code="&#xf0c5;" />
+        </a>
+        <a href={url}>
+            <Icon code="&#xf35d;" />
+        </a>
+    </Fragment>
 </GridItem>
 
 <script>
     const copy = document.querySelectorAll('.profile-copy')
     const copyClickHandler = (ev: Event) => {
         const elem = ev.currentTarget as HTMLElement
-        const link = elem.dataset.js
+        const link = elem.dataset.url
         if (!link) return
         navigator.clipboard.writeText(link)
     }
@@ -35,15 +46,3 @@ const { app, url, name, icon, copyName = false } = Astro.props;
         elem.addEventListener('click', copyClickHandler)
     }
 </script>
-
-<style lang="less" is:global>
-    @import "/src/styles/grid_calc.less";
-
-    .gi-profile {
-        width: @profile-width;
-
-        .content {
-            width: @profile-text-width;
-        }
-    }
-</style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 43b7825..7fe18bb 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -19,6 +19,7 @@ const { title, description } = Astro.props;
 		<title>{title}</title>
 	</head>
 	<body>
+		<div id="scroll"></div>
 		<slot />
 	</body>
 </html>
@@ -44,7 +45,7 @@ const { title, description } = Astro.props;
 		flex-direction: column;
 	}
 
-	main  {
+	main {
 		margin: auto;
 		padding: @main-padding;
 		max-width: @max-width;
@@ -113,3 +114,11 @@ const { title, description } = Astro.props;
 		}
 	}
 </style>
+
+<style>
+	#scroll {
+		position: fixed;
+		display: block;
+		height: 1px;
+	}
+</style>
diff --git a/src/layouts/Modal.astro b/src/layouts/Modal.astro
index 7248e0a..4e55a9d 100644
--- a/src/layouts/Modal.astro
+++ b/src/layouts/Modal.astro
@@ -9,7 +9,7 @@ const { id } = Astro.props;
 ---
 
 <div class="modal-bg" id={id}>
-    <a href="#" class="modal-bg-close"></a>
+    <a href="#scroll" class="modal-bg-close"></a>
     <div class="modal">
         <div class="controls">
             <a href="#"><Icon code="&#xf00d;" /></a>
diff --git a/src/styles/grid_calc.less b/src/styles/grid_calc.less
deleted file mode 100644
index f245b1e..0000000
--- a/src/styles/grid_calc.less
+++ /dev/null
@@ -1,25 +0,0 @@
-@import "/src/styles/max_width.less";
-
-@gi-icon-primary: 2.3rem;
-@gi-icon-btn: 1.8rem;
-
-@gi-text-width: 9.5rem;
-@profile-text-width: 9rem;
-@service-text-width: 14rem;
-
-@gi-icon-margin: 0.4rem;
-@gi-horiz-padding: 0.6rem;
-
-// GridItem width without text
-@gi-width-wo-text: @gi-horiz-padding + @gi-icon-primary + @gi-icon-margin + @gi-icon-margin + @gi-icon-btn + @gi-horiz-padding;
-
-@gi-width: @gi-width-wo-text + @gi-text-width;
-@profile-width: @gi-width-wo-text + @profile-text-width;
-@service-width: @gi-width-wo-text + @service-text-width;
-
-.grid-mixin() {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-}