diff --git a/src/app/and/index.module.scss b/src/app/and/index.module.scss
index 11c30d2..3448d69 100644
--- a/src/app/and/index.module.scss
+++ b/src/app/and/index.module.scss
@@ -1,23 +1,52 @@
 .content-wrapper {
-  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 10px;
+  scroll-snap-type: y mandatory;
+
+  @include sp {
+    grid-template-columns: repeat(6, 1fr);
+  }
 }
 
-.cards-view {
-  display: flex;
-  width: 100%;
-  overflow: auto;
-  scroll-snap-type: x mandatory;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
+.films-view {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: span 12;
+  gap: 10px;
+  align-content: center;
+  align-items: center;
+  height: 100dvh;
 
-  &::-webkit-scrollbar {
-    display: none;
+  @include sp {
+    grid-column: span 6;
   }
 
-  @include sp {
-    flex-direction: column;
-    scroll-snap-type: y mandatory;
-    height: 100vh;
-    height: 100dvh;
+  > .rank-title {
+    grid-column: 3 / 11;
+    padding: 20px 0;
+    overflow: hidden;
+    border: 1px solid #fff2;
+    border-radius: 20px;
+
+    @include sp {
+      grid-column: 2 / 6;
+    }
+  }
+
+  > .cards {
+    display: flex;
+    scroll-snap-type: x mandatory;
+    grid-column: 3 / 11;
+    max-width: 100%;
+    height: min(500px, 70dvh);
+    overflow-x: scroll;
+    border-radius: 20px;
+
+    @include sp {
+      flex-direction: column;
+      scroll-snap-type: y mandatory;
+      grid-column: 2 / 6;
+    }
   }
 }
diff --git a/src/app/and/page.tsx b/src/app/and/page.tsx
index 677e6fe..fc4e349 100644
--- a/src/app/and/page.tsx
+++ b/src/app/and/page.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 
+import { ScrollingText } from '~/components/common/scrollingText';
 import { FilmCard } from '~/components/pages/and/filmCard';
 import { Film } from '~/types/Films';
 import { getFilms } from '~/utils/films';
@@ -19,13 +20,18 @@ const AndPage = async () => {
   const films = await getFilms();
 
   return (
-    <div className={styles['content-wrapper']}>
-      <div className={styles['cards-view']}>
-        {films.map((film: Film, index: number) => (
-          <FilmCard key={film.id} film={film} rank={index + 1} />
-        ))}
+    <main className={styles['content-wrapper']}>
+      <div className={styles['films-view']}>
+        <div className={styles['rank-title']}>
+          <ScrollingText text="FILM RANKING" size={4} />
+        </div>
+        <div className={styles.cards}>
+          {films.map((film: Film, index: number) => (
+            <FilmCard key={film.id} film={film} rank={index + 1} />
+          ))}
+        </div>
       </div>
-    </div>
+    </main>
   );
 };
 
diff --git a/src/app/portfolio/index.module.scss b/src/app/portfolio/index.module.scss
index 1e8556f..ec2d869 100644
--- a/src/app/portfolio/index.module.scss
+++ b/src/app/portfolio/index.module.scss
@@ -17,8 +17,6 @@
   grid-template-columns: repeat(12, 1fr);
   gap: 10px;
   width: 100%;
-  min-height: 100vh;
-  min-height: 100dvh;
   padding: 80px 10px 10px;
   overflow: auto;
 
@@ -174,12 +172,19 @@
 
 .design-link {
   @include rounded-wrapper(16px);
+  @extend %glass-effect;
 
+  font-size: 2rem;
   color: utils.$color-navy;
 
+  > .numbering {
+    padding-inline-end: 16px;
+    font-family: utils.$font-serif;
+  }
+
   > .title {
     font-family: utils.$font-serif;
-    font-size: 2.5rem;
+    font-weight: 800;
   }
 
   &.aas {
diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
index 3541d78..7335605 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -3,7 +3,7 @@ import type { Metadata, NextPage } from 'next';
 import Link from 'next/link';
 
 import { ImageWithLoading } from '~/components/common/image/imageWithLoading';
-import { PageTitle } from '~/components/pages/portfolio/pageTitle';
+import { ScrollingText } from '~/components/common/scrollingText';
 
 import styles from './index.module.scss';
 
@@ -23,7 +23,7 @@ const PortfolioPage: NextPage = () => (
   <main className={classNames(styles['content-wrapper'], 'portfolio-wrapper')}>
     <div className={styles['title-image']} />
     <div className={styles['title-wrapper']}>
-      <PageTitle />
+      <ScrollingText text="PORTFOLIO" />
     </div>
     <h3 className={classNames(styles['section-title'])}>films</h3>
     <div className={classNames(styles['films-section'], styles.section)}>
@@ -52,20 +52,20 @@ const PortfolioPage: NextPage = () => (
     <h3 className={classNames(styles['section-title'])}>designs</h3>
     <div className={classNames(styles['designs-section'], styles.section)}>
       <Link href="/#" className={classNames(styles['design-link'], styles.aas)}>
-        <span>#1</span>
-        <h4 className={styles.title}>Redesign of Academic Affair System</h4>
+        <span className={styles.numbering}>#1</span>
+        <span className={styles.title}>Redesign of Academic Affair System</span>
       </Link>
       <Link href="/#" className={classNames(styles['design-link'], styles.shp)}>
-        <span>#2</span>
-        <h4 className={styles.title}>SP App for Small Health Problems</h4>
+        <span className={styles.numbering}>#2</span>
+        <span className={styles.title}>App for Small Health Problems</span>
       </Link>
       <Link href="/#" className={classNames(styles['design-link'], styles.ksk)}>
-        <span>#3</span>
-        <h4 className={styles.title}>Kuseki</h4>
+        <span className={styles.numbering}>#3</span>
+        <span className={styles.title}>Kuseki</span>
       </Link>
       <Link href="/#" className={classNames(styles['design-link'], styles.akb)}>
-        <span>#4</span>
-        <h4 className={styles.title}>Redesign of AKB48 Official Website</h4>
+        <span className={styles.numbering}>#4</span>
+        <span className={styles.title}>Redesign of AKB48 Official Website</span>
       </Link>
     </div>
     {/* films */}
diff --git a/src/components/pages/portfolio/pageTitle/index.module.scss b/src/components/common/scrollingText/index.module.scss
similarity index 73%
rename from src/components/pages/portfolio/pageTitle/index.module.scss
rename to src/components/common/scrollingText/index.module.scss
index 6d4e101..562edb0 100644
--- a/src/components/pages/portfolio/pageTitle/index.module.scss
+++ b/src/components/common/scrollingText/index.module.scss
@@ -1,20 +1,20 @@
-.page-title {
+.scrolling-text {
   display: flex;
   width: fit-content;
   font-family: utils.$font-serif;
-  font-size: 12rem;
   font-variation-settings: 'wdth' 125;
   font-weight: 800;
   line-height: 1;
   user-select: none;
-  animation: title 10s linear infinite;
+  animation: scrolling 10s linear infinite;
 
   > span {
     padding-inline: 2rem;
+    text-wrap: nowrap;
   }
 }
 
-@keyframes title {
+@keyframes scrolling {
   0% {
     transform: translateX(0);
   }
diff --git a/src/components/common/scrollingText/index.tsx b/src/components/common/scrollingText/index.tsx
new file mode 100644
index 0000000..19f2b32
--- /dev/null
+++ b/src/components/common/scrollingText/index.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import { useRef } from 'react';
+
+import styles from './index.module.scss';
+
+type Props = {
+  /**
+   * Text to scroll
+   */
+  text: string;
+  /**
+   * Font size in rem
+   * @default 12
+   */
+  size?: number;
+  /**
+   * HTML tag to render
+   * @default 'h2'
+   */
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+};
+
+export const ScrollingText = ({ text, size = 12, as = 'h2' }: Props) => {
+  const As = as;
+  const titleRef = useRef<HTMLHeadingElement>(null);
+
+  const handleScroll = () =>
+    titleRef.current?.appendChild(titleRef.current?.firstElementChild as Node);
+
+  titleRef.current?.addEventListener('animationiteration', handleScroll);
+
+  return (
+    <As
+      className={styles['scrolling-text']}
+      ref={titleRef}
+      style={{ fontSize: `${size}rem` }}
+    >
+      <span>{text}</span>
+      <span>{text}</span>
+    </As>
+  );
+};
diff --git a/src/components/pages/and/filmCard/index.module.scss b/src/components/pages/and/filmCard/index.module.scss
index a1702bd..ee9f727 100644
--- a/src/components/pages/and/filmCard/index.module.scss
+++ b/src/components/pages/and/filmCard/index.module.scss
@@ -1,7 +1,6 @@
 .card-wrapper {
   position: relative;
-  flex: 1 0 90vw;
-  height: 100vh;
+  flex: 1 0 100%;
   font-size: 1.6rem;
   color: #fff;
   background-repeat: no-repeat;
@@ -10,16 +9,6 @@
   background-size: cover !important;
   scroll-snap-align: start;
 
-  &:last-of-type {
-    flex: 1 0 100vw;
-  }
-
-  @include sp {
-    flex: 1 0 100dvh;
-    height: unset;
-    padding-bottom: 100px;
-  }
-
   > .contents {
     position: relative;
     display: flex;
@@ -44,13 +33,15 @@
   position: absolute;
   top: 0;
   left: -40px;
-  font-size: 25rem;
+  font-family: utils.$font-serif;
+  font-size: 20rem;
   font-weight: 600;
   line-height: 1;
 
   @include sp {
-    top: 250px;
+    top: 200px;
     left: -20px;
+    z-index: 1;
     font-size: 10rem;
   }
 }
@@ -65,13 +56,40 @@
   box-shadow: 0 0 20px rgb(0 0 0 / 50%);
 
   @include sp {
+    width: 160px;
+    height: 240px;
     margin: 0 auto;
   }
 }
 
-.basic-info > .overview {
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
+.basic-info {
+  > .title {
+    font-family: utils.$font-serif;
+    font-size: 2.4rem;
+
+    @include sp {
+      font-size: 1.8rem;
+    }
+  }
+
+  > .original {
+    font-size: 1rem;
+  }
+
+  > .release,
+  > .countries {
+    font-family: utils.$font-serif;
+    font-size: 1.4rem;
+  }
+
+  > .overview {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+
+    @include sp {
+      display: none;
+    }
+  }
 }
diff --git a/src/components/pages/and/filmCard/index.tsx b/src/components/pages/and/filmCard/index.tsx
index dd98ae7..ce28bf1 100644
--- a/src/components/pages/and/filmCard/index.tsx
+++ b/src/components/pages/and/filmCard/index.tsx
@@ -26,11 +26,14 @@ export const FilmCard = ({ film, rank }: Props) =>
           </div>
           <div className={styles['basic-info']}>
             <h3 className={styles.title}>{film.title}</h3>
-            {film.originalTitle !== film.title ? (
+            {film.originalTitle === film.title ? null : (
               <p className={styles.original}> / {film.originalTitle}</p>
-            ) : null}
-            <p className={styles.release}>{film.releaseDate}</p>
-            <p className={styles.countries}>{film.productionCountries}</p>
+            )}
+            <span className={styles.release}>{film.releaseDate}</span>
+            <span className={styles.countries}>
+              {' '}
+              / {film.productionCountries}
+            </span>
             <p className={styles.overview}>{film.overview}</p>
           </div>
         </div>
diff --git a/src/components/pages/portfolio/filmsContent/index.module.scss b/src/components/pages/portfolio/filmsContent/index.module.scss
deleted file mode 100644
index 270731d..0000000
--- a/src/components/pages/portfolio/filmsContent/index.module.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-.film-content {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  user-select: none;
-}
-
-.image {
-  position: absolute;
-  top: 0;
-  right: 0;
-  align-self: start;
-  width: min(80%, 1024px);
-  aspect-ratio: 16 / 9;
-  overflow: hidden;
-  background: utils.$color-navy;
-
-  @include sp {
-    width: 100%;
-    aspect-ratio: 4 / 3;
-    margin-top: 10dvh;
-  }
-
-  > .redirect {
-    @extend %center-items-grid;
-
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    font-weight: 600;
-    letter-spacing: 0.5rem;
-    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
-
-    @include sp {
-      font-size: 1.2rem;
-    }
-  }
-
-  &::before {
-    position: absolute;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    content: '';
-    background: utils.$color-navy-overlay-30;
-    transition: all 0.5s ease-in-out;
-  }
-
-  @include hover {
-    > .redirect {
-      color: utils.$color-navy;
-      letter-spacing: 0.7rem;
-    }
-
-    > :not(.redirect) {
-      scale: 1.1;
-    }
-
-    &::before {
-      opacity: 0;
-    }
-  }
-}
-
-.c-mark {
-  position: absolute;
-  top: -20%;
-  right: 10%;
-  display: block;
-
-  path {
-    fill: utils.$color-pink;
-  }
-
-  @include sp {
-    left: -20%;
-  }
-}
-
-.content {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  width: 50%;
-  height: 100%;
-  padding: 30px;
-
-  @include sp {
-    align-items: flex-end;
-    justify-content: flex-end;
-    width: 100%;
-    text-align: end;
-  }
-
-  > .title {
-    width: fit-content;
-    margin-bottom: 40px;
-    font-family: utils.$font-serif;
-    font-size: 4rem;
-    font-weight: 600;
-    letter-spacing: 0.2rem;
-    box-shadow: inset 0 -1px 0 0 #fff;
-    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
-
-    @include hover {
-      box-shadow: inset 0 -2.5rem 0 0 utils.$color-pink;
-    }
-  }
-
-  > .description {
-    font-size: 2rem;
-    text-wrap: balance;
-    letter-spacing: 0.1rem;
-  }
-}
diff --git a/src/components/pages/portfolio/filmsContent/index.tsx b/src/components/pages/portfolio/filmsContent/index.tsx
deleted file mode 100644
index 0ae8cbb..0000000
--- a/src/components/pages/portfolio/filmsContent/index.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-'use client';
-
-import { useRef } from 'react';
-
-import { useGSAP } from '@gsap/react';
-import classNames from 'classnames';
-import { gsap } from 'gsap';
-import ScrollTrigger from 'gsap/ScrollTrigger';
-import Link from 'next/link';
-
-import CMark from '~/assets/icons/c-mark-sp.svg';
-import { ImageWithLoading } from '~/components/common/image/imageWithLoading';
-import { BREAKPOINT } from '~/hooks';
-
-import styles from './index.module.scss';
-
-const NIAN_NIAN_SRC =
-  'https://lh3.googleusercontent.com/pw/AP1GczPKz5S8JFRjn34iMvbzLmfOUWf0TVj8SR8N8KgSLDp1e3XAjxyJVZ_quJmXniculUaDWKVpOQK6cRb6lPFEHIXpmB8BvUnU9tBH1F1PMXAkXSrqcRA=w2400';
-
-export const FilmsContent = () => {
-  const cardRef = useRef(null);
-
-  useGSAP(() => {
-    gsap.registerPlugin(ScrollTrigger);
-
-    gsap.fromTo(
-      `.film-section-image`,
-      {
-        x: 200,
-        autoAlpha: 0,
-      },
-      {
-        duration: 1,
-        x: 0,
-        autoAlpha: 1,
-        ease: 'back.out',
-        scrollTrigger: {
-          trigger: cardRef.current,
-          start: 'top top+=100',
-          scroller: '.portfolio-wrapper',
-          toggleActions: 'restart restart restart reverse',
-        },
-      },
-    );
-
-    const mm = gsap.matchMedia();
-    mm.add(
-      {
-        pc: `(min-width: ${BREAKPOINT}px)`,
-        sp: `(max-width: ${BREAKPOINT - 1}px)`,
-      },
-      (context) => {
-        const { pc } = context.conditions!;
-
-        gsap.fromTo(
-          `.c-mark`,
-          {
-            scale: pc ? 1.5 : 1,
-            autoAlpha: 0,
-          },
-          {
-            duration: 1,
-            y: `${pc ? 80 : 60}vh`,
-            autoAlpha: 1,
-            ease: 'ease-out',
-            scrollTrigger: {
-              trigger: cardRef.current,
-              start: 'top top+=100',
-              scroller: '.portfolio-wrapper',
-              toggleActions: 'restart restart restart reverse',
-            },
-          },
-        );
-      },
-    );
-
-    gsap.to('.c-mark', {
-      duration: 3,
-      rotate: 360,
-      repeat: -1,
-      ease: 'none',
-    });
-  });
-
-  return (
-    <div className={styles['film-content']} ref={cardRef}>
-      <Link
-        href="https://youtu.be/QocgLpdHsrw?feature=shared"
-        target="_blank"
-        rel="noopener noreferrer"
-        className={classNames(styles.image, 'film-section-image')}
-      >
-        <span className={styles.redirect}>WATCH ON YOUTUBE</span>
-        <ImageWithLoading
-          src={NIAN_NIAN_SRC}
-          alt="Thumbnail for documentary Nian' Nian."
-        />
-      </Link>
-      <CMark className={classNames(styles['c-mark'], 'c-mark')} />
-      <div className={styles.content}>
-        <Link className={styles.title} href="/portfolio/nian-nian">
-          Nian&apos; Nian.
-        </Link>
-        <p className={styles.description}>
-          &quot;It&apos;s a difficult time in her life, and if she can get
-          through it, I&apos;m sure she&apos;ll be happy.&quot;
-        </p>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/pages/portfolio/pageTitle/index.tsx b/src/components/pages/portfolio/pageTitle/index.tsx
deleted file mode 100644
index 7f94935..0000000
--- a/src/components/pages/portfolio/pageTitle/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client';
-
-import { useRef } from 'react';
-
-import styles from './index.module.scss';
-
-export const PageTitle = () => {
-  const titleRef = useRef<HTMLHeadingElement>(null);
-
-  const handleScroll = () =>
-    titleRef.current?.appendChild(titleRef.current?.firstElementChild as Node);
-
-  titleRef.current?.addEventListener('animationiteration', handleScroll);
-
-  return (
-    <h2 className={styles['page-title']} ref={titleRef}>
-      <span>PORTFOLIO</span>
-      <span>PORTFOLIO</span>
-    </h2>
-  );
-};