diff --git a/package-lock.json b/package-lock.json
index 18cfee95..73e946bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "ui-warped-map",
         "ui-manchette",
         "ui-manchette-with-spacetimechart",
+        "ui-trackoccupancydiagram",
         "storybook"
       ],
       "devDependencies": {
@@ -3025,6 +3026,10 @@
       "resolved": "ui-speedspacechart",
       "link": true
     },
+    "node_modules/@osrd-project/ui-trackoccupancydiagram": {
+      "resolved": "ui-trackoccupancydiagram",
+      "link": true
+    },
     "node_modules/@osrd-project/ui-warped-map": {
       "resolved": "ui-warped-map",
       "link": true
@@ -17947,6 +17952,30 @@
         "react": ">=18.0"
       }
     },
+    "ui-trackoccupancydiagram": {
+      "name": "@osrd-project/ui-trackoccupancydiagram",
+      "version": "0.0.1-dev",
+      "license": "LGPL-3.0-or-later",
+      "dependencies": {
+        "@types/chroma-js": "^2.4.4",
+        "chroma-js": "^3.1.1",
+        "classnames": "^2.5.1",
+        "tailwindcss": "^3.4.1"
+      },
+      "devDependencies": {
+        "autoprefixer": "^10.4.17",
+        "postcss": "^8.4.37",
+        "postcss-assets": "^6.0.0",
+        "postcss-import": "^16.0.0",
+        "postcss-preset-env": "^10.0.5",
+        "rollup-plugin-livereload": "^2.0.5",
+        "rollup-plugin-postcss": "^4.0.2",
+        "rollup-plugin-serve": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": ">=18.0"
+      }
+    },
     "ui-warped-map": {
       "name": "@osrd-project/ui-warped-map",
       "version": "0.0.1-dev",
diff --git a/package.json b/package.json
index ca4fbccb..43daa0ee 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "ui-warped-map",
     "ui-manchette",
     "ui-manchette-with-spacetimechart",
+    "ui-trackoccupancydiagram",
     "storybook"
   ],
   "engines": {
diff --git a/storybook/.storybook/main.ts b/storybook/.storybook/main.ts
index 800debf3..e92340f8 100644
--- a/storybook/.storybook/main.ts
+++ b/storybook/.storybook/main.ts
@@ -5,9 +5,9 @@ import { mergeConfig } from 'vite';
 /** @type { import('@storybook/html-vite').StorybookConfig } */
 const config: StorybookConfig = {
   stories: [
-    '../stories/**/stories.ts',
-    '../../**/src/**/*.mdx',
+    // TODO: remove this when every stories are migrated to `@osrd-project/stroybook/stories/`
     '../../**/src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
   addons: [
     getAbsolutePath('@storybook/addon-links'),
diff --git a/storybook/stories/TrackOccupancyDiagram/TrackOccupancyDiagram.stories.tsx b/storybook/stories/TrackOccupancyDiagram/TrackOccupancyDiagram.stories.tsx
new file mode 100644
index 00000000..bf3a5a7f
--- /dev/null
+++ b/storybook/stories/TrackOccupancyDiagram/TrackOccupancyDiagram.stories.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+  TrackOccupancyManchette,
+  TrackOccupancyCanvas,
+} from '../../../ui-trackoccupancydiagram/src/index';
+
+const TrackOccupancyDiagram = () => (
+  <div>
+    <TrackOccupancyManchette />
+    <TrackOccupancyCanvas />
+  </div>
+);
+
+const meta: Meta<typeof TrackOccupancyDiagram> = {
+  title: 'TrackOccupancyDiagram/Rendering',
+  component: TrackOccupancyDiagram,
+  decorators: [(Story) => <Story />],
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+  args: {},
+
+  render: () => <TrackOccupancyDiagram />,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TrackOccupancyDiagram>;
+
+export const TrackOccupancyDiagramStoryDefault: Story = {
+  args: {},
+};
diff --git a/storybook/stories/just-a-test.mdx b/storybook/stories/just-a-test.mdx
deleted file mode 100644
index 7a5a657f..00000000
--- a/storybook/stories/just-a-test.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-<Meta title="Just a test" />
diff --git a/storybook/tsconfig.json b/storybook/tsconfig.json
index bc6fa727..e35a0a62 100644
--- a/storybook/tsconfig.json
+++ b/storybook/tsconfig.json
@@ -1,8 +1,8 @@
 {
   "extends": "../tsconfig.base.json",
-  "include": [".storybook/*.tsx", "./stories/**/*"],
+  "include": [".storybook/*.tsx", "stories/**/*"],
   "compilerOptions": {
-    "rootDir": "./src",
+    "rootDir": "../",
     "outDir": "./dist",
     "declarationDir": "./dist"
   }
diff --git a/ui-trackoccupancydiagram/README.md b/ui-trackoccupancydiagram/README.md
new file mode 100644
index 00000000..e69de29b
diff --git a/ui-trackoccupancydiagram/package.json b/ui-trackoccupancydiagram/package.json
new file mode 100644
index 00000000..55ed3cc9
--- /dev/null
+++ b/ui-trackoccupancydiagram/package.json
@@ -0,0 +1,58 @@
+{
+  "name": "@osrd-project/ui-trackoccupancydiagram",
+  "version": "0.0.1-dev",
+  "license": "LGPL-3.0-or-later",
+  "bugs": "https://github.com/osrd-project/osrd-ui/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/osrd-project/osrd-ui.git",
+    "directory": "ui-trackoccupancydiagram"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.esm.js",
+  "style": "dist/theme.css",
+  "files": [
+    "/dist"
+  ],
+  "exports": {
+    "./dist/theme.css": "./dist/theme.css",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.esm.js"
+    }
+  },
+  "scripts": {
+    "rollup": "rollup -c",
+    "clean": "rimraf dist",
+    "build": "npm run rollup",
+    "watch": "NODE_ENV=development rollup -c -w",
+    "test": "vitest run --dir src/__tests__",
+    "prepublishOnly": "npm run clean && npm run build",
+    "lint": "eslint src --max-warnings 0",
+    "lint:fix": "eslint src --fix"
+  },
+  "dependencies": {
+    "@types/chroma-js": "^2.4.4",
+    "chroma-js": "^3.1.1",
+    "classnames": "^2.5.1",
+    "tailwindcss": "^3.4.1"
+  },
+  "peerDependencies": {
+    "react": ">=18.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.37",
+    "postcss-assets": "^6.0.0",
+    "postcss-import": "^16.0.0",
+    "postcss-preset-env": "^10.0.5",
+    "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-serve": "^1.1.1"
+  }
+}
diff --git a/ui-trackoccupancydiagram/rollup.config.js b/ui-trackoccupancydiagram/rollup.config.js
new file mode 100644
index 00000000..404286dc
--- /dev/null
+++ b/ui-trackoccupancydiagram/rollup.config.js
@@ -0,0 +1,3 @@
+import generateBaseRollupConfig from '../rollup-base.config.js';
+
+export default generateBaseRollupConfig('osrdTrackOccupancyDiagram', ['react']);
diff --git a/ui-trackoccupancydiagram/src/__tests__/utils.spec.ts b/ui-trackoccupancydiagram/src/__tests__/utils.spec.ts
new file mode 100644
index 00000000..4f7239e8
--- /dev/null
+++ b/ui-trackoccupancydiagram/src/__tests__/utils.spec.ts
@@ -0,0 +1,7 @@
+import { describe, expect, it } from 'vitest';
+
+describe('test to remove', () => {
+  it('should return the good value', () => {
+    expect(1 + 1).toEqual(2);
+  });
+});
diff --git a/ui-trackoccupancydiagram/src/components/TrackOccupancyCanvas.tsx b/ui-trackoccupancydiagram/src/components/TrackOccupancyCanvas.tsx
new file mode 100644
index 00000000..1231e9d9
--- /dev/null
+++ b/ui-trackoccupancydiagram/src/components/TrackOccupancyCanvas.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const TrackOccupancyCanvas = () => <div>TrackOccupancyCanvas</div>;
+
+export default TrackOccupancyCanvas;
diff --git a/ui-trackoccupancydiagram/src/components/TrackOccupancyManchette.tsx b/ui-trackoccupancydiagram/src/components/TrackOccupancyManchette.tsx
new file mode 100644
index 00000000..5f3fdcb2
--- /dev/null
+++ b/ui-trackoccupancydiagram/src/components/TrackOccupancyManchette.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const TrackOccupancyManchette = () => <div>TrackOccupancyManchette</div>;
+
+export default TrackOccupancyManchette;
diff --git a/ui-trackoccupancydiagram/src/index.ts b/ui-trackoccupancydiagram/src/index.ts
new file mode 100644
index 00000000..32bfef2f
--- /dev/null
+++ b/ui-trackoccupancydiagram/src/index.ts
@@ -0,0 +1,5 @@
+import '@osrd-project/ui-core/dist/theme.css';
+import './styles/main.css';
+
+export { default as TrackOccupancyCanvas } from './components/TrackOccupancyCanvas';
+export { default as TrackOccupancyManchette } from './components/TrackOccupancyManchette';
diff --git a/ui-trackoccupancydiagram/src/styles/main.css b/ui-trackoccupancydiagram/src/styles/main.css
new file mode 100644
index 00000000..a31e4441
--- /dev/null
+++ b/ui-trackoccupancydiagram/src/styles/main.css
@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
diff --git a/ui-trackoccupancydiagram/tailwind.config.js b/ui-trackoccupancydiagram/tailwind.config.js
new file mode 100644
index 00000000..899a9c7f
--- /dev/null
+++ b/ui-trackoccupancydiagram/tailwind.config.js
@@ -0,0 +1,6 @@
+import osrdUiPreset from '../tailwind-preset.js';
+/** @type {import('tailwindcss').Config} */
+export default {
+  presets: [osrdUiPreset],
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+};
diff --git a/ui-trackoccupancydiagram/tsconfig.json b/ui-trackoccupancydiagram/tsconfig.json
new file mode 100644
index 00000000..8e45cdf9
--- /dev/null
+++ b/ui-trackoccupancydiagram/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.base.json",
+  "include": ["./src/**/*"],
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "declarationDir": "./dist",
+    "typeRoots": ["./node_modules/@types", "../raw.d.ts"]
+  }
+}